/* ============================================================
   CÚMULO — design system
   Base: Volta webdemo (shared with Tales) · Cúmulo amber accent
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  /* DARK — default (dark-native) */
  --bg:        #0A0A0B;
  --bg-2:      #0E0E10;
  --surface:   #131316;
  --surface-2: #191920;
  --text:      #ECECEC;
  --text-dim:  #B4B4BA;
  --muted:     #86868E;
  --faint:     #5C5C64;
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.06);
  --acc:       #4D82FF;   /* EU blue, lifted for dark backgrounds */
  --acc-deep:  #003399;   /* official EU blue */
  --acc-ink:   #06153A;   /* text on accent */
  --acc-rgb:   77,130,255;
  --acc-glow:  rgba(var(--acc-rgb),0.22);
  --halo-rgb:  236,72,200;   /* magenta halo — the second light source */

  --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-accent="green"]  { --acc: #3DDC97; --acc-deep: #1FA874; --acc-ink: #062A1D; --acc-rgb: 61,220,151; --halo-rgb: 61,220,151; }
:root[data-accent="purple"] { --acc: #8B7CFF; --acc-deep: #6A5AE0; --acc-ink: #14113A; --acc-rgb: 139,124,255; --halo-rgb: 236,72,200; }
:root[data-accent="blue"]   { --acc: #3B8BFF; --acc-deep: #2468D9; --acc-ink: #071B3D; --acc-rgb: 59,139,255; --halo-rgb: 59,139,255; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ===== LAYOUT ===== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.section { position: relative; padding: clamp(5.5rem, 4rem + 7vw, 10rem) 0; }
.panel { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.kicker {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.5rem;
}
.kicker-i { color: var(--acc); font-weight: 600; }
.h-sec {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.2rem); line-height: 1.06;
  letter-spacing: -0.025em; color: var(--text); text-wrap: balance;
}
.accent { color: var(--acc); }
.sec-head { max-width: 44rem; margin-bottom: clamp(3rem, 2.4rem + 3vw, 5rem); }
.sec-intro {
  font-size: clamp(1.02rem, 1rem + 0.35vw, 1.18rem); color: var(--text-dim);
  max-width: 54ch; margin-top: 1.5rem; line-height: 1.6;
}

/* ===== NAV ===== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  transition: background 0.4s var(--ease), backdrop-filter 0.4s, padding 0.3s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.brand { display: inline-flex; align-items: center; grid-column: 1; justify-self: start; }
.brand-logo { height: 26px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 2rem; list-style: none; grid-column: 2; justify-self: center; }
.nav-menu a {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--text-dim); transition: color 0.2s; position: relative;
}
.nav-menu a:hover { color: var(--text); }
.nav-menu a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--acc); transition: width 0.25s var(--ease); }
.nav-menu a:hover::after { width: 100%; }
.nav-cta-li, .nav-menu-tools { display: none; } /* in-menu CTA + language pills: mobile only */
.nav-right { display: flex; align-items: center; gap: 1.1rem; grid-column: 3; justify-self: end; }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: none; border: none; color: var(--text-dim);
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em;
  transition: color 0.2s;
}
.lang-btn:hover { color: var(--text); }
.lang-btn svg { width: 11px; height: 11px; opacity: 0.7; transition: transform 0.25s var(--ease); }
.lang.active .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; min-width: 140px; overflow: hidden; padding: 0.3rem; z-index: 950;
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
}
.lang.active .lang-menu { display: block; }
.lang-link {
  display: block; padding: 0.5rem 0.7rem; border-radius: 7px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); transition: background 0.18s, color 0.18s;
}
.lang-link:hover { background: var(--surface-2); color: var(--text); }
.lang-link.is-active { color: var(--acc); }


.nav-cta {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--acc-ink); background: var(--acc); padding: 0.6rem 1.1rem; border-radius: 7px;
  transition: transform 0.2s var(--ease), background 0.2s;
}
.nav-cta:hover { background: color-mix(in srgb, var(--acc) 78%, white); box-shadow: 0 0 18px var(--acc-glow); transform: translateY(-1px); }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 8rem clamp(1.25rem, 4vw, 2.5rem) 4rem; overflow: hidden;
  background: var(--bg);
}
/* faint static grid — texture, fully legible, no motion */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  /* layer 1: static fade (keeps grid clear of the stat band); layer 2: animated weave reveal */
  -webkit-mask-image: radial-gradient(115% 64% at 50% 26%, #000 0%, transparent 64%), radial-gradient(circle at 50% 30%, #000 60%, transparent 80%);
  mask-image: radial-gradient(115% 64% at 50% 26%, #000 0%, transparent 64%), radial-gradient(circle at 50% 30%, #000 60%, transparent 80%);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center; mask-position: center, center;
  -webkit-mask-size: 100% 100%, 0% 0%; mask-size: 100% 100%, 0% 0%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: gridWeave 1.9s var(--ease) both;
}
@keyframes gridWeave {
  from { -webkit-mask-size: 100% 100%, 0% 0%; mask-size: 100% 100%, 0% 0%; }
  to   { -webkit-mask-size: 100% 100%, 220% 220%; mask-size: 100% 100%, 220% 220%; }
}
/* soft blue glow + bottom fade into the page */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(46% 34% at 50% 44%, rgba(8,9,12,0.62), transparent 72%),
    linear-gradient(180deg, transparent 64%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; text-align: center; }

/* one-time entrance on load (subtle, no loop) */
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
.hero::after { animation: heroFade 1.8s ease both; }
.hero-inner > * { animation: heroIn 0.85s var(--ease) both; }
.hero-h1 { animation-delay: 0.08s; }
.hero-sub { animation-delay: 0.25s; }
.hero-actions { animation-delay: 0.4s; }
.scroll-cue { animation: heroFade 1s ease backwards 1.4s; }
.hero-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.7rem + 4.3vw, 5.2rem); line-height: 1.05; letter-spacing: -0.035em;
  color: var(--text); margin: 0 auto 1.7rem; max-width: 18ch; text-wrap: balance;
}
.hero-h1 .accent { color: var(--acc); }
.hero-sub {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem); color: var(--text-dim);
  max-width: 54ch; line-height: 1.6; margin: 0 auto 2.6rem; text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0; justify-content: center; }

/* ===== HERO GLOBE ===== */
.hero-particles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  animation: heroFade 1.4s ease both;
  /* keep stars in the space AROUND the globe — clear a hole over the globe + its halo */
  -webkit-mask-image: radial-gradient(circle at 50% calc(48% + 25px), transparent 0 calc(min(486px, 57.5vw) * 0.92), #000 calc(min(486px, 57.5vw) * 1.14));
  mask-image: radial-gradient(circle at 50% calc(48% + 25px), transparent 0 calc(min(486px, 57.5vw) * 0.92), #000 calc(min(486px, 57.5vw) * 1.14));
}
.hero-globe { position: absolute; z-index: 0; top: 48%; left: 50%; transform: translate(-50%, calc(-50% + 25px)); width: min(972px, 115vw); height: min(972px, 115vw); opacity: 0.82; pointer-events: none; animation: globeIn 1.4s ease 0.25s both; }
@keyframes globeIn { from { opacity: 0; } to { opacity: 0.82; } }
/* on phones the globe rides up behind the headline (and the starfield hole follows it) */
@media (max-width: 600px) {
  /* the globe centre drops to 38% of the height, with a geometric FLOOR:
     never above (nav ~75px + margin + sphere radius), so its top edge
     cannot slide under the bar on short screens */
  .hero-globe {
    top: max(38%, calc(86px + min(486px, 57.5vw)));
    transform: translate(-50%, -50%);
  }
  .hero-particles {
    -webkit-mask-image: radial-gradient(circle at 50% max(38%, calc(86px + min(486px, 57.5vw))), transparent 0 calc(min(486px, 57.5vw) * 0.9), #000 calc(min(486px, 57.5vw) * 1.12));
    mask-image: radial-gradient(circle at 50% max(38%, calc(86px + min(486px, 57.5vw))), transparent 0 calc(min(486px, 57.5vw) * 0.9), #000 calc(min(486px, 57.5vw) * 1.12));
  }
}
/* with the globe on, ::before becomes a top blue glow that ADDS light (screen) over the globe */
.hero.has-globe::before {
  display: block; z-index: 1;
  animation: heroFade 1.2s ease both;   /* the sun is present from the first moment */
  -webkit-mask-image: none; mask-image: none;
  /* ambient glow born at the logo corner — the same source that lights the atmosphere */
  background-image: radial-gradient(52% 44% at 4% 2%, rgba(var(--acc-rgb),0.22), rgba(var(--acc-rgb),0.06) 40%, transparent 62%);
  background-size: 100% 100%; background-repeat: no-repeat;
  mix-blend-mode: screen;
}
.hero.has-globe::after { background:
  radial-gradient(60% 56% at 50% 44%, rgba(7,8,11,0.74), transparent 76%),
  linear-gradient(180deg, transparent 56%, var(--bg) 100%); }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.95rem 1.6rem; border-radius: 8px; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer; border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--acc); color: var(--acc-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--acc) 78%, white); box-shadow: 0 0 26px var(--acc-glow); transform: translateY(-2px); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; transition: opacity 0.5s;
}
.scroll-cue i { width: 1px; height: 30px; background: linear-gradient(var(--acc), transparent); animation: drop 2s ease-in-out infinite; }
.scroll-cue.is-gone { opacity: 0; }
@keyframes drop { 0%,100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } }
@media (max-width: 680px) { .scroll-cue { display: none; } }

/* ===== MARQUEE ===== */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: scroll-x 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

.trust { padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0; border-bottom: 1px solid var(--line-soft); }
.trust-label { display: flex; align-items: center; justify-content: center; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0; }
.tick { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px var(--acc-glow); }
/* ===== STATIC LOGO WALL (Sentinels method: optical balance) ===== */
.logo-wall {
  display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; justify-items: center;
  gap: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem) clamp(1.2rem, 0.9rem + 1.4vw, 2.2rem);
  --lh: clamp(22px, 18px + 0.8vw, 28px);
  max-width: 1000px; margin: 0 auto;
}
.logo-wall .logo {
  height: calc(var(--lh) * var(--f, 1)); width: auto; max-width: 100%; object-fit: contain;
  opacity: 0.5; filter: brightness(0) invert(1); transition: opacity 0.3s;
}
/* 14 logos: 7/5/3/2 cols never leave a single orphan in the last row */
@media (max-width: 980px) { .logo-wall { grid-template-columns: repeat(5, 1fr); max-width: 680px; } }
@media (max-width: 560px) { .logo-wall { grid-template-columns: repeat(3, 1fr); max-width: 420px; } }
@media (max-width: 380px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
.logo-wall .logo:hover { opacity: 1; }
/* per-logo optical-mass factors (logos trimmed; aspect ratios vary) */
.logo-wall .logo[src*="sentinels"] { --f: 0.88; }
.logo-wall .logo[src*="remolonas"] { --f: 0.9; }
.logo-wall .logo[src*="debos"]     { --f: 0.92; }
.logo-wall .logo[src*="inbentus"]  { --f: 0.95; }
.logo-wall .logo[src*="codee"]     { --f: 0.97; }
.logo-wall .logo[src*="gwp"]       { --f: 1.06; }
.logo-wall .logo[src*="imotion"]   { --f: 1.08; }
.logo-wall .logo[src*="tastelab"]  { --f: 1.16; }
.logo-wall .logo[src*="depasify"]  { --f: 1.22; }
.logo-wall .logo[src*="vancubic"]  { --f: 1.06; }

.marquee--method { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 1.1rem 0; }
.marquee--method .marquee-track { gap: 1.4rem; animation-duration: 30s; }
.marquee--method span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -0.02em; color: var(--text); }
.marquee--method b { color: var(--acc); font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.marquee--method span:nth-child(4n+1) { color: var(--faint); -webkit-text-stroke: 1px var(--line); }

/* ===== SERVICES ===== */
.services { list-style: none; border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem) 0; border-bottom: 1px solid var(--line); transition: padding-left 0.3s var(--ease); }
.service:hover { padding-left: 0.8rem; }
.service-n { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--acc); padding-top: 0.4rem; }
.service-body { max-width: 60ch; }
.service-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.service-body p { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.service:hover .service-body h3 { color: var(--acc); }

/* ===== STEPS (methodology) ===== */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.step { padding: 1.8rem 1.1rem 2rem; border-left: 1px solid var(--line); position: relative; }
.step:first-child { border-left: none; }
.step-n { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--faint); }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0.8rem 0 0.5rem; }
.step::before { content: ""; position: absolute; top: 1.8rem; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); opacity: 0; transition: opacity 0.3s; }
.step:hover::before { opacity: 1; }
.step-tag { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.9rem; white-space: nowrap; }
.step p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

