/* =====================================================================
   SMARAN.AI — landing page
   Red on black. The glow does the work that a photograph usually would,
   since there is no product photography for a program that lives in a
   window.
   ===================================================================== */

:root {
  --red:        #ef4444;
  --red-hot:    #ff5c47;
  --red-deep:   #b91c1c;
  --ember:      #ff8a5c;

  --ink:        #07070a;
  --ink-2:      #0b0b10;
  --panel:      rgba(18, 18, 24, 0.62);
  --line:       rgba(239, 68, 68, 0.16);
  --line-soft:  rgba(255, 255, 255, 0.07);

  --text:       #f4f4f6;
  --muted:      #9a9aa6;
  --dim:        #7d7d8a;   /* 4.96:1 on --ink; #6b6b78 was 3.83 and failed */

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --wrap: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The sticky bar would otherwise sit on top of whatever you jumped to. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(239, 68, 68, .35); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #08080c; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--red-deep), var(--red));
  border-radius: 99px;
  border: 2px solid #08080c;
}

.skip {
  position: fixed; top: -60px; left: 12px; z-index: 999;
  padding: 10px 16px; border-radius: 10px;
  background: var(--red); color: #fff; font-weight: 800;
  transition: top .2s;
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 820px; }

/* ---------------------------------------------------------------------
   Ambient layers
   --------------------------------------------------------------------- */

#field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .9;
}

/* A floor receding to the horizon, which is what gives the page depth. */
.grid-floor {
  position: fixed; inset: 45% 0 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(239, 68, 68, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 68, 68, .26) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(320px) rotateX(64deg);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 62%);
  animation: floor 14s linear infinite;
  opacity: .75;
}
@keyframes floor { to { background-position: 0 64px, 0 0; } }

.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora span {
  position: absolute; border-radius: 50%;
  filter: blur(110px); opacity: .3;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 620px; height: 620px; top: -160px; left: -140px;
  background: radial-gradient(circle, var(--red) 0%, transparent 68%);
  animation: drift-a 24s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 520px; height: 520px; top: 42%; right: -180px;
  background: radial-gradient(circle, var(--ember) 0%, transparent 68%);
  animation: drift-b 30s ease-in-out infinite;
  opacity: .18;
}
.aurora span:nth-child(3) {
  width: 700px; height: 700px; bottom: -260px; left: 34%;
  background: radial-gradient(circle, var(--red-deep) 0%, transparent 70%);
  animation: drift-a 36s ease-in-out infinite reverse;
  opacity: .22;
}
@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(70px, 50px) scale(1.14); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1.08); }
  50%      { transform: translate(-80px, -60px) scale(.92); }
}

.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: .5;
}

.noise {
  position: fixed; inset: -200%; z-index: 2; pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)}
  30%{transform:translate(2%,-3%)}  50%{transform:translate(-3%,3%)}
  70%{transform:translate(4%,2%)}   90%{transform:translate(-2%,4%)}
}

/* Light that follows the pointer, so the page feels lit rather than printed. */
.spotlight {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    440px circle at var(--mx, 50%) var(--my, 30%),
    rgba(239, 68, 68, .09), transparent 72%);
  transition: background .18s ease-out;
}

main, .nav, .foot { position: relative; z-index: 3; }

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.stuck {
  background: rgba(7, 7, 10, .82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.nav-inner { display: flex; align-items: center; gap: 20px; height: 72px; flex-wrap: nowrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(239, 68, 68, .08);
  box-shadow: 0 0 18px rgba(239, 68, 68, .22);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 0 30px rgba(239, 68, 68, .5);
}
.brand-mark img { border-radius: 8px; }
.brand-text { font-weight: 900; letter-spacing: -.02em; font-size: 1.06rem; }
.brand-text .dot { color: var(--red); }

.nav-links { display: flex; gap: 2px; margin-left: auto; flex-wrap: nowrap; }
.nav-links a {
  position: relative;
  padding: 8px 13px; border-radius: 10px;
  font-size: .875rem; font-weight: 600; color: var(--muted);
  /* Without this the labels break mid-phrase and the bar becomes two rows. */
  white-space: nowrap;
  transition: color .25s, background .25s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  transform: scaleX(0); transition: transform .3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); background: rgba(255,255,255,.04); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; gap: 10px; align-items: center; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 42px; height: 42px; padding: 11px 9px;
  border: 1px solid var(--line-soft); border-radius: 11px;
  background: rgba(255,255,255,.03); cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 24px 22px;
  background: rgba(7, 7, 10, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  animation: menu-in .28s var(--ease) both;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: 13px 6px; font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a:last-child {
  border: 0; margin-top: 12px; justify-content: center; color: #fff;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 13px;
  border: 1px solid transparent;
  font-family: inherit; font-size: .92rem; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s;
}
.btn.sm { padding: 9px 16px; font-size: .82rem; border-radius: 11px; }
.btn.lg { padding: 16px 26px; font-size: 1rem; border-radius: 15px; }
.btn.block { width: 100%; }

.btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.btn.block span, .cta .btn span { align-items: center; }
.btn em {
  font-style: normal; font-size: .72rem; font-weight: 600;
  opacity: .72; letter-spacing: .01em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--red-deep), var(--red) 45%, var(--red-hot));
  color: #fff;
  box-shadow: 0 6px 26px rgba(239, 68, 68, .32), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(239, 68, 68, .55), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn-ghost {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.13);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .45);
  box-shadow: 0 10px 34px rgba(239, 68, 68, .22);
}

/* A light sweeps across on hover — the one flourish every button gets. */
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .65s var(--ease);
}
.btn:hover::before { transform: translateX(110%); }
.btn > * { position: relative; z-index: 1; }

.btn:active { transform: translateY(0) scale(.985); }

/* Linux button — vibrant Light Blue as requested */
.btn-linux {
  background: linear-gradient(135deg, #0284c7, #38bdf8 45%, #7dd3fc);
  color: #031525;
  font-weight: 800;
  border: 1px solid rgba(186, 230, 253, 0.5);
  box-shadow: 0 6px 26px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-linux:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0369a1, #0ea5e9 45%, #38bdf8);
  color: #ffffff;
  box-shadow: 0 12px 44px rgba(56, 189, 248, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-color: rgba(224, 242, 254, 0.8);
}

/* Gap between stacked download buttons inside one card */
.dl-card .btn.block + .btn.block {
  margin-top: 12px;
}

/* Typewriter effect for live counter numbers */
.live-stat b.typing::after {
  content: '|';
  display: inline-block;
  color: #ef4444;
  font-weight: 300;
  margin-left: 2px;
  animation: stat-caret 0.6s steps(2) infinite;
}
@keyframes stat-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

.hero { padding: 70px 0 0; }
.hero-inner {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 56px; align-items: center;
  min-height: min(78vh, 720px);
}

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; margin-bottom: 26px;
  border: 1px solid var(--line); border-radius: 99px;
  background: rgba(239, 68, 68, .07);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fca5a5;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }

.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 900; line-height: 1.03; letter-spacing: -.035em;
}

.grad {
  background: linear-gradient(100deg, #fff 0%, #fca5a5 30%, var(--red) 55%, var(--ember) 78%, #fff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: flow 6s linear infinite;
  filter: drop-shadow(0 0 22px rgba(239, 68, 68, .3));
}
@keyframes flow { to { background-position: 220% center; } }

.outline {
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(239, 68, 68, .58);
  text-shadow: 0 0 34px rgba(239, 68, 68, .22);
}

/* Chromatic split on the first line, on a slow loop rather than constantly.
   Timed linear, not stepped: sparse keyframes under steps() snap to whichever
   frame the quantiser lands on and the split sticks there permanently. */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch::before { color: var(--red-hot); animation: glitch-a 6s linear infinite; }
.glitch::after  { color: var(--ember);  animation: glitch-b 6s linear infinite; }
@media (max-width: 767px) {
  .glitch::before, .glitch::after { display: none; }
}
@keyframes glitch-a {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  91%  { opacity: .85; transform: translate(-3px, 1px);  clip-path: inset(12% 0 58% 0); }
  93%  { opacity: 0; }
  95%  { opacity: .8;  transform: translate(2px, -2px);  clip-path: inset(62% 0 12% 0); }
  97%  { opacity: 0; }
}
@keyframes glitch-b {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  92%  { opacity: .7;  transform: translate(3px, -1px);  clip-path: inset(48% 0 26% 0); }
  94%  { opacity: 0; }
  96%  { opacity: .65; transform: translate(-2px, 2px);  clip-path: inset(8% 0 72% 0); }
  98%  { opacity: 0; }
}

.lede {
  max-width: 54ch; margin: 0 0 22px;
  font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--muted);
}

.typer-line {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 32px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(0, 0, 0, .42);
  font-family: var(--mono); font-size: .84rem; color: #fca5a5;
  max-width: 500px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.prompt { color: var(--red); font-weight: 700; }
.typer { color: var(--text); }
.caret {
  display: inline-block; width: 8px; height: 15px;
  background: var(--red); box-shadow: 0 0 9px var(--red);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-cta.center { justify-content: center; margin-bottom: 0; }

.hero-marks {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 0; padding: 0; list-style: none;
  font-size: .84rem; color: var(--dim);
}
.hero-marks b { color: #fca5a5; font-weight: 700; }

/* --- the orb ---------------------------------------------------------- */

.hero-art { display: grid; place-items: center; gap: 26px; }

.orb {
  position: relative;
  width: min(360px, 74vw); aspect-ratio: 1;
  display: grid; place-items: center;
}

.orb-glow {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,68,68,.42) 0%, transparent 66%);
  filter: blur(34px);
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,100% { opacity: .65; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.14); }
}

