/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#4f8cff;
  --primary-dark:#3a6fd8;
  --primary-muted:rgba(79,140,255,0.08);
  --bg:#0d0d0d;
  --surface:#1a1a1a;
  --surface-hover:#242424;
  --border:#2a2a2a;
  --text:#e8e8e8;
  --text-secondary:#999999;
  --text-muted:#666666;
  --success:#30d158;
  --warning:#ff9f0a;
  --danger:#ff453a;
  --stem-vocals:#4f8cff;
  --stem-drums:#30d158;
  --stem-bass:#ff9f0a;
  --stem-guitar:#a855f7;
  --stem-piano:#14b8a6;
  --stem-other:#ff453a;
  --font-heading:'Outfit',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --nav-height:60px;
  --max-width:1080px;
}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  font-size:15px;
}
::selection{background:var(--primary);color:#fff}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
ul{list-style:none}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ===== WAVEFORM DECORATION ===== */
.waveform-divider{
  height:40px;
  position:relative;
  overflow:hidden;
  opacity:0.25;
}
.waveform-divider svg{
  width:100%;
  height:100%;
}
.waveform-divider svg path{
  stroke:var(--primary);
  stroke-width:1.5;
  fill:none;
}

.eq-accent{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:32px;
}
.eq-accent .bar{
  width:3px;
  border-radius:2px 2px 0 0;
  background:var(--primary);
  opacity:0.5;
}
.eq-accent .bar:nth-child(1){height:30%;opacity:0.3}
.eq-accent .bar:nth-child(2){height:60%;opacity:0.5}
.eq-accent .bar:nth-child(3){height:90%;opacity:0.7}
.eq-accent .bar:nth-child(4){height:45%;opacity:0.4}
.eq-accent .bar:nth-child(5){height:75%;opacity:0.6}
.eq-accent .bar:nth-child(6){height:25%;opacity:0.3}
.eq-accent .bar:nth-child(7){height:55%;opacity:0.5}
.eq-accent .bar:nth-child(8){height:85%;opacity:0.7}

/* ===== SITE WRAPPER ===== */
.site-wrapper{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===== NAVIGATION ===== */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--nav-height);
  z-index:100;
  background:rgba(13,13,13,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:transform .3s,background .3s;
}
.navbar.scrolled{background:rgba(13,13,13,0.95)}
.navbar.hidden{transform:translateY(-100%)}
.nav-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.05rem;
  color:var(--text);
  letter-spacing:-0.02em;
}
.nav-brand svg,.nav-brand img{flex-shrink:0;width:24px;height:24px;border-radius:4px;object-fit:cover}
.nav-brand img{display:block}
.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  padding:6px 12px;
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  font-size:0.82rem;
  font-weight:500;
  transition:all .2s;
}
.nav-links a:hover,.nav-links a.active{
  color:var(--text);
  background:var(--surface-hover);
}
.nav-links .btn-nav-cta{
  background:var(--primary);
  color:#fff;
  padding:6px 16px;
  border-radius:var(--radius-sm);
  margin-left:8px;
  font-weight:600;
  font-size:0.82rem;
}
.nav-links .btn-nav-cta:hover{
  background:var(--primary-dark);
  color:#fff;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  display:block;
  width:20px;height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all .3s;
}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

@media(max-width:768px){
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;
    top:var(--nav-height);
    left:0;right:0;
    background:rgba(13,13,13,0.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    padding:12px;
    gap:2px;
    transform:translateY(-110%);
    opacity:0;
    transition:all .3s;
    pointer-events:none;
  }
  .nav-links.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:all;
  }
  .nav-links a{padding:10px 14px;width:100%}
  .nav-links .btn-nav-cta{margin-left:0;margin-top:4px;text-align:center}
}

