:root {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --bg:#04060F; --bg2:#080C18; --sur:#101624; --sur2:#161E30; --sur3:#1E2840;
  --fg:#EDF0FF; --muted:#7A85A8; --muted2:#4A5270;
  --c1:#00E5FF; --c2:#7C3AED; --c3:#FF6B35; --gold:#F5C518; --ok:#22C55E;
  --hairline:rgba(0,229,255,.14); --hairline2:rgba(255,255,255,.07);
  --glow:0 0 60px rgba(0,229,255,.18);
  --accent-ink:#04060F;
  --dur-fast:150ms; --dur-base:280ms; --dur-slow:700ms;
  --ease:cubic-bezier(.16,1,.3,1);
  /* aliases for existing component classes (pre-restyle) */
  --ink:var(--fg); --accent:var(--c1); --accent-soft:rgba(0,229,255,.12);
  --bg-raised:var(--sur); --bg-sunken:var(--bg2); --hairline-strong:var(--hairline);
}
:root[data-theme="light"]{
  --bg:#F7F9FC; --bg2:#FFFFFF; --sur:#EEF2F8; --sur2:#E4EAF3; --sur3:#D8E0EE;
  --fg:#0C1220; --muted:#5B657E; --muted2:#8A93A8;
  --c1:#0095B3; --c2:#7C3AED; --c3:#FF6B35; --gold:#C99700; --ok:#16A34A;
  --hairline:rgba(0,0,0,.10); --hairline2:rgba(0,0,0,.06);
  --glow:0 0 40px rgba(0,149,179,.16);
  --accent-ink:#FFFFFF;
  --ink:var(--fg); --accent:var(--c1); --accent-soft:rgba(0,149,179,.12);
  --bg-raised:var(--sur); --bg-sunken:var(--bg2); --hairline-strong:var(--hairline);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F7F9FC; --bg2:#FFFFFF; --sur:#EEF2F8; --sur2:#E4EAF3; --sur3:#D8E0EE;
    --fg:#0C1220; --muted:#5B657E; --muted2:#8A93A8;
    --c1:#0095B3; --c2:#7C3AED; --c3:#FF6B35; --gold:#C99700; --ok:#16A34A;
    --hairline:rgba(0,0,0,.10); --hairline2:rgba(0,0,0,.06);
    --glow:0 0 40px rgba(0,149,179,.16);
    --accent-ink:#FFFFFF;
    --ink:var(--fg); --accent:var(--c1); --accent-soft:rgba(0,149,179,.12);
    --bg-raised:var(--sur); --bg-sunken:var(--bg2); --hairline-strong:var(--hairline);
  }
}

body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E")}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:var(--font-body),sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:500;
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}

.container{max-width:1280px;margin:0 auto;padding:0 6%}
.eyebrow{font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.reveal{opacity:0;transform:translateY(28px);filter:blur(8px)}
@media (prefers-reduced-motion:no-preference){
  .reveal{transition:opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease),filter var(--dur-slow) var(--ease);
    will-change:opacity,transform,filter}
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:no-preference){
  .valuecard.reveal,.statplate.reveal,.pgrid__card.reveal{
    transition-delay:calc(var(--stagger-i,0) * 70ms)}
}

.display-xl{font-family:var(--font-display),sans-serif;font-weight:800;
  font-size:clamp(56px,7vw,104px);line-height:.98;letter-spacing:-.03em}
.display-l{font-family:var(--font-display),sans-serif;font-weight:800;
  font-size:clamp(32px,4vw,56px);line-height:1.04;letter-spacing:-.025em}
.title{font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-.015em}
.label{font-family:var(--font-mono),monospace;font-size:11px;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media (min-width:768px){
  .label{font-size:12px}
}

/* Vertical padding is trimmed to 10px because the logo is now 72px tall: at
   the old 20px the sticky bar stood 112px and ate a chunk of every scroll.
   The bar itself is a translucent glass plate (backdrop-filter) rather than
   a solid fill, so page content is faintly visible through it as it scrolls
   underneath -- background is a low-opacity tint, never fully transparent,
   so nav text/controls keep contrast over busy sections. Chrome/Safari need
   the -webkit- prefix; there's no unprefixed-only fallback because every
   evergreen browser that matters supports one form or the other. */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:10px 6% 10px 4%;
  background:transparent;
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.07);
  box-shadow:none}
:root[data-theme="light"] .nav{
  background:transparent;
  border-bottom:1px solid rgba(0,0,0,0.06);
  box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .nav{transition:border-color var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.nav--scrolled{border-bottom-color:rgba(0,229,255,0.18);
  background:transparent;
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 1px 0 rgba(0,229,255,0.12)}
:root[data-theme="light"] .nav--scrolled{
  background:transparent;
  border-bottom-color:rgba(0,0,0,0.10);
  box-shadow:0 1px 0 rgba(0,0,0,0.06)}
/* Pulled in from the section's own edge (padding-left above is tighter than
   the nav's right side, and the mark itself is a touch smaller) so the logo
   sits closer to the header's leading edge instead of lining up with the
   body copy grid below it. */
.nav__logo{position:relative;display:inline-flex;align-items:center;line-height:0}
.nav__logo img{position:relative;z-index:1;width:auto;height:60px;object-fit:contain}
/* Intro sequence: once the loader dismisses, SiteScripts adds "in" here first
   (the mark slides down into place)... */
@media (prefers-reduced-motion:no-preference){
  .nav__logo{opacity:0;transform:translateY(-26px);
    transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
  .nav__logo.in{opacity:1;transform:none}
}
/* ...then "in" here a beat later (a slow ambient glow behind the mark, top-left
   of the page). Sits behind the logo image (z-index:0 vs the img's 1), same
   radial-gradient language as .loader__glow. */
.nav__logo-glow{position:absolute;inset:-22px;z-index:0;border-radius:999px;
  pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .nav__logo-glow{opacity:0;transition:opacity 2200ms var(--ease)}
  .nav__logo-glow.in{opacity:1;animation:loader-pulse 3.2s var(--ease) 2200ms infinite}
}
.nav__actions{display:flex;align-items:center;gap:16px}

.slidetabs{position:relative;list-style:none;display:none;align-items:center;
  gap:2px;width:fit-content;padding:4px;border-radius:999px;
  border:1px solid var(--hairline)}
@media (min-width:1024px){
  .slidetabs{display:flex}
}
.slidetabs__tab{position:relative;z-index:10}
.slidetabs__link{display:block;padding:8px 12px;font-family:var(--font-mono),monospace;
  font-size:11px;letter-spacing:.06em;font-weight:600;color:var(--muted);text-decoration:none;
  white-space:nowrap}
@media (min-width:1280px){
  .slidetabs__link{padding:8px 16px;font-size:12px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:no-preference){
  .slidetabs__link{transition:color var(--dur-fast) var(--ease),
    text-shadow var(--dur-fast) var(--ease)}
}
.slidetabs__tab:hover .slidetabs__link,
.slidetabs__tab--selected .slidetabs__link{color:var(--accent-ink);
  text-shadow:0 0 12px rgba(0,229,255,.6)}
.slidetabs__cursor{position:absolute;z-index:0;top:4px;height:calc(100% - 8px);
  border-radius:999px;background:var(--c1);
  box-shadow:0 0 22px rgba(0,229,255,.65),0 0 44px rgba(0,229,255,.3),
    inset 0 0 10px rgba(255,255,255,.25)}
@media (prefers-reduced-motion:no-preference){
  .slidetabs__cursor{transition:left 420ms var(--ease),width 420ms var(--ease),
    opacity var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
}
.nav__toggle{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--hairline);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .nav__toggle{transition:border-color var(--dur-fast) var(--ease)}
}
.nav__toggle:hover{border-color:var(--hairline-strong)}
.nav__toggle .i-moon{display:none}
:root[data-theme="dark"] .nav__toggle .i-sun{display:none}
:root[data-theme="dark"] .nav__toggle .i-moon{display:block}
.nav__cta{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono),monospace;font-size:12px;letter-spacing:.06em;
  color:var(--accent-ink);background:var(--accent);border-radius:999px;
  padding:10px 18px;text-decoration:none;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .nav__cta{transition:opacity var(--dur-fast) var(--ease)}
}
.nav__cta:hover{opacity:.88}

.loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;background:var(--bg)}
@media (prefers-reduced-motion:no-preference){
  /* Dismissal is a slide, not a fade: the whole panel drops down and off
     the bottom of the viewport. visibility switches only once the slide has
     fully landed (0s duration, delayed by the same time as the transform)
     so the loader can't be tabbed to or clicked through mid-slide. */
  .loader{transition:transform var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow)}
}
.loader.out{transform:translateY(100%);visibility:hidden;pointer-events:none}
.loader__mark{position:relative;display:flex;align-items:center;justify-content:center}
.loader__glow{position:absolute;inset:-28px;border-radius:999px;z-index:0;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .loader__glow{animation:loader-pulse 1.8s var(--ease) infinite}
  @keyframes loader-pulse{
    0%,100%{opacity:.55;transform:scale(1)}
    50%{opacity:1;transform:scale(1.12)}
  }
}
.loader__mark img{position:relative;z-index:1}
.loader__word{display:flex;gap:.14em;font-family:var(--font-display),sans-serif;
  font-weight:700;font-size:clamp(28px,6vw,44px);letter-spacing:.12em;
  color:var(--fg);line-height:1}
/* Resting state = the finished state. Reduced-motion users get exactly this
   and nothing animates; the keyframes below only ever run for everyone else. */
.loader__ch{display:inline-block}
.loader__ch:nth-child(4){color:var(--c1)}
@media (prefers-reduced-motion:no-preference){
  .loader__ch{opacity:0;transform:translateY(14px);
    /* 7 letters: last starts at 270ms, ends at 690ms -- inside the loader's
       own 900ms dismiss, so the word is never cut off mid-reveal. */
    animation:ld-ch 420ms var(--ease) forwards;
    animation-delay:calc(var(--i) * 45ms)}
  @keyframes ld-ch{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }
}
.loader-bar{width:160px;height:2px;background:var(--hairline);
  border-radius:2px;overflow:hidden}
.loader-fill{width:0%;height:100%;background:var(--accent)}
.loader__status{color:var(--muted2)}
.loader__status #ld-pct{color:var(--c1);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .loader-fill{transition:width .2s var(--ease)}
}

