/* ==========================================================================
   ZUIVER INFOTECH SOLUTIONS — Intelligence, engineered.
   Monochrome: white through grey on true black. Colour is carried by
   light and motion, never by hue.
   Single-page cinematic landing. No framework, no build step.

   00 Fonts            08 Nav              16 Industries
   01 Tokens           09 Hero             17 Stats
   02 Reset            10 Ticker           18 Tech
   03 Typography       11 Shift            19 Testimonials
   04 Layout           12 AI Core          20 Contact
   05 Components       13 Services         21 Footer
   06 Preloader        14 Blockchain       22 Responsive
   07 Chrome           15 Process          23 Reduced motion
   ========================================================================== */

/* ── 00 · FONTS ─────────────────────────────────────────────────────────── */
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@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:'Inter';src:url('../fonts/Inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── 01 · TOKENS ────────────────────────────────────────────────────────── */
:root{
  --bg:#000000;         /* true black */
  --bg-2:#0A0A0A;
  --bg-3:#151515;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.12);
  --border-2:rgba(255,255,255,.22);

  --text:#FFFFFF;       /* 21.0:1 */
  --text-dim:#ADADAD;   /*  9.4:1 */
  --text-mute:#8E8E8E;  /*  6.4:1 on black, 5.1:1 on the lightest card surface */

  /* Monochrome. The three tiers are luminance steps, not hues. Every glow and
     wash below builds from the -rgb triplets, so re-theming the whole site is
     a change to these six lines. */
  --accent:#FFFFFF;
  --accent-2:#CFCFCF;
  --accent-3:#9A9A9A;
  --accent-3-t:#C4C4C4;
  --accent-rgb:255,255,255;
  --accent-2-rgb:207,207,207;
  --accent-3-rgb:154,154,154;
  --on-accent:#000000;  /* 21.0:1 on the white fill */
  --accent-warn:#FF6B6B;

  --grad:linear-gradient(115deg,#FFFFFF 0%,#CFCFCF 52%,#9A9A9A 100%);
  --grad-text:linear-gradient(100deg,#FFFFFF 6%,#EDEDED 42%,#C6C6C6 70%,#9A9A9A 98%);
  --grad-line:linear-gradient(90deg,transparent,#FFFFFF,#CFCFCF,#9A9A9A,transparent);

  --f-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --sec-y:clamp(90px,12vw,180px);
  --r:16px;
  --r-lg:24px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ── 02 · RESET ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Must sit on the root as well as on body: an `overflow-x` set only on body
     propagates to the viewport and stops containing the decorative
     full-bleed layers, which let the page scroll sideways at 768–1024. */
  overflow-x:hidden;
  overflow-x:clip;
}
html.js{scroll-behavior:auto} /* GSAP owns scrolling when JS is on */

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
address{font-style:normal}

::selection{background:var(--accent);color:var(--on-accent)}

html{scrollbar-width:thin;scrollbar-color:#3A3A3A var(--bg)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#080808}
::-webkit-scrollbar-thumb{background:#2E2E2E;border:3px solid #080808;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#404040}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

input,textarea{caret-color:var(--accent)}

.skip-link{
  position:fixed;top:0;left:16px;z-index:9999;
  background:var(--accent);color:var(--on-accent);
  padding:12px 20px;border-radius:0 0 10px 10px;font-weight:600;
  transform:translateY(-150%);
  transition:transform .25s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ── 03 · TYPOGRAPHY ────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.03em}

.sec-title{
  font-size:clamp(2rem,5.2vw,4rem);
  letter-spacing:-.035em;line-height:1.04;
  margin-bottom:20px;
}
.sec-lead{
  color:var(--text-dim);
  font-size:clamp(1rem,1.5vw,1.15rem);
  max-width:56ch;
  line-height:1.7;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);
  font-size:.75rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
}
.eyebrow i{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);
  flex:none;
}
.eyebrow--center{justify-content:center;width:100%}

/* word/char reveal targets (built by animations.js) */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.word > span{display:inline-block;will-change:transform}
/* .hw keeps a word unbreakable while its characters animate individually. */
.hw{display:inline-block;white-space:nowrap;transform-style:preserve-3d}
.chr{display:inline-block;will-change:transform,opacity}

/* ── 04 · LAYOUT ────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
main{position:relative;z-index:1}
section{position:relative}

.sec-head{margin-bottom:clamp(48px,6vw,80px);max-width:820px}

/* Drifting light behind a section. Compositor-only. */
.mesh{position:absolute;inset:-25%;z-index:0;pointer-events:none;overflow:hidden}
.mesh span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.5;will-change:transform;
}
.mesh span:nth-child(1){
  width:52%;aspect-ratio:1;left:4%;top:8%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.5),transparent 68%);
  animation:drift1 26s var(--ease-io) infinite alternate;
}
.mesh span:nth-child(2){
  width:46%;aspect-ratio:1;right:6%;top:22%;
  background:radial-gradient(circle,rgba(var(--accent-3-rgb),.52),transparent 68%);
  animation:drift2 32s var(--ease-io) infinite alternate;
}
.mesh span:nth-child(3){
  width:40%;aspect-ratio:1;left:34%;bottom:4%;
  background:radial-gradient(circle,rgba(var(--accent-2-rgb),.42),transparent 68%);
  animation:drift3 22s var(--ease-io) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(14%,10%,0) scale(1.2)}}
