/* OTHARIS — public website (otharis.com, #landingPage).
   One design system for the marketing layer only: every rule is scoped under .os-site, so nothing
   here can reach the authenticated application. Colours are the brand tokens from
   brand/brand-tokens.css (midnight navy, deep blue, accent blue, icy blue, platinum, silver);
   data colours (gain/loss) stay the app's own. The site is always the dark cinematic identity,
   whatever app theme a returning visitor last picked. */

.os-site {
  --os-void: #03080F;
  --os-night: #050C17;
  --os-navy: #061525;          /* --otharis-midnight-navy */
  --os-deep: #0B3A73;          /* --otharis-deep-blue */
  --os-accent: #3B82F6;        /* --otharis-accent-blue */
  --os-accent-hi: #60A5FA;
  --os-icy: #DCEEFF;           /* --otharis-icy-blue */
  --os-platinum: #E5E7EB;      /* --otharis-platinum-silver */
  --os-silver: #98A4B3;        /* --otharis-silver-gray */
  --os-text: #EEF2F7;
  --os-text-2: #B8C2CF;
  --os-muted: #8592A3;
  --os-line: rgba(152, 164, 179, 0.16);
  --os-line-2: rgba(152, 164, 179, 0.26);
  --os-line-accent: rgba(59, 130, 246, 0.45);
  --os-panel: linear-gradient(180deg, rgba(15, 28, 49, 0.82) 0%, rgba(8, 17, 31, 0.86) 100%);
  --os-panel-solid: #0A1526;
  --os-gain: #34D399;
  --os-loss: #F87171;
  --os-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --os-sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --os-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --os-r-sm: 6px;
  --os-r: 10px;
  --os-r-lg: 14px;
  --os-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(220, 238, 255, 0.04) inset;
  --os-glow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 18px 60px -18px rgba(59, 130, 246, 0.45);
  --os-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --os-gutter: clamp(16px, 4vw, 40px);
  --os-max: 1200px;
  --os-nav-h: 68px;

  position: relative;
  background: var(--os-void);
  color: var(--os-text);
  font-family: var(--os-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
:where(.os-site) *, :where(.os-site) *::before, :where(.os-site) *::after { box-sizing: border-box; }
:where(.os-site) :where(img, svg) { display: block; max-width: 100%; }
:where(.os-site) :where(a) { color: inherit; text-decoration: none; }
:where(.os-site) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.os-site section[id], .os-site [id="siteDisclaimer"] { scroll-margin-top: calc(var(--os-nav-h) + 8px); }
.os-site :focus-visible { outline: 2px solid var(--os-accent-hi); outline-offset: 3px; border-radius: 4px; }
.os-site ::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }

.os-wrap { width: 100%; max-width: var(--os-max); margin: 0 auto; padding: 0 var(--os-gutter); position: relative; z-index: 2; }
.os-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.os-skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: var(--os-r-sm); background: var(--os-accent); color: #fff; font-weight: 700; font-size: 13px; transition: top .2s; }
.os-skip:focus { top: 12px; }

/* ---------- type ---------- */
.os-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--os-silver); }
.os-eyebrow::before { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, var(--os-accent), rgba(59,130,246,0)); }
.os-eyebrow--plain::before { display: none; }
.os-display { font-family: var(--os-serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.015em; color: var(--os-text); margin: 0; font-optical-sizing: auto; }
.os-display em { font-style: normal; color: var(--os-icy); }
.os-display .os-display__sub { display: block; font-size: 0.6em; color: #D9E1EB; margin-top: 0.14em; letter-spacing: -0.005em; }
.os-h2 { font-family: var(--os-serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; color: var(--os-text); margin: 14px 0 0; }
.os-h3 { font-family: var(--os-serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; color: var(--os-text); margin: 0; }
.os-h4 { font-family: var(--os-sans); font-weight: 700; font-size: 15px; color: var(--os-text); margin: 0; letter-spacing: 0.005em; }
.os-lead { font-size: clamp(15px, 1.25vw, 17px); color: var(--os-text-2); line-height: 1.65; margin: 16px 0 0; max-width: 620px; }
.os-body { font-size: 14px; color: var(--os-text-2); line-height: 1.65; margin: 0; }
.os-small { font-size: 12.5px; color: var(--os-muted); line-height: 1.55; }
.os-mono { font-family: var(--os-mono); font-variant-numeric: tabular-nums; }
.os-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--os-line-2); color: var(--os-text-2); background: rgba(6, 21, 37, 0.6); white-space: nowrap; }
.os-tag--accent { border-color: rgba(59,130,246,0.45); color: var(--os-icy); background: rgba(59,130,246,0.12); }
.os-tag--platinum { border-color: rgba(220,238,255,0.35); color: var(--os-icy); background: linear-gradient(135deg, rgba(220,238,255,0.14), rgba(152,164,179,0.06)); }

/* ---------- buttons ---------- */
.os-btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 22px; border-radius: var(--os-r-sm); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; transition: transform .25s var(--os-ease), box-shadow .25s var(--os-ease), background .25s, border-color .25s, color .25s; }
.os-btn i, .os-btn svg { width: 16px; height: 16px; flex: none; }
.os-btn--primary { color: #fff; background: linear-gradient(180deg, #4C8FF8 0%, #2F6FE6 100%); box-shadow: 0 0 0 1px rgba(147,197,253,0.35) inset, 0 12px 34px -12px rgba(59,130,246,0.75); }
.os-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(191,219,254,0.5) inset, 0 18px 44px -12px rgba(59,130,246,0.9); }
.os-btn--ghost { color: var(--os-text); border: 1px solid rgba(220,238,255,0.24); background: rgba(6, 21, 37, 0.45); backdrop-filter: blur(6px); }
.os-btn--ghost:hover { border-color: rgba(220,238,255,0.5); background: rgba(11, 58, 115, 0.25); }
.os-btn--quiet { --h: 40px; padding: 0 16px; font-size: 13px; color: var(--os-text); border: 1px solid var(--os-line-2); background: rgba(6,21,37,0.5); }
.os-btn--quiet:hover { border-color: var(--os-line-accent); color: #fff; }
.os-btn--sm { --h: 38px; padding: 0 15px; font-size: 13px; }
.os-btn--block { width: 100%; }
.os-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--os-accent-hi); transition: gap .25s var(--os-ease), color .2s; }
.os-link:hover { gap: 12px; color: var(--os-icy); }
.os-link i, .os-link svg { width: 15px; height: 15px; }
.os-play { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(220,238,255,0.4); }
.os-play svg { width: 9px; height: 9px; margin-left: 1px; }

/* ---------- panels ---------- */
.os-panel { position: relative; background: var(--os-panel); border: 1px solid var(--os-line); border-radius: var(--os-r); box-shadow: var(--os-shadow); }
.os-panel--hi { border-color: rgba(59,130,246,0.5); box-shadow: var(--os-glow), var(--os-shadow); }
.os-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(220,238,255,0.05), rgba(220,238,255,0) 30%); }

/* ---------- navigation ---------- */
.os-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--os-nav-h); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.os-nav.is-scrolled { background: rgba(3, 8, 15, 0.82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--os-line); }
.os-nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.os-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.os-brand img { width: 34px; height: 34px; }
.os-brand span { font-family: var(--os-sans); font-weight: 600; font-size: 17px; letter-spacing: 0.2em; color: var(--os-text); }
.os-nav__links { display: flex; align-items: center; gap: 26px; margin-left: 18px; }
.os-nav__links a { font-size: 13px; font-weight: 600; color: #C9D2DD; transition: color .2s; position: relative; white-space: nowrap; }
.os-nav__links a:hover { color: #fff; }
.os-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--os-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--os-ease); }
.os-nav__links a:hover::after { transform: scaleX(1); }
.os-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.os-lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 6px; border: 1px solid var(--os-line); }
.os-lang button { padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--os-muted); }
.os-lang button.bg-terminal-accentDeep\/20, .os-lang button[aria-pressed="true"] { color: var(--os-icy); background: rgba(59,130,246,0.18); }
.os-nav__text { font-size: 13px; font-weight: 600; color: #C9D2DD; display: inline-flex; align-items: center; gap: 7px; }
.os-nav__text:hover { color: #fff; }
.os-nav__text i, .os-nav__text svg { width: 15px; height: 15px; }
.os-burger { display: none; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--os-line-2); place-items: center; margin-left: auto; }
.os-burger svg { width: 20px; height: 20px; }
.os-drawer { position: fixed; inset: var(--os-nav-h) 0 auto 0; z-index: 49; max-height: calc(100vh - var(--os-nav-h)); overflow-y: auto; background: rgba(3, 8, 15, 0.97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--os-line); padding: 18px var(--os-gutter) 26px; }
.os-drawer a.os-drawer__link { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--os-line); font-size: 16px; font-weight: 600; color: var(--os-text); }
.os-drawer__row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.os-drawer .os-btn { width: 100%; }
.os-drawer__ctas { display: grid; gap: 10px; margin-top: 16px; }