/* ---------- Post-loader ambient glow (Loader.tsx / SiteScripts.tsx) ----------
   A soft purple bloom seeded top-left -- at the header -- spreading down over
   roughly the first 30% of the page. Negative z-index: it sits behind normal
   in-flow content (hero copy, cards) so nothing needs to explicitly layer
   above it, and it shows straight through .nav's backdrop-filter glass since
   that sits above it with a positive z-index. Fades in right as the loader
   starts its slide-down dismissal (see the LOADER_OUT_MS timeout in
   SiteScripts.tsx, shared with the nav logo's own reveal timing). */
.page-glow{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;
  width:min(70vw,900px);height:30vh;
  background:radial-gradient(ellipse at top left,
    color-mix(in srgb,var(--c2) 45%,transparent),transparent 70%);
  filter:blur(70px);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .page-glow{transition:opacity 1400ms var(--ease)}
}
.page-glow.in{opacity:1}

.accent{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body),sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;border-radius:999px;padding:14px 24px;white-space:nowrap;
  position:relative}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:opacity var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease)}
  .btn:active{transform:scale(.96)}
}
.btn--primary{color:var(--accent-ink);background:var(--accent)}
.btn--primary:hover{opacity:1;box-shadow:0 0 28px rgba(0,229,255,.5),
  0 0 0 1px rgba(0,229,255,.35)}
.btn--ghost{color:var(--ink);background:transparent;border:1px solid var(--hairline)}
.btn--ghost:hover{border-color:var(--c1);color:var(--c1);
  box-shadow:0 0 20px rgba(0,229,255,.25)}

/* Same glow/press language, applied to the other interactive controls that
   were left with plain hovers -- nav CTA, poster modal CTA, theme toggle. */
@media (prefers-reduced-motion:no-preference){
  .nav__cta,.pmodal__cta,.nav__toggle,.pmodal__close,.pmodal__browser-open{
    transition:box-shadow var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease),
      background var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease)}
  .nav__cta:active,.pmodal__cta:active,.nav__toggle:active{transform:scale(.94)}
}
.nav__cta:hover{box-shadow:0 0 24px rgba(0,229,255,.45)}
.nav__toggle:hover{border-color:var(--c1);color:var(--c1);
  box-shadow:0 0 16px rgba(0,229,255,.3)}

.hero{position:relative;overflow:hidden;padding:calc(20px + 8vw) 0 64px}

.hero__blobs{position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}
.hero__blob--a{width:420px;height:420px;top:-120px;left:-80px;
  background:radial-gradient(circle,var(--c1),transparent 70%)}
.hero__blob--b{width:360px;height:360px;bottom:-140px;right:-60px;
  background:radial-gradient(circle,var(--accent),transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .hero__blob--a{animation:hero-blob-a 16s ease-in-out infinite}
  .hero__blob--b{animation:hero-blob-b 18s ease-in-out infinite}
}
@keyframes hero-blob-a{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,40px) scale(1.15)}
}
@keyframes hero-blob-b{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-50px,-30px) scale(1.1)}
}
.hero::before,.hero::after{content:'';position:absolute;z-index:0;
  border-radius:999px;pointer-events:none;filter:blur(10px)}
.hero::before{top:-10%;left:-8%;width:52vw;height:52vw;max-width:640px;max-height:640px;
  background:radial-gradient(closest-side,rgba(0,229,255,.16),transparent 72%)}
.hero::after{bottom:-18%;right:-10%;width:46vw;height:46vw;max-width:560px;max-height:560px;
  background:radial-gradient(closest-side,rgba(124,58,237,.15),transparent 72%)}
.hero__wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr;
  gap:48px;align-items:center}
@media (min-width:900px){
  .hero__wrap{grid-template-columns:1fr 520px;gap:40px}
}
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:28px}
.hero__badge{display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--hairline);border-radius:999px;padding:8px 16px}
.hero__title{color:var(--ink)}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line span{display:inline-block;transform:translateY(110%)}
@media (prefers-reduced-motion:no-preference){
  .hero__title .line span{transition:transform var(--dur-slow) var(--ease)}
}
.hero__title .line span.vis{transform:none}
@media (prefers-reduced-motion:reduce){
  .hero__title .line span{transform:none}
}

/* ---- Empire hero title: bold editorial type system ---- */
.hero__title--empire{color:var(--ink);margin-bottom:0}
.hero__title--empire .line{display:block;overflow:hidden;line-height:0.9}
.hero__title--empire .line span{display:inline-block;transform:translateY(110%)}
@media (prefers-reduced-motion:no-preference){
  .hero__title--empire .line span{transition:transform var(--dur-slow) var(--ease)}
}
.hero__title--empire .line span.vis{transform:none}
@media (prefers-reduced-motion:reduce){
  .hero__title--empire .line span{transform:none}
}
.ht-we{
  font-family:'Oswald','Bebas Neue',var(--font-display),sans-serif;
  font-weight:700;
  font-size:clamp(36px,5vw,72px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1;
}
.ht-brands{
  font-family:'Bebas Neue','Oswald',var(--font-display),sans-serif;
  font-weight:400;
  font-size:clamp(80px,10.5vw,148px);
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:0.88;
  -webkit-text-stroke:1px rgba(0,229,255,0.25);
  text-stroke:1px rgba(0,229,255,0.25);
}
.ht-empires{
  font-family:'Bebas Neue','Oswald',var(--font-display),sans-serif;
  font-weight:400;
  font-size:clamp(80px,10.5vw,148px);
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--gold);
  line-height:0.88;
  text-shadow:0 0 40px rgba(245,197,24,0.45),0 0 80px rgba(245,197,24,0.2);
  -webkit-text-stroke:1px rgba(245,197,24,0.35);
  text-stroke:1px rgba(245,197,24,0.35);
}
:root[data-theme="light"] .ht-brands{
  -webkit-text-stroke:1px rgba(0,149,179,0.2);
  text-stroke:1px rgba(0,149,179,0.2);
}