@keyframes drift2{to{transform:translate3d(-16%,8%,0) scale(1.14)}}
@keyframes drift3{to{transform:translate3d(8%,-14%,0) scale(1.24)}}

/* ── 05 · COMPONENTS ────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  padding:15px 28px;border-radius:100px;
  border:1px solid transparent;overflow:hidden;
  transition:transform .35s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .35s;
  white-space:nowrap;
}
.btn svg{transition:transform .35s var(--ease);position:relative;z-index:2}
.btn > span{position:relative;z-index:2}
.btn:hover svg{transform:translateX(4px)}

.btn--primary{
  background:var(--grad);
  background-size:200% 100%;
  color:var(--on-accent);
  box-shadow:0 10px 40px -12px rgba(var(--accent-rgb),.6);
  animation:sheen 7s linear infinite;
}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.btn--primary:hover{box-shadow:0 16px 54px -12px rgba(var(--accent-rgb),.8)}
/* Light sweep across the fill on hover. */
.btn--primary::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn--primary:hover::after{transition:transform .85s var(--ease);transform:translateX(120%)}

.btn--ghost{
  border-color:var(--border-2);
  color:var(--text);
  background:var(--surface);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.07)}

.btn--full{width:100%;padding-block:17px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ── 06 · PRELOADER ─────────────────────────────────────────────────────── */
.preloader{display:none}
html.js .preloader{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
}
.preloader__inner{width:min(320px,72vw);text-align:center;position:relative;z-index:2}
.preloader__mark{
  font-family:var(--f-display);font-weight:700;
  font-size:1.5rem;letter-spacing:.42em;text-indent:.42em;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:26px;
}
.preloader__bar{height:2px;background:var(--border);border-radius:2px;overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--grad)}
.preloader__count{
  margin-top:16px;font-family:var(--f-display);font-size:.8rem;
  color:var(--text-mute);letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.preloader__count i{font-style:normal;opacity:.6}
.preloader__curtain{
  position:absolute;inset:0;background:var(--bg);
  transform-origin:top;pointer-events:none;z-index:3;
}

/* ── 07 · CHROME (grain · progress · cursor) ────────────────────────────── */
.grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:800;
  background:rgba(255,255,255,.05);pointer-events:none;
}
.progress span{
  display:block;height:100%;width:0;background:var(--grad);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.75);
}

