/* =====================================================================
   Secterium AI — sayfa tasarımı (v2)
   ---------------------------------------------------------------------
   Ana siteden bağımsızdır (theme.css kullanılmaz).
   Kimlik: siyah zemin + şampanya/sıcak gümüş vurgu (galaksideki sıcak
   yıldızlardan), serif başlıklar (Instrument Serif), sade Geist metin,
   yüzen kapsül menü, dikey örnek listesi, bento kartlar.
   Efektler: theme/secterium.js (galaksi, sekmeler, sohbet animasyonu)
   ===================================================================== */

:root {
  --bg: #050505;
  --p100: #f6f5f3;                    /* Ana yazı (hafif sıcak beyaz)  */
  --p80: rgba(246, 245, 243, .8);
  --p60: rgba(246, 245, 243, .6);     /* İkincil yazı                  */
  --p44: rgba(246, 245, 243, .44);
  --p12: rgba(255, 255, 255, .12);    /* Kenarlık                      */
  --p8:  rgba(255, 255, 255, .08);
  --p4:  rgba(255, 255, 255, .04);
  --warm: #e8d8c3;                    /* Vurgu: şampanya               */
  --warm-dim: rgba(232, 216, 195, .5);
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --wrap: 1180px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--p100);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
.ico { width: 16px; height: 16px; flex: none; fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(232, 216, 195, .3); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/* Serif başlıklar: italik kısımlar şampanya renginde */
.display, .h3, .hero-label, .quote blockquote, .foot-giant { font-family: var(--serif); font-weight: 400; }
.display em, .h3 em, .quote em { color: var(--warm); }

/* Küçük üst etiket: — EXAMPLES */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p60);
}
.eb-line { width: 28px; height: 1px; background: var(--warm-dim); }

/* ------------------------------ Kapsül butonlar ------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .3s var(--ease), color .3s, transform .3s var(--ease), box-shadow .3s;
}
.pill-lg { height: 50px; padding: 0 26px; font-size: 15px; }
.pill-light { background: linear-gradient(180deg, #ffffff, #ece7df); color: #0a0a0a; box-shadow: 0 8px 30px -10px rgba(232, 216, 195, .5); }
.pill-light:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(232, 216, 195, .7); }
.pill-dark { background: rgba(255, 255, 255, .07); color: var(--p100); border: 1px solid var(--p8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pill-dark:hover { background: rgba(255, 255, 255, .13); }
.pill:active { transform: scale(.97); }
.pill .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.pill:hover .ico { transform: translate(2px, -2px); }
.pill img { height: 12px; width: auto; }
.text-link { font-size: 15px; font-weight: 500; color: var(--p60); transition: color .2s; }
.text-link:hover { color: var(--warm); }

/* ------------------------------ Üst bar (yüzen kapsül) ------------------------------ */
.nav { position: fixed; inset: 14px 0 auto; z-index: 50; padding: 0 16px; pointer-events: none; }
.nav-inner {
  pointer-events: auto; max-width: 1180px; height: 58px; margin: 0 auto; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 28px; border-radius: 999px;
  border: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s, backdrop-filter .5s;
}
.nav.is-solid .nav-inner {
  background: rgba(14, 14, 14, .7); border-color: var(--p8);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.wm-mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #0a0a0a;
  background: radial-gradient(circle at 30% 25%, #fff, var(--warm) 55%, #8d8276);
  box-shadow: 0 0 18px rgba(232, 216, 195, .35);
}
.wm-mark .ico { width: 14px; height: 14px; }
.nav-links { display: flex; gap: 4px; font-size: 14px; }
.nav-links a { padding: 7px 14px; border-radius: 999px; color: var(--p80); transition: color .2s, background .2s; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-right { margin-left: auto; display: flex; gap: 8px; }

/* ------------------------------ Hero (galaksi) ------------------------------ */
.hero { position: relative; height: 230vh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; cursor: grab; touch-action: pan-y; }
.hero-sticky.is-dragging { cursor: grabbing; }
#galaxy { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .65) 100%);
}
.hero-fade {
  position: absolute; inset: auto 0 0; height: 35vh; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg)); opacity: var(--fade, 0);
}
.hero-label {
  position: absolute; top: 50%; margin: 0; pointer-events: none; user-select: none;
  font-size: clamp(52px, 7.4vw, 112px); letter-spacing: -.02em; line-height: .95;
  transform: translate3d(var(--shift, 0), -50%, 0); opacity: var(--label-o, 1);
  text-shadow: 0 0 60px rgba(0, 0, 0, .7);
}
.hero-label-left  { left: 40px; }
.hero-label-right { right: 40px; transform: translate3d(calc(var(--shift, 0) * -1), -50%, 0); }
.hero-label-right em { color: var(--warm); }
.hl-eyebrow {
  display: block; margin-bottom: 14px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--p60);
}
.hud {
  position: absolute; display: inline-flex; align-items: center; gap: 10px; opacity: var(--label-o, 1);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p60);
}
.hud-bl { left: 40px; bottom: 36px; }
.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 10px #7ee2a8; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hero-hint {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); margin: 0;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p60); opacity: var(--label-o, 1);
}
.replay {
  position: absolute; right: 32px; bottom: 26px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--p12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .2s, transform .5s var(--ease);
}
.replay:hover { background: rgba(255, 255, 255, .16); transform: rotate(-180deg); }
.replay .ico { width: 16px; height: 16px; }

