/* ============================================================
   STOCKMILL — DESIGN SYSTEM
   Palette: Mill green (deep, growth) + Grain gold (harvest, warmth)
   Type: Space Grotesk (display, geometric/technical) + Inter (body)
   Signature: tilted 3D device stack + falling-grain particle field
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:        #12201A;
  --ink-soft:   #3C4C43;
  --paper:      #F6F4EC;
  --paper-dim:  #EEEAD9;
  --surface:    #FFFFFF;
  --line:       #DCD8C6;

  --green-950:  #0E2216;
  --green-900:  #123B22;
  --green-800:  #1B5E20;
  --green-700:  #256C2B;
  --green-600:  #2E7D32;
  --green-500:  #3F9A45;
  --green-100:  #DCEFDD;

  --gold-700:   #A5680B;
  --gold-600:   #C9820F;
  --gold-500:   #E0A020;
  --gold-300:   #F0C670;
  --gold-100:   #FBEECB;

  --clay:       #C4602E;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-1: 0 1px 2px rgba(18,32,26,.06);
  --shadow-2: 0 8px 24px -8px rgba(18,32,26,.18);
  --shadow-3: 0 30px 70px -24px rgba(14,34,22,.35);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--gold-300); color:var(--green-950); }

h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  color:var(--green-950);
  margin:0;
  line-height:1.08;
  letter-spacing:-.01em;
}
.mono{ font-family:'JetBrains Mono',monospace; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-scale.is-in{ opacity:1; transform:scale(1); }
.stagger > *{ transition-delay:calc(var(--i,0) * 80ms); }

/* ============ Grain particle canvas ============ */
#grain-field{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
}

/* ============ Topbar ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.topbar.scrolled{
  padding:10px 0;
  background:rgba(246,244,236,.82);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(18,32,26,.08);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:0 32px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2);
  position:relative; overflow:hidden;
}
.brand-mark img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.brand-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--green-950); }
.brand-by{
  font-family:'Inter',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft); text-transform:uppercase; margin-top:1px;
}
.brand-by b{ color:var(--gold-700); font-weight:700; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:9px 16px; border-radius:99px; font-size:14.5px; font-weight:500;
  color:var(--ink-soft); transition:background .25s, color .25s;
  position:relative;
}
.nav-links a:hover{ background:rgba(27,94,32,.08); color:var(--green-900); }
.nav-links a.active{ color:var(--green-900); font-weight:600; background:rgba(27,94,32,.1); }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:99px; border:none;
  font-size:14px; font-weight:600; font-family:'Inter',sans-serif;
  transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease-out), background .25s;
  white-space:nowrap; line-height:1.2;
}
.btn-primary{
  background:linear-gradient(155deg,var(--green-700),var(--green-900));
  color:#fff; box-shadow:0 10px 24px -10px rgba(18,59,34,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(18,59,34,.6); }
.btn-gold{
  background:linear-gradient(155deg,var(--gold-500),var(--gold-700));
  color:var(--green-950); box-shadow:0 10px 24px -10px rgba(165,104,11,.5);
}
.btn-gold:hover{ transform:translateY(-2px); }
.btn-ghost{
  background:transparent; color:var(--green-900); border:1.5px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--green-700); background:rgba(27,94,32,.05); }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn svg{ width:15px; height:15px; flex-shrink:0; }
.btn-lg svg{ width:17px; height:17px; }
.btn-sm svg{ width:13px; height:13px; }
.drawer-close svg{ width:17px; height:17px; }
.footer-social a svg{ width:16px; height:16px; }

.nav-burger{
  display:none; width:42px; height:42px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surface); align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }

/* ============ Buttons row spacing ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green-700);
  background:var(--green-100); border:1px solid rgba(27,94,32,.18);
  padding:7px 14px; border-radius:99px; margin-bottom:22px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-600); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);} }

/* ============ Section shells ============ */
section{ position:relative; z-index:1; }
.section{ padding:120px 0; }
.section-tight{ padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-title{ font-size:clamp(30px,4vw,46px); margin-bottom:16px; }
.section-sub{ font-size:17px; color:var(--ink-soft); line-height:1.7; }

/* ============ HERO ============ */
.hero{ padding:172px 0 100px; position:relative; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.hero-title{ font-size:clamp(38px,5.6vw,66px); margin-bottom:22px; }
.hero-title em{ font-style:normal; color:var(--green-700); position:relative; white-space:nowrap; }
.hero-title em::after{
  content:''; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.28em;
  background:var(--gold-300); z-index:-1; border-radius:4px; opacity:.65;
}
.hero-sub{ font-size:18.5px; color:var(--ink-soft); max-width:520px; margin-bottom:34px; line-height:1.7; }
.hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:50px; }
.hero-note{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); }
.hero-note svg{ width:16px; height:16px; color:var(--green-700); flex-shrink:0; }

.hero-stats{ display:flex; gap:36px; padding-top:32px; border-top:1px solid var(--line); }
.hero-stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:28px; color:var(--green-900); }
.hero-stat span{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }

