/* ═══════════════════════════════════════════════════════════
   SiteGen Technology — Ads Landing Page
   Brand tokens taken from sitegentechnology.com (main.css)
   Themed: dark is the default, [data-theme="light"] flips it.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Brand — constant in both themes ── */
  --green:        #17BD54;
  --green-2:      #0FB04B;
  --green-lt:     #8CF0B2;
  --purple:       #6F56DA;
  --blue:         #3795FC;
  --yellow:       #FFD247;
  --wa:           #25D366;
  --red:          #FF6B6B;

  /* ── Theme: DARK (default) ── */
  --bg:           #06070A;
  --bg-2:         #0A0B0F;
  --text:         #EDEFF3;
  --muted:        #99A1AE;
  --muted-2:      #6C7480;

  --line:         rgba(255,255,255,.08);
  --line-2:       rgba(255,255,255,.14);

  --card-a:       rgba(255,255,255,.04);
  --card-b:       rgba(255,255,255,.012);
  --card-hi:      rgba(255,255,255,.045);
  --chip:         rgba(255,255,255,.04);
  --chip-2:       rgba(255,255,255,.06);

  --input-bg:     rgba(0,0,0,.28);
  --input-bg-2:   rgba(0,0,0,.42);

  --glass:        rgba(18,21,28,.86);
  --nav-bg:       rgba(6,7,10,.78);
  --panel:        rgba(10,12,17,.97);

  --shadow-lg:    0 40px 90px -34px rgba(0,0,0,.9);
  --shadow-md:    0 26px 60px -18px rgba(0,0,0,.85);
  --shadow-xl:    0 60px 120px -30px rgba(0,0,0,.9);

  --grid-line:    rgba(255,255,255,.028);
  --scrim:        rgba(6,7,10,.72);
  --stack-frame:  #0A0B0F;
  --brand-ink:    var(--green);
  --brand-soft:   rgba(23,189,84,.09);
  --brand-line:   rgba(23,189,84,.25);
  --brand-glow:   rgba(23,189,84,.14);

  --grad-a:       var(--green);
  --grad-b:       var(--green-lt);
  --grad-c:       var(--blue);

  --mock-bg:      linear-gradient(160deg,#12151C,#0B0D12);
  --mock-el:      rgba(255,255,255,.14);
  --mock-el-2:    rgba(255,255,255,.2);
  --mock-surf:    rgba(255,255,255,.045);

  --orb-1:        rgba(23,189,84,.5);
  --orb-2:        rgba(111,86,218,.42);
  --orb-3:        rgba(23,189,84,.24);
  --hero-vig:     rgba(6,7,10,.82);
  --loader-num:   linear-gradient(180deg,#fff,rgba(255,255,255,.28));
  --gl-opacity:   .9;

  --ff:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-serif:     'Instrument Serif', Georgia, serif;

  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px;
  --container: 1280px;
  --ease: cubic-bezier(.16,1,.3,1);
  --glow-green: 0 0 0 1px rgba(23,189,84,.28), 0 18px 50px -14px rgba(23,189,84,.45);
}

/* ── Theme: LIGHT ── */
[data-theme="light"]{
  --bg:           #F7F8FA;
  --bg-2:         #FFFFFF;
  --text:         #0C0E13;
  --muted:        #525A67;
  --muted-2:      #7C8492;

  --line:         rgba(12,14,19,.10);
  --line-2:       rgba(12,14,19,.16);

  --card-a:       #FFFFFF;
  --card-b:       #FFFFFF;
  --card-hi:      #FFFFFF;
  --chip:         rgba(12,14,19,.04);
  --chip-2:       rgba(12,14,19,.06);

  --input-bg:     #FFFFFF;
  --input-bg-2:   #FFFFFF;

  --glass:        rgba(255,255,255,.92);
  --nav-bg:       rgba(247,248,250,.85);
  --panel:        rgba(255,255,255,.97);

  --shadow-lg:    0 30px 70px -30px rgba(12,20,30,.28);
  --shadow-md:    0 18px 44px -16px rgba(12,20,30,.22);
  --shadow-xl:    0 40px 80px -28px rgba(12,20,30,.3);

  --grid-line:    rgba(12,14,19,.05);
  --scrim:        rgba(255,255,255,.5);
  --brand-ink:    #0E8F3E;
  --brand-soft:   rgba(23,189,84,.1);
  --brand-line:   rgba(23,189,84,.32);
  --brand-glow:   rgba(23,189,84,.12);

  --grad-a:       #0E8F3E;
  --grad-b:       #12A94D;
  --grad-c:       #1E6FD9;

  --mock-bg:      linear-gradient(160deg,#FFFFFF,#EFF2F6);
  --mock-el:      rgba(12,14,19,.13);
  --mock-el-2:    rgba(12,14,19,.22);
  --mock-surf:    rgba(12,14,19,.04);

  --orb-1:        rgba(23,189,84,.26);
  --orb-2:        rgba(111,86,218,.18);
  --orb-3:        rgba(23,189,84,.14);
  --hero-vig:     rgba(247,248,250,.86);
  --loader-num:   linear-gradient(180deg,#0C0E13,rgba(12,14,19,.3));
  --gl-opacity:   .5;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .45s ease, color .45s ease;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--green); color:#04120a; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container--narrow{ max-width:880px; }

/* split-text atoms — line-height pinned so serif <em> words and sans words
   produce identical line boxes. */
.sw{
  display:inline-block; overflow:hidden; vertical-align:top;
  line-height:1; padding-bottom:.24em; margin-bottom:-.24em;
}
.swi{ display:inline-block; will-change:transform; }

/* An overflow:hidden descendant breaks an ancestor's background-clip:text,
   so gradient headline words must paint their own gradient. */
.hero__title em .swi,
.sec-title em .swi,
.exit__box h3 em .swi{
  background:linear-gradient(100deg,var(--grad-a) 5%,var(--grad-b) 48%,var(--grad-c) 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ═══════════════ LOADER ═══════════════ */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--bg); overflow:hidden; }
.loader__panels{ position:absolute; inset:0; display:flex; z-index:2; }
.loader__panels i{ flex:1; background:var(--bg); border-right:1px solid var(--grid-line); }

.loader__inner{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(24px,4vw,54px);
}
.loader__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.loader__brand{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:clamp(16px,2vw,20px); letter-spacing:-.03em; }
.loader__brand img{ width:38px; height:38px; object-fit:contain; }
.loader__brand em{ font-style:normal; font-weight:500; color:var(--brand-ink); }
.loader__meta{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); text-align:right; }

.loader__mid{ flex:1; display:flex; align-items:center; }
.loader__word{
  position:relative; width:100%; height:1.3em; overflow:hidden;
  font-size:clamp(40px,9vw,132px); line-height:1.06;
  font-weight:800; letter-spacing:-.055em;
}
.loader__word span{
  position:absolute; left:0; top:0; white-space:nowrap; padding-bottom:.24em;
  background:linear-gradient(100deg,var(--text) 0%,var(--grad-b) 45%,var(--grad-c) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.loader__word span:not(:first-child){ opacity:0; }

.loader__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,5vw,70px); }
.loader__count{
  display:flex; align-items:flex-start; line-height:.8;
  font-weight:800; letter-spacing:-.06em; font-variant-numeric:tabular-nums;
  font-size:clamp(72px,17vw,230px);
  background:var(--loader-num);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.loader__count em{ font-style:normal; font-size:.25em; margin-top:.35em; margin-left:.06em; -webkit-text-fill-color:var(--brand-ink); }
.loader__barwrap{ flex:1; padding-bottom:clamp(14px,2.5vw,30px); }
.loader__bar{ position:relative; height:2px; width:100%; background:var(--line-2); overflow:hidden; }
.loader__bar i{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,var(--green),var(--blue)); box-shadow:0 0 18px rgba(23,189,84,.9); }
.loader__tags{ display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.loader__tags b{ color:var(--brand-ink); font-weight:600; }

@media (max-width:700px){
  .loader__bottom{ flex-direction:column-reverse; align-items:flex-start; gap:22px; }
  .loader__barwrap{ width:100%; padding-bottom:0; }
  .loader__meta{ display:none; }
}

/* ─────────── Scroll progress ─────────── */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:1000; pointer-events:none; }
.scroll-progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--green),var(--blue),var(--purple)); }