/* ===== HERO ===== */
.hero{
  min-height:85vh;
  display:flex;
  align-items:center;
  padding:100px 24px 60px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/images/logo_text_dark_checker.jpg') center/contain no-repeat;
  opacity:0.04;
  pointer-events:none;
  z-index:0;
}
.hero-grid{
  max-width:var(--max-width);
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.03em;
  margin-bottom:14px;
}
.hero h1 span{color:var(--primary)}
.hero p{
  font-size:0.95rem;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:28px;
  max-width:460px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-price-note{
  font-size:0.78rem;
  color:var(--text-muted);
  margin-top:10px;
}
.hero-trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:16px 0;
}
.hero-trust-badges span{
  font-size:0.78rem;
  color:var(--text-secondary);
  position:relative;
}
.hero-trust-badges span:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  width:3px;height:3px;
  border-radius:50%;
  background:var(--text-muted);
}

/* ===== WAVEFORM VISUAL ===== */
.waveform-visual{
  position:relative;
  padding:24px 0;
}
.waveform-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}
.waveform-track{
  height:32px;
  border-radius:4px;
  display:flex;
  align-items:center;
  padding:0 14px;
  gap:10px;
  position:relative;
  overflow:hidden;
}
.waveform-track:first-child{height:44px}
.waveform-track-label{
  font-size:0.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-secondary);
  width:48px;
  flex-shrink:0;
  z-index:1;
}
.waveform-track-bars{
  flex:1;
  height:100%;
  display:flex;
  align-items:center;
  gap:2px;
  z-index:1;
}
.waveform-track-bars span{
  display:block;
  width:3px;
  border-radius:2px;
  transition:height .3s;
}
.waveform-track.mix{
  background:rgba(79,140,255,0.08);
  border-left:3px solid var(--primary);
}
.waveform-track.mix .waveform-track-bars span{background:var(--primary)}
.waveform-track.vocals{
  background:rgba(79,140,255,0.06);
  border-left:3px solid var(--stem-vocals);
  margin-left:16px;
}
.waveform-track.vocals .waveform-track-bars span{background:var(--stem-vocals)}
.waveform-track.drums{
  background:rgba(48,209,88,0.06);
  border-left:3px solid var(--stem-drums);
  margin-left:32px;
}
.waveform-track.drums .waveform-track-bars span{background:var(--stem-drums)}
.waveform-track.bass{
  background:rgba(255,159,10,0.06);
  border-left:3px solid var(--stem-bass);
  margin-left:48px;
}
.waveform-track.bass .waveform-track-bars span{background:var(--stem-bass)}
.waveform-track.other{
  background:rgba(168,85,247,0.06);
  border-left:3px solid var(--stem-guitar);
  margin-left:64px;
}
.waveform-track.other .waveform-track-bars span{background:var(--stem-guitar)}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero{min-height:auto;padding-top:80px}
  .hero p{max-width:100%}
  .waveform-track{height:28px}
  .waveform-track:first-child{height:36px}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:0.88rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
  white-space:nowrap;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
}
.btn-primary:hover{
  background:var(--primary-dark);
  color:#fff;
  transform:translateY(-1px);
}
.btn-secondary{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-secondary:hover{
  border-color:var(--text-muted);
  background:var(--surface-hover);
  transform:translateY(-1px);
}
.btn-lg{padding:12px 28px;font-size:0.92rem}
.btn-sm{padding:6px 12px;font-size:0.8rem}
.btn-block{width:100%;justify-content:center}

/* ===== SECTION COMMON ===== */
.section{
  padding:80px 24px;
}
.section-inner{
  max-width:var(--max-width);
  margin:0 auto;
}
.section-header{
  margin-bottom:48px;
}
.section-header h2{
  font-family:var(--font-heading);
  font-size:clamp(1.4rem,2.8vw,2rem);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.section-header p{
  color:var(--text-secondary);
  font-size:0.9rem;
  max-width:480px;
  line-height:1.7;
}
.section-header.centered{text-align:center}
.section-header.centered p{margin:0 auto}

/* ===== STEM CHANNEL STRIPS ===== */
.stem-channels{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.stem-channel{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:all .2s;
}
.stem-channel:hover{
  background:var(--surface-hover);
  border-color:var(--text-muted);
}
.stem-channel-indicator{
  width:4px;
  height:32px;
  border-radius:2px;
  flex-shrink:0;
}
.stem-channel-waveform{
  flex:1;
  height:24px;
  display:flex;
  align-items:center;
  gap:2px;
}
.stem-channel-waveform span{
  display:block;
  width:3px;
  border-radius:2px;
  opacity:0.6;
}
.stem-channel-info{
  min-width:140px;
  text-align:right;
}
.stem-channel-info h4{
  font-family:var(--font-heading);
  font-size:0.85rem;
  font-weight:600;
}
.stem-channel-info p{
  font-size:0.75rem;
  color:var(--text-muted);
  margin-top:1px;
}
.stem-channel-desc{
  font-size:0.82rem;
  color:var(--text-secondary);
  max-width:280px;
  line-height:1.5;
}

@media(max-width:768px){
  .stem-channel{flex-wrap:wrap;gap:10px}
  .stem-channel-desc{max-width:100%;order:4;width:100%}
  .stem-channel-waveform{flex:1;min-width:120px}
  .stem-channel-info{min-width:auto}
}

/* ===== FEATURE PANELS ===== */
.feature-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding:64px 0;
}
.feature-panel:not(:last-child){
  border-bottom:1px solid var(--border);
}
.feature-panel.reverse{direction:rtl}
.feature-panel.reverse>*{direction:ltr}
.feature-panel-visual{
  position:relative;
}
.feature-panel-text h3{
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:4px;
}
.feature-panel-text .feature-sub{
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  margin-bottom:8px;
}
.feature-panel-text p{
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:14px;
}
.feature-panel-text ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.feature-panel-text ul li{
  font-size:0.8rem;
  color:var(--text-secondary);
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:4px;
}

/* Model comparison visual */
.model-compare{
  display:flex;
  gap:16px;
}
.model-card{
  flex:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px;
  text-align:center;
}
.model-card h4{
  font-family:var(--font-heading);
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:8px;
}
.model-card .model-stems{
  font-size:1.6rem;
  font-weight:700;
  color:var(--primary);
  font-family:var(--font-heading);
}
.model-card .model-stems-label{
  font-size:0.75rem;
  color:var(--text-muted);
  margin-bottom:8px;
}
.model-card p{
  font-size:0.8rem;
  color:var(--text-secondary);
  line-height:1.5;
}
.model-card .model-tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  font-size:0.7rem;
  font-weight:600;
  margin-top:8px;
}
.model-card .model-tag.fast{background:rgba(79,140,255,0.15);color:var(--primary)}
.model-card .model-tag.detail{background:rgba(168,85,247,0.15);color:var(--stem-guitar)}
.model-engine{font-size:0.7rem;color:var(--text-muted);margin-top:6px}
.pro-tag{
  display:inline-block;
  padding:1px 7px;
  border-radius:4px;
  font-size:0.65rem;
  font-weight:600;
  background:rgba(79,140,255,0.15);
  color:var(--primary);
  vertical-align:middle;
  margin-left:6px;
  letter-spacing:0.3px;
}

/* Use cases */
.usecases-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.usecase-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
  transition:border-color 0.2s;
}
.usecase-card:hover{border-color:var(--text-muted)}
.usecase-icon{
  font-size:1.6rem;
  margin-bottom:8px;
  line-height:1;
}
.usecase-card h3{
  font-family:var(--font-heading);
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:6px;
}
.usecase-card p{
  font-size:0.8rem;
  color:var(--text-secondary);
  line-height:1.6;
}

