:root{
  --bg:#f7f3e9; --surface:#ffffff; --ink:#1d1a12; --text:#2b271d; --muted:#6d6757;
  --line:#e6dec9; --gold:#b9892b; --gold-bright:#ecc659; --accent:#d8442d; --accent2:#1f9c8c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.12;letter-spacing:.4px;color:var(--ink)}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--gold)}
img{max-width:100%}

.brand{display:flex;align-items:center;gap:.6rem;font-family:'Oswald',sans-serif}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 8%,var(--gold-bright) 26%,var(--gold) 60%,#6f5212);
  color:#221806;font-weight:700;font-size:1rem;border:2px solid #fff;
  box-shadow:0 2px 8px #0003}
.brand-text{font-size:1.2rem;font-weight:700;letter-spacing:.5px;color:var(--ink)}

.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 2rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.nav nav{display:flex;align-items:center;gap:1.3rem}
.nav nav a{color:var(--muted);font-size:.95rem;font-weight:500}
.nav nav a:hover{color:var(--ink)}

.btn{display:inline-block;padding:.62rem 1.2rem;border-radius:7px;font-weight:600;
  font-size:.92rem;cursor:pointer;border:2px solid transparent;transition:.15s}
.btn-lg{padding:.9rem 1.7rem;font-size:1.02rem}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#221806;
  box-shadow:0 4px 14px #b9892b55}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(1.08)}

/* ---- HERO ---- */
.hero{position:overflow:hidden;background:
  radial-gradient(circle at 82% 28%,#ffe6a855,transparent 45%),
  radial-gradient(circle at 12% 80%,#1f9c8c33,transparent 42%),
  linear-gradient(160deg,#fffdf7,#f3ead2);overflow:hidden}
.hero-inner-wrap{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;
  max-width:1180px;margin:0 auto;padding:4.5rem 2rem}
.hero-copy{max-width:560px}
.eyebrow{display:inline-block;background:var(--accent);color:#fff;text-transform:uppercase;
  letter-spacing:2.5px;font-size:.7rem;font-weight:700;padding:.32rem .8rem;border-radius:20px;margin-bottom:1.1rem}
.hero h1{font-size:3.25rem;margin-bottom:1rem;color:var(--ink)}
.hero h1 .hl{color:var(--gold)}
.lede{color:var(--muted);font-size:1.13rem;margin-bottom:1.7rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* spinning record graphic */
.hero-art{position:relative;flex:0 0 360px;height:360px}
.disc-graphic{position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#111 0 3px,#1e1e1e 3px 6px);
  box-shadow:0 0 0 12px #fff,0 24px 60px #0004;animation:spin 14s linear infinite}
.disc-graphic::after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;
  margin:-60px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--gold-bright),var(--gold) 65%,#6f5212)}
.disc-graphic::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px;border-radius:50%;background:#fff;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}
.float-cd{position:absolute;right:-28px;bottom:-18px;width:130px;height:130px;border-radius:50%;
  background:conic-gradient(from 0deg,#d8c7ff,#bfe9ff,#ffe6c7,#d6ffe0,#d8c7ff);
  box-shadow:0 12px 30px #0003;border:6px solid #fff}
.float-cd::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 3px #00000018}

/* ---- bands ---- */
.band{max-width:1180px;margin:0 auto;padding:4rem 2rem}
.band h2{font-size:2.1rem;text-align:center;margin-bottom:.5rem}
.band .sub{text-align:center;color:var(--muted);margin-bottom:2.3rem}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1.2rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.7rem;
  box-shadow:0 6px 20px #0000000a;transition:.15s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #00000014}
.card .ic{font-size:1.7rem;margin-bottom:.5rem}
.card h3{color:var(--gold);font-size:1.22rem;margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.95rem}

/* showcase strip with product graphics */
.showcase{background:linear-gradient(160deg,#201d16,#34302330);background-color:#211e16}
.showcase .band h2,.showcase .band .sub{color:#f4eeda}
.shots{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.shot{text-align:center;color:#cfc8b4;font-size:.86rem}
.shot .jewel{width:190px;height:190px;border-radius:6px;margin:0 auto .7rem;
  background:linear-gradient(135deg,#2a2a33,#15151b);box-shadow:0 14px 30px #0007,inset 0 0 0 2px #ffffff1a;
  display:grid;place-items:center;position:relative;overflow:hidden}
.shot .jewel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(116deg,#fff0 40%,#ffffff33 47%,#fff0 54%)}
.shot .jewel span{font-family:'Oswald';color:#d8b15a;font-size:1.5rem}
.shot .lp{width:190px;height:190px;border-radius:50%;margin:0 auto .7rem;
  background:repeating-radial-gradient(circle at 50% 50%,#0a0a0a 0 3px,#1c1c1c 3px 6px);
  box-shadow:0 14px 30px #0007;display:grid;place-items:center}
.shot .lp em{width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,#ecc659,#b9892b);display:block}
.shot-img{width:210px;height:210px;object-fit:cover;border-radius:10px;display:block;
  margin:0 auto .7rem;box-shadow:0 14px 32px #0008}

.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:1.1rem}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.4rem;
  box-shadow:0 6px 18px #0000000a}
.steps li span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--gold);color:#221806;font-weight:700;font-family:'Oswald';margin-bottom:.6rem}
.steps li h4{font-size:1.05rem;margin-bottom:.3rem}
.steps li p{color:var(--muted);font-size:.9rem}
.center-cta{text-align:center;margin-top:2.4rem}

.foot{background:#211e16;color:#b8b09a;padding:2.4rem;text-align:center}
.foot .brand{justify-content:center;margin-bottom:.6rem}
.foot .brand-text{color:#f4eeda}
.foot p{font-size:.85rem}

/* stat bar */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);background:#211e16;color:#f4eeda}
.statbar div{padding:1.3rem 1rem;text-align:center;border-right:1px solid #ffffff14}
.statbar div:last-child{border-right:none}
.statbar b{display:block;font-family:'Oswald';color:var(--gold-bright);font-size:1.15rem}
.statbar span{font-size:.82rem;color:#b8b09a}

/* why physical */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.why-col{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.8rem;
  box-shadow:0 6px 20px #0000000a}
.why-col .ic{font-size:2rem;margin-bottom:.5rem}
.why-col h3{font-size:1.25rem;margin-bottom:.45rem;color:var(--ink)}
.why-col p{color:var(--muted);font-size:.95rem}

/* features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.feat{display:flex;gap:.8rem;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:1.1rem}
.feat span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--accent2);color:#fff;font-weight:700;font-size:.85rem}
.feat b{color:var(--ink);font-family:'Oswald'}
.feat p{color:var(--muted);font-size:.88rem;margin-top:.15rem}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem;align-items:start}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.8rem;
  box-shadow:0 8px 24px #0000000d;position:relative}
.price-card.feature{border:2px solid var(--gold);box-shadow:0 14px 36px #b9892b33}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);
  color:#221806;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  padding:.28rem .9rem;border-radius:20px}
.price-card h3{font-size:1.3rem;text-align:center;color:var(--ink)}
.price{text-align:center;margin:.6rem 0 1rem;color:var(--muted)}
.price b{font-family:'Oswald';font-size:2.6rem;color:var(--gold);display:inline}
.price span{font-size:.9rem}
.price-card ul{list-style:none;margin-bottom:1.2rem}
.price-card li{padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--text)}
.price-card li::before{content:"♪ ";color:var(--gold)}

/* faq */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.3rem}
.faq-item b{display:block;color:var(--ink);font-family:'Oswald';font-size:1.05rem;margin-bottom:.35rem}
.faq-item p{color:var(--muted);font-size:.92rem}

/* closing CTA */
.closing{text-align:center;padding:4.5rem 2rem;
  background:radial-gradient(circle at 50% 30%,#ffe6a866,transparent 55%),
  linear-gradient(160deg,#2a2519,#15130d);color:#f4eeda}
.closing h2{color:#fff;font-size:2.3rem;margin-bottom:.6rem}
.closing p{color:#cfc8b4;max-width:560px;margin:0 auto 1.6rem}

@media(max-width:820px){
  .statbar{grid-template-columns:repeat(2,1fr)}
  .hero-inner-wrap{flex-direction:column-reverse;padding:3rem 1.2rem;text-align:center}
  .hero h1{font-size:2.3rem}.hero-cta{justify-content:center}
  .hero-art{flex-basis:260px;height:260px;width:260px}
  .nav{padding:.7rem 1rem}.nav nav{gap:.6rem}.brand-text{display:none}
}