/* ============================================================
   alext.ai — design system v0.7
   "neon charcoal" · onest + geist mono · modern fintech
   ============================================================ */
:root {
  /* ——— base surfaces (warm charcoal, not slate, not black) ——— */
  --bg:        #16181D;       /* page */
  --midnight:  #1A1D24;       /* primary dark surface */
  --nebula:    #22262E;       /* elevated card */
  --nebula-2:  #2A2F38;       /* hover / raised */
  --line:      #33384230;
  --line:      #353A44;
  --line-soft: #2A2F38;

  /* ——— text (warm off-white, no pure white) ——— */
  --fg:   #F2F4F8;
  --fg-2: #B3B9C6;
  --fg-3: #7F8693;
  --fg-4: #4A4F5A;

  /* ——— electric teal primary ——— */
  --volt:       #00E5D1;                       /* electric teal / cyan */
  --volt-2:     #4FFAEB;                       /* brighter — for text on dark */
  --volt-deep:  #008C80;
  --volt-wash:  rgba(0, 229, 209, 0.16);
  --volt-glow:  rgba(0, 229, 209, 0.55);

  /* ——— electric chartreuse for money / growth ——— */
  --lime:       #E8FF3D;                       /* neon chartreuse */
  --lime-2:     #F3FF7A;                       /* brighter on dark */
  --lime-wash:  rgba(232, 255, 61, 0.16);
  --lime-deep:  #8FA008;

  /* ——— warm alert ——— */
  --coral:      #FF6B5C;
  --coral-2:    #FF8878;
  --coral-wash: rgba(255, 107, 92, 0.14);

  /* ——— info ——— */
  --sky:        #5EC9F5;
  --sky-2:      #7FD6F7;
  --sky-wash:   rgba(94, 201, 245, 0.14);

  /* ——— pending ——— */
  --mango:      #FFB547;
  --mango-2:    #FFC771;
  --mango-wash: rgba(255, 181, 71, 0.14);

  /* ——— gradients — neon, ambient ——— */
  --grad-hero:  radial-gradient(ellipse 60% 50% at 15% 0%, rgba(0,229,209,0.3), transparent 65%),
                radial-gradient(ellipse 50% 40% at 90% 5%, rgba(232,255,61,0.14), transparent 65%),
                radial-gradient(ellipse 80% 60% at 50% 100%, rgba(94,201,245,0.1), transparent 65%);
  --grad-volt:  linear-gradient(135deg, #00E5D1 0%, #2DE8D8 60%, #6BF5DF 100%);
  --grad-lime:  linear-gradient(135deg, #E8FF3D 0%, #F3FF7A 100%);
  --grad-coral: linear-gradient(135deg, #FF6B5C 0%, #FFB547 100%);
  --grad-surf:  linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));

  /* ——— radii ——— */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-full: 999px;

  /* ——— shadows / glows ——— */
  --glow-volt: 0 0 0 1px rgba(0,229,209,0.45), 0 10px 32px rgba(0,229,209,0.55);
  --glow-lime: 0 0 0 1px rgba(232,255,61,0.45), 0 10px 32px rgba(232,255,61,0.4);
  --shadow-1:  0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:  0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lift: 0 20px 48px -18px rgba(0,229,209,0.6);

  /* ——— fonts ——— */
  --f-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-display: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Geist Mono Variable', ui-monospace, Menlo, monospace;

  /* ——— spacing (4pt) ——— */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

/* ambient gradient — always-on but quiet */
body::before {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--grad-hero);
  opacity: 0.9;
}
/* subtle noise so gradients don't band */
body::after {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
}

.page { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 32px 32px 120px; }

/* ============================================================
   topbar — rounded pill, vibrant
   ============================================================ */
.topbar {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 20px;
  padding: 10px 12px 10px 20px;
  background: rgba(26, 29, 36, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  position: sticky; top: 16px; z-index: 50;
  box-shadow: var(--shadow-2);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: var(--grad-volt);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 16px rgba(0,229,209,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  font-family: var(--f-sans); letter-spacing: -0.03em;
}
.brand .name { font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }
.brand .name .ac { color: var(--volt-2); font-style: italic; font-weight: 500; }

.nav-rail { display: flex; gap: 2px; justify-self: center; padding: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); border-radius: var(--r-full); }
.nav-rail a {
  color: var(--fg-3); text-decoration: none;
  padding: 7px 14px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  transition: all 200ms cubic-bezier(.2,.8,.2,1);
}
.nav-rail a:hover { color: var(--fg); background: var(--nebula); }
.nav-rail a.on { background: var(--volt-wash); color: var(--volt-2); }

.topbar-right { display: flex; align-items: center; gap: 14px; }
.live-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px;
  background: var(--lime-wash); border: 1px solid rgba(61,213,152,0.4);
  border-radius: var(--r-full);
  font-family: var(--f-mono); font-size: 11px; color: var(--lime-2);
  font-weight: 600;
}
.live-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 10px var(--lime);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }

/* ============================================================
   hero
   ============================================================ */
.hero {
  margin-top: 56px; padding-bottom: 56px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end;
  border-bottom: 1px solid var(--line-soft);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before {
  content:""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--grad-volt); box-shadow: 0 0 10px var(--volt);
}
h1.display {
  font-family: var(--f-sans); font-weight: 700;
  font-size: clamp(52px, 7.5vw, 104px); line-height: 0.95; letter-spacing: -0.05em;
  margin: 22px 0 0;
}
/* italic accent helper: prevents glyph overhang from getting clipped by the
   next word or by -webkit-background-clip:text. applied to any italic accent
   span inside display/headline copy. */
.italic-accent {
  display: inline-block;
  padding-inline-end: 0.14em;
  margin-inline-end: -0.07em;
}

h1.display .it { font-style: italic; font-weight: 700;
  background: var(--grad-volt); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; padding-inline-end: 0.14em; margin-inline-end: -0.07em;
}
h1.display .lime { color: var(--lime-2); font-style: italic; font-weight: 700;
  display: inline-block; padding-inline-end: 0.14em; margin-inline-end: -0.07em;
}
h1.display .dim { color: var(--fg-3); font-weight: 400; }

.hero-sub { font-size: 17px; color: var(--fg-2); max-width: 500px; margin-top: 24px; line-height: 1.55; }

.hero-card {
  background: linear-gradient(180deg, var(--nebula), var(--midnight));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 24px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 140px;
  background: radial-gradient(ellipse at 80% 0%, var(--volt-glow), transparent 70%);
  pointer-events: none;
}
.hc-head { display: flex; justify-content: space-between; align-items: center; position: relative; }
.hc-head .lbl { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }
.hc-balance { font-family: var(--f-sans); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.045em; margin-top: 20px; position: relative; }
.hc-balance .cur { color: var(--fg-3); font-weight: 300; margin-right: 4px; }
.hc-balance .dec { color: var(--fg-3); font-size: 32px; font-weight: 300; }
.hc-delta { display: inline-flex; gap: 6px; margin-top: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--lime-2); align-items: center; font-weight: 600; }
.hc-spark { margin-top: 20px; position: relative; }
.hc-actions { display: flex; gap: 8px; margin-top: 18px; }

/* ============================================================
   section scaffold
   ============================================================ */
section.block { margin-top: 88px; }
.sect-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line-soft); }
.sect-head .sn { font-family: var(--f-mono); font-size: 11px; color: var(--volt-2); letter-spacing: 0.14em; }
.sect-head h2 { font-family: var(--f-sans); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -0.035em; margin: 8px 0 0; }
.sect-head h2 em { font-style: italic; font-weight: 500; background: var(--grad-volt); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-inline-end: 0.14em; margin-inline-end: -0.07em; }
.sect-head .desc { color: var(--fg-3); font-size: 13px; max-width: 380px; justify-self: end; text-align: right; }

/* ============================================================
   frames
   ============================================================ */
.frame {
  background: var(--grad-surf), var(--nebula);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  position: relative; overflow: hidden;
}
.frame-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.frame-head .f-tag { color: var(--volt-2); }
.frame-body { padding: 20px; }

