/* ==========================================================================
   Samchi Technologies — visual system
   Vibe: Ethereal Glass (OLED black, aurora mesh, vantablack glass)
   Layout: Editorial split hero + asymmetrical bento
   ========================================================================== */

:root{
  /* surface */
  --bg:          #050505;
  --bg-raise:    #0A0A0C;
  --ink:         #F4F4F6;
  --ink-soft:    #A6A6B0;
  --ink-mute:    #6E6E7A;

  /* accent */
  --violet:      #7C5CFF;
  --violet-dim:  #5B3FE0;
  --mint:        #3DDC97;
  --amber:       #FFB86B;

  /* hairlines & glass */
  --line:        rgba(255,255,255,.07);
  --line-soft:   rgba(255,255,255,.045);
  --line-hi:     rgba(255,255,255,.14);
  --shell:       rgba(255,255,255,.035);
  --core:        #0B0B0E;
  --inner-hi:    inset 0 1px 0 rgba(255,255,255,.075);

  /* radii — concentric */
  --r-out:       32px;
  --r-in:        calc(32px - 7px);
  --pad-bezel:   7px;

  /* rhythm */
  --shell-w:     1240px;
  --gutter:      clamp(20px, 5vw, 56px);
  --sec-y:       clamp(96px, 14vw, 180px);

  /* motion */
  --e-expo:      cubic-bezier(.16,1,.3,1);
  --e-spring:    cubic-bezier(.32,.72,0,1);
  --e-swift:     cubic-bezier(.4,0,.1,1);

  /* type */
  --f-display:  "Clash Display","Satoshi",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-body:     "Satoshi",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-mono:     "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* systemic z layers */
  --z-nav: 60;
  --z-menu: 70;
  --z-grain: 80;
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
/* must beat component display rules (e.g. .form__done{display:grid}) */
[hidden]{ display:none !important; }
::selection{ background:rgba(124,92,255,.35); color:#fff; }

:focus-visible{
  outline:1.5px solid var(--violet);
  outline-offset:3px;
  border-radius:6px;
}

/* ── layout shell ──────────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--shell-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ position:relative; padding-block:var(--sec-y); }

/* ── fixed textures (never on scrolling content) ───────────────────── */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain);
  pointer-events:none; opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* ── intro curtain ─────────────────────────────────────────────────── */
.curtain{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .8s var(--e-expo), visibility .8s;
}
.curtain.is-done{ opacity:0; visibility:hidden; }
.curtain__inner{ display:grid; gap:22px; justify-items:center; }
.curtain__mark{ overflow:hidden; }
.curtain__mark span{
  display:block;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(28px,6vw,46px); letter-spacing:.3em; padding-left:.3em;
  transform:translateY(110%);
  animation:curtainUp .9s var(--e-expo) .05s forwards;
}
@keyframes curtainUp{ to{ transform:translateY(0); } }
.curtain__bar{
  width:min(220px,42vw); height:1.5px; border-radius:99px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.curtain__bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  transform:scaleX(0); transform-origin:0 50%;
  animation:curtainBar 1.15s var(--e-swift) .1s forwards;
}
@keyframes curtainBar{ to{ transform:scaleX(1); } }

/* ══════════════════════════════════════════════════════════════════
   DOUBLE BEZEL — machined hardware enclosure
   ══════════════════════════════════════════════════════════════════ */
.bezel{
  position:relative;
  padding:var(--pad-bezel);
  border-radius:var(--r-out);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 1px 0 rgba(0,0,0,.6),
    0 30px 60px -30px rgba(0,0,0,.85);
  height:100%;
}
.bezel::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.core{
  position:relative; height:100%;
  border-radius:var(--r-in);
  background:
    linear-gradient(180deg, #101015 0%, var(--core) 55%, #08080B 100%);
  box-shadow:var(--inner-hi), inset 0 0 0 1px rgba(255,255,255,.035);
  overflow:hidden;
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */
/* Clash Display sets very tight by default — negative tracking closes the
   word gaps too, so buy the spaces back explicitly on every display run. */
.hero__title,.h2,.h3,.menu__nav a,.card h3,.case__head h3,.step h3,
.quote blockquote,.values b,.art__type span,.svc__head h3,.faq__q,
.footer__wordmark span,.phero__title{ word-spacing:.07em; }

.h2{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(38px,5.4vw,74px);
  line-height:.96; letter-spacing:-.035em;
  margin-bottom:22px;
}
.gradient{
  background:linear-gradient(104deg,#FFFFFF 4%, var(--violet) 42%, var(--mint) 88%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.micro{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 11px; margin-bottom:26px;
  border-radius:99px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--line), var(--inner-hi);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow em{ font-style:normal; color:var(--ink-mute); padding-left:10px; border-left:1px solid var(--line); }
.dot{
  width:5px; height:5px; border-radius:99px; background:var(--mint);
  box-shadow:0 0 0 3px rgba(61,220,151,.14);
  animation:pulse 2.6s var(--e-swift) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.82); } }

.head{ max-width:820px; margin-bottom:clamp(48px,6vw,84px); }
.head--split{
  max-width:none; display:grid; gap:clamp(24px,4vw,64px);
  grid-template-columns:1.15fr .85fr; align-items:end;
}
.head__note{ color:var(--ink-soft); font-size:clamp(15px,1.35vw,17.5px); max-width:56ch; }
.head__note + .head__note{ margin-top:16px; }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — island / button-in-button
   ══════════════════════════════════════════════════════════════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding:11px 11px 11px 24px;
  border:0; border-radius:99px; cursor:pointer;
  font-size:14.5px; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .55s var(--e-spring), box-shadow .55s var(--e-spring),
             background-color .55s var(--e-spring), color .55s var(--e-spring);
  will-change:transform;
}
.btn:active{ transform:scale(.975); }
.btn__orb{
  display:grid; place-items:center; flex:none;
  width:32px; height:32px; border-radius:99px;
  background:rgba(0,0,0,.14);
  transition:transform .55s var(--e-spring), background-color .55s var(--e-spring);
}
.btn__orb svg{ width:17px; height:17px; }
.btn:hover .btn__orb{ transform:translate(3px,-3px) scale(1.06); }

.btn--solid{
  background:#F4F4F6; color:#08080A;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 14px 34px -14px rgba(124,92,255,.55);
}
.btn--solid:hover{ box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 20px 44px -14px rgba(124,92,255,.85); }

.btn--line{
  padding:11px 24px; color:var(--ink);
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 0 1px var(--line-hi), var(--inner-hi);
}
.btn--line:hover{ background:rgba(255,255,255,.07); }

.btn--ghost{
  padding:8px 8px 8px 18px; font-size:13.5px;
  background:rgba(255,255,255,.05); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-hi);
}
.btn--ghost .btn__orb{ width:27px; height:27px; background:rgba(255,255,255,.09); }
.btn--ghost .btn__orb svg{ width:15px; height:15px; }
.btn--ghost:hover{ background:#F4F4F6; color:#08080A; }
.btn--ghost:hover .btn__orb{ background:rgba(0,0,0,.12); }

.btn--block{ width:100%; justify-content:space-between; padding-left:26px; }

.link{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  transition:color .5s var(--e-spring);
}
.link i{
  display:grid; place-items:center; width:24px; height:24px;
  border-radius:99px; font-size:11px; font-style:normal;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .55s var(--e-spring), background-color .55s var(--e-spring);
}
.link:hover{ color:var(--ink); }
.link:hover i{ transform:translate(3px,-3px); background:rgba(124,92,255,.28); }

/* ══════════════════════════════════════════════════════════════════
   NAV — floating island
   ══════════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; justify-content:center;
  padding:22px var(--gutter);
  pointer-events:none;
  transition:transform .7s var(--e-spring), padding .7s var(--e-spring);
}
.nav.is-hidden{ transform:translateY(-140%); }
.nav__pill{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  padding:8px 8px 8px 18px;
  border-radius:99px;
  background:rgba(10,10,13,.55);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--line-hi), inset 0 1px 0 rgba(255,255,255,.08),
             0 20px 50px -24px rgba(0,0,0,.9);
  transition:background-color .7s var(--e-spring), box-shadow .7s var(--e-spring);
}
.nav.is-stuck .nav__pill{ background:rgba(8,8,10,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px -26px rgba(0,0,0,1); }

.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:-.02em; }
.brand__glyph{
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:10px; color:var(--violet);
  background:linear-gradient(150deg, rgba(124,92,255,.28), rgba(61,220,151,.1));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .7s var(--e-spring);
}
.brand:hover .brand__glyph{ transform:rotate(-8deg) scale(1.06); }
.brand__glyph svg{ width:19px; height:19px; }
.brand__dim{ color:var(--ink-mute); font-weight:500; }

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links a{
  position:relative; padding:9px 14px; border-radius:99px;
  font-size:13.5px; color:var(--ink-soft);
  transition:color .5s var(--e-spring), background-color .5s var(--e-spring);
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--e-expo);
}
.nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,.045); }
.nav__links a:hover::after{ transform:scaleX(1); }

.burger{
  display:none; place-items:center;
  width:40px; height:40px; flex:none;
  border:0; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--line-hi);
}
.burger i{
  position:absolute; width:16px; height:1.5px; border-radius:2px; background:var(--ink);
  transition:transform .6s var(--e-spring), opacity .3s var(--e-swift);
}
.burger i:nth-child(1){ transform:translateY(-4px); }
.burger i:nth-child(2){ transform:translateY(4px); }
.burger.is-open i:nth-child(1){ transform:translateY(0) rotate(45deg); }
.burger.is-open i:nth-child(2){ transform:translateY(0) rotate(-45deg); }

/* ── fullscreen menu ───────────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:rgba(5,5,6,.82);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  backdrop-filter:blur(30px) saturate(140%);
  opacity:0; transition:opacity .55s var(--e-swift);
}
.menu.is-open{ opacity:1; }
.menu__glow{
  position:absolute; inset:auto -20% -30% -20%; height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(124,92,255,.3), transparent 70%);
  pointer-events:none;
}
.menu__inner{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:8vh;
  padding:120px var(--gutter) 48px;
  max-width:var(--shell-w); margin-inline:auto;
}
.menu__nav{ display:grid; gap:2px; }
.menu__nav a{
  display:flex; align-items:baseline; gap:22px;
  padding:10px 0;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(34px,8.4vw,76px); line-height:1; letter-spacing:-.035em;
  color:var(--ink);
  opacity:0; transform:translateY(46px);
  transition:opacity .7s var(--e-expo), transform .7s var(--e-expo), color .5s var(--e-spring);
}
.menu__nav a em{
  font-family:var(--f-mono); font-style:normal;
  font-size:11px; letter-spacing:.2em; color:var(--ink-mute);
}
.menu__nav a span{ position:relative; }
.menu__nav a span::after{
  content:""; position:absolute; left:0; right:0; bottom:.12em; height:2px;
  background:linear-gradient(90deg,var(--violet),var(--mint));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--e-expo);
}
.menu__nav a:hover span::after{ transform:scaleX(1); }
.menu__foot{
  display:flex; flex-wrap:wrap; gap:clamp(28px,6vw,90px);
  padding-top:34px; border-top:1px solid var(--line);
  opacity:0; transform:translateY(30px);
  transition:opacity .7s var(--e-expo), transform .7s var(--e-expo);
}
.menu__foot .micro{ margin-bottom:8px; }
.menu__mail{ font-family:var(--f-display); font-size:clamp(19px,2.4vw,26px); font-weight:500; letter-spacing:-.02em; }
.menu__mail:hover{ color:var(--mint); }
.menu__social{ display:flex; gap:18px; font-size:14px; color:var(--ink-soft); }
.menu__social a:hover{ color:var(--ink); }
.menu.is-open [data-i]{ opacity:1; transform:translateY(0); }
.menu [data-i="1"]{ transition-delay:.08s } .menu [data-i="2"]{ transition-delay:.14s }
.menu [data-i="3"]{ transition-delay:.2s }  .menu [data-i="4"]{ transition-delay:.26s }
.menu [data-i="5"]{ transition-delay:.32s } .menu [data-i="6"]{ transition-delay:.4s }

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; z-index:2;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:150px 90px;
  overflow:hidden;
}
.hero__aurora{ position:absolute; inset:0; pointer-events:none; }
.orb{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.55;
  will-change:transform;
}
.orb--violet{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-16vw; left:-8vw;
  background:radial-gradient(circle, rgba(124,92,255,.85), transparent 66%);
  animation:drift1 22s var(--e-swift) infinite alternate;
}
.orb--mint{
  width:40vw; height:40vw; max-width:560px; max-height:560px;
  bottom:-14vw; right:-6vw;
  background:radial-gradient(circle, rgba(61,220,151,.55), transparent 66%);
  animation:drift2 26s var(--e-swift) infinite alternate;
}
.orb--amber{
  width:26vw; height:26vw; max-width:360px; max-height:360px;
  top:38%; right:24%;
  background:radial-gradient(circle, rgba(255,184,107,.34), transparent 66%);
  animation:drift3 30s var(--e-swift) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(9vw,7vh,0) scale(1.14); } }
@keyframes drift2{ to{ transform:translate3d(-8vw,-6vh,0) scale(1.18); } }
@keyframes drift3{ to{ transform:translate3d(-11vw,9vh,0) scale(.86); } }

.hero__grid-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(110% 80% at 50% 30%, #000 10%, transparent 72%);
  mask-image:radial-gradient(110% 80% at 50% 30%, #000 10%, transparent 72%);
}

.hero__shell{
  position:relative; z-index:2;
  display:grid; gap:clamp(48px,5vw,72px);
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
}
.hero__title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(46px,7.1vw,104px);
  line-height:.93; letter-spacing:-.042em;
  margin-bottom:30px;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.04em; }
.hero__title .line__in{
  display:block;
  transform:translateY(102%);
  transition:transform 1.05s var(--e-expo);
}
.is-ready .hero__title .line__in{ transform:translateY(0); }
.hero__title .line__in[data-d="1"]{ transition-delay:.1s }
.hero__title .line__in[data-d="2"]{ transition-delay:.19s }
.hero__title .line__in[data-d="3"]{ transition-delay:.28s }
.hero__title .line__in[data-d="4"]{ transition-delay:.37s }

.hero__sub{ color:var(--ink-soft); font-size:clamp(15.5px,1.45vw,18.5px); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,54px);
  margin-top:52px; padding-top:30px; border-top:1px solid var(--line);
}
.hero__stats dt{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(28px,3.2vw,40px); line-height:1; letter-spacing:-.03em;
}
.hero__stats dd{ margin-top:6px; font-size:12.5px; color:var(--ink-mute); letter-spacing:.02em; }

/* ── console panel ─────────────────────────────────────────────────── */
.hero__panel{ position:relative; }
.hero__panel-glow{
  position:absolute; inset:12% -6% -14% -6%; z-index:-1;
  background:radial-gradient(60% 60% at 50% 50%, rgba(124,92,255,.35), transparent 70%);
  filter:blur(50px);
}
.bezel--console{ transform:perspective(1400px) rotateY(-6deg) rotateX(2.5deg); transform-style:preserve-3d; }
.console{ font-size:13px; }
.console__bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.022);
}
.console__dots{ display:flex; gap:6px; }
.console__dots i{ width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.16); }
.console__dots i:first-child{ background:rgba(255,184,107,.6); }
.console__path{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em; color:var(--ink-mute); }
.console__live{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mint);
}
.console__live i{ width:5px; height:5px; border-radius:99px; background:var(--mint); animation:pulse 2s infinite; }
.console__body{ padding:22px 20px; display:grid; gap:16px; }