/* ---- 3D device stage ---- */
.hero-stage{
  position:relative; height:560px; perspective:1600px;
}
.stage-orbit{
  position:absolute; inset:0; transform-style:preserve-3d;
}
.device{
  position:absolute; width:250px; border-radius:32px; background:#0d1811;
  box-shadow:var(--shadow-3), 0 0 0 8px #0d1811, 0 0 0 9px rgba(255,255,255,.08);
  overflow:hidden; transform-style:preserve-3d;
  transition:transform .1s linear;
}
.device-main{
  left:50%; top:6%; width:262px; margin-left:-131px; z-index:3;
  transform:rotateY(-14deg) rotateX(4deg) rotateZ(-2deg);
}
.device-side-a{
  left:-8%; top:30%; width:168px; z-index:2; opacity:.92;
  transform:rotateY(22deg) rotateX(2deg) rotateZ(4deg) translateZ(-60px);
}
.device-side-b{
  right:-10%; top:42%; width:150px; z-index:1; opacity:.85;
  transform:rotateY(-26deg) rotateX(-2deg) rotateZ(-5deg) translateZ(-110px);
}
.device-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34%; height:22px; background:#0d1811; border-radius:0 0 14px 14px; z-index:5;
}
.device-screen{ width:100%; aspect-ratio:262/560; background:var(--paper); position:relative; }

.float-card{
  position:absolute; background:var(--surface); border-radius:16px; padding:14px 16px;
  box-shadow:var(--shadow-3); z-index:6; display:flex; align-items:center; gap:11px;
  border:1px solid var(--line); animation:float-y 5s ease-in-out infinite;
}
.float-card .fc-ic{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.float-card .fc-ic svg{ width:18px; height:18px; }
.float-card b{ display:block; font-size:15px; color:var(--green-950); font-family:'Space Grotesk',sans-serif; }
.float-card span{ font-size:11px; color:var(--ink-soft); }
.fc-1{ top:2%; left:-4%; animation-delay:.2s; }
.fc-2{ bottom:12%; right:-6%; animation-delay:1.1s; }
.fc-3{ bottom:-2%; left:16%; animation-delay:2s; }
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.hero-glow{
  position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(46,125,50,.22), transparent 68%);
  top:-140px; right:-160px; z-index:-1; filter:blur(10px);
}

/* ============ Logo strip ============ */
.logo-strip{ padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logo-strip-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.logo-strip-label{ font-size:12.5px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; letter-spacing:.03em; white-space:nowrap; }
.logo-strip-items{ display:flex; gap:34px; flex-wrap:wrap; align-items:center; }
.logo-strip-items span{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--ink-soft); font-size:15px; opacity:.75; }

/* ============ Feature grid ============ */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:30px 26px; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
  position:relative; overflow:hidden;
}
.feat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green-700),var(--gold-500));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.feat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:transparent; }
.feat-card:hover::before{ transform:scaleX(1); }
.feat-ic{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; background:var(--green-100);
}
.feat-ic svg{ width:24px; height:24px; color:var(--green-800); }
.feat-card h3{ font-size:19px; margin-bottom:10px; }
.feat-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin:0; }
.feat-card.gold .feat-ic{ background:var(--gold-100); }
.feat-card.gold .feat-ic svg{ color:var(--gold-700); }

/* ============ Workflow / How it works ============ */
.flow-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.flow-step{ padding:0 20px; position:relative; text-align:left; }
.flow-step:not(:last-child)::after{
  content:''; position:absolute; top:26px; left:calc(50% + 42px); right:calc(-50% + 42px);
  height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 6px, transparent 6px 12px);
}
.flow-num{
  width:52px; height:52px; border-radius:15px; background:var(--green-950); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:19px; margin-bottom:20px; position:relative; z-index:2;
}
.flow-step h4{ font-size:16.5px; margin-bottom:8px; }
.flow-step p{ font-size:13.8px; color:var(--ink-soft); line-height:1.6; }