/* ─────────── Custom cursor ─────────── */
.cursor,.cursor-ring{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none; border-radius:50%; opacity:0; }
.cursor{ width:6px; height:6px; background:var(--green); margin:-3px 0 0 -3px; }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(23,189,84,.5); margin:-17px 0 0 -17px; transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s,margin .3s var(--ease); }
.cursor-ring.is-hot{ width:58px; height:58px; margin:-29px 0 0 -29px; background:rgba(23,189,84,.12); border-color:rgba(23,189,84,.85); }
@media (hover:none),(max-width:900px){ .cursor,.cursor-ring{ display:none; } }

/* ─────────── Buttons ─────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  font-weight:600; font-size:15.5px; letter-spacing:-.01em; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
  white-space:nowrap; overflow:hidden; isolation:isolate;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:10px 20px; font-size:14px; }
.btn--lg{ padding:18px 36px; font-size:16.5px; }
.btn--full{ width:100%; }

.btn--primary{ background:linear-gradient(135deg,var(--green),var(--green-2)); color:#04140a; box-shadow:var(--glow-green); }
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn--primary:hover::before{ transform:translateX(120%); }
.btn--primary:hover{ box-shadow:0 0 0 1px rgba(23,189,84,.4), 0 24px 60px -12px rgba(23,189,84,.6); }

.btn--ghost{ background:var(--chip); border-color:var(--line-2); color:var(--text); backdrop-filter:blur(10px); }
.btn--ghost:hover{ background:var(--chip-2); border-color:rgba(23,189,84,.5); }

.btn .arr{ font-style:normal; transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.btn__spin{ display:none; width:17px; height:17px; border:2px solid rgba(0,0,0,.25); border-top-color:#04140a; border-radius:50%; animation:spin .7s linear infinite; }
.btn.is-loading .btn__label{ opacity:.4; }
.btn.is-loading .btn__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ─────────── Navbar ─────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:18px 0; border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background .4s, border-color .4s;
}
.nav.is-stuck{
  padding:11px 0; background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav__brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:18.5px; letter-spacing:-.03em; }
.nav__brand img{ width:34px; height:34px; object-fit:contain; }
.nav__brand em{ font-style:normal; font-weight:500; color:var(--brand-ink); }
.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links > a:not(.btn){
  padding:9px 13px; font-size:14.5px; font-weight:500; color:var(--muted);
  border-radius:100px; transition:color .3s, background .3s;
}
.nav__links > a:not(.btn):hover{ color:var(--text); background:var(--chip); }
.nav__cta{ margin-left:8px; box-shadow:0 10px 26px -14px rgba(23,189,84,.7); }

.nav__actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* theme toggle */
.themetog{
  position:relative; width:60px; height:32px; flex-shrink:0;
  border-radius:100px; cursor:pointer;
  background:var(--chip); border:1px solid var(--line-2);
  transition:background .3s, border-color .3s;
}
.themetog:hover{ border-color:var(--brand-line); }
.themetog__thumb{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  box-shadow:0 4px 12px -3px rgba(23,189,84,.9);
  transition:transform .45s var(--ease);
}
[data-theme="light"] .themetog__thumb{ transform:translateX(28px); }
.themetog svg{
  position:absolute; top:50%; width:15px; height:15px; margin-top:-7.5px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .3s, color .3s;
}
.themetog__moon{ left:7px; color:#04140a; }
.themetog__sun{ right:7px; color:var(--muted-2); }
[data-theme="light"] .themetog__moon{ color:var(--muted-2); }
[data-theme="light"] .themetog__sun{ color:#04140a; }

.nav__burger{
  display:none; width:44px; height:44px; border:1px solid var(--line-2); background:var(--chip);
  border-radius:12px; cursor:pointer; position:relative;
}
.nav__burger span{ position:absolute; left:13px; width:18px; height:1.7px; background:var(--text); border-radius:2px; transition:transform .35s var(--ease); }
.nav__burger span:nth-child(1){ top:18px; }
.nav__burger span:nth-child(2){ top:24px; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

@media (max-width:1080px){
  .nav__burger{ display:block; }
  .nav__links{
    position:fixed; inset:0 0 auto; top:0; padding:96px 24px 34px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--panel); backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform .5s var(--ease), opacity .4s, visibility .4s;
  }
  .nav__links.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav__links > a:not(.btn){ padding:16px 6px; font-size:18px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__cta{ margin:18px 0 0; }
}

/* ─────────── Section shell ─────────── */
.section{ position:relative; padding:clamp(78px,10vw,142px) 0; }
.sec-head{ max-width:820px; margin-bottom:clamp(40px,5.5vw,70px); }
.sec-head--center{ margin-inline:auto; text-align:center; }

.sec-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:100px; margin-bottom:22px;
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line);
}
.sec-title{ font-size:clamp(36px,5.8vw,72px); line-height:1.02; letter-spacing:-.045em; font-weight:800; }
.sec-title em{
  font-style:italic; font-family:var(--ff-serif); font-weight:400; letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--grad-a) 8%,var(--grad-b) 50%,var(--grad-c) 96%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sec-sub{ margin-top:22px; font-size:clamp(16px,1.7vw,19px); color:var(--muted); max-width:660px; }
.sec-head--center .sec-sub{ margin-inline:auto; }

/* ═══════════════ HERO ═══════════════ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:126px 0 84px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
#glCanvas,#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s ease; }
#glCanvas.is-on{ opacity:var(--gl-opacity); }
#heroCanvas.is-on{ opacity:.5; }
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 20%,transparent 78%);
}
.hero__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 55% at 30% 45%,var(--hero-vig),transparent 70%),
             linear-gradient(to bottom,transparent 65%,var(--bg));
}
.orb{ position:absolute; border-radius:50%; filter:blur(95px); opacity:.5; }
.orb--1{ width:520px; height:520px; top:-140px; left:-120px; background:radial-gradient(circle,var(--orb-1),transparent 68%); }
.orb--2{ width:620px; height:620px; bottom:-230px; right:-170px; background:radial-gradient(circle,var(--orb-2),transparent 68%); }
.orb--3{ width:660px; height:660px; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,var(--orb-3),transparent 65%); }

.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.12fr .88fr; gap:54px; align-items:center;
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 17px; border-radius:100px; margin-bottom:24px;
  font-size:13px; font-weight:500; color:var(--muted);
  background:var(--chip); border:1px solid var(--line-2); backdrop-filter:blur(10px);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(23,189,84,.7); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(23,189,84,0); } 100%{ box-shadow:0 0 0 0 rgba(23,189,84,0); } }

.hero__title{ font-size:clamp(38px,4.5vw,66px); line-height:1.02; letter-spacing:-.045em; font-weight:800; }
.hero__title em{
  font-style:italic; font-family:var(--ff-serif); font-weight:400; letter-spacing:-.015em;
  background:linear-gradient(100deg,var(--grad-a) 5%,var(--grad-b) 45%,var(--grad-c) 96%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__sub{ margin-top:22px; font-size:clamp(16px,1.7vw,18.5px); color:var(--muted); max-width:560px; }

.hero__price{ display:flex; align-items:baseline; gap:12px; margin-top:24px; flex-wrap:wrap; }
.hero__price-label{ font-size:14px; color:var(--muted-2); }
.hero__price-value{ font-size:32px; font-weight:800; letter-spacing:-.04em; }
.hero__price-value small{ font-size:13px; font-weight:500; color:var(--muted-2); margin-left:6px; }

.hero__actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

.hero__ticks{ display:flex; flex-wrap:wrap; gap:9px 24px; margin-top:26px; list-style:none; }
.hero__ticks li{ position:relative; padding-left:25px; font-size:14.5px; color:var(--muted); }
.hero__ticks li::before{
  content:'✓'; position:absolute; left:0; top:0;
  width:18px; height:18px; display:grid; place-items:center; font-size:10px; font-weight:800;
  border-radius:50%; background:var(--brand-soft); color:var(--brand-ink);
}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2);
}
.hero__scroll i{ width:1px; height:38px; background:linear-gradient(to bottom,var(--green),transparent); animation:scrolly 2s var(--ease) infinite; }
@keyframes scrolly{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ── Hero 3D stage ── */
.hero__stage{ position:relative; perspective:1600px; min-height:480px; }
.stage3d{ position:relative; transform-style:preserve-3d; width:100%; height:100%; }

.browser{
  position:relative; width:100%; border-radius:16px; overflow:hidden;
  background:var(--mock-bg); border:1px solid var(--line-2);
  box-shadow:var(--shadow-xl), 0 0 90px -30px rgba(23,189,84,.3);
  transform:rotateY(-13deg) rotateX(6deg) rotateZ(1.5deg);
  transform-style:preserve-3d;
}
.browser__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--mock-surf); border-bottom:1px solid var(--line); }
.browser__bar i{ width:9px; height:9px; border-radius:50%; }
.browser__bar i:nth-child(1){ background:#FF5F57; } .browser__bar i:nth-child(2){ background:#FEBC2E; } .browser__bar i:nth-child(3){ background:#28C840; }
.browser__url{ margin-left:12px; flex:1; padding:5px 12px; border-radius:6px; background:var(--chip-2); font-size:10.5px; color:var(--muted-2); }
.browser__body{ padding:18px; }

.mock-nav{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.mock-logo{ width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--green),var(--blue)); }
.mock-links{ display:flex; gap:9px; flex:1; }
.mock-links b{ width:30px; height:5px; border-radius:3px; background:var(--mock-el); }
.mock-btn{ width:52px; height:19px; border-radius:100px; background:linear-gradient(135deg,var(--green),var(--green-2)); }

