/* =============================================================
   vunai — Cohere-inspired design system
   Aesthetic: warm off-white canvas, coral primary, deep Acadia-green
   panels, blue/purple accents. Friendly geometric grotesk at restrained
   weights — size and whitespace set hierarchy, not heavy ink.
   Rounded corners, hairline borders + soft elevation.
   (Class names preserved from the prior theme; --m-* tokens are aliased
    to Cohere colors so existing markup keeps working.)
   ============================================================= */

/* ---------- Fonts (self-hosted) ---------- */
/* Satoshi — used for headings only (--font-heading). No Semibold ships, so the
   Bold face covers 600–700 and Black covers 800–900 to avoid faux weights. */
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 300;
  font-display: swap; src: url(../fonts/satoshi-light.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(../fonts/satoshi-regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(../fonts/satoshi-medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 600 700;
  font-display: swap; src: url(../fonts/satoshi-bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 800 900;
  font-display: swap; src: url(../fonts/satoshi-black.woff2) format('woff2');
}
/* Quicksand — used for the navbar only (--font-nav). Bold covers 700–800. */
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(../fonts/quicksand-regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(../fonts/quicksand-medium.woff2) format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(../fonts/quicksand-semibold.woff2) format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700 800;
  font-display: swap; src: url(../fonts/quicksand-bold.woff2) format('woff2');
}

/* Josefin Sans + SUSE — variable fonts (self-hosted). Used site-wide for
   body (SUSE) and display (Josefin Sans). Headings stay Satoshi, navbar stays
   Quicksand, code/labels stay IBM Plex Mono. */
@font-face {
  font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700;
  font-display: swap; src: url(../fonts/josefin-sans-var.ttf) format('truetype');
}
@font-face {
  font-family: 'SUSE'; font-style: normal; font-weight: 100 800;
  font-display: swap; src: url(../fonts/suse-var.ttf) format('truetype');
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — Linear dark */
  --bg:            #08090a;  /* near-black canvas */
  --bg-elevated:   #0f1011;  /* cards / panels */
  --surface:       #0f1011;
  --surface-2:     #1c1c1f;  /* tints: inputs, tiles, active states */
  --hairline:      #23252a;
  --hairline-strong:#34343a;

  /* Text — near-white */
  --text:          #f7f8f8;
  --text-secondary:#d0d6e0;
  --text-muted:    #8a8f98;

  /* MONOCHROME theme — UI chrome is black & white.
     Color appears ONLY on buttons (--accent) and inside code blocks. */
  --accent:     #5e6ad2;  /* the one UI color: primary buttons / brand */
  --accent-2:   #6e79e0;
  --c-coral:    #f7f8f8;  /* generic accent alias -> now WHITE (mono chrome) */
  --c-coral-2:  #d0d6e0;
  --c-green-dk: #0d0e10;  /* deep panels, code surfaces, CTA band */
  /* code-only colors (kept colorful for syntax / diff / status) */
  --c-green:    #4cb782;
  --c-blue:     #4ea7fc;
  --c-purple:   #828fff;
  --on-coral:   #ffffff;

  /* ---- legacy aliases ---- */
  --m-light:  #d0d6e0;
  --m-dark:   #8a8f98;
  --m-red:    #f7f8f8;
  --m-blue:   var(--accent);    /* buttons keep their colour */
  --m-blue-2: var(--accent-2);
  --signal:   #f7f8f8;

  --m-stripe: linear-gradient(90deg, #f7f8f8 0%, #f7f8f8 40%, #8a8f98 40%, #8a8f98 70%, #4a4a52 70%, #4a4a52 100%);
  --m-gradient: linear-gradient(115deg, #ffffff 0%, #b8bcc4 50%, #6b7079 100%);

  /* Type */
  --font-heading: 'Satoshi', 'Inter', system-ui, sans-serif;  /* headings only */
  --font-nav: 'Quicksand', 'Inter', system-ui, sans-serif;  /* navbar only */
  --font-display: 'Josefin Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'SUSE', 'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --w-thin: 300;
  --w-reg:  400;
  --w-med:  500;
  --w-semi: 600;
  --w-bold: 700;
  --w-black:800;

  /* Radius — Linear: tight, precise */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing */
  --pad: clamp(20px, 5vw, 64px);
  --section: clamp(72px, 10vw, 150px);
  --maxw: 1280px;

  /* Elevation — soft */
  --shadow-sm: 0 1px 2px rgba(20,20,18,.04), 0 1px 3px rgba(20,20,18,.05);
  --shadow-md: 0 6px 22px -8px rgba(20,20,18,.12);
  --shadow-lg: 0 26px 60px -22px rgba(20,20,18,.22);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: .22s;
  --t-base: .45s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
::selection { background: #f7f8f8; color: #08090a; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 1; }
.section { padding-block: var(--section); position: relative; z-index: 1; }
.divider { height: 1px; background: var(--hairline); border: 0; }

.mstripe { height: 4px; width: 56px; background: var(--m-gradient); border-radius: 2px; }
.mstripe.full { width: 100%; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.05; letter-spacing: -0.02em; text-transform: none; color: var(--text); }
/* heading-styled classes can sit on non-heading tags too, so pin the font here */
.display, .h1, .h2, .h3 { font-family: var(--font-heading); }

.display {
  font-weight: var(--w-bold);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.h1 { font-weight: var(--w-bold); font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.025em; }
.h2 { font-weight: var(--w-semi); font-size: clamp(1.6rem, 3.6vw, 2.7rem); letter-spacing: -0.02em; }
.h3 { font-weight: var(--w-semi); font-size: clamp(1.2rem, 2.1vw, 1.6rem); letter-spacing: -0.012em; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .16em;
  font-weight: var(--w-semi);
  color: var(--c-coral);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--c-coral); border-radius: 2px; flex: none; }

.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--text-secondary); font-weight: var(--w-reg); max-width: 62ch; line-height: 1.6; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

.idx { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; color: var(--c-coral); font-weight: var(--w-semi); }

/* coral emphasis inside headlines (replaces the old slash motif) */
.slashes { color: var(--c-coral); font-weight: inherit; }
.accent-text { color: var(--c-coral); }
.footmark { font-family: var(--font-body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--w-semi); }

/* ---------- Buttons ---------- */
.btn {
  --bc: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  text-transform: none;
  letter-spacing: 0;
  font-size: .98rem;
  padding: .85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bc);
  color: var(--on-coral);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-2px); background: var(--accent-2); box-shadow: var(--shadow-md); }
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost { background: transparent; border-color: var(--hairline-strong); color: var(--text); }
.btn--ghost:hover { background: var(--bg-elevated); border-color: var(--text); box-shadow: var(--shadow-sm); }

.btn--light { background: #e8e8ea; color: #08090a; }
.btn--light:hover { background: #ffffff; }

/* keep the wipe hook harmless on light theme */
.btn--m::after { content: none; }

/* ---------- CTA pill ("Talk to us" closing button) ----------
   Animated B&W port of components/talktous.txt: an off-white pill with a DARK
   fill that slides in from the left on hover (text inverts to white) and a
   circular up-arrow icon that rotates 45°→90° and inverts. Strict B&W — the
   reference's emerald is dropped to match the site theme. Markup:
   <a class="btn-hud"><span class="btn-hud__label">Talk to us</span>
   <span class="btn-hud__icon"><svg>…up-arrow…</svg></span></a>. */
.btn-hud {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .5rem .55rem .5rem 1.5rem;
  font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.02rem;
  letter-spacing: -.01em; text-transform: none; text-align: center; text-decoration: none;
  color: #08090a; background: #f4f5f6;
  border: 1.5px solid #fff; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
  transition: color .45s var(--ease), border-color .45s var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* dark fill slides in from the left on hover/focus */
.btn-hud::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, var(--accent-2) 0%, var(--accent) 100%); transform: translateX(-101%);
  transition: transform .55s var(--ease);
}
.btn-hud:hover, .btn-hud:focus-visible { color: #fff; border-color: #fff; }
.btn-hud:hover::before, .btn-hud:focus-visible::before { transform: translateX(0); }
.btn-hud:active { transform: translateY(1px); }
.btn-hud:focus-visible { outline: 2px solid #f7f8f8; outline-offset: 4px; }
.btn-hud__label { position: relative; z-index: 1; display: inline-flex; align-items: center; }
.btn-hud__label .arrow { display: none; }
/* circular up-arrow icon; rotates and inverts on hover */
.btn-hud__icon {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(8,9,10,.22); background: transparent;
  transform: rotate(45deg);
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.btn-hud__icon svg { width: 15px; height: 17px; display: block; }
.btn-hud__icon svg path { fill: #08090a; transition: fill .45s var(--ease); }
.btn-hud:hover .btn-hud__icon, .btn-hud:focus-visible .btn-hud__icon {
  transform: rotate(90deg); background: #fff; border-color: transparent;
}
.btn-hud:hover .btn-hud__icon svg path, .btn-hud:focus-visible .btn-hud__icon svg path { fill: var(--accent); }
/* legacy bracket / shine spans from older markup — neutralized */
.btn-hud__shine, .btn-hud__c { display: none !important; }
@media (prefers-reduced-motion: reduce){
  .btn-hud, .btn-hud::before, .btn-hud__icon { transition: none; }
}

.linkarrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-size: .92rem; letter-spacing: 0;
  font-weight: var(--w-semi); color: var(--text);
  border-bottom: 1.5px solid var(--c-coral);
  padding-bottom: 2px; transition: color var(--t-fast), gap var(--t-fast);
}
.linkarrow:hover { color: var(--c-coral); gap: .7rem; }
.linkarrow .arrow { transition: transform var(--t-fast) var(--ease); }
.linkarrow:hover .arrow { transform: translateX(3px); }

/* ---------- Header / Nav ----------
   Two states:
   • Top of page  → full-width transparent header. Brand centered, the link
                    list stacked vertically top-left, CTA top-right.
   • Scrolled      → collapses into a compact, centered, floating pill with a
                    small wordmark + horizontal links + CTA.
   The .scrolled class is toggled on #nav by js/main.js. */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;  /* full bar sits at page top and scrolls away with the content */
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.8vw, 34px) 0;  /* tighter top + sides than the page --pad */
  transition: padding var(--t-base) var(--ease);
}
.nav__inner {
  position: relative;
  max-width: none;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: 0 0 0 0 transparent;
  transition: max-width var(--t-base) var(--ease),
              padding var(--t-base) var(--ease),
              gap var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

/* Logo: "vunai" wordmark with a single coral accent dot */
.brand {
  position: absolute; left: 50%; top: -2px; transform: translateX(-50%);
  display: inline-flex; align-items: center;
  font-family: var(--font-nav); font-weight: var(--w-bold);
  font-size: 1.35rem; letter-spacing: -.02em; color: var(--text);
  z-index: 2;
  transition: font-size var(--t-base) var(--ease),
              left var(--t-base) var(--ease),
              top var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.brand .bars { display: none; }
.brand::after { content: "."; color: var(--c-coral); font-family: var(--font-nav); font-weight: var(--w-black); }

.nav__links {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .3rem; padding-top: 0;
  transition: gap var(--t-base) var(--ease);
}
.nav__links a {
  font-family: var(--font-nav); font-size: .9rem; line-height: 1.25; letter-spacing: 0; font-weight: var(--w-med);
  color: var(--text-secondary); position: relative; padding: 2px 0; transition: color var(--t-fast);
}
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--c-coral); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.nav__links a:hover, .nav__links a.active { color: var(--text); }
.nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: .9rem; }

/* Outlined arrow CTA (from components/button.txt) — the nav "Talk to us" button.
   Transparent with a brand-accent outline + leading arrow; fills on hover. */
.btn-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 2.9em;
  padding: 0 1.3em 0 3.1em;       /* extra left room for the arrow */
  background-color: transparent;
  color: var(--text);
  border: .14em solid var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-nav);
  font-weight: var(--w-med);
  font-size: .88rem;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.btn-arrow svg {
  position: absolute;
  left: 1.1em;
  width: 1.45em; height: 1.45em;
  transition: transform .5s var(--ease);
}
.btn-arrow .text { line-height: 1; }
.btn-arrow:hover { background-color: var(--accent); color: #fff; box-shadow: var(--shadow-md); }
.btn-arrow:hover svg { transform: translateX(5px); }

/* ----- Scrolled: collapse into a floating pill ----- */
/* Once scrolled past the threshold, the nav becomes a pinned pill that drops
   in from the top — separate from the full bar, which has scrolled away. */
.nav.scrolled { position: fixed; padding-top: clamp(12px, 1.6vw, 16px); animation: navDrop .45s var(--ease); }
@keyframes navDrop { from { transform: translateY(-130%); } to { transform: translateY(0); } }
.nav.scrolled .nav__inner {
  max-width: fit-content;
  align-items: center;
  gap: 1.75rem;
  padding: 7px 7px 7px 22px;
  background: rgba(15,16,17,.72);
  border-color: var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 34px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav.scrolled .brand {
  position: static; transform: none; left: auto; top: auto;
  font-size: 1.1rem;
}
.nav.scrolled .nav__links {
  flex-direction: row; align-items: center; gap: 1.6rem; padding-top: 0;
}
.nav.scrolled .nav__links a::after { bottom: -3px; }

/* ===== Second navbar — a SEPARATE floating pill that slides down from the
   top after a few scrolls. Independent of the full bar above (no morphing). ===== */
.navpill {
  position: fixed; top: clamp(12px,1.6vw,16px); left: 50%; z-index: 60;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 7px 7px 7px 22px;
  background: rgba(15,16,17,.72); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); box-shadow: 0 10px 34px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translate(-50%, -180%); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.navpill.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.navpill__brand { font-family: var(--font-nav); font-weight: var(--w-bold); font-size: 1.1rem; letter-spacing: -.02em; color: var(--text); }
.navpill__brand::after { content: "."; color: var(--c-coral); font-family: var(--font-nav); font-weight: var(--w-black); }
.navpill__links { display: flex; align-items: center; gap: 1.6rem; }
.navpill__links a { font-family: var(--font-nav); font-size: .9rem; font-weight: var(--w-med); color: var(--text-secondary); position: relative; transition: color var(--t-fast); }
.navpill__links a:hover, .navpill__links a.active { color: var(--text); }
.navpill__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--c-coral); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.navpill__links a:hover::after, .navpill__links a.active::after { transform: scaleX(1); }
.navpill .btn-arrow { font-size: .8rem; height: 2.7em; }
@media (prefers-reduced-motion: reduce){ .navpill { transition: opacity .3s; } }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; align-self: center; }
.nav__toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav.open .nav__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ opacity: 0; }
.nav.open .nav__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* On mobile the full bar stays pinned as a pill with a hamburger; the
     separate slide-in pill is hidden (the bar itself stays put). */
  .nav { position: fixed; padding: 14px var(--pad) 0; }
  .navpill { display: none !important; }
  .nav__inner,
  .nav.scrolled .nav__inner {
    max-width: var(--maxw);
    align-items: center;
    gap: 1rem;
    padding: 8px 10px 8px 20px;
    background: rgba(15,16,17,.78);
    border-color: var(--hairline);
    border-radius: var(--r-pill);
    box-shadow: 0 10px 34px -12px rgba(0,0,0,.7);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .brand, .nav.scrolled .brand {
    position: static; transform: none; left: auto; top: auto;
    font-size: 1.25rem;
  }
  .nav__toggle { display: flex; }
  .nav__links,
  .nav.scrolled .nav__links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg-elevated); border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 0 var(--pad); max-height: 0; overflow: hidden;
    transition: max-height var(--t-base) var(--ease);
    box-shadow: var(--shadow-md);
  }
  .nav.open .nav__links { max-height: 70vh; padding: .5rem var(--pad) 1rem; }
  .nav__links a { width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--hairline); font-size: 1.05rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(205px, 19vw, 240px); padding-bottom: var(--section); overflow: hidden; }
/* Cinematic image — sits on the right, fades into the dark on the left so
   the left-aligned headline stays fully legible. Desaturated for the B&W theme. */
.hero__media {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../images/hero.jpg) center 32% / cover no-repeat;
  filter: grayscale(1) contrast(1.18) brightness(.92);
}
/* cinematic dark wash — keeps the left-aligned headline fully legible and
   fades the image into the page at top (nav) and bottom. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(8,9,10,.94) 0%, rgba(8,9,10,.72) 40%, rgba(8,9,10,.5) 100%),
    linear-gradient(to bottom, rgba(8,9,10,.85) 0%, transparent 26%, transparent 52%, var(--bg) 100%),
    radial-gradient(130% 90% at 72% 38%, transparent 28%, rgba(8,9,10,.55) 100%);
}
@media (max-width: 760px){
  .hero__media::after { background:
    linear-gradient(to bottom, rgba(8,9,10,.7) 0%, rgba(8,9,10,.55) 40%, var(--bg) 100%); }
}

/* giant faint wordmark behind the hero (portfolio-style watermark) */
.hero__word {
  position: absolute; left: 0; right: 0; bottom: 7%; z-index: 0; text-align: center;
  font-family: var(--font-display); font-weight: 800; text-transform: lowercase;
  font-size: clamp(6rem, 23vw, 23rem); line-height: .8; letter-spacing: -.06em;
  color: #fff; opacity: .045; pointer-events: none; user-select: none; white-space: nowrap;
}
.hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 45% at 14% 2%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(46% 42% at 90% 8%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(60% 55% at 60% 100%, rgba(255,255,255,.04), transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero__kicker { margin-bottom: 1.6rem; }
.hero .display { margin-bottom: 1.6rem; }
.hero__sub { max-width: 56ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* Spec strip / metric tiles */
.specstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; margin-top: clamp(44px, 6vw, 76px); box-shadow: var(--shadow-sm); }
.specstrip .cell { background: var(--bg-elevated); padding: 1.5rem 1.4rem; }
.specstrip .num { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -.02em; color: var(--text); }
.specstrip .num em { font-style: normal; background: var(--m-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.specstrip .lbl { font-size: .82rem; color: var(--text-muted); margin-top: .45rem; }
@media (max-width: 720px){ .specstrip { grid-template-columns: repeat(2, 1fr); } }

/* Manifesto band — one bold line framed by fading hairlines */
.manifesto { display: flex; align-items: center; gap: clamp(1.1rem, 4vw, 3rem); padding: clamp(2.6rem, 7vw, 5.5rem) 0 clamp(1rem, 2.4vw, 1.8rem); }
.manifesto__rule { flex: 1 1 0; height: 1px; min-width: 24px; background: linear-gradient(90deg, transparent, var(--hairline-strong) 50%, transparent); }
.manifesto__line { flex: 0 1 auto; max-width: 40ch; min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-heading); font-weight: var(--w-bold); font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; color: var(--text); transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); }
.manifesto__line.is-out { opacity: 0; transform: translateY(8px); filter: blur(5px); }
.manifesto__line em { font-style: normal; background: var(--m-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px){ .manifesto__line { font-size: clamp(1.3rem, 6vw, 1.7rem); } .manifesto { gap: 1rem; } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--hairline); padding-block: 1.3rem; overflow: hidden; position: relative; z-index: 1; background: var(--bg-elevated); }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: scroll-x 36s linear infinite; }
.marquee__track span { font-family: var(--font-body); font-size: .92rem; letter-spacing: .02em; font-weight: var(--w-med); color: var(--text-muted); display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; }
.marquee__track span::after { content: "·"; color: var(--c-coral); font-weight: 700; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Section heading ---------- */
.shead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.shead .left { max-width: 62ch; }
.shead .eyebrow { margin-bottom: 1.1rem; }
.shead p { margin-top: 1rem; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .grid--3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 680px){ .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-elevated); padding: clamp(1.6rem, 3vw, 2.3rem);
  position: relative; transition: background var(--t-fast), transform var(--t-fast);
  display: flex; flex-direction: column; gap: .9rem; min-height: 100%;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-coral); transform: scaleY(0); transform-origin: top; transition: transform var(--t-base) var(--ease); }
.card:hover { background: var(--surface-2); }
.card:hover::before { transform: scaleY(1); }
.card .idx { display: block; margin-bottom: .3rem; }
.card p { color: var(--text-secondary); }
.card .linkarrow { margin-top: auto; align-self: flex-start; }
.card.link { cursor: pointer; }

/* Feature rows */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.4rem,5vw,4rem); border-top: 1px solid var(--hairline); }
.feature-row:nth-child(even) .feature-row__media { order: -1; }
@media (max-width: 860px){ .feature-row { grid-template-columns: 1fr; } .feature-row:nth-child(even) .feature-row__media { order: 0; } }
.feature-row h3 { margin-bottom: 1rem; }
.feature-row p { color: var(--text-secondary); margin-bottom: 1.3rem; }

