:root{
  --bg:#12141a;
  --surface:#1b1e26;
  --surface-2:#22262f;
  --border:#2b2f39;
  --border-strong:#3a3f4b;
  --text:#eef0f4;
  --text-secondary:#9096a3;
  --text-muted:#666c78;
  --accent:#f2a93b;
  --accent-strong:#ffbe5c;
  --accent-text:#241704;
  --shadow-color:rgba(0,0,0,.45);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --content-width:1120px;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f6f4ee;
    --surface:#ffffff;
    --surface-2:#fbf9f4;
    --border:#e6e1d3;
    --border-strong:#d5cfbe;
    --text:#211f1a;
    --text-secondary:#6c6659;
    --text-muted:#948d7c;
    --accent:#dd8a1f;
    --accent-strong:#c97910;
    --accent-text:#ffffff;
    --shadow-color:rgba(120,105,70,.14);
  }
}
:root[data-theme="light"]{
  --bg:#f6f4ee;
  --surface:#ffffff;
  --surface-2:#fbf9f4;
  --border:#e6e1d3;
  --border-strong:#d5cfbe;
  --text:#211f1a;
  --text-secondary:#6c6659;
  --text-muted:#948d7c;
  --accent:#dd8a1f;
  --accent-strong:#c97910;
  --accent-text:#ffffff;
  --shadow-color:rgba(120,105,70,.14);
}
:root[data-theme="dark"]{
  --bg:#12141a;
  --surface:#1b1e26;
  --surface-2:#22262f;
  --border:#2b2f39;
  --border-strong:#3a3f4b;
  --text:#eef0f4;
  --text-secondary:#9096a3;
  --text-muted:#666c78;
  --accent:#f2a93b;
  --accent-strong:#ffbe5c;
  --accent-text:#241704;
  --shadow-color:rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}

.wrap{
  max-width:var(--content-width);
  margin:0 auto;
  padding:0 28px;
  position:relative;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
  text-decoration:none;
}
.logo-mark{
  display:block;
  width:40px;
  height:40px;
  border-radius:11px;
  object-fit:cover;
  flex-shrink:0;
}
.nav-controls{
  display:flex;
  align-items:center;
  gap:10px;
}
.theme-switch{
  display:flex;
  gap:2px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
}
.theme-switch button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  border-radius:50%;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.theme-switch button.active{
  background:var(--accent);
  color:var(--accent-text);
}
.lang-switch{
  display:flex;
  gap:2px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
}
.lang-switch button{
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font:inherit;
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lang-switch button.active{
  background:var(--accent);
  color:var(--accent-text);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:56px 0 60px;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top:-160px;
  right:-120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 70%);
  filter:blur(10px);
  animation:glowPulse 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{opacity:.55;transform:scale(1);}
  50%{opacity:.9;transform:scale(1.08);}
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
.hero-headline{
  font-size:clamp(2.4rem, 4.6vw, 3.8rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.06;
  max-width:13ch;
  margin-bottom:20px;
}
.hero-sub{
  font-size:17px;
  color:var(--text-secondary);
  max-width:44ch;
  margin-bottom:30px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 24px;
  border-radius:var(--radius-sm);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-icon{
  flex-shrink:0;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--accent);
  color:var(--accent-text);
  box-shadow:0 10px 24px -12px var(--shadow-color);
}
.btn-primary:hover{
  background:var(--accent-strong);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-secondary{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}
.btn-secondary:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.btn-gplay{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 16px;
  border-radius:8px;
  background:#000;
  border:1px solid #000;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 24px -12px var(--shadow-color);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-gplay:hover{
  background:#1a1a1a;
  transform:translateY(-2px);
}
.btn-gplay:active{transform:translateY(1px);}
.btn-gplay-icon{flex-shrink:0;}
.btn-gplay-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.btn-gplay-get{
  font-size:10px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#dcdcdc;
}
.btn-gplay-brand{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
}

/* ---------- Hero visual: tuner readout + waveform ---------- */
.hero-visual{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 24px 24px;
  box-shadow:0 24px 48px -24px var(--shadow-color);
}
.tuner-readout{
  text-align:center;
  margin-bottom:10px;
}
.freq-value{
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:1px;
  text-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.dial{
  display:block;
  width:100%;
  height:auto;
  margin-bottom:14px;
}
.dial-baseline{
  stroke:var(--border);
  stroke-width:1.5;
}
.dial-ticks line{
  stroke:var(--border-strong);
  stroke-width:1.5;
}
.dial-labels text{
  fill:var(--text-muted);
  font-family:var(--font-mono);
  font-size:11px;
}
.dial-needle,
.dial-glow,
.dial-mark{
  transform:translateX(var(--dial-x, 0px));
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);
}
.dial-needle{
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px var(--accent));
}
.dial-glow{
  fill:var(--accent);
  opacity:.35;
  filter:blur(9px);
}
.dial-mark{
  fill:var(--accent);
}
.waveform{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  height:90px;
}
.waveform .bar{
  flex:1;
  max-width:10px;
  height:100%;
  min-height:6px;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg, var(--accent-strong), var(--accent));
  transform-origin:bottom;
  animation:wave 1.3s ease-in-out infinite;
  --min:.28;
  --max:.9;
}
@keyframes wave{
  0%,100%{transform:scaleY(var(--min));}
  50%{transform:scaleY(var(--max));}
}
.waveform .bar:nth-child(2n){animation-duration:1.05s;animation-delay:.08s;--max:1;}
.waveform .bar:nth-child(3n){animation-duration:1.5s;animation-delay:.16s;--min:.18;}
.waveform .bar:nth-child(4n){animation-duration:.9s;animation-delay:.04s;--max:.75;}
.waveform .bar:nth-child(5n){animation-duration:1.25s;animation-delay:.22s;--min:.35;}
.waveform .bar:nth-child(7n){animation-duration:1.65s;animation-delay:.12s;--max:.95;}
.waveform .bar:nth-child(6n+1){animation-duration:1.1s;animation-delay:.3s;--min:.22;--max:.85;}
@media (prefers-reduced-motion: reduce){
  .waveform .bar{animation:none;transform:scaleY(var(--max));}
  .hero-glow{animation:none;}
}

/* ---------- Section shell ---------- */
section{
  padding:52px 0;
}
.section-heading{
  font-size:clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight:700;
  letter-spacing:-.015em;
  margin-bottom:8px;
}

/* ---------- Highlights ---------- */
.highlights{
  padding-top:0;
  padding-bottom:44px;
}
.highlights-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.highlight{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 16px 10px 10px;
}
.highlight-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);
  flex-shrink:0;
}
.highlight h3{
  font-size:14px;
  font-weight:600;
}