.mock-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center; margin-bottom:18px; }
.mock-lines span{ display:block; height:9px; border-radius:5px; background:var(--mock-el-2); margin-bottom:8px; }
.mock-lines .l1{ width:92%; }
.mock-lines .l2{ width:70%; background:linear-gradient(90deg,rgba(23,189,84,.75),rgba(55,149,252,.5)); }
.mock-lines .l3{ width:82%; height:5px; background:var(--mock-el); }
.mock-cta{ width:74px; height:22px; border-radius:100px; background:var(--green); margin-top:14px; box-shadow:0 8px 22px -6px rgba(23,189,84,.8); }
.mock-visual{ height:104px; border-radius:11px; background:linear-gradient(140deg,rgba(23,189,84,.24),rgba(111,86,218,.24)); border:1px solid var(--line); }
.mock-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mock-card{ height:50px; border-radius:9px; background:var(--mock-surf); border:1px solid var(--line); }

.float-card{
  position:absolute; display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:14px;
  background:var(--glass); border:1px solid var(--line-2);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-md);
  will-change:transform;
}
.fc__icon{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.fc__icon--green{ background:rgba(37,211,102,.16); color:var(--wa); }
.fc__icon--blue{ background:rgba(55,149,252,.16); color:var(--blue); }
.fc__text{ display:flex; flex-direction:column; line-height:1.35; }
.fc__text strong{ font-size:12.5px; font-weight:700; }
.fc__text span{ font-size:11px; color:var(--muted-2); }

.float-card--lead{ top:-7%; left:-10%; }
.float-card--rank{ bottom:12%; right:-5%; }
.float-card--speed{ bottom:-6%; left:0; }
.float-card--mobile{ top:20%; right:-6%; padding:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; }

.fc__ring{ position:relative; width:38px; height:38px; flex-shrink:0; }
.fc__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.fc__ring circle{ fill:none; stroke-width:3.2; }
.fc__ring-bg{ stroke:var(--line-2); }
.fc__ring-fg{ stroke:var(--green); stroke-linecap:round; stroke-dasharray:94.2; stroke-dashoffset:94.2; }
.fc__ring b{ position:absolute; inset:0; display:grid; place-items:center; font-size:11px; font-weight:800; }

.phone{
  width:96px; height:196px; border-radius:20px; padding:7px; position:relative;
  background:var(--mock-bg); border:1px solid var(--line-2);
  box-shadow:var(--shadow-md), 0 0 60px -22px rgba(23,189,84,.45);
}
.phone__notch{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:34px; height:5px; border-radius:100px; background:var(--mock-el); }
.phone__screen{ height:100%; border-radius:15px; background:linear-gradient(170deg,rgba(23,189,84,.14),transparent); padding:20px 11px 11px; display:flex; flex-direction:column; gap:7px; }
.phone__screen span{ height:6px; border-radius:4px; background:var(--mock-el); }
.phone__screen span.w{ width:60%; }
.phone__btn{ margin-top:auto; height:22px; border-radius:100px; background:var(--green); box-shadow:0 8px 20px -6px rgba(23,189,84,.85); }

@media (max-width:1050px){
  .hero{ min-height:auto; padding:124px 0 74px; }
  .hero__inner{ grid-template-columns:1fr; gap:58px; }
  .hero__stage{ min-height:auto; margin-inline:auto; max-width:520px; width:100%; }
  .browser{ transform:rotateY(-8deg) rotateX(4deg); }
  .float-card--lead{ left:-4%; } .float-card--rank{ right:-3%; } .float-card--mobile{ display:none; }
  .hero__scroll{ display:none; }
}
@media (max-width:560px){
  .float-card--speed{ display:none; }
  .float-card--lead{ left:-2%; top:0; } .float-card--rank{ right:-2%; bottom:8%; }
  .browser{ transform:none; }
}

/* ─────────── Marquee ─────────── */
.marquee{ position:relative; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--chip); overflow:hidden; }
.marquee::before,.marquee::after{ content:''; position:absolute; top:0; bottom:0; width:150px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--bg),transparent); }
.marquee::after{ right:0; background:linear-gradient(-90deg,var(--bg),transparent); }
.marquee__track{ display:flex; align-items:center; gap:30px; width:max-content; white-space:nowrap; }
.marquee__track span{ font-size:clamp(16px,2.2vw,24px); font-weight:600; letter-spacing:-.03em; color:var(--muted-2); }
.marquee__track i{ color:var(--brand-ink); font-style:normal; font-size:12px; }