/* Position comes from the `translate` property (set by main.js) and size
   change from `scale`, so neither animates layout. */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:950;pointer-events:none;
  border-radius:50%;opacity:0;
}
.cursor{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(var(--accent-rgb),.6);
  transition:scale .3s var(--ease),background .3s,border-color .3s,opacity .3s;
}
.cursor.is-hover{
  scale:1.9;
  background:rgba(var(--accent-rgb),.09);
  border-color:rgba(var(--accent-rgb),.95);
}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ── 08 · NAV ───────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:700;
  transition:transform .45s var(--ease),background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom-color:var(--border);
}
.nav.is-hidden{transform:translateY(-102%)}

/* `is-stuck` is applied by JS. Without it the fixed bar would stay
   transparent and sit on top of the content it scrolls over. */
html:not(.js) .nav{
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom-color:var(--border);
}

.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__logo{display:flex;align-items:center;gap:12px}
.nav__glyph{flex:none}
.nav__word{
  font-family:var(--f-display);font-weight:700;
  font-size:1.02rem;letter-spacing:.16em;line-height:1;
  display:flex;flex-direction:column;gap:4px;
}
.nav__word em{
  font-style:normal;font-weight:400;font-size:.7rem;
  letter-spacing:.16em;color:var(--text-mute);text-transform:uppercase;
}

.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a{
  position:relative;font-size:.9rem;font-weight:500;color:var(--text-dim);
  transition:color .3s;
}
.nav__links a:not(.nav__cta)::after{
  content:'';position:absolute;left:0;bottom:-6px;
  width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  padding:11px 22px;border-radius:100px;
  border:1px solid var(--border-2);color:var(--text)!important;
  background:var(--surface);
  transition:background .3s,border-color .3s,color .3s;
}
.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)!important}

.nav__toggle{display:none;width:44px;height:44px;position:relative;flex:none}
.nav__toggle span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--text);
  border-radius:2px;transition:transform .4s var(--ease),opacity .3s;
}
.nav__toggle span:nth-child(1){top:19px}
.nav__toggle span:nth-child(2){top:25px}
.nav__toggle.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ── 09 · HERO ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  /* Bottom padding must clear the absolutely-positioned scroll cue
     (~120px tall from its 34px offset) or the tagline collides with it. */
  padding:140px var(--gut) clamp(150px,18vh,200px);
  overflow:hidden;
  perspective:1200px;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.95}
.hero .mesh{z-index:0}
/* Vignette keeps the type legible over the brightest parts of the field. */
.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 46% at 50% 44%,rgba(0,0,0,.5),transparent 72%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 16%,transparent 68%,var(--bg) 100%);
}
.hero__inner{position:relative;z-index:3;max-width:1000px;text-align:center;transform-style:preserve-3d}

.hero__badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:100px;
  border:1px solid var(--border);background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--text-dim);
  margin-bottom:34px;
}
.hero__badge i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}
  70%{box-shadow:0 0 0 11px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}

/* Solid fill, deliberately. The reveal wraps each character in a transformed
   span, which becomes its own compositing layer — a `background-clip:text`
   gradient set on this element cannot paint through those layers and the
   headline renders invisible. Gradients only go on elements that carry both
   their own glyphs and their own transform (see .shift__line--accent). */
.hero__title{
  font-size:clamp(2.4rem,7.2vw,5.6rem);
  letter-spacing:-.045em;line-height:1.02;
  margin-bottom:30px;
  color:var(--text);
  text-shadow:0 0 46px rgba(0,0,0,.9);
}
.hero__sub{
  color:var(--text-dim);max-width:64ch;margin:0 auto 40px;
  font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.75;
}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__tagline{
  margin-top:40px;font-family:var(--f-display);font-weight:500;
  font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--text-mute);
}

.hero__scroll{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-mute);
}
.hero__scroll i{width:1px;height:52px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--accent);animation:trickle 2.1s var(--ease-io) infinite;
}
@keyframes trickle{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}

/* On short viewports there is no room for the cue below the tagline. */
@media (max-height:720px){
  .hero__scroll{display:none}
  .hero{padding-bottom:clamp(90px,10vh,120px)}
}

