/* Piqo Player Website — Brand: Amber #D97706 × Dark #111827 */

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

:root{
  --amber:#D97706;
  --amber-light:#F59E0B;
  --dark:#111827;
  --dark-2:#1F2937;
  --dark-3:#374151;
  --gray:#9CA3AF;
  --light:#F9FAFB;
  --white:#FFFFFF;
  --max-w:720px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  background:var(--dark);
  color:var(--light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── Nav ─── */
.nav{
  position:sticky;top:0;z-index:10;
  background:rgba(17,24,39,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dark-3);
}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
}
.nav-brand{
  font-size:1.125rem;font-weight:700;
  color:var(--white);letter-spacing:-.02em;
}
.nav-brand span{color:var(--amber)}
.nav-links{display:flex;gap:20px;font-size:.875rem}
.nav-links a{color:var(--gray);transition:color .15s}
.nav-links a:hover{color:var(--white);text-decoration:none}

/* ─── Hero ─── */
.hero{
  text-align:center;
  padding:80px 24px 60px;
}
.hero h1{
  font-size:2.5rem;font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
}
.hero h1 span{color:var(--amber)}
.hero .tagline{
  margin-top:16px;
  font-size:1.125rem;
  color:var(--gray);
}

/* ─── Features ─── */
.features{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding:0 24px 60px;
}
.feature{
  background:var(--dark-2);
  border:1px solid var(--dark-3);
  border-radius:12px;
  padding:28px 24px;
}
.feature-icon{
  font-size:1.75rem;margin-bottom:10px;
}
.feature h3{
  font-size:1rem;font-weight:600;
  margin-bottom:6px;
}
.feature p{
  font-size:.875rem;color:var(--gray);line-height:1.5;
}

/* ─── CTA ─── */
.cta{
  text-align:center;
  padding:40px 24px 80px;
}
.cta-btn{
  display:inline-block;
  padding:14px 36px;
  background:var(--amber);
  color:var(--dark);
  font-weight:700;
  font-size:1rem;
  border-radius:10px;
  transition:background .15s;
}
.cta-btn:hover{background:var(--amber-light);text-decoration:none}
.cta-sub{
  margin-top:12px;
  font-size:.8125rem;
  color:var(--gray);
}

/* ─── Page content (Privacy / Support) ─── */
.page{
  max-width:var(--max-w);margin:0 auto;
  padding:48px 24px 80px;
}
.page h1{
  font-size:1.75rem;font-weight:700;
  margin-bottom:8px;
}
.page .updated{
  font-size:.8125rem;color:var(--gray);margin-bottom:32px;
}
.page h2{
  font-size:1.25rem;font-weight:600;
  margin-top:32px;margin-bottom:12px;
  color:var(--white);
}
.page p,.page ul{
  margin-bottom:16px;color:var(--gray);
}
.page ul{padding-left:20px}
.page li{margin-bottom:8px}
.page strong{color:var(--light)}

/* ─── FAQ ─── */
.faq{margin-top:8px}
.faq details{
  border:1px solid var(--dark-3);
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}
.faq summary{
  padding:16px 20px;
  font-weight:600;
  cursor:pointer;
  color:var(--white);
  background:var(--dark-2);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--amber);font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq .answer{
  padding:0 20px 16px;
  color:var(--gray);
  font-size:.9375rem;
  line-height:1.6;
}

/* ─── Footer ─── */
.footer{
  border-top:1px solid var(--dark-3);
  text-align:center;
  padding:24px;
  font-size:.8125rem;
  color:var(--dark-3);
}

/* ─── Responsive ─── */
@media(max-width:600px){
  .hero h1{font-size:1.75rem}
  .hero .tagline{font-size:1rem}
  .features{grid-template-columns:1fr;gap:16px}
  .nav-links{gap:14px}
}