/* Amssai DS v0.2 — /landing-v2 in full dark, premium finish (AAI-426).

   WHY AN OVERRIDE AND NOT AN EDIT. This directory is the committed static export
   of the PoC landing (see 791d9eb); its source is not in this repo, and its four
   compiled stylesheets are regenerated wholesale on every re-export. This file is
   hand-written, same shape and same reason as session-nav.css beside it: linked
   from index.html and demo/index.html AFTER every compiled stylesheet, so a
   re-export must re-add the <link>, exactly as it already has to for session-nav.

   WHAT IT DOES. The export alternates `data-band="day"` (#eaf0f0) and
   `data-band="night"` (#101919, DS v0.1) sections, and the header follows via
   `data-nav-theme`. Every colour in the export resolves through CSS variables on
   those attributes, so remapping the variables here repaints the page without
   touching a compiled rule. Both bands land on the v0.2 night palette (the
   client reference = the website's src/app/globals.css :root, text-mute AA-fixed
   to #6d8381); they stay distinguishable by ground lift and by which side the
   teal glow sits on, not by light vs dark. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2')}

:root,
[data-band="day"],
[data-band="night"],
[data-surface],
[data-nav-theme="light"],
[data-nav-theme="dark"],
/* The home header's light state is (0,3,1) in the export
   (body:has([data-landing-root]) [data-home-nav][data-nav-theme=light]);
   the leading `html` makes this (0,3,2) so it wins. */
html body:has([data-landing-root]) [data-home-nav][data-nav-theme] {
  color-scheme: dark;
  --color-base: #06090a;
  --color-raised: #0d1516;
  --color-raised-2: #111d1e;
  --color-line: rgb(255 255 255 / 0.06);
  --color-line-strong: rgb(0 229 200 / 0.14);
  --color-ink: #e8f1f0;
  --color-ink-dim: #9fb3b1;
  --color-ink-faint: #6d8381;
  --color-accent: #00e5c8;
  --color-accent-strong: #0fb6a3;
  --color-accent-bright: #00e5c8;
  --color-accent-ink: #04201d;
  --surface-highlight: rgb(255 255 255 / 0.04);
  /* Elevation on a near-black ground: depth from a dark drop plus a faint teal
     rim, the way the reference's hero card reads, instead of grey shadows. */
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 229 200 / 0.06);
  --elev-2: 0 12px 30px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 229 200 / 0.08);
  --elev-3: 0 24px 60px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 229 200 / 0.10);
  --grad: linear-gradient(90deg, #00e5c8 0%, #008080 100%);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
}

html, body { background: #06090a; }
body { font-family: var(--font-sans); }
/* The export names its display family through next/font's generated variables. */
h1, h2, h3, .lp-root { font-family: var(--font-sans); }

/* Grounds. "day" bands sit on the reference ground with its two glows (top-right
   teal, top-left deep teal — the website's #amssai::before, verbatim values);
   "night" bands lift one step and mirror the glow, so the rhythm survives. */
[data-band="day"] {
  background-color: #06090a;
  --ground-wash:
    radial-gradient(900px 600px at 78% -8%, rgb(0 229 200 / 0.10), transparent 60%),
    radial-gradient(700px 500px at 8% 12%, rgb(0 128 128 / 0.10), transparent 55%);
}
[data-band="night"] {
  --color-base: #0a1112;
  background-color: #0a1112;
  --ground-wash:
    radial-gradient(900px 600px at 22% -8%, rgb(0 229 200 / 0.08), transparent 60%),
    radial-gradient(700px 500px at 92% 20%, rgb(0 128 128 / 0.10), transparent 55%);
}
/* A gradient hairline where one band meets the next. */
section[data-band] + section[data-band] {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgb(0 229 200 / 0.28), transparent) 1;
}
/* Product mock-ups (app windows) are data-band="day" too: keep them as raised
   glass panels, not holes in the page. */
[data-app-window][data-band] {
  --color-base: #0d1516;
  background-color: #0d1516;
  --ground-wash: linear-gradient(160deg, rgb(0 229 200 / 0.07), rgb(0 128 128 / 0.03));
}

/* Gradient type: the hero accent phrase (the reference's "agentic analysis
   tool") and the seam titles' closing line. */
.lp-hero h1 span,
.lp-seam-title h2 span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* background-clip:text paints only inside the element's box, and these headings
   run at line-height ~1.04, so descenders (g, p, y) poke out below it and render
   transparent. Extend the paint box down; the negative margin cancels the extra
   height on the block h2, and padding on an inline span never moves the line box. */