.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(239, 68, 68, .3);
  transform-style: preserve-3d;
}
.ring.r1 {
  inset: 0;
  border-top-color: var(--red); border-right-color: rgba(239,68,68,.6);
  animation: spin-x 11s linear infinite;
  box-shadow: 0 0 26px rgba(239, 68, 68, .2), inset 0 0 26px rgba(239, 68, 68, .12);
}
.ring.r2 {
  inset: 11%;
  border-bottom-color: var(--ember); border-left-color: rgba(255,138,92,.55);
  animation: spin-y 8s linear infinite reverse;
}
.ring.r3 {
  inset: 22%;
  border-left-color: #fca5a5; border-top-color: rgba(252,165,165,.45);
  animation: spin-z 14s linear infinite;
}
@keyframes spin-x { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes spin-y { to { transform: rotateY(70deg) rotateZ(360deg); } }
@keyframes spin-z { to { transform: rotateX(34deg) rotateY(40deg) rotateZ(360deg); } }

.orb-core {
  position: relative; z-index: 2;
  width: 42%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 26px;
  border: 1px solid rgba(239, 68, 68, .38);
  background: rgba(12, 12, 16, .8);
  box-shadow: 0 0 44px rgba(239, 68, 68, .34), inset 0 0 30px rgba(239, 68, 68, .1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: core-breathe 4s ease-in-out infinite;
  overflow: hidden;
}
/* Light level changes, geometry does not — the mark must not appear to
   move or resize while you are reading the words next to it. */
@keyframes core-breathe {
  0%,100% { box-shadow: 0 0 40px rgba(239,68,68,.3),  inset 0 0 28px rgba(239,68,68,.09); }
  50%     { box-shadow: 0 0 66px rgba(239,68,68,.52), inset 0 0 36px rgba(239,68,68,.17); }
}
.orb-core img { width: 76%; height: auto; border-radius: 14px; }

.spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red-hot); box-shadow: 0 0 14px var(--red-hot);
  offset-path: circle(46% at 50% 50%);
}
.spark.s1 { animation: orbit 6s linear infinite; }
.spark.s2 { animation: orbit 9s linear infinite reverse; background: var(--ember); box-shadow: 0 0 14px var(--ember); }
.spark.s3 { animation: orbit 13s linear infinite; background: #fca5a5; box-shadow: 0 0 14px #fca5a5; }
@keyframes orbit { to { offset-distance: 100%; } }

/* The wrapper had no positioning of its own, so it counted as a second grid
   item and the two shared the centre between them - which pushed the logo
   52px above the middle of its own rings. Only the core should be in flow. */
.hud-brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hud-brackets i {
  position: absolute; width: 26px; height: 26px;
  border: 2px solid rgba(239, 68, 68, .5); border-radius: 4px;
}
.hud-brackets i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud-brackets i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud-brackets i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud-brackets i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.orb-readout {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-family: var(--mono); font-size: .74rem; color: var(--dim);
  letter-spacing: .04em; text-transform: uppercase;
}
.orb-readout b {
  display: block; font-size: 1.5rem; color: var(--text); font-family: var(--sans);
  text-shadow: 0 0 18px rgba(239, 68, 68, .45);
}

/* --- marquee ---------------------------------------------------------- */

.marquee {
  margin-top: 64px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(239, 68, 68, .035);
  overflow: hidden;
  /* A transformed, max-content track can otherwise contribute its off-screen
     paint area to document.scrollWidth in Chromium, even though it is hidden.
     Clip the paint area itself so the moving labels never create a horizontal
     page overflow on narrow screens. */
  overflow: clip;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 26px;
  padding: 15px 0; width: max-content;
  animation: slide 42s linear infinite;
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .16em; color: var(--dim); white-space: nowrap;
}
.marquee-track i { color: var(--red); font-style: normal; opacity: .65; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */

.section { padding: 104px 0; }
.section.alt {
  background:
    linear-gradient(180deg, transparent, rgba(239, 68, 68, .035) 30%, transparent),
    rgba(255, 255, 255, .012);
  border-block: 1px solid var(--line-soft);
}

.head { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.head h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 900; line-height: 1.12; letter-spacing: -.028em;
}
.head p { margin: 0; color: var(--muted); font-size: 1.02rem; }

/* --- bento ------------------------------------------------------------ */

.bento {
  display: grid;
  /* Equal tracks, as many as fit. The previous fixed three columns had to be
     restated at every breakpoint, and the wide cards spanning two of them
     left gaps wherever the remainder did not divide. */
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.card.span2 { grid-column: auto; }

.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line-soft); border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
  transform-style: preserve-3d;
}
.card:hover {
  border-color: rgba(239, 68, 68, .38);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(239, 68, 68, .1);
}

/* Follows the cursor within the card, so the surface reads as glass. */
.card-glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(340px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(239, 68, 68, .13), transparent 68%);
  transition: opacity .35s;
  pointer-events: none;
}
.card:hover .card-glow { opacity: 1; }

.card > * { position: relative; z-index: 1; }

.ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 13px;
  background: rgba(239, 68, 68, .09);
  color: var(--red);
  box-shadow: 0 0 20px rgba(239, 68, 68, .16);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.ico svg { width: 22px; height: 22px; }
.card:hover .ico {
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: 0 0 34px rgba(239, 68, 68, .42);
}

.card h3 {
  margin: 0 0 9px; font-size: 1.14rem; font-weight: 800; letter-spacing: -.015em;
}
.card p { margin: 0; color: var(--muted); font-size: .93rem; }

.tag {
  display: inline-block; margin-top: 14px;
  padding: 4px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: rgba(239, 68, 68, .07);
  font-family: var(--mono); font-size: .68rem; color: #fca5a5;
  letter-spacing: .05em;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span {
  padding: 5px 13px; border-radius: 99px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.04);
  font-size: .76rem; font-weight: 600; color: var(--muted);
  transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.chips span:hover {
  color: #fff; transform: translateY(-2px);
  border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .13);
}

.wave { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 20px; }
.wave i {
  flex: 1; border-radius: 3px;
  background: linear-gradient(to top, var(--red-deep), var(--red-hot));
  animation: bars 1.3s ease-in-out infinite;
  opacity: .8;
}
.wave i:nth-child(1){animation-delay:0s}    .wave i:nth-child(2){animation-delay:.08s}
.wave i:nth-child(3){animation-delay:.16s}  .wave i:nth-child(4){animation-delay:.24s}
.wave i:nth-child(5){animation-delay:.32s}  .wave i:nth-child(6){animation-delay:.4s}
.wave i:nth-child(7){animation-delay:.48s}  .wave i:nth-child(8){animation-delay:.56s}
.wave i:nth-child(9){animation-delay:.64s}  .wave i:nth-child(10){animation-delay:.72s}
.wave i:nth-child(11){animation-delay:.8s}  .wave i:nth-child(12){animation-delay:.88s}
.wave i:nth-child(13){animation-delay:.96s} .wave i:nth-child(14){animation-delay:1.04s}
@keyframes bars { 0%,100%{height:18%} 50%{height:100%} }

.pairbar { display: flex; align-items: center; gap: 0; margin-top: 22px; }
.pairdot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 12px var(--red); flex-shrink: 0;
}
.pairline {
  flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), rgba(239,68,68,.15), var(--red));
  background-size: 200% 100%;
  animation: flow-line 2.2s linear infinite;
}
@keyframes flow-line { to { background-position: -200% 0; } }

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

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 0; padding: 0; list-style: none; counter-reset: s;
}
.step {
  position: relative; padding: 32px 26px;
  border: 1px solid var(--line-soft); border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.step:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 68, 68, .35);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.step-n {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 2.4rem; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.4px rgba(239, 68, 68, .5);
  line-height: 1;
}
.step h3 { margin: 0 0 9px; font-size: 1.14rem; font-weight: 800; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* --- download --------------------------------------------------------- */

/* Three cards in two columns left the third alone with a hole beside it.
   Three columns at the width they fit, so the row simply completes. */
/* Four downloads, so four columns where there is room for them.

   This stopped at three, which left the command line alone on a second row with
   three empty cells beside it: the widest screens showed the emptiest page.

   The section widens past 1400px as well. Four cards inside the usual 1180 would
   be 268px each, narrower than the text in them wants. */
.dl-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px)  { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .dl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) {
  .dl-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  #download .wrap { max-width: 1480px; }
  /* A little tighter, because four columns are narrower than three. */
  .dl-card { padding: 26px 22px; }
}