.hero__lead{max-width:46ch;color:var(--muted);font-size:18px}
.hero__btns{display:flex;flex-wrap:wrap;gap:16px}
.hero__stats{display:flex;flex-wrap:wrap;gap:0;width:100%;
  border-top:1px solid var(--hairline);padding-top:24px;margin-top:12px}
.hero__stat{flex:1 1 auto;padding:0 24px 0 0;margin-right:24px;
  border-right:1px solid var(--hairline)}
.hero__stat:last-child{border-right:none;margin-right:0;padding-right:0}
.hero__stat-num{font-family:var(--font-mono),monospace;font-weight:500;
  font-size:clamp(22px,2.4vw,32px);color:var(--ink);letter-spacing:-.01em}
.hero__stat-lab{margin-top:4px}

#hero-grid{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}
.grid-line{stroke:var(--hairline);stroke-width:1}
.grid-plot{stroke:var(--accent);stroke-width:1.5;fill:none}
@media (prefers-reduced-motion:no-preference){
  .grid-line{stroke-dasharray:1400;stroke-dashoffset:1400;
    animation:grid-draw var(--dur-slow) var(--ease) forwards}
  .grid-plot{stroke-dasharray:500;stroke-dashoffset:500;
    animation:grid-draw 1.1s var(--ease) .2s forwards}
  @keyframes grid-draw{to{stroke-dashoffset:0}}
}

.marquee{overflow:hidden;background:var(--sur);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:18px 0}
.marquee__track{display:flex;width:max-content;flex-wrap:nowrap;
  gap:0;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .marquee__track{animation:marquee-scroll 32s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
  @keyframes marquee-scroll{to{transform:translateX(-50%)}}
}
.marquee__item{display:inline-flex;align-items:center;gap:20px;
  font-family:var(--font-mono),monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:0 20px}
.marquee__dot{width:5px;height:5px;border-radius:999px;background:var(--c1);
  box-shadow:0 0 8px var(--c1);flex:none}

.about{padding:96px 0}
.about__grid{display:grid;grid-template-columns:1fr;gap:56px}
@media (min-width:1024px){
  .about__grid{grid-template-columns:1.1fr .9fr;gap:80px}
}
.about__title{margin-top:16px;color:var(--ink)}
.about__lead{margin-top:20px;max-width:52ch;color:var(--muted);font-size:17px}
.about__cards{display:grid;grid-template-columns:1fr;gap:1px;
  margin-top:40px;background:var(--hairline)}
@media (min-width:640px){
  .about__cards{grid-template-columns:1fr 1fr}
}
.valuecard{position:relative;background:var(--sur);border:1px solid transparent;
  padding:28px 24px}
@media (prefers-reduced-motion:no-preference){
  .valuecard{transition:background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
}
.valuecard:hover{background:var(--sur2);border-color:var(--hairline);box-shadow:var(--glow)}
.valuecard__icon{position:relative;z-index:1;color:var(--c1)}
.valuecard__index{position:relative;z-index:1;margin-top:18px;color:var(--muted2)}
.valuecard__title{position:relative;z-index:1;margin-top:10px;
  font-family:var(--font-display),sans-serif;
  font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--fg)}
.valuecard__desc{position:relative;z-index:1;margin-top:8px;color:var(--muted);
  font-size:14px;line-height:1.55}

.about__col--right{display:flex;flex-direction:column;justify-content:space-between;
  gap:40px}
.quote{border-top:1px solid var(--hairline);padding-top:32px}
.quote__text{font-family:var(--font-display),sans-serif;font-weight:500;
  font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-.01em;
  color:var(--fg)}
.quote__attr{margin-top:24px}
.about__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hairline)}
.statplate{background:var(--sur);border:1px solid var(--hairline);padding:24px}
@media (prefers-reduced-motion:no-preference){
  .statplate{transition:border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.statplate:hover{border-color:var(--c1);box-shadow:var(--glow)}
.statplate__num{font-family:var(--font-mono),monospace;font-weight:500;
  font-size:clamp(28px,3vw,40px);color:var(--c1);letter-spacing:-.01em}
.statplate__lab{margin-top:6px}

.tag{display:inline-flex;align-items:center;font-family:var(--font-mono),monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);border-radius:999px;padding:6px 12px}

.portfolio{padding:96px 0}
.portfolio__head{display:flex;flex-direction:column;gap:16px;padding-bottom:48px}
.portfolio__stage{position:relative}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:20px}
.pgrid__card{display:flex;flex-direction:column;gap:12px;text-decoration:none;
  background:none;border:none;padding:0;margin:0;text-align:left;font:inherit;
  color:inherit;cursor:pointer;width:100%}
.pgrid__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:10px;
  border:1px solid var(--hairline);background:var(--sur)}
