/* ==========================================================================
   Tech Drive — design system
   --------------------------------------------------------------------------
   Base colour is RGB(23,21,22). The accent ramp is sampled directly from the
   logo mark: the hexagon stroke runs from a dim teal at its upper-left vertex
   (#3E7C86) through #5FBCA4 to a bright mint at its lower-right (#9CEBC8).
   That same 135° ramp is the site's only gradient.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/grotesk-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/grotesk-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}

/* --------------------------------------------------------------- 2. Tokens */
:root{
  /* surfaces */
  --bg:#171516;
  --bg-1:#1C1A1B;
  --bg-2:#221F20;
  --bg-3:#2A2627;
  --line:#302C2E;
  --line-2:#3C3739;

  /* text */
  --tx:#F3F1F1;
  --tx-2:#ABA5A6;
  --tx-3:#797374;

  /* brand — measured off the logo */
  --teal:#3E7C86;
  --mid:#5FBCA4;
  --mint:#9CEBC8;
  --accent:#6FE0B0;
  --accent-hi:#9CEBC8;
  --accent-ink:#0C1611;
  --grad:linear-gradient(135deg,var(--teal) 0%,var(--mid) 48%,var(--mint) 100%);
  /* Same ramp lifted into the legible range — the logo's dim teal end falls
     below usable contrast when it carries type on the base colour. */
  --grad-tx:linear-gradient(96deg,#57C6A4 0%,#84E5BE 52%,#AEF2D8 100%);
  --grad-soft:linear-gradient(135deg,rgba(62,124,134,.16) 0%,rgba(156,235,200,.14) 100%);

  /* semantic */
  --warn:#F5C04A;
  --danger:#F08A7A;

  /* accent glow — the brand mint reads as emissive against the base colour */
  --glow-xs:0 0 10px rgba(111,224,176,.22);
  --glow-sm:0 0 14px rgba(111,224,176,.30),0 0 34px rgba(111,224,176,.10);
  --glow:0 0 20px rgba(111,224,176,.42),0 0 54px rgba(111,224,176,.16);
  --glow-lg:0 0 26px rgba(111,224,176,.55),0 0 72px rgba(111,224,176,.22);
  --glow-tx:0 0 16px rgba(111,224,176,.45);
  /* Faint internal light for panels and cells — the tile should look lit
     from within, not outlined in neon. Tuned to be barely nameable. */
  --glow-cell:0 0 26px -16px rgba(111,224,176,.55);
  --glow-cell-hi:0 0 32px -13px rgba(111,224,176,.8);
  --grid-line:rgba(111,224,176,.085);

  /* geometry */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --wrap:1180px;
  --pad:clamp(20px,5vw,32px);
  --sec:clamp(68px,9vw,124px);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------- 3. Foundation */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:400 16px/1.65 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(111,224,176,.26)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:0}

h1,h2,h3,h4{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--tx)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:600;color:var(--tx)}
code,kbd{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;font-size:.92em}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-ink);padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* --------------------------------------------------------------- 4. Layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1360px}
.sec{padding-block:var(--sec);position:relative}
.sec-tight{padding-block:clamp(48px,6vw,80px)}
.sec + .sec{padding-top:0}
.sec-line{border-top:1px solid var(--line)}
.sec-raise{background:var(--bg-1)}

