/* ==========================================================================
   RadioReference.com — 2026 brand homepage (index_new.php)
   Tokens per RadioReference Brand Package v1.0 (June 2026)
   Assets: /assets/logo/  ·  This file + /assets/logo/ ship to S3/CloudFront later
   ========================================================================== */

:root{
  /* brand package core palette */
  --navy:#0E3D7A;
  --blue:#1E5BAA;
  --green:#7BC142;
  --gray:#5A5A5A;
  --ink:#16202e;
  --muted:#65727f;
  --line:#e4e8ef;
  --paper:#f4f6f9;
  --darkbg:#071528;
  --dark-green:#8ED24F;
  --dark-muted:#93A8C9;
  /* dark-surface derivatives (mockup) */
  --surface-1:#0a1b31;         /* card bg */
  --surface-2:#0d2138;         /* raised card bg */
  --surface-line:rgba(255,255,255,.08);
  --surface-line-soft:rgba(255,255,255,.05);
  --link-blue:#5f9be6;
  --sans:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:'Source Sans 3','Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.rrb{
  margin:0;background:#050f1f;color:#fff;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
.rrb a{color:inherit;text-decoration:none;}
.rrb img{display:block;}
.rrb .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- buttons / pills ---------- */
.rrb .btn{display:inline-block;font-family:var(--sans);font-weight:800;font-size:14px;
  padding:11px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
.rrb .btn:hover{transform:translateY(-1px);}
.rrb .btn-green{background:var(--dark-green);color:#0B2A05;}
.rrb .btn-green:hover{box-shadow:0 6px 18px rgba(142,210,79,.25);}
.rrb .btn-ghost{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.22);}
.rrb .btn-ghost:hover{background:rgba(255,255,255,.1);}
.rrb .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dark-green);font-weight:600;}
.rrb .golink{font-size:13.5px;font-weight:700;color:var(--dark-green);}
.rrb .golink:hover{text-decoration:underline;}
.rrb .golink-blue{font-size:13.5px;font-weight:700;color:var(--link-blue);}
.rrb .golink-blue:hover{text-decoration:underline;}

/* ---------- header / nav ---------- */
.rrb-hdr{position:sticky;top:0;z-index:50;background:rgba(5,15,31,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--surface-line-soft);}
.rrb-hdr .wrap{display:flex;align-items:center;gap:26px;height:64px;}
.rrb-hdr .brand img{height:38px;width:auto;}
.rrb-hdr nav.main{display:flex;align-items:center;gap:4px;margin-left:auto;}
.rrb-hdr .navitem{position:relative;}
.rrb-hdr .navitem>a{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#d7e1f2;
  padding:10px 12px;border-radius:8px;}
.rrb-hdr .navitem>a:hover{background:rgba(255,255,255,.06);color:#fff;}
.rrb-hdr .navitem>a .car{font-size:9px;opacity:.55;transform:translateY(1px);}
.rrb-hdr .dd{display:none;position:absolute;top:100%;left:0;min-width:230px;padding:8px;
  background:var(--surface-2);border:1px solid var(--surface-line);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);}
