/* GHOST AUDIO — site theme. Gray slate + neon teal, matching both pedals. */
:root {
  --bg: #0b0e11;
  --bg2: #0e1318;
  --panel: #141a20;
  --panel2: #1a222a;
  --ink: #e9eef1;
  --dim: #8b97a0;
  --teal: #2ee6c9;        /* neon teal — the OLED glow */
  --teal-soft: #45b89f;   /* screen green-teal at rest */
  --slate: #5a6f84;       /* pedal enclosure blue-gray */
  --line: #212a32;
  --radius: 14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, "Helvetica Neue", Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
a { color: var(--teal); text-decoration: none; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* hex pattern backdrop — the faceplate motif */
.hexbg {
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(46,230,201,.07), transparent 70%),
    url("data:image/svg+xml,%3Csvg width='56' height='98' viewBox='0 0 56 98' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16zM28 60 52 74v22M28 60 4 74v22' fill='none' stroke='%231a232b' stroke-width='1'/%3E%3C/svg%3E");
}

/* ───── nav ───── */
nav {
  position: sticky; top:0; z-index:50;
  background: rgba(11,14,17,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display:flex; align-items:center; justify-content:space-between; height:58px; }
.logo { font-weight:800; letter-spacing:.16em; font-size:.95rem; color:var(--ink); display:flex; align-items:center; gap:10px; }
.logo span { color: var(--teal); }
.logo svg { filter: drop-shadow(0 0 6px rgba(46,230,201,.7)); }
nav .links { display:flex; gap:20px; align-items:center; font-size:.85rem; }
nav .links a { color: var(--teal); white-space:nowrap; }
nav .links a:hover, nav .links a.on { color: var(--ink); }
@media (max-width: 680px) {
  nav .links { gap:14px; font-size:.78rem; }
  nav .links a[href^="#"]:not(.btn) { display:none; }  /* in-page anchors hidden on phones */
  nav .links a.btn { padding:8px 14px; }
}
@media (max-width: 480px) {
  nav .links { gap:12px; font-size:.72rem; }
  /* keep the two pedal tabs visible on phones; only in-page anchors hide (rule above) */
}

.btn {
  display:inline-block; background: var(--teal); color:#06211c;
  font-weight:700; padding: 10px 22px; border-radius: 999px;
  border:none; cursor:pointer; font-size:.9rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(46,230,201,.45); color:#06211c; }
.btn.big { padding: 15px 36px; font-size: 1.05rem; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid #2c3a45; }
.btn.ghost:hover { border-color: var(--teal); box-shadow: 0 0 18px rgba(46,230,201,.2); }

/* ───── type ───── */
.kicker { color: var(--teal-soft); letter-spacing:.24em; font-size:.74rem; font-weight:700; text-transform:uppercase; }
h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); font-weight: 900; letter-spacing:-.02em; margin: 14px 0 10px; line-height:1.02; }
h1 .accent { color: var(--teal); text-shadow: 0 0 30px rgba(46,230,201,.45); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 850; letter-spacing:-.01em; margin-bottom: 8px; }
.sub { color: var(--dim); font-size: clamp(1rem, 2.4vw, 1.25rem); max-width: 660px; margin: 0 auto 28px; }
.lede { color: var(--dim); max-width: 620px; margin-bottom: 36px; }
.micro { color: var(--dim); font-size:.78rem; }
section { padding: 76px 0; border-top: 1px solid var(--line); }

/* ───── LED meter strip — the pedal's playhead bars ───── */
.meters { display:flex; gap:14px; justify-content:center; margin: 26px 0 0; }
.meter {
  width: 120px; height: 8px; border-radius: 3px;
  background: #10171c; border: 1px solid #1d2730;
  overflow: hidden; position: relative;
}
.meter::after {
  content:""; position:absolute; inset:1px auto 1px 1px; width:0%;
  background: linear-gradient(90deg, var(--teal-soft), var(--teal));
  border-radius: 2px; box-shadow: 0 0 8px rgba(46,230,201,.8);
  animation: fill 2.4s linear infinite;
}
.meter:nth-child(2)::after { animation-duration: 1.2s; }
.meter:nth-child(3)::after { animation-duration: 0.6s; }
@keyframes fill { 0% { width:0%; } 96% { width:calc(100% - 2px); } 100% { width:0%; } }

/* ───── OLED screen card — scanlines + glow ───── */
.oled {
  background: linear-gradient(180deg, #0e3d33, #0a2e27);
  border: 1px solid #1d4a3f; border-radius: 10px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 0 50px rgba(46,230,201,.12);
}
.oled::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}

/* pixel ghost sprite */
.ghostf { animation: floaty 3.2s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ───── cards / grids ───── */
.feat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.feat { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.feat .num { color: var(--teal); font-weight:900; font-size:1.5rem; text-shadow: 0 0 14px rgba(46,230,201,.5); }
.feat h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.feat p { color: var(--dim); font-size:.88rem; }

.specs { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chip { background: var(--panel2); border:1px solid var(--line); border-radius:999px; padding: 7px 16px; font-size:.78rem; color: var(--dim); }
.chip b { color: var(--ink); font-weight:600; }

.vidframe {
  margin: 38px auto 0; border-radius: var(--radius); overflow:hidden;
  border: 1px solid #243039; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(46,230,201,.08);
  background:#000;
}
video { width:100%; display:block; }

/* A/B audio */
.ab-grid { display:grid; gap:18px; }
.ab { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display:grid; gap:12px; }
.ab h3 { font-size:1rem; }
.ab .tag { color: var(--teal-soft); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.ab-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ab-row .lbl { font-size:.78rem; color:var(--dim); width:46px; }
.ab-row audio { flex:1; min-width:220px; height:36px; }
.placeholder-note { border:1px dashed #2c3a45; border-radius: var(--radius); padding: 14px 18px; color: var(--dim); font-size:.82rem; margin-top: 16px; }

/* pricing */
.price-card {
  max-width: 470px; margin: 0 auto; text-align:center;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid #2a3742; border-radius: 20px; padding: 44px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 70px rgba(46,230,201,.07);
}
.price-card .was { color: var(--dim); text-decoration: line-through; font-size: 1.1rem; }
.price-card .now { font-size: 3.4rem; font-weight: 900; color: var(--teal); line-height: 1.1; text-shadow: 0 0 36px rgba(46,230,201,.5); }
.price-card ul { list-style:none; margin: 22px 0 26px; text-align:left; }
.price-card li { padding: 7px 0; color: var(--dim); font-size:.9rem; border-bottom: 1px solid var(--line); }
.price-card li::before { content:"✓  "; color: var(--teal); font-weight:800; }
.guarantee { margin-top: 14px; font-size:.78rem; color: var(--dim); }

/* faq */
details { background: var(--panel); border:1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
summary { cursor:pointer; font-weight:600; font-size:.95rem; }
details p { margin-top: 10px; color: var(--dim); font-size:.88rem; }

/* capture */
.capture {
  background: linear-gradient(135deg, rgba(46,230,201,.07), rgba(90,111,132,.08));
  border:1px solid var(--line); border-radius: 20px; padding: 44px 30px; text-align:center;
}
.capture form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.capture input {
  background: var(--bg); border:1px solid #2c3a45; color: var(--ink);
  border-radius: 999px; padding: 12px 20px; min-width: 260px; font-size:.9rem;
}

footer { padding: 40px 0 60px; color: var(--dim); font-size:.78rem; text-align:center; border-top:1px solid var(--line); }

/* pedal cards on home */
.pedals { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.pedal {
  background: var(--panel); border:1px solid var(--line); border-radius: 18px;
  overflow:hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column;
}
.pedal:hover { transform: translateY(-3px); border-color:#2a4a44; box-shadow: 0 18px 60px rgba(0,0,0,.5), 0 0 40px rgba(46,230,201,.1); }
.pedal .media { background:#000; aspect-ratio: 16/9; position:relative; }
.pedal .media video, .pedal .media img { width:100%; height:100%; object-fit:cover; display:block; }
.pedal .body { padding: 24px 24px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pedal h3 { font-size: 1.4rem; font-weight:850; letter-spacing:-.01em; }
.pedal .cat { color: var(--teal-soft); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.pedal p { color: var(--dim); font-size:.9rem; flex:1; }
.pedal .row { display:flex; gap:12px; align-items:center; margin-top:6px; }

/* knob row diagram (tiny ghost) */
.knobs { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin: 26px 0 8px; }
.knob { text-align:center; }
.knob .cap {
  width:64px; height:64px; border-radius:50%; margin:0 auto 8px;
  background: radial-gradient(circle at 35% 30%, #f2f4f5, #c7ccd1 60%, #9aa3ab);
  border: 1px solid #67737d; position:relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.knob .cap::after {
  content:""; position:absolute; left:50%; top:6px; width:4px; height:22px;
  background:#39424a; border-radius:2px; transform:translateX(-50%);
}
.knob .lab { font-size:.7rem; letter-spacing:.16em; color:var(--dim); font-weight:700; }