@media (prefers-reduced-motion:no-preference){
  .pgrid__media{transition:border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.pgrid__card:hover .pgrid__media,
.pgrid__card:focus-visible .pgrid__media{border-color:var(--c1);box-shadow:var(--glow)}
.pgrid__img{object-fit:cover}
.pgrid__meta{display:flex;align-items:flex-start;gap:8px}
.pgrid__dot{flex:none;width:7px;height:7px;border-radius:999px;
  background:var(--c1);margin-top:7px}
.pgrid__t{color:var(--fg);font-size:15px;font-weight:600}
.pgrid__url{color:var(--muted2);font-size:12px;margin-top:2px}

.pgal{position:relative;height:min(78vh,720px);border-radius:4px;overflow:hidden;
  border:1px solid var(--hairline);background:var(--bg)}
:root[data-theme="light"] .pgal{background:#04060f}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .pgal{background:#04060f}
}
.pgal__frame{position:absolute;inset:16px;pointer-events:none;
  border:1px solid rgba(0,229,255,.10);
  clip-path:polygon(0 0,28px 0,28px 1px,calc(100% - 28px) 1px,calc(100% - 28px) 0,100% 0,
    100% 100%,calc(100% - 28px) 100%,calc(100% - 28px) calc(100% - 1px),
    28px calc(100% - 1px),28px 100%,0 100%)}
.pgal__hint{position:absolute;left:24px;bottom:20px;pointer-events:none;
  color:var(--muted2)}
.pgal__count{position:absolute;right:24px;bottom:20px;pointer-events:none;
  color:var(--muted2)}
/* 176 x 258px exactly: 10 pad + 156 media (3:4 -> 208) + 30 caption + 10 pad.
   PosterGalaxy derives the invisible hit plane from these same numbers. */
.pgal__card{width:176px;padding:10px;margin:0;border-radius:4px;
  background:var(--sur);border:1px solid var(--hairline2);
  box-shadow:0 10px 24px rgba(0,0,0,.45);user-select:none;
  appearance:none;-webkit-appearance:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer;display:block}
@media (prefers-reduced-motion:no-preference){
  .pgal__card{transition:border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
/* No scale on hover: the card is a billboard in a perspective projection, so
   scaling it fights the depth cue and jitters the DOM matrix drei rewrites
   every frame. Border and glow carry the state instead. */
.pgal__card--hot,.pgal__card:hover,.pgal__card:focus-visible{border-color:var(--c1);
  box-shadow:0 0 0 1.5px var(--c1),0 0 32px rgba(0,229,255,.55),
    0 20px 48px rgba(0,229,255,.3)}
.pgal__media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;
  background:var(--bg2)}
.pgal__img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .pgal__img{transition:opacity var(--dur-base) var(--ease)}
  .pgal__card--hot .pgal__media,.pgal__card:hover .pgal__media,
  .pgal__card:focus-visible .pgal__media{animation:pgrid-hover-blur var(--dur-slow,420ms) var(--ease)}
}
.pgal__card--hot .pgal__img,.pgal__card:hover .pgal__img,
.pgal__card:focus-visible .pgal__img{opacity:.72}
.pgal__n{position:absolute;top:8px;left:8px;font-family:var(--font-mono),monospace;
  font-size:10px;letter-spacing:.14em;color:var(--fg);opacity:.55;
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
.pgal__cap{margin-top:8px;height:22px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12px;color:var(--fg);opacity:.85}

.pmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(4,6,15,.86);
  backdrop-filter:blur(6px)}
.pmodal__frame{position:relative;width:min(100%,460px)}
.pmodal__panel{display:grid;gap:16px;width:100%;max-height:86vh;
  overflow-y:auto;padding:16px;border-radius:4px;
  background:var(--sur);border:1px solid var(--hairline)}
/* Anchored to the frame, outside the scrolling panel. Inside it, the poster
   (a later positioned sibling) painted over it, and tall content scrolled it
   away. The 14px offset stays inside `.pmodal`'s 24px padding at every width. */
.pmodal__close{position:absolute;top:-14px;right:-14px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--hairline);border-radius:999px;
  background:var(--bg2);color:var(--fg);cursor:pointer;
  box-shadow:0 2px 14px rgba(4,6,15,.85)}
@media (prefers-reduced-motion:no-preference){
  .pmodal__close{transition:border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
}
.pmodal__close:hover{border-color:var(--c1);background:var(--c1);
  color:var(--accent-ink)}
.pmodal__media{position:relative;width:100%;aspect-ratio:3/4;border-radius:2px;
  overflow:hidden;background:var(--bg2)}
.pmodal__img{object-fit:contain}
.pmodal__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  justify-self:center;padding:11px 22px;border-radius:999px;background:var(--c1);
  color:var(--accent-ink);text-decoration:none;font-family:var(--font-mono),monospace;
  font-size:12px;letter-spacing:.06em}
@media (prefers-reduced-motion:no-preference){
  .pmodal__cta{transition:box-shadow var(--dur-fast) var(--ease)}
}
.pmodal__cta:hover{box-shadow:var(--glow)}

/* Rich variant: description + optional live-site embed (see PosterModal). */
.pmodal__frame--rich{width:min(100%,780px)}
.pmodal__frame--rich .pmodal__panel{grid-template-columns:1fr 1fr;max-height:88vh;
  align-content:start}
@media (max-width:760px){
  .pmodal__frame--rich .pmodal__panel{grid-template-columns:1fr}
}
.pmodal__frame--rich .pmodal__media{aspect-ratio:3/4;grid-row:span 2}
@media (max-width:760px){
  .pmodal__frame--rich .pmodal__media{grid-row:auto}
}
.pmodal__body{display:flex;flex-direction:column;gap:12px;min-width:0}
.pmodal__eyebrow{color:var(--muted,var(--muted2));font-family:var(--font-mono),monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pmodal__title{font-family:var(--font-display),sans-serif;font-size:clamp(22px,3vw,30px);
  line-height:1.1;margin:0}
.pmodal__meta{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0}
.pmodal__meta-item{display:flex;flex-direction:column;gap:2px}
.pmodal__meta-label{font-family:var(--font-mono),monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.pmodal__meta-value{font-size:13px;color:var(--fg)}
.pmodal__desc{color:var(--muted2);font-size:14px;line-height:1.6;
  max-height:220px;overflow-y:auto;padding-right:4px}
.pmodal__desc::-webkit-scrollbar{width:6px}
.pmodal__desc::-webkit-scrollbar-thumb{background:var(--hairline2);border-radius:99px}
.pmodal__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* Download + favorite row under Graphics Design artwork (see PosterModal). */
.pmodal__graphic-actions{display:flex;gap:10px;margin-top:12px}
.pmodal__icon-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--hairline2);
  background:var(--sur);color:var(--fg);font-family:var(--font-mono),monospace;
  font-size:12px;letter-spacing:.04em;cursor:pointer;text-decoration:none}
.pmodal__icon-btn--wide{flex:1}
@media (prefers-reduced-motion:no-preference){
  .pmodal__icon-btn{transition:border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
}
.pmodal__icon-btn:hover{border-color:var(--c1);box-shadow:var(--glow)}
.pmodal__heart--on{color:var(--c1);fill:var(--c1)}

/* "Linux-style" mini browser window embedding the project's live URL. */
.pmodal__browser{grid-column:1/-1;border-radius:8px;overflow:hidden;
  border:1px solid var(--hairline);background:var(--bg2);margin-top:8px}
.pmodal__browser-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--sur2,var(--sur));border-bottom:1px solid var(--hairline)}
.pmodal__browser-dots{display:flex;gap:6px;flex-shrink:0}
.pmodal__browser-dots span{width:10px;height:10px;border-radius:50%;display:block}
.pmodal__browser-dots span:nth-child(1){background:#ff5f56}
.pmodal__browser-dots span:nth-child(2){background:#ffbd2e}
.pmodal__browser-dots span:nth-child(3){background:#27c93f}
.pmodal__browser-url{flex:1;font-family:var(--font-mono),monospace;font-size:12px;
  color:var(--muted2);background:var(--bg);border:1px solid var(--hairline2);
  border-radius:999px;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pmodal__browser-open{flex-shrink:0;color:var(--c1);display:inline-flex;
  align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px}
@media (prefers-reduced-motion:no-preference){
  .pmodal__browser-open{transition:background var(--dur-fast) var(--ease)}
}
.pmodal__browser-open:hover{background:rgba(0,229,255,.12)}
.pmodal__browser-frame{width:100%;aspect-ratio:16/10;border:0;display:block;
  background:var(--bg)}

/* Website variant: the live iframe embed is the primary content (no side
   poster image), so this stays a single column -- .pmodal__panel is already
   an implicit single-column grid without .pmodal__frame--rich's override --
   just wider than the default 460px frame so the embed has room. */
.pmodal__frame--website{width:min(100%,860px)}
.pmodal__frame--website .pmodal__panel{max-height:88vh}
.pmodal__browser--primary{margin-top:4px}

/* Grid card hover: scale + a brief directional blur "swoosh", not a resting
   blur. Gated behind reduced-motion like every other transition here. */
@media (prefers-reduced-motion:no-preference){
  .pgrid__card{cursor:pointer}
  .pgrid__media{will-change:transform,filter}
  .pgrid__card:hover .pgrid__media,
  .pgrid__card:focus-visible .pgrid__media{animation:pgrid-hover-blur var(--dur-slow,420ms) var(--ease)}
  .pgrid__img{transition:transform var(--dur-slow,420ms) var(--ease)}
  .pgrid__card:hover .pgrid__img,
  .pgrid__card:focus-visible .pgrid__img{transform:scale(1.08)}
}
@keyframes pgrid-hover-blur{
  0%{filter:blur(0)}
  35%{filter:blur(5px)}
  100%{filter:blur(0)}
}

.pgal__host:not([data-mounted="true"]){height:1px;overflow:hidden}
.pgal__host[data-mounted="true"] + .pgrid{display:none}

.tech{padding:96px 0}
.tech__grid{display:grid;grid-template-columns:1fr;gap:56px}
@media (min-width:1024px){
  .tech__grid{grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
}
.tech__title{margin-top:16px;color:var(--ink)}
.tech__lead{margin-top:20px;max-width:48ch;color:var(--muted);font-size:16px}

.techlist{display:flex;flex-direction:column;margin-top:36px}
.techlist__item{position:relative;display:flex;align-items:center;gap:18px;
  padding:20px 16px;margin:0 -16px;border-radius:8px;
  border-bottom:1px solid var(--hairline)}
.techlist__item:first-child{border-top:1px solid var(--hairline)}
@media (prefers-reduced-motion:no-preference){
  .techlist__item{transition:background var(--dur-base) var(--ease)}
}
.techlist__item:hover{background:var(--sur)}
.techlist__icon{flex:none;color:var(--c1)}
.techlist__name{color:var(--fg)}
.techlist__desc{margin-top:4px;color:var(--muted);font-size:14px}
.techlist__badge{margin-left:auto;flex:none}

.capgrid{position:relative;width:100%;max-width:440px;margin:0 auto}

/* components/ui/tech-showcase.tsx -- hub-and-spoke diagram: a central
   brand mark with thin lines radiating to each discipline, positioned by
   polarPosition() from the stack length (see the component). */
.techorbit{position:relative;width:100%;max-width:420px;aspect-ratio:1;
  margin:0 auto}

.techorbit__lines{position:absolute;inset:0;width:100%;height:100%}
.techorbit__lines line{stroke:var(--c1);stroke-opacity:.35;stroke-width:.6;
  vector-effect:non-scaling-stroke}

.techorbit__hub{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:78px;height:78px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:var(--sur);
  border:1px solid var(--c1);
  box-shadow:0 0 0 6px var(--accent-soft),0 0 24px -4px var(--c1);z-index:2}

.techorbit__node{position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;
  text-align:center}
.techorbit__node-icon{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--hairline);
  background:var(--sur);color:var(--c1)}
.techorbit__node-label{font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .techorbit__node-icon{transition:border-color var(--dur-base) var(--ease)}
}
.techorbit__node:hover .techorbit__node-icon{border-color:var(--c1)}

@media (max-width:480px){
  .techorbit{max-width:300px}
  .techorbit__hub{width:56px;height:56px}
  .techorbit__node-icon{width:32px;height:32px}
  .techorbit__node-label{font-size:9px}
}

.brands{padding:96px 0;position:relative;overflow:hidden}
.brands__head{text-align:center;max-width:560px;margin:0 auto;position:relative;z-index:1}
.brands__grid{position:relative;z-index:1}

/* Ecosystem section backdrop, adapted from Prompt2.txt -- see
   EcosystemBackground.tsx. Sits behind the section's own content. */
.eco-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.eco-bg__wrapper{position:absolute;width:100%;height:100%;top:0;left:0}
.eco-bg__line{fill:none;stroke:var(--c1);stroke-width:1.5;opacity:.35}
.eco-bg__pattern{position:absolute;width:200%;height:200%;
  background:repeating-linear-gradient(45deg,transparent,transparent 10px,
    var(--hairline) 10px,var(--hairline) 20px);opacity:.5}
.eco-bg__pattern--a{top:-50%;left:-50%}
.eco-bg__pattern--b{top:50%;left:50%}
@media (prefers-reduced-motion:no-preference){
  .eco-bg__pattern{animation:eco-pattern-scroll 26s linear infinite}
  @keyframes eco-pattern-scroll{
    0%{transform:translate(-5%,-5%)}
    100%{transform:translate(5%,5%)}
  }
}
.brands__lead{margin-top:20px;color:var(--muted);font-size:16px}
.brands__grid{display:grid;grid-template-columns:1fr;gap:1px;
  margin-top:56px;background:var(--hairline)}
@media (min-width:640px){
  .brands__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .brands__grid{grid-template-columns:repeat(4,1fr)}
}
.brandcard{position:relative;background:var(--sur);padding:32px 24px;
  border-bottom:2px solid transparent}
@media (prefers-reduced-motion:no-preference){
  .brandcard{transition:transform var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.brandcard:hover{background:var(--sur2);border-bottom-color:var(--c1);
  box-shadow:var(--glow);transform:translateY(-4px)}
.brandcard :is(svg){color:var(--fg)}
.brandcard__niche{margin-top:20px}
.brandcard__nm{margin-top:10px;color:var(--fg)}
.brandcard__desc{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.55}

.process{padding:96px 0}
.process__head{text-align:center;max-width:560px;margin:0 auto}
.process__rail{position:relative;display:grid;grid-template-columns:1fr;
  gap:48px;margin-top:64px}
@media (min-width:768px){
  .process__rail{grid-template-columns:repeat(2,1fr);gap:56px 40px}
}
@media (min-width:1024px){
  .process__rail{grid-template-columns:repeat(4,1fr);gap:0 32px}
  .process__rail::before{content:"";position:absolute;top:26px;
    left:calc(12.5% - 1px);right:calc(12.5% - 1px);height:1px;
    background:linear-gradient(90deg,transparent,var(--c1),transparent);
    opacity:.5;z-index:0}
}
.step{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px;z-index:1}
.step__marker{position:relative;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:999px;border:1px solid var(--hairline);
  background:var(--sur);flex:none}
@media (prefers-reduced-motion:no-preference){
  .step__marker{transition:border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.step:hover .step__marker{border-color:var(--c1);box-shadow:var(--glow)}
.step__icon{color:var(--c1)}
.step__num{color:var(--muted2)}
.step__t{color:var(--fg)}
.step__d{color:var(--muted);font-size:14px;line-height:1.6;max-width:34ch}

/* Still used by Testimonials. The Team section that also used it - and its
   .monogram--1..--8 tints - is gone. */
.monogram{display:flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:999px;
  font-family:var(--font-mono),monospace;font-weight:500;font-size:14px;
  letter-spacing:.04em;color:var(--c1);
  background:var(--accent-soft);border:1px solid var(--hairline)}

.testimonials{padding:96px 0}
.testimonials__head{text-align:center;max-width:560px;margin:0 auto}
.testimonials__grid{display:grid;grid-template-columns:1fr;gap:1px;
  margin-top:56px;background:var(--hairline)}
@media (min-width:768px){
  .testimonials__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .testimonials__grid{grid-template-columns:repeat(3,1fr)}
}
.tcard{position:relative;display:flex;flex-direction:column;
  background:var(--sur);padding:32px 28px;border:1px solid transparent}
@media (prefers-reduced-motion:no-preference){
  .tcard{transition:background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
}
.tcard:hover{background:var(--sur2);border-color:var(--hairline);box-shadow:var(--glow)}
.tcard__stars{display:flex;gap:4px;color:var(--gold)}
.tcard__txt{margin-top:18px;flex:1 1 auto;font-family:var(--font-display),sans-serif;
  font-style:italic;font-weight:500;font-size:16px;line-height:1.5;
  letter-spacing:-.01em;color:var(--fg)}
.tcard__auth{display:flex;align-items:center;gap:14px;margin-top:24px}
.tcard__nm{font-family:var(--font-mono),monospace;font-size:13px;
  letter-spacing:.02em;color:var(--fg)}
.tcard__rl{margin-top:4px}

.blog{padding:96px 0}
.blog__head{display:flex;flex-direction:column;gap:24px;
  padding-bottom:48px;border-bottom:1px solid var(--hairline)}
@media (min-width:1024px){
  .blog__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:56px}
}
.blog__head .display-l{margin-top:16px}
.blog__grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:48px}
@media (min-width:768px){
  .blog__grid{grid-template-columns:repeat(3,1fr);gap:24px}
}
.bcard{display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--hairline);border-radius:4px;overflow:hidden;
  background:var(--sur)}
@media (prefers-reduced-motion:no-preference){
  .bcard{transition:border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
}
.bcard:hover{border-color:var(--c1);box-shadow:var(--glow);transform:translateY(-4px)}
.bcard__head{position:relative;aspect-ratio:340/260;background:var(--sur2);overflow:hidden}
.bcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease)}
.bcard:hover .bcard__img{transform:scale(1.05)}
.bcard__pattern{position:absolute;inset:0;color:var(--c1)}
.bcard__body{display:flex;flex-direction:column;align-items:flex-start;
  gap:12px;padding:24px}
.bcard__t{margin-top:4px;color:var(--fg)}
.bcard__d{color:var(--muted);font-size:14px;line-height:1.55}
.bcard__meta{display:flex;align-items:center;gap:12px}

.join{padding:96px 0}
.join__grid{display:grid;grid-template-columns:1fr;gap:56px}
@media (min-width:1024px){
  .join__grid{grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
}
.join__title{margin-top:16px;color:var(--fg)}
.join__lead{margin-top:18px;max-width:48ch;color:var(--muted);font-size:16px}
.join__cta{margin-top:32px}
.join__label{margin-bottom:16px}
.join__roles{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hairline)}
@media (min-width:640px){
  .join__roles{grid-template-columns:repeat(2,1fr)}
}
.rolechip{display:flex;align-items:center;gap:12px;background:var(--sur);
  padding:18px 20px}
@media (prefers-reduced-motion:no-preference){
  .rolechip{transition:background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.rolechip:hover{background:var(--sur2);box-shadow:var(--glow)}
.rolechip__icon{flex:none;color:var(--c1)}
.rolechip__label{color:var(--fg);font-size:14px}

.contact{padding:96px 0}
.contact__wrap{max-width:760px;margin:0 auto;text-align:center}
.contact__eyebrow{display:flex;justify-content:center}
.contact__title{margin-top:18px;color:var(--fg)}
.contact__lead{margin-top:18px;max-width:52ch;margin-left:auto;margin-right:auto;
  color:var(--muted);font-size:16px}
.contact__form{display:grid;grid-template-columns:1fr;gap:20px;margin-top:48px;
  text-align:left}
@media (min-width:640px){
  .contact__form{grid-template-columns:1fr 1fr}
}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field__label{color:var(--muted)}
.field__input{width:100%;font-family:var(--font-body),sans-serif;font-size:15px;
  color:var(--fg);background:var(--sur);border:1px solid var(--hairline);
  border-radius:4px;padding:12px 14px;outline:none}
.field__input--area{resize:vertical;min-height:120px}
@media (prefers-reduced-motion:no-preference){
  .field__input{transition:border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease)}
}
.field__input:focus{border-color:var(--c1);box-shadow:0 0 0 3px var(--accent-soft)}
.contact__submit-row{display:flex;justify-content:center;margin-top:40px}
.contact__submit--sent{background:var(--c1);opacity:.7;pointer-events:none}
.contact__ok{margin-top:16px;color:var(--c1);font-size:14px;display:none;font-weight:600}
.contact__ok--vis{display:block}

/* Direct contact row below form */
.contact__direct{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--hairline)}
.contact__direct-label{font-family:var(--font-mono),monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.contact__direct-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.contact__direct-email{display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13px;text-decoration:none;font-weight:500;
  padding:8px 16px;border:1px solid var(--hairline);border-radius:999px}
@media (prefers-reduced-motion:no-preference){
  .contact__direct-email{transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
}
.contact__direct-email:hover{color:var(--c1);border-color:var(--c1)}

/* WhatsApp button */
.contact__wa-btn{display:inline-flex;align-items:center;gap:9px;
  background:#25D366;color:#fff;font-family:var(--font-body),sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  padding:11px 22px;border-radius:999px;text-decoration:none;border:none;
  box-shadow:0 4px 20px rgba(37,211,102,.35)}
@media (prefers-reduced-motion:no-preference){
  .contact__wa-btn{transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
  .contact__wa-btn:active{transform:scale(.96)}
}
.contact__wa-btn:hover{background:#1ebe5b;box-shadow:0 6px 32px rgba(37,211,102,.55);}

.footer{padding-top:0;background:var(--bg2);border-top:1px solid var(--hairline)}
.footer__rule{display:block;opacity:.5;margin-bottom:-1px}
.footer__grid{display:grid;grid-template-columns:1fr;gap:48px;padding:64px 0 48px}
@media (min-width:768px){
  .footer__grid{grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
}
.footer__logo{display:inline-flex;align-items:center;line-height:0;
  text-decoration:none}
.footer__desc{margin-top:16px;max-width:36ch;color:var(--muted);font-size:14px;
  line-height:1.6}
.footer__socials{display:flex;align-items:center;gap:10px;margin-top:24px}
.footer__soc{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;border:1px solid var(--hairline);
  color:var(--muted);text-decoration:none}
@media (prefers-reduced-motion:no-preference){
  .footer__soc{transition:color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease)}
}
.footer__soc:hover{color:var(--c1);border-color:var(--c1)}
.footer__heading{margin-bottom:16px}
.footer__links{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer__link{color:var(--muted);font-size:14px;text-decoration:none}
@media (prefers-reduced-motion:no-preference){
  .footer__link{transition:color var(--dur-fast) var(--ease),
    text-shadow var(--dur-fast) var(--ease)}
}
.footer__link:hover{color:var(--c1);text-shadow:0 0 10px rgba(0,229,255,.5)}
.footer__circuit{border-top:1px solid var(--hairline)}
.footer__circuit svg{display:block;opacity:.6}
.footer__bottom{display:flex;flex-direction:column;gap:8px;align-items:center;
  justify-content:space-between;padding:24px 6% 32px;text-align:center}
@media (min-width:640px){
  .footer__bottom{flex-direction:row;text-align:left}
}
.footer__copy{color:var(--muted2);font-size:13px}

:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--accent-soft)}
a:focus-visible,button:focus-visible,.nav__toggle:focus-visible,.btn:focus-visible{border-radius:8px}
.footer__tag{letter-spacing:.18em}

.gold{color:var(--gold)}

/* Glow-card mouse-tracking highlight: SiteScripts sets --mx/--my (percent)
   on mousemove; the radial-gradient follows the cursor. Falls back to a
   static centered glow when JS hasn't run yet or under reduced motion. */
.gc-card{position:relative;--mx:50%;--my:50%;overflow:hidden}
.gc-card::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),var(--accent-soft),transparent 60%)}
@media (prefers-reduced-motion:no-preference){
  .gc-card::before{transition:opacity var(--dur-base) var(--ease)}
  .gc-card:hover::before{opacity:1}
}

.robot{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 12px;border-radius:32px;
  background:radial-gradient(circle at 50% 32%,rgba(0,229,255,.22),transparent 62%),
  var(--bg-sunken)}
:root[data-theme="light"] .robot{background:radial-gradient(circle at 50% 32%,rgba(0,229,255,.22),transparent 62%),
  #0b1020}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .robot{
    background:radial-gradient(circle at 50% 32%,rgba(0,229,255,.22),transparent 62%),#0b1020}
}
/* One pose, always. The scroll-driven pose swap (and its r-hello/r-point/
   r-present keyframes) is gone; only the idle float remains, which is ambient
   and not tied to scroll. */
.robot__img{position:relative;z-index:1;width:100%;height:auto;max-width:440px;
  mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){
  .robot__img{animation:rfloat 5s var(--ease) infinite}
}
@keyframes rfloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
/* Visible from the first paint. It used to start at opacity:0 and wait for
   SiteScripts to add `.show` alongside a pose swap; with no swap left there is
   nothing to wait for, and a bubble that needs JS to appear is a bubble that
   never appears without it. */
.robot-bubble{position:relative;z-index:1;margin-top:18px;max-width:300px;
  text-align:center;font-family:var(--font-mono),monospace;font-size:12px;
  letter-spacing:.02em;line-height:1.5;color:var(--c1);
  border:1px solid var(--hairline);border-radius:12px;padding:12px 16px;
  background:var(--bg)}

/* ---------- Home-link scroll blur overlay (SmoothScroll.tsx) ---------- */
.scrolltop-blur{position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:0;backdrop-filter:blur(0px);background:rgba(4,6,15,0)}
@media (prefers-reduced-motion:no-preference){
  .scrolltop-blur{transition:opacity .45s var(--ease),backdrop-filter .45s var(--ease)}
}
.scrolltop-blur--on{opacity:1;backdrop-filter:blur(14px);
  background:rgba(4,6,15,.25)}

/* ---------- Services list, "What We Do" (Services.tsx) ---------- */
.services{padding:96px 0;position:relative;overflow:hidden}
.services > .container{position:relative;z-index:1}
.services__head{display:flex;flex-direction:column;gap:24px;
  padding-bottom:48px;border-bottom:1px solid var(--hairline)}
@media (min-width:1024px){
  .services__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:56px}
}
.services__title{margin-top:16px;color:var(--ink)}
.services__lead{max-width:36ch;color:var(--muted);font-size:16px}
@media (min-width:1024px){
  .services__lead{text-align:right}
}
.services__list{display:flex;flex-direction:column}

.clip-row{position:relative;display:flex;align-items:center;gap:20px;
  padding:28px 4px;text-decoration:none;color:var(--fg);
  border-bottom:1px solid var(--hairline);overflow:hidden}
.clip-row__bg{position:absolute;inset:0;background:var(--c1);
  clip-path:polygon(0 100%,0 100%,0 100%,0 100%);z-index:0}
@media (prefers-reduced-motion:no-preference){
  .clip-row__bg{transition:clip-path var(--dur-slow) var(--ease)}
}
.clip-row:hover{box-shadow:var(--glow)}
.clip-row:hover .clip-row__bg{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.clip-row__left{position:relative;z-index:1;display:flex;align-items:center;
  gap:20px;flex:1 1 auto;min-width:0}
.clip-row__n{position:relative;z-index:1;color:var(--muted2);width:28px;flex:none}
.clip-row__icon{position:relative;z-index:1;flex:none;color:var(--c1)}
.clip-row__name{position:relative;z-index:1;color:var(--fg);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.clip-row__tags{position:relative;z-index:1;display:none;align-items:center;
  gap:8px;flex:none}
@media (min-width:768px){
  .clip-row__tags{display:flex}
}
.clip-row__arrow{position:relative;z-index:1;flex:none;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .clip-row__n,.clip-row__icon,.clip-row__name,.clip-row__tags .tag,.clip-row__arrow{
    transition:color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
  .clip-row__arrow{transition:color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
  .clip-row{transition:box-shadow var(--dur-base) var(--ease)}
}
.clip-row:hover .clip-row__n,
.clip-row:hover .clip-row__icon,
.clip-row:hover .clip-row__name,
.clip-row:hover .clip-row__arrow{color:var(--accent-ink)}
.clip-row:hover .clip-row__tags .tag{color:var(--accent-ink);border-color:var(--accent-ink)}
.clip-row:hover .clip-row__arrow{transform:translate(4px,-4px)}

/* ---------- Chat widget (ChatWidget.tsx) ---------- */
.chatwidget{position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chatwidget__fab{width:56px;height:56px;border-radius:50%;border:none;
  background:var(--c1);color:#04060f;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 24px rgba(0,229,255,.45);
  cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .chatwidget__fab{transition:transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease)}
  .chatwidget__fab:hover{transform:scale(1.08);
    box-shadow:0 0 36px rgba(0,229,255,.6)}
  .chatwidget__fab:active{transform:scale(.94)}
}
.chatwidget__panel{width:min(370px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));max-height:none;display:flex;
  flex-direction:column;background:var(--sur);border:1px solid var(--hairline);
  border-radius:14px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.4)}
.chatwidget__head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--hairline)}
.chatwidget__title{font-weight:700;font-size:14px}
.chatwidget__sub{color:var(--muted2);font-size:11px}
.chatwidget__close{background:none;border:none;color:var(--muted2);
  cursor:pointer;padding:4px}
.chatwidget__body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;
  flex-direction:column;gap:8px;min-height:160px}
.chatwidget__empty{color:var(--muted2);font-size:13px;text-align:center;
  padding:20px 8px}
.chatwidget__msg{max-width:82%;padding:8px 12px;border-radius:12px;
  font-size:13px;line-height:1.4}
.chatwidget__msg--visitor{align-self:flex-end;background:var(--c1);
  color:#04060f}
.chatwidget__msg--admin{align-self:flex-start;background:var(--bg2);
  border:1px solid var(--hairline)}
/* Logy's turns: same side as an admin reply (both are "the business"
   answering the visitor), but tinted purple/--c2 so it's visually distinct
   from a human teammate's reply once one arrives in the same thread. */
.chatwidget__msg--ai{align-self:flex-start;
  background:color-mix(in srgb,var(--c2) 16%,var(--bg2));
  border:1px solid color-mix(in srgb,var(--c2) 40%,transparent)}
.chatwidget__msg-name{display:block;font-family:var(--font-mono),monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c2);margin-bottom:2px}
.chatwidget__auth{padding:0 16px}
.chatwidget__auth-btn{background:none;border:none;color:var(--muted2);
  font-size:11px;cursor:pointer;padding:6px 0}
.chatwidget__auth-btn:hover{color:var(--c1)}
.chatwidget__form{display:flex;gap:8px;padding:12px 16px;
  border-top:1px solid var(--hairline)}
.chatwidget__form input{flex:1;background:var(--bg2);
  border:1px solid var(--hairline);border-radius:999px;padding:8px 14px;
  color:var(--fg);font-size:13px;outline:none}
.chatwidget__form input:focus{border-color:var(--c1)}
.chatwidget__form button{width:34px;height:34px;border-radius:50%;
  background:var(--c1);color:#04060f;border:none;display:flex;
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.chatwidget__form button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Portfolio category filter tabs (PortfolioInteractive.tsx) ---------- */
.pftabs{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 28px;
  padding:5px;border:1px solid var(--hairline);border-radius:999px;
  width:fit-content;max-width:100%;overflow-x:auto}
.pftabs__btn{position:relative;background:none;border:none;padding:9px 18px;
  border-radius:999px;font-family:var(--font-mono),monospace;font-size:12px;
  letter-spacing:.04em;color:var(--muted2);cursor:pointer;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .pftabs__btn{transition:color var(--dur-fast) var(--ease)}
}
.pftabs__btn[data-active="true"]{color:var(--accent-ink);
  text-shadow:0 0 10px rgba(0,229,255,.5)}
.pftabs__pill{position:absolute;inset:0;border-radius:999px;background:var(--c1);
  z-index:0;box-shadow:0 0 20px rgba(0,229,255,.55),0 0 40px rgba(0,229,255,.25),
    inset 0 0 8px rgba(255,255,255,.25)}
@media (prefers-reduced-motion:no-preference){
  .pftabs__pill{animation:pftabs-pop 320ms var(--ease)}
  @keyframes pftabs-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
}
.pftabs__label{position:relative;z-index:1}
.pftabs__empty{color:var(--muted2);padding:40px 0;text-align:center}

/* ---------- Client logo showcase (Clients.tsx) ---------- */
.clients{padding:80px 0 96px}
.clients__head{margin-bottom:36px}
.clients__marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,
    transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients__track{display:flex;width:max-content;align-items:center;gap:56px}
@media (prefers-reduced-motion:no-preference){
  /* Left-to-right (the reverse of Marquee.tsx's service-word ticker above):
     starts at the fully-scrolled position and animates back to 0. */
  .clients__track{animation:marquee-scroll-reverse 36s linear infinite}
  .clients__marquee:hover .clients__track{animation-play-state:paused}
  @keyframes marquee-scroll-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
.clients__logo{display:flex;align-items:center;justify-content:center;
  height:96px;width:180px;flex:none}
@media (prefers-reduced-motion:no-preference){
  .clients__logo{transition:filter var(--dur-base) var(--ease)}
}
.clients__logo:hover{filter:drop-shadow(0 0 14px rgba(0,229,255,.4))}
/* The floating bob animates the independent CSS `translate` property (not
   `transform`) on the image/wordmark itself, so it composes cleanly with
   the hover `transform:scale()` below instead of fighting it for the same
   property. Each logo's --i (set inline in Clients.tsx) staggers the phase
   so the row floats as a loose group rather than one rigid block. */
.clients__logo img,.clients__wordmark{
  display:block;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .clients__logo img,.clients__wordmark{
    animation:client-float 3.4s var(--ease) infinite;
    animation-delay:calc(var(--i,0) * -280ms)}
  .clients__logo:hover img,.clients__logo:hover .clients__wordmark{
    transform:scale(1.18)}
  .clients__logo img,.clients__logo .clients__wordmark{
    transition:transform var(--dur-base) var(--ease)}
  @keyframes client-float{
    0%,100%{translate:0 0}
    50%{translate:0 -7px}
  }
}
.clients__logo img{max-height:100%;max-width:100%;width:auto;
  object-fit:contain;border-radius:8px}
.clients__wordmark{font-family:var(--font-display),sans-serif;
  font-weight:700;font-size:22px;color:var(--fg);white-space:nowrap}

/* ---------- Additions for the static single-page rebuild ---------- */
img{max-width:100%}
.nav__mobile-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--hairline);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .nav__mobile-toggle{transition:border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease)}
  .nav__mobile-toggle:active{transform:scale(.94)}
}
.nav__mobile-toggle:hover{border-color:var(--c1);color:var(--c1);
  box-shadow:0 0 16px rgba(0,229,255,.3)}
@media (min-width:1024px){ .nav__mobile-toggle{display:none} }
.nav__mobile-menu{display:none;flex-direction:column;gap:2px;position:fixed;
  top:64px;left:0;right:0;z-index:49;background:var(--bg);
  border-bottom:1px solid var(--hairline);padding:8px 6%;
  box-shadow:0 12px 32px -8px rgba(0,229,255,.15)}
.nav__mobile-menu.open{display:flex}
.nav__mobile-menu a{padding:14px 4px;font-family:var(--font-mono),monospace;
  font-size:13px;letter-spacing:.04em;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--hairline)}
@media (prefers-reduced-motion:no-preference){
  .nav__mobile-menu a{transition:color var(--dur-fast) var(--ease),
    text-shadow var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease)}
}
.nav__mobile-menu a:hover,.nav__mobile-menu a:focus-visible{color:var(--c1);
  text-shadow:0 0 12px rgba(0,229,255,.5);padding-left:10px}