/* Format pipeline */
.format-pipeline{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.format-node{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-size:0.82rem;
  font-weight:500;
}
.format-arrow{
  color:var(--text-muted);
  font-size:1.1rem;
}

/* Privacy visual */
.privacy-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.privacy-node{
  text-align:center;
}
.privacy-node .pn-icon{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 8px;
  font-size:1.3rem;
}
.privacy-node p{
  font-size:0.75rem;
  color:var(--text-muted);
}
.privacy-arrow{
  font-size:1.3rem;
  color:var(--text-muted);
}
.privacy-node.offline .pn-icon{border-color:var(--success)}
.privacy-node.offline p{color:var(--success)}

@media(max-width:768px){
  .feature-panel{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .feature-panel.reverse{direction:ltr}
  .model-compare{flex-direction:column}
  .format-pipeline{justify-content:center}
  .usecases-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== TECH SPECS ===== */
/* Technical details collapsible */
.tech-details{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 24px;
  max-width:var(--max-width);
  margin:0 auto;
}
.tech-details summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.tech-details summary::-webkit-details-marker{display:none}
.tech-details summary h2{
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:600;
  margin:0;
}
.tech-details summary::after{
  content:'+';
  font-size:1.2rem;
  color:var(--text-muted);
  line-height:1;
}
.tech-details[open] summary::after{content:'\2212'}
.tech-details .tech-grid{border:none;padding:0;margin-top:20px}

.tech-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.tech-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px;
}
.tech-card.full{grid-column:1/-1}
.tech-card h3{
  font-family:var(--font-heading);
  font-size:0.95rem;
  font-weight:600;
  margin-bottom:14px;
}
.tech-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.tech-spec{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tech-spec-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  font-weight:600;
}
.tech-spec-value{
  font-size:0.85rem;
  color:var(--text-secondary);
}
.tech-table{
  width:100%;
  border-collapse:collapse;
}
.tech-table th{
  text-align:left;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  padding:6px 10px 6px 0;
  border-bottom:1px solid var(--border);
}
.tech-table td{
  padding:8px 10px 8px 0;
  font-size:0.82rem;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border);
}
.tech-table tr:last-child td{border-bottom:none}
.tech-table .check{color:var(--success);font-weight:600}

@media(max-width:768px){
  .tech-grid{grid-template-columns:1fr}
  .tech-specs{grid-template-columns:1fr}
}

/* ===== PRICING ===== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  align-items:start;
  max-width:580px;
  margin:0 auto;
  justify-content:center;
}
.pricing-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:all .2s;
}
.pricing-card:hover{border-color:var(--text-muted)}
.pricing-card.featured{
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary);
}
.pricing-name{
  font-family:var(--font-heading);
  font-size:0.82rem;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:6px;
}
.pricing-price{
  font-family:var(--font-heading);
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:-0.03em;
  margin-bottom:2px;
}
.pricing-price span{
  font-size:0.85rem;
  color:var(--text-muted);
  font-weight:400;
}
.pricing-desc{
  color:var(--text-secondary);
  font-size:0.82rem;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.pricing-features{
  margin-bottom:20px;
}
.pricing-features li{
  padding:5px 0;
  font-size:0.82rem;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:8px;
}
.pricing-features li::before{
  content:'';
  width:14px;height:14px;
  background:var(--success);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0;
}
.pricing-features li.muted::before{background:var(--text-muted);opacity:0.3}
.pricing-features li.muted{opacity:0.35}

@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
}

/* ===== COMPARISON TABLE ===== */
.comparison-section{margin-top:56px}
.comparison-section h2{
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:20px;
  text-align:center;
}
.comparison-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.comparison-table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
}
.comparison-table th{
  text-align:left;
  padding:14px 18px;
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.comparison-table th:not(:first-child){text-align:center}
.comparison-table th.highlight{color:var(--primary)}
.comparison-table td{
  padding:12px 18px;
  font-size:0.82rem;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border);
}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table td:first-child{font-weight:500;color:var(--text)}
.comparison-table td:not(:first-child){text-align:center}
.comparison-table .check{color:var(--success);font-weight:700}
.comparison-table .dash{color:var(--text-muted);opacity:0.4}

