:root {
  color-scheme: dark;
  --bg: #050605;                 /* near-black, faintly green */
  --ink: #f2f4f1;
  --ink-2: rgba(232, 238, 233, 0.68);
  --ink-3: rgba(232, 238, 233, 0.45);
  --line: rgba(255, 255, 255, 0.08);
  --sage: #b7c9bb;               /* misty sage accent */
  --sage-deep: #8fa79a;
  --mist: #a9b8c6;               /* grey-blue fog */

  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --blur: blur(28px) saturate(150%);

  --serif: "Instrument Serif", "Newsreader", ui-serif, Georgia, serif;
  --serif-text: "Newsreader", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --max: 72rem;
  --r-tile: 2rem;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* critically damped, no overshoot */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { font: 400 1.0625rem/1.55 var(--sans); letter-spacing: -0.006em; background: transparent; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ol, ul { list-style: none; }
::selection { background: rgba(183, 201, 187, 0.3); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 10px; }
.wrap { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }

/* Ambient fog — static sage / grey-blue mist on black, with fine grain */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.ambient span { position: absolute; border-radius: 50%; filter: blur(90px); }
.o1 { width: 70rem; height: 52rem; right: -18rem; top: -6rem; background: radial-gradient(closest-side, rgba(196, 214, 200, 0.62), rgba(150, 170, 188, 0.3) 55%, transparent); }
.o2 { width: 46rem; height: 38rem; left: -20rem; top: 52vh; background: radial-gradient(closest-side, rgba(160, 178, 196, 0.42), transparent); }
.o3 { width: 30rem; height: 30rem; right: 10%; bottom: -16rem; background: radial-gradient(closest-side, rgba(170, 196, 170, 0.18), transparent); }
.ambient::after { content: ""; position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* Glass surfaces */
.nav-inner, .tile, .svc li, .studio, .facts, .qa details, .btn.link, .mail-chip, .social a, .cta-band {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

/* Type */
h1, h2 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(3.75rem, 9.5vw, 8.5rem); line-height: 0.88; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 0.95; letter-spacing: -0.03em; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
em { font-style: italic; color: var(--sage); }
/* emphasis fades from white into the fog, like the reference headline */
h1 em, h2 em { background: linear-gradient(95deg, #ffffff 0%, #d7e2d9 40%, #9fb2a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; padding: 0.45rem 0.9rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 10px var(--sage); }
.lede { font-family: var(--serif-text); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-2); max-width: 36rem; }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 50px; padding: 0 1.6rem; border-radius: var(--r-pill); font-size: 0.9875rem; font-weight: 500; transition: transform 120ms ease-out, background 300ms var(--ease), box-shadow 300ms var(--ease); }
.btn:active { transform: scale(0.97); }
.btn i { font-style: normal; font-size: 1.1em; line-height: 1; transition: transform 300ms var(--ease); }
.btn.dark, .btn.light-solid { background: #fff; color: #0b0c0b; box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.35); }
.btn.dark:hover, .btn.light-solid:hover { background: #eef3ef; }
.btn.link { padding: 0 1.3rem; color: var(--ink); }
.btn.link:hover { background: var(--glass-strong); }
.btn:hover i, .tile:hover .more i { transform: translate(2px, -2px); }
.more i { font-style: normal; font-size: 1.25em; line-height: 1; transition: transform 300ms var(--ease); }

/* Nav — floating glass capsule */
.nav { position: sticky; top: 0.875rem; z-index: 30; padding-inline: 1rem; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: min(56rem, 100%); margin-inline: auto; height: 58px; padding: 0 0.5rem 0 1.4rem; border-radius: var(--r-pill); background: rgba(12, 14, 13, 0.6); }
.wordmark { font-family: var(--serif); font-size: 1.875rem; line-height: 1; letter-spacing: -0.02em; }
.wordmark span { color: var(--sage); }
.wordmark.sm { font-size: 1.5rem; }
.nav nav { display: flex; align-items: center; gap: 0.15rem; font-size: 0.875rem; }
.nav nav a:not(.pill) { padding: 0 0.85rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r-pill); color: var(--ink-2); transition: color 200ms, background 200ms; }
.nav nav a:not(.pill):hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.pill { display: inline-flex; align-items: center; min-height: 42px; padding: 0 1.15rem; margin-left: 0.35rem; border-radius: var(--r-pill); background: #fff; color: #0b0c0b; font-weight: 500; transition: transform 120ms ease-out; }
.pill:active { transform: scale(0.96); }

/* Hero */
.hero { padding: 5.5rem 0 3rem; text-align: center; overflow: hidden; }
.hero-copy { display: grid; justify-items: center; }
.hero h1 { margin-bottom: 1.75rem; }
.hero .lede { margin-inline: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; align-items: center; margin-top: 2.25rem; }
.actions.left { justify-content: flex-start; }

/* Stage — one hero phone, floating blurred satellites, light beams */
.stage { position: relative; height: clamp(26rem, 46vw, 40rem); margin-top: 4rem; isolation: isolate; }
.beam { position: absolute; z-index: -1; height: 3px; width: 70%; border-radius: 50%; filter: blur(14px); opacity: 0.9; }
.b1 { left: -10%; top: 30%; transform: rotate(-16deg); background: linear-gradient(90deg, transparent, rgba(183, 201, 187, 0.9), transparent); height: 60px; opacity: 0.35; }
.b2 { right: -12%; top: 12%; transform: rotate(-22deg); background: linear-gradient(90deg, transparent, rgba(169, 184, 198, 0.9), transparent); height: 90px; opacity: 0.3; }
.spark { position: absolute; left: 70%; top: 6%; width: 2px; height: 70px; background: linear-gradient(transparent, #fff, transparent); }
.spark::after { content: ""; position: absolute; left: -34px; top: 34px; width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); }
.hero-phone { position: absolute; left: 50%; top: 0; width: clamp(12rem, 22vw, 17.5rem); transform: translateX(-50%); z-index: 3; }
.hero-phone .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 0 3px #030403, 0 40px 80px -20px rgba(0, 0, 0, 0.9), 0 0 120px -20px rgba(183, 201, 187, 0.35); }
.float { position: absolute; z-index: 1; opacity: 0.5; filter: blur(1.5px) saturate(0.7); }
.float .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.f1 { width: clamp(7rem, 12vw, 10rem); left: 14%; top: 22%; transform: rotate(-8deg); }
.f2 { width: clamp(6rem, 10vw, 8.5rem); left: 2%; top: 48%; transform: rotate(-14deg); opacity: 0.3; filter: blur(3px) saturate(0.6); }
.f3 { width: clamp(7rem, 12vw, 10rem); right: 14%; top: 22%; transform: rotate(8deg); }
.f4 { width: clamp(6rem, 10vw, 8.5rem); right: 2%; top: 48%; transform: rotate(14deg); opacity: 0.3; filter: blur(3px) saturate(0.6); }
.stage::after { content: ""; position: absolute; z-index: 4; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }

.facts { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -3rem; padding: 1.75rem 2rem; border-radius: var(--r-tile); text-align: left; }
.facts li { padding: 0 1.5rem; border-left: 1px solid var(--line); }
.facts li:first-child { border-left: 0; padding-left: 0; }
.facts strong { display: block; font-family: var(--serif); font-size: 2.75rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.facts span { display: block; margin-top: 0.4rem; font-size: 0.8125rem; color: var(--ink-3); }

/* Device */
.device { position: relative; width: 100%; aspect-ratio: 9 / 19.5; border-radius: 16% / 7.4%; padding: 2.6%;
  background: linear-gradient(135deg, #a3aca6 0%, #444b47 10%, #161917 32%, #0a0b0a 55%, #2a2e2c 84%, #959e98 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 0 3px #030403, 0 30px 60px -20px rgba(0, 0, 0, 0.85); }
.device::before { content: ""; position: absolute; z-index: 2; top: 3.2%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.device::after { content: ""; position: absolute; z-index: 3; inset: 2.6%; border-radius: 13.5% / 6.3%; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 24%, transparent 40%); }
.device img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 13.5% / 6.3%; background: #000; }
.device img.fit { object-fit: contain; background: #0c1626; }

/* Sections */
.section { padding: 7.5rem 0; }
.head { text-align: center; display: grid; justify-items: center; margin-bottom: 3.5rem; }
.head h2 { margin-bottom: 1.25rem; }
.head .lede { margin-inline: auto; }
.center { display: flex; justify-content: center; margin-top: 3rem; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tile { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 34rem; padding: 2.5rem 2.5rem 0; border-radius: var(--r-tile); overflow: hidden; isolation: isolate; transition: transform 300ms var(--ease), background 300ms var(--ease); }
.tile:hover { background: var(--glass-strong); }
.tile:active { transform: scale(0.99); }
.tile::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -25%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent 72%); opacity: 0.32; }
.tile .icon { width: 3rem; height: 3rem; border-radius: 22.5%; margin-bottom: 1.5rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.tile-copy > p { margin-top: 0.5rem; font-size: 1rem; color: var(--ink-2); max-width: 22rem; }
.tile .tag { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); margin: 0 0 0.6rem; }
.more { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 1.1rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.tile-phone { align-self: end; justify-self: center; width: 52%; max-width: 15rem; margin-top: 2rem; margin-bottom: -18%; transition: transform 450ms var(--ease); }
.tile:hover .tile-phone { transform: translateY(-10px); }
.tile.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; min-height: 30rem; padding: 0 0 0 3.5rem; align-items: center; }
.tile.wide h3 { font-size: clamp(3rem, 5vw, 4.5rem); letter-spacing: -0.03em; }
.tile.wide .tile-phone { width: 46%; max-width: 17rem; align-self: end; margin: 3rem 0 -14%; }
.t-answerflow { --glow: #6e93c9; }
.t-tabata { --glow: #9cc489; }
.t-flashvocab { --glow: #9a92d6; }
.t-betweenus { --glow: #d8ab88; }
.t-voiceglide { --glow: #8a90d0; }

/* Studio */
.band { padding: 2rem 0; }
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; padding: 3.5rem; border-radius: 2.5rem; }
.studio h2 { margin-bottom: 1.5rem; }
.studio .lede { margin-bottom: 1.75rem; }
.photo { border-radius: 1.75rem; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: inset 0 0 0 1px var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }

/* Services */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.svc li { padding: 2.25rem 2rem 2.5rem; border-radius: var(--r-tile); transition: background 300ms var(--ease); }
.svc li:hover { background: var(--glass-strong); }
.svc .num { display: block; font-family: var(--serif); font-style: italic; font-size: 3.25rem; line-height: 1; color: var(--sage); margin-bottom: 2.5rem; }
.svc p { margin-top: 0.75rem; font-size: 1rem; color: var(--ink-2); }

/* FAQ */
.qa { display: grid; gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.qa details { border-radius: 1.25rem; overflow: hidden; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 1.5rem; font-size: 1.0625rem; font-weight: 500; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 1.25rem; font-weight: 300; background: rgba(255, 255, 255, 0.06); transition: transform 300ms var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:active { opacity: 0.8; }
.qa details p { padding: 0 1.5rem 1.5rem; color: var(--ink-2); max-width: 40rem; }

/* CTA band — grid lines with crosshair marks */
.cta-band { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 2rem; margin-block: 3rem 5rem; padding: 4.5rem 0 0 4rem; border-radius: 2.5rem; overflow: hidden; isolation: isolate; background: rgba(4, 5, 4, 0.75); }
.grid-bg { position: absolute; z-index: -1; inset: 0 0 0 52%; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(circle at 60% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 60% 50%, #000 30%, transparent 75%); }
.grid-bg i { position: absolute; width: 18px; height: 18px; }
.grid-bg i::before, .grid-bg i::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.6); }
.grid-bg i::before { left: 8px; top: 0; width: 1px; height: 18px; }
.grid-bg i::after { top: 8px; left: 0; height: 1px; width: 18px; }
.x1 { left: 10%; top: 14%; } .x2 { right: 12%; top: 26%; } .x3 { left: 24%; bottom: 18%; } .x4 { right: 8%; bottom: 30%; }
.cta-band::before { content: ""; position: absolute; z-index: -2; right: -10%; top: -30%; width: 60%; height: 120%; border-radius: 50%; background: radial-gradient(closest-side, rgba(176, 196, 184, 0.22), transparent); filter: blur(30px); }
.cta-copy { padding-bottom: 4.5rem; }
.cta-copy h2 { margin-bottom: 1.25rem; }
.checks { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; font-size: 0.875rem; color: var(--ink-2); }
.checks li { display: inline-flex; align-items: center; gap: 0.5rem; }
.checks li::before { content: "✓✓"; letter-spacing: -0.35em; padding-right: 0.35em; color: var(--sage); font-size: 0.8rem; }
.cta-phone { align-self: end; justify-self: center; width: min(15rem, 70%); margin-bottom: -22%; }

/* Footer */
.footer { padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom)); color: var(--ink-3); font-size: 0.875rem; }
.foot-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.mail-chip { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--r-pill); color: var(--ink); font-size: 0.875rem; }
.mail-chip span { color: var(--sage); }
.social { display: flex; align-items: center; gap: 0.75rem; }
.social span { font-size: 0.8125rem; }
.social a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill); color: var(--ink); }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.foot-main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: end; padding-top: 2.5rem; }
.foot-brand > p { margin-top: 0.75rem; max-width: 22rem; }
.cols { display: grid; grid-template-columns: repeat(3, max-content); gap: 3rem; margin-top: 2.25rem; }
.cols h4 { margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.cols a { display: flex; align-items: center; min-height: 36px; color: var(--ink-3); transition: color 200ms; }
.cols a:hover { color: var(--ink); }
.copy { margin-top: 2rem; font-size: 0.75rem; }
/* giant grainy wordmark */
.giant { position: relative; font-family: var(--serif); font-size: clamp(8rem, 24vw, 20rem); line-height: 0.75; letter-spacing: -0.05em; text-align: right; color: transparent;
  background: linear-gradient(180deg, #f2f4f1 0%, #c8d4cb 45%, rgba(143, 167, 154, 0.25) 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
  background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text; padding-bottom: 0.08em; user-select: none; }

/* Reveal */
/* never hide content: if the observer or transitions don't run, it's just 16px lower */
.js .reveal { transform: translateY(16px); transition: transform 900ms var(--ease); }
.js .reveal.in { transform: none; }

/* Tablet */
@media (max-width: 960px) {
  .tile.wide { grid-template-columns: 1fr; padding: 2.5rem 2.5rem 0; }
  .tile.wide .tile-phone { justify-self: center; width: 52%; margin: 2rem 0 -18%; }
  .studio { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem; }
  .svc { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 3rem 2.5rem 0; }
  .grid-bg { inset: 40% 0 0 0; }
  .cta-copy { padding-bottom: 1rem; }
  .cta-phone { width: 13rem; margin-bottom: -30%; }
  .foot-main { grid-template-columns: 1fr; }
  .giant { text-align: left; }
}
/* Phone */
@media (max-width: 680px) {
  .nav nav a:not(.pill) { display: none; }
  .nav-inner { height: 54px; }
  .hero { padding-top: 4rem; }
  .stage { height: 26rem; margin-top: 3rem; }
  .f2, .f4 { display: none; }
  .f1 { left: 0; } .f3 { right: 0; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; padding: 1.5rem; margin-top: -2rem; }
  .facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts li { padding: 0 1rem; }
  .section { padding: 5rem 0; }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile.wide { min-height: 30rem; padding: 2rem 2rem 0; }
  .studio { padding: 1.75rem; border-radius: 2rem; }
  .cta-band { padding: 2.25rem 1.5rem 0; border-radius: 2rem; }
  .cols { grid-template-columns: repeat(2, max-content); gap: 2rem; }
  .foot-top { justify-content: center; }
}

/* Accessibility fallbacks */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .js .reveal { transform: none; transition: none !important; }
  .btn:active, .pill:active, .tile:active { transform: none; opacity: 0.85; }
  .tile:hover .tile-phone { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #101211; --glass-strong: #161917; }
  .nav-inner, .tile, .svc li, .studio, .facts, .qa details, .btn.link, .mail-chip, .social a, .cta-band { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-inner { background: #101211; }
  .ambient span { display: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(255, 255, 255, 0.35); --ink-2: rgba(242, 244, 241, 0.9); --ink-3: rgba(242, 244, 241, 0.75); --glass: #121413; }
}

/* Persona panel — B&W cutout over a lime → sage → lavender wash */
.persona { position: relative; aspect-ratio: 5 / 4.4; border-radius: 1.75rem; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 0% 40%, #e6f45a 0%, rgba(230, 244, 90, 0) 45%),
              radial-gradient(90% 80% at 100% 70%, #7fc59a 0%, rgba(127, 197, 154, 0) 55%),
              linear-gradient(120deg, #d8ec72 0%, #b9d6c2 38%, #bcd0e4 62%, #c9c2ef 100%); }
.hill { position: absolute; z-index: 0; border-radius: 50%; }
.h1 { left: -20%; bottom: -55%; width: 95%; aspect-ratio: 1; background: radial-gradient(circle at 50% 20%, #f2f98a, #c7e36a 55%, #a9cf6a); opacity: 0.85; }
.h2 { right: -25%; bottom: -60%; width: 100%; aspect-ratio: 1; background: radial-gradient(circle at 40% 15%, #e3e1ff, #a9a3e6 60%, #8f8ad8); opacity: 0.75; }
.cloud { position: absolute; z-index: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.75); filter: blur(10px); }
.c1 { left: 14%; top: 54%; width: 26%; height: 14%; }
.c2 { right: 6%; top: 34%; width: 30%; height: 14%; }
.cut { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 66%; transform: translateX(-50%); filter: contrast(1.05); }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 1rem; color: #121412; font-size: 0.75rem; line-height: 1.25;
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px -8px rgba(20, 30, 20, 0.35); }
.chip img { width: 28px; height: 28px; border-radius: 22.5%; flex: none; }
.chip strong { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; }
.chip span { color: rgba(18, 20, 18, 0.6); }
.chip .tick { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #121412; color: #fff; font-size: 9px; }
.badge { font-style: normal; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(18, 20, 18, 0.07); color: #121412; }
.badge.lime { background: #e4f25c; }
.badge.mint { background: #bfe6c9; }
.badge.dark { background: #121412; color: #fff; }
.k1 { left: 3%; bottom: 7%; }
.k2 { right: 3%; top: 5%; gap: 0.35rem; }
.k3 { right: 3%; bottom: 30%; }
@media (max-width: 680px) {
  .persona { aspect-ratio: 4 / 4.6; }
  .cut { width: 92%; }
  .chip { font-size: 0.6875rem; padding: 0.5rem 0.6rem; }
  .k1 { left: 3%; bottom: 4%; } .k2 { right: 3%; top: 4%; } .k3 { display: none; }
}

/* ===== Reference-matched hero: pure black page, luminous fog only inside the card ===== */
:root { --bg: #000; }
html { background: #000; }
.ambient { background: #000; }
.ambient span { display: none; }          /* no page-wide grey fog */
.ambient::after { opacity: 0.035; }

.hero { padding: 1.25rem 0 2rem; text-align: center; overflow: visible; }
.hero-card { position: relative; width: min(84rem, 100% - 2rem); margin: 0 auto; min-height: min(52rem, calc(100vh - 6rem)); border-radius: 2.25rem; overflow: hidden; isolation: isolate; background: #020302; display: grid; place-items: center; padding: 7rem 2rem 8rem; }

/* luminous mist — bright sage/grey-blue band from the top-right, soft pool bottom-left */
.fog { position: absolute; inset: 0; z-index: -2; }
.fog span { position: absolute; border-radius: 50%; }
.m1 { right: -18%; top: -30%; width: 85%; height: 120%; transform: rotate(-28deg); background: radial-gradient(closest-side, rgba(226, 236, 228, 0.95), rgba(178, 196, 190, 0.7) 35%, rgba(130, 150, 160, 0.35) 60%, transparent 78%); filter: blur(40px); }
.m2 { right: 4%; top: -12%; width: 40%; height: 60%; background: radial-gradient(closest-side, rgba(196, 220, 196, 0.85), transparent 75%); filter: blur(50px); }
.m3 { left: -14%; bottom: -34%; width: 55%; height: 75%; background: radial-gradient(closest-side, rgba(170, 186, 196, 0.6), rgba(120, 136, 150, 0.25) 50%, transparent 75%); filter: blur(50px); }
.m4 { left: 20%; top: 10%; width: 60%; height: 80%; transform: rotate(-28deg); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), transparent 70%); filter: blur(30px); }  /* dark core keeps the headline area deep */
.stars { position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background-image: radial-gradient(1px 1px at 12% 70%, #fff, transparent), radial-gradient(1px 1px at 22% 84%, #fff, transparent), radial-gradient(1px 1px at 31% 62%, #fff, transparent), radial-gradient(1px 1px at 44% 78%, #fff, transparent), radial-gradient(1px 1px at 52% 90%, #fff, transparent), radial-gradient(1px 1px at 61% 66%, #fff, transparent), radial-gradient(1px 1px at 70% 82%, #fff, transparent), radial-gradient(1px 1px at 79% 72%, #fff, transparent), radial-gradient(1px 1px at 88% 88%, #fff, transparent), radial-gradient(1px 1px at 36% 94%, #fff, transparent), radial-gradient(1px 1px at 66% 96%, #fff, transparent), radial-gradient(1px 1px at 18% 56%, #fff, transparent); }
.rays { position: absolute; z-index: -1; left: 50%; bottom: 0; height: 32%; width: 9rem; transform: translateX(-50%); display: flex; justify-content: space-between; }
.rays i { width: 1px; height: 100%; background: rgba(255, 255, 255, 0.07); position: relative; }
.rays i::after { content: ""; position: absolute; left: -1px; width: 3px; border-radius: 2px; background: linear-gradient(transparent, #c9e3cf, transparent); box-shadow: 0 0 10px rgba(201, 227, 207, 0.8); }
.rays i:nth-child(1)::after { top: 4%; height: 32%; }
.rays i:nth-child(2) { opacity: 0.6; }
.rays i:nth-child(3)::after { top: 34%; height: 30%; }
.rays i:nth-child(4)::after { top: 62%; height: 30%; }

.wires { position: absolute; inset: 14% 3% 14%; width: 94%; height: 72%; z-index: -1; fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.75rem; text-align: left; transition: transform 300ms var(--ease); }
.node:hover { transform: translateY(-2px); }
.node .dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(10, 12, 11, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 30px rgba(0, 0, 0, 0.6); }
.node .dot img { width: 28px; height: 28px; border-radius: 22.5%; }
.node b { display: block; font-weight: 500; font-size: 1.0625rem; color: var(--ink); }
.node b::before { content: "•"; margin-right: 0.5rem; color: var(--ink-2); }
.node small { display: block; margin-left: 1rem; font-size: 0.75rem; color: var(--ink-3); }
.n1 { left: 10%; top: 25%; }
.n2 { left: 6%; top: 62%; }
.n3 { right: 6%; top: 25%; flex-direction: row-reverse; text-align: right; }
.n4 { right: 9%; top: 62%; flex-direction: row-reverse; text-align: right; }
.n3 small, .n4 small { margin-left: 0; margin-right: 1rem; }

.hero-card .hero-copy { position: relative; z-index: 3; display: grid; justify-items: center; max-width: 60rem; }
.spark-pill { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0 1.1rem 0 0.75rem; margin-bottom: 2rem; border-radius: 999px; font-size: 0.9375rem; color: var(--ink); background: rgba(20, 22, 21, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: transform 120ms ease-out; }
.spark-pill:active { transform: scale(0.97); }
.spark-pill i { font-style: normal; transition: transform 300ms var(--ease); }
.spark-pill:hover i { transform: translateX(3px); }
.logo-dot { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 60% 60%, #000 30%, #fff 32%); box-shadow: 0 0 0 2px #fff inset; }
.hero-card h1 { font-size: clamp(3.25rem, 7.2vw, 6.75rem); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.hero-card h1 em { background: linear-gradient(95deg, #ffffff 0%, #dfe8e1 35%, #a4b6aa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-card .lede { font-family: var(--sans); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: rgba(240, 244, 240, 0.78); max-width: 40rem; }
.hero-card .actions { margin-top: 2.25rem; }
.hero-card .btn.link { background: rgba(14, 16, 15, 0.8); }

.scroll-chip { position: absolute; z-index: 3; left: 2rem; bottom: 2rem; display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 1.1rem 0 0.35rem; border-radius: 999px; font-size: 0.875rem; color: var(--ink-2); background: rgba(20, 22, 21, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.scroll-chip span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; }
.horizon { position: absolute; z-index: 3; right: 2.5rem; bottom: 2.4rem; display: grid; grid-template-columns: repeat(5, 2.25rem); gap: 0.4rem; text-align: left; }
.horizon span { grid-column: 1 / -1; margin-bottom: 0.6rem; font-family: var(--serif); font-size: 1.375rem; color: #d9e6c8; }
.horizon i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.horizon i.on { background: #fff; width: 60%; }

.appstrip { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4.5rem); padding: 3rem 1.5rem 1rem; }
.appstrip li { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.4); }
.appstrip img { width: 28px; height: 28px; border-radius: 22.5%; filter: grayscale(1) brightness(1.4); opacity: 0.55; }

/* sections over pure black get their own soft light so glass still reads */
.section, .band { position: relative; }
#apps::before, #services::before, #faq::before { content: ""; position: absolute; z-index: -1; inset: 10% 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 190, 180, 0.08), transparent); filter: blur(40px); pointer-events: none; }

@media (max-width: 960px) {
  .node small { display: none; }
  .n1 { left: 4%; top: 12%; } .n3 { right: 4%; top: 12%; }
  .n2 { left: 4%; top: auto; bottom: 18%; } .n4 { right: 4%; top: auto; bottom: 18%; }
  .wires { display: none; }
  .horizon { display: none; }
}
@media (max-width: 680px) {
  .hero-card { width: calc(100% - 1rem); border-radius: 1.75rem; padding: 8rem 1.25rem 9rem; min-height: 0; }
  .node b { display: none; }
  .node .dot { width: 44px; height: 44px; }
  .n1 { left: 6%; top: 6.5rem; } .n3 { right: 6%; top: 6.5rem; }
  .n2 { left: 6%; bottom: 5.5rem; } .n4 { right: 6%; bottom: 5.5rem; }
  .scroll-chip { left: 50%; transform: translateX(-50%); bottom: 1.25rem; }
  .appstrip { gap: 1.25rem 1.75rem; }
  .appstrip li { font-size: 1rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .node .dot, .spark-pill, .scroll-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141615; }
}

/* ===== Persona v2 — wide wash, centred cutout, compact two-layer chips, real clouds ===== */
.studio { grid-template-columns: 1fr; gap: 2.5rem; }
.studio > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3rem; align-items: end; }
.studio > div:first-child .eyebrow, .studio > div:first-child h2 { grid-column: 1; }
.studio > div:first-child .lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: 0.6rem; }
.studio > div:first-child .btn { grid-column: 2; justify-self: start; }
.persona { aspect-ratio: 21 / 9; border-radius: 1.75rem;
  background: linear-gradient(100deg, #eef25a 0%, #d6ea86 22%, #c9e1c6 42%, #c6d9e6 62%, #c9d3ec 80%, #93cfa8 100%); }
.persona::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 80% at 8% 35%, rgba(240, 248, 70, 0.7), transparent 60%), radial-gradient(40% 60% at 100% 85%, rgba(110, 196, 140, 0.55), transparent 70%); }
.hill { position: absolute; z-index: 0; border-radius: 50%; opacity: 1; }
.hl { left: -6%; bottom: -78%; width: 58%; aspect-ratio: 1; background: radial-gradient(circle at 50% 12%, #f6fb9a, #d9ee6e 45%, #c4e07a 70%); }
.hm { left: 28%; bottom: -86%; width: 46%; aspect-ratio: 1; background: radial-gradient(circle at 50% 8%, rgba(70, 72, 70, 0.95), rgba(40, 42, 40, 0.75) 35%, rgba(200, 210, 205, 0) 72%); }
.hr { right: -10%; bottom: -88%; width: 56%; aspect-ratio: 1; background: radial-gradient(circle at 45% 10%, #dcdcff, #b9b6ef 45%, #a7a3e6 75%); }
.cloud { position: absolute; z-index: 1; width: 110px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); filter: blur(1px); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 46px; height: 46px; left: 18px; top: -24px; }
.cloud::after { width: 34px; height: 34px; left: 54px; top: -14px; }
.cl { left: 15%; top: 36%; }
.cr { right: 13%; top: 20%; width: 150px; }
.cr::before { width: 60px; height: 60px; left: 26px; top: -34px; }
.cr::after { width: 44px; height: 44px; left: 74px; top: -20px; }
.cut { position: absolute; z-index: 2; left: 50%; bottom: 0; width: auto; height: 108%; transform: translateX(-50%); }

.card, .pillchip { position: absolute; z-index: 3; color: #141614; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 40px -16px rgba(30, 40, 30, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card { width: 15.5rem; padding: 0.6rem; border-radius: 1rem; }
.card .row { display: flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.15rem 0.5rem; }
.card .row .badge { margin-left: auto; }
.av { width: 28px; height: 28px; border-radius: 22.5%; object-fit: cover; }
.av.round { border-radius: 50%; }
.mark { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; background: #dfe9dd; font-size: 11px; }
.mark.lime { background: #e4f25c; }
.card .row .mark + .badge { margin-left: 0; }
.msg { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; padding: 0.55rem 0.7rem; border-radius: 0.7rem; background: #f3f4f2; font-size: 0.75rem; }
.msg strong { font-size: 0.8125rem; font-weight: 600; }
.msg time { font-size: 0.6875rem; color: rgba(20, 22, 20, 0.5); align-self: center; }
.msg span { grid-column: 1 / -1; color: rgba(20, 22, 20, 0.62); }
.pillchip { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem 0.35rem 0.35rem; border-radius: 999px; font-size: 0.8125rem; }
.pillchip strong { font-weight: 600; margin-left: 0.15rem; }
.pillchip .badge:first-of-type { margin-left: 0.6rem; }
.badge { font-size: 0.6875rem; padding: 0.22rem 0.55rem; }
.k1 { left: 9%; top: 46%; bottom: auto; right: auto; }
.k2 { right: 6%; top: 32%; bottom: auto; left: auto; }
.k3 { right: 9%; top: 60%; bottom: auto; left: auto; }

@media (max-width: 960px) {
  .studio > div:first-child { grid-template-columns: 1fr; }
  .studio > div:first-child .lede, .studio > div:first-child .btn { grid-column: 1; grid-row: auto; }
  .studio > div:first-child .lede { margin: 1rem 0 1.5rem; }
  .persona { aspect-ratio: 4 / 3.6; }
  .cut { height: 92%; }
  .k1 { left: 3%; top: auto; bottom: 6%; }
  .k2 { right: 3%; top: 5%; }
  .k3 { display: none; }
  .card { width: 13rem; }
  .cl { left: 4%; top: auto; bottom: 30%; } .cr { right: 6%; top: 22%; }
}
.studio > div:first-child .eyebrow { justify-self: start; }

/* ===== Persona glass — frosted hills in front of the cutout, glass clouds ===== */
.hill { z-index: 3; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.hl { left: -8%; bottom: -80%; width: 60%; background: linear-gradient(180deg, rgba(246, 250, 160, 0.55), rgba(220, 238, 110, 0.35) 40%, rgba(220, 238, 110, 0.15)); }
.hm { left: 30%; bottom: -84%; width: 42%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(140, 145, 140, 0.25) 30%, rgba(40, 42, 40, 0.35) 70%); }
.hr { right: -12%; bottom: -86%; width: 56%; background: linear-gradient(180deg, rgba(230, 228, 255, 0.6), rgba(178, 172, 236, 0.45) 45%, rgba(160, 155, 228, 0.3)); }
.cloud { z-index: 3; filter: none; background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 30px -12px rgba(40, 60, 50, 0.25); }
.cloud::before, .cloud::after { background: rgba(255, 255, 255, 0.32); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); z-index: -1; }
.card, .pillchip { z-index: 4; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.msg { background: rgba(240, 242, 239, 0.85); }
@media (prefers-reduced-transparency: reduce) {
  .hill, .cloud, .cloud::before, .cloud::after, .card, .pillchip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cloud, .cloud::before, .cloud::after { background: #fff; }
  .card, .pillchip { background: #fff; }
}

/* single-shape glass cloud (no seams between puffs) */
.cloud { border-radius: 0; height: auto; aspect-ratio: 2 / 1; box-shadow: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><path d='M40 96a32 32 0 0 1-4-63.7A40 40 0 0 1 112 22a30 30 0 0 1 46 14 30 30 0 0 1 6 60z'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><path d='M40 96a32 32 0 0 1-4-63.7A40 40 0 0 1 112 22a30 30 0 0 1 46 14 30 30 0 0 1 6 60z'/></svg>") center / 100% 100% no-repeat;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28)); }
.cloud::before, .cloud::after { display: none; }
.cl { width: 150px; left: 15%; top: 30%; }
.cr { width: 190px; right: 12%; top: 13%; }
@media (max-width: 960px) { .cl { width: 110px; } .cr { width: 140px; } }

/* smaller portrait, rendered crisply */
.cut { height: 92%; image-rendering: auto; }
@media (max-width: 960px) { .cut { height: 80%; } }
@media (max-width: 960px) {
  .cut { width: auto; height: 82%; }
  .hm { display: none; }
  .hl { width: 70%; bottom: -96%; }
  .hr { width: 70%; bottom: -98%; }
}

/* real screenshots carry their own status bar + Dynamic Island */
.device::before { display: none; }
.device img { object-fit: cover; object-position: top center; }

/* ===== Device v3 — screen keeps its own aspect ratio, real black bezel + thin metal rim ===== */
.device { aspect-ratio: auto; padding: 3.2%; border-radius: 15% / 7%;
  background: #050505;
  box-shadow:
    0 0 0 1.5px #3c403e,                  /* titanium band */
    0 0 0 2.5px #1a1c1b,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -22px rgba(0, 0, 0, 0.9); }
.device img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; border-radius: 12.5% / 5.8%; background: #000; }
.device::after { inset: 3.2%; border-radius: 12.5% / 5.8%; background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%); }
.hero-phone .device, .tile-phone.device, .cta-phone .device { box-shadow: 0 0 0 1.5px #4a4f4c, 0 0 0 2.5px #1a1c1b, inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -24px rgba(0, 0, 0, 0.95), 0 0 90px -30px rgba(183, 201, 187, 0.25); }

/* ===== Mockup images + motion ===== */
.tile-phone, .cta-phone { perspective: 1200px; }
.mock { display: block; width: 100%; height: auto; transform-origin: 50% 60%;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(183, 201, 187, 0.12));
  transform: translate3d(0, var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform; }
.tile:hover .tile-phone { transform: none; }               /* tilt replaces the old lift */
.tile-phone { width: 54%; max-width: 16rem; margin-bottom: -22%; }
.tile.wide .tile-phone { width: 44%; max-width: 17.5rem; margin-bottom: -16%; }
.cta-phone { width: min(16rem, 70%); margin-bottom: -26%; }

/* rise-in: phones lift out of their tile once, critically damped (no bounce) */
.js .tile .mock, .js .cta-band .mock { opacity: 0; translate: 0 70px; transition: opacity 700ms var(--ease), translate 1100ms var(--ease); }
.js .tile.in .mock, .js .cta-band.in .mock, .js .tile:not(.reveal) .mock, .js .cta-band:not(.reveal) .mock { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .mock { transform: none !important; }
  .js .tile .mock, .js .cta-band .mock { opacity: 1; translate: none; transition: none; }
}

/* ======================= HERO MOTION ======================= */
/* Everything starts in its final, visible state; the intro only runs once
   .hero-card gets .play (added by JS), so no-JS / reduced-motion shows the static hero. */

/* cursor spotlight + fog parallax (values driven by JS, smoothed) */
.hero-card { --mx: 70%; --my: 20%; --fx: 0px; --fy: 0px; }
.spot { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(28rem 28rem at var(--mx) var(--my), rgba(215, 232, 218, 0.16), transparent 70%); }
.fog .m1, .fog .m2 { translate: var(--fx) var(--fy); }
.fog .m3 { translate: calc(var(--fx) * -0.6) calc(var(--fy) * -0.6); }

/* light pulses running down the rays */
.rays i::after { animation: ray 3.4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.rays i:nth-child(1)::after { animation-delay: -0.4s; }
.rays i:nth-child(2)::after { content: ""; animation-delay: -2.1s; height: 26%; }
.rays i:nth-child(3)::after { animation-delay: -1.3s; }
.rays i:nth-child(4)::after { animation-delay: -2.8s; }
@keyframes ray { from { top: -35%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: 100%; opacity: 0; } }

/* twinkling star layer (offset pattern, fast enough to read as sparkle, not drift) */
.stars.twinkle { opacity: 0; background-position: 37px 23px; animation: twinkle 2.6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: 0.7; } }

/* signal dots travelling along the wires */
.wires path { stroke-dasharray: 1 0; }
.wires .pulse { stroke: #d9ecdc; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 900; animation: travel 4.2s linear infinite; filter: drop-shadow(0 0 4px #cfe6d3); }
.wires .pulse:nth-of-type(6) { animation-delay: -1.1s; } .wires .pulse:nth-of-type(7) { animation-delay: -2.3s; } .wires .pulse:nth-of-type(8) { animation-delay: -3.2s; }
@keyframes travel { from { stroke-dashoffset: 918; } to { stroke-dashoffset: 0; } }

/* node halo */
.node .dot { position: relative; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.node .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(215, 232, 218, 0.35); opacity: 0; animation: halo 3s ease-out infinite; }
.n2 .dot::after { animation-delay: 0.75s; } .n3 .dot::after { animation-delay: 1.5s; } .n4 .dot::after { animation-delay: 2.25s; }
@keyframes halo { 0% { opacity: 0.8; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.6); } }
.node:hover .dot { transform: scale(1.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 30px rgba(215, 232, 218, 0.35); }

/* headline gradient shimmer on the emphasised word */
.hero-card h1 em { background-size: 220% 100%; animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* magnetic buttons */
[data-magnet] { translate: var(--bx, 0px) var(--by, 0px); }

/* horizon progress */
.horizon i { position: relative; overflow: hidden; width: auto !important; background: rgba(255, 255, 255, 0.12) !important; }
.horizon i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.horizon i.done::after { transform: scaleX(1); }
.horizon i.on::after { animation: fill 2.8s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
[data-horizon-label] { transition: opacity 300ms var(--ease), translate 300ms var(--ease); }
[data-horizon-label].swap { opacity: 0; translate: 0 6px; }

/* ---- one-time intro choreography ---- */
.hero-card.play .fog span { animation: fogIn 2.2s var(--ease) both; }
.hero-card.play .fog .m2 { animation-delay: 0.2s; } .hero-card.play .fog .m3 { animation-delay: 0.35s; }
@keyframes fogIn { from { opacity: 0; scale: 0.8; } }
.hero-card.play .wires path:not(.pulse) { stroke-dasharray: 700; animation: draw 1.6s var(--ease) 0.5s both; }
@keyframes draw { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.hero-card.play .node { animation: pop 900ms var(--ease) both; }
.hero-card.play .n1 { animation-delay: 1.1s; } .hero-card.play .n3 { animation-delay: 1.25s; } .hero-card.play .n2 { animation-delay: 1.4s; } .hero-card.play .n4 { animation-delay: 1.55s; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.85); filter: blur(6px); } }
.hero-card.play .spark-pill { animation: rise 900ms var(--ease) 0.15s both; }
.hero-card.play h1 .w { display: inline-block; animation: word 1100ms var(--ease) both; animation-delay: calc(0.3s + var(--i) * 90ms); }
@keyframes word { from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); } }
.hero-card.play .lede { animation: rise 1000ms var(--ease) 0.9s both; }
.hero-card.play .actions { animation: rise 1000ms var(--ease) 1.05s both; }
.hero-card.play .scroll-chip, .hero-card.play .horizon { animation: rise 1000ms var(--ease) 1.6s both; }
.appstrip li { transition: color 300ms var(--ease); }
.appstrip.play li { animation: rise 900ms var(--ease) both; animation-delay: calc(1.7s + var(--i) * 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.appstrip li:hover { color: rgba(255, 255, 255, 0.85); }
.appstrip li:hover img { filter: none; opacity: 1; }

/* ---- sections: staggered entrance, never hidden without JS ---- */
.js .bento .tile.reveal { transform: translateY(40px) scale(0.97); transition: transform 1000ms var(--ease); }
.js .bento .tile.reveal.in { transform: none; }
.js .bento .tile:nth-child(2) { transition-delay: 60ms; } .js .bento .tile:nth-child(3) { transition-delay: 120ms; }
.js .bento .tile:nth-child(4) { transition-delay: 60ms; } .js .bento .tile:nth-child(5) { transition-delay: 120ms; }
.js .svc li:nth-child(2) { transition-delay: 80ms; } .js .svc li:nth-child(3) { transition-delay: 160ms; }
/* card sheen on hover */
.tile::after, .svc li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(22rem 22rem at var(--cx, 50%) var(--cy, 0%), rgba(255, 255, 255, 0.07), transparent 60%); opacity: 0; transition: opacity 400ms var(--ease); }
.svc li { position: relative; overflow: hidden; }
.tile:hover::after, .svc li:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rays i::after, .stars.twinkle, .wires .pulse, .node .dot::after, .hero-card h1 em, .horizon i.on::after { animation: none !important; }
  .stars.twinkle, .wires .pulse { display: none; }
  .horizon i.on::after { transform: scaleX(1); }
  [data-magnet] { translate: none; }
}

/* tile links: whole tile opens the site (stretched link); App Store sits above it */
.tile .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.1rem; }
.tile .links .more { margin-top: 0; min-height: 44px; }
.tile .stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile .store { position: relative; z-index: 2; gap: 0.45rem; padding: 0 0.95rem; border-radius: 999px; font-size: 0.875rem; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line); transition: background 250ms var(--ease), transform 120ms ease-out; }
.tile .store:hover { background: rgba(255, 255, 255, 0.12); }
.tile .store:active { transform: scale(0.97); }
.tile .store svg { width: 15px; height: 15px; fill: currentColor; }
.tile .tile-phone { position: relative; z-index: 0; }
.tile .stretch:focus-visible { outline: none; }
.tile:has(.stretch:focus-visible) { outline: 2px solid var(--sage); outline-offset: 3px; }

/* ======================= PERSONA MOTION ======================= */
/* three independent channels so nothing fights: entrance (scale/opacity),
   ambient loop (transform), pointer parallax (translate, driven by --px/--py) */
.persona { --px: 0; --py: 0; }
.hl  { translate: calc(var(--px) * -6px)  calc(var(--py) * -4px); }
.hr  { translate: calc(var(--px) * -8px)  calc(var(--py) * -5px); }
.hm  { translate: calc(var(--px) * -10px) calc(var(--py) * -6px); }
.cut { translate: calc(var(--px) * 8px)   calc(var(--py) * 5px); }
.cl  { translate: calc(var(--px) * 16px)  calc(var(--py) * 10px); }
.cr  { translate: calc(var(--px) * 14px)  calc(var(--py) * 9px); }
.k1  { translate: calc(var(--px) * 24px)  calc(var(--py) * 16px); }
.k2  { translate: calc(var(--px) * 20px)  calc(var(--py) * 14px); }
.k3  { translate: calc(var(--px) * 28px)  calc(var(--py) * 18px); }

/* ambient: clouds drift, cards breathe (small amplitude, offset phases) */
.persona.play .cl { animation: cloudIn 1.4s var(--ease) 0.5s both, drift 7s ease-in-out 2s infinite alternate; }
.persona.play .cr { animation: cloudIn 1.4s var(--ease) 0.65s both, drift 8s ease-in-out 2.2s infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(12px); } }
@keyframes cloudIn { from { opacity: 0; scale: 0.8; } }

.persona.play .card, .persona.play .pillchip { animation: chipIn 1s var(--ease) both, bob 5s ease-in-out infinite alternate; }
.persona.play .k1 { animation-delay: 0.95s, 2s; }
.persona.play .k2 { animation-delay: 1.1s, 2.6s; }
.persona.play .k3 { animation-delay: 1.25s, 3.2s; }
@keyframes chipIn { from { opacity: 0; scale: 0.82; filter: blur(8px); } }
@keyframes bob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* entrance: hills rise like glass panes, portrait lifts out of them */
.persona.play .hl { animation: hillIn 1.3s var(--ease) 0.1s both; }
.persona.play .hr { animation: hillIn 1.3s var(--ease) 0.2s both; }
.persona.play .hm { animation: hillIn 1.3s var(--ease) 0.35s both; }
@keyframes hillIn { from { opacity: 0; transform: translateY(35%); } }
.persona.play .cut { animation: cutIn 1.4s var(--ease) 0.25s both; }
@keyframes cutIn { from { opacity: 0; transform: translateX(-50%) translateY(60px) scale(0.96); filter: blur(10px); } }

/* live/open signals */
.persona .mark { animation: markPulse 2.4s ease-out infinite; }
.k3 .mark { animation-delay: 1.2s; }
@keyframes markPulse { 0% { box-shadow: 0 0 0 0 rgba(228, 242, 92, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(228, 242, 92, 0); } }
.badge.mint { position: relative; }

/* wash slowly breathes its light (opacity only — no moving background) */
.persona::before { animation: wash 6s ease-in-out infinite alternate; }
@keyframes wash { from { opacity: 0.75; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .persona *, .persona::before { animation: none !important; }
  .persona { --px: 0 !important; --py: 0 !important; }
}

/* persona on phones: taller frame, face clear of every overlay */
@media (max-width: 680px) {
  .persona { aspect-ratio: 4 / 5.2; }
  .cut { height: 80%; bottom: 0; }
  .cl, .cr { display: none; }
  .hl { width: 90%; left: -30%; bottom: -112%; }
  .hr { width: 90%; right: -32%; bottom: -114%; }
  .k2 { top: 3%; right: 3%; padding: 0.25rem 0.4rem 0.25rem 0.25rem; font-size: 0.75rem; gap: 0.3rem; }
  .k2 .av { width: 24px; height: 24px; }
  .k2 .badge { font-size: 0.625rem; padding: 0.18rem 0.45rem; }
  .k1 { left: 3%; right: auto; top: auto; bottom: 3%; width: 11.5rem; padding: 0.45rem; }
  .k1 .row { padding-bottom: 0.35rem; }
  .k1 .av { width: 24px; height: 24px; }
  .k1 .mark { width: 20px; height: 20px; }
  .k1 .msg { padding: 0.4rem 0.55rem; font-size: 0.6875rem; }
  .k1 .msg strong { font-size: 0.75rem; }
  .k1 .msg time { display: none; }
}
@media (max-width: 680px) {
  .cut { left: 60%; height: 82%; }
  .k1 { width: 10.25rem; bottom: 2.5%; left: 2.5%; }
  .k1 .msg span { font-size: 0.625rem; }
}

/* gradient-clipped italics: give descenders (g, y, p) room inside the painted box
   without changing line layout */
h1 em, h2 em, .hero-card h1 em { display: inline-block; padding: 0 0.08em 0.22em 0.02em; margin: 0 -0.08em -0.22em -0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* app strip: real colour icons (greyscale washed Tabata's white mark into its green tile) */
.appstrip img { filter: none; opacity: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.appstrip li { color: rgba(255, 255, 255, 0.55); }

/* portrait cutout: never let the global img max-width squash it — keep its true 1:1 ratio */
.persona .cut { max-width: none; width: auto !important; aspect-ratio: 1 / 1; object-fit: contain; }