/* =========================================================
   VerifyGN — ship good
   Design system: metrology-instrument language.
   Display: Space Grotesk · Body: IBM Plex Sans · Data: IBM Plex Mono
   ========================================================= */

:root{
  /* palette — derived from the logo (forest green / brick red on black) */
  --ink:#0D1117; --ink-2:#11161D; --ink-3:#161D26;
  --paper:#FFFFFF; --mist:#F5F7F8;
  --line:#E5E9ED; --line-dk:#232C37;

  --green:#36A046; --green-cta:#2C7E37; --green-br:#49BC5C; --green-soft:#E9F5EC;
  --red:#C73631; --red-soft:#FBECEB;
  --sage:#7CA888;

  /* text */
  --t-d:#EAEEF3; --t-d2:#A4AFBD; --t-d3:#6F7B8A;
  --t-l:#0D1117; --t-l2:#54606F; --t-l3:#8A95A3;

  --display:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --body:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --maxw:1200px;
  --r:14px; --r-lg:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--t-l);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:0}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--green); opacity:.6}
.on-dark .eyebrow{color:var(--green-br)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600;
  font-size:15px; padding:13px 22px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s, border-color .18s, color .18s; white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--green-br); outline-offset:2px}
.btn-green{background:var(--green-cta); color:#fff}
.btn-green:hover{background:#2a8c39; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--t-d); border-color:var(--line-dk)}
.btn-ghost:hover{border-color:var(--sage); color:#fff; transform:translateY(-2px)}
.btn-ghost-l{background:transparent; color:var(--t-l); border-color:var(--line)}
.btn-ghost-l:hover{border-color:var(--green); color:var(--green-cta); transform:translateY(-2px)}
.btn .arr{transition:transform .18s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(13,17,23,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-dk)}
.nav-in{display:flex; align-items:center; gap:28px; height:72px}
.brand{display:flex; align-items:center; gap:0}
.brand img{height:34px; width:auto}
.nav-links{display:flex; gap:26px; margin-left:14px}
.nav-links a{font-size:14.5px; color:var(--t-d2); transition:color .15s; font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:14px}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--t-d); margin:5px 0; transition:.25s}

/* ---------- sections ---------- */
.sec{padding:112px 0}
.sec-head{max-width:760px; margin-bottom:54px}
.sec-head h2{font-size:clamp(30px,4vw,46px); margin:18px 0 0}
.sec-head p{margin-top:18px; color:var(--t-l2); font-size:18px}
.on-dark{background:var(--ink); color:var(--t-d)}
.on-dark h2{color:#fff}
.on-dark .sec-head p{color:var(--t-d2)}
.on-mist{background:var(--mist)}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--t-d); position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-dk)}
.hero::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(54,160,70,.13), transparent 60%),
    linear-gradient(transparent 96%, rgba(255,255,255,.03) 96%) 0 0/100% 26px,
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.03) 96%) 0 0/26px 100%;
  pointer-events:none}
.hero-in{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:96px 0 104px}
.hero h1{font-size:clamp(38px,5.4vw,66px); letter-spacing:-.03em; margin:22px 0 0}
.hero h1 .ok{color:var(--green-br); position:relative; white-space:nowrap}
.hero h1 .ok::after{content:""; position:absolute; left:0; right:0; bottom:.08em; height:.07em;
  background:var(--green); border-radius:2px}
.hero-sub{margin-top:24px; font-size:19.5px; line-height:1.55; color:var(--t-d2); max-width:560px}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.hero-trust{margin-top:30px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--t-d3); display:flex; align-items:center; gap:10px}
.hero-trust b{color:var(--sage); font-weight:500}

/* ---------- the scope (hero signature visual) ---------- */
.scope{position:relative; aspect-ratio:1/.94; background:linear-gradient(160deg,#10161E,#0B0F14);
  border:1px solid var(--line-dk); border-radius:var(--r-lg); padding:22px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.scope-grid{position:absolute; inset:0;
  background:linear-gradient(transparent 95%, rgba(124,168,136,.10) 95%) 0 0/100% 22px,
            linear-gradient(90deg, transparent 95%, rgba(124,168,136,.10) 95%) 0 0/22px 100%;}
.scope-bar{position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between;
  align-items:center; padding:14px 18px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--t-d3); z-index:3}
.scope-bar .live{display:inline-flex; align-items:center; gap:7px; color:var(--green-br)}
.scope-bar .live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green-br);
  box-shadow:0 0 0 0 rgba(73,188,92,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(73,188,92,.5)}70%{box-shadow:0 0 0 8px rgba(73,188,92,0)}100%{box-shadow:0 0 0 0 rgba(73,188,92,0)}}