/* ═══════════════ WORK — full-width project cards ═══════════════ */
.work .sec-head{ margin-bottom:clamp(32px,4vw,52px); }

.worklist{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); }

.wcard{
  position:relative; display:block; overflow:hidden;
  height:clamp(400px,42vw,520px);
  border-radius:var(--r-xl);
  background:#07080C;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s;
}
.wcard:hover{
  transform:translateY(-6px);
  border-color:var(--brand-line);
  box-shadow:0 38px 90px -30px rgba(23,189,84,.45);
}

.wcard__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transform:scale(1.03); transform-origin:center top;
  transition:transform 1.2s var(--ease);
}
.wcard:hover .wcard__img{ transform:scale(1.08); }

/* light top tint so each site's own navbar doesn't fight the badges */
.wcard::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to bottom, rgba(4,5,8,.52) 0%, rgba(4,5,8,.08) 20%, transparent 40%);
}

.wcard__num{
  position:absolute; top:clamp(18px,2vw,26px); right:clamp(20px,2.4vw,32px); z-index:4;
  font-size:clamp(38px,4.4vw,64px); font-weight:800; letter-spacing:-.06em;
  line-height:1; color:rgba(255,255,255,.16);
  font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease);
}
.wcard:hover .wcard__num{ color:rgba(23,189,84,.5); }

