:root {
  --cream: #fff0df;
  --cream-deep: #f3dfcb;
  --ink: #28221f;
  --muted: #8a776a;
  --line: rgba(64, 48, 39, .12);
  --honey: #e5a93c;
  --honey-dark: #9f6511;
  --green: #79d996;
  --blue: #86b9ff;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { color: inherit; }
a { text-decoration: none; }
button { border: 0; }
:focus-visible { outline: 3px solid #7c4b06; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; background: #fff; translate: 0 -160%; }
.skip-link:focus { translate: 0; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

/* Header */
.site-header { position: relative; z-index: 100; height: 114px; border-bottom: 1px solid rgba(87,62,47,.08); background: rgba(255,240,223,.78); }
.header-inner { width: 100%; height: 100%; padding-inline: max(32px,calc((100% - 1740px)/2)); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 5px 13px rgba(84,54,15,.13); }
.brand strong { font-size: 24px; letter-spacing: -.04em; }
.brand > span { margin-left: -5px; padding: 3px 6px; border: 1px solid rgba(77,57,44,.18); border-radius: 6px; color: #8e7767; font-size: 10px; font-weight: 700; }
.site-header nav { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 700; }
.site-header nav > a:first-child::before { margin-right: 8px; content: "▣"; font-size: 13px; }
.header-cta { min-height: 60px; padding: 0 23px; display: inline-flex; align-items: center; gap: 10px; border-radius: 18px; background: rgba(239,218,197,.66); transition: background .2s, transform .25s var(--ease); }
.header-cta:hover { background: rgba(255,255,255,.55); transform: translateY(-2px); }
.header-cta .apple-mark, .button .apple-mark { color: inherit; font-size: 17px; line-height: 1; }

/* Hero */
.hero { padding: 20px 24px 0; text-align: center; }
.hero-copy { max-width: 1100px; margin: 0 auto; }
.eyebrow { margin: 0; color: var(--honey-dark); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(66px, 6.4vw, 96px); font-weight: 760; line-height: .99; letter-spacing: -.065em; }
.hero h1 mark { position: relative; z-index: 0; padding: 0 .05em; background: none; color: inherit; white-space: nowrap; }
.hero h1 mark::after { position: absolute; z-index: -1; right: -.04em; bottom: -.02em; left: -.04em; height: .48em; border-radius: 1px; background: rgba(239,136,162,.7); content: ""; }
.hero-lede { max-width: 640px; margin: 26px auto 0; color: #75665d; font-size: 18px; line-height: 1.55; }
.hero-actions { margin-top: 42px; display: flex; justify-content: center; gap: 14px; }
.button { min-height: 60px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 17px; font-size: 16px; font-weight: 750; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.button:hover { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 18px 34px rgba(46,31,24,.23); }
.button-dark:hover { background: #171311; box-shadow: 0 22px 38px rgba(46,31,24,.29); }
.button-soft { background: rgba(239,218,197,.66); }
.button-soft:hover { background: rgba(255,255,255,.58); }
.preview-button small { padding: 7px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .03em; }
.hero-meta { margin: 15px 0 0; color: #a08b7d; font-size: 11px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }

/* Cinematic Mac */
.cinema { width: min(100%, 1216px); margin: 80px auto 0; }
.mac-screen { position: relative; height: 608px; overflow: hidden; border-radius: 42px; background: #241249; box-shadow: 0 42px 85px rgba(74,39,69,.16), inset 0 0 0 1px rgba(255,255,255,.12); isolation: isolate; }
.screen-wallpaper { position: absolute; inset: 0; background: #281260 url("notchy-wallpaper.svg") center/cover no-repeat; transform: scale(1.015); transition: transform 1.2s var(--ease), filter .8s; }
.mac-screen.is-unlocked .screen-wallpaper { filter: saturate(.92) brightness(.96); transform: scale(1); }
.mac-screen::after { position: absolute; z-index: 2; inset: 0; background: rgba(14,5,36,.08); content: ""; pointer-events: none; transition: opacity .8s; }
.mac-screen.is-unlocked::after { opacity: 0; }
.menu-bar { position: absolute; z-index: 4; inset: 0 0 auto; height: 66px; padding: 19px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; color: #fff; opacity: 0; transform: translateY(-12px); transition: opacity .55s .25s, transform .65s .2s var(--ease); font-size: 11px; }
.menu-bar > .menu-capsule { height: 42px; padding: 0 15px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(115,78,168,.48); box-shadow: inset 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.menu-left { width: 62px; justify-content: center; }
.menu-right { width: 237px; justify-content: space-around; }
.menu-left .apple-mark { font-size: 16px; }
.mac-screen.is-unlocked .menu-bar { opacity: 1; transform: none; }
.lock-screen { position: absolute; z-index: 3; inset: 90px 0 42px; display: flex; flex-direction: column; align-items: center; color: rgba(224,168,255,.9); filter: saturate(145%); transition: opacity .58s, transform .8s var(--ease), filter .65s; }
.lock-screen p { margin: 8px 0 0; font-size: 30px; font-weight: 700; }
.lock-screen > strong { margin-top: -2px; font-size: 94px; line-height: 1; letter-spacing: -.055em; }
.lock-screen > div:not(.lock-player) { margin-top: 18px; display: flex; gap: 24px; font-size: 14px; font-weight: 700; }
.lock-player { width: 330px; height: 176px; margin-top: 73px; padding: 18px 19px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 27px; background: rgba(116,65,155,.46); box-shadow: inset 0 1px rgba(255,255,255,.08),0 14px 40px rgba(21,8,53,.14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; text-align: left; }
.lock-player-head { display: flex; align-items: center; gap: 12px; }
.lock-player-head > span:nth-child(2) { min-width: 0; flex: 1; }
.lock-player-head b,.lock-player-head small { display: block; }
.lock-player-head b { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.lock-player-head small { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 10px; }
.lock-player-head i { color: rgba(255,255,255,.35); font-size: 12px; font-style: normal; letter-spacing: 2px; }
.lock-art { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px; background: radial-gradient(circle at 50% 28%,#ffc4cf 0 18%,transparent 19%),linear-gradient(180deg,#f0a5b5 0 45%,#817097 46% 62%,#463654 63%); box-shadow: 0 5px 12px rgba(26,10,48,.25); }
.lock-scrub { height: 22px; display: flex; align-items: center; gap: 8px; }
.lock-scrub::before,.lock-scrub::after { color: rgba(255,255,255,.5); font-size: 8px; content: "⌁"; }
.lock-scrub span { height: 4px; flex: 1; border-radius: 9px; background: rgba(255,255,255,.3); }
.lock-controls { display: flex; align-items: center; justify-content: space-around; color: rgba(255,255,255,.72); font-size: 19px; }
.lock-controls strong { color: #fff; font-size: 27px; }
.mac-screen.is-unlocked .lock-screen { opacity: 0; filter: blur(10px); transform: scale(.94) translateY(-18px); pointer-events: none; }
.desktop-dock { position: absolute; z-index: 5; bottom: 25px; left: 50%; height: 88px; padding: 11px; display: flex; gap: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: rgba(122,82,165,.43); opacity: 0; transform: translate(-50%,28px) scale(.92); transition: opacity .45s .55s, transform .7s .48s var(--ease); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mac-screen.is-unlocked .desktop-dock { opacity: 1; transform: translate(-50%,0) scale(1); }
.dock-icon { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 17px; background: rgba(255,255,255,.2); color: #fff; font-size: 26px; font-weight: 750; }
.dock-icon img { width: 100%; height: 100%; }
.dock-command { background: #0e0e11; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.dock-empty { background: rgba(255,255,255,.18); }
.unlock-button { position: absolute; z-index: 8; bottom: 26px; left: 50%; padding: 14px 19px; border-radius: 14px; background: transparent; color: rgba(235,186,255,.72); cursor: pointer; font-size: 14px; font-weight: 750; translate: -50% 0; transition: opacity .35s, transform .55s var(--ease), background .2s; }
.unlock-button:hover { background: rgba(255,255,255,.08); }
.mac-screen.is-unlocked .unlock-button { opacity: 0; transform: translateY(18px); pointer-events: none; }
.screen-hint { position: absolute; z-index: 4; right: 32px; bottom: 24px; margin: 0; color: rgba(255,255,255,.52); opacity: 0; transform: translateY(10px); transition: opacity .4s 1s, transform .55s .95s var(--ease); font-size: 11px; font-weight: 700; }
.mac-screen.is-unlocked .screen-hint { opacity: 1; transform: none; }
.interactive-hint { margin: 24px 0 0; color: #b59c8c; font-size: 12px; font-weight: 750; }

/* Original Notchy composition: editorial copy beside a live product stage. */
.site-header { height: 96px; border: 0; background: transparent; }
.header-inner { max-width: 1500px; margin: 0 auto; padding-inline: 24px; }
.site-header nav { gap: 30px; }
.site-header nav > a:first-child::before { display: none; }
.header-cta { min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--ink); color: #fff; }
.header-cta:hover { background: #0e0c0b; }
.header-cta > span { color: #f2b94f; font-size: 14px; }

.hero { padding: 28px 24px 42px; }
.hero-layout { width: min(100%,1500px); min-height: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(390px,.66fr) minmax(680px,1.34fr); align-items: center; gap: clamp(44px,5vw,86px); }
.hero-copy { max-width: 560px; margin: 0; text-align: left; }
.hero-copy { animation: hero-copy-arrive .78s .08s var(--ease) both; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; color: #9c650f; font-size: 11px; letter-spacing: .15em; }
.hero-copy .eyebrow::before { width: 28px; height: 2px; background: var(--honey); content: ""; }
.hero h1 { max-width: 560px; margin: 26px 0 0; font-size: clamp(70px,5.5vw,92px); line-height: .9; letter-spacing: -.075em; }
.hero h1 mark { display: inline-block; }
.hero h1 mark::after { right: -.02em; bottom: -.02em; left: -.02em; height: .24em; border-radius: 100% 12% 80% 8%; background: rgba(229,169,60,.68); transform: rotate(-2deg); }
.hero-lede { max-width: 510px; margin: 30px 0 0; color: #746258; font-size: 18px; line-height: 1.58; }
.hero-actions { margin-top: 32px; justify-content: flex-start; align-items: center; }
.hero-actions .button { min-height: 58px; padding-inline: 22px; }
.hero-actions .button span { color: var(--honey); font-size: 14px; }
.text-link { padding: 14px 4px; border-bottom: 1px solid rgba(45,34,29,.24); font-size: 14px; font-weight: 750; }
.text-link span { margin-left: 7px; color: #9c650f; }
.hero-notes { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 20px; color: #9b8679; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes span::before { width: 5px; height: 5px; border-radius: 50%; background: var(--honey); content: ""; }

.cinema { width: 100%; margin: 0; animation: cinema-arrive 1s .16s var(--ease) both; }
.mac-screen { height: 650px; border-radius: 34px; box-shadow: 0 50px 95px rgba(66,35,76,.22),inset 0 0 0 1px rgba(255,255,255,.13); transform: perspective(1500px) rotateY(-1.5deg) rotateX(.5deg); transform-origin: left center; }
.screen-wallpaper { background: #0c1824 url("notchy-wallpaper.svg") center/cover no-repeat; }
.notch-halo { position: absolute; z-index: 3; top: -42px; left: 50%; width: 520px; height: 240px; background: radial-gradient(ellipse at 50% 0,rgba(255,225,166,.48),rgba(231,171,78,.14) 30%,transparent 68%); opacity: 0; translate: -50% 0; pointer-events: none; }
.mac-screen.is-unlocked .notch-halo { animation: notch-awake-halo 1.25s var(--ease) both; }
.mac-screen.is-unlocked .screen-wallpaper { filter: saturate(.82) brightness(.76); transform: scale(1.035); }
.screen-label { position: absolute; z-index: 4; top: 31px; color: rgba(255,255,255,.48); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.screen-label-left { left: 28px; }.screen-label-right { right: 28px; }
.screen-label-left span { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--honey); box-shadow: 0 0 14px rgba(229,169,60,.8); }
.ambient-copy { position: absolute; z-index: 4; top: 128px; left: 8%; color: #fff; text-align: left; transition: opacity .55s,filter .7s,transform .8s var(--ease); }
.ambient-copy > span { display: block; color: rgba(239,196,255,.74); font-size: 15px; font-weight: 750; letter-spacing: .08em; }
.ambient-copy > strong { max-width: 480px; margin-top: 16px; display: block; font-size: clamp(42px,3.25vw,58px); line-height: .96; letter-spacing: -.06em; text-shadow: 0 8px 30px rgba(15,5,43,.3); }
.ambient-cards { position: absolute; z-index: 4; right: 7%; bottom: 112px; width: 270px; display: grid; gap: 11px; transition: opacity .5s .05s,filter .7s,transform .85s var(--ease); }
.ambient-card { min-height: 88px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: rgba(27,12,72,.35); box-shadow: inset 0 1px rgba(255,255,255,.08),0 12px 35px rgba(10,4,38,.13); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; text-align: left; }
.ambient-card span { display: block; color: rgba(235,189,255,.7); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.ambient-card strong { margin-top: 8px; display: block; font-size: 17px; letter-spacing: -.025em; }
.ambient-card small { margin-top: 4px; display: block; color: rgba(255,255,255,.55); font-size: 9px; }
.focus-card { width: 210px; margin-left: 60px; background: rgba(157,91,144,.28); }
.mac-screen.is-unlocked .ambient-copy { opacity: 0; filter: blur(12px); transform: translate(-30px,-12px) scale(.96); }
.mac-screen.is-unlocked .ambient-cards { opacity: 0; filter: blur(12px); transform: translate(30px,18px) scale(.94); }
.unlock-button { top: 66px; bottom: auto; padding: 12px 18px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,240,223,.91); color: #35251d; box-shadow: 0 12px 35px rgba(13,5,40,.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.unlock-button:hover { background: #fff4e7; transform: translateY(-2px); }
.experience-meta { margin: 20px 4px 0; padding: 17px 5px 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 24px; border-top: 1px solid rgba(61,44,34,.13); color: #9a8375; text-align: left; }
.experience-meta p { margin: 0; font-size: 11px; line-height: 1.45; }
.experience-live { display: inline-flex; align-items: center; gap: 8px; color: #5e4c42; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.experience-live i { width: 7px; height: 7px; border-radius: 50%; background: #52b875; box-shadow: 0 0 0 4px rgba(82,184,117,.12); animation: live-dot 2s ease-in-out infinite; }
.experience-count { color: #a36b15; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.screen-hint { right: 26px; bottom: 25px; }
.desktop-menu { position: absolute; z-index: 4; inset: 0 0 auto; height: 38px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.75); font-size: 9px; text-shadow: 0 1px 8px rgba(0,0,0,.35); transition: opacity .5s; }
.desktop-menu > div { display: flex; align-items: center; gap: 13px; }
.desktop-menu strong { color: #fff; }
.desktop-files { position: absolute; z-index: 4; top: 70px; right: 25px; display: grid; gap: 18px; color: rgba(255,255,255,.84); font-size: 9px; text-shadow: 0 2px 9px rgba(0,0,0,.5); }
.desktop-files span { display: grid; justify-items: center; gap: 5px; }
.desktop-files span { animation: desktop-item-arrive .65s var(--ease) both; }.desktop-files span:nth-child(1) { animation-delay: .62s; }.desktop-files span:nth-child(2) { animation-delay: .7s; }.desktop-files span:nth-child(3) { animation-delay: .78s; }
.desktop-files i { width: 44px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.12); color: #ffd17a; font-size: 22px; font-style: normal; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.desktop-menu,.desktop-files { transition: opacity .6s,filter .65s; }
.mac-screen.is-unlocked .desktop-menu,.mac-screen.is-unlocked .desktop-files { opacity: .3; filter: blur(.3px); }
.screen-welcome { position: absolute; z-index: 4; left: 7%; bottom: 8%; max-width: 480px; color: #fff; text-align: left; transition: opacity .5s,filter .65s,transform .75s var(--ease); }
.screen-welcome > span { color: #f0b557; font-size: 9px; font-weight: 850; letter-spacing: .18em; }
.screen-welcome > strong { margin-top: 14px; display: block; font-size: clamp(36px,3vw,52px); line-height: .96; letter-spacing: -.055em; text-shadow: 0 7px 28px rgba(0,0,0,.35); }
.screen-welcome > small { margin-top: 15px; display: block; color: rgba(255,255,255,.56); font-size: 11px; }
.mac-screen.is-unlocked .screen-welcome { opacity: 0; filter: blur(10px); transform: translateY(18px) scale(.97); }
.demo-tool-rail { position: absolute; z-index: 9; bottom: 24px; left: 50%; width: min(650px,calc(100% - 44px)); padding: 8px; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: rgba(7,15,22,.58); opacity: 0; pointer-events: none; transform: translate(-50%,18px) scale(.96); transition: opacity .35s .72s,transform .55s .68s var(--ease); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mac-screen.is-unlocked .demo-tool-rail { opacity: 1; pointer-events: auto; transform: translate(-50%,0) scale(1); }
.demo-tool-rail button { min-width: 0; height: 54px; padding: 5px 3px; display: grid; place-items: center; gap: 1px; border-radius: 12px; background: transparent; color: rgba(255,255,255,.48); cursor: pointer; transition: color .2s,background .2s,transform .25s var(--ease); }
.demo-tool-rail button:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateY(-2px); }
.demo-tool-rail button.active { background: #efb654; color: #21170f; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.demo-tool-rail button span { font-size: 15px; line-height: 1; }.demo-tool-rail button small { overflow: hidden; max-width: 100%; font-size: 7px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
.mac-screen.is-unlocked .screen-hint { bottom: 93px; }

/* Notchy island */
.island { --surface: #020203; position: absolute; z-index: 20; top: 0; left: 50%; width: 250px; height: 45px; overflow: hidden; border-radius: 0; background: var(--surface); color: #fff; translate: -50% 0; clip-path: path("M0 0 Q6 0 6 6 L6 35 Q6 45 16 45 L234 45 Q244 45 244 35 L244 6 Q244 0 250 0 Z"); box-shadow: 0 17px 44px rgba(0,0,0,.36); transform-origin: top center; transition: width .55s var(--ease),height .55s var(--ease),clip-path .55s var(--ease),box-shadow .5s,transform .12s ease-out; }
.mac-screen.is-pressed .island { transform: scaleX(.975) scaleY(.9); }
.mac-screen.is-pressed .unlock-button { opacity: .55; transform: translateY(2px) scale(.98); pointer-events: none; }
.mac-screen:not(.is-unlocked) .island { width: 250px; height: 45px; border-radius: 0; clip-path: path("M0 0 Q6 0 6 6 L6 35 Q6 45 16 45 L234 45 Q244 45 244 35 L244 6 Q244 0 250 0 Z"); }
.mac-screen.is-unlocked .island { top: 0; width: 348px; height: 45px; border-radius: 0; clip-path: path("M0 0 Q8 0 8 8 L8 31 Q8 45 22 45 L326 45 Q340 45 340 31 L340 8 Q340 0 348 0 Z"); }
.island.open,.mac-screen.is-unlocked .island.open { top: 0; width: 420px; height: 180px; border-radius: 0; clip-path: path("M0 0 Q10 0 10 10 L10 152 Q10 180 38 180 L382 180 Q410 180 410 152 L410 10 Q410 0 420 0 Z"); background: linear-gradient(180deg,#000 0,#050508 52%,#111218 100%); box-shadow: 0 28px 70px rgba(0,0,0,.52); }
.top-strip { position: relative; width: 100%; height: 45px; padding: 0; display: block; background: transparent; color: #fff; cursor: pointer; }
.lock-glyph { position: absolute; top: 17px; left: 17px; width: 10px; height: 8px; border: 1px solid rgba(255,255,255,.78); border-radius: 2px; transition: opacity .25s, transform .45s var(--ease); }
.lock-glyph::before { position: absolute; top: -6px; left: 2px; width: 4px; height: 5px; border: 1px solid rgba(255,255,255,.78); border-bottom: 0; border-radius: 5px 5px 0 0; content: ""; }
.mac-screen.is-unlocked .lock-glyph { opacity: 0; transform: scale(.6); }
.camera { position: absolute; top: 0; left: 50%; width: 250px; height: 45px; translate: -50% 0; }
.camera::after { position: absolute; top: 14px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #0c0d10; box-shadow: inset 0 0 0 1px #313239; content: ""; translate: -50% 0; }
.mac-screen:not(.is-unlocked) .camera::after { display: none; }
.compact-cover { position: absolute; top: 8px; left: 20px; width: 28px!important; height: 28px!important; border-radius: 8px!important; opacity: 0; box-shadow: none!important; transition: opacity .25s .55s!important; }
.compact-eq { position: absolute; top: 11px; right: 20px; width: 19px; height: 23px; display: flex; align-items: center; justify-content: center; gap: 1.5px; opacity: 0; transition: opacity .25s .6s; }
.mac-screen.is-unlocked .island:not(.open) .compact-cover { opacity: .48; filter: blur(3px); }
.mac-screen.is-unlocked .island:not(.open) .compact-eq { opacity: .4; filter: blur(1.5px); }
.compact-eq i, .expanded-eq i { width: 3px; height: calc(4px + var(--eq-level,.12) * 16px); min-height: 4px; border-radius: 3px; background: var(--honey); transition: height .07s linear; }
.compact-eq i { width: 2.2px; }
.expanded-eq { position: absolute; top: 12px; right: 24px; height: 20px; display: flex; align-items: center; gap: 2px; opacity: 0; }
.island.open .expanded-eq { opacity: .9; }
.island-body { position: relative; height: 135px; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .16s, transform .2s var(--ease), visibility 0s .2s; }
.island.open .island-body { opacity: 1; visibility: visible; transform: none; transition-delay: .12s,.12s,0s; }

/* Island screens */
.scene { position: absolute; inset: 0; height: 135px; padding: 8px 20px 16px; display: flex; align-items: center; gap: 13px; opacity: 0; visibility: hidden; pointer-events: none; filter: blur(6px); transform: translateY(-9px) scale(.985); transition: opacity .3s, filter .35s var(--ease), transform .4s var(--ease), visibility 0s .4s; text-align: left; }
.scene.active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; filter: none; transform: none; transition-delay: .05s,.05s,.05s,0s; }
.cover { flex: 0 0 auto; width: 47px; height: 47px; border-radius: 11px; background: radial-gradient(circle at 68% 25%,#fff2bc 0 7%,transparent 8%),linear-gradient(135deg,#e8a53f,#b94f4f 58%,#493058); box-shadow: 0 7px 17px rgba(0,0,0,.58); }
.cover[data-theme="sunset"] { background: radial-gradient(circle at 74% 25%,#ffe5aa 0 9%,transparent 10%),linear-gradient(145deg,#67468b,#de7955 54%,#f1c96b); }
.cover[data-theme="amalgam"] { background: radial-gradient(circle at 30% 25%,#d2fff8 0 8%,transparent 9%),linear-gradient(140deg,#1d8d91,#172b4a 56%,#b9436d); }
.scene-copy { min-width: 0; flex: 1; }
.scene b { display: block; overflow: hidden; font-size: 14px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.scene small { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: 10px; }
.music-scene { padding-top: 7px; align-items: flex-start; }
.music-scene > .cover { position: absolute; top: 8px; left: 20px; width: 54px; height: 54px; }
.music-scene .scene-copy { min-height: 54px; padding: 10px 0 0 65px; }
.scrub-row { position: absolute; top: 65px; right: 20px; left: 20px; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 6px; color: rgba(255,255,255,.42); font-size: 8px; font-variant-numeric: tabular-nums; }
.track-range { width: 100%; height: 16px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.track-range::-webkit-slider-runnable-track { height: 2px; border-radius: 9px; background: linear-gradient(to right,#efefed var(--track-progress,0%),#303137 var(--track-progress,0%)); }
.track-range::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3px; appearance: none; border-radius: 50%; background: #fff; }
.transport { position: absolute; right: 24px; bottom: 5px; left: 24px; display: flex; align-items: center; justify-content: space-between; }
.transport button, .mini-button { width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.78); cursor: pointer; }
.transport button:hover { background: rgba(255,255,255,.08); color: #fff; }
.transport .play { width: 42px; height: 42px; background: #f7f5f2; color: #080809; }
.transport .quiet { color: rgba(255,255,255,.42); }
.focus-ring { position: relative; width: 77px; height: 77px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) var(--focus-progress,100%),#24252b 0); font-size: 14px; font-weight: 700; }
.focus-ring::before { position: absolute; width: 65px; height: 65px; border-radius: 50%; background: #08090b; content: ""; }
.focus-ring span { position: relative; z-index: 1; }
.timer-copy { padding-left: 7px; }
.focus-actions { margin-top: 11px; display: flex; align-items: center; gap: 6px; }
.mini-button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.1); background: #17181d; }
.mini-button.primary { border-color: transparent; background: #eef3ed; color: #18331d; }
.session-dots { margin-left: 5px; display: flex; gap: 4px; }
.session-dots i { width: 4px; height: 4px; border-radius: 50%; background: #36383e; }
.session-dots i.done { background: var(--green); }
.calendar-date { width: 64px; height: 75px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; background: #17181c; }
.calendar-date span { color: var(--blue); font-size: 8px; font-weight: 800; }
.calendar-date b { margin-top: 3px; font-size: 24px; }
.events { flex: 1; display: grid; gap: 6px; }
.event { padding: 9px 11px; border-left: 2px solid var(--blue); border-radius: 8px; background: #17181c; color: #fff; text-align: left; cursor: pointer; }
.event:nth-child(2) { border-color: var(--green); }
.event b { font-size: 10px; }.event small { font-size: 8px; }
.files { width: 100%; display: flex; gap: 7px; }
.file,.airdrop { height: 74px; flex: 1; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 13px; background: #17181c; color: #85878d; cursor: pointer; font-size: 8px; }
.file strong,.airdrop strong { display: block; margin-bottom: 6px; color: #d0d1d3; font-size: 12px; }
.file.selected,.airdrop.selected { border-color: rgba(229,169,60,.55); background: #201c15; }
.airdrop strong { color: var(--blue); font-size: 18px; }
.pods-view { width: 100%; display: flex; align-items: center; gap: 19px; }
.pods-case { position: relative; width: 76px; height: 58px; margin-left: 3px; border: 2px solid #ececea; border-radius: 23px 23px 27px 27px; box-shadow: inset 0 -12px 24px rgba(0,0,0,.16); }
.pods-case::before,.pods-case::after { position: absolute; top: 12px; width: 16px; height: 26px; border-radius: 10px; background: #f2f2ef; content: ""; }
.pods-case::before { left: 17px; rotate: -10deg; }.pods-case::after { right: 17px; rotate: 10deg; }
.pods-copy { min-width: 0; flex: 1; }.battery-row { margin-top: 12px; display: flex; gap: 6px; }
.battery-pill { padding: 5px 7px; border-radius: 7px; background: #191a1f; color: #85878c; font-size: 8px; }.battery-pill strong { display: inline; color: var(--green); font-size: 8px; }
.scene-heading { width: 111px; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.scene-symbol { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: rgba(229,169,60,.14); color: #efbc5f; }
.task-symbol { background: rgba(121,217,150,.14); color: var(--green); }.notchmark-symbol { background: rgba(174,155,214,.16); color: #c0abe9; }
.scene-heading b { font-size: 11px; }.scene-heading small { max-width: 70px; white-space: normal; line-height: 1.25; }
.clipboard-items,.notchmark-items { min-width: 0; flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.clipboard-items button,.notchmark-items button { min-width: 0; height: 70px; padding: 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 11px; background: #17181c; color: #fff; cursor: pointer; text-align: left; }
.clipboard-items span { display: block; overflow: hidden; font-size: 9px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }.clipboard-items small { margin-top: 13px; font-size: 8px; }
.task-items { min-width: 0; flex: 1; display: grid; gap: 5px; }.task-items button { height: 24px; padding: 0 8px; display: flex; align-items: center; gap: 7px; overflow: hidden; border-radius: 7px; background: #17181c; color: #d7d8da; cursor: pointer; font-size: 9px; white-space: nowrap; text-align: left; }
.task-items s { color: #777a80; }.task-check { width: 12px; height: 12px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #55575d; border-radius: 50%; color: #15351b; font-size: 7px; }.task-check.done { border-color: var(--green); background: var(--green); }
.notchmark-items button { height: 75px; text-align: center; }.notchmark-items button > span { display: block; color: #bea7e5; font-size: 15px; }.notchmark-items button b { margin-top: 5px; font-size: 8px; }.notchmark-items button small { margin-top: 2px; font-size: 7px; }

/* Feature grid */
.feature-section { max-width: 1280px; margin: 0 auto; padding: 78px 24px 125px; text-align: center; }
.feature-section > .eyebrow { display: inline-block; }
.feature-section h2 { max-width: 760px; margin: 19px auto 0; font-size: clamp(58px,5.8vw,78px); line-height: .92; letter-spacing: -.062em; }
.feature-grid { margin-top: 68px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.feature { --rotate-x: 0deg; --rotate-y: 0deg; --lift: 0px; --card-glow: rgba(237,178,77,.28); position: relative; min-height: 170px; padding: 23px; overflow: hidden; display: grid; grid-template-columns: 28px 52px minmax(0,1fr) 24px; align-items: start; gap: 13px; border: 1px solid rgba(62,44,34,.105); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.43),rgba(255,255,255,.18)); color: var(--ink); cursor: pointer; isolation: isolate; text-align: left; transform: perspective(760px) translateY(var(--lift)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); transition: transform .18s ease-out,background .25s,color .25s,border-color .25s,box-shadow .25s; }
.feature:nth-child(1) { grid-column: span 6; min-height: 198px; }
.feature:nth-child(2),.feature:nth-child(3) { grid-column: span 3; min-height: 198px; }
.feature:nth-child(4),.feature:nth-child(5),.feature:nth-child(6) { grid-column: span 4; }
.feature:nth-child(7),.feature:nth-child(8) { grid-column: span 6; }
.feature:nth-child(2) { --card-glow: rgba(114,158,220,.25); background: linear-gradient(145deg,rgba(236,241,246,.72),rgba(226,235,242,.33)); }
.feature:nth-child(3) { --card-glow: rgba(98,181,132,.22); background: linear-gradient(145deg,rgba(237,245,237,.72),rgba(226,239,229,.32)); }
.feature:nth-child(5) { --card-glow: rgba(119,157,210,.22); }
.feature:nth-child(6) { --card-glow: rgba(173,125,206,.22); }
.feature::after { position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),var(--card-glow),transparent 46%); opacity: 0; content: ""; transition: opacity .25s; }
.feature::before { position: absolute; z-index: 0; top: var(--pointer-y,50%); left: var(--pointer-x,50%); width: 20px; height: 20px; border-radius: 50%; background: rgba(239,183,84,.45); opacity: 0; content: ""; translate: -50% -50%; pointer-events: none; }
.feature > * { position: relative; z-index: 1; }
.feature:hover { --lift: -6px; border-color: rgba(62,44,34,.18); box-shadow: 0 20px 38px rgba(67,45,34,.1); }
.feature:hover::after { opacity: 1; }
.feature.clicked::before { animation: feature-click-bloom .52s var(--ease); }
.feature:hover .feature-icon { transform: rotate(-6deg) scale(1.08); }
.feature:hover .feature-arrow { transform: translate(3px,-3px); }
.feature.active { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 18px 35px rgba(46,31,24,.15); }
.feature-index { padding-top: 6px; color: #a68e7e; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.feature.active .feature-index { color: rgba(255,255,255,.45); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(229,169,60,.14); color: #9e6713; box-shadow: inset 0 1px rgba(255,255,255,.38); font-size: 27px; font-weight: 650; letter-spacing: -.16em; transition: transform .35s var(--ease); }
.feature:nth-child(n+2) .feature-icon { letter-spacing: normal; }
.feature.active .feature-icon { background: rgba(229,169,60,.18); color: #f2bb58; }
.feature-copy { min-width: 0; }
.feature strong { display: block; font-size: 20px; line-height: 1.12; letter-spacing: -.03em; }
.feature small { max-width: 255px; margin-top: 10px; display: block; color: #8d796d; font-size: 11px; line-height: 1.48; }
.feature.active small { color: rgba(255,255,255,.52); }
.feature-arrow { color: #a78c7b; font-size: 14px; transition: transform .3s var(--ease); }
.feature.active .feature-arrow { color: #f0b959; }
.feature-viz { position: absolute!important; right: 54px; bottom: 30px; height: 58px; display: flex; align-items: flex-end; gap: 6px; opacity: .7; }
.feature-viz i { width: 6px; height: var(--bar-height,35%); border-radius: 6px; background: linear-gradient(180deg,#f5c66c,#c47e1d); transform-origin: bottom; animation: feature-eq 1.25s ease-in-out infinite alternate; }
.feature-viz i:nth-child(1) { --bar-height: 38%; animation-delay: -.4s; }.feature-viz i:nth-child(2) { --bar-height: 72%; animation-delay: -.9s; }.feature-viz i:nth-child(3) { --bar-height: 52%; animation-delay: -.2s; }.feature-viz i:nth-child(4) { --bar-height: 88%; animation-delay: -.65s; }.feature-viz i:nth-child(5) { --bar-height: 61%; animation-delay: -1s; }.feature-viz i:nth-child(6) { --bar-height: 78%; animation-delay: -.3s; }.feature-viz i:nth-child(7) { --bar-height: 43%; animation-delay: -.8s; }
.feature-art { position: absolute!important; right: 25px; bottom: 20px; pointer-events: none; transition: transform .45s var(--ease),opacity .3s; }
.feature:hover .feature-art { transform: translateY(-4px) rotate(-2deg) scale(1.035); }
.focus-art { width: 58px; height: 58px; display: grid; place-content: center; border-radius: 50%; background: conic-gradient(#80a9da 0 79%,rgba(87,115,148,.12) 79%); color: #526f92; box-shadow: inset 0 0 0 8px rgba(255,255,255,.78); text-align: center; }
.focus-art i { font-size: 13px; font-style: normal; font-weight: 850; line-height: 1; }.focus-art small { margin: 3px 0 0; color: currentColor; font-size: 6px; font-weight: 850; letter-spacing: .14em; }
.calendar-art { width: 64px; height: 58px; padding: 7px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 6px; border-radius: 13px; background: rgba(255,255,255,.62); box-shadow: 0 7px 20px rgba(61,96,70,.08); }
.calendar-art > i { display: grid; place-items: center; color: #60926e; font-size: 19px; font-style: normal; font-weight: 820; }.calendar-art > span { display: grid; gap: 5px; }.calendar-art b { width: 100%; height: 3px; border-radius: 3px; background: #a9c5ad; }.calendar-art b:nth-child(2) { width: 70%; }.calendar-art b:nth-child(3) { width: 85%; }
.files-art { right: 28px; bottom: 25px; width: 98px; height: 46px; }.files-art i { position: absolute; bottom: 0; width: 42px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(136,88,20,.16); border-radius: 10px; background: #f9e8ca; color: #a56b17; box-shadow: 0 9px 18px rgba(97,65,24,.09); font-size: 7px; font-style: normal; font-weight: 900; }.files-art i:nth-child(1) { left: 0; rotate: -8deg; }.files-art i:nth-child(2) { left: 28px; bottom: 3px; z-index: 2; background: #e7edf5; color: #56779d; }.files-art i:nth-child(3) { right: 0; rotate: 8deg; background: #e5efe4; color: #578264; }
.pods-art { width: 82px; height: 48px; display: flex; align-items: start; justify-content: center; gap: 10px; }.pods-art > i { width: 14px; height: 29px; border: 2px solid #6f8fb5; border-radius: 9px 9px 7px 7px; box-shadow: 0 6px 14px rgba(71,104,143,.12); }.pods-art > i:nth-child(2) { translate: 0 7px; }.pods-art > span { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(84,114,149,.13); }.pods-art b { display: block; width: 84%; height: 100%; border-radius: inherit; background: #7aa38a; }
.clipboard-art { width: 105px; height: 56px; }.clipboard-art i { position: absolute; right: 0; width: max-content; padding: 6px 8px; border: 1px solid rgba(112,79,128,.1); border-radius: 8px; background: #f4e8f5; color: #815a8a; box-shadow: 0 6px 16px rgba(86,54,94,.08); font-size: 7px; font-style: normal; font-weight: 780; }.clipboard-art i:nth-child(1) { top: 0; right: 29px; rotate: -4deg; }.clipboard-art i:nth-child(2) { top: 16px; right: 0; z-index: 2; background: #fff7e8; color: #9b6d22; }.clipboard-art i:nth-child(3) { top: 34px; right: 18px; rotate: 3deg; background: #eaf2ed; color: #588067; }
.tasks-art { width: 112px; display: grid; grid-template-columns: 13px 1fr; align-items: center; gap: 7px 8px; }.tasks-art i { width: 12px; height: 12px; border: 1px solid #a69386; border-radius: 50%; }.tasks-art i.done { border-color: #7bac87; background: #7bac87; box-shadow: inset 0 0 0 3px #edf3eb; }.tasks-art span { height: 4px; border-radius: 4px; background: rgba(91,69,58,.13); }.tasks-art span:nth-of-type(2) { width: 70%; }.tasks-art span:nth-of-type(3) { width: 84%; }
.marks-art { display: flex; gap: 8px; }.marks-art i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #ede5f3; color: #7d6295; box-shadow: 0 7px 17px rgba(78,57,93,.08); font-size: 12px; font-style: normal; }.marks-art i:nth-child(2) { translate: 0 -7px; background: #e3edf1; color: #52788a; }.marks-art i:nth-child(3) { background: #f4e7d4; color: #a06a20; }
.feature-cta { width: max-content; margin: 54px auto 0; }
@keyframes feature-click-bloom { 0% { opacity: .7; transform: scale(.2); } 70% { opacity: .16; } 100% { opacity: 0; transform: scale(24); } }
@keyframes notch-awake-halo { 0% { opacity: 0; transform: scaleX(.45) scaleY(.7); } 24% { opacity: .75; } 68% { opacity: .2; transform: scaleX(1.05) scaleY(1); } 100% { opacity: 0; transform: scaleX(1.18) scaleY(1.08); } }
@keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cinema-arrive { from { opacity: 0; transform: translateY(30px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes desktop-item-arrive { from { opacity: 0; transform: translateY(-7px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes live-dot { 0%,100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes feature-eq { from { transform: scaleY(.48); } to { transform: scaleY(1); } }
.trust-strip { max-width: var(--max); margin: 0 auto 110px; padding: 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border-radius: 28px; background: var(--ink); color: #fff; box-shadow: 0 26px 55px rgba(46,31,24,.15); }
.trust-strip div { padding: 27px 30px; display: flex; flex-direction: column; gap: 7px; }.trust-strip div+div { border-left: 1px solid rgba(255,255,255,.1); }
.trust-strip strong { font-size: 18px; }.trust-strip span { color: rgba(255,255,255,.5); font-size: 12px; }

/* FAQ + footer */
.faq-section { max-width: var(--max); margin: 0 auto; padding: 105px 24px 120px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; border-top: 1px solid var(--line); }
.faq-section h2 { margin: 16px 0 0; font-size: clamp(50px,5vw,70px); line-height: .94; letter-spacing: -.06em; }
.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 16px; font-weight: 750; list-style: none; }.faq-list summary::after { content: "+"; font-size: 23px; }.faq-list details[open] summary::after { content: "−"; }.faq-list p { margin: -5px 45px 24px 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
footer { max-width: var(--max); margin: 0 auto; padding: 34px 24px 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
footer .brand img { width: 34px; height: 34px; }.site-header footer strong,footer .brand strong { font-size: 18px; }
footer > div { display: flex; gap: 24px; color: var(--muted); font-size: 13px; font-weight: 650; }

/* Privacy */
.legal-main { width: min(100%,1180px); margin: 0 auto; padding: 76px 24px 120px; }
.legal-hero { max-width: 900px; padding-bottom: 84px; }
.legal-hero h1 { margin: 23px 0 0; font-size: clamp(68px,7.5vw,104px); line-height: .88; letter-spacing: -.075em; }
.legal-hero h1 mark { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; }
.legal-hero h1 mark::after { position: absolute; z-index: -1; right: -.02em; bottom: .02em; left: -.02em; height: .22em; border-radius: 80% 12% 70% 18%; background: rgba(229,169,60,.62); content: ""; rotate: -1.5deg; }
.legal-hero > p:not(.eyebrow) { max-width: 690px; margin: 34px 0 0; color: #756258; font-size: 19px; line-height: 1.65; }
.legal-updated { margin-top: 30px; display: flex; align-items: center; gap: 10px; color: #9c887b; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.legal-updated span { width: 7px; height: 7px; border-radius: 50%; background: #58b778; box-shadow: 0 0 0 5px rgba(88,183,120,.11); }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: start; gap: clamp(60px,8vw,110px); }
.legal-summary { position: sticky; top: 28px; padding: 25px; display: grid; gap: 0; border-radius: 23px; background: var(--ink); color: #fff; box-shadow: 0 24px 50px rgba(50,32,24,.14); }
.legal-summary strong { padding-bottom: 18px; color: #f1bb5c; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.legal-summary span { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 12px; font-weight: 650; }
.legal-content { min-width: 0; }
.legal-content section { position: relative; padding: 0 0 62px 50px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.legal-content section + section { padding-top: 60px; }
.legal-content section:first-child { border-top-color: rgba(64,48,39,.24); }
.legal-number { position: absolute; top: 7px; left: 0; color: #a46c18; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.legal-content section + section .legal-number { top: 67px; }
.legal-content h2 { margin: 0; font-size: clamp(30px,3vw,43px); line-height: 1; letter-spacing: -.05em; }
.legal-content p { margin: 22px 0 0; color: #77645a; font-size: 15px; line-height: 1.78; }
.permission-list { margin-top: 28px; display: grid; border-top: 1px solid var(--line); }
.permission-list div { padding: 19px 0; display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 22px; border-bottom: 1px solid var(--line); }
.permission-list strong { font-size: 13px; }.permission-list span { color: #7f6d62; font-size: 13px; line-height: 1.55; }

/* Responsive */
@media (max-width: 1180px) {
  .hero-layout { max-width: 900px; min-height: 0; grid-template-columns: 1fr; gap: 58px; }
  .hero-copy { max-width: 680px; }
  .hero h1 { max-width: 650px; }
  .hero-lede { max-width: 600px; }
  .mac-screen { height: 600px; transform: none; }
}
@media (max-width: 900px) {
  .site-header { height: 92px; }.header-inner { padding-inline: 22px; }.site-header nav > a:first-child { display: none; }
  .hero { padding: 30px 20px 42px; }.cinema { margin: 0; }.mac-screen { height: 550px; border-radius: 30px; }
  .feature-grid { margin-top: 54px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.feature,.feature:nth-child(n) { grid-column: span 1; min-height: 170px; }.trust-strip { margin-inline: 20px; }
  .legal-main { padding-top: 54px; }.legal-layout { grid-template-columns: 1fr; gap: 50px; }.legal-summary { position: static; grid-template-columns: repeat(2,1fr); column-gap: 20px; }.legal-summary strong { grid-column: 1/-1; }.legal-summary span:nth-of-type(2) { border-top: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 600px) {
  .site-header { height: 76px; }.header-inner { padding-inline: 14px; }.brand { gap: 9px; }.brand img { width: 34px; height: 34px; }.brand strong { font-size: 19px; }.brand > span { display: none; }
  .site-header nav > a:not(.header-cta) { display: none; }.header-cta { min-height: 44px; padding-inline: 13px; border-radius: 13px; font-size: 11px; }
  .hero { padding: 34px 15px 34px; }.hero-layout { gap: 46px; }.hero h1 { margin-top: 20px; font-size: clamp(53px,15vw,64px); }.hero-lede { margin-top: 24px; font-size: 16px; }.hero-actions { width: 100%; margin-top: 28px; flex-direction: column; align-items: flex-start; }.hero-actions .button { width: 100%; min-height: 54px; }.text-link { margin-left: 3px; }.hero-notes { margin-top: 30px; gap: 8px 15px; }
  .mac-screen { height: 510px; border-radius: 25px; }.screen-label { top: 22px; }.screen-label-left { left: 18px; }.screen-label-right { display: none; }
  .desktop-menu { padding-inline: 12px; }.desktop-menu > div:first-child span { display: none; }.desktop-menu > div:last-child span:not(:last-child) { display: none; }.desktop-files { top: 58px; right: 14px; gap: 12px; }.desktop-files i { width: 38px; height: 35px; }.screen-welcome { left: 7%; bottom: 11%; max-width: 300px; }.screen-welcome > strong { font-size: 37px; }
  .demo-tool-rail { bottom: 15px; width: calc(100% - 28px); grid-template-columns: repeat(4,1fr); }.demo-tool-rail button { height: 43px; }.mac-screen.is-unlocked .screen-hint { right: 18px; bottom: 123px; }
  .experience-meta { margin-top: 14px; padding-top: 14px; grid-template-columns: auto 1fr; gap: 8px 14px; }.experience-meta p { grid-column: 1/-1; grid-row: 2; max-width: 31em; }.experience-count { justify-self: end; }
  .mac-screen:not(.is-unlocked) .island { width: 250px; }.mac-screen.is-unlocked .island { width: min(348px,calc(100% - 20px)); }.mac-screen.is-unlocked .island.open { width: min(420px,calc(100% - 10px)); clip-path: none; border-radius: 0 0 26px 26px; }
  .scene { padding-inline: 14px; }.music-scene > .cover { left: 14px; }.music-scene .scene-copy { padding-left: 59px; }.scrub-row { right: 14px; left: 14px; }.transport { right: 12px; left: 12px; }
  .scene-heading { width: 88px; }.scene-heading small { max-width: 54px; }.clipboard-items,.notchmark-items { gap: 4px; }.clipboard-items button,.notchmark-items button { padding: 6px; }.files { gap: 4px; }.file,.airdrop { min-width: 0; }
  .feature-section { padding: 72px 18px 98px; }.feature-grid { margin-top: 44px; grid-template-columns: 1fr; gap: 11px; }.feature,.feature:nth-child(n) { min-height: 152px; padding: 18px; grid-column: span 1; grid-template-columns: 25px 46px minmax(0,1fr) 18px; }.feature-icon { width: 42px; height: 42px; font-size: 23px; }.feature strong { font-size: 17px; }.feature-art,.feature-viz { right: 18px; bottom: 15px; opacity: .68; transform: scale(.78); transform-origin: right bottom; }.feature:hover .feature-art { transform: translateY(-2px) rotate(-1deg) scale(.82); }.feature-cta { margin-top: 40px; width: auto; }
  .trust-strip { margin: 0 15px 80px; padding: 12px; grid-template-columns: 1fr; }.trust-strip div { padding: 18px; }.trust-strip div+div { border-top: 1px solid var(--line); border-left: 0; }
  .faq-section { padding: 80px 18px 90px; grid-template-columns: 1fr; gap: 38px; }.faq-section h2 { font-size: 54px; }
  .legal-main { padding: 42px 18px 90px; }.legal-hero { padding-bottom: 62px; }.legal-hero h1 { font-size: clamp(54px,15vw,68px); }.legal-hero > p:not(.eyebrow) { font-size: 16px; }.legal-summary { grid-template-columns: 1fr; }.legal-summary span:nth-of-type(n) { border-top: 1px solid rgba(255,255,255,.1); }.legal-content section,.legal-content section + section { padding-right: 0; padding-left: 35px; }.permission-list div { grid-template-columns: 1fr; gap: 6px; }
  footer { margin-inline: 0; padding-inline: 18px; flex-direction: column; gap: 25px; }footer > div { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
}

/* Cinematic homepage — July 2026 */
.home-page {
  --night: #080807;
  --night-soft: #11100e;
  --night-card: #151310;
  --ivory: #f8eddf;
  --ivory-muted: rgba(248,237,223,.58);
  --gold: #eeb655;
  --gold-bright: #ffd17b;
  --hairline: rgba(255,245,231,.11);
  background: var(--night);
  color: var(--ivory);
}
.home-page::before {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: calc(var(--page-progress,0) * 100%);
  height: 2px;
  background: linear-gradient(90deg,#9a5b16,var(--gold-bright));
  box-shadow: 0 0 18px rgba(238,182,85,.55);
  content: "";
  pointer-events: none;
}
.home-page .site-header {
  position: absolute;
  z-index: 100;
  inset: 0 0 auto;
  height: 104px;
  color: var(--ivory);
  background: transparent;
}
.home-page .header-inner { max-width: 1500px; padding-inline: clamp(22px,4vw,62px); }
.home-page .brand img { box-shadow: 0 0 0 1px rgba(255,255,255,.11),0 12px 35px rgba(0,0,0,.4); }
.home-page .brand > span { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.5); }
.home-page .site-header nav { gap: 34px; color: rgba(255,255,255,.66); font-size: 13px; }
.home-page .site-header nav > a:not(.header-cta) { transition: color .2s; }
.home-page .site-header nav > a:not(.header-cta):hover { color: #fff; }
.home-page .header-cta {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.home-page .header-cta:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.13); }

.home-page .hero {
  position: relative;
  overflow: hidden;
  min-height: 1500px;
  padding: 176px clamp(18px,3vw,44px) 180px;
  background:
    radial-gradient(circle at 50% 10%,rgba(121,67,25,.24),transparent 28%),
    radial-gradient(ellipse at 50% 45%,rgba(80,45,19,.14),transparent 46%),
    linear-gradient(180deg,#070706 0%,#0a0908 72%,#0d0b09 100%);
}
.home-page .hero::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 240px;
  background: linear-gradient(transparent,var(--night));
  content: "";
  pointer-events: none;
}
.hero-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero-atmosphere i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18; }
.hero-atmosphere i:nth-child(1) { top: 80px; left: 12%; width: 420px; height: 420px; background: #985526; animation: atmosphere-float 13s ease-in-out infinite alternate; }
.hero-atmosphere i:nth-child(2) { top: 520px; right: 3%; width: 520px; height: 520px; background: #623729; animation: atmosphere-float 17s -6s ease-in-out infinite alternate-reverse; }
.hero-atmosphere i:nth-child(3) { top: 1050px; left: 28%; width: 420px; height: 260px; background: #d58a2c; opacity: .08; animation: atmosphere-float 15s -3s ease-in-out infinite alternate; }
.home-page .hero-layout {
  position: relative;
  z-index: 2;
  width: min(100%,1500px);
  min-height: 0;
  margin: 0 auto;
  display: block;
}
.home-page .hero-copy { max-width: 1120px; margin: 0 auto; text-align: center; animation: cinematic-title 1.1s .08s var(--ease) both; }
.home-page .hero-copy .eyebrow { justify-content: center; color: var(--gold); font-size: 10px; letter-spacing: .24em; }
.home-page .hero-copy .eyebrow::before { display: none; }
.home-page .hero-copy .eyebrow::after { width: 48px; height: 1px; margin-left: 4px; background: linear-gradient(90deg,var(--gold),transparent); content: ""; }
.home-page .hero h1 {
  max-width: none;
  margin: 34px auto 0;
  color: #f8f1e9;
  font-size: clamp(82px,9.2vw,150px);
  font-weight: 680;
  line-height: .81;
  letter-spacing: -.078em;
  text-wrap: balance;
}
.home-page .hero h1 mark {
  margin-left: -.04em;
  background: linear-gradient(92deg,#f7c56a,#b97528 52%,#f0c277);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-page .hero h1 mark::after { display: none; }
.home-page .hero-lede { max-width: 620px; margin: 38px auto 0; color: var(--ivory-muted); font-size: 18px; line-height: 1.65; }
.home-page .hero-actions { margin-top: 38px; justify-content: center; }
.home-page .button-dark {
  border: 1px solid rgba(255,255,255,.1);
  background: #f3e7d8;
  color: #19130e;
  box-shadow: 0 20px 50px rgba(0,0,0,.34),inset 0 1px #fff;
}
.home-page .button-dark:hover { background: #fff7ed; box-shadow: 0 28px 65px rgba(0,0,0,.45),0 0 45px rgba(235,175,72,.08); }
.home-page .hero-actions .button span { color: #9e6818; }
.home-page .text-link { border-color: rgba(255,255,255,.17); color: rgba(255,255,255,.72); }
.home-page .text-link:hover { color: #fff; }
.home-page .text-link span { color: var(--gold); }
.home-page .hero-notes { justify-content: center; margin-top: 52px; color: rgba(255,255,255,.33); }
.home-page .hero-notes span::before { width: 3px; height: 3px; background: var(--gold); }

.home-page .cinema {
  position: relative;
  width: min(100%,1420px);
  margin: 126px auto 0;
  animation: cinematic-stage 1.25s .3s var(--ease) both;
}
.home-page .cinema::before {
  position: absolute;
  z-index: -1;
  top: -140px;
  left: 50%;
  width: 74%;
  height: 360px;
  border-radius: 50%;
  background: rgba(225,159,61,.18);
  filter: blur(110px);
  content: "";
  translate: -50% 0;
  pointer-events: none;
}
.home-page .mac-screen {
  width: 100%;
  height: auto;
  min-height: 620px;
  aspect-ratio: 16/8.7;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 34px;
  background: #07111a;
  box-shadow: 0 80px 160px rgba(0,0,0,.62),0 0 0 10px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.15);
  transform: perspective(1700px) rotateX(.7deg) scale(.985);
  transition: transform 1s var(--ease),box-shadow 1s var(--ease);
}
.home-page .mac-screen:hover { box-shadow: 0 90px 190px rgba(0,0,0,.68),0 0 0 10px rgba(255,255,255,.035),inset 0 1px rgba(255,255,255,.18); transform: perspective(1700px) rotateX(0) scale(1); }
.home-page .screen-wallpaper { filter: saturate(.78) brightness(.67); transform: scale(1.04); }
.home-page .mac-screen.is-unlocked .screen-wallpaper { filter: saturate(.9) brightness(.72); }
.home-page .screen-welcome { left: 6.7%; bottom: 9%; max-width: 620px; }
.home-page .screen-welcome > strong { font-size: clamp(44px,4.3vw,68px); }
.home-page .screen-welcome > small { font-size: 12px; }
.home-page .unlock-button { top: 72px; border-color: rgba(255,255,255,.24); background: rgba(247,235,219,.94); box-shadow: 0 18px 48px rgba(0,0,0,.4),0 0 50px rgba(238,182,85,.1); }
.home-page .experience-meta { margin-top: 30px; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.37); }
.home-page .experience-meta p { color: rgba(255,255,255,.45); text-align: center; }
.home-page .experience-live { color: rgba(255,255,255,.7); }
.home-page .experience-count { color: var(--gold); }

.cinematic-interlude {
  position: relative;
  min-height: 96vh;
  padding: 170px 24px;
  display: grid;
  place-content: center;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%,rgba(170,95,28,.15),transparent 24%),
    var(--night);
}
.interlude-kicker { margin: 0 0 36px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; }
.interlude-line { position: relative; z-index: 2; margin: 0; font-size: clamp(62px,8.4vw,136px); font-weight: 650; line-height: .9; letter-spacing: -.07em; }
.interlude-line span { display: block; }
.interlude-line span:last-child { color: rgba(248,237,223,.25); }
.interlude-orbit { position: absolute; top: 50%; left: 50%; width: min(78vw,1080px); aspect-ratio: 1; border: 1px solid rgba(238,182,85,.1); border-radius: 50%; translate: -50% -50%; }
.interlude-orbit::before,.interlude-orbit::after { position: absolute; inset: 14%; border: 1px solid rgba(255,255,255,.045); border-radius: 50%; content: ""; }
.interlude-orbit::after { inset: 32%; }
.interlude-orbit i,.interlude-orbit b { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 25px rgba(255,198,102,.9); }
.interlude-orbit i:first-child { left: -4px; }.interlude-orbit b { right: -4px; }.interlude-orbit i:last-child { top: -4px; left: 50%; }
.interlude-orbit { animation: slow-orbit 34s linear infinite; }

.home-page .feature-section {
  max-width: none;
  padding: 170px max(24px,calc((100vw - 1380px)/2)) 190px;
  background: linear-gradient(180deg,#0d0b09 0%,#12100d 45%,#0a0908 100%);
}
.feature-heading { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(440px,1.25fr); align-items: end; gap: 36px 80px; }
.feature-heading .eyebrow { grid-column: 1/-1; color: var(--gold); }
.home-page .feature-section h2 { margin: 0; color: var(--ivory); font-size: clamp(62px,7vw,104px); font-weight: 650; line-height: .88; letter-spacing: -.068em; }
.home-page .feature-section h2 em { color: rgba(248,237,223,.24); font-style: normal; }
.feature-heading > p:last-child { max-width: 470px; margin: 0 0 8px; color: rgba(255,255,255,.48); font-size: 16px; line-height: 1.75; }
.home-page .feature-grid { margin-top: 92px; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.feature-dock {
  position: sticky;
  z-index: 30;
  top: calc(100vh - 86px);
  height: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.feature-dock > div {
  min-width: 420px;
  height: 62px;
  padding: 0 10px 0 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(13,11,9,.8);
  box-shadow: 0 18px 55px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  pointer-events: auto;
}
.feature-dock span { color: rgba(255,255,255,.34); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.feature-dock strong { color: var(--ivory); font-size: 12px; }
.feature-dock a { padding: 12px 13px; border-radius: 11px; background: rgba(238,182,85,.12); color: var(--gold-bright); font-size: 10px; font-weight: 750; transition: background .2s,transform .25s var(--ease); }
.feature-dock a:hover { background: rgba(238,182,85,.2); transform: translateY(-2px); }
.home-page .feature {
  min-height: 320px;
  padding: 26px;
  grid-template-columns: 32px 54px minmax(0,1fr) 22px;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 26px;
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color: var(--ivory);
  box-shadow: inset 0 1px rgba(255,255,255,.035),0 20px 60px rgba(0,0,0,.12);
  transform: perspective(900px) rotateX(var(--rotate-x,0deg)) rotateY(var(--rotate-y,0deg)) translateY(var(--lift,0px));
}
.home-page .feature:nth-child(1) { grid-column: span 7; }
.home-page .feature:nth-child(2) { grid-column: span 5; }
.home-page .feature:nth-child(3) { grid-column: span 4; }
.home-page .feature:nth-child(4) { grid-column: span 8; }
.home-page .feature:nth-child(5),.home-page .feature:nth-child(6) { grid-column: span 6; }
.home-page .feature:nth-child(7) { grid-column: span 8; }
.home-page .feature:nth-child(8) { grid-column: span 4; }
.home-page .feature::after { z-index: 0; background: radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(238,182,85,.2),transparent 42%); }
.home-page .feature:hover { border-color: rgba(238,182,85,.3); box-shadow: inset 0 1px rgba(255,255,255,.06),0 32px 80px rgba(0,0,0,.27); }
.home-page .feature.active { border-color: rgba(238,182,85,.65); background: linear-gradient(145deg,rgba(120,72,22,.32),rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(238,182,85,.07),0 32px 90px rgba(0,0,0,.3); }
.home-page .feature-index { color: rgba(255,255,255,.27); }
.home-page .feature-icon { border: 1px solid rgba(238,182,85,.16); background: rgba(238,182,85,.09); color: var(--gold-bright); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.home-page .feature strong { font-size: 24px; }
.home-page .feature small,.home-page .feature.active small { max-width: 310px; color: rgba(255,255,255,.42); font-size: 12px; }
.home-page .feature-arrow { color: rgba(255,255,255,.3); }
.home-page .feature-art,.home-page .feature-viz { right: 34px; bottom: 32px; opacity: .78; filter: saturate(.75) sepia(.15); transform: scale(1.22); transform-origin: right bottom; }
.home-page .feature:hover .feature-art { transform: translateY(-7px) rotate(-2deg) scale(1.28); }
.feature-closing { margin-top: 76px; padding-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-top: 1px solid var(--hairline); }
.feature-closing > p { max-width: 540px; margin: 0; color: rgba(255,255,255,.42); font-size: 14px; line-height: 1.6; }
.feature-closing > p span { margin-right: 16px; color: var(--gold); font-size: 28px; font-weight: 750; letter-spacing: -.04em; }
.home-page .feature-cta { margin: 0; }

.home-page .trust-strip {
  max-width: none;
  margin: 0;
  padding: 160px max(24px,calc((100vw - 1380px)/2));
  display: block;
  border-radius: 0;
  background: #dca44c;
  color: #1a130c;
  box-shadow: none;
}
.home-page .trust-strip > .eyebrow { margin-bottom: 48px; color: rgba(32,20,9,.62); }
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(31,20,9,.22); }
.home-page .trust-grid > div { min-height: 280px; padding: 34px 42px 24px 0; gap: 0; border: 0; }
.home-page .trust-grid > div + div { padding-left: 42px; border-left: 1px solid rgba(31,20,9,.22); }
.home-page .trust-grid small { color: rgba(31,20,9,.48); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.home-page .trust-grid strong { margin-top: 72px; font-size: clamp(28px,2.5vw,40px); line-height: 1; letter-spacing: -.05em; }
.home-page .trust-grid span { max-width: 330px; margin-top: 20px; color: rgba(31,20,9,.62); font-size: 13px; line-height: 1.65; }

.home-page .faq-section {
  max-width: 1380px;
  padding: 170px 24px 150px;
  border-color: var(--hairline);
  background: var(--night);
}
.home-page .faq-section .eyebrow { color: var(--gold); }
.home-page .faq-section h2 { color: var(--ivory); }
.home-page .faq-list details { border-color: var(--hairline); }
.home-page .faq-list summary { color: rgba(255,255,255,.88); }
.home-page .faq-list summary::after { color: var(--gold); }
.home-page .faq-list p { color: rgba(255,255,255,.45); }
.home-page footer { max-width: 1380px; border-color: var(--hairline); color: var(--ivory); }
.home-page footer > div { color: rgba(255,255,255,.45); }
.home-page footer a { transition: color .2s; }
.home-page footer a:hover { color: var(--gold-bright); }

.home-page .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease),transform 1.1s var(--ease); }
.home-page .reveal.in { opacity: 1; transform: none; }

@keyframes cinematic-title { from { opacity: 0; filter: blur(12px); transform: translateY(35px) scale(.985); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes cinematic-stage { from { opacity: 0; filter: blur(10px); transform: translateY(70px) scale(.97); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes atmosphere-float { from { transform: translate3d(-5%,-4%,0) scale(.9); } to { transform: translate3d(7%,8%,0) scale(1.12); } }
@keyframes slow-orbit { to { rotate: 360deg; } }

@media (max-width: 1000px) {
  .home-page .hero { min-height: 0; padding-top: 150px; padding-bottom: 130px; }
  .home-page .hero h1 { font-size: clamp(74px,12vw,118px); }
  .home-page .cinema { margin-top: 92px; }
  .home-page .mac-screen { min-height: 570px; aspect-ratio: auto; transform: none; }
  .feature-heading { grid-template-columns: 1fr; gap: 34px; }
  .feature-heading .eyebrow { grid-column: auto; }
  .feature-heading > p:last-child { max-width: 620px; }
  .home-page .feature:nth-child(n) { grid-column: span 6; }
  .trust-grid { grid-template-columns: 1fr; }
  .home-page .trust-grid > div { min-height: 0; padding: 32px 0 52px; border-top: 1px solid rgba(31,20,9,.22); }
  .home-page .trust-grid > div + div { padding-left: 0; border-left: 0; }
  .home-page .trust-grid strong { margin-top: 36px; }
}

@media (max-width: 640px) {
  .home-page .site-header { height: 82px; }
  .home-page .header-inner { padding-inline: 16px; }
  .home-page .hero { padding: 136px 14px 100px; }
  .home-page .hero h1 { font-size: clamp(60px,18vw,82px); line-height: .84; }
  .home-page .hero-lede { font-size: 16px; }
  .home-page .hero-actions { align-items: center; }
  .home-page .hero-notes { gap: 9px 13px; }
  .home-page .cinema { margin-top: 76px; }
  .home-page .mac-screen { min-height: 520px; border-radius: 24px; }
  .home-page .screen-welcome { bottom: 16%; max-width: 290px; }
  .home-page .screen-welcome > strong { font-size: 36px; }
  .home-page .experience-meta { grid-template-columns: 1fr; text-align: center; }
  .home-page .experience-live { justify-content: center; }
  .home-page .experience-count { justify-self: center; }
  .cinematic-interlude { min-height: 78vh; padding-inline: 18px; }
  .interlude-line { font-size: clamp(52px,16vw,76px); }
  .interlude-orbit { width: 130vw; }
  .home-page .feature-section { padding: 110px 16px 120px; }
  .home-page .feature-section h2 { font-size: 56px; }
  .home-page .feature-grid { margin-top: 58px; grid-template-columns: 1fr; }
  .feature-dock { top: calc(100vh - 74px); }
  .feature-dock > div { min-width: 0; width: calc(100vw - 32px); height: 56px; padding-left: 13px; gap: 9px; }
  .feature-dock > div > span { display: none; }
  .feature-dock > div { grid-template-columns: 1fr auto; }
  .home-page .feature:nth-child(n) { min-height: 250px; grid-column: span 1; }
  .home-page .feature-art,.home-page .feature-viz { transform: scale(.96); }
  .home-page .feature:hover .feature-art { transform: translateY(-4px) scale(1); }
  .feature-closing { align-items: flex-start; flex-direction: column; }
  .home-page .feature-cta { width: 100%; }
  .home-page .trust-strip { padding: 105px 18px; }
  .home-page .faq-section { padding-top: 110px; }
}

/* Notchy visual system — edge-to-edge desktop, not a storefront composition. */
.home-page {
  --signal: #9fc7ff;
  --signal-violet: #ba9cff;
  --graphite: #090c11;
  --graphite-2: #0e131b;
  --frost: #e7ebec;
  --frost-ink: #10141a;
  background: var(--graphite);
}
.home-page::before { background: linear-gradient(90deg,var(--signal-violet),var(--signal)); box-shadow: 0 0 18px rgba(159,199,255,.5); }
.home-page .site-header { height: 92px; }
.home-page .header-inner { max-width: none; padding-inline: clamp(20px,3.2vw,58px); }
.home-page .brand > span { border-color: rgba(159,199,255,.2); color: rgba(198,218,244,.58); }
.home-page .site-header nav { color: rgba(225,235,247,.58); }
.home-page .header-cta { border-color: rgba(159,199,255,.2); border-radius: 8px; background: rgba(10,15,22,.46); }
.home-page .header-cta:hover { border-color: rgba(159,199,255,.45); background: rgba(30,43,60,.62); }
.home-page .header-cta > span { color: var(--signal); }

.home-page .hero {
  min-height: 820px;
  height: 100svh;
  padding: 0;
  background: var(--graphite);
}
.home-page .hero::after { height: 34%; background: linear-gradient(transparent,rgba(2,5,9,.72)); }
.hero-atmosphere i { filter: blur(120px); }
.hero-atmosphere i:nth-child(1) { top: 12%; left: -5%; width: 48vw; height: 60vh; background: #2e5f9d; opacity: .22; }
.hero-atmosphere i:nth-child(2) { top: 5%; right: -8%; width: 46vw; height: 65vh; background: #563685; opacity: .19; }
.hero-atmosphere i:nth-child(3) { top: auto; bottom: -24%; left: 38%; width: 35vw; height: 40vh; background: #17475f; opacity: .18; }
.home-page .hero-layout { width: 100%; height: 100%; }
.home-page .cinema { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; animation: desktop-resolve 1.4s .05s var(--ease) both; }
.home-page .cinema::before { display: none; }
.home-page .mac-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #07101a;
  box-shadow: none;
  transform: none;
}
.home-page .mac-screen:hover { box-shadow: none; transform: none; }
.home-page .screen-wallpaper {
  background-color: #07101a;
  filter: saturate(.62) hue-rotate(12deg) brightness(.48);
  transform: scale(1.075);
}
.home-page .mac-screen.is-unlocked .screen-wallpaper { filter: saturate(.78) hue-rotate(8deg) brightness(.58); transform: scale(1.035); }
.home-page .mac-screen::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg,rgba(2,6,11,.82) 0%,rgba(2,6,11,.26) 48%,rgba(2,6,11,.08) 100%),
    linear-gradient(180deg,rgba(3,7,12,.34),transparent 40%,rgba(3,7,12,.46));
  content: "";
  pointer-events: none;
  transition: opacity .8s var(--ease);
}
.home-page .mac-screen.is-unlocked::before { opacity: .3; }
.home-page .screen-welcome { display: none; }
.home-page .desktop-files { top: 16%; right: 3.2%; gap: 26px; opacity: .65; }
.home-page .desktop-files i { border: 1px solid rgba(159,199,255,.13); border-radius: 8px; background: rgba(11,21,34,.55); color: var(--signal); }
.home-page .desktop-menu { padding-inline: 3.2vw; color: rgba(226,237,249,.42); }
.home-page .desktop-menu > div:first-child { margin-left: 125px; }
.home-page .unlock-button {
  top: 70px;
  padding: 11px 16px;
  border-color: rgba(159,199,255,.2);
  border-radius: 8px;
  background: rgba(222,232,242,.9);
  color: #111820;
  box-shadow: 0 18px 60px rgba(0,0,0,.45),0 0 55px rgba(117,169,236,.1);
}
.home-page .unlock-button:hover { background: #f3f7fa; }
.home-page .hero-copy {
  position: absolute;
  z-index: 10;
  bottom: clamp(64px,8vh,104px);
  left: clamp(24px,6vw,112px);
  width: min(780px,60vw);
  max-width: none;
  margin: 0;
  text-align: left;
  transition: opacity .65s var(--ease),filter .75s var(--ease),transform .8s var(--ease);
}
.home-page .hero-layout:has(.mac-screen.is-unlocked) .hero-copy { opacity: 0; filter: blur(12px); transform: translateY(30px); pointer-events: none; }
.home-page .hero-copy .eyebrow { justify-content: flex-start; color: var(--signal); font-size: 9px; }
.home-page .hero-copy .eyebrow::after { background: linear-gradient(90deg,var(--signal),transparent); }
.home-page .hero h1 {
  max-width: 760px;
  margin: 24px 0 0;
  color: #edf3f8;
  font-size: clamp(70px,7.2vw,128px);
  font-weight: 620;
  line-height: .84;
  letter-spacing: -.075em;
}
.home-page .hero-lede { max-width: 550px; margin: 28px 0 0; color: rgba(224,235,245,.56); font-size: 16px; }
.home-page .hero-actions { margin-top: 28px; justify-content: flex-start; }
.home-page .button-dark { border-color: rgba(255,255,255,.2); border-radius: 8px; background: #e4ebf0; color: #111820; box-shadow: 0 16px 44px rgba(0,0,0,.28); }
.home-page .button-dark:hover { background: #f7fafb; box-shadow: 0 20px 54px rgba(0,0,0,.38),0 0 38px rgba(159,199,255,.1); }
.home-page .hero-actions .button span,.home-page .text-link span { color: var(--signal); }
.home-page .text-link { border-color: rgba(159,199,255,.2); color: rgba(224,235,245,.72); }
.home-page .hero-notes { margin-top: 30px; justify-content: flex-start; color: rgba(218,230,242,.34); }
.home-page .hero-notes span::before { border-radius: 0; background: var(--signal); }
.home-page .experience-meta {
  position: absolute;
  z-index: 9;
  right: clamp(24px,3.2vw,58px);
  bottom: clamp(30px,4vh,52px);
  width: 265px;
  margin: 0;
  padding: 13px 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  border-color: rgba(159,199,255,.18);
  transition: opacity .45s;
}
.home-page .experience-meta p { grid-column: 1/-1; grid-row: 2; color: rgba(218,231,244,.4); text-align: left; }
.home-page .experience-live { color: rgba(222,235,248,.7); }
.home-page .experience-live i { border-radius: 1px; background: var(--signal); box-shadow: 0 0 0 4px rgba(159,199,255,.08),0 0 14px rgba(159,199,255,.6); }
.home-page .experience-count { color: var(--signal); }
.home-page .mac-screen.is-unlocked + .experience-meta { opacity: .32; }

.cinematic-interlude {
  min-height: 90vh;
  padding: 16vh max(24px,6vw);
  place-content: center start;
  text-align: left;
  background:
    linear-gradient(90deg,transparent 0 5.9vw,rgba(159,199,255,.13) 5.9vw calc(5.9vw + 1px),transparent calc(5.9vw + 1px)),
    radial-gradient(circle at 82% 50%,rgba(76,68,139,.2),transparent 27%),
    #080c12;
}
.interlude-kicker { margin-bottom: 46px; color: var(--signal); }
.interlude-line { max-width: 1150px; font-size: clamp(62px,8vw,132px); font-weight: 570; line-height: .86; }
.interlude-line span:last-child { color: rgba(207,223,241,.22); }
.interlude-orbit {
  top: 50%;
  right: 0;
  left: auto;
  width: 54vw;
  height: 1px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg,transparent,rgba(159,199,255,.22));
  translate: 0;
  animation: none;
}
.interlude-orbit::before,.interlude-orbit::after { display: none; }
.interlude-orbit i,.interlude-orbit b { top: -3px; width: 7px; height: 7px; background: var(--signal); box-shadow: 0 0 24px rgba(159,199,255,.8); }
.interlude-orbit i:first-child { left: 24%; }.interlude-orbit b { right: 9%; }.interlude-orbit i:last-child { top: -3px; left: 67%; }

.home-page .feature-section {
  padding: 150px max(24px,6vw) 170px;
  background: var(--frost);
  color: var(--frost-ink);
}
.feature-heading { grid-template-columns: minmax(420px,1.1fr) minmax(320px,.9fr); align-items: end; gap: 28px 9vw; }
.feature-heading .eyebrow { color: #3f6394; }
.home-page .feature-section h2 { color: var(--frost-ink); font-size: clamp(68px,7.7vw,122px); font-weight: 600; }
.home-page .feature-section h2 em { color: rgba(16,20,26,.22); }
.feature-heading > p:last-child { max-width: 460px; color: rgba(16,20,26,.57); }
.home-page .feature-grid { margin-top: 106px; display: block; border-bottom: 1px solid rgba(13,21,31,.17); }
.home-page .feature,
.home-page .feature:nth-child(n) {
  width: 100%;
  min-height: 176px;
  padding: 28px 18px;
  display: grid;
  grid-template-columns: 54px 76px minmax(260px,1fr) minmax(240px,.65fr) 32px;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(13,21,31,.17);
  border-radius: 0;
  background: transparent;
  color: var(--frost-ink);
  box-shadow: none;
  transform: none;
  transition: background .35s var(--ease),color .35s var(--ease),padding .35s var(--ease);
}
.home-page .feature::after { inset: 0; border-radius: 0; background: linear-gradient(90deg,rgba(137,180,239,.18),transparent 55%); }
.home-page .feature:hover { padding-right: 28px; padding-left: 28px; border-color: rgba(13,21,31,.17); background: rgba(255,255,255,.52); box-shadow: none; transform: none; }
.home-page .feature.active { border-color: transparent; background: #101720; color: #edf4fa; box-shadow: none; }
.home-page .feature-index,.home-page .feature.active .feature-index { color: rgba(16,20,26,.34); font-size: 10px; }
.home-page .feature.active .feature-index { color: rgba(223,235,246,.34); }
.home-page .feature-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(54,92,141,.18);
  border-radius: 8px;
  background: rgba(120,165,224,.1);
  color: #315a8f;
  box-shadow: none;
}
.home-page .feature.active .feature-icon { border-color: rgba(159,199,255,.23); background: rgba(159,199,255,.1); color: var(--signal); }
.home-page .feature-copy { grid-column: 3; }
.home-page .feature strong { font-size: clamp(25px,2.2vw,36px); font-weight: 620; }
.home-page .feature small,.home-page .feature.active small { max-width: 330px; color: rgba(16,20,26,.5); font-size: 12px; }
.home-page .feature.active small { color: rgba(224,235,245,.48); }
.home-page .feature-arrow { grid-column: 5; color: rgba(16,20,26,.32); }
.home-page .feature.active .feature-arrow { color: var(--signal); }
.home-page .feature-art,.home-page .feature-viz {
  position: relative!important;
  right: auto;
  bottom: auto;
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  opacity: .7;
  filter: saturate(.5);
  transform: scale(1.1);
}
.home-page .feature:hover .feature-art { transform: translateX(-8px) scale(1.12); }
.home-page .feature.active .feature-art,.home-page .feature.active .feature-viz { filter: saturate(.6) brightness(1.3); }
.feature-dock { top: calc(100vh - 78px); }
.feature-dock > div {
  min-width: 450px;
  height: 54px;
  border-color: rgba(159,199,255,.22);
  border-radius: 8px;
  background: rgba(12,18,26,.88);
}
.feature-dock a { border-radius: 5px; background: rgba(159,199,255,.11); color: var(--signal); }
.feature-closing { margin-top: 64px; border-color: rgba(13,21,31,.17); }
.feature-closing > p { color: rgba(16,20,26,.52); }
.feature-closing > p span { color: #315a8f; }
.home-page .feature-closing .button-dark { border-color: #101720; background: #101720; color: #edf4fa; }

.home-page .trust-strip { padding: 150px max(24px,6vw); background: #101720; color: #e8f0f6; }
.home-page .trust-strip > .eyebrow { color: var(--signal); }
.trust-grid { border-color: rgba(159,199,255,.16); }
.home-page .trust-grid > div + div { border-color: rgba(159,199,255,.16); }
.home-page .trust-grid small { color: rgba(159,199,255,.54); }
.home-page .trust-grid strong { color: #edf4f8; }
.home-page .trust-grid span { color: rgba(220,232,243,.48); }

.home-page .faq-section { max-width: none; padding-right: max(24px,6vw); padding-left: max(24px,6vw); background: #090c11; }
.home-page .faq-section .eyebrow { color: var(--signal); }
.home-page .faq-list summary::after { color: var(--signal); }
.home-page footer { max-width: none; margin-inline: 6vw; }
.home-page footer a:hover { color: var(--signal); }

@keyframes desktop-resolve { from { opacity: 0; filter: blur(18px); transform: scale(1.035); } to { opacity: 1; filter: blur(0); transform: none; } }

@media (max-width: 900px) {
  .home-page .hero { min-height: 760px; height: 100svh; padding: 0; }
  .home-page .hero-copy { bottom: 62px; left: 28px; width: min(680px,calc(100vw - 56px)); }
  .home-page .hero h1 { font-size: clamp(64px,11vw,96px); }
  .home-page .experience-meta { display: none; }
  .home-page .desktop-menu > div:first-child { margin-left: 80px; }
  .feature-heading { grid-template-columns: 1fr; }
  .home-page .feature,.home-page .feature:nth-child(n) { grid-template-columns: 44px 62px minmax(220px,1fr) 170px 24px; }
}

@media (max-width: 640px) {
  .home-page .site-header { height: 76px; }
  .home-page .hero { min-height: 720px; padding: 0; }
  .home-page .hero-copy { bottom: 38px; left: 18px; width: calc(100vw - 36px); }
  .home-page .hero h1 { font-size: clamp(54px,16vw,72px); }
  .home-page .hero-lede { max-width: 92%; font-size: 14px; }
  .home-page .hero-actions { align-items: flex-start; }
  .home-page .hero-notes { display: none; }
  .home-page .desktop-menu > div:first-child { margin-left: 0; }
  .home-page .desktop-files { display: none; }
  .home-page .unlock-button { top: 58px; }
  .cinematic-interlude { min-height: 74vh; padding: 13vh 20px; background: radial-gradient(circle at 82% 50%,rgba(76,68,139,.2),transparent 34%),#080c12; }
  .interlude-line { font-size: clamp(50px,15vw,72px); }
  .home-page .feature-section { padding: 100px 18px 120px; }
  .home-page .feature-section h2 { font-size: 58px; }
  .home-page .feature-grid { margin-top: 70px; }
  .home-page .feature,.home-page .feature:nth-child(n) { min-height: 154px; padding: 22px 8px; grid-template-columns: 30px 48px minmax(0,1fr) 22px; gap: 10px; }
  .home-page .feature:hover { padding-right: 8px; padding-left: 8px; }
  .home-page .feature-icon { width: 42px; height: 42px; }
  .home-page .feature strong { font-size: 21px; }
  .home-page .feature-art,.home-page .feature-viz { display: none; }
  .home-page .feature-arrow { grid-column: 4; }
  .feature-dock > div { min-width: 0; width: calc(100vw - 30px); }
}

/* UI/UX Pro Max correction: asymmetric demo scale + explicit interaction layers. */
.home-page {
  --layer-desktop: 10;
  --layer-content: 20;
  --layer-notch: 30;
  --layer-navigation: 40;
}
.home-page .site-header {
  z-index: var(--layer-navigation);
  pointer-events: none;
}
.home-page .site-header a,
.home-page .site-header button,
.home-page .site-header nav { pointer-events: auto; }
.home-page .hero {
  height: clamp(760px,88svh,900px);
  min-height: 760px;
  overflow: hidden;
}
.home-page .hero-layout { height: 100%; }
.home-page .cinema {
  z-index: var(--layer-desktop);
  top: 50%;
  right: 4vw;
  bottom: auto;
  left: 42vw;
  width: auto;
  height: auto;
  aspect-ratio: 16/10;
  translate: 0 -48%;
}
.home-page .mac-screen {
  min-height: 0;
  border: 1px solid rgba(159,199,255,.17);
  border-radius: 18px;
  box-shadow: 0 42px 100px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.08);
}
.home-page .mac-screen:hover { box-shadow: 0 48px 118px rgba(0,0,0,.52),0 0 0 1px rgba(159,199,255,.08),inset 0 1px rgba(255,255,255,.1); }
.home-page .island { z-index: var(--layer-notch); }
.home-page .island-toggle {
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.home-page .mac-screen.is-pressed .island { scale: .985; }
.home-page .hero-copy {
  z-index: var(--layer-content);
  top: 50%;
  bottom: auto;
  left: 5.5vw;
  width: 33vw;
  translate: 0 -46%;
}
.home-page .hero h1 {
  max-width: 610px;
  font-size: clamp(64px,5.25vw,96px);
  line-height: .87;
}
.home-page .hero-lede { max-width: 480px; }
.home-page .hero-notes { max-width: 500px; gap: 8px 15px; }
.home-page .experience-meta {
  right: 22px;
  bottom: 18px;
  width: 245px;
  padding-top: 10px;
}
.home-page .desktop-menu { padding-inline: 18px; }
.home-page .desktop-menu > div:first-child { margin-left: 0; }
.home-page .desktop-files { top: 15%; right: 18px; }
.home-page .unlock-button { top: 54px; }

@media (max-width: 1100px) {
  .home-page .hero { height: 1060px; min-height: 1060px; }
  .home-page .hero-copy {
    top: 125px;
    left: 28px;
    width: min(720px,calc(100vw - 56px));
    translate: 0;
  }
  .home-page .hero h1 { max-width: 700px; font-size: clamp(62px,9vw,88px); }
  .home-page .cinema {
    top: 500px;
    right: 28px;
    left: 28px;
    aspect-ratio: 16/9;
    translate: 0;
  }
  .home-page .mac-screen { min-height: 500px; }
}

@media (max-width: 640px) {
  .home-page .hero { height: 1040px; min-height: 1040px; }
  .home-page .hero-copy { top: 108px; left: 18px; width: calc(100vw - 36px); translate: 0; }
  .home-page .hero h1 { font-size: clamp(52px,15.5vw,68px); }
  .home-page .hero-actions { width: 100%; flex-direction: row; align-items: center; }
  .home-page .hero-actions .button { width: auto; min-height: 52px; }
  .home-page .text-link { font-size: 12px; }
  .home-page .cinema { top: 535px; right: 14px; left: 14px; aspect-ratio: auto; }
  .home-page .mac-screen { height: 440px; min-height: 440px; border-radius: 14px; }
  .home-page .experience-meta { display: none; }
}