.scope svg{position:absolute; inset:0; width:100%; height:100%}
.bracket{position:absolute; width:26px; height:26px; border:2px solid var(--sage); opacity:.55}
.bracket.tl{top:54px; left:34px; border-right:0; border-bottom:0}
.bracket.tr{top:54px; right:34px; border-left:0; border-bottom:0}
.bracket.bl{bottom:64px; left:34px; border-right:0; border-top:0}
.bracket.br{bottom:64px; right:34px; border-left:0; border-top:0}
.scan{position:absolute; left:30px; right:30px; height:2px; top:60px;
  background:linear-gradient(90deg,transparent,var(--green-br),transparent);
  box-shadow:0 0 16px 2px rgba(73,188,92,.55); animation:sweep 3.6s var(--ease) infinite; z-index:2}
@keyframes sweep{0%{top:62px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 96px);opacity:0}}
.verdict{position:absolute; left:22px; bottom:18px; right:22px; display:flex; align-items:center;
  justify-content:space-between; z-index:3}
.pass{display:inline-flex; align-items:center; gap:9px; background:rgba(54,160,70,.14);
  border:1px solid rgba(73,188,92,.5); color:var(--green-br); font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; padding:8px 13px; border-radius:9px}
.pass svg{position:static; width:15px; height:15px}
.verdict .spec{font-family:var(--mono); font-size:11px; color:var(--t-d3); letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.scan{animation:none; top:46%}.scope-bar .live::before{animation:none}}

/* ---------- trust strip ---------- */
.strip{background:var(--ink-2); border-bottom:1px solid var(--line-dk); padding:26px 0}
.strip-in{display:flex; align-items:center; gap:34px; flex-wrap:wrap}
.strip-label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-d3); white-space:nowrap}
.strip-names{display:flex; gap:30px; flex-wrap:wrap; align-items:center}
.strip-names span{font-family:var(--display); font-weight:600; font-size:16px; color:var(--t-d2); opacity:.9}

/* ---------- problem stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px;
  position:relative}
.stat .num{font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,46px); color:var(--ink);
  letter-spacing:-.03em; line-height:1}
.stat .num small{font-size:.45em; color:var(--red); margin-left:4px; font-weight:600; letter-spacing:0}
.stat .lab{margin-top:12px; color:var(--t-l2); font-size:15.5px}
.stat .tick{position:absolute; top:26px; right:26px; font-family:var(--mono); font-size:11px; color:var(--t-l3)}
.src{margin-top:22px; font-family:var(--mono); font-size:11.5px; color:var(--t-l3); letter-spacing:.03em}

/* ---------- platform cards ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:28px 24px;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; position:relative; overflow:hidden}
.card:hover{transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(13,17,23,.4); border-color:#cfd8df}
.card .ix{width:46px; height:46px; border-radius:11px; display:grid; place-items:center; margin-bottom:20px;
  background:var(--green-soft); color:var(--green-cta)}
.card .ix svg{width:23px; height:23px}
.card.red .ix{background:var(--red-soft); color:var(--red)}
.card h3{font-size:20px; margin-bottom:8px}
.card p{color:var(--t-l2); font-size:15px}
.card .micro{margin-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--t-l3);
  letter-spacing:.03em; padding-top:14px; border-top:1px dashed var(--line)}
.card .step{position:absolute; top:22px; right:24px; font-family:var(--mono); font-size:12px; color:var(--green)}

/* ---------- detect+correct band ---------- */
.loop-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center}
.loop-copy h2{font-size:clamp(30px,3.8vw,44px); margin-top:18px}
.loop-copy p{color:var(--t-d2); margin-top:20px; font-size:18px}
.loop-note{margin-top:24px; font-family:var(--mono); font-size:12.5px; color:var(--sage);
  border-left:2px solid var(--green); padding-left:14px; letter-spacing:.02em}