.dl-card {
  position: relative; overflow: hidden;
  padding: 30px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.dl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 50px rgba(239, 68, 68, .12);
}
.dl-halo {
  position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg),
    transparent 0deg, rgba(239,68,68,.55) 70deg, transparent 150deg,
    transparent 250deg, rgba(255,138,92,.4) 320deg, transparent 360deg);
  opacity: 0; transition: opacity .4s;
  animation: halo 7s linear infinite;
  filter: blur(1px);
  z-index: 0;
}
.dl-card:hover .dl-halo { opacity: .85; }
.dl-card > *:not(.dl-halo) { position: relative; z-index: 1; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes halo { to { --a: 360deg; } }

.dl-top { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; color: var(--red); }
.dl-top h3 { margin: 0; font-size: 1.4rem; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.dl-meta { margin: 2px 0 0; font-family: var(--mono); font-size: .78rem; color: var(--dim); }

.dl-list { margin: 22px 0 0; padding: 0; list-style: none; }
.dl-list li {
  position: relative; padding: 7px 0 7px 24px;
  font-size: .89rem; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.dl-list li:last-child { border: 0; }
.dl-list li::before {
  content: ''; position: absolute; left: 4px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px var(--red);
}

.dl-note {
  margin: 18px 0 0; padding: 13px 15px;
  border: 1px solid rgba(245, 158, 11, .25); border-radius: 12px;
  background: rgba(245, 158, 11, .07);
  font-size: .81rem; line-height: 1.6; color: #fcd34d;
}
.dl-note b { color: #fde68a; }

/* Amber above is for the two things that can actually stop an install: the
   unsigned Windows binary, and the Linux window being a browser window. It
   used to carry the instructions too - how to chmod an AppImage, where the
   .deb lives, what the CLI is - so seven amber panels shouted equally and the
   one that mattered read as decoration. Instructions are information, and
   look like it. */
.dl-info {
  margin: 18px 0 0; padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  font-size: .81rem; line-height: 1.6; color: var(--dim);
}
.dl-info b { color: #e5e7eb; }
.dl-info code { color: #e5e7eb; }
.dl-card .dl-info { margin-top: auto; }

.dl-foot { margin: 34px 0 0; text-align: center; color: var(--dim); font-size: .9rem; }
.dl-foot a { color: #fca5a5; border-bottom: 1px solid rgba(252,165,165,.35); }
.dl-foot a:hover { color: #fff; border-bottom-color: #fff; }

/* --- privacy ---------------------------------------------------------- */

.privacy { max-width: 900px; margin: 0 auto; text-align: center; }
.privacy .lede { margin: 0 auto 44px; }
.privacy h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 900; letter-spacing: -.028em;
}

.pcols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; text-align: left; }
.pcol {
  padding: 26px;
  border: 1px solid var(--line-soft); border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .4s, transform .4s var(--ease);
}
.pcol:hover { transform: translateY(-4px); }
.pcol.good:hover { border-color: rgba(34, 197, 94, .4); }
.pcol.warn:hover { border-color: rgba(245, 158, 11, .4); }
.pcol h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.05rem; font-weight: 800; }
.pmark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: .85rem;
}
.good .pmark { background: rgba(34, 197, 94, .14); color: #4ade80; box-shadow: 0 0 14px rgba(34,197,94,.25); }
.warn .pmark { background: rgba(245, 158, 11, .14); color: #fbbf24; box-shadow: 0 0 14px rgba(245,158,11,.25); }
.pcol ul { margin: 0; padding: 0; list-style: none; }
.pcol li {
  padding: 8px 0 8px 20px; position: relative;
  font-size: .89rem; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.pcol li:last-child { border: 0; }
.pcol li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 5px; height: 5px; border-radius: 50%; }
.good li::before { background: #4ade80; box-shadow: 0 0 7px #4ade80; }
.warn li::before { background: #fbbf24; box-shadow: 0 0 7px #fbbf24; }

.pnote {
  margin: 26px 0 0; padding: 18px 22px;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: rgba(0,0,0,.3);
  font-size: .88rem; color: var(--dim); text-align: left;
}

/* --- faq -------------------------------------------------------------- */

.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .35s, background .35s;
  overflow: hidden;
}
.faq details:hover { border-color: rgba(239, 68, 68, .3); }
.faq details[open] {
  border-color: rgba(239, 68, 68, .38);
  background: rgba(239, 68, 68, .045);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer;
  font-weight: 700; font-size: .98rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(239, 68, 68, .08);
  color: var(--red); font-size: 1.15rem; font-weight: 400; line-height: 1;
  transition: transform .35s var(--ease), background .35s;
}
.faq details[open] summary::after { transform: rotate(135deg); background: rgba(239, 68, 68, .2); }
.faq p {
  margin: 0; padding: 0 22px 20px;
  color: var(--muted); font-size: .92rem;
  animation: faq-in .32s var(--ease) both;
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- cta -------------------------------------------------------------- */

.cta { padding: 104px 0; }
.cta-inner {
  position: relative; overflow: hidden;
  padding: 66px 34px; text-align: center;
  border: 1px solid var(--line); border-radius: 26px;
  background: rgba(12, 12, 16, .6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.cta-halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 130% at 50% 0%, rgba(239, 68, 68, .2), transparent 62%);
}
.cta-inner > *:not(.cta-halo) { position: relative; z-index: 1; }
.cta h2 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 900; letter-spacing: -.03em;
}
.cta p { margin: 0 0 32px; color: var(--muted); font-size: 1.05rem; }

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

.foot { border-top: 1px solid var(--line-soft); padding: 56px 0 28px; }
.foot-inner {
  display: flex; flex-wrap: wrap; gap: 34px;
  justify-content: space-between; align-items: flex-start;
}
.foot-note { margin: 16px 0 0; color: var(--dim); font-size: .87rem; line-height: 1.7; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-links a { color: var(--muted); font-size: .89rem; font-weight: 600; transition: color .25s; }
.foot-links a:hover { color: var(--red); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: var(--dim);
}
.foot-v { font-family: var(--mono); color: var(--red); }

/* ---------------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------------- */

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  /* Stacked, the headline and the download buttons come first. Leading with
     the logo means scrolling past a picture to find out what the thing is. */
  .hero-art { order: 1; }
  .orb { width: min(280px, 62vw); }
  .lede, .typer-line { margin-inline: auto; }
  .hero-cta, .hero-marks { justify-content: center; }
}

@media (max-width: 1000px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }
  .steps { grid-template-columns: 1fr; }
  .dl-grid, .pcols { grid-template-columns: 1fr; }
  .section { padding: 76px 0; }
  .cta { padding: 76px 0; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .bento { grid-template-columns: 1fr; }
  .hero { padding-top: 44px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }
  .btn.lg { padding: 15px 20px; }
  .btn span { align-items: center; }
  .typer-line { font-size: .74rem; padding: 10px 13px; width: 100%; }
  .orb { width: min(220px, 56vw); }
  .orb-readout { gap: 16px; }
  .orb-readout b { font-size: 1.22rem; }
  .cta-inner { padding: 46px 20px; }
  .foot-inner { flex-direction: column; gap: 26px; }
  .grid-floor { display: none; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 2.15rem; }
  .card, .dl-card, .step { padding: 22px 18px; }
  .hero-marks { font-size: .78rem; }
}

/* Reduced motion, in proportion.
   Windows ships with "show animations" off on plenty of machines, and every
   browser reports that as prefers-reduced-motion. Blanket-disabling every
   animation turned the page into a still image for those visitors - which is
   not what the setting asks for. What it asks for is no large or repetitive
   movement: nothing that slides across the screen, spins, or parallaxes.
   Light does not move, so glows, fades and colour shifts stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Movement across the screen: gone. */
  html:not(.motion-full) .rain, html:not(.motion-full) .marquee-track, html:not(.motion-full) .grid-floor, html:not(.motion-full) .aurora span,
  html:not(.motion-full) .glitch::before, html:not(.motion-full) .glitch::after,
  html:not(.motion-full) .auth-field-scan, 
  html:not(.motion-full) .doc-beam, html:not(.motion-full) .call-ring span,
  html:not(.motion-full) .spark, html:not(.motion-full) .ring { animation: none !important; }
  html:not(.motion-full) .rain, html:not(.motion-full) .noise { display: none; }

  /* Entrances resolve immediately rather than sliding in. */
  html:not(.motion-full) .reveal { opacity: 1; transform: none; transition: none; }

  /* Hover transforms flattened; the colour change still reads. */
  html:not(.motion-full) .card:hover, html:not(.motion-full) .step:hover,
  html:not(.motion-full) .dl-card:hover, html:not(.motion-full) .eco-card:hover,
  html:not(.motion-full) .pcol:hover, html:not(.motion-full) .btn:hover,
  html:not(.motion-full) .show:hover .screen {
    transform: none !important;
  }

  /* Kept, because light changing in place is not motion sickness:
     .orb-glow, .orb-core, .pill-dot, .auth-crest, .auth-halo, .hub-bar,
     .wave, .call-wave, .bub.typing, .grad, .auth-title, .pairline. */
}

/* The switch, when someone turns motion down on a machine whose system
   setting never asked for it. */
html.motion-calm .rain,
html.motion-calm .marquee-track,
html.motion-calm .grid-floor,
html.motion-calm .aurora span,
html.motion-calm .glitch::before,
html.motion-calm .glitch::after,
html.motion-calm .spark,
html.motion-calm .ring,
html.motion-calm .stage-scan,
html.motion-calm .doc-beam,
html.motion-calm .call-ring span,
html.motion-calm .dev-ring { animation: none !important; }
html.motion-calm .rain,
html.motion-calm .noise { display: none; }
html.motion-calm .reveal { opacity: 1; transform: none; transition: none; }


/* ---------------------------------------------------------------------
   Showcase — alternating capability blocks
   The "screens" are drawn in CSS. Screenshots would be heavier, would go
   stale on every release, and would need retaking for every language.
   --------------------------------------------------------------------- */

.shows { display: grid; gap: 100px; }

.show {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.show.flip .show-copy { order: 2; }

.show-kicker {
  display: block; margin-bottom: 12px;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
}
.show-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -.025em;
}
.show-copy p { margin: 0 0 20px; color: var(--muted); font-size: 1rem; }

.show-list { margin: 0; padding: 0; list-style: none; }
.show-list li {
  position: relative; padding: 8px 0 8px 26px;
  font-size: .9rem; color: var(--muted);
}
.show-list li::before {
  content: ''; position: absolute; left: 3px; top: 15px;
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 8px var(--red);
}

/* --- the fake screen -------------------------------------------------- */

.show-art { display: grid; place-items: center; }

.screen {
  position: relative; width: 100%; max-width: 430px;
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(9, 9, 13, .9);
  box-shadow: 0 26px 70px rgba(0,0,0,.6), 0 0 46px rgba(239, 68, 68, .1);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s;
}
.show:hover .screen {
  transform: translateY(-6px);
  box-shadow: 0 34px 90px rgba(0,0,0,.7), 0 0 70px rgba(239, 68, 68, .2);
}

.screen-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.03);
}
.screen-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.screen-bar i:first-child { background: rgba(239, 68, 68, .7); }
.screen-bar span {
  margin-left: 8px;
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; color: var(--dim);
}

.screen-body { padding: 16px; min-height: 250px; }

/* Grey bars standing in for text. Widths vary so it reads as content. */
.ui-row {
  display: block; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.11);
  margin: 7px 0;
}
.w45 { width: 45%; } .w50 { width: 50%; } .w60 { width: 60%; }
.w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; }
.w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; }

/* --- 01 workspace ----------------------------------------------------- */

.ui-chat { display: grid; grid-template-columns: 78px 1fr; gap: 14px; }
.ui-side {
  padding-right: 12px; border-right: 1px solid var(--line-soft);
}
.ui-side .ui-row { height: 6px; }
.ui-main { display: flex; flex-direction: column; gap: 9px; }

.bub { padding: 10px 12px; border-radius: 12px; }
.bub.ai { width: 88%; }
.bub.user { width: 66%; }
.bub.typing { width: auto; }
.bub .ui-row { margin: 5px 0; }
.bub.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(185,28,28,.5), rgba(239,68,68,.34));
  border: 1px solid rgba(239, 68, 68, .28);
}
.bub.user .ui-row { background: rgba(255,255,255,.42); }
.bub.ai {
  align-self: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-soft);
}
.bub.typing { display: flex; gap: 5px; padding: 13px 14px; }
.bub.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: dots 1.2s ease-in-out infinite;
}
.bub.typing i:nth-child(2) { animation-delay: .16s; }
.bub.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dots {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

/* --- 02 call ---------------------------------------------------------- */

.screen.phone {
  max-width: 250px; border-radius: 30px;
  border-width: 7px; border-color: #17171d;
  box-shadow: 0 26px 70px rgba(0,0,0,.7), 0 0 50px rgba(239, 68, 68, .14);
}

.callui {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 18px 26px; min-height: 400px;
  background: radial-gradient(90% 60% at 50% 12%, rgba(239,68,68,.2), transparent 65%);
}

.call-ring { position: absolute; top: 44px; display: grid; place-items: center; }
.call-ring span {
  position: absolute;
  width: 86px; height: 86px; border-radius: 50%;
  border: 1.5px solid rgba(239, 68, 68, .5);
  animation: ripple 2.6s ease-out infinite;
}
.call-ring span:nth-child(2) { animation-delay: .85s; }
.call-ring span:nth-child(3) { animation-delay: 1.7s; }
@keyframes ripple {
  from { transform: scale(.85); opacity: .85; }
  to   { transform: scale(2.1); opacity: 0; }
}

.call-face {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 86px; height: 86px; border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, .55);
  background: rgba(12,12,16,.95);
  box-shadow: 0 0 34px rgba(239, 68, 68, .45);
  overflow: hidden;
}
.call-face img { width: 66%; border-radius: 50%; }

.call-name {
  margin: 20px 0 3px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
}
.call-status {
  margin: 0; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: #fca5a5;
}
.ell { animation: ell 1.4s steps(4) infinite; }
@keyframes ell { 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }

.call-wave {
  display: flex; align-items: center; gap: 3px;
  height: 40px; margin: 26px 0 auto;
}
.call-wave i {
  width: 3px; border-radius: 2px;
  background: linear-gradient(to top, var(--red-deep), var(--red-hot));
  animation: bars 1.1s ease-in-out infinite;
}
.call-wave i:nth-child(1){animation-delay:0s}   .call-wave i:nth-child(2){animation-delay:.09s}
.call-wave i:nth-child(3){animation-delay:.18s} .call-wave i:nth-child(4){animation-delay:.27s}
.call-wave i:nth-child(5){animation-delay:.36s} .call-wave i:nth-child(6){animation-delay:.45s}
.call-wave i:nth-child(7){animation-delay:.54s} .call-wave i:nth-child(8){animation-delay:.63s}
.call-wave i:nth-child(9){animation-delay:.72s} .call-wave i:nth-child(10){animation-delay:.81s}

