/* ==========================================================================
   Noteplay — Design Tokens
   Palette:  #0A0A14 bg / #12121F bg-alt / #7C5CFF violet / #3B82F6 blue
             #22D3EE cyan (accent) / #F4F3FA ink / #9B98B0 muted
   Type:     "Sora" (display) / "Inter" (body) / "JetBrains Mono" (utility)
   Motif:    Liner-notes / tracklist — content is framed like an album sleeve
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0A0A14;
  --bg-alt:#12121F;
  --bg-raised:#181826;
  --line:#26263A;
  --ink:#F4F3FA;
  --muted:#9B98B0;
  --muted-dim:#6D6A85;
  --violet:#7C5CFF;
  --violet-soft:#7C5CFF33;
  --blue:#3B82F6;
  --cyan:#22D3EE;
  --grad-main: linear-gradient(115deg, var(--violet) 0%, var(--blue) 60%, var(--cyan) 100%);
  --grad-text: linear-gradient(90deg, #B9A6FF 0%, #7C5CFF 45%, #22D3EE 100%);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --shadow-glow: 0 0 0 1px var(--line), 0 20px 60px -20px rgba(124,92,255,.35);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3,h4{font-family:'Sora',sans-serif; margin:0 0 .5em; letter-spacing:-0.02em; font-weight:700;}
p{margin:0 0 1em; color:var(--muted);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;}

.mono{font-family:'JetBrains Mono',monospace;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
.section{padding:120px 0;}
.section-tight{padding:80px 0;}
@media (max-width:768px){
  .section{padding:72px 0;}
  .section-tight{padding:56px 0;}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--cyan);}

.grad-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.section-head{max-width:640px; margin:0 0 56px;}
.section-head p{font-size:1.05rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-main); color:#0A0A14; box-shadow:0 12px 30px -10px rgba(124,92,255,.6);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(124,92,255,.75);}
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{ border-color:var(--violet); color:var(--violet);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important;}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,10,20,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem;}
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--grad-main);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{width:18px; height:18px;}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{font-size:.92rem; color:var(--muted); transition:color .25s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav-toggle{display:none; background:none; border:0; color:var(--ink); cursor:pointer;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column;
    justify-content:flex-start; padding:36px 24px; gap:24px; transform:translateX(100%);
    transition:transform .4s var(--ease); border-top:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1.1rem;}
  .nav-toggle{display:block;}
  .nav-cta .btn-ghost{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:168px 0 110px; overflow:hidden;
  background:
    radial-gradient(ellipse 700px 420px at 18% 0%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(ellipse 600px 500px at 92% 20%, rgba(34,211,238,.16), transparent 60%);
}
.hero-inner{position:relative; z-index:2; max-width:760px;}
.hero h1{font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.05;}
.hero .lede{font-size:1.15rem; max-width:560px; margin-bottom:36px;}
.hero-actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hero-note{font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--muted-dim);}

.waveform{
  display:flex; align-items:flex-end; gap:4px; height:64px; margin:44px 0 0;
}
.waveform span{
  width:4px; border-radius:3px; background:var(--grad-main);
  animation:wave 1.6s ease-in-out infinite;
  opacity:.85;
}
@keyframes wave{
  0%,100%{transform:scaleY(.25);}
  50%{transform:scaleY(1);}
}
.hero-tape{
  position:absolute; right:-60px; top:120px; width:420px; opacity:.5;
  filter:blur(0px);
}
@media (max-width:860px){ .hero-tape{display:none;} }

/* ---------- Trust strip ---------- */
.trust-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; background:var(--bg-alt);}
.trust-strip .container{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:center;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--muted); font-family:'JetBrains Mono',monospace;}
.trust-item strong{color:var(--ink);}

/* ---------- Tracklist (features) ---------- */
.tracklist{border-top:1px solid var(--line);}
.track-row{
  display:grid; grid-template-columns:64px 1fr 1fr; gap:28px; align-items:start;
  padding:32px 0; border-bottom:1px solid var(--line);
}
.track-row .num{font-family:'JetBrains Mono',monospace; color:var(--muted-dim); font-size:.95rem; padding-top:4px;}
.track-row h3{font-size:1.2rem; margin-bottom:8px;}
.track-row p{margin:0; max-width:420px;}
@media (max-width:700px){
  .track-row{grid-template-columns:40px 1fr; }
  .track-row h3 + p{grid-column:2;}
}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:940px){ .pricing-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;} }
.price-card{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:36px 30px; position:relative; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s;
}
.price-card:hover{transform:translateY(-6px); border-color:var(--violet-soft);}
.price-card.featured{border-color:var(--violet); box-shadow:var(--shadow-glow);}
.price-tag{
  position:absolute; top:-13px; right:28px; background:var(--grad-main); color:#0A0A14;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  padding:5px 12px; border-radius:999px; text-transform:uppercase;
}
.price-card .side{font-family:'JetBrains Mono',monospace; color:var(--cyan); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px;}
.price-card h3{font-size:1.4rem; margin-bottom:6px;}
.price-card .price{font-family:'Sora',sans-serif; font-size:2.6rem; font-weight:700; margin:14px 0 4px;}
.price-card .price sup{font-size:1rem; font-weight:500; color:var(--muted); top:-1em;}
.price-card .price-note{font-size:.85rem; color:var(--muted-dim); margin-bottom:26px;}
.price-list{margin:0 0 30px; display:flex; flex-direction:column; gap:12px;}
.price-list li{display:flex; gap:10px; font-size:.92rem; color:var(--ink); align-items:flex-start;}
.price-list li svg{flex-shrink:0; margin-top:3px; color:var(--cyan);}
.price-card .btn{margin-top:auto;}