/* ── 10 · TICKER ────────────────────────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--border);
  background:var(--bg-2);
  padding:26px 0;overflow:hidden;
  position:relative;z-index:3;
}
.ticker::before,.ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.ticker__row{display:flex;width:max-content;will-change:transform}
.ticker__set{display:flex;align-items:center;gap:26px;padding-right:26px;flex:none}
.ticker__set span{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.02em;
  color:var(--text-dim);white-space:nowrap;
}
.ticker__set b{color:var(--accent);font-size:.7rem}

/* ── 11 · SHIFT ─────────────────────────────────────────────────────────── */
.shift{background:var(--bg);overflow:hidden}
.shift__pin{
  min-height:100svh;display:grid;place-items:center;
  padding:var(--sec-y) var(--gut);position:relative;overflow:hidden;
}
.shift__wrap{max-width:900px;width:100%;position:relative;z-index:3;text-align:center}
.shift__lines{margin-bottom:40px}
.shift__line{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,4.4vw,3.2rem);
  line-height:1.2;letter-spacing:-.035em;
  overflow:hidden;
}
.shift__line > span{display:inline-block;color:var(--text-mute);transition:color .5s}
.shift__line--accent > span{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.shift__body{
  color:var(--text-dim);max-width:60ch;margin:0 auto 44px;
  font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.75;
}
.shift__quote blockquote{
  font-family:var(--f-display);font-weight:500;font-style:italic;
  font-size:clamp(1rem,1.8vw,1.3rem);color:var(--text);
  letter-spacing:-.02em;margin-bottom:10px;
}
.shift__quote blockquote::before{content:'“'}
.shift__quote blockquote::after{content:'”'}
.shift__quote figcaption{
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
}

.shift__years{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;place-items:center;
}
.shift__year{
  position:absolute;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(9rem,30vw,26rem);letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);
  user-select:none;
}

/* ── 12 · AI CORE ───────────────────────────────────────────────────────── */
.core{background:var(--bg-2);border-block:1px solid var(--border);overflow:hidden}
.core__pin{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(90px,11vw,130px) var(--gut);
  position:relative;overflow:hidden;
}
.core__head{max-width:var(--wrap);margin:0 auto 46px;width:100%;position:relative;z-index:3}
.core__title{font-size:clamp(1.7rem,3.9vw,3rem);letter-spacing:-.035em;line-height:1.06}

.core__stage{
  max-width:var(--wrap);margin-inline:auto;width:100%;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(36px,6vw,80px);align-items:center;
  position:relative;z-index:3;
}

/* Core figure: a 3D point cloud that morphs per capability (core-cloud.js) */
.core__orb{
  position:relative;width:100%;aspect-ratio:1;max-width:460px;
  margin-inline:auto;display:grid;place-items:center;
}
.orb__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.orb__halo{
  position:absolute;inset:14%;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 68%);
  filter:blur(34px);
}
.orb__cap{
  position:absolute;left:0;right:0;bottom:2%;z-index:3;
  display:flex;align-items:baseline;justify-content:center;gap:12px;
}
.orb__idx{
  font-family:var(--f-display);font-size:.74rem;letter-spacing:.16em;
  color:var(--text-mute);font-variant-numeric:tabular-nums;
}
.orb__idx b{color:var(--text);font-weight:600}
.orb__form{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mute);
}