.nav__mobile-menu a:last-child{border-bottom:none}
@media (min-width:1024px){ .nav__mobile-menu{display:none !important} }
.pgrid{margin-top:0}
.contact__form select.field__input{appearance:auto}
.footer__link,.footer__soc,.btn,.pftabs__btn,.nav__cta,.nav__toggle{cursor:pointer}
::selection{background:var(--c1);color:#04060f}

/* Graphics design portfolio */
.pgrid--graphics{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));}
.pgrid__card--graphic .pgrid__media{aspect-ratio:4/5;background:rgba(255,255,255,.02);}
.pgrid__card--graphic .pgrid__img{width:100%;height:100%;object-fit:cover;display:block;}
.pmodal__graphic{grid-column:1/-1;border-radius:10px;overflow:auto;max-height:68vh;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;}
.pmodal__graphic img{display:block;width:auto;max-width:100%;height:auto;max-height:68vh;object-fit:contain;}

/* Team tab (Portfolio filter) */
.pgrid--team{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));}
.teamcard{display:flex;flex-direction:column;gap:12px}
.teamcard__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;
  border:1px solid var(--hairline);background:var(--sur)}
@media (prefers-reduced-motion:no-preference){
  .teamcard__media{transition:border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease)}
}
.teamcard:hover .teamcard__media{border-color:var(--c1);box-shadow:var(--glow)}
.teamcard__img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.teamcard__meta{display:flex;align-items:flex-start;gap:8px}
.teamcard__name{color:var(--fg);font-size:15px;font-weight:600}
.teamcard__role{color:var(--c1);font-size:12px;margin-top:2px}
.teamcard__desc{color:var(--muted2);font-size:12.5px;line-height:1.5;margin-top:6px}