.flow{display:flex; flex-direction:column; gap:14px}
.flow-step{display:flex; gap:18px; align-items:flex-start; background:var(--ink-3);
  border:1px solid var(--line-dk); border-radius:var(--r); padding:22px 24px; position:relative}
.flow-step.correct{border-color:rgba(73,188,92,.45); background:rgba(54,160,70,.07)}
.flow-num{font-family:var(--mono); font-size:13px; color:var(--green-br); padding-top:2px; min-width:24px}
.flow-step h4{font-family:var(--display); font-size:18px; margin:0 0 5px; color:#fff; font-weight:600}
.flow-step p{font-size:14.5px; color:var(--t-d2); margin:0}
.flow-link{position:absolute; left:35px; bottom:-14px; width:2px; height:14px; background:var(--line-dk)}
.flow-step.correct .flow-num{color:var(--green-br)}

/* ---------- deployment ---------- */
.deploy{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.dep{border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; background:var(--paper);
  transition:border-color .2s, transform .2s var(--ease)}
.dep:hover{border-color:var(--green); transform:translateY(-3px)}
.dep .tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-cta)}
.dep h3{font-size:22px; margin:14px 0 10px}
.dep p{color:var(--t-l2); font-size:15px}
.dep .glyph{width:54px; height:54px; margin-bottom:6px; color:var(--ink)}

/* ---------- industries ---------- */
.inds{display:flex; flex-wrap:wrap; gap:12px}
.ind{display:inline-flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:11px 20px; font-weight:500; font-size:15px; transition:.18s}
.ind:hover{border-color:var(--green); color:var(--green-cta)}
.ind .d{width:7px; height:7px; border-radius:50%; background:var(--green)}

/* ---------- why ---------- */
.why{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 40px}
.why-item{display:flex; gap:18px; padding:24px 0; border-top:1px solid var(--line)}
.why-item .k{font-family:var(--mono); font-size:13px; color:var(--green); padding-top:3px; min-width:34px}
.why-item h3{font-size:19px; margin-bottom:6px}
.why-item p{color:var(--t-l2); font-size:15px}

/* ---------- cta band ---------- */
.cta{background:var(--ink); color:var(--t-d); text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 360px at 50% 120%, rgba(54,160,70,.16), transparent 65%)}
.cta-in{position:relative; padding:96px 0; max-width:720px; margin:0 auto}
.cta h2{font-size:clamp(32px,4.4vw,52px); color:#fff}
.cta p{margin:18px auto 0; color:var(--t-d2); font-size:19px; max-width:560px}
.cta-row{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.cta-contact{margin-top:26px; font-family:var(--mono); font-size:13px; color:var(--t-d3); letter-spacing:.03em}
.cta-contact a{color:var(--sage)}

/* ---------- footer ---------- */
.foot{background:var(--ink-2); color:var(--t-d2); padding:64px 0 34px; border-top:1px solid var(--line-dk)}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:42px;
  border-bottom:1px solid var(--line-dk)}
.foot img{height:34px; margin-bottom:18px}
.foot-blurb{font-size:14.5px; color:var(--t-d3); max-width:280px}
.foot-col h5{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t-d3); margin:6px 0 16px; font-weight:500}
.foot-col a{display:block; font-size:14.5px; color:var(--t-d2); margin-bottom:11px; transition:.15s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px;
  font-family:var(--mono); font-size:12px; color:var(--t-d3); flex-wrap:wrap; gap:10px}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr; gap:44px; padding:64px 0 76px}
  .scope{max-width:460px; margin-top:6px}
  .loop-in{grid-template-columns:1fr; gap:40px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    background:var(--ink); padding:18px 28px 26px; gap:4px; border-bottom:1px solid var(--line-dk)}
  .nav.open .nav-links a{padding:12px 0; border-bottom:1px solid var(--line-dk)}
  .sec{padding:78px 0}
  .stats,.cards,.deploy,.why{grid-template-columns:1fr}
  .strip-in{gap:18px}
}

/* =========================================================
   ROI CALCULATOR  (roi.html)
   ========================================================= */
