:root{
  --bg:#0a0a13;
  --bg-soft:#101020;
  --surface:rgba(255,255,255,.045);
  --surface-strong:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);
  --text:#f6f4ff;
  --muted:#9a92ba;
  --muted-2:#6d6690;
  --violet:#a06bff;
  --pink:#ff8a42;
  --amber:#ffb35c;
  --maxw:1180px;
  --nav-bg:rgba(10,10,19,.55);
  --selection-bg:#ff8a42;
  --selection-text:#0a0a13;
  --hero-text-gradient:linear-gradient(100deg, #fff 10%, var(--pink) 55%, var(--violet) 90%);
  --card-sheen:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --card-top-glow:linear-gradient(155deg, rgba(255,255,255,.08), transparent 35%);
  --decorative-num:rgba(255,255,255,.08);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --bg-soft:#eef1f7;
  --surface:rgba(12,18,32,.04);
  --surface-strong:rgba(12,18,32,.08);
  --border:rgba(17,24,39,.12);
  --text:#111827;
  --muted:#5d667d;
  --muted-2:#7a8399;
  --nav-bg:rgba(246,247,251,.74);
  --selection-bg:#111827;
  --selection-text:#f6f7fb;
  --hero-text-gradient:linear-gradient(100deg, #111827 6%, var(--pink) 54%, var(--violet) 92%);
  --card-sheen:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  --card-top-glow:linear-gradient(155deg, rgba(160,107,255,.16), transparent 42%);
  --decorative-num:rgba(17,24,39,.06);
  color-scheme:light;
}
@font-face{
  font-family:'Roca Heavy';
  src:url('../fonts/Roca-Heavy.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:'Roca Heavy', sans-serif; margin:0; }
p{ margin:0; }
a{ color:inherit; }
::selection{ background:var(--selection-bg); color:var(--selection-text); }
:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; }
img,svg{ display:block; }

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f6f7fb;
    --bg-soft:#eef1f7;
    --surface:rgba(12,18,32,.04);
    --surface-strong:rgba(12,18,32,.08);
    --border:rgba(17,24,39,.12);
    --text:#111827;
    --muted:#5d667d;
    --muted-2:#7a8399;
    --nav-bg:rgba(246,247,251,.74);
    --selection-bg:#111827;
    --selection-text:#f6f7fb;
    --hero-text-gradient:linear-gradient(100deg, #111827 6%, var(--pink) 54%, var(--violet) 92%);
    --card-sheen:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
    --card-top-glow:linear-gradient(155deg, rgba(160,107,255,.16), transparent 42%);
    --decorative-num:rgba(17,24,39,.06);
    color-scheme:light;
  }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.logo{
  font-family:'Roca Heavy', sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.05em;
}
.nav-pill{
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--muted);
  border:1px solid var(--border);
  padding:.4rem .8rem;
  border-radius:100px;
}
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  background:var(--surface-strong);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:.92rem;
  padding:.85rem 1.6rem;
  border-radius:100px;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(95deg, var(--violet), var(--pink));
  color:#fff;
  box-shadow:0 10px 30px -8px rgba(255,138,66,.45);
}
.btn-primary:hover{ box-shadow:0 16px 40px -8px rgba(255,138,66,.6); }
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{ background:var(--surface); border-color:var(--surface-strong); }
.btn svg{ width:14px; height:14px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(3px); }

/* ---------- equalizer motif ---------- */
.eq{ display:inline-flex; align-items:flex-end; gap:3px; height:16px; }
.eq span{
  width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--pink), var(--violet));
  animation:eqbounce 1.1s ease-in-out infinite;
}
.eq span:nth-child(1){ height:40%; animation-delay:-.9s; }
.eq span:nth-child(2){ height:90%; animation-delay:-.5s; }
.eq span:nth-child(3){ height:60%; animation-delay:-1.1s; }
.eq span:nth-child(4){ height:100%; animation-delay:-.2s; }
.eq span:nth-child(5){ height:55%; animation-delay:-.7s; }
@keyframes eqbounce{
  0%,100%{ transform:scaleY(.35); }
  50%{ transform:scaleY(1); }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:7rem 1.5rem 5rem;
}
.aura{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.aura span{
  position:absolute;
  width:46vmax; height:46vmax;
  border-radius:50%;
  filter:blur(110px);
  opacity:.45;
}
.aura .a1{ background:var(--violet); top:-12%; left:-10%; animation:float1 22s ease-in-out infinite alternate; }
.aura .a2{ background:var(--pink); bottom:-18%; right:-8%; animation:float2 26s ease-in-out infinite alternate; }
.aura .a3{ background:var(--amber); top:30%; right:25%; opacity:.22; animation:float3 30s ease-in-out infinite alternate; }
.aura .cursor{
  background:var(--violet);
  opacity:.28;
  width:34vmax; height:34vmax;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
@keyframes float1{ 0%{transform:translate(0,0);} 100%{transform:translate(6%,8%);} }
@keyframes float2{ 0%{transform:translate(0,0);} 100%{transform:translate(-5%,-6%);} }
@keyframes float3{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-8%,5%) scale(1.15);} }

