/* Neuronauts AI — ported from the Claude Design prototype (Neuronauts AI.dc.html).
   Token values and component metrics match the prototype exactly. */

* { box-sizing: border-box; }

:root {
  --bg: #000000; --bg-2: #08090B; --surface: #0E1013; --surface-2: #121418;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14);
  --text: #F5F7FA; --muted: #A0A6B0; --muted-2: #6B7280;
  --accent: #2DD4BF; --accent-2: #4F7CFF; --accent-soft: rgba(45,212,191,.12);
  --radius: 14px; --radius-sm: 10px; --maxw: 1200px; --fs-hero: clamp(40px,6vw,80px);
  --err: #ff7a7a;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "General Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }
::selection { background: var(--accent-soft); color: var(--text); }
input, select, textarea, button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #04110E; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- animation */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in { opacity: 1; transform: none; }

@keyframes nn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nn-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

.nn-ticker-track { display: flex; width: max-content; animation: nn-marquee 34s linear infinite; }

/* No-JS guard: reveal content even if the observer never runs. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .nn-ticker-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------- layout */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: 110px; padding-bottom: 110px; }
.section--line { border-bottom: 1px solid var(--line); }
.section--alt { background: var(--bg-2); border-bottom: 1px solid var(--line); }

.grid-auto { display: grid; gap: 20px; }
.grid-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-190 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --------------------------------------------------------------- typography */

.eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 600;
}
.h2 {
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12;
  letter-spacing: -.02em; font-weight: 600; margin: 14px 0 0;
}
.h1-page {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.08;
  letter-spacing: -.025em; font-weight: 600; margin: 16px 0 0;
}
.lede { color: var(--muted); font-size: 18px; margin: 20px 0 0; max-width: 60ch; }

/* ------------------------------------------------------------------ buttons */

.btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #04110E; font-weight: 600; font-size: 14px;
  border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  transition: box-shadow .3s, transform .2s;
}
.btn:hover { box-shadow: 0 0 22px var(--accent-soft); transform: translateY(-1px); color: #04110E; }
.btn--big { font-size: 15px; padding: 14px 26px; }
.btn--big:hover { box-shadow: 0 0 26px var(--accent-soft); transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; background: transparent;
  color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 11px 20px; font-weight: 500; font-size: 14px; cursor: pointer;
  transition: border-color .3s, color .3s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost--big { font-size: 15px; padding: 14px 24px; }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card-link {
  display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  cursor: pointer; transition: border-color .3s, transform .3s; color: var(--text);
}
.card-link:hover { border-color: var(--line-strong); transform: translateY(-3px); color: var(--text); }

.post-card {
  display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: border-color .3s, transform .3s; color: var(--text); padding: 0;
}
.post-card:hover { border-color: var(--line-strong); transform: translateY(-3px); color: var(--text); }
.post-thumb { display: flex; align-items: flex-start; padding: 14px; }

.chip {
  display: inline-flex; align-items: center; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--muted);
}
.chip-accent {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; background: rgba(0,0,0,.4);
  color: var(--accent); backdrop-filter: blur(4px);
}

.avatar, .avatar--sm {
  border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--line-strong); color: var(--accent); font-weight: 600;
}
.avatar { width: 56px; height: 56px; font-size: 17px; }
.avatar--sm { width: 48px; height: 48px; border-radius: 12px; font-size: 15px; }