.grid{display:grid;gap:clamp(14px,2vw,20px)}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){.c4,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
@media(max-width:660px){.c2,.c3,.c4,.c5{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* --------------------------------------------------------- 5. Type helpers */
.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.eyebrow-mute{color:var(--tx-3)}
.display{font-size:clamp(2.5rem,6.2vw,4.3rem);line-height:1.02;letter-spacing:-.035em}
h1,.h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.03em}
h2,.h2{font-size:clamp(1.7rem,3.3vw,2.45rem);letter-spacing:-.025em}
h3,.h3{font-size:1.1rem;letter-spacing:-.01em;line-height:1.35}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;color:var(--tx-2);max-width:62ch}
.body{color:var(--tx-2);max-width:68ch}
.small{font-size:.875rem;line-height:1.6;color:var(--tx-2)}
.micro{font-size:.78rem;line-height:1.55;color:var(--tx-3)}
.note{font-size:.82rem;color:var(--tx-3);font-style:italic}
.grad-text{background:var(--grad-tx);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.sec-head{max-width:70ch;margin-bottom:clamp(32px,4vw,52px)}
.sec-head .lede{margin-top:16px}
.center{text-align:center}
.center .lede,.center .body{margin-inline:auto}
.stack>*+*{margin-top:14px}
.stack-lg>*+*{margin-top:24px}

/* Unfilled config token — impossible to ship by accident. */
.td-todo{background:rgba(245,192,74,.16);color:var(--warn);border:1px dashed rgba(245,192,74,.5);
  border-radius:4px;padding:0 5px;font-size:.9em;font-weight:600;white-space:nowrap}

/* -------------------------------------------------------------- 6. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.925rem;
  letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease),
             box-shadow .22s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}

.btn-pri{background:var(--accent);color:var(--accent-ink);box-shadow:var(--glow-sm)}
.btn-pri:hover{background:var(--accent-hi);color:var(--accent-ink);box-shadow:var(--glow)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--tx)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(111,224,176,.06);
  box-shadow:var(--glow-xs)}
.btn-quiet{background:var(--bg-2);border-color:var(--line);color:var(--tx)}
.btn-quiet:hover{background:var(--bg-3);border-color:var(--line-2);color:var(--tx)}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-lg{padding:16px 28px;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-block{width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;
  color:var(--accent);transition:gap .18s var(--ease),text-shadow .18s var(--ease)}
.link-arrow:hover{gap:11px;color:var(--accent-hi);text-shadow:var(--glow-tx)}

/* Icons hydrated by main.js carry no intrinsic size — give them one. */
i[data-icon]{display:inline-flex;align-items:center;justify-content:center;
  width:1.05em;height:1.05em;flex:none;line-height:0}
i[data-icon] svg{width:100%;height:100%;display:block}
.link-arrow i[data-icon]{width:15px;height:15px}
.btn i[data-icon]{width:16px;height:16px}
.hex i[data-icon]{width:20px;height:20px}
.hex-sm i[data-icon]{width:15px;height:15px}

/* ---------------------------------------------------------------- 7. Cards */
.card{position:relative;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.card-hover:hover{border-color:var(--line-2);background:var(--bg-2)}
/* gradient hairline along the top edge */
.card-top::before{content:'';position:absolute;inset:-1px auto auto -1px;width:calc(100% + 2px);
  height:1px;background:var(--grad);border-radius:var(--r-lg) var(--r-lg) 0 0;opacity:.8}
.card h3{margin-bottom:10px}
.card > .body,.card > .small{margin-bottom:0}
.card-link{display:flex;flex-direction:column;color:inherit}
.card-link:hover{color:inherit}
.card-link .link-arrow{margin-top:auto;padding-top:20px}
.card-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--tx-3);font-family:'Space Grotesk',sans-serif;
  letter-spacing:.02em}

/* --------------------------------------------------------- 8. Hexagon icon */
.hex{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;
  color:var(--accent);filter:drop-shadow(0 0 9px rgba(111,224,176,.22))}
.hex::before{content:'';position:absolute;inset:0;background:var(--grad-soft);
  border:1px solid rgba(111,224,176,.26);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.card-hover:hover .hex{filter:drop-shadow(0 0 14px rgba(111,224,176,.42))}
.hex svg{position:relative;width:20px;height:20px}
.hex-sm{width:30px;height:30px}.hex-sm svg{width:15px;height:15px}
.hex-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.9rem;
  position:relative;color:var(--accent)}

/* ------------------------------------------------------------ 9. Feat list */
.feat{display:flex;gap:16px;align-items:flex-start}
.feat-body h3{margin-bottom:6px}
.feat-body p{color:var(--tx-2);font-size:.92rem;line-height:1.6}
.feat-col{flex-direction:column;gap:18px}

/* bullet lists with a small hexagon marker */
.bul li{position:relative;padding-left:26px;color:var(--tx-2);line-height:1.6}
.bul li + li{margin-top:11px}
.bul li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--grad);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.bul strong{color:var(--tx)}
.bul-tight li + li{margin-top:7px}
.bul-2{columns:2;column-gap:clamp(24px,4vw,56px)}
.bul-2 li{break-inside:avoid}
@media(max-width:760px){.bul-2{columns:1}}

/* ------------------------------------------------------------ 10. Trust bar */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1)}
.trust-i{padding:22px 24px;border-right:1px solid var(--line)}
.trust-i:last-child{border-right:0}
.trust-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.55rem;
  letter-spacing:-.025em;line-height:1.1;margin-bottom:4px}