.rrb-hdr .navitem:hover .dd,.rrb-hdr .navitem:focus-within .dd{display:block;}
.rrb-hdr .dd a{display:block;font-size:13.5px;font-weight:600;color:#d7e1f2;padding:9px 12px;border-radius:8px;}
.rrb-hdr .dd a:hover{background:rgba(255,255,255,.07);color:#fff;}
.rrb-hdr .dd .divider{height:1px;background:var(--surface-line);margin:6px 4px;}
.rrb-hdr .hdr-right{display:flex;align-items:center;gap:10px;}
.rrb-hdr .hdr-right .help{font-size:13.5px;font-weight:700;color:#d7e1f2;padding:10px 12px;border-radius:8px;}
.rrb-hdr .hdr-right .help:hover{background:rgba(255,255,255,.06);color:#fff;}
.rrb-hdr .searchbtn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.07);color:#d7e1f2;font-size:14px;
  border:none;cursor:pointer;padding:0;}
.rrb-hdr .searchbtn:hover{background:rgba(255,255,255,.14);}

/* search push-down panel (mirrors production searchPushTop behavior) */
.rrb-search{display:none;background:var(--surface-2);border-bottom:1px solid var(--surface-line);}
.rrb-search.open{display:block;}
.rrb-search .wrap{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:14px;}
.rrb-search input[type=search]{flex:1;font-family:var(--body);font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:11px 16px;outline:none;}
.rrb-search input[type=search]::placeholder{color:var(--dark-muted);}
.rrb-search input[type=search]:focus{border-color:rgba(142,210,79,.5);}
.rrb-search .btn{font-size:13.5px;padding:11px 20px;}
.rrb-search .closebtn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.07);color:#d7e1f2;border:none;cursor:pointer;font-size:13px;}
.rrb-search .closebtn:hover{background:rgba(255,255,255,.15);}
.rrb-hdr .btn-reg{background:var(--dark-green);color:#0B2A05;font-weight:800;font-size:13.5px;
  padding:9px 18px;border-radius:10px;}
.rrb-hdr .btn-reg:hover{box-shadow:0 4px 14px rgba(142,210,79,.3);}
.rrb-hdr .user{font-size:13.5px;font-weight:700;color:#fff;padding:9px 12px;border-radius:8px;}
.rrb-hdr .user:hover{background:rgba(255,255,255,.06);}
.rrb-hdr .navtoggle{display:none;}
.rrb-hdr .navitem.mobile-only{display:none;}

/* ---------- hero ---------- */
.rrb-hero{position:relative;overflow:hidden;}
.rrb-hero .heroart{position:absolute;right:20px;top:0;height:100%;width:700px;pointer-events:none;}
/* soft brushy glow behind the tower (per mockup annotation) — small + blue-only
   so it feathers out well inside the card and never reads as a card background */
.rrb-hero .heroart::before{content:"";position:absolute;left:410px;top:265px;width:430px;height:430px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(52,101,176,.16) 0%,rgba(52,101,176,.07) 38%,transparent 64%);}
.rrb-hero .heroart .rings{position:absolute;top:0;left:0;}
.rrb-hero .heroart .tower{position:absolute;left:calc(50% - 3px);transform:translateX(-50%);
  top:161px;height:260px;width:auto;opacity:.55;}
.rrb-hero .wrap{position:relative;z-index:1;padding-top:74px;padding-bottom:56px;}
.rrb-hero .badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-green);
  background:rgba(142,210,79,.1);border:1px solid rgba(142,210,79,.28);border-radius:999px;padding:8px 16px;}
.rrb-hero .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--dark-green);
  box-shadow:0 0 8px rgba(142,210,79,.9);}
.rrb-hero h1{font-size:64px;line-height:1.04;letter-spacing:-.025em;font-weight:800;margin:28px 0 0;max-width:640px;}
.rrb-hero h1 .g{color:var(--dark-green);}
.rrb-hero p.lead{font-family:var(--body);font-size:18px;line-height:1.55;color:var(--dark-muted);
  max-width:420px;margin:20px 0 0;}
.rrb-hero .ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}

/* ---------- sections ---------- */
.rrb-sec{padding:48px 0 20px;}
.rrb-sec .sec-eyebrow{text-align:center;font-size:15px;letter-spacing:.3em;}
.rrb-sec h2.sec-title{text-align:center;font-size:32px;font-weight:800;letter-spacing:-.015em;margin:12px 0 40px;}

/* ---------- cards ---------- */
.rrb .card{background:var(--surface-1);border:1px solid var(--surface-line-soft);border-radius:18px;}