/* ------------------------------ Giriş ------------------------------ */
.intro { position: relative; margin-top: -40vh; padding-bottom: 120px; z-index: 2; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.intro-head { position: sticky; top: 120px; }
.display { margin: 0; text-wrap: balance; font-size: clamp(48px, 6.4vw, 92px); line-height: .98; letter-spacing: -.02em; }
.intro-body { padding-top: 38px; }
.prose p { margin: 0 0 22px; color: var(--p80); }
.prose a:not(.pill):not(.text-link) { color: var(--warm); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--warm-dim); }
.prose a:not(.pill):not(.text-link):hover { text-decoration-color: var(--warm); }
.prose .lead { font-size: 23px; line-height: 1.45; letter-spacing: -.01em; font-weight: 500; color: var(--p100); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.cta-row.center { justify-content: center; }

/* ------------------------------ Bloklar ------------------------------ */
.block { padding: 96px 0; }
.section-head { margin-bottom: 44px; }
.section-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-sub { margin: 0; max-width: 380px; color: var(--p60); font-size: 16px; }
.h3 { margin: 0; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }

/* ------------------------------ Örnekler: dikey liste + sahne ------------------------------ */
.demo-grid { display: grid; grid-template-columns: 300px 1fr; grid-template-areas: "tabs stage" "tabs caption"; column-gap: 40px; }
.tabs { grid-area: tabs; display: flex; flex-direction: column; border-top: 1px solid var(--p12); align-self: start; }
.tab {
  position: relative; display: flex; gap: 16px; align-items: flex-start; width: 100%; padding: 20px 4px 20px 0;
  border: 0; border-bottom: 1px solid var(--p12); background: none; text-align: left; cursor: pointer;
  color: var(--p60); font-family: var(--sans); transition: color .3s, padding .4s var(--ease);
}
.tab:hover { color: var(--p100); }
.tab.is-active { color: var(--p100); padding-left: 10px; }
.tab:focus-visible { outline: 2px solid var(--warm-dim); outline-offset: 2px; }
.tab-num { font: 500 12px/1.6 var(--mono); color: var(--p44); padding-top: 2px; transition: color .3s; }
.tab.is-active .tab-num { color: var(--warm); }
.tab-text b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.tab-text small { display: block; margin-top: 3px; font-size: 13px; color: var(--p44); }
/* Aktif sekmenin altında soldan sağa dolan geri sayım çizgisi */
.tab-fill {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--warm);
  transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px var(--warm);
}
.tab.is-active .tab-fill { animation: countdown var(--tab-dur, 9s) linear forwards; }
.tabs.is-paused .tab.is-active .tab-fill { animation-play-state: paused; }
@keyframes countdown { to { transform: scaleX(1); } }