.trust-l{font-size:.78rem;color:var(--tx-3);letter-spacing:.04em;text-transform:uppercase}
@media(max-width:820px){.trust{grid-template-columns:repeat(2,1fr)}
  .trust-i{border-bottom:1px solid var(--line)}
  .trust-i:nth-child(2n){border-right:0}
  .trust-i:nth-last-child(-n+2){border-bottom:0}}

/* ---------------------------------------------------------------- 11. Steps */
.steps{counter-reset:s;display:grid;gap:clamp(16px,2vw,22px)}
.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps-4,.steps-3{grid-template-columns:1fr}}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step::before{content:'';position:absolute;top:-1px;left:0;width:38px;height:1px;background:var(--grad)}
.step-n{font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:9px}
.step h3{margin-bottom:8px}
.step p{color:var(--tx-2);font-size:.92rem;line-height:1.6}

/* vertical variant (delivery process, timeline) */
.steps-v{display:grid;gap:0}
.steps-v .step{border-top:0;border-left:1px solid var(--line);padding:0 0 30px 28px;margin-left:5px}
.steps-v .step::before{top:.5em;left:-5px;width:9px;height:9px;background:var(--grad);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.steps-v .step:last-child{border-left-color:transparent;padding-bottom:0}

/* ----------------------------------------------------------------- 12. FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;font-family:'Space Grotesk',sans-serif;
  font-weight:500;font-size:1.02rem;line-height:1.45;color:var(--tx);
  transition:color .18s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:'';flex:none;width:11px;height:11px;margin-top:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.faq-a{padding:0 0 24px;color:var(--tx-2);max-width:78ch;line-height:1.7}
.faq-a > * + *{margin-top:12px}

/* --------------------------------------------------------------- 13. Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-1);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:.9rem}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
table.cmp thead th{position:sticky;top:0;z-index:2;background:var(--bg-2);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.85rem;
  letter-spacing:.02em;white-space:nowrap;border-bottom:1px solid var(--line-2)}
table.cmp tbody th{font-weight:500;color:var(--tx);white-space:nowrap;
  background:var(--bg-1);position:sticky;left:0;z-index:1}
table.cmp td{color:var(--tx-2)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:var(--bg-2)}
.yes{color:var(--accent);font-weight:600}
.no{color:var(--tx-3)}
.tbl-hint{font-size:.78rem;color:var(--tx-3);margin-top:10px}
@media(min-width:900px){.tbl-hint{display:none}}

/* two-column responsibility table */
table.split-tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
table.split-tbl th,table.split-tbl td{padding:13px 18px;border-bottom:1px solid var(--line);text-align:left}
table.split-tbl thead th{font-family:'Space Grotesk',sans-serif;font-size:.85rem;
  background:var(--bg-2);white-space:nowrap}
table.split-tbl thead th:not(:first-child),table.split-tbl td:not(:first-child){
  text-align:center;width:150px}
table.split-tbl tbody th{font-weight:400;color:var(--tx-2)}

/* --------------------------------------------------------------- 14. Header */
/* Fixed height and appearance — the bar does not react to scroll position. */
.hdr{position:sticky;top:0;z-index:90;border-bottom:1px solid var(--line);
  background:rgba(23,21,22,.88);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%)}
/* Wider than the content container so the logo sits left and the demo CTA
   sits hard right, rather than both being pulled toward the middle. */
.hdr-wrap{width:100%;max-width:1580px;margin-inline:auto;
  padding-inline:clamp(20px,3.4vw,46px)}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);height:74px}
.brand{display:flex;align-items:center;flex:none;color:var(--tx)}
.brand svg,.brand img{height:30px;width:auto}

.nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.hdr-end{margin-left:auto}
.nav-i{position:relative}
.nav-a{display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;color:var(--tx-2);white-space:nowrap;
  transition:color .16s var(--ease),background .16s var(--ease);cursor:pointer;
  background:none;border:0;font-family:inherit}
.nav-a:hover,.nav-i.is-open .nav-a,.nav-a[aria-current]{color:var(--tx);background:var(--bg-2)}
.nav-a[aria-current]{color:var(--accent);text-shadow:var(--glow-tx)}
.nav-cr{width:9px;height:9px;flex:none;transition:transform .2s var(--ease);opacity:.65}
.nav-i.is-open .nav-cr{transform:rotate(180deg)}

.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:298px;padding:8px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.nav-i.is-open .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 13px;border-radius:var(--r-sm);color:var(--tx);
  transition:background .15s var(--ease)}
