/* PureMusic site styles: modern, fast, accessible */
:root{
  --bg:#0b0f1a; /* deep space */
  --bg-alt:#0f1524;
  --text:#e8ecf1;
  --muted:#9aa5b1;
  --brand:#1db954;
  --brand-2:#4565ff;
  --danger:#ef4444;
  --ok:#22c55e;
  --radius:14px;
  --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1000px 600px at 10% -10%, rgba(69,101,255,.18), transparent 55%), radial-gradient(800px 500px at 90% -20%, rgba(29,185,84,.18), transparent 60%), var(--bg);
  color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;border-radius:8px;z-index:999}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Nav */
.site-header{position:relative}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(180deg, rgba(0,0,0,.35), transparent);-webkit-backdrop-filter:saturate(140%) blur(6px);backdrop-filter:saturate(140%) blur(6px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand-img{width:24px;height:24px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.brand-text{font-weight:700;letter-spacing:.2px}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--text)}
.nav-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav-menu a{color:var(--text);text-decoration:none;opacity:.9}
.nav-menu a:hover{opacity:1;color:#fff}

/* Hero */
.hero{position:relative;overflow:hidden}
.gradient-aurora{background:radial-gradient(600px 300px at 0% 0%, rgba(69,101,255,.35), transparent 60%),radial-gradient(600px 260px at 100% 0%, rgba(29,185,84,.32), transparent 55%),linear-gradient(180deg, var(--bg-alt), transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:64px 0 48px}
.display{font-size:clamp(32px, 5vw, 56px);line-height:1.1;margin:0 0 12px}
.lead{font-size:clamp(16px, 1.7vw, 20px);color:var(--muted);margin:0 0 18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;transition:.2s ease;will-change:transform,box-shadow}
.btn-primary{color:#06120b;background:linear-gradient(135deg, var(--brand), var(--brand-2));box-shadow:0 8px 26px rgba(69,101,255,.28)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{color:var(--text);border:1px solid var(--border);background:rgba(255,255,255,.02)}

.ticks{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ticks li{display:flex;align-items:center;gap:10px}

.hero-visual{display:flex;justify-content:center}
.glass{background:var(--glass);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.phone-mock{width:min(360px, 90%);}
.phone-mock .screen{padding:16px}
.album-art{height:180px;border-radius:16px;background:linear-gradient(135deg, rgba(69,101,255,.5), rgba(29,185,84,.5));}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(120deg, transparent, rgba(255,255,255,.1), transparent);animation:shimmer 2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.track{margin:12px 2px 6px}
.track .title{display:block;font-weight:700}
.track .meta{display:block;color:var(--muted);font-size:.9rem}
.progress{margin:12px 2px 8px}
.progress .bar{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.progress .bar span{display:block;height:100%;background:linear-gradient(90deg, var(--brand), var(--brand-2))}
.progress .time{display:flex;justify-content:space-between;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem;margin-top:6px}
.controls{display:flex;justify-content:center;gap:10px;margin-top:10px}
.pill{border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer}
.pill-lg{padding:10px 18px}

/* Sections */
.section{padding:64px 0}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.section-title{margin:0 0 8px;font-size:clamp(22px, 2.6vw, 32px)}
.section-subtitle{margin:0 0 24px;color:var(--muted)}

.grid.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius);padding:16px;min-height:120px;transition:.2s}
.pad-lg{padding:24px !important}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));}

/* Elevated card utility — used by trust cards, feature cards, and safety items */
.card-elevated{position:relative;border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,.04);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));box-shadow:0 8px 22px rgba(0,0,0,.36);transition:transform .26s cubic-bezier(.2,.9,.2,1),box-shadow .26s ease,filter .26s ease;will-change:transform}
.card-elevated::before{content:"";position:absolute;inset:-8px;border-radius:18px;pointer-events:none;background:radial-gradient(60% 40% at 20% 10%, rgba(69,101,255,.08), rgba(29,185,84,.04) 40%, transparent 55%);opacity:0;transform:scale(.98);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.9,.2,1)}
.card-elevated:hover::before,.card-elevated:focus-within::before{opacity:1;transform:scale(1.04)}
.card-elevated:hover,.card-elevated:focus-within{transform:translateY(-12px) scale(1.02);box-shadow:0 28px 64px rgba(8,12,30,.62);filter:brightness(1.02)}
.card-elevated:active{transform:translateY(-8px) scale(1.01)}
.card-elevated:focus-within{outline:2px solid rgba(29,185,84,.12);outline-offset:8px}