.call-btns { display: flex; gap: 20px; margin-top: 26px; }
.cb {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
}
.cb.end {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-color: rgba(239, 68, 68, .6);
  box-shadow: 0 0 24px rgba(239, 68, 68, .6);
  animation: endpulse 2s ease-in-out infinite;
}
@keyframes endpulse {
  0%,100% { box-shadow: 0 0 24px rgba(239,68,68,.55); }
  50%     { box-shadow: 0 0 40px rgba(239,68,68,.9); }
}
/* The handset, rotated the way every phone shows "hang up". */
.cb.end::after {
  content: ''; position: absolute; inset: 0;
  background: currentColor; color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1Z'/%3E%3C/svg%3E") center / 21px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1Z'/%3E%3C/svg%3E") center / 21px no-repeat;
  transform: rotate(135deg);
}

/* --- 04 hub ----------------------------------------------------------- */

.hub-tabs { display: flex; gap: 7px; margin-bottom: 16px; }
.hub-tabs span {
  padding: 4px 12px; border-radius: 99px;
  border: 1px solid var(--line-soft);
  font-size: .7rem; font-weight: 600; color: var(--dim);
}
.hub-tabs .on {
  border-color: rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .14); color: #fca5a5;
}
.hub-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: rgba(255,255,255,.025);
  transition: border-color .3s, background .3s;
}
.hub-row:hover { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.06); }
.hub-row .ui-row { flex: 1; margin: 0; }
.hub-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.2); flex-shrink: 0;
}
.hub-dot.on { background: #4ade80; box-shadow: 0 0 9px #4ade80; }
.hub-pill {
  padding: 2px 8px; border-radius: 6px;
  background: rgba(239, 68, 68, .14);
  font-family: var(--mono); font-size: .64rem; color: #fca5a5;
}
.hub-bar {
  height: 5px; margin-top: 14px; border-radius: 3px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.hub-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--red-deep), var(--red-hot));
  box-shadow: 0 0 12px rgba(239,68,68,.7);
  animation: dl 3.4s ease-in-out infinite;
}
@keyframes dl { 0%{width:6%} 70%{width:88%} 100%{width:100%} }

/* --- 05 pairing ------------------------------------------------------- */

/* The children inherit .screen's width:100%, and in a flex row that let them
   shrink to almost nothing - the QR became a dot and the phone a bar. Fixed
   widths with no shrink keep the two devices readable. */
.pairart { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pairart > * { flex: none; }
.screen.mini { width: 150px; max-width: 150px; padding: 16px; }
.qr {
  aspect-ratio: 1; border-radius: 8px;
  /* A QR-ish texture, not a scannable code — a real one pointing nowhere
     would be worse than an obvious placeholder. */
  background-image:
    linear-gradient(90deg, var(--red) 25%, transparent 25% 50%, var(--red) 50% 62%, transparent 62%),
    linear-gradient(0deg,  var(--red) 18%, transparent 18% 40%, var(--red) 40% 55%, transparent 55% 78%, var(--red) 78%);
  background-size: 22px 22px;
  background-color: rgba(0,0,0,.6);
  opacity: .8;
  box-shadow: 0 0 22px rgba(239, 68, 68, .3);
}
.pairflow { display: flex; flex-direction: column; gap: 7px; }
.pairflow span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 9px var(--red);
  animation: hop 1.5s ease-in-out infinite;
}
.pairflow span:nth-child(2) { animation-delay: .2s; }
.pairflow span:nth-child(3) { animation-delay: .4s; }
@keyframes hop { 0%,100%{opacity:.25;transform:translateX(-4px)} 50%{opacity:1;transform:translateX(4px)} }

.screen.phone.tiny { width: 120px; max-width: 120px; border-width: 5px; border-radius: 20px; }
.tiny-body { padding: 14px 11px; min-height: 190px; }

/* --- 06 documents ----------------------------------------------------- */

.docui { position: relative; overflow: hidden; }
.doc {
  position: relative;
  padding: 13px 14px 13px 52px; margin-bottom: 10px;
  border: 1px solid var(--line-soft); border-radius: 11px;
  background: rgba(255,255,255,.025);
  transition: border-color .3s;
}
.doc.hi { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .07); }
.doc .ui-row { margin: 6px 0; }
.doc-tag {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 30px; height: 34px; border-radius: 5px;
  border: 1px solid rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .1);
  font-family: var(--mono); font-size: .55rem; font-weight: 700; color: #fca5a5;
}
.doc-beam {
  position: absolute; inset-inline: 0; height: 60px;
  background: linear-gradient(180deg, transparent, rgba(239, 68, 68, .16), transparent);
  animation: beam 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes beam { 0%,100% { top: -60px; } 50% { top: 100%; } }

/* ---------------------------------------------------------------------
   Stat band
   --------------------------------------------------------------------- */






/* ---------------------------------------------------------------------
   Ecosystem row
   --------------------------------------------------------------------- */

.eco { margin-top: 46px; }
.eco-h {
  margin: 0 0 18px; text-align: center;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  font-weight: 400;
}
.eco-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eco-card {
  display: block; padding: 20px;
  border: 1px solid var(--line-soft); border-radius: 15px;
  background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.eco-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 68, .4);
  box-shadow: 0 16px 44px rgba(0,0,0,.45), 0 0 34px rgba(239, 68, 68, .12);
}
.eco-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(239, 68, 68, .09);
  font-family: var(--mono); font-size: .85rem; color: var(--red);
}
.eco-card b { display: block; font-size: .96rem; font-weight: 800; }
.eco-card em {
  display: block; margin-top: 3px;
  font-style: normal; font-size: .82rem; color: var(--dim);
}

/* ---------------------------------------------------------------------
   Showcase responsive
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .shows { gap: 70px; }
  .show { grid-template-columns: 1fr; gap: 34px; }
  /* Reset the alternation: stacked, the copy always reads first. */
  .show.flip .show-copy { order: 0; }
  .show-art { order: 1; }
  .statgrid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .eco-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .screen { max-width: 100%; }
  .ui-chat { grid-template-columns: 60px 1fr; gap: 10px; }
  .pairart { gap: 12px; }
  .screen.mini { width: 118px; max-width: 118px; padding: 12px; }
  .screen.phone.tiny { width: 96px; max-width: 96px; }
  .shows { gap: 56px; }
}

/* ---------------------------------------------------------------------
   Data rain — slow vertical trails behind everything.
   Six elements rather than a canvas: the compositor animates transforms
   off the main thread, so this costs almost nothing.
   --------------------------------------------------------------------- */

.rain { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rain i {
  position: absolute; top: -40%;
  width: 1px; height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(239, 68, 68, .75), transparent);
  filter: blur(.4px);
  animation: fall linear infinite;
}
.rain i:nth-child(1) { left: 8%;  animation-duration: 7s;  animation-delay: 0s; }
.rain i:nth-child(2) { left: 23%; animation-duration: 11s; animation-delay: 1.4s; opacity: .6; }
.rain i:nth-child(3) { left: 41%; animation-duration: 9s;  animation-delay: 3.1s; }
.rain i:nth-child(4) { left: 62%; animation-duration: 13s; animation-delay: .6s; opacity: .5; }
.rain i:nth-child(5) { left: 78%; animation-duration: 8s;  animation-delay: 2.3s; }
.rain i:nth-child(6) { left: 92%; animation-duration: 12s; animation-delay: 4.2s; opacity: .55; }
@keyframes fall { to { transform: translateY(350vh); } }

@media (prefers-reduced-motion: reduce) { html:not(.motion-full) .rain { display: none; } }

/* ---------------------------------------------------------------------
   Meet her — the character band
   Her clip has an opaque background and a corner watermark, so she is
   presented as a screen rather than cut out and floated. A frame is honest
   about what it is, and a red grade brings a blue-lit render into a red
   palette without touching the source file.
   --------------------------------------------------------------------- */

.meet { padding: 96px 0; border-block: 1px solid var(--line-soft); }
.meet-inner {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 56px; align-items: center;
}
.meet-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 900; line-height: 1.12; letter-spacing: -.028em;
}
.meet-copy p { margin: 0 0 22px; color: var(--muted); font-size: 1.02rem; }
.meet-list { margin: 0 0 28px; padding: 0; list-style: none; }
.meet-list li {
  position: relative; padding: 9px 0 9px 26px;
  font-size: .93rem; color: var(--muted);
}
.meet-list b { color: #fca5a5; font-weight: 700; }
.meet-list li::before {
  content: ''; position: absolute; left: 3px; top: 17px;
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--red); box-shadow: 0 0 8px var(--red);
}

.meet-stage { position: relative; display: grid; place-items: center; }

.stage-halo {
  /* Keep the animated blur inside its layout box. Scaling a full-bleed halo
     makes a few pixels of transformed overflow part of the page width. */
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,68,68,.28) 0%, transparent 65%);
  filter: blur(48px);
  animation: pulse-glow 5s ease-in-out infinite;
  pointer-events: none;
}

.stage-frame {
  position: relative; width: 100%; max-width: 520px;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(239, 68, 68, .32); border-radius: 20px;
  background: #05050a;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(239, 68, 68, .16);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.meet-stage:hover .stage-frame {
  transform: translateY(-6px);
  box-shadow: 0 38px 100px rgba(0,0,0,.7), 0 0 90px rgba(239, 68, 68, .3);
}

.stage-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.06) brightness(.94);
}

.stage-scan {
  position: absolute; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239,68,68,.85), transparent);
  box-shadow: 0 0 16px rgba(239, 68, 68, .8);
  animation: stage-scan 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stage-scan { 0%, 100% { top: 4%; } 50% { top: 94%; } }

.stage-hud {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  pointer-events: none;
}
.stage-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(0,0,0,.6);
  color: #fca5a5;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.stage-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: blip 1.6s ease-in-out infinite;
}
.stage-meta {
  padding: 4px 10px; border-radius: 99px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.stage-corner {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid rgba(239, 68, 68, .6); border-radius: 3px;
  pointer-events: none;
}
.stage-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.stage-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.stage-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.stage-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ---------------------------------------------------------------------
   Feedback
   --------------------------------------------------------------------- */

.fb {
  position: relative; overflow: hidden;
  padding: 30px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.fb-halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(239,68,68,.12), transparent 60%);
}
.fb > *:not(.fb-halo) { position: relative; z-index: 1; }

.fb-rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.fb-label { font-size: .92rem; font-weight: 700; }
.fb-stars { display: flex; gap: 4px; }
.fb-star {
  background: none; border: 0; cursor: pointer;
  font-size: 1.7rem; line-height: 1; padding: 2px;
  color: rgba(255,255,255,.16);
  transition: color .2s, transform .2s var(--ease), text-shadow .2s;
}
.fb-star:hover { transform: scale(1.18); }
.fb-star.on {
  color: var(--red);
  text-shadow: 0 0 14px rgba(239, 68, 68, .8);
}
.fb-score {
  margin-left: auto;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}

