/* dextol.ai
   Palette: white ground, graphite type, cocoa as the signature only (mark, eyebrows, small touches).
   Buttons are graphite. Field, shown on the phone and its tile, keeps its own colours (lime and black).
   Motion: every effect demonstrates the product or guides the eye. All of it stops under
   prefers-reduced-motion, and the Pause control in the hero stops it for everyone else. */

/* Type, self-hosted (SIL Open Font License; licences alongside the files in assets/fonts/) */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); }

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --ink: #12161B;
  --ink-2: #2A3038;
  --ink-soft: #4A525A;
  --muted: #5F676F;
  --line: #E6EAEE;
  --line-strong: #D0D7DC;
  --surface: #F4F6F7;
  --white: #FFFFFF;
  --cocoa: #6B3A2E;
  --cocoa-soft: #F3ECE9;
  --cocoa-mid: #E4D3CD;
  --cocoa-light: #D49A85;
  --night: #0E1216;
  --night-2: #151B21;
  --night-line: rgba(255,255,255,0.09);
  --night-text: #F4F6F7;
  --night-muted: #A3ACB5;
  --field-lime: #CFE53F;
  --field-ink: #0E0E0E;
  --font-display: "Schibsted Grotesk", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(18,22,27,0.06), 0 4px 12px rgba(18,22,27,0.06);
  --shadow-md: 0 10px 30px rgba(18,22,27,0.10), 0 2px 6px rgba(18,22,27,0.06);
  --shadow-lg: 0 40px 80px rgba(18,22,27,0.20), 0 10px 24px rgba(18,22,27,0.10);
  --ease: 180ms cubic-bezier(0.2, 0, 0, 1);
  --spring: 520ms cubic-bezier(0.2, 0.9, 0.2, 1.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cocoa); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--ease); }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--cocoa); outline-offset: 3px; border-radius: 6px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 96px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--white); border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cocoa); }

/* Scroll progress (scroll-driven; absent where unsupported) */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--cocoa); transform-origin: 0 50%; transform: scaleX(0); z-index: 40; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
}
@keyframes grow { to { transform: scaleX(1); } }