/* ---------- cinematic scenes (pure CSS/SVG, no photographic stock) ---------- */
.os-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.os-stars { position: absolute; inset: 0; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(220,238,255,0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 62%, rgba(220,238,255,0.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 41% 9%, rgba(220,238,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 33%, rgba(220,238,255,0.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 73% 14%, rgba(220,238,255,0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 47%, rgba(220,238,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 8%, rgba(220,238,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 41%, rgba(220,238,255,0.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 35% 28%, rgba(152,164,179,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 5%, rgba(152,164,179,0.7) 50%, transparent 51%);
  background-size: 640px 420px; }
.os-stars--dense { opacity: 0.75; background-size: 420px 300px; }
.os-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.os-ridges { position: absolute; left: -2%; right: -2%; bottom: 0; width: 104%; height: auto; }
.os-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(3,8,15,0) 0%, rgba(3,8,15,0.7) 55%, var(--os-void) 100%); }
.os-beam { position: absolute; top: -10%; width: 2px; height: 120%; background: linear-gradient(180deg, rgba(220,238,255,0), rgba(220,238,255,0.25) 45%, rgba(220,238,255,0)); filter: blur(1px); }

/* ---------- hero ---------- */
.os-hero { position: relative; min-height: min(920px, 100svh); padding: calc(var(--os-nav-h) + clamp(40px, 7vh, 88px)) 0 clamp(36px, 6vh, 64px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.os-hero .os-scene { background:
  radial-gradient(120% 70% at 78% 30%, rgba(11,58,115,0.55) 0%, rgba(6,21,37,0.2) 45%, rgba(3,8,15,0) 70%),
  radial-gradient(80% 60% at 10% 0%, rgba(11,58,115,0.35) 0%, rgba(3,8,15,0) 60%),
  linear-gradient(180deg, #040A14 0%, #061224 55%, #040912 100%); }
.os-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: end; gap: 24px; }
.os-hero__copy { position: relative; z-index: 3; padding-bottom: clamp(8px, 3vh, 36px); }
.os-hero__copy .os-eyebrow { margin-bottom: 22px; }
.os-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.os-hero__app { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--os-text-2); }
.os-hero__app:hover { color: #fff; }
.os-hero__app svg, .os-hero__app i { width: 15px; height: 15px; }
.os-signoff { display: flex; align-items: center; gap: 16px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--os-line); max-width: 520px; }
.os-signoff__name { font-weight: 700; font-size: 14px; color: var(--os-text); }
.os-signoff__role { font-size: 12px; color: var(--os-muted); }
.os-signoff__quote { margin-left: auto; font-family: var(--os-serif); font-style: italic; font-size: 15px; color: #CFD8E3; max-width: 250px; line-height: 1.35; }
.os-founder-fig { position: relative; z-index: 2; justify-self: end; width: min(560px, 100%); aspect-ratio: 1 / 1.02; margin-bottom: calc(-1 * clamp(36px, 6vh, 64px)); }
.os-founder-fig__halo { position: absolute; inset: 6% 0 10% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59,130,246,0.42), rgba(11,58,115,0.18) 55%, rgba(3,8,15,0) 75%); filter: blur(10px); }
.os-founder-fig__ring { position: absolute; inset: 10% 6% 18% 10%; border-radius: 50%; border: 1px solid rgba(220,238,255,0.08); }
.os-founder-fig__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  filter: saturate(0.82) contrast(1.06) brightness(0.9) drop-shadow(-18px 0 40px rgba(59,130,246,0.28));
 }
.os-founder-fig__inner { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 40%, #000 62%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 40%, #000 62%, rgba(0,0,0,0) 100%); }
.os-founder-fig__rim { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(255deg, rgba(147,197,253,0.55) 0%, rgba(59,130,246,0.18) 18%, rgba(59,130,246,0) 42%);
  -webkit-mask-image: var(--os-fig-mask); mask-image: var(--os-fig-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom center; mask-position: bottom center; }
.os-founder-fig__shade { position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(4,9,18,0), #040912 92%); }

/* Hero scene (full-bleed image, centred copy in the sky - the TradingView-style hero). */
.os-hero--scene { min-height: 0; justify-content: flex-start; padding-bottom: clamp(28px, 4vh, 48px); }
/* Room for the scene under the copy: the image is ~0.56 of the width tall; its top ~12% is sky that
   may sit under the text, the stats row overlays the rocks at the bottom. */
.os-hero__spacer { height: clamp(220px, calc(50.6vw - 220px), 70vh); }
.os-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(90deg, rgb(2,14,28) 0%, rgb(2,17,33) 50%, rgb(3,22,43) 100%); }
/* Anchored to the bottom at full width and never cropped sideways: on tall/narrow viewports the sky
   simply continues above it (same colour as the image's top edge), so the figure and the mark stay whole. */
.os-hero__img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform-origin: 50% 100%; transform: scale(1.04); animation: os-hero-zoom 18s cubic-bezier(.2,.6,.2,1) forwards;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%); }
@keyframes os-hero-zoom { to { transform: scale(1); } }
.os-hero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(3,8,15,0.78) 0%, rgba(3,8,15,0.42) 22%, rgba(3,8,15,0.08) 46%, rgba(3,8,15,0) 60%, rgba(3,8,15,0.55) 84%, #03080F 100%),
  radial-gradient(48% 34% at 50% 24%, rgba(3,8,15,0.5), rgba(3,8,15,0) 72%); }
/* Hero sky candles: Otharis blues/silver, faded into the sky, softer behind the centred copy. */
.os-hero__sky { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: min(78%, 720px); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 4%, #000 26%, #000 62%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 4%, #000 26%, #000 62%, rgba(0,0,0,0) 100%); }
.os-hero__sky-inner { position: absolute; inset: 0; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 30% 48% at 50% 40%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 55%, #000 100%); mask-image: radial-gradient(ellipse 30% 48% at 50% 40%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 55%, #000 100%); }
.os-hero__candles { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(96,165,250,0.35)); animation: os-sky-in 2.2s .2s var(--os-ease) both; }
@keyframes os-sky-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.os-cdl line { stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.os-cdl--u rect { fill: rgba(96,165,250,0.55); stroke: rgba(191,219,254,0.75); stroke-width: .8; }
.os-cdl--u line { stroke: rgba(191,219,254,0.6); }
.os-cdl--d rect { fill: rgba(3,8,15,0.25); stroke: rgba(220,238,255,0.6); stroke-width: .9; }
.os-cdl--d line { stroke: rgba(220,238,255,0.45); }
.os-cdl-ma { fill: none; stroke: rgba(220,238,255,0.32); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: os-draw 3.2s .4s var(--os-ease) forwards; }
.os-hero__center { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 3; }
.os-hero__center .os-eyebrow { margin-bottom: 20px; }
.os-hero__center .os-eyebrow::after { content: ""; width: 18px; height: 1px; background: linear-gradient(270deg, var(--os-accent), rgba(59,130,246,0)); }
.os-hero__center .os-display { text-shadow: 0 2px 30px rgba(3,8,15,0.65); }
.os-hero__center .os-lead { margin-left: auto; margin-right: auto; max-width: 640px; text-shadow: 0 1px 18px rgba(3,8,15,0.8); color: #C9D3DF; }
.os-hero__center .os-hero__ctas { justify-content: center; }
.os-hero__mobile-shot { display: none; }
/* Hero 3D scene (otharis-hero3d.js): the canvas takes the photo's place once its first frame is
   drawn; the photo stays underneath as the fallback whenever the scene cannot run. */
.os-quotes { position: relative; z-index: 3; margin: 0 0 18px auto; max-width: 440px; text-align: right; }
.os-quotes__text { margin: 0; min-height: 4.2em; display: flex; align-items: flex-end; justify-content: flex-end; font-family: var(--os-serif); font-style: italic; font-size: 16.5px; line-height: 1.38; color: #DCE4EE; text-shadow: 0 1px 16px rgba(3,8,15,0.95);
  transition: opacity .7s var(--os-ease), filter .7s var(--os-ease), transform .7s var(--os-ease); }
.os-quotes__who { margin-top: 8px; font-size: 13px; text-shadow: 0 1px 12px rgba(3,8,15,0.95); transition: opacity .7s var(--os-ease) .08s, transform .7s var(--os-ease) .08s; }
.os-quotes.is-out .os-quotes__text { opacity: 0; filter: blur(6px); transform: translateY(-6px); }
.os-quotes.is-out .os-quotes__who { opacity: 0; transform: translateY(-4px); }
.os-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(30px, 5vh, 52px); border-top: 1px solid var(--os-line); }
.os-stat { padding: 20px 18px 4px 0; }
.os-stat + .os-stat { padding-left: 22px; border-left: 1px solid var(--os-line); }
.os-stat__value { font-family: var(--os-serif); font-size: clamp(26px, 2.4vw, 32px); line-height: 1; color: var(--os-text); }
.os-stat__label { margin-top: 8px; font-size: 12.5px; color: var(--os-muted); }

/* ---------- product (live search + preview) ---------- */
.os-section { position: relative; padding: clamp(72px, 10vw, 128px) 0; isolation: isolate; }
.os-section--tight { padding: clamp(48px, 7vw, 88px) 0; }
.os-head { max-width: 760px; }
.os-head--center { margin: 0 auto; text-align: center; }
.os-head--center .os-lead { margin-left: auto; margin-right: auto; }
.os-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.os-search { position: relative; margin-top: 34px; }
.os-search__field { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; border-radius: var(--os-r); border: 1px solid var(--os-line-2); background: rgba(6, 14, 27, 0.85); box-shadow: var(--os-shadow); transition: border-color .2s, box-shadow .2s; }
.os-search__field:focus-within { border-color: rgba(59,130,246,0.6); box-shadow: 0 0 0 4px rgba(59,130,246,0.14), var(--os-shadow); }
.os-search__field svg { width: 19px; height: 19px; color: var(--os-silver); flex: none; }
.os-search__field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--os-text); font-size: 15.5px; font-family: var(--os-sans); }
.os-search__field input::placeholder { color: #6F7D90; }
.os-search__kbd { font-family: var(--os-mono); font-size: 11px; color: var(--os-muted); border: 1px solid var(--os-line-2); border-radius: 5px; padding: 2px 7px; }
.os-search__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: var(--os-r); border: 1px solid var(--os-line-2); background: rgba(5, 12, 23, 0.98); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9); max-height: 360px; overflow-y: auto; }
.os-search__opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px; text-align: left; }
.os-search__opt:hover, .os-search__opt[aria-selected="true"] { background: rgba(59,130,246,0.14); }
.os-search__opt .os-mono { font-weight: 700; font-size: 13px; color: var(--os-text); min-width: 74px; }
.os-search__opt .os-search__name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--os-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-search__empty { padding: 14px; font-size: 13px; color: var(--os-muted); }
.os-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.os-chip { height: 38px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--os-line); background: rgba(8, 17, 31, 0.7); font-size: 13px; font-weight: 600; color: #C9D2DD; display: inline-flex; align-items: center; gap: 8px; transition: border-color .2s, color .2s, background .2s; }
.os-chip:hover, .os-chip[aria-pressed="true"] { border-color: rgba(59,130,246,0.55); color: #fff; background: rgba(11,58,115,0.35); }
.os-chip .os-mono { font-size: 12px; }

.os-preview { margin-top: 22px; overflow: hidden; }
.os-preview__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 0; flex-wrap: wrap; }
.os-asset { display: flex; align-items: center; gap: 14px; min-width: 0; }
.os-asset__logo { width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: rgba(6,14,27,0.6); border: 1px solid var(--os-line-2); flex: none; }
.os-asset__logo img { border-radius: 9px; }
.os-search__logo { width: 26px; height: 26px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 7px; }
.os-asset__ticker { font-family: var(--os-sans); font-size: 22px; font-weight: 700; color: var(--os-text); letter-spacing: 0.01em; }
.os-asset__name { font-size: 14px; color: var(--os-text-2); margin-left: 10px; }
.os-asset__meta { font-size: 12.5px; color: var(--os-muted); margin-top: 2px; }
.os-quote { text-align: right; }
.os-quote__price { font-family: var(--os-sans); font-size: 28px; font-weight: 700; color: var(--os-text); font-variant-numeric: tabular-nums; }
.os-quote__chg { font-size: 15px; font-weight: 700; margin-left: 10px; font-variant-numeric: tabular-nums; }
.os-quote__asof { font-size: 12px; color: var(--os-muted); margin-top: 3px; }
.os-up { color: var(--os-gain); }
.os-down { color: var(--os-loss); }
.os-tabs { display: flex; gap: 4px; padding: 16px 24px 0; border-bottom: 1px solid var(--os-line); overflow-x: auto; scrollbar-width: none; }
.os-tabs::-webkit-scrollbar { display: none; }
.os-tab { position: relative; padding: 10px 18px 12px; font-size: 13px; font-weight: 600; color: var(--os-muted); white-space: nowrap; }
.os-tab[aria-selected="true"] { color: var(--os-text); }
.os-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--os-accent); box-shadow: 0 0 12px rgba(59,130,246,0.8); }
.os-preview__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.os-preview__main { padding: 18px 24px 22px; min-height: 300px; }
.os-preview__side { padding: 18px 24px 22px; border-left: 1px solid var(--os-line); }
.os-tf { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; border: 1px solid var(--os-line); margin-bottom: 10px; }
.os-tf button { padding: 4px 10px; border-radius: 5px; font-size: 11.5px; font-weight: 700; color: var(--os-muted); font-family: var(--os-mono); }
.os-tf button[aria-pressed="true"] { color: var(--os-text); background: rgba(59,130,246,0.18); }
.os-chart { position: relative; width: 100%; height: 230px; }
.os-chart svg { width: 100%; height: 100%; overflow: visible; }
.os-chart__line { fill: none; stroke: var(--os-accent-hi); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(59,130,246,0.6)); }
.os-chart__grid line { stroke: rgba(152,164,179,0.1); vector-effect: non-scaling-stroke; }
.os-chart__axis { font-family: var(--os-mono); font-size: 10.5px; fill: #6F7D90; }
.os-chart__last { font-family: var(--os-mono); font-size: 11px; font-weight: 700; }
.os-chart__msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--os-muted); font-size: 13.5px; }
.os-chart__draw { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); animation: os-draw 1.6s var(--os-ease) forwards; }
@keyframes os-draw { to { stroke-dashoffset: 0; } }
.os-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--os-muted); }
.os-provenance .os-tag { font-size: 9.5px; }
.os-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--os-line); border: 1px solid var(--os-line); border-radius: 8px; overflow: hidden; }
.os-kv > div { background: var(--os-panel-solid); padding: 12px 14px; }
.os-kv dt { font-size: 11.5px; color: var(--os-muted); }
.os-kv dd { margin: 3px 0 0; font-family: var(--os-mono); font-size: 14px; color: var(--os-text); font-variant-numeric: tabular-nums; }
.os-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.os-news li a { display: block; padding: 11px 12px; border-radius: 8px; transition: background .2s; }
.os-news li a:hover { background: rgba(59,130,246,0.1); }
.os-news__src { font-size: 11px; color: var(--os-muted); font-family: var(--os-mono); }
.os-news__h { font-size: 13.5px; color: var(--os-text); line-height: 1.4; margin-top: 2px; }
.os-preview__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 24px 22px; }