/* ================= v2 additions ================= */

/* Sound toggle icon classes — removed from nav, kept as dead CSS just in case */
/* .nav__toggle .i-off{display:none} (sound toggle removed) */
@media (min-width:1024px) and (max-width:1279px){
  .slidetabs__link{padding:8px 9px;font-size:10.5px;letter-spacing:.02em}
}
#team{scroll-margin-top:120px}

/* Live website previews inside the Website cards */
.pgrid__media--live{--s:.25;background:#0b0f1a}
.livefr{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;background:#fff;
  transition:opacity .7s var(--ease)}
.livefr.on{opacity:1}
.livefr iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;display:block;
  transform-origin:0 0;transform:scale(var(--s));pointer-events:none;background:#fff}
.livebadge{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;background:rgba(4,6,15,.72);backdrop-filter:blur(6px);
  border:1px solid var(--hairline);color:#fff;font-family:var(--font-mono),monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.livebadge::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
@media (prefers-reduced-motion:no-preference){
  .livebadge::before{animation:livepulse 1.8s ease-in-out infinite}
  @keyframes livepulse{50%{opacity:.35}}
}
.pgrid__card--site:focus-visible{outline:2px solid var(--c1);outline-offset:4px;border-radius:10px}

/* Bigger project pop-up (websites show a large live browser) */
.pmodal{padding:clamp(8px,2vw,24px)}
.pmodal__frame--website{width:min(100%,1320px)}
.pmodal__frame--website .pmodal__panel{max-height:94vh;padding:clamp(12px,1.6vw,22px)}
.pmodal__frame--website .pmodal__browser-frame{aspect-ratio:auto;height:clamp(380px,calc(100vh - 400px),820px)}
.pmodal__frame--website .pmodal__graphic{max-height:62vh}
.pmodal__frame--website .pmodal__graphic img{max-height:62vh}
.pmodal__actions{justify-content:center}
.pmodal__cta--ghost{background:transparent;color:var(--c1);border:1px solid var(--c1)}
.pmodal__cta--ghost:hover{background:var(--accent-soft)}

/* Contact form feedback */
.contact__ok--err{color:#ff5a6a}
.contact__submit:disabled{opacity:.7;cursor:progress}

@media (max-width:640px){
  .pmodal__frame--website .pmodal__browser-frame{height:58vh}
  .pmodal__actions{flex-direction:column;align-items:stretch}
}


/* ================= v3 additions ================= */

/* ---------- "What We Do": uses the site theme (same bg as the other sections), fluid blob behind it ---------- */
.services__fluid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 900ms var(--ease)}
.services__fluid[data-mounted="true"]{opacity:.38}
.services__fluid canvas{display:block;width:100%;height:100%}

/* ---------- Team: standalone section ---------- */
.team{padding:96px 0;position:relative}
.team .portfolio__head{padding-bottom:40px}

/* ---------- Custom category cards (no image -> gradient initial) ---------- */
.pgrid__ph{width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--font-display),sans-serif;font-weight:800;font-size:56px;color:var(--c1);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,var(--sur)),color-mix(in srgb,var(--c2) 22%,var(--sur)))}
.pftabs__lead{width:100%;color:var(--muted2);font-size:14px;margin:-8px 0 20px;max-width:60ch}