/* Buttons */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  font-family: inherit; line-height: 1.2; min-height: 48px; white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn-primary { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--white); box-shadow: var(--shadow-md); }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent); transform: skewX(-20deg); transition: left 600ms cubic-bezier(0.2, 0, 0, 1); pointer-events: none; }
.btn-primary:hover::after { left: 120%; }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-small { padding: 10px 16px; min-height: 40px; font-size: 15px; border-radius: 8px; }
.btn .arrow { transition: transform var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--ease), background var(--ease); }
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,0.86); }
.bar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 32px; height: 32px; border-radius: 8px; background: var(--cocoa); display: grid; place-items: center; flex-shrink: 0; }
.brand .mark svg { width: 32px; height: 32px; }
.brand .wordmark { height: 22px; width: auto; }
.nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }
.nav a { position: relative; color: var(--ink); text-decoration: none; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--cocoa); transform: scaleX(0); transform-origin: left; transition: transform var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); background: var(--white); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu[open] summary { background: var(--surface); }
.menu-list { position: absolute; right: 0; top: 48px; min-width: 210px; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px; display: grid; }
.menu-list a { padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu-list a:hover { background: var(--surface); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 56px 0 0; }
.hero::before { content: ""; position: absolute; inset: 40px 0 auto 0; height: 640px; background: radial-gradient(50% 55% at 16% 30%, rgba(228,211,205,0.32) 0%, rgba(255,255,255,0) 70%); pointer-events: none; z-index: -1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.7); font-size: 14px; font-weight: 500; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.pill strong { color: var(--ink); font-weight: 600; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--cocoa); flex-shrink: 0; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cocoa); opacity: 0; animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.6; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.hero h1 { font-size: clamp(46px, 6.6vw, 88px); font-weight: 700; margin-top: 22px; max-width: 12ch; letter-spacing: -0.03em; }
.hl { background-image: linear-gradient(var(--cocoa-mid), var(--cocoa-mid)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.2em; }
.hero .lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); margin-top: 22px; max-width: 30em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.partners { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 15px; color: var(--muted); }
.partners .label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.partners .names { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.partners .names span + span::before { content: "\00b7"; color: var(--line-strong); margin-right: 14px; }
.partners .founder { width: 100%; color: var(--ink-soft); }

/* Stage: the live demo */
.stage { position: relative; display: flex; justify-content: center; align-items: center; padding: 44px 24px 56px; min-height: 740px; }
.stage-bg { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate; }
.stage-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2l24 14v32L28 62 4 48V16z' fill='none' stroke='%23DCC8C1' stroke-width='1'/%3E%3C/svg%3E"); background-size: 56px 64px; -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 100%); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.85; }
.aurora i:nth-child(1) { width: 380px; height: 380px; left: -80px; top: -60px; background: #EAD6CE; animation: drift1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 340px; height: 340px; right: -90px; top: 180px; background: #DDE4EA; animation: drift2 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 300px; height: 300px; left: 60px; bottom: -120px; background: #F0E2DA; animation: drift3 24s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(90px, 70px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-80px, -60px) scale(1.15); } }
@keyframes drift3 { to { transform: translate(70px, -50px) scale(0.95); } }
.tilt { position: relative; z-index: 2; transform: perspective(1400px) rotateX(var(--rx, 4deg)) rotateY(var(--ry, -9deg)); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }

/* Phone illustration (placeholder until real captures of Field replace it) */
.phone { position: relative; width: 320px; border-radius: 44px; background: var(--field-ink); padding: 9px; box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,0.08); }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 88px; height: 24px; transform: translateX(-50%); border-radius: 14px; background: var(--field-ink); z-index: 3; }
.phone .screen { position: relative; border-radius: 36px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; height: 660px; font-size: 13px; }
.phone .app-bar { padding: 50px 16px 10px; display: flex; align-items: center; justify-content: space-between; background: var(--white); }
.phone .app-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.phone .app-tile { width: 26px; height: 26px; border-radius: 7px; background: var(--field-lime); color: var(--field-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.phone .avatar { width: 26px; height: 26px; border-radius: 50%; background: #E9EDEF; color: var(--ink-soft); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.phone .map { position: relative; flex: 1; background: #EEF1F3; overflow: hidden; }
.phone .map > .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-line { stroke-dasharray: 6 6; }
.voice { position: absolute; left: 12px; right: 12px; top: 16px; background: var(--white); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-md); transition: opacity 400ms ease, transform 400ms ease; }
.said { display: flex; gap: 10px; align-items: flex-start; }
.mic { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--field-ink); color: var(--white); display: grid; place-items: center; }
.mic svg { width: 14px; height: 14px; position: relative; z-index: 1; }
.mic::before, .mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--field-ink); opacity: 0; }
.said-body { position: relative; flex: 1; min-width: 0; min-height: 40px; }
.wave { position: absolute; left: 0; top: 4px; display: flex; align-items: center; gap: 3px; height: 18px; }
.wave .lst { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--field-ink); transform: scaleY(0.25); transform-origin: center; }
.transcript { font-weight: 500; line-height: 1.4; font-size: 13px; }
.transcript .w { display: inline-block; transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease; }
.records { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #EEF1F3; display: grid; gap: 6px; font-size: 12px; }
.records li { display: flex; align-items: center; gap: 8px; transition: opacity 320ms ease, transform 320ms var(--spring); }
.records li svg { width: 14px; height: 14px; flex-shrink: 0; }
.records li svg path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms ease; }
.records .k { color: var(--muted); width: 54px; }
.records .v { font-weight: 600; }
.voice .row { display: flex; gap: 8px; margin-top: 10px; }
.voice .row > span { flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-weight: 600; font-size: 12px; }
.confirm { position: relative; background: var(--field-ink); color: var(--white); overflow: hidden; }
.confirm .a, .confirm .b { display: block; transition: transform 320ms ease, opacity 320ms ease; }
.confirm .b { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(100%); }
.voice .row .edit { background: var(--white); color: var(--ink); border: 1px solid #D8DFE3; flex: 0 0 auto; padding: 9px 12px; }
.toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--field-ink); color: var(--white); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-md); transition: opacity 360ms ease, transform 360ms var(--spring); }
.toast svg { width: 14px; height: 14px; color: var(--field-lime); }
.phone .sheet { background: var(--white); border-radius: 18px 18px 0 0; padding: 12px 14px 10px; box-shadow: 0 -6px 20px rgba(18,22,27,0.06); }
.phone .sheet .day { font-size: 9px; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.phone .sheet .title { font-size: 15px; font-weight: 700; margin-top: 3px; }
.phone .sheet .sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.phone .sheet .build { margin-top: 8px; text-align: center; padding: 10px; border-radius: 11px; background: var(--field-ink); color: var(--white); font-weight: 600; font-size: 13px; }
.phone .tabs { background: var(--white); border-top: 1px solid var(--line); padding: 7px 4px 16px; display: grid; grid-template-columns: repeat(5, 1fr); }
.phone .tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 500; color: var(--muted); }
.phone .tabs span svg { width: 18px; height: 18px; }
.phone .tabs span.on { color: var(--field-ink); font-weight: 600; }