.os-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.os-score { padding: 14px; border-radius: 9px; border: 1px solid var(--os-line); background: rgba(5, 12, 23, 0.6); text-align: left; }
.os-score__label { font-size: 12px; color: var(--os-text-2); line-height: 1.3; }
.os-score__label b { display: block; color: var(--os-text); font-weight: 700; }
.os-dial { position: relative; width: 96px; height: 96px; margin: 12px auto 4px; }
.os-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.os-dial__track { fill: none; stroke: rgba(152,164,179,0.15); stroke-width: 7; }
.os-dial__arc { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--os-ease); }
.os-dial__arc--value { stroke: url(#osGradValue); }
.os-dial__arc--growth { stroke: url(#osGradGrowth); }
.os-dial__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.os-dial__num { font-family: var(--os-sans); font-size: 26px; font-weight: 700; color: var(--os-text); line-height: 1; }
.os-dial__den { font-size: 11px; color: var(--os-muted); margin-top: 3px; }
.os-dial__lock { display: grid; justify-items: center; gap: 3px; color: var(--os-icy); }
.os-dial__lock svg { width: 18px; height: 18px; transform: none; }
.os-dial__lock span { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--os-silver); }
.os-locked-note { margin-top: 14px; padding: 12px 14px; border-radius: 9px; border: 1px dashed rgba(220,238,255,0.22); font-size: 12.5px; color: var(--os-text-2); line-height: 1.5; }
.os-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.os-bars li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--os-text-2); }
.os-bars__ico { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: rgba(59,130,246,0.14); color: var(--os-accent-hi); }
.os-bars__ico svg { width: 11px; height: 11px; }
.os-bars__track { height: 4px; border-radius: 4px; background: rgba(152,164,179,0.14); overflow: hidden; }
.os-bars__fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2F6FE6, #60A5FA); }

/* ---------- engines ---------- */
.os-engines { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.os-engine { padding: 26px; transition: border-color .4s, box-shadow .4s, opacity .4s, transform .4s var(--os-ease); }
.os-engine[data-active="true"] { border-color: rgba(59,130,246,0.55); box-shadow: var(--os-glow), var(--os-shadow); }
.os-engines[data-focus] .os-engine:not([data-active="true"]) { opacity: 0.62; }
.os-engine__top { display: flex; align-items: center; gap: 14px; }
.os-engine__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--os-line-2); background: rgba(220,238,255,0.06); color: var(--os-icy); flex: none; }
.os-engine__ico svg { width: 20px; height: 20px; }
.os-engine__desc { margin-top: 12px; font-size: 13.5px; color: var(--os-text-2); }
.os-engine__body { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; margin-top: 22px; }
.os-engine .os-dial { width: 140px; height: 140px; margin: 0; }
.os-engine .os-dial__num { font-size: 30px; }
.os-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.os-factors li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid rgba(152,164,179,0.09); }
.os-factors li:last-child { border-bottom: 0; padding-bottom: 0; }
.os-factors b { font-size: 13px; font-weight: 600; color: var(--os-text); }
.os-factors span { font-family: var(--os-mono); font-size: 11px; color: var(--os-muted); text-align: right; }
.os-engine__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.os-lens { display: flex; justify-content: center; margin-top: 34px; }
.os-lens__track { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; border: 1px solid var(--os-line-2); background: rgba(6,14,27,0.8); min-width: min(420px, 100%); }
.os-lens__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(180deg, #3D84F7, #2B66D9); box-shadow: 0 8px 26px -8px rgba(59,130,246,0.9); transition: transform .5s var(--os-ease); }
.os-lens__track[data-lens="growth"] .os-lens__pill { transform: translateX(100%); }
.os-lens button { position: relative; z-index: 1; height: 42px; padding: 0 22px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--os-text-2); transition: color .3s; }
.os-lens button[aria-pressed="true"] { color: #fff; }
.os-lens__arrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--os-muted); }
.os-lens__arrow i { display: block; height: 1px; width: 70px; background: linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,0.7), rgba(59,130,246,0)); }
.os-lens__q { text-align: center; margin: 18px auto 0; max-width: 640px; font-family: var(--os-serif); font-style: italic; font-size: 19px; color: #D3DCE7; min-height: 2.6em; }

/* ---------- transparency ---------- */
.os-band { position: relative; overflow: hidden; border-top: 1px solid var(--os-line); border-bottom: 1px solid var(--os-line); }
.os-band .os-scene { background: radial-gradient(70% 90% at 50% 120%, rgba(11,58,115,0.65), rgba(3,8,15,0) 70%), linear-gradient(180deg, #03080F, #050E1C); }
.os-flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.os-flow::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,0.6), rgba(59,130,246,0)); }
.os-flow__pulse { position: absolute; top: 25px; left: 10%; width: 60px; height: 5px; border-radius: 4px; background: radial-gradient(closest-side, rgba(220,238,255,0.95), rgba(59,130,246,0)); animation: os-pulse 5s linear infinite; }
@keyframes os-pulse { from { transform: translateX(0); } to { transform: translateX(calc(80vw - 60px)); } }
.os-flow__step { position: relative; text-align: center; padding: 0 6px; }
.os-flow__ico { width: 54px; height: 54px; margin: 0 auto; border-radius: 14px; display: grid; place-items: center; border: 1px solid rgba(59,130,246,0.45); background: radial-gradient(circle at 50% 30%, rgba(59,130,246,0.28), rgba(6,21,37,0.95) 70%); color: var(--os-icy); box-shadow: 0 0 28px -6px rgba(59,130,246,0.6); }
.os-flow__ico svg { width: 22px; height: 22px; }
.os-flow__title { margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--os-text); }
.os-flow__desc { margin-top: 6px; font-size: 12.5px; color: var(--os-muted); line-height: 1.5; }
.os-tags { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 46px; }
.os-tagcard { padding: 16px; }
.os-tagcard .os-tag { margin-bottom: 10px; }
.os-tagcard p { margin: 0; font-size: 12.5px; color: var(--os-text-2); line-height: 1.55; }
.os-ridgeband { position: relative; height: clamp(120px, 16vw, 200px); margin-top: -40px; }