.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-field { display: block; margin-bottom: 14px; }
.fb-field > span {
  display: block; margin-bottom: 7px;
  font-size: .82rem; font-weight: 700; color: var(--muted);
}
.fb-field em {
  font-style: normal; font-weight: 500; color: var(--dim);
  font-size: .76rem; margin-left: 5px;
}
.fb-field input,
.fb-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: rgba(0,0,0,.42);
  color: var(--text); font: inherit; font-size: .92rem;
  outline: none; resize: vertical;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.fb-field input::placeholder,
.fb-field textarea::placeholder { color: var(--dim); }
.fb-field input:focus,
.fb-field textarea:focus {
  border-color: rgba(239, 68, 68, .55);
  background: rgba(0,0,0,.62);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12), 0 0 22px rgba(239, 68, 68, .14);
}

.fb-note {
  margin: 4px 0 14px; min-height: 1.2em;
  font-size: .86rem; color: #fca5a5;
}
.fb-note.ok { color: #4ade80; }
.fb-note.bad { color: #fbbf24; }
.fb-small { margin: 14px 0 0; text-align: center; font-size: .78rem; color: var(--dim); }

/* ---------------------------------------------------------------------
   Developer card
   --------------------------------------------------------------------- */

.dev {
  position: relative; overflow: hidden;
  padding: 32px;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.dev:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 68, 68, .42);
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 70px rgba(239, 68, 68, .16);
}
.dev-halo {
  position: absolute; inset: -1px; border-radius: 22px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg),
    transparent 0deg, rgba(239,68,68,.5) 70deg, transparent 150deg,
    transparent 250deg, rgba(255,138,92,.38) 320deg, transparent 360deg);
  opacity: 0; transition: opacity .45s;
  animation: halo 8s linear infinite;
  filter: blur(1px);
}
.dev:hover .dev-halo { opacity: .8; }
/* A light passes across the glass on hover. */
.dev-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.dev:hover .dev-sheen { transform: translateX(120%); }
.dev > *:not(.dev-halo):not(.dev-sheen) { position: relative; z-index: 1; }

.dev-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.dev-avatar {
  position: relative; display: grid; place-items: center;
  width: 64px; height: 64px; flex-shrink: 0;
}
.dev-avatar img {
  width: 100%; height: 100%; border-radius: 16px;
  border: 1px solid rgba(239, 68, 68, .35);
  box-shadow: 0 0 26px rgba(239, 68, 68, .3);
}
.dev-ring {
  position: absolute; inset: -6px;
  border-radius: 20px;
  border: 1px solid rgba(239, 68, 68, .35);
  animation: neon-ring 3.4s ease-in-out infinite;
}
@keyframes neon-ring {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.05); }
}
.dev-top h3 { margin: 0; font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; }
.dev-role { margin: 3px 0 0; font-size: .86rem; color: var(--dim); }
.dev-bio { margin: 0 0 24px; color: var(--muted); font-size: .95rem; }

.dev-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dev-link {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--line-soft); border-radius: 15px;
  background: rgba(255,255,255,.03);
  transition: transform .35s var(--ease), border-color .35s, background .35s, box-shadow .35s;
}
.dev-link:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); }
.dev-link.linkedin:hover {
  border-color: rgba(10, 102, 194, .7);
  box-shadow: 0 12px 34px rgba(10, 102, 194, .26), 0 0 26px rgba(10, 102, 194, .3);
}
.dev-link.github:hover {
  border-color: rgba(239, 68, 68, .5);
  box-shadow: 0 12px 34px rgba(0,0,0,.45), 0 0 26px rgba(239, 68, 68, .22);
}
.dev-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(0,0,0,.45);
  color: var(--muted);
  transition: color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.dev-link.linkedin:hover .dev-ico {
  color: #4aa3f0; border-color: rgba(10,102,194,.6);
  box-shadow: 0 0 20px rgba(10,102,194,.45);
  transform: rotate(-6deg) scale(1.06);
}
.dev-link.github:hover .dev-ico {
  color: #fca5a5; border-color: rgba(239,68,68,.5);
  box-shadow: 0 0 20px rgba(239,68,68,.4);
  transform: rotate(6deg) scale(1.06);
}
.dev-text { display: flex; flex-direction: column; min-width: 0; }
.dev-text b { font-size: .95rem; font-weight: 800; }
.dev-text em {
  font-style: normal; font-size: .78rem; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dev-arrow {
  margin-left: auto; color: var(--dim); font-size: 1rem;
  transition: transform .35s var(--ease), color .35s;
}
.dev-link:hover .dev-arrow { transform: translate(3px, -3px); color: #fca5a5; }

/* ---------------------------------------------------------------------
   Responsive for the new sections
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .meet-inner { grid-template-columns: 1fr; gap: 38px; }
  .meet-stage { order: 1; }
  .dev-links, .fb-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .meet { padding: 70px 0; }
  .fb, .dev { padding: 22px 18px; }
  .fb-rating { gap: 9px; }
  .fb-score { margin-left: 0; width: 100%; }
  .dev-top { gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .stage-scan,
  html:not(.motion-full) .dev-ring,
  html:not(.motion-full) .dev-halo { animation: none; }
  html:not(.motion-full) .dev:hover,
  html:not(.motion-full) .dev-link:hover,
  html:not(.motion-full) .meet-stage:hover .stage-frame { transform: none; }
  html:not(.motion-full) .dev-sheen { display: none; }
}




/* Parallax drift, set from script. The variable defaults to zero, so a
   browser that never runs the script still lays the page out correctly. */
.orb { transform: translateY(var(--drift, 0)); transition: transform .12s linear; }
.meet-stage { transform: translateY(var(--drift, 0)); transition: transform .12s linear; }
html.motion-calm .orb,
html.motion-calm .meet-stage { transform: none; }

/* The mock screens fade between states rather than snapping. */
.bub.ai, .bub.typing { transition: opacity .5s ease; }
.hub-tabs span { transition: background .4s, color .4s, border-color .4s; }
.hub-dot { transition: background .4s, box-shadow .4s; }
.call-status { transition: color .4s; }


/* The owner asked for these two to sit still: they are the thing people came
   for, and a button that lifts and sweeps under the cursor reads as decorative
   rather than as the download. Colour still responds, so it is clearly live. */
.btn.no-lift:hover,
.btn.no-lift:active { transform: none; }
.btn.no-lift::before { content: none; }
.btn.no-lift.btn-primary:hover {
  box-shadow: 0 6px 26px rgba(239, 68, 68, .32), inset 0 1px 0 rgba(255,255,255,.22);
  filter: brightness(1.06);
}


/* ---------------------------------------------------------------------
   Mascot
   An ember with a face, drifting over the hero. She sits above the text and
   is deliberately not interactive: pointer-events off, so she never gets in
   the way of a link, and aria-hidden, so a screen reader is not told about a
   decoration.
   --------------------------------------------------------------------- */

.mascot {
  position: absolute;
  right: 4%;
  top: -18px;
  width: clamp(84px, 10vw, 132px);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 12px 26px rgba(239, 68, 68, .45));
  /* She leans towards the pointer. Set from script; the idle float lives on
     the svg inside, because an animation's transform would overwrite this. */
  transform: translate(var(--lean-x, 0px), var(--lean-y, 0px));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.mascot svg {
  width: 100%; height: auto; overflow: visible;
  animation: mascot-float 6.5s ease-in-out infinite;
}

@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(2deg); }
}

/* The hem ripples, so she reads as floating rather than pasted on. */
.mascot-body { animation: mascot-breathe 3.4s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes mascot-breathe {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50%      { transform: scaleX(1.035) scaleY(.975); }
}

.mascot .eye { fill: #140404; }
.mascot .glint { fill: #fff; }
.mascot .glint.big { opacity: .96; }
.mascot .glint.small { opacity: .55; }
.mascot .mascot-sheen { pointer-events: none; }

/* The eyes ride in their own group so they can be nudged towards the
   pointer without the body following. Small numbers: a few pixels reads as
   attention, more reads as a bug. */
.mascot-eyes {
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

/* One mouth at a time, redrawn per mood rather than tweened. */
.mascot .m {
  fill: none; stroke: #140404; stroke-width: 4.2; stroke-linecap: round;
  opacity: 0; transition: opacity .25s ease;
}
.mascot .m-wow { fill: #140404; stroke: none; }
.mascot-face[data-face="calm"]  ~ .mascot-mouth .m-calm,
.mascot-face[data-face="happy"] ~ .mascot-mouth .m-happy,
.mascot-face[data-face="think"] ~ .mascot-mouth .m-think,
.mascot-face[data-face="wow"]   ~ .mascot-mouth .m-wow { opacity: 1; }

/* The mood lives on the svg itself now, which is simpler to target. */
.mascot svg[data-face="calm"]  .m-calm,
.mascot svg[data-face="happy"] .m-happy,
.mascot svg[data-face="think"] .m-think,
.mascot svg[data-face="wow"]   .m-wow { opacity: 1; }

/* Happy widens the eyes a little; thinking narrows them. */
.mascot svg[data-face="happy"] .eye { transform: scale(1.06); transform-origin: center; }
.mascot svg[data-face="think"] .eye { transform: scaleY(.72); transform-origin: center; }
.mascot svg[data-face="wow"]   .eye { transform: scale(1.14); transform-origin: center; }
.mascot .eye { transition: transform .25s ease; }

/* A blink on top of whichever mood is showing. */
.mascot-eyes .eye { animation: mascot-blink 5.6s ease-in-out infinite; }
@keyframes mascot-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(.08); }
}

/* The hero needs to be the positioning context, and the copy needs room so
   she does not land on the first line of the headline. */
.hero-copy { position: relative; }

@media (max-width: 1024px) {
  .mascot { right: 2%; top: -34px; }
}
@media (max-width: 620px) {
  .mascot { width: 64px; right: 0; top: -26px; }
}

html.motion-calm .mascot svg,
html.motion-calm .mascot-body,
html.motion-calm .mascot-eyes .eye { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .mascot svg,
  html:not(.motion-full) .mascot-body,
  html:not(.motion-full) .mascot-eyes .eye { animation: none; }
}

/* Single-item rows, now that the source links are gone. */
.eco-row-single { grid-template-columns: minmax(0, 340px); justify-content: center; }
.dev-links-single { grid-template-columns: minmax(0, 340px); }


/* ---------------------------------------------------------------------
   Code rain
   Columns of falling glyphs behind everything, kept dim so it reads as
   texture rather than as something you are meant to look at.
   --------------------------------------------------------------------- */
#codeRain {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .3;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}
html.motion-calm #codeRain { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) #codeRain { display: none; }
}


/* ---------------------------------------------------------------------
   Editor extension
   --------------------------------------------------------------------- */

.ide-grid { display: grid; grid-template-columns: minmax(0, 620px); justify-content: center; }

.ide-card {
  position: relative; overflow: hidden;
  padding: 30px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.ide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 50px rgba(239, 68, 68, .12);
}
.ide-halo {
  position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg),
    transparent 0deg, rgba(239,68,68,.5) 70deg, transparent 150deg,
    transparent 250deg, rgba(255,138,92,.4) 320deg, transparent 360deg);
  opacity: 0; transition: opacity .4s;
  animation: halo 7s linear infinite;
  filter: blur(1px);
}
.ide-card:hover .ide-halo { opacity: .8; }
.ide-card > *:not(.ide-halo) { position: relative; z-index: 1; }