.drop a:hover{background:var(--bg-3);color:var(--tx)}
.drop b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.92rem}
.drop span{display:block;font-size:.8rem;color:var(--tx-3);margin-top:2px}

.hdr-end{display:flex;align-items:center;gap:10px;flex:none}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;padding:8px 11px;background:none;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx-2);cursor:pointer;
  font-size:.82rem;font-weight:600;font-family:'Space Grotesk',sans-serif;letter-spacing:.04em}
.lang-btn:hover{border-color:var(--line-2);color:var(--tx)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;padding:6px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);display:none}
.lang.is-open .lang-menu{display:block}
.lang-menu button{display:block;width:100%;text-align:left;padding:8px 11px;background:none;
  border:0;border-radius:var(--r-sm);color:var(--tx-2);cursor:pointer;font-size:.86rem}
.lang-menu button:hover{background:var(--bg-3);color:var(--tx)}
.lang-menu button[aria-current]{color:var(--accent)}

.burger{display:none;width:42px;height:42px;place-items:center;background:none;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx);cursor:pointer}
.burger svg{width:19px;height:19px}

@media(max-width:1080px){
  .nav,.hdr-end .btn{display:none}
  .burger{display:grid}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:95;background:var(--bg);display:none;
  flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open{display:flex}
body.no-scroll{overflow:hidden}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:74px;
  flex:none;border-bottom:1px solid var(--line)}
.drawer-nav{padding:14px 0 28px}
.drawer-grp{border-bottom:1px solid var(--line)}
.drawer-grp > button,.drawer-grp > a{display:flex;width:100%;align-items:center;
  justify-content:space-between;gap:14px;padding:17px 0;background:none;border:0;
  font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:500;color:var(--tx);
  cursor:pointer;text-align:left}
.drawer-grp > button svg{width:11px;height:11px;opacity:.6;transition:transform .2s var(--ease)}
.drawer-grp.is-open > button svg{transform:rotate(180deg)}
.drawer-sub{display:none;padding:0 0 14px 16px;border-left:1px solid var(--line);margin-bottom:6px}
.drawer-grp.is-open .drawer-sub{display:block}
.drawer-sub a{display:block;padding:10px 0;color:var(--tx-2);font-size:.95rem}
.drawer-sub a:hover{color:var(--accent)}
.drawer-sub span{display:block;font-size:.78rem;color:var(--tx-3)}
.drawer-foot{padding:24px 0 40px;display:grid;gap:12px}