.hero-content{ position:relative; z-index:2; max-width:780px; }
.eyebrow-row{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin-bottom:1.8rem;
}
.chip{
  font-size:.7rem; letter-spacing:.06em;
  padding:.4rem .85rem; border-radius:100px;
  border:1px solid var(--border);
  color:var(--muted);
  background:var(--surface);
}
.hero h1{
  font-size:clamp(2.6rem, 8vw, 5.6rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.02em;
  background:var(--hero-text-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .tagline{
  margin-top:1.3rem;
  font-size:1.08rem;
  color:var(--muted);
}
.hero .credit{
  margin-top:.6rem;
  font-size:.85rem;
  color:var(--muted-2);
}
.hero .credit strong{ color:var(--text); font-weight:600; }
.hero-actions{
  margin-top:2.6rem;
  display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center;
}

/* ---------- generic section ---------- */
section{ position:relative; padding:6.5rem 0; }
.section-head{
  max-width:560px;
  margin:0 auto 3rem;
  text-align:center;
}
.section-head .kicker{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-bottom:1rem;
}
.section-head h2{
  font-size:clamp(1.7rem, 4vw, 2.4rem);
  font-weight:600;
  letter-spacing:-.01em;
}
.section-head p{
  margin-top:.9rem;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

/* ---------- featured volume ---------- */
.featured{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  padding:3.2rem 2rem;
  border-radius:28px;
  background:var(--surface);
  border:1px solid var(--border);
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.featured.visible{ opacity:1; transform:translateY(0); }
.featured .vol{
  font-family:'Roca Heavy', sans-serif;
  font-size:.78rem;
  letter-spacing:.18em;
  color:var(--pink);
  font-weight:700;
}
.featured h3{
  margin-top:.9rem;
  font-size:clamp(2rem, 5vw, 2.8rem);
  font-weight:700;
}
.featured .mood{
  margin-top:1rem;
  color:var(--muted);
  font-size:1rem;
}
.featured .btn{ margin-top:2rem; }

/* ---------- about strip ---------- */
.about{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  padding:6.5rem 1.5rem;
}
.about p{
  font-size:clamp(1.3rem, 3.2vw, 1.9rem);
  font-weight:500;
  line-height:1.5;
  font-family:'Roca Heavy', sans-serif;
  letter-spacing:-.01em;
}
.about p span{ color:var(--muted-2); }

/* ---------- volumes grid ---------- */
.grid{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.75rem;
}
.vcard{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1rem 1.3rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, max-height .4s ease, padding .4s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
  max-height:3.5rem;
}
.vcard::before{
  display:none;
}
.vcard::after{
  display:none;
}
.vcard.visible{ opacity:1; transform:translateY(0); }
.vcard:hover{
  border-color:var(--accent, var(--pink));
  background:var(--surface-strong);
  box-shadow:0 8px 20px -8px var(--accent, var(--pink));
  max-height:8rem;
  padding:1.2rem 1.3rem;
}
.vcard-main{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
  width:100%;
}
.vcard .n{
  font-family:'Roca Heavy', sans-serif;
  font-size:.75rem;
  font-weight:700;
  color:var(--accent, var(--pink));
  letter-spacing:.14em;
  white-space:nowrap;
  flex-shrink:0;
}
.vcard .t{
  justify-self:center;
  font-size:.95rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  text-align:center;
}
.vcard .d{
  justify-self:end;
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.vcard-info{
  font-size:.85rem;
  color:var(--muted);
  margin-top:0.8rem;
  opacity:0;
  transition:opacity .3s ease .1s;
  line-height:1.5;
}
.vcard:hover .vcard-info{
  opacity:1;
}

/* ---------- sound section ---------- */
.sound-row{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  margin-top:.5rem;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}
.sound-chip{
  font-family:'Roca Heavy', sans-serif;
  font-size:.92rem; font-weight:700;
  padding:.7rem 1.3rem;
  border-radius:100px;
  border:1px solid var(--border);
  background:var(--surface);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.sound-chip:hover{
  transform:translateY(-3px);
  border-color:var(--surface-strong);
  background:var(--surface-strong);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]) body{
    background:
      radial-gradient(circle at top left, rgba(160,107,255,.08), transparent 28%),
      radial-gradient(circle at bottom right, rgba(255,95,160,.08), transparent 26%),
      var(--bg);
  }
  :root:not([data-theme]) nav{
    background:rgba(246,247,251,.72);
  }
  :root:not([data-theme]) .aura{ opacity:.82; }
  :root:not([data-theme]) .aura .a1{ opacity:.16; }
  :root:not([data-theme]) .aura .a2{ opacity:.14; }
  :root:not([data-theme]) .aura .a3{ opacity:.08; }
  :root:not([data-theme]) .aura .cursor{ opacity:.12; }
  :root:not([data-theme]) .featured,
  :root:not([data-theme]) .chip,
  :root:not([data-theme]) .sound-chip{
    box-shadow:0 12px 30px -26px rgba(17,24,39,.35);
  }
  :root:not([data-theme]) .vcard{
    box-shadow:0 18px 45px -30px rgba(17,24,39,.28);
  }
  :root:not([data-theme]) .vcard:hover{
    box-shadow:0 24px 60px -28px color-mix(in srgb, var(--accent) 55%, rgba(17,24,39,.2));
  }
}

/* ---------- outro ---------- */
.outro{
  text-align:center;
  padding:7rem 1.5rem 4rem;
}
.outro h2{
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  font-weight:600;
}
.outro .credit{
  margin-top:.8rem;
  color:var(--muted);
  font-size:.95rem;
}
.outro .btn{ margin-top:2.2rem; }
footer.fineprint{
  text-align:center;
  padding:2rem 1.5rem 3rem;
  font-size:.7rem;
  letter-spacing:.04em;
  color:var(--muted-2);
}

@media (max-width:640px){
  section{ padding:4.5rem 0; }
  .hero{ padding-top:6rem; }
}