/* database feature card */
.rrb .dbcard{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;padding:38px 42px;margin-bottom:22px;}
.rrb .dbcard .ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:rgba(95,155,230,.14);color:var(--link-blue);}
.rrb .dbcard .headrow{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.rrb .dbcard h3{font-size:26px;font-weight:800;margin:0;}
.rrb .dbcard p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--dark-muted);margin:0 0 20px;}
.rrb .chiprow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.rrb .chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#cfe0f5;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;}
.rrb .chip:hover{background:rgba(255,255,255,.1);color:#fff;}
.rrb .statgrid{display:grid;grid-template-columns:1fr;gap:22px;align-content:center;
  border-left:1px solid var(--surface-line);padding-left:34px;}
.rrb .stat .n{font-size:30px;font-weight:800;letter-spacing:-.02em;}
.rrb .stat .l{font-family:var(--body);font-size:13px;color:var(--dark-muted);margin-top:3px;}

/* forums / wiki duo */
.rrb .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.rrb .duo .card{padding:28px 30px;}
.rrb .duo .headrow{display:flex;align-items:center;gap:13px;margin-bottom:12px;}
.rrb .duo .ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:rgba(95,155,230,.14);color:var(--link-blue);}
.rrb svg{flex:none;}
.rrb .btn svg,.rrb .eyebrow svg,.rrb .poptag svg{vertical-align:-1px;margin-right:2px;}
.rrb .chip .ci{display:inline-flex;align-items:center;color:var(--dark-green);}
.rrb-prem ul.feats li .fi{display:inline-flex;align-items:center;justify-content:center;color:var(--dark-green);}
.rrb .duo h3{font-size:19px;font-weight:800;margin:0;}
.rrb .duo p{font-family:var(--body);font-size:14px;line-height:1.55;color:var(--dark-muted);margin:0 0 16px;}

/* ---------- premium ---------- */
.rrb-prem{padding:58px 0 26px;}
.rrb-prem .eyebrow{font-size:15px;letter-spacing:.3em;}
.rrb-prem .cols{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center;}
.rrb-prem h2{font-size:32px;font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:14px 0 0;}
.rrb-prem p.sub{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--dark-muted);margin:16px 0 24px;}
.rrb-prem ul.feats{list-style:none;margin:0;padding:0;}
.rrb-prem ul.feats li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;
  color:#dfe9f8;margin-bottom:13px;}
.rrb .pricegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch;}
.rrb .price{background:var(--surface-1);border:1px solid var(--surface-line-soft);border-radius:16px;
  padding:26px 18px 22px;text-align:center;display:flex;flex-direction:column;position:relative;}
.rrb .price .term{font-size:13.5px;font-weight:700;color:var(--dark-muted);}
.rrb .price .amt{font-size:40px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px;}
.rrb .price .eq{font-family:var(--body);font-size:12px;color:var(--dark-muted);margin-bottom:20px;}
.rrb .price .btn{margin-top:auto;font-size:13px;padding:10px 14px;}
.rrb .price.hot{background:var(--surface-2);border-color:rgba(142,210,79,.5);
  box-shadow:0 0 0 1px rgba(142,210,79,.35),0 16px 40px rgba(0,0,0,.4);}
.rrb .price .poptag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--dark-green);color:#0B2A05;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;border-radius:999px;padding:5px 14px;white-space:nowrap;}
.rrb .prem-join{text-align:center;font-size:15px;font-weight:700;margin:26px 0 4px;}
.rrb .prem-join .g{color:var(--dark-green);}
.rrb .prem-note{text-align:center;font-family:var(--body);font-size:12px;color:var(--dark-muted);}

