/* Zerostand marketing site. One dark world, end to end. */

/* Fonts are served from this site (site/fonts, SIL Open Font License; see the OFL-*.txt files there),
   so a page load makes no request to a third party. Latin subsets; Space Grotesk and Inter are variable. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/SpaceGrotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/Inter-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-500-latin.woff2) format('woff2'); }

:root {
  --bg: #06071a;
  --bg-2: #0b0d2e;
  --ink: #ffffff;
  --ink-soft: #b9bbd8;
  --ink-faint: #8a8db3;
  --blue: #4f8bff;
  --indigo: #6350f7;
  --violet: #a24dff;
  --cyan: #22d3ee;
  --surface: rgba(99, 80, 247, 0.07);
  --surface-2: rgba(99, 80, 247, 0.13);
  --border: rgba(126, 114, 255, 0.28);
  --border-strong: rgba(126, 114, 255, 0.55);
  --brand: linear-gradient(135deg, var(--blue), var(--indigo) 55%, var(--violet));
  --display: 'Space Grotesk', sans-serif;
  --body: Inter, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  /* Content box, excluding the side gutters: 1520px on a wide screen, so a 1920px window keeps about
     130px of margin each side. Long text keeps its own ch/em limits (.sub, .section-head, .prose). */
  --wrap: 1520px;
  --gutter: clamp(24px, 5vw, 80px);
  --wrap-outer: calc(var(--wrap) + 2 * var(--gutter));
  --r: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
