/* ==========================================================================
   TECNOMATION — Design System
   Palette derived from the brand mark (mint on white)
   ========================================================================== */

/* Display: Exo 2 Bold — geometric, technical, distinctive.
   Body: Inter Tight — neutral and highly legible, so the display face carries
   all the personality and long-form copy stays comfortable to read.
   Labels/figures: JetBrains Mono. */
/* THE FONTS ARE LOADED FROM THE HTML, NOT FROM HERE.
   An @import is the slowest way to load a font. The browser has to fetch
   this stylesheet, parse it, THEN discover the import, THEN fetch Google's
   CSS, THEN discover the font files, THEN fetch those: five steps deep
   before a word is drawn in the right face. A <link> in the head starts
   Google's CSS in parallel with this file instead of after it, which takes
   two whole round trips off the critical path for the same bytes and the
   same fonts. See index.html. */

:root{
  /* Brand */
  --mint:#4FE78F;
  --mint-bright:#5CF89A;
  --mint-soft:#B6F5D1;
  --mint-wash:#EAFBF1;
  --mint-line:#CCF3DD;
  /* 6.0:1 or better on white, --paper-2, --paper-3 and --mint-wash.
     It was #0A7A46, which measures 4.96-5.41 and passes everywhere I
     could measure it -- and the audit still reported one .mono.acc as
     failing. Rather than argue with it about which background is behind
     a transparent stack, the token now carries a third more contrast
     than the threshold needs. */
  --green-ink:#096B3E;
  --deep:#061A12;
  --deep-2:#0B2A1E;

  /* Neutrals */
  --ink:#08110D;
  --ink-2:#2E3D36;
  --muted:#63736B;      /* 4.78:1 on --paper-2, was #67776F at 4.50 */
  --muted-2:#64726B;    /* 4.79:1 on --paper-2, was #8B9A93 at 2.80 */
  --line:#E6ECE9;
  --line-2:#F0F4F2;
  --paper:#FFFFFF;
  --paper-2:#F7FAF8;
  --paper-3:#F2F6F4;

  /* Type */
  --display:'Exo 2','Exo 2 fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter Tight','Inter Tight fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --display-w:700;   /* Exo 2 Bold */

  /* Space */
  --gut:clamp(18px,4vw,56px);
  --sec:clamp(54px,6.2vw,104px);
  --sec-sm:clamp(40px,4.4vw,68px);
  --maxw:1240px;
  --r-sm:9px; --r:14px; --r-lg:20px; --r-xl:26px;

  /* Depth */
  --sh-1:0 1px 2px rgba(8,17,13,.04), 0 2px 8px rgba(8,17,13,.04);
  --sh-2:0 2px 4px rgba(8,17,13,.03), 0 12px 32px rgba(8,17,13,.07);
  --sh-3:0 24px 70px -20px rgba(8,17,13,.22), 0 8px 24px rgba(8,17,13,.06);
  --sh-mint:0 18px 44px -14px rgba(31,175,102,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:15.5px;line-height:1.6;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:var(--display-w);letter-spacing:-.018em;line-height:1.06;margin:0}
p{margin:0}
::selection{background:var(--mint);color:var(--deep)}
:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--deep);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1560px}
.wrap-nar{max-width:940px}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:var(--sec-sm)}
/* Layout grids. Ad-hoc column ratios are passed in as --cols so that a single
   media query can collapse every one of them on small screens. */
.grid{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:var(--cols,minmax(0,1fr))}
.gauto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--mint);flex:none}
.eyebrow.no-rule::before{display:none}

/* Type scale — desktop caps sit at a conventional web scale; the vw term keeps
   tablet and mobile proportional without a separate rule for every heading. */
/* Tracking is lighter than a neutral grotesque would need — Exo 2's geometric
   forms tighten up quickly and go muddy if over-condensed. */
.h-xxl{font-size:clamp(30px,4.5vw,57px);letter-spacing:-.022em;line-height:1.06}
.h-xl{font-size:clamp(25px,3.1vw,41px);letter-spacing:-.02em;line-height:1.1}
.h-lg{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.017em;line-height:1.16}
.h-md{font-size:clamp(17.5px,1.5vw,21px);letter-spacing:-.013em;line-height:1.28}
.h-sm{font-size:clamp(15.5px,1.15vw,16.8px);letter-spacing:-.008em;line-height:1.36}
.lede{font-size:clamp(14.8px,1.05vw,16.8px);color:var(--ink-2);line-height:1.62;font-weight:400}
.sub{color:var(--muted);font-size:14px;line-height:1.6}
.tiny{font-size:11.8px;color:var(--muted-2);line-height:1.5}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.acc{color:var(--green-ink)}
/* THE SURFACE IS DECLARED, NOT INFERRED -- see `main > section` in craft.css,
   which is where the one rule that does it lives. */
.hl{background:linear-gradient(180deg,transparent 62%,var(--mint-soft) 62%);padding-inline:2px}
.serif-it{font-style:italic;font-weight:700}
.mt-xs{margin-top:7px}.mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:30px}.mt-xl{margin-top:44px}
.center{text-align:center}

