/* =====================================================================
   DNAbeat.pro — design system
   Dark "audio lab" theme. Signature: DNA helix made of spectrum bars.
   ===================================================================== */
:root{
  --bg:        #0A0810;
  --bg-2:      #120A14;
  --panel:     #1A1018;
  --panel-2:   #221422;
  --line:      #3A2433;
  --ink:       #F3EEF0;
  --ink-soft:  #D7C9CF;
  --muted:     #9A8088;

  --cyan:      #22E5C9;
  --violet:    #E0567F;
  --pink:      #FF4D9D;
  --amber:     #FFB23E;
  --gold:      #FFD36E;

  --grad: linear-gradient(90deg, var(--amber), var(--gold) 45%, var(--pink));
  --grad-soft: linear-gradient(135deg, rgba(255,178,62,.18), rgba(255,211,110,.16) 45%, rgba(255,77,157,.18));

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.8);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:
    radial-gradient(900px 600px at 88% -5%, rgba(255,178,62,.14), transparent 60%),
    radial-gradient(800px 600px at 5% 105%, rgba(255,77,157,.12), transparent 60%),
    linear-gradient(165deg, #0B0810 0%, #150A18 55%, #1C0E1A 100%);
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
canvas#particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.wrap{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:0 24px; }

/* ---- type ---- */
h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.28em; font-weight:700;
  text-transform:uppercase; color:var(--amber); text-shadow:0 0 18px rgba(255,178,62,.35);
}
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.muted{ color:var(--muted); }
.mono{ font-family:var(--font-mono); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--grad); color:#0A0814; box-shadow:0 10px 30px -10px var(--violet); }
.btn-primary:hover{ box-shadow:0 14px 40px -8px var(--violet); }
.btn-ghost{ background:rgba(255,255,255,.04); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--violet); }
.btn-google{ background:#fff; color:#1f1f1f; }
.btn-google:hover{ box-shadow:0 10px 30px -12px rgba(255,255,255,.5); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:rgba(10,8,20,.6); border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:19px; }
.logo .dot{ width:26px; height:26px; border-radius:8px; background:var(--grad); display:grid; place-items:center; }
.logo .dot svg{ width:16px; height:16px; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:14px; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.lang-toggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-family:var(--font-mono); font-size:12px; }
.lang-toggle button{ background:transparent; color:var(--muted); border:0; padding:6px 12px; cursor:pointer; }
.lang-toggle button.on{ background:var(--grad); color:#0A0814; }

/* ---- panels / cards ---- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.card{ background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }

/* ---- chips ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-family:var(--font-mono); font-size:12.5px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); background:rgba(255,255,255,.02);
  transition:all .15s;
}
.chip:hover{ border-color:var(--violet); }
.chip.on{ background:var(--grad-soft); border-color:var(--violet); color:var(--ink); }

/* badge */
.badge{ font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); }
.badge.free{ color:var(--cyan); border-color:rgba(34,229,201,.4); }
.badge.premium{ background:var(--grad); color:#0A0814; border:0; }

/* focus visibility */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}