html, body { overflow-x: clip; }
body {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* A faint star field over the whole page, and a slow colour wash beneath. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 32%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 80%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 48%, rgba(255,255,255,0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 26%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 72%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 86%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 54%, rgba(255,255,255,0.3) 50%, transparent 51%),
    radial-gradient(1200px 700px at 50% -10%, rgba(99, 80, 247, 0.28), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
  background-size: 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 1400px 900px, 100% 100%, 100% 100%;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 { font-size: clamp(48px, 6vw, 86px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
.hl { background: linear-gradient(90deg, #7eb0ff, #a99bff 50%, #c98bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink-soft); max-width: 34em; }
.eyebrow { display: block; margin-bottom: 18px; font: 600 12px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: #9d93ff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap-outer); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.center .sub, .center .section-head { margin-left: auto; margin-right: auto; }

/* Section glow: a soft radial light behind a section, placed left or right. */
.section { position: relative; padding: 112px 0; }
.section-head { max-width: 760px; }
.section-head .sub { margin-top: 18px; }
/* The glows reach far past the screen edge on purpose. Each section clips them, because a phone browser
   otherwise widens the whole page to fit them and zooms out (body overflow-x alone does not stop it). */
.section, .feat, .band, .cover, .nums, .works { overflow-x: clip; }
@supports not (overflow: clip) { .section, .feat, .band, .cover, .nums, .works { overflow-x: hidden; } }
.glow { position: absolute; width: 900px; height: 600px; border-radius: 50%; pointer-events: none; filter: blur(40px); opacity: 0.55; z-index: -1; }
.glow.l { left: -300px; top: 10%; background: radial-gradient(closest-side, rgba(79, 139, 255, 0.35), transparent); }
.glow.r { right: -300px; top: 20%; background: radial-gradient(closest-side, rgba(162, 77, 255, 0.35), transparent); }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 15.5px/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 30px -12px rgba(99, 80, 247, 0.8); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { background: rgba(255, 255, 255, 0.04); color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.09); }
.btn-light { background: #fff; color: #14153a; }
.btn-light:hover { background: #ecefff; }
.btn .arr { font-size: 17px; line-height: 1; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---- top bar ---- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(6, 7, 26, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.top .wrap { display: flex; align-items: center; gap: 36px; height: 72px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup svg { flex: none; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.12em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 30px; margin-left: 12px; }
.nav a { font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.top .actions { margin-left: auto; gap: 12px; }
.top .btn { padding: 11px 20px; font-size: 14.5px; }

/* Dropdown menus (Platform, Solutions): a button opens a short list of links, each with one line of description.
   The .dd box spans the bar's height so the pointer never crosses a gap between the button and its menu. */
.nav .dd { position: relative; padding: 24px 0; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 500 15px/1.5 var(--body); color: var(--ink-soft); cursor: pointer; }
.dd-btn:hover, .dd.open .dd-btn, .dd:has([aria-current]) .dd-btn { color: #fff; }
.dd-btn .chev { transition: transform 0.15s; }
.dd.open .dd-btn .chev { transform: rotate(180deg); }
.dd-menu { display: none; position: absolute; left: -14px; top: 100%; margin-top: 1px; min-width: 340px; padding: 10px; border-radius: 14px; background: #0b0d2e; border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); z-index: 20; }
.dd.open .dd-menu { display: block; }
/* No JavaScript: the menu still opens on hover and on keyboard focus. */
html:not(.js) .dd:hover .dd-menu, html:not(.js) .dd:focus-within .dd-menu { display: block; }
.nav .dd-menu a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-soft); }
.nav .dd-menu a:hover, .nav .dd-menu a:focus-visible { background: var(--surface-2); color: #fff; }
.dd-menu a b { display: block; font-weight: 600; font-size: 15px; color: #fff; }
.dd-menu a span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-faint); }
.dd-menu a[aria-current] b { color: #c6bfff; }

/* The Solutions mega-menu: a wide panel the width of the top bar's content box. A rail of two tabs on the
   left (by use case, by industry) picks which list shows in the middle; a promo card sits at the right edge.
   The .dd is static so the panel is positioned against .top .wrap and never runs off-screen. */
.top .wrap { position: relative; }
.nav .dd.mega { position: static; }
.nav .dd.mega .dd-menu { left: var(--gutter); right: var(--gutter); min-width: 0; padding: 14px; grid-template-columns: 180px minmax(0, 1fr) 232px; gap: 14px; }
.dd.mega.open .dd-menu { display: grid; }
html:not(.js) .dd.mega:hover .dd-menu, html:not(.js) .dd.mega:focus-within .dd-menu { display: grid; }
.mega-rail { display: grid; gap: 4px; align-content: start; padding-right: 14px; border-right: 1px solid var(--border); }
.mega-tab { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 10px; background: none; text-align: left; font: 600 15px/1.3 var(--body); color: var(--ink-soft); cursor: pointer; }
.mega-tab:hover { color: #fff; background: var(--surface); }
.mega-tab[aria-selected="true"] { color: #fff; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--cyan); }
/* Both lists share one grid cell, so the panel keeps its height when the rail switches; the inactive list is
   hidden from sight, the accessibility tree and the tab order, but still sizes the cell. */
.mega-panels { min-width: 0; }
html.js .mega-panels { display: grid; }
html.js .mega-panel { grid-area: 1 / 1; }
.mega-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.mega-h { display: none; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.nav .mega-grid a { padding: 9px 12px; }
.nav .dd-menu .mega-promo { align-self: start; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 12px; background: linear-gradient(160deg, rgba(79, 139, 255, 0.22), rgba(99, 80, 247, 0.08)); border: 1px solid var(--border-strong); color: var(--ink-soft); }
.nav .dd-menu .mega-promo:hover, .nav .dd-menu .mega-promo:focus-visible { color: var(--ink-soft); background: linear-gradient(160deg, rgba(79, 139, 255, 0.3), rgba(99, 80, 247, 0.14)); }
.nav .dd-menu .mega-promo b { font-family: var(--display); font-size: 17px; line-height: 1.2; color: #fff; }
.nav .dd-menu .mega-promo span { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.nav .dd-menu .mega-promo em {  padding-top: 6px; font-style: normal; font-weight: 600; font-size: 14px; color: #c6bfff; }
/* The card fills its column with a slice of the Command center; lazy, so it loads only once the menu has opened. */
.nav .dd-menu .mega-shot { display: block; width: 100%; height: auto; margin-top: 6px; border-radius: 8px; border: 1px solid var(--border); }
/* Without JavaScript the rail is hidden and both lists show, one under the other, with their headings. */
html:not(.js) .nav .dd.mega .dd-menu { grid-template-columns: minmax(0, 1fr) 232px; }
html:not(.js) .mega-rail { display: none; }
html:not(.js) .mega-h { display: block; }
.mega-h { margin: 6px 12px 8px; font: 600 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
html:not(.js) .mega-panel + .mega-panel { margin-top: 12px; }
.menu-btn { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 2px; margin: 3px auto; background: #fff; border-radius: 2px; }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; padding-top: 104px; padding-bottom: 0; }
.hero-copy { max-width: 760px; }
.hero .sub { margin-top: 24px; }
.hero .actions { margin-top: 34px; }

/* Photo hero (home and the four main inner pages): a full-bleed photograph behind the copy, shaded from
   the left so the headline sits on near-black, fading into the page at the foot. The brand motif is the
   logo's double slash: two tall skewed bands in the brand gradient on the right. The section isolates its
   stacking so the photo stays above the page's star field. */
.photo { isolation: isolate; display: flex; align-items: center; }
.hero.photo { min-height: min(86vh, 880px); }
.hero.photo .wrap { width: 100%; padding-top: 96px; padding-bottom: 112px; }
.hero.photo .hero-copy { max-width: 900px; }
/* A soft dark pool behind the copy block only, so the headline keeps 4.5:1 over the brightest lights in
   the photo while the rest of the picture stays bright. */
.photo .hero-copy, .phero.photo .wrap > h1, .phero.photo .wrap > .sub, .phero.photo .wrap > .actions, .phero.photo .wrap > .note { position: relative; }
.photo .wrap::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -30vw; right: 30%; top: -30%; bottom: -30%;
  background: radial-gradient(closest-side, rgba(6, 7, 26, 0.9) 0%, rgba(6, 7, 26, 0.8) 45%, rgba(6, 7, 26, 0.34) 75%, rgba(6, 7, 26, 0) 100%); }
/* The home skyline is brightest at laptop widths, so its copy pool is a shade deeper. */
.hero.photo .wrap::before { background: radial-gradient(closest-side, rgba(6, 7, 26, 0.94) 0%, rgba(6, 7, 26, 0.84) 45%, rgba(6, 7, 26, 0.36) 75%, rgba(6, 7, 26, 0) 100%); }
/* A soft halo keeps each line readable where a light in the photo falls behind it. */
.photo h1, .photo .sub { text-shadow: 0 2px 18px rgba(6, 7, 26, 0.85), 0 0 3px rgba(6, 7, 26, 0.6); }
/* Gradient-filled words are transparent text, so a text-shadow would show through them; they get a drop-shadow instead. */
.photo h1 .hl { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(6, 7, 26, 0.85)); }
.hero.photo h1 { font-size: clamp(48px, 6.4vw, 100px); }
.hero.photo .sub { font-size: clamp(18px, 1.4vw, 22px); max-width: 30em; margin-top: 28px; }
.hero.photo .actions { margin-top: 40px; }
.hero.photo .btn { padding: 16px 30px; font-size: 16.5px; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: -3; filter: brightness(1.45) saturate(1.25) contrast(1.05); }
/* The home skyline's bright core sits left of centre in the frame, so the picture is pushed right to put
   it beside the headline rather than under it. */
.hero.photo .hero-photo { left: 0; width: 100%; object-position: 30% 60%; filter: brightness(1.6) saturate(1.3) contrast(1.08); }
/* A photo whose subject sits mid-frame is pushed right, out from under the headline. */
.hero-photo.shift { left: 38%; width: 62%; object-position: 50% 35%; filter: brightness(1.1) saturate(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
/* Generated photos are composed with the people on the right and dark space on the left, so they sit
   full-width, anchored right, with no extra brightening. */
.hero-photo.ff, .hero.photo .hero-photo.ff { left: 0; width: 100%; object-position: 85% 40%; filter: brightness(1.08) saturate(1.05); }
/* The shade is painted over the bands, so the foot of the hero fades bands and photo together. */
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 7, 26, 0.3) 0%, rgba(6, 7, 26, 0) 20%, rgba(6, 7, 26, 0) 62%, var(--bg) 100%),
    linear-gradient(90deg, rgba(6, 7, 26, 0.86) 0%, rgba(6, 7, 26, 0.62) 30%, rgba(6, 7, 26, 0.18) 58%, rgba(6, 7, 26, 0) 80%); }
.hero-slashes { position: absolute; top: -12%; bottom: -12%; right: 4%; width: 46%; z-index: -2; pointer-events: none; }
.hero-slashes i { position: absolute; top: 0; bottom: 0; width: clamp(60px, 7vw, 130px); transform: skewX(-24deg); border-radius: 6px;
  background: linear-gradient(180deg, rgba(79, 139, 255, 0.6), rgba(99, 80, 247, 0.48) 55%, rgba(162, 77, 255, 0.38)); mix-blend-mode: screen; }
.hero-slashes i:first-child { left: 34%; }
.hero-slashes i:last-child { left: 58%; top: 14%; bottom: -6%; opacity: 0.8; }
/* Where a person stands on the right, the bands move to the far edge and fade, so they never cross a face. */
.hero-slashes.edge, .phero.photo .hero-slashes.edge { right: -14%; width: 26%; opacity: 0.55; }
.hero-slashes.edge i { width: clamp(40px, 4.5vw, 84px); }
/* Shorter photo hero for the inner pages; the bands keep to the right edge, clear of the photo's subject. */
.phero.photo { min-height: min(68vh, 600px); }
.phero.photo .wrap { width: 100%; padding-top: 88px; padding-bottom: 88px; }
.phero.photo .hero-slashes { right: -6%; width: 34%; }
.hero-glow { position: absolute; left: 50%; top: 38%; width: 1300px; height: 800px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(99, 80, 247, 0.55), rgba(79, 139, 255, 0.15) 50%, transparent 72%); filter: blur(20px); }
/* Home hero: the "identity core" image (Google Gemini, upscaled). The orb sits right of the copy and
   drifts very slowly; on a phone it moves below the buttons so the copy reads on plain background. */
.hero.photo.orb .hero-photo { object-position: 70% 50%; filter: none; transform-origin: 75% 50%; animation: orb-drift 24s ease-in-out infinite alternate; }
@keyframes orb-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .hero.photo.orb .hero-photo { animation: none; } }
/* Solutions overview hero: the hologram photo is pushed right so its panel never sits under the headline. */
.phero.photo .hero-photo.holo { left: 34%; width: 66%; object-position: 70% 45%; filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%); }
@media (max-width: 560px) { .phero.photo .hero-photo.holo { left: 0; width: 100%; object-position: 72% 50%; -webkit-mask-image: none; mask-image: none; } }
/* Small laptops: keep the copy to the left half so the headline never runs onto the figure. */
@media (min-width: 961px) and (max-width: 1279px) {
  .hero.photo.orb .hero-copy { max-width: 520px; }
  .hero.photo.orb h1 { font-size: clamp(44px, 5.2vw, 64px); }
  .hero.photo.orb .hero-photo { object-position: 78% 50%; }
}
/* Up to tablet width the artwork sits below the copy, so the headline never sits over the bright figure. */
@media (max-width: 960px) {
  .hero.photo.orb { min-height: 0; }
  .hero.photo.orb .wrap { padding-bottom: clamp(340px, 52vw, 480px); }
  .hero.photo.orb .hero-photo { top: auto; bottom: 0; height: clamp(440px, 62vw, 600px); object-position: 85% 50%; }
  .hero.photo.orb .hero-shade { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 52%, rgba(6, 7, 26, 0.35) 66%, rgba(6, 7, 26, 0) 80%, var(--bg) 100%); }
  .hero.photo.orb .wrap::before { display: none; }
}
.shot { position: relative; margin: 72px auto -2px; max-width: 1120px; }
.frame {
  border-radius: 18px 18px 0 0;
  background: rgba(10, 12, 40, 0.9);
  padding: 10px 10px 0;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 60px 140px -40px rgba(99, 80, 247, 0.6);
}
.frame img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; }
.frame.cut { max-height: 520px; overflow: hidden; }
.frame.full { border-radius: 18px; border-bottom: 1px solid var(--border-strong); padding: 10px; }
.frame.full img { border-radius: 10px; }
/* The Command center shot at the top of the Overview section, large and centred under the tab bar. */
.overview-shot { margin: 56px auto 0; max-width: 1360px; }
.overview-shot .frame { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 50px 120px -40px rgba(99, 80, 247, 0.7); }

/* ---- in-page tabs ---- */
.tabs { position: sticky; top: 72px; z-index: 5; background: rgba(6, 7, 26, 0.8); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tabs ul { display: flex; gap: 8px 36px; flex-wrap: wrap; max-width: var(--wrap-outer); margin: 0 auto; padding: 18px var(--gutter); list-style: none; }
.tabs a { font: 600 13px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.tabs a:hover { color: #fff; }
.tabs a.on { color: #fff; border-color: var(--cyan); }

/* ---- cards ---- */
.card { position: relative; padding: 28px; border-radius: var(--r); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.card:hover { border-color: var(--border-strong); }
a.card { text-decoration: none; display: block; }
.card p { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); }
.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; font-size: 14.5px; color: #c6bfff; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.grid-2.left { text-align: left; }
/* Overview-page card grids: "Learn more" sits at the foot of each card, so the links line up across a row. */
.hub > .card { display: flex; flex-direction: column; }
.hub > .card .more { margin-top: auto; padding-top: 18px; align-self: flex-start; }

/* identity cards with an SVG motif */
.motif { display: grid; place-items: center; height: 150px; margin: -28px -28px 22px; border-radius: var(--r) var(--r) 0 0; background: radial-gradient(120% 90% at 50% 100%, rgba(99, 80, 247, 0.35), rgba(10, 12, 40, 0.2)); border-bottom: 1px solid var(--border); overflow: hidden; }
.motif svg { width: 100%; height: 100%; }

/* capability cards with an icon */
.ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.35); color: var(--cyan); }

/* ---- challenges ---- */
.lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 48px; }
.lines span { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.03em; line-height: 1.1; }
.lines b { font-weight: 700; color: var(--cyan); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 48px auto 0; max-width: 980px; }
.stat { padding: 32px 24px; text-align: center; border-radius: var(--r); background: linear-gradient(180deg, rgba(79, 139, 255, 0.18), rgba(99, 80, 247, 0.06)); border: 1px solid var(--border-strong); }
.stat b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 4.5vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.stat span { display: block; margin-top: 12px; font-size: 15.5px; color: var(--ink-soft); }
.lines + .sub { margin: 24px auto 0; }
/* Footnoted statistics: a superscript on each card, and the sources listed under the cards. */
.stat sup { font-size: 0.7em; line-height: 0; margin-left: 2px; }
.stat sup a { color: var(--cyan); text-decoration: none; }
.sources { margin: 28px auto 0; max-width: 980px; text-align: left; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.sources p { font: 600 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.sources ol { margin: 10px 0 0; padding-left: 20px; }
.sources li { margin-top: 4px; }
.sources a { color: var(--ink-soft); }
.sources a:hover { color: #fff; }
.center .prod ul, .center .notes { text-align: left; }

/* ---- how it works diagram ---- */
.flow { position: relative; margin-top: 64px; }
.flow .rail { display: grid; grid-template-columns: 150px 1fr 150px; gap: 20px; align-items: center; }
.flow .rail span { font-size: 14px; color: var(--ink-soft); }
.flow .rail .line { position: relative; height: 0; border-top: 1.5px dashed rgba(126, 114, 255, 0.6); }
.flow .rail .line::before, .flow .rail .line::after { content: ''; position: absolute; top: -5px; width: 8px; height: 8px; border-right: 1.5px solid #9d93ff; border-bottom: 1.5px solid #9d93ff; }
.flow .rail .line::before { left: 0; transform: rotate(135deg); }
.flow .rail .line::after { right: 0; transform: rotate(-45deg); }
.flow .rail .label { text-align: center; }
.flow .body { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)) 150px; gap: 20px; margin: 18px 0; }
.flow .side { display: flex; flex-direction: column; padding: 20px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.flow .side b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 14px; }
.flow .side ul { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; align-content: space-evenly; }
.flow .side li { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.flow .side li i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.08); color: var(--cyan); font-style: normal; }
.flow .step { position: relative; padding: 28px 24px 24px; border-radius: var(--r); background: linear-gradient(180deg, rgba(79, 139, 255, 0.16), rgba(99, 80, 247, 0.05)); border: 1px solid var(--border-strong); text-align: center; overflow: hidden; }
.flow .step::before { content: ''; position: absolute; left: 50%; top: -70px; width: 220px; height: 220px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(126, 114, 255, 0.25); box-shadow: 0 0 0 28px rgba(126, 114, 255, 0.06), 0 0 0 56px rgba(126, 114, 255, 0.03); pointer-events: none; }
.flow .step .ico { margin: 0 auto 14px; }
.flow .step h3 { font-size: 26px; }
.flow .step ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.flow .step li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--cyan); vertical-align: middle; }

/* ---- console section ---- */
.console .frame { margin-top: 56px; }
.console .notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.console .notes div { padding-top: 16px; border-top: 1px solid var(--border); }
.console .notes b { display: block; font-family: var(--display); font-size: 16px; }
.console .notes p { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }

/* ---- demo (home) ---- */
.demo { position: relative; }
.demo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px); gap: 64px; align-items: start; padding-top: 112px; padding-bottom: 112px; }
.demo h1 + .sub, .demo h2 + .sub { margin-top: 18px; }
.demo .what { margin: 28px 0 0; padding: 0; list-style: none; }
.demo .what li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 15.5px; }
.demo .what li::before { content: ''; position: absolute; left: 0; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.demo .what li:last-child { border-bottom: 1px solid var(--border); }
.form { padding: 32px; border-radius: 20px; background: linear-gradient(180deg, rgba(99, 80, 247, 0.16), rgba(10, 12, 40, 0.5)); border: 1px solid var(--border-strong); }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field .label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border); background: rgba(6, 7, 26, 0.6); font: 400 15.5px/1.4 var(--body); color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 0; border-color: transparent; }
.field textarea { min-height: 100px; resize: vertical; }
.form .btn { margin-top: 22px; width: 100%; }
.form .fine { margin-top: 14px; font-size: 13px; color: var(--ink-faint); }
.form-done { display: none; padding: 32px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-strong); }
.form-done h3 { font-size: 26px; }
.form-done p { margin-top: 12px; color: var(--ink-soft); }
.form.sent { display: none; }
.form.sent + .form-done { display: block; }
.form-err { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4); color: #fca5a5; font-size: 14px; }
.form.error .form-err { display: block; }
.honey { position: absolute; left: -9999px; }
/* Cloudflare Turnstile bot check, reserved at its rendered height so the form does not jump. */
.form .cf-turnstile { margin-top: 18px; min-height: 65px; }

/* ---- FAQ ---- */
.faq .list { display: grid; gap: 10px; margin-top: 48px; max-width: 1100px; }
.faq details { border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.faq details[open] { background: var(--surface-2); border-color: var(--border-strong); }
.faq summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.5px solid #c6bfff; border-bottom: 1.5px solid #c6bfff; transform: rotate(45deg); transition: transform 0.15s; }
.faq details[open] summary::before { transform: rotate(-135deg); }
.faq details p { padding: 0 22px 22px 46px; color: var(--ink-soft); max-width: 60em; }

/* ---- brand band ---- */
.brandband { background: linear-gradient(120deg, #3a2fc9, var(--indigo) 50%, #7f3fe0); color: #fff; }
.brandband .sub { color: rgba(255, 255, 255, 0.85); }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 96px; padding-bottom: 96px; }
.band h2 { max-width: 12em; }
.band .sub { margin-top: 14px; }

/* ---- footer ---- */
.foot { background: #04051a; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 72px 0 40px; }
.foot .cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; }
.foot .about p { margin-top: 16px; max-width: 20em; font-size: 15px; color: var(--ink-soft); }
.foot .about .btn { margin-top: 24px; }
.foot h3 { font-size: 15px; margin-bottom: 16px; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin: 10px 0; }
.foot li a { font-size: 14.5px; color: var(--ink-soft); text-decoration: none; }
.foot li a:hover { color: #fff; }
.foot .legal { display: grid; gap: 8px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.foot .legal a { color: var(--ink-soft); text-decoration: none; }
.foot .legal a:hover { color: #fff; }
.foot .legal .sep { margin: 0 6px; }
/* Caption above the hero product shot: the shot is a design preview, and the caption says so. */


/* Legacy helpers kept for the inner pages. */
.dark { color: #fff; }
.prod ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; }
.prod li { padding: 24px; border-radius: var(--r); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); }
.prod h3 { font-size: 19px; }
.prod p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr; }
  .flow .rail { display: none; }
  .flow .body { grid-template-columns: 1fr; }
  .flow .side ul { grid-template-columns: repeat(3, 1fr); }
  .console .notes { grid-template-columns: 1fr; }
  .demo .wrap { grid-template-columns: 1fr; gap: 40px; }
  .prod ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band .wrap { flex-direction: column; align-items: flex-start; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 0 16px; background: var(--bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav a { padding: 12px var(--gutter); }
  .top.open .nav { display: flex; }
  /* The open menu scrolls on its own, so a long open dropdown stays reachable on a short phone. */
  .nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  /* In the mobile menu each dropdown is an accordion row. */
  .nav .dd { padding: 0; }
  .dd-btn { width: 100%; justify-content: space-between; padding: 12px var(--gutter); }
  .dd-menu { position: static; margin: 0; min-width: 0; padding: 0 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav .dd-menu a { padding: 10px calc(var(--gutter) + 14px); border-radius: 0; }
  /* The mega-menu is a plain accordion here: two headed groups of links, no rail, no promo card. */
  .nav .dd.mega .dd-menu { padding: 0 0 8px; }
  .dd.mega.open .dd-menu, html:not(.js) .dd.mega:hover .dd-menu, html:not(.js) .dd.mega:focus-within .dd-menu { display: block; }
  .mega-rail, .nav .dd-menu .mega-promo, .mega-grid a span { display: none; }
  html.js .mega-panels { display: block; }
  html.js .mega-panel { grid-area: auto; }
  .mega-panel[hidden] { visibility: visible; pointer-events: auto; }
  .mega-h { display: block; margin: 10px calc(var(--gutter) + 14px) 4px; }
  .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .nav .mega-grid a { padding: 8px calc(var(--gutter) + 14px); }
  .top .actions { display: none; }
  .menu-btn { display: block; }
  .tabs { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .section { padding: 72px 0; }
  .hero .wrap { padding-top: 56px; }
  /* On a phone the photo is cropped to its middle and shaded nearly flat, so the copy reads anywhere. */
  .hero.photo, .phero.photo { min-height: 0; }
  .hero.photo .wrap { padding-top: 64px; padding-bottom: 72px; }
  .phero.photo .wrap { padding-top: 56px; padding-bottom: 56px; }
  .hero-photo, .hero.photo .hero-photo, .hero-photo.shift { left: 0; width: 100%; object-position: 50% 60%; -webkit-mask-image: none; mask-image: none; }
  .hero-shade { background: linear-gradient(180deg, rgba(6, 7, 26, 0.85) 0%, rgba(6, 7, 26, 0.78) 60%, var(--bg) 100%); }
  .photo .wrap::before { left: -20%; right: -20%; top: -30%; bottom: -30%; }
  .hero-slashes { right: -10%; width: 60%; opacity: 0.6; }
  .shot { margin-top: 48px; }
  .frame { padding: 6px 6px 0; }
  .grid-4 { grid-template-columns: 1fr; }
  .prod ul { grid-template-columns: 1fr; }
  .form { padding: 22px; }
  .form .grid { grid-template-columns: 1fr; }
  .foot .cols { grid-template-columns: 1fr; }
  .flow .side ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Inner-page heroes: the 3D "sentinel world" artwork (Google Gemini, upscaled) sits in a 16:9 box on the
   right, never wider than the hero's height allows, so a figure is not cropped at any screen width; it
   fades in behind the headline. On a phone it sits below the buttons, as on the home hero. */
.phero.photo.art .hero-photo { left: auto; right: 0; width: min(64%, 1067px); height: 100%; object-fit: cover; object-position: 50% 40%; filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.phero.photo.art .hero-shade { background: linear-gradient(180deg, rgba(6, 7, 26, 0.25) 0%, rgba(6, 7, 26, 0) 18%, rgba(6, 7, 26, 0) 70%, var(--bg) 100%); }
/* The dark pool behind the copy stops short of the artwork, so the art keeps its own light. */
.phero.photo.art .wrap::before { right: 40%; }
/* The rooftop artwork is darker than the rest of the set; lift it to match. */
.phero.photo.art .hero-photo.lift { filter: brightness(1.35) saturate(1.1); }
@media (max-width: 560px) {
  .phero.photo.art .wrap { padding-bottom: 300px; }
  .phero.photo.art .hero-photo { top: auto; bottom: 0; left: 0; width: 100%; height: 320px; object-position: 70% 50%; -webkit-mask-image: none; mask-image: none; }
  .phero.photo.art .hero-shade { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, rgba(6, 7, 26, 0.3) 70%, rgba(6, 7, 26, 0) 82%, var(--bg) 100%); }
  .phero.photo.art .wrap::before { display: none; }
}

/* ---- motion ----
   Calm, one-time motion: heroes rise in, sections reveal as they scroll into view, "How it works" draws an
   access path that fades out on its last step, cards and buttons answer the pointer. Only transform and
   opacity move. site.js adds .reveal/.in; without the script nothing is hidden. Visitors who ask for
   reduced motion get none of it. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hero .hero-copy > *, .phero .wrap > *, .cap-hero .wrap > div:first-child > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .hero-copy > :nth-child(2), .phero .wrap > :nth-child(2), .cap-hero .wrap > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
  .hero .hero-copy > :nth-child(3), .phero .wrap > :nth-child(3), .cap-hero .wrap > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
  .hero .hero-copy > :nth-child(n+4), .phero .wrap > :nth-child(n+4), .cap-hero .wrap > div:first-child > :nth-child(n+4) { animation-delay: 0.24s; }
  .cap-hero .panel { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }

  /* Hero artwork drifts very slowly on every page, as on the home hero. */
  @keyframes art-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
  .phero.photo .hero-photo { transform-origin: 70% 50%; animation: art-drift 26s ease-in-out infinite alternate; }

  html.js .reveal { opacity: 0; transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s; }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* The access path: a line of light runs through the steps, then fades on the last one. */
  .steps li { position: relative; }
  .steps li::after { content: ''; position: absolute; left: 0; right: 0; top: -2.5px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #7eb0ff, #a99bff 50%, #c98bff); box-shadow: 0 0 14px rgba(162, 77, 255, 0.9), 0 0 4px rgba(126, 176, 255, 0.9);
    transform: scaleX(0); transform-origin: left; transition: transform 0.55s ease, opacity 1.2s ease; }
  .steps.in li::after { transform: scaleX(1); }
  .steps.in li:nth-child(2)::after { transition-delay: 0.5s; }
  .steps.in li:nth-child(3)::after { transition-delay: 1s; }
  .steps.in li:nth-child(4)::after { transition-delay: 1.5s, 2.4s; opacity: 0.15; }
  .flow .rail .line { transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease 0.2s; }
  .flow.in .rail .line { transform: none; }

  /* Hover uses the separate translate property, so it never fights the reveal's transform. */
  .card, a.card .more, a.more { transition: translate 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
  a.card:hover { translate: 0 -4px; box-shadow: 0 22px 44px -24px rgba(99, 80, 247, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
  a.card:hover .more, a.more:hover { translate: 4px 0; }
  a.more { display: inline-block; }
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s ease; }
  .btn-primary:hover::after { transform: translateX(120%); }
  .top { transition: background 0.3s ease, box-shadow 0.3s ease; }
  .top.scrolled { background: rgba(6, 7, 26, 0.9); box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.9); }
}
@media print { html.js .reveal { opacity: 1 !important; transform: none !important; } }

/* Home: the access lifecycle in one line, directly under the hero. */
.flowstrip { border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(99, 80, 247, 0.05); }
.flowstrip ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 auto; padding-top: 24px; padding-bottom: 8px; counter-reset: fs; }
.flowstrip li { counter-increment: fs; position: relative; }
.flowstrip li::before { content: counter(fs, decimal-leading-zero); display: block; font: 500 12px var(--mono); color: var(--cyan); margin-bottom: 6px; }
.flowstrip li:not(:last-child)::after { content: '→'; position: absolute; right: -20px; top: 22px; color: #9d93ff; }
.flowstrip b { display: block; font: 700 17px/1.2 var(--display); color: #fff; }
.flowstrip span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-soft); }
.flowstrip-more { margin: 0 auto; padding-bottom: 20px; font-size: 14px; }
@media (max-width: 900px) { .flowstrip ol { grid-template-columns: 1fr 1fr; } .flowstrip li::after { display: none; } }
/* Demo form: optional fields say so; the reply time shows before sending. */
.opt { font-weight: 400; color: var(--ink-faint); }
.form-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
/* Phone menu: the demo button lives inside the menu, since the header button is hidden there. */
.nav .nav-demo { display: none; }
@media (max-width: 900px) { .top.open .nav .nav-demo { display: inline-flex; margin: 12px var(--gutter) 4px; color: #fff; } }