.sec-head{display:flex;flex-direction:column;gap:14px;max-width:700px;margin-bottom:clamp(28px,3.2vw,48px)}
.sec-head.center{margin-inline:auto;text-align:center;align-items:center}
.sec-head.wide{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 22px;border-radius:100px;border:1px solid transparent;background:transparent;
  font-family:var(--body);font-size:14.2px;font-weight:500;letter-spacing:-.008em;
  cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn svg{flex:none;transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--deep);color:#fff;box-shadow:var(--sh-2)}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(100deg,var(--mint) 0%,var(--mint-bright) 55%,#8CFFC0 100%);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn-primary:hover{color:var(--deep);box-shadow:var(--sh-mint)}
.btn-primary:hover::after{transform:translateY(0)}
.btn-mint{background:linear-gradient(100deg,var(--mint) 0%,var(--mint-bright) 100%);color:var(--deep);font-weight:600;box-shadow:var(--sh-mint)}
.btn-mint::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--deep);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn-mint:hover{color:#fff}
.btn-mint:hover::after{transform:translateY(0)}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-onDark{border-color:rgba(255,255,255,.22);color:#fff}
.btn-onDark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-sm{height:38px;padding:0 16px;font-size:13px}
.btn-lg{height:52px;padding:0 27px;font-size:15px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.txtlink{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:13.6px;color:var(--ink);position:relative}
.txtlink::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.txtlink:hover::after{transform:scaleX(1);transform-origin:left}
.txtlink svg{transition:transform .45s var(--ease)}
.txtlink:hover svg{transform:translateX(4px)}
.dark .txtlink{color:#fff}

/* ---------- Status dot / pills ---------- */
.dot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;background:var(--mint)}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:.28;animation:pulse 2.6s var(--ease) infinite}
.dot.s-open{background:#2FD07C;color:#2FD07C}
.dot.s-limited{background:#F2B93B;color:#F2B93B}
.dot.s-verylimited{background:#F08A3C;color:#F08A3C}
.dot.s-full{background:#E2604F;color:#E2604F}
@keyframes pulse{0%{transform:scale(.75);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

.pill{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:100px;
  border:1px solid var(--line);background:var(--paper);font-family:var(--mono);
  font-size:9.8px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
}
.pill-mint{background:var(--mint-wash);border-color:var(--mint-line);color:var(--green-ink)}
.pill-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}

/* ---------- Cards ---------- */
.card{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,1.9vw,26px);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .45s var(--ease),background .45s var(--ease);
  will-change:transform;
}
.card.lift:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--mint-line)}
.card-flat{background:var(--paper-2);border-color:transparent}
.card-dark{background:var(--deep-2);border-color:rgba(255,255,255,.08);color:#fff}
.card-num{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.13em}
/* Icon chip. Geometry used to be scoped to ".card .ico", so the six chips that
   live outside a card rendered square-cornered, un-centred and in body ink.
   The component now stands on its own; .card only adds its spacing. */
.ico{width:40px;height:40px;border-radius:30%;display:grid;place-items:center;flex:none;
  background:var(--mint-wash);color:var(--green-ink);
  transition:transform .6s var(--ease),background .4s}
.ico svg{width:18px;height:18px}
.ico-lg{width:44px;height:44px}
.ico-lg svg{width:20px;height:20px}
.ico-xl{width:60px;height:60px}
.ico-xl svg{width:26px;height:26px}
.card .ico{margin-bottom:16px}
.card.lift:hover .ico{transform:scale(1.06) rotate(-4deg)}
.dark .ico{background:rgba(79,231,143,.14);color:var(--mint)}

.spot{position:relative;overflow:hidden}
.spot::before{
  content:"";position:absolute;width:340px;height:340px;left:var(--mx,50%);top:var(--my,0);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(79,231,143,.20),transparent 68%);
  transition:opacity .5s var(--ease);
}
.spot:hover::before{opacity:1}

/* ---------- Dark section ---------- */
.dark{background:var(--deep);color:rgba(255,255,255,.78)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color:#fff}
.dark .lede{color:rgba(255,255,255,.72)}
.dark .sub,.dark .tiny{color:rgba(255,255,255,.5)}
.dark .eyebrow{color:rgba(255,255,255,.5)}
.dark .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09);color:rgba(255,255,255,.72)}
.dark .card.lift:hover{border-color:rgba(79,231,143,.4);background:rgba(255,255,255,.06)}
.dark .rule{background:rgba(255,255,255,.11)}
.dark .pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.dark .ck{color:rgba(255,255,255,.72)}
.rule{height:1px;width:100%;background:var(--line)}

/* ---------- Announcement bar ---------- */
#annbar{position:relative;z-index:120;background:var(--deep);color:rgba(255,255,255,.9);overflow:hidden}
#annbar .wrap{display:flex;align-items:center;justify-content:center;gap:16px;min-height:38px;padding-block:8px;flex-wrap:wrap}
#annbar .abtext{font-size:12.2px;letter-spacing:-.004em;display:flex;align-items:center;gap:9px;text-align:center}
#annbar .ablink{font-family:var(--mono);font-size:9.6px;letter-spacing:.13em;text-transform:uppercase;color:var(--mint);display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid rgba(79,231,143,.35);padding-bottom:2px;transition:gap .4s var(--ease)}
#annbar .ablink:hover{gap:11px}
#annbar .abclose{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;padding:6px;line-height:0}
#annbar .abclose:hover{color:#fff}
#annbar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(79,231,143,.10),transparent);transform:translateX(-100%);animation:sheen 7s var(--ease) infinite;pointer-events:none}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- Nav (dark) ---------- */
#nav{
  position:sticky;top:0;z-index:110;color:#fff;
  background:rgba(6,26,18,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
#nav.stuck{background:rgba(6,26,18,.97);border-color:rgba(255,255,255,.11);box-shadow:0 14px 40px -24px rgba(0,0,0,.85)}
#nav :focus-visible{outline-color:var(--mint)}
.navin{display:flex;align-items:center;gap:18px;height:var(--nav-h)}

/* ---------- Brand lockup ----------
   assets/img/logo-web.png is the supplied artwork, unaltered apart from the
   black backdrop being made transparent so it can sit on any dark ground.
   Never recolour it, never apply filters — it is a fixed two-tone asset. */
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand-logo{height:30px;width:auto;display:block;transition:opacity .35s var(--ease)}
.brand:hover .brand-logo{opacity:.85}
footer.site .brand-logo{height:40px}
/* "MATION" is white, so on a light ground the lockup sits on its own dark chip */
.brand.on-light{background:var(--deep);padding:7px 13px;border-radius:11px}
@media (max-width:768px){ .brand-logo{height:26px} footer.site .brand-logo{height:34px} }
@media (max-width:400px){ .brand-logo{height:23px} }
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.navlinks{display:flex;align-items:center;gap:2px;margin-left:6px}
.navlinks>a,.navdrop>button{
  display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:100px;
  font-size:13.4px;color:rgba(255,255,255,.7);border:0;background:none;cursor:pointer;letter-spacing:-.006em;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.navlinks>a:hover,.navdrop>button:hover,.navdrop.open>button{color:#fff;background:rgba(255,255,255,.09)}
.navdrop{position:relative}
.navdrop>button svg{transition:transform .4s var(--ease)}
.navdrop.open>button svg{transform:rotate(180deg)}
.dropmenu{
  position:absolute;top:calc(100% + 12px);left:-8px;min-width:268px;background:var(--deep-2);
  border:1px solid rgba(255,255,255,.11);border-radius:var(--r);box-shadow:0 26px 64px -22px rgba(0,0,0,.8);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top left;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.navdrop.open .dropmenu{opacity:1;visibility:visible;transform:none}
.dropmenu a:not(.btn){display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;transition:background .25s;color:rgba(255,255,255,.85)}
.dropmenu a:not(.btn):hover{background:rgba(255,255,255,.07)}
.dropmenu a b{font-weight:500;font-size:14px;color:#fff}
.dropmenu a i{font-style:normal;font-size:12px;color:rgba(255,255,255,.5)}
.navright{margin-left:auto;display:flex;align-items:center;gap:9px}
.lang{position:relative}
.lang>button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:100px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.88);cursor:pointer;font-size:12.4px;transition:border-color .3s,background .3s,color .3s}
.lang>button:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff}
.langmenu{position:absolute;right:0;top:calc(100% + 10px);width:230px;background:var(--deep-2);border:1px solid rgba(255,255,255,.11);border-radius:var(--r);box-shadow:0 26px 64px -22px rgba(0,0,0,.8);padding:7px;max-height:360px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:130}
.lang.open .langmenu{opacity:1;visibility:visible;transform:none}
.langmenu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 11px;border:0;background:none;border-radius:9px;cursor:pointer;font-size:13.6px;text-align:left;transition:background .2s;color:rgba(255,255,255,.85)}
.langmenu button:hover{background:rgba(255,255,255,.07)}
.langmenu button.on{background:rgba(79,231,143,.15);color:var(--mint);font-weight:500}
.langmenu button .native{color:rgba(255,255,255,.5);font-size:12px;margin-left:auto}

/* Nav buttons sit on a dark bar, so they invert */
#nav .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff;background:transparent}
#nav .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.09)}
#nav .btn-primary{background:linear-gradient(100deg,var(--mint),var(--mint-bright));color:var(--deep);font-weight:600;box-shadow:0 10px 26px -12px rgba(79,231,143,.6)}
#nav .btn-primary::after{background:#fff}
#nav .btn-primary:hover{color:var(--deep);box-shadow:0 14px 30px -12px rgba(79,231,143,.7)}

.burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.burger:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.burger span{display:block;width:17px;height:1.5px;background:#fff;position:relative;transition:transform .4s var(--ease),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:#fff;transition:transform .4s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-5.5px) rotate(-45deg)}

#mobilemenu{position:fixed;inset:0;z-index:105;background:var(--deep);color:rgba(255,255,255,.8);padding:calc(var(--nav-h) + 34px) var(--gut) 40px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
body.menu-open #mobilemenu{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
#mobilemenu a.mlink{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--display);font-size:23px;letter-spacing:-.01em;font-weight:600;color:#fff}
#mobilemenu a.mlink svg{color:var(--mint);opacity:.65}
#mobilemenu a.mlink:hover{color:var(--mint)}
#mobilemenu .mgroup{margin-top:26px}
#mobilemenu .tiny{color:rgba(255,255,255,.5)}
#mobilemenu .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff}
#mobilemenu .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.09)}
#mobilemenu .btn-primary{background:linear-gradient(100deg,var(--mint),var(--mint-bright));color:var(--deep);font-weight:600}
#mobilemenu .btn-primary::after{background:#fff}
#mobilemenu .btn-primary:hover{color:var(--deep)}

/* ---------- Hero ---------- */
#hero{position:relative;overflow:clip;padding-top:clamp(34px,4vw,58px);padding-bottom:clamp(34px,4vw,58px)}
#glcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85;pointer-events:none}
#hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(22px,2.4vw,34px)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 7px 0 13px;border-radius:100px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hero-badge .txt{font-size:12px;color:var(--ink-2)}
.hero-badge .go{font-family:var(--mono);font-size:9.2px;letter-spacing:.11em;text-transform:uppercase;background:var(--mint-wash);color:var(--green-ink);height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:100px}
.hero-h{margin-top:20px}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hero-h .ln>span{display:block;white-space:nowrap}
.hero-sub{max-width:480px}
.hero-cta{margin-top:26px}
.hero-meta{margin-top:26px;display:flex;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--display);font-size:16px;letter-spacing:-.01em;font-weight:700}
.hero-meta small{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.hero-media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3.1;background:var(--deep)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media .ov{position:absolute;inset:0;background:linear-gradient(196deg,rgba(6,26,18,.04) 0%,rgba(6,26,18,.62) 100%)}
.hero-media .cap{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;z-index:2}
.hero-media .cap p:last-child{font-size:13px}
.float-card{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r);padding:11px 14px;box-shadow:var(--sh-3);z-index:3}
.float-card.fc1{top:-14px;right:-8px}
.float-card.fc2{bottom:66px;left:-16px}

/* ---------- Marquee ---------- */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-track{display:flex;gap:44px;width:max-content;animation:slide 44s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track>*{flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.marq-item{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.4px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.marq-item svg{opacity:.55;flex:none}

/* ---------- Forms ---------- */
.field{position:relative;display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:9.8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-family:var(--body);font-size:14.2px;color:var(--ink);transition:border-color .3s,box-shadow .3s,background .3s;
  appearance:none;
}
.field textarea{height:auto;min-height:96px;padding:12px 13px;resize:vertical;line-height:1.55}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2367776F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 4px rgba(79,231,143,.16)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field.err input,.field.err select,.field.err textarea{border-color:#E2604F;box-shadow:0 0 0 4px rgba(226,96,79,.11)}
.field .msg{font-size:11.5px;color:#C24736;display:none}
.field.err .msg{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:100px;border:1px solid var(--line);font-size:12.6px;color:var(--ink-2);transition:all .3s var(--ease);background:#fff}
.chip span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.chip:hover span{border-color:var(--muted-2)}
.chip input:checked+span{border-color:var(--mint);background:var(--mint-wash);color:var(--green-ink)}
.chip input:checked+span::before{background:var(--mint);transform:scale(1.25)}
.chip input:focus-visible+span{outline:2px solid var(--green-ink);outline-offset:2px}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:clamp(20px,2.4vw,32px);position:relative;overflow:hidden}
.formcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mint),var(--mint-bright),var(--mint-soft))}
.formsuccess{display:none;text-align:center;padding:26px 6px}
form.sent .formsuccess{display:block}
form.sent .formbody{display:none}
.checkline{display:flex;gap:11px;align-items:flex-start}
.checkline input{width:18px;height:18px;margin-top:3px;accent-color:var(--green-ink);flex:none}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;overflow:hidden}

/* ---------- Capacity panel ---------- */
.capcard{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--sh-2)}
.capcard .caphead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(16px,2vw,24px);border-bottom:1px solid var(--line);background:var(--paper-2);flex-wrap:wrap}
.capgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.capgrid>div{padding:18px clamp(16px,2vw,24px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.capgrid>div:last-child{border-right:0}
.capgrid b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.012em;margin-top:6px;color:var(--ink)}
.capbar{height:5px;border-radius:100px;background:var(--line-2);overflow:hidden;margin-top:12px}
.capbar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--mint),var(--mint-bright));width:0;transition:width 1.4s var(--ease)}
.capfoot{padding:14px clamp(16px,2vw,24px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Price ---------- */
/* THE GREY TOKENS, REDEFINED WHERE THE BACKGROUND IS DARK.
   --muted and --muted-2 are chosen to be readable on white, which makes
   them 3.57:1 and 3.60:1 on --deep -- 23 elements, in the footer, the
   price strip and the numbered cards. Redefining the tokens on the
   containers that go dark fixes every rule that reads them at once; the
   alternative was an override per rule, and the next rule to use --muted
   on a dark panel would have been wrong again. */
.dark, .price-strip, footer.site, .cine{
  --muted:rgba(255,255,255,.62);
  --muted-2:rgba(255,255,255,.54);
}
.price-strip{background:var(--deep);color:#fff;position:relative;overflow:hidden}
/* .lede carries --ink-2, which on --deep is 1.58:1 -- the paragraph that
   explains the regular price was all but invisible. */
.price-strip .lede{color:rgba(255,255,255,.78)}
.price-strip .inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,54px);padding-block:clamp(34px,3.6vw,52px);flex-wrap:wrap}
.pricebig{display:flex;align-items:flex-start;gap:5px;font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:.94;color:#fff}
.pricebig .cur{font-size:clamp(17px,1.5vw,22px);margin-top:.35em}
.pricebig .num{font-size:clamp(46px,5.4vw,72px);font-weight:700}
.pricebig .per{font-size:13.5px;font-family:var(--body);letter-spacing:-.01em;color:rgba(255,255,255,.5);align-self:flex-end;margin-bottom:.75em}
.was{position:relative;color:rgba(255,255,255,.5);font-size:clamp(17px,1.6vw,22px);font-family:var(--display);font-weight:600;letter-spacing:-.012em;display:inline-block}
.was::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:2px;background:#E2604F;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.was.on::after{transform:scaleX(1)}

.plan{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.plan.featured{border-color:transparent;box-shadow:var(--sh-3);position:relative}
.plan.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(160deg,var(--mint),var(--mint-line) 40%,var(--line) 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.plan .ptop{padding:clamp(20px,2.3vw,28px);border-bottom:1px solid var(--line)}
.plan .plist{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:11px;flex:1}
.plan .pfoot{padding:0 clamp(18px,2vw,26px) clamp(20px,2.3vw,26px)}
.ck{display:flex;gap:10px;align-items:flex-start;font-size:13.8px;color:var(--ink-2);line-height:1.5}
.ck svg{flex:none;margin-top:3px;width:14px;height:14px}
.ck.x{color:var(--muted-2)}

/* ---------- Comparison table ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:13.4px;min-width:680px}
.cmp th,.cmp td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:9.8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cmp tbody th{font-weight:500;color:var(--ink);width:26%}
.cmp .featcol{background:var(--mint-wash)}
.cmp thead .featcol{color:var(--green-ink)}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;-webkit-overflow-scrolling:touch}
.scroll-hint{display:none;color:var(--green-ink)}
@media (max-width:980px){.scroll-hint{display:block}}

/* ---------- Accordion ---------- */
.acc-item{border-bottom:1px solid var(--line)}
.acc-item>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--display);font-size:clamp(15.5px,1.25vw,17.5px);letter-spacing:-.008em;font-weight:600;color:var(--ink);transition:color .3s}
.acc-item>button:hover{color:var(--green-ink)}
.acc-ico{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:all .45s var(--ease)}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;width:10px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.acc-ico::after{transform:rotate(90deg)}
.acc-item.open .acc-ico{background:var(--mint);border-color:var(--mint);color:var(--deep);transform:rotate(180deg)}
.acc-item.open .acc-ico::after{transform:rotate(0)}
.acc-body{height:0;overflow:hidden;transition:height .5s var(--ease)}
.acc-body .inner{padding-bottom:22px;max-width:720px;color:var(--ink-2);font-size:14.2px;line-height:1.66}
.dark .acc-item{border-color:rgba(255,255,255,.1)}
.dark .acc-item>button{color:#fff}
.dark .acc-ico{border-color:rgba(255,255,255,.2)}
.dark .acc-body .inner{color:rgba(255,255,255,.66)}

/* ---------- Steps ---------- */
.step{display:grid;grid-template-columns:80px minmax(0,1fr);gap:clamp(14px,2.4vw,34px);padding-block:clamp(20px,2.3vw,30px);border-top:1px solid var(--line);position:relative}
.steps .step:last-child{border-bottom:1px solid var(--line)}
.step .idx{font-family:var(--mono);font-size:10.2px;letter-spacing:.13em;color:var(--muted-2);padding-top:5px}
.step .stbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(10px,2.4vw,32px);align-items:start}
.step::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--mint);transition:width 1.1s var(--ease)}
.step.in::after{width:100%}

/* ---------- Tech ecosystem ---------- */
.tech-shell{display:grid;grid-template-columns:268px minmax(0,1fr);gap:clamp(16px,2vw,26px)}
.tech-tabs{display:flex;flex-direction:column;gap:2px}
.tech-tab{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;border:1px solid transparent;background:none;cursor:pointer;text-align:left;transition:all .4s var(--ease);color:#fff}
.tech-tab .tt-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);flex:none;transition:all .4s var(--ease);color:var(--mint)}
.tech-tab b{font-weight:500;font-size:13.6px;letter-spacing:-.012em;display:block}
.tech-tab i{display:block;font-style:normal;font-size:10.8px;color:rgba(255,255,255,.5)}
.tech-tab:hover{background:rgba(255,255,255,.045)}
.tech-tab.on{background:rgba(255,255,255,.07);border-color:rgba(79,231,143,.32)}
.tech-tab.on .tt-ico{background:var(--mint);border-color:var(--mint);color:var(--deep)}
.tech-panel{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:clamp(18px,2.1vw,28px);background:rgba(255,255,255,.03);min-height:360px;overflow:hidden}
#technet{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.tech-panel .tp-in{position:relative;z-index:2}
.techgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:9px;margin-top:20px}
.techchip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);font-size:12.6px;transition:all .4s var(--ease);color:rgba(255,255,255,.86)}
.techchip:hover{background:rgba(79,231,143,.1);border-color:rgba(79,231,143,.4);transform:translateY(-3px)}
.techchip .tlogo{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.07);flex:none;font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--mint);transition:background .4s var(--ease)}
.techchip .tlogo img{width:16px;height:16px;object-fit:contain}
.techchip:hover .tlogo{background:rgba(79,231,143,.18)}