/* ----------------------------------------------------------------- 15. Hero */
.hero{position:relative;padding-top:clamp(52px,8vw,92px);padding-bottom:var(--sec);
  overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* soft brand glow */
.hero-bg::before{content:'';position:absolute;top:-28%;left:50%;transform:translateX(-50%);
  width:min(1100px,130%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(95,188,164,.18) 0%,rgba(62,124,134,.07) 42%,transparent 68%)}
/* technical grid */
/* Technical grid, faintly lit in the brand mint rather than neutral grey. */
.hero-bg::after{content:'';position:absolute;inset:0;opacity:.75;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 28%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 28%,#000 0%,transparent 72%)}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:32px}
.hero-sm{padding-bottom:clamp(40px,5vw,64px)}

/* Suit constellation — decorative hero art, outline only, never filled.
   Sits behind the content column and fades out towards the copy so it can
   never compete with the headline. Hidden once the text needs full width. */
/* The glow lives on each shape, not on this container. A filter here would
   have to re-render the whole subtree on every animation frame; per-shape
   filters keep each repaint to its own small box. */
.hero-art{position:absolute;right:0;top:0;z-index:0;pointer-events:none;
  width:min(47vw,660px);height:min(640px,100%);
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 34%),
                     linear-gradient(#000 62%,transparent 96%);
  mask-image:linear-gradient(100deg,transparent 4%,#000 34%),
             linear-gradient(#000 62%,transparent 96%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero-art svg{width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:1}
.hero-art .suit{fill:none;stroke:url(#td-art);stroke-width:2.2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  opacity:var(--o,1)}
.hero-art .suit .pip{fill:var(--mint);stroke:none}

/* --- Drift and glow -----------------------------------------------------
   .drift does the movement, .suit does the brightness. Separate elements
   and separate periods, so a shape is rarely at its brightest and its
   furthest at the same moment — that mismatch is what stops it looking
   mechanical. Per-item timings come from art.js.                         */
.hero-art .drift{animation:tdDrift var(--dur,18s) ease-in-out infinite;
  will-change:transform}
.hero-art .suit{animation:tdGlow 9s ease-in-out infinite}

@keyframes tdDrift{
  0%,100%{transform:translate(0,0)}
  25%    {transform:translate(var(--dx),calc(var(--dy) * -1))}
  50%    {transform:translate(calc(var(--dx) * -.5),calc(var(--dy) * -.3))}
  75%    {transform:translate(calc(var(--dx) * -.85),var(--dy))}
}
@keyframes tdGlow{
  0%,100%{opacity:var(--o,1);
          filter:drop-shadow(0 0 9px rgba(132,227,190,.65))}
  50%    {opacity:calc(var(--o,1) * .8);
          filter:drop-shadow(0 0 20px rgba(150,240,205,1))
                 drop-shadow(0 0 40px rgba(111,224,176,.45))}
}
/* Off-screen heroes cost nothing. art.js toggles this via IntersectionObserver. */
.hero-art.is-idle .drift,.hero-art.is-idle .suit,
.hero-art.is-idle .spark{animation-play-state:paused}
.hero-art .frame{fill:none;stroke:url(#td-art);stroke-width:1.8;opacity:.5;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 9px rgba(132,227,190,.45))}
.hero-art .link{stroke:url(#td-art);stroke-width:1.3;opacity:.34;fill:none;
  vector-effect:non-scaling-stroke}
.hero-art .node{fill:#C6F8E4;opacity:.75;
  filter:drop-shadow(0 0 6px rgba(150,240,205,.9))}

/* --- Sparks -------------------------------------------------------------
   Halo is a radial gradient, not a filter: twenty filtered dots would cost
   far more than twenty gradients, and the falloff is softer this way.
   transform-box/origin are required — without them an SVG scale() pivots
   on the viewBox origin, not on the dot. */
.hero-art .spark{transform-box:fill-box;transform-origin:center;
  animation:tdSpark 3s ease-in-out infinite;opacity:.7}
.hero-art .spark-h{fill:url(#td-spark)}
.hero-art .spark-c{fill:#EAFFF6}
/* Held dim at both ends and peaked briefly in the middle, so only a third
   of the field is lit at any moment. A symmetrical ease across the whole
   cycle leaves almost every dot on, which reads as a static starfield
   rather than as twinkling. */
@keyframes tdSpark{
  0%,32%   {opacity:.05;transform:scale(.35)}
  50%      {opacity:1;transform:scale(1)}
  68%,100% {opacity:.05;transform:scale(.35)}
}
/* Wide layouts sit in the shorter hero used by every page but the homepage. */
.hero-art-wide{width:min(54vw,780px);height:min(430px,100%);top:6%}
/* Below ~1120px the headline needs the full column and the lead spade starts
   crowding it, so the art is dropped rather than shrunk into illegibility.
   In the band just above, it is narrowed to keep clear air around the type. */
@media(max-width:1120px){.hero-art{display:none}}
@media(min-width:1121px) and (max-width:1340px){
  .hero-art{width:min(40vw,520px);opacity:.88}}

/* eyebrow pill above hero heading */
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg-1);
  font-size:.8rem;color:var(--tx-2);margin-bottom:26px}
.pill b{color:var(--tx);font-weight:600}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(111,224,176,.16)}

/* ------------------------------------------------------- 16. Media & frames */
.shot{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-1);box-shadow:var(--shadow)}
.shot img{width:100%;display:block}
.shot-cap{padding:13px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--tx-3);
  background:var(--bg-2)}
/* fake browser chrome */
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--bg-2);
  border-bottom:1px solid var(--line)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none}
.shot-bar span{margin-left:8px;font-size:.72rem;color:var(--tx-3);
  font-family:ui-monospace,monospace}

.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-t{display:flex;gap:14px;width:max-content;animation:slide var(--mq,56s) linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* Payment rail chip — icon (or supplier logo) + name + sub-label. */
.rail{display:inline-flex;align-items:center;gap:13px;flex:none;
  padding:14px 20px 14px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-1);min-width:208px;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.marquee:hover .rail{border-color:var(--line-2)}
.rail:hover{border-color:rgba(111,224,176,.4);background:var(--bg-2);box-shadow:var(--glow-xs)}
.rail-ico{position:relative;width:36px;height:36px;flex:none;display:grid;place-items:center;
  color:var(--accent);filter:drop-shadow(0 0 8px rgba(111,224,176,.22))}
.rail-ico::before{content:'';position:absolute;inset:0;background:var(--grad-soft);
  border:1px solid rgba(111,224,176,.24);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.rail-ico i[data-icon]{position:relative;width:17px;height:17px}
/* Drop a supplier logo in place of the icon once files are licensed. */
.rail-logo{width:36px;height:36px;object-fit:contain;flex:none;border-radius:7px;background:var(--bg-2)}
.rail-tx{min-width:0}
.rail b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.95rem;
  color:var(--tx);line-height:1.25;white-space:nowrap}
.rail em{display:block;font-style:normal;font-size:.73rem;color:var(--tx-3);
  letter-spacing:.03em;margin-top:2px;white-space:nowrap}

/* provider wordmark wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1)}
.wall-i{display:grid;place-items:center;padding:24px 14px;min-height:82px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.98rem;
  letter-spacing:-.01em;color:var(--tx-2);text-align:center;
  transition:color .2s var(--ease),background .2s var(--ease)}
.wall-i:hover{color:var(--tx);background:var(--bg-2)}
.wall-i img,.wall-i svg{max-height:26px;width:auto;opacity:.62;
  transition:opacity .2s var(--ease)}
.wall-i:hover img,.wall-i:hover svg{opacity:.95}

/* category tag row */
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tag{display:inline-flex;align-items:center;padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg-1);font-size:.85rem;color:var(--tx-2)}
.tag-on{border-color:var(--accent);color:var(--accent);background:rgba(111,224,176,.08)}

/* --------------------------------------------------------------- 17. Tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);
  padding-bottom:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:13px 18px;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--tx-3);font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.95rem;
  cursor:pointer;white-space:nowrap;margin-bottom:-1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.tab:hover{color:var(--tx-2)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabp{display:none;padding-top:clamp(28px,4vw,44px)}
.tabp.is-on{display:block;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- 18. Specs */
.spec{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1)}
.spec-r{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--line)}
.spec-r:last-child{border-bottom:0}
.spec-r dt{padding:14px 20px;font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:.88rem;color:var(--tx);background:var(--bg-2);border-right:1px solid var(--line)}
.spec-r dd{padding:14px 20px;margin:0;color:var(--tx-2);font-size:.9rem}
@media(max-width:620px){.spec-r{grid-template-columns:1fr}
  .spec-r dt{border-right:0;border-bottom:1px solid var(--line)}}

/* ------------------------------------------------------------ 19. CTA band */
.ctab{position:relative;overflow:hidden;border-top:1px solid var(--line);
  background:var(--bg-1)}
.ctab::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--grad)}
.ctab::after{content:'';position:absolute;bottom:-60%;left:50%;transform:translateX(-50%);
  width:min(900px,120%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(95,188,164,.13) 0%,transparent 64%)}
.ctab-in{position:relative;padding-block:clamp(56px,7vw,92px);text-align:center}
.ctab h2{margin-bottom:16px}
.ctab .lede{margin:0 auto 30px}
.ctab .btn-row{justify-content:center}

/* --------------------------------------------------------------- 20. Footer */
.ftr{border-top:1px solid var(--line);background:var(--bg);padding-top:clamp(52px,6vw,76px)}
.ftr-grid{display:grid;grid-template-columns:1.35fr repeat(3,.92fr) 1.5fr;
  gap:clamp(24px,3vw,38px);padding-bottom:clamp(40px,5vw,60px)}
@media(max-width:1000px){.ftr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr-brand svg,.ftr-brand img{height:28px;width:auto;margin-bottom:16px}
.ftr-tag{font-family:'Space Grotesk',sans-serif;font-size:.88rem;color:var(--tx-2);
  max-width:24ch;line-height:1.5}
.ftr h4{font-family:'Space Grotesk',sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:15px}
.ftr-l li + li{margin-top:9px}
.ftr-l a{color:var(--tx-2);font-size:.89rem}
.ftr-l a:hover{color:var(--accent)}
.ftr-c{display:grid;gap:11px}
.ftr-c div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;font-size:.85rem;
  align-items:baseline}
.ftr-c dt,.ftr-c b{color:var(--tx-3);font-weight:400;font-size:.78rem}
/* Break long addresses at the @ / dot rather than mid-word. */
.ftr-c a{color:var(--tx-2);overflow-wrap:break-word;word-break:normal;hyphens:none}
.ftr-c a:hover{color:var(--accent)}
.badge-24{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:5px 11px;
  border:1px solid rgba(111,224,176,.28);background:rgba(111,224,176,.07);
  border-radius:var(--r-pill);font-size:.76rem;color:var(--accent);font-weight:600}
.badge-24::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(111,224,176,.18)}

.ftr-bot{border-top:1px solid var(--line);padding-block:26px 34px;display:grid;gap:16px}
.ftr-legal{display:flex;gap:16px;align-items:flex-start}
.age{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--tx-3);color:var(--tx-2);font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.78rem}
.ftr-bot p{font-size:.775rem;line-height:1.6;color:var(--tx-3);max-width:96ch}
.ftr-bot p + p{margin-top:9px}
.ftr-end{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;
  align-items:center;padding-top:6px;border-top:1px solid var(--line);margin-top:6px}
