/* ================================================================
   distro.fyi — premium dark royalty-intelligence styling
   Tokens
================================================================ */
:root{
  --bg:#04050a;
  --bg-raise:#0a0d16;
  --ink:#f3f5fa;
  --ink-dim:#9aa3b8;
  --ink-faint:#5c6478;
  --blue:#3d7fff;
  --blue-bright:#5ea0ff;
  --purple:#8b5cf6;
  --violet-deep:#5b3df5;
  --green:#34d399;
  --rose:#fb7185;
  --glass:rgba(255,255,255,.045);
  --glass-edge:rgba(255,255,255,.09);
  --glass-edge-hover:rgba(94,160,255,.45);
  --grad:linear-gradient(120deg,var(--blue) 0%,var(--purple) 100%);
  --radius:18px;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1160px;
}

*{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:var(--font-body);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- ambient orbs ---------- */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.32}
.orb-a{width:560px;height:560px;background:#1d3fae;top:-180px;left:-120px;animation:drift 26s ease-in-out infinite alternate}
.orb-b{width:480px;height:480px;background:#5b21b6;top:24%;right:-180px;animation:drift 32s ease-in-out infinite alternate-reverse}
.orb-c{width:420px;height:420px;background:#0e3a8a;bottom:-160px;left:32%;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,50px) scale(1.12)}}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container.narrow{max-width:880px}
.section{padding:104px 0}
.muted{color:var(--ink-dim);font-weight:400}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.12}
h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:14px}
h3{font-size:1.08rem;margin-bottom:8px}
.lead{color:var(--ink-dim);max-width:62ch;margin-bottom:34px;font-size:1.06rem}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:14px}

/* ---------- glass ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.card-pad{padding:26px}

/* ---------- buttons / inputs ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;color:var(--ink);
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);box-shadow:0 8px 30px rgba(61,127,255,.35)}
.btn-primary:hover{box-shadow:0 10px 38px rgba(139,92,246,.5);transform:translateY(-2px)}
.btn-ghost{border-color:var(--glass-edge);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--glass-edge-hover);transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-block{width:100%;margin-top:20px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-edge);
  color:var(--ink);border-radius:11px;padding:12px 14px;font:inherit;font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,127,255,.22)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3b8' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
.select option{background:var(--bg-raise);color:var(--ink)}
.field-label{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:18px 0 8px}
.field-label:first-child{margin-top:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(4,5,10,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:28px}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px;letter-spacing:-.02em}
.brand-dot{color:var(--blue-bright)}
.brand-mark{width:13px;height:13px;border-radius:4px;background:var(--grad);box-shadow:0 0 14px rgba(94,160,255,.8);display:inline-block}
.nav-links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:.86rem;font-weight:500;padding:8px 11px;border-radius:9px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}

/* ---------- hero ---------- */
.hero{padding:120px 0 0;text-align:center;position:relative}
.hero-title{font-size:clamp(3.4rem,9vw,6.4rem);font-weight:700;letter-spacing:-.045em;margin:6px 0 10px}
.hero-sub{font-family:var(--font-display);font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--ink);font-weight:500}
.hero-copy{color:var(--ink-dim);max-width:62ch;margin:18px auto 34px;font-size:1.05rem}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:74px}

/* signature ticker */
.ticker-wrap{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);overflow:hidden;padding:13px 0}
.ticker{display:flex;width:max-content;gap:46px;animation:scroll 60s linear infinite;font-family:var(--font-mono);font-size:.82rem;white-space:nowrap}
.ticker-item{display:inline-flex;gap:10px;align-items:baseline}
.ticker-item .t-name{color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem}
.ticker-item .t-val{color:var(--ink);font-weight:700}
.ticker-item .t-up{color:var(--green)} .ticker-item .t-down{color:var(--rose)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.marquee-wrap{overflow:hidden;padding:26px 0 40px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;width:max-content;gap:14px;animation:scroll 44s linear infinite}
.chip{font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--ink-dim);border:1px solid var(--glass-edge);border-radius:999px;padding:9px 18px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:color .2s,border-color .2s}
.chip:hover{color:var(--ink);border-color:var(--glass-edge-hover)}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ticker:hover,.marquee:hover{animation-play-state:paused}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.why-grid p{color:var(--ink-dim);font-size:.93rem}
.disclaimer-inline{margin-top:26px;font-size:.82rem;color:var(--ink-faint);border-left:2px solid var(--purple);padding-left:14px}

