:root {
  color-scheme: dark;
  --ink: #f5f5f7;
  --muted: rgba(245,245,247,.62);
  --line: rgba(255,255,255,.12);
  --blue: #2997ff;
  --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #050506; }
body { margin: 0; color: var(--ink); background: #050506; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.nav { position: fixed; z-index: 50; inset: 0 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px,4vw,64px); background: rgba(6,6,8,.62); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(26px) saturate(150%); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 680; letter-spacing: .08em; }
.brand img { border-radius: 8px; box-shadow: 0 5px 16px rgba(0,0,0,.4); }
.nav-download { padding: 9px 17px; color: white; background: #147ce5; border-radius: 999px; font-size: 14px; font-weight: 600; transition: transform .25s,background .25s; }
.nav-download:hover { transform: scale(1.04); background: #2997ff; }
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(24px,5vw,86px); padding: 110px clamp(22px,5vw,88px) 70px; isolation: isolate; background: radial-gradient(circle at 72% 45%,rgba(52,77,147,.2),transparent 34%),linear-gradient(180deg,#050506,#09090c); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size: 70px 70px; mask-image: radial-gradient(circle at 70% 45%,black,transparent 58%); }
.eyebrow { margin: 0 0 20px; color: #7db8ff; font-size: 15px; font-weight: 650; letter-spacing: .02em; }
h1,h2,h3,p { text-wrap: balance; }
h1 { margin: 0; font-size: clamp(58px,7vw,108px); line-height: .89; letter-spacing: -.065em; font-weight: 720; }
h1 span,h2 span { color: #77777f; }
.hero-line { margin: 28px 0 30px; font-size: clamp(19px,2vw,25px); line-height: 1.35; color: var(--muted); }
.download-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: #f5f5f7; color: #060607; font-size: 16px; font-weight: 650; box-shadow: 0 12px 36px rgba(255,255,255,.12); transition: transform .28s var(--ease),box-shadow .28s; }
.download-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 48px rgba(255,255,255,.19); }
.download-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.requirement { margin: 13px 0 0 8px; color: rgba(255,255,255,.38); font-size: 12px; }
.mac-stage { position: relative; perspective: 1200px; }
.ambient { position: absolute; width: 50%; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .35; animation: breathe 7s ease-in-out infinite alternate; }
.ambient-one { top: -15%; right: 2%; background: #6b5cff; }
.ambient-two { bottom: -15%; left: 5%; background: #0b84ff; animation-delay: -3s; }
.screen-glass { position: relative; aspect-ratio: 1.42; max-height: 690px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: radial-gradient(circle at 25% 85%,#255489 0,transparent 33%),radial-gradient(circle at 83% 16%,#482b77 0,transparent 37%),linear-gradient(145deg,#121a29,#050507 70%); box-shadow: 0 55px 110px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.15); transform: rotateY(-4deg) rotateX(2deg); transition: transform .6s var(--ease); }
.screen-glass:hover { transform: rotateY(0) rotateX(0) scale(1.01); }
.screen-glass::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 28%); }
.menu-strip { height: 25px; padding: 0 12px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 8px; font-weight: 600; background: rgba(12,12,14,.2); }
.menu-strip>span:first-child { color: white; font-size: 5px; }
.menu-right { margin-left:auto; display:flex; gap:10px; }
.island-shell { position: absolute; z-index: 2; top: 0; left: 50%; width: min(78%,480px); height: 285px; transform: translateX(-50%); }
.notch { position: absolute; z-index: 4; top: 0; left: 50%; width: 33%; height: 27px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #000; }
.halo-panel { position: absolute; top: 0; left: 50%; width: 100%; height: 195px; transform: translateX(-50%); overflow: hidden; border-radius: 0 0 31px 31px; background: rgba(3,3,4,.94); box-shadow: 0 22px 60px rgba(0,0,0,.55),inset 0 -1px rgba(255,255,255,.08); transition: width .7s var(--ease),height .7s var(--ease),border-radius .7s var(--ease); animation: island-arrive 1.3s var(--ease) both .35s; backdrop-filter: blur(30px); }
.panel-tools { height: 42px; padding: 6px 13px 0; display:flex; align-items:center; gap:6px; }
.panel-tools i { flex:1; }
.tool { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#aaa; background:#171719; font-size:9px; }
.halo-view { position: absolute; inset: 42px 0 0; padding: 20px 24px 22px; display: flex; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .45s,transform .65s var(--ease); pointer-events:none; }
[data-mode="music"] .view-music,[data-mode="clipboard"] .view-clipboard,[data-mode="calendar"] .view-calendar,[data-mode="system"] .view-system,[data-mode="notifications"] .view-notifications { opacity:1; transform:none; }
.view-music { align-items:center; gap:15px; }
.album-art { position:relative; width:72px; height:72px; flex:0 0 auto; overflow:hidden; border-radius:15px; background: conic-gradient(from 160deg,#ff5d81,#684dff,#30c7ff,#ff5d81); box-shadow:0 10px 26px rgba(87,71,255,.35); }
.album-art::before,.album-art span { content:""; position:absolute; border-radius:50%; }
.album-art::before { inset:14px; border:10px solid rgba(0,0,0,.5); }
.album-art span { inset:31px; background:white; }
.track { min-width:0; display:flex; flex:1; flex-direction:column; gap:3px; }
.track small,.halo-view small { color:#777780; font-size:8px; font-weight:700; letter-spacing:.1em; }
.track strong { overflow:hidden; font-size:16px; white-space:nowrap; text-overflow:ellipsis; }
.track>span { color:#85858d; font-size:10px; }
.progress,.meter { height:3px; margin-top:9px; overflow:hidden; border-radius:4px; background:#29292c; }
.progress i { display:block; width:54%; height:100%; background:white; animation: progress 8s linear infinite; }
.wave { display:flex; align-items:center; gap:3px; height:34px; }
.wave b { width:3px; height:8px; border-radius:4px; background:#7db8ff; animation: wave .85s ease-in-out infinite alternate; }
.wave b:nth-child(2),.wave b:nth-child(4){animation-delay:-.3s}.wave b:nth-child(3){animation-delay:-.6s}
.view-label { position:absolute; top:3px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:650; }
.clip-row { display:flex; width:100%; gap:10px; padding-top:16px; animation: clip-drift 5s var(--ease) infinite alternate; }
.clip-card { width:155px; flex:0 0 auto; min-height:92px; padding:13px; border:1px solid #25252a; border-radius:14px; background:#111113; }
.clip-card.selected { border-color:#4285ff; box-shadow:0 0 0 1px #4285ff55; }
.clip-card p { margin:8px 0 0; font-size:10px; line-height:1.35; color:#d0d0d5; }
.image-card span { display:block; height:64px; border-radius:9px; background:linear-gradient(145deg,#5736b3,#15a9cc); }
.view-calendar { gap:18px; }
.date-block { width:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(145deg,#25252b,#101012); }
.date-block strong { font-size:32px; letter-spacing:-.06em; }.date-block span{font-size:8px;color:#ff6c65;font-weight:700}
.event-list { flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.event-list>div { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:10px; background:#121214; }
.event-list i { width:3px; height:23px; border-radius:4px; }.violet{background:#8f71ff}.blue{background:#39a4ff}.pink{background:#ff5f93}
.event-list span { display:flex; flex:1; flex-direction:column; gap:1px; }.event-list strong{font-size:9px}.event-list small{font-size:7px}.event-list button{border:0;border-radius:6px;padding:5px 8px;color:white;background:#1b75e5;font-size:7px}
.view-system { align-items:stretch; gap:10px; }.metric{position:relative;flex:1;padding:12px;border-radius:14px;background:#121214;overflow:hidden}.metric strong{display:block;margin-top:6px;font-size:17px}.metric svg{position:absolute;left:0;right:0;bottom:0;width:100%;}.metric svg path,.system-number svg path{fill:none;stroke:#49a2ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:200;animation:draw 3s ease-in-out infinite alternate}.metric .meter{margin-top:19px}.metric .meter i{display:block;width:62%;height:100%;background:#9b7cff}.battery{width:40px;height:18px;margin-top:15px;padding:2px;border:1px solid #666;border-radius:5px}.battery i{display:block;width:84%;height:100%;border-radius:2px;background:#55d977}
.view-notifications { align-items:center;gap:15px;padding-left:38px;padding-right:38px}.notification-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:linear-gradient(145deg,#1f83ff,#6855ff);font-size:23px;box-shadow:0 12px 32px #306dff44}.view-notifications>div:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px}.view-notifications strong{font-size:15px}.view-notifications span{font-size:9px;color:#85858d}.badge{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ff3b30;font-size:9px;font-weight:700}
.mode-dock { position:absolute; z-index:4; left:50%; bottom:9%; display:flex; gap:5px; padding:6px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(7,7,9,.55); backdrop-filter:blur(16px); }
.mode-dock button { width:30px;height:30px;border:0;border-radius:50%;color:#999;background:transparent;cursor:pointer;transition:.3s var(--ease)}.mode-dock button:hover{color:white;background:#ffffff12}.mode-dock button.active{color:white;background:#ffffff20;transform:scale(1.08)}
.scroll-cue{position:absolute;left:50%;bottom:23px;width:24px;height:38px;transform:translateX(-50%);border:1px solid #ffffff38;border-radius:20px}.scroll-cue span{position:absolute;top:8px;left:10px;width:3px;height:7px;border-radius:4px;background:white;animation:scroll 1.7s infinite}
.features { padding: 150px clamp(22px,6vw,100px); background:linear-gradient(#09090c,#101014 45%,#050506); }
.section-heading { max-width:900px; margin:0 auto 80px; text-align:center; }.section-heading h2,.final-cta h2{margin:0;font-size:clamp(48px,7vw,100px);line-height:.95;letter-spacing:-.06em}.section-heading .eyebrow{margin-bottom:20px}
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:1200px; margin:auto; }
.feature-card { position:relative; min-height:520px; overflow:hidden; padding:42px; border:1px solid rgba(255,255,255,.1); border-radius:34px; background:#151518; box-shadow:inset 0 1px rgba(255,255,255,.08); }
.feature-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 28%)}
.feature-copy small{font-size:12px;font-weight:750;letter-spacing:.1em;color:#85858e}.feature-copy h3{margin:11px 0 0;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.05em}
.card-clipboard{background:radial-gradient(circle at 70% 75%,#70432755,transparent 40%),#151518}.floating-clips span{position:absolute;right:7%;bottom:20%;width:55%;padding:20px 22px;border:1px solid #ffffff18;border-radius:18px;background:rgba(38,38,42,.78);box-shadow:0 18px 50px #0008;backdrop-filter:blur(20px);font-weight:650;animation:float 4s ease-in-out infinite}.floating-clips span:nth-child(2){right:17%;bottom:11%;transform:rotate(-5deg);animation-delay:-1.4s}.floating-clips span:nth-child(3){right:-2%;bottom:3%;transform:rotate(7deg);animation-delay:-2.8s}
.card-calendar{background:radial-gradient(circle at 60% 72%,#5d274a88,transparent 44%),#151518}.orbit-calendar{position:absolute;right:8%;bottom:8%;width:70%;aspect-ratio:1}.orbit-calendar>div{position:absolute;inset:21%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff1f;border-radius:30%;background:#1d1d21;box-shadow:0 28px 70px #0008}.orbit-calendar b{font-size:80px;letter-spacing:-.08em}.orbit-calendar span{color:#ff6f68;font-size:13px;font-weight:750}.orbit-calendar i{position:absolute;inset:5%;border:1px solid #ff70af44;border-radius:50%;animation:spin 8s linear infinite}.orbit-calendar i::after{content:"";position:absolute;top:8%;left:13%;width:10px;height:10px;border-radius:50%;background:#ff70af;box-shadow:0 0 24px #ff70af}.orbit-calendar i:nth-child(3){inset:0;animation-duration:13s;animation-direction:reverse}.orbit-calendar i:nth-child(4){inset:12%;animation-duration:6s}
.card-sound{background:radial-gradient(circle at 55% 72%,#172e7888,transparent 44%),#151518}.sound-rings{position:absolute;right:4%;bottom:1%;width:82%;aspect-ratio:1;display:grid;place-items:center}.sound-rings i{position:absolute;width:32%;aspect-ratio:1;border:1px solid #6f8fff66;border-radius:50%;animation:ripple 3s ease-out infinite}.sound-rings i:nth-child(2){animation-delay:-1s}.sound-rings i:nth-child(3){animation-delay:-2s}.sound-rings div{position:relative;z-index:2;display:grid;place-items:center;width:110px;height:110px;border-radius:28px;background:linear-gradient(145deg,#687fff,#3354e9);font-size:42px;box-shadow:0 25px 70px #3154df77}
.card-system{background:radial-gradient(circle at 55% 80%,#134b3f99,transparent 45%),#151518}.system-number{position:absolute;left:42px;right:42px;bottom:38px}.system-number b{font-size:130px;line-height:1;letter-spacing:-.09em}.system-number span{font-size:30px;color:#63e6af}.system-number svg{display:block;width:100%;margin-top:12px}.system-number svg path{stroke:#63e6af;stroke-width:3}
.final-cta { min-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:110px 22px; text-align:center; background:radial-gradient(circle at 50% 58%,#183a7255,transparent 32%),#050506; }.final-cta img{margin-bottom:30px;border-radius:24px;box-shadow:0 25px 70px #295eff44}.final-cta h2{margin-bottom:38px}.download-button.light{background:#147ce5;color:white;box-shadow:0 18px 55px #147ce544}.final-cta p{color:#777;font-size:13px}
footer{display:flex;justify-content:space-between;padding:26px clamp(22px,5vw,80px);border-top:1px solid #ffffff10;color:#666;font-size:12px}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.reveal.visible{opacity:1;transform:none}
@keyframes breathe{to{transform:scale(1.25) translate(5%,-4%);opacity:.5}}@keyframes island-arrive{from{width:33%;height:27px;border-radius:0 0 14px 14px}to{width:100%;height:195px;border-radius:0 0 31px 31px}}@keyframes wave{to{height:27px}}@keyframes progress{from{width:12%}to{width:92%}}@keyframes clip-drift{to{transform:translateX(-32px)}}@keyframes draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}@keyframes scroll{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(13px)}}@keyframes float{50%{translate:0 -13px}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ripple{0%{transform:scale(.6);opacity:0}25%{opacity:1}100%{transform:scale(2.8);opacity:0}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:120px;text-align:center}.hero-copy{position:relative;z-index:3}.mac-stage{width:min(100%,680px);margin:auto}.screen-glass{transform:none}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:480px}.scroll-cue{display:none}}
@media(max-width:560px){.nav{height:58px}.brand span{display:none}.hero{padding-left:14px;padding-right:14px}.hero-line{margin:20px 0 24px}.screen-glass{aspect-ratio:.86;border-radius:22px}.island-shell{width:94%}.halo-panel{height:180px}.halo-view{padding-left:15px;padding-right:15px}.panel-tools{padding-left:8px;padding-right:8px}.clip-card{width:130px}.view-notifications{padding-left:20px;padding-right:20px}.mode-dock{bottom:7%}.features{padding:100px 14px}.section-heading{margin-bottom:48px}.feature-card{min-height:420px;padding:30px;border-radius:26px}.system-number{left:30px;right:30px}.system-number b{font-size:100px}.floating-clips span{width:68%}.final-cta{min-height:75vh}footer{flex-direction:column;gap:8px;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}