/* ---------- research ---------- */
.os-research { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 44px; }
.os-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.os-chapter { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--os-line); background: rgba(8,17,31,0.55); text-align: left; transition: border-color .25s, background .25s; }
.os-chapter:hover { border-color: var(--os-line-2); }
.os-chapter[aria-selected="true"] { border-color: rgba(59,130,246,0.55); background: rgba(11,58,115,0.3); }
.os-chapter__n { font-family: var(--os-mono); font-size: 11px; color: var(--os-accent-hi); width: 22px; flex: none; }
.os-chapter__t { flex: 1; font-size: 14px; font-weight: 600; color: var(--os-text); }
.os-chapter__c { font-family: var(--os-mono); font-size: 11px; color: var(--os-muted); }
.os-doc { padding: 0; overflow: hidden; }
.os-doc__bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--os-line); font-size: 12px; color: var(--os-muted); }
.os-doc__dots { display: flex; gap: 6px; margin-right: 6px; }
.os-doc__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(152,164,179,0.25); }
.os-doc__body { padding: 22px 22px 8px; }
.os-doc__title { font-family: var(--os-serif); font-size: 24px; color: var(--os-text); }
.os-doc__sub { font-size: 12.5px; color: var(--os-muted); margin-top: 4px; }
.os-doc__sections { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.os-doc__sec { padding: 14px; border-radius: 9px; border: 1px solid var(--os-line); background: rgba(5,12,23,0.55); animation: os-rise .5s var(--os-ease) both; }
.os-doc__sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.os-doc__sec-head b { font-size: 13.5px; color: var(--os-text); font-weight: 600; }
.os-doc__lines { margin-top: 10px; display: grid; gap: 6px; }
.os-doc__lines i { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(152,164,179,0.2), rgba(152,164,179,0.08)); }
.os-doc__foot { padding: 14px 22px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--os-line); margin-top: 14px; }
@keyframes os-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- toolkit ---------- */
.os-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.os-journey span { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--os-text-2); }
.os-journey i { width: 22px; height: 1px; background: rgba(59,130,246,0.6); }
.os-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.os-tool { display: flex; flex-direction: column; padding: 18px; transition: transform .35s var(--os-ease), border-color .35s, box-shadow .35s; }
.os-tool:hover { transform: translateY(-3px); border-color: rgba(59,130,246,0.45); box-shadow: var(--os-glow), var(--os-shadow); }
.os-tool__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.os-tool__step { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--os-accent-hi); }
.os-tool__shot { position: relative; margin-top: 12px; height: 150px; border-radius: 8px; overflow: hidden; border: 1px solid var(--os-line); background: #07101E; }
.os-tool__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0.92; transform: scale(var(--z, 1)); transform-origin: 0 0; transition: transform .8s var(--os-ease); }
.os-tool:hover .os-tool__shot img { transform: scale(calc(var(--z, 1) * 1.04)); }
.os-tool__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,8,15,0) 55%, rgba(3,8,15,0.75)); }
.os-tool__art { display: grid; place-items: center; height: 100%; color: var(--os-icy); background: radial-gradient(circle at 50% 40%, rgba(59,130,246,0.25), rgba(7,16,30,0) 65%); }
.os-tool__art svg { width: 64px; height: 64px; opacity: 0.9; }
.os-tool h3 { margin-top: 16px; }
.os-tool p { margin: 8px 0 0; font-size: 13.5px; color: var(--os-text-2); line-height: 1.55; flex: 1; }
.os-tool .os-link { margin-top: 14px; }
.os-impact { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.os-impact span { font-family: var(--os-mono); font-size: 10.5px; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--os-line-2); color: var(--os-text-2); }
.os-impact span b { color: var(--os-icy); }

/* ---------- earth band ---------- */
.os-earth { position: relative; overflow: hidden; display: grid; place-items: end center; isolation: isolate; }
.os-earth--photo { aspect-ratio: 16 / 9; min-height: 460px; max-height: 900px; width: 100%; padding-bottom: clamp(30px, 4.5vw, 64px); background: #01040A; }
.os-earth__photo { position: absolute; inset: 0; z-index: 0; }
.os-earth__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Earth band in depth (otharis-earth3d.js): the canvas takes the photo's place once drawn; the photo stays
   underneath as the fallback. */
.os-earth__3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--os-ease); }
.os-earth--3d .os-earth__3d { opacity: 1; }
.os-earth--3d .os-earth__photo img { opacity: 0; transition: opacity 1.4s var(--os-ease); }
.os-earth__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,4,10,0.55) 0%, rgba(1,4,10,0) 20%, rgba(1,4,10,0) 58%, rgba(1,4,10,0.72) 86%, #03080F 100%); }
.os-earth__wordmark { position: absolute; z-index: 2; top: clamp(26px, 5vw, 64px); left: 0; right: 0; text-align: center;
  font-family: var(--os-sans); font-weight: 600; font-size: clamp(26px, 3vw, 44px); letter-spacing: 0.2em; padding-left: 0.2em; color: var(--os-text);
  text-shadow: 0 0 24px rgba(96,165,250,0.45), 0 2px 18px rgba(1,4,10,0.9); }
.os-earth__copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--os-gutter); }
.os-earth__k { font-size: clamp(12px, 1.1vw, 14px); font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--os-text); text-shadow: 0 2px 18px rgba(1,4,10,0.95); }
.os-earth__s { margin-top: 10px; font-size: 14px; color: var(--os-text-2); text-shadow: 0 1px 14px rgba(1,4,10,0.95); }