/* ===== FAQ ===== */
.faq-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.faq-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color .2s;
  cursor:pointer;
}
.faq-item:hover{border-color:var(--text-muted)}
.faq-item.active{border-color:var(--primary)}
.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  font-weight:500;
  font-size:0.88rem;
  gap:14px;
}
.faq-question svg{
  width:16px;height:16px;
  flex-shrink:0;
  transition:transform .3s;
  color:var(--text-muted);
}
.faq-item.active .faq-question svg{transform:rotate(180deg);color:var(--primary)}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-answer-inner{
  padding:0 18px 16px;
  color:var(--text-secondary);
  font-size:0.82rem;
  line-height:1.7;
}

/* ===== CTA ===== */
.cta-section{
  text-align:center;
  padding:72px 24px;
}
.cta-section h2{
  font-family:var(--font-heading);
  font-size:clamp(1.3rem,2.2vw,1.6rem);
  font-weight:700;
  margin-bottom:6px;
}
.cta-section p{
  color:var(--text-secondary);
  max-width:400px;
  margin:0 auto 24px;
  font-size:0.85rem;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cta-trust{font-size:0.78rem;color:var(--text-muted);margin-top:12px}
.footer-disclaimer{font-size:0.72rem;color:var(--text-muted);opacity:0.5;margin-top:8px;text-align:center;width:100%}

/* ===== PAGE HEADER ===== */
.page-header{
  padding:100px 24px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/images/logo_text_dark_checker.jpg') center/contain no-repeat;
  opacity:0.04;
  pointer-events:none;
  z-index:0;
}
.page-header h1{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.page-header p{
  color:var(--text-secondary);
  font-size:0.9rem;
  max-width:480px;
  margin:0 auto;
  line-height:1.7;
}

/* ===== FOOTER ===== */
.footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:40px 24px 20px;
  margin-top:auto;
}
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
}
.footer-brand p{
  color:var(--text-muted);
  font-size:0.78rem;
  margin-top:8px;
  max-width:240px;
  line-height:1.6;
}
.footer-col h4{
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-muted);
  margin-bottom:10px;
}
.footer-col a{
  display:block;
  padding:3px 0;
  font-size:0.82rem;
  color:var(--text-secondary);
}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  max-width:var(--max-width);
  margin:24px auto 0;
  padding-top:16px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.75rem;
  color:var(--text-muted);
}
.footer-socials{display:flex;gap:8px}
.footer-socials a{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.75rem;
  transition:all .2s;
  color:var(--text-muted);
}
.footer-socials a:hover{
  border-color:var(--primary);
  color:var(--primary);
}
@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
}
@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr}
  .usecases-grid{grid-template-columns:1fr}
}