/* ============ Split panel (image/content) ============ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split.rev{ grid-template-columns:1fr 1fr; }
.split.rev .split-media{ order:2; }
.split-media{ position:relative; }
.split-tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold-700);
  background:var(--gold-100); padding:5px 12px; border-radius:99px; margin-bottom:16px; font-weight:600;
}
.split h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:18px; }
.split p{ color:var(--ink-soft); font-size:16px; line-height:1.75; margin-bottom:22px; }
.check-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
.check-item{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink); }
.check-item svg{ width:20px; height:20px; color:var(--green-700); flex-shrink:0; margin-top:1px; }

/* ============ Phone mockup screen builder (CSS-drawn) ============ */
.appshot{
  width:290px; border-radius:38px; background:#0c1710; padding:11px;
  box-shadow:var(--shadow-3); position:relative; margin:0 auto;
}
.appshot .notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:38%; height:20px; background:#0c1710; border-radius:0 0 12px 12px; z-index:5; }
.appshot .screen{
  background:var(--paper); border-radius:28px; overflow:hidden; position:relative;
  aspect-ratio:290/600; display:flex; flex-direction:column;
}
.scr-status{ display:flex; justify-content:space-between; padding:16px 20px 6px; font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--ink-soft); }
.scr-head{
  background:linear-gradient(140deg,var(--green-800),var(--green-950)); color:#fff;
  padding:14px 18px 20px; position:relative;
}
.scr-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.scr-head-brand{ display:flex; align-items:center; gap:8px; }
.scr-avatar{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.18); }
.scr-head b{ font-family:'Space Grotesk',sans-serif; font-size:13px; display:block; }
.scr-head small{ font-size:9px; opacity:.75; }
.scr-bell{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.scr-bell svg{ width:13px; height:13px; }
.scr-stats-row{ display:flex; gap:8px; }
.scr-stat{ flex:1; background:rgba(255,255,255,.1); border-radius:10px; padding:9px 10px; }
.scr-stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; }
.scr-stat span{ font-size:8.5px; opacity:.75; }
.scr-body{ padding:14px 16px; flex:1; overflow:hidden; }
.scr-section-label{ font-size:10px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin:12px 0 8px; }
.scr-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.scr-action{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.scr-action .ic{ width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.scr-action .ic svg{ width:12px; height:12px; }
.scr-action span{ font-size:7px; text-align:center; color:var(--ink-soft); font-weight:600; }
.scr-entry{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:9px 10px; margin-bottom:7px; }
.scr-entry .badge{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.scr-entry .meta{ flex:1; min-width:0; }
.scr-entry .meta b{ display:block; font-size:10.5px; color:var(--ink); }
.scr-entry .meta span{ font-size:8.5px; color:var(--ink-soft); }
.scr-entry .amt{ text-align:right; flex-shrink:0; }
.scr-entry .amt b{ display:block; font-size:10px; }
.scr-entry .amt span{ font-size:7.5px; color:var(--ink-soft); }
.badge.in{ background:var(--green-100); color:var(--green-800); }
.badge.out{ background:#FBE4DC; color:var(--clay); }
.scr-financial{ background:linear-gradient(140deg,var(--green-800),var(--green-950)); border-radius:14px; padding:14px; color:#fff; margin-bottom:6px; }
.scr-financial-row{ display:flex; gap:8px; margin-bottom:8px; }
.scr-fbox{ flex:1; background:rgba(255,255,255,.12); border-radius:9px; padding:8px 9px; }
.scr-fbox span{ font-size:7.5px; opacity:.7; }
.scr-fbox b{ display:block; font-size:12px; margin-top:2px; }
.scr-nav{ display:flex; justify-content:space-around; padding:10px 0; border-top:1px solid var(--line); background:var(--surface); }
.scr-nav .n{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.scr-nav .n svg{ width:15px; height:15px; color:var(--ink-soft); }
.scr-nav .n.on svg{ color:var(--green-800); }
.scr-nav .n span{ font-size:6.5px; color:var(--ink-soft); font-weight:600; }
.scr-nav .n.on span{ color:var(--green-800); }
.scr-fab{ position:absolute; bottom:64px; right:14px; width:38px; height:38px; border-radius:13px; background:var(--gold-600); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px -4px rgba(165,104,11,.5); }
.scr-fab svg{ width:16px; height:16px; color:#fff; }

.scr-field{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.scr-field svg{ width:13px; height:13px; color:var(--green-700); flex-shrink:0; }
.scr-field span{ font-size:9.5px; color:var(--ink-soft); }
.scr-field b{ font-size:9.5px; color:var(--ink); }
.scr-toggle{ display:flex; background:var(--paper-dim); border-radius:11px; padding:3px; margin-bottom:10px; }
.scr-toggle .t{ flex:1; text-align:center; padding:8px 0; border-radius:9px; font-size:9.5px; font-weight:700; }
.scr-toggle .t.on{ background:var(--green-800); color:#fff; }
.scr-toggle .t.off{ color:var(--ink-soft); }
.scr-warn{ background:#FBE4DC; border:1px solid rgba(196,96,46,.35); border-radius:10px; padding:9px 10px; font-size:8.5px; color:var(--clay); display:flex; gap:6px; align-items:flex-start; margin-bottom:8px; }
.scr-warn svg{ width:12px; height:12px; flex-shrink:0; margin-top:1px; }
.scr-btn-save{ background:linear-gradient(140deg,var(--green-700),var(--green-900)); color:#fff; text-align:center; padding:11px; border-radius:11px; font-size:10.5px; font-weight:700; margin-top:6px; }
.scr-chip-row{ display:flex; gap:6px; margin-bottom:10px; }
.scr-chip{ padding:6px 11px; border-radius:99px; font-size:8.5px; font-weight:700; border:1px solid var(--line); color:var(--ink-soft); }
.scr-chip.on{ background:var(--green-800); color:#fff; border-color:var(--green-800); }
.scr-offline{ background:var(--clay); color:#fff; text-align:center; font-size:8px; font-weight:600; padding:6px; }
.scr-donut-wrap{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:8px; }
.scr-legend{ display:flex; flex-direction:column; gap:5px; flex:1; }
.scr-legend .l{ display:flex; align-items:center; gap:6px; font-size:8px; color:var(--ink-soft); }
.scr-legend .sw{ width:8px; height:8px; border-radius:2px; }

/* ============ Showcase (Why StockMill) ============ */
.showcase-tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:56px; flex-wrap:wrap; }
.showcase-tab{
  padding:11px 20px; border-radius:99px; border:1.5px solid var(--line); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:.3s;
}
.showcase-tab.active{ background:var(--green-900); border-color:var(--green-900); color:#fff; }
.showcase-panels{ position:relative; }
.showcase-panel{
  display:none; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;
}
.showcase-panel.active{ display:grid; }
.showcase-info-num{ font-family:'JetBrains Mono',monospace; color:var(--gold-600); font-size:13px; margin-bottom:14px; display:block; }
.showcase-panel h3{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; }
.showcase-panel p{ color:var(--ink-soft); font-size:15.5px; line-height:1.75; margin-bottom:24px; }
.showcase-stage{ perspective:1400px; display:flex; justify-content:center; }
.showcase-stage .appshot{ transform:rotateY(-8deg) rotateX(3deg); transition:transform .6s var(--ease-out); }
.showcase-stage:hover .appshot{ transform:rotateY(0) rotateX(0); }

/* ============ Comparison table ============ */
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-2); }
.compare-table th,.compare-table td{ padding:16px 22px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line); }
.compare-table thead th{ background:var(--green-950); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; }
.compare-table thead th:first-child{ border-radius:var(--radius-md) 0 0 0; }
.compare-table thead th:last-child{ border-radius:0 var(--radius-md) 0 0; }
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody tr:hover{ background:var(--paper); }
.compare-yes{ color:var(--green-700); font-weight:700; display:flex; align-items:center; gap:6px; }
.compare-no{ color:#B2AA92; }
.compare-table td:first-child{ font-weight:600; color:var(--ink); }

/* ---- Mobile card-stack alternative to the comparison table ---- */
.compare-cards{ display:none; flex-direction:column; gap:14px; }
.compare-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-1);
}
.compare-card-title{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--green-950);
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.compare-card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:7px 0; }
.compare-card-row .cc-label{ font-size:12px; color:var(--ink-soft); font-weight:600; flex-shrink:0; width:112px; }
.compare-card-row .cc-val{ font-size:13px; text-align:right; flex:1; }
.compare-card-row .cc-val.compare-yes{ color:var(--green-700); font-weight:700; justify-content:flex-end; }
.compare-card-row .cc-val.compare-no{ color:#B2AA92; }
.compare-card-row.is-stockmill{ background:var(--green-100); margin:4px -20px -4px; padding:10px 20px; border-radius:0 0 10px 10px; }
.compare-card-row.is-stockmill .cc-label{ color:var(--green-900); }

/* ============ Stats band ============ */
.stats-band{
  background:linear-gradient(155deg,var(--green-900),var(--green-950));
  border-radius:var(--radius-lg); padding:64px 50px; position:relative; overflow:hidden;
}
.stats-band::before{
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,160,32,.14), transparent 70%);
  top:-200px; right:-100px;
}
.stats-band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; }
.stat-block b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:clamp(30px,3.4vw,44px); color:#fff; }
.stat-block span{ font-size:13px; color:rgba(255,255,255,.65); }

/* ============ Testimonial-ish quote strip ============ */
.quote-strip{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:56px; display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center;
}
.quote-mark{ font-family:'Space Grotesk',sans-serif; font-size:80px; color:var(--gold-300); line-height:.6; }
.quote-strip p{ font-size:20px; color:var(--green-950); line-height:1.6; margin-bottom:16px; }
.quote-who{ display:flex; align-items:center; gap:12px; }
.quote-avatar{ width:44px; height:44px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--green-800); }
.quote-who b{ display:block; font-size:14.5px; }
.quote-who span{ font-size:12.5px; color:var(--ink-soft); }

/* ============ CTA banner ============ */
.cta-banner{
  background:linear-gradient(155deg,var(--green-800) 0%, var(--green-950) 100%);
  border-radius:var(--radius-lg); padding:70px 60px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before,.cta-banner::after{
  content:''; position:absolute; border-radius:50%;
}
.cta-banner::before{ width:420px; height:420px; background:radial-gradient(circle, rgba(224,160,32,.22), transparent 70%); top:-180px; left:-100px; }
.cta-banner::after{ width:360px; height:360px; background:radial-gradient(circle, rgba(63,154,69,.35), transparent 70%); bottom:-160px; right:-80px; }
.cta-banner h2{ color:#fff; font-size:clamp(28px,3.6vw,42px); margin-bottom:16px; position:relative; z-index:1; }
.cta-banner p{ color:rgba(255,255,255,.72); font-size:16.5px; max-width:520px; margin:0 auto 34px; position:relative; z-index:1; }
.cta-banner .hero-cta{ justify-content:center; margin-bottom:0; position:relative; z-index:1; }

/* ============ Pricing ============ */
.billing-toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:56px; }
.billing-toggle span{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
.billing-toggle span.on{ color:var(--green-900); }
.bt-switch{ width:56px; height:30px; border-radius:99px; background:var(--green-900); position:relative; border:none; padding:0; }
.bt-switch::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .3s var(--ease-spring); }
.bt-switch.yearly::after{ transform:translateX(26px); }
.bt-save{ font-family:'JetBrains Mono',monospace; font-size:11.5px; background:var(--gold-100); color:var(--gold-700); padding:4px 10px; border-radius:99px; font-weight:700; }

.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.price-grid-2{ grid-template-columns:repeat(2,1fr); max-width:740px; margin:0 auto; gap:24px; }
.price-card{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:34px 26px; display:flex; flex-direction:column; transition:transform .4s var(--ease-out), box-shadow .4s;
  position:relative;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.price-card.feat{
  background:linear-gradient(165deg,var(--green-900),var(--green-950)); border-color:var(--green-950); color:#fff;
  transform:scale(1.04);
}
.price-card.feat:hover{ transform:scale(1.04) translateY(-6px); }
.price-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold-600); color:#fff; font-size:11px; font-weight:700; padding:5px 16px; border-radius:99px;
  font-family:'JetBrains Mono',monospace; letter-spacing:.03em;
}
.price-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; margin-bottom:6px; }
.price-card.feat .price-name{ color:var(--gold-300); }
.price-desc{ font-size:12.5px; color:var(--ink-soft); margin-bottom:20px; }
.price-card.feat .price-desc{ color:rgba(255,255,255,.6); }
.price-amt{ display:flex; align-items:baseline; gap:4px; margin-bottom:4px; }
.price-amt .cur{ font-size:18px; font-weight:600; color:var(--ink-soft); }
.price-card.feat .price-amt .cur{ color:rgba(255,255,255,.7); }
.price-amt .num{ font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; color:var(--green-950); }
.price-card.feat .price-amt .num{ color:#fff; }
.price-amt .per{ font-size:13px; color:var(--ink-soft); }
.price-card.feat .price-amt .per{ color:rgba(255,255,255,.6); }
.price-gst{ font-size:11.5px; color:var(--ink-soft); margin-bottom:24px; font-family:'JetBrains Mono',monospace; }
.price-card.feat .price-gst{ color:rgba(255,255,255,.5); }
.price-feats{ display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex:1; }
.price-feats .pf{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; }
.price-feats .pf svg{ width:16px; height:16px; color:var(--green-700); flex-shrink:0; margin-top:2px; }
.price-card.feat .price-feats .pf svg{ color:var(--gold-300); }
.price-card.custom{ align-items:flex-start; justify-content:center; }
.price-card.custom .price-amt .num{ font-size:26px; }

.demo-cta{ grid-template-columns:1fr auto; gap:36px; }
.demo-cta-actions{ display:flex; flex-direction:column; gap:12px; width:220px; flex-shrink:0; }
.demo-cta-actions .btn{ width:100%; }
@media (max-width:860px){
  .demo-cta{ grid-template-columns:1fr; text-align:center; }
  .demo-cta-actions{ width:100%; max-width:340px; margin:0 auto; }
}

/* ============ FAQ Accordion ============ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:800px; margin:0 auto; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; padding:22px 26px; gap:16px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px; color:var(--green-950);
}
.faq-q .plus{ width:26px; height:26px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .35s var(--ease-out), background .3s; }
.faq-q .plus svg{ width:13px; height:13px; color:var(--green-800); transition:transform .35s var(--ease-out); }
.faq-item.open .faq-q .plus{ background:var(--green-800); transform:rotate(180deg); }
.faq-item.open .faq-q .plus svg{ color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); }
.faq-a-inner{ padding:0 26px 24px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }

/* ============ Contact ============ */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
.contact-cards{ display:flex; flex-direction:column; gap:14px; }
.contact-card{
  display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px; transition:.3s;
}
.contact-card:hover{ border-color:var(--green-700); box-shadow:var(--shadow-2); transform:translateX(4px); }
.contact-ic{ width:44px; height:44px; border-radius:12px; background:var(--green-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-ic svg{ width:20px; height:20px; color:var(--green-800); }
.contact-card b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:15px; margin-bottom:3px; }
.contact-card span, .contact-card a{ font-size:13.5px; color:var(--ink-soft); display:block; }
.contact-card a:hover{ color:var(--green-800); }

.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:42px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:11px; border:1.5px solid var(--line);
  background:var(--paper); font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green-700); box-shadow:0 0 0 4px rgba(46,125,50,.12); background:var(--surface);
}
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; text-align:center; }
.form-error{ font-size:13px; color:#c0392b; margin-top:12px; text-align:center; }
.form-error:empty{ display:none; }
.form-success{
  display:none; text-align:center; padding:40px 20px;
}
.form-success.show{ display:block; }
.form-success .ok-ic{ width:64px; height:64px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.form-success .ok-ic svg{ width:30px; height:30px; color:var(--green-800); }
.form-success h3{ font-size:20px; margin-bottom:8px; }
.form-success p{ color:var(--ink-soft); font-size:14.5px; }

.map-box{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); height:220px; position:relative;
  background:linear-gradient(135deg,var(--green-100),var(--paper-dim));
  display:flex; align-items:center; justify-content:center; margin-top:14px;
}
.map-box svg{ width:36px; height:36px; color:var(--green-700); }
.map-box span{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:12.5px; color:var(--ink-soft); background:var(--surface); padding:6px 14px; border-radius:99px; border:1px solid var(--line); }

/* ============ About page ============ */
.about-hero{ padding:172px 0 60px; text-align:center; }
.about-hero .eyebrow{ margin-left:auto; margin-right:auto; }
.about-hero h1{ font-size:clamp(36px,5vw,58px); max-width:800px; margin:0 auto 20px; }
.about-hero p{ font-size:18px; color:var(--ink-soft); max-width:620px; margin:0 auto; line-height:1.7; }

.story-grid{ display:grid; grid-template-columns:.45fr .55fr; gap:70px; align-items:start; }
.story-timeline{ display:flex; flex-direction:column; gap:0; }
.tl-item{ display:flex; gap:20px; padding-bottom:36px; position:relative; }
.tl-item:not(:last-child)::before{ content:''; position:absolute; left:19px; top:44px; bottom:0; width:1px; background:repeating-linear-gradient(180deg,var(--line) 0 5px, transparent 5px 10px); }
.tl-dot{ width:40px; height:40px; border-radius:12px; background:var(--green-950); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; z-index:1; }
.tl-item b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; margin-bottom:5px; }
.tl-item p{ font-size:14px; color:var(--ink-soft); line-height:1.65; margin:0; }

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv-card{
  padding:38px; border-radius:var(--radius-lg); position:relative; overflow:hidden;
}
.mv-card.mission{ background:var(--green-950); color:#fff; }
.mv-card.vision{ background:var(--surface); border:1.5px solid var(--line); }
.mv-ic{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.mv-card.mission .mv-ic{ background:rgba(224,160,32,.18); }
.mv-card.mission .mv-ic svg{ width:24px; height:24px; color:var(--gold-300); }
.mv-card.vision .mv-ic{ background:var(--green-100); }
.mv-card.vision .mv-ic svg{ width:24px; height:24px; color:var(--green-800); }
.mv-card h3{ font-size:22px; margin-bottom:14px; }
.mv-card.mission h3{ color:#fff; }
.mv-card p{ font-size:15px; line-height:1.75; color:var(--ink-soft); }
.mv-card.mission p{ color:rgba(255,255,255,.72); }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value-card{ text-align:center; padding:32px 20px; }
.value-num{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--gold-600); margin-bottom:14px; }
.value-ic{ width:56px; height:56px; border-radius:16px; background:var(--green-100); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.value-ic svg{ width:26px; height:26px; color:var(--green-800); }
.value-card h4{ font-size:15.5px; margin-bottom:8px; }
.value-card p{ font-size:13px; color:var(--ink-soft); line-height:1.6; }

.team-strip{ display:flex; align-items:center; gap:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px 46px; flex-wrap:wrap; }
.team-badge{ width:70px; height:70px; border-radius:20px; background:linear-gradient(155deg,var(--green-700),var(--green-950)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.team-badge svg{ width:32px; height:32px; color:#fff; }
.team-strip h3{ font-size:19px; margin-bottom:6px; }
.team-strip p{ font-size:14px; color:var(--ink-soft); margin:0; max-width:560px; }

/* ============ Legal / doc pages ============ */
.doc-hero{ padding:172px 0 50px; }
.doc-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.doc-hero h1{ font-size:clamp(32px,4.4vw,50px); margin-bottom:14px; }
.doc-meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; }
.doc-meta b{ color:var(--green-800); }
.doc-layout{ display:grid; grid-template-columns:250px 1fr; gap:56px; align-items:start; }
.doc-toc{ position:sticky; top:110px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.doc-toc-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; margin-bottom:14px; }
.doc-toc a{ display:block; font-size:13.5px; color:var(--ink-soft); padding:8px 0; border-left:2px solid transparent; padding-left:12px; transition:.25s; }
.doc-toc a:hover, .doc-toc a.active{ color:var(--green-800); border-left-color:var(--green-700); font-weight:600; }
.doc-body{ max-width:720px; }
.doc-body h2{ font-size:23px; margin:44px 0 14px; scroll-margin-top:110px; }
.doc-body h2:first-child{ margin-top:0; }
.doc-body h3{ font-size:17px; margin:24px 0 10px; color:var(--green-800); }
.doc-body p{ font-size:15px; color:var(--ink-soft); line-height:1.8; margin:0 0 14px; }
.doc-body ul{ margin:0 0 16px; padding-left:0; }
.doc-body ul li{ list-style:none; display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:8px; }
.doc-body ul li::before{ content:'●'; color:var(--gold-600); font-size:8px; margin-top:8px; flex-shrink:0; }
.doc-body table{ width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:13.5px; }
.doc-body table th{ background:var(--green-950); color:#fff; padding:11px 14px; text-align:left; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; }
.doc-body table td{ padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.doc-body table tr:nth-child(even) td{ background:var(--paper); }
.doc-callout{
  background:var(--green-100); border-left:3px solid var(--green-700); border-radius:0 12px 12px 0;
  padding:16px 20px; font-size:14px; color:var(--green-950); margin:18px 0;
}
.doc-callout b{ color:var(--green-800); }
.doc-download-bar{
  position:sticky; bottom:24px; margin-top:56px; display:flex; align-items:center; justify-content:space-between;
  background:var(--green-950); border-radius:var(--radius-md); padding:22px 28px; box-shadow:var(--shadow-3); gap:20px; flex-wrap:wrap;
}
.doc-download-bar b{ color:#fff; font-family:'Space Grotesk',sans-serif; font-size:16px; display:block; }
.doc-download-bar span{ color:rgba(255,255,255,.6); font-size:12.5px; }

.footer-doc-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.85);
  margin-top:8px; transition:.25s;
}
.footer-doc-btn:hover{ background:rgba(255,255,255,.12); }
.footer-doc-btn svg{ width:13px; height:13px; }

/* ============ Doc summary (Manual / Terms / Privacy) ============ */
.doc-summary{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:52px 48px; text-align:center;
}
.doc-summary-ic{
  width:64px; height:64px; border-radius:18px; background:var(--green-100);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
}
.doc-summary-ic svg{ width:28px; height:28px; color:var(--green-800); }
.doc-summary h2{ font-size:24px; margin-bottom:12px; }
.doc-summary > p{ color:var(--ink-soft); font-size:15px; line-height:1.75; margin:0 auto 30px; max-width:480px; }
.doc-summary-points{ display:flex; flex-direction:column; gap:13px; text-align:left; max-width:420px; margin:0 auto 32px; }
.doc-summary-points .dp{ display:flex; gap:10px; font-size:14px; color:var(--ink); line-height:1.5; }
.doc-summary-points .dp svg{ width:17px; height:17px; color:var(--green-700); flex-shrink:0; margin-top:2px; }
.doc-summary-actions{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.doc-summary-meta{
  display:flex; justify-content:center; gap:18px; margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace; flex-wrap:wrap;
}
.doc-summary-meta b{ color:var(--green-800); }

/* ============ Footer ============ */
.footer{ background:var(--green-950); color:rgba(255,255,255,.7); padding:80px 0 30px; position:relative; overflow:hidden; margin-top:60px;}
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px; }
.footer-brand .brand-word{ color:#fff; }
.footer-brand .brand-by{ color:rgba(255,255,255,.5); }
.footer-brand p{ font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.7; margin:18px 0 22px; max-width:280px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:.25s; }
.footer-social a:hover{ background:var(--gold-600); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h5{ color:#fff; font-family:'Space Grotesk',sans-serif; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,.6); transition:.25s; }
.footer-col a:hover{ color:var(--gold-300); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-bottom p{ font-size:12.5px; color:rgba(255,255,255,.45); margin:0; }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ font-size:12.5px; color:rgba(255,255,255,.45); }
.footer-legal a:hover{ color:#fff; }

/* ============ Mobile nav drawer ============ */
.mobile-drawer{
  position:fixed; top:0; right:-100%; width:82%; max-width:340px; height:100vh; background:var(--surface);
  z-index:200; transition:right .4s var(--ease-out); box-shadow:-20px 0 60px rgba(0,0,0,.2);
  padding:100px 30px 30px; display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer.open{ right:0; }
.mobile-drawer a{ padding:14px 4px; font-size:17px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
.drawer-overlay{ position:fixed; inset:0; background:rgba(14,34,22,.5); z-index:150; opacity:0; pointer-events:none; transition:opacity .4s; backdrop-filter:blur(3px); }
.drawer-overlay.open{ opacity:1; pointer-events:all; }
.drawer-close{ position:fixed; top:20px; right:calc(18% + 20px); max-width:calc(340px + 40px); z-index:210; width:42px; height:42px; border-radius:12px; background:var(--paper-dim); display:none; align-items:center; justify-content:center; }
.drawer-close.open{ display:flex; }

/* ============ Page transition ============ */
.page-fade{ animation:pageFadeIn .6s var(--ease-out); }
@keyframes pageFadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* ============ Back to top ============ */
.to-top{
  position:fixed; bottom:28px; right:28px; width:48px; height:48px; border-radius:50%;
  background:var(--green-950); display:flex; align-items:center; justify-content:center; z-index:80;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:.35s var(--ease-out); box-shadow:var(--shadow-2);
}
.to-top.show{ opacity:1; pointer-events:all; transform:translateY(0); }
.to-top svg{ width:18px; height:18px; color:#fff; }

/* ---- Switch the comparison table to stacked cards below 560px ---- */
@media (max-width:560px){
  .compare-table-wrap{ display:none; }
  .compare-cards{ display:flex; }
}

/* ============ Responsive ============ */
@media (max-width: 1080px){
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-band-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .price-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .flow-wrap{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .flow-step:nth-child(2)::after{ display:none; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .nav-links, .nav-actions .btn-ghost{ display:none; }
  .nav-burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ height:420px; margin-top:20px; }
  .split, .split.rev{ grid-template-columns:1fr; gap:40px; }
  .split.rev .split-media{ order:0; }
  .showcase-panel{ grid-template-columns:1fr; gap:36px; }
  .showcase-panel .showcase-stage{ order:-1; }
  .story-grid{ grid-template-columns:1fr; gap:44px; }
  .mv-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .doc-layout{ grid-template-columns:1fr; }
  .doc-toc{ position:relative; top:0; }
  .price-card.feat{ transform:none; }
  .quote-strip{ grid-template-columns:1fr; text-align:center; padding:40px 28px; }
  .quote-strip .quote-mark{ display:none; }
}
@media (max-width: 640px){
  .container{ padding:0 20px; }
  .section{ padding:80px 0; }
  .feat-grid, .price-grid, .price-grid-2, .values-grid{ grid-template-columns:1fr; }
  .price-grid-2{ max-width:420px; }
  .stats-band-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cta-banner, .stats-band{ padding:46px 26px; }
  .footer-top{ grid-template-columns:1fr; }
  .hero{ padding:150px 0 60px; }
  .team-strip{ flex-direction:column; text-align:center; }
  .hero-stage{ height:380px; }
  .device-side-a{ left:-14%; width:130px; }
  .device-side-b{ right:-16%; width:118px; }
  .device-main{ width:210px; margin-left:-105px; }
  .float-card{ padding:10px 12px; gap:8px; }
  .float-card b{ font-size:13px; }
  .float-card span{ font-size:10px; }
  .fc-1{ left:-8%; }
  .fc-2{ right:-10%; }
  .doc-summary{ padding:40px 26px; }
}

/* ---- Extra-small phones (320px – 400px) ---- */
@media (max-width: 400px){
  .container{ padding:0 16px; }
  .topbar-inner{ padding:0 16px; }
  .section{ padding:64px 0; }
  .section-tight{ padding:56px 0; }
  .hero{ padding:128px 0 44px; }
  .brand-mark{ width:32px; height:32px; border-radius:9px; }
  .brand-word{ font-size:16px; }
  .brand-by{ font-size:8px; }
  .nav-actions{ gap:8px; }
  .nav-actions .btn-primary.btn-sm{ padding:9px 13px; font-size:12.5px; }
  .hero-title{ font-size:28px; line-height:1.18; }
  .hero-sub{ font-size:14.5px; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-cta .btn{ width:100%; }
  .hero-stats{ gap:16px; flex-wrap:wrap; }
  .hero-stat b{ font-size:22px; }
  .hero-stage{ height:300px; }
  .device-main{ width:172px; margin-left:-86px; top:8%; }
  .device-side-a, .device-side-b{ display:none; }
  .float-card{ display:none; }
  .hero-glow{ width:380px; height:380px; }
  .section-title{ font-size:26px; }
  .section-sub{ font-size:14.5px; }
  .about-hero{ padding:128px 0 36px; }
  .about-hero h1{ font-size:28px; }
  .about-hero p{ font-size:15px; }
  .eyebrow{ font-size:10.5px; padding:6px 12px; }
  .flow-wrap{ grid-template-columns:1fr; }
  .flow-step:not(:last-child)::after{ display:none; }
  .showcase-tabs{ gap:6px; }
  .showcase-tab{ padding:9px 14px; font-size:12.5px; }
  .showcase-panel h3{ font-size:21px; }
  .appshot{ width:236px; }
  .compare-table th, .compare-table td{ padding:11px 12px; font-size:12.5px; }
  .stats-band, .cta-banner{ padding:32px 18px; border-radius:20px; }
  .stat-block b{ font-size:24px; }
  .cta-banner h2{ font-size:22px; }
  .cta-banner p{ font-size:14px; }
  .quote-strip{ padding:28px 18px; }
  .quote-strip p{ font-size:16px; }
  .price-card{ padding:26px 18px; }
  .price-amt .num{ font-size:30px; }
  .price-card.custom .price-amt .num{ font-size:22px; }
  .billing-toggle{ gap:10px; flex-wrap:wrap; }
  .faq-q{ padding:16px 18px; font-size:14px; }
  .faq-a-inner{ padding:0 18px 18px; font-size:13.5px; }
  .contact-form{ padding:24px 18px; }
  .contact-card{ padding:16px; gap:12px; }
  .mv-card{ padding:26px 20px; }
  .team-strip{ padding:24px 18px; }
  .team-badge{ width:56px; height:56px; border-radius:16px; }
  .team-badge svg{ width:26px; height:26px; }
  .doc-hero-top{ flex-direction:column; align-items:stretch; }
  .doc-hero-top .btn{ width:100%; }
  .doc-hero h1{ font-size:26px; }
  .doc-meta{ gap:10px 14px; font-size:11.5px; }
  .doc-summary{ padding:32px 18px; }
  .doc-summary-ic{ width:52px; height:52px; border-radius:14px; }
  .doc-summary-ic svg{ width:22px; height:22px; }
  .doc-summary h2{ font-size:20px; }
  .doc-summary-actions{ flex-direction:column; align-items:stretch; }
  .doc-summary-actions .btn{ width:100%; }
  .footer{ padding:56px 0 24px; }
  .footer-brand p{ max-width:none; }
}