/* ===== PORTFOLIO ===== */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.case { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); transition: transform 0.3s var(--ease), border-color 0.3s; }
.case:hover { transform: translateY(-5px); border-color: var(--acc); }
.case-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.7rem; min-height: 24px; }
.case-tag { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 0.3rem 0.7rem; white-space: nowrap; }
.case-logo { flex: 0 1 auto; height: 19px; width: auto; max-width: 90px; object-fit: contain; object-position: right center; opacity: 0.7; filter: brightness(0) invert(1); }
.case h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.case p { color: var(--muted); font-size: 0.94rem; line-height: 1.6; flex: 1; }
.case-foot { margin-top: 1.4rem; }
.chip { font-family: var(--font-mono); font-size: 0.7rem; color: var(--acc); display: inline-flex; align-items: center; gap: 0.4rem; }
.chip::before { content: "▸"; }
.portfolio-roster { margin-top: clamp(2.6rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--line-soft); padding-top: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); }
.roster-label { display: block; text-align: center; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }

.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 1.25rem; --lh: clamp(42px, 34px + 1.8vw, 56px); }
.logo-grid span { display: flex; align-items: center; justify-content: center; padding: clamp(1.8rem, 1.4rem + 1vw, 2.6rem) 1rem; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); transition: background 0.25s; }
.logo-grid span:hover { background: var(--surface); }
.logo-grid img { height: calc(var(--lh) * var(--f, 1)); width: auto; max-width: 84%; object-fit: contain; opacity: 0.5; filter: brightness(0) invert(1); transition: opacity 0.25s; }
.logo-grid span:hover img { opacity: 0.95; }

/* ===== TEAM ===== */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.member { display: flex; gap: 1.3rem; padding: clamp(1.4rem, 1.2rem + 1vw, 2rem); background: var(--bg-2); transition: background 0.25s; }
.panel .member { background: var(--bg); }
.member:hover { background: var(--surface); }
.m-photo {
  flex: 0 0 76px; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--surface-2) var(--img, none) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; color: var(--faint);
  filter: grayscale(1) contrast(1.05); transition: filter 0.3s, color 0.3s;
}
.m-photo.has-img { color: transparent; }
.m-photo .m-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member:hover .m-photo { filter: grayscale(0) contrast(1.02); }
.member:hover .m-photo:not(.has-img) { color: var(--acc); }
.m-info h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.m-role { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acc); margin: 0.25rem 0 0.6rem; }
.m-pitch { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--text); line-height: 1.35; margin: 0 0 0.6rem; }
.m-info p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; margin-bottom: 0.7rem; }
.m-link { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); border-bottom: 1px solid var(--line); transition: color 0.2s, border-color 0.2s; }
.m-link:hover { color: var(--acc); border-color: var(--acc); }

/* monogram for members without a photo image */
.m-photo { display: flex; align-items: center; justify-content: center; }
.member .m-photo::before { display: none; }
.member .m-photo::after { display: none; }
.member[data-has-photo="false"] .m-photo { }

/* ===== FRAMEWORK ===== */
.framework { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 1rem + 2.4vw, 3.2rem); }
.fw { border-top: 2px solid var(--line); padding-top: 1.3rem; transition: border-color 0.35s var(--ease); }
.fw:hover { border-color: var(--acc); }
.fw h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 0.3rem; }
.fw-tag { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.9rem; }
.fw p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }



/* ===== CLOSING ===== */
.closing { position: relative; padding: clamp(5rem, 4rem + 6vw, 9rem) 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line-soft); background: var(--bg); }
/* grid removed — the starfield is the only texture in this section now */
.closing::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 46% at 50% -6%, rgba(var(--acc-rgb),0.30), rgba(var(--acc-rgb),0.08) 40%, transparent 64%);
  background-size: 100% 100%; background-repeat: no-repeat; mix-blend-mode: screen; }
.closing .wrap { position: relative; z-index: 2; }
.cta-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-particles canvas { position: absolute !important; inset: 0; }
.closing .kicker { justify-content: center; }
.closing-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 3.4vw, 3.8rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 18ch; margin: 0 auto clamp(2.2rem, 1.8rem + 1.5vw, 3rem); text-wrap: balance; }
.closing-sub { color: var(--text-dim); max-width: 52ch; margin: 0 auto 2.4rem; font-size: 1.08rem; }
.closing-actions { display: flex; justify-content: center; margin-bottom: 3.5rem; }
.newsletter { max-width: 30rem; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 2rem; }
.news-label { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.news-row { display: flex; gap: 0.6rem; }
.news-row input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem 1rem; color: var(--text); font-family: var(--font-mono); font-size: 0.86rem; }
.news-row input::placeholder { color: var(--faint); }
.news-row input:focus { outline: none; border-color: var(--acc); }

/* ===== FOOTER ===== */
.footer { border-top: 1px solid var(--line); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 2.4rem; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; padding-bottom: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); }
.footer-mark { height: 26px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; text-align: right; }
.footer-loc { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--muted); }
.footer-loc svg { width: 14px; height: 14px; opacity: 0.75; flex: none; }
.footer-contact a { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); transition: color 0.2s; }
.footer-contact a:hover { color: var(--acc); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem 1.6rem; flex-wrap: wrap; }
.footer-bottom small { color: var(--faint); font-size: 0.78rem; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); transition: color 0.2s; }
.footer-legal a:hover { color: var(--text); }

/* ===== REVEAL ===== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* per-item stagger delay is applied inline by app.js (index among .reveal siblings) */

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { border-left: none; border-top: 1px solid var(--line); }
  .step:first-child { border-top: none; }
  .framework { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .cases { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .burger { display: block; }
  .nav-right .nav-cta, .nav-right .lang { display: none; } /* CTA + language move into the menu */
  /* solid nav bar while the menu is open, so the top strip behind the logo/burger
     doesn't let hero content bleed through (class toggled in JS) */
  .nav.menu-open { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
  /* span the whole nav row so the fixed panel is full-width, not clamped to the centre
     grid column (the scrolled nav's backdrop-filter makes it the containing block). */
  .nav-menu.show {
    display: flex; position: fixed; inset: 60px 0 auto 0;
    grid-column: 1 / -1; justify-self: stretch; width: auto;
    flex-direction: column; align-items: center; text-align: center;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 1.8rem 2rem 2.2rem; gap: 1.4rem;
  }
  .nav-menu.show a { font-size: 1rem; color: var(--text); }
  .nav-cta-li { display: block; }
  .nav-menu.show .nav-cta-li a { color: var(--acc); font-weight: 600; }
  .nav-menu.show .nav-menu-tools {
    display: flex; align-items: center; justify-content: center; width: 100%;
    margin-top: 0.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .menu-lang { display: flex; gap: 0.4rem; }
  .nav-menu.show .menu-lang__link {
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-dim); padding: 0.3rem 0.7rem; border-radius: 8px; border: 1px solid var(--line);
  }
  .nav-menu.show .menu-lang__link::after { display: none; }
  .nav-menu.show .menu-lang__link--active { color: var(--acc); border-color: var(--acc); background: var(--acc-glow); }
}
@media (max-width: 560px) {
  .service { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .steps { grid-template-columns: 1fr; }
  .framework { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-contact { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none !important; }
}

/* ============================================================
   VOLTA — own components over the shared base
   ============================================================ */

/* ===== CONTRIBUTIONS (founder + Volta): one split block, + badge on the axis ===== */
.aporta { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); }
.aporta-col { padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem) clamp(1.6rem, 1.3rem + 1.8vw, 3rem); }
.aporta-col--volta { border-left: 1px solid var(--line); background: color-mix(in srgb, var(--acc) 5%, transparent); }
.aporta-col h3 {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem;
}
.aporta-col--volta h3 { color: var(--acc); }
.aporta-col ul { list-style: none; }
.aporta-col li {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  letter-spacing: -0.01em; color: var(--text); padding: 0.7rem 0; border-top: 1px solid var(--line-soft);
}
.aporta-col li:first-child { border-top: none; }
.aporta-plus {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--acc);
}
@media (max-width: 680px) {
  .aporta { grid-template-columns: 1fr; }
  .aporta-col--volta { border-left: none; border-top: 1px solid var(--line); }
}

/* ===== METHOD: 6 steps in 3 columns ===== */
.steps--six { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; }
.steps--six .step:nth-child(3n+1) { border-left: none; }
@media (max-width: 1000px) {
  .steps--six { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .steps--six .step { border-left: none; }
}
@media (max-width: 560px) { .steps--six { grid-template-columns: 1fr; } }

/* ===== THE CHALLENGE: 3 columns ===== */
.framework--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .framework--three { grid-template-columns: 1fr; } }

/* ===== FEATURED CASE (problem / solution) ===== */
.case-featured { max-width: 980px; margin: 0 auto; }
.case-featured h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); margin-top: 1.4rem; }
.case-col-label { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.6rem; }
.case-cols p { font-size: 0.96rem; }
.case-featured .case-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
@media (max-width: 680px) { .case-cols { grid-template-columns: 1fr; } }

/* ===== TEAM ===== */
.founder-card {
  display: flex; align-items: center; gap: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); max-width: 620px; margin-bottom: clamp(2.2rem, 1.8rem + 1.6vw, 3.4rem);
}
.founder-card img { width: 108px; height: 108px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); filter: grayscale(1); transition: filter 0.3s; }
.founder-card:hover img { filter: grayscale(0); }
.founder-card .fname { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.founder-card .frole { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acc); margin: 0.3rem 0 0.6rem; }
.founder-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.team-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) 1rem; }
.tmember { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; }
.tmember img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); transition: box-shadow 0.35s var(--ease), border-color 0.35s; margin-bottom: 0.6rem; }
.tmember:hover img {
  box-shadow: 0 0 14px rgba(var(--acc-rgb),0.35), 0 0 34px rgba(var(--acc-rgb),0.25);   /* glow only, like the planet's atmosphere */
}
.tmember b { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
.tmember span { font-size: 0.76rem; color: var(--faint); line-height: 1.3; }
@media (max-width: 820px) { .team-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .team-row { grid-template-columns: repeat(2, 1fr); } }

/* ===== PHILOSOPHY ===== */
.filosofia-body { color: var(--text-dim); max-width: 58ch; font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem); line-height: 1.7; }
.filosofia-body p + p { margin-top: 1rem; }

