/* ─── RESET & BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'DM Sans',sans-serif;line-height:1.6;overflow-x:hidden;transition:background .4s,color .4s}

/* ─── DESIGN TOKENS ───────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#080b12;--bg2:#0d1220;--bg3:#111827;
  --surface:rgba(255,255,255,.04);--surface2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.08);--text:#e8ecf4;--text2:#8b95a8;--text3:#5c6679;
  --accent:#00e5ff;--accent2:#7c3aed;--accent3:#f59e0b;
  --grad:linear-gradient(135deg,#00e5ff 0%,#7c3aed 100%);
  --grad2:linear-gradient(135deg,#7c3aed 0%,#f59e0b 100%);
  --shadow:0 25px 60px rgba(0,0,0,.5);--shadow-sm:0 4px 20px rgba(0,0,0,.3);
}
[data-theme="light"]{
  --bg:#f7f8fc;--bg2:#eef0f8;--bg3:#e4e7f2;
  --surface:rgba(255,255,255,.8);--surface2:rgba(255,255,255,.95);
  --border:rgba(0,0,0,.09);--text:#0d111c;--text2:#4a5168;--text3:#8b95a8;
  --accent:#0080ff;--accent2:#6d28d9;--accent3:#d97706;
  --grad:linear-gradient(135deg,#0080ff 0%,#6d28d9 100%);
  --grad2:linear-gradient(135deg,#6d28d9 0%,#d97706 100%);
  --shadow:0 25px 60px rgba(0,0,0,.12);--shadow-sm:0 4px 20px rgba(0,0,0,.08);
}
body{background:var(--bg);color:var(--text)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.4}

/* ─── TYPOGRAPHY ──────────────────────────────────────────── */
.display{font-family:'Bebas Neue',sans-serif;line-height:.95;letter-spacing:.02em}
.heading{font-family:'Syne',sans-serif;font-weight:800;line-height:1.1}
.sub{font-family:'Syne',sans-serif;font-weight:600}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-text2{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── NAV ─────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0;transition:all .4s}
#nav.scrolled{background:rgba(8,11,18,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:12px 0}
[data-theme="light"] #nav.scrolled{background:rgba(247,248,252,.9)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Bebas Neue',sans-serif;font-size:2rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em;text-decoration:none}
.nav-back{display:flex;align-items:center;gap:8px;color:var(--text2);font-family:'Syne',sans-serif;font-size:.85rem;font-weight:600;text-decoration:none;letter-spacing:.05em;transition:color .2s}
.nav-back:hover{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:12px}
#theme-toggle{background:var(--surface2);border:1px solid var(--border);width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s;color:var(--text)}
#theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:100px;font-family:'Syne',sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s;text-decoration:none;border:none;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 0 30px rgba(0,229,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(0,229,255,.45)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 0 30px rgba(37,211,102,.3)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(37,211,102,.5)}