.metric__row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.metric__row span{ font-size:12px; color:var(--ink-mute); }
.metric__row b{ font-family:var(--f-mono); font-size:12px; color:var(--ink); }
.track{ height:4px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.track i{
  display:block; height:100%; border-radius:99px; width:var(--w);
  background:linear-gradient(90deg,var(--violet),var(--mint));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.4s var(--e-expo);
}
.is-ready .track i{ transform:scaleX(1); }
.metric:nth-child(2) .track i{ transition-delay:.12s }
.metric:nth-child(3) .track i{ transition-delay:.24s }

.console__split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.chip{
  padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px var(--line), var(--inner-hi);
}
.chip em{ display:block; font-family:var(--f-mono); font-style:normal; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px; }
.chip span{ font-size:12px; color:var(--ink-soft); }

.console__log{
  margin-top:4px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:11px; line-height:2; color:var(--ink-mute);
}
.console__log i{ font-style:normal; color:var(--violet); padding-right:8px; }
.console__log b{ color:var(--mint); font-weight:400; }

.hero__scroll{
  position:relative; z-index:2;
  align-self:center; margin-top:clamp(40px,6vw,72px);
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-mute);
}
.hero__scroll i{
  width:1px; height:44px; border-radius:99px;
  background:linear-gradient(180deg, var(--line-hi), transparent);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--violet), transparent);
  transform:translateY(-100%);
  animation:scrollHint 2.4s var(--e-swift) infinite;
}
@keyframes scrollHint{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* ══════════════════════════════════════════════════════════════════
   TICKER
   ══════════════════════════════════════════════════════════════════ */
.ticker{
  position:relative; z-index:2;
  padding-block:26px;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.012);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__row{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.ticker__set{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.ticker__set span{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(18px,2.2vw,26px); letter-spacing:-.025em; color:var(--ink-soft);
  white-space:nowrap;
}
.ticker__set i{ font-style:normal; font-size:12px; color:var(--violet); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ══════════════════════════════════════════════════════════════════
   BENTO
   ══════════════════════════════════════════════════════════════════ */
.bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(0,auto);
}
.bento__cell{ grid-column:span 4; }
.bento__cell--wide{ grid-column:span 7; grid-row:span 2; }
.bento__cell--tall{ grid-column:span 5; grid-row:span 2; }
.bento__cell--full{ grid-column:span 12; }

.card{
  display:flex; flex-direction:column;
  padding:clamp(22px,2.4vw,32px);
  min-height:100%;
}
.card__spot{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(124,92,255,.16), transparent 65%);
  transition:opacity .6s var(--e-swift);
}
.tilt:hover .card__spot{ opacity:1; }
.card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.ico{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:14px; color:var(--ink);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--line), var(--inner-hi);
  transition:transform .7s var(--e-spring), color .7s var(--e-spring), background-color .7s var(--e-spring);
}
.ico svg{ width:22px; height:22px; }
.tilt:hover .ico{ transform:translateY(-3px); color:var(--violet); background:rgba(124,92,255,.14); }
.num{ font-family:var(--f-mono); font-style:normal; font-size:10.5px; letter-spacing:.2em; color:var(--ink-mute); }

.card h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2.1vw,27px); line-height:1.12; letter-spacing:-.028em;
  margin-bottom:12px;
}
.card p{ color:var(--ink-soft); font-size:14.5px; max-width:44ch; }
.card--accent{ background:linear-gradient(170deg, rgba(124,92,255,.12), var(--core) 45%, #08080B 100%); }

.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.tags li{
  padding:5px 11px; border-radius:99px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
  background:rgba(255,255,255,.028);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* card visuals */
.card__viz{ margin-top:auto; padding-top:30px; }
.card__viz--wire{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px; align-items:end; height:110px;
}
.card__viz--wire span{
  display:block; border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--line);
  transform-origin:50% 100%;
  transition:transform .8s var(--e-expo), background-color .8s var(--e-expo);
}
.card__viz--wire span:nth-child(1){ height:38% }
.card__viz--wire span:nth-child(2){ height:66% }
.card__viz--wire span:nth-child(3){ height:48% }
.card__viz--wire span:nth-child(4){ height:88% }
.card__viz--wire span:nth-child(5){ height:58% }
.card__viz--wire span:nth-child(6){ height:74% }
.tilt:hover .card__viz--wire span{ background:linear-gradient(180deg, rgba(124,92,255,.5), rgba(61,220,151,.08)); }
.tilt:hover .card__viz--wire span:nth-child(odd){ transform:scaleY(1.14); }
.tilt:hover .card__viz--wire span:nth-child(even){ transform:scaleY(.88); }

.card__viz--orbit{
  position:relative; height:150px; margin-top:auto;
  display:grid; place-items:center;
}
.card__viz--orbit i{
  position:absolute; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line-hi);
  animation:spin 18s linear infinite;
}
.card__viz--orbit i:nth-child(1){ width:150px; height:150px; }
.card__viz--orbit i:nth-child(2){ width:104px; height:104px; animation-duration:13s; animation-direction:reverse; }
.card__viz--orbit i:nth-child(3){ width:58px; height:58px; animation-duration:9s; }
.card__viz--orbit i::after{
  content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px;
  border-radius:99px; background:var(--mint); box-shadow:0 0 12px var(--mint);
}
.card__viz--orbit i:nth-child(2)::after{ background:var(--violet); box-shadow:0 0 12px var(--violet); }
.card__viz--orbit i:nth-child(3)::after{ background:var(--amber); box-shadow:0 0 12px var(--amber); }
.card__viz--orbit b{
  width:14px; height:14px; border-radius:99px;
  background:radial-gradient(circle at 35% 30%, #fff, var(--violet));
  box-shadow:0 0 26px rgba(124,92,255,.9);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.card--row{ flex-direction:row; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.card--row h3{ max-width:20ch; }
.swatches{ display:flex; gap:10px; }
.swatches i{
  width:56px; height:80px; border-radius:16px; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 30px -18px rgba(0,0,0,.9);
  transition:transform .7s var(--e-spring);
}
.tilt:hover .swatches i:nth-child(1){ transform:translateY(-8px) rotate(-4deg); }
.tilt:hover .swatches i:nth-child(2){ transform:translateY(-4px) rotate(-2deg); }
.tilt:hover .swatches i:nth-child(4){ transform:translateY(-4px) rotate(2deg); }
.tilt:hover .swatches i:nth-child(5){ transform:translateY(-8px) rotate(4deg); }

/* ══════════════════════════════════════════════════════════════════
   WORK
   ══════════════════════════════════════════════════════════════════ */
.section--work{ background:linear-gradient(180deg, transparent, rgba(124,92,255,.04) 40%, transparent); }
.cases{ display:grid; gap:clamp(18px,2.4vw,28px); }
.case__core{ display:grid; grid-template-columns:.95fr 1.05fr; }
.case--flip .case__core{ direction:rtl; }
.case--flip .case__core > *{ direction:ltr; }

.case__art{
  position:relative; min-height:340px; overflow:hidden;
  border-radius:calc(var(--r-in) - 1px);
  background:#0D0D12;
}
.art__mesh{ position:absolute; inset:0; opacity:.9; }
.case__art--a .art__mesh{ background:radial-gradient(90% 80% at 20% 10%, rgba(124,92,255,.5), transparent 60%), radial-gradient(70% 70% at 90% 90%, rgba(61,220,151,.3), transparent 60%); }
.case__art--b .art__mesh{ background:radial-gradient(80% 80% at 80% 15%, rgba(61,220,151,.42), transparent 60%), radial-gradient(70% 70% at 10% 90%, rgba(124,92,255,.4), transparent 60%); }
.case__art--c .art__mesh{ background:radial-gradient(85% 85% at 50% 0%, rgba(255,184,107,.38), transparent 62%), radial-gradient(70% 70% at 20% 100%, rgba(124,92,255,.45), transparent 60%); }
.case__art::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
}

.art__ui{
  position:absolute; inset:auto 26px 26px 26px;
  padding:20px; border-radius:20px;
  background:rgba(10,10,14,.66);
  box-shadow:inset 0 0 0 1px var(--line-hi);
  transition:transform .9s var(--e-expo);
}
.case:hover .art__ui{ transform:translateY(-8px); }
.art__row{ display:block; height:8px; width:var(--w); border-radius:99px; background:rgba(255,255,255,.16); margin-bottom:10px; }
.art__bars{ display:flex; align-items:end; gap:8px; height:74px; margin-top:16px; }
.art__bars i{
  flex:1; height:var(--h); border-radius:6px;
  background:linear-gradient(180deg, var(--violet), rgba(61,220,151,.35));
  transform-origin:50% 100%; transform:scaleY(.4);
  transition:transform .9s var(--e-expo);
}
.case.is-in .art__bars i{ transform:scaleY(1); }
.case.is-in .art__bars i:nth-child(2){ transition-delay:.06s }
.case.is-in .art__bars i:nth-child(3){ transition-delay:.12s }
.case.is-in .art__bars i:nth-child(4){ transition-delay:.18s }
.case.is-in .art__bars i:nth-child(5){ transition-delay:.24s }

.art__chat{ position:absolute; inset:auto 26px 26px 26px; display:grid; gap:10px; justify-items:start; }
.bub{
  max-width:78%; padding:11px 15px; border-radius:16px; font-size:12.5px;
  background:rgba(10,10,14,.7); color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--line-hi);
  transition:transform .8s var(--e-expo);
}
.bub--out{ justify-self:end; background:rgba(124,92,255,.3); color:#fff; }
.bub--thin{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; background:rgba(10,10,14,.7); color:var(--mint); }
.case:hover .bub--in{ transform:translateX(6px); }
.case:hover .bub--out{ transform:translateX(-6px); }

.art__type{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:8px; }
.art__type span{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(38px,4.4vw,58px); letter-spacing:-.04em;
  transition:letter-spacing .9s var(--e-expo);
}
.case:hover .art__type span{ letter-spacing:.02em; }
.art__type em{ font-family:var(--f-mono); font-style:normal; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.6); }

.case__meta{ padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; gap:18px; justify-content:center; }
.case__head h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(23px,2.6vw,34px); line-height:1.1; letter-spacing:-.032em;
  margin-top:10px;
}
.case__meta > p{ color:var(--ink-soft); font-size:15px; max-width:48ch; }
.case__kpi{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,40px); padding-top:6px; }
.case__kpi b{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(21px,2.2vw,28px); letter-spacing:-.03em;
  background:linear-gradient(100deg,#fff,var(--violet));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.case__kpi span{ font-size:11.5px; color:var(--ink-mute); }
.case .link{ align-self:start; margin-top:6px; }

/* ══════════════════════════════════════════════════════════════════
   PROCESS
   ══════════════════════════════════════════════════════════════════ */
.process{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:start; }
.process__sticky{ position:sticky; top:130px; }
.process__sticky .btn{ margin-top:30px; }
.steps{ display:grid; gap:14px; }
.step__core{ display:flex; gap:clamp(18px,2.4vw,30px); padding:clamp(24px,2.8vw,34px); }
.step__n{
  font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3vw,38px);
  line-height:1; letter-spacing:-.04em; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.28);
  flex:none; padding-top:2px;
  transition:-webkit-text-stroke-color .7s var(--e-spring), color .7s var(--e-spring);
}
.step:hover .step__n{ color:var(--violet); -webkit-text-stroke-color:transparent; }
.step h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2vw,25px); letter-spacing:-.03em; margin-bottom:10px; }
.step p{ color:var(--ink-soft); font-size:14.5px; max-width:52ch; }
.step__meta{
  display:flex; align-items:center; gap:12px; margin-top:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
}
.step__meta i{ flex:1; max-width:40px; height:1px; background:var(--line-hi); }