/* ---------- Chat widget: launcher badge, pre-chat form, typing dots ---------- */
.chatwidget__fab{position:relative}
.chatwidget__fab svg{display:block}
.chatwidget__fab .chatwidget__ico-x{display:none}
.chatwidget.is-open .chatwidget__fab .chatwidget__ico-chat{display:none}
.chatwidget.is-open .chatwidget__fab .chatwidget__ico-x{display:block}
.chatwidget__dot{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#FF4D5E;color:#fff;font:700 11px/18px var(--font-body),sans-serif;text-align:center;
  border:2px solid var(--bg);display:none}
.chatwidget__dot.on{display:block}
.chatwidget[hidden],.chatwidget__panel[hidden]{display:none}
.chatwidget{opacity:0;pointer-events:none;transform:translateY(12px)}
.chatwidget.ready{opacity:1;pointer-events:auto;transform:none}
@media (prefers-reduced-motion:no-preference){
  .chatwidget{transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .chatwidget__panel{animation:chatpop .28s var(--ease)}
  @keyframes chatpop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
}
.chatwidget__head{gap:10px}
.chatwidget__who{display:flex;align-items:center;gap:10px;min-width:0}
.chatwidget__avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--c1);color:#04060f;font:800 14px var(--font-display),sans-serif}
.chatwidget__sub{display:flex;align-items:center;gap:6px}
.chatwidget__sub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.chatwidget__msg{overflow-wrap:anywhere;white-space:pre-wrap}
.chatwidget__msg a{color:inherit;text-decoration:underline}
.chatwidget__msg--admin .chatwidget__msg-name{color:var(--c1)}
.chatwidget__pre{padding:16px;display:grid;gap:10px;overflow-y:auto}
.chatwidget__pre p{color:var(--muted);font-size:13px;line-height:1.5}
.chatwidget__pre input{width:100%;background:var(--bg2);border:1px solid var(--hairline);border-radius:10px;
  padding:10px 12px;color:var(--fg);font-size:13px;outline:none}
.chatwidget__pre input:focus{border-color:var(--c1)}
.chatwidget__pre button{background:var(--c1);color:#04060f;border:none;border-radius:999px;padding:11px 16px;
  font:700 13px var(--font-body),sans-serif;cursor:pointer}
.chatwidget__note{font-size:11px;color:var(--muted2);line-height:1.4}
.chatwidget__typing{align-self:flex-start;display:flex;gap:4px;padding:11px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--c2) 16%,var(--bg2));border:1px solid color-mix(in srgb,var(--c2) 40%,transparent)}
.chatwidget__typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .chatwidget__typing i{animation:chattyping 1s infinite ease-in-out}
  .chatwidget__typing i:nth-child(2){animation-delay:.15s}
  .chatwidget__typing i:nth-child(3){animation-delay:.3s}
  @keyframes chattyping{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
}
.chatwidget__form[hidden],.chatwidget__pre[hidden],.chatwidget__body[hidden]{display:none}
.chatwidget__form input{min-width:0}
@media (max-width:480px){
  .chatwidget{right:12px;bottom:12px}
  .chatwidget__panel{height:min(560px,calc(100vh - 96px))}
}