.ftr-end p{font-size:.775rem;color:var(--tx-3);margin:0}

/* ---------------------------------------------------- 21. Telegram / cookie */
/* Persistent chat button — labelled, with a slow breathing glow and a shine
   that sweeps across it so it reads as live without being distracting. */
.tg{position:fixed;right:22px;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:14px;overflow:hidden;
  background:var(--accent);color:var(--accent-ink);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.94rem;
  letter-spacing:-.01em;white-space:nowrap;
  box-shadow:var(--glow),0 10px 30px -8px rgba(0,0,0,.65);
  animation:tgBreathe 3.2s ease-in-out infinite;
  transition:transform .2s var(--ease),background .2s var(--ease)}
.tg:hover{transform:translateY(-3px);background:var(--accent-hi);color:var(--accent-ink);
  animation-play-state:paused;box-shadow:var(--glow-lg),0 14px 34px -8px rgba(0,0,0,.7)}
.tg svg{width:20px;height:20px;flex:none;position:relative;z-index:1}
.tg-tx{position:relative;z-index:1}
/* shine sweep */
.tg::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:tgShine 3.2s ease-in-out infinite}

@keyframes tgBreathe{
  0%,100%{box-shadow:var(--glow),0 10px 30px -8px rgba(0,0,0,.65)}
  50%    {box-shadow:var(--glow-lg),0 10px 30px -8px rgba(0,0,0,.65)}
}
@keyframes tgShine{0%,58%{left:-60%}88%,100%{left:125%}}