.wcard__live{
  position:absolute; top:clamp(18px,2vw,26px); left:clamp(20px,2.4vw,32px); z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(4,5,8,.62); border:1px solid rgba(23,189,84,.5); color:#5FE08D;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.wcard__live i{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(23,189,84,.7); animation:pulse 2s infinite; }

.wcard__body{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(24px,2.8vw,42px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,3vw,48px);
}
/* The scrim is anchored to the copy, not to the card height — every
   screenshot has its own headline and a percentage-based gradient lets
   it bleed straight through ours. */
.wcard__body::before{
  content:''; position:absolute; inset:-120px 0 0 0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(4,5,8,.99) 0%,
    rgba(4,5,8,.975) 50%,
    rgba(4,5,8,.87) 70%,
    rgba(4,5,8,.48) 85%,
    rgba(4,5,8,.13) 95%,
    transparent 100%);
}
.wcard__meta{ max-width:660px; }

.wcard__cat{
  display:inline-block; padding:6px 14px; border-radius:100px; margin-bottom:14px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  background:rgba(23,189,84,.18); color:#5FE08D; border:1px solid rgba(23,189,84,.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.wcard__body h3{
  font-size:clamp(26px,3.1vw,42px); font-weight:800; letter-spacing:-.045em;
  line-height:1.04; color:#fff; margin-bottom:11px;
}
.wcard__body p{ font-size:clamp(14.5px,1.4vw,16.5px); color:rgba(255,255,255,.76); margin-bottom:16px; }
.wcard__tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.wcard__tags li{
  padding:6px 13px; border-radius:8px; font-size:12px;
  color:rgba(255,255,255,.88); background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

.wcard__link{
  flex-shrink:0; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-size:15px; font-weight:600;
  background:linear-gradient(135deg,var(--green),var(--green-2)); color:#04140a;
  box-shadow:0 16px 38px -14px rgba(23,189,84,1);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.wcard__link b{ font-size:13px; transition:transform .35s var(--ease); }
.wcard:hover .wcard__link{ transform:translateY(-3px); box-shadow:0 22px 48px -14px rgba(23,189,84,1); }
.wcard:hover .wcard__link b{ transform:translate(3px,-3px); }

/* work CTA banner below the list */
.workcta{
  position:relative; overflow:hidden; margin-top:clamp(40px,5vw,70px);
  padding:clamp(32px,4vw,52px); border-radius:var(--r-xl);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  background:linear-gradient(150deg,rgba(23,189,84,.13),rgba(111,86,218,.08));
  border:1px solid var(--brand-line);
}
.workcta__glow{ position:absolute; width:420px; height:420px; top:-240px; right:-80px; border-radius:50%; background:radial-gradient(circle,rgba(23,189,84,.4),transparent 68%); filter:blur(55px); }
.workcta > div{ position:relative; max-width:620px; }
.workcta h3{ font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.04em; margin-bottom:10px; }
.workcta p{ font-size:16px; color:var(--muted); }
.workcta .btn{ position:relative; }

@media (max-width:900px){
  .wcard{ height:auto; min-height:clamp(420px,72vw,520px); }
  .wcard__body{ flex-direction:column; align-items:stretch; gap:20px; }
  .wcard__body::before{ inset:-70px 0 0 0; }
  .wcard__link{ justify-content:center; }
  .wcard__num{ font-size:34px; }
}
@media (max-width:560px){
  .wcard{ min-height:480px; }
  .wcard__tags li:nth-child(n+4){ display:none; }
  .wcard__body::before{ inset:-50px 0 0 0; }
  /* narrow crop starts on each site's announcement bar — nudge to the hero */
  .wcard__img{ object-position:50% 10%; }
}

/* ─────────── Pricing ─────────── */
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.price-card{
  position:relative; display:flex; flex-direction:column; padding:32px 28px; border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .5s var(--ease);
}
.price-card:hover{ border-color:var(--brand-line); box-shadow:var(--shadow-lg); }
.price-card--featured{
  background:linear-gradient(170deg,rgba(23,189,84,.13),rgba(111,86,218,.06));
  border-color:rgba(23,189,84,.42);
  box-shadow:0 40px 90px -34px rgba(23,189,84,.5);
}
.price-card__badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  padding:6px 17px; border-radius:100px; white-space:nowrap;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(135deg,var(--green),var(--green-2)); color:#04140a;
  box-shadow:0 12px 26px -10px rgba(23,189,84,.9);
}
.price-card__top{ padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.price-card h3{ font-size:21px; font-weight:700; letter-spacing:-.035em; }
.price-card__top p{ margin:9px 0 20px; font-size:13.5px; color:var(--muted); min-height:40px; }
.price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price s{ font-size:15px; color:var(--muted-2); }
.price strong{ font-size:36px; font-weight:800; letter-spacing:-.05em; }
.save{ display:inline-block; margin-top:11px; padding:4px 12px; border-radius:7px; font-size:11.5px; font-weight:700; background:var(--brand-soft); color:var(--brand-ink); }
.price-list{ list-style:none; margin-bottom:28px; flex:1; }
.price-list li{ position:relative; padding:7px 0 7px 27px; font-size:14.5px; color:var(--muted); }
.price-list li::before{ content:'✓'; position:absolute; left:0; top:8px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; font-size:9px; font-weight:800; background:var(--brand-soft); color:var(--brand-ink); }
.price-note{ margin-top:32px; text-align:center; font-size:15.5px; color:var(--muted); }
.price-note a{ color:var(--brand-ink); font-weight:600; border-bottom:1px solid var(--brand-line); }

@media (max-width:1200px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .price-grid{ grid-template-columns:1fr; } .price-card__top p{ min-height:0; } }

/* ─────────── Problem ─────────── */
.prob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prob-card{
  position:relative; padding:28px 26px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .35s, background .35s;
}
.prob-card:hover{ transform:translateY(-5px); border-color:rgba(255,76,76,.3); }
.prob-card__x{
  display:grid; place-items:center; width:32px; height:32px; margin-bottom:16px;
  border-radius:9px; font-size:13px; font-weight:800;
  background:rgba(255,76,76,.13); color:var(--red);
}
.prob-card h3{ font-size:18px; font-weight:700; letter-spacing:-.025em; margin-bottom:9px; }
.prob-card p{ font-size:15px; color:var(--muted); }

.fix-banner{
  position:relative; overflow:hidden; margin-top:26px; padding:clamp(38px,5.5vw,64px);
  border-radius:var(--r-xl); text-align:center;
  background:linear-gradient(150deg,rgba(23,189,84,.13),rgba(111,86,218,.09));
  border:1px solid var(--brand-line);
}
.fix-banner__glow{ position:absolute; width:440px; height:440px; top:-200px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(23,189,84,.42),transparent 68%); filter:blur(60px); }
.fix-banner h3{ position:relative; font-size:clamp(32px,5vw,56px); font-weight:800; letter-spacing:-.045em; }
.fix-banner p{ position:relative; margin:14px auto 28px; color:var(--muted); max-width:480px; font-size:16.5px; }
.fix-banner .btn{ position:relative; }

@media (max-width:900px){ .prob-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .prob-grid{ grid-template-columns:1fr; } }

/* ─────────── Services ─────────── */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.svc-card{ perspective:900px; }
.svc-card__inner{
  position:relative; height:100%; padding:30px 26px 26px; border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  background:linear-gradient(165deg,var(--card-a),var(--card-b));
  border:1px solid var(--line); overflow:hidden; transform-style:preserve-3d;
  transition:border-color .35s, box-shadow .45s var(--ease);
}
.svc-card__inner::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--brand-glow),transparent 62%);
}
.svc-card:hover .svc-card__inner{ border-color:var(--brand-line); box-shadow:0 26px 60px -22px rgba(23,189,84,.35); }
.svc-card:hover .svc-card__inner::after{ opacity:1; }
.svc-card__icon{
  width:52px; height:52px; display:grid; place-items:center; margin-bottom:20px; flex-shrink:0;
  border-radius:14px; background:var(--brand-soft); border:1px solid var(--brand-line);
  transform:translateZ(28px); color:var(--brand-ink);
  transition:background .35s, border-color .35s;
}
.svc-card__icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.svc-card h3{ font-size:18.5px; font-weight:700; letter-spacing:-.03em; margin-bottom:10px; transform:translateZ(18px); }
.svc-card p{ font-size:15px; color:var(--muted); transform:translateZ(10px); flex:1; }
.svc-card__meta{ display:block; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:12.5px; color:var(--brand-ink); font-weight:600; }