/* ===== LEGAL / CONTENT ===== */
.legal-content{
  max-width:660px;
  margin:0 auto;
  padding:8px 16px;
}
.legal-content h2{
  font-family:var(--font-heading);
  font-size:1.05rem;
  font-weight:600;
  margin-top:36px;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  letter-spacing:-0.01em;
}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{
  font-family:var(--font-heading);
  font-size:0.88rem;
  font-weight:600;
  margin-top:22px;
  margin-bottom:8px;
  color:var(--text);
}
.legal-content p{
  color:var(--text-secondary);
  margin-bottom:12px;
  line-height:1.85;
  font-size:0.85rem;
}
.legal-content ul{
  list-style:disc;
  padding-left:20px;
  margin-bottom:14px;
}
.legal-content ul li{
  color:var(--text-secondary);
  font-size:0.85rem;
  margin-bottom:6px;
  line-height:1.7;
  padding-left:2px;
}
.legal-content strong{color:var(--text)}
.legal-content a{color:var(--primary);text-decoration:underline}
.legal-content a:hover{color:#fff}

@media(max-width:600px){
  .legal-content{padding:8px 4px}
  .legal-content ul{padding-left:16px}
}

/* ===== FEATURES DETAIL PAGE ===== */
.feature-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  margin-bottom:56px;
}
.feature-detail-grid.reverse{direction:rtl}
.feature-detail-grid.reverse>*{direction:ltr}
.feature-detail-visual{
  width:100%;
  aspect-ratio:16/10;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  overflow:hidden;
}
.feature-detail-text h3{
  font-family:var(--font-heading);
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:8px;
}
.feature-detail-text p{
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:12px;
  font-size:0.85rem;
}
.feature-detail-text ul{display:flex;flex-direction:column;gap:5px}
.feature-detail-text ul li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.82rem;
  color:var(--text-secondary);
}
.feature-detail-text ul li::before{
  content:'';
  width:5px;height:5px;
  background:var(--primary);
  border-radius:50%;
  flex-shrink:0;
}
@media(max-width:768px){
  .feature-detail-grid{grid-template-columns:1fr;gap:20px}
  .feature-detail-grid.reverse{direction:ltr}
}

