/* ============================================================================
   EarsDeep Underground Engine — product page
   Hand-written CSS, no framework, no external requests. Colours are the same
   tokens the plug-in UI uses (Docs/UI3_SPEC.md), so the site and the instrument
   read as one product.
   ========================================================================= */

:root{
  --bg:#0b0e13;
  --panel:#151a22;
  --panel-top:#1b212b;
  --hairline:#262f3c;
  --border:#1f2733;
  --accent:#00d2ff;
  --warm:#ffb020;
  --danger:#ff5c5c;
  --text:#e9eef7;
  --dim:#8b98ab;
  --max:1180px;
  --radius:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #12202c 0%, rgba(11,14,19,0) 70%),
    var(--bg);
  color:var(--text);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:min(100% - 48px, var(--max)); margin-inline:auto}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; letter-spacing:.02em}
.small{font-size:13px; color:var(--dim); margin:6px 0 0}
a{color:inherit}

.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; background:var(--panel); padding:8px 12px; border-radius:6px; z-index:99}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 18px; border-radius:8px;
  font-weight:600; font-size:14px; letter-spacing:.02em;
  text-decoration:none; border:1px solid var(--hairline);
  transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-lg{padding:14px 26px; font-size:15px}
.btn-accent{
  background:linear-gradient(180deg, #19dcff, #00a9cc);
  border-color:#0bd0f5; color:#04121a;
  box-shadow:0 8px 30px rgba(0,210,255,.22);
}
.btn-accent:hover{transform:translateY(-1px); box-shadow:0 12px 34px rgba(0,210,255,.32)}
.btn-ghost{background:#101620; color:var(--text)}
.btn-ghost:hover{border-color:#3a4a5e; transform:translateY(-1px)}

/* ---------- nav --------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px);
  background:rgba(11,14,19,.72);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex; align-items:center; gap:28px; height:66px}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; flex-shrink:0}
.brand img{filter:drop-shadow(0 0 14px rgba(0,210,255,.18))}
.brand-sub{font:600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.14em; color:var(--dim)}
.nav-links{display:flex; gap:22px; margin-inline:auto}
.nav-links a{
  text-decoration:none; color:var(--dim); font-size:14px; font-weight:500;
  padding:6px 0; border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--text); border-bottom-color:var(--accent)}
.nav-cta{display:flex; gap:10px; flex-shrink:0}

/* ---------- hero -------------------------------------------------------- */
.hero{padding:72px 0 40px}
.hero .wrap{display:grid; grid-template-columns:1.02fr 1.25fr; gap:48px; align-items:center}
.eyebrow{
  font:600 11px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing:.16em; color:var(--accent); margin:0 0 18px;
}
.hero h1{font-size:clamp(38px, 4.6vw, 58px); line-height:1.04; letter-spacing:-.025em; margin:0 0 18px; font-weight:700}
.hl{background:linear-gradient(180deg, #6ee8ff, #00b7dd); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:17.5px; color:#c3cddc; margin:0 0 26px; max-width:34em}
.lede strong{color:var(--text)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px}
.hero-facts{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 20px; list-style:none; padding:0; margin:0; font-size:13.5px; color:var(--dim);
}
.hero-facts b{color:var(--text); font-weight:600}

.hero-shot{margin:0; position:relative}
.hero-shot img{
  width:100%; height:auto; display:block; border-radius:12px;
  border:1px solid #26313f;
  box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(0,210,255,.06);
  cursor:zoom-in;
}
.hero-shot figcaption{font-size:12.5px; color:var(--dim); margin-top:10px; text-align:right}

/* ---------- strip ------------------------------------------------------- */
.strip{border-block:1px solid var(--border); background:#0d1117}
.strip-in{
  display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 0; font:600 11px/1 ui-monospace, Menlo, monospace;
  letter-spacing:.22em; color:#5f6d80;
}
.strip .dot{color:var(--accent); opacity:.6}

/* ---------- sections ---------------------------------------------------- */
.section{padding:84px 0}
.section.alt{background:linear-gradient(180deg, rgba(21,26,34,.55), rgba(11,14,19,0)); border-block:1px solid var(--border)}
.section h2{font-size:clamp(26px, 2.8vw, 36px); line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; font-weight:700}
.section h2 em{color:var(--accent); font-style:normal}
.sub{color:var(--dim); max-width:56em; margin:0 0 36px; font-size:16px}

/* ---------- demos ------------------------------------------------------- */
.demos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.demo{
  background:linear-gradient(180deg, var(--panel-top), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:10px;
}
.demo-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.demo h3{margin:0; font-size:17px}
.tag{
  font:600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.06em;
  color:var(--warm); border:1px solid rgba(255,176,32,.35);
  background:rgba(255,176,32,.08); padding:4px 8px; border-radius:99px;
}
.demo p{color:var(--dim); font-size:14px; margin:0 0 auto}
audio{width:100%; height:36px; margin-top:6px; filter:invert(.92) hue-rotate(180deg) saturate(.7)}


/* ---------- feature cards ----------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.card{
  position:relative;
  background:linear-gradient(180deg, var(--panel-top), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:26px 24px 24px;
}
.card-n{
  position:absolute; top:18px; right:20px;
  font:700 11px/1 ui-monospace, Menlo, monospace; color:var(--accent); opacity:.55;
  letter-spacing:.1em;
}
.card h3{margin:0 0 10px; font-size:18px; letter-spacing:-.01em}
.card p{margin:0; color:var(--dim); font-size:14.5px}
.card b{color:var(--text); font-weight:600}

/* ---------- tour -------------------------------------------------------- */
.tour-row{margin:0 0 34px}
.tour-row img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid #26313f; cursor:zoom-in;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.tour-row figcaption{color:var(--dim); font-size:14px; margin-top:12px; max-width:70em}
.tour-row b{color:var(--text)}

.flow{
  display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:18px; border:1px dashed var(--hairline); border-radius:var(--radius);
}
.flow-step{
  flex:1 1 130px; min-width:120px;
  background:#101620; border:1px solid var(--border); border-radius:8px;
  padding:12px 14px;
}
.flow-step b{display:block; font-size:13.5px}
.flow-step span{display:block; color:var(--dim); font-size:12px; margin-top:2px}
.flow-arrow{align-self:center; color:var(--accent); opacity:.7}

/* ---------- presets ----------------------------------------------------- */
.preset-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.preset-col{
  border-left:2px solid rgba(0,210,255,.35); padding-left:16px;
}
.preset-col h3{margin:0 0 6px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.preset-col p{margin:0; color:var(--dim); font-size:13.5px; line-height:1.75}

/* ---------- two column + specs ------------------------------------------ */
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start}
.ticks{list-style:none; padding:0; margin:18px 0 0}
.ticks li{
  position:relative; padding-left:24px; margin-bottom:10px;
  color:var(--dim); font-size:14.5px;
}
.ticks li::before{
  content:"▸"; position:absolute; left:4px; top:0; color:var(--accent);
}
.ticks b{color:var(--text); font-weight:600}

.spec-card{
  background:linear-gradient(180deg, var(--panel-top), var(--panel));
  border:1px solid var(--hairline); border-radius:var(--radius); padding:22px;
}
.spec-card h3{margin:0 0 14px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.spec-card dl{margin:0}
.spec-card div{
  display:grid; grid-template-columns:92px 1fr; gap:12px;
  padding:9px 0; border-top:1px solid var(--border); font-size:13.5px;
}
.spec-card div:first-child{border-top:0}
.spec-card dt{color:var(--dim)}
.spec-card dd{margin:0; color:var(--text)}


/* ---------- pricing ----------------------------------------------------- */
.price-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; max-width:900px}
.price{
  position:relative;
  background:linear-gradient(180deg, var(--panel-top), var(--panel));
  border:1px solid var(--hairline); border-radius:12px; padding:28px;
  display:flex; flex-direction:column;
}
.price-hero{border-color:rgba(0,210,255,.45); box-shadow:0 0 0 1px rgba(0,210,255,.10), 0 26px 70px rgba(0,210,255,.07)}
.ribbon{
  position:absolute; top:-11px; left:24px;
  background:var(--warm); color:#20160a;
  font:700 10px/1 ui-monospace, Menlo, monospace; letter-spacing:.14em;
  padding:5px 9px; border-radius:99px;
}
.price h3{margin:0 0 6px; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.price-amount{margin:0; font-size:42px; font-weight:700; letter-spacing:-.03em}
.price-amount s{font-size:22px; color:var(--dim); font-weight:500; margin-right:8px}
.price-note{margin:2px 0 10px; color:var(--dim); font-size:13px}
.price .btn{margin-top:22px}
.price-small{margin:10px 0 0; font-size:12px; color:var(--dim)}

/* ---------- faq --------------------------------------------------------- */
.faq{max-width:56em}
.faq details{
  border-top:1px solid var(--border); padding:14px 0;
}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer; font-weight:600; font-size:15.5px; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--accent); margin-right:10px; font-family:ui-monospace, Menlo, monospace}
.faq details[open] summary::before{content:"−"}
.faq p{color:var(--dim); font-size:14.5px; margin:10px 0 0 24px}

/* ---------- cta band ---------------------------------------------------- */
.cta-band{
  background:linear-gradient(180deg, rgba(0,210,255,.08), rgba(0,210,255,0));
  border-block:1px solid rgba(0,210,255,.18);
  padding:56px 0;
}
.cta-in{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.cta-in h2{margin:0 0 6px; font-size:30px; letter-spacing:-.02em}
.cta-in p{margin:0; color:var(--dim)}
.cta-buttons{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- footer ------------------------------------------------------ */
.footer{border-top:1px solid var(--border); background:#090c11; padding:52px 0 26px}
.footer-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.footer-brand img{opacity:.85; margin-bottom:12px}
.footer-brand p{margin:0; color:var(--dim); font-size:13px}
.footer-col h4{
  margin:0 0 10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#5f6d80;
}
.footer-col a{
  display:block; color:var(--dim); text-decoration:none; font-size:13.5px; margin-bottom:7px;
}
.footer-col a:hover{color:var(--text)}
.footer-col p{margin:0}
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:34px; padding-top:18px; border-top:1px solid var(--border);
  color:#5f6d80; font-size:12.5px;
}

/* ---------- lightbox ---------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,8,11,.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:32px;
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:min(96vw, 1800px); max-height:88vh; width:auto; height:auto;
  border-radius:10px; border:1px solid var(--hairline);
  box-shadow:0 40px 140px rgba(0,0,0,.8);
}
.lightbox-close{
  position:absolute; top:18px; right:22px;
  background:var(--panel); color:var(--text); border:1px solid var(--hairline);
  width:40px; height:40px; border-radius:10px; font-size:22px; line-height:1; cursor:pointer;
}

/* ---------- long-form docs (manual / EULA / privacy) -------------------- */
.doc{max-width:820px}
.doc h1{font-size:clamp(28px,3vw,40px); letter-spacing:-.02em; margin:0 0 22px; line-height:1.1}
.doc h2{font-size:20px; margin:38px 0 10px; letter-spacing:-.01em}
.doc p{color:var(--dim); font-size:15px}
.doc p b, .doc li b{color:var(--text)}
.doc code{
  font-family:ui-monospace, Menlo, monospace; font-size:13px;
  background:#0d131b; border:1px solid var(--border); border-radius:4px; padding:1px 5px;
}
.doc ol.ticks{counter-reset:none; padding-left:0}
.doc .doc-table{width:100%; border-collapse:collapse; margin:14px 0 0; font-size:14px}
.doc .doc-table th{
  text-align:left; font:600 11px/1 ui-monospace, Menlo, monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); padding:10px 12px; border-bottom:1px solid var(--border);
}
.doc .doc-table td{
  padding:10px 12px; border-bottom:1px solid var(--border); color:var(--dim); vertical-align:top;
}
.doc .doc-table td:first-child{color:var(--text); white-space:nowrap}
.doc .doc-back{margin-top:44px}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1020px){
  .hero .wrap{grid-template-columns:1fr; gap:32px}
  .cards{grid-template-columns:1fr}
  .demos{grid-template-columns:1fr}
  .preset-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .two-col{grid-template-columns:1fr; gap:28px}
  .footer-in{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width: 640px){
  .section{padding:56px 0}
  .price-grid{grid-template-columns:1fr}
  .preset-grid{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:1fr}
  .cta-in{align-items:flex-start}
  .wrap{width:min(100% - 32px, var(--max))}
}