/* ===== VOLTA: size adjustments over the Tales base ===== */
.sec-intro { font-size: clamp(1.08rem, 1.02rem + 0.4vw, 1.25rem); }
.hero-sub { font-size: clamp(1.14rem, 1.05rem + 0.55vw, 1.42rem); }
.fw p, .step p { font-size: 0.96rem; }
.case-cols p { font-size: 1rem; }
.step h3 { font-size: 1.35rem; }
.fw h3 { font-size: 1.3rem; }

/* ===== Lucide icons in Objectives ===== */
.fw-icon { display: block; width: 24px; height: 24px; color: var(--acc); margin-bottom: 1rem; }
.fw-icon svg { width: 100%; height: 100%; }

/* featured-case logo: the card is large, the lockup needs more presence */
.case-featured .case-logo { height: 30px; max-width: 190px; opacity: 0.9; }

/* objectives: one-line titles — 4 columns only on wide screens */
.fw h3 { font-size: 1.22rem; }
@media (max-width: 1200px) {
  .framework:not(.framework--three) { grid-template-columns: repeat(2, 1fr); }
}

/* ===== CASE CARD v2: the logo is the title ===== */
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); }
.case-brand { height: 32px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; opacity: 0.95; filter: brightness(0) invert(1); }
.case-results {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.6rem; flex-wrap: wrap;
  margin-top: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); padding-top: 1.3rem; border-top: 1px solid var(--line-soft);
}
.case-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.case-visit { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); transition: color 0.2s; white-space: nowrap; }
.case-featured:hover .case-visit { color: var(--acc); }

/* team: single 12-person grid (6+6), no featured member */
.team-row { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1250px) { .team-row { grid-template-columns: repeat(4, 1fr); } }   /* 4+4+4: wide cells keep long names on one line */
@media (max-width: 600px) { .team-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .team-row { grid-template-columns: repeat(2, 1fr); } }

/* ===== LEGAL PAGES ===== */
.legal-main { max-width: 46rem; margin: 0 auto; padding: 9rem clamp(1.25rem, 4vw, 2.5rem) 5rem; }
.legal-main h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.legal-updated { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); display: block; margin-bottom: 2.5rem; }
.legal-main h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin: 2.2rem 0 0.7rem; }
.legal-main p, .legal-main li { color: var(--text-dim); font-size: 0.97rem; line-height: 1.7; }
.legal-main p + p { margin-top: 0.8rem; }
.legal-main ul { padding-left: 1.2rem; margin: 0.6rem 0; }

/* ===== slim scrollbar matching the background ===== */
html { scrollbar-color: #26262c var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26262c; border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #33333b; }

/* scrollspy: current section marked by colour only (underline stays for hover) */
.nav-menu a.is-current { color: var(--text); }

/* ===== CONTACT FORM (native) ===== */
.contact-form { max-width: 34rem; margin: 0 auto; text-align: left; display: grid; gap: 0.7rem; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.contact-form input, .contact-form textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.85rem 1rem; color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--faint); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--acc); }
.cf-actions { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.3rem; }
.cf-status { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.cf-status.ok { color: var(--acc); }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }

/* Plex Sans display sizing */
.hero-h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); letter-spacing: -0.03em; }


/* ===== METHOD on mobile: vertical timeline with dots always lit ===== */
@media (max-width: 560px) {
  .steps--six .step { border-left: 1px solid var(--line); border-top: none; padding-left: 1.4rem; }
  /* same specificity as the desktop rule that overflows steps 1 and 4 */
  .steps--six .step:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .steps--six .step::before { opacity: 1; top: calc(2.3rem - 3.5px); }   /* centred with the 01-06 number */
}

/* hero sub fits the full sentence on one line (still inside the disc) */
.hero-sub { max-width: 62ch; }

/* centred text without widow words */
.filosofia-body p, .closing-sub, .hero-sub { text-wrap: pretty; }


/* ============================================================
   CÚMULO — own components over the shared base
   ============================================================ */

/* brand lockup: dot-cluster mark + lowercase wordmark */
.brand { gap: 0.55rem; }
.brand-mark { width: 26px; height: 26px; color: var(--acc); flex: none; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.03em; color: var(--text); line-height: 1; }
.footer-brand .brand { margin-bottom: 1.1rem; }

/* hero: the network lives inside the globe disc; headline stays contained */
.hero-h1 { max-width: 16ch; }
.hero-h1 .accent { white-space: nowrap; }

/* ===== STATUS BAND (verifiable claims, not vanity numbers) ===== */
.stats { border-bottom: 1px solid var(--line-soft); background: var(--bg); position: relative; z-index: 2; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line-soft); }
.stat { padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem) clamp(1.2rem, 1rem + 1vw, 1.8rem); border-right: 1px solid var(--line-soft); }
.stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.35rem; }
.stat span { font-size: 0.9rem; color: var(--muted); line-height: 1.5; display: block; }
.stat .live { display: inline-flex; align-items: center; gap: 0.5rem; }
.stat .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px var(--acc-glow); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--acc-glow); } 50% { box-shadow: 0 0 0 7px rgba(var(--acc-rgb), 0.08); } }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-soft); } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-bottom: 1px solid var(--line-soft); } .stat:last-child { border-bottom: none; } }

/* ===== GRID METAPHOR (problem → what we do) ===== */
.grid-story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: start; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.grid-story .lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.35; color: var(--text); text-wrap: pretty; }
.grid-story .lead + p { margin-top: 1.2rem; color: var(--text-dim); font-size: 1.02rem; line-height: 1.65; }
.plug { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.plug-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; border-top: 1px solid var(--line-soft); }
.plug-row:first-child { border-top: none; }
.plug-row small { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.25rem; }
.plug-row b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.plug-row .to { color: var(--acc); font-family: var(--font-mono); font-size: 0.9rem; }
.plug-row .out { text-align: right; }
.plug-foot { padding: 1rem 1.4rem; background: color-mix(in srgb, var(--acc) 6%, transparent); border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--text-dim); }
@media (max-width: 900px) { .grid-story { grid-template-columns: 1fr; } }

/* ===== 4-step flow (base .steps is 5 cols) ===== */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step-code { display: block; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 7px; padding: 0.55rem 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-code i { color: var(--acc); font-style: normal; }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps--4 { grid-template-columns: 1fr; } }

/* ===== GPU TABLE ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; -webkit-overflow-scrolling: touch; }
.gpu-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.gpu-table th, .gpu-table td { text-align: left; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.gpu-table th { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--bg-2); }
.gpu-table tbody tr { transition: background 0.2s; }
.gpu-table tbody tr:hover { background: var(--surface); }
.gpu-table tbody tr:last-child td { border-bottom: none; }
.gpu-table .gpu { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap; }
.gpu-table .gpu small { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); font-weight: 500; letter-spacing: 0.04em; margin-top: 0.2rem; }
.gpu-table .fit { color: var(--text-dim); font-size: 0.9rem; max-width: 30ch; }
.gpu-table .price { font-family: var(--font-mono); font-size: 0.98rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.gpu-table .price small { color: var(--faint); font-weight: 500; font-size: 0.72rem; margin-left: 0.2rem; }
.gpu-table .status { white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line); border-radius: 100px; padding: 0.3rem 0.7rem; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.pill--soon::before { background: var(--faint); }
.gpu-table .ask { font-family: var(--font-mono); font-size: 0.76rem; color: var(--acc); white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.gpu-table .ask:hover { border-color: var(--acc); }
.table-note { margin-top: 1rem; font-size: 0.84rem; color: var(--muted); line-height: 1.55; max-width: 72ch; }
.table-note b { color: var(--text-dim); font-weight: 500; }

/* ===== PRICING MODELS ===== */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s var(--ease); }
.plan:hover { border-color: var(--acc); transform: translateY(-4px); }
.plan-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.8rem; }
.plan h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.plan p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; flex: 1; }
.plan ul { list-style: none; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.plan li { font-size: 0.86rem; color: var(--text-dim); padding: 0.25rem 0 0.25rem 1.1rem; position: relative; }
.plan li::before { content: "▸"; position: absolute; left: 0; color: var(--acc); font-size: 0.7rem; top: 0.42rem; }
.plan--soon { border-style: dashed; }
.plan--soon .plan-tag { color: var(--muted); }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* ===== PROFILES (who it's for) ===== */
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.profile { border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--bg); transition: border-color 0.3s; }
.profile:hover { border-color: var(--acc); }
.profile h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.profile p { color: var(--muted); font-size: 0.94rem; line-height: 1.6; }
.profile-need { display: block; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); line-height: 1.5; }
.profile-need i { color: var(--acc); font-style: normal; }
.profiles-note { margin-top: 1.6rem; color: var(--text-dim); font-size: 0.98rem; }
@media (max-width: 900px) { .profiles { grid-template-columns: 1fr; } }

/* ===== NETWORK (supply side) ===== */
.network { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: start; }
.sites { list-style: none; border-top: 1px solid var(--line); }
.sites li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.sites li svg { width: 22px; height: 22px; color: var(--acc); margin-top: 0.15rem; }
.sites b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.sites p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.checks { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); }
.checks h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); margin-bottom: 1.1rem; }
.checks ul { list-style: none; }
.checks li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0; border-top: 1px solid var(--line-soft); font-size: 0.94rem; color: var(--text-dim); line-height: 1.5; }
.checks li:first-child { border-top: none; }
.checks li svg { width: 16px; height: 16px; color: var(--acc); flex: none; margin-top: 0.25rem; }
.checks-cta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.checks-cta span { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 900px) { .network { grid-template-columns: 1fr; } }

/* ===== TRUST: three checkable facts + certification status ===== */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.fact { border-top: 2px solid var(--line); padding-top: 1.3rem; transition: border-color 0.35s var(--ease); }
.fact:hover { border-color: var(--acc); }
.fact-q { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.6rem; }
.fact h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.fact p { color: var(--muted); font-size: 0.94rem; line-height: 1.6; }
.certs { margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cert { padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); border-left: 1px solid var(--line-soft); }
.cert:first-child { border-left: none; }
.cert h4 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.cert h4::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.cert--now h4 { color: var(--acc); } .cert--now h4::before { background: var(--acc); box-shadow: 0 0 0 4px var(--acc-glow); }
.cert ul { list-style: none; }
.cert li { font-size: 0.92rem; color: var(--text-dim); padding: 0.35rem 0; border-top: 1px solid var(--line-soft); line-height: 1.5; }
.cert li:first-child { border-top: none; }
.cert--now li { color: var(--text); }
.certs-note { margin-top: 1rem; font-size: 0.84rem; color: var(--muted); max-width: 72ch; line-height: 1.55; }
@media (max-width: 900px) { .facts, .certs { grid-template-columns: 1fr; } .cert { border-left: none; border-top: 1px solid var(--line-soft); } .cert:first-child { border-top: none; } }

/* ===== WHO'S BEHIND ===== */
.behind { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); max-width: 820px; margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); }
.behind img { height: 30px; width: auto; }
.behind p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.6; }
.behind a { color: var(--acc); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.behind a:hover { border-color: var(--acc); }
@media (max-width: 600px) { .behind { grid-template-columns: 1fr; } }

/* ===== FAQ ===== */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.25rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--text); transition: color 0.2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--acc); font-size: 1.2rem; flex: none; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--acc); }
.faq details p { color: var(--text-dim); font-size: 0.97rem; line-height: 1.65; padding: 0 0 1.3rem; max-width: 66ch; }
.faq details p + p { margin-top: -0.6rem; }