/* ---------- Testimonials (cassette cards) ---------- */
.tape-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:940px){ .tape-grid{grid-template-columns:1fr; max-width:480px; margin:0 auto;} }
.tape-card{
  background:linear-gradient(160deg, var(--bg-raised), var(--bg-alt));
  border:1px solid var(--line); border-radius:var(--radius-m); padding:28px;
  position:relative;
}
.tape-reels{display:flex; gap:10px; margin-bottom:20px;}
.tape-reels span{width:26px; height:26px; border-radius:50%; border:3px solid var(--line); position:relative;}
.tape-reels span::after{content:""; position:absolute; inset:8px; border-radius:50%; background:var(--line);}
.tape-card blockquote{margin:0 0 20px; font-size:.98rem; color:var(--ink); font-style:italic;}
.tape-meta{display:flex; align-items:center; gap:12px;}
.tape-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--grad-main);
  display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.85rem; color:#0A0A14;
}
.tape-meta .name{font-weight:600; font-size:.9rem;}
.tape-meta .role{font-size:.8rem; color:var(--muted-dim);}
.tape-stars{color:var(--cyan); font-size:.8rem; letter-spacing:2px; margin-top:2px;}

/* ---------- FAQ (liner notes) ---------- */
.faq-list{border-top:1px solid var(--line); max-width:820px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; background:none; border:0; color:var(--ink); text-align:left;
  padding:24px 4px; display:flex; justify-content:space-between; align-items:center;
  font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:600; cursor:pointer; gap:20px;
}
.faq-q .plus{flex-shrink:0; width:22px; height:22px; position:relative; transition:transform .35s var(--ease);}
.faq-q .plus::before,.faq-q .plus::after{content:""; position:absolute; background:var(--cyan); border-radius:2px;}
.faq-q .plus::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
.faq-q .plus::after{height:100%; width:2px; left:50%; top:0; transform:translateX(-50%); transition:opacity .3s;}
.faq-item.open .plus{transform:rotate(180deg);}
.faq-item.open .plus::after{opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-a p{padding:0 4px 24px; max-width:640px;}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-l); padding:64px 48px; text-align:center;
  background:radial-gradient(ellipse 500px 260px at 50% -20%, rgba(124,92,255,.35), transparent 70%), var(--bg-alt);
  border:1px solid var(--line);
}
.cta-band h2{font-size:clamp(1.7rem,3.6vw,2.4rem);}
.cta-band p{max-width:480px; margin:0 auto 30px;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); padding:64px 0 30px; background:var(--bg-alt);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
@media (max-width:780px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;} }
.footer-brand p{max-width:280px; font-size:.9rem;}
.footer-col h4{font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:16px; font-weight:600;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:.9rem; color:var(--muted); transition:color .25s;}
.footer-col a:hover{color:var(--cyan);}
.social-row{display:flex; gap:12px; margin-top:18px;}
.social-row a{
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, color .25s;
}
.social-row a:hover{border-color:var(--cyan); color:var(--cyan);}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:26px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:14px; font-size:.82rem; color:var(--muted-dim);
}
.footer-bottom a{color:var(--muted-dim);}
.footer-bottom a:hover{color:var(--ink);}

/* ---------- Cookie notice ---------- */
.cookie-bar{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200; max-width:520px;
  margin:0 auto; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:20px 22px; box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:14px; transform:translateY(140%); transition:transform .5s var(--ease);
}
.cookie-bar.show{transform:translateY(0);}
.cookie-bar p{font-size:.85rem; margin:0;}
.cookie-actions{display:flex; gap:12px;}
.cookie-actions .btn{padding:10px 18px; font-size:.82rem;}

/* ---------- Page header (inner pages) ---------- */
.page-hero{padding:150px 0 64px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem);}
.page-hero p{max-width:560px;}