/* ---------- distributor cards ---------- */
.dist-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.badge{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;padding:7px 13px;border-radius:999px;border:1px solid var(--glass-edge);color:var(--ink-dim);background:rgba(255,255,255,.03)}
.badge b{color:var(--ink);font-weight:600}

.toolbar{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:12px;padding:14px;margin-bottom:24px;align-items:center}
.dist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dist-card{padding:22px;display:flex;flex-direction:column;gap:12px;position:relative}
.dist-card:hover{transform:translateY(-4px);border-color:var(--glass-edge-hover);box-shadow:0 16px 44px rgba(15,30,80,.45)}
.dist-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dist-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem}
.score-ring{font-family:var(--font-mono);font-weight:700;font-size:.92rem;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:
  conic-gradient(var(--blue) calc(var(--p)*1%),rgba(255,255,255,.08) 0);position:relative}
.score-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#0b0e18}
.score-ring span{position:relative}
.dist-tagline{font-size:.86rem;color:var(--ink-dim);min-height:42px}
.dist-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;font-size:.82rem}
.dist-meta dt{color:var(--ink-faint);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.dist-meta dd{color:var(--ink)}
.feat-row{display:flex;flex-wrap:wrap;gap:7px}
.feat{font-size:.7rem;font-family:var(--font-mono);padding:4px 9px;border-radius:6px;border:1px solid var(--glass-edge);color:var(--ink-dim)}
.feat.on{color:var(--green);border-color:rgba(52,211,153,.35)}
.dist-actions{display:flex;gap:9px;margin-top:auto}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.82rem}
.proscons ul{list-style:none}
.proscons li{padding-left:16px;position:relative;margin-bottom:5px;color:var(--ink-dim)}
.proscons .pros li::before{content:"+";position:absolute;left:0;color:var(--green);font-weight:700}
.proscons .cons li::before{content:"–";position:absolute;left:0;color:var(--rose);font-weight:700}
.dist-card .details{display:none}
.dist-card.open .details{display:block}
.cat-tag{position:absolute;top:-10px;left:18px;background:var(--grad);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;padding:4px 10px;border-radius:999px;text-transform:uppercase}

.compare-tray{position:sticky;bottom:18px;z-index:40;display:flex;align-items:center;gap:14px;padding:12px 18px;margin-top:22px;font-size:.9rem}
.compare-view{margin-top:26px}
.dist-card.selectable{cursor:pointer}
.dist-card.selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 14px 40px rgba(61,127,255,.3)}

.table-title{margin:46px 0 14px;font-size:1.25rem}
.table-scroll{overflow-x:auto}
.table-scroll.slim{max-height:420px;overflow-y:auto;border-radius:12px}
.data-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:760px}
.data-table.compact{min-width:0}
.data-table th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);text-align:left;padding:13px 14px;border-bottom:1px solid var(--glass-edge);cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;background:#0a0d16;z-index:2}
.data-table th[data-sort]:hover{color:var(--blue-bright)}
.data-table td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover{background:rgba(94,160,255,.06)}
.yes{color:var(--green)} .no{color:var(--ink-faint)} .partial{color:#fbbf24}

/* ---------- calculator ---------- */
.calc-layout{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start}
.searchable{position:relative}
.searchable-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0b0e18;border:1px solid var(--glass-edge);border-radius:12px;max-height:240px;overflow-y:auto;z-index:30;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.searchable-list button{display:flex;justify-content:space-between;width:100%;background:none;border:0;color:var(--ink-dim);padding:10px 14px;font:inherit;font-size:.88rem;cursor:pointer;text-align:left}
.searchable-list button:hover,.searchable-list button.hl{background:rgba(94,160,255,.12);color:var(--ink)}
.searchable-list .rate{font-family:var(--font-mono);font-size:.78rem}
.seg{display:flex;gap:6px;margin-top:14px}
.seg-btn{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--glass-edge);color:var(--ink-dim);font-family:var(--font-mono);font-size:.8rem;padding:9px 0;border-radius:9px;cursor:pointer;transition:all .18s}
.seg-btn:hover{color:var(--ink)}
.seg-btn.active{background:var(--grad);color:#fff;border-color:transparent}

.calc-revenue{display:flex;flex-direction:column;gap:4px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:20px}
.calc-revenue-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.calc-revenue-value{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.calc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{display:flex;flex-direction:column;gap:3px}
.stat-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.stat-value{font-size:1.02rem;font-weight:600}
.badge-line{margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.74rem;padding:6px 13px;border-radius:999px;letter-spacing:.04em}
.pill.up{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.35)}
.pill.down{background:rgba(251,113,133,.1);color:var(--rose);border:1px solid rgba(251,113,133,.3)}
.pill.flat{background:rgba(255,255,255,.06);color:var(--ink-dim);border:1px solid var(--glass-edge)}
.fine{font-size:.75rem;color:var(--ink-faint);margin-top:16px}

/* ---------- DSP cards ---------- */
.dsp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.dsp-card{padding:20px;display:flex;flex-direction:column;gap:10px}
.dsp-card:hover{transform:translateY(-4px);border-color:var(--glass-edge-hover)}
.dsp-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff}
.dsp-rank{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);letter-spacing:.1em}
.dsp-name{font-family:var(--font-display);font-weight:600;font-size:1rem}
.dsp-rpm{font-family:var(--font-mono);font-size:1.5rem;font-weight:700}
.dsp-rpm small{font-size:.66rem;color:var(--ink-faint);font-weight:400;letter-spacing:.08em}
.dsp-sub{font-size:.76rem;color:var(--ink-dim);display:flex;flex-direction:column;gap:4px}
.dsp-sub b{color:var(--ink);font-weight:600}
.chart-card{margin-top:8px}
.chart-card h3{margin-bottom:18px}

