/* ===================== SoundPaper case study ===================== */
:root{
  --sp-purple:#a78bfa;
  --sp-dark:#0d0b14;
  --sp-dark-2:#100e1b;
  --sp-line:rgba(167,139,250,.14);
  --sp-text:#b0a8c8;
  --sp-muted:#584f7a;
}

/* page base */
.sp-main{ padding-top:var(--nav-h); background:var(--sp-dark); color:#fff; min-height:100vh; }

/* nav — dark override */
.sp-nav{ }
.sp-nav.scrolled{ background:rgba(13,11,20,.90) !important; box-shadow:0 1px 0 var(--sp-line) !important; }
.sp-nav .back{ color:var(--sp-text); }
.sp-nav .back:hover{ color:var(--sp-purple); }
.sp-nav .brand{ color:#fff; }
.sp-nav .navlinks a{ color:var(--sp-text); }
.sp-nav .navlinks a:hover{ color:#fff; }
.sp-nav .lang{ border-color:rgba(255,255,255,.2); }
.sp-nav .lang button{ color:var(--sp-text); }
.sp-nav .lang button.on{ background:rgba(167,139,250,.2); color:#fff; }

/* -------- intro -------- */
.sp-intro{ padding:80px 0 40px; }
.sp-index{ color:var(--sp-muted) !important; }
.sp-index .ln{ background:var(--sp-line) !important; }
.sp-tag-badge{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--sp-purple); letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.sp-title .c{ color:var(--sp-purple); }
.sp-pr-tag{ border-color:rgba(167,139,250,.35) !important; color:var(--sp-text) !important; }
.sp-pr-tag.solid{ background:var(--sp-purple) !important; border-color:var(--sp-purple) !important; color:#fff !important; }
.sp-lead{ color:var(--sp-text) !important; }
.sp-lead .hl{ color:var(--sp-purple) !important; }
.sp-meta{ border-color:var(--sp-line) !important; }
.sp-meta .k{ color:var(--sp-muted) !important; }
.sp-meta .v{ color:#fff !important; }

/* -------- loop video hero -------- */
.sp-hero-vid{ padding:0 0 100px; }
.sp-macwin{ border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07); }
.sp-macbar{ display:flex; align-items:center; padding:11px 16px; background:#1c1a24; border-bottom:1px solid rgba(255,255,255,.06); }
.sp-macdots{ display:flex; gap:6px; }
.sp-macdots i{ width:11px; height:11px; border-radius:50%; display:block; }
.sp-macdots i:nth-child(1){ background:#ff5f57; }
.sp-macdots i:nth-child(2){ background:#febc2e; }
.sp-macdots i:nth-child(3){ background:#28c840; }
.sp-mactitle{ flex:1; text-align:center; font-family:'Space Mono',monospace; font-size:11px; color:#4a4558; letter-spacing:.04em; }
.sp-macwin video{ display:block; width:100%; }

/* -------- feature rows -------- */
.sp-feats{ padding:100px 0; border-top:1px solid var(--sp-line); }
.sp-feat-row{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center; padding:70px 0; border-bottom:1px solid var(--sp-line); position:relative; }
.sp-feat-row:last-child{ border-bottom:none; }
.sp-feat-text{ }
.sp-feat-num{ font-family:'Space Mono',monospace; font-size:13px; color:var(--sp-purple); letter-spacing:.12em; margin-bottom:18px; }
.sp-feat-text h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,44px); letter-spacing:-.025em; line-height:1.02; color:#fff; margin-bottom:18px; }
.sp-feat-text h3 .c{ color:var(--sp-purple); }
.sp-feat-text p{ font-size:16.5px; line-height:1.65; color:var(--sp-text); max-width:480px; }
.sp-points li{ color:var(--sp-text) !important; }
.sp-points li svg{ color:var(--sp-purple) !important; }
.sp-feat-deco{ display:flex; align-items:center; justify-content:flex-end; overflow:hidden; }
.sp-bg-num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(130px,14vw,200px); color:rgba(167,139,250,.05); line-height:1; letter-spacing:-.05em; user-select:none; pointer-events:none; }

/* -------- demo section -------- */
.sp-demo{ background:var(--sp-dark-2); padding:100px 0; position:relative; overflow:hidden; }
.sp-demo::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.07), transparent 55%); pointer-events:none; }
.sp-demo .wrap{ position:relative; }
.sp-demo-head{ text-align:center; margin-bottom:52px; }
.sp-eyebrow{ color:var(--sp-purple) !important; }
.sp-eyebrow::before{ background:var(--sp-purple) !important; }
.sp-eyebrow.center::after{ background:var(--sp-purple) !important; }
.sp-demo-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(34px,4.5vw,54px); letter-spacing:-.03em; color:#fff; margin:18px 0 12px; }
.sp-demo-head p{ font-size:16px; color:var(--sp-text); max-width:520px; margin:0 auto; }

/* -------- cta -------- */
.sp-cta{ background:var(--sp-dark); padding:110px 0; text-align:center; border-top:1px solid var(--sp-line); }
.sp-cta h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(38px,6vw,72px); letter-spacing:-.03em; line-height:.95; color:#fff; margin:22px 0 32px; }
.sp-cta h2 .c{ color:var(--sp-purple); }
.sp-ghost{ border:1.5px solid var(--sp-line) !important; color:#fff !important; background:transparent !important; }
.sp-ghost:hover{ border-color:var(--sp-purple) !important; transform:translateY(-2px); }
.sp-primary{ background:var(--sp-purple) !important; color:#fff !important; border:none; }
.sp-primary:hover{ background:#fff !important; color:var(--sp-dark) !important; transform:translateY(-2px); }

/* reveal animation reused from site.css */

/* -------- responsive -------- */
@media (max-width:860px){
  .sp-feat-row{ grid-template-columns:1fr; gap:30px; }
  .sp-feat-deco{ display:none; }
}
@media (max-width:560px){
  .sp-intro{ padding:60px 0 24px; }
  .sp-hero-vid{ padding:0 0 60px; }
  .sp-feats{ padding:70px 0; }
  .sp-feat-row{ padding:52px 0; }
  .sp-demo{ padding:70px 0; }
  .sp-cta{ padding:80px 0; }
  .sp-demo-head{ margin-bottom:36px; }
}