/* panels */
.core__panels{position:relative;min-height:330px}
.core__panel{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.core__panel.is-active{opacity:1;visibility:visible}
/* Without JS the panels stack and the figure never renders, so the empty
   frame and its stale "01/05" caption are dropped rather than left behind. */
html:not(.js) .core__panel{position:relative;opacity:1;visibility:visible;margin-bottom:18px}
html:not(.js) .core__panels{min-height:0}
html:not(.js) .core__orb,
html:not(.js) .core__dots{display:none}
html:not(.js) .core__stage{grid-template-columns:1fr}
html:not(.js) .core__pin{min-height:0}

.core__num{
  font-family:var(--f-display);font-weight:700;font-size:.8rem;
  letter-spacing:.18em;color:var(--accent);display:block;margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.core__panel h3{font-size:clamp(1.35rem,2.6vw,1.85rem);margin-bottom:14px}
.core__panel p{color:var(--text-dim);line-height:1.7;margin-bottom:22px}
.core__panel ul{display:flex;flex-wrap:wrap;gap:8px}
.core__panel li{
  font-size:.79rem;font-weight:500;padding:7px 14px;border-radius:100px;
  border:1px solid var(--border-2);color:var(--text-dim);background:rgba(255,255,255,.02);
}

.core__dots{
  display:flex;gap:9px;justify-content:center;margin-top:46px;
  position:relative;z-index:3;
}
/* Fixed track width, scaled on the compositor — no layout animation. */
.core__dots i{
  width:46px;height:2px;border-radius:2px;background:var(--border-2);
  transform:scaleX(.56);transform-origin:left center;
  transition:background .4s,transform .4s var(--ease);
}
.core__dots i.is-active{background:var(--accent);transform:scaleX(1)}

/* ── 13 · SERVICES ──────────────────────────────────────────────────────── */
.services{padding-block:var(--sec-y);background:var(--bg);overflow:hidden}
/* Three columns, not four: at 1240px a quarter-column is ~275px, which is too
   narrow for these descriptions and wraps them to six or seven lines. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1400px}

.svc{
  position:relative;overflow:hidden;
  padding:clamp(26px,2.6vw,34px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .45s,background .45s,box-shadow .45s;
  will-change:transform;transform-style:preserve-3d;
}
.svc:hover{
  border-color:rgba(var(--accent-rgb),.3);background:var(--surface-2);
  box-shadow:0 24px 60px -30px rgba(var(--accent-rgb),.5);
}
.svc--lead{
  grid-column:span 2;
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-3-rgb),.09));
  border-color:rgba(var(--accent-rgb),.26);
}
.svc__spot{
  position:absolute;width:360px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.17),rgba(var(--accent-3-rgb),.09) 45%,transparent 70%);
  opacity:0;transition:opacity .45s;pointer-events:none;
  translate:-50% -50%;
}
.svc:hover .svc__spot{opacity:1}

.svc__idx{
  font-family:var(--f-display);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.svc h3{font-size:clamp(1.12rem,1.7vw,1.4rem);margin-bottom:12px;letter-spacing:-.025em}
.svc p{color:var(--text-dim);font-size:.93rem;line-height:1.68}
.svc__tag{
  display:inline-block;margin-top:18px;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
  color:var(--accent);border:1px solid rgba(var(--accent-rgb),.36);background:rgba(var(--accent-rgb),.08);
}

/* ── 14 · BLOCKCHAIN ────────────────────────────────────────────────────── */
.chain{padding-block:var(--sec-y);background:var(--bg-2);border-block:1px solid var(--border);overflow:hidden}
.chain__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(44px,7vw,90px);align-items:center;
  position:relative;z-index:3;
}
.chain__list{margin:32px 0 36px;display:grid;gap:2px}
.chain__list li{
  padding:15px 0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:var(--text-dim);
  transition:color .35s;
}
/* The contents slide, not the padding: animating padding-left would relayout
   the row on every frame. Translating the bullet and the label instead keeps
   the border-bottom full width, which is what the padding version looked like. */
.chain__list li::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.13);
  transition:transform .35s var(--ease);
}
.chain__list li span{transition:transform .35s var(--ease)}
.chain__list li:hover{color:var(--text)}
.chain__list li:hover::before,
.chain__list li:hover span{transform:translateX(8px)}