@media (max-width:1150px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:840px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } }

/* ─────────── Process ─────────── */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:46px; }
.steps__line{ position:absolute; top:0; left:6%; right:6%; height:1px; background:var(--line-2); }
.steps__line i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--green),var(--blue)); box-shadow:0 0 14px rgba(23,189,84,.8); }
.step{ position:relative; padding:28px 24px; border-radius:var(--r-lg); background:linear-gradient(165deg,var(--card-a),var(--card-b)); border:1px solid var(--line); transition:transform .45s var(--ease), border-color .35s; }
.step:hover{ transform:translateY(-6px); border-color:var(--brand-line); }
.step__num{
  display:inline-block; margin-bottom:15px; font-size:40px; font-weight:800; letter-spacing:-.06em;
  background:linear-gradient(150deg,var(--grad-a),var(--grad-c));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.step h3{ font-size:19px; font-weight:700; letter-spacing:-.03em; margin-bottom:10px; }
.step p{ font-size:15px; color:var(--muted); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } .steps__line{ display:none; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ─────────── Why / stats ─────────── */
.why__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:66px; align-items:center; }
.why__list{ list-style:none; margin:34px 0 36px; display:flex; flex-direction:column; gap:19px; }
.why__list li{ display:flex; gap:14px; align-items:flex-start; }
.why__list b{ flex-shrink:0; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; font-size:11px; background:var(--brand-soft); color:var(--brand-ink); }
.why__list strong{ display:block; font-size:16.5px; font-weight:700; letter-spacing:-.025em; }
.why__list span{ font-size:15px; color:var(--muted); }

.why__stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat{
  padding:34px 26px; border-radius:var(--r-lg); text-align:center;
  background:linear-gradient(165deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);
  transition:border-color .35s;
}
.stat:hover{ border-color:var(--brand-line); }
.stat strong{
  display:inline-block; font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-.055em; line-height:1;
  background:linear-gradient(150deg,var(--grad-a),var(--grad-b) 60%,var(--grad-c));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{ display:block; margin-top:12px; font-size:13.5px; color:var(--muted); }
.stat:nth-child(2),.stat:nth-child(4){ margin-top:28px; }

@media (max-width:980px){
  .why__grid{ grid-template-columns:1fr; gap:48px; }
  .stat:nth-child(2),.stat:nth-child(4){ margin-top:0; }
}
@media (max-width:440px){ .why__stats{ grid-template-columns:1fr; } }

/* ─────────── FAQ ─────────── */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; background:none; border:0; cursor:pointer; text-align:left;
  font-size:clamp(17px,2.1vw,20px); font-weight:600; letter-spacing:-.028em;
  transition:color .3s;
}
.acc__q:hover{ color:var(--brand-ink); }
.acc__q i{
  position:relative; flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:var(--chip); border:1px solid var(--line-2);
  transition:background .3s, transform .45s var(--ease), border-color .3s;
}
.acc__q i::before,.acc__q i::after{ content:''; position:absolute; top:50%; left:50%; width:11px; height:1.6px; background:var(--text); transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .3s; }
.acc__q i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc__item.is-open .acc__q{ color:var(--brand-ink); }
.acc__item.is-open .acc__q i{ background:var(--brand-soft); border-color:var(--brand-line); transform:rotate(180deg); }
.acc__item.is-open .acc__q i::before,.acc__item.is-open .acc__q i::after{ background:var(--brand-ink); }
.acc__item.is-open .acc__q i::after{ transform:translate(-50%,-50%) rotate(0deg); }
.acc__a{ overflow:hidden; height:0; }
.acc__a p{ padding:0 62px 28px 4px; font-size:16px; color:var(--muted); }
@media (max-width:600px){ .acc__a p{ padding-right:10px; } }

/* ─────────── Contact ─────────── */
.contact{ position:relative; overflow:hidden; }
.contact__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.75; }
.contact__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.02fr; gap:58px; align-items:start; }

