/* c2h / quiet presence — single-purpose holding page */
:root {
  color-scheme: dark;
  --ink: #0d181d;
  --white: #f0f2ef;
  --muted: #9caeb2;
  --line: rgba(211, 232, 231, .17);
  --accent: #b5d2c9;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; color: var(--white); background: var(--ink); font-family: var(--body-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
::selection { color: #0e1920; background: #b5d2c9; }
.skip-link { position: fixed; top: -75px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 3px; background: #f0f2ef; color: #102027; }
.skip-link:focus { top: 12px; }
.site-shell { position: relative; min-height: 100svh; isolation: isolate; }
.site-header { position: absolute; z-index: 12; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(27px, 3.7vw, 52px) clamp(24px, 6vw, 112px); }
.site-brand { display: flex; align-items: center; gap: 17px; width: fit-content; min-width: 0; }
.site-brand img { width: 86px; height: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,.04)); }
.brand-divider { display: block; align-self: stretch; width: 1px; min-height: 30px; margin: 1px 1px; background: rgba(215,230,229,.23); }
.brand-caption { font-size: 9px; letter-spacing: .15em; font-weight: 600; line-height: 1.8; color: #a3b1b5; white-space: nowrap; }
.header-external { display: flex; align-items: center; gap: 12px; padding: 9px 0 9px 4px; font-size: 12px; letter-spacing: .04em; color: rgba(239,242,239,.78); transition: color .2s ease; }
.header-external:hover, .footer-links a:hover { color: #fff; }
.header-external svg { width: 16px; height: 16px; transition: transform .2s ease; }
.header-external:hover svg { transform: translate(2px,-2px); }
.journey { position: relative; height: 255vh; height: 255svh; }
.stage { --intro-opacity: 1; --intro-offset: 0px; --device-opacity: 1; --device-left: 73%; --device-top: 51%; --device-rotation: -13deg; --device-scale: .94; --reveal-opacity: 0; --reveal-shift: 32px; --scroll-opacity: 1; --index-opacity: 1;
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 500px; overflow: hidden; background: #0d181d; isolation: isolate; }
.atmosphere, .atmosphere-grid, .atmosphere-glow, .atmosphere-glow-secondary, .atmosphere-sheen, .atmosphere-tides, .atmosphere-pointer-glow, .atmosphere-grain, #atmosphere-canvas { position: absolute; inset: 0; pointer-events: none; }
.atmosphere { z-index: 0; overflow: hidden; background:
  radial-gradient(ellipse 72% 75% at 84% 53%, rgba(57,111,117,.35), transparent 70%),
  linear-gradient(115deg,#0b1419 9%, #10232b 56%, #0a161c 100%); }
.atmosphere::before { position: absolute; inset: 0; content: ''; background: radial-gradient(ellipse at 35% 120%, rgba(76,104,107,.08), transparent 65%); }
.atmosphere-glow { inset: auto; left: 60%; top: 35%; width: min(75vw,1200px); aspect-ratio: 1; border-radius: 50%; transform: translate3d(-50%,-50%,0); background: radial-gradient(circle,rgba(90,187,165,.32) 0%,rgba(68,140,146,.15) 31%,transparent 68%); will-change: transform; }
.atmosphere-glow-secondary { inset: auto; left: 31%; top: 5%; width: min(64vw, 970px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse,rgba(76,146,161,.19) 0%,rgba(72,112,135,.070) 44%,transparent 69%); will-change: transform; }
.atmosphere-sheen { left: 26%; top: -23%; width: 53%; height: 145%; background: linear-gradient(103deg,transparent 22%,rgba(116,176,173,.028) 38%,rgba(143,212,199,.13) 51%,transparent 66%); transform: rotate(-14deg); transform-origin: center; animation: sheen-drift 11s ease-in-out infinite alternate; }
@keyframes sheen-drift { from { transform: translateX(-13%) rotate(-17deg); opacity: .63; } to { transform: translateX(17%) rotate(-5deg); opacity: 1; } }
.atmosphere-tides { inset: -22% -13% -19% 18%; background: radial-gradient(ellipse 30% 39% at 56% 37%, rgba(121,218,198,.18), transparent 80%), radial-gradient(ellipse 37% 42% at 82% 72%, rgba(75,155,170,.15), transparent 78%); filter: blur(35px); opacity: .9; mix-blend-mode: screen; animation: ambient-tides 13s ease-in-out infinite alternate; }
@keyframes ambient-tides { from { transform: translate3d(-3%,-3%,0) rotate(-6deg) scale(.95); opacity: .65; } to { transform: translate3d(5%,4%,0) rotate(7deg) scale(1.10); opacity: 1; } }
.atmosphere-pointer-glow { inset: auto; left: 0; top: 0; width: min(65vw,780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(158,237,216,.19) 0%, rgba(103,181,178,.12) 26%,transparent 66%); mix-blend-mode: screen; opacity: .93; transform: translate3d(70vw,46vh,0) translate(-50%,-50%); will-change: transform; }
.atmosphere-grid { inset: 4% 0 0 37%; opacity: .35; background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(166,196,194,.09) 100%), linear-gradient(0deg, transparent calc(100% - 1px), rgba(166,196,194,.06) 100%); background-size: 89px 89px; -webkit-mask-image: linear-gradient(90deg,transparent,#000 58%,transparent); mask-image: linear-gradient(90deg,transparent,#000 58%,transparent); }
#atmosphere-canvas { width: 100%; height: 100%; opacity: calc(.97 * var(--flow-recede, 1)); -webkit-mask-image: linear-gradient(90deg,transparent 2%,rgba(0,0,0,.50) 38%,#000 82%); mask-image: linear-gradient(90deg,transparent 2%,rgba(0,0,0,.50) 38%,#000 82%); }
.atmosphere-grain { opacity: .16; background-image: url("noise.svg"); background-repeat: repeat; background-size: 160px 160px; mix-blend-mode: screen; }
.intro { position: absolute; z-index: 3; left: clamp(26px, 9.5vw, 184px); top: 49%; width: min(63%, 830px); transform: translateY(calc(-50% + var(--intro-offset))); opacity: var(--intro-opacity); pointer-events: none; }
.intro a { pointer-events: auto; }
.eyebrow, .intro-domain, .intro-text, .scroll-cta, .reveal-overline, .powered > span, .scroll-prompt, .side-index, .display-top, .display-overline, .display-bottom { font-family: var(--body-font); }
.eyebrow { display: flex; align-items: center; gap: 13px; color: #abc9c6; font-size: 10px; font-weight: 600; letter-spacing: .245em; line-height: 1.5; }
.eyebrow-rule { display: inline-block; height: 1px; width: 27px; flex: 0 0 27px; background: #c1d9d2; }
.intro-domain { display: inline-block; max-width: 95%; margin: 42px 0 18px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: #aebfc0; font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(13px,1.1vw,15px); letter-spacing: .01em; overflow-wrap: anywhere; }
.intro h1 { margin: 0; color: var(--white); font-weight: 500; font-size: clamp(57px,6.3vw,108px); letter-spacing: -.067em; line-height: 1.055; text-wrap: balance; }
.intro h1 em { font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.068em; color: #c8d4d1; }
.intro-text { margin: 28px 0 0; color: #afbfc0; font-size: clamp(15px,1.25vw,17px); line-height: 1.72; font-weight: 350; letter-spacing: .008em; }
.scroll-cta { display: inline-flex; align-items: center; gap: 19px; width: fit-content; margin-top: 49px; color: #d6e4e0; font-size: 12px; font-weight: 500; letter-spacing: .015em; transition: color .25s ease; }
.scroll-cta:hover { color: white; }
.arrow-circle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(190,217,215,.34); border-radius: 50%; transition: background .25s ease, transform .25s ease; }
.scroll-cta:hover .arrow-circle { background: rgba(177,209,207,.12); transform: translateY(3px); }
.arrow-circle svg { width: 16px; height: 16px; }
.device-position { position: absolute; z-index: 2; left: var(--device-left); top: var(--device-top); width: clamp(230px, 19.3vw, 305px); aspect-ratio: .49; transform: translate(-50%,-50%) rotate(var(--device-rotation)) scale(var(--device-scale)); transform-origin: center center; opacity: var(--device-opacity); will-change: transform, opacity; pointer-events: none; }
.device-halo { position: absolute; z-index: -1; inset: 15% -30% -15%; border-radius: 50%; filter: blur(50px); background: radial-gradient(ellipse,rgba(103,164,156,.25),transparent 70%); }
.device { position: relative; width: 100%; height: 100%; padding: 7px; border: 1.5px solid #4a575b; border-radius: 49px; background: linear-gradient(120deg,#29383d 0%,#050b0f 12%,#0a0e13 65%,#273438 100%); box-shadow: 0 37px 86px rgba(0,0,0,.58), 0 7px 14px rgba(0,0,0,.45), inset 1px 1px rgba(255,255,255,.28), inset -1px -1px rgba(255,255,255,.08); }
.device-hardware-line { position: absolute; z-index: 5; inset: 2px; border: 1px solid rgba(255,255,255,.12); border-radius: 46px; pointer-events: none; }
.device-display { position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden; background: radial-gradient(ellipse at 80% 19%, #43676c 0%, transparent 53%),radial-gradient(ellipse at 12% 75%,#314d54 0%,transparent 64%),linear-gradient(161deg,#1e363e 1%,#102027 52%,#07141b 100%); }
.device-display::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; border: 1px solid rgba(227,255,255,.13); border-radius: inherit; background: linear-gradient(125deg,rgba(255,255,255,.11),transparent 24%,transparent 65%,rgba(0,0,0,.10)); }
.device-display::after { content: ''; position: absolute; inset: 12px 0 auto; z-index: 5; height: 34%; background: linear-gradient(180deg,rgba(195,220,220,.12),transparent); opacity: .42; pointer-events: none; }
.display-light { position: absolute; border-radius: 50%; opacity: .7; filter: blur(27px); }
.light-a { left: 38%; top: 19%; width: 85%; height: 46%; background: radial-gradient(circle, rgba(132,184,177,.39), transparent 65%); }
.light-b { left: -45%; bottom: 3%; width: 125%; height: 47%; background: radial-gradient(circle,rgba(93,147,159,.32),transparent 69%); }
.display-orbit { position: absolute; width: 110%; aspect-ratio: 1; border: 1px solid rgba(213,239,234,.20); border-radius: 50%; transform: rotate(-29deg) scaleX(.66); }
.orbit-one { top: 29%; left: 26%; }
.orbit-two { top: 36%; left: 40%; width: 99%; border-color: rgba(213,239,234,.105); }
.device-island { position: absolute; z-index: 10; top: 17px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; border-radius: 30px; background: #070c10; box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.device-island::after { content: ''; position: absolute; top: 9px; right: 19%; width: 6px; height: 6px; border-radius: 50%; background: #182a33; box-shadow: inset 0 0 2px #294452; }
.device-side-button { position: absolute; width: 3px; height: 46px; left: -4px; background: linear-gradient(#69797a,#1e282d); border-radius: 3px 0 0 3px; }
.side-one { top: 20%; }
.side-two { top: 30%; height: 67px; }
.display-top { position: absolute; z-index: 3; top: 57px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; color: rgba(235,246,242,.75); font-size: 8px; letter-spacing: .165em; font-weight: 650; }
.display-dot { width: 6px; height: 6px; border: 1px solid rgba(202,233,228,.72); border-radius: 50%; }
.display-message { position: absolute; z-index: 3; left: 23px; right: 20px; top: 45%; transform: translateY(-40%); }
.display-overline { display: block; color: rgba(221,235,231,.69); font-size: 8px; font-weight: 600; letter-spacing: .17em; margin-bottom: 17px; }
.display-message strong { display: block; font-size: clamp(39px,3.3vw,53px); letter-spacing: -.085em; line-height: 1; font-weight: 450; color: #f0f5f1; }
.display-domain { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; border-top: 1px solid rgba(223,241,235,.4); margin-top: 21px; padding-top: 10px; color: #d8e8e3; font-family: ui-monospace,"SFMono-Regular",Consolas,monospace; font-size: 11px; }
.display-bottom { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 24px; display: flex; justify-content: space-between; color: rgba(210,227,222,.66); font-size: 9px; letter-spacing: .1em; }
.reveal { position: absolute; z-index: 6; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 9vh 28px 125px; background: radial-gradient(ellipse 65% 80% at 50% 43%,rgba(37,64,69,.78) 0%,rgba(18,37,43,.91) 48%,rgba(9,21,28,.99) 100%),#0e1c22; opacity: var(--reveal-opacity); pointer-events: none; }
.reveal::before { content: ''; position: absolute; inset: 6% 18% 17%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse,rgba(96,159,152,.07),transparent 68%); filter: blur(50px); }
.reveal.is-revealed { pointer-events: auto; }
.reveal-inner { position: relative; width: min(100%,1000px); transform: translateY(var(--reveal-shift)); }
.reveal-overline { display: flex; justify-content: center; align-items: center; gap: 11px; color: #b4cfc9; font-size: 10px; font-weight: 600; letter-spacing: .22em; }
.overline-star { display: inline-block; font-size: 16px; line-height: 1; font-weight: 300; color: #bdd5cc; }
.reveal h2 { margin: 23px 0 18px; font-size: clamp(42px,6.85vw,112px); line-height: 1.06; font-weight: 400; letter-spacing: -.068em; color: #f0f4f1; overflow-wrap: anywhere; }
.reveal-line { width: 45px; height: 1px; margin: 29px auto; background: rgba(197,224,216,.49); }
.reveal p { margin: 0; color: #b4c6c4; font-size: clamp(15px,1.25vw,17px); line-height: 1.74; }
.powered { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 61px; }
.powered > span { color: #96adae; font-size: 9px; font-weight: 600; letter-spacing: .17em; }
.powered a { display: inline-flex; align-items: center; gap: 17px; padding: 5px 8px; color: #d8ebe6; transition: opacity .2s ease; }
.powered a:hover { opacity: .75; }
.powered a img { width: 83px; height: auto; }
.powered a svg { width: 15px; height: 15px; }
.site-footer { position: absolute; z-index: 2; left: clamp(25px,6vw,112px); right: clamp(25px,6vw,112px); bottom: clamp(23px,3.6vw,52px); display: flex; justify-content: space-between; align-items: center; gap: 16px 40px; padding-top: 20px; border-top: 1px solid rgba(185,221,217,.15); color: #94aaab; font-size: 11px; }
.footer-left, .footer-links { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-separator { width: 1px; height: 14px; background: rgba(185,221,217,.2); }
.footer-links { gap: clamp(12px,1.5vw,25px); }
.footer-links a { color: #9fb8b5; white-space: nowrap; transition: color .2s ease; }
.footer-links a svg { width: 17px; height: 17px; }
.footer-link-divider { width: 1px; height: 17px; background: rgba(185,221,217,.21); }
.scroll-prompt { position: absolute; z-index: 4; bottom: 48px; left: clamp(26px,9.5vw,184px); display: flex; align-items: center; gap: 18px; color: #8fa5a8; font-size: 9px; font-weight: 600; letter-spacing: .19em; opacity: var(--scroll-opacity); }
.scroll-track { position: relative; display: block; width: 68px; height: 1px; background: rgba(190,215,215,.28); }
.scroll-track-dot { position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #aecfca; animation: scroll-accent 2.3s ease-in-out infinite; }
@keyframes scroll-accent { 0%{ transform:translateX(0);opacity:0} 24%{opacity:1} 80%{opacity:1} 100%{transform:translateX(65px);opacity:0} }
.side-index { position: absolute; z-index: 4; right: clamp(28px,3.5vw,68px); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #9bb1b3; font-size: 10px; font-weight: 500; opacity: var(--index-opacity); transform: translateY(-50%); }
.side-index-line { position: relative; width: 1px; height: 95px; background: rgba(213,236,232,.2); }
.side-index-line span { position: absolute; left: 0; top: 0; height: 0; width: 1px; background: #c4ddd3; }
@media(max-width: 1100px) {
  .intro { left: clamp(26px,6.5vw,90px); width: 65%; }
  .intro h1 { font-size: clamp(57px,6.7vw,76px); }
  .scroll-prompt { left: clamp(26px,6.5vw,90px); }
  .site-footer { left: 35px; right: 35px; }
}
@media(max-width: 760px) {
  /* Mobile first: compositor-only foreground choreography.
     Heavy blended/blurred ambient effects are intentionally desktop-only. */
  .device-position {
    left: 0; top: 0;
    transform: translate3d(50vw,86svh,0) translate(-50%,-50%) rotate(-8deg) scale(.88);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  .intro { will-change: transform, opacity; }
  .reveal { will-change: opacity; }
  .reveal-inner { will-change: transform; }
  .device-halo { filter: none; opacity: .55; }
  .display-light { filter: none; }
  .reveal::before { filter: none; }
  .atmosphere-glow-secondary,
  .atmosphere-tides,
  .atmosphere-pointer-glow,
  .atmosphere-grid { display: none; }
  .atmosphere-glow { width: 110vw; left: 72%; top: 40%; opacity: .78; will-change: auto; }
  .atmosphere-sheen { animation: none; opacity: .42; }
  .atmosphere-grain { opacity: .07; mix-blend-mode: normal; }
  #atmosphere-canvas { opacity: .72; mask-image: none; -webkit-mask-image: none; }
  .site-header { padding: 24px 25px; }
  .site-brand { gap: 12px; }
  .site-brand img { width: 77px; }
  .brand-caption { font-size: 8px; }
  .header-external { font-size: 11px; }
  .journey { height: 238svh; }
  .stage { min-height: 0; }
  .intro { left: 7%; top: 30%; width: 87%; transform: translateY(calc(-50% + var(--intro-offset))); }
  .intro-domain { margin: 27px 0 17px; }
  .intro h1 { font-size: clamp(49px,8.2vw,68px); }
  .intro-text { margin-top: 18px; font-size: 14px; line-height: 1.58; }
  .scroll-cta { margin-top: 24px; gap: 12px; font-size: 12px; }
  .arrow-circle { height: 35px; width: 35px; }
  .eyebrow { font-size: 9px; letter-spacing: .19em; gap: 9px; }
  .eyebrow-rule { width: 19px; flex-basis: 19px; }
  .device-position { width: clamp(185px,37vw,225px); }
  .display-message strong { font-size: 38px; }
  .atmosphere-sheen { left: 2%; width: 95%; }
  .scroll-prompt, .side-index { display: none; }
  .reveal { padding: 0 23px 130px; }
  .reveal h2 { font-size: clamp(40px,8.3vw,69px); }
  .reveal-line { margin: 24px auto; }
  .powered { margin-top: 45px; }
  .site-footer { bottom: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; padding-top: 14px; }
  .footer-left, .footer-links { justify-content: center; }
  .footer-links { gap: 17px; }
}
/* Touch devices in landscape / small tablets: use the same lightweight
   compositing path without changing the wider-screen typography/layout. */
@media (min-width: 761px) and (max-width: 1024px) and (pointer: coarse) {
  .device-position {
    left: 0; top: 0;
    transform: translate3d(73.5vw,51svh,0) translate(-50%,-50%) rotate(-13deg) scale(.95);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .intro { will-change: opacity, transform; }
  .reveal { will-change: opacity; }
  .reveal-inner { will-change: transform; }
  .device-halo, .display-light, .reveal::before { filter: none; }
  .atmosphere-glow-secondary, .atmosphere-tides, .atmosphere-pointer-glow, .atmosphere-grid { display: none; }
  .atmosphere-glow { will-change: auto; }
  .atmosphere-sheen { animation: none; }
  .atmosphere-grain { mix-blend-mode: normal; opacity: .08; }
  #atmosphere-canvas { opacity: .70; mask-image: none; -webkit-mask-image: none; }
}
@media(max-width: 420px) {
  .site-header { padding: 22px 20px; }
  .site-brand img { width: 69px; }
  .brand-caption { font-size: 7px; letter-spacing: .095em; }
  .site-brand { gap: 9px; }
  .header-external span { display: none; }
  .header-external svg { width: 19px; height: 19px; }
  .intro { top: 31%; }
  .intro h1 { font-size: clamp(45px,12vw,54px); }
  .eyebrow { font-size: 8px; letter-spacing: .135em; }
  .intro-domain { margin-top: 24px; margin-bottom: 14px; font-size: 12px; }
  .intro-text { font-size: 13px; }
  .scroll-cta { margin-top: 18px; }
  .site-footer { left: 17px; right: 17px; font-size: 10px; }
  .footer-links { gap: 13px; }
  .reveal { padding-bottom: 126px; }
  .reveal p { font-size: 14px; }
  .reveal h2 { font-size: 11.8vw; }
  .powered > span { font-size: 8px; }
  .powered { margin-top: 34px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .stage { min-height: 0; }
  .site-header { padding: 12px 28px; }
  .site-brand img { width: 64px; }
  .brand-caption { font-size: 8px; }
  .intro { left: 6.5%; top: 57%; width: 56%; }
  .eyebrow { font-size: 8px; }
  .intro-domain { margin: 9px 0 8px; font-size: 12px; }
  .intro h1 { font-size: clamp(35px,5.3vw,56px); }
  .intro-text { margin-top: 10px; font-size: 12px; line-height: 1.5; }
  .scroll-cta { margin-top: 12px; font-size: 11px; }
  .scroll-prompt, .side-index { display: none; }
  .reveal { padding: 14px 24px 65px; }
  .reveal h2 { margin: 12px 0; font-size: clamp(34px,5.8vw,54px); }
  .reveal-line { margin: 13px auto; }
  .reveal p { font-size: 12px; line-height: 1.45; }
  .powered { margin-top: 14px; gap: 6px; }
  .site-footer { bottom: 9px; padding-top: 10px; }
}
@media(max-height: 680px) and (min-width:761px) {
  .site-header { padding-top: 20px; padding-bottom: 20px; }
  .intro h1 { font-size: clamp(51px,5.4vw,81px); }
  .intro-domain { margin-top: 20px; }
  .intro-text { margin-top: 17px; }
  .scroll-cta { margin-top: 22px; }
  .powered { margin-top: 29px; }
  .reveal-line { margin: 18px auto; }
  .site-footer { bottom: 18px; }
}
@media(max-height: 640px) and (max-width:760px) {
  .intro { top: 32%; }
  .intro h1 { font-size: clamp(41px,9.5vw,51px); }
  .intro-domain { margin-top: 14px; }
  .intro-text { margin-top: 11px; }
  .scroll-cta { margin-top: 12px; }
  .device-position { width: 180px; }
  .reveal-overline { font-size: 8px; }
  .reveal-line { margin: 14px auto; }
  .reveal h2 { margin: 12px 0; }
  .powered { margin-top: 16px; gap: 5px; }
  .powered a img { width: 60px; }
  .site-footer { bottom: 9px; gap: 9px; }
}
@media(prefers-reduced-motion: reduce) {
  .atmosphere-sheen, .atmosphere-tides { animation: none; opacity: .42; }
  .atmosphere-pointer-glow { display:none; }
  #atmosphere-canvas { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .journey { height: 200svh; }
  .stage { position: relative; height: 200svh; }
  .atmosphere { bottom: auto; height: 100svh; }
  .intro { top: 50svh !important; opacity: 1 !important; transform: translateY(-50%) !important; }
  .device-position { top: 50svh !important; opacity: .75 !important; transform: translate(-50%,-50%) rotate(-9deg) scale(.85) !important; }
  .reveal { inset: 100svh 0 0; opacity: 1 !important; pointer-events: auto !important; }
  .reveal-inner { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) and (max-width: 1024px) and (pointer: coarse) {
  .device-position { left: 73.5% !important; }
}
/* Minimal custom 404 */
.not-found { min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(ellipse at 65% 40%,#203940 0%,#0b161d 65%); }
.not-found-content { width: min(100%, 630px); }
.error-logo { width: 84px; height: auto; margin-bottom: 90px; }
.not-found-number { font-size: clamp(100px,20vw,210px); font-weight: 300; letter-spacing: -.09em; line-height: 1; color: #e8f0ee; }
.not-found-number span { color: #86b1a7; }
.not-found h1 { font-size: clamp(25px,4vw,40px); font-weight: 500; letter-spacing: -.04em; margin: 25px 0 12px; }
.not-found p { color: #9caeb2; margin: 0 0 39px; }
.not-found-link { display: inline-flex; gap: 30px; padding-bottom: 9px; border-bottom: 1px solid #86b1a7; font-size: 13px; }
@media(prefers-reduced-motion: reduce) and (max-width:760px) {
  .intro { top: 31svh !important; }
  .device-position { left: 50% !important; top: 87svh !important; }
}

/* ---------------------------
   V5: Safari-safe mobile scene.
   No mobile canvas, animated gradients, filters, or scaled nested DOM.
   One prebaked phone image and native scrolling are the only moving parts.
   --------------------------- */
.mobile-device-art { display: none; }
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (pointer:coarse) {
  html { scroll-behavior: auto; }
  .stage { background: #0d181d; }
  .atmosphere {
    background: radial-gradient(ellipse 80% 63% at 77% 71%, rgba(44,90,97,.30), transparent 75%),
                linear-gradient(140deg, #0b151b 10%, #142b33 65%, #0b171e 100%);
  }
  .atmosphere::before { display: none; }
  .atmosphere::after {
    content: ''; position: absolute; inset: 0;
    background: url("mobile-lines.svg") center center / cover no-repeat;
    opacity: .53;
    pointer-events: none;
  }
  .atmosphere > * { display: none !important; }
  .device-position > .device, .device-position > .device-halo { display: none !important; }
  .mobile-device-art {
    display: block; position: absolute;
    top: -6.4%; left: -10%; width: 120%;
    aspect-ratio: 276 / 528;
    pointer-events: none;
  }
  .mobile-device-art > img { display:block; width:100%; height:auto; }
  .mobile-device-domain {
    position: absolute; top: 57.95%; left:19.56%; max-width: 68%;
    margin: 0; padding: 9px 0 0;
    border-top: 1px solid rgba(223,241,235,.4);
    color: #d8e8e3;
    font: 400 clamp(7px,2.65vw,11px)/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace;
    letter-spacing: .01em; overflow-wrap: anywhere;
  }
  .intro { will-change: opacity; }
  .reveal {
    opacity: 0;
    will-change: auto;
    transition: opacity .32s ease-out;
  }
  .reveal.is-revealed { opacity: 1; }
  .reveal-inner { transform: none !important; will-change: auto; }
  .device-position { will-change: transform,opacity; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
}
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (pointer:coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}


/* V6: native-scrolling iOS/touch experience. No sticky viewport,
   no per-scroll JS transforms and no continuously rendered effects.
   The one-time phone motion is limited to a small composited image.
   Desktop remains exactly as in V5. */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (pointer:coarse) {
  html { scroll-behavior: auto; }
  .site-shell { min-height:100%; }
  .journey { height:auto !important; min-height:100svh; }
  .stage {
    position:relative !important; top:auto !important;
    height:auto !important; min-height:100svh !important;
    overflow:clip; isolation:isolate;
  }
  .atmosphere {
    position:absolute; inset:0;
    background:linear-gradient(154deg,#0b151a 0%,#112830 45%,#0b171d 79%,#0d181d 100%);
  }
  .atmosphere::after {
    background-image:url("mobile-lines.svg");
    background-size:100% auto;
    background-position:center 8%;
    background-repeat:no-repeat;
    opacity:.48;
  }
  .intro {
    position:relative !important;
    top:auto !important; left:auto !important; right:auto !important;
    width:100%; min-height:86svh;
    display:flex; flex-direction:column; justify-content:center;
    margin:0; padding:clamp(145px,18svh,190px) max(7%,25px) 65px;
    align-items:flex-start;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto;
    will-change:auto;
  }
  .intro h1 { font-size:clamp(44px,11vw,69px); }
  .intro-domain { margin-top:28px; }
  .intro-text { margin-top:20px; }
  .scroll-cta { margin-top:29px; }
  .device-position {
    position:relative !important;
    top:auto !important; left:auto !important;
    width:clamp(208px,52vw,270px);
    margin:-28px auto clamp(75px,16svh,170px);
    opacity:1 !important;
    transform:translate3d(0,32px,0) rotate(-8deg) scale(.85) !important;
    transition:transform 1100ms cubic-bezier(.22,1,.36,1);
    transform-origin:center center;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
    will-change:auto;
    pointer-events:none;
    z-index:4;
  }
  .device-position.is-mobile-zoomed {
    transform:translate3d(0,0,0) rotate(0deg) scale(1.10) !important;
  }
  .device-position .mobile-device-art { top:-6.4%; left:-10%; width:120%; }
  .reveal {
    position:relative !important; inset:auto !important;
    min-height:100svh; height:auto;
    padding:95px 24px 165px;
    opacity:1 !important;
    pointer-events:auto !important;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse 100% 80% at 50% 39%,rgba(31,60,64,.64),rgba(12,27,33,.98) 72%), #0e1c22;
    transition:none !important;
    will-change:auto;
  }
  .reveal::before { display:none; }
  .reveal-inner {
    transform:none !important;
    opacity:1;
    will-change:auto;
    transition:opacity .65s ease-out;
  }
  .stage.mobile-motion-ready .reveal-inner { opacity: .0; }
  .stage.mobile-motion-ready .reveal.is-mobile-visible .reveal-inner { opacity: 1; }
  .reveal.is-revealed { pointer-events:auto; }
  .reveal h2 { font-size:clamp(38px,8.5vw,72px); }
  .site-footer { bottom:24px; }
  .scroll-prompt,.side-index { display:none; }
}
@media (max-width:760px) and (max-height:690px) {
  .intro { min-height:96svh; padding-top:125px; padding-bottom:42px; }
  .intro h1 { font-size:clamp(39px,10.4vw,56px); }
  .intro-domain { margin-top:18px; }
  .scroll-cta { margin-top:17px; }
  .reveal { padding-top:55px; padding-bottom:175px; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .intro { min-height:103svh; padding:90px max(6.5%,24px) 42px; width:100%; }
  .intro h1 { font-size:clamp(37px,6vw,59px); }
  .device-position { width:clamp(180px,27vw,230px); margin:0 auto 80px; }
  .reveal { min-height:115svh; padding:55px 24px 140px; }
}
@media (prefers-reduced-motion:reduce) and (max-width:760px),
       (prefers-reduced-motion:reduce) and (min-width:761px) and (max-width:1024px) and (pointer:coarse) {
  .journey { height:auto !important; }
  .stage { position:relative !important; height:auto !important; }
  .intro { opacity:1 !important; top:auto !important; transform:none !important; }
  .device-position, .device-position.is-mobile-zoomed { transform:none !important; opacity:1 !important; transition:none !important; }
  .reveal { opacity:1 !important; inset:auto !important; }
  .stage.mobile-motion-ready .reveal-inner { opacity:1 !important; }
}

/* V8: clearly visible but extremely cheap motion for iOS Safari.
   Two small self-contained vector images, rasterized once by the browser.
   Only transform moves. No SVG filters, blur, canvas, opacity keyframes,
   background-position repaint, scrolling event handlers or large layers. */
.mobile-wave { display: none; }
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (pointer:coarse) {
  .atmosphere > .mobile-wave {
    display: block !important;
    position: absolute;
    z-index: 1;
    inset: auto;
    width: min(178vw, 740px);
    height: auto;
    aspect-ratio: 780 / 280;
    background: url("mobile-wave.svg") center / contain no-repeat;
    pointer-events: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .atmosphere > .mobile-wave-one {
    top: 9svh;
    left: -49%;
    opacity: .95;
    animation-name: c2h-mobile-flow-a;
    animation-duration: 8.4s;
  }
  .atmosphere > .mobile-wave-two {
    top: 74svh;
    right: -43%;
    opacity: .68;
    animation-name: c2h-mobile-flow-b;
    animation-duration: 11.2s;
  }
  @keyframes c2h-mobile-flow-a {
    0% { transform: translate3d(-83px, -17px, 0); }
    100% { transform: translate3d(83px, 13px, 0); }
  }
  @keyframes c2h-mobile-flow-b {
    0% { transform: translate3d(70px, 12px, 0); }
    100% { transform: translate3d(-70px, -12px, 0); }
  }
}
@media (prefers-reduced-motion:reduce) {
  .atmosphere > .mobile-wave { animation: none !important; will-change: auto; }
}