@font-face{font-family:"Poppins";src:url(/fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --tx:#1f1720;--mut:#6d6170;--line:rgba(31,23,32,.1);--card:#fff;
  --peach:#ffe2d1;--sun:#ffd44d;--mint:#d2f6e6;--sky:#d9f3ff;
  --flame:#ff5a36;--flame2:#e8431f;--gold:#f2b705;--leaf:#17a05a;
  --max:1140px;--rad:22px;color-scheme:light
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--tx);font:16px/1.65 Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:88px;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#ffe9dc 0%,#fff3d9 38%,#e3f8ee 72%,#dff2fb 100%) fixed;background-color:#fff3e6}
@media (min-width:900px){body{padding-bottom:0}}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tx);color:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3{margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(1.8rem,4.2vw,2.7rem)}
h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
.mut{color:var(--mut)}
small,.small{font-size:.86rem}

/* header */
header.top{position:sticky;top:0;z-index:20;background:rgba(255,246,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--tx)}
.brand i svg{width:20px;height:20px}
.top nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.top nav a{color:var(--tx);text-decoration:none;padding:8px 14px;border-radius:999px;font-size:.92rem;font-weight:600;opacity:.75;transition:opacity .2s,background .2s}
.top nav a:hover{opacity:1;background:rgba(31,23,32,.06)}
.top nav .hide-s{display:none}
@media (min-width:880px){.top nav .hide-s{display:inline-block}}
.top nav .nav-buy{display:none;background:var(--tx);color:#fff;opacity:1;margin-left:8px}
.top nav .nav-buy:hover{background:var(--flame)}
@media (min-width:880px){.top nav .nav-buy{display:inline-block}}
.lang{box-shadow:inset 0 0 0 1px var(--line);opacity:1!important}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 28px;border-radius:999px;font:600 1rem/1.2 Poppins,system-ui,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn-buy{background:var(--flame);color:#fff;box-shadow:0 14px 30px -12px rgba(255,90,54,.75)}
.btn-buy:hover{background:var(--flame2);transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(232,67,31,.8)}
.btn-ghost{background:#fff;color:var(--tx);box-shadow:0 1px 0 var(--line),0 8px 20px -14px rgba(31,23,32,.35)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn .p{padding-left:12px;border-left:1px solid rgba(255,255,255,.4)}
.btn[aria-disabled=true]{background:#efe6df;color:#6d6170;box-shadow:none;cursor:not-allowed;transform:none}

/* hero (product layout) */
.hero{padding:40px 0 64px}
.hero .wrap{display:grid;gap:36px;align-items:center}
@media (min-width:920px){.hero{padding:64px 0 88px}.hero .wrap{grid-template-columns:1fr 1fr;gap:56px}}
.shot{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(80,30,10,.55);background:#000;aspect-ratio:1/1;max-width:520px;width:100%;margin:0 auto}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.03)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;font-size:.82rem;font-weight:600;box-shadow:0 1px 0 var(--line)}
.pill b{width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.hero h1{font-size:clamp(2.6rem,7vw,4.4rem);margin:16px 0 6px;line-height:1.02}
.hero .sub{font-size:1.15rem;font-weight:600;color:var(--flame2);margin-bottom:14px}
.hero .lede{font-size:1.05rem;color:#3d3240;max-width:520px}
.priceline{display:flex;align-items:baseline;gap:12px;margin:22px 0 4px}
.priceline b{font-size:2.2rem;font-weight:800;letter-spacing:-.02em}
.priceline small{color:var(--mut)}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 14px}
.perks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;font-size:.93rem;color:#3d3240}
.perks li{display:flex;align-items:center;gap:10px}
.perks svg{width:20px;height:20px;color:var(--leaf);flex:none}

/* sections */
section{padding:72px 0}
.head{max-width:640px;margin-bottom:32px}
.head p{color:var(--mut);font-size:1.03rem}
.card{background:var(--card);border-radius:var(--rad);box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(80,30,10,.45)}

/* player */
.player{padding:24px;display:grid;gap:18px}
@media (min-width:860px){.player{grid-template-columns:1.25fr 1fr;padding:32px;gap:32px}}
.tracks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.track{--p:0;--a:var(--flame);display:grid;grid-template-columns:58px 1fr auto;gap:6px 16px;align-items:center}
.track .t{font-weight:600;font-size:1.05rem;line-height:1.25}
.track .m{font-size:.85rem;color:var(--mut)}
.track .bpm{font-size:.8rem;font-weight:600;color:var(--mut)}
.play{width:58px;height:58px;border-radius:50%;border:0;background:var(--a);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 12px 24px -10px var(--a);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.play:hover{transform:scale(1.07)}
.play:active{transform:scale(.95)}
.play svg{width:21px;height:21px}
.play .i-pause{display:none}
.play[aria-pressed=true] .i-play{display:none}
.play[aria-pressed=true] .i-pause{display:block}
.wave{grid-column:1/4;position:relative;height:56px;margin-top:8px;cursor:pointer}
.wave svg{position:absolute;inset:0;width:100%;height:100%}
.wave .w0 rect{fill:rgba(31,23,32,.13)}
.wave .w1{clip-path:inset(0 calc(100% - var(--p)*100%) 0 0)}
.wave .w1 rect{fill:var(--a)}
.small-track .play{width:46px;height:46px}
.small-track{grid-template-columns:46px 1fr auto}
.small-track .wave{height:34px}
.chap{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chap button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:12px;background:#f7f1ec;color:var(--tx);font:500 .9rem/1.2 Poppins,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.chap button:hover{background:#efe5dd}
.chap button span{font-size:.75rem;color:var(--mut)}
.chap button.cur{background:var(--tx);color:#fff}
.chap button.cur span{color:#ffd9c9}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--mint);color:#0d6b3b}

/* contents */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:780px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{padding:22px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tile:hover{transform:translateY(-4px)}
.tile b{display:block;font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--a,var(--flame))}
.tile span{display:block;margin-top:8px;font-weight:600}
.tile small{display:block;color:var(--mut);font-size:.78rem;margin-top:2px;line-height:1.4}
.loops{margin-top:18px;overflow:hidden}
.loops .row{display:grid;grid-template-columns:130px 70px 1fr;gap:12px;align-items:center;padding:14px 22px;border-top:1px solid var(--line)}
.loops .row:first-child{border-top:0}
.loops .row.h{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:#fbf7f3}
.loops .n{font-weight:600}
.loops .b{font-weight:600;color:var(--flame2)}
@media (max-width:560px){.loops .row{grid-template-columns:1fr auto}.loops .row .chips{grid-column:1/3}.loops .row.h{display:none}}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips span{font-size:.72rem;font-weight:500;padding:3px 10px;border-radius:999px;background:#f5efe9;color:#4d4150}
.specs{display:grid;gap:14px;margin-top:18px}
@media (min-width:780px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{padding:22px;display:flex;gap:14px;align-items:flex-start}
.spec .ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--b,var(--peach));color:var(--c,var(--flame2))}
.spec .ic svg{width:21px;height:21px}
.spec p{margin:0;color:var(--mut);font-size:.92rem}
.spec h3{margin-bottom:.2em}

/* why */
.why{display:grid;gap:14px}
@media (min-width:800px){.why{grid-template-columns:repeat(3,1fr)}}
.why > div{padding:26px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.why > div:hover{transform:translateY(-4px)}
.why .k{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;margin-bottom:16px;background:var(--b);color:var(--c)}
.why .k svg{width:22px;height:22px}
.why p{color:var(--mut);margin:0;font-size:.95rem}

/* license & delivery */
.grid2{display:grid;gap:14px}
@media (min-width:860px){.grid2{grid-template-columns:1fr 1fr}}
.panel{padding:30px}
.panel h2{font-size:clamp(1.5rem,3vw,1.9rem)}
ul.check{list-style:none;padding:0;margin:0 0 1em}
ul.check li{position:relative;padding-left:32px;margin:.6em 0}
ul.check li::before{content:"";position:absolute;left:0;top:.25em;width:21px;height:21px;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
ul.check li.no::before{background:var(--flame) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23fff' stroke-width='3.5' d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 1em}
ol.steps li{counter-increment:s;position:relative;padding-left:46px;margin:0 0 16px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.9rem;background:var(--tx);color:#fff}

/* faq */
.faq .wrap{max-width:820px}
details{padding:0 22px;margin-top:10px}
details>summary{cursor:pointer;padding:18px 34px 18px 0;font-weight:600;list-style:none;position:relative}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"";position:absolute;right:2px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
details[open]>summary::after{transform:rotate(135deg)}
details[open]{padding-bottom:18px}
details p{color:#4d4150;margin:0}

/* creator */
.creator{padding:30px;display:grid;gap:8px;max-width:820px}

/* final cta */
.buybox{display:grid;gap:26px;align-items:center;padding:28px;background:var(--tx);color:#fff}
@media (min-width:780px){.buybox{grid-template-columns:200px 1fr;padding:40px}}
.buybox img{width:100%;max-width:200px;border-radius:18px;margin:0 auto}
.buybox h2{color:#fff}
.buybox p,.buybox .mut{color:#d9cfd9}
.buybox a{color:#fff}
.buybox .btn[aria-disabled=true]{background:rgba(255,255,255,.12);color:#e9e1e9}
.price{display:flex;align-items:baseline;gap:10px;margin:6px 0}
.price b{font-size:2.4rem;font-weight:800;letter-spacing:-.02em}

/* sticky mobile */
.sticky{position:fixed;left:10px;right:10px;bottom:10px;z-index:30;border-radius:20px;background:#fff;color:var(--tx);box-shadow:0 18px 40px -10px rgba(31,23,32,.35),0 0 0 1px var(--line);padding:9px 9px 9px 18px;margin-bottom:env(safe-area-inset-bottom);display:flex;gap:12px;align-items:center;justify-content:space-between;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.sticky .p{font-weight:800;font-size:1.25rem;line-height:1.1}
.sticky .p small{display:block;font-weight:500;font-size:.72rem;color:var(--mut)}
.sticky .btn{min-height:46px;padding:10px 20px}
.sticky[hidden]{display:flex;transform:translateY(130%);opacity:0;pointer-events:none;visibility:hidden}
@media (min-width:900px){.sticky,.sticky[hidden]{display:none}}

footer{padding:40px 0 52px;color:var(--mut);font-size:.9rem;border-top:1px solid var(--line)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px}
footer a{color:var(--tx);text-decoration:none;font-weight:500}
footer a:hover{color:var(--flame2)}

/* inner pages */
.page{padding:8px 0 72px}
.page .doc{padding:28px;max-width:820px}
@media (min-width:700px){.page .doc{padding:44px}}
.prose h2{margin-top:1.4em;font-size:clamp(1.4rem,3vw,1.8rem)}
.prose h3{margin-top:1.3em}
.prose ul{padding-left:1.2em}
.prose ul.tracks,.prose ul.check{padding-left:0}
.prose a{color:var(--flame2)}
.crumbs{font-size:.86rem;color:var(--mut);margin:26px 0 14px}
.crumbs a{color:var(--mut)}
.page h1{font-size:clamp(2rem,5.5vw,3rem)}
.lead{font-size:1.08rem}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--mint);margin:0 0 18px;font-size:.95rem}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;background:#fbf7f3;padding:6px 10px;margin:12px 0}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;font-weight:600}
.page .buybox{margin-top:36px}
.page .buybox img{max-width:160px}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .hero .in-1,.hero .in-2,.hero .in-3{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
  .hero .in-2{animation-delay:.1s}.hero .in-3{animation-delay:.2s}
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
  .js [data-reveal].in{opacity:1;transform:none}
}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}