.chain__viz{display:grid;gap:14px;perspective:900px}
.block{--link-scale:1}
.block{
  position:relative;
  padding:18px 22px;border-radius:14px;
  border:1px solid var(--border-2);
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  will-change:transform,opacity;
  transition:border-color .4s,box-shadow .4s;
}
.block:hover{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 16px 44px -26px rgba(var(--accent-rgb),.65)}
.block::after{ /* hash link drawn down to the next block */
  content:'';position:absolute;left:34px;bottom:-15px;
  width:1px;height:14px;background:var(--accent);opacity:.55;
  transform-origin:top;transform:scaleY(var(--link-scale));
}
.block:last-child::after{display:none}
.block em{
  font-style:normal;font-family:var(--f-display);font-weight:600;
  font-size:.98rem;letter-spacing:-.01em;
}
.block span{
  font-size:.72rem;color:var(--accent);opacity:.8;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

/* ── 15 · PROCESS ───────────────────────────────────────────────────────── */
.process{background:var(--bg);overflow:hidden}
.process__pin{
  min-height:100svh;display:flex;align-items:center;
  overflow:hidden;position:relative;
}
.process__track{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,30px);
  padding-inline:var(--gut);will-change:transform;
  position:relative;z-index:3;
}
.process__intro{width:min(440px,78vw);flex:none;padding-right:20px}

.pstep{
  width:min(370px,74vw);flex:none;
  padding:clamp(28px,3vw,40px);min-height:clamp(330px,52vh,470px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;
  transition:border-color .4s,background .4s,box-shadow .4s;
}
.pstep:hover{
  border-color:rgba(var(--accent-rgb),.38);background:var(--surface-2);
  box-shadow:0 24px 60px -32px rgba(var(--accent-rgb),.55);
}
.pstep__n{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(var(--accent-rgb),.55);
  margin-bottom:auto;font-variant-numeric:tabular-nums;
}
.pstep h3{font-size:1.45rem;margin:26px 0 12px}
.pstep p{color:var(--text-dim);font-size:.93rem;line-height:1.68}

.process__rail{
  position:absolute;left:var(--gut);right:var(--gut);bottom:8%;
  height:1px;background:var(--border);z-index:3;
}
.process__rail span{
  display:block;height:100%;width:0;background:var(--grad);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.65);
}

/* ── 16 · INDUSTRIES ────────────────────────────────────────────────────── */
.ind{padding-block:var(--sec-y);background:var(--bg-2);border-block:1px solid var(--border)}
.ind__list{border-top:1px solid var(--border)}
.ind__row{
  position:relative;display:grid;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.4fr) 40px;
  gap:20px;align-items:center;
  padding:clamp(22px,2.8vw,32px) 0;
  border-bottom:1px solid var(--border);
  transition:border-color .4s;
  overflow:hidden;
}
.ind__row::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-3-rgb),.06) 45%,transparent 78%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.ind__row:hover{border-color:rgba(var(--accent-rgb),.32)}
.ind__row:hover::before{transform:scaleX(1)}

/* The row's contents draw inward on hover. This was `padding-inline`, which
   reflowed all four grid columns every frame; translating each child gives
   the same read on the compositor. */
.ind__n,.ind__row h3,.ind__row p{transition:transform .5s var(--ease)}
.ind__row:hover .ind__n,
.ind__row:hover h3,
.ind__row:hover p{transform:translateX(16px)}

.ind__n{
  font-family:var(--f-display);font-weight:600;font-size:.76rem;
  letter-spacing:.18em;color:var(--accent);font-variant-numeric:tabular-nums;
}
.ind__row h3{font-size:clamp(1.25rem,2.7vw,2rem);letter-spacing:-.03em}
.ind__row p{color:var(--text-dim);font-size:.92rem}
.ind__row i{
  width:34px;height:34px;border-radius:50%;justify-self:end;
  border:1px solid var(--border-2);position:relative;
  transition:background .4s,border-color .4s,transform .45s var(--ease);
}
.ind__row i::before,.ind__row i::after{
  content:'';position:absolute;top:50%;left:50%;background:currentColor;
  translate:-50% -50%;
}
.ind__row i::before{width:11px;height:1.5px}
.ind__row i::after{width:1.5px;height:11px}
.ind__row:hover i{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  transform:translateX(-16px) rotate(90deg);
}

