:root { --black:#000; --dark-gray:#1A1A1A; --mid-gray:#2D2D2D; --white:#FFF; --gg:linear-gradient(135deg,#C9A961 0%,#8B6F3D 100%); --gd:linear-gradient(135deg,#1A1A1A 0%,#000 100%) }
.hero { position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:100px;background:var(--gd) }
.hero-pat { position:absolute;inset:0;opacity:.08;background-image:linear-gradient(var(--gold) 1px,transparent 1px),linear-gradient(90deg,var(--gold) 1px,transparent 1px);background-size:50px 50px;animation:slide 20s linear infinite }
@keyframes slide {to{transform:translate(50px,50px)}}
.hero-content { text-align:center;max-width:900px;padding:60px 40px;position:relative;z-index:1;animation:fadeUp 1.2s ease }
.badge { display:inline-block;padding:8px 20px;border:1px solid rgba(201,169,97,.4);color:var(--gold);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:30px }
.hero-content h1 { font-size:clamp(36px,5.5vw,64px);font-weight:200;margin-bottom:20px;line-height:1.1;letter-spacing:-.03em }
.gt { background:var(--gg);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:400 }
.hero-tagline { font-size:15px;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px }
.hero-content p { font-size:18px;color:rgba(255,255,255,.75);font-weight:300;max-width:640px;margin:0 auto 40px }
.price-wrap { display:inline-flex;align-items:baseline;gap:8px }
.plabel { font-size:14px;color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase }
.pvalue { font-size:clamp(34px,5vw,50px);font-weight:200;color:var(--gold);letter-spacing:-.02em }
.psub { font-size:14px;color:rgba(255,255,255,.5);margin-left:4px }
.hero-cta { margin-top:40px }
.btn-sec { display:inline-block;padding:16px 40px;border:1px solid rgba(201,169,97,.5);color:var(--gold);text-decoration:none;font-weight:300;font-size:15px;letter-spacing:.05em;text-transform:uppercase;transition:all .3s }
.btn-sec:hover { background:rgba(201,169,97,.1);border-color:var(--gold) }
section { padding:100px 40px }
.sc { max-width:1200px;margin:0 auto }
.slabel { font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:16px }
.stitle { font-size:clamp(30px,4vw,50px);font-weight:200;margin-bottom:20px }
.sdiv { width:60px;height:1px;background:var(--gg);margin-bottom:60px }
.func-sec { background:var(--dark-gray) }
.func-cols { display:grid;grid-template-columns:1fr 1fr;gap:3px }
.func-col { padding:50px;background:var(--black) }
.func-col h3 { font-size:20px;font-weight:400;color:var(--gold);margin-bottom:30px }
.func-list { display:flex;flex-direction:column;gap:14px }
.func-item { display:flex;align-items:flex-start;gap:14px;font-size:15px;color:rgba(255,255,255,.8);font-weight:300;line-height:1.5 }
.func-item::before { content:"→";color:var(--gold);flex-shrink:0;margin-top:1px }
.panel-sec { background:var(--black) }
.panel-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px }
.panel-item { padding:35px 40px;background:var(--dark-gray);border-left:1px solid rgba(201,169,97,.08);transition:all .3s;opacity:0;transform:translateY(20px) }
.panel-item.vis { opacity:1;transform:translateY(0);transition:all .5s }
.panel-item:hover { background:rgba(201,169,97,.04);border-left-color:var(--gold) }
.panel-icon { font-size:24px;margin-bottom:12px }
.panel-title { font-size:16px;font-weight:400;color:var(--white);margin-bottom:8px }
.panel-desc { font-size:14px;color:rgba(255,255,255,.55);font-weight:300;line-height:1.6 }
.web-sec { background:var(--dark-gray) }
.web-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px }
.web-item { padding:28px 35px;background:var(--black);border-left:1px solid rgba(201,169,97,.08);transition:all .3s;opacity:0;transform:translateY(20px) }
.web-item.vis { opacity:1;transform:translateY(0);transition:all .5s }
.web-item:hover { border-left-color:var(--gold) }
.web-title { font-size:15px;font-weight:400;display:flex;align-items:center;gap:10px }
.web-title::before { content:"✔";color:var(--gold);font-size:13px }
.host-sec { background:var(--black) }
.saas-card { border:1px solid rgba(201,169,97,.2);padding:60px;max-width:760px;position:relative }
.saas-card::before { content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--gg) }
.saas-badge { display:inline-block;padding:5px 14px;background:rgba(201,169,97,.1);border:1px solid rgba(201,169,97,.3);font-size:12px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px }
.saas-price { font-size:42px;font-weight:200;color:var(--gold);margin:10px 0 5px }
.saas-period { font-size:14px;color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase;margin-bottom:30px }
.saas-includes { display:flex;flex-direction:column;gap:12px;margin-bottom:40px }
.saas-item { display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.8);font-weight:300 }
.saas-item::before { content: '·';color:var(--gold) }
.pay-opts { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;margin-top:10px }
.pay-opt { padding:18px 20px;background:var(--dark-gray);text-align:center }
.pay-opt-name { font-size:13px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px }
.pay-opt-val { font-size:15px;font-weight:400 }
.pay-opt.special .pay-opt-val { color:var(--gold) }
.var-note { background:rgba(201,169,97,.04);border:1px solid rgba(201,169,97,.12);padding:30px 35px;margin-top:50px;max-width:760px }
.var-note h4 { color:var(--gold);font-size:16px;font-weight:400;margin-bottom:16px }
.var-note ul { list-style:none;display:flex;flex-direction:column;gap:10px }
.var-note li { font-size:14px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:10px }
.var-note li::before { content:"·";color:var(--gold);font-size:18px }
.note { background:rgba(201,169,97,.06);border:1px solid rgba(201,169,97,.15);border-left:3px solid var(--gold);padding:20px 25px;margin-top:24px;font-size:14px;color:rgba(255,255,255,.65);max-width:760px }
.cases-sec { background:var(--dark-gray) }
.proj-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:3px;margin-bottom:60px }
.proj-card { position:relative;overflow:hidden;background:var(--dark-gray);transition:all .5s }
.proj-card:hover { transform:translateY(-4px) }
.proj-img { position:relative;width:100%;height:240px;overflow:hidden;background:var(--mid-gray);display:flex;align-items:center;justify-content:center }
.proj-overlay { position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.8));opacity:0;transition:opacity .4s }
.proj-card:hover .proj-overlay { opacity:1 }
.proj-num { position:absolute;top:16px;right:20px;font-size:52px;font-weight:100;color:rgba(201,169,97,.25);font-family:Georgia,serif;transition:all .4s }
.proj-card:hover .proj-num { color:var(--gold);transform:scale(1.15) }
.proj-info { padding:28px 30px 20px;background:var(--black) }
.proj-title { font-size:22px;font-weight:300;margin-bottom:10px;transition:color .3s }
.proj-card:hover .proj-title { color:var(--gold) }
.proj-meta { display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.55);font-size:13px }
.abadge { display:inline-block;padding:3px 10px;background:rgba(201,169,97,.1);border:1px solid rgba(201,169,97,.3);font-size:11px;letter-spacing:.05em;text-transform:uppercase;transition:all .3s }
.proj-card:hover .abadge { background:var(--gg);color:var(--black);border-color:var(--gold) }
.ptype { color:var(--gold);font-weight:400 }
.proj-det { padding:0 30px 28px;background:var(--black) }
.proj-desc { color:rgba(255,255,255,.65);font-size:14px;line-height:1.6;margin-bottom:14px }
.proj-tech { display:flex;gap:8px;flex-wrap:wrap }
.ttag { padding:4px 12px;background:rgba(201,169,97,.08);border:1px solid rgba(201,169,97,.18);font-size:11px;color:var(--gold) }
.ph-text { font-size:13px;color:rgba(255,255,255,.3);letter-spacing:.08em;text-transform:uppercase }
.ver-todos { text-align:center }
.fc { max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:60px;margin-bottom:60px }
.fs h3 { margin-bottom:25px;color:var(--gold);font-weight:300;font-size:18px }
.fs p { color:rgba(255,255,255,.6);margin-bottom:10px;font-weight:300;font-size:14px }
.sl { display:flex;gap:16px;margin-top:25px }
.sla { display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(201,169,97,.3);color:var(--gold);text-decoration:none;transition:all .3s }
.sla:hover { background:var(--gold);color:var(--black);transform:translateY(-3px) }
.fb { text-align:center;padding-top:40px;border-top:1px solid rgba(201,169,97,.1) }
.fb p { color:rgba(255,255,255,.4);font-size:13px;line-height:1.8;font-weight:300 }
@media (max-width:768px) {
    section { padding:70px 24px }
    .saas-card { padding:40px 28px }
    .proj-grid, .func-cols { grid-template-columns:1fr }
    .func-col { padding:40px 30px }
}