:root{
    --bg:#f8fafc;
    --surface:#ffffff;
    --surface-2:#f1f5f9;
    --surface-3:#e2e8f0;
    --border:rgba(0,0,0,.08);
    --border-soft:rgba(0,0,0,.04);
    --text:#0f172a;
    --text-muted:#475569;
    --text-faint:#94a3b8;
    --green:#10b981;
    --green-soft:#059669;
    --blue:#0284c7;
    --blue-soft:#0369a1;
    --amber:#d97706;
    --amber-soft:#b45309;
    --red:#ef4444;
    --violet:#8b5cf6;
    --violet-soft:#7c3aed;
    --grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --grad-soft: linear-gradient(135deg, rgba(16,185,129,.12), rgba(2,132,199,.12));
    --font-display:'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, monospace;
    --radius: 18px;
    --radius-sm: 10px;
    --shadow-glow: 0 0 0 1px rgba(0,0,0,.04), 0 20px 50px -20px rgba(0,0,0,.10);

    /* dark "device preview" tokens, used only inside .device-dark scopes */
    --dd-bg:#0e1319; --dd-surface:#161f2b; --dd-surface-2:#1c2736; --dd-surface-3:#253346;
    --dd-border:rgba(255,255,255,.12); --dd-border-soft:rgba(255,255,255,.06);
    --dd-text:#f8fafc; --dd-text-muted:#94a3b8; --dd-text-faint:#64748b;
    --dd-green:#10b981; --dd-green-soft:#34d399; --dd-blue:#38bdf8; --dd-blue-soft:#93c5fd;
    --dd-amber:#fbbf24; --dd-amber-soft:#fcd34d;
  }

  .device-dark{
    --bg:var(--dd-bg); --surface:var(--dd-surface); --surface-2:var(--dd-surface-2); --surface-3:var(--dd-surface-3);
    --border:var(--dd-border); --border-soft:var(--dd-border-soft);
    --text:var(--dd-text); --text-muted:var(--dd-text-muted); --text-faint:var(--dd-text-faint);
    --green:var(--dd-green); --green-soft:var(--dd-green-soft); --blue:var(--dd-blue); --blue-soft:var(--dd-blue-soft);
    --amber:var(--dd-amber); --amber-soft:var(--dd-amber-soft);
    --grad: linear-gradient(135deg, var(--green), var(--blue));
    color:var(--text);
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  body::before{
    content:'';
    position:fixed; inset:0;
    background-image:
      radial-gradient(ellipse 70% 50% at 20% -10%, rgba(16,185,129,.14), transparent 65%),
      radial-gradient(ellipse 60% 45% at 85% 15%, rgba(56,189,248,.10), transparent 60%),
      radial-gradient(ellipse 70% 50% at 50% 50%, rgba(16,185,129,.06), transparent 70%),
      radial-gradient(ellipse 80% 60% at 50% 95%, rgba(99,102,241,.08), transparent 70%);
    pointer-events:none;
    z-index:0;
  }
  body::after{
    content:'';
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.025; mix-blend-mode:overlay; pointer-events:none; z-index:0;
  }
  img{max-width:100%;display:block;}

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font:inherit;cursor:pointer;}
  .container{max-width:1180px;margin:0 auto;padding:0 24px;}
  .container-wide{max-width:1400px;}
  section{position:relative;z-index:1;}

  h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.025em;line-height:1.1;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
    color:var(--green-soft); text-transform:uppercase;
    padding:6px 14px; border:1px solid rgba(16,185,129,.25);
    border-radius:9999px; background:rgba(16,185,129,.07);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
  .grad-text{
    background:linear-gradient(135deg, var(--green-soft) 0%, var(--blue) 50%, var(--amber-soft) 100%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:gradShift 8s ease-in-out infinite;
  }
  @keyframes gradShift{
    0%,100%{background-position:0% center;}
    50%{background-position:100% center;}
  }
  @media (prefers-reduced-motion: reduce){
    .grad-text{animation:none;}
  }

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  .modules-grid > article, .pain-grid > div, .testi-grid > div, .pricing-grid > div, .cards-trio > div, .contract-cards > div{
    opacity:0; transform:translateY(16px) scale(.98); transition:opacity .55s cubic-bezier(0.16,1,0.3,1), transform .55s cubic-bezier(0.16,1,0.3,1);
  }
  .stagger-in{opacity:1 !important; transform:translateY(0) scale(1) !important;}