/* ---------- rankings ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.tab{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;padding:9px 16px;border-radius:999px;border:1px solid var(--glass-edge);background:rgba(255,255,255,.03);color:var(--ink-dim);cursor:pointer;transition:all .18s}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--grad);color:#fff;border-color:transparent}
.rank-panel{margin-bottom:22px}
.rank-num{font-family:var(--font-mono);color:var(--ink-faint)}
.rank-bar{height:5px;border-radius:99px;background:var(--grad);display:block;min-width:4px}

/* ---------- quiz ---------- */
.quiz-q{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin-bottom:18px}
.quiz-progress{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:10px;text-transform:uppercase}
.quiz-opts{display:grid;gap:10px}
.quiz-opt{text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--glass-edge);border-radius:12px;padding:14px 18px;color:var(--ink);font:inherit;font-size:.95rem;cursor:pointer;transition:all .18s}
.quiz-opt:hover{border-color:var(--glass-edge-hover);transform:translateX(4px)}
.quiz-back{margin-top:16px;background:none;border:0;color:var(--ink-faint);font:inherit;font-size:.82rem;cursor:pointer}
.quiz-back:hover{color:var(--ink)}
.result-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-top:22px}
.result-card{padding:22px}
.result-card.winner{border-color:rgba(94,160,255,.5);box-shadow:0 0 0 1px rgba(94,160,255,.4),0 18px 50px rgba(61,127,255,.25)}
.result-tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:8px;display:block}
.result-why{font-size:.86rem;color:var(--ink-dim);margin:10px 0 14px}

/* ---------- methodology / faq ---------- */
.method-list{display:grid;gap:14px}
.method-list p{color:var(--ink-dim);font-size:.93rem}
.faq-list{display:grid;gap:12px}
.faq-item{overflow:hidden}
.faq-q{width:100%;background:none;border:0;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1rem;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;text-align:left}
.faq-q::after{content:"+";font-size:1.3rem;color:var(--blue-bright);transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-dim);font-size:.92rem}
.faq-a > div{padding:0 22px 20px}
.faq-item.open .faq-a{max-height:340px}

/* ---------- footer ---------- */
.footer{border-top:1px solid rgba(255,255,255,.07);padding:54px 0 38px;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{color:var(--ink-dim);text-decoration:none;font-size:.88rem}
.footer-links a:hover{color:var(--ink)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- focus / motion ---------- */
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .dist-grid{grid-template-columns:repeat(2,1fr)}
  .dsp-grid{grid-template-columns:repeat(3,1fr)}
  .calc-layout{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr 1fr}
  .result-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  .nav-links{position:fixed;inset:66px 0 auto 0;background:rgba(6,8,14,.97);backdrop-filter:blur(20px);flex-direction:column;padding:18px 24px 26px;display:none;border-bottom:1px solid var(--glass-edge)}
  .nav-links.open{display:flex}
  .nav-burger{display:block}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:680px){
  .section{padding:72px 0}
  .dist-grid,.dsp-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .calc-stats{grid-template-columns:repeat(2,1fr)}
  .toolbar{grid-template-columns:1fr}
  .proscons{grid-template-columns:1fr}
  .hero{padding-top:80px}
}