.stage {
  grid-area: stage; position: relative; margin: 0; padding: clamp(24px, 5vw, 60px); border-radius: 30px; overflow: hidden;
  min-height: 480px; display: grid; place-items: center;
  background: radial-gradient(ellipse 90% 80% at 80% 0%, rgba(232, 216, 195, .1), transparent 60%), linear-gradient(160deg, #121212, #080808);
  border: 1px solid var(--p8);
}
/* Dekoratif yörünge halkaları */
.stage-orbit {
  position: absolute; width: 900px; height: 900px; left: 55%; top: 50%; translate: -50% -50%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 29.8%, rgba(255, 255, 255, .06) 30%, transparent 30.2%),
    radial-gradient(circle, transparent 44.8%, rgba(255, 255, 255, .05) 45%, transparent 45.2%),
    radial-gradient(circle, transparent 59.8%, rgba(255, 255, 255, .04) 60%, transparent 60.2%);
  animation: orbit 60s linear infinite;
}
.stage-orbit::after {                   /* halka üzerinde dönen küçük ışık */
  content: ""; position: absolute; left: 50%; top: 20%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warm); box-shadow: 0 0 14px 3px rgba(232, 216, 195, .6);
}
@keyframes orbit { to { rotate: 360deg; } }
.stage-glow {
  position: absolute; width: 50%; height: 50%; left: 40%; top: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 216, 195, .14), transparent 70%); filter: blur(40px);
  animation: stage-drift 12s ease-in-out infinite alternate;
}
@keyframes stage-drift { to { transform: translate(-20%, 30%) scale(1.15); } }
.caption { grid-area: caption; margin: 16px 0 0; font-size: 14px; color: var(--p60); min-height: 1.6em; }
.caption::before { content: "↳ "; color: var(--warm-dim); }