@media(max-width:700px){
  .tg{right:14px;bottom:14px;padding:12px 16px;font-size:.86rem;gap:8px}
  .tg svg{width:18px;height:18px}
}
/* Very narrow screens: keep the label but shorten the reserved space. */
@media(max-width:380px){.tg{padding:11px 14px;font-size:.8rem}}

.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:85;max-width:660px;
  margin-inline:auto;padding:18px 20px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--shadow);display:none;
  flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cookie.is-on{display:flex}
.cookie p{font-size:.84rem;color:var(--tx-2);flex:1 1 300px;margin:0}
/* Lift clear of the chat button once the two would collide. */
@media(max-width:900px){.cookie{bottom:86px}}

/* ---------------------------------------------------------------- 22. Forms */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.85rem;font-weight:500;color:var(--tx)}
.field label .req{color:var(--accent);margin-left:2px}
.field .hint{font-size:.76rem;color:var(--tx-3)}
.inp{width:100%;padding:12px 14px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--tx);font-size:.92rem;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.inp::placeholder{color:var(--tx-3)}
.inp:hover{border-color:var(--line-2)}
.inp:focus{outline:0;border-color:var(--accent);background:var(--bg-2)}
textarea.inp{min-height:118px;resize:vertical;line-height:1.6}
select.inp{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23ABA5A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.field-2{grid-template-columns:1fr}}

.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.check input{appearance:none;flex:none;width:18px;height:18px;margin-top:2px;
  border:1px solid var(--line-2);border-radius:4px;background:var(--bg-1);cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:'';display:block;width:5px;height:9px;margin:2px auto 0;
  border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:rotate(45deg)}
.check span{font-size:.84rem;color:var(--tx-2);line-height:1.55}

.err{font-size:.78rem;color:var(--danger);display:none}
.field.is-err .inp{border-color:var(--danger)}
.field.is-err .err{display:block}
.warn-soft{font-size:.78rem;color:var(--warn);display:none}
.field.is-warn .warn-soft{display:block}

.form-note{font-size:.8rem;color:var(--tx-3)}
.form-ok{display:none;text-align:center;padding:clamp(32px,5vw,52px) 24px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)}
.form-ok.is-on{display:block}
.form-ok .hex{margin:0 auto 20px;width:56px;height:56px}
.form-ok .hex svg{width:26px;height:26px}
.form-ok h2{margin-bottom:12px}
.form-ok p{color:var(--tx-2);max-width:52ch;margin:0 auto 26px}
.form.is-hidden{display:none}