.roi-head{background:var(--ink); color:var(--t-d); padding:64px 0 56px; border-bottom:1px solid var(--line-dk);
  position:relative; overflow:hidden}
.roi-head::before{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 360px at 85% -20%, rgba(54,160,70,.12), transparent 60%);
  pointer-events:none}
.roi-head h1{font-size:clamp(32px,4.4vw,52px); margin:18px 0 0}
.roi-head p{margin-top:16px; color:var(--t-d2); font-size:18px; max-width:620px}
.roi-head .note{margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--t-d3); letter-spacing:.03em}

.roi{padding:64px 0 110px; background:var(--mist)}
.roi-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start}

/* inputs */
.roi-inputs{display:flex; flex-direction:column; gap:26px}
.roi-group{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px}
.roi-group h3{font-family:var(--display); font-size:15px; letter-spacing:.02em; margin:0 0 4px; color:var(--ink)}
.roi-group .gh{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-cta); margin-bottom:18px}
.field{display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:11px 0;
  border-top:1px solid var(--line)}
.field:first-of-type{border-top:0}
.field label{font-size:14.5px; color:var(--t-l)}
.field .sub{display:block; font-size:12px; color:var(--t-l3); margin-top:1px}
.field .ctrl{display:flex; align-items:center; gap:8px; justify-self:end}
.field input[type=number]{width:118px; font-family:var(--mono); font-size:15px; text-align:right;
  padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink)}
.field input[type=number]:focus{outline:2px solid var(--green-br); outline-offset:1px; border-color:var(--green)}
.field .unit{font-family:var(--mono); font-size:12px; color:var(--t-l3); min-width:34px}
.field.range{grid-template-columns:1fr; gap:8px}
.field.range .top{display:flex; justify-content:space-between; align-items:baseline}
.field.range .val{font-family:var(--mono); font-size:15px; color:var(--green-cta); font-weight:500}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px;
  background:var(--line); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--green-cta); cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--green-cta);
  cursor:pointer; border:3px solid #fff}
input[type=range]:focus-visible{outline:2px solid var(--green-br); outline-offset:4px}

/* results panel */
.roi-out{position:sticky; top:92px; background:var(--ink); color:var(--t-d); border:1px solid var(--line-dk);
  border-radius:var(--r-lg); padding:30px; box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.roi-out .oh{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-d3); margin-bottom:20px}
.big3{display:grid; gap:14px; margin-bottom:26px}
.big{background:var(--ink-3); border:1px solid var(--line-dk); border-radius:var(--r); padding:18px 20px}
.big.lead{background:rgba(54,160,70,.10); border-color:rgba(73,188,92,.4)}
.big .v{font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-.02em; color:#fff; line-height:1}
.big.lead .v{color:var(--green-br)}
.big .l{font-size:13px; color:var(--t-d2); margin-top:7px}

.brk{margin:24px 0 6px}
.brk-h{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--t-d3); margin-bottom:14px;
  text-transform:uppercase}
.bar{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:10px; margin-bottom:10px}
.bar .bl{font-size:12.5px; color:var(--t-d2)}
.bar .track{height:9px; background:var(--ink-3); border-radius:5px; overflow:hidden}
.bar .fill{height:100%; background:var(--green); border-radius:5px; transition:width .5s var(--ease)}
.bar .bv{font-family:var(--mono); font-size:12px; color:var(--sage); min-width:58px; text-align:right}

.cash{margin-top:26px}
.cash svg{width:100%; height:auto; display:block}
.cash .cap{font-family:var(--mono); font-size:11px; color:var(--t-d3); margin-top:8px; letter-spacing:.04em}

.roi-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.roi-actions .btn{flex:1; justify-content:center; min-width:130px}
.roi-foot-note{font-family:var(--mono); font-size:11px; color:var(--t-d3); margin-top:18px; letter-spacing:.02em;
  text-align:center}
.roi-foot-note a{color:var(--sage); text-decoration:underline}

@media (max-width:980px){
  .roi-grid{grid-template-columns:1fr; gap:28px}
  .roi-out{position:static}
}
@media (max-width:760px){
  .field input[type=number]{width:104px}
}