/* SineWav hub: shared styles. Site chrome keeps crimson on void; SineWav colors live inside the content. */
:root{
  --bg:#0B0C10; --bg2:#101219; --panel:#161821; --panel2:#1E2029;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --white:#FFFFFF; --w85:rgba(255,255,255,.85); --w65:rgba(255,255,255,.65); --w50:rgba(255,255,255,.5);
  --red:#C0392B; --red-hi:#E04A3B; --red-glow:rgba(192,57,43,.42); --red-line:rgba(192,57,43,.45);
  /* SineWav accent, taken from the logo and covers */
  --sw-teal:#43DECB; --sw-blue:#63A9E9; --sw-violet:#A577FF;
  --sw-ink:#090F19; --sw-panel:#101824; --sw-edge:#344457; --sw-muted:#8797AE;
  --sw-grad:linear-gradient(90deg,#43DECB,#63A9E9 48%,#A577FF);
  --sw-line:rgba(99,169,233,.32); --sw-glow:rgba(165,119,255,.20);
  --font-h:'Inter',system-ui,sans-serif; --font-nav:'Cinzel',serif; --font-b:'Inter',system-ui,sans-serif;
  --nav-h:72px; --max:1180px; --px:clamp(1.25rem,5vw,4rem); --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{background:var(--bg);color:var(--w85);font-family:var(--font-b);line-height:1.7;overflow-x:hidden;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;} ul,ol{list-style:none;}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--px);}
