/* Version 1: an editorial shell around an immersive particle stage. */
:root {
  --bg: #f0f1f7;
  --text: #171820;
  --text-2: #60616d;
  --text-3: #797b88;
  --line: rgba(23, 24, 32, .13);
  --line-2: rgba(23, 24, 32, .2);
  --blue: #3049f6;
  --blue-text: #839aff;
  --blue-focus: #5269ff;
  --dot-ink: #eaf0ff;
  --dot-accent: #6888ff;
  --gutter: clamp(20px, 4.5vw, 72px);
  --max: 1600px;
  --radius-lg: 28px;
  color-scheme: light;
}
body { background: var(--bg); }
body.menu-open { overflow: hidden; }
#story, #story > .scene, .hero-pin, .hero-a { z-index: auto; }
#dots { z-index: 2; }
.thread { z-index: 2; }
.nav { z-index: 30; height: 104px; gap: 24px; }
.nav.is-scrolled { background: rgba(240, 241, 247, .88); backdrop-filter: blur(20px); box-shadow: none; }
.nav-brand { font-size: 25px; letter-spacing: -.055em; }
.nav-brand svg { fill: currentColor; width: 24px; height: 24px; }
.nav-cta { align-items: center; gap: 10px; }
.nav-pill { height: 44px; padding: 0 20px; background: #171820; border: 0; color: #fff; font-size: 12px; }
.nav-pill svg { width: 14px; height: 14px; margin-left: 12px; }
.menu-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; padding: 0 22px; border: 0; border-radius: 99px; background: #171820; color: #fff; font: 500 12px var(--font-sans); cursor: pointer; }
.menu-toggle span { margin-right: 12px; }
.menu-toggle i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: transform .3s; }
.menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateX(4px) scale(1.4); }
.menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateX(-4px) scale(1.4); }
.nav-links { display: flex; position: fixed; top: 92px; right: var(--gutter); width: min(440px, calc(100vw - var(--gutter) * 2)); padding: 24px; flex-direction: column; gap: 0; border: 1px solid rgba(0,0,0,.06); border-radius: 24px; background: #f9faff; box-shadow: 0 30px 100px rgba(20, 25, 55, .15); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
.nav-links.is-open { visibility: visible; opacity: 1; transform: none; }
.nav-links a { display: flex; align-items: center; justify-content: space-between; color: #171820; padding: 16px 4px; font-size: 32px; letter-spacing: -.05em; border-bottom: 1px solid var(--line); }
.nav-links a:last-child { border: 0; }
.nav-links a::after { content: "↗"; font-size: 23px; }
.nav-links a:hover, .nav-links a.is-active { color: var(--blue); }
.scene { padding: clamp(100px, 10vw, 180px) 0; min-height: auto; scroll-margin-top: 104px; }
.scene + .scene { box-shadow: none; }
.s-hero { padding: 0; height: 220svh; }
.hero-pin { min-height: 720px; height: 100svh; overflow: hidden; }
.hero-cursor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.hero-surface-dots { position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none; }
.nav-links { z-index: 2; }
/* Cut out only the cursor neighbourhood; preserve native UI everywhere else. */
.is-point-surface { clip-path: var(--point-cutout); }
@media (prefers-reduced-motion: reduce) { .hero-cursor, .hero-surface-dots { display: none; } }
.hero-a { display: block; padding: 0; transform: none; }
.hero-head { position: absolute; top: clamp(122px, 13svh, 160px); left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; z-index: 3; }
.hero-title { margin: 0; text-align: left; font-size: clamp(38px, 4.55vw, 78px); line-height: 1.1; font-weight: 500; letter-spacing: -.065em; color: #171820; background: none; -webkit-text-fill-color: currentColor; text-wrap: initial; word-break: keep-all; }
.hero-actions { justify-content: flex-end; padding-bottom: 7px; gap: 8px; }
.btn { height: 48px; padding: 0 24px; font-weight: 500; background: var(--blue); }
.btn-glow, .btn-glass { height: 48px; font-size: 13px; padding: 0 20px; box-shadow: none; backdrop-filter: none; }
.btn-glow { background: var(--blue); color: #fff; }
.btn-glass { background: #e1e3ee; color: #171820; }
#hero .hero-actions > a { background: #171820; color: #fff; }
.hero-theatre { position: absolute; z-index: 0; top: calc(34svh * (1 - var(--hp)) + 104px * var(--hp)); bottom: 38px; left: var(--gutter); right: var(--gutter); border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 70% 110% at 78% 70%, #151f53 0%, transparent 66%), radial-gradient(ellipse 70% 100% at 0% 30%, #162652 0%, transparent 65%), #080b16; }
.hero-theatre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3,5,15,.65)); pointer-events: none; }
.theatre-orbit { position: absolute; inset: 12% -5%; border-radius: 50%; border: 1px solid rgba(118,146,255,.1); transform: rotate(-12deg); box-shadow: 0 0 100px rgba(71,105,255,.08), inset 0 0 80px rgba(74,105,255,.05); }
.theatre-cross { position: absolute; color: #d3ddff; font: 300 25px var(--font-mono); opacity: .5; }
.cross-a { top: 24px; left: 28px; }
.cross-b { bottom: 24px; right: 28px; }
.hero-word { position: absolute; left: calc(var(--gutter) + 3vw); right: calc(var(--gutter) + 3vw); top: 57%; height: 25%; width: auto; margin: 0; }
.hero-word-fallback { font-weight: 600; letter-spacing: -.065em; font-size: 16vw; }
.hero-hint { z-index: 3; bottom: 12px; font-size: 11px; color: #60616d; letter-spacing: .015em; }
.hero-hint svg { animation: none; }
.hero-b { z-index: 3; color: #f3f5ff; --text: #f3f5ff; --text-2: #9ea9c5; --text-3: #707f9f; padding-top: clamp(150px, 23svh, 240px); }
.hc-k { color: #9babff; font-size: 11px; letter-spacing: .1em; }
.hc-title { font-size: clamp(28px, 4vw, 60px); max-width: 950px; font-weight: 500; line-height: 1.15; }
.hc-pill { width: min(820px, 100%); background: rgba(244,246,255,.06); box-shadow: inset 0 0 0 1px rgba(176,191,255,.24), 0 30px 100px rgba(0,0,0,.25); }
.hc-out.vd { width: min(820px, 100%); max-height: 40svh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #303b69 transparent; }
.hc-empty { background: transparent; border: 0; font-size: 13px; color: #8994b2; }
.hc-ans { background: rgba(16,22,43,.9); }
.lin-head { position: relative; z-index: 3; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px 8vw; align-items: end; padding-top: 34px; border-top: 1px solid var(--line); }
.section-index { position: absolute; left: 0; top: 0; transform: translateY(-40px); font: 400 12px var(--font-mono); color: var(--text-3); }
h2 { font-size: clamp(38px, 5.6vw, 90px); font-weight: 500; letter-spacing: -.06em; line-height: 1.08; word-break: keep-all; }
.lin-lead { color: var(--text-2); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.7; max-width: 30em; }
.lin-more { margin-top: 24px; font-size: 13px; color: #171820; border-bottom: 1px solid var(--line-2); padding-bottom: 8px; gap: 32px; }
.lin-more svg { width: 18px; height: 18px; }
.conv { width: 100%; margin: 64px 0 0; height: clamp(620px, 60vw, 820px); border-radius: 28px; background: radial-gradient(ellipse 45% 60% at 50% 56%, #233675, transparent 80%), #090c17; color: #eef1ff; overflow: hidden; }
.conv::before, .conv::after { content: ""; position: absolute; border: 1px solid rgba(148,169,255,.1); border-radius: 50%; width: 66%; height: 60%; left: 17%; top: 21%; transform: rotate(-15deg); }
.conv::after { transform: rotate(15deg); width: 44%; left: 28%; }
.conv-src, .conv-dest { z-index: 3; background: rgba(22,28,48,.82); border-radius: 14px; backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(188,201,255,.18); }
.conv-src { width: clamp(146px, 13.3vw, 200px); margin-top: 38px; padding: 14px; }
.conv-src small { color: #858ea7; }
.conv-src em, .conv-dest em { color: #a2afcc; border-color: rgba(169,186,235,.14); }
.conv-core { top: 57%; z-index: 3; }
.conv-logo { width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #839aff, #344cf8 45%, #15258a 100%); box-shadow: inset 0 0 0 1px rgba(195,207,255,.5), 0 0 100px rgba(69,104,255,.22); }
.conv-logo svg { width: 54px; height: 54px; }
.conv-core p { color: #a2afcc; gap: 4px; font-size: 12px; }
.conv-core p b { color: #e1e8ff; font-size: 16px; letter-spacing: -.03em; }
.conv-dest { bottom: 36px; width: 300px; }
.conv-av.is-now { background: #5167ff; }
.frag-one { z-index: 3; width: min(940px, 85%); margin-top: -12px; }
.frag-one > .sw-shell { mask-image: none; -webkit-mask-image: none; border-radius: 24px; box-shadow: 0 25px 80px rgba(14,22,60,.14); }
.frag-list li { padding: 16px 0; }
.frag-hist { margin-top: 22px; }
.s-voice { margin: 100px var(--gutter) 0; padding: 100px 0 88px; border-radius: 32px; color: #f2f4ff; background: radial-gradient(ellipse 55% 60% at 22% 76%, rgba(44,62,137,.48), transparent), #090c17; --text: #f2f4ff; --text-2: #9ea9c5; --text-3: #707f9f; --line: rgba(184,199,244,.16); --line-2: rgba(184,199,244,.2); }
.s-voice .wrap { width: calc(100% - clamp(40px, 7vw, 112px)); }
#voice .lin-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 6vw; }
.s-voice .lin-more { color: #dce5ff; }
.voice-stage { margin-top: 70px; }
.voice-wave { width: min(540px, 43vw); left: 21%; top: 37%; }
.voice-stage #voice-demo { z-index: 3; }
.vd { color-scheme: dark; }
.vd-ctrl { gap: 22px; }
.vd-mic { background: rgba(43,56,101,.4); color: #eef2ff; box-shadow: inset 0 0 0 1px rgba(184,199,244,.2); }
.vd-mic-wrap { width: 160px; height: 160px; }
.vd-mic { width: 106px; height: 106px; }
.vd-app { background: rgba(24,30,49,.88); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(184,199,244,.16), 0 35px 80px rgba(0,0,0,.3); }
.vd-status { color: #9ea9c5; }
.vd-chip { color: #bcc6df; box-shadow: inset 0 0 0 1px rgba(184,199,244,.22); }
.vd-notice { color: #a9b5d2; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(184,199,244,.14); }
.s-board { padding-top: 170px; }
.frame-fit { z-index: 3; margin-top: 64px; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 90px rgba(16,28,70,.12); }
.frame-inner { border-radius: 28px; }
.frag-board { width: min(1100px, 92%); margin-top: 32px; }
.frag-board > .sw-shell { mask-image: none; -webkit-mask-image: none; }
.s-contact { margin-top: 30px; padding: 100px 0 60px; }
.s-contact .copy { position: relative; z-index: 3; text-align: left; border-top: 1px solid var(--line); padding-top: 36px; margin-bottom: 50px; }
.s-contact .eyebrow { font-size: 13px; margin-bottom: 20px; }
.s-contact h2 { max-width: 1100px; font-size: clamp(44px, 7.8vw, 124px); }
.s-contact .lead { margin-left: 0; max-width: none; }
.contact-grid { position: relative; z-index: 3; gap: 16px; }
.offer { padding: 40px; color: #252632; background: #e4e6f0; border-radius: 24px; }
.offer:nth-child(2) { background: #dce1f4; }
.offer h3 { font-size: 30px; }
.offer-sub { font-size: 15px; }
.checks li { align-items: start; line-height: 1.6; }
.checks svg { margin-top: 4px; flex: none; }
.btn-outline { color: #252632; background: transparent; box-shadow: inset 0 0 0 1px rgba(23,24,32,.2); }
.channels li a { grid-template-columns: 22px 92px 1fr; gap: 10px; }
.foot { display: grid; position: relative; z-index: 3; grid-template-columns: 1fr auto; gap: 32px; padding-bottom: 32px; font-size: 12px; }
.footer-word { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: clamp(64px, 15.8vw, 280px); font-weight: 600; line-height: 1; letter-spacing: -.085em; color: #191b27; }
.footer-word svg { width: 9vw; height: 9vw; max-width: 150px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.reveal { transform: translateY(28px); }
@media (hover: hover) {
  .nav-pill:hover { background: #171820; }
  .btn-glow:hover { background: #1b35eb; }
  .btn-glass:hover { background: #d5d8e8; }
  .btn-outline:hover { background: rgba(255,255,255,.35); }
  .footer-word:hover { color: #3049f6; }
}
@media (max-width: 1100px) {
  .hero-head { grid-template-columns: 1fr; gap: 18px; }
  .hero-actions { justify-content: flex-start; }
  .hero-theatre { top: calc(40svh * (1 - var(--hp)) + 94px * var(--hp)); }
  .hero-word { top: 60%; height: 22%; }
  .lin-head, #voice .lin-head { gap: 28px 40px; }
  .conv-src { width: 146px; padding: 10px; }
  .conv-src b { font-size: 12px; }
  .conv-src em { font-size: 10px; }
}
@media (max-width: 760px) {
  .nav { height: 84px; }
  .nav-brand { font-size: 21px; }
  .nav-brand svg { width: 21px; height: 21px; }
  .nav-pill { padding: 0 13px; height: 38px; font-size: 11px; }
  .nav-pill svg { margin-left: 2px; }
  .menu-toggle { height: 38px; padding: 0 14px; }
  .menu-toggle span { display: none; }
  .nav-links { top: 76px; }
  .scene { padding: 96px 0; scroll-margin-top: 84px; }
  .s-hero { padding: 0; height: 210svh; }
  .hero-pin { min-height: 600px; }
  .hero-head { top: 112px; gap: 20px; }
  .hero-title { font-size: clamp(32px, 6.8vw, 52px); letter-spacing: -.065em; }
  .hero-actions { padding: 0; }
  .btn-glow, .btn-glass { height: 42px; padding: 0 16px; font-size: 12px; }
  .hero-theatre { top: calc(320px * (1 - var(--hp)) + 84px * var(--hp)); bottom: 40px; border-radius: 22px; }
  .hero-word { top: 50%; height: 32%; left: calc(var(--gutter) + 2vw); right: calc(var(--gutter) + 2vw); }
  .hero-word-fallback { font-size: 27vw; line-height: .9; text-align: center; }
  .hero-word-fallback b { display: block; }
  .theatre-cross { font-size: 20px; }
  .cross-a { left: 20px; top: 16px; }
  .cross-b { right: 20px; bottom: 16px; }
  .hero-b { padding: 160px calc(var(--gutter) + 16px) 0; }
  .hc-title { font-size: 32px; word-break: keep-all; }
  .hc-out.vd { max-height: 36svh; }
  .hc-ans { padding: 14px; }
  .hc-a { font-size: 14px; }
  .hc-empty { padding: 14px 4px; }
  .lin-head, #voice .lin-head { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  h2 { font-size: clamp(36px, 7.4vw, 54px); }
  .lin-lead { max-width: none; font-size: 15px; }
  .lin-more { margin-top: 16px; }
  .conv { height: 620px; margin-top: 36px; border-radius: 22px; }
  .conv-src { width: 90px; grid-template-columns: 1fr; justify-items: center; border-radius: 14px; padding: 10px 6px; gap: 7px; margin-top: 0; }
  .conv-src span { display: flex; }
  .conv-src b { font-size: 11px; }
  .conv-src small, .conv-src em { display: none; }
  .conv-src:nth-child(1), .conv-src:nth-child(4) { left: 18%; }
  .conv-src:nth-child(2), .conv-src:nth-child(5) { left: 50%; }
  .conv-src:nth-child(3), .conv-src:nth-child(6) { left: 82%; }
  .conv-src:nth-child(-n+3) { top: 24px; }
  .conv-src:nth-child(n+4) { top: 126px; }
  .conv-core { top: 61%; }
  .conv-logo { width: 108px; height: 108px; }
  .conv-dest { width: min(280px, 84%); bottom: 24px; }
  .frag-one { width: 92%; margin-top: 20px; }
  .frag-one > .sw-shell { padding: 6px; border-radius: 18px; }
  .frag-list li { font-size: 13px; }
  .frag-hist { font-size: 11px; }
  .s-voice { margin-top: 16px; padding: 88px 0 48px; border-radius: 24px; }
  .s-voice .wrap { width: calc(100% - 36px); }
  .voice-stage { margin-top: 40px; }
  .voice-wave { width: min(330px, 74vw); left: 50%; top: 160px; }
  .vd-ctrl { min-height: 330px; padding: 20px 0; }
  .vd-mic-wrap { width: 132px; height: 132px; }
  .vd-app { height: 520px; border-radius: 18px; }
  .vd-chip { font-size: 11px; padding: 8px 10px; }
  .frame-fit { margin-top: 36px; border-radius: 18px; }
  .frag-board { width: 100%; margin-top: 20px; }
  .frag-board .sw-cols { gap: 8px; padding: 12px 8px; }
  .frag-board .sw-col { min-width: 0; }
  .frag-board .sw-task { padding: 10px 8px; }
  .frag-board .sw-r1 { flex-wrap: wrap; }
  .frag-board .sw-col-h { font-size: 11px; gap: 5px; }
  .frag-board .sw-r2 p { font-size: 11px; word-break: break-word; }
  .frag-board .sw-r1 > span:first-child { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .s-contact { padding-top: 56px; }
  .s-contact h2 { font-size: clamp(36px, 8vw, 56px); }
  .s-contact .lead { font-size: 15px; }
  .offer { padding: 28px 24px; }
  .offer h3 { font-size: 25px; }
  .checks li { font-size: 13px; gap: 10px; }
  .channels li a { grid-template-columns: 18px 1fr; font-size: 14px; }
  .channels .k { display: none; }
  .foot { grid-template-columns: 1fr; padding-top: 24px; gap: 16px; }
  .footer-word { margin-bottom: 8px; font-size: 15.2vw; gap: 12px; }
  .foot-dim { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-a, .hero-b { opacity: 1; }
  .hero-a { position: relative; min-height: 100svh; }
  .hero-b { position: relative; padding: 80px calc(var(--gutter) + 16px); background: #090c17; border-radius: 24px; margin: 0 var(--gutter); pointer-events: auto; }
  .hero-pin { height: auto; overflow: visible; }
  .s-hero { height: auto; }
  .hero-theatre { top: 34svh; bottom: auto; height: 60svh; }
  .hero-word { top: 61svh; height: 20svh; }
  .hero-head { position: absolute; }
  .hero-hint { display: none; }
  .hc-k, .hc-title, .hc-out { transform: none; }
  .hc-out.vd { max-height: none; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 360px) {
  .nav { gap: 12px; }
  .nav-pill { width: 38px; padding: 0; font-size: 0; gap: 0; justify-content: center; }
  .nav-pill svg { width: 16px; height: 16px; margin: 0; }
}


/* The opening stage expands into one continuous dark landing page. */
body { background: #080b16; }
.hero-pin { background: #f0f1f7; --stage-open: 0; }
.hero-theatre {
  --stage-top: calc(34svh * (1 - var(--hp)) + 104px * var(--hp));
  top: calc(var(--stage-top) * (1 - var(--stage-open)));
  left: calc(var(--gutter) * (1 - var(--stage-open)));
  right: calc(var(--gutter) * (1 - var(--stage-open)));
  bottom: calc(38px * (1 - var(--stage-open)));
  border-radius: calc(28px * (1 - var(--stage-open)));
}
#nav.sw-site-header.is-dark {
  --nav-ink: #eff2ff;
  --nav-muted: #b2bdd4;
  --nav-surface: #080b16ed;
  --nav-panel: #101626;
  --nav-line: #2c354b;
  --nav-hover: #1c253b;
  --nav-accent: #5269ff;
  color-scheme: dark;
}
#nav.is-dark .nav-brand { color: #eff2ff; }
#nav.is-dark .nav-pill, #nav.is-dark .menu-toggle { background: #eff2ff; color: #080b16; }
#story > .scene:not(#hero), .foot {
  --bg: #080b16;
  --text: #eff2ff;
  --text-2: #a5b1ca;
  --text-3: #7e8ba9;
  --line: rgba(177, 193, 231, .14);
  --line-2: rgba(177, 193, 231, .22);
  color: var(--text);
  color-scheme: dark;
  background: #080b16;
}
#story > .scene:not(#hero) .lin-more { color: #d9e3ff; }
#story > .scene:not(#hero) .lin-lead { color: #a5b1ca; }
.s-memory .conv {
  background: radial-gradient(ellipse 45% 60% at 50% 56%, rgba(35, 54, 117, .4), transparent 80%);
  border-radius: 0;
}
#voice.s-voice {
  margin: 0;
  border-radius: 0;
  padding: clamp(100px, 10vw, 180px) 0;
  background: radial-gradient(ellipse 55% 60% at 22% 76%, rgba(44, 62, 137, .2), transparent), #080b16;
}
#voice.s-voice .wrap { width: min(var(--max), 100% - var(--gutter) * 2); }
.s-contact .offer { color: #eff2ff; background: #12192b; }
.s-contact .offer:nth-child(2) { background: #101625; }
.s-contact .offer-sub { color: #a5b1ca; }
.s-contact .btn-outline { color: #eff2ff; background: transparent; box-shadow: inset 0 0 0 1px rgba(177, 193, 231, .24); }
.s-contact .btn-outline:hover { background: #1c253b; }
.foot .footer-word { color: #eff2ff; }
.foot .footer-word:hover { color: #839aff; }
@media (max-width: 1100px) {
  .hero-theatre { --stage-top: calc(40svh * (1 - var(--hp)) + 94px * var(--hp)); }
}
@media (max-width: 760px) {
  .hero-theatre { --stage-top: calc(320px * (1 - var(--hp)) + 84px * var(--hp)); }
  #voice.s-voice { padding: 96px 0 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-b { margin: 0; border-radius: 0; background: #080b16; padding-inline: var(--gutter); }
  .hero-theatre { top: 34svh; left: var(--gutter); right: var(--gutter); bottom: auto; border-radius: 28px; }
}