/* ══════════════════════════════════════════════════════════════════
   STUDIO
   ══════════════════════════════════════════════════════════════════ */
.studio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.values{ display:grid; gap:2px; margin-top:38px; }
.values li{
  display:grid; gap:6px; padding:20px 0;
  border-top:1px solid var(--line);
  transition:padding-left .7s var(--e-spring);
}
.values li:hover{ padding-left:12px; }
.values b{ font-family:var(--f-display); font-weight:500; font-size:17px; letter-spacing:-.02em; }
.values span{ color:var(--ink-mute); font-size:14px; }

.studio__panels{ display:grid; gap:16px; }
.quote__core{ padding:clamp(26px,3vw,38px); }
.quote__mark{
  display:block; font-family:var(--f-display); font-size:70px; line-height:.6;
  color:var(--violet); opacity:.5; margin-bottom:14px;
}
.quote blockquote{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(18px,2vw,24px); line-height:1.32; letter-spacing:-.028em;
}
.quote figcaption{ display:flex; align-items:center; gap:13px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.avatar{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:99px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(150deg, rgba(124,92,255,.5), rgba(61,220,151,.25));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.quote figcaption b{ display:block; font-size:14px; }
.quote figcaption em{ font-style:normal; font-size:12px; color:var(--ink-mute); }

.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fact{
  padding:24px; border-radius:22px;
  background:rgba(255,255,255,.026);
  box-shadow:inset 0 0 0 1px var(--line), var(--inner-hi);
  transition:transform .7s var(--e-spring), background-color .7s var(--e-spring);
}
.fact:hover{ transform:translateY(-4px); background:rgba(255,255,255,.05); }
.fact b{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(26px,3vw,36px); line-height:1; letter-spacing:-.03em; margin-bottom:8px;
}
.fact span{ font-size:12.5px; color:var(--ink-mute); }

/* ══════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════ */
.section--contact{ position:relative; overflow:hidden; }
.contact__aurora{ position:absolute; inset:0; pointer-events:none; }
.contact__aurora span{ position:absolute; border-radius:50%; filter:blur(100px); }
.contact__aurora span:first-child{
  width:44vw; height:44vw; max-width:640px; max-height:640px; top:-10%; right:-8%;
  background:radial-gradient(circle, rgba(124,92,255,.5), transparent 65%);
  animation:drift2 24s var(--e-swift) infinite alternate;
}
.contact__aurora span:last-child{
  width:32vw; height:32vw; max-width:440px; max-height:440px; bottom:-12%; left:-6%;
  background:radial-gradient(circle, rgba(61,220,151,.35), transparent 65%);
  animation:drift1 28s var(--e-swift) infinite alternate;
}
.contact{ position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.contact__list{ display:grid; gap:2px; margin-top:38px; }
.contact__list li{ display:flex; gap:20px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line); }
.contact__list em{
  font-family:var(--f-mono); font-style:normal; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  min-width:100px;
}
.contact__list a,.contact__list span{ font-size:16px; letter-spacing:-.015em; }
.contact__list a{ transition:color .5s var(--e-spring); }
.contact__list a:hover{ color:var(--mint); }

.bezel--form{ --r-out:34px; --r-in:calc(34px - 7px); }
.form{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:clamp(24px,3vw,34px);
}
.field{ grid-column:span 2; display:grid; gap:8px; }
.field--half{ grid-column:span 1; }
.field--full{ grid-column:span 2; }
.field label{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.field input,.field textarea,.field select{
  width:100%; padding:14px 16px;
  border:0; border-radius:16px;
  background:rgba(255,255,255,.032);
  box-shadow:inset 0 0 0 1px var(--line), var(--inner-hi);
  font-size:14.5px; letter-spacing:-.01em;
  transition:box-shadow .55s var(--e-spring), background-color .55s var(--e-spring);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-mute); opacity:.7; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.6), 0 0 0 4px rgba(124,92,255,.12);
}
.field input.is-bad,.field textarea.is-bad{ box-shadow:inset 0 0 0 1px rgba(255,110,110,.6); }

.select{ position:relative; }
.select select{ appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer; }
.select select option{ background:#101015; color:var(--ink); }
.select i{
  position:absolute; right:17px; top:50%; width:8px; height:8px; pointer-events:none;
  border-right:1.4px solid var(--ink-mute); border-bottom:1.4px solid var(--ink-mute);
  transform:translateY(-70%) rotate(45deg);
}

.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  padding:9px 15px; border:0; border-radius:99px; cursor:pointer;
  font-size:13px; color:var(--ink-soft);
  background:rgba(255,255,255,.032);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--e-spring), background-color .5s var(--e-spring),
             color .5s var(--e-spring), box-shadow .5s var(--e-spring);
}
.pill:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
.pill:active{ transform:scale(.96); }
.pill.is-on{
  color:#08080A; background:#F4F4F6;
  box-shadow:inset 0 0 0 1px transparent, 0 8px 22px -10px rgba(124,92,255,.7);
}

