/* Homepage V4 — cinematic product experience. Local assets only. */
body.home-v4 {
  --x-bg: #030611;
  --x-ink: #f7fbff;
  --x-muted: rgba(231, 239, 255, .68);
  --x-cyan: #36e6ff;
  --x-violet: #8d68ff;
  --x-magenta: #ff4fc8;
  --x-paper: #ece8de;
  color: var(--x-ink);
  background: var(--x-bg);
  overflow-x: clip;
}
body.home-v4::before { opacity: .02; }
body.home-v4 a { text-decoration: none; }

.x-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  padding: 20px clamp(20px, 4vw, 64px);
  pointer-events: none;
}
.x-header-inner {
  width: min(1440px, 100%);
  min-height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(4,7,18,.48);
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow: 0 14px 50px rgba(0,0,0,.24);
  pointer-events: auto;
}
.x-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font: 700 1rem/1 var(--font-display); letter-spacing: -.03em; }
.x-brand:hover { color: #fff; }
.x-brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 28px rgba(54,230,255,.2); }
.x-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.x-nav a { color: rgba(255,255,255,.72); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease, transform .25s ease; }
.x-nav a:hover { color: #fff; transform: translateY(-1px); }
.x-nav .x-nav-cta { padding: 12px 18px; border: 1px solid rgba(54,230,255,.4); border-radius: 999px; color: #fff; background: linear-gradient(120deg, rgba(54,230,255,.14), rgba(141,104,255,.12)); box-shadow: 0 0 24px rgba(54,230,255,.12); }

.x-mobile-menu{display:none;position:relative;margin-left:auto;}
.x-mobile-menu summary{list-style:none;display:flex;align-items:center;gap:9px;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#fff;background:rgba(7,10,24,.72);font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;user-select:none;}
.x-mobile-menu summary::-webkit-details-marker{display:none;}
.x-mobile-menu summary i,.x-mobile-menu summary i::before,.x-mobile-menu summary i::after{display:block;width:15px;height:1px;background:currentColor;transition:transform .25s ease,opacity .25s ease;}
.x-mobile-menu summary i{position:relative;}
.x-mobile-menu summary i::before,.x-mobile-menu summary i::after{content:"";position:absolute;left:0;}
.x-mobile-menu summary i::before{top:-5px;}.x-mobile-menu summary i::after{top:5px;}
.x-mobile-menu[open] summary i{background:transparent;}.x-mobile-menu[open] summary i::before{top:0;transform:rotate(45deg);}.x-mobile-menu[open] summary i::after{top:0;transform:rotate(-45deg);}
.x-mobile-menu nav{position:absolute;right:0;top:calc(100% + 12px);width:min(78vw,280px);display:grid;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(3,6,17,.96);box-shadow:0 24px 70px rgba(0,0,0,.58);backdrop-filter:blur(22px) saturate(135%);}
.x-mobile-menu nav a{padding:14px 15px;border-radius:11px;color:rgba(255,255,255,.78);font-size:.78rem;font-weight:750;}
.x-mobile-menu nav a:hover,.x-mobile-menu nav a:focus-visible{color:#fff;background:rgba(102,234,255,.09);}


.x-journey { position: relative; height: 430vh; background: #030611; }
.x-sticky { position: sticky; top: 0; height: 100svh; min-height: 660px; overflow: hidden; isolation: isolate; }
.x-atmosphere { position: absolute; inset: -8%; z-index: -10; background: url('/assets/images/cinematic-atmosphere.webp') center / cover no-repeat; transform: scale(1.12) translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -10px), 0); filter: saturate(112%) contrast(106%); }
.x-atmosphere::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 51% 45%, transparent 0 25%, rgba(2,4,13,.15) 52%, rgba(2,4,13,.82) 100%), linear-gradient(90deg, rgba(3,6,17,.68), transparent 46% 68%, rgba(3,6,17,.45)); }
.x-ink-field { position: absolute; inset: 22% -8% auto 18%; height: 66%; z-index: -5; background: url('/assets/images/luminous-ink.webp') center / contain no-repeat; opacity: calc(.12 + var(--solve, 0) * .45); transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 12px), 0) scale(calc(.8 + var(--solve, 0) * .28)); filter: blur(calc(7px - var(--solve, 0) * 5px)); mix-blend-mode: screen; transition: opacity .25s linear; }
.x-cursor-light { position: fixed; z-index: -4; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(54,230,255,.08), transparent 68%); pointer-events: none; mix-blend-mode: screen; }