/* Faux panel (legacy) */
.panel { background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--shadow-sm); }
.panel__bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--hairline); background: var(--surface-2); }
.panel__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-strong); }
.panel__bar i:nth-child(1){ background: var(--c-coral); }
.panel__body { padding: 18px; display: grid; gap: 12px; }
.panel__row { height: 12px; border-radius: var(--r-pill); background: var(--surface-2); }
.panel__row.w70 { width: 70%; } .panel__row.w50 { width: 50%; } .panel__row.w40{width:40%;}
.panel__bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 8px; }
.panel__bars i { flex: 1; border-radius: 6px 6px 0 0; background: var(--surface-2); }
.panel__bars i.hot { background: var(--m-gradient); }

/* tick list */
.ticklist { display: grid; gap: 1rem; }
.ticklist li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; color: var(--text-secondary); }
.ticklist li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c-coral); margin-top: .35rem; }
.ticklist li strong { color: var(--text); font-weight: var(--w-semi); }

/* numbered steps (legacy static) */
.steps { border-top: 1px solid var(--hairline); }
.step { display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; padding-block: clamp(1.6rem,3vw,2.4rem); border-bottom: 1px solid var(--hairline); align-items: baseline; }
.step .n { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(1.6rem,3vw,2.4rem); background: var(--m-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.03em; }
.step h3 { margin-bottom: .6rem; }
.step p { color: var(--text-secondary); max-width: 65ch; }
@media (max-width:560px){ .step { grid-template-columns: 1fr; gap:.6rem; } }

/* ---------- Founders (legacy) ---------- */
.founders { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
@media (max-width:680px){ .founders { grid-template-columns: 1fr; } }
.founder { background: var(--bg-elevated); padding: clamp(1.8rem,4vw,3rem); }
.founder .avatar { width: 60px; height: 60px; border-radius: var(--r-md); background: var(--m-gradient); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.4rem; color:#fff; margin-bottom: 1.3rem; }
.founder h3 { margin-bottom: .3rem; }
.founder .role { font-size: .9rem; font-weight: var(--w-semi); color: var(--c-coral); }

/* ---------- CTA band — inset "Talk to us" card with a diagonal corner-frame ----------
   Rounded dark card (inset from the page) lit from the top-left. The border
   appears ONLY at the top-left and bottom-right corners (two L-brackets that
   fade out along the edges). The closing glow now lives in the card background
   so ::before / ::after are free for the corner frame. */
/* Closing CTA: a clean FULL-WIDTH dark band (no card frame / no inset) — just a
   soft glow on the theme background, so it blends into the page. */
.cta-band {
  position: relative; overflow: hidden; color: #fff;
  margin: 0;
  border-radius: 0;
  /* ONE uniform size on every page: full-width (already) + fixed 600px height, content centered */
  min-height: 600px;
  display: flex; align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(52% 58% at 50% 16%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(58% 80% at 50% 116%, rgba(255,255,255,.15), transparent 72%),
    var(--bg);
}
/* services' CTA carries .contact-screen (full-screen scroll-reveal); pin it to the same 600px */
.cta-band.contact-screen { min-height: 600px; }
@media (max-width: 640px){
  .cta-band, .cta-band.contact-screen { min-height: 460px; }
}
/* white foggy haze drifting behind the CTA — same on every page */
.cta-band::before {
  content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 46% at 26% 30%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(40% 52% at 70% 38%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(30% 44% at 50% 74%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(26% 40% at 84% 66%, rgba(255,255,255,.10), transparent 72%);
  filter: blur(34px);
  animation: ctaFog 18s ease-in-out infinite alternate;
}
@keyframes ctaFog {
  0%   { transform: translate3d(-2.5%, 1%, 0) scale(1); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){ .cta-band::before { animation: none; } }
.cta-band .wrap { position: relative; z-index:2; text-align: center; display: grid; justify-items: center; gap: 1.6rem; }
.cta-band .h1 { max-width: 18ch; color: #fff; }
.cta-band .eyebrow { color: #d0d6e0; }
.cta-band .eyebrow::before { background: #d0d6e0; }

/* trust microcopy */
.cta__trust { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.06em; color:var(--text-muted); margin:0; }
.cta__trust svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:#fff; }
.cta__trust .sep { opacity:.45; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .82rem; letter-spacing: .02em; font-weight: var(--w-semi); color: var(--text-secondary); }
.field input, .field textarea, .field select {
  background: var(--bg-elevated); border: 1px solid var(--hairline-strong); color: var(--text);
  padding: .85rem 1rem; border-radius: var(--r-sm); font-family: var(--font-body); font-size: 1rem; font-weight: var(--w-reg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-coral); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.field textarea { resize: vertical; min-height: 130px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width:560px){ .form__row { grid-template-columns: 1fr; } }
.form__note { font-family: var(--font-body); font-size: .88rem; color: var(--c-green); font-weight: var(--w-semi); min-height: 1.2em; }

.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-aside { display: grid; gap: 1.5rem; }
.contact-aside .row { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.contact-aside .row .k { font-size: .8rem; letter-spacing: .02em; font-weight: var(--w-semi); color: var(--text-muted); margin-bottom: .4rem; }

/* ---------- Prose ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.4rem; margin-top: 2.6rem; margin-bottom: .8rem; }
.prose p, .prose li { color: var(--text-secondary); margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; }

/* ---------- Footer — light ---------- */
/* Footer — radial top-glow + blurred divider adapted from components/footer-animation.txt */
.footer { border-top: 1px solid var(--hairline); background-color: var(--bg); background-image: radial-gradient(38% 140px at 50% 0%, rgba(247,248,248,.05), transparent 70%); position: relative; z-index: 1; }
.footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%); width: 33%; height: 1px; border-radius: var(--r-pill); background: var(--text); opacity: .18; filter: blur(.5px); pointer-events: none; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; padding-block: clamp(3rem,6vw,5rem); }
@media (max-width: 820px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer__top { grid-template-columns: 1fr; } }
/* The shared .brand is position:absolute for the nav's centered-logo trick — reset it
   here so the footer wordmark sits in normal flow (logo → description → social), not
   floating over the copy. */
.footer__brand .brand { position: static; transform: none; left: auto; top: auto; display: inline-flex; margin-bottom: 1.2rem; }
.footer__brand p { color: var(--text-muted); max-width: 34ch; }
.footer__col h4 { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.1rem; font-weight: var(--w-semi); }
.footer__col a { display: block; color: var(--text-secondary); padding: .35rem 0; transition: color var(--t-fast); font-size: .98rem; }
.footer__col a:hover { color: var(--c-coral); }
/* Social links row (lives in the brand column) */
.footer__social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--hairline); color: var(--text-muted); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.footer__social a:hover { color: var(--c-coral); border-color: var(--hairline-strong); background: var(--surface-2); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; padding-block: 1.5rem; border-top: 1px solid var(--hairline); font-size: .85rem; color: var(--text-muted); }

/* Staggered blur+lift reveal — mirrors the AnimatedContainer in footer-animation.txt
   (filter blur(4px)->0, translateY(-8px)->0, opacity 0->1). JS gates with .is-revealing
   so the footer is always visible when JS is off; .is-in fires when it scrolls into view. */
.footer.is-revealing .footer__top > * { opacity: 0; filter: blur(4px); transform: translateY(-8px); transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); }
.footer.is-revealing.is-in .footer__top > * { opacity: 1; filter: blur(0); transform: none; }
.footer.is-revealing .footer__top > *:nth-child(1) { transition-delay: .1s; }
.footer.is-revealing .footer__top > *:nth-child(2) { transition-delay: .2s; }
.footer.is-revealing .footer__top > *:nth-child(3) { transition-delay: .3s; }
.footer.is-revealing .footer__top > *:nth-child(4) { transition-delay: .4s; }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding-top: clamp(180px,16vw,210px); padding-bottom: clamp(38px,5vw,68px); position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.page-hero__glow { position:absolute; inset:0; background: radial-gradient(50% 80% at 10% 0%, rgba(255,255,255,.05), transparent 65%); pointer-events:none; }
.page-hero .eyebrow { margin-bottom: 1.3rem; }
.page-hero .h1 { margin-bottom: 1.3rem; max-width: 18ch; }
.page-hero .lead { max-width: 62ch; }
.breadcrumb { font-size: .85rem; letter-spacing: .01em; color: var(--text-muted); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--c-coral); }
.breadcrumb span { color: var(--c-coral); }

/* ---------- Motion / reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

.load { opacity: 0; transform: translateY(26px); animation: fadeUp .9s var(--ease) forwards; }
.load.s1 { animation-delay: .05s; } .load.s2 { animation-delay: .15s; }
.load.s3 { animation-delay: .25s; } .load.s4 { animation-delay: .35s; } .load.s5 { animation-delay: .46s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .load { opacity: 1 !important; transform: none !important; }
  .footer.is-revealing .footer__top > * { opacity: 1 !important; filter: none !important; transform: none !important; }
  .marquee__track { animation: none; }
}