/* Narration chips around the phone */
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255,255,255,0.78); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-md); transition: opacity 420ms ease, transform 520ms var(--spring); }
.chip .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--cocoa); color: var(--white); display: grid; place-items: center; flex-shrink: 0; }
.chip .ico svg { width: 18px; height: 18px; }
.chip b { display: block; font-size: 14px; line-height: 1.2; }
.chip small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 1px; }
.chip-1 { right: -30px; top: 9%; }
.chip-2 { left: -30px; top: 55%; }
.chip-3 { right: -30px; top: 63%; }
.float { animation: bob 6s ease-in-out infinite alternate; }
.chip-2 .float, .chip-2.float { animation-delay: -2s; }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 5px; } }

.motion-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink-soft); font: 600 13px/1 var(--font-body); cursor: pointer; transition: background var(--ease), color var(--ease); }
.motion-toggle:hover { background: var(--white); color: var(--ink); }
.motion-toggle svg { width: 14px; height: 14px; }
.motion-toggle .play { display: none; }
html.motion-paused .motion-toggle .pause { display: none; }
html.motion-paused .motion-toggle .play { display: block; }

/* Demo timeline. Without JS (or with reduced motion) the final state shows. */
.stage.animating .wave { opacity: 0; transition: opacity 200ms ease; }
.stage.animating.s-listen:not(.s-heard) .wave { opacity: 1; }
.stage.animating.s-listen:not(.s-heard) .wave i { animation: eq 900ms ease-in-out infinite; }
.stage.animating.s-listen:not(.s-heard) .wave i:nth-child(2n) { animation-duration: 700ms; }
.stage.animating.s-listen:not(.s-heard) .wave i:nth-child(3n) { animation-duration: 1100ms; }
.stage.animating.s-listen:not(.s-heard) .wave i:nth-child(4n+1) { animation-delay: -300ms; }
@keyframes eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.stage.animating.s-listen:not(.s-heard) .mic::before { animation: ring 1.6s ease-out infinite; }
.stage.animating.s-listen:not(.s-heard) .mic::after { animation: ring 1.6s ease-out 0.5s infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(2.2); opacity: 0; } }
.stage.animating .transcript .w { opacity: 0; transform: translateY(4px); filter: blur(4px); }
.stage.animating.s-heard .transcript .w { opacity: 1; transform: none; filter: none; transition-delay: calc(var(--i) * 85ms); }
.stage.animating .records li { opacity: 0; transform: translateX(-8px); }
.stage.animating .records li svg path { stroke-dashoffset: 24; }
.stage.animating.s-drafted .records li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 220ms); }
.stage.animating.s-drafted .records li svg path { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 220ms + 180ms); }
.stage.animating .voice .row { opacity: 0.35; transition: opacity 300ms ease; }
.stage.animating.s-drafted .voice .row { opacity: 1; transition-delay: 700ms; }
.stage.animating.s-saved .confirm { animation: press 420ms ease; }
.stage.animating.s-saved .confirm .a { opacity: 0; transform: translateY(-100%); }
.stage.animating.s-saved .confirm .b { opacity: 1; transform: none; }
@keyframes press { 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
.stage.animating .toast { opacity: 0; transform: translate(-50%, 16px); }
.stage.animating.s-saved .toast { opacity: 1; transform: translate(-50%, 0); transition-delay: 250ms; }
.stage.animating .chip { opacity: 0; transform: translateY(10px) scale(0.92); }
.stage.animating.s-heard .chip-1, .stage.animating.s-drafted .chip-2, .stage.animating.s-saved .chip-3 { opacity: 1; transform: none; }
.stage.animating.s-reset .voice, .stage.animating.s-reset .toast, .stage.animating.s-reset .chip { opacity: 0; transition-delay: 0ms; }
.stage:not(.animating) .confirm .a { opacity: 0; }
.stage:not(.animating) .confirm .b { opacity: 1; transform: none; }
.stage:not(.animating) .wave { display: none; }

/* Drafting placeholder, shown between "heard" and "drafted" */
.rec-area { position: relative; }
.skel { position: absolute; left: 0; right: 0; top: 11px; padding-top: 10px; display: grid; gap: 10px; align-content: start; opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #ECEFF2 0%, #F8F9FA 45%, #ECEFF2 90%); background-size: 220% 100%; animation: shimmer 1.1s linear infinite; }
.skel i:nth-child(1) { width: 82%; } .skel i:nth-child(2) { width: 64%; } .skel i:nth-child(3) { width: 72%; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.stage:not(.animating) .skel { display: none; }
.stage.animating.s-heard:not(.s-drafted) .skel { opacity: 1; transition-delay: 700ms; }

/* Hero entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .hero-copy > :nth-child(5) { animation-delay: 280ms; }
  .stage { animation: rise 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms both; }
  .hl { background-size: 0% 0.2em; animation: underline 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 650ms forwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes underline { to { background-size: 100% 0.2em; } }

/* ---------- How it works ---------- */
.steps-band { margin-top: 72px; padding: 44px 0 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--white)); }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps::before, .steps::after { content: ""; position: absolute; top: 25px; left: 16.67%; right: 16.67%; height: 2px; border-radius: 2px; }
.steps::before { background: var(--line-strong); }
.steps::after { background: var(--cocoa); transform-origin: 0 50%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps::after { animation: grow linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; transform: scaleX(0); }
  }
}
.step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.step .node { width: 52px; height: 52px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); color: var(--cocoa); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.step .node svg { width: 22px; height: 22px; }
.step .n { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cocoa); }
.step h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: 0; margin-top: 4px; }
.step p { color: var(--ink-soft); font-size: 15px; margin-top: 6px; max-width: 24em; }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section-head { max-width: 42em; }
.section h2 { font-size: clamp(32px, 3.8vw, 48px); font-weight: 700; margin-top: 16px; }
.section .intro { color: var(--ink-soft); margin-top: 16px; font-size: 18px; max-width: 36em; }