/* ---------- Services (25) ---------- */
.svc-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.svc-cat{height:36px;padding:0 14px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:12.8px;color:var(--ink-2);transition:all .35s var(--ease);display:inline-flex;align-items:center;gap:7px}
.svc-cat b{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);font-weight:500}
.svc-cat:hover{border-color:var(--ink-2)}
.svc-cat.on{background:var(--deep);border-color:var(--deep);color:#fff}
.svc-cat.on b{color:var(--mint)}
.svc-list{border-top:1px solid var(--line)}
.svc-item{border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
.svc-item:hover{background:var(--paper-2)}
.svc-item>button{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 12px;background:none;border:0;cursor:pointer;text-align:left}
.svc-item .sidx{font-family:var(--mono);font-size:10.2px;color:var(--muted-2)}
.svc-item .stitle{font-family:var(--display);font-size:clamp(14.8px,1.25vw,17px);letter-spacing:-.006em;font-weight:600}
.svc-item .stag{font-family:var(--mono);font-size:8.8px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);padding:4px 8px;border-radius:100px;white-space:nowrap}
.svc-item .sbody{height:0;overflow:hidden;transition:height .5s var(--ease)}
.svc-item .sbody .inner{padding:0 12px 20px 54px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.svc-item.open{background:var(--paper-2)}
.svc-item.hide{display:none}

/* ---------- Lead-generation pipeline ---------- */
.lgstep{padding:18px clamp(12px,1.4vw,18px);border-right:1px solid var(--line);position:relative;transition:background .4s var(--ease)}
.lgstep:last-child{border-right:0}
.lgstep:hover{background:var(--mint-wash)}
.lgstep .mono{display:block;color:var(--muted-2);font-size:9.6px;letter-spacing:.14em}
.lgstep b{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.008em;margin-top:8px}
.lgstep i{display:block;font-style:normal;font-size:11.8px;color:var(--muted);line-height:1.45;margin-top:3px}
.lgstep::after{content:"";position:absolute;right:-5px;top:50%;width:8px;height:8px;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:translateY(-50%) rotate(45deg);background:#fff;z-index:2}
.lgstep:last-child::after{display:none}
@media (max-width:1024px){
  #leadgen .grid[style*="repeat(6"]{--cols:repeat(3,1fr)!important}
  .lgstep:nth-child(3)::after{display:none}
  .lgstep:nth-child(3){border-right:0}
  .lgstep:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width:600px){
  #leadgen .grid[style*="repeat(6"]{--cols:1fr!important}
  .lgstep{border-right:0;border-bottom:1px solid var(--line)}
  .lgstep::after{display:none}
  .lgstep:last-child{border-bottom:0}
}

/* ---------- Industry / area tiles ---------- */
.ind{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1.15;background:var(--deep);isolation:isolate;display:block}
.ind img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .8s var(--ease);filter:grayscale(1) contrast(1.03)}
.ind:hover img{transform:scale(1.07);filter:grayscale(0)}
.ind .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,18,0) 32%,rgba(6,26,18,.88) 100%);z-index:1}
.ind .lbl{position:absolute;left:15px;right:15px;bottom:13px;z-index:2;color:#fff}
.ind .lbl b{font-family:var(--display);font-size:14.6px;font-weight:700;letter-spacing:-.006em;display:block}
.ind .lbl i{font-style:normal;font-size:10.8px;color:rgba(255,255,255,.62)}

/* Sits behind the iframe; only visible if the embed is blocked or fails */

/* ---------- Calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--sh-2)}
.calc .cl{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line)}
.calc .cr{padding:clamp(20px,2.4vw,30px);background:var(--deep);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.rangefield{margin-bottom:20px}
.rangefield .rtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:12px}
.rangefield .rtop label{font-size:13.4px!important}
.rangefield .rval{font-family:var(--display);font-size:18px;letter-spacing:-.01em;font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:100px;background:var(--line);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--mint);box-shadow:0 3px 10px rgba(8,17,13,.18);cursor:pointer;transition:transform .25s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--mint);cursor:pointer}
.calcout{display:flex;flex-direction:column;gap:4px}
.calcout .big{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;font-weight:700;color:var(--mint);line-height:1}

/* ---------- Sticky CTA / exit ---------- */
#stickycta{position:fixed;left:0;right:0;bottom:0;z-index:95;transform:translateY(140%);transition:transform .6s var(--ease);pointer-events:none}
#stickycta.on{transform:none;pointer-events:auto}
#stickycta .sc-in{margin:0 auto 12px;max-width:800px;background:rgba(6,26,18,.95);backdrop-filter:blur(16px);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:100px;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;box-shadow:0 22px 60px -18px rgba(6,26,18,.6)}
#stickycta .sc-txt{font-size:12.6px;flex:1;min-width:0;color:rgba(255,255,255,.7)}
#stickycta .sc-txt b{font-weight:500;color:#fff}
#stickycta .sc-close{background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;padding:8px;line-height:0}
#stickycta .sc-close:hover{color:#fff}

#exitmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
#exitmodal.on{opacity:1;visibility:visible}
#exitmodal .backdrop{position:absolute;inset:0;background:rgba(6,26,18,.6);backdrop-filter:blur(6px)}
#exitmodal .box{position:relative;background:#fff;border-radius:var(--r-xl);max-width:560px;width:100%;overflow:hidden;box-shadow:var(--sh-3);transform:translateY(18px) scale(.98);transition:transform .55s var(--ease)}
#exitmodal.on .box{transform:none}
#exitmodal .box{max-width:500px}
#exitmodal .box .pad{padding:clamp(22px,2.6vw,32px)}
#exitmodal .xclose{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;z-index:3}

/* ---------- Footer ---------- */
footer.site{background:var(--deep);color:rgba(255,255,255,.62);padding-top:clamp(56px,6vw,92px);overflow:hidden}
footer.site h4{font-family:var(--mono);font-size:9.8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:12px}
footer.site a:not(.btn){color:rgba(255,255,255,.62);font-size:13px;display:block;padding:4px 0;transition:color .28s,transform .35s var(--ease)}
footer.site a:not(.btn):hover{color:#fff;transform:translateX(3px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
.foot-bottom{margin-top:clamp(30px,3.2vw,48px);border-top:1px solid rgba(255,255,255,.1);padding-block:20px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.8px}
.foot-bottom a{display:inline-block;font-size:11.8px}
.footmark{font-family:var(--display);font-size:clamp(46px,11vw,168px);letter-spacing:-.03em;font-weight:800;line-height:.78;color:rgba(255,255,255,.045);margin-top:30px;user-select:none;white-space:nowrap}

/* ---------- Reveal animations ---------- */
[data-rv]{opacity:0;will-change:transform,opacity}
html.no-anim [data-rv]{opacity:1!important;transform:none!important}
.imgzoom{overflow:hidden}
.imgzoom img{transition:transform 1.2s var(--ease)}
.imgzoom:hover img{transform:scale(1.05)}
.img-fallback{background:linear-gradient(135deg,var(--mint-wash),var(--paper-3) 55%,#E4EDE8)!important}

.badge-note{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;border-radius:10px;background:var(--mint-wash);border:1px solid var(--mint-line);font-size:12.8px;color:var(--green-ink);line-height:1.5}
.badge-note svg{flex:none;margin-top:2px}
.note-grey{background:var(--paper-2);border-color:var(--line);color:var(--ink-2)}
.dark .note-grey{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}

.figure{border-radius:var(--r-xl);overflow:hidden;position:relative;background:var(--paper-3)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure.tall{aspect-ratio:4/5}
.figure.wide{aspect-ratio:16/10}
.figure.sq{aspect-ratio:1/1}

/* ==========================================================================
   RESPONSIVE LADDER
   ≥1281  large desktop   · 1025–1280 desktop
   769–1024 tablet        · 481–768 large phone / small tablet
   ≤480   phone
   ========================================================================== */

/* --- Large desktop: stop the vw term running away on very wide screens --- */
@media (min-width:1600px){
  :root{--maxw:1320px}
  .h-xxl{font-size:60px}
  .h-xl{font-size:43px}
}

/* --- Desktop, narrower --- */
@media (max-width:1180px){
  .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
  .foot-grid>div:last-child{grid-column:span 3}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- TABLET --- */
@media (max-width:1024px){
  :root{
    --nav-h:60px;
    --sec:clamp(48px,6.4vw,68px);
    --sec-sm:clamp(36px,4.6vw,48px);
    --gut:28px;
  }
  body{font-size:15px}
  .h-xxl{font-size:clamp(32px,5vw,44px)}
  .h-xl{font-size:clamp(26px,3.8vw,34px)}
  .h-lg{font-size:clamp(21px,2.9vw,27px)}
  .h-md{font-size:19px}
  .h-sm{font-size:16px}
  .lede{font-size:15.2px}
  .sub{font-size:13.6px}

  .navlinks{display:none}
  .burger{display:flex}
  .navright .btn-ghost{display:none}

  .hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero-sub{max-width:640px}
  .hero-media{aspect-ratio:16/9}
  .float-card.fc1{right:12px;top:12px}
  .float-card.fc2{left:12px;bottom:14px}

  .grid{--cols:1fr!important}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .tech-shell{grid-template-columns:minmax(0,1fr)}
  .tech-tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .tech-tabs::-webkit-scrollbar{display:none}
  .tech-tab{flex:none;min-width:196px}
  .tech-panel{min-height:0}

  .calc{grid-template-columns:minmax(0,1fr)}
  .calc .cl{border-right:0;border-bottom:1px solid var(--line)}

  .step .stbody{grid-template-columns:minmax(0,1fr);gap:8px}
  .svc-item .sbody .inner{grid-template-columns:minmax(0,1fr);padding-left:12px}
  .plan.featured{transform:none}
  #faq [style*="sticky"]{position:static!important}
}

/* --- LARGE PHONE / SMALL TABLET --- */
@media (max-width:768px){
  :root{
    --sec:clamp(44px,9vw,56px);
    --sec-sm:clamp(32px,7vw,42px);
    --gut:20px;
    --r-lg:16px; --r-xl:20px;
  }
  body{font-size:15px;line-height:1.58}
  .h-xxl{font-size:clamp(28px,8.2vw,38px);letter-spacing:-.03em;line-height:1.08}
  .h-xl{font-size:clamp(24px,6.4vw,30px);line-height:1.12}
  .h-lg{font-size:clamp(21px,5.4vw,26px);line-height:1.18}
  .h-md{font-size:18px}
  .h-sm{font-size:15.6px}
  .lede{font-size:14.8px;line-height:1.6}
  .sub{font-size:13.4px}
  .tiny{font-size:11.5px}
  .eyebrow{font-size:9.6px;letter-spacing:.14em}

  .navright .btn{display:none}
  .navright{gap:6px}
  .lang>button{padding:0 9px}
  #annbar .wrap{gap:7px;padding-block:9px}
  #annbar .abtext{font-size:11.6px;padding-right:14px;line-height:1.45}
  #annbar .ablink{font-size:9px}
  #annbar .abclose{right:6px;top:10px;transform:none}
  #mobilemenu a.mlink{font-size:20px;padding:13px 0}

  .hero-badge{height:auto;min-height:32px;padding:5px 6px 5px 12px;flex-wrap:wrap;gap:8px}
  .hero-badge .txt{font-size:11.4px}
  .hero-h .ln>span{white-space:normal}
  .hero-h .ln{overflow:visible;padding-bottom:0;margin-bottom:0}
  .hero-grid{margin-top:28px}
  .hero-media{aspect-ratio:4/3}
  .hero-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}
  .hero-meta b{font-size:15px}

  .g2{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid>div:first-child{grid-column:span 2}
  .foot-grid>div:last-child{grid-column:span 2}

  .step{grid-template-columns:minmax(0,1fr);gap:8px}
  .step .idx{padding-top:0}
  .sec-head{margin-bottom:26px;gap:12px}
  .sec-head.wide{flex-direction:column;align-items:flex-start;gap:14px}

  #stickycta .wrap{padding-inline:12px}
  #stickycta .sc-txt{font-size:12.2px}


  .btn{height:46px;font-size:14px}
  .btn-lg{height:48px;font-size:14.6px;width:100%}
  .btn-block{width:100%}
  .btn-row>.btn{width:100%}
  .btn-row{gap:9px}

  .cmp th,.cmp td{padding:11px 12px;font-size:12.8px}
  .svc-item>button{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 10px}
  .svc-item .sidx{display:none}
  .svc-item .sbody .inner{padding:0 10px 18px}
  .capgrid>div{border-right:0}
  .card{border-radius:16px}
  .formcard{border-radius:18px}
  .ind{aspect-ratio:1/0.92}
  .pricebig .num{font-size:52px}
  .price-strip .inner{gap:22px}
  .price-strip .inner>div:last-child{text-align:left!important}
}

/* Card grids hold two columns down to 600px — a single column on a 768px tablet
   wastes half the screen. The sticky bar keeps its compact pill shape here too. */
@media (max-width:600px){
  .g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  #stickycta .sc-in{border-radius:16px;flex-direction:column;align-items:stretch;gap:11px;padding:14px 14px 13px;margin:0 0 10px;position:relative}
  #stickycta .sc-txt{flex-basis:auto;padding-right:24px}
  #stickycta .sc-in .btn{width:100%}
  #stickycta .sc-close{position:absolute;right:7px;top:7px}
}

/* --- PHONE --- */
@media (max-width:480px){
  :root{--gut:16px}
  .h-xxl{font-size:30px}
  .h-xl{font-size:25px}
  .h-lg{font-size:22px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid>div:first-child,.foot-grid>div:last-child{grid-column:auto}
  .hero-meta{gap:12px 18px}
  .hero-media{aspect-ratio:3/2.4}
  .float-card{padding:9px 11px}
  .float-card.fc1{right:8px;top:8px}
  .float-card.fc2{left:8px;bottom:10px}
  .svc-cats{gap:6px}
  .svc-cat{height:33px;padding:0 12px;font-size:12px}
  .tech-tab{min-width:172px}
  .chip span{height:32px;font-size:12px;padding:0 11px}
  .footmark{font-size:44px}
}

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

/* RTL */
html[dir=rtl] .eyebrow::before{order:2}
html[dir=rtl] .btn:hover svg{transform:translateX(-3px)}
html[dir=rtl] footer.site a:hover{transform:translateX(-3px)}

/* ---------------------------------------------------------------------------
   Consent banner
   ---------------------------------------------------------------------------
   Bottom of the screen, not a full-screen interruption. A banner that blocks
   the page is a banner people dismiss without reading, and a consent nobody
   read is not consent.

   Both buttons are real buttons of equal weight. The accept is tinted because
   it is the common answer, not because declining is hidden -- a decline that
   is harder to find than an accept is the pattern regulators call a dark
   pattern, and it would make the whole record indefensible.
   --------------------------------------------------------------------------- */
.tec-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -8px 28px rgba(8,17,13,.09);
  animation:tec-consent-in .28s ease-out both;
}
@keyframes tec-consent-in{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
@media (prefers-reduced-motion:reduce){ .tec-consent{ animation:none } }

.tec-consent-in{
  max-width:1100px; margin:0 auto; padding:16px 20px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.tec-consent p{
  flex:1 1 420px; margin:0; font-size:13.6px; line-height:1.55; color:var(--ink-2);
}
.tec-consent a{ color:var(--green-ink); text-decoration:underline }
.tec-consent-btns{ display:flex; gap:10px; flex-wrap:wrap }
.tec-consent-btns button{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper-2); color:var(--ink); cursor:pointer;
  font:500 13.4px/1 inherit;
}
.tec-consent-btns button:hover{ border-color:var(--mint) }
.tec-consent-btns button.is-primary{
  background:var(--mint); border-color:var(--mint); color:var(--deep); font-weight:600;
}
.tec-consent-btns button:focus-visible{ outline:2px solid var(--green-ink); outline-offset:2px }

@media (max-width:640px){
  .tec-consent-in{ padding:14px 16px; gap:12px }
  .tec-consent-btns{ width:100%; }
  .tec-consent-btns button{ flex:1 }
}