/* ==========================================================================
   Aulis marketing site — Direction B, "Steel".
   Dark hero slab, light body, dark CTA. The slab is theme-invariant: it is the
   brand's front door and stays gunmetal in both themes. Everything below it
   flips.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */

@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/CabinetGrotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/CabinetGrotesk-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Google ships JetBrains Mono 400 and 500 as one variable file, so one rule
   covering the range is the whole family rather than a missing weight. */
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------- tokens -- */

:root {
  /* palette, fixed in both themes */
  --ink: #0C1116;
  --panel-dark: #161D24;
  --paper: #EDF1F3;
  --card: #FFFFFF;
  --accent: #00D1B7;
  --accent-ink: #04211D;
  --accent-deep: #3F7C74;

  /* semantic, light theme */
  --page: var(--paper);
  --surface: var(--card);
  --text: #0C1116;
  --dim: rgba(12, 17, 22, .60);
  --faint: rgba(12, 17, 22, .40);
  --line: rgba(12, 17, 22, .10);
  --chip: #EDF1F3;
  --chip-text: rgba(12, 17, 22, .72);
  --eyebrow: var(--accent-deep);
  --shadow: 0 1px 2px rgba(12, 17, 22, .05), 0 8px 24px rgba(12, 17, 22, .06);

  --maxw: 1140px;
  --pad: 32px;
}

:root[data-theme='dark'] {
  --page: var(--ink);
  --surface: var(--panel-dark);
  --text: #EDF1F3;
  --dim: rgba(237, 241, 243, .60);
  --faint: rgba(237, 241, 243, .38);
  --line: rgba(237, 241, 243, .11);
  --chip: rgba(237, 241, 243, .06);
  --chip-text: rgba(237, 241, 243, .74);
  --eyebrow: var(--accent);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .30);
}

/* no-JS fallback: follow the OS until app.js pins an explicit theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --page: var(--paper); --surface: var(--card); --text: #0C1116;
    --dim: rgba(12, 17, 22, .60); --faint: rgba(12, 17, 22, .40);
    --line: rgba(12, 17, 22, .10); --chip: #EDF1F3;
    --chip-text: rgba(12, 17, 22, .72); --eyebrow: var(--accent-deep);
  }
}

/* ---------------------------------------------------- theme cross-fade -- */
/* Colour only, and only while [data-theming] is on the root (about 600ms per
   switch, cleared by app.js). A permanent transition on * makes every hover
   and every scroll-driven change feel like syrup. */

:root[data-theming] *,
:root[data-theming] *::before,
:root[data-theming] *::after {
  transition: background-color .42s ease, color .42s ease,
              border-color .42s ease, box-shadow .42s ease, fill .42s ease !important;
}

/* ----------------------------------------------------------- skeleton -- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--page);
  color: var(--text);
  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

h1, h2, h3, .logo {
  font-family: 'Cabinet Grotesk', 'General Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.022em;
}

a { color: inherit; }

img { display: block; max-width: 100%; height: auto; }

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

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

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px;
  padding: 12px 22px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-p { background: var(--accent); color: var(--accent-ink); }
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 209, 183, .30); }
.btn-g { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(237, 241, 243, .24); }
.btn-g:hover { box-shadow: inset 0 0 0 1px rgba(237, 241, 243, .5); transform: translateY(-1px); }
/* the founder band's button sits on a themed surface, so its ghost twin is
   never used there — only the teal one appears below the slab */

/* ============================ 1 + 2 · SLAB ============================== */
/* Theme-invariant. Always --ink, always the teal glow. */

.slab {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
}

/* Flat background-color shaped by a mask, because gradients do not
   interpolate and this overlay has to survive the cross-fade. */
.glow {
  position: absolute; inset: 0; z-index: -1;
  background-color: rgba(0, 209, 183, .19);
  -webkit-mask-image: radial-gradient(118% 76% at 50% -10%, #000 0%, rgba(0, 0, 0, .34) 38%, transparent 70%);
  mask-image: radial-gradient(118% 76% at 50% -10%, #000 0%, rgba(0, 0, 0, .34) 38%, transparent 70%);
  pointer-events: none;
}

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(237, 241, 243, .09);
}
.logo {
  font-weight: 800; font-size: 21px; letter-spacing: -.015em;
  text-decoration: none; color: var(--paper);
}
.navlinks { display: flex; gap: 26px; font-size: 14.5px; font-weight: 500; }
.navlinks a { color: rgba(237, 241, 243, .70); text-decoration: none; }
.navlinks a:hover { color: var(--paper); }
.navright { display: flex; align-items: center; gap: 12px; }

.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: transparent; color: rgba(237, 241, 243, .74);
  box-shadow: inset 0 0 0 1px rgba(237, 241, 243, .18);
  cursor: pointer;
}
.toggle:hover { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(237, 241, 243, .4); }
.toggle .ico-moon { display: none; }
:root[data-theme='dark'] .toggle .ico-sun { display: none; }
:root[data-theme='dark'] .toggle .ico-moon { display: block; }

