/* Ontago site styles. Layout: Apple-style full-bleed tiles on ontago.in's light palette.
   White and pale-blue canvases carry most pages; the red-to-blue gradient from ontago.in marks key moments; navy closes each page. */
:root {
  /* BRAND: ontago.in's exact colours (css/style.css, bootstrap theme, logo) */
  --brand: #15539D;        /* Ontago blue, rgba(21,83,157) */
  --brand-red: #E81F28;    /* logo dot, rgba(232,31,40) */
  --brand-grey: #A9B5CC;   /* logo ring, rgba(169,181,204) */
  --navy: #16243D;         /* ontago.in --bs-dark */
  --light: #F2F5F9;        /* ontago.in --bs-light */
  --gradient: linear-gradient(90deg, #E81F28 0%, #15539D 99%);
  --gradient-v: linear-gradient(180deg, #E81F28 0%, #15539D 100%);

  --canvas: #ffffff;
  --ink: #16243D;
  --muted: #5B6880;
  --hairline: #DCE2EC;
  --on-dark-muted: rgba(255, 255, 255, 0.82);
  --nav-bg: rgba(255, 255, 255, 0.85);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1360px;
  --gutter: max(16px, 4vw);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 56px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.47; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.tile { padding-block: clamp(64px, 10vw, 120px); }
.tile.white { background: var(--canvas); }
.tile.light { background: var(--light); }
.tile.grad { background: var(--gradient); color: #fff; }
.tile.navy { background: var(--navy); color: #fff; }
.center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow { font-size: 17px; font-weight: 600; color: var(--brand); margin-bottom: 8px; }
.on-color .eyebrow { color: #fff; opacity: .85; }
.display { font-size: clamp(40px, 7vw, 80px); line-height: 1.05; letter-spacing: -0.015em; }
.headline { font-size: clamp(32px, 5vw, 56px); line-height: 1.07; letter-spacing: -0.005em; }
.lead { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; color: var(--muted); max-width: 46ch; }
.on-color .lead { color: var(--on-dark-muted); }
.center .lead { margin-inline: auto; }
.stack { display: grid; gap: 20px; }
.grad-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.logo img { height: 38px; width: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.nav ul a { color: var(--ink); opacity: .8; }
.nav ul a:hover, .nav ul a[aria-current="page"] { opacity: 1; text-decoration: none; color: var(--brand); }
.nav .cta-sm { font-size: 13px; background: var(--gradient); color: #fff; padding: 6px 14px; border-radius: 980px; white-space: nowrap; }
.nav .cta-sm:hover { text-decoration: none; filter: brightness(1.08); }
@media (max-width: 760px) { .nav ul { display: none; } }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: center; margin-top: 28px; }
.btn { display: inline-block; background: var(--brand); color: #fff; padding: 12px 24px; border-radius: 980px; font-size: 17px; }
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.link-arrow::after { content: " ›"; }

/* Hero */
.hero { padding-bottom: clamp(48px, 8vw, 96px); text-align: center; }
.hero .lead { margin-inline: auto; }
.hero .left .lead { margin-inline: 0; }

/* Splits and grids */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 6vw, 72px); align-items: center; }
.split > * { min-width: 0; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: clamp(40px, 6vw, 64px); }
.grid > * { min-width: 0; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { background: var(--canvas); border-radius: 20px; padding: 32px; display: grid; gap: 10px; align-content: start; }
.white .card { background: var(--light); }
.on-color .card { background: rgba(255, 255, 255, 0.12); }
.card h3 { font-size: 21px; line-height: 1.2; }
.card p { color: var(--muted); }
.on-color .card p { color: var(--on-dark-muted); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.on-color .kicker { color: #fff; opacity: .85; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 32px 0 0; }
.chips li { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 980px; padding: 8px 16px; font-size: 15px; }
.on-color .chips li { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.photo { border-radius: 24px; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* System cards on the home page */
.system { position: relative; border-radius: 28px; overflow: hidden; min-height: 460px; display: grid; align-content: end; padding: clamp(28px, 4vw, 44px); color: #fff; background: var(--navy); }
.system > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.system::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 36, 61, 0) 20%, rgba(22, 36, 61, .88) 78%); }
.system.medical { background: var(--gradient); }
.system.medical::before { background: none; }
.system > *:not(img) { position: relative; }
.system .name { font-size: clamp(36px, 5vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.system p { color: var(--on-dark-muted); margin-top: 12px; max-width: 36ch; }
.system .go { margin-top: 20px; color: #fff; font-weight: 600; }
.system .go::after { content: " ›"; }
.system:hover { text-decoration: none; }
.system:hover .go { text-decoration: underline; }
.system .pulse-icon { position: absolute; top: clamp(28px, 4vw, 44px); left: clamp(28px, 4vw, 44px); width: 120px; opacity: .9; }

/* Phone mock for DharmIS */
.phone { width: min(300px, 100%); margin-inline: auto; background: var(--navy); border-radius: 44px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(22, 36, 61, .35); }
.phone .screen { background: var(--light); border-radius: 32px; padding: 20px 14px; display: grid; gap: 10px; min-height: 480px; align-content: start; }
.phone .bar { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 6px 6px; }
.alert { background: var(--canvas); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; font-size: 13px; box-shadow: 0 1px 2px rgba(22, 36, 61, .06); }
.alert b { font-size: 14px; }
.alert .src { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.alert.med .src { color: var(--brand-red); }
.alert.wild .src { color: var(--brand); }
.alert span { color: var(--muted); }

/* Status badges */
.badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 980px; justify-self: start; background: var(--canvas); color: var(--muted); border: 1px solid var(--hairline); }
.badge.live { background: var(--brand); color: #fff; border-color: var(--brand); }
.card.dim h3 { color: var(--muted); }

/* Animated flowchart: nodes light up in order as the reader scrolls; the spine fills red to blue. */
.flow { position: relative; list-style: none; margin: clamp(48px, 7vw, 80px) auto 0; padding: 0; max-width: 880px; display: grid; gap: 28px; --p: 1; }
.flow::before, .flow::after { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 3px; margin-left: -1.5px; border-radius: 3px; }
.flow::before { background: var(--hairline); }
.flow::after { background: var(--gradient-v); transform-origin: top; transform: scaleY(var(--p)); }
.flow li { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.flow .dot { grid-column: 2; justify-self: center; width: 48px; height: 48px; border-radius: 50%; background: var(--canvas); border: 3px solid var(--hairline); display: grid; place-items: center; z-index: 1; color: var(--muted); transition: background .4s, border-color .4s, color .4s, transform .4s; }
.flow .dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow .box { background: var(--light); border-radius: 18px; padding: 20px 22px; display: grid; gap: 4px; transition: opacity .5s, transform .5s, box-shadow .5s; }
.white .flow .box { background: var(--light); }
.light .flow .box { background: var(--canvas); }
.flow .box h3 { font-size: 19px; }
.flow .box p { font-size: 15px; color: var(--muted); }
.flow .box .who { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.flow li:nth-child(odd) .box { grid-column: 1; grid-row: 1; text-align: right; }
.flow li:nth-child(even) .box { grid-column: 3; grid-row: 1; }
.flow.live li:not(.on) .box { opacity: .45; transform: translateY(10px); box-shadow: none; }
.flow li.on .dot, .flow:not(.live) .dot { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.06); }
.flow:not(.live) li.human .dot, .flow li.on.human .dot { background: var(--brand-red); border-color: var(--brand-red); }
.flow .box { box-shadow: 0 12px 30px -18px rgba(22, 36, 61, .35); }
.flow .side { grid-row: 1; font-size: 13px; color: var(--muted); padding: 0 16px; }
.flow li:nth-child(odd) .side { grid-column: 3; }
.flow li:nth-child(even) .side { grid-column: 1; text-align: right; }
.flow .side b { color: var(--brand-red); }
@media (max-width: 700px) {
  .flow::before, .flow::after { left: 23px; }
  .flow li { grid-template-columns: 48px 1fr; column-gap: 16px; }
  .flow .dot { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .flow li:nth-child(n) .box { grid-column: 2; grid-row: 1; text-align: left; }
  .flow li:nth-child(n) .side { grid-column: 2; grid-row: 2; text-align: left; padding: 8px 0 0; }
}
.flow-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 32px; font-size: 13px; color: var(--muted); }
.flow-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* Team */
.person { display: grid; gap: 12px; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--gradient); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 600; letter-spacing: 0; }
.person .role { font-size: 15px; color: var(--brand); font-weight: 600; }

/* Contact and footer */
.contact .rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; margin-top: 16px; font-size: clamp(19px, 2.6vw, 26px); font-weight: 600; }
.contact .rows a { color: #fff; }
.foot { background: var(--navy); color: rgba(255, 255, 255, .65); font-size: 12px; padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.foot a { color: rgba(255, 255, 255, .85); }

/* Gentle scroll-in, content is visible at rest; only runs where scroll timelines exist */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes rise { from { opacity: .35; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow .box, .flow .dot { transition: none; }
}

/* OCAANA logo stage: rings pulse behind whatever logo file is in img/ocaana-logo.* */
.logo-stage { position: relative; width: clamp(180px, 26vw, 260px); aspect-ratio: 1; margin: 0 auto 28px; display: grid; place-items: center; }
.logo-stage img { width: 62%; height: auto; position: relative; z-index: 1; }
.logo-stage::before, .logo-stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: ring 3.6s ease-out infinite; }
.logo-stage::after { animation-delay: 1.8s; border-color: var(--brand-red); }
@keyframes ring { 0% { transform: scale(.55); opacity: .55; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo-stage::before, .logo-stage::after { animation: none; opacity: .25; transform: scale(1); } }

/* Architecture strip */
.arch { list-style: none; padding: 0; margin: clamp(40px, 6vw, 64px) 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: a; }
.arch li { counter-increment: a; position: relative; background: var(--canvas); border-radius: 20px; padding: 24px 20px; display: grid; gap: 8px; align-content: start; }
.arch li::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--brand); z-index: 1; }
.arch li:last-child::after { display: none; }
.arch h3 { font-size: 19px; }
.arch h3::before { content: counter(a); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--gradient); color: #fff; font-size: 13px; vertical-align: 1px; }
.arch p { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .arch { grid-template-columns: 1fr; } .arch li::after { content: "›"; right: auto; left: 50%; top: auto; bottom: -17px; transform: translateX(-50%) rotate(90deg); } }

/* Device rail and panels */
.rail { position: sticky; top: 56px; z-index: 5; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline); }
.rail ul { display: flex; gap: 6px; list-style: none; margin: 0 auto; padding: 10px var(--gutter); max-width: var(--wrap); overflow-x: auto; scrollbar-width: none; }
.rail a { display: block; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 980px; transition: background .3s, color .3s; }
.rail a:hover { text-decoration: none; color: var(--ink); }
.rail a.act { background: var(--brand); color: #fff; }
.group-title { padding-top: clamp(48px, 7vw, 80px); }
.device { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--hairline); }
.device:nth-of-type(even) .shot { order: 2; }
@media (max-width: 760px) { .device:nth-of-type(even) .shot { order: 0; } }
.device .shot { position: relative; background: var(--canvas); border-radius: 28px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.light .device .shot { background: var(--canvas); }
.device .shot::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(closest-side, rgba(21, 83, 157, .12), transparent); transform: scale(.6); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
.device .shot img { position: relative; width: 92%; transform: translateY(24px) scale(.94); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s; }
.device .shot .slot { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.device.in .shot img { transform: none; opacity: 1; }
.device.in .shot::before { transform: scale(1); opacity: 1; }
.device .text { display: grid; gap: 12px; align-content: center; }
.device .num { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--brand); }
.device .name { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--brand); }
.device .name sup { font-size: .35em; }
.device .what { font-size: 21px; font-weight: 600; line-height: 1.25; }
.device .exp { font-size: 13px; font-style: italic; color: var(--muted); }
.device p { color: var(--muted); }
.targets-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.specs li { font-size: 13px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 980px; padding: 5px 12px; }
.light .specs li { background: var(--canvas); }
.badge.rnd { background: var(--navy); color: #fff; border-color: var(--navy); }
.badge.test { background: var(--brand); color: #fff; border-color: var(--brand); }
.badge.proto { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.badge.dev { background: var(--canvas); color: var(--brand); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .device .shot img { transform: none; opacity: 1; transition: none; } .device .shot::before { transform: none; opacity: 1; transition: none; } }
.no-js .device .shot img, .no-js .device .shot::before { transform: none; opacity: 1; }

/* Feature lists inside cards */
.features { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.features li { font-size: 15px; color: var(--muted); }
.features b { display: block; color: var(--ink); font-weight: 600; }
.on-color .features li { color: var(--on-dark-muted); }
.on-color .features b { color: #fff; }
.big-name { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--brand); }

/* Tabs on the DharmIS phone */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--light); border-radius: 980px; border: 1px solid var(--hairline); margin-bottom: 24px; }
.tabs button { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 8px 18px; border-radius: 980px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
.phone .screen[hidden] { display: none; }

/* Gold OCAANA elephant: slow float and glow, gold rings */
.logo-stage.gold img { width: 78%; animation: floaty 6s ease-in-out infinite, glow 3.2s ease-in-out infinite; }
.logo-stage.gold::before { border-color: #D4A83A; }
.logo-stage.gold::after { border-color: #B8892B; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 168, 58, 0)); } 50% { filter: drop-shadow(0 8px 22px rgba(212, 168, 58, .55)); } }
@media (prefers-reduced-motion: reduce) { .logo-stage.gold img { animation: none; } }
.system > img { z-index: 0; }
.system::before { z-index: 1; }
.system > *:not(img) { z-index: 2; }
.system > img.mark { inset: auto; top: clamp(28px, 4vw, 44px); left: clamp(28px, 4vw, 44px); width: 96px; height: auto; object-fit: contain; z-index: 2; }
.logo-stage.gold { width: clamp(220px, 32vw, 320px); }
.logo-stage.gold { background: #073931; border-radius: 50%; }  /* dark turquoise behind the OCAANA logo */

/* Illustrative photo band under each page hero */
.band { margin: 0 auto; max-width: var(--wrap); padding: 0 var(--gutter, 20px); }
.band .photo { aspect-ratio: 21 / 9; position: relative; }
.band figcaption { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: #fff; opacity: .85; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 640px) { .band .photo { aspect-ratio: 4 / 3; } }

.person .portrait { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; margin-bottom: 8px; }
.person .portrait { aspect-ratio: 4 / 3; object-position: 50% 22%; }
.person .portrait { height: auto; }

/* ===== Design pass: one motion language =====
   Thesis: a signal travels. Scroll progress runs red to blue along the nav, hero copy arrives in order,
   photos drift slowly under the reader, alerts arrive one by one. Everything is visible by default and
   only moves for visitors who have not asked for reduced motion. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
::selection { background: rgba(21, 83, 157, .2); }
html { caret-color: var(--brand); scrollbar-color: #A9B5CC transparent; }
h1, h2, h3 { text-wrap: balance; }
.lead, .muted, .card p { text-wrap: pretty; }

/* Feedback: controls answer touch and pointer */
.btn, .cta-sm, .card, .system, .chips li { transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), filter .2s; }
.btn:active, .cta-sm:active { transform: scale(.97); }
.link-arrow::after { display: inline-block; transition: transform .25s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }
.card:not(.dim):hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(22, 36, 61, .28); }
.system img:not(.mark) { transition: transform .8s var(--ease-out); }
.system:hover img:not(.mark) { transform: scale(1.05); }
.nav ul a { transition: opacity .2s, color .2s; }

/* Phone: the nav had no links under 760px, so keep them as a scrollable row */
@media (max-width: 760px) {
  .nav .wrap { flex-wrap: wrap; height: auto; padding-block: 8px 6px; row-gap: 4px; }
  .nav ul { display: flex; order: 3; width: 100%; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; font-size: 14px; }
  .nav ul a { white-space: nowrap; padding: 6px 0; display: inline-block; }
  [id] { scroll-margin-top: 96px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero copy arrives in reading order */
  .hero .stack > *, .hero .split > .stack > * { animation: arrive .8s var(--ease-out) both; }
  .hero .stack > :nth-child(2), .hero .split > .stack > :nth-child(2) { animation-delay: .08s; }
  .hero .stack > :nth-child(3), .hero .split > .stack > :nth-child(3) { animation-delay: .16s; }
  .hero .stack > :nth-child(4), .hero .split > .stack > :nth-child(4) { animation-delay: .24s; }
  .hero .stack > :nth-child(5), .hero .split > .stack > :nth-child(5) { animation-delay: .32s; }
  .hero .phone { animation: arrive .9s .2s var(--ease-out) both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Scroll progress along the nav edge */
    .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gradient); transform-origin: 0 50%; animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Photos drift slowly as they cross the viewport */
    .band .photo img, .system > img:not(.mark), #about .photo img { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { transform: scale(1.14) translateY(-4%); } to { transform: scale(1.14) translateY(4%); } }
    .system:hover > img:not(.mark) { animation: none; transform: scale(1.18); }

    /* Alerts and stages arrive one after another as the section is scrolled into view */
    .phone .alert { animation: alert-in linear both; animation-timeline: view(); animation-range: entry 10% entry 45%; }
    .phone .alert:nth-child(3) { animation-range: entry 20% entry 55%; }
    .phone .alert:nth-child(4) { animation-range: entry 30% entry 65%; }
    .phone .alert:nth-child(5) { animation-range: entry 40% entry 75%; }
    @keyframes alert-in { from { opacity: 0; transform: translateX(28px) scale(.97); } to { opacity: 1; transform: none; } }
    .chips li { animation: chip-in linear both; animation-timeline: view(); animation-range: entry 10% entry 50%; }
    .chips li:nth-child(2) { animation-range: entry 16% entry 56%; }
    .chips li:nth-child(3) { animation-range: entry 22% entry 62%; }
    .chips li:nth-child(4) { animation-range: entry 28% entry 68%; }
    .chips li:nth-child(5) { animation-range: entry 34% entry 74%; }
    @keyframes chip-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
  }
}

/* ===== Concept 3D stages ===== */
.stage3d { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 50% 0%, #21457a, var(--navy) 72%); touch-action: pan-y; cursor: grab; box-shadow: 0 30px 60px -30px rgba(22, 36, 61, .5); }
.stage3d.teal { background: radial-gradient(120% 90% at 50% 0%, #0e5a4c, #073931 72%); }
.stage3d.grab { cursor: grabbing; }
.stage3d canvas { width: 100%; height: 100%; display: block; }
.stage3d .tag { position: absolute; left: 16px; bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, .82); pointer-events: none; }
.stage3d .hint { position: absolute; right: 16px; bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, .6); pointer-events: none; }
.stage3d.no3d canvas, .stage3d.no3d .hint { display: none; }
.stage3d.no3d { aspect-ratio: auto; min-height: 120px; display: grid; place-items: center; padding: 28px; color: rgba(255, 255, 255, .8); }
.stage3d.no3d .tag { position: static; }
.scene-legend { margin-top: 18px; }
@media (max-width: 640px) { .stage3d { aspect-ratio: 4 / 5; border-radius: 22px; } .stage3d .hint { display: none; } }

/* ===== More scroll-driven motion ===== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .display { animation: hero-fade linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    @keyframes hero-fade { to { opacity: .15; transform: translateY(-40px) scale(.97); } }
    .headline { animation: head-in linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    @keyframes head-in { from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 40% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
    .grid > .system:first-child { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .grid > .system:last-child { animation: from-right linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes from-left { from { opacity: .2; transform: translateX(-48px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
    @keyframes from-right { from { opacity: .2; transform: translateX(48px) rotate(1.2deg); } to { opacity: 1; transform: none; } }
    .stage3d { animation: stage-in linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    @keyframes stage-in { from { opacity: .3; transform: perspective(1200px) rotateX(10deg) scale(.94); } to { opacity: 1; transform: none; } }
    .tile.grad.on-color { animation: tint linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes tint { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
    .tile.grad { background-size: 160% 100%; }
    .card.person .portrait { animation: portrait-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes portrait-in { from { transform: scale(1.12); filter: grayscale(1) brightness(.7); } to { transform: none; filter: none; } }
  }
}
.tile { overflow-x: clip; }

/* Wide screens: use the width. Bigger type and a wider text column so pages do not sit in a narrow strip. */
@media (min-width: 1500px) {
  :root { --wrap: 1560px; }
  body { font-size: 19px; }
  .lead { font-size: 28px; max-width: 52ch; }
  .display { font-size: clamp(40px, 6vw, 104px); }
  .headline { font-size: clamp(32px, 4vw, 68px); }
  .flow { max-width: 1040px; }
}
@media (min-width: 2000px) { :root { --wrap: 1840px; } body { font-size: 21px; } }

button, input, textarea, select { font-family: inherit; }