/* 256grid public showcase — grid-native stylesheet.
   Brand system: 256grid-brand-kit/BRAND-SYSTEM.md (source of truth).
   Structural patterns adapted from 256bank-website@311c972 (hero island,
   trust strip, honest nums bar, cards, approach pillars) — but grid's OWN
   tokens (no copper), so no bank design-system drift.
   Zero external dependencies (EU-sovereign; no CDN, no web fonts). */

:root {
  /* Brand gradient (always the brand surface — never solid black) */
  --brand-grad-start: #2a1565;
  --brand-grad-mid:   #1c1f5c;
  --brand-grad-end:   #0e2a66;
  --brand-grad: linear-gradient(135deg, #2a1565 0%, #1c1f5c 50%, #0e2a66 100%);

  /* Brand chromatics */
  --brand-purple:        #7b5ea7;
  --brand-purple-bright: #a78bfa;
  --brand-blue:          #3b82f6;
  --brand-lavender:      #c4b5fd;
  --brand-skylight:      #93c5fd;
  --brand-indigo-dark:   #1e1b4b;

  --cta-grad:  linear-gradient(135deg, #7b5ea7 0%, #3b82f6 100%);
  --text-grad: linear-gradient(135deg, #c4b5fd 0%, #93c5fd 100%);

  /* Light theme surfaces (default) */
  --bg:        #f7f8fc;
  --surface-1: #ffffff;
  --surface-2: #eef0f8;
  --border:    #e6e7f2;
  --text-1:    #1e1b4b;
  --text-2:    #4a4870;
  --text-3:    #7b7a98;
  --on-dark-1: #f4f3ff;
  --on-dark-2: #c7cae8;
  --on-dark-3: #9a9ec8;

  /* Type */
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Rhythm */
  --wrap: 1180px;
  --sect: 80px;
  --r-card: 14px;
  --r-btn: 10px;
  --r-hero: 18px;

  --ease: cubic-bezier(0.4, 0, 0.6, 1);
}

:root[data-theme="dark"] {
  --bg:        #0c0f1e;
  --surface-1: #131730;
  --surface-2: #0f1328;
  --border:    #262a4d;
  --text-1:    #f4f3ff;
  --text-2:    #c7cae8;
  --text-3:    #9a9ec8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0c0f1e;
    --surface-1: #131730;
    --surface-2: #0f1328;
    --border:    #262a4d;
    --text-1:    #f4f3ff;
    --text-2:    #c7cae8;
    --text-3:    #9a9ec8;
  }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
@media (max-width: 760px) { .wrap { padding: 0 20px; } }

a { color: var(--brand-blue); text-decoration: none; }
a:hover { color: var(--brand-purple-bright); }

.text-grad {
  background: var(--text-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 15px/1 var(--sans); letter-spacing: -0.005em;
  padding: 14px 24px; border-radius: var(--r-btn);
  cursor: pointer; border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .2s, color .2s;
}
.btn-brand { background: var(--cta-grad); color: #fff; }
.btn-brand:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 34px -10px rgba(123,94,167,.6); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-1); }
.btn-ghost:hover { border-color: var(--brand-purple-bright); color: var(--brand-purple-bright); }
.btn-on-dark { background: transparent; border-color: rgba(199,202,232,.3); color: var(--on-dark-1); }
.btn-on-dark:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(199,202,232,.6); }

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand-lockup { display: inline-flex; align-items: center; height: 34px; }
.brand-lockup img { height: 26px; width: auto; display: block; }
/* Wordmark-only lockup — "256" in the lavender→sky brand gradient, "grid" in
   white (exact BRAND-SYSTEM wordmark values). The mark lives in the hero chip. */
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--sans); font-weight: 500; font-size: 23px; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.wordmark .w1 { background: var(--text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.wordmark .w2 { color: #fff; }
.wordmark-sm { font-size: 21px; margin-bottom: 14px; }
/* Logo variant = SURFACE (per BRAND-SYSTEM asset matrix):
   light surface → -light.svg, dark surface → -dark.svg. Applies to any
   lockup on the page background (header + footer). */
.logo-dark { display: none; }
.logo-light { display: block; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
.primary-nav { display: flex; gap: 22px; margin-left: 8px; }
.primary-nav a { color: var(--text-2); font-size: 14px; }
.primary-nav a:hover { color: var(--text-1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.signin-pill {
  font-size: 14px; font-weight: 500; color: var(--text-1);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px;
}
.signin-pill:hover { border-color: var(--brand-purple-bright); color: var(--brand-purple-bright); }
.theme-toggle {
  font: 400 13px/1 var(--sans); color: var(--text-3);
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
}
.theme-toggle:hover { color: var(--text-1); }
.theme-toggle .l-light { display: none; }
:root[data-theme="dark"] .theme-toggle .l-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .l-light { display: inline; }
.menu-toggle { display: none; }

/* ── Hero (always dark brand-gradient island) ──────────────── */
.hero { padding: 72px 0 84px; }
.hero-island {
  position: relative; overflow: hidden;
  background: var(--brand-grad); border-radius: var(--r-hero);
  padding: 64px 56px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
}
.hero-island::before {
  content: ""; position: absolute; inset: 0;
  background: url("brand/hero-pattern.svg") center/cover no-repeat; opacity: .14; pointer-events: none;
}
.hero-eyebrow {
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--brand-skylight); margin-bottom: 20px; position: relative;
}
.hero-title {
  font-weight: 500; font-size: 56px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--on-dark-1); margin-bottom: 22px; position: relative;
}
.hero-lead {
  font-size: 18px; line-height: 1.6; color: var(--on-dark-2);
  max-width: 48ch; margin-bottom: 30px; position: relative;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; }
.hero-mark { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-mark object, .hero-mark img { width: 100%; max-width: 320px; height: auto; }

/* ── Trust strip ───────────────────────────────────────────── */
.trust-strip { padding: 30px 0; border-bottom: 1px solid var(--border); }
.trust-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.trust-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-3); }
.trust-item { font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.trust-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-blue); }

/* ── Nums bar (honest, verifiable facts only) ──────────────── */
.nums { padding: var(--sect) 0; }
.nums .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.nums-item { border-left: 2px solid var(--border); padding-left: 20px; }
.nums-val { display: block; font-size: 38px; font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nums-lbl { display: block; font-size: 14px; font-weight: 500; color: var(--text-1); margin: 12px 0 6px; }
.nums-note { font-size: 13px; color: var(--text-3); line-height: 1.5; }

/* ── Sections ──────────────────────────────────────────────── */
section.block { padding: var(--sect) 0; }
section.alt { background: var(--surface-2); }
.section-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--brand-purple); margin-bottom: 14px; }
.section-title { font-size: 32px; font-weight: 500; letter-spacing: -0.018em; color: var(--text-1); margin-bottom: 14px; }
.section-lead { font-size: 17px; color: var(--text-2); max-width: 64ch; margin-bottom: 44px; }

/* ── Cards ─────────────────────────────────────────────────── */
.cards { display: grid; gap: 22px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 30px 28px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 34px -12px rgba(123,94,167,.3); border-color: color-mix(in srgb, var(--brand-purple-bright) 40%, var(--border)); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-title { font-size: 19px; font-weight: 500; letter-spacing: -0.012em; color: var(--text-1); }
.chip { font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; font-weight: 500; }
.chip-live { background: rgba(59,130,246,.12); color: var(--brand-blue); border: 1px solid rgba(59,130,246,.3); }
.chip-soon { background: rgba(167,139,250,.12); color: var(--brand-purple); border: 1px solid rgba(167,139,250,.3); }
.card-body { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-top: 6px; }
.card-meta { margin-top: 18px; font-size: 12px; color: var(--text-3); display: flex; gap: 8px; }

/* ── Approach pillars ──────────────────────────────────────── */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pillar-list { display: grid; gap: 22px; }
.pillar h3 { font-size: 17px; font-weight: 500; color: var(--text-1); margin-bottom: 6px; }
.pillar p { font-size: 14px; color: var(--text-2); }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 40px; margin-top: 20px; }
.site-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand img { height: 24px; margin-bottom: 14px; }
.footer-brand p { font-size: 13px; color: var(--text-3); max-width: 42ch; }
.footer-col h4 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { font-size: 14px; color: var(--text-2); }
.footer-col a:hover { color: var(--text-1); }
.footer-meta { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }

/* ── Living hero stage (WebGL processor over real photography) ── */
.hero-stage {
  position: relative; overflow: hidden;
  min-height: 100svh; min-height: 100vh;
  display: flex; align-items: flex-end;
  background: var(--brand-grad);
}
/* Real-photo backdrop — datacenters, GPUs, engineers. Crossfades +
   slow Ken-Burns zoom behind the 3D processor, so the chip floats over
   the actual places + machines 256grid runs on. */
.photo-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a0c1c; }
.photo-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 2.4s var(--ease);
  will-change: opacity, transform;
  filter: saturate(1.08) contrast(1.04) brightness(.98);
}
.photo-stage img.active { opacity: .92; animation: kenburns 16s linear forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.2); } }
/* Grid-gradient wash — keeps the photo clearly visible up top (where the
   processor floats) and deepens toward the bottom so the hero copy stays
   legible. The photos are meant to read as real places, not be hidden. */
