/* ═══════════════════════════════════════════════
   GREYSPAN.AI — prototype design system
   base: black / grey / white (existing brand)
   flare: cyan (Loki-1) · violet (Pulse) · amber (easter eggs)
   Hamr himself is deliberately hueless — see the companion section.
   ═══════════════════════════════════════════════ */

:root {
  --bg: #06070a;
  --bg-2: #0b0d12;
  --panel: #10131a;
  --panel-2: #151924;
  --line: rgba(255, 255, 255, 0.09);
  --ink: #f4f5f7;
  --ink-2: #a8adb8;
  --ink-3: #6b7079;
  --cyan: #4de3ff;
  --violet: #9d8bff;
  --amber: #ffb03a;
  --ok: #57e6a8;
  --font: "Helvetica Neue", "Inter", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0.02em;
  overflow-x: hidden;
  min-height: 100vh;
}

.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; }

::selection { background: var(--cyan); color: #04141a; }

/* ── ambient canvas + grain ───────────────────── */
#field {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

main, .nav, .modal, .hamr-wrap, .toasts { position: relative; z-index: 2; }

/* ── custom cursor ────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--cyan); }
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(77, 227, 255, 0.5);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s;
}
body.cursor-hover .cursor-ring { width: 56px; height: 56px; border-color: var(--amber); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body { cursor: none; }
  a, button, input, summary, [role="button"] { cursor: none; }
}

/* ── nav ──────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.8rem;
  padding: 1.1rem 2.4rem;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.4s var(--ease);
}
.logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.28em;
  color: var(--ink); text-decoration: none; position: relative;
}
.logo-mark { height: 2rem; width: auto; display: block; flex: none; }
.logo:hover { text-shadow: 2px 0 var(--cyan), -2px 0 var(--violet); }
.nav-links { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; }
/* every nav item — plain links and dropdown triggers — shares one box + baseline */
.nav-links > a, .nav-drop > a {
  display: inline-flex; align-items: center; line-height: 1;
}
.nav-links a {
  color: var(--ink-2); text-decoration: none;
  font-size: 0.74rem; letter-spacing: 0.22em; font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--cyan);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 1.8rem; }