/* honeypot — off-screen rather than display:none, which some bots detect */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form .btn--block{ grid-column:span 2; margin-top:6px; }
.form__fine{ grid-column:span 2; font-size:11.5px; color:var(--ink-mute); text-align:center; }
.form__err{
  grid-column:span 2; margin:0; font-size:12.5px; color:#FF8A8A;
  padding:10px 14px; border-radius:12px; background:rgba(255,110,110,.08);
  box-shadow:inset 0 0 0 1px rgba(255,110,110,.22);
}

.form__done{
  position:absolute; inset:0; z-index:3;
  display:grid; place-content:center; justify-items:center; gap:12px; text-align:center;
  padding:34px; border-radius:var(--r-in);
  background:rgba(9,9,12,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  animation:doneIn .7s var(--e-expo);
}
@keyframes doneIn{ from{ opacity:0; transform:scale(.98); } }
.form__tick{
  display:grid; place-items:center; width:56px; height:56px; border-radius:99px;
  color:var(--mint); background:rgba(61,220,151,.14);
  box-shadow:inset 0 0 0 1px rgba(61,220,151,.35);
}
.form__tick svg{ width:26px; height:26px; }
.form__done h3{ font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:-.03em; }
.form__done p{ color:var(--ink-soft); font-size:14px; max-width:38ch; }
.form__done a{ color:var(--mint); }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
.footer{ position:relative; z-index:2; padding-top:clamp(70px,9vw,120px); border-top:1px solid var(--line); }
.footer__top{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px); }
.footer__brand p{ color:var(--ink-mute); font-size:14.5px; max-width:38ch; margin-top:18px; }
.brand--lg{ font-size:18px; }
.brand--lg .brand__glyph{ width:36px; height:36px; border-radius:12px; }
.brand--lg .brand__glyph svg{ width:22px; height:22px; }
.footer__social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.footer__social a{
  padding:9px 16px; border-radius:99px; font-size:13px; color:var(--ink-soft);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .55s var(--e-spring), background-color .55s var(--e-spring), color .55s var(--e-spring);
}
.footer__social a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); color:var(--ink); }