/* ---------------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent; background: transparent;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(4,5,7,.72);
  backdrop-filter: blur(14px);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.nav__brand img { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-strong); }
.nav__brand span { font-weight: 600; letter-spacing: -.01em; font-size: 16px; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  font-size: 14px; color: var(--muted); padding: 8px 12px;
  border-radius: 8px; transition: color .2s; cursor: pointer;
}
.nav__link:hover, .nav__link.active { color: var(--text); }
.nav__right { display: flex; align-items: center; gap: 12px; }

.langsw {
  display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.langsw a {
  background: transparent; border: none; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--muted);
}
.langsw a.active { background: var(--accent-soft); color: var(--accent); }

.burger {
  display: none; background: none; border: 1px solid var(--line); border-radius: 9px;
  width: 40px; height: 40px; color: var(--text); cursor: pointer;
  align-items: center; justify-content: center; font-size: 18px;
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 120; background: rgba(4,5,7,.97);
  backdrop-filter: blur(14px); display: none; flex-direction: column; padding: 80px 28px 40px;
}
.mobile-menu.open { display: flex; }
.mobile-menu__close {
  position: absolute; top: 20px; right: 22px; background: none;
  border: 1px solid var(--line); border-radius: 9px; width: 40px; height: 40px;
  color: var(--text); cursor: pointer; font-size: 16px;
}
.mobile-menu__links { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__links a {
  font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--text);
  padding: 14px 0; border-bottom: 1px solid var(--line);
}

@media (max-width: 860px) {
  [data-nn-desktop] { display: none !important; }
  .burger { display: inline-flex !important; }
}

/* -------------------------------------------------------------------- hero */

.hero { position: relative; padding: 150px 24px 90px; overflow: hidden; }
#nn-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .55; pointer-events: none;
}
.hero__glow {
  position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
  width: 820px; height: 620px; max-width: 100%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  filter: blur(30px); pointer-events: none; animation: nn-glow 8s ease-in-out infinite;
}
.hero__inner { max-width: var(--maxw); margin: 0 auto; position: relative; text-align: center; }
.hero h1 {
  font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -.025em;
  font-weight: 600; margin: 20px auto 0; max-width: 16ch;
}
.hero__sub { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 60ch; margin: 26px auto 0; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero__trust {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin-top: 46px; color: var(--muted-2); font-size: 13.5px;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .ic { color: var(--accent); display: inline-flex; }

/* ------------------------------------------------------------------ ticker */

.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow: hidden; background: var(--bg-2);
}
.ticker span {
  display: inline-flex; align-items: center; gap: 26px; padding: 0 26px;
  font-size: 15px; color: var(--muted); white-space: nowrap;
}
.ticker .dot { color: var(--accent); font-size: 9px; }

/* -------------------------------------------------------------------- steps */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--line); }
.step { padding: 30px 22px 30px 0; }
.step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step__num {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--accent);
  color: var(--accent); display: grid; place-items: center; font-size: 14px;
  font-weight: 600; font-variant-numeric: tabular-nums; flex: none;
}
.step__rule { height: 1px; flex: 1; background: linear-gradient(90deg, var(--accent), transparent); }

/* ------------------------------------------------------------------ contact */