/* nav dropdown (Contact ▾ Careers) */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > a { color: var(--ink-2); text-decoration: none; font-size: 0.74rem; letter-spacing: 0.22em; font-weight: 500; transition: color 0.2s; }
.nav-drop > a:hover { color: var(--ink); }
.nav-drop .caret { font-size: 0.6rem; color: var(--ink-3); transition: transform 0.25s var(--ease); display: inline-block; }
.nav-drop:hover .caret, .nav-drop:focus-within .caret { transform: rotate(180deg); color: var(--cyan); }
.drop-menu {
  position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 170px; padding: 0.5rem 0;
  background: rgba(10, 12, 17, 0.95); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.drop-menu::before { content: ""; position: absolute; top: -0.95rem; left: 0; right: 0; height: 1rem; }
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.drop-menu a {
  display: block; padding: 0.65rem 1.2rem;
  color: var(--ink-2); text-decoration: none;
  font-size: 0.68rem; letter-spacing: 0.22em; font-weight: 500;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
.drop-menu a:hover { color: var(--cyan); background: rgba(77, 227, 255, 0.06); padding-left: 1.45rem; }
.drop-menu a::after { display: none; }
.egg-chip {
  font-family: var(--mono); font-size: 0.7rem; color: var(--amber);
  background: none;
  border: 1px solid rgba(255, 176, 58, 0.35); border-radius: 999px;
  padding: 0.25rem 0.7rem;
  opacity: 0; transform: translateY(-6px); transition: 0.4s var(--ease);
  pointer-events: none;
}
.egg-chip.on { opacity: 1; transform: none; pointer-events: auto; }
.egg-chip.on:hover { border-color: var(--amber); box-shadow: 0 0 14px rgba(255, 176, 58, 0.25); }

/* egg tracker panel */
.eggs-panel { padding: 2.2rem; width: min(540px, 100%); }
.eggs-panel h2 { letter-spacing: 0.14em; margin-bottom: 1.1rem; }
.eggs-progress { color: var(--ink-3); letter-spacing: 0.26em; font-size: 0.62rem; margin-bottom: 0.5rem; }
.egg-bar { height: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); margin-bottom: 1.3rem; }
.egg-bar i {
  display: block; height: 100%; width: 0;
  background: var(--amber); box-shadow: 0 0 12px rgba(255, 176, 58, 0.5);
  transition: width 0.6s var(--ease);
}
.egg-list {
  list-style: none; display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 46vh; overflow-y: auto; margin-bottom: 1.2rem;
}
.egg-row {
  display: flex; gap: 0.8rem; align-items: baseline;
  border: 1px solid var(--line); background: var(--panel);
  padding: 0.65rem 0.9rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.egg-row.got { color: var(--ink); border-color: rgba(255, 176, 58, 0.35); }

/* logo glitch (identity crisis egg) */
.logo.glitching { animation: logoGlitch 0.16s steps(2) 8; }
@keyframes logoGlitch {
  25% { transform: translate(-2px, 1px) skewX(-4deg); text-shadow: 3px 0 var(--cyan), -3px 0 var(--violet); }
  75% { transform: translate(2px, -1px) skewX(4deg); text-shadow: -3px 0 var(--cyan), 3px 0 var(--violet); }
}

/* ── burger + mobile menu ─────────────────────── */
.nav-burger {
  display: none; background: none; border: none;
  width: 40px; height: 34px; padding: 8px;
  flex-direction: column; justify-content: space-between;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 5, 8, 0.92); backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
}
.mobile-links { display: flex; flex-direction: column; gap: 1.5rem; text-align: center; }
.mobile-links a {
  color: var(--ink); text-decoration: none;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.28em;
  opacity: 0; transform: translateY(16px);
  animation: rise2 0.5s var(--ease) forwards;
}
.mobile-links a:nth-child(2) { animation-delay: 0.05s; }
.mobile-links a:nth-child(3) { animation-delay: 0.1s; }
.mobile-links a:nth-child(4) { animation-delay: 0.15s; }
.mobile-links a:nth-child(5) { animation-delay: 0.2s; }
.mobile-links a:nth-child(6) { animation-delay: 0.25s; }
.mobile-links a:nth-child(7) { animation-delay: 0.3s; }
.mobile-links a:nth-child(8) { animation-delay: 0.35s; }
.mobile-links a:nth-child(9) { animation-delay: 0.4s; }
@keyframes rise2 { to { opacity: 1; transform: none; } }
.mobile-links a:active, .mobile-links a:hover { color: var(--cyan); }
.mobile-links .mobile-privacy { font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.3em; margin-top: 1rem; }

/* ── buttons ──────────────────────────────────── */
.btn {
  display: inline-block; border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  font-family: var(--font); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-decoration: none; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  transition: all 0.25s var(--ease);
  position: relative; overflow: hidden;
}
.btn-solid { background: var(--ink); color: #0a0a0e; }
.btn-solid:hover { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 32px rgba(77, 227, 255, 0.35); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 18px rgba(77, 227, 255, 0.08); }
.btn-cyan.btn-solid { background: var(--cyan); border-color: var(--cyan); color: #04141a; }
.btn-cyan.btn-solid:hover { box-shadow: 0 0 36px rgba(77, 227, 255, 0.5); }
.btn-violet.btn-solid { background: var(--violet); border-color: var(--violet); color: #120e2a; }
.btn-violet.btn-solid:hover { box-shadow: 0 0 36px rgba(157, 139, 255, 0.5); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.68rem; }
.btn-wide { width: 100%; text-align: center; }

/* ── hero ─────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem 2.4rem 4rem; position: relative;
}
.hero-kicker { font-family: var(--mono); color: var(--cyan); font-size: 0.75rem; letter-spacing: 0.3em; margin-bottom: 1.6rem; }
.hero-title {
  font-size: clamp(2.2rem, 6.2vw, 5.1rem);
  font-weight: 700; letter-spacing: 0.06em; line-height: 1.04;
  text-transform: uppercase;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; transform: translateY(110%); animation: rise 0.9s var(--ease) forwards; }
/* Stroke width is in em, not px: .hero-title's font-size is a clamp() ranging from
   35px on a phone to 82px on a desktop, so a fixed px stroke that reads as a hairline
   at 82px is proportionally over twice as heavy at 35px. em keeps the ratio constant. */
.accent-line { color: transparent; -webkit-text-stroke: 0.02em var(--ink); }

/* Below 720px the outline treatment stops working, so drop it for a dimmed solid fill.
   -webkit-text-stroke traces every edge of a glyph, so each stroke of a letter becomes
   two lines with a hollow gap between them. At the desktop 82px the stems are ~10px
   wide and that gap reads as deliberate outlined type; at the phone 35px they are ~4px
   and it collapses. It fails worst on the letters whose horizontal bars are drawn
   thinner than their stems - A P E D T L - where the gap closes first and the bar/stem
   junction adds another notch, while G I N (no horizontal bars) stay legible. No stroke
   width or font size fixes this within a ~367px viewport: the effect needs roughly
   twice the letter size a phone can give it. Verified on a Pixel 7a over USB debugging.
   The dimmed fill keeps this line reading as secondary to the two solid lines above. */
@media (max-width: 720px) {
  .accent-line {
    -webkit-text-stroke: 0;
    color: var(--ink-2);
    -webkit-text-fill-color: var(--ink-2);
  }
}
@keyframes rise { to { transform: translateY(0); } }
.hero-sub { color: var(--ink-2); font-size: 1.05rem; margin-top: 1.6rem; letter-spacing: 0.08em; }
.hero-cta { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-status {
  display: flex; gap: 2.2rem; margin-top: 3.4rem; flex-wrap: wrap;
  color: var(--ink-3); font-size: 0.7rem;
}
.hero-status .ok, .ok { color: var(--ok); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.4rem; }
.dot-on { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: var(--ink-3); font-size: 0.65rem; text-align: center; letter-spacing: 0.3em;
  animation: floaty 2.6s ease-in-out infinite;
}
@keyframes floaty { 50% { transform: translate(-50%, 8px); } }

/* ── marquee ──────────────────────────────────── */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.9rem 0; background: rgba(255,255,255,0.015); }
.marquee-track { display: flex; white-space: nowrap; animation: marquee 28s linear infinite; }
.marquee-track span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.35em; color: var(--ink-3); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── sections ─────────────────────────────────── */
.section { padding: 6rem 2.4rem; max-width: 1200px; margin: 0 auto; }
.section-kicker { font-family: var(--mono); color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.3em; margin-bottom: 0.9rem; }
.section-title { font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: 0.1em; font-weight: 700; margin-bottom: 3.2rem; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in, .reveal-now { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── cards ────────────────────────────────────── */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  padding: 2rem 1.8rem; position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.card:hover { border-color: rgba(255, 255, 255, 0.22); }
.card h3 { font-size: 0.95rem; letter-spacing: 0.16em; margin: 1rem 0 0.8rem; }
.card p { color: var(--ink-2); font-size: 0.88rem; line-height: 1.65; }
.card-num { color: var(--ink-3); font-size: 0.7rem; }
.card-glow {
  position: absolute; top: -60px; right: -60px; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.09), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.glow-cyan { background: radial-gradient(circle, rgba(77,227,255,0.16), transparent 70%); }
.glow-violet { background: radial-gradient(circle, rgba(157,139,255,0.16), transparent 70%); }
.card:hover .card-glow { opacity: 1; }

/* ── concept mini-analytics ───────────────────── */
.cards-concepts .card { display: flex; flex-direction: column; }
.mini-viz {
  margin-top: auto; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.cards-concepts .card > p { margin-bottom: 1.4rem; }
.viz-title { color: var(--ink-3); font-size: 0.58rem; letter-spacing: 0.24em; margin-bottom: 0.9rem; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 0.3rem; margin-bottom: 0.8rem; }
.bar-label { color: var(--ink-3); font-size: 0.58rem; letter-spacing: 0.18em; }
.bar {
  height: 10px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.bar i {
  position: absolute; inset: 1px auto 1px 1px; width: 0; display: block;
  background: var(--ink-3); border-radius: 0 3px 3px 0;
  transition: width 1.2s var(--ease) 0.3s;
}
.bar-cyan i { background: var(--cyan); box-shadow: 0 0 12px rgba(77, 227, 255, 0.4); }
.card.in .bar i { width: calc(var(--w) - 2px); }
.bar-val { color: var(--ink); font-size: 0.62rem; font-variant-numeric: tabular-nums; }
.viz-headline { color: var(--ink-2); font-size: 0.62rem; letter-spacing: 0.12em; margin-top: 1rem; line-height: 1.7; }
.viz-headline b { color: var(--ok); }
.stat-mini-row { display: flex; flex-direction: column; gap: 0.85rem; }
.stat-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.stat-mini b { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; }
.stat-mini b span { font: inherit; color: inherit; letter-spacing: inherit; }
.stat-mini > span { color: var(--ink-3); font-size: 0.56rem; letter-spacing: 0.18em; text-align: right; }
.viz-disclaimer { color: var(--ink-3); font-size: 0.58rem; letter-spacing: 0.2em; margin-top: 1.8rem; line-height: 1.8; }

/* ── products ─────────────────────────────────── */
.product {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.6rem;
  align-items: center; padding: 4rem 0; border-top: 1px solid var(--line);
}
.product-flip .product-info { order: 2; }
.product-flip .product-visual { order: 1; }
.product-tag { color: var(--ink-3); font-size: 0.68rem; letter-spacing: 0.26em; margin-bottom: 0.9rem; }
.product-name { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: 0.08em; font-weight: 700; }
.product-name .thin { font-weight: 200; color: var(--ink-2); }
[data-accent="cyan"] .product-name { text-shadow: 0 0 42px rgba(77, 227, 255, 0.35); }
[data-accent="violet"] .product-name { text-shadow: 0 0 42px rgba(157, 139, 255, 0.35); }
.product-desc { color: var(--ink-2); line-height: 1.7; margin: 1.2rem 0 1.4rem; max-width: 46ch; }
.product-feats { list-style: none; margin-bottom: 1.8rem; }
.product-feats li { color: var(--ink-3); font-size: 0.7rem; letter-spacing: 0.18em; padding: 0.35rem 0; }
[data-accent="cyan"] .product-feats li { color: rgba(77, 227, 255, 0.75); }
[data-accent="violet"] .product-feats li { color: rgba(157, 139, 255, 0.78); }

/* loki terminal preview */
.term-preview, .modal-panel.term {
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.term-preview { transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s; position: relative; }
.term-preview:hover { transform: translateY(-6px); border-color: rgba(77, 227, 255, 0.4); box-shadow: 0 30px 90px rgba(77, 227, 255, 0.12); }
.term-bar {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line);
}
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2f3a; }
.term-bar i:nth-child(1) { background: #ff5f57; } .term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 0.7rem; color: var(--ink-3); }
.term-body { padding: 1.3rem; font-size: 0.78rem; line-height: 1.8; color: var(--ink-2); }
.term-body .prompt, .prompt { color: var(--cyan); }
.term-body .resp b { color: var(--ok); }
.caret { animation: blink 1s steps(1) infinite; color: var(--cyan); }
.term-hint {
  position: absolute; bottom: 0.7rem; right: 1rem;
  color: var(--ink-3); font-size: 0.6rem; letter-spacing: 0.3em;
  opacity: 0.7;
}

/* pulse orb preview */
.pulse-preview {
  position: relative; height: 320px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
  overflow: hidden;
}
.pulse-preview:hover { transform: translateY(-6px); border-color: rgba(157, 139, 255, 0.4); box-shadow: 0 30px 90px rgba(157, 139, 255, 0.12); }
.pulse-ring {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 1px solid rgba(157, 139, 255, 0.5);
  animation: pulse 2.8s ease-out infinite;
}
.pulse-ring.r2 { animation-delay: 1.4s; }
@keyframes pulse { from { transform: scale(0.7); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.pulse-core {
  font-size: 2.6rem; color: var(--violet); text-align: center; letter-spacing: 0.05em;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.pulse-core span { font-size: 0.58rem; color: var(--ink-3); letter-spacing: 0.3em; }

/* ── section intro + use-case chips + better-together ── */
.section-intro { color: var(--ink-2); line-height: 1.75; max-width: 62ch; margin: 0 0 2.6rem; }
.usecase-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; }
.usecase-chips span {
  border: 1px solid rgba(77, 227, 255, 0.25); color: rgba(77, 227, 255, 0.8);
  font-size: 0.6rem; letter-spacing: 0.18em; padding: 0.4rem 0.75rem;
}
.better-together {
  margin-top: 3.2rem; padding: 2.2rem;
  border: 1px solid var(--line); background: var(--panel);
  border-image: linear-gradient(90deg, rgba(77,227,255,.4), rgba(157,139,255,.4)) 1;
}
.better-together h3 { letter-spacing: 0.2em; font-size: 0.95rem; margin-bottom: 0.9rem; }
.better-together p { color: var(--ink-2); line-height: 1.75; max-width: 72ch; }

/* ── founders ─────────────────────────────────── */
.founders-section { padding-top: 9rem; }
.founder {
  display: grid; grid-template-columns: 340px 1fr; gap: 3rem;
  align-items: start; padding: 3.4rem 0; border-top: 1px solid var(--line);
}
.founder-flip { grid-template-columns: 1fr 340px; }
.founder-flip .founder-photo { order: 2; }
.founder-flip .founder-info { order: 1; }
.founder-photo { position: relative; }
.founder-photo img {
  width: 100%; display: block; border: 1px solid var(--line);
  filter: grayscale(0.85) contrast(1.05);
  transition: filter 0.5s var(--ease), box-shadow 0.5s;
}
.founder-photo:hover img { filter: grayscale(0); box-shadow: 0 20px 70px rgba(77, 227, 255, 0.14); }
.photo-frame {
  position: absolute; inset: -10px; pointer-events: none;
  border: 1px solid rgba(77, 227, 255, 0.25);
  clip-path: polygon(0 0, 34px 0, 34px 1px, 1px 1px, 1px 34px, 0 34px, 0 0,
                     100% 100%, calc(100% - 34px) 100%, calc(100% - 34px) calc(100% - 1px),
                     calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 34px), 100% calc(100% - 34px), 100% 100%);
}
.founder-role { color: var(--cyan); font-size: 0.68rem; letter-spacing: 0.3em; margin-bottom: 0.7rem; }
.founder-name { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: 0.1em; margin-bottom: 1.1rem; }
.founder-bio { color: var(--ink-2); line-height: 1.8; max-width: 62ch; }
.certs-label { color: var(--ink-3); letter-spacing: 0.3em; font-size: 0.62rem; margin: 1.6rem 0 0.8rem; }
.certs { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.certs img {
  height: 72px; width: auto;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  padding: 6px; transition: transform 0.25s var(--ease), border-color 0.25s;
}
.certs img:hover { transform: translateY(-4px) scale(1.05); border-color: rgba(77, 227, 255, 0.4); }
.certs-small { margin-top: 1.1rem; }
.certs-small img { height: 52px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.member-card { padding-top: 1.6rem; }
.member-photo { overflow: hidden; border: 1px solid var(--line); margin-bottom: 1.2rem; aspect-ratio: 1 / 1; }
.member-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.85); transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.member-card:hover .member-photo img { filter: grayscale(0); transform: scale(1.04); }
.member-role { color: var(--ink-3); letter-spacing: 0.24em; font-size: 0.62rem; margin: -0.3rem 0 0.8rem; }
.footer-link { color: var(--ink-3); text-decoration: none; }
.footer-link:hover { color: var(--cyan); }
@media (max-width: 880px) {
  .founder, .founder-flip { grid-template-columns: 1fr; gap: 1.6rem; }
  .founder-flip .founder-photo { order: 1; }
  .founder-flip .founder-info { order: 2; }
  .founder-photo { max-width: 380px; }
}

/* character counter (careers message) */
.char-count {
  display: block; text-align: right; margin-top: 0.4rem;
  color: var(--ink-3); font-size: 0.58rem; letter-spacing: 0.16em;
}
.char-count.near { color: var(--amber); }

/* ── NVIDIA Inception ─────────────────────────── */
.inception { text-align: center; }
/* NVIDIA rule: the program name must not be all-caps — override the site's uppercase heading here */
.inception-title { text-transform: none; }
.inception-grid {
  display: flex; align-items: center; justify-content: center;
  gap: 3rem; flex-wrap: wrap; text-align: left;
}
/* light clear-space panel — required contrast; badge is never recolored or cropped */
.inception-badge-wrap {
  background: #fff; border-radius: 14px;
  padding: 2rem 2.4rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}
.inception-badge-wrap img { display: block; width: 320px; max-width: 100%; height: auto; }
.inception-copy { flex: 1 1 340px; max-width: 46ch; }
.inception-copy p { color: var(--ink-2); line-height: 1.8; margin-bottom: 1.1rem; }
.inception-copy b { color: var(--ink); }
.inception-legal {
  color: var(--ink-3); font-size: 0.58rem; line-height: 1.9; letter-spacing: 0.08em;
  max-width: 80ch; margin: 2.6rem auto 0; text-transform: none;
}
@media (max-width: 720px) {
  .inception-grid { gap: 2rem; }
  .inception-badge-wrap { padding: 1.5rem 1.8rem; }
}

/* ── legal / privacy policy ───────────────────── */
.legal-dates { color: var(--ink-3); letter-spacing: 0.22em; font-size: 0.62rem; margin: -2.2rem 0 2.6rem; }
.legal-body { max-width: 78ch; }
.legal-body p { color: var(--ink-2); line-height: 1.85; font-size: 0.92rem; margin-bottom: 1.1rem; }
.legal-body h3 {
  font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); margin: 2.4rem 0 0.9rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.legal-body ul { margin: 0 0 1.1rem 1.2rem; }
.legal-body li { color: var(--ink-2); line-height: 1.8; font-size: 0.92rem; margin-bottom: 0.55rem; }
.legal-body li b { color: var(--ink); }
.legal-address { color: var(--ink-2); line-height: 2; font-size: 0.72rem; letter-spacing: 0.14em; }
.legal-address a { color: var(--cyan); text-decoration: none; }

/* ── contact ──────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; align-items: start; }
.contact-copy p { color: var(--ink-2); line-height: 1.8; margin-bottom: 1.3rem; }
.contact-meta { border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 2rem; }
.contact-meta p { color: var(--ink-3); font-size: 0.7rem; letter-spacing: 0.16em; margin-bottom: 0.7rem; }
.contact-meta a { color: var(--cyan); text-decoration: none; }
.contact-meta a:hover { text-shadow: 0 0 14px rgba(77, 227, 255, 0.6); }
.contact-form {
  background: var(--panel); border: 1px solid var(--line); padding: 2.2rem;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
}
.form-title { color: var(--ink-3); letter-spacing: 0.2em; margin-bottom: 1.6rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field select, .field textarea {
  display: block; width: 100%; margin-top: 0.5rem;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: 0.85rem; padding: 0.8rem 0.9rem;
  outline: none; transition: border-color 0.25s, box-shadow 0.25s; resize: vertical;
}
.field select:focus, .field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(77, 227, 255, 0.12); }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .field-row { grid-template-columns: 1fr; }
}

/* ── steps / how it works ─────────────────────── */
.steps { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; }
.step { flex: 1 1 220px; background: var(--panel); border: 1px solid var(--line); padding: 1.8rem; }
.step-n { color: var(--cyan); font-size: 0.8rem; }
.step h4 { margin: 0.8rem 0 0.6rem; letter-spacing: 0.2em; font-size: 0.85rem; }
.step p { color: var(--ink-2); font-size: 0.85rem; line-height: 1.6; }
.step-line { flex: 0 0 34px; align-self: center; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.loop-line { margin-top: 2.6rem; color: var(--ink-3); font-size: 0.7rem; letter-spacing: 0.2em; }

/* ── cta band + footer ────────────────────────── */
.cta-band {
  text-align: center; padding: 6rem 2.4rem;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(77, 227, 255, 0.06), transparent);
}
.cta-band h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: 0.12em; margin-bottom: 2rem; }
.cta-band .hero-cta { justify-content: center; }
.footer {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 2rem 2.4rem; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 0.65rem;
}

/* ── social links (footer) ─────────────────────── */
/* the <svg><symbol> sprite itself never renders — it's only referenced by <use> */
.icon-sprite { display: none; }
.footer-social {
  display: flex; align-items: center; gap: 0.9rem;
  margin-left: auto;                  /* always ride the right edge */
}
.footer-social a {
  display: inline-flex; color: var(--ink-3);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-social svg {
  width: 18px; height: 18px; display: block;
  fill: currentColor;                 /* glyphs are solid paths, not strokes */
}
.footer-social a:hover { color: var(--cyan); transform: translateY(-2px); }
@media (max-width: 880px) {
  .footer-social { margin-left: 0; }  /* wraps onto its own line on phones */
}

/* hidden glyphs (easter egg) — shapes Hamr shed and forgot to pick up */
.hidden-glyph {
  background: none; border: none; color: inherit; font-size: 0.85rem;
  opacity: 0.28; transition: opacity 0.3s, transform 0.3s;
  padding: 0 0.15rem;
}
.hidden-glyph:hover { opacity: 1; transform: rotate(-12deg) scale(1.3); }
.hidden-glyph.found { opacity: 1; color: var(--amber); }
.hidden-glyph svg { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.22em; stroke: currentColor; fill: none; }
.hero .hidden-glyph { position: absolute; bottom: 2rem; left: 2.6rem; font-size: 1.1rem; }
.inline-glyph { font-size: 0.95rem; }

/* ── portal ───────────────────────────────────── */
.portal-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 7rem 1.4rem 4rem; }
.login-card {
  width: min(430px, 100%); background: var(--panel); border: 1px solid var(--line);
  padding: 2.8rem 2.4rem;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55), 0 0 60px rgba(77, 227, 255, 0.05);
}
.login-title { letter-spacing: 0.18em; margin-bottom: 1.2rem; }
/* business / personal toggle */
.acct-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; margin-bottom: 1.2rem;
}
.acct-opt {
  background: none; border: none; border-radius: 6px;
  padding: 0.6rem 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
  color: var(--ink-3); transition: all 0.2s var(--ease);
}
.acct-opt.on { background: var(--cyan); color: #04141a; font-weight: 700; }
.acct-opt:not(.on):hover { color: var(--ink); }
/* personal store buttons */
.personal-intro { color: var(--ink-2); line-height: 1.7; max-width: 62ch; margin-bottom: 1.4rem; }
.store-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.store-btn {
  display: flex; align-items: center; gap: 0.7rem;
  background: #0a0b0e; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
  padding: 0.7rem 1.15rem; color: #fff; transition: border-color 0.2s, box-shadow 0.2s;
}
.store-btn:hover { border-color: var(--cyan); box-shadow: 0 0 22px rgba(77,227,255,0.15); }
.store-ico { font-size: 1.3rem; line-height: 1; width: 1.4rem; text-align: center; }
.store-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.store-txt em { font-style: normal; font-size: 0.55rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.store-txt b { font-size: 0.95rem; font-weight: 600; }
.login-sub { color: var(--ink-2); font-size: 0.85rem; margin-bottom: 2rem; }
.field { display: block; color: var(--ink-3); font-size: 0.65rem; letter-spacing: 0.24em; margin-bottom: 1.2rem; }
.field input {
  display: block; width: 100%; margin-top: 0.5rem;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: 0.85rem; padding: 0.8rem 0.9rem;
  outline: none; transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(77, 227, 255, 0.12); }
.login-note { margin-top: 1.1rem; color: var(--ink-3); font-size: 0.62rem; text-align: center; }
/* Sign in with Microsoft */
.ms-signin { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.ms-logo { width: 18px; height: 18px; flex: none; }
.portal-home { padding: 8.5rem 2.4rem 5rem; max-width: 1200px; margin: 0 auto; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.portal-sub { color: var(--ink-3); letter-spacing: 0.3em; margin: 3rem 0 1.2rem; }
.portal-email { color: var(--ink-3); letter-spacing: 0.12em; font-size: 0.72rem; margin-top: 0.4rem; }

/* license panel */
.license-panel {
  border: 1px solid rgba(77, 227, 255, 0.28); background: var(--panel);
  padding: 1.6rem 1.8rem; margin-bottom: 1rem;
  box-shadow: 0 0 40px rgba(77, 227, 255, 0.05);
}
.license-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.license-key-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
.license-key {
  font-size: 1.05rem; letter-spacing: 0.14em; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 0.5rem 0.9rem; border-radius: 4px;
}
.license-status { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; padding-top: 0.3rem; }
.license-status.ok { color: var(--ok); }
.license-status.bad { color: #ff6b6b; }
.license-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem;
  margin: 1.6rem 0 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.license-meta > div { display: flex; flex-direction: column; gap: 0.35rem; }
.lm-label { color: var(--ink-3); font-size: 0.56rem; letter-spacing: 0.22em; }
.lm-val { color: var(--ink); font-size: 0.78rem; letter-spacing: 0.06em; }
.license-note { color: var(--ink-3); font-size: 0.6rem; line-height: 1.7; letter-spacing: 0.06em; }
.dl-btn:disabled { opacity: 0.35; pointer-events: none; }

.dl-card .ver { color: var(--cyan); font-size: 0.7rem; }
.dl-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.checksum { color: var(--ink-3); font-size: 0.62rem; margin-top: 1rem; }
.guide-card:hover { transform: translateY(-4px); }
.faq details { border: 1px solid var(--line); background: var(--panel); margin-bottom: 0.7rem; }
.faq summary {
  padding: 1.1rem 1.4rem; font-size: 0.85rem; letter-spacing: 0.06em;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq summary::after { content: "+"; color: var(--cyan); font-family: var(--mono); margin-left: 1rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 1.4rem 1.2rem; color: var(--ink-2); font-size: 0.85rem; line-height: 1.65; }
.faq details p:first-of-type { padding-top: 0.2rem; }
.faq details a { color: var(--cyan); text-decoration: none; }
.faq details a:hover { text-decoration: underline; }
.faq details code {
  font-family: var(--mono); font-size: 0.78rem;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 0.1rem 0.4rem; border-radius: 3px; color: var(--cyan);
}
/* guides: the G-0x tag sits inside the summary */
.guides summary .card-num { color: var(--cyan); margin-right: 0.7rem; }

/* ── modals ───────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3, 4, 6, 0.78); backdrop-filter: blur(6px); }
.modal-panel {
  position: relative; width: min(680px, 100%);
  background: var(--bg-2); border: 1px solid var(--line);
  animation: modalIn 0.45s var(--ease);
  max-height: 88vh; display: flex; flex-direction: column;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(26px) scale(0.98); } }
.modal-x {
  margin-left: auto; background: none; border: none; color: var(--ink-3);
  font-size: 0.9rem; padding: 0.2rem 0.4rem; transition: color 0.2s;
}
.modal-x:hover { color: var(--ink); }
.term-status { display: flex; gap: 1.6rem; padding: 0.6rem 1.2rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 0.62rem; }

/* loki chat */
.chat { padding: 1.2rem; overflow-y: auto; flex: 1; min-height: 240px; max-height: 44vh; display: flex; flex-direction: column; gap: 0.9rem; }
.msg { font-family: var(--mono); font-size: 0.78rem; line-height: 1.75; max-width: 92%; }
.msg-you { align-self: flex-end; color: var(--ink); text-align: right; }
.msg-you .who { color: var(--ink-3); }
.msg-loki { align-self: flex-start; color: var(--ink-2); }
.msg-loki .who { color: var(--cyan); }
.msg-loki b { color: var(--ok); }
.msg .who { display: block; font-size: 0.6rem; letter-spacing: 0.24em; margin-bottom: 0.25rem; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0 1.2rem 0.9rem; }
.chip {
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  padding: 0.4rem 0.8rem; font-size: 0.62rem; letter-spacing: 0.14em;
  transition: all 0.2s;
}
.chip:hover { border-color: var(--cyan); color: var(--cyan); }
.chat-input { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); }
.chat-input input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--ink); font-family: var(--mono); font-size: 0.82rem;
}

/* pulse dashboard */
.pulse-dash { width: min(760px, 100%); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } }
.stat { background: var(--bg-2); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.stat-label { color: var(--ink-3); font-size: 0.6rem; letter-spacing: 0.2em; }
.stat-num { font-size: 2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-foot { color: var(--ink-3); font-size: 0.62rem; }
.spark { width: 100%; height: 44px; }
.pulse-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4rem; padding: 1.4rem; }
.feed-title { color: var(--ink-3); letter-spacing: 0.26em; margin-bottom: 0.9rem; }
.pulse-feed ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.pulse-feed li {
  font-size: 0.66rem; color: var(--ink-2); letter-spacing: 0.05em;
  padding: 0.55rem 0.7rem; border: 1px solid var(--line); background: var(--panel);
  animation: feedIn 0.5s var(--ease);
}
.pulse-feed li .n { color: var(--violet); }
@keyframes feedIn { from { opacity: 0; transform: translateX(-14px); } }
.rec-card { border: 1px solid rgba(157, 139, 255, 0.35); background: var(--panel); padding: 1.4rem; height: fit-content; }
.rec-tag { color: var(--violet); font-size: 0.6rem; letter-spacing: 0.24em; margin-bottom: 0.8rem; }
.rec-card h3 { letter-spacing: 0.14em; font-size: 1rem; margin-bottom: 0.7rem; }
.rec-card p { color: var(--ink-2); font-size: 0.82rem; line-height: 1.6; margin-bottom: 1.2rem; }
.rec-done { color: var(--ok); font-size: 0.7rem; margin-top: 1rem; }

/* ═══════════════════════════════════════════════
   APP-SKIN — demo modals styled like the real
   Loki-1 / Pulse apps (light monochrome, black banner).
   Scoped under .app-skin so nothing leaks into the site.
   ═══════════════════════════════════════════════ */
.app-skin {
  --a-bg: #f4f5f7; --a-card: #ffffff; --a-ink: #0b0d12; --a-ink-2: #5b616b;
  --a-line: rgba(0,0,0,0.10); --a-accent: #76b900;
  width: min(860px, 100%); max-height: 90vh;
  background: var(--a-bg); color: var(--a-ink);
  font-family: var(--font); overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.app-skin * { letter-spacing: normal; }

/* top banner — black, like the real apps */
.app-bar {
  display: flex; align-items: center; gap: 1rem;
  background: #0a0b0e; color: #fff;
  padding: 0.9rem 1.2rem; flex: none;
}
.app-bar-wave {
  background: #0a0b0e radial-gradient(circle at 88% 60%, rgba(255,255,255,0.10), transparent 42%);
}
.app-brand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; font-weight: 400; color: #fff; }
.app-brand b { font-weight: 700; }
.app-brand em { font-style: normal; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); margin-left: 0.5rem; align-self: center; }
.app-logo { height: 1.5rem; width: auto; display: block; }
.app-bar-right { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; }
.app-skin .modal-x { margin-left: auto; color: rgba(255,255,255,0.6); }
.app-skin .modal-x:hover { color: #fff; }
.app-reanalyze {
  background: #1c1e24; color: #fff; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 7px; padding: 0.5rem 0.9rem; font-size: 0.78rem; font-weight: 600;
  transition: background 0.2s;
}
.app-reanalyze:hover { background: #2a2d35; }
.sim-tag {
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.2em;
  color: var(--a-ink-2); border: 1px solid var(--a-line); border-radius: 999px;
  padding: 0.28rem 0.6rem; white-space: nowrap;
}

/* ── Loki app ── */
.loki-rolebar {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem 1.2rem; background: var(--a-card); border-bottom: 1px solid var(--a-line); flex: none;
}
.role-pill { font-size: 0.72rem; font-weight: 600; color: var(--a-ink); background: #eef0f3; border-radius: 999px; padding: 0.3rem 0.7rem; }
.app-status { font-size: 0.68rem; color: var(--a-ink-2); display: flex; align-items: center; gap: 0.4rem; }
.loki-rolebar .sim-tag { margin-left: auto; }
.app-skin .chat {
  background: var(--a-bg); padding: 1.3rem; flex: 1; min-height: 260px; max-height: 46vh;
  overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
}
.app-skin .msg { max-width: 82%; font-family: var(--font); font-size: 0.9rem; line-height: 1.6; }
.app-skin .msg .who { display: block; font-size: 0.58rem; letter-spacing: 0.14em; margin-bottom: 0.3rem; color: var(--a-ink-2); font-family: var(--mono); }
.app-skin .msg-you { align-self: flex-end; }
.app-skin .msg-you .txt { display: inline-block; background: #0a0b0e; color: #fff; padding: 0.7rem 0.95rem; border-radius: 12px 12px 3px 12px; }
.app-skin .msg-you .who { text-align: right; }
.app-skin .msg-loki .txt { display: inline-block; background: var(--a-card); color: var(--a-ink); padding: 0.7rem 0.95rem; border-radius: 12px 12px 12px 3px; border: 1px solid var(--a-line); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.app-skin .msg-loki b { color: #3a7d00; font-weight: 700; }
.app-skin .msg-loki .txt::after { content: "◆ grounded in your local knowledge base"; display: block; margin-top: 0.55rem; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; color: var(--a-ink-2); }
.app-skin .caret { color: var(--a-accent); }
.app-skin .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.9rem 1.2rem 0; background: var(--a-bg); }
.app-skin .chip {
  background: var(--a-card); border: 1px solid var(--a-line); color: var(--a-ink-2);
  padding: 0.45rem 0.8rem; font-size: 0.74rem; border-radius: 999px; transition: all 0.2s;
}
.app-skin .chip:hover { border-color: var(--a-ink); color: var(--a-ink); }
.app-skin .chat-input {
  display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.2rem;
  background: var(--a-bg); border-top: 1px solid var(--a-line); flex: none;
}
.app-skin .chat-input input {
  flex: 1; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 8px;
  padding: 0.7rem 0.9rem; font-family: var(--font); font-size: 0.88rem; color: var(--a-ink); outline: none;
}
.app-skin .chat-input input:focus { border-color: var(--a-ink); }
.app-send { background: #0a0b0e; color: #fff; border: none; border-radius: 8px; padding: 0.7rem 1.1rem; font-size: 0.82rem; font-weight: 600; transition: background 0.2s; }
.app-send:hover { background: #2a2d35; }

/* ── Pulse app ── */
.pulse-body { padding: 1.3rem 1.4rem; overflow-y: auto; }
.pulse-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.pulse-h { font-size: 1.15rem; font-weight: 700; color: var(--a-ink); }
.pulse-sub { font-size: 0.8rem; color: var(--a-ink-2); margin-top: 0.15rem; }
.admin-pill { font-size: 0.72rem; color: var(--a-ink-2); background: var(--a-card); border: 1px solid var(--a-line); border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.app-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 0.8rem; }
.app-stat { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 1rem 1.1rem; }
.as-num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.as-label { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--a-ink-2); }
.dev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
.dev-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 0.85rem 1rem; }
.dev-top { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.85rem; color: var(--a-ink); margin-bottom: 0.5rem; }
.dev-line { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; color: var(--a-ink-2); padding: 0.15rem 0; }
.cap-feed { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.cap-title { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--a-ink); display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.8rem; }
.cap-title span { color: var(--a-ink-2); letter-spacing: 0.1em; }
.cap-feed ul { list-style: none; display: flex; flex-direction: column; }
.cap-feed li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0;
  border-top: 1px solid var(--a-line); font-size: 0.78rem; color: var(--a-ink);
  animation: feedIn 0.5s var(--ease);
}
.cap-feed li:first-child { border-top: none; }
.cap-chip { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; color: var(--a-ink-2); background: #eef0f3; border-radius: 4px; padding: 0.2rem 0.45rem; white-space: nowrap; }
.cap-time { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; color: var(--a-ink-2); white-space: nowrap; }
.dept-group { border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.dept-head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.1rem; background: var(--a-card); font-weight: 600; font-size: 0.85rem; color: var(--a-ink); }
.dept-meta { font-family: var(--mono); font-size: 0.62rem; color: var(--a-ink-2); font-weight: 400; }
.app-rec { background: var(--a-bg); border-top: 1px solid var(--a-line); padding: 1.1rem; }
.rec-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.6rem; }
.rec-type { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; color: var(--a-ink-2); background: #eef0f3; border-radius: 999px; padding: 0.28rem 0.6rem; }
.rec-count { font-size: 0.66rem; color: var(--a-ink-2); text-align: right; }
.rec-count b { display: block; font-size: 1.25rem; color: var(--a-ink); }
.rec-q { font-size: 0.98rem; font-weight: 700; color: var(--a-ink); margin-bottom: 0.6rem; }
.conf-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.conf-label { font-size: 0.66rem; color: var(--a-ink-2); }
.conf-bar { flex: 1; max-width: 200px; height: 5px; background: #e3e6ea; border-radius: 3px; overflow: hidden; }
.conf-bar i { display: block; height: 100%; width: 0; background: #0a0b0e; border-radius: 3px; transition: width 1s var(--ease) 0.3s; }
.app-rec.in .conf-bar i, .modal:not([hidden]) .conf-bar i { width: var(--c); }
.conf-pct { font-size: 0.72rem; font-weight: 700; color: var(--a-ink); }
.rec-desc { font-size: 0.82rem; color: var(--a-ink-2); margin-bottom: 0.7rem; }
.rec-examples { list-style: none; margin-bottom: 1rem; }
.rec-examples li { font-size: 0.78rem; color: var(--a-ink-2); padding: 0.2rem 0 0.2rem 1rem; position: relative; }
.rec-examples li::before { content: "•"; position: absolute; left: 0.2rem; }
.rec-actions { display: flex; gap: 0.6rem; }
.app-btn-dark { background: #0a0b0e; color: #fff; border: none; border-radius: 7px; padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 600; transition: background 0.2s; }
.app-btn-dark:hover { background: #2a2d35; }
.app-btn-dark:disabled { opacity: 0.6; }
.app-btn-light { background: var(--a-card); color: var(--a-ink); border: 1px solid var(--a-line); border-radius: 7px; padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 600; }
.app-btn-light:hover { border-color: var(--a-ink); }
.app-rec .rec-done { color: #2b7a2b; font-family: var(--font); font-size: 0.8rem; margin-top: 0.9rem; }

@media (max-width: 640px) {
  .app-stat-row, .dev-row { grid-template-columns: 1fr; }
  .app-brand em { display: none; }
}

/* vault */
.vault { padding: 2.6rem; text-align: center; }
.vault h2 { letter-spacing: 0.14em; margin-bottom: 1rem; }
.vault p { color: var(--ink-2); line-height: 1.7; margin-bottom: 1rem; }
.vault-code { color: var(--amber); border: 1px dashed rgba(255, 176, 58, 0.5); padding: 0.8rem; }
.vault-note { color: var(--ink-3); font-size: 0.62rem; }

/* ── HAMR companion ────────────────────────────
   Ported from the Loki-1 app (components/companion/companion.module.css).
   The engine in app.js drives ALL per-frame motion by writing CSS custom
   properties onto .familiar:
     --look-x/--look-y ....... resolved gaze (px)   → [data-part="pupils"]
     --squash-x/--squash-y ... vector squash + breath → [data-part="squish"]
     --tilt .................. head-tilt (deg)      → [data-part="breathe"]
     --lift .................. vertical displacement (px)
     --attention ............. 0..1 gaze lock       → halo bloom
     --vel-x/--vel-y ......... body velocity (px/s) → the heart-slosh
     --shadow-scale/-opacity/-blur/-offset-y ....... the LIGHT POOL
   OMEGA LAW: ZERO hue — every colour is neutral grey / ice-white. NO black
   shadows, NO filters on animated groups. Grounding is pooled LIGHT, and
   --shadow-blur is an opacity crossfade between two baked pool variants
   (no live blur anywhere). */
.hamr-wrap {
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 400;
  width: 76px; height: 76px;
  transition: left 3.2s cubic-bezier(0.45, 0.05, 0.25, 1), top 3.2s cubic-bezier(0.45, 0.05, 0.25, 1);
}
/* once JS takes over positioning, bottom/right are released */
.hamr-wrap.roam { bottom: auto; right: auto; }
/* Carried or airborne, the roam glide MUST be off or he lags seconds behind
   the cursor and reads weightless. The engine owns his position in both. */
.hamr-wrap.dragging, .hamr-wrap.flying { transition: none; }
/* Peek poses are angles now, not transforms — the engine springs --swing
   toward them so tucking behind an edge settles instead of snapping. */
/* bubble flips to the right side when Hamr is on the left half */
.hamr-wrap.flip-bubble .hamr-bubble { right: auto; left: 0; border-radius: 10px 10px 10px 2px; }

.hamr {
  display: block; width: 100%; height: 100%;
  background: none; border: none; padding: 0;
  touch-action: none; user-select: none; -webkit-user-select: none;
  /* NO drop-shadow filter — depth comes from the baked gradient stack and
     the light pool, never from a black blur. */
}

.familiar {
  /* zero-hue glow. Mood NEVER changes hue — emotion is geometry and light. */
  --fam-glow: #e6ebf4;
  --look-x: 0; --look-y: 0;
  --squash-x: 1; --squash-y: 1;
  --attention: 0; --tilt: 0; --lift: 0;
  --vel-x: 0; --vel-y: 0;
  --shadow-scale: 1; --shadow-opacity: 0.5;
  --shadow-blur: 0.5; --shadow-offset-y: 0;
  --swing: 0; --taffy: 0;
  position: relative; width: 100%; height: 100%;
  overflow: visible;
  /* THE HANG. Pivot sits high in the box — he swings BELOW the point he's
     carried by, like something heavy on a short string, and tumbles about
     that same point in flight. No transition: the engine springs the angle
     itself, so any CSS easing here would only smear it. */
  transform-origin: 50% 22%;
  transform: rotate(calc(var(--swing, 0) * 1deg));
}
.hamr-svg {
  position: absolute; inset: -28%;  /* overscan so the halos aren't clipped */
  width: 156%; height: 156%;
  display: block; pointer-events: none;
}
/* the only clickable surface — the glow never steals clicks */
.hamr-hit { pointer-events: auto; cursor: grab; }
.hamr-wrap.dragging .hamr-hit { cursor: grabbing; }

/* ── engine-driven transforms ─────────────────── */
/* gaze: pupil cores translate at 0.9× the resolved look offset */
.familiar [data-part="pupils"] {
  transform: translate(calc(var(--look-x) * 0.9px), calc(var(--look-y) * 0.9px));
  transition: transform 0.05s linear;
}
/* Squash, plus the additive TAFFY stretch (the app's --taffy term, re-aimed).
   He has no skeleton, so hauling him around elongates him along his hang axis
   and narrows him across it — a bag of liquid on the move. Sitting still, the
   taffy term is 0 and this is exactly the engine's squash. */
.familiar [data-part="squish"] {
  transform-box: fill-box; transform-origin: center bottom;
  transform: scale(
    calc(var(--squash-x, 1) - var(--taffy, 0) * 0.13),
    calc(var(--squash-y, 1) + var(--taffy, 0) * 0.17)
  );
}
/* while he's hanging, he stretches DOWNWARD from the grab, not up from a floor */
.hamr-wrap.dragging .familiar [data-part="squish"],
.hamr-wrap.flying .familiar [data-part="squish"] { transform-origin: center top; }
.familiar [data-part="breathe"] {
  transform-box: fill-box; transform-origin: 50% 66%;
  transform: rotate(calc(var(--tilt, 0) * 1deg)) translateY(calc(var(--lift) * -0.04px));
}
/* THE HEART-SLOSH: the nucleus translates against body velocity, clamped,
   with an overshooty settle — liquid inertia, always on. */
.familiar [data-part="spark"] {
  transform-box: fill-box;
  transform: translate(
    clamp(-4px, calc(var(--vel-x) * -0.008px), 4px),
    clamp(-3px, calc(var(--vel-y) * -0.008px), 3px)
  );
  transition: transform 0.22s cubic-bezier(0.22, 1.6, 0.36, 1);
}
/* blink collapses the whole face group */
.familiar [data-part="optic"] {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.09s ease;
}
.familiar[data-blink="true"] [data-part="optic"] { transform: scaleY(0.1); }
/* halos bloom with attention (opacity only — composited, no paint) */
.familiar [data-part="aura"] {
  transition: opacity 0.3s ease;
  opacity: calc(0.55 + var(--attention) * 0.45);
}

/* ── mood — geometry and brightness only, never hue ───
   Eye scaling mirrors the app's eyeMood(): happy squints, curious raises one
   brow (asymmetric by design), excited widens, sleepy sits heavy. */
.familiar [data-part="eye-l"], .familiar [data-part="eye-r"] {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.24s var(--ease);
}
.familiar[data-mood="happy"] [data-part="eye-l"],
.familiar[data-mood="happy"] [data-part="eye-r"] { transform: scaleY(0.58); }
.familiar[data-mood="excited"] [data-part="eye-l"],
.familiar[data-mood="excited"] [data-part="eye-r"] { transform: scaleY(1.08); }
.familiar[data-mood="curious"] [data-part="eye-l"] { transform: scaleY(0.97); }
.familiar[data-mood="curious"] [data-part="eye-r"] { transform: scaleY(1.12); }
.familiar[data-mood="sleepy"] [data-part="eye-l"],
.familiar[data-mood="sleepy"] [data-part="eye-r"] { transform: scaleY(0.45) translateY(1px); }
/* the tail-wick flicks while he's delighted */
.familiar [data-morph="tail"] { transform-box: fill-box; transform-origin: 12% 8%; }
.familiar[data-mood="happy"] [data-morph="tail"],
.familiar[data-mood="excited"] [data-morph="tail"] { animation: hamrTailFlick 0.9s ease-in-out infinite; }
@keyframes hamrTailFlick {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(8deg); }
  65% { transform: rotate(-5deg); }
}
/* the cowlick — reactive base, anchored where the wisp meets the crown */
.familiar [data-morph="cowlick"] {
  transform-box: fill-box; transform-origin: 82% 94%;
  transition: transform 0.4s ease;
}
.familiar[data-cowlick="twitch"] [data-morph="cowlick"] {
  animation: hamrCowlick 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes hamrCowlick {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(-16deg); }
  52% { transform: rotate(10deg); }
  78% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* ── THE LIGHT POOL — replaces the black contact shadow entirely ───
   scale → footprint · opacity → presence · offset-y → ride ·
   blur → an OPACITY CROSSFADE between a sharp and a soft baked variant. */
.hamr-pool {
  position: absolute; left: 50%; bottom: -7px;
  width: 66px; height: 17px; pointer-events: none;
  transform: translateX(-50%) translateY(calc(var(--shadow-offset-y) * 1px)) scale(var(--shadow-scale));
  transform-origin: center center;
  opacity: var(--shadow-opacity);
  mix-blend-mode: screen;
}
.hamr-pool::before, .hamr-pool::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
/* sharp / grounded variant */
.hamr-pool::before {
  background: radial-gradient(ellipse at center,
    rgba(230, 235, 244, 0.17) 0%, rgba(238, 241, 247, 0.05) 46%, rgba(238, 241, 247, 0) 68%);
  opacity: calc(1 - (var(--shadow-blur) - 0.5) / 3);
}
/* soft / airborne variant */
.hamr-pool::after {
  background: radial-gradient(ellipse at center,
    rgba(230, 235, 244, 0.1) 0%, rgba(238, 241, 247, 0.04) 55%, rgba(238, 241, 247, 0) 82%);
  opacity: calc((var(--shadow-blur) - 0.5) / 3);
}

/* the summon flourish — he pours across the screen and re-forms */
.hamr-wrap.zoom .familiar { animation: hamrZoom 1.4s var(--ease); }
@keyframes hamrZoom {
  0% { transform: translateX(0) scale(1); }
  38% { transform: translateX(calc(-100vw + 120px)) scaleX(1.5) scaleY(0.6); }
  100% { transform: translateX(0) scale(1); }
}
/* seven pokes — the shiver */
.hamr-wrap.shiver .familiar { animation: hamrShiver 0.7s var(--ease); }
@keyframes hamrShiver {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-3px, 1px) rotate(-5deg); }
  35% { transform: translate(3px, -1px) rotate(5deg); }
  55% { transform: translate(-2px, 1px) rotate(-3deg); }
  78% { transform: translate(2px, 0) rotate(2deg); }
}

.hamr-bubble {
  position: absolute; bottom: calc(100% + 0.8rem); right: 0;
  width: max-content; max-width: 240px;
  background: var(--panel-2); border: 1px solid rgba(230, 235, 244, 0.28);
  color: var(--ink); font-size: 0.68rem; line-height: 1.6; letter-spacing: 0.04em;
  padding: 0.7rem 0.9rem; border-radius: 10px 10px 2px 10px;
  animation: feedIn 0.3s var(--ease);
  text-transform: none;
}

/* hamskipti — the shapeshift flicker (konami). The page goes glass. */
body.hamskipti { --cyan: #e6ebf4; --violet: #aeb8c8; }
body.hamskipti .grain { opacity: 0.8; }
.falling-mote {
  position: fixed; top: -60px; z-index: 9998; width: 10px; height: 10px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #e6ebf4 45%, rgba(230, 235, 244, 0) 75%);
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(115vh); } }

/* Reduced motion: the engine bails to a static placed sprite; neutralize
   every residual transition so nothing keeps moving underneath it. */
@media (prefers-reduced-motion: reduce) {
  .familiar [data-part="breathe"],
  .familiar [data-part="squish"],
  .familiar [data-part="optic"],
  .familiar [data-part="aura"],
  .familiar [data-part="spark"],
  .familiar [data-part="pupils"],
  .familiar [data-part="eye-l"],
  .familiar [data-part="eye-r"],
  .familiar [data-morph="cowlick"],
  .familiar [data-morph="tail"],
  .familiar,
  .hamr-pool {
    animation: none !important;
    transition: none !important;
  }
}

/* ── toasts ───────────────────────────────────── */
.toasts { position: fixed; bottom: 1.6rem; left: 1.6rem; z-index: 900; display: flex; flex-direction: column; gap: 0.6rem; }
.toast {
  background: var(--panel-2); border: 1px solid rgba(255, 176, 58, 0.45);
  border-left: 3px solid var(--amber);
  padding: 0.8rem 1.1rem; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.08em; color: var(--ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  animation: feedIn 0.4s var(--ease);
}
.toast b { color: var(--amber); display: block; margin-bottom: 0.25rem; letter-spacing: 0.2em; }

/* ── responsive ───────────────────────────────── */
@media (max-width: 880px) {
  .nav { padding: 1rem 1.2rem; gap: 1rem; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-login { display: none; }
  .hero { padding: 7rem 1.4rem 4rem; }
  .section { padding: 5rem 1.4rem; }
  .product, .product-flip { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .product-flip .product-info { order: 1; }
  .product-flip .product-visual { order: 2; }
  .step-line { display: none; }
  .pulse-grid { grid-template-columns: 1fr; }
  .scroll-hint { display: none; }
}