/* ------------------------------------------------ 22b. Accent glow pass */
/* Icons glow on their own strokes, not only on the frame behind them.
   Excluded where the icon already sits on a solid accent fill (.btn-pri,
   the chat button) — a mint glow on mint just muddies the shape. */
.hex i[data-icon],.rail-ico i[data-icon],.link-arrow i[data-icon],
.btn-ghost i[data-icon],.btn-quiet i[data-icon],.lang-btn svg,.nav-cr svg{
  filter:drop-shadow(0 0 7px rgba(111,224,176,.5))}
.card-hover:hover .hex i[data-icon],
.rail:hover .rail-ico i[data-icon]{filter:drop-shadow(0 0 11px rgba(111,224,176,.85))}
.nav-i.is-open .nav-cr svg,.lang.is-open .lang-btn svg{
  filter:drop-shadow(0 0 9px rgba(111,224,176,.75))}
.faq details[open] summary::after{box-shadow:2px 2px 8px -2px rgba(111,224,176,.7)}
.check input:checked::after{filter:drop-shadow(0 0 4px rgba(12,22,17,.4))}

/* Cells and panels carry a faint internal light so they do not read flat. */
.card,.trust,.wall,.spec,.tbl-wrap{box-shadow:var(--glow-cell)}
.shot{box-shadow:var(--shadow),var(--glow-cell)}
.card-hover:hover{box-shadow:var(--glow-cell-hi)}
.rail:hover{box-shadow:var(--glow-cell-hi)}
/* individual cells inside a grid lift on hover */
.wall-i:hover{box-shadow:inset 0 0 26px -12px rgba(111,224,176,.6)}
.trust-i{transition:background .22s var(--ease),box-shadow .22s var(--ease)}
.trust-i:hover{background:var(--bg-2);box-shadow:inset 0 0 28px -14px rgba(111,224,176,.55)}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{
  box-shadow:inset 0 0 30px -16px rgba(111,224,176,.6)}
.spec-r:hover dd,.spec-r:hover dt{background:var(--bg-2)}

/* Every mint element on the site is emissive rather than flat. Kept low —
   the glow should read as the colour having depth, not as neon. */
.pill-dot{box-shadow:0 0 0 3px rgba(111,224,176,.16),var(--glow-xs)}
.badge-24{box-shadow:var(--glow-xs)}
.badge-24::before{box-shadow:0 0 0 3px rgba(111,224,176,.18),0 0 8px rgba(111,224,176,.5)}
.tag-on{box-shadow:var(--glow-xs)}
.tab[aria-selected="true"]{text-shadow:var(--glow-tx);box-shadow:0 2px 10px -2px rgba(111,224,176,.5)}
.eyebrow{text-shadow:0 0 14px rgba(111,224,176,.28)}
.eyebrow-mute{text-shadow:none}
.step-n{text-shadow:0 0 14px rgba(111,224,176,.3)}
.yes{text-shadow:var(--glow-tx)}
/* gradient rules and hairlines */
.card-top::before,.ctab::before,.hr-grad,.step::before{
  filter:drop-shadow(0 0 6px rgba(111,224,176,.45))}
.bul li::before,.steps-v .step::before{filter:drop-shadow(0 0 5px rgba(111,224,176,.4))}
/* form accents */
.inp:focus{box-shadow:0 0 0 3px rgba(111,224,176,.12),var(--glow-xs)}
.check input:checked{box-shadow:var(--glow-xs)}
.form-ok .hex{filter:drop-shadow(0 0 16px rgba(111,224,176,.4))}
/* hero glow intensified slightly now that the palette is emissive */
.hero-bg::before{background:radial-gradient(circle,rgba(95,188,164,.22) 0%,
  rgba(62,124,134,.08) 42%,transparent 68%)}

/* ---------------------------------------------------------- 23. Motion / a11y */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reserve chrome height so injected header/footer cause no layout shift. */
#site-header{min-height:74px}
#site-footer{min-height:300px}

/* -------------------------------------------------------------- 24. Utility */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.flow>*+*{margin-top:clamp(28px,3.5vw,44px)}
.hr-grad{height:1px;background:var(--grad);opacity:.45;border:0;margin:0}
.nowrap{white-space:nowrap}