.contact__points{ list-style:none; margin:30px 0 34px; display:flex; flex-direction:column; gap:12px; }
.contact__points li{ display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--muted); }
.contact__points b{ flex-shrink:0; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; font-size:10px; background:var(--brand-soft); color:var(--brand-ink); }

.contact__direct{ display:flex; flex-direction:column; gap:11px; }
.cdirect{
  display:flex; align-items:center; gap:14px; padding:16px 19px; border-radius:var(--r);
  background:linear-gradient(160deg,var(--card-a),var(--card-b)); border:1px solid var(--line);
  transition:transform .35s var(--ease), border-color .3s;
}
.cdirect:hover{ transform:translateX(5px); border-color:var(--brand-line); }
.cdirect__ic{ width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:var(--chip-2); flex-shrink:0; color:var(--brand-ink); }
.cdirect__ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cdirect__ic--wa{ background:rgba(37,211,102,.14); color:var(--wa); }
.cdirect small{ display:block; font-size:12px; color:var(--muted-2); }
.cdirect strong{ font-size:16px; font-weight:600; letter-spacing:-.025em; }
.cdirect--wa{ border-color:rgba(37,211,102,.3); }
.cdirect--wa:hover{ border-color:rgba(37,211,102,.6); }

/* ─────────── Lead form ─────────── */
.lform{
  position:relative; padding:clamp(28px,3.6vw,42px); border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--card-hi),var(--card-b));
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
}
.lform__head{ margin-bottom:26px; }
.lform__title{ font-size:27px; font-weight:800; letter-spacing:-.04em; }
.lform__sub{ margin:7px 0 22px; font-size:14px; color:var(--muted-2); }

.lform__steps{ display:flex; align-items:center; gap:12px; }
.lstep{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--muted-2); white-space:nowrap; transition:color .35s; }
.lstep i{
  width:25px; height:25px; display:grid; place-items:center; border-radius:50%;
  font-style:normal; font-size:12px; font-weight:700;
  background:var(--chip-2); border:1px solid var(--line-2);
  transition:all .35s var(--ease);
}
.lstep.is-active{ color:var(--text); }
.lstep.is-active i{ background:linear-gradient(135deg,var(--green),var(--green-2)); color:#04140a; border-color:transparent; box-shadow:0 8px 20px -8px rgba(23,189,84,.9); }
.lstep-line{ flex:1; height:2px; background:var(--line-2); border-radius:2px; overflow:hidden; }
.lstep-line b{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--green),var(--blue)); transition:width .5s var(--ease); }

.lpane{ display:none; }
.lpane.is-active{ display:block; }

.field{ position:relative; margin-bottom:16px; }
.field input,.field select,.field textarea{
  width:100%; padding:21px 16px 8px; border-radius:12px;
  background:var(--input-bg); border:1px solid var(--line-2);
  font-size:15.5px; outline:none; resize:none;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ padding-top:25px; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green); background:var(--input-bg-2); box-shadow:0 0 0 3px rgba(23,189,84,.14);
}
.field label{
  position:absolute; left:17px; top:17px; font-size:15px; color:var(--muted-2);
  pointer-events:none; transition:all .25s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:6px; font-size:11px; color:var(--brand-ink); letter-spacing:.05em;
}
.field--select label{ top:6px; font-size:11px; color:var(--muted-2); letter-spacing:.05em; }
.field--select select:focus + label{ color:var(--brand-ink); }
.field--select select{ appearance:none; -webkit-appearance:none; cursor:pointer; color:var(--text); }
.field--select::after{
  content:''; position:absolute; right:19px; top:26px; width:7px; height:7px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); pointer-events:none;
}
.field--select select option{ background:var(--bg-2); color:var(--text); }
.field--select select:invalid{ color:var(--muted-2); }

.field .err{ display:none; margin-top:6px; font-size:12px; font-style:normal; color:var(--red); }
.field.has-error input,.field.has-error select{ border-color:rgba(255,76,76,.7); }
.field.has-error .err{ display:block; }

.hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }

.lform__legal{ margin-top:14px; text-align:center; font-size:11.5px; color:var(--muted-2); line-height:1.55; }
.lback{ display:block; width:100%; margin-top:14px; padding:8px; background:none; border:0; cursor:pointer; font-size:13.5px; color:var(--muted-2); transition:color .3s; }
.lback:hover{ color:var(--brand-ink); }

.lform__result{ position:absolute; inset:0; display:grid; place-items:center; padding:34px; border-radius:var(--r-xl); background:var(--panel); backdrop-filter:blur(10px); z-index:5; }
.lform__result[hidden]{ display:none; }
.lform__ok{ text-align:center; max-width:340px; }
.lform__ok .tick{
  width:66px; height:66px; margin:0 auto 20px; display:grid; place-items:center;
  border-radius:50%; font-size:29px; font-weight:800; color:#04140a;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  box-shadow:0 20px 50px -14px rgba(23,189,84,.85);
}
.lform__ok h4{ font-size:22px; font-weight:800; letter-spacing:-.035em; margin-bottom:10px; }
.lform__ok p{ font-size:15px; color:var(--muted); margin-bottom:22px; }