/* ===== CLOSING (form CTA) ===== */
.closing-sub { color: var(--text-dim); max-width: 54ch; margin: -0.8rem auto 2.4rem; font-size: 1.08rem; text-wrap: pretty; }
.closing-actions { gap: 0.9rem; flex-wrap: wrap; }

/* ===== FORM PAGES ===== */
.form-page { min-height: 100svh; display: flex; align-items: center; padding-top: 7rem; padding-bottom: 5rem; }
.form-page .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: start; text-align: left; }
.form-side h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 1.2rem; text-wrap: balance; }
.form-side p { color: var(--text-dim); font-size: 1.05rem; line-height: 1.65; max-width: 44ch; }
.form-side ul { list-style: none; margin-top: 1.8rem; border-top: 1px solid var(--line); }
.form-side li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); font-size: 0.94rem; line-height: 1.5; }
.form-side li svg { width: 16px; height: 16px; color: var(--acc); flex: none; margin-top: 0.25rem; }
.form-side .switch { margin-top: 1.6rem; font-size: 0.9rem; color: var(--muted); }
.form-side .switch a { color: var(--acc); }
.contact-form { max-width: none; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 1.2rem + 1vw, 2.2rem); gap: 0.9rem; }
.cf-field { display: grid; gap: 0.4rem; }
.cf-field label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cf-field label i { color: var(--faint); font-style: normal; text-transform: none; letter-spacing: 0; }
.contact-form input, .contact-form textarea, .contact-form select { background: var(--bg); }
.contact-form select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem 2.4rem 0.85rem 1rem; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2386868E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>"); background-repeat: no-repeat; background-position: right 0.9rem center; transition: border-color 0.2s; }
.contact-form select:focus { outline: none; border-color: var(--acc); }
.contact-form select:invalid { color: var(--faint); }
.cf-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.cf-consent input { width: auto; margin-top: 0.25rem; accent-color: var(--acc); }
.cf-consent a { color: var(--text-dim); border-bottom: 1px solid var(--line); }
.cf-fine { font-size: 0.78rem; color: var(--faint); }
@media (max-width: 900px) { .form-page .wrap { grid-template-columns: 1fr; } .form-page { padding-top: 6rem; } }

/* nav CTA reads as the single conversion target */
.nav-cta { white-space: nowrap; }

/* ============================================================
   CÚMULO v2 — split hero with console preview (no globe)
   ============================================================ */
.hero--split { min-height: auto; padding: clamp(7.5rem, 6rem + 4vw, 10rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 3rem + 2vw, 5rem); }
.hero--split::after { background: linear-gradient(180deg, transparent 70%, var(--bg) 100%); }
.hero--split .hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: center; text-align: left; }
.hero--split .hero-h1 { margin: 0 0 1.4rem; max-width: 15ch; }
.hero--split .hero-sub { margin: 0 0 2.2rem; max-width: 46ch; }
.hero--split .hero-actions { justify-content: flex-start; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 2rem; }
.hero-proof span { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
.hero-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }

/* console preview: the product, as evidence */
.console { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset; animation: heroIn 0.9s var(--ease) 0.3s both; }
.console::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 100% 0%, rgba(var(--acc-rgb),0.10), transparent 70%); }
.console-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.console-bar .dots { display: flex; gap: 6px; }
.console-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); opacity: 0.5; }
.console-bar .crumb { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.03em; }
.console-bar .crumb b { color: var(--text-dim); font-weight: 500; }
.console-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 100px; padding: 0.2rem 0.55rem; white-space: nowrap; }
.console-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 0.6rem; }
.console-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.console-head h3 small { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); font-weight: 400; margin-top: 0.15rem; letter-spacing: 0.03em; }
.console-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.console-filters span { font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-dim); border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.5rem; white-space: nowrap; }
.console-filters span.on { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: rgba(var(--acc-rgb),0.08); }
.offers { list-style: none; padding: 0.3rem 0.6rem 0.6rem; }
.offer { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr auto; align-items: center; gap: 0.8rem; padding: 0.75rem 0.5rem; border-top: 1px solid var(--line-soft); border-radius: 8px; }
.offer:first-child { border-top: none; }
.offer.is-best { background: var(--surface-2); }
.offer .site b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
.offer .site small { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); margin-top: 0.15rem; letter-spacing: 0.03em; }
.offer .avail { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.45rem; }
.offer .avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.offer .avail.low::before { background: var(--faint); }
.offer .p { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; color: var(--text); text-align: right; white-space: nowrap; }
.offer .p small { display: block; font-size: 0.6rem; color: var(--faint); font-weight: 400; }
.offer .go { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; color: var(--acc-ink); background: var(--acc); border-radius: 6px; padding: 0.42rem 0.7rem; white-space: nowrap; }
.offer .go.ghost { color: var(--text-dim); background: transparent; border: 1px solid var(--line); }
.offer.is-best .badge { display: inline-block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); margin-left: 0.4rem; vertical-align: middle; }
.console-foot { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.62rem; color: var(--faint); letter-spacing: 0.03em; }
@media (max-width: 980px) {
  .hero--split .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero--split .hero-h1, .hero--split .hero-sub { margin-left: auto; margin-right: auto; }
  .hero--split .hero-actions, .hero-proof { justify-content: center; }
  .console { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .offer { grid-template-columns: 1fr auto; }
  .offer .avail { grid-column: 1; }
  .offer .go { grid-column: 2; grid-row: 1 / span 2; }
}

/* ===== EU blue + magenta halo: two light sources on the dark ground ===== */
.hero--split::before {
  display: block; -webkit-mask-image: none; mask-image: none; mix-blend-mode: screen; animation: heroFade 1.2s ease both;
  background-image:
    radial-gradient(42% 46% at 8% 0%, rgba(var(--acc-rgb),0.26), rgba(var(--acc-rgb),0.06) 45%, transparent 68%),
    radial-gradient(38% 42% at 96% 18%, rgba(var(--halo-rgb),0.16), rgba(var(--halo-rgb),0.04) 45%, transparent 70%),
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
.console::before { background:
  radial-gradient(60% 40% at 100% 0%, rgba(var(--halo-rgb),0.12), transparent 70%),
  radial-gradient(50% 40% at 0% 100%, rgba(var(--acc-rgb),0.10), transparent 70%); }
.console { box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(var(--halo-rgb),0.08), 0 0 0 1px rgba(255,255,255,0.02) inset; }
.closing::after { background:
  radial-gradient(56% 46% at 30% -6%, rgba(var(--acc-rgb),0.30), transparent 62%),
  radial-gradient(46% 40% at 76% 0%, rgba(var(--halo-rgb),0.16), transparent 64%);
  background-size: 100% 100%; background-repeat: no-repeat; mix-blend-mode: screen; }
.btn-primary:hover { box-shadow: 0 0 26px var(--acc-glow), 0 0 50px rgba(var(--halo-rgb),0.12); }
.nav-cta:hover { box-shadow: 0 0 18px var(--acc-glow), 0 0 36px rgba(var(--halo-rgb),0.12); }
.panel { background: linear-gradient(180deg, var(--bg-2), var(--bg-2)); }

/* ===== v3: globe hero (network already lit) + console preview inside "How it works" ===== */
.hero.has-globe { min-height: 100svh; padding: 8rem clamp(1.25rem, 4vw, 2.5rem) 4rem; }
.hero.has-globe .hero-inner { display: block; text-align: center; }
.hero.has-globe .hero-h1 { margin: 0 auto 1.5rem; max-width: 16ch; }
.hero.has-globe .hero-sub { margin: 0 auto 2.4rem; max-width: 48ch; }
.hero.has-globe .hero-actions { justify-content: center; }
.hero.has-globe .hero-proof { justify-content: center; margin-top: 2.2rem; }
.hero.has-globe::before { background-image: radial-gradient(52% 44% at 4% 2%, rgba(var(--acc-rgb),0.26), rgba(var(--acc-rgb),0.07) 40%, transparent 62%), radial-gradient(40% 40% at 98% 30%, rgba(var(--halo-rgb),0.12), transparent 70%); background-size: 100% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; }
.console--inline { max-width: 860px; margin: 0 auto clamp(2.6rem, 2rem + 2.4vw, 4.5rem); animation: none; }

/* ===== console mini demo ===== */
.offer { grid-template-columns: 1.25fr 0.85fr 0.7fr 0.8fr auto; }
.offer .lat { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }
.offer .lat small { display: block; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.console--demo .offer { transition: transform 0.55s var(--ease), background 0.3s, opacity 0.3s; will-change: transform; }
.console--demo .offer .go { transition: background 0.3s, color 0.3s, border-color 0.3s; }
.console--demo .offer .go.busy { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line); }
.console--demo .offer .go.ok { background: transparent; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); }
.console--demo .offer.is-best .badge { transition: opacity 0.3s; }
.console--demo .offer.is-best .avail::before { animation: pulse 1.6s ease-in-out infinite; }
.console--demo .console-filters span { transition: color 0.3s, border-color 0.3s, background 0.3s; }
.console-cursor { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(var(--acc-rgb),0.9); background: rgba(var(--acc-rgb),0.18); pointer-events: none; opacity: 0; transition: left 0.6s var(--ease), top 0.6s var(--ease), opacity 0.3s, transform 0.2s; transform: translate(-50%, -50%); z-index: 3; }
.console-cursor.show { opacity: 1; }
.console-cursor.click { transform: translate(-50%, -50%) scale(0.7); }
@media (max-width: 560px) { .offer { grid-template-columns: 1fr auto; } .offer .lat { grid-column: 1; } }

/* ===== console demo v2: request → fan-out → offers → deploy → per-second meter ===== */
.console--demo { cursor: default; user-select: none; }
.console--demo .offer { grid-template-columns: 1.3fr 0.85fr 0.7fr auto; }
.demo-body { padding: 1rem 1.1rem 1.1rem; display: grid; gap: 0.9rem; }
.demo-cmd { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; min-height: 2.6rem; }
.demo-cmd .ps { color: var(--acc); }
.demo-cmd .caret { width: 8px; height: 1.05em; background: var(--text-dim); display: inline-block; animation: blink 1s steps(1) infinite; }
.demo-cmd.done .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.demo-step, .demo-offers, .demo-meter { opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.demo-step.on, .demo-offers.on, .demo-meter.on { opacity: 1; transform: none; }
.demo-line { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.01em; }
.demo-line b { color: var(--text); font-weight: 600; }
.demo-line .k { color: var(--acc); }
.demo-line.result { opacity: 0; transition: opacity 0.4s; margin-top: 0.45rem; }
.demo-step.done .demo-line.result { opacity: 1; }
.cells { display: grid; grid-template-columns: repeat(37, 1fr); gap: 3px; margin-top: 0.55rem; }
.cells i { display: block; height: 6px; border-radius: 2px; background: var(--line); transition: background 0.25s, box-shadow 0.25s; }
.cells i.on { background: var(--acc); box-shadow: 0 0 6px rgba(var(--acc-rgb),0.6); }
.cells i.off { background: var(--faint); opacity: 0.5; }
.demo-offers { padding: 0; }
.demo-offers .offer { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.demo-offers .offer.in { opacity: 1; transform: none; }
.demo-offers .offer.more { display: block; padding: 0.55rem 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); }
.bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 0.6rem; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), rgba(var(--halo-rgb),0.9)); transition: width 1.6s var(--ease); }
.demo-step.done .bar i { width: 100%; }
.demo-meter { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); padding-top: 0.8rem; border-top: 1px solid var(--line-soft); }
.demo-meter .k { color: var(--acc); display: inline-flex; align-items: center; gap: 0.45rem; }
.demo-meter .k::before { display: none; }
.demo-meter b { color: var(--text); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.demo-meter .note { color: var(--faint); font-size: 0.64rem; margin-left: auto; }
@media (max-width: 560px) { .cells { grid-template-columns: repeat(19, 1fr); } .demo-meter .note { margin-left: 0; width: 100%; } }

/* ===== hero demo sizing (split hero) ===== */
.hero--split .console { animation: heroIn 0.9s var(--ease) 0.3s both; }
.hero--split .demo-body { gap: 0.8rem; }
.hero--split .offer { padding: 0.6rem 0.5rem; }
@media (max-width: 980px) { .hero--split .console { max-width: 680px; } }

/* ===== console demo v3: four screens on autopilot, three cases ===== */
.console--demo .console-bar { position: relative; z-index: 2; }
.demo-stage { position: relative; height: 380px; overflow: hidden; }
.demo-screen { position: absolute; inset: 0; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; }
.demo-screen.on { opacity: 1; transform: none; }
.demo-case { display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.03em; }
.demo-case span { color: var(--acc); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; }
.demo-case b { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--text); }
.demo-hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.s-request { justify-content: center; gap: 1.1rem; }
.s-request .demo-cmd { font-size: 0.9rem; padding: 0.9rem 1rem; line-height: 1.5; }
.s-request .typed { word-break: break-all; }
/* network: map + KPIs */
.s-network { flex-direction: row; align-items: stretch; gap: 1.2rem; padding-right: 1.4rem; }
.map-wrap { flex: 0 0 auto; height: 100%; display: flex; align-items: center; }
.eu-map { height: 100%; width: auto; max-width: 250px; overflow: visible; }
.eu-map .land circle { fill: var(--faint); opacity: 0.55; }
.eu-map .site .halo { fill: var(--acc); opacity: 0; transition: opacity 0.35s; }
.eu-map .site .dot { fill: var(--faint); opacity: 0.35; transition: fill 0.3s, opacity 0.3s, r 0.3s; }
.eu-map .site.answered .dot { fill: var(--text-dim); opacity: 0.9; }
.eu-map .site.offer .dot { fill: var(--acc); opacity: 1; }
.eu-map .site.offer .halo { opacity: 0.18; }
.eu-map .site.chosen .dot { fill: #fff; r: 3.2; }
.eu-map .site.chosen .halo { opacity: 0.55; animation: pulse-svg 1.4s ease-out infinite; }
@keyframes pulse-svg { 0% { r: 4; opacity: 0.6; } 100% { r: 16; opacity: 0; } }
.demo-kpis { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.demo-kpis > div { border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }
.demo-kpis b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.demo-kpis span { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }
.demo-kpis .demo-hint { opacity: 0; transition: opacity 0.4s; }
.s-network.done .demo-kpis .demo-hint { opacity: 1; }
/* compare: three cards */
.cards { list-style: none; display: grid; gap: 0.6rem; }
.card { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: center; padding: 0.75rem 0.9rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s, background 0.3s; }
.card.in { opacity: 1; transform: none; }
.card.is-best { border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 7%, var(--bg)); }
.card .site { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.card .site .badge { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); margin-left: 0.5rem; }
.card .op { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); letter-spacing: 0.03em; }
.card .chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.card .chips span { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-dim); border: 1px solid var(--line); border-radius: 5px; padding: 0.15rem 0.45rem; white-space: nowrap; }
.card .chips span.ok::before { content: "✓ "; color: var(--acc); }
.card .price { grid-column: 2; grid-row: 1 / span 3; text-align: right; font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--text); white-space: nowrap; }
.card .price small { display: block; font-size: 0.58rem; font-weight: 400; color: var(--faint); letter-spacing: 0.04em; margin-top: 0.15rem; }
.card .go { grid-column: 2; grid-row: 4; justify-self: end; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; color: var(--acc-ink); background: var(--acc); border-radius: 6px; padding: 0.35rem 0.65rem; opacity: 0; transition: opacity 0.3s; }
.card.is-best.chosen .go { opacity: 1; }
/* running: metrics */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.metric { padding: 0.7rem 0.85rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.metric.in { opacity: 1; transform: none; }
.metric span { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.metric b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; color: var(--text); }
.s-running .demo-meter { margin-top: auto; }
/* steps indicator */
.demo-steps { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.2rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.62rem; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; }
.demo-steps i { width: 18px; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.3s; }
.demo-steps i.on { background: var(--acc); }
.demo-steps span { margin-left: 0.5rem; color: var(--muted); }
@media (max-width: 980px) { .demo-stage { height: 400px; } }
@media (max-width: 560px) { .s-network { flex-direction: column; } .eu-map { max-width: 100%; height: 190px; } .metrics { grid-template-columns: 1fr; } .demo-stage { height: 460px; } }

/* demo v3 fixes: taller stage, compact cards, meter always visible on the running screen */
.demo-stage { height: 420px; }
.card { padding: 0.6rem 0.85rem; gap: 0.2rem 1rem; }
.card .chips { margin-top: 0.1rem; }
.card .price { font-size: 1.05rem; }
.s-running .demo-meter { opacity: 1; transform: none; }
.s-request { gap: 1rem; }
@media (max-width: 980px) { .demo-stage { height: 430px; } }
@media (max-width: 560px) { .demo-stage { height: 480px; } }

/* demo v3: mobile */
.console--demo { text-align: left; }
.demo-case { flex-wrap: wrap; row-gap: 0.15rem; }
@media (max-width: 560px) {
  .demo-stage { height: 560px; }
  .demo-screen { padding: 1rem; }
  .card { padding: 0.55rem 0.75rem; }
  .card .chips span { font-size: 0.56rem; padding: 0.1rem 0.35rem; }
  .card .price { font-size: 0.98rem; }
  .s-request .demo-cmd { font-size: 0.8rem; }
}

@media (max-width: 560px) { .console--demo .crumb { display: none; } }

/* demo v3: network screen in one column on phones */
@media (max-width: 560px) {
  .s-network { flex-direction: column; gap: 0.9rem; padding-right: 1rem; }
  .map-wrap { width: 100%; height: auto; justify-content: center; }
  .eu-map { height: 250px; width: auto; max-width: 100%; }
  .demo-kpis { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1rem; justify-content: flex-start; }
  .demo-kpis > div { flex: 1 1 0; border-top: 1px solid var(--line-soft); padding-top: 0.5rem; }
  .demo-kpis b { font-size: 1.35rem; }
  .demo-kpis .demo-hint { flex: 1 1 100%; }
}

@media (max-width: 560px) { .demo-kpis { flex: 0 0 auto; align-content: flex-start; } .demo-kpis .demo-hint { margin-top: 0.2rem; } }

/* request screen: stable command box (ghost reserves the height of the longest command) */
.s-request .demo-cmd { display: block; position: relative; padding: 0; min-height: 0; }
.s-request .demo-cmd .ghost, .s-request .demo-cmd .live { display: block; padding: 0.9rem 1rem; line-height: 1.5; word-break: break-all; overflow-wrap: anywhere; }
.s-request .demo-cmd .ghost { visibility: hidden; }
.s-request .demo-cmd .live { position: absolute; inset: 0; }
.s-request .demo-cmd .caret { vertical-align: text-bottom; margin-left: 1px; }

/* ===== demo: request builder (screen 1) ===== */
.console--demo .console-bar { height: 2.7rem; padding-top: 0; padding-bottom: 0; }
.console--demo .crumb { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console--demo .console-tag { flex: none; }
.s-request { justify-content: flex-start; gap: 0.7rem; }
.req { display: grid; gap: 0.45rem; }
.req-row { display: grid; grid-template-columns: 5.2rem 1fr; align-items: center; gap: 0.6rem; }
.req-l { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.seg { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.seg span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-dim); border: 1px solid var(--line-soft); background: var(--bg); border-radius: 6px; padding: 0.28rem 0.55rem; white-space: nowrap; transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease); }
.seg span.on { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: rgba(var(--acc-rgb),0.10); }
.seg span.pop { transform: scale(1.06); }
.req-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); }
.est small { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.est b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); opacity: 0; transition: opacity 0.4s; }
.est b.on { opacity: 1; }
.req-go { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--acc-ink); background: var(--acc); border-radius: 7px; padding: 0.55rem 0.9rem; white-space: nowrap; opacity: 0.45; transition: opacity 0.3s, transform 0.15s, box-shadow 0.3s; }
.req-go.ready { opacity: 1; }
.req-go.pressed { transform: scale(0.96); box-shadow: 0 0 22px var(--acc-glow); }
.s-request .demo-cmd { margin-top: auto; opacity: 0.85; }
.s-request .demo-cmd .ghost, .s-request .demo-cmd .live { padding: 0.6rem 0.8rem; font-size: 0.72rem; line-height: 1.5; }
@media (max-width: 560px) { .req-row { grid-template-columns: 4.4rem 1fr; } .seg span { font-size: 0.62rem; padding: 0.25rem 0.45rem; } .s-request .demo-cmd { display: none; } }
@media (max-width: 1100px) and (min-width: 981px) { .demo-stage { height: 460px; } }

