/* APT D4 RECORDS — from-scratch concept. Dark club premium. */
:root{
  --bg:#0c0c0e;
  --bg2:#101013;
  --panel:#141417;
  --line:#232328;
  --ink:#f4f4f5;
  --mut:#9a9aa2;
  --org:#ff6a3d;
  --org-dk:#d14e22;
  --gold:#d4af37;
  --radius:14px;
  --font-d:'Archivo',Arial,sans-serif;
  --font-b:'Inter',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(12,12,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:8px}
.brand b{font-family:var(--font-d);font-weight:900;letter-spacing:3px;font-size:15px}
.brand b span{color:var(--org)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{text-decoration:none;font-size:13px;letter-spacing:2px;font-weight:600;color:var(--mut);text-transform:uppercase;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.cta{color:#0c0c0e;background:var(--org);padding:10px 20px;border-radius:999px}
.nav-links a.cta:hover{background:var(--org-dk);color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden;padding:120px 24px 80px}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 400px at 50% 38%,rgba(255,106,61,.16),transparent 70%),
  radial-gradient(900px 600px at 50% 110%,rgba(212,175,55,.07),transparent 70%);pointer-events:none}
.hero .pulse{position:absolute;left:50%;top:36%;width:min(72vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,61,.20),transparent 65%);filter:blur(10px);animation:pulse 5s ease-in-out infinite;pointer-events:none}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
.hero-logo{width:min(56vw,340px);border-radius:18px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rise .9s ease both}
.eyebrow{margin-top:34px;font-size:12px;letter-spacing:5px;color:var(--gold);font-weight:600;position:relative;animation:rise .9s .1s ease both}
.hero h1{font-family:var(--font-d);font-weight:900;font-size:clamp(44px,9vw,110px);line-height:.95;letter-spacing:1px;margin:14px 0 6px;position:relative;animation:rise .9s .18s ease both}
.hero h1 .o{color:var(--org)}
.hero .tag{color:var(--mut);font-size:clamp(15px,2.4vw,19px);max-width:620px;position:relative;animation:rise .9s .26s ease both}
.hero .tag b{color:var(--ink)}
.cta-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;justify-content:center;position:relative;animation:rise .9s .34s ease both}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;padding:16px 32px;border-radius:999px;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--org);color:#0c0c0e}
.btn-solid:hover{background:var(--org-dk);color:#fff}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--org);color:var(--org)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--mut);font-size:11px;letter-spacing:4px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg2);padding:14px 0;white-space:nowrap}
.marquee div{display:inline-block;animation:mq 26s linear infinite;font-family:var(--font-d);font-weight:700;font-size:14px;letter-spacing:4px;color:var(--mut)}
.marquee div b{color:var(--org);margin:0 18px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section.block{padding:110px 0}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head .kick{font-size:12px;letter-spacing:5px;color:var(--org);font-weight:700;margin-bottom:14px}
.sec-head h2{font-family:var(--font-d);font-weight:900;font-size:clamp(30px,5vw,52px);letter-spacing:1px;line-height:1.05}
.sec-head p{color:var(--mut);max-width:640px;margin:16px auto 0;font-size:16px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-copy p{font-size:18px;color:#d7d7db;margin-bottom:18px}
.about-copy p b{color:var(--ink)}
.stats{display:flex;gap:36px;margin-top:30px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--font-d);font-weight:900;font-size:38px;color:var(--org)}
.stat span{font-size:12px;letter-spacing:2px;color:var(--mut);text-transform:uppercase}
.about-logos{display:flex;gap:20px;justify-content:center}
.about-logos .lcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;flex:1;max-width:260px;text-decoration:none;transition:border-color .2s,transform .15s}
.about-logos .lcard:hover{border-color:var(--org);transform:translateY(-3px)}
.about-logos img{border-radius:10px;margin-bottom:16px}
.about-logos h3{font-family:var(--font-d);font-size:16px;letter-spacing:2px;margin-bottom:8px}
.about-logos p{font-size:13px;color:var(--mut)}
.about-logos .stores{margin-top:12px;font-size:12px;letter-spacing:1px;color:var(--gold);font-weight:600}

/* release cards (shared with music page) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.card{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--panel);aspect-ratio:1;text-decoration:none}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover img{transform:scale(1.06)}
.card .ov{position:absolute;inset:auto 0 0 0;padding:26px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.88));opacity:0;transition:opacity .25s}
.card:hover .ov{opacity:1}
.card .t{display:block;color:#fff;font-size:13px;font-weight:700;line-height:1.3}
.card .a{display:block;color:var(--gold);font-size:11px;margin-top:2px}
.card .aibadge,.card .hbadge{position:absolute;top:8px;left:8px;z-index:3;min-width:24px;height:24px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:13px;font-weight:800;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.card .aibadge{background:#7c3aed}
.card .hbadge{background:#16a34a;font-size:12px}
.center{margin-top:44px;text-align:center}

/* friends */
.friends{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.friend{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-decoration:none;transition:border-color .2s,transform .15s;display:block}
.friend:hover{border-color:var(--org);transform:translateY(-3px)}
.friend b{font-family:var(--font-d);font-size:17px;letter-spacing:1px;display:block;margin-bottom:6px}
.friend span{font-size:12px;letter-spacing:1px;color:var(--org);text-transform:uppercase}

/* demo */
.demo{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.demo h2{font-family:var(--font-d);font-weight:900;font-size:clamp(30px,5vw,54px);margin-bottom:14px}
.demo h2 span{color:var(--org)}
.demo p{color:var(--mut);max-width:560px;margin:0 auto 34px}

/* artists page */
.artist{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-bottom:18px;display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start}
.artist .aphoto{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid rgba(212,175,55,.45);background:#1a1a1a;flex:none}.artist .ini{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--org),var(--gold));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:900;font-size:38px;color:#0c0c0e}
.artist h3{font-family:var(--font-d);font-size:24px;letter-spacing:1px;margin-bottom:4px}
.artist h3 a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--org)}
.artist h3 a:hover{color:var(--org)}
.artist .role{font-size:12px;letter-spacing:2px;color:var(--org);text-transform:uppercase;margin-bottom:12px;font-weight:700}
.artist p{color:var(--mut);font-size:15px}
.artist .meta{margin-top:12px;font-size:13px;color:var(--mut)}
.artist .meta a{color:var(--gold);text-decoration:none}
.artist .meta a:hover{text-decoration:underline}

/* footer */
footer{border-top:1px solid var(--line);padding:70px 0 40px;background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px;margin-bottom:50px}
.foot-grid img{width:64px;border-radius:12px;margin-bottom:16px}
.foot-grid p{color:var(--mut);font-size:14px;max-width:300px}
.foot-grid h4{font-size:12px;letter-spacing:3px;color:var(--ink);margin-bottom:16px;font-family:var(--font-d)}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid ul a{color:var(--mut);text-decoration:none;font-size:14px}
.foot-grid ul a:hover{color:var(--org)}
.legal{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;color:var(--mut);font-size:12px;letter-spacing:1px;flex-wrap:wrap;gap:10px}

/* page hero (inner pages) */
.page-hero{padding:150px 0 60px;text-align:center}
.page-hero .kick{font-size:12px;letter-spacing:5px;color:var(--org);font-weight:700;margin-bottom:14px}
.page-hero h1{font-family:var(--font-d);font-weight:900;font-size:clamp(38px,7vw,72px);letter-spacing:1px}
.page-hero p{color:var(--mut);margin-top:12px}

@media(max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .artist{grid-template-columns:1fr;text-align:center}
  .artist .ini{margin:0 auto}
}
@media(max-width:720px){
  .nav-links{position:fixed;top:62px;left:0;right:0;background:#101013;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 0;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;width:100%;text-align:center}
  .burger{display:block}
  section.block{padding:76px 0}
}