.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.footer__cols > div{ display:grid; gap:11px; align-content:start; }
.footer__cols .micro{ margin-bottom:4px; }
.footer__cols a,.footer__cols span{ font-size:14px; color:var(--ink-soft); }
.footer__cols a{ width:max-content; transition:color .5s var(--e-spring), transform .5s var(--e-spring); }
.footer__cols a:hover{ color:var(--ink); transform:translateX(3px); }

.footer__wordmark{
  margin-top:clamp(50px,7vw,90px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%);
  mask-image:linear-gradient(180deg,#000,transparent 92%);
}
.footer__wordmark span{
  display:block; text-align:center;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(64px,17.5vw,250px); line-height:.82; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent);
  -webkit-background-clip:text; background-clip:text;
}
.footer__base{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding:26px 0 34px; margin-top:14px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-mute);
}
.footer__base i{ font-style:normal; padding-inline:10px; opacity:.4; }
.footer__base a:hover{ color:var(--ink); }

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEALS (GPU-only)
   ══════════════════════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translate3d(0,42px,0);
  filter:blur(8px);
  transition:opacity .95s var(--e-expo), transform .95s var(--e-expo), filter .95s var(--e-expo);
}
.reveal.is-in{ opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
.reveal[data-d="1"]{ transition-delay:.09s } .reveal[data-d="2"]{ transition-delay:.18s }
.reveal[data-d="3"]{ transition-delay:.27s } .reveal[data-d="4"]{ transition-delay:.36s }
.reveal[data-d="5"]{ transition-delay:.45s } .reveal[data-d="6"]{ transition-delay:.54s }
.reveal[data-d="7"]{ transition-delay:.63s }

/* magnetic wrapper */
.magnetic{ will-change:transform; }

/* ══════════════════════════════════════════════════════════════════
   PAGE TRANSITION — a wipe between internal pages
   ══════════════════════════════════════════════════════════════════ */
.wipe{
  position:fixed; inset:0; z-index:95; pointer-events:none;
  background:linear-gradient(180deg,#0A0A0F,#050505);
  transform:translate3d(0,100%,0);
  transition:transform .62s var(--e-expo);
}
.wipe.is-out{ transform:translate3d(0,0,0); }

/* ══════════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════════════════ */
.phero{
  position:relative; z-index:2; overflow:hidden;
  padding:clamp(150px,17vw,220px) 0 clamp(56px,7vw,86px);
}
.phero__aurora{ position:absolute; inset:0; pointer-events:none; }
.phero__aurora span{ position:absolute; border-radius:50%; filter:blur(95px); }
.phero__aurora span:first-child{
  width:46vw; height:46vw; max-width:620px; max-height:620px; top:-22%; left:-6%;
  background:radial-gradient(circle, rgba(124,92,255,.62), transparent 66%);
  animation:drift1 24s var(--e-swift) infinite alternate;
}
.phero__aurora span:last-child{
  width:32vw; height:32vw; max-width:430px; max-height:430px; top:8%; right:-6%;
  background:radial-gradient(circle, rgba(61,220,151,.34), transparent 66%);
  animation:drift3 30s var(--e-swift) infinite alternate;
}
.phero__inner{ position:relative; z-index:2; display:grid; gap:clamp(28px,4vw,60px); grid-template-columns:1.25fr .75fr; align-items:end; }
.phero__title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(42px,6.6vw,88px); line-height:.94; letter-spacing:-.042em;
}
.phero__note{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,17.5px); max-width:46ch; }
.crumb{ display:flex; align-items:center; gap:9px; margin-bottom:24px; }
.crumb a,.crumb span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.crumb a:hover{ color:var(--ink); }
.crumb i{ font-style:normal; color:var(--violet); font-size:9px; }