/* ===== SYSTEM REQS ===== */
.req-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:20px;
}
.req-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 16px;
}
.req-item h4{font-size:0.78rem;font-weight:600;margin-bottom:2px}
.req-item p{font-size:0.75rem;color:var(--text-muted)}
@media(max-width:480px){.req-grid{grid-template-columns:1fr}}

/* ===== DOWNLOAD ===== */
.download-grid{
  min-height:50vh;
  display:block;
}
.download-card{
  width:400px;
  max-width:90vw;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px 20px;
  text-align:center;
  transition:all .2s;
}
.download-card:hover{border-color:var(--text-muted)}
.download-card .dl-icon{font-size:1.8rem;margin-bottom:10px}
.download-card h3{font-family:var(--font-heading);font-size:0.95rem;font-weight:600;margin-bottom:4px}
.download-card p{font-size:0.78rem;color:var(--text-muted);margin-bottom:14px}
.download-card .dl-version{font-size:0.7rem;color:var(--text-muted);margin-top:8px}
@media(max-width:768px){
  .download-card{max-width:100%}
}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:0.78rem;font-weight:600;color:var(--text-secondary)}
.form-group input,.form-group textarea,.form-group select{
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.85rem;
  transition:border-color .2s;
  outline:none;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary)}
.form-group textarea{resize:vertical;min-height:90px}
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-info-item{display:flex;gap:12px;align-items:center}
.contact-info-item .ci-icon{
  width:34px;height:34px;
  border-radius:var(--radius-sm);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:0.9rem;
}
.contact-info-item h4{font-weight:600;font-size:0.82rem;margin-bottom:2px}
.contact-info-item p{font-size:0.8rem;color:var(--text-secondary)}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;gap:24px}}

/* ===== BLOG ===== */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  max-width:var(--max-width);
  margin:0 auto;
}
.blog-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:all .2s;
}
.blog-card:hover{border-color:var(--text-muted)}
.blog-card-img{
  width:100%;height:160px;
  background:var(--surface-hover);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  border-bottom:1px solid var(--border);
}
.blog-card-body{padding:18px}
.blog-card-date{font-size:0.72rem;color:var(--text-muted);margin-bottom:4px}
.blog-card h3{font-family:var(--font-heading);font-size:0.9rem;font-weight:600;margin-bottom:4px;line-height:1.4}
.blog-card p{font-size:0.8rem;color:var(--text-secondary);line-height:1.6}