/* ===== demo v4: the live network is the first image ===== */
.s-network { padding: 0; flex-direction: column; gap: 0; }
.map-stage { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 190px; }
.map-wrap { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0.9rem 0.6rem; }
.map-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--acc-rgb),0.16), transparent); pointer-events: none; }
.eu-map { position: relative; height: 100%; width: auto; max-width: 100%; overflow: visible; }
.eu-map .land circle { fill: var(--text-dim); opacity: 0.32; }
.eu-map .links line { stroke: var(--acc); stroke-opacity: 0.22; stroke-width: 0.8; }
.eu-map .pulse { fill: #fff; opacity: 0.9; }
.eu-map .site .halo { fill: var(--acc); opacity: 0.16; }
.eu-map .site .dot { fill: var(--acc); opacity: 0.85; }
.eu-map .site.dim .halo { opacity: 0; }
.eu-map .site.dim .dot { fill: var(--faint); opacity: 0.35; }
.eu-map .site.offer .halo { opacity: 0.32; }
.eu-map .site.offer .dot { fill: #fff; opacity: 1; }
.callouts { position: absolute; inset: 0.9rem 0.6rem; pointer-events: none; }
.callout { position: absolute; transform: translate(8px, -50%); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.18rem 0.42rem; white-space: nowrap; opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.callout.in { opacity: 1; transform: translate(10px, -50%); }
.callout.best { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.callout small { display: block; font-size: 0.52rem; font-weight: 400; letter-spacing: 0.06em; color: inherit; opacity: 0.75; }
.net-side { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 1rem 1.1rem 1rem 0; }
.ticket { display: grid; gap: 0.25rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ticket span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.ticket b { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; }
.ticket em { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-dim); margin-top: 0.15rem; }
.net-side .demo-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.8rem; }
.net-side .demo-kpis > div { border-top: 1px solid var(--line-soft); padding-top: 0.45rem; }
.net-side .demo-kpis b { font-size: 1.3rem; }
.net-side .demo-kpis .k-offers { opacity: 0.25; transition: opacity 0.4s; }
.s-network.offers .demo-kpis .k-offers { opacity: 1; }
.net-side .demo-hint { opacity: 0; transition: opacity 0.4s; min-height: 2.2em; }
.s-network.offers .demo-hint { opacity: 1; }
@media (max-width: 560px) {
  .map-stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .map-wrap { padding: 0.8rem 0.6rem 0.2rem; }
  .net-side { padding: 0.4rem 1rem 0.9rem; gap: 0.7rem; }
  .net-side .demo-kpis { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .net-side .demo-kpis b { font-size: 1.1rem; }
  .net-side .demo-hint { display: none; }
  .callout { font-size: 0.6rem; }
}

/* demo v4 tweaks: callout sides, no-wrap KPIs, wider side column */
.callout.left { transform: translate(calc(-100% - 8px), -50%); }
.callout.left.in { transform: translate(calc(-100% - 10px), -50%); }
.map-stage { grid-template-columns: 1fr 200px; }
.net-side .demo-kpis b { white-space: nowrap; }
.ticket em { line-height: 1.45; }
@media (max-width: 560px) { .net-side .demo-kpis b { font-size: 1rem; } .net-side .demo-kpis span { font-size: 0.56rem; } }

/* demo v4: callouts anchored to the SVG box (set by JS); compact mobile layout */
.callouts { inset: auto; left: 0; top: 0; width: 0; height: 0; }
@media (max-width: 560px) {
  .demo-stage { height: 540px; }
  .map-stage { grid-template-rows: 260px auto; }
  .map-wrap { padding: 0.6rem 0.6rem 0.2rem; }
  .net-side { padding: 0.5rem 0.9rem 0.8rem; gap: 0.6rem; }
  .ticket { padding: 0.55rem 0.7rem; }
  .ticket b { display: none; }
  .ticket em { margin-top: 0; }
}

/* demo v4: phones are ONE column — map on top, ticket + KPIs below (overrides the desktop grid above) */
@media (max-width: 560px) {
  .map-stage { grid-template-columns: 1fr; grid-template-rows: 250px auto; }
  .map-wrap { height: 250px; width: 100%; padding: 0.5rem 0.6rem 0; }
  .eu-map { height: 100%; width: auto; max-width: 100%; }
  .net-side { padding: 0.5rem 0.9rem 0.8rem; }
  .net-side .demo-kpis { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) { .demo-stage { height: 480px; } .map-stage { grid-template-rows: 240px auto; } .map-wrap { height: 240px; } }

/* demo bar without the preview tag: crumb sits next to the dots */
.console--demo .console-bar { justify-content: flex-start; gap: 0.9rem; }

.console--demo .crumb b { color: var(--text-dim); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.64rem; }

/* ===== running screen: live throughput sparkline + per-GPU utilisation ===== */
.s-running .metrics { grid-template-columns: repeat(3, 1fr); }
.live { display: grid; gap: 0.5rem; padding: 0.75rem 0.85rem 0.6rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.live.in { opacity: 1; transform: none; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.live-head b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); text-transform: none; font-variant-numeric: tabular-nums; }
.live-head b small { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-left: 0.3rem; font-weight: 400; }
.spark { width: 100%; height: 64px; display: block; overflow: visible; }
.spark .area { fill: url(#sparkfill); }
.spark .line { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gpus { display: grid; grid-auto-flow: column; gap: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--line-soft); }
.gpu-bar { display: grid; gap: 0.25rem; }
.gpu-bar span { font-family: var(--font-mono); font-size: 0.56rem; color: var(--faint); letter-spacing: 0.06em; display: flex; justify-content: space-between; }
.gpu-bar span b { color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.gpu-bar i { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.gpu-bar i::after { content: ""; display: block; height: 100%; width: var(--u, 0%); background: linear-gradient(90deg, var(--acc-deep), var(--acc)); transition: width 0.6s var(--ease); }
.s-running .demo-meter { margin-top: 0; padding-top: 0.6rem; }
@media (max-width: 560px) { .s-running .metrics { grid-template-columns: 1fr 1fr; } .gpus { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); } .spark { height: 52px; } }

/* ===== visual system: faint grid in the closing (as in the hero) + corner crosses on key containers ===== */
.closing::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 20%, transparent 80%);
  mask-image: radial-gradient(75% 70% at 50% 45%, #000 20%, transparent 80%);
}
.form-page.closing::before { -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 20%, transparent 85%); mask-image: radial-gradient(90% 80% at 50% 50%, #000 20%, transparent 85%); }

/* ===== hero frame wrapper (radii restored to the base values) ===== */
.frame { position: relative; }
.hero--split .frame { animation: heroIn 0.9s var(--ease) 0.3s both; }
.hero--split .console { animation: none; }
@media (max-width: 980px) { .hero--split .frame { max-width: 680px; margin: 0 auto; width: 100%; } }

/* ===== how it works: code samples aligned at the foot of each step ===== */
.steps--4 .step { display: flex; flex-direction: column; }
.steps--4 .step p { flex: 1; }
.steps--4 .step-code { margin-top: 1rem; }

/* ===== GPU table, cleaner: no status column, display-face prices, compact rows ===== */
.gpu-table th, .gpu-table td { padding: 0.85rem 1.2rem; }
.gpu-table th { background: transparent; border-bottom: 1px solid var(--line); }
.gpu-table .gpu { font-size: 1rem; }
.gpu-table .gpu small { margin-top: 0.1rem; }
.gpu-table .fit { font-size: 0.88rem; max-width: 34ch; }
.gpu-table .price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.gpu-table .price .from { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 0.35rem; }
.gpu-table .price small:not(.from) { font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); margin-left: 0.15rem; }
.gpu-table td:last-child { text-align: right; }
.gpu-table .ask { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); border: 1px solid var(--line); border-radius: 3px; padding: 0.4rem 0.7rem; transition: color 0.2s, border-color 0.2s; }
.gpu-table .ask:hover { color: var(--acc); border-color: var(--acc); }
.gpu-table tbody tr:hover { background: transparent; }
.gpu-table tbody tr:hover .gpu { color: var(--acc); }

/* ===== typographic logo: lowercase mono wordmark, no symbol ===== */
.brand { gap: 0; }
.brand-word { font-family: var(--font-mono); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.04em; color: var(--text); line-height: 1; padding: 0.15rem 0; }
.footer-brand .brand-word { font-size: 1.1rem; }
.footer-brand .brand-word::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .brand-word::after { animation: none; } }

/* ===== atmospheric background: dark cumulus in EU blue (brand-coloured, low contrast) ===== */
.hero--split::before { opacity: 0.7; }
.hero--split .hero-inner { position: relative; z-index: 2; }
.closing .wrap { position: relative; z-index: 2; }

/* ===== section 01: the brand object (node cluster) + a slim supply → you-get strip ===== */
.nodes { margin: 0; position: relative; }
.nodes img { display: block; width: 100%; height: auto; mix-blend-mode: screen; border-radius: 14px; }
.nodes figcaption { margin-top: 0.9rem; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }
.grid-story { align-items: center; }
.plug--strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.plug--strip .plug-row { border-top: none; border-left: 1px solid var(--line-soft); padding: 1rem 1.3rem; }
.plug--strip .plug-row:first-child { border-left: none; }
@media (max-width: 900px) { .plug--strip { grid-template-columns: 1fr; } .plug--strip .plug-row { border-left: none; border-top: 1px solid var(--line-soft); } .plug--strip .plug-row:first-child { border-top: none; } }

/* map pulses in the halo purple, not white */
.eu-map .pulse { fill: rgb(var(--halo-rgb)); opacity: 0.95; filter: drop-shadow(0 0 2px rgba(var(--halo-rgb),0.9)); }

/* clouds only in the closing */
.hero--split::before { opacity: 1; }

/* map pulses: light tint of the palette blue (no extra colour) */
.eu-map .pulse { fill: color-mix(in srgb, var(--acc) 45%, white); opacity: 0.95; filter: drop-shadow(0 0 2px rgba(var(--acc-rgb),0.9)); }

/* live panel: fixed widths so changing digits never reflow or flicker */
.live-head b { font-variant-numeric: tabular-nums; min-width: 7.5ch; text-align: right; display: inline-block; }
.live-head b small { display: inline-block; min-width: 5.5ch; text-align: left; }
.gpu-bar span { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem; align-items: baseline; white-space: nowrap; }
.gpu-bar span b { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.gpus { gap: 0.55rem; }
@media (max-width: 980px) { .gpu-bar span { grid-template-columns: 1fr; gap: 0; } .gpu-bar span b { text-align: left; } }

/* node image: real alpha, no blend mode (blend + reveal fade showed a black block) */
.nodes img { mix-blend-mode: normal; border-radius: 0; }

/* ===== section 01: single text column (kicker, title, copy) + centred image ===== */
.grid-story--tight { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; margin-top: 0; }
.grid-story--tight .kicker { margin-bottom: 1.2rem; }
.grid-story--tight .h-sec { margin-bottom: 1.4rem; }
.grid-story--tight .lead { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); }
.grid-story--tight .lead + p { margin-top: 1rem; }
.grid-story--tight .nodes { max-width: 540px; margin: 0 auto; width: 100%; }
@media (max-width: 900px) { .grid-story--tight { grid-template-columns: 1fr; gap: 1.5rem; } .grid-story--tight .nodes { max-width: 420px; } }

/* ===== assets across the page (kept light) ===== */
.lattice-bg { position: absolute; right: -6%; top: 6%; width: 62%; max-width: 900px; aspect-ratio: 3 / 2; background: url("assets/img/lattice.webp") center / contain no-repeat; opacity: 0.5; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(70% 70% at 60% 50%, #000 40%, transparent 100%); }
#trust .wrap { position: relative; z-index: 1; }
.form-art { display: block; width: min(100%, 420px); height: auto; margin: 0 0 1.4rem -1rem; }
@media (max-width: 900px) { .lattice-bg { width: 90%; right: -20%; top: 0; opacity: 0.35; } .form-art { width: min(100%, 320px); margin-left: 0; } }

/* tiles have generous empty margins: let the figure run larger */
.grid-story--tight .nodes { max-width: 640px; transform: scale(1.12); transform-origin: center; }
@media (max-width: 900px) { .grid-story--tight .nodes { transform: none; } }

/* ===== icons (Lucide, stroke 1.8) ===== */
.step-ic, .plan-ic, .profile-ic, .fact-ic, .ready-ic { display: block; width: 22px; height: 22px; color: var(--acc); }
.step-ic svg, .plan-ic svg, .profile-ic svg, .fact-ic svg, .ready-ic svg { width: 100%; height: 100%; }
.step-ic { margin: 0.9rem 0 0.2rem; }
.step .step-n + .step-ic + h3 { margin-top: 0.5rem; }
.plan-ic { margin-bottom: 0.9rem; }
.profile-ic { margin-bottom: 1rem; }
.fact-ic { margin-bottom: 0.9rem; }

/* ===== readiness grid (replaces today / in progress / roadmap) ===== */
.ready { margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.ready-item { background: var(--bg-2); padding: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); display: grid; gap: 0.5rem; align-content: start; transition: background 0.25s; }
.ready-item:hover { background: var(--surface); }
.ready-ic { margin-bottom: 0.3rem; }
.ready-item b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--text); }
.ready-item p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 900px) { .ready { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ready { grid-template-columns: 1fr; } }

/* lattice: centred band behind the trust header, fading downward */
.lattice-bg { right: auto; left: 50%; top: -4%; width: 92%; max-width: 1200px; transform: translateX(-50%); opacity: 0.32;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
@media (max-width: 900px) { .lattice-bg { width: 140%; opacity: 0.25; } }

/* steps: number + icon + title is enough; the tag repeated the title */
.steps--4 .step-tag { display: none; }
.steps--4 .step h3 { margin-bottom: 0.7rem; }

/* network: the three site types carry their own object beside the copy (no backgrounds behind text) */
.sites li { grid-template-columns: 112px 1fr; align-items: center; gap: 1.2rem; padding: 1rem 0; }
.site-art { width: 112px; height: 112px; object-fit: contain; display: block; }
.lattice-bg { display: none; }
@media (max-width: 560px) { .sites li { grid-template-columns: 84px 1fr; } .site-art { width: 84px; height: 84px; } }

/* small site objects need more light than the large ones */
.site-art { filter: brightness(1.85) saturate(1.15) drop-shadow(0 6px 14px rgba(var(--acc-rgb),0.35)); }
.sites li { grid-template-columns: 124px 1fr; }
.site-art { width: 124px; height: 124px; }

/* network list back to line icons */
.sites li { grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.2rem 0; align-items: start; }

/* demo step bars fill with the progress of the current step */
.demo-steps i { position: relative; overflow: hidden; background: var(--line); }
.demo-steps i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--acc); }
.demo-steps i.done::after { width: 100%; }
.demo-steps i.cur::after { width: 100%; transition: width var(--dur, 3s) linear; }
.demo-steps i.on { background: var(--line); }

/* metric tiles: one-line values, equal height */
.metric b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.98rem; }
.metric span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-running .metrics { align-items: stretch; }



/* ===== brand: HAL's eye in our palette ===== */
.brand { gap: 0.55rem; }
.brand-eye { width: 24px; height: 24px; flex: none; color: var(--acc); }
.footer-brand .brand-eye { width: 20px; height: 20px; }
.nav .brand-word { font-size: 1.4rem; letter-spacing: -0.035em; }
.nodes img.hub { width: 100%; max-width: 560px; margin: 0 auto; }
.grid-story--tight .nodes { transform: none; }
.step .step-n + h3 { margin-top: 0.7rem; }

/* icons only in the readiness grid */
.sites li { grid-template-columns: 1fr; gap: 0; }

/* section 01 lens + for-line */
.nodes img.eye { width: 100%; max-width: 440px; margin: 0 auto; display: block; }
@media (max-width: 900px) { .nodes img.eye { max-width: 300px; } }
.for-line { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--text-dim); line-height: 1.55; }
.for-line i { font-style: normal; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc); margin-right: 0.5rem; }
/* plans, compact */
.plan p { flex: none; }
/* checks without icons */
.checks li { padding-left: 1.4rem; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 9px; height: 5px; border-left: 1.8px solid var(--acc); border-bottom: 1.8px solid var(--acc); transform: rotate(-45deg); }

/* fewer cards: plans and checks as open columns, readiness as a hairline grid */
.plans { gap: 0; border-top: 1px solid var(--line); }
.plan { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 1.6rem 1.2rem 0.4rem; }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan:hover { transform: none; }
@media (max-width: 1000px) { .plan { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); } }
.checks { background: transparent; border: 0; border-radius: 0; padding: 0; }
.ready { border-radius: 0; border-left: 0; border-right: 0; }
.ready-item { background: var(--bg); }
.ready-item:hover { background: var(--bg); }
/* network: vetted figure */
.vetted { margin: 0; text-align: center; }
.vetted img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.vetted figcaption { margin-top: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); line-height: 1.6; }
/* font review: ?font=geist */
[data-font="geist"] { --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; }
[data-font="geist"] .h-hero, [data-font="geist"] .h-sec { letter-spacing: -0.035em; }