/* ------------------------------ Discord sohbeti ------------------------------ */
.chat {
  position: relative; width: 100%; max-width: 600px; border-radius: 18px; overflow: hidden;
  background: rgba(20, 20, 20, .85); border: 1px solid var(--p8);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.chat[hidden] { display: none; }
.chat.is-active { animation: chat-in .6s var(--ease) both; }
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--p8); font-size: 14px; font-weight: 600; color: var(--p80); }
.chat-dots { display: inline-flex; gap: 6px; margin-right: 10px; }
.chat-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.chat-head .ico { width: 15px; height: 15px; color: var(--p44); }
.chat .stage figcaption, .chat figcaption { display: none; }
.chat-body { padding: 8px 0 14px; min-height: 250px; }
.msg { display: flex; gap: 14px; padding: 10px 18px; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.msg.is-shown { opacity: 1; transform: none; }
.msg b { font-size: 15px; font-weight: 600; margin-right: 8px; }
.msg b i {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .02em; vertical-align: 2px;
  padding: 1px 5px; border-radius: 4px; background: var(--warm); color: #0a0a0a; margin-left: 4px;
}
.msg time { font-size: 12px; color: var(--p44); }
.msg p { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--p80); }
.msg.bot p { color: var(--p100); }
.msg pre { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: #0a0a0a; border: 1px solid var(--p8); overflow-x: auto; }
.msg code { font: 13px/1.5 var(--mono); color: #eee8df; }
.av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff; }
.av-u1 { background: linear-gradient(135deg, #5b5b5b, #303030); }
.av-u2 { background: linear-gradient(135deg, #7a6a5d, #3f362f); }
.av-u3 { background: linear-gradient(135deg, #5d676b, #30373a); }
.av-u4 { background: linear-gradient(135deg, #6d655c, #2f2b27); }
.av-bot { background: radial-gradient(circle at 30% 25%, #fff, var(--warm) 50%, #7d7266); color: #111; box-shadow: 0 0 20px rgba(232, 216, 195, .3); }
.av-bot .ico { width: 18px; height: 18px; }
.typing { display: inline-flex; gap: 4px; padding: 8px 0 2px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-dim); animation: typing 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.caret::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--warm); animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ------------------------------ Alıntı ------------------------------ */
.quote-block { padding: 120px 0; }
.quote { margin: 0 auto; max-width: 960px; text-align: center; }
.quote-mark { width: 28px; height: 28px; fill: var(--warm); filter: drop-shadow(0 0 14px rgba(232, 216, 195, .6)); animation: spin-slow 16s linear infinite; }
@keyframes spin-slow { to { rotate: 360deg; } }
.quote blockquote { margin: 28px 0 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.quote figcaption { margin-top: 26px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p44); }

/* ------------------------------ Bento kartlar ------------------------------ */
.bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; }
.card {
  position: relative; overflow: hidden; padding: 28px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--p8);
  transition: border-color .4s, transform .5s var(--ease), background .4s;
}
.card:hover { border-color: rgba(232, 216, 195, .28); transform: translateY(-4px); }
.card-big { grid-row: span 2; display: flex; flex-direction: column; }
.card-link { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
.card-link .card-ico { grid-row: span 2; margin: 0; }
.card-link h4 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.card-link p { margin: 4px 0 0; }
.card-link .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.card-link:hover h4 .ico { transform: translate(2px, -2px); }
.card-ico {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 36px;
  color: var(--warm); background: rgba(232, 216, 195, .08); border: 1px solid rgba(232, 216, 195, .18);
}
.card-ico .ico { width: 20px; height: 20px; }
.card-ico-logo img { width: 24px; height: auto; }
.card h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--p60); }
/* "Knows the thread" kartındaki mesaj çizgileri: tarama ışığı gezer */
.thread-viz { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; }
.thread-viz span { position: relative; overflow: hidden; display: block; width: var(--w); height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.thread-viz span.hl { background: rgba(232, 216, 195, .22); }
.thread-viz span::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(232, 216, 195, .45), transparent);
  animation: scan 3.2s var(--ease) infinite;
}
.thread-viz span:nth-child(2)::after { animation-delay: .2s; }
.thread-viz span:nth-child(3)::after { animation-delay: .4s; }
.thread-viz span:nth-child(4)::after { animation-delay: .6s; }
@keyframes scan { 60%, 100% { transform: translateX(100%); } }

/* ------------------------------ Güvenlik ------------------------------ */
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.safety-grid .prose { padding-top: 40px; }

/* ------------------------------ Son CTA ------------------------------ */
.final { position: relative; overflow: hidden; padding: 170px 0 160px; margin-top: 40px; }
#final-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.final-inner { position: relative; }
.final .display { margin: 0 auto; max-width: 900px; }
.final-sub { margin: 26px auto 0; max-width: 520px; font-size: 18px; color: var(--p60); }

/* ------------------------------ Footer ------------------------------ */
.foot { position: relative; overflow: hidden; border-top: 1px solid var(--p12); padding: 56px 0 0; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
/* Footer'daki yıldız: alıntı bölümündeki gibi parlayan, yavaşça dönen yıldız */
.foot-star { width: 22px; height: 22px; fill: var(--warm); filter: drop-shadow(0 0 10px rgba(232, 216, 195, .6)); animation: spin-slow 16s linear infinite; }
.foot-brand p { margin: 16px 0 0; font-size: 13px; color: var(--p44); max-width: 320px; }
.foot-cols { display: flex; gap: 64px; }
.foot-cols div { display: grid; gap: 10px; align-content: start; }
.foot-cols h5 { margin: 0 0 6px; font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p44); }
.foot-cols a { font-size: 14px; color: var(--p80); transition: color .2s; }
.foot-cols a:hover { color: var(--warm); }
/* Altta yarısı kesik dev yazı */
.foot-giant {
  margin: 40px 0 -0.28em; text-align: center; line-height: .8; white-space: nowrap; user-select: none;
  font-size: clamp(90px, 21vw, 330px); letter-spacing: -.03em;
  background: linear-gradient(180deg, rgba(246, 245, 243, .16), rgba(246, 245, 243, 0) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ------------------------------ Kaydırınca belirme ------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* ------------------------------ Mobil ------------------------------ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .intro-grid, .safety-grid { grid-template-columns: 1fr; gap: 0; }
  .intro-head { position: static; }
  .intro-body, .safety-grid .prose { padding-top: 28px; }
  .demo-grid { grid-template-columns: 1fr; grid-template-areas: "tabs" "stage" "caption"; }
  .tabs { flex-direction: row; overflow-x: auto; border-top: 0; margin-bottom: 18px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; width: auto; padding: 12px 18px 12px 0; margin-right: 18px; }
  .tab.is-active { padding-left: 0; }
  .tab-text small { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .card-big { grid-row: auto; grid-column: 1 / -1; }
  .section-head.split { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { inset: 10px 0 auto; padding: 0 10px; }
  .nav-inner { padding: 0 8px 0 12px; gap: 12px; height: 54px; }
  .nav-right .pill-dark { display: none; }
  .wrap { padding: 0 18px; }
  .hero-label-left { left: 18px; }
  .hero-label-right { right: 18px; }
  .hud-bl { left: 18px; bottom: 80px; }
  .prose .lead { font-size: 19px; }
  .block { padding: 72px 0; }
  .bento { grid-template-columns: 1fr; }
  .card-link { grid-template-columns: 1fr; }
  .card-link .card-ico { grid-row: auto; margin-bottom: 24px; }
  .stage { padding: 16px; border-radius: 22px; min-height: 400px; }
  .msg { padding: 10px 14px; gap: 10px; }
  .av { width: 32px; height: 32px; font-size: 13px; }
  .chat-dots { display: none; }
  .foot-cols { gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .stage-glow, .stage-orbit, .hud-dot, .typing span, .caret::after, .quote-mark, .foot-star, .thread-viz span::after { animation: none; }
  .tab.is-active .tab-fill { animation: none; transform: scaleX(1); }
}