.ide-top { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; color: var(--red); }
.ide-top h3 { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.ide-meta { margin: 3px 0 0; font-size: .82rem; color: var(--dim); }

.ide-list { margin: 0 0 22px; padding: 0; list-style: none; }
.ide-list li {
  position: relative; padding: 8px 0 8px 24px;
  font-size: .9rem; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.ide-list li:last-child { border: 0; }
.ide-list li::before {
  content: ''; position: absolute; left: 4px; top: 16px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px var(--red);
}

.ide-note {
  margin: 16px 0 0;
  font-size: .82rem; line-height: 1.7; color: var(--dim);
}
.ide-note code {
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0,0,0,.5); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .78rem; color: #fca5a5;
}
.ide-note b { color: var(--muted); }

/* The honeypot must be reachable by a bot and invisible to a person. */
.fb-trap {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

@media (max-width: 620px) {
  .ide-card { padding: 22px 18px; }
}


/* The editor chooser: pick where it should open, rather than downloading a
   file and pointing an editor at it by hand. */
.ide-pick {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.ide-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.ide-choice {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft); border-radius: 13px;
  background: rgba(255,255,255,.03);
  transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.ide-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .09);
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 22px rgba(239, 68, 68, .18);
}
.ide-choice-name { font-size: .92rem; font-weight: 800; color: var(--text); }
.ide-choice-sub { font-size: .74rem; color: var(--dim); }

@media (max-width: 520px) { .ide-choices { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------------
   Light theme
   The page is designed around light on black - glows, a code rain, a
   particle field. Inverting the palette alone would leave grey text on
   white and a black canvas over it, so the ambient layers are turned down
   or off here rather than recoloured. Red stays as the accent, darkened
   enough to hold contrast against white.
   --------------------------------------------------------------------- */

html.light {
  --red:        #d92626;
  --red-hot:    #e2452c;
  --red-deep:   #a01414;
  --ember:      #c9541f;

  --ink:        #f7f7f9;
  --ink-2:      #ffffff;
  --panel:      rgba(255, 255, 255, 0.82);
  --line:       rgba(217, 38, 38, 0.22);
  --line-soft:  rgba(15, 15, 20, 0.1);

  --text:       #14141a;
  --muted:      #4a4a55;
  --dim:        #6e6e7a;
}

/* The dark-only atmosphere. Kept at a whisper so the page still has depth. */
html.light #codeRain { opacity: .2; }
html.light .noise,
html.light .scanlines { display: none; }
html.light #field { opacity: .55; }
html.light .grid-floor {
  opacity: .5;
  background-image:
    linear-gradient(rgba(160, 26, 26, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 26, 26, .16) 1px, transparent 1px);
}
html.light .aurora span { opacity: .14; }
html.light .rain i {
  opacity: .3;
  background: linear-gradient(to bottom, transparent, rgba(160, 26, 26, .5), transparent);
}
html.light .spotlight {
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 30%),
              rgba(217, 38, 38, .07), transparent 72%);
}

html.light body { background: var(--ink); }
html.light ::-webkit-scrollbar-track { background: #ececf1; }

/* Panels sit on white now, so the glass needs a border to exist at all. */
html.light .card,
html.light .step,
html.light .dl-card,
html.light .ide-card,
html.light .pcol,
html.light .fb,
html.light .dev,
html.light .screen,
html.light .faq details {
  border-color: rgba(15, 15, 20, .12);
  box-shadow: 0 2px 14px rgba(15, 15, 20, .06);
}
html.light .card:hover,
html.light .dl-card:hover,
html.light .ide-card:hover,
html.light .dev:hover {
  box-shadow: 0 18px 44px rgba(15, 15, 20, .12), 0 0 30px rgba(217, 38, 38, .1);
}

/* The mock screens are dark devices; they stay dark, because a phone with a
   white screen in a screenshot reads as a different product. */
html.light .screen,
html.light .stage-frame { background: #0a0a10; }
html.light .ui-row { background: rgba(255,255,255,.14); }

/* Outlined display type vanishes on white without a heavier stroke. */
html.light .outline {
  -webkit-text-stroke-width: 1.8px;
  -webkit-text-stroke-color: rgba(217, 38, 38, .75);
  text-shadow: none;
}
html.light .grad { filter: drop-shadow(0 0 12px rgba(217, 38, 38, .18)); }
html.light .step-n { -webkit-text-stroke-color: rgba(217, 38, 38, .55); }

/* Section tinting was built for a black page. */
html.light .section.alt {
  background:
    linear-gradient(180deg, transparent, rgba(217, 38, 38, .04) 30%, transparent),
    rgba(15, 15, 20, .02);
}
html.light .marquee { background: rgba(217, 38, 38, .05); }

html.light .cta-inner { background: rgba(255, 255, 255, .8); }
html.light .nav.stuck {
  background: rgba(247, 247, 249, .88);
  box-shadow: 0 8px 30px rgba(15, 15, 20, .08);
}

/* Inputs were dark fields on a dark page. */
html.light .fb-field input,
html.light .fb-field textarea,
html.light .typer-line,
html.light .pnote,
html.light .ide-note code {
  background: rgba(255, 255, 255, .9);
  color: var(--text);
}
html.light .fb-field input::placeholder,
html.light .fb-field textarea::placeholder { color: var(--dim); }
html.light .typer .caret { background: var(--red); }
html.light .hero-marks b,
html.light .meet-list b,
html.light .call-status,
html.light .stage-tag,
html.light .hub-pill { color: var(--red-deep); }

html.light .btn-ghost {
  background: rgba(15, 15, 20, .04);
  border-color: rgba(15, 15, 20, .14);
  color: var(--text);
}
html.light .btn-ghost:hover {
  background: rgba(217, 38, 38, .08);
  border-color: rgba(217, 38, 38, .4);
}
html.light .chips span,
html.light .hub-tabs span { color: var(--muted); }

/* ---- the switch ---- */

.theme-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.04);
  color: var(--muted); cursor: pointer;
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s, transform .3s var(--ease);
}
html.light .theme-toggle { background: rgba(15,15,20,.04); }
.theme-toggle:hover {
  color: var(--text);
  transform: rotate(-12deg);
  border-color: rgba(239, 68, 68, .45);
  box-shadow: 0 0 18px rgba(239, 68, 68, .2);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
html.light .theme-toggle .sun { display: block; }
html.light .theme-toggle .moon { display: none; }
.mobile-menu .theme-toggle { width: 100%; height: 44px; margin-top: 10px; }


/* ------------------------------------------------------- live counters */

/* Three real numbers under the download heading. Hidden until they arrive,
   because an empty row that later pops into place is worse than one that
   fades in already filled. */
.live-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 5vw, 64px);
  margin: 0 auto 38px;
  padding: 22px 26px;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft, rgba(127, 127, 140, .06));
}

.live-stat { text-align: center; min-width: 96px; }

.live-stat b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.live-stat span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The dot pulses only while someone is actually there. */
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
  animation: livePulse 2.2s ease-out infinite;
}

@keyframes livePulse {
  70%  { box-shadow: 0 0 0 11px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .live-dot { animation: none; }
}


/* ------------------------------------------------- install tabs */

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 34px;
}

.tab {
  padding: 11px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}

.tab:hover { color: var(--text); border-color: var(--accent); }

.tab.is-on {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft, rgba(239, 68, 68, .12));
}

.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Numbered steps. The counter is drawn rather than typed so the markup stays
   an ordered list and a screen reader still hears it as one. */
.install-steps {
  counter-reset: step;
  list-style: none;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
}

.install-steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 30px 62px;
  border-left: 1px solid var(--line);
  margin-left: 18px;
}

.install-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.install-steps > li::before {
  content: counter(step);
  position: absolute;
  left: -19px;
  top: -2px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
}

.install-steps h3 { margin: 4px 0 7px; font-size: 17px; font-weight: 800; }
.install-steps p  { margin: 0 0 14px; color: var(--muted); }
.install-steps .btn { margin-top: 2px; }

.cli-intro {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
  color: var(--muted);
}

.code {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--code-bg, rgba(127, 127, 140, .09));
  /* Long commands wrap instead of scrolling sideways.
   *
   * The curl line that fetches smaran.exe is a full GitHub release URL and ran
   * off the edge of the block. With overflow-x it became a scrollbar: the
   * command was there but you had to drag to read it, and most of it was
   * simply invisible on a phone. Wrapping shows all of it at once, which is
   * the only way anyone can check what they are about to run. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.75;
}

/* One command per row, with its own button on the right. */
.code-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.code-line + .code-line { margin-top: 6px; }

.code-line-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Both class names, deliberately. .code-copy-btn sets position:absolute and
   is defined further down this file; a single-class rule here has equal
   specificity and loses on source order, which left all four buttons stacked
   on top of each other at the top of the block with the commands running
   underneath them. */
.code-copy-btn.code-copy-inline {
  position: static;
  flex: 0 0 auto;
  align-self: flex-start;
  top: auto;
  right: auto;
}

.code code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.code .c { color: var(--muted); }

@media (max-width: 620px) {
  .install-steps > li { padding-left: 46px; }
  .tab { padding: 9px 18px; font-size: 12px; }
}


/* --------------------------------------------------- help & join */

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
  margin-bottom: 42px;
}

.help-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft, rgba(127, 127, 140, .05));
}

.help-card h3 { margin: 0 0 9px; font-size: 17px; font-weight: 800; }
.help-card p  { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }
/* Pushes the button to the bottom so a row of cards lines its buttons up
   even when the paragraphs above are different lengths. */
.help-card .btn { margin-top: auto; }

.join {
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
}

.join h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.join p  { margin: 0 0 20px; color: var(--muted); }

.join-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.join-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: border-color .18s, color .18s, transform .18s;
}

.join-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.join-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ------------------------------------ install steps on small screens */

/* The command block is the widest thing on the page: four lines of shell with
   trailing comments, which at 375px is roughly twice the viewport. It scrolls
   on its own, but a grid child defaults to min-width:auto and refuses to be
   narrower than its content, so instead of scrolling inside its own box it
   pushed the whole section wide and the section was cut off.

   min-width: 0 lets it shrink to the column; overflow-x on the block itself
   then does what it was always meant to. */
.install-steps,
.install-steps > li { min-width: 0; }

.code { max-width: 100%; position: relative; }

/* ------------------------------------ code copy button */
.code-wrap {
  position: relative;
  max-width: 100%;
}

