/* ============================================================
   iD01t Productions — id01t.store design system
   Dark cyberpunk theme · no dependencies · mobile-first
   ============================================================ */
:root{
  --bg0:#04070d; --bg1:#0a111e; --panel:#0d1726; --panel2:#111e32;
  --line:rgba(0,209,255,.14); --line-strong:rgba(0,209,255,.35);
  --cyan:#00d1ff; --magenta:#ff2d78; --violet:#8b5cf6; --green:#2dd4a7; --amber:#ffb454;
  --text:#e9f1f9; --muted:#94a6ba; --dim:#5d7186;
  --mono:'Cascadia Code','Fira Code',Consolas,'Courier New',monospace;
  --r:14px; --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{background:var(--bg0);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;line-height:1.65;font-size:16.5px;overflow-x:hidden}
::selection{background:rgba(0,209,255,.28)}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%;display:block}
.container{width:min(1180px,92%);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#02131c;padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

/* header */
header.site{position:sticky;top:0;z-index:100;background:rgba(4,7,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.5)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:baseline;gap:.5rem;font-weight:800;font-size:1.2rem;letter-spacing:.02em;color:var(--text);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{font-family:var(--mono);color:var(--cyan)}
.brand small{color:var(--muted);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.18em}
nav.primary ul{display:flex;gap:1.15rem;list-style:none;align-items:center;flex-wrap:wrap}
nav.primary a{color:var(--muted);font-weight:600;font-size:.88rem}
nav.primary a:hover{color:var(--cyan);text-decoration:none}
nav.primary a.active{color:var(--cyan)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.35rem;border-radius:999px;font-weight:700;font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-solid{background:linear-gradient(135deg,var(--cyan),#0084ff);color:#02131c;box-shadow:0 8px 26px rgba(0,170,255,.3)}
.btn-solid:hover{box-shadow:0 12px 34px rgba(0,170,255,.45);color:#02131c}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(0,209,255,.05)}
.btn-ghost:hover{background:rgba(0,209,255,.12);color:var(--cyan)}
.btn-sm{padding:.45rem .95rem;font-size:.85rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;color:var(--cyan);font-size:1.3rem;line-height:1;padding:.42rem .65rem;cursor:pointer}
.mobile-nav{display:none;border-top:1px solid var(--line);background:rgba(6,10,18,.97)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.85rem 6%;color:var(--text);font-weight:600;border-bottom:1px solid rgba(255,255,255,.05)}
.mobile-nav a:hover{color:var(--cyan);text-decoration:none}
@media(max-width:1080px){nav.primary,.nav-cta{display:none}.nav-toggle{display:inline-flex}}

/* heroes */
.hero,.page-hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 480px at 12% -10%,rgba(0,209,255,.16),transparent 60%),
  radial-gradient(800px 500px at 95% 10%,rgba(139,92,246,.14),transparent 60%),
  radial-gradient(700px 600px at 60% 120%,rgba(255,45,120,.08),transparent 55%),
  var(--bg0)}
.hero{padding:6.2rem 0 4.8rem}
.page-hero{padding:4.6rem 0 3.4rem}
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,209,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,209,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%)}
.hero>.container,.page-hero>.container{position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line-strong);background:rgba(0,209,255,.07);color:var(--cyan);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.42rem 1rem;border-radius:999px;margin-bottom:1.4rem}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.12;font-weight:800;letter-spacing:-.015em;margin-bottom:1.2rem}
h1 .grad{background:linear-gradient(100deg,var(--cyan) 10%,var(--violet) 55%,var(--magenta) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.12rem;max-width:38rem;margin-bottom:2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.4rem}
.stats{display:flex;flex-wrap:wrap;gap:0 2.4rem;row-gap:1.2rem}
.stat .n{font-family:var(--mono);font-size:1.65rem;font-weight:800;color:var(--cyan)}
.stat .l{display:block;color:var(--dim);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding:4.4rem 0 3.4rem}}

/* terminal */
.term{background:#070d17;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow),0 0 60px rgba(0,209,255,.07);overflow:hidden;font-family:var(--mono);font-size:.88rem}
.term-bar{display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.term-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:auto;color:var(--dim);font-size:.74rem}
.term-body{padding:1.1rem 1.2rem 1.4rem;min-height:220px;color:#bcd2e2;line-height:1.85}
.term-body .p{color:var(--green)}
.term-body .c{color:var(--cyan)}
.term-body .ok{color:var(--green)}
.term-body .accent{color:var(--magenta)}

/* sections */
section.block{padding:4.8rem 0;border-top:1px solid rgba(255,255,255,.045)}
section.block.alt{background:linear-gradient(180deg,var(--bg1),var(--bg0))}
.kicker{font-family:var(--mono);color:var(--cyan);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:.7rem}
h2{font-size:clamp(1.65rem,3vw,2.3rem);font-weight:800;letter-spacing:-.01em;margin-bottom:1rem}
.sub{color:var(--muted);max-width:46rem;margin-bottom:2.4rem;font-size:1.04rem}
h3.group{font-size:1.16rem;margin:2.5rem 0 1.1rem;color:var(--text);display:flex;align-items:center;gap:.6rem}
h3.group::before{content:"";width:22px;height:2px;background:var(--cyan)}
.grid{display:grid;gap:1.3rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}

/* cards */
.card{background:linear-gradient(180deg,var(--panel),rgba(13,23,38,.6));border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.45rem;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 14px 36px rgba(0,0,0,.4),0 0 30px rgba(0,209,255,.06)}
.card h3,.card h4{font-size:1.05rem;margin-bottom:.55rem;color:var(--text)}
.card p{color:var(--muted);font-size:.94rem}
.card .icon{font-size:1.5rem;margin-bottom:.8rem;display:block}
.card .price{position:absolute;top:1.15rem;right:1.2rem;font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--green);background:rgba(45,212,167,.1);border:1px solid rgba(45,212,167,.3);padding:.18rem .6rem;border-radius:999px}
.card .price.free{color:var(--cyan);background:rgba(0,209,255,.08);border-color:rgba(0,209,255,.3)}
.card .links{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.86rem;font-weight:600}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--violet);background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.35);border-radius:6px;padding:.12rem .5rem;margin-bottom:.7rem;margin-right:.35rem}
.tag.cyan{color:var(--cyan);background:rgba(0,209,255,.08);border-color:rgba(0,209,255,.3)}
.tag.magenta{color:var(--magenta);background:rgba(255,45,120,.08);border-color:rgba(255,45,120,.35)}
.tag.green{color:var(--green);background:rgba(45,212,167,.08);border-color:rgba(45,212,167,.35)}
.tag.amber{color:var(--amber);background:rgba(255,180,84,.08);border-color:rgba(255,180,84,.35)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-size:.82rem;font-weight:600;color:var(--muted);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.3rem .85rem;background:rgba(255,255,255,.03)}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
th{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--line-strong);background:rgba(0,209,255,.04)}
td{padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.05);color:var(--muted);vertical-align:top}
td strong{color:var(--text)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(0,209,255,.025)}