:focus-visible{outline:2px solid var(--sw-teal);outline-offset:3px;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--font-h);font-size:.92rem;font-weight:700;letter-spacing:.02em;padding:.9rem 1.5rem;border:1px solid transparent;border-radius:10px;transition:background .2s,border-color .2s,color .2s,transform .2s;cursor:pointer;line-height:1.2;min-height:44px;}
.btn-buy{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 10px 30px -12px var(--red-glow);}
.btn-buy:hover{background:var(--red-hi);border-color:var(--red-hi);transform:translateY(-1px);}
.btn-ghost{background:rgba(255,255,255,.03);color:#fff;border-color:var(--line2);}
.btn-ghost:hover{border-color:var(--sw-teal);color:var(--sw-teal);}
/* hero "Save up to $99 with a bundle" button. On phones the singles come first and the bundles sit at the bottom; this tells buyers the deals exist and jumps straight to them. */
.btn-bundle{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--sw-grad) border-box;border:1px solid transparent;color:#fff;}
.btn-bundle .tag{width:1.05em;height:1.05em;flex:none;color:var(--sw-teal);}
.btn-bundle b{background:var(--sw-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.btn-bundle:hover{box-shadow:0 8px 28px -10px var(--sw-glow);transform:translateY(-1px);}
.btn-bundle:focus-visible{outline:2px solid var(--sw-teal);outline-offset:3px;}
.eyebrow{font-family:var(--font-h);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sw-teal);margin-bottom:1rem;}
h2.sh{font-family:var(--font-h);font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:#fff;}
.lede{font-size:1.06rem;color:var(--w65);max-width:660px;margin-top:1rem;}
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative;}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.small{font-size:.82rem;color:var(--w50);}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(11,12,16,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.35s;}
.nav.scrolled{background:rgba(11,12,16,.96);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;height:var(--nav-h);gap:2rem;max-width:var(--max);margin-inline:auto;padding-inline:var(--px);}
.nav-logo{display:flex;align-items:center;gap:.8rem;flex-shrink:0;}
.nav-logo img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(192,57,43,.45));}
.nav-logo .t{display:flex;flex-direction:column;line-height:1.15;}
.nav-logo .r{font-family:var(--font-nav);font-size:.84rem;font-weight:700;letter-spacing:.2em;color:#fff;}
.nav-logo .s{font-family:var(--font-nav);font-size:.82rem;font-weight:500;letter-spacing:.34em;color:rgba(255,255,255,.6);}
.nav-links{display:flex;gap:1.5rem;margin-left:auto;align-items:center;}
.nav-links a{font-family:var(--font-nav);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w65);transition:color .2s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-links .navbuy{color:#fff;background:var(--red);border:1px solid var(--red);padding:.5rem 1rem;border-radius:6px;}
.nav-links .navbuy:hover{background:var(--red-hi);}
.nav-toggle{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:10px;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--white);transition:transform .3s,opacity .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-mobile{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(11,12,16,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:1.6rem var(--px);flex-direction:column;gap:.4rem;z-index:99;max-height:calc(100vh - var(--nav-h));overflow-y:auto;}
.nav-mobile.open{display:flex;}
.nav-mobile a{font-family:var(--font-nav);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--w85);min-height:44px;display:flex;align-items:center;}
.nav-mobile .navbuy{color:var(--red-hi);}

/* hero */
.hero{position:relative;padding:calc(var(--nav-h) + 3.5rem) 0 4.5rem;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 80% 40%,var(--sw-glow) 0%,rgba(165,119,255,0) 65%),radial-gradient(ellipse 90% 80% at 15% 0%,#121A2A 0%,#0B0C10 62%);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.hero-logo{width:min(560px,100%);height:auto;border-radius:18px;margin-bottom:1.6rem;}
.hero h1{font-family:var(--font-h);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:#fff;}
.hero-sub{font-size:1.1rem;color:var(--w65);max-width:560px;margin:1.2rem 0 1.4rem;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem;}
.chips li{font-size:.82rem;font-weight:600;color:var(--w85);background:rgba(99,169,233,.08);border:1px solid var(--sw-line);border-radius:999px;padding:.3rem .8rem;}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;}
.hero-icon{justify-self:center;width:min(320px,70%);filter:drop-shadow(0 30px 60px rgba(165,119,255,.28));}

/* hear it */
.hear-box{margin-top:2rem;background:var(--sw-panel);border:1px solid var(--sw-edge);border-radius:16px;padding:clamp(1.2rem,3vw,2rem);}
#sinewav-ab{min-height:3rem;}
.ab-fallback{color:var(--w65);}
.tm-line{margin-top:1.2rem;font-size:.78rem;color:var(--w50);max-width:760px;}
.claim{font-family:var(--font-h);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;color:#fff;margin-top:1.4rem;}
.claim span{background:var(--sw-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2.4rem;align-items:stretch;}
.pcard{display:flex;flex-direction:column;gap:.8rem;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.2rem;position:relative;}
.pcard img{border-radius:12px;width:100%;aspect-ratio:1/1;object-fit:cover;}
.pcard h3{font-family:var(--font-h);font-size:1.15rem;font-weight:800;color:#fff;line-height:1.25;}
.pcard .contains{font-size:.94rem;color:var(--w65);flex:1;}
.price{font-family:var(--font-h);font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1;}
.save{font-size:.9rem;font-weight:600;color:var(--sw-teal);}
.fine{font-size:.8rem;color:var(--w50);line-height:1.5;}
.fine a{color:var(--w85);border-bottom:1px solid var(--sw-line);}
.pcard.feature{border-color:var(--sw-blue);background:linear-gradient(180deg,#141C2C,#161821 60%);box-shadow:0 0 0 1px var(--sw-line),0 30px 70px -30px var(--sw-glow);}
.pcard .tag{position:absolute;top:-.7rem;left:1.2rem;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#06121c;background:var(--sw-grad);border-radius:999px;padding:.2rem .7rem;}
.flag{margin-top:0;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(1.2rem,3vw,2rem);align-items:center;background:var(--panel);border:1px solid var(--sw-line);border-radius:16px;padding:1.2rem;}
.flag img{border-radius:12px;}
.flag h3{font-family:var(--font-h);font-size:1.3rem;font-weight:800;color:#fff;}
.flag p{color:var(--w65);margin:.4rem 0 .9rem;}
.flag-buy{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;}
.singles-h{font-family:var(--font-h);font-size:1.1rem;font-weight:700;color:#fff;margin-top:2.4rem;}
.singles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1rem;}
.scard{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem;}
.scard img{width:64px;height:64px;border-radius:8px;flex:none;}
.scard .b{flex:1;min-width:0;}
.scard h4{font-size:.95rem;font-weight:700;color:#fff;line-height:1.3;}
.scard .p{font-size:.9rem;color:var(--w65);}
.scard .btn{padding:.5rem .9rem;font-size:.84rem;}
.singles-note{margin-top:.9rem;}

/* plugin cards */
.plugins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2.4rem;}
.plug{display:flex;flex-direction:column;gap:.7rem;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.1rem;scroll-margin-top:calc(var(--nav-h) + 1rem);}
.plug img{border-radius:12px;width:100%;aspect-ratio:1/1;object-fit:cover;}
.plug h3{font-family:var(--font-h);font-size:1.15rem;font-weight:800;color:#fff;}
.plug .badge{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sw-teal);border:1px solid var(--sw-line);border-radius:999px;padding:.1rem .6rem;margin-left:.4rem;vertical-align:middle;}
.plug p.d{font-size:.95rem;color:var(--w65);flex:1;}
.plug .meta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.88rem;color:var(--w85);border-top:1px solid var(--line);padding-top:.7rem;}
.lat-table{margin-top:2.4rem;max-width:560px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.lat-table table{width:100%;border-collapse:collapse;}
.lat-table th,.lat-table td{text-align:left;padding:.65rem 1rem;font-size:.92rem;border-top:1px solid var(--line);}
.lat-table thead th{border-top:0;background:var(--panel2);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--w50);}
.lat-table td{color:var(--w65);}

/* text blocks */
.two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2.2rem;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem;}
.card h3{font-family:var(--font-h);font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.5rem;}
.card p{font-size:.97rem;color:var(--w65);}
.card a,.prose a,.faq a{color:#fff;border-bottom:1px solid var(--sw-line);}
.card a:hover,.prose a:hover,.faq a:hover{border-color:var(--sw-teal);}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin-top:2.2rem;counter-reset:s;}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.3rem;counter-increment:s;}
.step::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sw-grad);color:#06121c;font-weight:800;margin-bottom:.8rem;}
.step h3{font-family:var(--font-h);font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem;}
.step p{font-size:.94rem;color:var(--w65);}
.prose{max-width:720px;margin-top:1.4rem;}
.prose p{color:var(--w65);margin-bottom:1rem;}
.ticks{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem;max-width:720px;}
.ticks li{position:relative;padding-left:1.4rem;color:var(--w85);}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--sw-teal);}
.ticks b{color:#fff;font-weight:600;}

/* faq */
.faq{margin-top:2rem;max-width:820px;}
.faq details{border-top:1px solid var(--line);}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:1.1rem 2.4rem 1.1rem 0;font-family:var(--font-h);font-weight:700;font-size:1.02rem;color:#fff;min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--sw-teal);transition:transform .2s;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details p{font-size:.98rem;color:var(--w65);padding-bottom:1.2rem;}

/* requirements */
.req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:2rem;}
.linkrow{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.4rem;}
.linkrow a{color:#fff;border-bottom:1px solid var(--sw-line);font-size:.95rem;}
.linkrow a:hover{border-color:var(--sw-teal);}

/* footer */
.footer{background:#08090C;border-top:1px solid var(--line);padding:clamp(2.5rem,5vw,3.5rem) 0;text-align:center;}
.footer .fb{font-family:var(--font-nav);font-weight:900;letter-spacing:.14em;color:#fff;margin-bottom:.4rem;font-size:1.02rem;}
.footer p{font-size:.88rem;color:var(--w50);max-width:820px;margin-inline:auto;padding-inline:var(--px);}
.footer .fnav{margin:.6rem auto .9rem;}
.footer a{color:var(--w85);transition:color .2s;}
.footer a:hover{color:#fff;}
.footer .tm{font-size:.8rem;margin-top:.9rem;}

/* reveal: visible unless script arms it */
.rv.armed{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.armed.visible{opacity:1;transform:none;}

@media(max-width:1100px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);}
  .hero-icon{width:min(200px,50%);justify-self:start;order:-1;}
  .price-grid,.plugins,.two,.singles{grid-template-columns:minmax(0,1fr);}
  .steps,.req{grid-template-columns:minmax(0,1fr);}
  .flag{grid-template-columns:minmax(0,1fr);}
  .flag img{max-width:280px;}
  .pcard.feature{order:-1;}
}
@media(max-width:600px){
  .hero-cta .btn{width:100%;}
  .hero{padding-top:calc(var(--nav-h) + 2.2rem);}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .rv.armed{opacity:1;transform:none;}
}

/* in-copy links */
main p a:not(.btn),main li a:not(.btn),main .faq a:not(.btn){color:var(--sw-teal);text-decoration:underline;text-underline-offset:.15em;border-bottom:0;}
main p a:not(.btn):hover,main li a:not(.btn):hover{color:#fff;}
main p a:not(.btn):focus-visible,main li a:not(.btn):focus-visible{outline:2px solid var(--sw-teal);outline-offset:3px;border-radius:3px;}
.grid-note{margin-top:1.2rem;}
/* featured NS + player */
#pricing,#plugins,#bundles,.hear-ns,.flag{scroll-margin-top:calc(var(--nav-h) + .5rem);}
.hear-ns{margin-top:2.4rem;}
.hear-h{font-family:var(--font-h);font-size:1.3rem;font-weight:800;color:#fff;}
.hear-ns .lede{margin-bottom:0;}

/* hub: plugin covers link to /sinewav/<plugin>/ */
.plug .cover,.flag .cover{position:relative;display:block;border-radius:12px;overflow:hidden;}
.plug .cover img,.flag .cover img{transition:transform .5s var(--ease),filter .3s;}
.cover .peek{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1rem .9rem;background:linear-gradient(transparent,rgba(9,15,25,.92));display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9rem;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;}
.cover .peek i{font-style:normal;color:var(--sw-teal);}
.cover:hover img,.cover:focus-visible img{transform:scale(1.04);filter:brightness(.85);}
.cover:hover .peek,.cover:focus-visible .peek{opacity:1;transform:none;}
@media (hover:none){.cover .peek{opacity:1;transform:none;}}
.plug h3 a:hover,.flag h3 a:hover{color:var(--sw-teal);}
.plug .row{display:flex;gap:.5rem;}
.plug .row .btn{flex:1;padding-inline:.8rem;}
@media (max-width:860px){.flag .cover{max-width:280px;}}