/* Room for the button in the corner - but only where there is one. Blocks
   with a button per line put them in the flow, so reserving the gutter there
   just narrowed the commands for nothing. */
.code-wrap.has-corner-btn .code {
  padding-right: 76px;
}

.code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted, #9ca3af);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
  user-select: none;
}

.code-copy-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.code-copy-btn.copied {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.15);
}

.code-copy-btn svg {
  flex-shrink: 0;
}

html.light .code-copy-btn {
  color: #4b5563;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.14);
}

html.light .code-copy-btn:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.28);
}

html.light .code-copy-btn.copied {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.5);
  background: rgba(5, 150, 105, 0.12);
}

@media (max-width: 720px) {
  /* The comments are the first thing worth losing: they explain what the four
     commands do, and the headings above already say it. Dropping them turns
     four scrolling lines into four that fit. */
  .code .c { display: none; }
  .code { font-size: 12px; padding: 14px; }
}

@media (max-width: 480px) {
  .install-steps > li { padding-left: 40px; }
  .install-steps > li::before { width: 32px; height: 32px; left: -16px; font-size: 13px; }
  .code { font-size: 11.5px; }
}

/* ============================ EXTENSION ============================
   Replaces the old single-card "Editor" block. Centred hero, then the
   three things worth knowing before installing: what it can do, what it
   will not do without asking, and where the answer comes from. */

.ext-hero { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.ext-hero h2 { margin: 14px 0 18px; }
.ext-hero .lede { margin: 0 auto; max-width: 620px; }

.ext-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin: 30px 0 16px;
}

.ext-sub { font-size: .86rem; color: var(--muted); margin: 0; }

.ext-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  /* stretch, not start: with each card sizing to its own text the three ended
     up ragged, leaving a hole under the shortest one and beside the tallest.
     Equal heights within a row is the whole point of putting them in a row. */
  align-items: stretch;
}
/* Two, then three. auto-fit was picking two at widths where three fit, which
   left one card alone on a second row with a gap the width of two beside it. */
@media (min-width: 720px)  { .ext-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ext-grid { grid-template-columns: repeat(3, 1fr); } }

.ext-card {
  padding: 26px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  /* min-width: 0 or a long list item stretches the column past its share
     and the three cards stop being equal. */
  min-width: 0;
  transition: transform .4s var(--ease), border-color .4s;
}
.ext-card:hover { transform: translateY(-4px); border-color: rgba(255, 92, 71, 0.34); }
.ext-card { display: flex; flex-direction: column; }
.ext-card h3 { margin: 0 0 14px; font-size: 1.02rem; }
.ext-card .ide-list { margin: 0; }

.ext-open { margin-top: 40px; text-align: center; }
.ext-open .ide-choices { justify-content: center; }
.ext-open .ide-note { max-width: 560px; margin-left: auto; margin-right: auto; }

/* An author rule that sets `display` beats the user-agent's [hidden] rule,
   so .ext-grid { display: grid } kept the block on screen with the attribute
   set. These put it back under the attribute's control. */
.ext-grid[hidden],
.ext-open[hidden] { display: none; }

/* Each card its own height.

   This was align-items: stretch, to keep the bottoms of a row level, and with
   three cards that was a fair trade. With four it is not. Windows carries two
   warning panels and stands 1100px tall; the command line carries a sentence.
   Stretching made every card 1100px, so the short ones were mostly empty -
   a bigger hole than the ragged bottom edge it was avoiding.

   The flex column and the note pinned to the bottom stay. They cost nothing
   when a card is its own height, and still do the right thing at the narrower
   widths where two cards share a row. */
.dl-grid { align-items: start; }
.dl-card { display: flex; flex-direction: column; }
.dl-card .dl-note { margin-top: auto; }


/* The developer links carried their brand colour only on hover, and YouTube
   had no rule at all, so both sat grey until the pointer found them. The
   colour is the recognition, so it is there from the start and the hover
   only deepens it. */