/* ===== DEMOS PAGE ===== */
.demo-original-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  margin-bottom:40px;
}
.demo-original-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
  font-size:0.85rem;font-weight:600;
}
.demo-original-header svg{color:var(--primary);flex-shrink:0}
.demo-label{
  font-size:0.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:0.04em;padding:2px 8px;border-radius:4px;
  margin-left:auto;
}
.tag-original{background:var(--primary-muted);color:var(--primary)}
.demo-player-row{
  display:flex;align-items:center;gap:8px;
  width:100%;
}
.demo-play-btn{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface-hover);
  color:var(--text);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:border-color .2s,background .2s;
}
.demo-play-btn:hover{border-color:var(--primary);background:var(--primary-muted)}
.demo-player.playing .demo-play-btn{border-color:var(--primary);background:var(--primary-muted)}
.demo-time-current,.demo-time-total{
  font-size:0.78rem;color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  width:36px;text-align:center;flex-shrink:0;
}
.demo-progress{
  flex:1;
  cursor:pointer;
  padding:8px 0;
  position:relative;
}
.demo-progress-track{
  height:4px;
  background:var(--border);
  border-radius:2px;
  position:relative;
  overflow:visible;
}
.demo-progress-fill{
  height:100%;
  background:var(--stem-color,var(--primary));
  border-radius:2px;
  width:0%;
  transition:width .1s linear;
}
.demo-progress-thumb{
  width:12px;height:12px;
  border-radius:50%;
  background:var(--text);
  border:2px solid var(--stem-color,var(--primary));
  position:absolute;
  top:50%;left:0%;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.demo-progress:hover .demo-progress-thumb{opacity:1}
.demo-mute-btn{
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:color .2s,border-color .2s;
}
.demo-mute-btn:hover{color:var(--text);border-color:var(--text-muted)}
.demo-mute-btn.muted{color:var(--danger);border-color:var(--danger)}
.demo-stems-label{
  font-family:var(--font-heading);
  font-size:0.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text-muted);
  margin-bottom:14px;
}
.demo-stem-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.demo-stem-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--stem-color);
  border-radius:var(--radius-md);
  padding:14px 16px;
  transition:border-color .2s;
}
.demo-stem-card:hover{border-color:var(--stem-color)}
.demo-stem-name{
  display:flex;align-items:center;gap:8px;
  font-size:0.82rem;font-weight:600;
  margin-bottom:10px;
}
.demo-stem-dot{
  width:8px;height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.demo-stem-card .demo-player-row{gap:6px}
.demo-stem-card .demo-play-btn{width:30px;height:30px}
.demo-stem-card .demo-time-current,
.demo-stem-card .demo-time-total{font-size:0.72rem;width:28px}
.demo-stem-card .demo-mute-btn{width:28px;height:28px}
.demo-stem-card .demo-mute-btn svg{width:12px;height:12px}

@media(max-width:600px){
  .demo-stem-grid{grid-template-columns:1fr}
  .demo-original-card{padding:16px}
}

/* ===== BUY MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;
  padding:20px;
}
.modal-overlay.active{
  opacity:1;
  visibility:visible;
}
body.modal-open{overflow:hidden}
.modal-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:32px;
  width:100%;
  max-width:440px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:translateY(20px) scale(0.97);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.active .modal-card{
  transform:translateY(0) scale(1);
}
.modal-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;color:var(--text-muted);
  font-size:1.3rem;cursor:pointer;padding:4px 8px;
  line-height:1;border-radius:4px;
  transition:color .2s,background .2s;
}
.modal-close:hover{color:var(--text);background:var(--surface-hover)}
.modal-header{text-align:center;margin-bottom:24px}
.modal-header svg{width:32px;height:32px;color:var(--primary);margin-bottom:8px}
.modal-header h3{
  font-family:var(--font-heading);
  font-size:1.15rem;font-weight:700;
  letter-spacing:-0.02em;margin-bottom:4px;
}
.modal-header p{font-size:0.8rem;color:var(--text-secondary)}
.modal-card .form-group{margin-bottom:14px}
.modal-card .form-group label{
  font-size:0.75rem;font-weight:600;
  color:var(--text-secondary);margin-bottom:2px;
}
.modal-card .form-group label .optional{
  font-weight:400;color:var(--text-muted);font-size:0.72rem;
}
.modal-card .form-group input,
.modal-card .form-group textarea{
  padding:10px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.85rem;
  outline:none;
  transition:border-color .2s;
}
.modal-card .form-group input:focus,
.modal-card .form-group textarea:focus{
  border-color:var(--primary);
}
.modal-card .form-group input.error,
.modal-card .form-group textarea.error{
  border-color:var(--danger);
}
.modal-card .form-group textarea{resize:vertical;min-height:60px}
.form-error{
  font-size:0.72rem;color:var(--danger);
  display:none;margin-top:2px;
}
.form-error.visible{display:block}
.btn-modal-submit{position:relative;margin-top:4px}
.btn-modal-submit .btn-text{display:inline-flex;align-items:center;gap:8px}
.btn-modal-submit .btn-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.btn-modal-submit.loading .btn-text{visibility:hidden}
.btn-modal-submit.loading .btn-loader{display:flex!important}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-footer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:18px;font-size:0.72rem;color:var(--text-muted);
}
.modal-footer svg{opacity:.5;flex-shrink:0}
.modal-success{
  display:none;text-align:center;padding:20px 0;
}
.modal-success svg{width:48px;height:48px;color:var(--success);margin-bottom:12px}
.modal-success h3{
  font-family:var(--font-heading);
  font-size:1.1rem;font-weight:700;margin-bottom:4px;
}
.modal-success p{font-size:0.82rem;color:var(--text-secondary)}

@media(max-width:500px){
  .modal-card{padding:24px 20px}
}

/* ===== ANIMATIONS ===== */
.fade-in{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;
}
.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .section{padding:56px 20px}
  .page-header{padding:80px 20px 28px}
}