/* BYBR Video Editor — landing. Cada seção aplica os tokens de um dos 21 DESIGN.md
   (veja o comentário e o data-design de cada <section> no index.html). */

:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --gutter: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: #fff; font: 400 16px/1.6 var(--inter); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--mono); }
:focus-visible { outline: 2px solid #FDB813; outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.center { text-align: center; }
.label { font: 600 12px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.head { max-width: 720px; margin-bottom: 56px; }
.head.center { margin-left: auto; margin-right: auto; }
.head h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.04; font-weight: 500; letter-spacing: -0.02em; margin: 14px 0 16px; }
.head p:not(.label) { font-size: 18px; opacity: 0.75; }
section { position: relative; padding: 120px 0; overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #000; color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.2s, color 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn[aria-disabled="true"], .btn.is-off { opacity: 0.5; pointer-events: none; }

/* Revelação ao rolar (só com JS; sem JS tudo aparece) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ───────── Navegação ───────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(10, 8, 6, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, 0.08); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand b { font: 700 19px/1 "Rajdhani", var(--inter); letter-spacing: 0.06em; }
.brand small { font: 600 9px/1.4 var(--mono); letter-spacing: 0.28em; color: #FDB813; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font: 500 14px var(--inter); text-decoration: none; opacity: 0.85; }
.nav-links a:hover { opacity: 1; }
.nav-cta { font: 600 14px var(--inter); text-decoration: none; background: #E85D22; color: #000; padding: 10px 18px; border-radius: 9999px; }
.nav.solid .nav-cta { background: #F68B1F; color: #000; }

/* ───────── Objeto 3D (canvas fixo): acima dos fundos das seções, abaixo do conteúdo (.wrap) ───────── */
.morph { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.no-webgl .morph { display: none; }

/* ───────── 01 Lumina ───────── */
.s-lumina { background: #000; color: #F8F4EC; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 40px; }
.lumina-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 74% 48%, rgba(232, 93, 34, 0.38), transparent 70%), radial-gradient(ellipse 40% 30% at 10% 100%, rgba(201, 139, 90, 0.16), transparent 70%); }
.s-lumina::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(248, 244, 236, 0.07) 1px, transparent 1.2px); background-size: 6px 6px; mask-image: linear-gradient(90deg, #000 0%, transparent 55%); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.lumina-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 24px; }
.lumina-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 9999px; border: 1px solid #A8A19A55; background: rgba(248, 244, 236, 0.04); font: 500 13px "Instrument Sans", var(--inter); color: #F8F4EC; }
.lumina-pill span { font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: #E85D22; color: #000; border-radius: 9999px; padding: 3px 9px; }
.s-lumina h1 { font: 600 clamp(40px, 5.4vw, 78px)/1 "Instrument Sans", var(--inter); letter-spacing: -0.035em; margin: 26px 0 22px; }
.s-lumina h1 em { display: block; margin-top: 6px; font: italic 400 0.86em/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.02em; color: #E85D22; }
.lumina-lead { font: 400 20px/1.55 "Newsreader", Georgia, serif; max-width: 540px; color: #D9D2C5; }
.lumina-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn-orange { background: #E85D22; color: #000; }
.btn-orange:hover { background: #F06F35; box-shadow: 0 14px 40px -10px rgba(232, 93, 34, 0.8); }
.btn-line { border-color: #A8A19A88; color: #F8F4EC; }
.btn-line:hover { background: rgba(248, 244, 236, 0.07); }
.lumina-version { margin-top: 16px; font: 500 12px var(--mono); color: #A8A19A; letter-spacing: 0.04em; }
.lumina-object { position: relative; height: min(62vh, 560px); }
.lumina-object .tag { position: absolute; font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #F8F4EC; padding: 6px 10px; border: 1px solid #A8A19A55; border-radius: 8px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: floaty 6s ease-in-out infinite; }
.lumina-object .tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #E85D22; box-shadow: 0 0 8px #E85D22; vertical-align: 1px; }
.lumina-object .t1 { top: 8%; left: 2%; }
.lumina-object .t2 { top: 46%; right: -2%; animation-delay: -2s; }
.lumina-object .t3 { bottom: 6%; left: 14%; animation-delay: -4s; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.lumina-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.lumina-strip div { border-top: 1px solid #A8A19A44; padding-top: 14px; }
.lumina-strip b { display: block; font: 600 34px/1 "Instrument Sans", var(--inter); color: #E85D22; }
.lumina-strip span { font: 400 16px "Newsreader", serif; color: #D9D2C5; }

/* ───────── 02 Premium AI System ───────── */
.s-premium { background: #FFFFFF; color: #111827; }
.s-premium .label { color: #6366F1; }
.s-premium .head p:not(.label) { color: #4B5563; opacity: 1; }
.flow { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 48px; align-items: center; }
.flow-col { display: grid; gap: 28px; }
.flow-node { position: relative; display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 18px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -18px rgba(99, 102, 241, 0.35); transition: transform 0.4s var(--ease), border-color 0.3s; }
.flow-node:hover { transform: translateY(-3px); border-color: #818CF8; }
.flow-node b { display: block; font-weight: 600; }
.flow-node small { color: #4B5563; font-size: 14px; }
.flow-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #C7D2FE; color: #4338CA; font: 600 12px var(--mono); }
.flow-col:first-child .flow-node::after, .flow-col:last-child .flow-node::before { content: ""; position: absolute; top: 50%; width: 48px; border-top: 2px dashed #A5B4FC; animation: dash 1.2s linear infinite; }
.flow-col:first-child .flow-node::after { left: 100%; }
.flow-col:last-child .flow-node::before { right: 100%; }
@keyframes dash { to { border-color: #6366F1; } }
.flow-core { position: relative; display: grid; gap: 28px; justify-items: center; }
.core-ring { position: absolute; top: -20px; left: 50%; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(129, 140, 248, 0.32), transparent 65%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.7; } }
.core-card { position: relative; width: 100%; text-align: center; background: #111827; color: #fff; border-radius: 8px; padding: 28px 22px; box-shadow: 0 24px 60px -24px rgba(79, 70, 229, 0.7); }
.core-card .label { color: #A5B4FC; }
.core-card b { display: block; font-size: 22px; font-weight: 600; margin: 10px 0 4px; }
.core-card small { color: #C7D2FE; font: 400 12px var(--mono); }
.core-bars { display: flex; gap: 5px; justify-content: center; align-items: flex-end; height: 40px; margin-top: 18px; }
.core-bars i { width: 8px; border-radius: 2px; background: linear-gradient(#818CF8, #6366F1); animation: bar 1.6s ease-in-out infinite; }
.core-bars i:nth-child(1) { height: 40%; animation-delay: -0.2s; } .core-bars i:nth-child(2) { height: 70%; animation-delay: -0.5s; }
.core-bars i:nth-child(3) { height: 55%; animation-delay: -0.9s; } .core-bars i:nth-child(4) { height: 95%; animation-delay: -0.3s; }
.core-bars i:nth-child(5) { height: 60%; animation-delay: -1.1s; } .core-bars i:nth-child(6) { height: 80%; animation-delay: -0.7s; }
.core-bars i:nth-child(7) { height: 45%; animation-delay: -1.3s; }
@keyframes bar { 50% { transform: scaleY(0.45); } }
.core-bars i { transform-origin: bottom; }
.flow-node--below { width: 100%; }
.flow-node--below::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 28px; border-left: 2px dashed #A5B4FC; }

/* ───────── 03 Neural Architecture ───────── */
.s-neural { background: #050914; color: #fff; }
.s-neural .label { color: #3B82F6; }
.neural-mesh { position: absolute; inset: 0; background:
  radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.22), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.18), transparent 45%),
  linear-gradient(rgba(156, 163, 175, 0.06) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(90deg, rgba(156, 163, 175, 0.06) 1px, transparent 1px) 0 0 / 56px 56px; mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.neural-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(156, 163, 175, 0.25); border: 1px solid rgba(156, 163, 175, 0.25); border-radius: 8px; overflow: hidden; }
.neural-grid article { background: #050914; padding: 36px 30px 40px; transition: background 0.4s; }
.neural-grid article:hover { background: #0A1428; }
.neural-idx { font: 600 12px var(--mono); color: #3B82F6; }
.neural-grid h3 { font: 700 clamp(26px, 3vw, 34px)/1.05 var(--inter); letter-spacing: -0.01em; margin: 40px 0 16px; background: linear-gradient(180deg, #fff, #DBEAFE 60%, #3B82F6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neural-grid p { color: #A1A1AA; font-family: ui-sans-serif, system-ui, sans-serif; }

/* ───────── 04 Digital Experiences ───────── */
.s-digital { background: #FFFFFF; color: #111827; }
.s-digital .label { color: #8B5CF6; }
.s-digital .head p:not(.label) { color: #4B5563; opacity: 1; }
.grad { background: linear-gradient(90deg, #8B5CF6, #D946EF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento-card { position: relative; border: 1px solid #CBD5E1; border-radius: 16px; padding: 24px; background: #fff; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s; }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(139, 92, 246, 0.55); border-color: #C4B5FD; }
.bento-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.bento-card p { color: #4B5563; font-size: 15px; }
.bento-lg { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, #F5F3FF, #FDF4FF); }
.bento-lg h3 { font-size: 26px; }
.bento-wide { grid-column: span 2; }
.wave { display: flex; gap: 6px; align-items: center; height: 120px; margin-top: 36px; }
.wave-seg { flex: 3; height: 70%; border-radius: 10px; background: repeating-linear-gradient(90deg, #8B5CF6 0 3px, transparent 3px 7px); mask-image: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%); -webkit-mask-image: linear-gradient(transparent 10%, #000 30%, #000 70%, transparent 90%); }
.wave-cut { flex: 1; height: 100%; border-radius: 10px; border: 2px dashed #D946EF; background: rgba(217, 70, 239, 0.06); }
.caption-demo { margin-top: 18px; font: 700 18px var(--inter); color: #111827 !important; }
.caption-demo mark { background: linear-gradient(90deg, #8B5CF6, #D946EF); color: #fff; padding: 0 6px; border-radius: 6px; }

/* ───────── 05 Lumio ───────── */
.s-lumio { background: #030303; color: #fff; }
.lumio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.lumio-head .label { color: #FF007F; }
.lumio-head h2 { font: 500 clamp(36px, 5.5vw, 68px)/1 var(--inter); letter-spacing: -0.03em; text-align: right; }
.lumio-list li { position: relative; display: grid; grid-template-columns: 90px 1fr 1.4fr 190px; gap: 24px; align-items: baseline; padding: 32px 8px; border-top: 1px solid #27272A; isolation: isolate; }
.lumio-list li:last-child { border-bottom: 1px solid #27272A; }
.lumio-list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #2B00FF, #FF007F); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); border-radius: 8px; }
.lumio-list li:hover::before { transform: scaleY(1); }
.lumio-n { font: 600 14px var(--mono); color: #FF007F; transition: color 0.3s; }
.lumio-list li:hover .lumio-n { color: #fff; }
.lumio-list h3 { font: 500 clamp(24px, 3vw, 36px)/1.1 var(--inter); letter-spacing: -0.02em; }
.lumio-list p { color: #A1A1AA; transition: color 0.3s; }
.lumio-list li:hover p { color: #fff; }
.lumio-tag { justify-self: end; font: 500 12px var(--mono); color: #A1A1AA; border: 1px solid #27272A; border-radius: 9999px; padding: 6px 12px; white-space: nowrap; }

/* ───────── 06 Structural Resonance ───────── */
.s-structural { background: #020412; color: #fff; }
.s-structural::before { content: ""; position: absolute; left: 50%; top: 120px; width: 900px; height: 900px; margin-left: -450px; background: radial-gradient(circle, rgba(5, 11, 54, 0.95), transparent 60%); }
.s-structural .label { color: #C8B6CF; }
.mock { position: relative; max-width: 1040px; margin: 0 auto; border: 1px solid #27272A; border-radius: 15px; background: #0B0D16; overflow: hidden; box-shadow: 0 50px 120px -40px rgba(30, 50, 200, 0.45); font-size: 12px; }
.mock-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #1E2030; }
.mock-dots { display: flex; gap: 6px; } .mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2A2D40; }
.mock-menu { color: #A1A1AA; white-space: nowrap; }
.mock-search { flex: 1; color: #6B6F85; border: 1px solid #23263A; border-radius: 8px; padding: 6px 10px; }
.mock-export { background: linear-gradient(90deg, #F68B1F, #FDB813); color: #000; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.mock-body { display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; min-height: 340px; }
.mock-panel { padding: 14px; border-right: 1px solid #1E2030; }
.mock-right { border-right: 0; border-left: 1px solid #1E2030; }
.mock-label { display: block; font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #6B6F85; margin-bottom: 12px; }
.mock-left p { font-size: 13px; line-height: 1.8; color: #E5E7EB; }
.mock-left p.dim { color: #6B6F85; margin-top: 8px; }
.mock-left em { font: 400 11px var(--mono); color: #F68B1F; font-style: normal; margin-right: 6px; }
.mock-left mark { background: #F68B1F; color: #000; border-radius: 4px; padding: 0 4px; }
.mock-monitor { display: grid; place-items: center; gap: 8px; padding: 16px; background: #07080F; }
.mock-phone { position: relative; width: 150px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #3D2E2A, #6D4F45 55%, #2A1F1C); }
.mock-zone { position: absolute; left: 6%; right: 20%; top: 66%; height: 12%; border: 1px solid #FDB813; border-radius: 3px; }
.mock-subject { position: absolute; left: 50%; bottom: 0; width: 70%; height: 62%; margin-left: -35%; background: radial-gradient(circle at 50% 22%, #C79A82 0 16%, transparent 17%), radial-gradient(ellipse at 50% 100%, #1D1D22 0 46%, transparent 47%); }
.mock-caption { position: absolute; left: 0; right: 0; top: 69%; text-align: center; font: 800 11px var(--inter); color: #fff; text-shadow: 0 1px 2px #000; }
.mock-caption b { color: #FDB813; }
.mock-time { font: 500 11px var(--mono); color: #F68B1F; }
.mock-right dl { margin: 0; display: grid; gap: 10px; }
.mock-right dl div { display: flex; justify-content: space-between; gap: 8px; }
.mock-right dt { color: #A1A1AA; } .mock-right dd { margin: 0; font-family: var(--mono); color: #60A5FA; }
.mock-timeline { position: relative; border-top: 1px solid #1E2030; padding: 10px 14px 14px 14px; display: grid; gap: 6px; }
.mock-track { display: flex; gap: 4px; height: 24px; }
.clip { display: flex; align-items: center; padding: 0 8px; border-radius: 5px; font-size: 10px; white-space: nowrap; overflow: hidden; }
.c-text { margin-left: 30%; width: 18%; background: #5B3A12; border: 1px solid #F68B1F; }
.c-cap { width: 72%; margin-left: 2%; background: #0F3B3A; border: 1px solid #14B8A6; }
.c-vid { flex: 1; background: #1E2A4A; border: 1px solid #3B82F6; }
.c-sfx { width: 9%; background: #1F3A1F; border: 1px solid #22C55E; }
.c-sfx:first-child { margin-left: 28%; } .c-sfx + .c-sfx { margin-left: 36%; }
.mock-playhead { position: absolute; top: 0; bottom: 0; left: 40%; width: 2px; background: #F68B1F; animation: play 9s linear infinite; z-index: 1; }
@keyframes play { from { left: 4%; } to { left: 96%; } }
.struct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1040px; margin: 24px auto 0; }
.struct-cards article { background: #F0E6F2; color: #020412; border-radius: 15px; padding: 28px; }
.struct-cards .label { color: #050B36; opacity: 0.6; }
.struct-cards h3 { font-size: 22px; font-weight: 600; margin: 10px 0 8px; }
.struct-cards p { color: #3A3550; }

/* ───────── 07 Spatial Editorial ───────── */
.s-spatial { background: #020617; color: #fff; }
.spatial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.s-spatial .label { color: #E8B7BC; }
.spatial-text h2 { font: 500 clamp(34px, 4.6vw, 56px)/1.04 var(--inter); letter-spacing: -0.02em; margin: 14px 0 22px; }
.spatial-text p:not(.label) { font: 400 19px/1.65 "Playfair Display", Georgia, serif; color: #D1D4BD; }
.spatial-text em { color: #E8B7BC; }
.spatial-formula { margin-top: 24px !important; font: 400 14px/1.6 var(--mono) !important; color: #fff !important; border-left: 2px solid #3B82F6; padding-left: 14px; }
.spatial-link { display: inline-block; margin-top: 28px; padding: 12px 22px; border-radius: 16px; background: #3B82F6; color: #fff; text-decoration: none; font-weight: 600; }
.spatial-panels { display: grid; gap: 16px; }
.spatial-panel { margin: 0; background: #D1D4BD; color: #020617; border-radius: 1px; padding: 18px 20px 14px; }
.spatial-panel figcaption { display: flex; justify-content: space-between; gap: 12px; font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.spatial-panel svg { width: 100%; height: auto; max-height: 230px; overflow: visible; }
.spatial-panel .grid-l { stroke: rgba(2, 6, 23, 0.18); stroke-width: 1; fill: none; }
.spatial-panel .handle { stroke: #3B82F6; stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.spatial-panel circle { fill: #E8B7BC; stroke: #020617; stroke-width: 1.5; }
.spatial-panel .curve { stroke: #020617; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.spatial-panel.in .curve, .no-js .spatial-panel .curve { animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ───────── 08 Synapse ───────── */
.s-synapse { background: #0A0A0C; color: #fff; }
.synapse-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: center; }
.s-synapse .label { color: #A1A1AA; }
.synapse-text h2 { font: 500 clamp(34px, 4.6vw, 56px)/1.04 var(--inter); letter-spacing: -0.02em; margin: 14px 0 18px; }
.synapse-text > p:not(.label) { color: #A1A1AA; font-size: 17px; }
.synapse-phone { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 28px; border: 1px solid #27272A; background: linear-gradient(160deg, #18181B, #0A0A0C); box-shadow: inset 0 0 0 8px #111114, 0 40px 80px -30px rgba(255, 255, 255, 0.12); overflow: hidden; }
.z { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px; }
.z-top { left: 0; right: 0; top: 0; height: 11.46%; background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0 6px, rgba(239, 68, 68, 0.1) 6px 12px); color: #FCA5A5; }
.z-right { right: 0; width: 18.52%; top: 39.06%; height: 46.88%; background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0 6px, rgba(239, 68, 68, 0.1) 6px 12px); color: #FCA5A5; writing-mode: vertical-rl; }
.z-bottom { left: 0; right: 0; bottom: 0; height: 20.83%; background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0 6px, rgba(239, 68, 68, 0.1) 6px 12px); color: #FCA5A5; }
.z-gold { left: 5.56%; width: 74.07%; top: 65.1%; height: 11.98%; border: 1px dashed #FDB813; background: rgba(253, 184, 19, 0.12); color: #FDE68A; border-radius: 4px; animation: glowz 2.4s ease-in-out infinite; }
@keyframes glowz { 50% { box-shadow: 0 0 24px rgba(253, 184, 19, 0.45); } }
.telemetry { margin-top: 30px; border: 1px solid #27272A; border-radius: 8px; background: #18181B; }
.telemetry li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid #27272A; font-size: 14px; }
.telemetry li:first-child { border-top: 0; }
.telemetry code { font-size: 12px; color: #fff; }
.telemetry em { font: 600 11px var(--mono); font-style: normal; color: #FCA5A5; text-transform: uppercase; letter-spacing: 0.06em; }
.telemetry em.ok { color: #FDE68A; }
.synapse-chips { display: flex; gap: 8px; margin-top: 18px; }
.synapse-chips span { font: 500 12px var(--mono); border: 1px solid #27272A; border-radius: 9999px; padding: 6px 12px; color: #A1A1AA; }

/* ───────── 09 Astral ───────── */
.s-astral { background: #03000A; color: #fff; }
.s-astral::before { content: ""; position: absolute; top: -200px; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(192, 132, 252, 0.2), transparent 60%); }
.s-astral .label { color: #C084FC; }
.astral-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.astral-card { background: linear-gradient(180deg, #18181B, #0A0A14); border: 1px solid #27272A; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.astral-card header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.astral-card header b { font-weight: 600; }
.astral-card header span, .astral-card footer span { font: 500 12px var(--mono); color: #A1A1AA; }
.astral-card footer { display: flex; gap: 18px; margin-top: auto; }
.astral-card svg { width: 100%; height: auto; }
.duck .voice { fill: rgba(251, 146, 60, 0.22); stroke: #FB923C; }
.duck .music { fill: none; stroke: #C084FC; stroke-width: 3; stroke-linejoin: round; }
.duck text, .peak text { font: 500 13px var(--mono); fill: #A1A1AA; }
.gauge { width: 168px; aspect-ratio: 1; margin: 6px auto; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #0A0A14 60%, transparent 61%), conic-gradient(#FB923C 0 72%, #C084FC 72% 80%, #27272A 80%); }
.gauge span { font: 600 44px/1 var(--inter); }
.gauge small { font: 500 12px var(--mono); color: #A1A1AA; }
.chain { display: grid; gap: 8px; counter-reset: c; }
.chain li { counter-increment: c; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: rgba(192, 132, 252, 0.08); border: 1px solid rgba(192, 132, 252, 0.2); font-size: 14px; }
.chain li::before { content: counter(c, decimal-leading-zero); font: 600 11px var(--mono); color: #FB923C; }
.peak .vel { fill: none; stroke: #C084FC; stroke-width: 3; }
.peak .mark { stroke: #FB923C; stroke-width: 2; stroke-dasharray: 4 4; }

/* ───────── 10 Aethel ───────── */
.s-aethel { background: #1C1917; color: #fff; }
.s-aethel .label { color: #A8A29E; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric { position: relative; background: #18181B; border: 1px solid #27272A; border-radius: 16px; padding: 26px; overflow: hidden; }
.metric b { font: 600 clamp(40px, 5vw, 56px)/1 var(--inter); letter-spacing: -0.03em; }
.metric > span { font: 500 14px var(--mono); color: #A1A1AA; margin-left: 6px; }
.metric p { color: #A1A1AA; margin-top: 12px; font-size: 15px; }
.metric i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, #78716C, #F5F5F4); transition: width 1.4s var(--ease) 0.2s; }
.aethel-note { margin-top: 20px; color: #78716C; font: 400 13px var(--mono); }

/* ───────── 11 Core ───────── */
.s-core { background: #050505; color: #fff; font-family: var(--mono); }
.core-bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(99, 102, 241, 0.55) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 65%); animation: drift 30s linear infinite; }
@keyframes drift { to { background-position: 220px 110px; } }
.s-core .label { color: #FBBF24; }
.s-core .head h2 { font-family: var(--inter); }
.s-core .head p:not(.label) { font-size: 15px; }
.core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.core-grid article { position: relative; display: grid; gap: 4px; padding: 20px; border-radius: 11px; border: 1px solid #333; background: rgba(17, 17, 17, 0.85); transition: border-color 0.3s, transform 0.4s var(--ease); }
.core-grid article:hover { border-color: #6366F1; transform: translateY(-3px); }
.core-k { font-size: 12px; color: #6366F1; }
.core-grid b { font: 600 18px var(--inter); }
.core-grid small { color: #A1A1AA; font-size: 12px; }
.core-grid em { position: absolute; top: 18px; right: 16px; font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; border: 1px solid #333; color: #A1A1AA; }
.core-grid em.hot { border-color: #FBBF24; color: #FBBF24; }

/* ───────── 12 Nova Adaptive ───────── */
.s-adaptive { background: #03030A; color: #fff; }
.adaptive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.s-adaptive .label { color: #A5B4FC; }
.adaptive-text h2 { font: 500 clamp(32px, 4.4vw, 52px)/1.06 var(--inter); letter-spacing: -0.02em; margin: 14px 0 18px; }
.adaptive-text > p:not(.label) { color: #A1A1AA; font-size: 17px; }
.adaptive-list { margin-top: 26px; display: grid; gap: 12px; }
.adaptive-list li { display: flex; gap: 12px; align-items: center; }
.adaptive-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: #6366F1; box-shadow: 0 0 12px #6366F1; }
.chat { background: #151520; border: 1px solid #27272A; border-radius: 8px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 40px 90px -40px rgba(99, 102, 241, 0.6); }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.msg.me { justify-self: end; background: #6366F1; color: #fff; }
.msg.ai { background: #1E1E2C; border: 1px solid #2A2A3C; display: grid; gap: 10px; }
.acts { display: grid; gap: 6px; }
.acts li::before { content: "✓ "; color: #A5B4FC; font-weight: 700; }
.chip { justify-self: start; font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #A5B4FC; background: rgba(165, 180, 252, 0.1); border: 1px solid rgba(165, 180, 252, 0.3); border-radius: 9999px; padding: 4px 10px; }
.chip.warn { color: #FDB813; background: rgba(253, 184, 19, 0.1); border-color: rgba(253, 184, 19, 0.35); }

/* ───────── 13 Synth Vanguard ───────── */
.s-synth { background: #09050E; color: #fff; }
.synth-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; background: linear-gradient(rgba(147, 51, 234, 0.45) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(147, 51, 234, 0.45) 1px, transparent 1px) 0 0 / 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(transparent, #000 80%); -webkit-mask-image: linear-gradient(transparent, #000 80%); animation: floor 3s linear infinite; }
@keyframes floor { to { background-position: 0 60px, 0 0; } }
.s-synth::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, 0.25) 3px 4px); }
.synth-head { text-align: center; max-width: 820px; margin: 0 auto 56px; position: relative; }
.s-synth .label { color: #A855F7; }
.synth-head h2 { font: 700 clamp(40px, 7vw, 84px)/0.98 "Rajdhani", var(--inter); text-transform: uppercase; letter-spacing: 0.01em; margin: 16px 0 18px; text-shadow: 0 0 30px rgba(168, 85, 247, 0.6); }
.synth-head p:not(.label) { font: 400 13px/1.9 "Syncopate", var(--inter); color: #A1A1AA; }
.synth-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.synth-grid article { background: rgba(24, 24, 27, 0.82); border: 1px solid #27272A; border-radius: 8px; padding: 22px; backdrop-filter: blur(6px); transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s; }
.synth-grid article:hover { border-color: #A855F7; transform: translateY(-4px); box-shadow: 0 0 0 1px #9333EA, 0 20px 40px -20px #9333EA; }
.synth-grid span { font: 600 12px var(--mono); color: #A855F7; }
.synth-grid h3 { font: 700 30px/1 "Rajdhani", var(--inter); letter-spacing: 0.04em; margin: 12px 0 10px; }
.synth-grid p { font: 400 11px/1.8 "Syncopate", var(--inter); color: #A1A1AA; }
.btn-synth { position: relative; background: #9333EA; color: #fff; border-radius: 8px; font: 700 18px "Rajdhani", var(--inter); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 30px rgba(147, 51, 234, 0.6); }
.btn-synth:hover { background: #A855F7; }

/* ───────── 14 Axiom ───────── */
.s-axiom { background: #050507; color: #fff; }
.s-axiom .label { color: #F97316; }
.axiom-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.axiom-card { background: #1A1C23; border: 1px solid #27272A; border-radius: 32px; padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.4s var(--ease), border-color 0.3s; }
.axiom-card:hover { transform: translateY(-4px); border-color: #F97316; }
.axiom-lg { grid-column: span 2; grid-row: span 2; justify-content: flex-end; background: radial-gradient(circle at 30% 20%, rgba(249, 115, 22, 0.25), transparent 55%), #1A1C23; }
.axiom-lg h3 { font-size: 26px; }
.axiom-lg p { color: #A1A1AA; }
.axiom-card h3 { font-size: 16px; font-weight: 600; }
.axiom-blue { background: radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.3), transparent 60%), #1A1C23; }
.keys { display: flex; gap: 8px; flex-wrap: wrap; }
.axiom-lg .keys { margin-bottom: auto; }
kbd { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 14px; border-radius: 14px; font: 600 16px var(--inter); color: #fff; background: linear-gradient(180deg, #2B2E38, #1F2129); border: 1px solid #3A3D48; box-shadow: 0 4px 0 #0B0C10, inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.axiom-lg kbd { min-width: 92px; height: 92px; font-size: 28px; border-radius: 22px; box-shadow: 0 7px 0 #0B0C10, inset 0 1px 0 rgba(255, 255, 255, 0.08); }
kbd.wide { min-width: 140px; }
kbd.pulse { animation: press 2.4s ease-in-out infinite; }
@keyframes press { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(5px); box-shadow: 0 2px 0 #0B0C10, 0 0 30px rgba(249, 115, 22, 0.7); color: #F97316; } }
.axiom-blue kbd:last-child { color: #3B82F6; }

/* ───────── 15 Nova Fluid ───────── */
.s-fluid { background: #FFFFFF; color: #111827; }
.fluid-blobs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: blob 18s ease-in-out infinite; }
.fluid-blobs i:nth-child(1) { width: 420px; height: 420px; left: -120px; top: 40px; background: #A5B4FC; }
.fluid-blobs i:nth-child(2) { width: 360px; height: 360px; right: -80px; top: 220px; background: #818CF8; animation-delay: -6s; }
.fluid-blobs i:nth-child(3) { width: 300px; height: 300px; left: 40%; bottom: -120px; background: #C7D2FE; animation-delay: -12s; }
@keyframes blob { 33% { transform: translate(60px, -40px) scale(1.1); } 66% { transform: translate(-40px, 50px) scale(0.92); } }
.s-fluid .label { color: #6366F1; }
.s-fluid .head p:not(.label) { color: #4B5563; opacity: 1; }
.fluid-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fluid-cards article { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid #E5E7EB; border-radius: 16px; padding: 28px; text-align: center; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.fluid-cards article:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(99, 102, 241, 0.5); }
.fluid-cards h3 { font: 600 32px var(--inter); letter-spacing: -0.02em; margin-top: 18px; }
.fluid-cards p { color: #4B5563; }
.frame { display: flex; gap: 10px; justify-content: center; align-items: center; height: 140px; }
.frame::before, .frame i { content: ""; display: block; border-radius: 8px; border: 2px solid #818CF8; background: linear-gradient(160deg, #EEF2FF, #C7D2FE); }
.f916::before { width: 76px; height: 135px; }
.f169::before { width: 200px; height: 112px; }
.fboth::before { display: none; }
.fboth i:first-child { width: 62px; height: 110px; }
.fboth i:last-child { width: 150px; height: 84px; }
.fluid-specs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.fluid-specs li { font: 500 13px var(--mono); color: #4338CA; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 9999px; padding: 8px 14px; }

/* ───────── 16 Nexus Routing ───────── */
.s-routing { background: #030308; color: #fff; font-family: "Geist", var(--inter); }
.routing-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.routing-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.s-routing .head { margin-bottom: 0; }
.s-routing .label { color: #8B8BF0; }
.s-routing .head h2 { font-family: "Geist", var(--inter); }
.routes { display: grid; gap: 10px; }
.routes li { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 8px; background: rgba(40, 40, 85, 0.55); border: 1px solid rgba(70, 70, 200, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.routes code { font-size: 12px; color: #fff; background: #4646C8; border-radius: 6px; padding: 4px 8px; text-align: center; }
.routes span { color: #D4D4F7; font-size: 15px; }

/* ───────── 17 Luma ───────── */
.s-luma { background: #0B0C15; color: #fff; }
.s-luma::before { content: ""; position: absolute; left: 50%; top: 40%; width: 1000px; height: 500px; margin-left: -500px; background: radial-gradient(ellipse, rgba(74, 144, 226, 0.22), transparent 65%); }
.s-luma .label { color: #F5A623; }
.plans { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 16px; background: #141932; border: 1px solid #27272A; border-radius: 8px; padding: 30px; }
.plan h3 { font-size: 20px; font-weight: 600; }
.plan .price { font: 600 44px/1 var(--inter); letter-spacing: -0.02em; }
.plan .price.soon { font-size: 28px; color: #A1A1AA; }
.plan ul { display: grid; gap: 10px; margin-bottom: auto; }
.plan li { display: flex; gap: 10px; color: #C9CEDD; font-size: 15px; }
.plan li::before { content: "→"; color: #4A90E2; }
.plan-hot { border-color: #4A90E2; box-shadow: 0 0 0 1px #4A90E2, 0 40px 80px -40px rgba(74, 144, 226, 0.7); }
.plan-badge { align-self: flex-start; font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #0B0C15; background: #F5A623; border-radius: 9999px; padding: 4px 10px; }
.btn-luma { background: #4A90E2; color: #fff; }
.btn-luma:hover { box-shadow: 0 14px 30px -10px #4A90E2; }
.btn-off { border-color: #27272A; color: #A1A1AA; opacity: 1 !important; }

/* ───────── 18 Aurelis ───────── */
.s-aurelis { background: #D4AF37; color: #111827; }
.s-aurelis::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(8, 8, 8, 0.28); pointer-events: none; }
.s-aurelis .label { color: #080808; }
.s-aurelis h2 { font: 700 clamp(36px, 6vw, 76px)/1.02 "Cinzel", Georgia, serif; letter-spacing: 0.02em; text-transform: uppercase; color: #080808; margin: 18px 0 22px; }
.aurelis-lead { max-width: 680px; margin: 0 auto; font-size: 19px; color: #2A2306; }
.aurelis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.aurelis-grid article { background: #EAE2D3; border-radius: 16px; padding: 24px; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.aurelis-grid article:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(8, 8, 8, 0.5); }
.aurelis-grid h3 { font: 700 18px "Cinzel", Georgia, serif; color: #080808; margin-bottom: 8px; }
.aurelis-grid p { color: #4B5563; font-size: 15px; }

/* ───────── 19 Platform Authentication ───────── */
.s-auth { background: #F5F5F3; color: #111827; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.s-auth .label { color: #4B5563; }
.auth-text h2 { font: 500 clamp(36px, 5vw, 60px)/1.04 var(--inter); letter-spacing: -0.03em; margin: 14px 0 18px; }
.auth-text > p:not(.label) { font: 400 19px/1.6 "Playfair Display", Georgia, serif; color: #4B5563; }
.auth-req { margin-top: 26px; display: grid; gap: 10px; }
.auth-req li { display: flex; gap: 10px; font-size: 15px; color: #374151; }
.auth-req li::before { content: "✓"; color: #111827; font-weight: 700; }
.auth-card { background: #1A1A1A; color: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 50px 100px -40px rgba(20, 20, 20, 0.6); }
.os-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 8px; background: #141414; border: 1px solid #2A2A2A; }
.os-tabs button { min-height: 40px; border: 0; border-radius: 6px; background: transparent; color: #A1A1AA; font: 600 14px var(--inter); cursor: pointer; transition: background 0.2s, color 0.2s; }
.os-tabs button[aria-selected="true"] { background: #FFFFFF; color: #141414; }
.dl-panel { margin-top: 22px; display: grid; gap: 18px; }
.dl-status { font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #A1A1AA; display: flex; align-items: center; gap: 8px; }
.dl-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #71717A; }
.dl-status.ok::before { background: #22C55E; box-shadow: 0 0 10px #22C55E; }
.dl-status.soon::before { background: #FDB813; }
.dl-info { margin: 0; display: grid; gap: 1px; background: #2A2A2A; border: 1px solid #2A2A2A; border-radius: 8px; overflow: hidden; }
.dl-info div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; background: #1A1A1A; font-size: 14px; }
.dl-info dt { color: #A1A1AA; }
.dl-info dd { margin: 0; font-family: var(--mono); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.btn-auth { background: #FFFFFF; color: #141414; min-height: 52px; }
.btn-auth:hover { box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.5); }
.dl-note { color: #A1A1AA; font: 400 15px/1.5 "Playfair Display", Georgia, serif; }
.all-os { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font: 500 13px var(--mono); }
.all-os a { color: #4B5563; }

/* ───────── 20 Nimbus ───────── */
.s-nimbus { background: #FFFFFF; color: #111827; }
.s-nimbus .label { color: #0E74E9; }
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid #E5E7EB; border-radius: 16px; background: #fff; transition: border-color 0.3s, box-shadow 0.3s; }
.faq details[open] { border-color: #22D3EE; box-shadow: 0 18px 40px -26px rgba(14, 116, 233, 0.6); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #ECFEFF; color: #0E74E9; font-weight: 700; transition: transform 0.3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: #4B5563; }
.nimbus-cta { margin-top: 72px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding: 44px; border-radius: 16px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(34, 211, 238, 0.35), transparent 50%), radial-gradient(circle at 10% 100%, rgba(14, 116, 233, 0.45), transparent 50%), #082F49; }
.nimbus-cta h3 { font: 600 clamp(26px, 3.4vw, 38px)/1.1 var(--inter); letter-spacing: -0.02em; }
.nimbus-cta p { color: #A5F3FC; margin-top: 8px; }
.nimbus-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-nimbus { background: #22D3EE; color: #082F49; }
.btn-nimbus:hover { box-shadow: 0 14px 30px -10px #22D3EE; }
.btn-nimbus-line { border-color: rgba(165, 243, 252, 0.5); color: #fff; }

/* ───────── 21 Nexus Global (rodapé) ───────── */
.s-global { background: #F2EAD3; color: #111827; padding: 96px 0 32px; overflow: hidden; }
.global-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 56px; border-bottom: 1px solid rgba(17, 24, 39, 0.15); }
.global-cta h2 { font: 400 clamp(30px, 4.4vw, 52px)/1.08 "Playfair Display", Georgia, serif; max-width: 640px; letter-spacing: -0.01em; }
.btn-global { background: #F68B1F; color: #111827; border-radius: 8px; }
.btn-global:hover { background: #FDB813; box-shadow: 0 14px 30px -12px #F68B1F; }
.global-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0; }
.global-brand img { width: 44px; height: 44px; }
.global-brand p { margin-top: 14px; color: #4B5563; max-width: 280px; font-family: "Playfair Display", Georgia, serif; }
.global-cols nav { display: grid; gap: 10px; align-content: start; }
.global-cols h4 { font: 600 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #F68B1F; margin-bottom: 4px; }
.global-cols nav a { text-decoration: none; color: #374151; }
.global-cols nav a:hover { color: #111827; text-decoration: underline; text-decoration-color: #FDB813; text-underline-offset: 4px; }
.global-word { font: 700 clamp(96px, 26vw, 360px)/0.8 "Rajdhani", var(--inter); letter-spacing: -0.02em; text-align: center; background: linear-gradient(180deg, #F68B1F, #FDB813 70%, rgba(253, 184, 19, 0)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.global-copy { text-align: center; margin-top: 16px; font: 500 12px var(--mono); color: #6B7280; }

/* ───────── Responsivo ───────── */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .axiom-bento { grid-template-columns: repeat(2, 1fr); }
  .synth-grid, .aurelis-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics, .core-grid { grid-template-columns: repeat(2, 1fr); }
  .lumio-list li { grid-template-columns: 70px 1fr; }
  .lumio-list p, .lumio-tag { grid-column: 2; }
  .lumio-tag { justify-self: start; }
}

@media (max-width: 820px) {
  :root { --gutter: 16px; }
  section { padding: 88px 0; }
  .head { margin-bottom: 40px; }
  .lumina-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; margin-top: 40px; }
  .lumina-in { grid-template-columns: 1fr; }
  .lumina-object { position: absolute; inset: 0; height: auto; }
  .lumina-object .tag { display: none; }
  .flow { grid-template-columns: 1fr; gap: 28px; }
  .flow-col:first-child .flow-node::after, .flow-col:last-child .flow-node::before { display: none; }
  .flow-core { order: -1; }
  .neural-grid, .struct-cards, .spatial-grid, .synapse-grid, .astral-grid, .adaptive-grid, .routing-in, .plans, .fluid-cards, .auth-grid { grid-template-columns: 1fr; }
  .spatial-grid, .synapse-grid, .adaptive-grid, .auth-grid { gap: 48px; }
  .lumio-head { flex-direction: column; align-items: flex-start; }
  .lumio-head h2 { text-align: left; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-left, .mock-right { display: none; }
  .mock-menu { display: none; }
  .global-cols { grid-template-columns: 1fr 1fr; }
  .global-brand { grid-column: 1 / -1; }
  .nimbus-cta { padding: 28px; }
}

@media (max-width: 560px) {
  .bento, .axiom-bento, .synth-grid, .aurelis-grid, .metrics, .core-grid { grid-template-columns: 1fr; }
  .bento-lg, .bento-wide, .axiom-lg { grid-column: auto; grid-row: auto; }
  .lumina-ctas .btn { width: 100%; }
  .lumio-list li { grid-template-columns: 1fr; gap: 10px; }
  .lumio-list p, .lumio-tag { grid-column: auto; }
  .telemetry li { grid-template-columns: 1fr auto; }
  .telemetry em { grid-column: 1 / -1; }
  .mock-search { display: none; }
  .routes li { grid-template-columns: 1fr; }
  .routes code { justify-self: start; }
  .axiom-lg kbd { min-width: 72px; height: 72px; font-size: 22px; }
  kbd.wide { min-width: 110px; }
  .s-aurelis::before { inset: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
.plan .price.price-beta { font-size: 30px; color: #F5A623; }