@font-face{font-family:InterLocal;src:local('Inter');font-display:swap}
:root{--ink:#101114;--quiet:#7f838e;--paper:#f5f5f3;--night:#0b0d11;--ice:#dce8ee;--rose:#d96d82;--ease:cubic-bezier(.22,.85,.22,1);--progress:0}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#0b0d11;color:#f8f9fb;font:400 15px/1.5 InterLocal,Inter,Arial,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,a{font:inherit;-webkit-tap-highlight-color:transparent}a{text-decoration:none;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #b1d6ed;outline-offset:4px}::selection{background:#d2bac7;color:#181a20}.container{width:min(1390px,calc(100% - 100px));margin:auto}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.icon{width:17px;height:17px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.page-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:101;background:linear-gradient(90deg,#94b6c7,#f2e1e3);transform:scaleX(var(--progress));transform-origin:left;pointer-events:none}
/* NAV */
.header-zone{position:fixed;z-index:100;top:18px;left:0;right:0;pointer-events:none}.topbar{pointer-events:auto;margin:0 auto;width:min(1320px,calc(100% - 70px));height:66px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 13px 0 22px;border:1px solid rgba(255,255,255,.16);background:rgba(17,21,27,.67);box-shadow:0 8px 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);transition:background .35s,border-color .35s,transform .5s var(--ease)}.topbar.scrolled{background:rgba(18,20,24,.88);border-color:rgba(255,255,255,.18)}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand img{width:35px;height:35px;object-fit:contain;display:block}.brand strong{font-size:16px;letter-spacing:.15em;font-weight:700}.nav-links{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:34px}.nav-links a{font-size:12px;color:#b9bcc4;transition:color .22s}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-actions{display:flex;align-items:center;gap:7px}.nav-icon{height:42px;width:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.06);color:#ebeff4;transition:background .25s,transform .25s}.nav-icon:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}.nav-icon .icon{width:18px;height:18px}.nav-download{height:42px;padding:0 20px;border-radius:11px;background:#f6f7f8;color:#101216;font-weight:660;font-size:12px;display:inline-flex;gap:10px;align-items:center;transition:background .25s,transform .25s}.nav-download:hover{background:#dce9f1;transform:translateY(-2px)}.menu-toggle{display:none}.mobile-menu{display:none}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:12px;padding:17px 25px;font-size:13px;font-weight:675;position:relative;overflow:hidden;transition:transform .3s var(--ease),background .3s,box-shadow .3s;border:1px solid transparent}.btn.primary{background:#f6f7f8;color:#14171c;box-shadow:0 14px 45px rgba(220,235,245,.12)}.btn.primary:hover{background:#dfe9ee;box-shadow:0 18px 45px rgba(210,236,249,.17)}.btn.ghost{border-color:rgba(255,255,255,.19);background:rgba(255,255,255,.065);color:#f7f8fa;backdrop-filter:blur(12px)}.btn.ghost:hover{background:rgba(255,255,255,.13)}.btn.dark{background:#131519;color:white}.btn.dark:hover{background:#343941}.btn .icon{width:17px;height:17px}
/* HERO */
.hero{min-height:940px;height:min(940px,110vh);position:relative;background:#0b0d11;overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(255,255,255,.06)}.hero:before{content:"";position:absolute;inset:0;opacity:.62;pointer-events:none;background:radial-gradient(ellipse 58% 70% at 78% 45%,#273442 0%,#131820 49%,transparent 90%),radial-gradient(ellipse 30% 40% at 9% 96%,rgba(76,63,86,.14),transparent 90%)}.hero:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:200px;background:linear-gradient(transparent,#0b0d11 96%);z-index:1;pointer-events:none}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.023) 1px,transparent 1px);background-size:128px 128px;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 89%,transparent);pointer-events:none;opacity:.68}.hero-orbit{position:absolute;right:-6%;top:11%;width:840px;height:840px;border:1px solid rgba(209,227,236,.08);border-radius:50%;pointer-events:none}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid rgba(212,234,245,.07);border-radius:50%;inset:87px}.hero-orbit:after{inset:190px}.hero-waves{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:opacity .28s}.hero-waves path{fill:none;stroke:rgba(170,218,240,.22);stroke-width:1.2;filter:drop-shadow(0 0 8px rgba(115,172,200,.3))}.hero-waves .w1{animation:waveDrift 11s ease-in-out infinite alternate}.hero-waves .w2{animation:waveDrift 13s ease-in-out infinite alternate-reverse;opacity:.5}.hero-glow{position:absolute;right:5%;top:20%;width:630px;height:650px;border-radius:50%;background:radial-gradient(ellipse,rgba(100,164,185,.20),transparent 65%);filter:blur(48px);animation:ambient 12s ease-in-out infinite alternate;pointer-events:none}@keyframes waveDrift{from{transform:translate3d(-26px,10px,0)}to{transform:translate3d(45px,-23px,0)}}@keyframes ambient{from{transform:translate3d(0,0,0) scale(.92)}to{transform:translate3d(35px,-20px,0) scale(1.12)}}
.hero-layout{height:100%;min-height:780px;display:grid;grid-template-columns:1.04fr .96fr;position:relative;z-index:3}.hero-copy{padding-top:245px;position:relative;z-index:5}.eyebrow{display:inline-flex;align-items:center;gap:12px;color:#b8c8d4;font-size:10px;font-weight:720;letter-spacing:.18em;text-transform:uppercase}.eyebrow .pip{height:6px;width:6px;box-shadow:0 0 0 5px rgba(197,218,232,.11);border-radius:50%;background:#e1ecf4}.eyebrow .muted{color:#667586;letter-spacing:0;font-weight:600}.hero h1{font-size:clamp(70px,6.7vw,112px);font-weight:650;line-height:.99;letter-spacing:-.085em;margin:35px 0 28px;max-width:800px}.hero h1 .line{display:block;white-space:nowrap}.hero h1 .gradient{display:inline-block;color:transparent;background:linear-gradient(115deg,#fff 4%,#cde0ea 52%,#a5bccb 96%);background-clip:text;-webkit-background-clip:text}.hero .description{font-size:15px;line-height:1.85;color:#a6afbb;max-width:460px;margin:0}.hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 27px}.availability{display:flex;align-items:center;gap:12px;color:#7f8a98;font-size:11px}.availability svg{width:15px;height:15px}.availability b{font-weight:500;color:#b3bdc8}.hero-visual{position:relative;min-width:0;height:100%}.hero-phone{width:min(730px,57vw);max-width:none;position:absolute;top:120px;left:50%;transform:translate3d(-45%,0,0);filter:drop-shadow(0 40px 55px rgba(0,0,0,.27));animation:heroFloat 8s ease-in-out infinite alternate;user-select:none;pointer-events:none;z-index:3}@keyframes heroFloat{from{translate:0 7px}to{translate:0 -15px}}.micro-caption{position:absolute;z-index:4;left:3%;bottom:210px;display:flex;align-items:center;gap:9px;color:rgba(225,235,244,.53);font-size:10px;letter-spacing:.13em;text-transform:uppercase;transform:rotate(-90deg);transform-origin:left bottom}.micro-caption .line{display:inline-block;width:24px;height:1px;background:currentColor}.hero-bottom{position:absolute;z-index:4;bottom:37px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;color:#64717f;text-transform:uppercase;letter-spacing:.18em;font-size:10px}.hero-bottom .indicator{display:flex;align-items:center;gap:15px}.hero-bottom .indicator:before{content:"";display:block;width:40px;height:1px;background:linear-gradient(90deg,#8794a5,transparent)}
/* QUIET TICKER */
.ticker{background:#101318;overflow:hidden;border-bottom:1px solid #24282e;color:#9faeba}.ticker-inner{display:flex;align-items:center;gap:85px;white-space:nowrap;width:max-content;height:82px;animation:marquee 34s linear infinite}.ticker-inner>span{display:flex;align-items:center;gap:33px;font-size:11px;font-weight:670;letter-spacing:.18em;text-transform:uppercase}.ticker-inner>span:before{content:"✳";color:#c6dce7;font-size:14px;font-weight:400}@keyframes marquee{to{transform:translateX(-50%)}}
/* Light editorial experience */
.light{background:var(--paper);color:#161a1e}.experience{padding:145px 0 130px;position:relative;overflow:hidden}.section-topline{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:730}.section-topline .track{width:30px;height:1px;background:currentColor;opacity:.5}.section-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;margin:29px 0 60px}.section-intro h2{font-size:clamp(58px,5.8vw,90px);line-height:1.02;letter-spacing:-.077em;margin:0;font-weight:640;max-width:880px}.section-intro p{max-width:390px;justify-self:end;margin:0 0 8px;color:#777d83;font-size:14px;line-height:1.9}.section-intro em{font-style:normal;color:#9b9da2}.experience-board{display:grid;grid-template-columns:.36fr .64fr;min-height:655px;border:1px solid #dddfe1;border-radius:25px;background:#e9ebec;overflow:hidden;box-shadow:0 16px 58px rgba(18,20,25,.04)}.experience-controls{padding:50px 38px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,#fafafa,#ededed);border-right:1px solid #e0e0e0}.experience-number{font-size:11px;letter-spacing:.16em;color:#8d9095;font-weight:700}.experience-controls h3{font-size:clamp(34px,3.5vw,54px);line-height:1.08;letter-spacing:-.061em;font-weight:640;margin:16px 0}.experience-controls p{font-size:13px;line-height:1.85;color:#81848c;max-width:340px}.tab-list{display:grid;gap:1px;margin-top:45px}.screen-tab{width:100%;background:none;border:none;border-bottom:1px solid #dbdedf;display:flex;align-items:center;gap:14px;padding:18px 2px;color:#9b9ca0;text-align:left;transition:color .25s,padding .25s}.screen-tab:hover{color:#272d35;padding-left:7px}.screen-tab[aria-selected="true"]{color:#15181c}.screen-tab .num{font-size:10px;letter-spacing:.08em;width:26px}.screen-tab .name{flex:1;font-size:14px;font-weight:630}.screen-tab .icon{opacity:0;transform:translateX(-5px);transition:transform .25s,opacity .25s}.screen-tab[aria-selected="true"] .icon,.screen-tab:hover .icon{opacity:1;transform:none}.experience-stage{position:relative;min-height:655px;background:radial-gradient(ellipse 50% 66% at 55% 47%,#65747e 0%,#29343d 40%,#131a23 86%);display:flex;justify-content:center;align-items:center;overflow:hidden;isolation:isolate}.experience-stage:before{position:absolute;content:"";width:560px;height:560px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 165px rgba(255,255,255,.012);top:12%;left:22%}.experience-stage .screen-device{position:relative;width:254px;height:562px;border:8px solid #08090b;border-radius:37px;box-shadow:0 0 0 2px #69707b,0 0 0 4px #15181c,0 35px 80px rgba(0,0,0,.56),inset 0 0 0 2px #232529;overflow:hidden;background:#14181d;transform:rotate(-8deg) translateY(29px);transition:transform .85s var(--ease),opacity .3s,filter .4s;z-index:2;will-change:transform}.screen-device:hover{transform:rotate(-3deg) translateY(12px)}.screen-device:after{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:46px;height:11px;background:#090b0e;border-radius:40px;opacity:.5;pointer-events:none}.screen-device img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}.screen-device.changing{opacity:.30;filter:blur(8px)}.stage-note{position:absolute;left:36px;bottom:31px;z-index:2;color:rgba(240,246,251,.65);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.stage-pagination{position:absolute;right:34px;bottom:26px;display:flex;gap:6px}.stage-pagination i{width:19px;height:2px;background:rgba(255,255,255,.24)}.stage-pagination i.on{background:#fff;width:37px}
/* Dark lyrics spread */
.lyrics-section{background:#0e1117;padding:136px 0 130px;overflow:hidden;position:relative}.lyrics-section:before{content:"";pointer-events:none;position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#647589,transparent)}.lyrics-layout{display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:42px}.lyrics-copy{padding:45px 0;z-index:2;position:relative}.lyrics-copy .section-topline{color:#a9becb}.lyrics-copy h2{font-size:clamp(66px,6.8vw,107px);font-weight:640;letter-spacing:-.081em;line-height:1.03;margin:34px 0 22px}.lyrics-copy h2 span{color:#a1c0cc}.lyrics-copy p{font-size:15px;line-height:1.85;max-width:430px;color:#929eaa;margin:0 0 30px}.detail-line{display:flex;align-items:center;gap:15px;margin-top:46px;color:#c0cbd4;font-size:12px;font-weight:600}.detail-line .pulse{height:26px;width:26px;display:grid;place-items:center;position:relative}.detail-line .pulse::before,.detail-line .pulse::after{content:"";border:1px solid #819ca8;border-radius:50%;position:absolute;inset:8px;animation:ringPulse 2.5s ease-out infinite}.detail-line .pulse::after{animation-delay:1.25s}@keyframes ringPulse{from{transform:scale(.3);opacity:.9}to{transform:scale(2.1);opacity:0}}.lyrics-stage{height:740px;position:relative;border:1px solid rgba(255,255,255,.085);border-radius:26px;background:radial-gradient(ellipse 76% 58% at 56% 50%,#34434a 0%,#1c272e 43%,#12171f 80%);overflow:hidden}.lyrics-stage .orbit{position:absolute;width:600px;height:600px;border:1px solid rgba(181,225,241,.09);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.lyrics-stage .orbit:after{content:"";position:absolute;inset:74px;border:1px solid rgba(181,225,241,.085);border-radius:50%}.lyric-device{position:absolute;width:260px;height:576px;border:8px solid #0b0c0e;border-radius:38px;overflow:hidden;box-shadow:0 0 0 2px #676e7a,0 35px 80px #0008;background:#14181e}.lyric-device img{width:100%;height:100%;object-fit:cover;display:block}.lyric-device.primary{z-index:3;top:75px;left:44%;transform:rotate(8deg);animation:slowHover 9s ease-in-out infinite alternate}.lyric-device.back{z-index:2;top:136px;left:15%;transform:rotate(-12deg) scale(.90);filter:brightness(.80);animation:slowHover2 10s ease-in-out infinite alternate}.lyrics-stage .corner{position:absolute;bottom:27px;right:28px;font-size:10px;letter-spacing:.17em;color:#8098a7}.lyrics-stage .corner strong{color:white;font-weight:500}@keyframes slowHover{from{translate:0 -5px}to{translate:0 13px}}@keyframes slowHover2{from{translate:0 12px}to{translate:0 -7px}}
/* Feature editorial */
.details{padding:150px 0 135px;background:#f6f6f4;color:#17191c}.details-header{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:52px}.details-header h2{font-size:clamp(53px,6vw,88px);line-height:1.02;font-weight:620;letter-spacing:-.073em;margin:20px 0 0}.details-header p{max-width:315px;color:#82858b;font-size:13px;line-height:1.8;margin-bottom:11px}.detail-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.feature-tile{height:670px;border-radius:24px;position:relative;overflow:hidden;isolation:isolate}.feature-tile.discovery{background:linear-gradient(150deg,#e5e9eb,#c9d3db 70%,#a6bcc9);color:#14191f}.feature-tile.artists{background:radial-gradient(ellipse 70% 55% at 80% 79%,#5f617b,#292d3e 55%,#1b202b);color:white}.feature-tile .tile-copy{position:relative;z-index:2;left:0;top:0;padding:41px 43px;max-width:430px}.feature-tile .tile-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.18em;font-weight:680;color:inherit;opacity:.57}.feature-tile h3{font-size:42px;line-height:1.08;font-weight:650;letter-spacing:-.065em;margin:14px 0}.feature-tile p{font-size:13px;line-height:1.65;color:inherit;opacity:.64;max-width:340px;margin:0}.feature-tile .image-frame{width:246px;height:541px;border:7px solid #111519;border-radius:36px;position:absolute;z-index:1;right:13%;top:240px;transform:rotate(9deg);overflow:hidden;box-shadow:0 0 0 2px #696e72,0 38px 58px rgba(6,15,25,.18);transition:transform .6s var(--ease)}.feature-tile:hover .image-frame{transform:rotate(3deg) translateY(-13px)}.feature-tile .image-frame img{width:100%;height:100%;object-fit:cover;object-position:top}.feature-tile.artists .image-frame{right:15%;transform:rotate(-7deg)}.feature-tile.artists:hover .image-frame{transform:rotate(-1deg) translateY(-13px)}.feature-tile .tile-footer{position:absolute;bottom:31px;left:43px;z-index:2;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.63}.feature-tile .tile-footer:before{content:"";width:22px;height:1px;background:currentColor;display:inline-block;vertical-align:middle;margin-right:13px}.capability-rail{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border:1px solid #e0e1e1;border-radius:19px;background:#fff;overflow:hidden}.capability{padding:37px 31px 34px;min-height:195px;display:flex;flex-direction:column;align-items:start;justify-content:space-between}.capability+.capability{border-left:1px solid #e3e5e5}.capability .icon{width:23px;height:23px;color:#506b78}.capability h4{font-size:16px;letter-spacing:-.03em;margin:14px 0 6px;font-weight:675}.capability p{font-size:12px;color:#8b8e93;max-width:290px;margin:0;line-height:1.7}
/* stats strip */
.now-playing{display:flex;align-items:center;gap:12px;margin-top:15px;background:#1b2026;border:1px solid #2b313a;border-radius:12px;padding:9px 13px;max-width:330px;min-width:0;transition:border-color .3s,background .3s}
.now-playing[hidden]{display:none}
.now-playing img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#22282f;flex:0 0 42px}
.now-playing .np-meta{display:flex;flex-direction:column;min-width:0;gap:2px}
.now-playing .np-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-playing .np-meta span:first-child{font-size:13px;color:#f5f7f9;font-weight:620;letter-spacing:-.01em}
.now-playing .np-meta span:last-child{font-size:11px;color:#8b97a3}
.now-playing .np-live{width:7px;height:7px;border-radius:50%;background:#2bd97c;flex:0 0 7px;margin-left:auto;animation:npPulse 2.2s ease-out infinite}
@keyframes npPulse{0%{box-shadow:0 0 0 0 rgba(43,217,124,.45)}70%{box-shadow:0 0 0 7px rgba(43,217,124,0)}100%{box-shadow:0 0 0 0 rgba(43,217,124,0)}}
@media(prefers-reduced-motion:reduce){.now-playing .np-live{animation:none}}
.proof{background:#15181d;border-top:1px solid #252a31;border-bottom:1px solid #252a31}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}.proof-item{padding:46px 0 48px}.proof-item+.proof-item{padding-left:55px;border-left:1px solid #31343b}.proof-item .kicker{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#919eaa;display:flex;gap:10px;align-items:center}.proof-item .kicker .icon{height:13px;width:13px}.proof-item .number{font-size:54px;letter-spacing:-.08em;font-weight:570;line-height:1.15;color:#f5f7f9;margin-top:14px}.proof-item .caption{font-size:11px;color:#747e89;margin-top:9px}
/* download */
.download{background:#f9f9f7;color:#111318;padding:150px 0 105px;position:relative;overflow:hidden}.download .eyebrow{justify-content:center;color:#83858b}.download-heading{text-align:center}.download-heading h2{font-size:clamp(66px,7vw,110px);letter-spacing:-.08em;line-height:1;margin:26px 0 21px;font-weight:650}.download-heading p{margin:auto;color:#91949b;font-size:14px;line-height:1.8;max-width:465px}.download-showcase{margin:65px auto 64px;position:relative;max-width:700px;height:154px;display:flex;align-items:center;justify-content:center}.download-showcase:before{content:"";position:absolute;inset:9px 40px;background:radial-gradient(ellipse,rgba(165,181,194,.25),transparent 70%);filter:blur(22px)}.dock{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(40,48,57,.10);padding:14px 19px;border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(230,232,234,.44));box-shadow:0 19px 40px rgba(35,40,51,.08),inset 0 1px 2px #fff;backdrop-filter:blur(14px);position:relative}.dock-item{display:grid;place-items:center;width:59px;height:59px;border:1px solid #e1e4e7;border-radius:17px;background:rgba(255,255,255,.52);color:#a6adb5;position:relative;transition:transform .35s var(--ease),box-shadow .35s}.dock-item .icon{width:24px;height:24px}.dock-item.main{width:77px;height:77px;border:1px solid #31363f;border-radius:21px;background:linear-gradient(155deg,#2d323a,#0d0e11);box-shadow:0 10px 22px #21282a44,inset 0 1px 0 rgba(255,255,255,.18);transform:translateY(-8px)}.dock-item.main img{width:55px;height:55px;object-fit:contain}.dock-item:not(.main):hover{transform:translateY(-6px);box-shadow:0 12px 19px #31384419}.download-list{max-width:910px;margin:0 auto;border-top:1px solid #e6e7e8}.download-row{min-height:123px;display:grid;grid-template-columns:1.25fr .95fr .42fr;gap:20px;align-items:center;border-bottom:1px solid #e6e7e8;padding:25px 5px}.download-row h3{margin:0 0 5px;font-size:17px;letter-spacing:-.04em;font-weight:670}.download-row .small-note{font-size:12px;color:#8b8d91}.download-row .system{font-size:12px;color:#585e66}.download-row .system span{display:block;font-size:11px;color:#a3a7ad;margin-top:5px}.download-row .row-button{justify-self:end;display:flex;align-items:center;gap:12px;border:1px solid #dddfe2;background:#fff;padding:13px 17px;border-radius:12px;font-size:12px;font-weight:680;transition:transform .22s,background .22s;white-space:nowrap}.download-row .row-button:hover{transform:translateY(-2px);background:#eef2f5}.download-row .row-button .icon{width:15px;height:15px}.download-footnote{text-align:center;margin:30px auto 0;color:#989da3;font-size:11px;max-width:730px;line-height:1.7}.download-footnote a{text-decoration:underline;text-underline-offset:4px;color:#444e59}
/* footer */
footer{background:#0e1115;color:#d7dce2;padding:55px 0 30px;border-top:1px solid #252a30}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:47px}.footer-brand{display:flex;align-items:center;gap:13px}.footer-brand img{width:32px;height:32px}.footer-brand strong{letter-spacing:.18em;font-size:16px}.footer-main .tag{font-size:13px;color:#73808f}.footer-links{display:flex;gap:28px}.footer-links a,.footer-links button{background:none;border:0;color:#9aabb7;font-size:12px;padding:0;transition:color .2s}.footer-links a:hover,.footer-links button:hover{color:white}.footer-bottom{border-top:1px solid #282b31;padding-top:21px;color:#707986;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-bottom span:first-child{max-width:660px}.toast{position:fixed;z-index:300;bottom:30px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#212a32;color:#fff;border:1px solid #485663;border-radius:12px;max-width:min(500px,calc(100vw - 30px));padding:13px 20px;font-size:12px;box-shadow:0 13px 30px #0005;transition:transform .3s,opacity .3s}.toast.show{opacity:1;transform:translate(-50%,0)}
/* MOTION */
.js .reveal{opacity:0;transform:translateY(32px);filter:blur(4px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}.js .reveal.visible{opacity:1;transform:none;filter:blur(0)}.js .hero-copy>*{animation:heroEnter .82s both var(--ease)}.js .hero-copy>*:nth-child(2){animation-delay:.12s}.js .hero-copy>*:nth-child(3){animation-delay:.24s}.js .hero-copy>*:nth-child(4){animation-delay:.35s}.js .hero-copy>*:nth-child(5){animation-delay:.43s}@keyframes heroEnter{from{opacity:0;transform:translateY(35px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Responsive */
@media(max-width:1150px){.container{width:calc(100% - 72px)}.nav-links{gap:22px;margin-right:20px}.hero{height:890px;min-height:890px}.hero-copy{padding-top:246px}.hero h1{font-size:clamp(64px,6.7vw,90px)}.hero-phone{width:650px;left:48%}.experience-board{grid-template-columns:.41fr .59fr}.experience-controls{padding:40px 30px}.lyrics-layout{gap:20px}.lyric-device.primary{left:46%}.lyric-device.back{left:8%}}
@media(max-width:850px){.container{width:calc(100% - 44px)}.topbar{width:calc(100% - 32px);height:62px;top:0;padding-left:16px}.nav-links,.nav-actions .nav-icon,.nav-actions .nav-download{display:none}.menu-toggle{display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:white;border-radius:11px;height:40px;width:40px}.mobile-menu.open{display:flex}.mobile-menu{position:fixed;pointer-events:auto;flex-direction:column;gap:1px;top:87px;left:16px;right:16px;border-radius:18px;padding:13px;background:rgba(20,24,30,.97);border:1px solid #383d43;backdrop-filter:blur(30px);box-shadow:0 20px 60px #0006}.mobile-menu a,.mobile-menu button{background:none;border:0;text-align:left;color:#f4f5f6;font-size:14px;padding:13px 14px;border-radius:11px}.mobile-menu a:hover,.mobile-menu button:hover{background:#343944}
 .hero{height:1120px;min-height:1120px}.hero-layout{display:block;min-height:1120px}.hero-copy{padding-top:166px}.hero h1{font-size:clamp(65px,10vw,105px);max-width:none;margin-top:29px}.hero .description{font-size:14px}.hero-visual{position:absolute;top:460px;left:0;right:0;height:620px}.hero-phone{width:650px;top:0;left:50%;transform:translateX(-50%)}.hero-orbit{right:-300px;top:300px}.hero-bottom{bottom:25px}.micro-caption{display:none}.ticker-inner{height:73px}
 .experience,.details{padding:100px 0}.section-intro{grid-template-columns:1fr;gap:18px}.section-intro p{justify-self:start}.section-intro h2{font-size:65px}.experience-board{grid-template-columns:1fr}.experience-controls{padding:36px;gap:16px}.experience-controls h3{font-size:36px}.experience-controls p{max-width:470px}.tab-list{grid-template-columns:repeat(2,1fr);gap:0 20px;margin-top:15px}.experience-stage{min-height:570px}.experience-stage .screen-device{height:500px;width:228px}.lyrics-section{padding:100px 0}.lyrics-layout{display:block}.lyrics-copy{padding:0 0 40px}.lyrics-copy h2{font-size:77px}.lyrics-stage{height:650px}.lyric-device{width:225px;height:499px}.lyric-device.primary{left:47%}.lyric-device.back{left:16%}.details-header h2{font-size:65px}.detail-cards{gap:12px}.feature-tile{height:580px}.feature-tile .tile-copy{padding:30px 28px}.feature-tile .tile-footer{left:28px}.feature-tile h3{font-size:35px}.feature-tile .image-frame{right:-2%;top:235px;width:215px;height:470px}.feature-tile.artists .image-frame{right:5%}.capability{padding:27px 22px}.proof-item+.proof-item{padding-left:25px}.footer-main{flex-wrap:wrap}
}
@media(max-width:600px){.container{width:calc(100% - 36px)}.header-zone{top:12px}.topbar{width:calc(100% - 26px);border-radius:15px}.brand img{width:31px;height:31px}.brand strong{font-size:14px;letter-spacing:.14em}
 .hero{height:1020px;min-height:1020px}.hero-layout{min-height:1020px}.hero-copy{padding-top:144px}.hero h1{font-size:clamp(53px,12.2vw,73px);letter-spacing:-.082em;margin:26px 0 24px}.hero h1 .line{white-space:normal}.hero .description{font-size:13px;line-height:1.75;max-width:350px}.eyebrow{font-size:9px}.hero-buttons{margin:27px 0 20px}.btn{padding:14px 17px;font-size:12px;gap:8px}.availability{font-size:10px;gap:7px}.hero-visual{top:500px;height:490px}.hero-phone{width:min(550px,124vw);left:50%;top:0}.hero-bottom{bottom:21px;font-size:9px}.hero-bottom>span:last-child{display:none}.hero-grid{background-size:78px 78px}.hero-glow{right:-160px}.ticker-inner{height:62px;gap:60px}.ticker-inner>span{font-size:9px;gap:20px}
 .experience,.details{padding:80px 0}.section-intro{margin:25px 0 35px}.section-intro h2{font-size:clamp(47px,10vw,63px)}.section-intro p{font-size:12px}.experience-board{border-radius:19px}.experience-controls{padding:27px 23px}.experience-controls h3{font-size:35px}.experience-controls p{font-size:12px}.tab-list{gap:0 10px}.screen-tab{gap:5px;padding:13px 0}.screen-tab .num{font-size:9px;width:18px}.screen-tab .name{font-size:11px}.screen-tab .icon{width:14px}.experience-stage{min-height:525px}.experience-stage .screen-device{height:456px;width:206px;transform:rotate(-6deg) translateY(27px)}.stage-note{left:19px;bottom:19px;font-size:8px}.stage-pagination{right:18px;bottom:18px}
 .lyrics-section{padding:87px 0}.lyrics-copy h2{font-size:clamp(58px,12vw,78px);margin:26px 0 23px}.lyrics-copy p{font-size:13px}.detail-line{margin-top:25px}.lyrics-stage{height:540px;border-radius:18px}.lyric-device{width:187px;height:412px;border-width:6px;border-radius:30px;top:71px!important}.lyric-device.primary{left:40%}.lyric-device.back{left:6%}.lyrics-stage .corner{right:15px;bottom:16px;font-size:8px}
 .details-header{display:block;margin-bottom:29px}.details-header h2{font-size:clamp(48px,11vw,68px)}.details-header p{margin:17px 0 0;font-size:12px}.detail-cards{grid-template-columns:1fr;gap:13px}.feature-tile{height:520px;border-radius:18px}.feature-tile .tile-copy{padding:28px 26px}.feature-tile h3{font-size:38px}.feature-tile .image-frame{top:180px;right:13%;width:210px;height:460px}.feature-tile.artists .image-frame{right:13%}.capability-rail{grid-template-columns:1fr}.capability+.capability{border-left:0;border-top:1px solid #e3e5e5}.capability{min-height:155px;padding:25px}.proof-grid{grid-template-columns:1fr 1fr}.proof-item{padding:32px 0}.proof-item+.proof-item{padding-left:15px}.proof-item:last-child{grid-column:span 2;border-top:1px solid #30343b;border-left:0;padding-left:0}.proof-item .number{font-size:40px}.proof-item .caption{font-size:10px}
 .download{padding:88px 0 70px}.download-heading h2{font-size:clamp(50px,11vw,73px);margin:20px 0}.download-heading p{font-size:12px}.download-showcase{height:128px;margin:30px auto 33px}.dock{gap:7px;padding:12px}.dock-item{width:45px;height:45px;border-radius:13px}.dock-item .icon{width:21px}.dock-item.main{width:60px;height:60px;border-radius:16px}.dock-item.main img{width:44px;height:44px}.download-row{min-height:112px;grid-template-columns:1fr auto;gap:12px;padding:23px 0}.download-row h3{font-size:14px}.download-row .small-note{font-size:11px}.download-row .system{display:none}.download-row .row-button{padding:11px 12px;font-size:11px}.footer-main{display:block}.footer-main .tag{margin-top:16px}.footer-links{margin-top:26px;gap:20px;flex-wrap:wrap}.footer-bottom{display:block}.footer-bottom span:last-child{display:block;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.js .reveal{opacity:1;transform:none;filter:none}}
@media(max-width:600px){.feature-tile{height:575px}.feature-tile .image-frame,.feature-tile.artists .image-frame{top:245px}}

/* V4 CORRECTIONS — exact, fully visible phone screenshot; accurately proportioned transparent K */
.brand img{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.brand{gap:12px}
.footer-brand img{width:29px;height:29px;object-fit:contain}
.dock-item.main img{width:46px;height:46px;object-fit:contain}
.hero{height:900px;min-height:900px}
.hero-layout{min-height:900px;grid-template-columns:1.07fr .93fr}
.hero-copy{padding-top:250px}
.hero-visual{height:100%;overflow:visible}
.hero-phone-scene{position:absolute;inset:96px -30px 44px -28px;display:grid;place-items:center;isolation:isolate}
.hero-light-ring{position:absolute;inset:7% 5% 6%;border:1px solid rgba(220,236,248,.075);border-radius:50%;transform:scale(.93);box-shadow:0 0 0 58px rgba(255,255,255,.012),0 0 0 130px rgba(255,255,255,.006)}
.hero-light-ring:after{content:'';position:absolute;inset:18%;border:1px solid rgba(220,236,248,.065);border-radius:50%}
.hero-device{position:relative;width:min(340px,24vw);aspect-ratio:0.4526;padding:8px;border-radius:49px;background:linear-gradient(120deg,#424a56 0%,#080b0f 16%,#20242c 48%,#050608 80%,#59616b 100%);border:1px solid #454b55;box-shadow:0 0 0 2px #06080b,0 0 0 3px #636973,0 36px 90px #0009,18px 10px 45px #07090d88,inset 0 1px 3px #ffffff66;transform:rotate(-3deg);animation:deviceFloat 9s ease-in-out infinite alternate;z-index:2;overflow:hidden;will-change:transform}
.hero-device-screen{width:100%;height:100%;overflow:hidden;border-radius:41px;background:#2e3338;position:relative}
.hero-device-screen img{display:block;width:100%;height:100%;object-fit:fill;object-position:top;user-select:none}
.hero-device-camera{position:absolute;z-index:3;top:17px;left:50%;transform:translateX(-50%);width:13px;height:13px;background:radial-gradient(circle at 55% 45%,#1e2735 0 20%,#020307 22% 60%,#181a20 63%);border:2px solid #13161d;border-radius:50%;box-shadow:0 1px 3px #0009}
.device-glint{position:absolute;z-index:3;inset:1px;pointer-events:none;border-radius:47px;box-shadow:inset 2px 1px 1px #ffffff30,inset -2px 0 2px #cdd7e233}
@keyframes deviceFloat{from{transform:translateY(6px) rotate(-3deg)}to{transform:translateY(-12px) rotate(-2deg)}}
.hero-track-label{position:absolute;z-index:4;right:0;bottom:125px;display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:linear-gradient(135deg,rgba(40,49,61,.75),rgba(25,30,38,.60));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 18px 45px #0005;color:#eaf2f8;font-size:10px;font-weight:780;letter-spacing:.15em;transform:translateX(14px)}
.hero-track-label small{display:block;margin-top:5px;font-size:11px;font-weight:450;color:#aab7c4;letter-spacing:0}
.label-pulse{width:7px;height:7px;flex:none;border-radius:50%;background:#c0d9e6;box-shadow:0 0 0 5px #b2c6d11c,0 0 15px #bcdbe366;animation:blinkPulse 2.5s ease-in-out infinite}
@keyframes blinkPulse{50%{opacity:.5;transform:scale(.7)}}
.micro-caption{left:0;bottom:170px}
@media(max-width:1150px){.hero{height:850px;min-height:850px}.hero-layout{min-height:850px}.hero-copy{padding-top:220px}.hero-phone-scene{inset:100px -24px 44px -12px}.hero-device{width:min(290px,29vw)}.hero-track-label{right:-10px;bottom:100px}}
@media(max-width:850px){.hero{height:1140px;min-height:1140px}.hero-layout{min-height:1140px}.hero-copy{padding-top:166px}.hero-visual{position:absolute;top:470px;left:0;right:0;height:635px}.hero-phone-scene{inset:0;place-items:center}.hero-device{width:min(280px,45vw)}.hero-track-label{right:5%;bottom:75px}.hero-light-ring{inset:7% 21%}.micro-caption{display:none}}
@media(max-width:600px){.brand img{width:28px;height:28px;flex-basis:28px}.hero{height:1120px;min-height:1120px}.hero-layout{min-height:1120px}.hero-copy{padding-top:144px}.hero-visual{top:525px;height:560px;left:0;right:0}.hero-phone-scene{inset:0}.hero-device{width:min(247px,65vw);border-radius:38px;padding:6px;transform:rotate(-1deg);animation:deviceFloatMobile 8s ease-in-out infinite alternate}.hero-device-screen{border-radius:32px}.hero-device-camera{top:13px;width:10px;height:10px}.hero-light-ring{inset:4% 2% 5%;transform:scale(1)}.hero-track-label{bottom:26px;right:-9px;padding:10px 12px;font-size:8px}.hero-track-label small{font-size:9px}.hero-bottom{bottom:16px}.dock-item.main img{width:39px;height:39px}}
@keyframes deviceFloatMobile{from{transform:translateY(5px) rotate(-1deg)}to{transform:translateY(-7px) rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.hero-device,.label-pulse{animation:none!important}}


/* Verified device spacing: visual never overlaps CTAs or gets cut off */
@media(min-width:1151px){.hero-device{width:min(320px,23vw)}.hero-track-label{bottom:110px}}
@media(min-width:601px) and (max-width:850px){.hero{height:1350px;min-height:1350px}.hero-layout{min-height:1350px}.hero-visual{top:640px;height:655px}.hero-device{width:min(280px,45vw)}.hero-track-label{bottom:64px}}
@media(max-width:600px){.hero{height:1250px;min-height:1250px}.hero-layout{min-height:1250px}.hero-visual{top:625px;height:565px}.hero-track-label{bottom:26px}}





/* ===========================================================
   Ketvoice 4 / optical glass + intentional motion
   UI Layouts React adapter: see UI_LAYOUTS_INTEGRATION.md
   A standalone implementation is required for plain HTML preview.
   =========================================================== */
:root{--easing-kinetic:cubic-bezier(.16,1,.3,1)}
/* Remove previous decorative noise. Let the screenshots do the talking. */
.hero-grid{opacity:.28;background-size:170px 170px}.hero-waves path{stroke:rgba(170,218,240,.13);stroke-width:1}.hero-light-ring{opacity:.6}
.hero-copy .eyebrow{font-size:11px;letter-spacing:.13em;color:#bac9d3;font-weight:600}
.hero h1{margin-top:26px;margin-bottom:27px}.hero .description{font-size:17px;line-height:1.65;max-width:460px;color:#b7bec9}
.hero-buttons{margin-top:32px}.hero-phone-scene{inset:96px -30px 44px -28px}
.experience{padding:126px 0 108px}.section-intro{margin:0 0 46px}.section-intro h2{font-size:clamp(58px,5.8vw,91px)}.section-intro p{font-size:14px;line-height:1.6;max-width:260px}.experience-controls p{line-height:1.7}
.details{padding:112px 0 110px}.details-header{margin-bottom:44px}.details-header h2{margin-top:0}.feature-tile{height:570px}.feature-tile .tile-copy{padding:36px 39px}.feature-tile .image-frame{top:164px;right:14%}.feature-tile.artists .image-frame{right:16%}.feature-tile h3{font-size:clamp(35px,3.3vw,46px)}
.proof-item{padding:32px 0 36px}.proof-item .number{font-size:43px;margin-top:8px}.proof-item .kicker{letter-spacing:.11em}
.download{padding:107px 0 91px}.download-heading h2{font-size:clamp(59px,7vw,102px);margin:8px 0 15px}.download-heading p{font-size:15px}.download-list{margin-top:66px}.download-row{grid-template-columns:1fr auto;gap:32px}.download-footnote{margin-top:22px}footer{padding:38px 0 24px}.footer-main{padding-bottom:30px}
/* Optical navigation lens: light changes with pointer and changes tint on light sections. */
.header-zone{top:16px}.topbar{
 --light-x:48%; --light-y:0%; --glass-angle:130deg;
 width:min(1250px,calc(100% - 60px));height:70px;padding:0 12px 0 22px;
 color:#f9fdff;isolation:isolate;overflow:visible;position:relative;
 border-radius:23px;border:1px solid rgba(228,241,255,.32);
 background:linear-gradient(119deg,rgba(194,214,228,.18),rgba(55,65,81,.30) 48%,rgba(213,232,247,.12));
 -webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.12);
 backdrop-filter:blur(30px) saturate(190%) brightness(1.12);
 box-shadow:0 20px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.33),inset 0 -1px 0 rgba(255,255,255,.09),inset 1px 0 1px rgba(255,255,255,.08);
 transition:background .4s,color .4s,border-color .4s,box-shadow .4s;
}
.topbar::before{
 content:"";position:absolute;inset:1px;border-radius:22px;pointer-events:none;z-index:-1;
 background:radial-gradient(420px 115px at var(--light-x) var(--light-y),rgba(236,248,255,.31),rgba(207,230,247,.10) 40%,transparent 78%),linear-gradient(90deg,rgba(255,255,255,.025),transparent 45%,rgba(255,255,255,.025));
 opacity:.85;transition:opacity .35s;
 filter:url(#kv-liquid-edge);
}
.topbar::after{
 content:"";pointer-events:none;position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:3;
 background:conic-gradient(from var(--glass-angle) at 50% 50%,rgba(255,255,255,.02) 1deg,rgba(255,255,255,.8) 67deg,rgba(255,255,255,.07) 125deg,rgba(255,255,255,.43) 255deg,rgba(255,255,255,.04) 310deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
.topbar.scrolled:not(.glass-on-light){background:linear-gradient(120deg,rgba(115,143,165,.22),rgba(22,28,38,.61));border-color:rgba(255,255,255,.36)}
.topbar.glass-on-light{color:#151a21;border-color:rgba(255,255,255,.82);background:linear-gradient(115deg,rgba(249,250,251,.70),rgba(224,233,241,.60) 55%,rgba(249,251,253,.76));-webkit-backdrop-filter:blur(27px) saturate(165%);backdrop-filter:blur(27px) saturate(165%);box-shadow:0 18px 45px rgba(40,52,65,.12),inset 0 1px 0 #ffffffef,inset 0 -1px 0 #ffffffa6}
.topbar.glass-on-light::before{background:radial-gradient(430px 105px at var(--light-x) var(--light-y),rgba(255,255,255,.92),rgba(245,250,255,.28) 54%,transparent 83%)}
.topbar .brand{position:relative;z-index:4}.topbar .brand img{width:32px;height:32px;flex:0 0 32px}.topbar .brand strong{font-size:15px;letter-spacing:.14em}
.topbar .nav-links{gap:30px;margin-right:27px;position:relative;z-index:4}.topbar .nav-links a{font-size:13px;color:rgba(233,241,249,.78);font-weight:500;transition:color .2s}.topbar .nav-links a:hover,.topbar .nav-links a.active{color:#fff}
.topbar.glass-on-light .brand img{filter:brightness(.28) contrast(1.35)}
.topbar.glass-on-light .nav-links a{color:#454f5b}.topbar.glass-on-light .nav-links a:hover,.topbar.glass-on-light .nav-links a.active{color:#101318}
.topbar .nav-actions{position:relative;z-index:4}.topbar .nav-icon{border-radius:14px;height:44px;width:44px;color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.21);box-shadow:inset 0 1px 0 #ffffff20}
.topbar .nav-download{height:44px;border-radius:14px;font-weight:700;font-size:12px;background:#f5f9fb;color:#121820;padding:0 20px}
.topbar.glass-on-light .nav-icon{background:#ffffff7d;color:#1c2834;border-color:rgba(45,56,67,.15)}
.topbar.glass-on-light .nav-download{background:#151b24;color:white}
.topbar.glass-on-light .menu-toggle{background:#ffffff9e;color:#1c2834;border-color:#b8c3cb}
/* One real button interaction system: noticeable 10px lift + pointer-follow and spring return. */
.btn,.nav-icon,.nav-download,.download-row .row-button{--mx:0px;--my:0px;--pull:0px;--s:1;--shine-x:50%;--shine-y:50%;position:relative;isolation:isolate;transform:translate3d(var(--mx),calc(var(--my) + var(--pull)),0) scale(var(--s));transition:background-color .35s,box-shadow .45s,border-color .35s,color .35s;will-change:transform}


.btn::after,.nav-icon::after,.nav-download::after,.download-row .row-button::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;z-index:2;background:radial-gradient(145px circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.50),rgba(255,255,255,.09) 44%,transparent 77%);mix-blend-mode:soft-light;transition:opacity .3s}
.btn:hover::after,.nav-icon:hover::after,.nav-download:hover::after,.download-row .row-button:hover::after{opacity:.95}
.btn.primary:hover{box-shadow:0 22px 44px rgba(182,220,242,.23),0 4px 20px #0006!important}.btn.ghost:hover{box-shadow:0 20px 38px rgba(0,0,0,.42),inset 0 1px 0 #fff5!important;border-color:#ffffff70!important}

/* motion choreography: scroll-revealed actual screenshots only */
.js .reveal{transition:opacity .8s var(--easing-kinetic),transform .9s var(--easing-kinetic),filter .8s ease}
.feature-tile{transition:transform .75s var(--easing-kinetic),box-shadow .75s ease}.feature-tile:hover{transform:translateY(-9px);box-shadow:0 36px 78px rgba(15,29,40,.15)}
.feature-tile .image-frame{transition:transform 1s var(--easing-kinetic)}
.download-row .row-button{border-radius:13px}
@media(max-width:1150px){.topbar .nav-links{gap:20px;margin-right:17px}}
@media(max-width:850px){.topbar{width:calc(100% - 28px);height:64px;padding-left:15px}.topbar .nav-links{display:none}.topbar .nav-download,.topbar .nav-actions .nav-icon{display:none}.mobile-menu{top:84px}.experience{padding:96px 0}.details{padding:94px 0}.feature-tile{height:550px}.feature-tile .image-frame{top:215px}.download{padding:88px 0}}
@media(max-width:600px){.hero .description{font-size:14px}.topbar{height:62px;border-radius:19px}.topbar::before{border-radius:18px}.topbar .brand img{width:29px;height:29px;flex:0 0 29px}.experience,.details{padding:80px 0}.section-intro p{max-width:310px}.details-header p{display:none}.feature-tile{height:545px}.feature-tile .image-frame{top:196px}.proof-item{padding:23px 0}.proof-item .number{font-size:37px}.download-heading h2{font-size:clamp(53px,11vw,80px)}.download-list{margin-top:48px}.download-row{gap:12px}.footer-links{gap:17px}}
@media(prefers-reduced-motion:reduce){.btn,.nav-icon,.nav-download,.download-row .row-button{transform:none!important;transition:none!important}.topbar::before{transition:none}.feature-tile:hover{transform:none}}
/* ===========================================================
   V5 MOTION — choreography, depth and micro-feedback
   Everything is transform/opacity/filter only (compositor-safe),
   every behavior gated by prefers-reduced-motion.
   =========================================================== */

/* --- 1. Headline choreography: lines rise through a clip mask,
        the gradient line carries a slow light sheen. --- */
.js .hero h1 .line{animation:lineUp 1.05s var(--easing-kinetic) both}
.js .hero h1 .line:nth-child(2){animation-delay:.16s}
@keyframes lineUp{from{clip-path:inset(-8% -6% 104% -4%);transform:translateY(.38em)}to{clip-path:inset(-8% -6% -12% -4%);transform:none}}
.hero h1 .gradient{background:linear-gradient(115deg,#fff 2%,#cde0ea 34%,#93b4c9 50%,#cde0ea 66%,#fff 98%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;animation:gradientSheen 8s ease-in-out infinite}
@keyframes gradientSheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero .description{transition:color .4s}

/* --- 2. Stage: crossfading background, light sweep on switch,
        clickable pagination dots, animated copy swap. --- */
.experience-stage{transition:background 1.1s ease}
.experience-stage:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.10) 50%,transparent 70%);transform:translateX(-60%)}
.experience-stage.sweep:after{animation:stageSweep .9s var(--ease) forwards}
@keyframes stageSweep{0%{opacity:1;transform:translateX(-60%)}100%{opacity:1;transform:translateX(60%)}}
.device-tilt{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .55s var(--easing-kinetic);transform-style:preserve-3d;will-change:transform}
.hero-phone-scene{transform:perspective(1300px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s var(--easing-kinetic);transform-style:preserve-3d;will-change:transform}
@media(prefers-reduced-motion:reduce){.hero-phone-scene{transform:none!important;transition:none}}
.stage-pagination{position:absolute;right:34px;bottom:26px;display:flex;gap:7px;z-index:4}
.stage-pagination button{width:26px;height:20px;padding:0;border:0;background:transparent;position:relative;cursor:pointer}
.stage-pagination button:before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;background:rgba(255,255,255,.26);transition:background .35s,transform .35s var(--easing-kinetic)}
.stage-pagination button:hover:before{background:rgba(255,255,255,.55);transform:scaleY(2.4)}
.stage-pagination button.on:before{background:#fff;width:26px;box-shadow:0 0 12px rgba(255,255,255,.5)}
.stage-pagination button:focus-visible{outline:1px solid #b1d6ed;outline-offset:3px}
.screen-title-swap,.screen-desc-swap{animation:copySwap .5s var(--easing-kinetic) both}
@keyframes copySwap{from{opacity:0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
#screen-counter{transition:opacity .3s}
.counter-swap{animation:counterSwap .45s var(--easing-kinetic) both}
@keyframes counterSwap{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* --- 3. Numbers: tabular, count-up friendly, pop on change. --- */
.proof-item .number{font-variant-numeric:tabular-nums}
.number.pop{animation:numberPop .55s var(--easing-kinetic)}
@keyframes numberPop{0%{transform:scale(1)}35%{transform:scale(1.06)}100%{transform:scale(1)}}
#stat-listeners{transition:color .4s}

/* --- 4. Listening Now card: tick on track change --- */
.now-playing.tick{animation:npTick .6s var(--easing-kinetic)}
@keyframes npTick{0%{transform:scale(.97);border-color:rgba(43,217,124,.55)}55%{transform:scale(1.015)}100%{transform:scale(1)}}
.now-playing img{transition:opacity .45s,transform .45s var(--easing-kinetic)}
.now-playing img.swap{opacity:0;transform:scale(.9) rotate(-3deg)}

/* --- 5. Reveal groups: children cascade --- */
.js .reveal-group>*{opacity:0;transform:translateY(30px);transition:opacity .85s var(--easing-kinetic),transform .85s var(--easing-kinetic)}
.js .reveal-group.visible>*{opacity:1;transform:none}
.js .reveal-group.visible>*:nth-child(2){transition-delay:.1s}
.js .reveal-group.visible>*:nth-child(3){transition-delay:.2s}
.js .reveal-group.visible>*:nth-child(4){transition-delay:.3s}
.js .reveal-group.visible>*:nth-child(5){transition-delay:.4s}

/* --- 6. Topbar: hides on scroll down, returns on scroll up --- */
.header-zone{transition:transform .55s var(--easing-kinetic)}
.header-zone.idle{transform:translateY(-130%)}
.mobile-menu{transition:opacity .3s,transform .35s var(--easing-kinetic)}

/* --- 7. Back to top --- */
.to-top{position:fixed;right:26px;bottom:26px;z-index:120;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;cursor:pointer;color:#eef4f8;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(44,54,68,.72),rgba(22,27,35,.62));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.28);opacity:0;transform:translateY(18px) scale(.92);pointer-events:none;transition:opacity .35s,transform .45s var(--easing-kinetic),background .3s,box-shadow .35s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.4)}
.to-top:active{transform:scale(.94)}
.to-top .icon{width:19px;height:19px}

/* --- 8. Tabs & rows: press feedback --- */
.screen-tab:active{transform:translateX(4px)}
.download-row{transition:background .3s}
.download-row:hover{background:rgba(120,140,160,.045)}
.download-row .row-button:active{transform:translateY(1px) scale(.97)}
.screen-device{transition:transform .85s var(--easing-kinetic),opacity .3s,filter .4s,box-shadow .5s}
.screen-device.changing{opacity:.3;filter:blur(8px)}
.experience-stage .screen-device{box-shadow:0 0 0 2px #69707b,0 0 0 4px #15181c,0 35px 80px rgba(0,0,0,.56),inset 0 0 0 2px #232529}

/* --- 9. Mobile tweaks --- */
@media(max-width:600px){.stage-pagination{right:18px;bottom:18px}.to-top{right:16px;bottom:16px;width:46px;height:46px;border-radius:15px}}

/* --- 10. Reduced motion: kill every added behavior --- */
@media(prefers-reduced-motion:reduce){
 .js .hero h1 .line,.hero h1 .gradient,.experience-stage:after,.number.pop,.now-playing.tick,.now-playing img{animation:none!important}
 .js .reveal-group>*{opacity:1;transform:none;transition:none}
 .header-zone{transition:none}
 .device-tilt{transform:none!important;transition:none}
 .to-top{transition:none}
}

/* ================= V6 WHAT'S NEW =================
   Release-notes card in the download section, fed live
   from the latest GitHub release body (js/main.js). */
.release-notes{max-width:910px;margin:34px auto 0;border:1px solid rgba(40,48,57,.10);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(232,234,236,.5));padding:24px 28px 10px;box-shadow:0 14px 34px rgba(35,40,51,.06),inset 0 1px 2px #fff;backdrop-filter:blur(14px)}
.release-notes .rn-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.release-notes .kicker{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;color:#83858b;font-weight:730}
.release-notes .kicker .icon{width:13px;height:13px}
.release-notes h3{margin:0;font-size:19px;letter-spacing:-.035em;font-weight:680;color:#111318}
.release-notes ul{list-style:none;margin:0;padding:0}
.release-notes li{padding:12px 0;border-top:1px solid #ececee;font-size:12.5px;line-height:1.7;color:#8b8d91;overflow-wrap:anywhere}
.release-notes li:first-child{border-top:0}
.release-notes li strong{display:block;color:#111318;font-size:13.5px;letter-spacing:-.02em;font-weight:680;margin-bottom:3px}
@media(max-width:600px){.release-notes{padding:18px 18px 4px;margin-top:24px}.release-notes h3{font-size:16px}.release-notes li{font-size:11.5px;padding:10px 0}}
@media(prefers-reduced-motion:reduce){.release-notes{transition:none}}