.lp-hero h1 span,
.lp-seam-title h2 span {
  padding-bottom: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lp-seam-rule { background: var(--grad); }
/* The closing headline: the same gradient, whole-line. The !important guards the
   fill against the export's scroll reveal re-asserting a solid text colour. */
.lp-close .lp-seam-title h2 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* CTAs: the reference's gradient pill with the dark label. The header and mobile
   menu "Contact us" carry an inline #004e49 style, hence the !important there. */
.bg-accent.text-accent-ink {
  background-image: var(--grad);
  color: #04201d;
}
.bg-accent.text-accent-ink:hover { filter: brightness(1.08); }
a[href="/landing-v2/contact/"][style*="#004e49"] {
  background-color: #00e5c8 !important;
  background-image: var(--grad);
  color: #04201d !important;
}
.signin-pill { border-color: rgb(0 229 200 / 0.35); color: #e8f1f0; }
.signin-pill:hover { border-color: #00e5c8; color: #00e5c8; }

/* Header: frosted near-black glass in both nav themes. */
[data-nav-theme] .site-header-inner,
[data-nav-theme]:not([data-home-nav]) {
  background: rgb(6 9 10 / 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgb(0 229 200 / 0.12);
}
[data-nav-theme] .site-logo { background-color: #00e5c8; }

/* Photography made for the light bands: seat it in the dark ground instead of
   letting a bright image punch a hole in the page. */
[data-band] img[src*="/media/"]:not([src$=".svg"]) {
  filter: saturate(0.9) brightness(0.82) contrast(1.05);
}
/* The three module shots (/platform/*.jpeg) are light-UI renders, so they need a
   deeper seat plus a vignette. This is the most CSS can do: a raster made for a
   light page stays a light image. Dark renders of the three are the real fix. */
[data-band] img[src*="/platform/"] {
  filter: saturate(0.85) brightness(0.58) contrast(1.12);
}
/* Images made for the dark theme (AAI-438) are named *-dark.jpeg and need no
   seat: they are already on the dark ground, and either filter above would only
   crush them. The :not() only matches the /media/ rule's specificity, so this
   rule (later in the file) wins over both. */
[data-band] img[src$="-dark.jpeg"]:not([src$=".svg"]) {
  filter: none;
}
[data-app-window]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(6 9 10 / 0.55) 100%),
    linear-gradient(180deg, transparent 60%, rgb(6 9 10 / 0.5) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-accent.text-accent-ink:hover { filter: none; }
}

/* ---- Hard-coded light / v0.1 literals in the export (not variable-driven) ---- */

/* The section-to-section wipe ("curtain") paints the band it came FROM. */
[data-curtain-band="day"],
.lp-root .lp-curtain[data-lp-from="day"] { background: #06090a; }
[data-curtain-band="night"],
.lp-root .lp-curtain[data-lp-from="night"] { background: #0a1112; }
.home-hero-wash { background: rgb(6 9 10 / 0.7); }

/* The donut chart's conic ring: the export's two grey stops become the teal
   ramp, deepest last. */
.lp-root .lp-donut {
  background: conic-gradient(#00e5c8 0 42%, #0fb6a3 42% 68%, #008080 68% 87%, #004e4e 87%);
}
.lp-root .lp-donut:after { background: var(--color-base); }

/* ---- Closing CTA: a lit stage instead of an empty dark room ---- */
.lp-close .lp-seam-body::before {
  content: "";
  position: absolute;
  inset: -12% 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 50% 30%, rgb(0 229 200 / 0.14), transparent 70%),
    radial-gradient(70% 55% at 50% 80%, rgb(0 128 128 / 0.10), transparent 75%);
}
/* No side decorations: the closing CTA stands on the spotlight alone. The field
   holds the oversized brand symbol (left) and the conic orbit ring (right). */
.lp-close-field { display: none; }
.lp-close-action > a {
  box-shadow: 0 12px 40px -10px rgb(0 229 200 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.25);
}
/* The AMSSAI wordmark ships as a dark-teal SVG drawn for the light band. Render
   it in the reference's text colour with a soft teal halo. */
.lp-brand-name {
  filter: brightness(0) invert(0.93) drop-shadow(0 0 28px rgb(0 229 200 / 0.28));
}
.lp-brand-symbol {
  filter: drop-shadow(0 0 22px rgb(0 229 200 / 0.35));
}
/* The hero's centred finale beat: the brand symbol in the navbar logo's bright
   teal, painted the navbar's way (.site-logo: a colour masked by the SVG). The
   SVG is a single-fill silhouette drawn in #004e49 for the light band, so its
   alpha is an exact mask; object-position pushes the <img>'s own dark-teal
   pixels out of its box so only the masked colour shows. (A drop-shadow would
   be masked away with it, so none here.) */
.lp-hero-brand .lp-brand-symbol {
  background-color: #00e5c8;
  -webkit-mask: url("/media/landing/brand-symbol.svg") center / contain no-repeat;
  mask: url("/media/landing/brand-symbol.svg") center / contain no-repeat;
  object-position: -99999px 0;
  filter: none;
}

/* ---- Navbar: a standard full-width sticky bar, never the island ----
   The export turns the header into a floating 900px pill ("island") once the hero
   scrolls away ([data-home-nav][data-home-island], set by its layout JS). DS v0.2
   keeps the reference's plain bar instead: full-bleed frosted glass with a teal
   hairline, the same in every scroll state. (/legacy-v2 goes the other way — see
   public/legacy-v2/legacy-island.js.) */
.site-header[data-home-nav],
.site-header[data-home-nav][data-home-island] {
  padding: 0;
  background: rgb(6 9 10 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgb(0 229 200 / 0.12);
}
[data-nav-theme] .site-header-inner,
.site-header[data-home-nav][data-home-island] .site-header-inner {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  max-width: 1360px; /* the bar's own max-w-[1360px]; the island narrows it to 900px */
  height: 64px;      /* the bar's own h-16; the island shrinks it to 52px */
  box-shadow: none;
  transform: none;
}

/* ---- Hero: the product interface framed like the reference's hero card ----
   Values are the website's own #amssai .hero-visual / .hv-head / .hv-screenshot.

   The frame is drawn on ::before, not on .lp-hero-product itself, so it can fade
   on its own: hero-frame.js sets --lp-frame-o from 1 to 0 in step with the
   cinematic's header-row fade (progress 0 -> 0.08), so the frame is gone before
   the app ([data-lp-window]) starts its glide to centre screen (AAI-438). The
   element can't just fade as a whole, because the app lives inside it.

   🔴 KEEP .lp-hero-product OUT OF THE STACKING ORDER. The app window is
   `position: relative; z-index: 5` and must paint above the cinematic's
   full-screen .lp-expand (z-index 4, elsewhere in the hero) during the finale.
   Any z-index / isolation / opacity / transform / filter on .lp-hero-product
   would make it a stacking context, trap the window inside it, and drop it
   below the expand. So ::before carries no z-index, and the header row is merely
   `position: relative` so it paints after ::before in DOM order. */
.lp-hero-product {
  position: relative;
  padding: 26px;
}
.lp-hero-product::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgb(0 229 200 / 0.14);
  border-radius: 22px;
  background: linear-gradient(160deg, rgb(0 229 200 / 0.07), rgb(0 128 128 / 0.03));
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
  opacity: var(--lp-frame-o, 1);
}
.lp-hero-product > .lp-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6d8381;
}
.lp-hero-product > .lp-eyebrow::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  background: url("/assets/amssai-icon.svg") center / contain no-repeat;
}
/* The app window's backdrop is a hand-off, keyed to the same --lp-frame-o. At
   rest it is the reference's dashed inner panel (::after). As the frame dissolves
   (just before the glide), the dashed panel fades out and the export's own solid card
   surface (::before, its original .lp-window-surface values) fades in, so the app
   travels as a standalone card, as the cinematic was designed. Both pseudos live
   on .lp-window-surface, which the cinematic itself fades (autoAlpha) at its
   finale, so neither backdrop can be left behind there either. */
.lp-hero-product .lp-query-window {
  padding: 14px;
}
.lp-hero-product .lp-window-surface {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.lp-hero-product .lp-window-surface::before,
.lp-hero-product .lp-window-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-hero-product .lp-window-surface::before {
  background: var(--color-base);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-window);
  box-shadow: inset 0 1px 0 var(--surface-highlight), var(--elev-3);
  opacity: calc(1 - var(--lp-frame-o, 1));
}
.lp-hero-product .lp-window-surface::after {
  border: 1px dashed rgb(0 229 200 / 0.14);
  border-radius: 12px;
  background: rgb(0 0 0 / 0.28);
  opacity: var(--lp-frame-o, 1);
}

/* ---- Narration beats: stay inside the centred card (AAI-438) ----
   The beats ("Ask in plain English.", the model chain, the portfolio) are sized
   by the export for its own, frameless app card: .lp-beat-ask is min(520px, 82vw)
   against a 577px card, a 28px gutter a side. The frame's padding above makes
   the card narrower (525px at 1440px wide, less on smaller screens), which put
   the composer against the card's edges, or past them. hero-frame.js publishes
   the card's width as --lp-window-w; cap every beat to keep that 28px gutter. */
.lp-root[data-lp-cinematic] .lp-beat {
  max-width: calc(var(--lp-window-w, 577px) - 56px);
}

/* ---- Scrollbar: translucent teal on the dark ground (AAI-438) ----
   The default scrollbar is a grey/white bar that reads as a hole in the page.
   `scrollbar-color` covers Chrome, Edge and Firefox (and is inherited, so inner
   scroll areas follow); the ::-webkit-scrollbar rules are for Safari, which
   ignores scrollbar-color. Chrome ignores the ::-webkit rules once
   scrollbar-color is set, so the two never fight. */
html {
  scrollbar-color: rgb(0 229 200 / 0.32) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 9999px;
  background: rgb(0 229 200 / 0.32) padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(0 229 200 / 0.55) padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}