.x-progress { position: absolute; z-index: 30; top: 50%; right: clamp(20px, 3.6vw, 56px); transform: translateY(-44%); display: grid; justify-items: center; gap: 12px; color: rgba(255,255,255,.56); font: 800 .62rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.x-progress-line { width: 1px; height: 150px; background: rgba(255,255,255,.17); overflow: hidden; }
.x-progress-line i { display:block; width:100%; height:100%; transform-origin: top; background: linear-gradient(var(--x-cyan), var(--x-violet), var(--x-magenta)); box-shadow: 0 0 13px var(--x-cyan); }
.x-progress-number { color: #fff; font-size: .78rem; letter-spacing: .04em; }
.x-progress-label { writing-mode: vertical-rl; }

.x-copy { position: absolute; z-index: 12; left: clamp(24px, 6vw, 96px); top: 50%; width: min(560px, 42vw); transform: translateY(-44%); opacity: 0; filter: blur(14px); pointer-events: none; transition: opacity .75s cubic-bezier(.22,.8,.2,1), filter .85s ease, transform .85s cubic-bezier(.22,.8,.2,1); }
.x-copy .x-eyebrow { margin: 0 0 24px; color: var(--x-cyan); font-size: .71rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.x-copy h1, .x-copy h2 { margin: 0 0 28px; color: #fff; font-size: clamp(4rem, 7.2vw, 8.2rem); font-weight: 520; letter-spacing: -.075em; line-height: .82; text-wrap: balance; }
.x-copy h1 em, .x-copy h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.2px rgba(255,255,255,.8); text-shadow: 0 0 38px rgba(54,230,255,.14); }
.x-copy > p:not(.x-eyebrow) { width: min(440px, 100%); color: var(--x-muted); font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.65; }
.x-journey[data-scene="0"] .x-copy-0,
.x-journey[data-scene="1"] .x-copy-1,
.x-journey[data-scene="2"] .x-copy-2,
.x-journey[data-scene="3"] .x-copy-3 { opacity: 1; filter: blur(0); transform: translateY(-50%); pointer-events: auto; }

.x-world { position: absolute; z-index: 5; inset: 0; perspective: 1300px; transform-style: preserve-3d; pointer-events: none; }
.x-paper { position: absolute; width: clamp(440px, 48vw, 760px); aspect-ratio: 1.4; color: #20202a; background: url('/assets/images/notebook-paper.webp') center / cover no-repeat; border-radius: 5px 18px 12px 8px; box-shadow: 0 50px 130px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 95px rgba(54,230,255,.08); transform-origin: 50% 58%; will-change: transform; overflow: hidden; }
.x-paper::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 24%, rgba(255,255,255,.42), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.22), transparent 34% 70%, rgba(30,20,20,.08)); mix-blend-mode: soft-light; }
.x-paper::after { content:""; position:absolute; inset:auto -8% -10% 25%; height:28%; background: radial-gradient(ellipse, rgba(0,0,0,.28), transparent 70%); filter: blur(18px); }
.x-paper-main { top: 50%; left: 51%; }
.x-paper-fold { position:absolute; top:0; right:0; width:18%; aspect-ratio:1; background: linear-gradient(225deg, rgba(185,181,172,.78) 0 49%, transparent 50%); filter: drop-shadow(-8px 10px 12px rgba(0,0,0,.12)); opacity:.55; }
.x-task-text { position:absolute; z-index:2; inset: 18% 10% auto 14%; margin:0; font-family: var(--font-display); font-size: clamp(1.22rem, 2.1vw, 2.18rem); font-weight: 550; line-height:1.38; letter-spacing:-.03em; opacity: calc(1 - var(--solve, 0) * .72); transition: opacity .25s linear; }
.x-task-text mark { padding: 0 .08em; color: inherit; background: linear-gradient(transparent 58%, rgba(54,230,255,calc(.15 + var(--gather, 0) * .5)) 59% 92%, transparent 93%); }
.x-paper-data { position:absolute; z-index:3; left:14%; right:10%; bottom:15%; display:flex; flex-wrap:wrap; gap:10px; opacity: var(--gather, 0); transform: translateY(calc((1 - var(--gather, 0)) * 18px)); }
.x-paper-data span { padding:8px 12px; border:1px solid rgba(30,70,92,.22); border-radius:999px; background:rgba(255,255,255,.38); font-size:clamp(.74rem,1vw,.9rem); font-weight:800; box-shadow:0 7px 22px rgba(21,34,50,.08); }
.x-paper-solution { position:absolute; z-index:4; inset:21% 10% 12% 14%; display:flex; flex-direction:column; justify-content:center; gap:22px; opacity: var(--solve, 0); transform: translateY(calc((1 - var(--solve, 0)) * 35px)); }
.x-paper-solution p { margin:0; font-family:var(--font-display); font-size:clamp(1.05rem,1.75vw,1.72rem); line-height:1.45; }
.x-paper-solution strong { color:#101f32; font-size:1.22em; }
.x-paper-answer { padding-top:18px; border-top:2px solid rgba(38,74,96,.22); color:#101827; font-weight:760; }
.x-paper-answer::after { content:""; display:block; width:calc(100% * var(--finish, 0)); height:5px; margin-top:9px; border-radius:99px; background:linear-gradient(90deg, var(--x-cyan), var(--x-violet)); box-shadow:0 0 22px rgba(54,230,255,.4); }

.x-fragment { position:absolute; left:68%; top:47%; width:clamp(120px,12vw,190px); aspect-ratio:1.15; display:grid; place-items:center; color:#182337; background:url('/assets/images/notebook-paper.webp') center / 160% auto; border-radius:5px 12px 8px 4px; box-shadow:0 35px 80px rgba(0,0,0,.5), 0 0 35px rgba(54,230,255,.08); will-change:transform,opacity; }
.x-fragment span { font: 650 clamp(2.3rem,4vw,4.6rem)/1 var(--font-display); letter-spacing:-.08em; }
.x-fragment-a { margin-left:-12%; margin-top:-11%; }
.x-fragment-b { margin-left:8%; margin-top:-8%; }
.x-fragment-c { margin-left:5%; margin-top:11%; }
.x-word { position:absolute; z-index:-1; left:68%; top:51%; color:rgba(255,255,255,.22); font: 540 clamp(3rem,6vw,7rem)/1 var(--font-display); letter-spacing:-.06em; text-shadow:0 0 45px currentColor; will-change:transform,opacity; }
.x-word-a { margin-left:-19%; margin-top:-14%; color:rgba(54,230,255,.24); }
.x-word-b { margin-left:5%; margin-top:-4%; color:rgba(141,104,255,.26); }
.x-word-c { margin-left:-5%; margin-top:10%; color:rgba(255,79,200,.18); }
.x-orbit { position:absolute; left:72%; top:50%; width:clamp(420px,55vw,860px); aspect-ratio:1.7; border:1px solid rgba(54,230,255,.16); border-radius:50%; transform:translate(-50%,-50%) rotate(18deg); box-shadow:0 0 80px rgba(54,230,255,.035) inset; }
.x-orbit-a { opacity:calc(.3 + var(--gather,0) * .4); }
.x-orbit-b { width:clamp(330px,44vw,690px); border-color:rgba(141,104,255,.18); transform:translate(-50%,-50%) rotate(-25deg); opacity:calc(.15 + var(--solve,0) * .5); }

.x-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.x-button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:14px 22px; border-radius:999px; font-size:.78rem; font-weight:900; letter-spacing:.075em; text-transform:uppercase; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.x-button:hover { color:#fff; transform:translateY(-2px); }
.x-button-primary { color:#04101a; background:linear-gradient(110deg,#70efff,var(--x-cyan)); box-shadow:0 10px 40px rgba(54,230,255,.2),0 0 0 1px rgba(255,255,255,.5) inset; }
.x-button-primary:hover { color:#04101a; box-shadow:0 14px 52px rgba(54,230,255,.34),0 0 0 1px rgba(255,255,255,.6) inset; }
.x-button-secondary { color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.055); backdrop-filter:blur(12px); }
.x-button-secondary:hover { border-color:rgba(141,104,255,.6); background:rgba(141,104,255,.12); }
.x-button.is-disabled { opacity:.72; cursor:not-allowed; }
.x-scroll-cue { position:absolute; z-index:30; left:50%; bottom:22px; transform:translateX(-50%); display:grid; justify-items:center; gap:9px; color:rgba(255,255,255,.55); font-size:.62rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.x-scroll-cue i { width:1px; height:36px; background:linear-gradient(var(--x-cyan),transparent); animation:x-scroll 1.8s ease-in-out infinite; transform-origin:top; }

.x-manifesto, .x-statements, .x-access { position:relative; padding:clamp(120px,15vw,230px) clamp(24px,6vw,96px); overflow:hidden; }
.x-manifesto { min-height:100svh; display:grid; align-items:center; background:linear-gradient(160deg,#f0eee8 0%,#dfe5ea 64%,#cfdde2 100%); color:#0d1320; }
.x-manifesto::before { content:""; position:absolute; width:55vw; aspect-ratio:1; right:-18vw; top:-18vw; border-radius:50%; background:radial-gradient(circle,rgba(54,230,255,.26),transparent 67%); filter:blur(20px); }
.x-manifesto-grid { position:relative; z-index:2; width:min(1320px,100%); margin:auto; display:grid; grid-template-columns:minmax(180px,.4fr) 1.8fr 1fr; gap:clamp(28px,5vw,90px); align-items:start; }
.x-section-index { margin:0; font-size:.68rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; opacity:.52; }
.x-manifesto h2, .x-statements h2, .x-access h2, .x-split h2 { margin:0; font:520 clamp(3.7rem,7.2vw,8.4rem)/.9 var(--font-display); letter-spacing:-.075em; }
.x-manifesto h2 span { color:transparent; -webkit-text-stroke:1.2px rgba(13,19,32,.6); }
.x-manifesto-text { margin:12px 0 0; color:#3f4652; font-size:clamp(1rem,1.35vw,1.24rem); line-height:1.7; }
.x-phrase-loop { position:absolute; left:0; right:0; bottom:4vh; display:flex; width:max-content; color:rgba(13,19,32,.12); font:520 clamp(3rem,7vw,7.5rem)/1 var(--font-display); white-space:nowrap; animation:x-marquee 28s linear infinite; }
.x-phrase-loop span { padding-right:.22em; }

.x-split { min-height:110svh; display:grid; grid-template-columns:1.1fr .9fr; background:#050817; }
.x-split-visual { position:relative; min-height:760px; overflow:hidden; background:radial-gradient(circle at 45% 48%,rgba(54,230,255,.12),transparent 28%),radial-gradient(circle at 62% 62%,rgba(141,104,255,.18),transparent 35%); perspective:1200px; }
.x-note-plane { position:absolute; left:50%; top:50%; width:min(630px,70%); aspect-ratio:1.15; background:url('/assets/images/notebook-paper.webp') center/cover; border-radius:8px 22px 14px 6px; box-shadow:0 50px 120px rgba(0,0,0,.7); }
.x-note-plane-back { transform:translate(-62%,-57%) rotateX(62deg) rotateZ(-13deg); opacity:.26; filter:blur(2px); }
.x-note-plane-front { transform:translate(-48%,-48%) rotateX(50deg) rotateZ(7deg); padding:clamp(35px,5vw,72px); color:#142031; animation:x-paper-breathe 7s ease-in-out infinite; }
.x-note-label { margin:0 0 12%; color:#257b91; font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.x-note-step, .x-note-answer { margin:0 0 7%; font:570 clamp(1rem,1.5vw,1.42rem)/1.45 var(--font-display); }
.x-note-step b { display:inline-grid; width:32px; height:32px; margin-right:10px; place-items:center; border-radius:50%; color:#fff; background:#1e5e77; font-size:.75em; }
.x-note-answer { padding-top:7%; border-top:2px solid rgba(36,76,98,.2); font-weight:760; }
.x-light-streak { position:absolute; inset:20% -10%; background:url('/assets/images/luminous-ink.webp') center/contain no-repeat; mix-blend-mode:screen; opacity:.5; filter:blur(7px); animation:x-drift 8s ease-in-out infinite; }
.x-split-copy { align-self:center; padding:clamp(100px,10vw,170px) clamp(28px,6vw,100px); }
.x-split h2 { margin:28px 0 60px; font-size:clamp(3.2rem,5.8vw,7rem); }
.x-split h2 span { color:var(--x-cyan); }
.x-feature-lines { margin:0; }
.x-feature-lines > div { display:grid; grid-template-columns:70px 1fr; gap:14px; padding:24px 0; border-top:1px solid rgba(255,255,255,.13); }
.x-feature-lines > div:last-child { border-bottom:1px solid rgba(255,255,255,.13); }
.x-feature-lines dt { color:var(--x-cyan); font:760 .78rem/1 var(--font-display); }
.x-feature-lines dd { margin:0; display:grid; gap:6px; }
.x-feature-lines strong { font:620 clamp(1.08rem,1.5vw,1.35rem)/1.2 var(--font-display); }
.x-feature-lines span { color:var(--x-muted); }

.x-statements { min-height:100svh; background:linear-gradient(145deg,#100922,#060817 60%); }
.x-statements::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 18%,rgba(255,79,200,.16),transparent 25%),radial-gradient(circle at 18% 72%,rgba(54,230,255,.12),transparent 30%); }
.x-statements > * { position:relative; z-index:1; }
.x-statements h2 { width:min(1200px,100%); margin:45px 0 100px; }
.x-statements h2 span { color:transparent; -webkit-text-stroke:1.2px rgba(141,104,255,.9); text-shadow:0 0 45px rgba(141,104,255,.14); }
.x-statement-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.x-statement-row p { min-height:170px; margin:0; padding:30px clamp(20px,3vw,48px); display:flex; align-items:flex-end; color:rgba(255,255,255,.78); font-size:clamp(1rem,1.35vw,1.26rem); line-height:1.55; }
.x-statement-row p + p { border-left:1px solid rgba(255,255,255,.15); }

.x-access { min-height:92svh; display:grid; align-items:center; background:#ecedf0; color:#0d1320; }
.x-access-glow { position:absolute; width:70vw; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(54,230,255,.32),rgba(141,104,255,.15) 35%,transparent 68%); filter:blur(24px); animation:x-glow-pulse 7s ease-in-out infinite; }
.x-access-inner { position:relative; z-index:2; width:min(980px,100%); margin:auto; text-align:center; }
.x-access h2 { margin:34px 0; }
.x-access h2 span { color:transparent; -webkit-text-stroke:1.2px rgba(13,19,32,.58); }
.x-access-inner > p:not(.x-section-index):not(.x-warning) { width:min(680px,100%); margin:0 auto; color:#4c5564; font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.7; }
.x-access .x-actions { justify-content:center; }
.x-access .x-button-secondary { color:#151b27; border-color:rgba(13,19,32,.2); background:rgba(255,255,255,.45); }
.x-access .x-warning { margin:28px auto 0; color:#667080; font-size:.78rem; }

.x-footer { padding:72px clamp(24px,6vw,96px) 28px; background:#030611; }
.x-footer-inner { width:min(1320px,100%); margin:auto; display:grid; grid-template-columns:1fr 1.5fr; gap:70px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); }
.x-footer-brand { display:flex; align-items:center; gap:14px; }
.x-footer-brand img { width:40px; height:40px; border-radius:12px; }
.x-footer-brand div { display:grid; gap:5px; }
.x-footer-brand strong { font-family:var(--font-display); }
.x-footer-brand span { color:var(--x-muted); font-size:.82rem; }
.x-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px 28px; }
.x-footer nav a { color:rgba(255,255,255,.65); font-size:.78rem; }
.x-footer nav a:hover { color:var(--x-cyan); }
.x-footer-bottom { width:min(1320px,100%); margin:22px auto 0; display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.42); font-size:.74rem; }

.x-reveal { opacity:0; transform:translateY(55px); transition:opacity 1s cubic-bezier(.2,.75,.2,1),transform 1.1s cubic-bezier(.2,.75,.2,1); }
.x-reveal.is-visible { opacity:1; transform:none; }

@keyframes x-scroll { 0%,100%{transform:scaleY(.25);opacity:.3} 50%{transform:scaleY(1);opacity:1} }
@keyframes x-marquee { to{transform:translateX(-50%)} }
@keyframes x-paper-breathe { 0%,100%{transform:translate(-48%,-48%) rotateX(50deg) rotateZ(7deg) translateY(0)} 50%{transform:translate(-48%,-48%) rotateX(49deg) rotateZ(5deg) translateY(-13px)} }
@keyframes x-drift { 0%,100%{transform:translateX(-3%) scale(1);opacity:.35} 50%{transform:translateX(4%) scale(1.08);opacity:.62} }
@keyframes x-glow-pulse { 0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.7} 50%{transform:translate(-50%,-50%) scale(1.08);opacity:1} }

@media (max-width: 980px) {
  .x-nav a:not(.x-nav-cta) { display:none; }
  .x-mobile-menu { display:block; }
  .x-progress { right:12px; }
  .x-copy { left:24px; top:34%; width:calc(100% - 70px); }
  .x-copy h1,.x-copy h2 { font-size:clamp(3.7rem,13vw,7rem); }
  .x-copy > p:not(.x-eyebrow) { width:min(520px,88%); }
  .x-paper-main { left:42%; top:57%; width:min(760px,76vw); }
  .x-fragment,.x-word { left:63%; top:58%; }
  .x-orbit { left:57%; top:62%; }
  .x-manifesto-grid { grid-template-columns:1fr; }
  .x-manifesto-text { width:min(640px,100%); }
  .x-split { grid-template-columns:1fr; }
  .x-split-visual { min-height:680px; }
  .x-split-copy { padding-top:80px; }
  .x-statement-row { grid-template-columns:1fr; }
  .x-statement-row p { min-height:auto; padding:28px 0; }
  .x-statement-row p + p { border-left:0; border-top:1px solid rgba(255,255,255,.15); }
}

@media (max-width: 640px) {
  .x-header { padding:12px; }
  .x-header-inner { min-height:52px; border-radius:15px; }
  .x-brand img { width:34px; height:34px; }
  .x-brand span { font-size:.9rem; }
  .x-nav { display:none; }
  .x-mobile-menu summary { min-height:40px; padding:0 12px; font-size:.64rem; }
  .x-sticky { min-height:620px; }
  .x-copy { top:31%; left:18px; width:calc(100% - 52px); }
  .x-copy .x-eyebrow { margin-bottom:16px; font-size:.62rem; }
  .x-copy h1,.x-copy h2 { margin-bottom:18px; font-size:clamp(3.1rem,15vw,5.2rem); line-height:.83; }
  .x-copy > p:not(.x-eyebrow) { width:100%; font-size:.94rem; line-height:1.55; }
  .x-actions { margin-top:20px; gap:8px; }
  .x-button { min-height:46px; padding:12px 16px; font-size:.68rem; }
  .x-progress { display:none; }
  .x-scroll-cue { left:auto; right:16px; transform:none; }
  .x-paper-main { width:92vw; left:31%; top:59%; }
  .x-task-text { inset:15% 8% auto 14%; font-size:clamp(1rem,4.6vw,1.35rem); }
  .x-paper-data { left:14%; right:8%; bottom:11%; gap:5px; }
  .x-paper-data span { padding:5px 8px; font-size:.64rem; }
  .x-paper-solution { inset:16% 8% 8% 14%; gap:12px; }
  .x-paper-solution p { font-size:clamp(.86rem,3.9vw,1.1rem); }
  .x-fragment { width:27vw; left:62%; top:61%; }
  .x-word { display:none; }
  .x-orbit { left:52%; top:64%; width:96vw; }
  .x-manifesto,.x-statements,.x-access { padding:110px 20px; }
  .x-manifesto h2,.x-statements h2,.x-access h2,.x-split h2 { font-size:clamp(3rem,13vw,5.4rem); }
  .x-phrase-loop { bottom:2vh; }
  .x-split-visual { min-height:540px; }
  .x-note-plane { width:86%; }
  .x-note-plane-front { padding:32px; }
  .x-note-step,.x-note-answer { font-size:.86rem; }
  .x-split-copy { padding:90px 20px 110px; }
  .x-feature-lines > div { grid-template-columns:48px 1fr; }
  .x-statements h2 { margin-bottom:65px; }
  .x-footer { padding:60px 20px 24px; }
  .x-footer-inner { grid-template-columns:1fr; gap:38px; }
  .x-footer nav { justify-content:flex-start; flex-direction:column; gap:14px; }
  .x-footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .x-scroll-cue i,.x-phrase-loop,.x-note-plane-front,.x-light-streak,.x-access-glow { animation:none !important; }
  .x-reveal { opacity:1; transform:none; transition:none; }
  .x-copy { transition:none; }
  .x-cursor-light { display:none; }
}

/* Mobile composition refinement after visual QA. */
@media (max-width: 640px) {
  .x-fragment { top: 78%; left: 70%; }
  .x-fragment-a { margin-left: -8%; margin-top: -9%; }
  .x-fragment-b { margin-left: 5%; margin-top: -6%; }
  .x-fragment-c { margin-left: 2%; margin-top: 5%; }
}

/* Homepage V0.8 — real application screens inside the production-hardened cinematic experience. */
body.home-v8 {
  --x-bg:#030611;
  --x-ink:#f7fbff;
  --x-muted:rgba(231,239,255,.68);
  --x-cyan:#36e6ff;
  --x-violet:#8d68ff;
  --x-magenta:#ff4fc8;
  --x-paper:#ece8de;
  color:var(--x-ink);
  background:var(--x-bg);
  overflow-x:clip;
}
body.home-v8::before { opacity:.02; }
body.home-v8 a { text-decoration:none; }

.v7-demo {
  position:relative;
  min-height:112svh;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:clamp(40px,7vw,120px);
  align-items:center;
  padding:clamp(110px,11vw,180px) clamp(24px,7vw,112px);
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 76% 45%,rgba(54,230,255,.13),transparent 22%),
    radial-gradient(circle at 72% 48%,rgba(141,104,255,.24),transparent 38%),
    linear-gradient(145deg,#060816 0%,#09071b 52%,#030611 100%);
}
.v7-demo::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.23;
  background:url('/assets/images/cinematic-atmosphere.webp') center/cover no-repeat;
  filter:saturate(1.25) contrast(1.12) brightness(.48);
  transform:scale(1.06);
}
.v7-demo::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(3,6,17,.96) 0 34%,rgba(3,6,17,.58) 58%,rgba(3,6,17,.18)),
    radial-gradient(ellipse at 72% 52%,transparent 0 25%,rgba(3,6,17,.55) 68%,rgba(3,6,17,.92) 100%);
}
.v7-demo-copy { position:relative; z-index:3; max-width:700px; }
.v7-demo h2 {
  margin:30px 0 28px;
  font:620 clamp(3.5rem,6.2vw,7.8rem)/.91 var(--font-display);
  letter-spacing:-.058em;
}
.v7-demo h2 span {
  color:transparent;
  background:linear-gradient(105deg,#5ce9ff,#966fff 54%,#ff65d2);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 28px rgba(111,90,255,.18));
}
.v7-demo-copy>p:not(.x-section-index):not(.v7-real-note) {
  max-width:620px;
  margin:0;
  color:rgba(230,236,255,.72);
  font-size:clamp(1rem,1.35vw,1.22rem);
  line-height:1.72;
}
.v7-demo-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:38px 0 22px;
}
.v7-demo-tab {
  min-height:44px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:rgba(242,246,255,.72);
  background:rgba(9,12,31,.48);
  backdrop-filter:blur(12px);
  font:750 .74rem/1 var(--font-display);
  letter-spacing:.025em;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease;
}
.v7-demo-tab:hover { color:#fff; transform:translateY(-2px); border-color:rgba(99,234,255,.46); }
.v7-demo-tab.is-active {
  color:#fff;
  border-color:rgba(83,226,255,.72);
  background:linear-gradient(115deg,rgba(39,199,255,.22),rgba(129,78,255,.24));
  box-shadow:0 0 28px rgba(73,181,255,.17),inset 0 1px rgba(255,255,255,.16);
}
.v7-real-note {
  max-width:620px;
  margin:0;
  padding-left:18px;
  border-left:2px solid rgba(75,226,255,.6);
  color:rgba(205,216,242,.52);
  font-size:.78rem;
  line-height:1.65;
}
.v7-demo-stage {
  position:relative;
  z-index:2;
  min-height:760px;
  display:grid;
  place-items:center;
  perspective:1500px;
}
.v7-demo-halo {
  position:absolute;
  width:min(650px,88%);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(20,26,58,.1) 0 36%,transparent 37%),
    conic-gradient(from 15deg,rgba(54,230,255,.08),rgba(141,104,255,.9),rgba(255,79,200,.26),rgba(54,230,255,.72),rgba(54,230,255,.08));
  padding:3px;
  opacity:.78;
  filter:drop-shadow(0 0 46px rgba(121,76,255,.45));
  animation:v7-halo-turn 24s linear infinite;
}
.v7-demo-halo::after {
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(11,13,35,.48),rgba(3,6,17,.94) 69%);
}
.v7-phone-shell {
  position:relative;
  z-index:3;
  width:min(390px,67%);
  aspect-ratio:471/899;
  padding:10px;
  border:1px solid rgba(198,216,255,.34);
  border-radius:clamp(34px,4vw,54px);
  background:linear-gradient(145deg,#212638 0%,#050711 27%,#171a27 58%,#04050a 100%);
  box-shadow:
    -25px 42px 90px rgba(0,0,0,.74),
    0 0 0 2px rgba(4,6,13,.92),
    inset 2px 2px 3px rgba(255,255,255,.18),
    inset -2px -2px 4px rgba(0,0,0,.85),
    0 0 70px rgba(98,74,255,.28);
  transform:rotateY(-10deg) rotateX(2deg) rotateZ(1.2deg);
  transform-style:preserve-3d;
  animation:v7-phone-float 7s ease-in-out infinite;
}
.v7-phone-shell::before {
  content:"";
  position:absolute;
  inset:-16px -14px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(89,229,255,.24),transparent 26% 70%,rgba(210,69,255,.22));
  filter:blur(12px);
}
.v7-phone-speaker {
  position:absolute;
  z-index:5;
  top:19px;
  left:50%;
  width:24%;
  height:8px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#02030a;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  opacity:.88;
}
.v7-phone-screen {
  position:absolute;
  inset:10px;
  overflow:hidden;
  border-radius:clamp(26px,3.5vw,44px);
  background:#02040d;
  box-shadow:inset 0 0 0 1px rgba(91,216,255,.15);
}
.v7-phone-screen img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.75,.2,1),filter .3s ease;
}
.v7-phone-screen img.is-switching { opacity:.08; transform:scale(1.018); filter:blur(5px); }
.v7-phone-glare {
  position:absolute;
  inset:11px;
  z-index:4;
  border-radius:clamp(26px,3.5vw,44px);
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.17),transparent 17% 69%,rgba(111,219,255,.06));
  mix-blend-mode:screen;
}
.v7-demo-caption {
  position:absolute;
  z-index:5;
  right:0;
  bottom:7%;
  display:grid;
  gap:6px;
  min-width:250px;
  padding:17px 20px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(4,7,18,.66);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 65px rgba(0,0,0,.36);
}
.v7-demo-caption span { color:rgba(215,225,246,.5); font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.v7-demo-caption strong { font:620 1rem/1.2 var(--font-display); }

@keyframes v7-phone-float {
  0%,100% { transform:rotateY(-10deg) rotateX(2deg) rotateZ(1.2deg) translateY(0); }
  50% { transform:rotateY(-7deg) rotateX(1deg) rotateZ(.2deg) translateY(-16px); }
}
@keyframes v7-halo-turn { to { transform:rotate(360deg); } }

@media (max-width:1040px) {
  .v7-demo { grid-template-columns:1fr; min-height:auto; }
  .v7-demo-copy { max-width:850px; }
  .v7-demo-stage { min-height:720px; }
  .v7-demo-caption { right:7%; }
}
@media (max-width:640px) {
  .v7-demo { padding:105px 20px 90px; gap:38px; }
  .v7-demo h2 { font-size:clamp(3rem,13vw,5.1rem); }
  .v7-demo-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .v7-demo-tab { width:100%; padding:0 10px; }
  .v7-demo-stage { min-height:610px; }
  .v7-phone-shell { width:min(310px,82%); transform:rotateY(-5deg) rotateZ(.5deg); }
  .v7-demo-halo { width:110%; }
  .v7-demo-caption { left:8px; right:8px; bottom:0; min-width:0; }
}
@media (prefers-reduced-motion:reduce) {
  .v7-phone-shell,.v7-demo-halo { animation:none !important; }
}


/* V0.8 production hardening: lower rendering cost and preserve a complete static fallback. */
.x-manifesto,.v7-demo,.x-split,.x-statements,.x-access,.x-footer{
  content-visibility:auto;
  contain-intrinsic-size:900px;
}
.v7-demo-stage{touch-action:pan-y;}
.v7-demo-tab:focus-visible,.c-button:focus-visible,.x-button:focus-visible,.x-nav a:focus-visible,.x-footer a:focus-visible{
  outline:3px solid rgba(102,234,255,.95);
  outline-offset:4px;
}
.v7-demo-stage[aria-busy="true"] .v7-phone-screen{filter:saturate(.86) brightness(.82);}

@media (max-width:640px){
  .x-manifesto,.v7-demo,.x-split,.x-statements,.x-access,.x-footer{contain-intrinsic-size:1200px;}
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}