/* ============================================================
   principles
   ============================================================ */
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.principle {
  padding: 24px;
  border-radius: var(--r-3);
  background: var(--grad-surf), var(--nebula);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.principle:hover { transform: translateY(-2px); border-color: var(--volt); box-shadow: 0 16px 32px -12px var(--volt-glow); }
.principle .p-num {
  display: inline-flex; width: 36px; height: 36px; border-radius: 10px;
  background: var(--volt-wash); color: var(--volt-2);
  font-family: var(--f-mono); font-weight: 600; font-size: 13px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(0,229,209,0.4);
}
.principle:nth-child(2) .p-num { background: var(--lime-wash); color: var(--lime-2); border-color: rgba(232,255,61,0.5); }
.principle:nth-child(3) .p-num { background: var(--coral-wash); color: var(--coral-2); border-color: rgba(255,107,92,0.45); }
.principle:nth-child(4) .p-num { background: var(--sky-wash); color: var(--sky-2); border-color: rgba(94,201,245,0.45); }
.principle h4 { font-family: var(--f-sans); font-size: 18px; font-weight: 500; margin: 16px 0 8px; letter-spacing: -0.015em; }
.principle p { font-size: 13px; color: var(--fg-3); margin: 0; line-height: 1.55; }

/* ============================================================
   identity / lockup
   ============================================================ */
.logo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-tile {
  padding: 40px; border-radius: var(--r-4); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  font-size: 32px; font-weight: 500; letter-spacing: -0.02em;
  position: relative; overflow: hidden;
}
.logo-tile.lt-midnight { background: var(--nebula); }
.logo-tile.lt-volt { background: var(--grad-volt); border-color: transparent; box-shadow: 0 12px 40px rgba(0,229,209,0.55); color: #042826; }
.logo-tile.lt-lime { background: var(--lime); color: #1A1D24; border-color: var(--lime-2); }
.logo-tile .mk {
  width: 44px; height: 44px; border-radius: var(--r-2);
  background: var(--grad-volt); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 22px;
  box-shadow: 0 6px 20px rgba(0,229,209,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  letter-spacing: -0.03em;
}
.logo-tile.lt-volt .mk { background: rgba(4,40,38,0.25); backdrop-filter: blur(10px); border: 1px solid rgba(4,40,38,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); color: #042826; }
.logo-tile.lt-lime .mk { background: #1A1D24; color: var(--lime); box-shadow: 0 6px 18px rgba(232,255,61,0.45); }
.logo-tile .ac { font-style: italic; font-weight: 400; }
.logo-tile.lt-midnight .ac { color: var(--volt); }
.logo-tile.lt-volt .ac { color: #042826; opacity: 0.8; }
.logo-tile.lt-lime .ac { color: var(--volt-deep); }

/* ============================================================
   colour — palette
   ============================================================ */
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.swatch {
  border-radius: var(--r-3); border: 1px solid var(--line);
  overflow: hidden; background: var(--nebula);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.swatch:hover { transform: translateY(-2px); }
.swatch .chip {
  height: 140px; padding: 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  position: relative; overflow: hidden;
}
.swatch .chip::after {
  content:""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.swatch .chip .role {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(20,22,28,0.88);
  background: rgba(255,255,255,0.9); padding: 3px 8px; border-radius: var(--r-full);
  backdrop-filter: blur(4px); z-index: 1;
}
.swatch .meta { padding: 14px 16px; }
.swatch .meta .n { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.swatch .meta .v { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); margin-top: 4px; }

.surface-strip { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; margin-top: 20px; }
.surface-strip > div { padding: 24px 14px; font-family: var(--f-mono); font-size: 10px; display: flex; align-items: flex-end; }

/* ============================================================
   typography
   ============================================================ */
.type-stack > * + * { margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--line-soft); }
.type-row { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: baseline; }
.type-label { font-family: var(--f-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.1em; text-transform: uppercase; }
.type-label .sz { display: block; color: var(--fg); font-size: 11px; margin-bottom: 4px; }

.t-display { font-family: var(--f-sans); font-weight: 700; font-size: 88px; line-height: 0.95; letter-spacing: -0.045em; }
.t-display .it { font-style: italic; font-weight: 500; background: var(--grad-volt); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-inline-end: 0.14em; margin-inline-end: -0.07em; }
.t-h1 { font-family: var(--f-sans); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -0.035em; }
.t-h2 { font-family: var(--f-sans); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; }
.t-h3 { font-family: var(--f-sans); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }
.t-body { font-family: var(--f-sans); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.t-small { font-family: var(--f-sans); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.t-mono { font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--fg-2); letter-spacing: 0.02em; }
.t-num { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ============================================================
   buttons
   ============================================================ */
.btn {
  font-family: var(--f-sans); font-weight: 500; font-size: 14px;
  padding: 11px 18px; border-radius: var(--r-full); border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all 180ms cubic-bezier(.2,.8,.2,1);
  letter-spacing: -0.005em; position: relative;
}
.btn:active { transform: translateY(1px); }
.btn .arr { font-weight: 400; transition: transform 180ms; }
.btn:hover .arr { transform: translate(3px, -1px); }
.btn-volt {
  background: var(--grad-volt); color: #042826;
  box-shadow: var(--glow-volt), inset 0 1px 0 rgba(255,255,255,0.4);
  font-weight: 600;
}
.btn-volt:hover { box-shadow: 0 0 0 1px var(--volt), 0 14px 36px rgba(0,229,209,0.65), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-lime {
  background: var(--lime); color: #1A1D24;
  box-shadow: var(--glow-lime), inset 0 1px 0 rgba(255,255,255,0.4);
  font-weight: 700;
}
.btn-lime:hover { background: var(--lime-2); color: #1A1D24; }
.btn-glass {
  background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,0.09); border-color: var(--volt); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }

/* ============================================================
   badges
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: var(--r-full);
  letter-spacing: 0;
  border: 1px solid;
}
.b-volt { background: var(--volt-wash); color: var(--volt-2); border-color: rgba(0,229,209,0.45); }
.b-lime { background: var(--lime-wash); color: var(--lime-2); border-color: rgba(232,255,61,0.5); }
.b-coral { background: var(--coral-wash); color: var(--coral-2); border-color: rgba(255,107,92,0.5); }
.b-sky { background: var(--sky-wash); color: var(--sky-2); border-color: rgba(94,201,245,0.5); }
.b-mango { background: var(--mango-wash); color: var(--mango-2); border-color: rgba(255,181,71,0.55); }
.b-neutral { background: var(--nebula-2); color: var(--fg-2); border-color: var(--line); }
.b-solid { background: var(--lime); color: #1A1D24; border-color: var(--lime); font-weight: 700; box-shadow: 0 0 14px rgba(232,255,61,0.5); }
.b-live::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 1.6s ease-in-out infinite; }

/* ============================================================
   form
   ============================================================ */
.field { display: grid; gap: 6px; }
.field label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.input, .textarea {
  font-family: var(--f-sans); font-size: 15px;
  padding: 12px 16px; border-radius: var(--r-2);
  background: var(--midnight); border: 1px solid var(--line);
  color: var(--fg); transition: all 180ms; width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-4); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--volt);
  box-shadow: 0 0 0 3px var(--volt-wash);
  background: var(--nebula);
}
.textarea { resize: vertical; min-height: 96px; }

.seg { display: inline-flex; padding: 3px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: var(--r-full); gap: 2px; }
.seg button {
  font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 14px; border: none; background: transparent;
  border-radius: var(--r-full); cursor: pointer; color: var(--fg-3);
  transition: all 160ms;
}
.seg button.on { background: var(--volt-wash); color: var(--volt-2); }

.switch { width: 44px; height: 26px; background: var(--nebula-2); border: 1px solid var(--line); border-radius: var(--r-full); position: relative; cursor: pointer; transition: all 220ms; padding: 0; }
.switch::after { content:""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg-4); transition: all 220ms; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.switch.on { background: var(--volt-wash); border-color: var(--volt); }
.switch.on::after { left: 20px; background: var(--volt); box-shadow: 0 0 14px var(--volt-glow), 0 1px 3px rgba(0,0,0,0.4); }

/* ============================================================
   fintech widgets
   ============================================================ */
.balance-big {
  font-family: var(--f-sans); font-weight: 400;
  font-size: 72px; line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.balance-big .cur { color: var(--fg-3); font-weight: 300; margin-right: 4px; font-size: 42px; vertical-align: 14px; }
.balance-big .dec { color: var(--fg-3); font-size: 36px; font-weight: 300; }

.spark { height: 64px; display: block; width: 100%; }

/* transaction row */
.tx-list { display: grid; gap: 2px; }
.tx-row {
  display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: var(--r-3);
  background: var(--nebula); border: 1px solid var(--line);
  transition: all 180ms;
}
.tx-row:hover { background: var(--nebula-2); border-color: var(--volt); box-shadow: var(--shadow-1); }
.tx-avatar {
  width: 40px; height: 40px; border-radius: var(--r-2);
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.02em;
}
.tx-name { font-weight: 500; letter-spacing: -0.01em; font-size: 14px; }
.tx-sub { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; letter-spacing: 0.02em; }
.tx-amt { font-family: var(--f-mono); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--fg); }
.tx-amt.pos { color: var(--lime-2); font-weight: 600; }
.tx-amt.neg { color: var(--fg); }

/* flow visualization */
.flow {
  padding: 24px;
  background:
    radial-gradient(ellipse 50% 80% at 0% 50%, var(--volt-wash), transparent 70%),
    radial-gradient(ellipse 50% 80% at 100% 50%, var(--lime-wash), transparent 70%),
    var(--nebula);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
  position: relative; overflow: hidden;
}
.flow-node {
  padding: 16px 20px; border-radius: var(--r-3);
  background: rgba(18,22,30,0.85); border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.flow-node .ttl { font-family: var(--f-mono); font-size: 10px; color: var(--volt-2); letter-spacing: 0.12em; text-transform: uppercase; }
.flow-node .val { font-family: var(--f-sans); font-weight: 500; font-size: 20px; margin-top: 4px; letter-spacing: -0.015em; color: var(--fg); }
.flow-arrow {
  font-family: var(--f-mono); font-size: 20px; color: var(--volt);
  text-shadow: 0 0 12px var(--volt-glow);
}

/* telemetry strip */
.telemetry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--nebula); }
.telemetry .cell { padding: 22px; border-right: 1px solid var(--line-soft); position: relative; }
.telemetry .cell:last-child { border-right: none; }
.telemetry .cell .lbl { font-family: var(--f-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }
.telemetry .cell .val { font-family: var(--f-sans); font-weight: 700; font-size: 30px; letter-spacing: -0.035em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.telemetry .cell .val .u { font-family: var(--f-mono); font-size: 14px; font-weight: 500; color: var(--fg-3); margin-left: 3px; }
.telemetry .cell .delta { display: inline-flex; gap: 4px; align-items: center; font-family: var(--f-mono); font-size: 11px; margin-top: 6px; padding: 2px 8px; border-radius: var(--r-full); }
.telemetry .cell .delta.up { background: var(--lime-wash); color: var(--lime-2); }
.telemetry .cell .delta.dn { background: var(--coral-wash); color: var(--coral-2); }

/* ============================================================
   product tiles
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product {
  padding: 24px; min-height: 260px;
  border-radius: var(--r-4);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  transition: all 260ms cubic-bezier(.2,.8,.2,1); cursor: pointer;
  border: 1px solid var(--line);
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.product.p-volt { background: linear-gradient(160deg, rgba(0,229,209,0.3), rgba(0,229,209,0.05)), var(--nebula); }
.product.p-lime { background: linear-gradient(160deg, rgba(232,255,61,0.28), rgba(232,255,61,0.04)), var(--nebula); }
.product.p-coral { background: linear-gradient(160deg, rgba(255,107,92,0.32), rgba(255,107,92,0.06)), var(--nebula); }
.product.p-sky { background: linear-gradient(160deg, rgba(94,201,245,0.32), rgba(94,201,245,0.06)), var(--nebula); }
.product .p-glyph {
  width: 48px; height: 48px; border-radius: var(--r-3);
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  display: grid; place-items: center;
  font-size: 22px; color: var(--fg); font-weight: 600;
  box-shadow: var(--shadow-1);
}
.product .p-name { font-family: var(--f-mono); font-size: 10px; color: var(--fg-2); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 24px; }
.product .p-title { font-family: var(--f-sans); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.03em; color: var(--fg); margin-top: 8px; }
.product .p-title em { font-style: italic; font-weight: 500; color: var(--volt-2); display: inline-block; padding-inline-end: 0.12em; margin-inline-end: -0.06em; }
.product.p-lime .p-title em { color: var(--lime-2); }
.product.p-coral .p-title em { color: var(--coral-2); }
.product.p-sky .p-title em { color: var(--sky-2); }
.product .p-desc { font-size: 13px; color: var(--fg-2); margin-top: 10px; line-height: 1.5; }
.product .p-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); }

/* ============================================================
   placeholder
   ============================================================ */
.ph {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--nebula) 0, var(--nebula) 8px, var(--midnight) 8px, var(--midnight) 16px);
  border: 1px dashed var(--line);
  border-radius: var(--r-3);
  display: grid; place-items: center;
  color: var(--fg-3); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  min-height: 120px;
}
.ph::after { content: attr(data-label); background: var(--bg); padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--line); }

/* ============================================================
   radii + spacing + shadow
   ============================================================ */
.radii-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.radii-box {
  aspect-ratio: 1; background: var(--grad-surf), var(--nebula); border: 1px solid var(--line);
  display: grid; place-items: end center; padding: 10px;
  font-family: var(--f-mono); font-size: 10px; color: var(--fg-3);
}
.spacing-list { display: grid; gap: 10px; font-family: var(--f-mono); font-size: 11px; }
.spacing-list .row { display: grid; grid-template-columns: 56px 60px 1fr; align-items: center; gap: 16px; }
.spacing-list .bar { height: 10px; background: var(--grad-volt); border-radius: 2px; box-shadow: 0 0 10px var(--volt-glow); }

.shadow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.shadow-box {
  aspect-ratio: 4/3; background: var(--nebula); border-radius: var(--r-3);
  border: 1px solid var(--line);
  display: grid; place-items: end center; padding: 12px;
  font-family: var(--f-mono); font-size: 10px; color: var(--fg-3);
}

/* ============================================================
   applied hero (marketing)
   ============================================================ */
.applied-hero {
  padding: 48px;
  border-radius: var(--r-5);
  background:
    radial-gradient(ellipse 50% 70% at 10% 100%, rgba(0,229,209,0.28), transparent 60%),
    radial-gradient(ellipse 50% 70% at 90% 0%, rgba(232,255,61,0.15), transparent 60%),
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(94,201,245,0.1), transparent 60%),
    var(--nebula);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-2);
}

/* ============================================================
   footer
   ============================================================ */
footer {
  margin-top: 120px; padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-3);
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: grid; gap: 14px; }
.g { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.g-12 { grid-column: span 12; } .g-8 { grid-column: span 8; } .g-6 { grid-column: span 6; }
.g-5 { grid-column: span 5; } .g-4 { grid-column: span 4; } .g-3 { grid-column: span 3; }
.muted { color: var(--fg-3); }
.ac { color: var(--volt-2); }
.ac-lime { color: var(--lime-2); }

@media (max-width: 1000px) {
  .page { padding: 20px; }
  .hero { grid-template-columns: 1fr; }
  .principle-grid, .product-grid, .palette-grid { grid-template-columns: repeat(2, 1fr); }
  .surface-strip { grid-template-columns: repeat(3, 1fr); }
  .radii-row { grid-template-columns: repeat(3, 1fr); }
  .telemetry, .shadow-grid { grid-template-columns: repeat(2, 1fr); }
  .g-8, .g-6, .g-5, .g-4, .g-3 { grid-column: span 12; }
  .type-row, .sect-head { grid-template-columns: 1fr; }
  .sect-head .desc { text-align: left; justify-self: start; }
  .flow { grid-template-columns: 1fr; }
}

/* mobile topbar — stay as a single clean pill on narrow screens */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto auto;
    gap: 12px;
    padding: 8px 10px 8px 14px;
  }
  .topbar .nav-rail { display: none; }
  .topbar-right .live-chip { display: none; }
  .brand .name { font-size: 14px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; }
}