/* Loud Star Distribution — shared brand stylesheet
   Black / white / neon-green, matches the real logo (loudstar-mark-web.png). */

:root{
  --bg:#000000; --bg-2:#0c0c0c; --panel:#121212; --border:#262626;
  --ink:#ffffff; --mut:#a6a6a6; --mut-2:#7a7a7a;
  --neon:#69ff00; --neon-dim:rgba(105,255,0,.14);
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{ color:var(--neon); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 22px; }

/* header */
header.site{
  position:sticky; top:0; z-index:20; background:rgba(0,0,0,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
header.site .bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; max-width:1100px; margin:0 auto; }
header.site .logo{ height:34px; width:auto; }
header.site nav{ display:flex; gap:22px; }
header.site nav a{ color:var(--mut); font-size:14px; font-weight:600; letter-spacing:.01em; }
header.site nav a.on, header.site nav a:hover{ color:var(--ink); text-decoration:none; }

/* age gate */
#agegate{
  position:fixed; inset:0; z-index:100; background:#000;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
#agegate .card{
  max-width:420px; width:100%; text-align:center; border:1px solid var(--border);
  border-radius:var(--radius); padding:36px 28px; background:var(--panel);
}
#agegate img{ height:56px; margin:0 auto 22px; }
#agegate h1{ font-size:20px; margin:0 0 10px; }
#agegate p{ color:var(--mut); font-size:13.5px; margin:0 0 24px; line-height:1.6; }
#agegate .row{ display:flex; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:14px; padding:13px 20px;
  border-radius:10px; cursor:pointer; border:1px solid transparent; flex:1;
}
.btn-neon{ background:var(--neon); color:#000; }
.btn-neon:hover{ filter:brightness(1.08); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn-outline:hover{ border-color:var(--mut); }
[hidden]{ display:none !important; }

/* hero / fork */
.hero{ padding:64px 0 40px; text-align:center; }
.hero .mark{ height:100px; margin:0 auto 26px; }
.hero .eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--neon); margin:0 0 12px; font-weight:700; }
.hero h1{ font-size:38px; line-height:1.12; margin:0 0 14px; letter-spacing:-.02em; }
.hero p.lead{ max-width:52ch; margin:0 auto; color:var(--mut); font-size:15.5px; line-height:1.65; }

.forkgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:44px 0 20px; }
@media (max-width:680px){ .forkgrid{ grid-template-columns:1fr; } }
.forkcard{
  display:flex; flex-direction:column; gap:14px; text-align:left; padding:28px 26px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--panel);
  cursor:pointer; transition:border-color .15s, transform .15s;
}
.forkcard:hover{ border-color:var(--neon); transform:translateY(-2px); }
.forkcard .tag{ display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--neon); font-weight:700; }
.forkcard h2{ font-size:22px; margin:2px 0 0; }
.forkcard p{ color:var(--mut); font-size:14px; margin:0; line-height:1.55; }
.forkcard .go{ margin-top:auto; font-weight:700; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:6px; }
.forkcard:hover .go{ color:var(--neon); }

/* sections */
section{ padding:54px 0; border-top:1px solid var(--border); }
section h2{ font-size:26px; margin:0 0 10px; letter-spacing:-.01em; }
section p.sub{ color:var(--mut); font-size:14.5px; max-width:60ch; margin:0 0 30px; line-height:1.6; }

/* catalog */
.catalog{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.product{ border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); overflow:hidden; }
.product .shot{
  aspect-ratio:1/1; background:
    repeating-linear-gradient(135deg, #161616, #161616 10px, #0d0d0d 10px, #0d0d0d 20px);
  display:flex; align-items:center; justify-content:center; color:var(--mut-2);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:16px;
}
.product .body{ padding:16px 16px 18px; }
.product .name{ font-size:16px; font-weight:700; margin:0 0 4px; }
.product .desc{ font-size:12.5px; color:var(--mut); margin:0 0 12px; line-height:1.55; }
.product .price{ font-size:13px; color:var(--neon); font-weight:700; font-variant-numeric:tabular-nums; }
.product .price .note{ color:var(--mut-2); font-weight:500; text-transform:none; letter-spacing:0; font-size:11px; margin-left:6px; }

.noticebar{
  display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border:1px solid var(--border);
  border-left:3px solid var(--neon); border-radius:10px; background:var(--panel); margin-bottom:34px;
}
.noticebar b{ color:var(--ink); }
.noticebar p{ margin:4px 0 0; color:var(--mut); font-size:13px; line-height:1.55; }

/* trade page */
.tradegrid{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:start; }
@media (max-width:820px){ .tradegrid{ grid-template-columns:1fr; } }
.tradelist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.tradelist li{ display:flex; gap:12px; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--panel); }
.tradelist .ico{ width:34px; height:34px; border-radius:8px; background:var(--neon-dim); color:var(--neon); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.tradelist b{ display:block; font-size:14.5px; margin-bottom:3px; }
.tradelist span{ color:var(--mut); font-size:13px; line-height:1.5; }

.policy{ margin-top:22px; padding:16px 18px; border:1px dashed var(--border); border-radius:10px; }
.policy b{ color:var(--neon); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.policy p{ margin:6px 0 0; color:var(--mut); font-size:13px; line-height:1.6; }

form.apply{ display:flex; flex-direction:column; gap:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); padding:26px; }
form.apply .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ form.apply .row2{ grid-template-columns:1fr; } }
label.f{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--mut); font-weight:600; }
label.f .req{ color:var(--neon); }
input, select, textarea{
  font-family:inherit; font-size:14px; color:var(--ink); background:#000; border:1px solid var(--border);
  border-radius:8px; padding:11px 12px; width:100%;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--neon); outline-offset:1px; border-color:var(--neon); }
textarea{ resize:vertical; min-height:80px; }
fieldset{ border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
fieldset legend{ font-size:12px; color:var(--mut); font-weight:600; padding:0 6px; }
.radiorow{ display:flex; flex-wrap:wrap; gap:16px; margin-top:6px; }
.radiorow label{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); font-weight:500; cursor:pointer; }
#applyStatus{ font-size:13px; padding:12px 14px; border-radius:8px; }
#applyStatus.ok{ background:var(--neon-dim); color:var(--neon); }
#applyStatus.err{ background:rgba(255,80,80,.12); color:#ff8080; }

footer{ padding:36px 0 60px; border-top:1px solid var(--border); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
footer p{ color:var(--mut-2); font-size:12px; margin:0; line-height:1.6; max-width:60ch; }
footer .badges{ display:flex; gap:8px; flex-wrap:wrap; }
footer .badge{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); border:1px solid var(--border); border-radius:20px; padding:5px 10px; }