.photo-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,12,28,.42) 0%, rgba(10,12,28,.12) 24%, rgba(10,12,28,.3) 58%, rgba(8,10,24,.9) 92%, rgba(8,10,24,.97) 100%),
    radial-gradient(120% 78% at 70% 30%, rgba(14,42,102,.12) 0%, rgba(12,15,30,.28) 62%, rgba(8,10,24,.6) 100%);
}
/* A soft brand vignette at the edges so it ties to the grid gradient. */
.photo-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 180px 40px rgba(8,10,24,.55);
}
/* The WebGL canvas floats above the photos. */
.hero-stage canvas#stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; opacity: 0; transition: opacity 1s ease .2s; touch-action: none; }
.hero-stage.gl-ready canvas#stage { opacity: 1; }
/* Static animated-SVG mark — shown until WebGL takes over (and for
   reduced-motion / no-WebGL). */
.hero-fallback { position: absolute; z-index: 1; top: 12%; left: 50%; transform: translateX(-50%); width: min(44vmin, 420px); pointer-events: none; }
.hero-fallback object, .hero-fallback img { width: 100%; height: auto; display: block; }
.hero-stage.gl-ready .hero-fallback { display: none; }

.hero-copy { position: relative; z-index: 2; width: 100%; padding: 0 0 clamp(48px, 9vh, 104px); }
.hero-copy .wrap { max-width: var(--wrap); }
.hero-eyebrow-live {
  font: 500 12px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase;
  color: var(--brand-skylight); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 12px;
}
.hero-eyebrow-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: #6fe3b0; box-shadow: 0 0 12px rgba(111,227,176,.9); animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.hero-h1 {
  margin: 0 0 22px; max-width: 16ch;
  font-weight: 600; font-size: clamp(42px, 7vw, 92px); line-height: .98; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffffff 0%, #d9ccff 24%, #a690ff 50%, #93c5fd 74%, #ffffff 100%);
  background-size: 220% 100%; background-position: 100% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 8s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(8,10,24,.6));
}
.hero-h1 em { font-style: normal; display: inline-block;
  background: linear-gradient(100deg, #c4b5fd 0%, #8c70ff 38%, #93c5fd 70%, #c4b5fd 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s ease-in-out infinite; animation-delay: -2s; }
@keyframes shimmer { 0%,100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } }
.hero-sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--on-dark-2); max-width: 52ch; margin-bottom: 30px; text-shadow: 0 1px 10px rgba(8,10,24,.6); }
.hero-actions-live { display: flex; gap: 14px; flex-wrap: wrap; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-cue span.bar { width: 1px; height: 30px; background: linear-gradient(var(--brand-skylight), transparent); animation: cueDrop 2s ease-in-out infinite; }
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Processor-pin buttons (chip language) ─────────────────────── */
.btn-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 9px; cursor: pointer; isolation: isolate;
  color: var(--on-dark-1); border: 1px solid rgba(199,202,232,.22);
  background: linear-gradient(180deg, rgba(40,32,90,.5), rgba(18,16,46,.6));
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
/* top + bottom pin rails — the button reads as a chip package. */
.btn-chip::before, .btn-chip::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 3px; z-index: -1;
  background: repeating-linear-gradient(90deg, var(--brand-skylight) 0 4px, transparent 4px 10px);
  opacity: .5; transition: opacity .25s;
}
.btn-chip::before { top: -3px; border-radius: 2px 2px 0 0; }
.btn-chip::after  { bottom: -3px; border-radius: 0 0 2px 2px; }
.btn-chip:hover { transform: translateY(-2px); color: #fff; border-color: rgba(167,139,250,.6); box-shadow: 0 14px 40px -14px rgba(123,94,167,.7); }
.btn-chip:hover::before, .btn-chip:hover::after { opacity: 1; }
.btn-chip--cta { background: var(--cta-grad); border-color: transparent; color: #fff; }
.btn-chip--cta::before, .btn-chip--cta::after { background: repeating-linear-gradient(90deg, #cdd7ff 0 4px, transparent 4px 10px); opacity: .7; }

/* ── Full-width photo band (datacenter reality) ───────────────── */
.photo-band { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.6); z-index: 0; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,8,28,.92) 0%, rgba(12,15,40,.72) 45%, rgba(14,42,102,.35) 100%); }
.photo-band .wrap { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; }
.photo-band .section-title, .photo-band .section-lead { color: var(--on-dark-1); }
.photo-band .section-lead { color: var(--on-dark-2); max-width: 54ch; }
.photo-band .section-eyebrow { color: var(--brand-skylight); }

/* Header over a dark hero — override the light sticky look. */
.site-header.over-dark { background: color-mix(in srgb, #0a0c1c 70%, transparent); border-bottom-color: rgba(199,202,232,.12); }
.site-header.over-dark .primary-nav a { color: var(--on-dark-2); }
.site-header.over-dark .primary-nav a:hover { color: #fff; }
.site-header.over-dark .signin-pill { color: var(--on-dark-1); border-color: rgba(199,202,232,.3); }
.site-header.over-dark .theme-toggle { color: var(--on-dark-3); border-color: rgba(199,202,232,.2); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero-island { grid-template-columns: 1fr; padding: 44px 30px; }
  .hero-mark { order: -1; max-width: 220px; margin: 0 auto 8px; }
  .hero-title { font-size: 40px; }
  .nums .wrap { grid-template-columns: repeat(2, 1fr); }
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .two-up { grid-template-columns: 1fr; gap: 32px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .primary-nav { display: none; }
  .hero-fallback { top: 8%; width: min(54vmin, 320px); }
}
@media (max-width: 760px) {
  /* Chip floats to the top half (hero.js); darken behind the bottom copy so
     the headline + lead stay legible over the photo and any chip glow. */
  .hero-copy {
    background: linear-gradient(180deg, transparent 0%, rgba(8,10,24,.5) 38%, rgba(8,10,24,.9) 72%, rgba(8,10,24,.96) 100%);
    padding-top: 120px;
  }
  .hero-h1 { font-size: clamp(34px, 10.5vw, 54px); max-width: 100%; }
  .hero-sub { font-size: 16px; }
  .btn-chip { font-size: 12px; padding: 14px 20px; }
  .photo-band { min-height: 400px; }
  .photo-band::after { background: linear-gradient(180deg, rgba(10,8,28,.7) 0%, rgba(12,15,40,.72) 100%); }
}
@media (max-width: 480px) {
  .hero-title { font-size: 32px; }
  .nums .wrap { grid-template-columns: 1fr; }
}

/* ── Reduced motion: BRAND-SYSTEM requirement ──────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  /* static mark substituted in markup via <noscript>/JS fallback */
}