.dev-link.linkedin .dev-ico { color: #0a66c2; border-color: rgba(10,102,194,.45); background: rgba(10,102,194,.12); }
.dev-link.youtube  .dev-ico { color: #ff0033; border-color: rgba(255,0,51,.42);  background: rgba(255,0,51,.12); }

.dev-link.linkedin { border-color: rgba(10,102,194,.28); }
.dev-link.youtube  { border-color: rgba(255,0,51,.26); }

.dev-link.linkedin:hover .dev-ico {
  color: #fff; background: #0a66c2;
  box-shadow: 0 0 22px rgba(10,102,194,.65);
  transform: scale(1.06);
}
.dev-link.youtube:hover {
  border-color: rgba(255,0,51,.7);
  box-shadow: 0 12px 34px rgba(255,0,51,.24), 0 0 26px rgba(255,0,51,.3);
}
.dev-link.youtube:hover .dev-ico {
  color: #fff; background: #ff0033;
  box-shadow: 0 0 22px rgba(255,0,51,.65);
  transform: scale(1.06);
}
.dev-link.linkedin:hover .dev-text b { color: #4aa3ff; }
.dev-link.youtube:hover  .dev-text b { color: #ff5c7a; }
.dev-link .dev-arrow { transition: transform .35s var(--ease), opacity .35s; opacity: .55; }
.dev-link:hover .dev-arrow { transform: translate(3px, -3px); opacity: 1; }

/* The unfilled stars were white at 16% opacity: a faint grey on the dark
   theme and nothing at all on the light one, so the rating control looked
   like it was missing. Given a colour that shows on both. */
html.light .fb-star { color: rgba(17, 17, 24, .26); }
html.light .fb-star:hover { color: rgba(17, 17, 24, .45); }
html.light .fb-star.on {
  color: var(--red-hot);
  text-shadow: 0 0 12px rgba(255, 92, 71, .5);
}

/* ===================== MOBILE MENU, GIVEN SOME LIFE =====================
   Every link was var(--muted) with a hairline under it and nothing else —
   no accent, no active state, no feedback on tap. On a phone that is the
   whole navigation, and it read as a flat grey list. */

.mobile-menu a {
  position: relative;
  color: var(--text);
  padding-left: 18px;
  border-radius: 10px;
  transition: color .25s, background .25s, padding-left .25s var(--ease);
}
/* A small ember beside each item, brightening for the section you are in. */
.mobile-menu a::before {
  content: "";
  position: absolute; left: 2px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: rgba(239, 68, 68, .35);
  transition: background .25s, box-shadow .25s, transform .25s var(--ease);
}
.mobile-menu a:active,
.mobile-menu a.active {
  background: rgba(239, 68, 68, .1);
  padding-left: 22px;
}
.mobile-menu a:active::before,
.mobile-menu a.active::before {
  background: var(--red-hot);
  box-shadow: 0 0 12px rgba(255, 92, 71, .8);
  transform: scale(1.35);
}

html.light .mobile-menu {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
html.light .mobile-menu a {
  color: #18181b;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
html.light .mobile-menu a:hover,
html.light .mobile-menu a:active,
html.light .mobile-menu a.active {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
}
html.light .mobile-menu a::before {
  background: rgba(239, 68, 68, 0.4);
}
html.light .mobile-menu a:active::before,
html.light .mobile-menu a.active::before {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

/* The primary button had no light-theme rule, so on a white background the
   red gradient washed out to something close to an outline — which is what
   "Download installer" looked like on a phone in daylight. */
html.light .btn-primary {
  background: linear-gradient(135deg, #f4553f, #c81f1f);
  color: #fff !important;
  border-color: rgba(200, 31, 31, .5);
  box-shadow: 0 10px 26px rgba(200, 31, 31, .28);
}
html.light .btn-primary:hover {
  box-shadow: 0 14px 34px rgba(200, 31, 31, .4);
}

/* ---------------------------------------------------------------------
   Hero light trails, focus-in headline, and the side rail
   --------------------------------------------------------------------- */

/* Neon ribbons streaming out of a vanishing point above the headline
   (hero-trails.js). Behind the copy, faded top and bottom so they rise out
   of the page rather than starting at a hard edge. */
.hero { position: relative; isolation: isolate; }
.hero-inner { position: relative; z-index: 1; }
#trails {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .85;
  /* Faded top and bottom, and dimmed across the text column on the left. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%),
    linear-gradient(to right, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .45) 38%, #000 60%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%),
    linear-gradient(to right, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .45) 38%, #000 60%);
          mask-composite: intersect;
}
@media (max-width: 900px) {
  /* Stacked layout: the copy spans the width, so the dimming does too. */
  #trails {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 75%, transparent 100%);
  }
}
html.light #trails { opacity: .4; }

/* The headline resolves out of a blur, one line after another. `backwards`
   rather than `both`, so once it has finished each line gets its own filter
   back - the gradient line keeps its glow and its colour flow. */
@keyframes smaran-focus-in {
  from { opacity: 0; filter: blur(16px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
.hero h1 > span {
  display: inline-block;
  animation: smaran-focus-in 1.15s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero h1 > span:nth-of-type(2) { animation-delay: .2s; }
.hero h1 > span:nth-of-type(3) { animation-delay: .4s; }
.hero h1 > .grad {
  animation: smaran-focus-in 1.15s cubic-bezier(.2, .7, .2, 1) .2s backwards,
             flow 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .hero h1 > span { animation: none; }
  html:not(.motion-full) .hero h1 > .grad { animation: flow 6s linear infinite; }
}

/* The rail: the places SMARAN.AI lives, one tap from anywhere on the page. */
.side-rail {
  position: fixed; left: 18px; top: 50%; z-index: 40;
  transform: translateY(-10%);
  display: flex; flex-direction: column; gap: 12px;
}
.side-rail a {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.side-rail a:hover, .side-rail a:focus-visible {
  background: rgba(255, 255, 255, .1); color: #fff; transform: translateX(3px);
  outline: none;
}
.side-rail a.accent {
  color: #fca5a5;
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .5);
  box-shadow: 0 0 18px rgba(239, 68, 68, .25);
}
.side-rail svg { width: 20px; height: 20px; }
.side-rail a::after {
  content: attr(data-label);
  position: absolute; left: 58px; top: 50%;
  transform: translate(-4px, -50%);
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap; font-size: .75rem; font-weight: 600; color: #f8fafc;
  background: rgba(10, 10, 14, .92); border: 1px solid rgba(255, 255, 255, .12);
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.side-rail a:hover::after, .side-rail a:focus-visible::after {
  opacity: 1; transform: translate(0, -50%);
}
html.light .side-rail a {
  color: #334155; background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .12);
}
html.light .side-rail a.accent { color: #b91c1c; background: rgba(239, 68, 68, .1); }
/* Only where the page leaves it a margin. The content column is 1180px plus
   its padding, so below about 1300px wide the rail would sit on the headline. */
@media (max-width: 1299px) {
  .side-rail { display: none; }
}

/* =====================================================================
   Futuristic layer (1.0.11): the neon floor, HUD panels, callouts,
   the system-status footer, and the About / Join pages.
   ===================================================================== */

/* The neon floor behind the hero and page headers (neon-grid.js). */
canvas[data-neon-grid] {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  mix-blend-mode: screen; opacity: .95;
}
.hero #trails { z-index: -1; }

/* HUD panels around the hero: boot log, live status, capabilities, agents. */
.hud { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hud-panel {
  position: absolute; width: 250px; padding: 14px 16px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: #fecaca; background: linear-gradient(180deg, rgba(20, 8, 10, .72), rgba(10, 6, 8, .55));
  border: 1px solid rgba(239, 68, 68, .28); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .06) inset, 0 0 40px rgba(239, 68, 68, .10);
  backdrop-filter: blur(6px);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  animation: hud-in 1.1s var(--ease) both;
}
.hud-panel h4 {
  margin: 0 0 10px; font-size: .64rem; letter-spacing: .22em; color: var(--red-hot);
  display: flex; align-items: center; gap: 8px;
}
.hud-panel h4::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red-hot);
  box-shadow: 0 0 10px var(--red-hot); animation: hud-blink 1.6s steps(2) infinite; }
.hud-tl { top: 34px; left: max(18px, calc(50% - 760px)); }
.hud-tr { top: 34px; right: max(18px, calc(50% - 760px)); animation-delay: .15s; }
.hud-bl { bottom: 96px; left: max(18px, calc(50% - 760px)); animation-delay: .3s; }
.hud-br { bottom: 96px; right: max(18px, calc(50% - 760px)); animation-delay: .45s; }
.hud-boot p { margin: 3px 0; white-space: nowrap; overflow: hidden; color: #fca5a5; animation: hud-type .6s steps(28) both; }
.hud-boot p b { color: #86efac; font-weight: 600; }
.hud-boot p:nth-child(2) { animation-delay: .5s; } .hud-boot p:nth-child(3) { animation-delay: 1s; }
.hud-boot p:nth-child(4) { animation-delay: 1.5s; } .hud-boot p:nth-child(5) { animation-delay: 2s; }
.hud-boot p:nth-child(6) { animation-delay: 2.5s; }
.hud-boot .caret::after { content: '\258C'; color: var(--red-hot); animation: hud-blink 1s steps(2) infinite; }
.hud-meter { margin: 8px 0; }
.hud-meter span { display: flex; justify-content: space-between; color: #fca5a5; }
.hud-meter i { display: block; height: 6px; margin-top: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(239, 68, 68, .9) 0 8px, transparent 8px 10px);
  box-shadow: 0 0 12px rgba(239, 68, 68, .45); transform-origin: left; animation: hud-meter 3.2s ease-in-out infinite; }
.hud-meter:nth-child(3) i { animation-delay: .8s; } .hud-meter:nth-child(4) i { animation-delay: 1.6s; }
.hud-caps ul { margin: 0; padding: 0; }
.hud-caps li { list-style: none; display: flex; align-items: center; gap: 10px; margin: 7px 0; color: #fecaca; }
.hud-caps li::before { content: '\25C8'; color: var(--red-hot); text-shadow: 0 0 8px var(--red-hot); }
.hud-hex { display: grid; grid-template-columns: repeat(3, 44px); gap: 8px 10px; justify-content: center; padding-top: 4px; }
.hud-hex span { width: 44px; height: 50px; display: grid; place-items: center; font-size: .56rem; color: #fff;
  background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .5);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: hud-hex 2.8s ease-in-out infinite; }
.hud-hex span:nth-child(2n) { animation-delay: .7s; } .hud-hex span:nth-child(3n) { animation-delay: 1.4s; }
.hud-hex span.core { background: rgba(239, 68, 68, .45); box-shadow: 0 0 22px rgba(239, 68, 68, .6); }
@keyframes hud-in { from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hud-blink { 50% { opacity: .15; } }
@keyframes hud-type { from { max-width: 0; } to { max-width: 100%; } }
@keyframes hud-meter { 0%, 100% { transform: scaleX(.72); } 50% { transform: scaleX(1); } }
@keyframes hud-hex { 0%, 100% { filter: brightness(.8); } 50% { filter: brightness(1.6); } }
@media (max-width: 1280px) { .hud { display: none; } }

/* Callouts: the notes on the download cards, as HUD panels. The label comes
   from data-label; amber stays for what can stop an install, info is cool. */
.dl-note, .dl-info {
  position: relative; margin: 18px 0 0; padding: 30px 16px 14px;
  border-radius: 10px; font-size: .82rem; line-height: 1.65; overflow: hidden;
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.dl-note {
  color: #fde68a; background: linear-gradient(160deg, rgba(245, 158, 11, .12), rgba(20, 12, 4, .55));
  border: 1px solid rgba(245, 158, 11, .35); box-shadow: 0 0 30px rgba(245, 158, 11, .08) inset;
}
.dl-info {
  color: #cbd5e1; background: linear-gradient(160deg, rgba(56, 189, 248, .07), rgba(8, 10, 16, .6));
  border: 1px solid rgba(148, 163, 184, .22); box-shadow: 0 0 30px rgba(56, 189, 248, .05) inset;
}
.dl-note::before, .dl-info::before {
  content: attr(data-label); position: absolute; top: 9px; left: 16px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; font-weight: 700;
}
.dl-note::before { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, .6); }
.dl-info::before { color: #7dd3fc; text-shadow: 0 0 10px rgba(125, 211, 252, .5); }
.dl-note::after, .dl-info::after {
  content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: callout-scan 5.5s linear infinite;
}
.dl-note b { color: #fff7d6; } .dl-info b, .dl-info code { color: #f1f5f9; }
@keyframes callout-scan { to { top: 140%; } }

/* Footer: brand, resources, ecosystem, live system status. */
.foot2 { border-top: 1px solid rgba(239, 68, 68, .18); padding: 64px 0 26px; position: relative;
  background: radial-gradient(ellipse at 50% 0, rgba(239, 68, 68, .08), transparent 60%); }
.foot2-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.foot2 h5 { margin: 0 0 18px; font-size: .78rem; letter-spacing: .22em; color: var(--text); display: flex; gap: 10px; align-items: center; }
.foot2 h5 svg { color: var(--red-hot); }
.foot2 a.fl { display: block; color: var(--muted); font-size: .92rem; margin: 11px 0; transition: color .2s, transform .2s; }
.foot2 a.fl:hover { color: var(--red-hot); transform: translateX(3px); }
.foot2-brand p { color: var(--dim); font-size: .9rem; line-height: 1.7; max-width: 300px; }
.foot2-tag { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .28em; color: var(--red-hot); margin-top: 2px; }
.foot2-social { display: flex; gap: 12px; margin-top: 20px; }
.foot2-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .02); transition: .25s; }
.foot2-social a:hover { color: #fff; border-color: rgba(239, 68, 68, .55); box-shadow: 0 0 18px rgba(239, 68, 68, .35); }
.status-card { border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px 20px; background: rgba(255, 255, 255, .02); }
.status-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; color: var(--dim); padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.status-ok { color: #4ade80; display: flex; gap: 8px; align-items: center; }
.status-ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: hud-blink 2s ease-in-out infinite; }
.status-ver { margin-top: 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--dim); }
.status-ver strong { display: block; margin-top: 6px; font-family: var(--sans); font-size: 1.02rem; letter-spacing: 0; color: var(--text); }
.foot2-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--line-soft); color: var(--dim); font-size: .82rem; }
.foot2-bottom b { color: var(--red-hot); letter-spacing: .12em; }
@media (max-width: 900px) { .foot2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot2-grid { grid-template-columns: 1fr; } }

/* About / Join: a big glowing headline over the neon floor. */
.page-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 78vh; display: grid; place-items: center;
  text-align: center; padding: 120px 20px 80px; }
.page-hero .eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; color: var(--red-hot);
  border: 1px solid rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .08); }
.mega { margin: 26px 0 0; font-size: clamp(3.4rem, 11vw, 9rem); line-height: .92; font-weight: 900; letter-spacing: -.04em; color: #fff;
  text-shadow: 0 0 40px rgba(239, 68, 68, .35); }
.mega .glow { display: block; color: transparent; background: linear-gradient(180deg, #ffd7cc, #ff5c47 55%, #b91c1c);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 28px rgba(255, 92, 71, .55));
  animation: mega-pulse 4s ease-in-out infinite; }
@keyframes mega-pulse { 50% { filter: drop-shadow(0 0 48px rgba(255, 92, 71, .85)); } }
.page-hero p.lede { max-width: 640px; margin: 26px auto 0; color: #d4d4dc; font-size: 1.12rem; line-height: 1.7; }
.chapters { max-width: 880px; margin: 0 auto; padding: 40px 20px 100px; display: grid; gap: 26px; }
.chapter { position: relative; padding: 30px 32px 28px; border: 1px solid var(--line-soft); border-radius: 16px;
  background: linear-gradient(160deg, rgba(239, 68, 68, .06), rgba(10, 10, 14, .7)); overflow: hidden; }
.chapter::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--red-hot), transparent); box-shadow: 0 0 18px var(--red-hot); }
.chapter small { font-family: var(--mono); font-size: .66rem; letter-spacing: .26em; color: var(--red-hot); }
.chapter h3 { margin: 8px 0 12px; font-size: 1.6rem; color: #fff; }
.chapter p { margin: 0; color: #c9c9d3; line-height: 1.75; }
.join-grid { max-width: 1080px; margin: 0 auto; padding: 20px 20px 110px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.join-card { position: relative; display: block; padding: 26px; border-radius: 16px; border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .02); transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.join-card:hover { transform: translateY(-4px); border-color: rgba(239, 68, 68, .5); box-shadow: 0 18px 50px rgba(239, 68, 68, .15); }
.join-card .ji { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; }
.join-card h3 { margin: 18px 0 6px; font-size: 1.15rem; color: #fff; }
.join-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.join-card .go { position: absolute; top: 22px; right: 22px; color: var(--dim); }
.join-card .host { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--dim); }

/* The HUD sits in a row under the hero rather than in its corners: the hero
   copy and art fill the width, and panels over them hid the headline. */
.hud { position: relative; inset: auto; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; max-width: var(--wrap); margin: 56px auto 0; padding: 0 24px 64px; pointer-events: auto; }
.hud-panel { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; }
@media (max-width: 1280px) { .hud { display: grid; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hud { grid-template-columns: 1fr; } .hud-boot { display: none; } }
.hud-meter em { font-style: normal; color: #fff; }

.status-wait { color: #fbbf24; display: flex; gap: 8px; align-items: center; }
.status-wait::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.status-row + .status-row { padding-top: 14px; }


/* Light theme: the new panels are drawn for the dark page; keep them legible. */
/* Tighter link padding keeps the bar on one row until the mobile menu takes over. */
@media (max-width: 1400px) { .nav-links a { padding: 8px 10px; } }
/* The full link bar needs ~1250px. Below that it spilled past the right edge
   (the theme toggle went off screen), so the menu button takes over earlier. */
@media (max-width: 1260px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }
}

.page-hero-short { min-height: 56vh; }