@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #f3f1eb;
  --muted: #a4a6a4;
  --line: rgba(255,255,255,.14);
  --panel: rgba(16,18,18,.74);
  --acid: #d6ff58;
  --orange: #ff6b35;
  --blue: #8ed8ff;
  --serif: 'Space Grotesk', sans-serif;
  --sans: 'Manrope', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #0d0f0f; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body, button, a { cursor: default; }
a, button { color: inherit; }
a { cursor: pointer; text-decoration: none; }
button { border: 0; font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

.demo-page { min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
.demo-header { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 64px); mix-blend-mode: difference; }
.demo-brand { font: 600 13px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.demo-header nav { display: flex; gap: 24px; align-items: center; }
.demo-header nav a { color: #fff; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; transition: opacity .2s; }
.demo-header nav a:hover { opacity: 1; }
.demo-back { display: inline-flex; align-items: center; gap: 8px; }
.demo-back::before { content: '↙'; font-size: 15px; }

.demo-hero { min-height: 100svh; position: relative; display: grid; align-items: end; padding: 0 clamp(20px, 7vw, 120px) clamp(44px, 8vw, 110px); isolation: isolate; }
.demo-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 75% 30%, var(--hero-glow, rgba(214,255,88,.2)), transparent 34%), linear-gradient(115deg, #0c1111, #141919 62%, #0b0d0d); }
.demo-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-kicker, .eyebrow { margin: 0 0 22px; color: var(--accent, var(--acid)); font: 500 11px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.hero-title { max-width: 980px; margin: 0; font: 600 clamp(56px, 10vw, 148px)/.88 var(--serif); letter-spacing: -.075em; }
.hero-title em { color: var(--accent, var(--acid)); font-style: normal; }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-top: 40px; max-width: 980px; }
.hero-lede { max-width: 380px; margin: 0; color: rgba(243,241,235,.7); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; }
.hero-scroll { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; color: rgba(255,255,255,.55); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-scroll i { display: block; width: 1px; height: 90px; background: linear-gradient(var(--accent, var(--acid)), transparent); }
.hero-orb { position: absolute; right: 9vw; top: 24%; width: min(36vw, 580px); aspect-ratio: 1; border-radius: 50%; background: var(--hero-orb, linear-gradient(140deg, rgba(255,255,255,.3), rgba(255,255,255,0))); opacity: .35; filter: blur(2px); transform: rotate(-17deg); }
.hero-orb::before, .hero-orb::after { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; transform: rotate(28deg) skewX(-20deg); }
.hero-orb::after { inset: 26%; transform: rotate(-40deg) skewX(25deg); }

.story { position: relative; height: 300vh; }
.story__sticky { position: sticky; top: 0; height: 100svh; min-height: 650px; overflow: hidden; display: grid; grid-template-columns: minmax(280px, .7fr) minmax(420px, 1.3fr); align-items: center; gap: clamp(20px, 6vw, 110px); padding: 80px clamp(20px, 7vw, 120px) 34px; }
.story__sticky::before { content: ''; position: absolute; z-index: -2; inset: 0; background: var(--story-bg, #111514); }
.story__sticky::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .35; pointer-events: none; background: radial-gradient(circle at 60% 45%, var(--story-glow, rgba(214,255,88,.16)), transparent 39%), linear-gradient(90deg, rgba(0,0,0,.35), transparent 60%); }
.story__copy { position: relative; z-index: 4; max-width: 410px; }
.story__index { margin: 0 0 27px; color: var(--accent, var(--acid)); font: 500 11px var(--mono); letter-spacing: .14em; }
.story__title { margin: 0; font: 600 clamp(38px, 5.2vw, 78px)/.94 var(--serif); letter-spacing: -.065em; }
.story__title em { color: var(--accent, var(--acid)); font-style: normal; }
.story__text { max-width: 365px; margin: 26px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.story__meta { display: flex; gap: 16px; margin-top: 34px; color: rgba(255,255,255,.55); font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.story__meta span { padding-top: 9px; border-top: 1px solid var(--line); }
.story__counter { position: absolute; left: clamp(20px, 7vw, 120px); bottom: 32px; color: rgba(255,255,255,.45); font: 10px var(--mono); letter-spacing: .12em; }
.story__counter b { color: var(--ink); font-size: 19px; font-weight: 500; }
.story__hint { position: absolute; right: clamp(20px, 7vw, 120px); bottom: 32px; color: rgba(255,255,255,.45); font: 10px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.story__visual { position: relative; z-index: 2; height: min(74vh, 760px); min-height: 420px; perspective: 1400px; }
.story__visual::before { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; transform: rotate(-12deg) skewX(-12deg); opacity: .7; }
.story__visual::after { content: ''; position: absolute; top: 13%; bottom: 13%; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.2), transparent); }

/* Auto wash */
.demo-auto { --accent: #e7ff61; --hero-glow: rgba(214,255,88,.2); --story-bg: #111717; --story-glow: rgba(130,190,145,.2); }
.auto-visual { border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, #162021, #2a3330 60%, #101414); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.auto-visual::before { border-color: rgba(212,255,99,.22); }
.auto-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.auto-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 48%, rgba(209,255,98,.12), transparent 47%), repeating-linear-gradient(120deg, transparent 0 70px, rgba(255,255,255,.035) 71px 72px); }
.auto-floor { position: absolute; left: 8%; right: 8%; bottom: 11%; height: 24%; transform: perspective(300px) rotateX(56deg); background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 58px), linear-gradient(90deg, transparent, rgba(211,255,102,.18), transparent); mask-image: linear-gradient(to top, black, transparent); }
.auto-car { position: absolute; width: min(75%, 690px); transform-style: preserve-3d; transform: translateY(var(--auto-car-y, 20px)) rotateY(var(--auto-car-rotate, -22deg)) rotateX(var(--auto-car-tilt, 0deg)); transition: transform .16s linear; filter: saturate(var(--auto-saturate, .45)) brightness(var(--auto-brightness, .72)); }
.auto-car img { width: 100%; border-radius: 18px; mix-blend-mode: screen; opacity: .94; filter: contrast(1.12); }
.auto-dirt { position: absolute; inset: 7% 4% 11%; border-radius: 43% 48% 39% 45%; opacity: var(--auto-dirt, 1); background: radial-gradient(ellipse at 28% 33%, rgba(78,35,18,.95) 0 8%, transparent 14%), radial-gradient(ellipse at 70% 68%, rgba(90,42,20,.92) 0 13%, transparent 18%), radial-gradient(ellipse at 49% 50%, rgba(105,50,24,.75) 0 26%, transparent 37%), repeating-radial-gradient(ellipse at 50% 45%, rgba(65,30,15,.55) 0 2px, transparent 3px 14px); mix-blend-mode: multiply; transition: opacity .12s linear; }
.auto-foam { position: absolute; inset: 16% 12%; opacity: var(--auto-foam, 0); background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.85) 0 9px, transparent 10px), radial-gradient(circle at 69% 32%, rgba(255,255,255,.75) 0 16px, transparent 17px), radial-gradient(circle at 45% 70%, rgba(255,255,255,.86) 0 11px, transparent 12px); filter: blur(2px); mix-blend-mode: screen; }
.auto-sheen { position: absolute; inset: -15%; opacity: var(--auto-sheen-opacity, 0); transform: translateX(var(--auto-sheen-x, -100%)) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent 55%); mix-blend-mode: screen; }
.auto-spray { position: absolute; inset: 0; opacity: var(--auto-spray-opacity, 0); background: repeating-linear-gradient(100deg, transparent 0 45px, rgba(181,232,224,.32) 46px 48px, transparent 49px 90px); mask-image: linear-gradient(90deg, transparent, black 45%, transparent 70%); transform: translateX(var(--auto-spray-x, -20%)); }
.auto-readout { position: absolute; top: 26px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-start; color: rgba(255,255,255,.7); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.auto-readout b { display: block; color: var(--accent); font-size: 24px; font-weight: 500; letter-spacing: -.08em; }
.auto-readout span:last-child { text-align: right; }

/* Building */
.demo-building { --accent: #b1ef89; --hero-glow: rgba(143,221,142,.2); --story-bg: #d9d6cc; --story-glow: rgba(83,118,73,.26); color: #172018; }
.demo-building .demo-hero, .demo-building .demo-cta, .demo-building .demo-footer { color: var(--ink); }
.demo-building .demo-header { color: #fff; }
.building-visual { border-radius: 28px; overflow: hidden; background: linear-gradient(152deg, #bfc9c3, #eee9dc 53%, #9aab9a); box-shadow: 0 30px 80px rgba(14,24,16,.26); }
.building-visual::before { border-color: rgba(34,65,37,.2); }
.building-sky { position: absolute; inset: 0; background: radial-gradient(circle at 70% 16%, rgba(255,255,255,.75), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%); }
.building-cloud { position: absolute; width: 45%; height: 9%; right: 7%; top: 20%; border-radius: 50%; background: rgba(255,255,255,.46); filter: blur(18px); }
.building-tower { position: absolute; left: 50%; bottom: 8%; width: min(53%, 365px); height: 86%; transform: translateX(-50%); transform-style: preserve-3d; }
.building-tower::after { content: ''; position: absolute; inset: 0 -9% 0 6%; background: linear-gradient(100deg, rgba(18,41,26,.18), transparent 50%); transform: skewY(-3deg); pointer-events: none; }
.building-tower img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 6px; filter: saturate(.75) contrast(1.06); transform: translateY(var(--building-y, 16px)) scale(var(--building-scale, .94)); transition: transform .16s linear; }
.building-floor-rail { position: absolute; z-index: 3; top: 8%; bottom: 8%; right: 9%; width: 28px; border-left: 1px solid rgba(30,55,36,.35); }
.building-floor-rail i { position: absolute; left: -4px; width: 8px; height: 1px; background: rgba(30,55,36,.6); }
.building-floor-rail i:nth-child(1) { top: 0; }.building-floor-rail i:nth-child(2) { top: 18%; }.building-floor-rail i:nth-child(3) { top: 36%; }.building-floor-rail i:nth-child(4) { top: 54%; }.building-floor-rail i:nth-child(5) { top: 72%; }.building-floor-rail i:nth-child(6) { top: 90%; }
.building-marker { position: absolute; left: -13px; top: var(--building-marker, 90%); width: 28px; height: 28px; border: 1px solid rgba(27,55,32,.8); border-radius: 50%; background: #e4ecda; transition: top .15s linear; }
.building-marker::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); }
.building-floor-label { position: absolute; top: 27px; right: 30px; color: rgba(25,53,31,.72); font: 10px var(--mono); letter-spacing: .1em; }
.building-floor-label b { display: block; color: #203f25; font-size: 29px; font-weight: 500; letter-spacing: -.1em; }
.building-apartment { position: absolute; z-index: 5; left: 7%; bottom: 8%; width: min(42%, 255px); padding: 19px; border: 1px solid rgba(30,55,36,.2); border-radius: 13px; background: rgba(241,243,230,.78); backdrop-filter: blur(15px); opacity: 0; transform: translateY(18px); transition: opacity .35s, transform .35s; color: #243a25; }
.building-apartment.is-active { opacity: 1; transform: translateY(0); }
.building-apartment small { color: #668165; font: 10px var(--mono); text-transform: uppercase; }.building-apartment h3 { margin: 8px 0 4px; font: 600 20px var(--serif); }.building-apartment p { margin: 0; color: #658065; font-size: 11px; line-height: 1.5; }
.building-hotspots { position: absolute; z-index: 5; inset: 8% 18% 8% 16%; }.building-hotspots button { position: absolute; width: 14px; height: 14px; border: 1px solid rgba(213,255,127,.9); border-radius: 50%; background: rgba(213,255,127,.3); box-shadow: 0 0 0 7px rgba(213,255,127,.08); opacity: .25; transition: opacity .2s, transform .2s; }.building-hotspots button:hover, .building-hotspots button.is-selected { opacity: 1; transform: scale(1.35); }.building-hotspots button:nth-child(1) { left: 39%; top: 28%; }.building-hotspots button:nth-child(2) { left: 58%; top: 51%; }.building-hotspots button:nth-child(3) { left: 43%; top: 75%; }

/* Dental */
.demo-dental { --accent: #f58fbc; --hero-glow: rgba(241,126,180,.24); --story-bg: #160f18; --story-glow: rgba(231,102,164,.25); }
.dental-visual { border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #543445, #190f18 63%); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.dental-visual::before { border-color: rgba(255,190,224,.3); transform: rotate(20deg) skewX(-10deg); }
.dental-orbit { position: absolute; inset: 13%; border: 1px solid rgba(247,179,215,.24); border-radius: 50%; transform: rotateX(63deg) rotateZ(-20deg); }.dental-orbit::after { content: ''; position: absolute; inset: 14%; border: 1px dashed rgba(247,179,215,.22); border-radius: 50%; }
.dental-tooth { position: absolute; left: 50%; top: 49%; width: min(62%, 420px); aspect-ratio: 1; transform: var(--dental-tooth-transform, translate(-50%,-50%) rotateX(58deg) rotateZ(-13deg) scale(.85)); transform-style: preserve-3d; transition: transform .16s linear; filter: saturate(.85) contrast(1.1); }
.dental-tooth img { width: 100%; height: 100%; object-fit: cover; border-radius: 48% 52% 46% 54%; box-shadow: 0 24px 50px rgba(0,0,0,.45); mix-blend-mode: screen; }
.dental-tooth::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 43%; width: 22%; height: 18%; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, #170d17 0 32%, #8d5270 36% 44%, transparent 48%); opacity: clamp(0, calc((var(--p,0) - .15) * 2), 1); }
.dental-drill { position: absolute; z-index: 4; left: 49%; top: -7%; width: 53%; height: 21%; transform-origin: 8% 60%; transform: var(--dental-drill-transform, rotate(23deg) translateX(35px) translateY(0)); transition: transform .16s linear; }
.dental-drill__body { position: absolute; left: 0; top: 0; width: 80%; height: 100%; border-radius: 28px 58px 52px 23px; background: linear-gradient(160deg, #f8e4ee, #a98398 55%, #5f3c51); box-shadow: 0 13px 28px rgba(0,0,0,.34); transform: rotate(-11deg); }.dental-drill__body::after { content: ''; position: absolute; right: -18%; top: 34%; width: 26%; height: 30%; border-radius: 50%; background: linear-gradient(90deg, #d2bbcb, #674657); }.dental-drill__bit { position: absolute; left: -2%; top: 45%; width: 33%; height: 7px; background: repeating-linear-gradient(90deg, #f9d4e5 0 4px, #76455d 4px 7px); transform: rotate(-8deg); transform-origin: right; box-shadow: 0 0 10px #f4a6ca; }.dental-drill__light { position: absolute; z-index: 5; left: 1%; top: 49%; width: 19%; height: 23%; border-radius: 50%; background: #fff3fa; opacity: var(--dental-light, 0); box-shadow: 0 0 20px 10px rgba(255,214,237,.55); }
.dental-portal { position: absolute; z-index: 3; left: 50%; top: 49%; width: 1%; aspect-ratio: 1; border-radius: 50%; transform: var(--dental-portal-transform, translate(-50%,-50%) scale(0)); background: #070509; box-shadow: 0 0 0 1px rgba(255,186,220,.6), 0 0 90px 28px rgba(232,90,166,.45); transition: transform .18s linear; }.dental-portal::before { content: 'CASE STUDY'; position: absolute; top: 54%; left: 50%; color: rgba(255,210,232,.7); font: 10px var(--mono); letter-spacing: .15em; transform: translate(-50%, 100%); white-space: nowrap; opacity: var(--portal,0); }
.dental-blackout { position: absolute; z-index: 8; inset: 0; pointer-events: none; background: #080508; opacity: var(--blackout,0); transition: opacity .16s linear; }.dental-info { position: absolute; z-index: 9; left: 9%; right: 9%; bottom: 8%; display: flex; align-items: end; justify-content: space-between; gap: 22px; opacity: var(--info,0); transform: translateY(var(--dental-info-y, 20px)); transition: opacity .22s, transform .22s; }.dental-info b { display:block; max-width: 240px; color: #fff0f6; font: 600 25px/.98 var(--serif); }.dental-info span { max-width: 170px; color: rgba(255,222,238,.72); font: 10px/1.5 var(--mono); text-transform: uppercase; }

/* Legal */
.demo-legal { --accent: #ffac5c; --hero-glow: rgba(255,155,74,.2); --story-bg: #17120e; --story-glow: rgba(251,116,45,.3); }
.legal-visual { border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 48% 45%, #50301f, #1a120d 61%); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.legal-visual::before { border-color: rgba(255,166,89,.28); transform: rotate(-32deg) skewX(-12deg); }.legal-visual::after { background: linear-gradient(transparent, rgba(255,141,50,.18), transparent); }
.legal-floor { position: absolute; left: 7%; right: 7%; bottom: 7%; height: 30%; transform: perspective(350px) rotateX(59deg); background: repeating-linear-gradient(90deg, rgba(255,190,112,.17) 0 1px, transparent 1px 48px), linear-gradient(90deg, transparent, rgba(255,136,58,.23), transparent); mask-image: linear-gradient(to top, black, transparent); }
.legal-gavel { position: absolute; left: 43%; top: 10%; width: min(44%, 330px); transform-origin: 50% 78%; transform: var(--legal-gavel-transform, translate(-50%, 0) rotate(-34deg)); filter: drop-shadow(0 26px 20px rgba(0,0,0,.46)); transition: transform .12s linear; }.legal-gavel img { width: 100%; border-radius: 18px; mix-blend-mode: screen; filter: sepia(.6) saturate(1.5) contrast(1.1); }.legal-gavel::after { content: ''; position: absolute; left: 25%; right: 20%; bottom: 5%; height: 17%; border-radius: 50%; background: rgba(255,171,93,.4); filter: blur(20px); opacity: var(--impact,0); }
.legal-impact { position: absolute; z-index: 3; left: 47%; bottom: 18%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,225,167,.94); opacity: var(--impact,0); transform: var(--legal-impact-transform, translate(-50%,50%) scale(.3)); box-shadow: 0 0 0 2px #ffb357, 0 0 0 18px rgba(255,154,74,.25), 0 0 100px 40px rgba(255,101,34,.7); }.legal-impact::after { content: ''; position: absolute; inset: -150%; background: repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(255,194,99,.9) 8deg 10deg, transparent 11deg 25deg); mask-image: radial-gradient(circle, transparent 0 36%, black 37% 39%, transparent 40%); }
.legal-laws { position: absolute; z-index: 6; inset: 12% 5% 8%; pointer-events: none; }.legal-card { position: absolute; width: min(29%, 180px); padding: 14px; border: 1px solid rgba(255,188,105,.4); border-radius: 4px; background: rgba(38,25,17,.85); box-shadow: 0 14px 40px rgba(0,0,0,.25); opacity: var(--legal-cards, 0); transform: translate(var(--legal-card-x, 0px), var(--legal-card-y, 0px)) rotate(var(--legal-card-rotate, 0deg)); transition: opacity .15s; }.legal-card:nth-child(1) { --x:-1; --y:-1; --r:-7; left: 5%; top: 7%; }.legal-card:nth-child(2) { --x:1; --y:-1; --r:5; right: 2%; top: 15%; }.legal-card:nth-child(3) { --x:-1; --y:1; --r:4; left: 2%; bottom: 16%; }.legal-card:nth-child(4) { --x:1; --y:1; --r:-6; right: 1%; bottom: 10%; }.legal-card small { color: var(--accent); font: 10px var(--mono); }.legal-card b { display:block; margin-top: 12px; color: #fff0da; font: 600 16px/.95 var(--serif); }.legal-card span { display:block; margin-top: 8px; color: rgba(255,220,174,.6); font: 10px/1.4 var(--mono); text-transform: uppercase; }
.legal-services { position: absolute; z-index: 7; inset: auto 7% 8%; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; opacity: var(--service,0); transform: translateY(var(--legal-service-y, 15px)); transition: opacity .2s, transform .2s; }.legal-services a { min-height: 82px; padding: 13px; border: 1px solid rgba(255,183,105,.3); background: rgba(28,18,12,.86); font: 11px/1.2 var(--mono); }.legal-services a:hover { border-color: var(--accent); background: rgba(72,38,18,.9); }.legal-services b { display:block; margin-top: 14px; font: 600 14px var(--serif); color: #fff0da; }.legal-readout { position: absolute; top: 27px; left: 28px; color: rgba(255,220,174,.62); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.legal-readout b { display: block; margin-top: 7px; color: var(--accent); font: 23px var(--serif); }

.demo-cta { position: relative; min-height: 62vh; display: grid; place-items: center; padding: 90px 20px; text-align: center; background: #0b0d0d; overflow: hidden; }.demo-cta::before { content: ''; position: absolute; width: 52vw; aspect-ratio: 1; border-radius: 50%; background: var(--accent); opacity: .1; filter: blur(80px); }.demo-cta__inner { position: relative; z-index: 1; max-width: 760px; }.demo-cta h2 { margin: 0; font: 600 clamp(42px, 7vw, 92px)/.92 var(--serif); letter-spacing: -.07em; }.demo-cta h2 em { color: var(--accent); font-style: normal; }.demo-cta p { max-width: 470px; margin: 28px auto 0; color: var(--muted); font-size: 15px; line-height: 1.6; }.demo-button { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 16px 21px; border: 1px solid var(--accent); border-radius: 100px; color: #10110e; background: var(--accent); font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }.demo-button:hover { transform: translateY(-3px); box-shadow: 0 13px 30px color-mix(in srgb, var(--accent) 30%, transparent); }.demo-button--ghost { color: var(--accent); background: transparent; }
.demo-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(20px, 7vw, 120px); color: rgba(255,255,255,.45); font: 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.demo-footer a:hover { color: var(--ink); }

@media (max-width: 820px) {
  .demo-header { padding: 18px 18px; }.demo-header nav a:not(.demo-back) { display: none; }
  .demo-hero { padding: 0 20px 44px; }.hero-orb { right: -8vw; top: 22%; width: 75vw; }.hero-bottom { align-items: start; flex-direction: column; }.hero-scroll { display: none; }
  .story { height: 240vh; }.story__sticky { grid-template-columns: 1fr; align-content: start; gap: 15px; min-height: 0; padding: 98px 20px 66px; }.story__copy { max-width: 500px; }.story__index { margin-bottom: 15px; }.story__text { margin-top: 17px; font-size: 12px; }.story__meta { margin-top: 19px; }.story__visual { width: 100%; height: 54svh; min-height: 330px; max-height: 540px; margin-top: 12px; }.story__counter, .story__hint { bottom: 22px; }.story__counter { left: 20px; }.story__hint { right: 20px; }
  .auto-car { width: 92%; }.building-tower { width: min(59%, 300px); }.building-apartment { width: 48%; padding: 12px; }.building-apartment h3 { font-size: 16px; }.building-apartment p { font-size: 9px; }.dental-drill { width: 64%; }.legal-card { width: 31%; padding: 9px; }.legal-card b { font-size: 12px; }.legal-card span { font-size: 8px; }.legal-services { grid-template-columns: repeat(2,1fr); }.legal-services a { min-height: 58px; padding: 9px; }.legal-services b { margin-top: 8px; font-size: 12px; }
  .demo-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.auto-car, .building-tower img, .dental-tooth, .dental-drill, .legal-gavel { transition: none; }.demo-button { transition: none; }
}