.hero { text-align: center; padding: 78px 0 76px; }
.pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.pill {
  border-radius: 999px; padding: 6px 13px;
  background: rgba(237, 241, 243, .05); color: rgba(237, 241, 243, .70);
  box-shadow: inset 0 0 0 1px rgba(237, 241, 243, .11);
}

h1 {
  font-size: clamp(33px, 5.6vw, 66px);
  line-height: 1.04; letter-spacing: -.028em;
  margin-bottom: 20px;
  text-wrap: balance;
}
h1 em { color: var(--accent); font-style: normal; }

.sub {
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55;
  color: rgba(237, 241, 243, .60);
  max-width: 540px; margin: 0 auto 30px;
}
.ctarow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================== bands ================================== */

.band { background: var(--page); color: var(--text); padding: 78px 0; }
.band + .band { padding-top: 0; }

.eyebrow { display: block; color: var(--eyebrow); margin-bottom: 14px; }

h2 {
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;
  letter-spacing: -.024em; margin-bottom: 12px;
}
.lede { font-size: 16.5px; line-height: 1.55; color: var(--dim); max-width: 470px; margin-bottom: 36px; }

/* ------------------------- 3 · the walkthrough -------------------------- */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  /* the darkest stop of the cut's own backdrop, so a pixel of letterboxing on
     an odd viewport reads as part of the picture rather than as a black bar */
  background: #050c0b;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
/* the skeleton's `img { display: block }` does not reach a video element, and
   without it the inline baseline leaves a gap under the frame */
.player video { display: block; width: 100%; height: 100%; }