/* ---------- Compare ---------- */
.compare{
  padding-top:0;
}
.compare-intro{
  color:var(--text-secondary);
  font-size:15px;
  margin-bottom:24px;
}
.compare-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  max-width:640px;
  margin:0 auto;
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.compare-table th,
.compare-table td{
  padding:10px 16px;
  text-align:left;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.compare-table td:first-child{
  white-space:normal;
  color:var(--text);
}
.compare-table thead th{
  color:var(--text-muted);
  font-weight:600;
  font-size:12px;
  background:var(--surface);
}
.compare-table th:not(:first-child),
.compare-table td:not(:first-child){
  text-align:center;
  width:64px;
}
.compare-table tbody tr:hover{
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.compare-table tbody tr:last-child td{
  border-bottom:none;
}
.chk .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  font-size:14px;
  font-weight:700;
}
.chk.yes .badge{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent);
}
.chk.no .badge{
  background:var(--surface-2);
  color:var(--text-muted);
}

/* ---------- Footer CTA ---------- */
.footer-cta{
  text-align:center;
  padding:64px 0;
}
.footer-cta h2{
  font-size:clamp(1.7rem, 3.2vw, 2.3rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:26px;
}
.footer-cta-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-cta-actions .btn-primary{
  border-radius:8px;
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--border);
  padding:24px 0;
}
footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-rights{
  font-size:13px;
  color:var(--text-muted);
}
.social-links{
  display:flex;
  gap:8px;
}
.social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.social-links a:hover{
  background:var(--accent);
  color:var(--accent-text);
  border-color:var(--accent);
  transform:translateY(-2px);
}
.footer-links{
  display:flex;
  gap:18px;
}
.footer-links a{
  font-size:13px;
  color:var(--text-secondary);
  text-decoration:none;
}
.footer-links a:hover{
  color:var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;}
  .hero-visual{order:-1;}
  .highlights-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .footer-cta-actions{flex-direction:column;align-items:stretch;}
  .waveform .bar{max-width:7px;}
  .highlights-grid{grid-template-columns:1fr;}
}