:root{
  --navy:#0b1220;
  --navy-2:#0b1020;
  --brand:#38bdf8;
  --brand-2:#22d3ee;
  --accent:#a78bfa;
  --card:#0f172a;
  --line:#1e293b;
}
html,body{ background:var(--navy-2); color:#dee7f2; }
a{ color:#bfe2ff; }

.navbar-ll{
  background: linear-gradient(180deg, rgba(9,13,23,.9), rgba(9,13,23,.75));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.logo-dot{ width:40px; height:40px; border-radius:14px; background: radial-gradient(circle at 30% 30%, #5eead4, #60a5fa 40%, #a78bfa 80%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); display:inline-block; }
.site-name{ letter-spacing:.3px; font-size:1.2rem; }
.ll-nav .nav-link{ color:rgba(255,255,255,.85) !important; padding:.75rem .25rem; }
.ll-nav .nav-link:hover{ color:#fff !important; }
.navbar-toggler{ border-color:rgba(255,255,255,.25); }

.ll-mode-btn{ border-color:rgba(255,255,255,.2); padding:.4rem .5rem; }
.ll-mode-btn .ll-dot{ width:14px; height:14px; display:inline-block; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fee2e2, #fde68a 70%, #a78bfa 140%); }

.ll-footer{ background:linear-gradient(180deg, rgba(9,13,23,.65), rgba(9,13,23,.95)); }
.ll-footer-nav{ background: transparent; }

body{ padding-top: 65px; }
@media (min-width:900px){ body{ padding-top: 65px; } }

.navbar-expand-900 .navbar-toggler { display:inline-flex; }
.navbar-expand-900 .navbar-collapse { flex-basis:100%; align-items:center; }
@media (max-width: 899.98px){
  .navbar-expand-900 .navbar-collapse.collapse:not(.show){ display:none; }
  .navbar-expand-900 .navbar-nav{ flex-direction:column; gap: .25rem; padding: .5rem 0; }
}
@media (min-width:900px){
  .navbar-expand-900 .navbar-toggler{ display:none; }
  .navbar-expand-900 .navbar-collapse{ display:flex !important; }
  .navbar-expand-900 .navbar-nav{ flex-direction:row; }
}

.btn-primary{ background:linear-gradient(90deg, var(--brand), var(--brand-2)); border:0; }
.btn-outline-light{ border-color:rgba(255,255,255,.2); }
.btn-outline-light:hover{ background:#fff; color:#000 !important; }

.ll-pill{ display:inline-block; padding:.5rem .9rem; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#d9efff; }

.ll-hero{ padding: 4.5rem 0 2rem; background: radial-gradient(70rem 30rem at -10% -10%, rgba(56,189,248,.25), transparent 60%), radial-gradient(60rem 26rem at 110% 20%, rgba(167,139,250,.25), transparent 60%); }
.ll-hero-panel{ background: linear-gradient(180deg, rgba(12,19,38,.9), rgba(12,19,38,.6)); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(2,8,23,.5); }
.ll-chip{ display:flex; gap:12px; align-items:center; padding:1rem; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: 16px; }
.ll-chip-icon{ width:38px; height:38px; border-radius:10px; background: linear-gradient(160deg, #60a5fa, #a78bfa); display:inline-block; }
.ll-i-wave{ background: linear-gradient(160deg, #60a5fa, #38bdf8); }
.ll-i-blocks{ background: linear-gradient(160deg, #22d3ee, #a78bfa); }
.ll-i-nodes{ background: linear-gradient(160deg, #a78bfa, #60a5fa); }

.ll-card{ background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.6)); border:1px solid rgba(255,255,255,.08); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.ll-tile{ background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.65)); border:1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 16px 40px rgba(2,8,23,.55); }
.ll-tile .badge{ border:1px dashed rgba(255,255,255,.18); background: transparent; color:#a4b7cc; }
.ll-tile-art{ height:180px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: radial-gradient(40% 60% at 20% 40%, rgba(96,165,250,.35), transparent 60%), radial-gradient(40% 60% at 80% 60%, rgba(167,139,250,.35), transparent 60%); }
.ll-art-circle{ background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.6), transparent 40%), radial-gradient(circle at 50% 50%, rgba(167,139,250,.5), transparent 60%); }
.ll-art-bars{ background: linear-gradient(90deg, rgba(56,189,248,.45) 0 20%, transparent 20% 40%, rgba(167,139,250,.45) 40% 60%, transparent 60% 80%, rgba(56,189,248,.45) 80% 100%); }
.ll-art-play{ background: radial-gradient(circle at 24% 55%, rgba(56,189,248,.55), transparent 30%); position:relative; }
.ll-art-play::after{ content:''; position:absolute; inset:0; margin:auto; width:0; height:0; border-left:48px solid #64d8ff; border-top:28px solid transparent; border-bottom:28px solid transparent; top:50%; left:50%; transform: translate(-50%,-50%); }
.ll-art-blocks{ background: linear-gradient(90deg, rgba(56,189,248,.6) 0 40%, rgba(167,139,250,.6) 60% 100%); }
.ll-art-disc{ background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.7), rgba(167,139,250,.55) 60%, transparent 62%); }

.ll-follow{ display:flex; align-items:center; gap:16px; background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.6)); border:1px dashed rgba(255,255,255,.18); }
.ll-follow .ll-icon{ width:22px; height:22px; border-radius:6px; background: linear-gradient(160deg, #60a5fa, #22d3ee); display:inline-block; }

.ll-form{ background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.6)); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(2,8,23,.5); }
.form-control, .form-select{ background:#0c1326; border-color:#1b2740; color:#dfe9f5; }
.form-control:focus{ background:#0c1326; border-color:#60a5fa; box-shadow: 0 0 0 .25rem rgba(96,165,250,.15); }

h1,h2,h3,h4,h5{ color:#f2f7ff; }
.lead{ color:#cfe0f5; }


/* v2.0.1 header alignment fixes */
.navbar-ll .container-xl{ min-height:65px; }
.navbar-ll .navbar-brand{ padding: .25rem 0; margin:0; }
.navbar-ll .navbar-nav .nav-link{ line-height: 1.4; font-size: 1.05rem; }
#primaryNav{ min-height: 0; }
.ll-nav{ align-items: center; }
.navbar-ll .navbar-toggler{ margin-left:.25rem; }

/* Hero tweaks to match mock */
.ll-hero{ padding-top: 5.25rem; padding-bottom: 2.5rem; }
.ll-hero h1.display-3{ line-height: 1.05; letter-spacing: .2px; }
.ll-hero .lead{ max-width: 62ch; }
.ll-hero-panel{ border-radius: 18px; }


/* v2.0.2 alignment: use grid to perfectly center nav between brand and utilities */
.nav-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
@media (max-width: 899.98px){ .nav-grid{ grid-template-columns: 1fr auto; } .nav-grid .navbar-collapse{ grid-column: 1 / -1; } }

/* Footer nav link spacing to match header */
.ll-footer-nav .nav-link{ color:rgba(255,255,255,.85) !important; padding:.6rem .4rem; font-size:1.05rem; }
.ll-footer-nav .nav-link:hover{ color:#fff !important; }


/* v2.0.3 header 65px tweaks */
.navbar-ll .navbar-brand{ padding:.25rem 0; }
.navbar-ll .nav-link{ padding:.5rem .5rem; }


/* v2.0.4 — Music page polish */
.container-xl > h1.display-5{ letter-spacing:.2px; margin-bottom:.35rem; }
.container-xl > .lead{ color:#cfe0f5; margin-bottom:2rem; }

/* Feature cards row */
.ll-card{ border-radius:22px; }
.ll-card h4{ font-weight:700; margin-bottom:.5rem; }
.ll-card p{ color:#cfe0f5; }

/* Tiles section */
.ll-tile{ border-radius:24px; padding:1.25rem; background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.65)); border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 24px 60px rgba(2,8,23,.55); transition: transform .18s ease, box-shadow .18s ease; }
.ll-tile:hover{ transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 30px 70px rgba(2,8,23,.65); }
.ll-tile h5{ font-weight:700; }
.ll-tile p{ color:#b9cde6; }
.ll-tile .badge{ font-size:.8rem; letter-spacing:.06em; color:#a9bbd2; border:1px dashed rgba(255,255,255,.2); background:transparent; }
.ll-tile-art{ height:220px; border-radius:20px; border:1px solid rgba(255,255,255,.10); background: radial-gradient(40% 60% at 20% 40%, rgba(96,165,250,.35), transparent 60%), radial-gradient(40% 60% at 80% 60%, rgba(167,139,250,.35), transparent 60%); }

/* Listen button pill like mock */
.ll-tile .btn{ border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 18px rgba(0,0,0,.35); }
.ll-tile .btn:hover{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#001014 !important; border-color: transparent; box-shadow: 0 10px 22px rgba(0,0,0,.45); }

/* Section subtitle */
h2.h3.fw-bold{ margin-top: 1.25rem; margin-bottom: .75rem; }