@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url(fonts/SpaceMono-700.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:500;font-display:swap;src:url(fonts/Unbounded-500.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:700;font-display:swap;src:url(fonts/Unbounded-700.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:800;font-display:swap;src:url(fonts/Unbounded-800.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-weight:900;font-display:swap;src:url(fonts/Unbounded-900.woff2) format('woff2')}
:root{--bg:#2a2a2a;--ink:#f5f5f2;--blue:#4474bb;--mag:#a63a7e;--pink:#d6347c;--gold:#9c8450;--red:#d83a2e;--panel:#323230;--line:#434340;--mut:#9b9a94;
--ease:cubic-bezier(.2,.8,.2,1);--gut:clamp(18px,4.4vw,56px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--ink);font-family:'Unbounded',system-ui,sans-serif;font-weight:500;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:'Space Mono',monospace;font-weight:700}
.wrap{padding:0 var(--gut);max-width:1360px;margin:0 auto}
section{padding:clamp(56px,9vw,116px) 0}
h2{font-weight:900;font-size:clamp(30px,5.2vw,64px);line-height:.95;letter-spacing:-.04em}
.kick{color:var(--gold);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.kick i{width:10px;height:10px;border-radius:50%;background:var(--blue);display:block}
.lead{color:var(--mut);font-size:clamp(13px,1.3vw,16px);max-width:60ch;margin-top:18px;font-weight:500}
/* pills */
.pill{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:99px;border:2.5px solid var(--ink);font-weight:800;font-size:13px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:all .35s var(--ease)}
.pill.on{background:var(--ink);color:var(--bg)}
.pill:hover{transform:translateY(-2px)}
.pill.sm{padding:9px 18px;font-size:11px;border-width:2px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;border:2px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.chip b{font-family:'Space Mono',monospace;color:var(--gold);font-size:12px}
/* header */
header{position:sticky;top:0;z-index:20;background:rgba(42,42,42,.92);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand .eye{width:40px;height:40px}
nav{display:flex;gap:26px;margin-left:30px;flex:1}
nav a{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--mut);transition:color .3s}
nav a:hover{color:var(--ink)}
/* hero */
.hero{padding-top:clamp(34px,6vw,76px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-weight:900;font-size:clamp(54px,10.2vw,152px);line-height:.86;letter-spacing:-.055em}
.hero .tag{margin-top:26px;color:var(--gold);font-weight:800;font-size:clamp(15px,1.8vw,24px);line-height:1.22;letter-spacing:-.01em;max-width:24ch}
.hero .sub{margin-top:20px;color:var(--mut);font-size:clamp(12px,1.2vw,15px);max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.cover{position:relative;justify-self:center;width:min(100%,560px);aspect-ratio:1}
.cover img{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45);display:block}
.cover .disc{position:absolute;right:-9%;bottom:-9%;width:38%;aspect-ratio:1;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4));animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* heard on */
.heard{border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding:30px 0}
.heard .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.heard p{font-size:clamp(13px,1.5vw,18px);font-weight:800;letter-spacing:-.01em}
.heard p span{color:var(--gold)}
/* system */
.sys{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:46px}
.sys .it{border-top:1.5px solid var(--line);padding-top:22px}
.sys svg{width:78px;height:78px;margin-bottom:18px}
.sys b{display:block;font-weight:800;font-size:clamp(15px,1.6vw,20px);letter-spacing:-.02em;margin-bottom:8px}
.sys p{color:var(--mut);font-size:13px}
/* inside */
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 26px;margin-top:46px}
.pk{text-align:left}
.pk svg{width:100%;max-width:210px;aspect-ratio:1;display:block;margin-bottom:16px}
.pk h3{font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.1}
.pk .m{margin-top:8px;font-size:11px;color:var(--gold)}
.pk .n{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
/* previews */
.player{margin-top:44px;display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(20px,4vw,56px);align-items:center;background:var(--panel);border-radius:28px;padding:clamp(20px,3vw,40px)}
.np-disc{width:100%;aspect-ratio:1}
.np-disc svg{width:100%;height:100%;display:block;animation:spin 9s linear infinite;animation-play-state:paused}
.player.playing .np-disc svg{animation-play-state:running}
.np-t{font-weight:900;font-size:clamp(24px,3.6vw,44px);line-height:.98;letter-spacing:-.04em}
.np-m{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.ctl{display:flex;align-items:center;gap:12px;margin-top:26px}
.pb{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:transform .3s var(--ease)}
.pb:hover{transform:scale(1.06)}
.pb svg{width:24px;height:24px}
.sk{width:48px;height:48px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center}
.sk svg{width:18px;height:18px}
.bar{margin-top:24px;height:8px;border-radius:99px;background:#444;cursor:pointer;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--pink);width:0}
.tm{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--mut)}
.note{margin-top:16px;font-size:11px;color:var(--mut)}
.grid{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px}
.tile{text-align:center;cursor:pointer;transition:transform .4s var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile svg{width:100%;max-width:150px;aspect-ratio:1;display:block;margin:0 auto 10px}
.tile b{display:block;font-weight:800;font-size:12px;letter-spacing:-.01em;line-height:1.15}
.tile span{display:block;margin-top:6px;font-size:10px;color:var(--gold)}
.tile.on b{color:var(--pink)}
.tile.on>svg:first-child{outline:3px solid var(--pink);outline-offset:4px;border-radius:50%}
/* how */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:46px}
.how .it{border-top:1.5px solid var(--line);padding-top:22px}
.how .n{font-family:'Space Mono',monospace;color:var(--gold);font-weight:700;font-size:12px}
.how b{display:block;font-weight:800;font-size:clamp(15px,1.6vw,20px);letter-spacing:-.02em;margin:10px 0 8px}
.how p{color:var(--mut);font-size:13px}
/* pricing */
.buy{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);margin-top:44px;align-items:start}
.tbl{border-top:1.5px solid var(--line)}
.tbl div{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1.5px solid var(--line);font-size:13px;font-weight:700}
.tbl div span:first-child{flex:1}
.tbl .old{color:var(--mut);text-decoration:line-through;font-family:'Space Mono',monospace}
.tbl .tot span:first-child{font-weight:900;font-size:15px}
.price{background:var(--ink);color:var(--bg);border-radius:28px;padding:clamp(24px,3vw,40px)}
.price .pr{font-weight:900;font-size:clamp(56px,8vw,104px);letter-spacing:-.06em;line-height:.9}
.price .pr small{font-size:.3em;letter-spacing:0;margin-left:6px}
.price p{margin-top:14px;font-size:12px;font-weight:700;color:#5b5a55}
.price .pill{margin-top:24px;width:100%;justify-content:center;background:var(--bg);color:var(--ink);border-color:var(--bg);font-size:15px;padding:18px}
.price .pill:hover{background:var(--pink);border-color:var(--pink)}
.lic{margin-top:34px;display:grid;gap:0;border-top:1.5px solid var(--line)}
.lic li{list-style:none;padding:14px 0;border-bottom:1.5px solid var(--line);font-size:12.5px;color:var(--mut);display:flex;gap:14px}
.lic li b{color:var(--ink);font-weight:800;min-width:92px}
.draft{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:99px;background:var(--red);color:var(--ink);font-size:9px;font-weight:800;letter-spacing:.1em;vertical-align:middle}
/* faq */
details{border-top:1.5px solid var(--line);padding:20px 0}
details:last-of-type{border-bottom:1.5px solid var(--line)}
summary{list-style:none;cursor:pointer;font-weight:800;font-size:clamp(14px,1.6vw,19px);letter-spacing:-.02em;display:flex;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-family:'Space Mono',monospace;color:var(--gold);font-size:22px;transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:12px;color:var(--mut);font-size:13px;max-width:70ch}
footer{border-top:1.5px solid var(--line);padding:46px 0 60px;color:var(--mut);font-size:12px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 50px;justify-content:space-between}
footer b{color:var(--ink);font-weight:800}
.mock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:30;background:var(--red);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.08em;padding:7px 14px;border-radius:99px;pointer-events:none;white-space:nowrap}
@media(max-width:860px){
 nav{display:none}header .pill.sm.hide{display:none}
 .hero .wrap,.player,.buy{grid-template-columns:1fr}
 .cover{width:min(86%,420px)}
 .sys,.how{grid-template-columns:1fr}
 .np-disc{max-width:230px;margin:0 auto}
 .lic li{flex-direction:column;gap:4px}
}
@media(max-width:480px){.cta .pill{width:100%;justify-content:center}.grid{grid-template-columns:repeat(2,1fr)}.mock{font-size:9px}}

/* eye BML: la forma e' la maschera del logo, il colore e' libero (come nei poster) */
.eye{display:block;background:var(--ink);-webkit-mask:url(assets/eye.png) center/contain no-repeat;mask:url(assets/eye.png) center/contain no-repeat;flex:none}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,2vw,26px);padding-top:clamp(10px,2vw,30px);padding-bottom:clamp(30px,5vw,64px)}
.strip .sd svg{width:100%;display:block;aspect-ratio:1}
.composed{position:relative;margin-top:clamp(56px,8vw,110px);height:clamp(250px,46vw,640px);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.composed p{position:relative;z-index:2;font-size:clamp(10px,1.4vw,16px);letter-spacing:.14em;margin-top:clamp(16px,3vw,40px);color:var(--ink);text-shadow:0 0 0 #000;mix-blend-mode:normal;background:var(--bg);padding:6px 14px;border-radius:99px}
.eye.big{position:absolute;left:50%;top:clamp(22px,4vw,56px);width:min(104vw,1000px);aspect-ratio:1;transform:translateX(-50%);background:var(--ink)}
.pk svg{max-width:260px}
.packs{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:480px){.packs{grid-template-columns:repeat(2,1fr);gap:26px 16px}.strip{gap:8px}}

/* forme d'onda uniformi (profilo pieno, niente barre) */
.wf{margin-top:24px;height:64px;position:relative;cursor:pointer;--p:0%}
.wf svg{position:absolute;inset:0;width:100%;height:100%}
.wf .wb path{fill:#4a4a46}
.wf .wp{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.wf .wp path{fill:var(--pink)}
.tile .tw{width:100%;max-width:150px;height:26px;margin:10px auto 0;display:block;aspect-ratio:auto}
.tile .tw path{fill:#5d5d58}
.tile.on .tw path{fill:var(--pink)}
.tile{outline:0}

.heard .wrap{align-items:flex-start}
.heard p{font-weight:500;font-size:clamp(13px,1.35vw,17px);line-height:1.5;max-width:78ch;flex:1;min-width:260px}
.heard p b{font-weight:800;color:var(--gold)}

.heard .pill.sm{align-self:center}
footer a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--line)}
footer a:hover{border-color:var(--pink)}

/* inspired by / made for */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,56px);margin-top:46px}
.two .it{border-top:1.5px solid var(--line);padding-top:22px}
.lab{color:var(--gold);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.names{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px}
.names li{font-weight:900;font-size:clamp(20px,3vw,38px);letter-spacing:-.035em;line-height:1.1}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .chip{font-size:12px;padding:10px 18px;border-color:var(--ink);color:var(--ink)}
.chips .chip b{font-family:'Unbounded',sans-serif;color:var(--ink);font-weight:800;font-size:12px}
@media(max-width:860px){.two{grid-template-columns:1fr}}

.how{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* occhio BML intero (niente taglio): firma in fondo a "How it's made" */
.composed{height:auto;overflow:visible;margin-top:clamp(56px,8vw,110px);padding-bottom:0}
.composed p{margin-top:0;margin-bottom:clamp(18px,3vw,34px)}
.eye.big{position:static;transform:none;width:min(78vw,520px);margin:0 auto}

/* ---- cell: comodo e veloce ---- */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,summary,.tile{touch-action:manipulation}
.embed{flex-basis:100%;max-width:640px}
.embed iframe{border:0;border-radius:12px;display:block;background:var(--panel)}
.legal .lead{max-width:70ch}
.terms{margin-top:36px;max-width:74ch;padding-left:0;list-style:none;counter-reset:t}
.terms li{counter-increment:t;border-top:1.5px solid var(--line);padding:18px 0 18px 46px;position:relative;color:var(--mut);font-size:14px;line-height:1.55}
.terms li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:19px;font-family:'Space Mono',monospace;color:var(--gold);font-size:12px}
.terms li b{color:var(--ink);font-weight:800}
.terms a,.lic a{color:var(--ink);border-bottom:1.5px solid var(--gold);text-decoration:none}
.mnav,.dock{display:none}
@media(max-width:860px){
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 body.mini-on{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
 header .wrap{height:60px}
 .brand{font-size:15px}.brand .eye{width:34px;height:34px}
 .mnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut) 10px;-webkit-overflow-scrolling:touch}
 .mnav::-webkit-scrollbar{display:none}
 .mnav a{flex:none;padding:9px 14px;border-radius:99px;border:2px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.04em;text-decoration:none;color:var(--mut);white-space:nowrap}
 html{scroll-padding-top:116px}
 section{padding:clamp(44px,12vw,72px) 0}
 .pill{min-height:48px;justify-content:center}
 .pill.sm{min-height:44px}
 .hero h1{font-size:clamp(60px,19vw,120px)}
 .lead,.sub,.sys p,.how p,.tbl div,.lic li,details p{font-size:14px}
 .chip{font-size:11px;padding:8px 13px}
 .packs{grid-template-columns:repeat(2,1fr)}
 .tile b{font-size:13px}.tile span{font-size:11px}
 .tile svg:first-child{max-width:132px}
 .player{padding:20px;border-radius:22px}
 .ctl{justify-content:center}
 .np-t,.np-m{text-align:center}.np-m{justify-content:center}
 .price .pr{font-size:84px}
 .composed{margin-top:46px}
 .mock{display:none}
 .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(42,42,42,.96);backdrop-filter:blur(10px);border-top:1.5px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
 .dock .bb{display:flex;align-items:center;gap:14px;padding:10px var(--gut)}
 .dock .bb .mono{font-size:20px;color:var(--gold)}
 .dock .bb .pill{flex:1}
 .mini{display:flex;align-items:center;gap:12px;padding:10px var(--gut) 0}
 .mini[hidden]{display:none}
 .md{width:44px;height:44px;flex:none}.md svg{width:100%;height:100%;display:block;animation:spin 9s linear infinite;animation-play-state:paused}
 .mini.pl .md svg{animation-play-state:running}
 .mt{flex:1;min-width:0}.mt b{display:block;font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mt span{display:block;font-size:10px;color:var(--mut)}
 .mb{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;flex:none}
 .mb svg{width:18px;height:18px}
 .mb+.mb{background:none;color:var(--ink);border:2px solid var(--ink)}
}
@media(max-width:380px){.packs{gap:22px 12px}.hero h1{font-size:56px}.dock .bb .mono{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

@media(max-width:860px){header .wrap>.pill{display:none}.brand{white-space:nowrap;font-size:15px}}
@media(max-width:380px){.brand{font-size:13px}}

.embed{margin:6px auto 0;width:100%;max-width:640px}
.heard .wrap{justify-content:center}

/* cell: titolo, subito la copertina, poi il resto */
@media(max-width:860px){
 .hero .wrap{display:flex;flex-direction:column;gap:0}
 .hero .wrap>div:first-child{display:contents}
 .hero .kick{order:1}
 .hero h1{order:2}
 .hero .cover{order:3;width:min(82%,380px);margin:22px auto 8px}
 .hero .tag{order:4;margin-top:26px;max-width:none}
 .hero .sub{order:5}
 .hero .cta{order:6}
 .hero .stats{order:7}
}

/* pc: l'embed Spotify sta nella colonna del testo della bio, allineato a sinistra con la scritta */
@media(min-width:861px){
 .heard .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(18px,3vw,42px);row-gap:22px;justify-content:stretch;align-items:start}
 .heard .wrap .chip{margin-top:4px}
 .heard .wrap p{max-width:none}
 .heard .embed{grid-column:2;margin:0;max-width:640px}
}

/* pc: embed Spotify a destra, sulla stessa riga della bio e allineato in alto con il testo */
@media(min-width:861px){
 .heard .wrap{grid-template-columns:auto minmax(0,1fr) minmax(300px,430px);align-items:start}
 .heard .wrap .chip{grid-column:1;grid-row:1}
 .heard .wrap p{grid-column:2;grid-row:1}
 .heard .wrap .pill{grid-column:2;grid-row:2;justify-self:start}
 .heard .embed{grid-column:3;grid-row:1 / span 2;margin:4px 0 0;max-width:none;width:100%}
}