/* ---------- founders ---------- */
.os-founders { display: grid; gap: 22px; margin-top: 44px; }
.os-founder { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 22px; align-items: stretch; }
.os-founder--rev { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.os-founder--rev .os-portrait { order: 2; }
.os-portrait { position: relative; overflow: hidden; min-height: 380px; border-radius: var(--os-r); border: 1px solid var(--os-line); isolation: isolate;
  background: radial-gradient(80% 70% at 60% 35%, rgba(59,130,246,0.38), rgba(11,58,115,0.18) 45%, rgba(3,8,15,0) 75%), linear-gradient(180deg, #071427, #040A15); }
.os-portrait .os-ridges { opacity: 0.85; }
.os-portrait__img { position: absolute; left: 50%; bottom: 0; width: min(88%, 400px); transform: translateX(-50%); z-index: 2;
  filter: saturate(0.8) contrast(1.06) brightness(0.9) drop-shadow(-14px 0 34px rgba(59,130,246,0.3));
  -webkit-mask-image: radial-gradient(ellipse 60% 64% at 50% 40%, #000 64%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 60% 64% at 50% 40%, #000 64%, rgba(0,0,0,0) 100%); }
.os-portrait__plate { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.os-portrait__name { font-family: var(--os-serif); font-size: 24px; color: var(--os-text); line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,0.8); }
.os-portrait__role { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--os-icy); margin-top: 4px; }
.os-bio { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.os-bio__q { font-family: var(--os-serif); font-size: 46px; line-height: 0.6; color: var(--os-accent-hi); height: 22px; }
.os-bio blockquote { margin: 10px 0 0; font-family: var(--os-serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; color: var(--os-text); }
.os-bio__explain { margin-top: 10px; font-size: 13px; color: var(--os-muted); font-style: italic; }
.os-bio p.os-body { margin-top: 18px; }
.os-bio__foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--os-line); }
.os-bio__foot a { font-family: var(--os-mono); font-size: 13px; color: var(--os-accent-hi); }
.os-bio__foot a:hover { color: var(--os-icy); }

/* ---------- pricing ---------- */
.os-billing { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 9px; border: 1px solid var(--os-line-2); background: rgba(6,14,27,0.8); }
.os-billing button { height: 36px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--os-muted); transition: background .25s, color .25s; }
.os-billing button[aria-pressed="true"] { background: rgba(59,130,246,0.2); color: #fff; }
.os-billing__save { font-size: 11px; font-weight: 800; color: var(--os-gain); margin-left: 6px; }
.os-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; align-items: stretch; }
.os-plan { display: flex; flex-direction: column; padding: 26px 24px; }
.os-plan--pro { background: linear-gradient(180deg, rgba(20, 44, 84, 0.92), rgba(9, 20, 38, 0.92)); }
.os-plan__badge { position: absolute; top: 18px; right: 18px; }
.os-plan__name { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; color: var(--os-text); }
.os-plan__tag { margin-top: 4px; font-size: 13px; color: var(--os-muted); }
.os-plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; min-height: 56px; }
.os-plan__amount { font-family: var(--os-serif); font-size: 46px; line-height: 1; color: var(--os-text); font-variant-numeric: tabular-nums; }
.os-plan__per { font-size: 13px; color: var(--os-muted); }
.os-plan__note { font-size: 12px; color: var(--os-muted); min-height: 18px; margin-top: 6px; }
.os-plan ul { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--os-line); display: grid; gap: 11px; flex: 1; align-content: start; }
.os-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13.5px; color: var(--os-text-2); line-height: 1.45; }
.os-plan li svg { width: 16px; height: 16px; color: var(--os-accent-hi); margin-top: 2px; }
.os-plan .os-btn { margin-top: 26px; }
.os-notice { max-width: 760px; margin: 26px auto 0; padding: 14px 18px; border-radius: 10px; border: 1px solid rgba(59,130,246,0.35); background: rgba(11,58,115,0.25); text-align: center; font-size: 13.5px; color: var(--os-text-2); }
.os-compare { margin-top: 34px; overflow-x: auto; }
.os-compare table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.os-compare th, .os-compare td { padding: 12px 16px; border-bottom: 1px solid var(--os-line); }
.os-compare th { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--os-text-2); text-align: center; }
.os-compare th:first-child { text-align: left; }
.os-compare td { color: var(--os-text-2); text-align: center; font-family: var(--os-mono); }
.os-compare td:first-child { text-align: left; font-family: var(--os-sans); color: var(--os-text); }
.os-compare tr:last-child td { border-bottom: 0; }
.os-compare [class*="text-terminal-gain"], .os-compare .text-emerald-400 { color: var(--os-gain); }

/* ---------- faq ---------- */
.os-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 40px; }
.os-faq details { border: 1px solid var(--os-line); border-radius: 10px; background: rgba(8,17,31,0.6); transition: border-color .25s; }
.os-faq details[open] { border-color: rgba(59,130,246,0.45); }
.os-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; font-size: 14.5px; font-weight: 600; color: var(--os-text); }
.os-faq summary::-webkit-details-marker { display: none; }
.os-faq summary svg { width: 16px; height: 16px; flex: none; color: var(--os-silver); transition: transform .3s var(--os-ease); }
.os-faq details[open] summary svg { transform: rotate(45deg); color: var(--os-accent-hi); }
.os-faq details > div { padding: 0 18px 18px; font-size: 13.5px; color: var(--os-text-2); line-height: 1.65; }