/* music */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:1.2rem}
.album{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:transform .2s,border-color .2s}
.album:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.album .cover{aspect-ratio:1;display:flex;align-items:flex-end;padding:.8rem;font-family:var(--mono);font-weight:800;font-size:.92rem;line-height:1.25;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.album:nth-child(1) .cover{background:linear-gradient(140deg,#022c3a,#00d1ff55),radial-gradient(circle at 70% 25%,#ff2d7860,transparent 60%),#06121e}
.album:nth-child(2) .cover{background:linear-gradient(140deg,#1b0b35,#8b5cf655),radial-gradient(circle at 30% 70%,#00d1ff40,transparent 60%),#0a0618}
.album:nth-child(3) .cover{background:linear-gradient(140deg,#0b2e1e,#2dd4a755),radial-gradient(circle at 70% 70%,#ffb45440,transparent 60%),#061410}
.album:nth-child(4) .cover{background:linear-gradient(140deg,#33051c,#ff2d7855),radial-gradient(circle at 25% 30%,#8b5cf640,transparent 60%),#160410}
.album:nth-child(5) .cover{background:linear-gradient(140deg,#06223d,#0084ff55),radial-gradient(circle at 75% 30%,#2dd4a740,transparent 60%),#04101e}
.album:nth-child(6) .cover{background:linear-gradient(140deg,#2d1c04,#ffb45455),radial-gradient(circle at 30% 75%,#ff2d7840,transparent 60%),#160e02}
.album:nth-child(7) .cover{background:linear-gradient(140deg,#101935,#5b7cfa55),radial-gradient(circle at 70% 70%,#00d1ff40,transparent 60%),#070b1a}
.album .meta{padding:.7rem .85rem;font-size:.8rem;color:var(--dim);display:flex;justify-content:space-between;gap:.5rem}
.album .meta b{color:var(--muted);font-weight:600}
.tracklist{font-family:var(--mono);font-size:.88rem;background:#070d17;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem;line-height:2.05;color:#bcd2e2}
.tracklist .no{color:var(--dim);margin-right:.9rem}
.tracklist .t{color:var(--cyan)}

/* press / bio */
.bio-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;position:relative}
.bio-card h4{margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;color:var(--cyan);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
.bio-card p{color:var(--muted);font-size:.95rem}
.copy-btn{position:absolute;top:1.1rem;right:1.1rem;font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--cyan);background:rgba(0,209,255,.07);border:1px solid var(--line-strong);border-radius:8px;padding:.32rem .7rem;cursor:pointer;transition:background .15s}
.copy-btn:hover{background:rgba(0,209,255,.16)}

/* platform links */
.plat{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;color:var(--text);font-weight:600;font-size:.92rem;transition:transform .18s,border-color .18s}
.plat:hover{transform:translateY(-3px);border-color:var(--line-strong);text-decoration:none}
.plat .ico{font-size:1.25rem}
.plat small{display:block;color:var(--dim);font-weight:500;font-size:.78rem}
.plat .arrow{margin-left:auto;color:var(--cyan);font-family:var(--mono)}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1.3rem}
.contact-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}
.contact-card h3{margin-bottom:.4rem}
.contact-card ul{list-style:none;margin-top:1rem}
.contact-card li{padding:.4rem 0;color:var(--muted);font-size:.95rem}
.contact-card li b{color:var(--text);font-weight:600}

/* banners */
.banner{border:1px solid var(--line-strong);border-radius:var(--r);padding:2.2rem;background:
  radial-gradient(600px 300px at 85% 20%,rgba(255,45,120,.12),transparent 60%),
  linear-gradient(180deg,var(--panel2),var(--panel))}
.banner h3{font-size:1.4rem;margin-bottom:.6rem}
.banner p{color:var(--muted);max-width:44rem;margin-bottom:1.2rem}

/* footer */
footer.site{border-top:1px solid var(--line);background:#03060b;padding:3.4rem 0 2rem;margin-top:2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem;margin-bottom:2.4rem}
.foot-grid h5{font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);margin-bottom:1rem}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.5rem}
.foot-grid a{color:var(--muted);font-size:.92rem}
.foot-grid a:hover{color:var(--cyan)}
.foot-grid .blurb{color:var(--dim);font-size:.9rem;margin-top:.7rem;max-width:30rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;color:var(--dim);font-size:.83rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:#16283e;border-radius:6px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:#1f3a59}