/* Spotlight that follows the pointer */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(107,58,46,0.09), transparent 45%); opacity: 0; transition: opacity 250ms ease; pointer-events: none; z-index: -1; }
.spot:hover::before { opacity: 1; }

/* ---------- Products: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--white); display: flex; flex-direction: column; gap: 12px; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile h3 { font-size: 24px; font-weight: 700; }
.tile p { color: var(--ink-soft); font-size: 16px; }
.tile .meta { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B8C0C6; }
.status.live { background: var(--cocoa-soft); color: var(--cocoa); }
.status.live::before { background: var(--cocoa); }
.tile-field { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: center; padding: 40px; border: 1.5px solid transparent; background: linear-gradient(180deg, #FFFFFF, #FBF8F7) padding-box, conic-gradient(from var(--angle), var(--cocoa-mid) 0deg, var(--cocoa) 50deg, var(--cocoa-mid) 110deg, var(--line) 170deg, var(--line) 360deg) border-box; animation: spin-angle 9s linear infinite; }
@keyframes spin-angle { to { --angle: 360deg; } }
.tf-copy { display: flex; flex-direction: column; gap: 14px; }
.tile-field .head { display: flex; align-items: center; gap: 14px; }
.tile-field .app-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--field-lime); color: var(--field-ink); display: grid; place-items: center; font: 700 26px/1 var(--font-display); box-shadow: var(--shadow-sm); }
.tile-field h3 { font-size: 36px; margin-top: 4px; }
.tile-field .big { font-size: 19px; color: var(--ink); max-width: 30em; }
.features { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.features li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--cocoa); margin-top: 2px; }
.tile-field .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; }
.tile-field .foot .meta { margin: 0; padding: 0; }

/* Voice to records, inside the Field card */
.flow-v { padding: 20px; border-radius: 18px; background: rgba(255,255,255,0.9); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.fv-said { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--surface); }
.fv-said .mic { width: 34px; height: 34px; }
.fv-said .mic svg { width: 15px; height: 15px; }
.fv-said .bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.fv-said .bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--ink); transform: scaleY(0.3); animation: eq 1000ms ease-in-out infinite; }
.fv-said .bars i:nth-child(2n) { animation-duration: 760ms; }
.fv-said .bars i:nth-child(3n) { animation-duration: 1240ms; animation-delay: -200ms; }
.fv-q { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 6px; line-height: 1.45; }
.fv-pipe { position: relative; width: 2px; height: 30px; margin: 0 auto; background: var(--line-strong); overflow: hidden; border-radius: 2px; }
.fv-pipe i { position: absolute; left: 0; top: -45%; width: 100%; height: 45%; background: linear-gradient(180deg, transparent, var(--cocoa), transparent); animation: travel-v 1.6s linear infinite; }
@keyframes travel-v { to { top: 100%; } }
.fv-recs { display: grid; gap: 10px; }
.rec { display: grid; grid-template-columns: 36px 1fr 22px; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); animation: recpop 5s ease infinite; animation-delay: calc(var(--i) * 0.35s); }
.rec .ri { width: 36px; height: 36px; border-radius: 10px; background: var(--cocoa-soft); color: var(--cocoa); display: grid; place-items: center; }
.rec .ri svg { width: 18px; height: 18px; }
.rec small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rec b { display: block; font-size: 15px; line-height: 1.3; }
.rec .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--cocoa); color: var(--white); display: grid; place-items: center; }
.rec .ok svg { width: 12px; height: 12px; }
@keyframes recpop { 0%, 8% { opacity: 0.4; transform: translateY(6px); } 18%, 86% { opacity: 1; transform: none; border-color: var(--cocoa-mid); } 100% { opacity: 0.4; transform: translateY(6px); } }