/* ---------- download app ---------- */
.os-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.os-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.os-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.os-steps b { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-family: var(--os-mono); font-size: 12px; color: var(--os-icy); border: 1px solid rgba(59,130,246,0.45); background: rgba(11,58,115,0.3); }
.os-steps span { font-size: 13.5px; color: var(--os-text-2); padding-top: 6px; }
.os-devices { position: relative; min-height: 380px; }
.os-laptop { position: relative; width: 92%; margin-left: auto; }
.os-laptop__screen { border-radius: 12px 12px 0 0; border: 1px solid rgba(220,238,255,0.18); background: #050B16; padding: 10px 10px 0; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.95), 0 0 80px -20px rgba(59,130,246,0.35); }
.os-laptop__screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 6px 6px 0 0; }
.os-laptop__base { height: 14px; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #1A2638, #0A121E); border: 1px solid rgba(220,238,255,0.12); border-top: 0; }
.os-phone { position: absolute; left: 0; bottom: -18px; width: 33%; max-width: 210px; aspect-ratio: 9 / 19; border-radius: 30px; padding: 8px; background: linear-gradient(160deg, #1B2638, #070E19); border: 1px solid rgba(220,238,255,0.22); box-shadow: 0 40px 70px -24px rgba(0,0,0,0.95), 0 0 50px -14px rgba(59,130,246,0.5); }
.os-phone__screen { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: radial-gradient(90% 60% at 50% 30%, rgba(59,130,246,0.35), rgba(6,21,37,0) 70%), linear-gradient(180deg, #071427, #030810); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 14px; }
.os-phone__screen::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 34%; height: 16px; border-radius: 10px; background: #02050A; }
.os-phone__screen img { width: 54%; height: auto; filter: drop-shadow(0 8px 24px rgba(59,130,246,0.55)); }
.os-phone__name { font-weight: 700; letter-spacing: 0.24em; font-size: 12px; color: var(--os-text); }
.os-phone__hint { font-size: 10.5px; color: var(--os-muted); line-height: 1.4; }
.os-phone__btn { margin-top: 4px; padding: 6px 12px; border-radius: 8px; background: rgba(59,130,246,0.25); border: 1px solid rgba(59,130,246,0.5); font-size: 10.5px; font-weight: 700; color: var(--os-icy); }

/* ---------- contact ---------- */
.os-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 44px; }
.os-mails { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.os-mail { display: block; padding: 18px; transition: border-color .25s, transform .3s var(--os-ease); }
.os-mail:hover { border-color: rgba(59,130,246,0.5); transform: translateY(-2px); }
.os-mail__k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--os-accent-hi); }
.os-mail__d { margin-top: 6px; font-size: 13px; color: var(--os-text-2); }
.os-mail__a { margin-top: 12px; font-family: var(--os-mono); font-size: 13px; color: var(--os-text); overflow-wrap: anywhere; }
.os-form { padding: clamp(20px, 3vw, 28px); display: grid; gap: 14px; }
.os-field { display: grid; gap: 6px; }
.os-field label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--os-text-2); }
.os-field input, .os-field select, .os-field textarea { width: 100%; border-radius: 8px; border: 1px solid var(--os-line-2); background: rgba(3,8,15,0.7); color: var(--os-text); font-family: var(--os-sans); font-size: 14px; padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.os-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--os-silver) 50%), linear-gradient(135deg, var(--os-silver) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.os-field select option { background: #050C17; }
.os-field textarea { min-height: 120px; resize: vertical; }
.os-field input:focus, .os-field select:focus, .os-field textarea:focus { border-color: rgba(59,130,246,0.65); box-shadow: 0 0 0 4px rgba(59,130,246,0.14); }
.os-form__note { font-size: 12px; color: var(--os-muted); }

/* ---------- final cta ---------- */
.os-final { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 160px) 0 clamp(80px, 10vw, 130px); isolation: isolate; }
.os-final .os-scene { background: radial-gradient(55% 70% at 72% 70%, rgba(220,238,255,0.18), rgba(59,130,246,0.15) 30%, rgba(3,8,15,0) 65%), linear-gradient(180deg, #03080F, #071528 60%, #03080F); }
.os-final__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 30px; align-items: end; }
.os-final__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.os-final__aside { justify-self: end; text-align: right; font-family: var(--os-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: #D3DCE7; }
.os-final__aside i { display: block; width: 40px; height: 1px; background: var(--os-silver); margin: 16px 0 0 auto; }

/* ---------- footer ---------- */
.os-footer { position: relative; border-top: 1px solid var(--os-line); padding: 56px 0 34px; background: #02060C; }
.os-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 30px; }
.os-footer__brand p { margin: 14px 0 0; font-size: 13px; color: var(--os-muted); max-width: 260px; }
.os-footer h4 { margin: 0 0 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--os-text); }
.os-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.os-footer li a, .os-footer li button { font-size: 13px; color: var(--os-muted); text-align: left; transition: color .2s; }
.os-footer li a:hover, .os-footer li button:hover { color: var(--os-text); }
.os-footer__mails { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--os-line); }
.os-footer__mails a { font-family: var(--os-mono); font-size: 12px; color: var(--os-text-2); }
.os-footer__mails a:hover { color: var(--os-icy); }
.os-disclaimer { margin-top: 22px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--os-line); background: rgba(8,17,31,0.55); font-size: 12px; color: var(--os-muted); line-height: 1.6; }
.os-disclaimer strong { color: var(--os-text-2); font-weight: 700; letter-spacing: 0.06em; }
.os-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 11.5px; color: #5F6C7E; }
.os-footer__bottom .os-mono { letter-spacing: 0.06em; }

/* ---------- reveal motion ---------- */
.os-js .os-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--os-ease), transform .9s var(--os-ease); }
.os-js .os-reveal.is-in { opacity: 1; transform: none; }
.os-reveal[data-delay="1"] { transition-delay: .08s; }
.os-reveal[data-delay="2"] { transition-delay: .16s; }
.os-reveal[data-delay="3"] { transition-delay: .24s; }
/* Hero: visible from the first paint (it is the LCP), only a short slide-in - never hidden waiting on JS. */
.os-hero-in { animation: os-hero-in 1s var(--os-ease) both; }
.os-hero-in[data-delay="1"] { animation-delay: .06s; }
.os-hero-in[data-delay="2"] { animation-delay: .12s; }
.os-hero-in[data-delay="3"] { animation-delay: .18s; }
@keyframes os-hero-in { from { transform: translateY(14px); } to { transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .os-mails { grid-template-columns: 1fr; }
}
@media (max-width: 1120px) {
  .os-nav__links { gap: 18px; margin-left: 6px; }
  .os-nav__text--app { display: none; }
  .os-nav__links a[href="#officialContact"] { display: none; }
}
@media (max-width: 1023px) {
  .os-nav__links, .os-nav__actions { display: none; }
  .os-burger { display: grid; }
  .os-hero { min-height: auto; padding-top: calc(var(--os-nav-h) + 36px); }
  .os-hero__grid { grid-template-columns: 1fr; }
  .os-founder-fig { justify-self: center; width: min(420px, 86%); margin: 6px auto 0; order: -1; margin-bottom: -40px; }
  .os-hero--scene { min-height: auto; }
  .os-hero--scene .os-hero__media { display: none; }
  .os-hero__sky { top: 70px; height: 380px; }
  .os-hero__sky-inner { opacity: .34; -webkit-mask-image: none; mask-image: none; }
  .os-hero__spacer { display: none; }
  .os-quotes { margin: 8px auto 18px; text-align: center; }
  .os-quotes__text { justify-content: center; }
  .os-hero--scene { background: radial-gradient(90% 50% at 50% 0%, rgba(11,58,115,0.45), rgba(3,8,15,0) 70%), #03080F; }
  .os-hero__mobile-shot { display: block; position: relative; margin: 30px 0 -10px; aspect-ratio: 4 / 3; max-height: 560px; overflow: hidden; }
  .os-hero__mobile-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .os-hero__mobile-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #03080F 0%, rgba(3,8,15,0) 18%, rgba(3,8,15,0) 72%, #03080F 100%); }
  .os-hero__copy { padding-bottom: 0; }
  .os-signoff__quote { display: none; }
  .os-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .os-stat:nth-child(n+3) { border-top: 1px solid var(--os-line); }
  .os-preview__body { grid-template-columns: 1fr; }
  .os-preview__side { border-left: 0; border-top: 1px solid var(--os-line); }
  .os-engines { grid-template-columns: 1fr; }
  .os-engines[data-focus] .os-engine:not([data-active="true"]) { display: none; }
  .os-flow { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
  .os-flow__step { scroll-snap-align: start; }
  .os-flow::before, .os-flow__pulse { display: none; }
  .os-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-research { grid-template-columns: 1fr; }
  .os-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-founder, .os-founder--rev { grid-template-columns: 1fr; }
  .os-founder--rev .os-portrait { order: 0; }
  .os-plans { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .os-plan--pro { order: -1; }
  .os-faq { grid-template-columns: 1fr; }
  .os-app { grid-template-columns: 1fr; }
  .os-devices { min-height: 0; margin-top: 10px; }
  .os-contact { grid-template-columns: 1fr; }
  .os-final__grid { grid-template-columns: 1fr; }
  .os-final__aside { justify-self: start; text-align: left; }
  .os-final__aside i { margin-left: 0; }
  .os-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .os-site { font-size: 14.5px; }
  .os-display { font-size: clamp(38px, 11vw, 48px); }
  .os-hero__ctas .os-btn { flex: 1 1 100%; }
  .os-founder-fig { width: min(340px, 92%); }
  .os-signoff { gap: 12px; }
  .os-stat { padding-right: 10px; }
  .os-stat + .os-stat { padding-left: 14px; }
  .os-search__kbd { display: none; }
  .os-chip { padding: 0 14px; }
  .os-preview__top, .os-tabs, .os-preview__main, .os-preview__side, .os-preview__actions { padding-left: 16px; padding-right: 16px; }
  .os-quote { text-align: left; width: 100%; }
  .os-preview__actions { grid-template-columns: 1fr; }
  .os-engine { padding: 20px; }
  .os-engine__body { grid-template-columns: 1fr; justify-items: center; }
  .os-engine__body .os-factors { width: 100%; }
  .os-tags { grid-template-columns: 1fr; }
  .os-tools { grid-template-columns: 1fr; }
  .os-mails { grid-template-columns: 1fr; }
  .os-portrait { min-height: 330px; }
  .os-phone { width: 36%; border-radius: 22px; padding: 6px; }
  .os-phone__screen { border-radius: 17px; gap: 6px; }
  .os-phone__hint, .os-phone__btn { display: none; }
  .os-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .os-lens button { padding: 0 14px; letter-spacing: 0.1em; }
  .os-earth--photo { aspect-ratio: auto; min-height: 0; display: block; padding: 0; }
  .os-earth--photo .os-earth__photo { position: relative; aspect-ratio: 4 / 3; }
  .os-earth--photo .os-earth__photo img { object-position: 40% 50%; }
  .os-earth--photo .os-earth__copy { padding: 18px var(--os-gutter) 36px; }
  .os-earth__wordmark { font-size: 24px; top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .os-site *, .os-site *::before, .os-site *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .os-reveal { opacity: 1; transform: none; }
  .os-chart__draw { stroke-dashoffset: 0; }
  .os-flow__pulse { display: none; }
  .os-cdl-ma { stroke-dashoffset: 0; }
}

/* ================================================================ COSMIC SITE (2026-10-25)
   Photo hero (dawn -> night on scroll), facts, the three constellations as ringed worlds with the real app,
   the fleet of screens in orbit, the app inside Saturn's rings, and a giant ringed planet under the final CTA.
   Behaviour: otharis-site.js initHero / initWorlds / initPlanet. */

/* The app sets overflow-x: hidden on <body>, which turns the body into the scroll container that position: sticky
   attaches to (and it never scrolls), so the hero would not stay pinned. While the public site is showing, the body
   clips instead (clip creates no scroll container); the viewport still hides horizontal overflow. */
body:has(> .os-site:not(.hidden)) { overflow-x: clip; overflow-y: visible; }

/* one starry sky behind the whole public site (initSky): fixed, so every section sits in the same night */
.os-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.os-site > main, .os-site > .os-footer { position: relative; z-index: 1; }
.os-site .os-band .os-scene { opacity: .55; }
.os-site .os-band { background: transparent; }
.os-final--planet { background: transparent; }
.os-footer { background: linear-gradient(180deg, rgba(3,8,15,0), rgba(3,8,15,.85) 30%); }

/* hero: a pinned stage; the scroll drives --dawn/--night/--sunY/--hide/--lit/--draw (initHero) */
.os-ph { position: relative; height: 190vh; }
.os-ph__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #050d1d 0%, #0b1a35 70%, #10264a 100%); }
.os-ph__frame { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1344 / 768; }
.os-ph__frame > * { position: absolute; }
.os-ph__photo { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.os-ph__dawn { opacity: var(--dawn); }
.os-ph__dark { inset: 0; background: linear-gradient(180deg, rgba(1,4,12,.25), rgba(1,4,12,.45)); opacity: var(--night); }
.os-ph__glow { width: 74%; aspect-ratio: 1; left: 79.2%; top: calc(var(--sunY) * 1%); transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; opacity: calc(var(--dawn) * var(--lit));
  background: radial-gradient(closest-side, rgba(185,220,255,.62), rgba(96,165,250,.3) 22%, rgba(59,130,246,.12) 45%, rgba(11,58,115,.05) 62%, transparent 75%); }
.os-ph__sun { width: 10.5%; height: auto; left: 79.2%; top: calc(var(--sunY) * 1%); transform: translate(-50%, -50%); opacity: var(--sunA);
  filter: drop-shadow(0 0 24px rgba(170,215,255,.85)) drop-shadow(0 0 70px rgba(96,165,250,.6)); }
.os-ph__ridge { left: 65.4762%; top: 32.5521%; width: 28.2738%; height: 45.5729%; opacity: var(--hide);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 0, #000 84%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 0, #000 84%, transparent 100%); mask-composite: intersect; }
.os-ph__arm { left: 22.3214%; top: 39.0625%; width: 19.0476%; height: 33.3333%; opacity: 0; transition: opacity .9s var(--os-ease); }
.os-ph__stage.is-pointing .os-ph__arm { opacity: 1; }
.os-ph__stars { position: absolute; left: 0; top: 0; width: 100%; height: var(--skyH, 56%); opacity: var(--night); z-index: 1; pointer-events: none; }
.os-ph__candles { position: absolute; z-index: 1; left: 0; top: var(--candT, 6%); width: 100%; height: var(--candH, 34%); pointer-events: none; mix-blend-mode: screen; opacity: calc(.62 - .3 * var(--night));
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 20%, transparent 36%, transparent 64%, #000 80%), linear-gradient(180deg, transparent 0, #000 28%, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0, #000 20%, transparent 36%, transparent 64%, #000 80%), linear-gradient(180deg, transparent 0, #000 28%, #000 70%, transparent 100%); mask-composite: intersect; }
.os-ph__candles--far { filter: blur(1.6px); opacity: calc(.38 - .18 * var(--night)); }
.os-ph__candles > g { animation: os-drift 90s linear infinite; }
.os-ph__candles--far > g { animation-duration: 160s; }
@keyframes os-drift { to { transform: translateX(-2400px); } }
.os-ph__wave { position: absolute; z-index: 1; pointer-events: none; opacity: var(--night); mix-blend-mode: screen; }
.os-ph__wave .os-ph__link { stroke: rgba(176,206,255,.32); stroke-width: .7; fill: none; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--draw))); }
.os-ph__wave .os-ph__star { animation: os-twinkle 4.5s ease-in-out infinite; }
@keyframes os-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.os-ph__wave text { fill: rgba(205,222,245,.42); font: 500 9.5px var(--os-mono); letter-spacing: .04em; }
.os-ph__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(2,6,14,.55) 0%, rgba(2,6,14,.1) 30%, rgba(2,6,14,0) 50%, rgba(2,6,14,.25) 85%, var(--os-void) 100%); }
.os-ph__copy { position: absolute; left: 0; right: 0; top: calc(var(--os-nav-h) + 9vh); z-index: 3; text-align: center; opacity: var(--copy); transform: translateY(calc(var(--night) * -30px)); }
.os-ph__copy .os-eyebrow { margin-bottom: 18px; }
.os-ph__copy .os-display { font-size: clamp(40px, 4.6vw, 64px); text-shadow: 0 2px 30px rgba(3,8,15,.7); }
.os-ph__copy .os-display em { font-style: italic; color: var(--os-icy); }
.os-ph__copy .os-lead { margin: 18px auto 0; max-width: 620px; color: #C9D3DF; text-shadow: 0 1px 18px rgba(3,8,15,.9); }
.os-ph__copy .os-hero__ctas { justify-content: center; }
.os-ph__hint { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); font: 600 10px var(--os-mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(220,238,255,.55); opacity: var(--copy); }
/* hero quotes: centred under the copy, just above "Scroll"; they fade with the copy at night.
   Bottom-anchored (flex-end) so a longer quote grows upwards and never pushes into the hint. */
.os-ph .os-quotes { position: absolute; left: 50%; bottom: 62px; z-index: 3; width: min(720px, calc(100% - 40px)); margin: 0; transform: translateX(-50%); text-align: center; opacity: var(--copy); }
.os-ph .os-quotes__text { justify-content: center; min-height: 0; font-size: var(--qfs, clamp(17px, 1.45vw, 21px)); color: #E4EBF4; text-shadow: 0 1px 18px rgba(3,8,15,.95), 0 0 2px rgba(3,8,15,.6); }
/* short screens (laptops with browser chrome): smaller and wider so the longest quote stays clear of the CTAs */
@media (max-height: 720px) {
  .os-ph .os-quotes { bottom: 50px; width: min(900px, calc(100% - 40px)); }
  .os-ph .os-quotes__text { font-size: var(--qfs, 15.5px); }
  .os-ph .os-quotes__who { margin-top: 4px; font-size: 12px; }
}
/* no room at all (phones in landscape): the copy and its buttons come first */
@media (max-height: 520px) { .os-ph .os-quotes { display: none; } }
.os-ph .os-quotes.is-cramped { visibility: hidden; }

/* facts on a line of stars */
.os-proof { padding-top: clamp(56px, 7vw, 90px); }
.os-proof__row { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.os-proof__row::before { content: ""; position: absolute; left: 10%; right: 10%; top: 23px; border-top: 1px dashed rgba(191,219,254,.28); }
.os-fact { position: relative; text-align: center; padding: 18px 8px 0; }
.os-fact__node { display: block; width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 16px; background: var(--os-icy); box-shadow: 0 0 0 4px rgba(96,165,250,.18), 0 0 18px 4px rgba(96,165,250,.6); }
.os-fact__v { font-family: var(--os-serif); font-size: clamp(36px, 3.6vw, 46px); line-height: 1; color: var(--os-text); }
.os-fact__l { margin: 10px auto 0; font-size: 13px; color: var(--os-text-2); max-width: 180px; }
.os-proof__foot { text-align: center; margin-top: 40px; font: 500 12px var(--os-mono); letter-spacing: .06em; color: var(--os-muted); text-transform: uppercase; }

/* telescope: the live search preview sits in a lens of light */
#officialProduct .os-preview { box-shadow: 0 40px 120px -40px rgba(59,130,246,.45), var(--os-shadow); }

/* the three constellations */
.os-cst__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 90px); }
.os-cst__row--flip .os-world { order: 2; }
.os-cst__k { font: 600 11px var(--os-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--os-accent-hi); }
.os-cst__t { font-family: var(--os-serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.12; margin: 10px 0 0; color: var(--os-text); }
.os-cst__d { color: var(--os-text-2); margin: 14px 0 0; font-size: 15px; }
.os-cst__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; font-size: 14px; color: var(--os-text-2); }
.os-cst__list li { display: flex; gap: 10px; }
.os-cst__list li::before { content: "✦"; color: var(--os-accent-hi); font-size: 11px; margin-top: 3px; }
.os-cst__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.os-cst__how { margin-top: 18px; border: 1px solid var(--os-line); border-radius: var(--os-r-lg); padding: 12px 16px; background: rgba(3,8,15,.45); }
.os-cst__how summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; }
.os-cst__how summary svg, .os-cst__how summary i { width: 16px; height: 16px; color: var(--os-accent-hi); }
.os-cst__how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 10px; }
.os-cst__how h4 { font-size: 13px; margin: 0 0 8px; color: var(--os-text); }
.os-cst .os-factors { margin: 0; }
.os-cst .os-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.os-cst .os-tagcard { padding: 8px 10px; background: rgba(3,8,15,.5); border-radius: var(--os-r); }
.os-cst .os-tagcard p { display: none; }

/* a ringed world: planet, rings (back half behind the phone, front half over it), the real app */
.os-world { position: relative; aspect-ratio: 1.12; }
.os-world__planet { position: absolute; width: 56%; aspect-ratio: 1; left: 22%; top: 15%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #d8ebff 0%, #6ea8f7 14%, #2a63b8 38%, #0d2a5c 64%, #050d1f 86%);
  box-shadow: inset -36px -40px 70px rgba(0,0,0,.7), inset 10px 8px 30px rgba(220,238,255,.18), 0 0 120px -20px rgba(59,130,246,.65); }
.os-world__planet::before { content: ""; position: absolute; inset: -10%; transform: rotate(-16deg);
  background: repeating-linear-gradient(180deg, rgba(220,238,255,.07) 0 3%, transparent 3% 7%, rgba(3,8,15,.12) 7% 9%, transparent 9% 13%); }
.os-world--green .os-world__planet { background: radial-gradient(circle at 34% 28%, #e0fbef 0%, #6ee7b7 13%, #10b981 34%, #065f46 62%, #03140f 86%); box-shadow: inset -36px -40px 70px rgba(0,0,0,.7), 0 0 120px -20px rgba(16,185,129,.55); }
.os-world--ice .os-world__planet { background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e5e7eb 12%, #98a4b3 34%, #3b4656 62%, #0b0f16 86%); box-shadow: inset -36px -40px 70px rgba(0,0,0,.7), 0 0 120px -20px rgba(220,238,255,.45); }
.os-world__ring { position: absolute; inset: -6% -10%; width: 120%; height: 112%; max-width: none; overflow: visible; pointer-events: none; }
.os-world__ring--back { z-index: 1; }
.os-world__ring--front { z-index: 4; }
.os-world__ring .os-dust { stroke-dasharray: 1 9; animation: os-dust 22s linear infinite; }
.os-world__ring .os-dust--b { stroke-dasharray: 1 14; animation-duration: 34s; animation-direction: reverse; }
@keyframes os-dust { to { stroke-dashoffset: -400; } }
.os-world__phone { position: absolute; z-index: 3; width: 33%; left: 33.5%; top: 9%; transform: rotate(-7deg); animation: os-bob 7s ease-in-out infinite; }
.os-world__phone--l { width: 29%; left: 17%; top: 14%; transform: rotate(-12deg); animation-delay: -2s; }
.os-world__phone--r { width: 27%; left: 60%; top: 14%; transform: rotate(7deg); animation-delay: -4.5s; }
@keyframes os-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* a real phone: titanium frame, black bezel, Dynamic-Island-style cutout, side keys, status bar, glass sheen.
   Generic (no maker's logo or name); the screen is the real app. Sizes scale with the device width. */
.os-dev { container-type: inline-size; aspect-ratio: 71.5 / 147.6; border-radius: 15% / 7.3%; padding: 1.9%; background: #050608;
  box-shadow: 0 0 0 1px #2a2e35, 0 0 0 1.8px #b4bbc4, 0 0 0 2.4px #4f5660, inset 0 0 0 1px rgba(255,255,255,.06),
    0 40px 80px -30px rgba(0,0,0,.95), 0 0 60px -14px rgba(96,165,250,.6); }
.os-dev__screen { position: relative; height: 100%; overflow: hidden; border-radius: 13.4% / 6.4%; background: #050c17; padding-top: 12%; }
.os-dev__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.os-dev__screen::before { content: ""; position: absolute; z-index: 2; top: 3.1%; left: 50%; width: 31%; height: 4.3%; transform: translateX(-50%); border-radius: 99px; background: #000; box-shadow: inset 6px 0 6px -4px rgba(40,60,90,.6); }
.os-dev__status { position: absolute; z-index: 2; top: 3.4%; left: 10%; right: 9%; display: flex; justify-content: space-between; align-items: center; color: #f3f5f8; font: 600 5.6cqw/1 var(--os-sans); letter-spacing: .01em; pointer-events: none; }
.os-dev__status b { font-weight: 600; }
.os-dev__status i { width: 10cqw; height: 4.6cqw; border-radius: 1.4cqw; border: 1px solid rgba(243,245,248,.7); background: linear-gradient(90deg, #f3f5f8 0 72%, transparent 72%); background-clip: content-box; padding: 1px; }
.os-dev__glass { position: absolute; inset: 1.9%; z-index: 3; border-radius: 13.4% / 6.4%; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 22%, transparent 38%); }
.os-dev__keys { position: absolute; z-index: -1; left: -1.6%; top: 18%; width: 1.6%; height: 6%; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #6b727c, #c3c9d1); }
.os-dev__keys::before { content: ""; position: absolute; left: 0; top: 160%; width: 100%; height: 170%; border-radius: inherit; background: inherit; }
.os-dev__keys::after { content: ""; position: absolute; left: 6280%; top: 120%; width: 100%; height: 260%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #c3c9d1, #6b727c); }

/* a laptop: aluminium lid with a thin black bezel and camera, a hinge base with the thumb notch */
.os-lap { container-type: inline-size; }
.os-lap__lid { position: relative; aspect-ratio: 16 / 10.3; border-radius: 3.2% / 5%; padding: 2.1% 2.1% 2.9%; background: #07080b;
  box-shadow: 0 0 0 1px #2a2e35, 0 0 0 2px #b4bbc4, 0 0 0 2.6px #4f5660, 0 30px 70px -30px rgba(0,0,0,.9), 0 0 70px -20px rgba(96,165,250,.55); }
.os-lap__lid::before { content: ""; position: absolute; top: 0.8%; left: 50%; width: 0.9%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #1b2230; box-shadow: inset 0 0 1px rgba(120,160,220,.8); }
.os-lap__screen { height: 100%; overflow: hidden; border-radius: 0.8% / 1.3%; background: #050c17; }
.os-lap__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.os-lap__base { position: relative; width: 114%; margin-left: -7%; height: 3.2cqw; border-radius: 0 0 9cqw 9cqw / 0 0 2.6cqw 2.6cqw;
  background: linear-gradient(180deg, #e3e7ec 0%, #aab1ba 45%, #6b727c 100%); box-shadow: 0 18px 30px -18px rgba(0,0,0,.9); }
.os-lap__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 45%; transform: translateX(-50%); border-radius: 0 0 1.6cqw 1.6cqw; background: linear-gradient(180deg, #8d949e, #c6ccd3); }
/* a tablet: even thin bezel all round, rounded corners, front camera */
.os-pad { position: relative; aspect-ratio: 0.76; border-radius: 6.4% / 4.9%; padding: 2.8%; background: #050608;
  box-shadow: 0 0 0 1px #2a2e35, 0 0 0 1.8px #b4bbc4, 0 0 0 2.4px #4f5660, 0 40px 80px -30px rgba(0,0,0,.95), 0 0 60px -14px rgba(96,165,250,.6); }
.os-pad::before { content: ""; position: absolute; z-index: 2; top: 1.1%; left: 50%; width: 1.4%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #1b2230; }
.os-pad__screen { height: 100%; overflow: hidden; border-radius: 3.8% / 2.9%; background: #050c17; }
.os-pad__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.os-pad .os-dev__glass { inset: 2.8%; border-radius: 3.8% / 2.9%; }
.os-world__laptop { position: absolute; z-index: 3; width: 66%; left: 17%; top: 26%; animation: os-bob 7s ease-in-out infinite; }
.os-world__tablet { position: absolute; z-index: 3; width: 42%; left: 29%; top: 5%; transform: rotate(-6deg); animation: os-bob 7s ease-in-out infinite; }
.os-world__tablet--l { width: 46%; left: 10%; top: 6%; transform: rotate(-8deg); animation-delay: -2s; }

/* the fleet: real screens in orbit */
.os-fleet { position: relative; height: 560px; margin-top: 30px; }
.os-fleet__orbit { position: absolute; left: 50%; top: 54%; width: min(1100px, 96%); height: 300px; transform: translate(-50%, -50%) rotate(-6deg); border-radius: 50%; border: 1px solid rgba(96,165,250,.22); }
.os-fleet__orbit--inner { width: min(820px, 72%); height: 210px; border-color: rgba(220,238,255,.12); }
.os-fleet__ph { position: absolute; left: var(--x); top: var(--y); width: 170px; animation: os-bob 8s ease-in-out infinite; animation-delay: var(--d); }
.os-fleet__ph--main { width: 200px; z-index: 2; }
.os-fleet__pad { position: absolute; left: 1%; top: 80px; width: 250px; z-index: 1; animation: os-bob 8s ease-in-out infinite; animation-delay: var(--d); }
.os-fleet__lap { position: absolute; left: 22%; top: 40px; width: 560px; z-index: 2; animation: os-bob 8s ease-in-out infinite; animation-delay: var(--d); }
.os-fleet__ph { z-index: 3; width: 150px; }
.os-fleet__pad b, .os-fleet__lap b { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font: 600 10px var(--os-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(220,238,255,.6); }
.os-fleet__ph b { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font: 600 10px var(--os-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(220,238,255,.6); }
.os-feat3 { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; color: var(--os-text-2); font-size: 14px; }
.os-feat3 li { display: flex; gap: 12px; align-items: flex-start; }
.os-feat3 b { color: var(--os-text); }
.os-feat3 i { flex: 0 0 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--os-accent-hi); box-shadow: 0 0 10px 2px rgba(96,165,250,.6); }
.os-fleet__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }

/* mission band: the line in the serif voice */
.os-earth__copy .os-eyebrow { justify-content: center; margin-bottom: 12px; }
.os-earth__k { font-family: var(--os-serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.01em; text-transform: none; line-height: 1.08; }
.os-earth__s { font-size: clamp(14px, 1.2vw, 17px); max-width: 560px; margin-left: auto; margin-right: auto; }

/* take Otharis with you: the phone inside Saturn's rings */
.os-em { font-style: italic; color: var(--os-icy); }
.os-carry { position: relative; height: 560px; display: grid; place-items: center; }
.os-carry .os-world__ring { inset: auto; left: 50%; top: 50%; width: min(600px, 118%); height: auto; aspect-ratio: 552 / 448; transform: translate(-50%, -54.9%); }
.os-carry .os-world__ring--back { z-index: 0; }
.os-carry .os-world__ring--front { z-index: 3; }
.os-carry__phone { position: relative; z-index: 2; width: 262px; }

/* final CTA: the giant ringed planet */
.os-final--planet { text-align: center; padding: clamp(110px, 10vw, 130px) 0 clamp(380px, 34vw, 470px); background: var(--os-void); }
.os-final--planet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1; background: linear-gradient(180deg, transparent, var(--os-void)); pointer-events: none; }
.os-final__planet { position: absolute; left: 50%; top: 50%; width: min(1400px, 140vw); height: min(800px, 80vw); transform: translate(-50%, -22%); pointer-events: none; z-index: 0; }
.os-final__center { z-index: 3; display: flex; flex-direction: column; align-items: center; }
.os-final__center .os-display { font-size: clamp(38px, 5vw, 64px); margin-top: 14px; }
.os-final__center .os-lead { margin-left: auto; margin-right: auto; }
.os-final__center .os-final__ctas { justify-content: center; }

@media (max-width: 700px) {
  .os-ph__frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .os-ph__copy { top: calc(var(--os-nav-h) + 4vh); }
  .os-ph__copy .os-hero__ctas { flex-direction: column; align-items: center; }
  .os-ph__copy .os-hero__ctas .os-btn { width: 100%; max-width: 320px; justify-content: center; }
  .os-proof__row { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .os-proof__row::before { display: none; }
  .os-cst__row, .os-cst__how-grid, .os-feat3 { grid-template-columns: 1fr; }
  .os-cst__row--flip .os-world { order: 0; }
  .os-fleet { height: 360px; overflow: hidden; }
  .os-fleet__lap { left: 6%; width: 88%; top: 20px; }
  .os-fleet__pad { left: 0; top: 150px; width: 32%; z-index: 3; }
  .os-fleet__ph { width: 22%; top: 140px; }
  .os-fleet__ph:nth-child(5) { left: 64%; }
  .os-fleet__ph:nth-child(6) { left: 78%; top: 110px; }
  .os-fleet__ph b, .os-fleet__pad b, .os-fleet__lap b { display: none; }
  .os-carry { height: 470px; }
  .os-carry .os-world__ring { width: min(520px, 130%); }
}
@media (prefers-reduced-motion: reduce) {
  .os-ph__arm { transition: none; }
}