/* Safety */
.grid.safety{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.safety-item{display:flex;gap:12px;padding:14px;border-radius:12px}
.safety-item > div{flex:1}
.safety-item{border:0}
.safety-item .badge{width:36px;height:36px}
.safety-item{box-shadow:none}
.safety-item{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04)}
.safety-item{transition:transform .26s,box-shadow .26s}
.safety-item:hover,.safety-item:focus-within{transform:translateY(-10px);box-shadow:0 20px 48px rgba(8,12,30,.5)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--border)}
.badge-yes{background:linear-gradient(135deg, var(--brand), var(--brand-2));}
.badge-ok{background:linear-gradient(135deg, #10b981, #34d399)}
.badge-na{background:linear-gradient(135deg, #64748b, #94a3b8)}

.trust-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 12px}
.trust-item{color:var(--text);font-weight:600;background:rgba(255,255,255,.02);padding:6px 10px;border-radius:10px;border:1px solid var(--border)}

.point-list{margin-top:12px;color:var(--text)}
.point-list ol{margin:0 0 0 18px}
.point-list li{margin:8px 0}

/* Trust panel styles for privacy policy */
.trust-panel{margin-top:12px}
.trust-panel h3{margin:0 0 12px;font-size:1.15rem}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trust-card{position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.04);box-shadow:0 8px 22px rgba(0,0,0,.36);transition:transform .26s cubic-bezier(.2,.9,.2,1),box-shadow .26s ease,filter .26s ease;will-change:transform}
.trust-card::before{content:"";position:absolute;inset:-8px;border-radius:18px;pointer-events:none;background:radial-gradient(60% 40% at 20% 10%, rgba(69,101,255,.12), rgba(29,185,84,.06) 40%, transparent 55%);opacity:0;transform:scale(.98);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.9,.2,1)}
.trust-card:hover::before,.trust-card:focus-within::before{opacity:1;transform:scale(1.04)}
.trust-card:hover,.trust-card:focus-within{transform:translateY(-12px) scale(1.035);box-shadow:0 28px 64px rgba(8,12,30,.62);filter:brightness(1.035)}
.trust-card:active{transform:translateY(-8px) scale(1.02)}
.trust-card:focus-within{outline:2px solid rgba(29,185,84,.14);outline-offset:8px}
.trust-emoji{font-size:20px;line-height:1;padding-top:4px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg, rgba(29,185,84,.08), rgba(69,101,255,.06));border:1px solid rgba(255,255,255,.03);transition:transform .22s ease}
.trust-card:hover .trust-emoji,.trust-card:focus-within .trust-emoji{transform:translateY(-4px) scale(1.06)}
.trust-emoji svg{width:22px;height:22px;color:var(--brand-2);}
.trust-body h4{margin:0 0 6px;font-size:1rem}
.trust-body p{margin:0;color:var(--muted);font-size:.95rem}

@media(max-width:900px){.trust-grid{grid-template-columns:1fr}}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .trust-card,.trust-card::before,.trust-emoji{transition:none!important;transform:none!important}
}

/* Stores */
.store-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store-btn{display:inline-flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;text-decoration:none;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text)}
.store-btn.play{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#06120b;font-weight:700}
.store-btn.disabled{opacity:.6;cursor:not-allowed}
.store-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.2)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:28px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-links a{color:var(--text);text-decoration:none;opacity:.85}
.footer-links a:hover{opacity:1}
.legal{color:var(--muted)}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:1fr 1fr}
  .grid.safety{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav-toggle{display:flex}
  .nav-menu{position:absolute;right:20px;top:60px;flex-direction:column;gap:10px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:12px;border-radius:12px;border:1px solid var(--border);display:none}
  .nav-menu.open{display:flex}
}