/* Mini visuals in the smaller tiles */
.mini { margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--surface); display: grid; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.mini-row { display: flex; align-items: center; gap: 10px; }
.box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--white); display: grid; place-items: center; flex-shrink: 0; animation: boxfill 7.2s ease infinite; animation-delay: calc(var(--i) * 0.9s); }
.box svg { width: 12px; height: 12px; color: var(--white); }
.box svg path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: tick 7.2s ease infinite; animation-delay: calc(var(--i) * 0.9s); }
@keyframes boxfill { 0%, 10% { background: var(--white); border-color: var(--line-strong); } 16%, 86% { background: var(--cocoa); border-color: var(--cocoa); } 100% { background: var(--white); border-color: var(--line-strong); } }
@keyframes tick { 0%, 12% { stroke-dashoffset: 20; } 20%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
.num { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--line-strong); font-size: 11px; font-weight: 700; color: var(--ink-soft); display: grid; place-items: center; flex-shrink: 0; animation: stepon 6s ease infinite; animation-delay: calc(var(--i) * 1.6s); }
@keyframes stepon { 0%, 6% { background: var(--white); border-color: var(--line-strong); color: var(--ink-soft); } 12%, 30% { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); } 40%, 100% { background: var(--white); border-color: var(--cocoa-mid); color: var(--cocoa); } }
.rail { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rail i { display: block; height: 100%; width: 100%; background: var(--cocoa); transform-origin: 0 50%; animation: fill 6s ease infinite; }
@keyframes fill { 0% { transform: scaleX(0.05); } 90% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 11px; font-weight: 700; align-self: flex-start; }
.lang span { padding: 3px 8px; border-radius: 999px; color: var(--muted); }
.lang span:first-child { animation: langA 6s steps(1) infinite; }
.lang span:last-child { animation: langB 6s steps(1) infinite; }
@keyframes langA { 0% { background: var(--ink); color: var(--white); } 50% { background: transparent; color: var(--muted); } }
@keyframes langB { 0% { background: transparent; color: var(--muted); } 50% { background: var(--ink); color: var(--white); } }

/* ---------- Why: dark ---------- */
.dark { background: var(--night); color: var(--night-text); position: relative; overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 78% 40%, rgba(107,58,46,0.45), transparent 70%), radial-gradient(40% 50% at 10% 0%, rgba(212,154,133,0.10), transparent 70%); pointer-events: none; }
.dark::after { content: ""; position: absolute; inset: 0; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2l24 14v32L28 62 4 48V16z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E"); background-size: 56px 64px; -webkit-mask-image: radial-gradient(60% 70% at 70% 45%, #000 10%, transparent 90%); mask-image: radial-gradient(60% 70% at 70% 45%, #000 10%, transparent 90%); pointer-events: none; }
.dark .wrap { position: relative; z-index: 1; }
.dark .eyebrow { color: var(--cocoa-light); }
.dark h2 { color: var(--white); }
.dark .intro { color: var(--night-muted); }
.why-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; margin-top: 48px; }
.principles { display: grid; gap: 14px; }
.principle { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 22px; border-radius: var(--radius); background: rgba(255,255,255,0.035); border: 1px solid var(--night-line); transition: border-color var(--ease), background var(--ease); }
.principle:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.dark .spot::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(212,154,133,0.14), transparent 45%); }
.principle .pi { width: 44px; height: 44px; border-radius: 12px; background: rgba(212,154,133,0.12); color: var(--cocoa-light); display: grid; place-items: center; }
.principle .pi svg { width: 20px; height: 20px; }
.principle h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--white); }
.principle p { color: var(--night-muted); margin-top: 4px; font-size: 15px; }
.diagram { position: relative; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram .base { stroke: rgba(255,255,255,0.14); stroke-width: 1.5; fill: none; }
.diagram .pulse { stroke: var(--cocoa-light); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 9 100; stroke-dashoffset: 9; filter: drop-shadow(0 0 6px rgba(212,154,133,0.9)); animation: pulse-run 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.diagram .pulse.p2 { animation-delay: 0.85s; }
.diagram .pulse.p3 { animation-delay: 1.7s; }
@keyframes pulse-run { from { stroke-dashoffset: 9; } to { stroke-dashoffset: -100; } }
.diagram .node .bg { fill: rgba(21,27,33,0.92); stroke: rgba(255,255,255,0.14); }
.diagram .node .t { fill: var(--white); font: 700 17px var(--font-body); }
.diagram .node .s { fill: var(--night-muted); font: 500 12px var(--font-body); }
.diagram .hub-ring { fill: none; stroke: var(--cocoa-light); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hub 3s ease-out infinite; }
.diagram .hub-ring.r2 { animation-delay: 1.5s; }
@keyframes hub { 0% { transform: scale(0.7); opacity: 0.55; } 100% { transform: scale(1.6); opacity: 0; } }
/* Foundation, phone-sized: a vertical stack with the same pulse */
.stack-m { display: none; list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.stack-m::before { content: ""; position: absolute; left: 25px; top: 40px; bottom: 30px; width: 2px; background: rgba(255,255,255,0.14); }
.stack-m::after { content: ""; position: absolute; left: 25px; top: 40px; width: 2px; height: 48px; background: linear-gradient(180deg, transparent, var(--cocoa-light), transparent); filter: drop-shadow(0 0 6px rgba(212,154,133,0.9)); animation: stack-run 2.4s linear infinite; }
@keyframes stack-run { from { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateY(210px); opacity: 0; } }
.stack-m li { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.stack-m li + li { margin-left: 0; }
.stack-m .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font: 700 18px/1 var(--font-display); background: #1C232A; color: var(--white); border: 1px solid rgba(255,255,255,0.14); flex-shrink: 0; }
.stack-m .ic.hub { background: var(--cocoa); border-color: transparent; }
.stack-m .ic.hub svg { width: 40px; height: 40px; }
.stack-m .ic.lime { background: var(--field-lime); color: var(--field-ink); border-color: transparent; }
.stack-m b { display: block; color: var(--white); font-size: 17px; }
.stack-m small { display: block; color: var(--night-muted); font-size: 13px; }
.foundation { margin-top: 18px; text-align: center; color: var(--night-muted); font-size: 16px; }
.foundation strong { color: var(--white); }

/* ---------- Partners ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.partner { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.partner:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mono { width: 64px; height: 64px; border-radius: 16px; background: var(--cocoa-soft); color: var(--cocoa); display: grid; place-items: center; font: 700 20px/1 var(--font-display); letter-spacing: -0.02em; }
.partner .tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.partner .who { font: 700 20px/1.2 var(--font-display); letter-spacing: -0.01em; margin-top: 4px; }
.partner .where { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.partner .where svg { width: 14px; height: 14px; }
.partner .what { color: var(--ink-soft); margin-top: 10px; font-size: 16px; }

/* ---------- Company ---------- */
.company { padding-top: 0; }
.company-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; padding: 40px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.company-card h2 { font-size: clamp(28px, 3vw, 38px); }
.company-card p:not(.eyebrow) { color: var(--ink-soft); font-size: 17px; margin-top: 16px; }
.company-card h2 { margin-top: 14px; }
.facts { display: grid; border-top: 1px solid var(--line-strong); margin: 0; }
.fact { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-strong); font-size: 16px; }
.fact .k { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 3px; }
.fact dd { margin: 0; }

/* ---------- Demo ---------- */
.demo { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--white) 0%, var(--cocoa-soft) 100%); border-top: 1px solid var(--line); }
.demo::before { content: ""; position: absolute; inset: 0; opacity: 0.6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2l24 14v32L28 62 4 48V16z' fill='none' stroke='%23E4D3CD' stroke-width='1'/%3E%3C/svg%3E"); background-size: 56px 64px; -webkit-mask-image: radial-gradient(60% 80% at 80% 100%, #000 10%, transparent 80%); mask-image: radial-gradient(60% 80% at 80% 100%, #000 10%, transparent 80%); pointer-events: none; }
.demo .wrap { position: relative; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.demo .note { margin-top: 20px; color: var(--ink-soft); font-size: 17px; max-width: 30em; }
.assure { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.assure li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); font-weight: 500; }
.assure li span { width: 32px; height: 32px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); color: var(--cocoa); display: grid; place-items: center; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.assure li svg { width: 17px; height: 17px; }
.demo .alt { margin-top: 26px; font-size: 15px; color: var(--muted); }
.book { position: relative; background: rgba(255,255,255,0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: grid; gap: 24px; box-shadow: var(--shadow-lg); }
.book-head { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.book-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--cocoa-soft); color: var(--cocoa); display: grid; place-items: center; flex-shrink: 0; }
.book-icon svg { width: 24px; height: 24px; }
.book-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.book-meta { margin-top: 2px; font-size: 15px; color: var(--muted); }
.book-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.book-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; font-size: 16px; color: var(--ink-soft); }
.book-steps strong { color: var(--ink); font-weight: 600; }
.book-steps .n { width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--cocoa-mid); background: var(--white); color: var(--cocoa); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.book-cta { display: grid; gap: 12px; justify-items: start; }
.book .fine { font-size: 13px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { padding: 48px 0 56px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); background: var(--white); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 20px 32px; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.footer-brand .mark { width: 24px; height: 24px; border-radius: 6px; background: var(--cocoa); display: grid; place-items: center; }
.footer-brand .mark svg { width: 24px; height: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-meta { width: 100%; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Scroll reveals ---------- */
/* Hidden only once JS has confirmed it can reveal them; revealed once, never hidden again. */
@media (prefers-reduced-motion: no-preference) {
  html.io-reveal .reveal:not(.in) { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); }
  html.io-reveal .reveal { transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 800ms ease; transition-delay: calc(var(--d, 0) * 110ms); }
}

/* ---------- Paused / reduced motion ---------- */
html.motion-paused *:not(.progress),
html.motion-paused *:not(.progress)::before,
html.motion-paused *:not(.progress)::after { animation-play-state: paused !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .chip-1, .chip-3 { right: -6px; }
  .chip-2 { left: -6px; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .stage { width: 100%; max-width: 580px; margin: 0 auto; }
  .bento { grid-template-columns: 1fr; }
  .tile-field { grid-template-columns: 1fr; gap: 28px; }
  .why-grid, .partner-grid, .company-card, .demo-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .menu { display: block; }
  .hero { padding: 32px 0 0; }
  .hero h1 { max-width: none; }
  .stage { min-height: 0; padding: 28px 12px 64px; }
  .stage-bg { border-radius: 24px; }
  .chip { display: none; }
  .tilt { --rx: 0deg; --ry: 0deg; width: 100%; max-width: 320px; }
  .phone { width: 100%; }
  .diagram > svg { display: none; }
  .stack-m { display: block; }
  .foundation { text-align: left; }
  .phone .screen { height: 640px; }
  .steps-band { margin-top: 48px; padding: 36px 0; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before, .steps::after { display: none; }
  .section { padding: 72px 0; }
  .tile-field { padding: 24px; }
  .tile-field h3 { font-size: 28px; }
  .company-card { padding: 24px; }
  .book { padding: 22px; }
  .book-cta { justify-items: stretch; }
  .fact { grid-template-columns: 1fr; gap: 4px; }
  .partner { grid-template-columns: 1fr; }
  .brand .wordmark { height: 17px; }
  .brand { gap: 10px; }
  .header-actions .btn-small { padding: 9px 14px; font-size: 14px; }
  .partners .names { flex-direction: column; gap: 4px; }
  .partners .names span + span::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .tile:hover, .partner:hover { transform: none; }
  .motion-toggle { display: none; }
  .progress { display: none; }
}