/* GPU table: memory bar under the GB figure */
.mem { white-space: nowrap; }
.mem i { display: block; width: 64px; height: 2px; background: var(--line); margin-top: 0.5rem; border-radius: 1px; overflow: hidden; }
.mem i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--acc); }


/* rhythm: alternate panels 02/04/06, tighter vertical padding */
.section { padding: clamp(5rem, 3.5rem + 5vw, 8rem) 0; }

/* demo: hal's eye scans the network */
.net-side .demo-hint { display: flex; align-items: flex-start; gap: 0.5rem; }
.s-network .demo-hint { opacity: 1; }

.network { align-items: center; }
.vetted { margin-top: 0; }

@media (max-width: 900px) {
  .network { grid-template-columns: 1fr; gap: 2rem; }
  .vetted img { max-width: 440px; }
  .vetted figcaption { white-space: normal; text-align: center; }
}

/* hal's eye inside the demo: same mark as the logo */
.hal-eye { flex: none; width: 12px; height: 12px; color: var(--acc); display: block; }
.net-side .demo-hint .hal-eye { margin-top: 0.2em; }
.hal-eye .core { transform-origin: 16px 16px; transform-box: view-box; }
.s-network.scanning .hal-eye .core { animation: eyeScan 1.1s ease-in-out infinite; }
.s-running .demo-meter .hal-eye .core { animation: eyeScan 1.1s ease-in-out infinite; }
@keyframes eyeScan { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.45; } }
@keyframes eyeBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .hal-eye .core { animation: none !important; } }

/* brand eye: the core follows the cursor while hovering the nav */
.brand-eye .core-dot { transition: transform 0.25s var(--ease); }

/* closing: same grid + bicolour halos as the hero, centred copy */
#access.closing { padding: clamp(5rem, 4rem + 4vw, 8rem) 0; }
#access .closing-h { margin-bottom: 1.8rem; max-width: 22ch; }
#access .closing-sub { margin-bottom: 2.6rem; max-width: 56ch; }

/* demo hint: reserve three lines so the KPI block never jumps */
.net-side .demo-hint { min-height: 6.3em; align-items: flex-start; }

/* closing halos, quieter */

/* form pages: the lens as art, edges dissolved so the grid shows around it */

/* form pages: no exits. Logo + language only in the nav; footer keeps just the legal line */
body:has(.form-page) .nav-menu, body:has(.form-page) .nav-cta, body:has(.form-page) .burger { display: none !important; }
body:has(.form-page) .footer-row--top, body:has(.form-page) .footer-tag { display: none; }

/* closing background = hero background (same halos, same grid, same blend) */
#access.closing::before {
  display: block; -webkit-mask-image: none; mask-image: none; mix-blend-mode: screen;
  background-image:
    radial-gradient(42% 46% at 8% 0%, rgba(var(--acc-rgb),0.26), rgba(var(--acc-rgb),0.06) 45%, transparent 68%),
    radial-gradient(38% 42% at 96% 18%, rgba(var(--halo-rgb),0.16), rgba(var(--halo-rgb),0.04) 45%, transparent 70%),
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
#access.closing::after { display: block; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: normal; background: radial-gradient(46% 34% at 50% 44%, rgba(8,9,12,0.62), transparent 72%), linear-gradient(180deg, transparent 64%, var(--bg) 100%); }

/* form pages: balance on desktop */
.form-page .wrap { align-items: start; }
.form-page.closing::after { opacity: 0.55; }
/* form pages: mobile conversion flow */
.cf-toggle { display: none; }
@media (max-width: 700px) {
  .form-art, .form-side ul { display: none; }
  .form-side h1 { margin-top: 0; }
  .form-side p.switch { display: none; }
  .form-page .wrap { gap: 1.6rem; }
  .cf-more { display: none; }
  .contact-form.cf-open .cf-more { display: block; }
  .contact-form.cf-open .cf-row.cf-more { display: grid; }
  .cf-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0; margin: -0.2rem 0 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--acc); cursor: pointer; }
  .cf-toggle i { font-style: normal; color: var(--muted); }
  .cf-toggle::before { content: "+"; font-size: 1rem; line-height: 1; }
  .contact-form.cf-open .cf-toggle::before { content: "–"; }
  .form-page::after { display: none; }
  .cf-actions .btn { width: 100%; justify-content: center; }
}

/* form validation */
.cf-field.is-invalid input, .cf-field.is-invalid select, .cf-field.is-invalid textarea { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.18); }
.cf-field { position: relative; }
.cf-err { display: none; position: absolute; top: 0; right: 0; margin: 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--acc); white-space: nowrap; line-height: inherit; }
.cf-field.is-invalid .cf-err, .cf-consent.is-invalid .cf-err { display: block; }
.cf-consent { position: relative; flex-wrap: nowrap; }
.cf-consent span { flex: 1 1 auto; }
.cf-consent .cf-err { top: auto; bottom: 100%; right: 0; margin-bottom: 0.3rem; }
.cf-consent.is-invalid input { outline: 2px solid var(--acc); outline-offset: 1px; border-radius: 3px; }

/* form side: the eye speaks — media object, eye in a left gutter, text column aligned to one edge */
@media (min-width: 901px) { .form-page .wrap { grid-template-columns: 1fr 1fr; } }
.form-side:has(.form-art--eye) { display: grid; grid-template-columns: 140px 1fr; column-gap: 1.4rem; align-items: start; }
.form-side:has(.form-art--eye) > * { grid-column: 2; }
.form-side .form-art--eye { grid-column: 1; grid-row: 1 / span 2; width: 168px; max-width: none; height: auto; aspect-ratio: 1 / 1; justify-self: start; align-self: start; margin: -0.6rem 0 0 -1.4rem; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 66%); mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 66%); }
@media (max-width: 1100px) { .form-side:has(.form-art--eye) { grid-template-columns: 108px 1fr; } .form-side .form-art--eye { width: 128px; margin: -1rem 0 0 -1rem; } }

/* trust: three questions, three answers, proofs under each */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 1rem + 2vw, 3rem); margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); }
.pillar { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.pillar-q { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.9rem; }
.pillar h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.pillar p { color: var(--text-dim); font-size: 0.97rem; line-height: 1.6; min-height: 3.2em; }
.proof { list-style: none; margin-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.proof li { position: relative; padding: 0.6rem 0 0.6rem 1.4rem; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; }
.proof li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 9px; height: 5px; border-left: 1.8px solid var(--acc); border-bottom: 1.8px solid var(--acc); transform: rotate(-45deg); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; gap: 2rem; } .pillar p { min-height: 0; } }
@media (max-width: 700px) { .form-side:has(.form-art--eye) { display: block; } }

.checks-cta { justify-content: space-between; }
.checks-cta span { flex: 1 1 auto; }
@media (max-width: 560px) { .checks-cta { flex-direction: column; align-items: flex-start; } }

/* form side starts at the card's top edge */
@media (min-width: 901px) { .form-side { padding-top: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); } }


/* language swap: no flash. Browser view transition where supported, fade fallback everywhere */
@view-transition { navigation: auto; }
body { transition: opacity 0.22s ease; }
html.swapping body, html.leaving body { opacity: 0; }
html.leaving body { transition-duration: 0.14s; }

/* hero grid snaps to the demo console's top-left edge (set by app.js) */
.hero--split::before { background-position: 0 0, 0 0, var(--grid-x, 0px) var(--grid-y, 0px), var(--grid-x, 0px) var(--grid-y, 0px); }