/* ─── LAYOUT ──────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:100px 0;position:relative;z-index:1}
.section-label{font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:block}
.divider{width:60px;height:3px;background:var(--grad);border-radius:2px;margin:16px 0 24px}

/* ─── HERO ────────────────────────────────────────────────── */
.svc-hero{min-height:60vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:100px}
.svc-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 60% 40%,rgba(0,229,255,.08) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 20% 80%,rgba(124,58,237,.1) 0%,transparent 60%),var(--bg)}
.svc-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:60px 60px}
.svc-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.svc-kicker{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:6px 16px 6px 8px;margin-bottom:28px;font-family:'Syne',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.svc-kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.5)}50%{box-shadow:0 0 0 8px rgba(0,229,255,0)}}
.svc-hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,7vw,5.5rem);line-height:.9;letter-spacing:.03em;margin-bottom:24px}
.svc-hero-desc{color:var(--text2);font-size:1.05rem;line-height:1.7;max-width:480px;margin-bottom:36px}
.svc-hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.svc-hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.svc-mockup{width:100%;max-width:420px;background:var(--surface2);border:1px solid var(--border);border-radius:28px;padding:36px;backdrop-filter:blur(20px);box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.svc-mockup-icon{font-size:3.5rem;margin-bottom:20px}
.svc-mockup-tag{display:inline-block;background:rgba(0,229,255,.1);color:var(--accent);border-radius:6px;padding:3px 10px;font-size:.72rem;font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.svc-mockup-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:10px}
.svc-mockup-sub{color:var(--text2);font-size:.85rem;line-height:1.6}
.svc-mockup-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{padding:5px 12px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-family:'Syne',sans-serif;font-size:.72rem;font-weight:600;color:var(--text2)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.orb1{width:300px;height:300px;background:rgba(0,229,255,.06);top:-60px;right:-60px}
.orb2{width:200px;height:200px;background:rgba(124,58,237,.08);bottom:60px;left:-40px}

/* ─── FEATURES GRID ───────────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:56px}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;transition:all .3s;position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s}
.feat-card:hover::before{opacity:.04}
.feat-card:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.2);box-shadow:var(--shadow)}
.feat-card>*{position:relative;z-index:1}
.feat-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:20px;background:var(--surface2);border:1px solid var(--border)}
.feat-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.98rem;margin-bottom:8px}
.feat-desc{color:var(--text3);font-size:.83rem;line-height:1.6}

/* ─── PRICING ─────────────────────────────────────────────── */
#pricing{background:var(--bg2)}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:56px}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:36px;transition:all .3s;position:relative;overflow:hidden}
.price-card.featured{border-color:rgba(0,229,255,.35);background:rgba(0,229,255,.04);box-shadow:0 0 40px rgba(0,229,255,.08)}
.price-badge{display:inline-block;background:var(--grad);color:#fff;border-radius:6px;padding:3px 12px;font-size:.72rem;font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.price-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;margin-bottom:8px}
.price-amount{font-family:'Bebas Neue',sans-serif;font-size:3.5rem;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.price-period{color:var(--text3);font-size:.82rem;margin-bottom:24px}
.price-features{list-style:none;margin-bottom:28px}
.price-features li{color:var(--text2);font-size:.87rem;padding:7px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.price-features li::before{content:'✓';color:var(--accent);font-weight:700;font-size:.8rem}
.price-cta{width:100%;text-align:center;justify-content:center}

/* ─── PROCESS STRIP ───────────────────────────────────────── */
.process-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-top:56px;position:relative}
.proc-step{text-align:center;padding:28px 20px;background:var(--surface);border:1px solid var(--border);border-radius:20px;transition:all .3s}
.proc-step:hover{border-color:rgba(0,229,255,.2);transform:translateY(-4px)}
.proc-num{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}
.proc-label{font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;margin-bottom:6px}
.proc-desc{color:var(--text3);font-size:.78rem;line-height:1.5}

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq-list{max-width:760px;margin:48px auto 0}
.faq-item{border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:12px;background:var(--surface)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;gap:16px;user-select:none}
.faq-q-text{font-family:'Syne',sans-serif;font-weight:600;font-size:.92rem}
.faq-chevron{color:var(--accent);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}
.faq-item.open .faq-a{max-height:200px;padding:0 24px 20px}
.faq-a p{color:var(--text2);font-size:.88rem;line-height:1.7}

/* ─── CTA ─────────────────────────────────────────────────── */
.cta-section{background:var(--bg2);text-align:center;padding:100px 0}
.cta-inner{max-width:600px;margin:0 auto}
.cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);line-height:.95;letter-spacing:.02em;margin-bottom:20px}
.cta-sub{color:var(--text2);font-size:1.05rem;line-height:1.7;margin-bottom:36px}
.cta-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ─── FOOTER ──────────────────────────────────────────────── */
footer{background:var(--bg3);border-top:1px solid var(--border);padding:40px 0;text-align:center}
.footer-copy{color:var(--text3);font-size:.82rem;font-family:'Syne',sans-serif}
.footer-copy a{color:var(--accent);text-decoration:none}

/* ─── FLOATING ────────────────────────────────────────────── */
.float-wa{position:fixed;bottom:88px;right:24px;z-index:900;width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);cursor:pointer;transition:all .3s;text-decoration:none;font-size:1.5rem}
.float-wa:hover{transform:scale(1.12);box-shadow:0 6px 30px rgba(37,211,102,.6)}
.float-top{position:fixed;bottom:28px;right:24px;z-index:900;width:44px;height:44px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;color:var(--text2);font-size:.9rem}
.float-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.float-top.show{display:flex}

/* ─── ANIMATIONS ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
.reveal-right.visible{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.stagger.visible>*{opacity:1;transform:none}
.stagger.visible>*:nth-child(1){transition-delay:.05s}
.stagger.visible>*:nth-child(2){transition-delay:.1s}
.stagger.visible>*:nth-child(3){transition-delay:.15s}
.stagger.visible>*:nth-child(4){transition-delay:.2s}
.stagger.visible>*:nth-child(5){transition-delay:.25s}
.stagger.visible>*:nth-child(6){transition-delay:.3s}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:768px){
  .svc-hero-inner{grid-template-columns:1fr}
  .svc-hero-visual{display:none}
  .section{padding:72px 0}
  .cta-btns{flex-direction:column;align-items:center}
}