/* ---------- network ---------- */
.rrb-net{margin-top:44px;}
.rrb-net .inner{background:#0a1e3c;border:1px solid var(--surface-line-soft);border-radius:22px;padding:44px 40px;}
.rrb-net h2{text-align:center;font-size:27px;font-weight:800;letter-spacing:-.015em;margin:0 0 32px;}
.rrb-net h2 .g{color:var(--dark-green);}
.rrb-net .duo .card{background:rgba(255,255,255,.03);}
.rrb-net .brandline{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:18px;font-weight:800;}
.rrb-net .brandline .brandlogo{height:30px;width:auto;}
.rrb-net .brandline .brandmark{height:28px;width:auto;}

/* ---------- bottom trio ---------- */
.rrb-trio{padding:42px 0 60px;}
.rrb-trio .grid{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:22px;align-items:start;}
.rrb-trio .card{padding:26px 26px 22px;}
.rrb-trio h3{font-size:18px;font-weight:800;margin:0 0 18px;}
.rrb-trio .prod{text-align:center;}
.rrb-trio .prod img{max-width:82%;height:auto;margin:0 auto 16px;}
.rrb-trio .prod .pname{font-size:15px;font-weight:800;}
.rrb-trio .prod .ptag{font-family:var(--body);font-size:12.5px;font-style:italic;color:var(--dark-green);margin:4px 0 10px;}
.rrb-trio .prod .pdesc{font-family:var(--body);font-size:13px;line-height:1.55;color:var(--dark-muted);text-align:left;}
.rrb-trio .prod .shoplink{display:inline-block;margin-top:14px;}
.rrb-trio ul.list{list-style:none;margin:0;padding:0;}
.rrb-trio ul.list li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--surface-line-soft);
  font-family:var(--body);font-size:13px;line-height:1.45;}
.rrb-trio ul.list li:last-child{border-bottom:none;}
.rrb-trio ul.list .d{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 74px;padding-top:1px;}
.rrb-trio ul.list a{color:#d7e1f2;}
.rrb-trio ul.list a:hover{color:#fff;text-decoration:underline;}
.rrb-trio .more{display:inline-block;margin-top:14px;}

/* ---------- footer ---------- */
.rrb-ftr{border-top:1px solid var(--surface-line-soft);background:#040c19;}
.rrb-ftr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-top:34px;padding-bottom:40px;}
.rrb-ftr .fl{display:flex;align-items:center;gap:14px;}
.rrb-ftr .fl img{height:40px;width:auto;}
.rrb-ftr .cc{font-family:var(--body);font-size:12.5px;color:var(--dark-muted);}
.rrb-ftr nav{display:flex;gap:20px;flex-wrap:wrap;}
.rrb-ftr nav a{font-size:13px;font-weight:600;color:var(--dark-muted);}
.rrb-ftr nav a:hover{color:#fff;}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .rrb .dbcard{grid-template-columns:1fr;}
  .rrb .statgrid{border-left:none;padding-left:0;border-top:1px solid var(--surface-line);padding-top:26px;}
  .rrb-prem .cols{grid-template-columns:1fr;gap:40px;}
  .rrb-trio .grid{grid-template-columns:1fr;}
  .rrb-hero .heroart{opacity:.35;}
}
/* header collapses well above phone width: the full nav + right side overflow
   anywhere under ~1020px */
@media(max-width:1019px){
  .rrb-hdr .wrap{gap:12px;}
  .rrb-hdr .brand img{height:30px;}
  .rrb-hdr nav.main{display:none;}
  .rrb-hdr .hdr-right{margin-left:auto;gap:8px;}
  .rrb-hdr .hdr-right .help{display:none;}
  .rrb-hdr .btn-reg{padding:8px 14px;}
  .rrb-hdr .navtoggle{display:flex;align-items:center;justify-content:center;order:99;background:none;
    border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:7px 10px;}
  .rrb-hdr nav.main.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    align-items:stretch;background:var(--surface-2);border-bottom:1px solid var(--surface-line);
    padding:10px 16px 16px;gap:2px;max-height:calc(100vh - 64px);overflow-y:auto;}
  .rrb-hdr nav.main.open .dd{display:block;position:static;box-shadow:none;border:none;background:transparent;
    padding:0 0 6px 18px;min-width:0;}
  .rrb-hdr nav.main.open .navitem.mobile-only{display:block;border-top:1px solid var(--surface-line-soft);
    margin-top:6px;padding-top:6px;}
}
@media(max-width:760px){
  .rrb-hero h1{font-size:40px;}
  .rrb .duo{grid-template-columns:1fr;}
  .rrb .pricegrid{grid-template-columns:1fr;}
  .rrb-sec{padding-top:56px;}
  .rrb .dbcard{padding:28px 24px;}
  .rrb-net .inner{padding:30px 22px;}
}