/* mobile: running metrics in one row of three (no orphan tile); section 01 eye opens the section */
@media (max-width: 560px) {
  .s-running .metrics { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .s-running .metric { padding: 0.55rem 0.6rem; }
  .s-running .metric b { font-size: 0.82rem; }
  .s-running .metric span { font-size: 0.56rem; letter-spacing: 0.06em; }
}
@media (max-width: 900px) {
  .grid-story--tight .nodes { max-width: none; }
  .nodes img.eye { max-width: 150px; margin: 0.4rem auto 0; }
}

/* mobile: GPU table becomes stacked cards, no horizontal scroll */
@media (max-width: 700px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .gpu-table { min-width: 0; display: block; }
  .gpu-table thead { display: none; }
  .gpu-table tbody { display: block; }
  .gpu-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
  .gpu-table tbody tr:hover { background: transparent; }
  .gpu-table td { display: block; padding: 0; border: 0; }
  .gpu-table td.gpu { grid-column: 1; grid-row: 1; }
  .gpu-table td.price { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .gpu-table td.mem { grid-column: 1; grid-row: 2; }
  .gpu-table td.fit { grid-column: 1 / -1; grid-row: 3; color: var(--muted); font-size: 0.9rem; }
  .gpu-table td:last-child { grid-column: 2; grid-row: 2; text-align: right; }
  .mem i { width: 56px; margin-top: 0.35rem; }
  /* operator CTA centred */
  .checks-cta { align-items: center; text-align: center; }
  .checks-cta span { order: -1; }
  .checks-cta .btn { width: 100%; justify-content: center; }
}

/* steps: no hover dot marker (it drifted out of line with the number on mobile) */
.steps--4 .step::before { display: none; }

/* footer: two aligned rows */
.footer { padding: 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.footer-row--top { padding-top: 1.7rem; padding-bottom: 0.55rem; }
.footer-row--bottom { padding-top: 0.55rem; padding-bottom: 1.7rem; border-top: 0; }
.footer-brand .brand { margin: 0; }
.footer-links { display: flex; gap: 1.6rem; }
.footer-links a { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); transition: color 0.2s; }
.footer-links a:hover { color: var(--acc); }
.footer-tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 0; }
.footer-meta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.footer-meta small { color: var(--faint); font-size: 0.78rem; }
@media (max-width: 560px) {
  .footer-row { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .footer-meta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* network checks: compact 2-column grid, no long dividers */
.network { align-items: start; }
.checks h3 { margin-bottom: 1rem; }
.checks ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.8rem; }
.checks li { border: 0; padding: 0.3rem 0 0.3rem 1.4rem; font-size: 0.92rem; }
.checks li::before { top: 0.75rem; }
.checks-cta { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
@media (max-width: 560px) { .checks ul { grid-template-columns: 1fr; } }

.footer { background: var(--bg); }
@media (max-width: 560px) { .footer-row--top { padding-bottom: 0.9rem; } .footer-row--bottom { padding-top: 0.9rem; } }

/* closing = hero background: grid + bicolour halos, centred copy */
#access.closing { padding: clamp(6rem, 5rem + 5vw, 10rem) 0; text-align: center; }
#access .closing-h { margin: 0 auto 1.8rem; max-width: 16ch; }
#access .closing-sub { margin: 0 auto 2.6rem; max-width: 50ch; }
#access .closing-actions { justify-content: center; margin-bottom: 0; }

/* form pages: quiet background, left column stretched to the card's height */
.form-page.closing::before { display: none; }
.form-page.closing::after { opacity: 0.4; }
@media (min-width: 901px) {
  .form-page .wrap { align-items: stretch; }
  .form-side { display: flex; flex-direction: column; padding-top: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); padding-bottom: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
  .form-side ul { margin-top: auto; }
}
.form-side ul { border-top: 0; margin-top: 2rem; }
.form-side li { border-bottom: 0; padding: 0.45rem 0; }
.form-side h1 { margin-bottom: 1rem; }

.cf-consent a { white-space: nowrap; }
.cf-consent span { text-wrap: pretty; }

/* nav: constant height so the logo never moves between pages */
.nav { min-height: 75px; }
@media (min-width: 901px) { .form-side ul { margin-top: auto; } }

/* network KPIs: air between rule, number and label */
.net-side .demo-kpis { gap: 1.1rem 1.4rem; }
.net-side .demo-kpis > div { padding-top: 0.75rem; padding-bottom: 0.15rem; }
.net-side .demo-kpis b { line-height: 1.1; }
.net-side .demo-kpis span { margin-top: 0.4rem; }
@media (max-width: 900px) { .net-side .demo-kpis { gap: 0.7rem 1rem; } .net-side .demo-kpis > div { padding-top: 0.55rem; } }

/* network screen: dot rows aligned with ticket top and hint bottom */
@media (min-width: 901px) { .net-side { padding-top: 2.3rem; padding-bottom: 2.3rem; } }

/* validation message takes the label's place (no overlap in narrow columns) */
.cf-field.is-invalid > label { visibility: hidden; }
.cf-field .cf-err { left: 0; right: auto; white-space: normal; }
.cf-consent .cf-err { left: auto; right: 0; }

/* form side: what happens next (replaces the check list) */
@media (min-width: 901px) { .form-side { justify-content: center; padding-top: 0; padding-bottom: 0; } .form-side ul { margin-top: 0; } }
.next-k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); margin: 2.4rem 0 0.9rem; }
.next { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.next li { counter-increment: step; position: relative; padding: 0.55rem 0 0.55rem 2.6rem; color: var(--text); font-size: 1rem; line-height: 1.5; }
.next li::before { content: "0" counter(step); position: absolute; left: 0; top: 0.72rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.form-note { margin-top: 1.6rem; font-size: 0.88rem; color: var(--muted); line-height: 1.55; text-wrap: balance; }
@media (max-width: 700px) { .next-k, .next, .form-note { display: none; } }

/* hal's reply line: avatar + streamed text, between the stage and the step bar */
.hal-line { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem 0.8rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; color: var(--text-dim); min-height: calc(0.74rem * 1.5 * 2 + 1.55rem); }
.hal-line .hal-eye { flex: none; width: 14px; height: 14px; margin-top: 0.12em; color: var(--acc); }
.hal-line.typing .hal-eye .core { animation: eyeScan 1.1s ease-in-out infinite; }
.hal-line.typing .hal-text::after { content: ""; display: inline-block; width: 0.45em; height: 0.95em; margin-left: 0.2em; vertical-align: -0.12em; background: var(--acc); animation: blink 0.9s steps(1) infinite; }
@media (max-width: 560px) { .hal-line { font-size: 0.7rem; padding: 0.6rem 0.8rem 0.7rem; } }

/* one hal: the meter keeps its label, the eye lives in the reply line */
.demo-meter .k .hal-eye { display: none; }

/* hal: one line. Thinking is a single beat: anticipation, look away, hold, snap back as the reply starts */
@media (min-width: 901px) { .hal-line { min-height: calc(0.74rem * 1.5 + 1.55rem); } .hal-line .hal-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.hal-line .hal-eye .arc, .hal-line .hal-eye .core { transform-box: view-box; transform-origin: 16px 16px; }
.hal-line .hal-eye .arc { opacity: 0; }
.hal-line.thinking .hal-eye .core { animation: halThink 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1 both; }
.hal-line.thinking .hal-eye .arc { animation: halArc 0.6s ease-in-out 1 both; }
.hal-line.thinking .hal-eye circle:not(.arc):not(.core) { transition: opacity 0.3s; opacity: 0.45; }
.hal-line.typing .hal-eye .core { animation: halBreath 1s ease-in-out infinite; }
@keyframes halThink {
  0%   { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(0, 0) scale(0.82); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }   /* anticipation: focus */
  52%  { transform: translate(var(--tx, -3.2px), var(--ty, -2.4px)) scale(0.9); animation-timing-function: linear; }              /* look away, slow */
  72%  { transform: translate(var(--tx, -3.2px), var(--ty, -2.4px)) scale(0.9); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1.4); } /* hold */
  90%  { transform: translate(0.5px, 0.4px) scale(1.14); }                                                     /* snap back, overshoot */
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes halArc {
  0%   { opacity: 0; transform: rotate(-60deg); }
  25%  { opacity: 0.9; }
  75%  { opacity: 0.9; transform: rotate(150deg); }
  100% { opacity: 0; transform: rotate(220deg); }
}
@keyframes halBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .hal-line .hal-eye .arc, .hal-line .hal-eye .core { animation: none !important; } }

/* hal text: fade out while thinking instead of vanishing */
.hal-line .hal-text { transition: opacity 0.28s var(--ease); }
.hal-line.thinking .hal-text { opacity: 0; }

/* demo screens: cinematic handover — outgoing softens and recedes, incoming sharpens and rises, children stagger in */
.demo-screen { transform: translateY(12px) scale(0.985); filter: blur(5px); transition: opacity 0.55s var(--ease), transform 0.65s var(--ease), filter 0.55s var(--ease); will-change: opacity, transform, filter; }
.demo-screen.on { opacity: 1; transform: none; filter: blur(0); }
.demo-screen > * { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.5s var(--ease); }
.demo-screen.on > * { opacity: 1; transform: none; }
.demo-screen.on > *:nth-child(1) { transition-delay: 0.08s; }
.demo-screen.on > *:nth-child(2) { transition-delay: 0.16s; }
.demo-screen.on > *:nth-child(3) { transition-delay: 0.24s; }
.demo-screen.on > *:nth-child(4) { transition-delay: 0.32s; }
.demo-screen.on > *:nth-child(5) { transition-delay: 0.40s; }
.console-bar .crumb b { display: inline-block; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .demo-screen, .demo-screen > * { transition: none; filter: none; transform: none; } }

/* live panel never overflows the console: fluid GPU columns, compact labels when there are many */
.s-running, .live { min-width: 0; }
.live { overflow: hidden; }
.gpus { grid-auto-columns: minmax(0, 1fr); }
.gpu-bar { min-width: 0; }
.gpu-bar span { overflow: hidden; }
.gpus.many .gpu-bar span { grid-template-columns: 1fr; gap: 0; }
.gpus.many .gpu-bar span b { text-align: left; font-size: 0.56rem; }
@media (max-width: 560px) { .gpus.many { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); } }

/* hal's previous line dims when the screen changes, until the next reply */
.hal-line.quiet .hal-text { opacity: 0.4; }

/* hal scanning: while the sites answer, the eye sweeps like a radar (slow, continuous) */
.hal-line.scanning:not(.thinking) .hal-eye .arc { opacity: 0.85; animation: halRadar 1.4s linear infinite; }
.hal-line.scanning:not(.thinking):not(.typing) .hal-eye .core { animation: halBreath 1.4s ease-in-out infinite; }
@keyframes halRadar { to { transform: rotate(360deg); } }
.eu-map .site.answered .dot { transition: fill 0.25s, opacity 0.25s; }

/* form submission states */
.btn.is-sending { opacity: 0.75; cursor: progress; }
.cf-alert { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(var(--halo-rgb),0.45); border-radius: 8px; background: rgba(var(--halo-rgb),0.07); color: var(--text); font-size: 0.88rem; line-height: 1.5; }
.contact-form.is-done > *:not(.cf-done) { display: none !important; }
.cf-done { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1rem, 0.5rem + 2vw, 2rem) 0; animation: cfDone 0.5s var(--ease) both; }
.cf-done-eye { width: 44px; height: 44px; color: var(--acc); margin-bottom: 1.4rem; }
.cf-done-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 0.9rem; outline: none; }
.cf-done-p { color: var(--text-dim); font-size: 1.02rem; line-height: 1.6; max-width: 42ch; margin: 0 0 1.8rem; }
.cf-done-p b { color: var(--text); font-weight: 600; }
.cf-done-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@keyframes cfDone { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .cf-done-actions { width: 100%; } .cf-done-actions .btn { flex: 1 1 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cf-done { animation: none; } }

.contact-form.is-done { display: flex; align-items: center; }
.contact-form.is-done .cf-done { flex: 1; }