.contact { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.contact__glow {
  position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%);
  width: 760px; height: 560px; max-width: 100%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.contact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px; align-items: start;
}
.form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; position: relative;
}
.field { margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--muted); margin-bottom: 7px; display: block; }
.input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 15px; outline: none;
}
.input:focus { border-color: var(--accent); }
.input--err { border-color: var(--err); }
select.input { appearance: none; cursor: pointer; }
textarea.input { resize: vertical; }
.err { color: var(--err); font-size: 12px; margin-top: 6px; }
.form__submit {
  width: 100%; background: var(--accent); color: #04110E; font-weight: 600;
  font-size: 15px; border: none; border-radius: 999px; padding: 14px; cursor: pointer;
}
.form__submit[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.thanks {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px 30px; text-align: center;
}
.thanks__icon {
  width: 56px; height: 56px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; margin: 0 auto 18px;
}

/* --------------------------------------------------------------- post body */

.post-body { color: var(--muted); font-size: 17px; line-height: 1.75; }
.post-body h2 {
  color: var(--text); font-size: 24px; font-weight: 600;
  letter-spacing: -.015em; margin: 40px 0 14px; line-height: 1.25;
}
.post-body h3 { color: var(--text); font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { color: var(--text); font-weight: 600; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote {
  margin: 26px 0; padding: 18px 22px; border-left: 2px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text); font-size: 17px;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 6px; font-size: .9em;
}
.post-body pre {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px; overflow-x: auto;
}
.post-body pre code { background: none; border: none; padding: 0; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }

.share-btn {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); background: none;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.share-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ footer */

.footer { border-top: 1px solid var(--line); background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer__col-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted-2); margin-bottom: 16px;
}
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a { color: var(--muted); font-size: 14.5px; }
.footer__links a:hover { color: var(--text); }
.footer__social {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
}
.footer__social:hover { color: var(--accent); border-color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted-2); font-size: 13px;
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- product visuals */

.pv { width: 100%; height: auto; display: block; }

.pv-panel { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.pv-inner { fill: rgba(255,255,255,.035); stroke: var(--line); stroke-width: 1; }
.pv-bar { fill: rgba(255,255,255,.34); }
.pv-bar--dim { fill: rgba(255,255,255,.13); }
.pv-dot { fill: var(--accent); opacity: .8; }
.pv-hair { stroke: var(--line); stroke-width: 1; }
.pv-track { fill: rgba(255,255,255,.07); }
.pv-meter { fill: var(--accent); transform-origin: left center; }
.pv-label {
  fill: var(--muted); font-family: "General Sans", system-ui, sans-serif;
  font-size: 11px; font-weight: 600; text-anchor: middle; letter-spacing: .04em;
}
.pv-label--hub { fill: var(--accent); font-size: 12px; }

/* Cards / rows / steps stagger in, then hold. */
.pv-card, .pv-row, .pv-step, .pv-src, .pv-node-g, .pv-check, .pv-float {
  animation: pv-in .6s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * .16s);
}
@keyframes pv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 1. CDSS */
.pv-attn rect {
  fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0;
  animation: pv-attn 5s ease-in-out infinite;
}
@keyframes pv-attn {
  0%, 8% { opacity: 0; transform: translateY(0); }
  16%, 40% { opacity: .9; transform: translateY(0); }
  48%, 72% { opacity: .9; transform: translateY(52px); }
  80%, 100% { opacity: 0; transform: translateY(52px); }
}
.pv-meter { animation: pv-meter 5s ease-in-out infinite; }
@keyframes pv-meter {
  0%, 10% { transform: scaleX(0); }
  45%, 75% { transform: scaleX(.72); }
  100% { transform: scaleX(.72); }
}
.pv-meter--slow { animation-duration: 7s; }
@media (prefers-reduced-motion: no-preference) {
  .pv-meter--slow { animation-name: pv-meter-slow; }
}
@keyframes pv-meter-slow {
  0%, 8% { transform: scaleX(.2); }
  60%, 100% { transform: scaleX(.85); }
}

/* 2. Imaging */
.pv-tissue {
  fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.09); stroke-width: 1;
}
.pv-heat { animation: pv-heat 4.5s ease-in-out infinite; transform-origin: 150px 92px; }
@keyframes pv-heat {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
.pv-scan {
  fill: url(#pv-heat); opacity: 0;
  animation: pv-scanline 5s linear infinite;
}
@keyframes pv-scanline { 0%, 100% { opacity: 0; } }
.pv-corner { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.pv-roi-fill { fill: var(--accent); opacity: .07; }
.pv-roi {
  animation: pv-roi 5s ease-in-out infinite backwards;
  animation-delay: calc(var(--i, 0) * 1.1s);
  transform-origin: center;
}
@keyframes pv-roi {
  0%, 6% { opacity: 0; }
  14%, 82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* 3. Apps */
.pv-phone { fill: var(--surface); }
.pv-notch { fill: rgba(255,255,255,.12); }
.pv-box { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.pv-tick {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14; stroke-dashoffset: 14;
  animation: pv-tick 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .5s + .3s);
}
.pv-tick--on { stroke-dashoffset: 0; animation: none; }
@keyframes pv-tick {
  0%, 5% { stroke-dashoffset: 14; }
  14%, 84% { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: 14; }
}
.pv-float {
  animation: pv-in .6s cubic-bezier(.16,1,.3,1) backwards,
             pv-bob 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .16s), calc(var(--i, 0) * 1.4s);
}
@keyframes pv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 4. Data */
.pv-flow {
  fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .5;
  stroke-dasharray: 4 7;
  animation: pv-dash 1.6s linear infinite;
  animation-delay: calc(var(--i, 0) * -.4s);
}
@keyframes pv-dash { to { stroke-dashoffset: -22; } }
.pv-funnel .pv-inner { fill: rgba(45,212,191,.1); stroke: var(--accent); }
.pv-pulse {
  fill: none; stroke: var(--accent); stroke-width: 1;
  animation: pv-pulse 3s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes pv-pulse {
  0% { opacity: .5; transform: scale(.62); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* 5. Automation */
.pv-node { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.pv-node-core {
  fill: var(--accent);
  animation: pv-core 4.4s ease-in-out infinite backwards;
  animation-delay: calc(var(--i, 0) * .5s);
}
@keyframes pv-core {
  0%, 8% { opacity: .18; }
  20%, 88% { opacity: 1; }
  100% { opacity: .18; }
}
.pv-link {
  stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 58;
  stroke-dashoffset: 58;
  animation: pv-draw 4.4s ease-in-out infinite backwards;
  animation-delay: calc(var(--i, 0) * .5s + .25s);
}
@keyframes pv-draw {
  0%, 10% { stroke-dashoffset: 58; }
  24%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 58; }
}
.pv-gate-box { fill: rgba(45,212,191,.07); stroke: var(--accent); }
.pv-gate-dot { fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* 6. Integration */
.pv-link-curve { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.pv-packet { fill: var(--accent); }
.pv-hub-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .45; }
.pv-hub-core { fill: rgba(45,212,191,.08); stroke: var(--line-strong); stroke-width: 1; }

@media (prefers-reduced-motion: reduce) {
  .pv * { animation: none !important; }
  .pv-tick { stroke-dashoffset: 0; }
  .pv-link { stroke-dashoffset: 0; }
  .pv-meter { transform: scaleX(.72); }
  .pv-roi, .pv-card, .pv-row, .pv-step, .pv-src, .pv-node-g, .pv-check, .pv-float { opacity: 1; }
  .pv-node-core { opacity: 1; }
  .pv-pulse { opacity: 0; }
}

.pv-frame {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; overflow: hidden;
}
.pv-caption {
  color: var(--muted-2); font-size: 11.5px; margin-top: 10px;
  display: flex; align-items: center; gap: 7px;
}
.pv-caption::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--muted-2); flex: none;
}

/* ---------------------------------------------------------------- partners */

/* One round tile per mark, all eight in a single row on desktop.
   Every logo is normalised to dark ink on a transparent square (see lib/partners.js),
   so one uniform light disc now works for all of them — the earlier mix of white and
   dark cards existed only because the raw files disagreed about their backdrop. */
.partners-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin-top: 48px;
}

.partner {
  /* Shrinks to keep all eight on one line down to ~1080px, then wraps rather than
     dropping below a legible size. */
  flex: 0 1 118px; max-width: 118px; min-width: 84px;
  aspect-ratio: 1; border-radius: 50%;
  background: #EBECEC;            /* off-white, not pure white: softer against the dark page */
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
  transition: transform .3s, box-shadow .3s;
}
.partner:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px -8px rgba(0, 0, 0, .55);
}

/* --scale is the mark's width as a fraction of the disc, set per logo in partners.js.
   Height is left to the aspect ratio so wide wordmarks stay wide instead of being
   letterboxed into the same square as the round seals. */
.partner img {
  width: calc(var(--scale, .75) * 100%); height: auto;
  max-height: calc(var(--scale, .75) * 100%);
  object-fit: contain;
  filter: saturate(.9);
  transition: filter .3s;
}
.partner:hover img { filter: none; }

@media (max-width: 560px) { .partner { flex-basis: 96px; } }

/* ------------------------------------------------------------------- admin */

.admin-shell { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
.admin-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.admin-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-2); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr:hover td { background: var(--surface); }
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid var(--line); color: var(--muted); margin-right: 4px;
}
.tag--draft { border-color: #8a6d1f; color: #e5b23c; }
.tag--live { border-color: var(--accent); color: var(--accent); }

.login-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; position: relative;
}
.alert {
  border: 1px solid var(--err); color: var(--err); background: rgba(255,122,122,.06);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 18px;
}
.editor-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .editor-grid { grid-template-columns: 1fr; } }
.editor-md {
  min-height: 460px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; line-height: 1.65;
}