/* The whole frame is the target, so a click anywhere starts playback. */
.playbtn {
  position: absolute; inset: 0;
  display: block;
  background: transparent; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.playbtn[hidden] { display: none; }

/* NOT centred. The poster puts the handset right of middle, so a disc in the
   centre of the frame lands on the screen and covers the one thing the picture
   is there to show. These percentages park it in the bare lower left, under the
   poster's own headline and rule, and they are percentages so it stays put at
   every width. */
.playbtn .disc {
  position: absolute; left: 5.4%; top: 63%;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
  transition: transform .18s ease;
}
.playbtn:hover .disc { transform: scale(1.07); }
/* a triangle's visual centre sits left of its bounding box, so it needs nudging
   right to look centred in a circle */
.playbtn svg { display: block; margin-left: 4px; }

/* ------------------------- 4 · what it does ---------------------------- */

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  position: relative; overflow: hidden;
  background: var(--surface); border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: var(--shadow);
}
.card .edge { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.card h3 {
  font-size: 23px; font-weight: 700; letter-spacing: -.015em;
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.card h3 .mono { color: var(--faint); }
.card p { font-size: 14.5px; line-height: 1.5; color: var(--dim); margin-bottom: 15px; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tag {
  border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 500;
  background: var(--chip); color: var(--chip-text);
}
:root[data-theme='dark'] .tag { box-shadow: inset 0 0 0 1px var(--line); }

.shots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 760px; margin: 46px auto 0;
}
.shot { margin: 0; }
.shot img {
  width: 100%; aspect-ratio: 780 / 1688; object-fit: cover; object-position: top;
  border-radius: 14px; background: var(--surface);
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.shot figcaption { color: var(--faint); text-align: center; margin-top: 10px; }

/* ------------------------------ 5 · stats ------------------------------ */

.statsband[hidden] { display: none; }
/* auto-fit, because the band renders three metrics as often as four and a
   fixed four-column grid leaves a hole where the fourth would have been */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat {
  background: var(--surface); border-radius: 16px; padding: 26px 24px;
  box-shadow: var(--shadow);
}
.stat .num {
  display: block;
  font-family: 'Cabinet Grotesk', 'General Sans', sans-serif;
  font-weight: 800; font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1; letter-spacing: -.03em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
:root[data-theme='dark'] .stat .num { color: var(--accent); }
.stat .lbl { display: block; margin-top: 12px; font-size: 14.5px; color: var(--dim); }
.asof { margin-top: 18px; color: var(--faint); }

/* -------------------------- 6 · portals running ------------------------ */

.logoband .wrap { padding-top: 0; }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lg {
  background: var(--card); border-radius: 14px; padding: 24px 14px 20px;
  text-align: center; box-shadow: var(--shadow);
  border: 1px solid rgba(12, 17, 22, .06);
}
.lgmark { height: 52px; display: flex; align-items: center; justify-content: center; }
.lgmark img { max-height: 52px; width: auto; object-fit: contain; }
.lgname {
  display: block; margin-top: 14px;
  font-family: 'Cabinet Grotesk', 'General Sans', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: -.012em; color: var(--ink);
}
.lg small { display: block; margin-top: 5px; color: rgba(12, 17, 22, .45); }

/* ------------------------- 7 · who built this -------------------------- */

.founder .fpanel {
  display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center;
  background: var(--surface); border-radius: 22px; padding: 48px 46px;
  box-shadow: var(--shadow);
}
.fcopy h2 { margin-bottom: 18px; }
.fcopy p { font-size: 16.5px; line-height: 1.6; color: var(--dim); margin-bottom: 16px; max-width: 60ch; }
.fsign {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint) !important; margin-bottom: 26px !important;
}
.fmark { display: flex; align-items: center; justify-content: center; }
.fmark img { max-height: 210px; width: auto; opacity: .9; }
:root[data-theme='dark'] .fmark img { filter: invert(1) brightness(1.6); opacity: .5; }

/* ---------------------------- 8 · questions ---------------------------- */

.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.chev {
  flex: 0 0 auto; position: relative; width: 13px; height: 13px;
  transition: transform .2s ease;
}
.chev::before, .chev::after {
  content: ''; position: absolute; background: var(--accent-deep); border-radius: 2px;
}
:root[data-theme='dark'] .chev::before,
:root[data-theme='dark'] .chev::after { background: var(--accent); }
.chev::before { left: 0; right: 0; top: 5.5px; height: 2px; }
.chev::after { top: 0; bottom: 0; left: 5.5px; width: 2px; }
.faq details[open] .chev::after { opacity: 0; }
.ans { padding: 0 2px 22px; }
.ans p { font-size: 15.5px; line-height: 1.62; color: var(--dim); max-width: 72ch; }

/* --------------------------- 9 · CTA marquee --------------------------- */

.marquee {
  display: block; overflow: hidden; text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: 34px 0; margin-top: 78px;
  border-top: 1px solid rgba(237, 241, 243, .12);
}
.marquee .run {
  display: inline-flex; align-items: center; gap: 34px; white-space: nowrap;
  font-family: 'Cabinet Grotesk', 'General Sans', sans-serif;
  font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.026em;
  animation: slide 24s linear infinite;
}
.marquee .dot {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--accent); color: var(--accent-ink);
}
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .run { animation-play-state: paused; }

/* ------------------------------ 10 · footer ----------------------------- */

.footer { background: var(--page); color: var(--text); padding: 40px 0 52px; }
.frow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.flogo { color: var(--text); }
.fmeta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--dim); }
.fmeta a { text-decoration: none; }
.fmeta a:hover { color: var(--accent-deep); }
:root[data-theme='dark'] .fmeta a:hover { color: var(--accent); }
.fnote { margin-top: 18px; font-size: 14px; color: var(--faint); }

/* ============================ reduced motion =========================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee .run { animation: none; }
  .btn:hover { transform: none; }
  :root[data-theming] *,
  :root[data-theming] *::before,
  :root[data-theming] *::after { transition: none !important; }
}

/* ?still parks every animation so screenshot QA is deterministic */
:root.still .marquee .run { animation: none; }
:root.still { scroll-behavior: auto; }

/* ============================== breakpoints ============================ */

@media (max-width: 980px) {
  .founder .fpanel { grid-template-columns: 1fr; gap: 28px; padding: 40px 34px; }
  .fmark { order: -1; justify-content: flex-start; }
  .fmark img { max-height: 120px; }
}

@media (max-width: 900px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .navlinks { display: none; }
}

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; }
  .band { padding: 58px 0; }
  .hero { padding: 58px 0 60px; }
  .shots { grid-template-columns: 1fr; max-width: 250px; }
  /* A 16:9 frame is only about 197px tall at 390px wide, so the desktop disc is
     a third of its height. Smaller, and anchored to the bottom rather than to
     63% of it, because a percentage that leaves room on a big frame leaves the
     disc almost touching the edge on a small one. */
  .player { border-radius: 14px; }
  .playbtn .disc { width: 52px; height: 52px; left: 6%; top: auto; bottom: 10%; }
  .playbtn svg { width: 17px; height: 18px; }
  .founder .fpanel { padding: 32px 22px; }
  .marquee { padding: 26px 0; margin-top: 58px; }
  .marquee .dot { width: 30px; height: 30px; font-size: 16px; }
  .btn { padding: 12px 18px; }
  .frow { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .ctarow .btn { flex: 1 1 100%; }
}