@media (max-width:980px){ .contact__grid{ grid-template-columns:1fr; gap:46px; } }

/* ─────────── Footer ─────────── */
.footer{ padding:74px 0 34px; border-top:1px solid var(--line); background:var(--bg-2); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:46px; padding-bottom:46px; }
.footer__brand p{ margin:19px 0 23px; font-size:15px; color:var(--muted); max-width:340px; }
.socials{ display:flex; gap:9px; }
.socials a{
  width:39px; height:39px; display:grid; place-items:center; border-radius:11px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--muted);
  background:var(--chip); border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.socials a:hover{ color:#04140a; background:var(--green); border-color:transparent; transform:translateY(-3px); }
.footer__col h4{ font-size:14.5px; font-weight:700; margin-bottom:17px; }
.footer__col a,.footer__addr{ display:block; padding:6px 0; font-size:14.5px; color:var(--muted); transition:color .25s; }
.footer__col a:hover{ color:var(--brand-ink); }
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line); font-size:13px; color:var(--muted-2);
}
.footer__legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__legal a:hover{ color:var(--brand-ink); }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } .footer__bottom{ justify-content:center; text-align:center; } }

/* ─────────── Exit intent ─────────── */
.exit{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; }
.exit[hidden]{ display:none; }
.exit__backdrop{ position:absolute; inset:0; background:rgba(4,5,8,.86); backdrop-filter:blur(10px); }
[data-theme="light"] .exit__backdrop{ background:rgba(20,26,34,.55); }
.exit__box{
  position:relative; width:min(540px,100%); max-height:calc(100svh - 48px); overflow:hidden auto;
  padding:clamp(34px,4.2vw,48px); flex:0 0 auto;
  border-radius:var(--r-xl); text-align:center;
  background:linear-gradient(165deg,var(--card-hi),var(--bg-2));
  border:1px solid var(--brand-line);
  box-shadow:var(--shadow-xl), 0 0 80px -40px rgba(23,189,84,.6);
}
.exit__glow{ position:absolute; width:300px; height:300px; top:-180px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(23,189,84,.4),transparent 70%); filter:blur(48px); }
/* must exclude the glow — it is purely decorative and must stay out of flow */
.exit__box > *:not(.exit__glow):not(.exit__close){ position:relative; }
.exit__box h3{ font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.exit__box h3 em{
  font-style:italic; font-family:var(--ff-serif); font-weight:400;
  background:linear-gradient(100deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.exit__box p{ margin:16px auto 28px; font-size:15.5px; color:var(--muted); max-width:400px; }
.exit__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.exit__note{ display:block; margin-top:20px; font-size:12px; color:var(--muted-2); }
.exit__close{
  position:absolute; top:14px; right:16px; z-index:4;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--chip); border:1px solid var(--line-2);
  font-size:22px; line-height:1; color:var(--muted);
  transition:all .3s;
}
.exit__close:hover{ background:var(--chip-2); color:var(--text); }

/* ─────────── Scroll nudge ─────────── */
.nudge{
  position:fixed; left:24px; bottom:24px; z-index:870;
  width:290px; padding:20px 22px; border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--brand-line);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow-lg);
}
.nudge[hidden]{ display:none; }
.nudge p{ font-size:14px; color:var(--muted); margin-bottom:15px; line-height:1.5; }
.nudge strong{ color:var(--text); display:block; margin-bottom:3px; font-size:15px; }
.nudge__close{
  position:absolute; top:9px; right:11px; width:26px; height:26px; border:0; cursor:pointer;
  background:none; color:var(--muted-2); font-size:19px; line-height:1; transition:color .3s;
}
.nudge__close:hover{ color:var(--text); }
@media (max-width:900px){ .nudge{ display:none; } }

/* ─────────── Sticky mobile CTA ─────────── */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  display:none; gap:10px; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:var(--nav-bg); backdrop-filter:blur(20px); border-top:1px solid var(--line);
  transform:translateY(120%);
}
.mobile-cta a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; border-radius:100px; font-size:15px; font-weight:700; }
.mobile-cta__wa{ background:var(--wa); color:#04140a; }
.mobile-cta__quote{ background:linear-gradient(135deg,var(--green),var(--green-2)); color:#04140a; box-shadow:0 10px 26px -10px rgba(23,189,84,.9); }
@media (max-width:860px){ .mobile-cta{ display:flex; } body{ padding-bottom:78px; } }

/* ─────────── Floating WhatsApp ─────────── */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:880;
  width:58px; height:58px; display:grid; place-items:center; border-radius:50%;
  background:var(--wa); color:#fff;
  box-shadow:0 16px 40px -10px rgba(37,211,102,.75);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.wa-float::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.55); animation:ripple 2.4s var(--ease) infinite; }
.wa-float:hover{ transform:scale(1.09) translateY(-3px); box-shadow:0 22px 55px -10px rgba(37,211,102,.95); }
.wa-float__tip{
  position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(8px);
  padding:9px 15px; border-radius:100px; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--text);
  background:var(--panel); border:1px solid var(--line-2);
  opacity:0; pointer-events:none; transition:all .35s var(--ease);
}
.wa-float:hover .wa-float__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@keyframes ripple{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.7); opacity:0; } }

/* declared after .wa-float so it actually wins — the sticky bar replaces it on mobile */
@media (max-width:860px){ .wa-float{ display:none; } }

/* ─────────── Reveal defaults ─────────── */
[data-anim]{ opacity:0; }
.no-anim [data-anim]{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-anim]{ opacity:1 !important; }
}