@import url('https://fonts.googleapis.com/css2?family=Share+Tech:wght@400&family=Share+Tech+Mono&family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --bg: #010805;
  --deep: #020d08;
  --surface: #041408;
  --oscilloscope: #001a06;
  --signal: #00ff88;
  --signal-dim: rgba(0,255,136,0.08);
  --signal-border: rgba(0,255,136,0.2);
  --signal-warm: #40ffaa;
  --grid: rgba(0,255,136,0.06);
  --text: #1a6040;
  --text-bright: #60e0a0;
  --text-dim: #042010;
  --border: rgba(0,255,136,0.15);
  --white: #d0ffe8;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
#ac-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

.wrap { position:relative; z-index:2; max-width:1020px; margin:0 auto; padding:0 28px 90px; }

/* ── Hero ── */
.hero { padding:68px 0 52px; display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:center; border-bottom:1px solid var(--border); margin-bottom:56px; }
.hero-tag { font-family:'Share Tech Mono',monospace; font-size:0.58rem; letter-spacing:4px; text-transform:uppercase; color:var(--signal); opacity:0.55; margin-bottom:14px; }
.hero h1 { font-size:clamp(4rem,11vw,7.5rem); font-weight:800; line-height:0.85; color:var(--white); letter-spacing:-2px; }
.hero h1 em { display:block; font-size:0.2em; font-style:normal; font-weight:300; letter-spacing:5px; color:var(--text-dim); margin-top:12px; font-family:'Share Tech Mono',monospace; text-transform:uppercase; }
.hero-desc { font-size:0.96rem; line-height:1.87; color:var(--text); font-weight:300; margin-top:18px; }

/* ── Oscilloscope card ── */
.scope-card { background:var(--oscilloscope); border:2px solid var(--signal-border); border-radius:8px; padding:14px; box-shadow:0 0 30px rgba(0,255,136,0.08), inset 0 0 30px rgba(0,0,0,0.5); }
#scope-canvas { display:block; border-radius:4px; }
.scope-cap { font-family:'Share Tech Mono',monospace; font-size:0.55rem; color:rgba(0,255,136,0.3); letter-spacing:3px; text-transform:uppercase; margin-top:8px; text-align:center; }

/* ── Frequency spectrum ── */
.spectrum-wrap { background:var(--oscilloscope); border:1px solid var(--border); border-radius:4px; padding:16px; margin-bottom:56px; }
#spectrum-canvas { display:block; }
.spectrum-labels { display:flex; justify-content:space-between; margin-top:8px; }
.spectrum-labels span { font-family:'Share Tech Mono',monospace; font-size:0.55rem; color:rgba(0,255,136,0.35); }

/* ── Stats ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); border:1px solid var(--border); overflow:hidden; margin-bottom:56px; }
.stat { padding:16px 12px; background:var(--deep); border-right:1px solid var(--border); transition:background 0.2s; }
.stat:last-child { border-right:none; } .stat:hover { background:var(--signal-dim); }
.s-label { font-family:'Share Tech Mono',monospace; font-size:0.52rem; letter-spacing:2px; text-transform:uppercase; color:var(--signal); opacity:0.5; margin-bottom:6px; }
.s-value { font-size:1rem; font-weight:700; color:var(--white); line-height:1.1; }
.s-unit { font-size:0.6rem; color:var(--text-dim); }

/* ── Sections ── */
.section { margin-bottom:54px; opacity:0; transform:translateY(16px); transition:opacity 0.65s,transform 0.65s; }
.section.visible { opacity:1; transform:none; }
.sh { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sn { font-family:'Share Tech Mono',monospace; font-size:0.55rem; letter-spacing:3px; color:var(--signal); opacity:0.4; }
.section h2 { font-size:1.5rem; font-weight:700; color:var(--white); }
p { font-size:0.95rem; line-height:1.87; color:var(--text); font-weight:300; margin-bottom:14px; }
strong { color:var(--text-bright); font-weight:700; }

/* ── Wave types ── */
.waves-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:18px; }
.wv { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--signal); padding:18px; transition:background 0.2s; }
.wv:hover { background:var(--signal-dim); }
.wv h3 { font-size:0.85rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.wv .weq { font-family:'Share Tech Mono',monospace; font-size:0.72rem; color:var(--signal); padding:5px 8px; background:var(--signal-dim); border-radius:2px; margin-bottom:8px; }
.wv p { font-size:0.78rem; margin:0; line-height:1.55; }

/* ── Hearing range table ── */
.hearing-table { width:100%; border-collapse:collapse; margin-top:16px; font-size:0.86rem; }
.hearing-table th { font-family:'Share Tech Mono',monospace; font-size:0.52rem; letter-spacing:2px; text-transform:uppercase; color:var(--signal); opacity:0.5; border-bottom:1px solid var(--border); padding:10px 14px; text-align:left; font-weight:400; }
.hearing-table td { padding:10px 14px; border-bottom:1px solid rgba(0,255,136,0.06); color:var(--text); }
.hearing-table td:first-child { color:var(--white); font-weight:600; }
.hearing-table tr:hover td { background:rgba(0,255,136,0.04); }

/* ── Applications ── */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:18px; }
.ap { background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--signal); padding:16px; transition:background 0.2s; }
.ap:hover { background:var(--signal-dim); }
.ap h3 { font-size:0.82rem; font-weight:700; color:var(--white); margin-bottom:5px; }
.ap p { font-size:0.78rem; margin:0; line-height:1.55; }

.footer-band { margin-top:70px; border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-band span { font-family:'Share Tech Mono',monospace; font-size:0.5rem; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; }
@media(max-width:640px){ .hero{grid-template-columns:1fr;} }