/* ── 17 · STATS ─────────────────────────────────────────────────────────── */
.stats{padding-block:clamp(70px,9vw,120px);background:var(--bg);overflow:hidden}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:3}
.stat{
  padding:clamp(26px,3vw,38px);text-align:center;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .4s,background .4s,box-shadow .4s;
}
.stat:hover{
  border-color:rgba(var(--accent-rgb),.32);background:var(--surface-2);
  box-shadow:0 22px 56px -32px rgba(var(--accent-rgb),.55);
}
.stat__n{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.6rem,5.6vw,4.2rem);letter-spacing:-.05em;line-height:1;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:16px;font-variant-numeric:tabular-nums;
}
.stat h3{font-size:1rem;margin-bottom:6px;letter-spacing:-.01em;line-height:1.35}
.stat p{color:var(--text-mute);font-size:.83rem}

/* ── 18 · TECH ──────────────────────────────────────────────────────────── */
.tech{
  padding-block:clamp(60px,8vw,100px);
  background:var(--bg-2);border-block:1px solid var(--border);
  overflow:hidden;
}
.tech .wrap{margin-bottom:36px;display:flex;justify-content:center}
.tech__row{display:flex;width:max-content;margin-bottom:14px;will-change:transform}
.tech__set{display:flex;gap:14px;padding-right:14px;flex:none}
.tech__set span{
  font-family:var(--f-display);font-weight:500;font-size:.92rem;
  padding:12px 24px;border-radius:100px;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface);color:var(--text-dim);
  transition:border-color .3s,color .3s;
}
.tech__set span:hover{border-color:rgba(var(--accent-rgb),.4);color:var(--text)}

/* ── 19 · TESTIMONIALS ──────────────────────────────────────────────────── */
.quotes{padding-block:var(--sec-y);background:var(--bg);overflow:hidden}
.quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1400px}
.quote{
  padding:clamp(28px,3vw,38px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  transition:border-color .4s,box-shadow .4s;
}
.quote:hover{border-color:rgba(var(--accent-rgb),.32);box-shadow:0 22px 56px -32px rgba(var(--accent-rgb),.5)}
.quote blockquote{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.55;letter-spacing:-.02em;
}
.quote blockquote::before{
  content:'“';display:block;
  font-size:3rem;line-height:.6;color:var(--accent);opacity:.55;margin-bottom:16px;
}
.quote figcaption{display:flex;flex-direction:column;gap:3px}
.quote figcaption strong{font-family:var(--f-display);font-weight:600;font-size:.95rem}
.quote figcaption span{font-size:.79rem;color:var(--text-mute)}
.quote--placeholder{opacity:.55;border-style:dashed}

/* ── 20 · CONTACT ───────────────────────────────────────────────────────── */
.contact{
  padding-block:var(--sec-y);
  background:var(--bg-2);border-top:1px solid var(--border);
  position:relative;overflow:hidden;
}
.contact__grid{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(44px,6vw,80px);align-items:start;
}

.contact__meta{margin:38px 0 30px;display:grid;gap:22px}
.contact__meta li{display:grid;gap:5px}
.contact__meta span{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
}
.contact__meta a,.contact__meta address{
  font-family:var(--f-display);font-weight:500;font-size:1.02rem;line-height:1.5;
  transition:color .3s;
}
.contact__meta a:hover{color:var(--accent)}

.contact__social{display:flex;gap:10px;flex-wrap:wrap}
.contact__social a{
  padding:9px 18px;border-radius:100px;font-size:.83rem;font-weight:500;
  border:1px solid var(--border-2);color:var(--text-dim);
  transition:border-color .3s,color .3s,background .3s;
}
.contact__social a:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.08)}

/* form */
.form{
  padding:clamp(26px,3.4vw,40px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:grid;gap:8px;margin-bottom:16px;position:relative}
.form__row .field{margin-bottom:0}
.field label{
  font-size:.76rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);
}
.field label i{font-style:normal;color:var(--text-mute);text-transform:none;letter-spacing:0}