/* ══════════════════════════════════════════════════════════════════
   SERVICE DEEP-DIVE ROWS
   ══════════════════════════════════════════════════════════════════ */
.svc{ display:grid; gap:clamp(16px,2vw,22px); }
.svc__row{ scroll-margin-top:120px; }
.svc__core{ display:grid; grid-template-columns:.42fr .58fr; }
.svc__lead{
  padding:clamp(28px,3.2vw,42px);
  border-right:1px solid var(--line);
  background:linear-gradient(160deg, rgba(124,92,255,.09), transparent 60%);
}
.svc__head h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(24px,2.8vw,36px); line-height:1.06; letter-spacing:-.034em;
  margin:14px 0 14px;
}
.svc__lead > p{ color:var(--ink-soft); font-size:14.5px; }
.svc__body{ padding:clamp(28px,3.2vw,42px); display:grid; gap:26px; align-content:start; }
.svc__list{ display:grid; gap:1px; }
.svc__list li{
  display:flex; gap:14px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-soft);
  font-size:14.5px; color:var(--ink-soft);
  transition:padding-left .6s var(--e-spring), color .6s var(--e-spring);
}
.svc__list li:hover{ padding-left:10px; color:var(--ink); }
.svc__list li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:.5em;
  border-radius:99px; background:var(--violet);
  box-shadow:0 0 0 3px rgba(124,92,255,.15);
}
.svc__foot{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding-top:6px; }
.svc__price{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.svc__price b{ display:block; margin-top:6px; font-family:var(--f-display); font-size:19px; letter-spacing:-.02em; color:var(--ink); text-transform:none; }

/* ══════════════════════════════════════════════════════════════════
   STACK GRID
   ══════════════════════════════════════════════════════════════════ */
.stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stack__item{
  padding:20px; border-radius:20px;
  background:rgba(255,255,255,.026);
  box-shadow:inset 0 0 0 1px var(--line), var(--inner-hi);
  transition:transform .6s var(--e-spring), background-color .6s var(--e-spring);
}
.stack__item:hover{ transform:translateY(-4px); background:rgba(255,255,255,.055); }
.stack__item em{ display:block; font-family:var(--f-mono); font-style:normal; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:9px; }
.stack__item span{ display:block; font-size:14px; color:var(--ink-soft); line-height:1.9; }

/* ══════════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════════════════════ */
.faq{ display:grid; gap:2px; }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; gap:20px; justify-content:space-between;
  padding:24px 0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(17px,1.8vw,21px); letter-spacing:-.026em; color:var(--ink);
  transition:padding-left .6s var(--e-spring), color .6s var(--e-spring);
}
.faq__q:hover{ padding-left:10px; }
.faq__sign{
  position:relative; flex:none; width:32px; height:32px; border-radius:99px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .6s var(--e-spring), background-color .6s var(--e-spring);
}
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; top:50%; left:50%; width:12px; height:1.5px;
  border-radius:2px; background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .6s var(--e-spring), opacity .4s var(--e-swift);
}
.faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__sign{ background:rgba(124,92,255,.28); transform:rotate(180deg); }
.faq__item.is-open .faq__sign::after{ opacity:0; }
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .65s var(--e-expo);
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  padding-bottom:26px; max-width:64ch;
  color:var(--ink-soft); font-size:14.5px;
  opacity:0; transform:translateY(-8px);
  transition:opacity .5s var(--e-swift) .1s, transform .5s var(--e-expo) .1s;
}
.faq__item.is-open .faq__a p{ opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════════════════════════ */
.timeline{ display:grid; gap:0; }
.tl{ display:grid; grid-template-columns:120px 1fr; gap:clamp(18px,3vw,40px); padding:26px 0; border-top:1px solid var(--line); }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl__when{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--violet); padding-top:5px; }
.tl h3{ font-family:var(--f-display); font-weight:500; font-size:clamp(18px,2vw,23px); letter-spacing:-.026em; margin-bottom:8px; }
.tl p{ color:var(--ink-soft); font-size:14.5px; max-width:58ch; }