/* ---------- Forms ---------- */
.form-card{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:44px; max-width:760px;
}
@media (max-width:600px){ .form-card{padding:26px;} }
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.86rem; font-weight:600; color:var(--ink);}
.field .hint{font-size:.78rem; color:var(--muted-dim); font-weight:400; margin-top:-4px;}
.field input[type=text],
.field input[type=email],
.field select,
.field textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:13px 15px; color:var(--ink); font-family:'Inter',sans-serif; font-size:.95rem;
  transition:border-color .25s, box-shadow .25s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); outline:none;
}
.field textarea{resize:vertical; min-height:100px;}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B98B0' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center;}
.checkbox-row{display:flex; align-items:flex-start; gap:12px; margin-bottom:22px;}
.checkbox-row input{margin-top:3px; width:18px; height:18px; accent-color:var(--violet);}
.checkbox-row label{font-size:.9rem; color:var(--muted);}
.file-drop{
  border:1.5px dashed var(--line); border-radius:var(--radius-s); padding:26px; text-align:center;
  color:var(--muted-dim); font-size:.85rem; cursor:pointer; transition:border-color .25s, background .25s;
}
.file-drop:hover{border-color:var(--violet); background:rgba(124,92,255,.05);}
.file-drop.has-file{border-color:var(--cyan); color:var(--ink);}
.form-section-title{font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin:36px 0 18px; display:block;}
.form-section-title:first-child{margin-top:0;}

/* ---------- Delivery info ---------- */
.delivery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){ .delivery-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .delivery-grid{grid-template-columns:1fr;} }
.delivery-card{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px;
}
.delivery-card .ico{width:38px; height:38px; border-radius:10px; background:var(--grad-main); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.delivery-card h4{font-size:1rem; margin-bottom:6px;}
.delivery-card p{font-size:.86rem; margin:0;}
.delivery-banner{
  display:flex; align-items:center; gap:18px; background:var(--bg-alt); border:1px solid var(--violet-soft);
  border-radius:var(--radius-m); padding:22px 26px; margin-bottom:44px;
}
.delivery-banner .badge{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.6rem; background:var(--grad-main);
  -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap;
}
.delivery-banner p{margin:0; font-size:.9rem;}

/* ---------- Sidebar layout (order/checkout pages) ---------- */
.order-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:36px; align-items:start;}
@media (max-width:980px){ .order-layout{grid-template-columns:1fr;} }
.summary-card{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:30px; position:sticky; top:100px;
}
.summary-card h3{font-size:1.05rem; margin-bottom:20px;}
.summary-row{display:flex; justify-content:space-between; font-size:.9rem; color:var(--muted); padding:11px 0; border-bottom:1px solid var(--line);}
.summary-row span:last-child{color:var(--ink); font-weight:500;}
.summary-total{display:flex; justify-content:space-between; padding-top:18px; font-size:1.15rem; font-weight:700;}
.summary-total span:last-child{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;}
.summary-note{font-size:.78rem; color:var(--muted-dim); margin-top:16px;}

/* ---------- Checkout ---------- */
.pay-tabs{display:flex; gap:12px; margin-bottom:24px;}
.pay-tab{
  flex:1; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius-s);
  padding:16px; text-align:center; cursor:pointer; font-weight:600; font-size:.9rem; color:var(--muted);
  transition:border-color .25s, color .25s;
}
.pay-tab.active{border-color:var(--violet); color:var(--ink); box-shadow:0 0 0 3px var(--violet-soft);}
.pay-panel{display:none;}
.pay-panel.active{display:block;}
.card-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.stripe-el{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-s); padding:13px 15px;
  color:var(--muted-dim); font-size:.9rem;
}
.paypal-btn{
  width:100%; background:#FFC439; color:#111; border:0; border-radius:999px; padding:15px; font-weight:700;
  cursor:pointer; font-size:.95rem; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .25s;
}
.paypal-btn:hover{filter:brightness(.94);}
.secure-note{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted-dim); margin-top:18px;}

/* ---------- Success page ---------- */
.success-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:150px 24px 100px; text-align:center;}
.success-card{max-width:520px;}
.success-icon{
  width:74px; height:74px; border-radius:50%; background:var(--grad-main); display:flex; align-items:center;
  justify-content:center; margin:0 auto 28px; animation:pop .5s var(--ease);
}
@keyframes pop{ from{ transform:scale(.4); opacity:0;} to{ transform:scale(1); opacity:1;} }
.order-id{font-family:'JetBrains Mono',monospace; color:var(--cyan); font-size:.9rem; margin-bottom:6px;}

/* ---------- Simple content pages (Terms/Privacy) ---------- */
.legal{max-width:760px; padding-bottom:100px;}
.legal h2{margin-top:44px; font-size:1.3rem;}
.legal p, .legal li{color:var(--muted); font-size:.95rem;}
.legal ul{list-style:disc; padding-left:22px; display:block;}
.legal li{margin-bottom:8px; display:list-item;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.contact-card .ico{width:40px; height:40px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--cyan);}
.contact-card h4{font-size:.98rem; margin-bottom:4px;}
.contact-card p{font-size:.88rem; margin:0;}

/* utility */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.hidden{display:none !important;}