.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid var(--border);background:rgba(255,255,255,.02);
  font-size:.94rem;font-family:var(--f-body);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.field textarea{resize:vertical;min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-mute)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(var(--accent-rgb),.05);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393A5A0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
.field select option{background:var(--bg-2);color:var(--text)}

.field.is-invalid input,.field.is-invalid textarea{border-color:var(--accent-warn)}
.field__err{color:var(--accent-warn);font-size:.76rem;min-height:0}
.field.is-invalid .field__err{min-height:1em}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{margin-top:16px;font-size:.88rem;text-align:center;min-height:1.4em}
.form__status.is-ok{color:var(--accent)}
.form__status.is-err{color:var(--accent-warn)}

/* ── 21 · FOOTER ────────────────────────────────────────────────────────── */
.foot{padding-block:clamp(56px,7vw,80px) 32px;background:var(--bg);border-top:1px solid var(--border)}
.foot__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(36px,5vw,70px);
  padding-bottom:44px;border-bottom:1px solid var(--border);
}
.foot__mark{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:1.35rem;letter-spacing:.3em;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;
}
.foot__brand p{color:var(--text-mute);font-size:.85rem;letter-spacing:.04em}

.foot__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot__nav h3{
  font-family:var(--f-body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:16px;font-weight:600;line-height:1.35;
}
.foot__nav a{
  display:block;font-size:.9rem;color:var(--text-dim);
  padding:5px 0;transition:color .3s,transform .3s var(--ease);
}
.foot__nav a:hover{color:var(--accent);transform:translateX(3px)}

.foot__bottom{
  padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:var(--text-mute);
}

/* ── 22 · RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc--lead{grid-column:span 2}
}

@media (max-width:992px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(340px,84vw);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:24px;padding:0 34px;
    background:rgba(6,6,6,.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-left:1px solid var(--border);
    transform:translateX(100%);
    transition:transform .55s var(--ease);
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-size:1.35rem;font-family:var(--f-display);font-weight:600;color:var(--text)}
  .nav__cta{margin-top:10px}
  .nav__toggle{display:block;z-index:2}

  .core__stage{grid-template-columns:1fr;gap:34px}
  .core__orb{max-width:280px}
  .core__panels{min-height:390px}

  .chain__grid,.contact__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .quotes__grid{grid-template-columns:1fr}
  .quote--placeholder{display:none} /* hide unfilled slots on small screens */
  .foot__top{grid-template-columns:1fr}
  .ind__row{grid-template-columns:44px minmax(0,1fr) 34px}
  .ind__row p{display:none}
}

@media (max-width:768px){
  .hero{padding-top:120px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .svc-grid{grid-template-columns:1fr}
  .svc--lead{grid-column:span 1}
  .form__row{grid-template-columns:1fr;gap:0}
  .form__row .field{margin-bottom:16px}
  .foot__nav{grid-template-columns:1fr 1fr}
  .core__panels{min-height:430px}
  .process__rail{bottom:5%}
  .mesh span{filter:blur(50px)}
}

@media (max-width:480px){
  .stats__grid{grid-template-columns:1fr}
  .foot__nav{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column;gap:6px}
  .core__panels{min-height:480px}
  .shift__quote blockquote{font-size:1rem}
}

/* ── 23 · REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .hero__scroll,.grain{display:none}
  .mesh span{animation:none}

  /* Pinned sections release to normal document flow. */
  .shift__pin,.core__pin,.process__pin{min-height:0;padding-block:var(--sec-y)}
  .process__track{flex-wrap:wrap;justify-content:center}
  .process__rail{display:none}

  /* Every panel is shown stacked rather than swapped on scroll. */
  .core__panel{position:relative;opacity:1;visibility:visible;margin-bottom:16px}
  .core__panels{min-height:0}
  .core__orb,.core__dots{display:none}
}