/* ══════════════════════════════════════════════════════════════════
   TEAM
   ══════════════════════════════════════════════════════════════════ */
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
/* two-up: keep the cards from stretching into billboards */
.team--duo{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; }
.team__core{ padding:clamp(22px,2.4vw,30px); display:grid; gap:16px; align-content:start; }
.team__face{
  width:100%; aspect-ratio:1/1; border-radius:20px;
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; font-size:34px; letter-spacing:-.03em;
  background:linear-gradient(155deg, rgba(124,92,255,.4), rgba(61,220,151,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .7s var(--e-spring);
}
.team__core:hover .team__face{ transform:scale(1.02) rotate(-1.5deg); }
.team h3{ font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.026em; }
.team em{ display:block; font-style:normal; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--violet); margin-top:6px; }
.team p{ color:var(--ink-mute); font-size:13.5px; }

/* ══════════════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════════════ */
.band{ position:relative; z-index:2; padding-block:clamp(70px,9vw,110px); }
.band__core{
  position:relative; overflow:hidden;
  padding:clamp(40px,6vw,80px) clamp(26px,4vw,64px);
  display:grid; gap:26px; justify-items:center; text-align:center;
}
.band__glow{
  position:absolute; inset:-40% -10% auto -10%; height:160%;
  background:radial-gradient(50% 50% at 50% 40%, rgba(124,92,255,.42), transparent 68%);
  pointer-events:none;
}
.band h2{
  position:relative;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(32px,5vw,64px); line-height:1; letter-spacing:-.038em;
  word-spacing:.07em; max-width:16ch;
}
.band p{ position:relative; color:var(--ink-soft); font-size:15.5px; max-width:52ch; }
.band__actions{ position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════
   PREVIEW GRID (home → work teaser cards)
   ══════════════════════════════════════════════════════════════════ */
.nav__links a.is-here{ color:var(--ink); background:rgba(255,255,255,.06); }
.nav__links a.is-here::after{ transform:scaleX(1); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .hero__shell{ grid-template-columns:1fr; }
  .hero__panel{ max-width:560px; }
  .bezel--console{ transform:none; }
  .process{ grid-template-columns:1fr; }
  .process__sticky{ position:static; }
  .studio{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .head--split{ grid-template-columns:1fr; align-items:start; }
  .footer__top{ grid-template-columns:1fr; }
  .phero__inner{ grid-template-columns:1fr; align-items:start; }
  .svc__core{ grid-template-columns:1fr; }
  .svc__lead{ border-right:0; border-bottom:1px solid var(--line); }
}

@media (max-width:900px){
  .bento__cell,
  .bento__cell--wide,
  .bento__cell--tall,
  .bento__cell--full{ grid-column:span 12; grid-row:auto; }
  .case__core{ grid-template-columns:1fr; }
  .case--flip .case__core{ direction:ltr; }
  .case__art{ min-height:260px; }
}

@media (max-width:768px){
  :root{ --r-out:26px; --r-in:calc(26px - 6px); --pad-bezel:6px; --sec-y:80px; }
  .nav{ padding:14px 16px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__pill{ width:100%; justify-content:space-between; padding:7px 7px 7px 14px; }
  .burger{ display:grid; position:relative; }
  .hero{ padding-block:130px 70px; }
  .hero__panel{ max-width:none; }
  .card--row{ flex-direction:column; align-items:flex-start; }
  .swatches i{ width:44px; height:64px; }
  .factgrid{ grid-template-columns:1fr 1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .step__core{ flex-direction:column; gap:14px; }
  .form{ grid-template-columns:1fr; }
  .field,.field--half,.field--full,.form .btn--block,.form__fine,.form__err{ grid-column:span 1; }
  .contact__list li{ flex-direction:column; gap:5px; }
  .footer__base{ justify-content:flex-start; }
  .tl{ grid-template-columns:1fr; gap:10px; }
  .team--duo{ grid-template-columns:1fr; }
  .svc__foot{ flex-direction:column; align-items:flex-start; }
  .band__core{ justify-items:start; text-align:left; }
  .band__actions{ justify-content:flex-start; }
}

@media (max-width:520px){
  .hero__stats{ gap:20px; }
  .hero__stats > div{ min-width:calc(50% - 10px); }
  .brand__dim{ display:none; }
  .factgrid{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  .hero__title .line__in{ transform:none; }
  .track i{ transform:scaleX(1); }
  .ticker__row{ animation:none; }
  .curtain{ display:none; }
}