@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800;900&family=Share+Tech+Mono&family=Barlow+Condensed:wght@400;500;600;700&display=swap');
/* The studio landing page's design language, re-implemented compactly for
   the /dj tree. Every component here is a port of one that exists on the
   homepage (public/index.html + public/legacy/styles.css): the TITAN-BOT
   hero, the stats band, the club-grade table, the hardware showcase, the
   four-step flow, VINYL, the genre chips, the view modes, LAB, the spec
   grid, the OS install cards, the plan cards, the voices, the FAQ
   accordion, the contact channels and the final CTA.

   It is one shared, cached file rather than the app's 830 KB stylesheet:
   the look travels, the weight does not. Mobile is handled at the bottom
   in five breakpoints — 1024 / 900 / 720 / 560 / 420. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#ff7a00;--cue:#ff5a00;--glow:#ffa544;--screen:#00d4ff;--green:#00ff7a;
  --magenta:#c800ff;--yellow:#ffd400;--text:#e8e8ea;--dim:#9a9a9e;--line:#1f1f23;
  color-scheme:dark;
}
html{-webkit-text-size-adjust:100%}
body{background:radial-gradient(ellipse at 30% 20%,#1a1a1f 0%,#070708 60%,#000 100%);background-attachment:fixed;color:var(--text);font-family:'Barlow Condensed',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,32px) clamp(14px,3vw,28px) 72px}

/* ---------------------------------------------------------------- nav */
.tl-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(22px,5vw,56px)}
.tl-brand{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(17px,2.2vw,22px);letter-spacing:clamp(2px,.4vw,5px);color:#fff;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.tl-brand span{color:var(--orange)}
.tl-navlinks{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);min-width:0}
.tl-navlinks a:hover{color:var(--orange)}
.tl-navlinks .tl-cta{padding:11px 18px;min-height:0;font-size:11px;letter-spacing:2px}

/* --------------------------------------------------------------- hero */
.tl-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,54px);align-items:center;margin-bottom:clamp(30px,6vw,72px)}
.tl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:4px;color:var(--orange);border:1px solid rgba(255,122,0,.4);padding:7px 14px;border-radius:99px;margin-bottom:20px;background:rgba(255,122,0,.06);text-transform:uppercase;max-width:100%}
.tl-eyebrow-cyan{color:var(--screen);border-color:rgba(0,212,255,.4);background:rgba(0,212,255,.06)}
.tl-eyebrow-magenta{color:#e08bff;border-color:rgba(200,0,255,.4);background:rgba(200,0,255,.06)}
.tl-eyebrow-green{color:var(--green);border-color:rgba(0,255,122,.4);background:rgba(0,255,122,.06)}
h1{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(28px,5.4vw,60px);line-height:1.04;letter-spacing:1px;color:#fff;text-transform:uppercase;margin-bottom:20px;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(135deg,#ff7a00,#ffb347 60%,#ffd49a);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.tl-sub{font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:#b8b8bc;max-width:560px;margin-bottom:clamp(20px,3vw,32px)}
.tl-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.tl-cta{font-family:'Orbitron',sans-serif;font-weight:800;font-size:clamp(12px,1.1vw,14px);letter-spacing:3px;padding:15px 26px;border-radius:8px;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;transition:transform .15s ease,box-shadow .25s ease,border-color .2s ease,color .2s ease}
.tl-cta-primary{background:linear-gradient(135deg,var(--orange),var(--cue));color:#000;box-shadow:0 8px 32px rgba(255,122,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.tl-cta-primary:hover{transform:translateY(-2px);box-shadow:0 14px 48px rgba(255,122,0,.6)}
.tl-cta-ghost{background:rgba(255,255,255,.02);color:var(--text);border:1px solid #3a3a3e}
.tl-cta-ghost:hover{border-color:var(--screen);color:var(--screen);background:rgba(0,212,255,.06)}
.tl-meta{margin-top:clamp(16px,2.4vw,24px);font-family:'Share Tech Mono',monospace;font-size:11px;color:#7a7a7e;letter-spacing:2px;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 14px}
.tl-meta b{color:var(--glow);font-weight:400}

/* ------------------------------------------- TITAN-BOT hero mockup
   A port of the homepage's hero: the jog wheels are eyes, headphones
   arch over the top, the mixer is the nose ridge and the EQ analyser
   is the mouth. Same markup, same proportions, no JavaScript. */
.tl-mock{position:relative;aspect-ratio:1/1;max-height:560px;border-radius:18px;background:linear-gradient(135deg,#1a1a1c 0%,#0a0a0b 100%);border:1px solid #2a2a2e;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 60px rgba(255,122,0,.08),inset 0 0 60px rgba(0,0,0,.4)}
.tl-mock::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.018) 14px 15px),repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,255,255,.018) 14px 15px)}
.tl-mock::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(255,122,0,.22) 0%,transparent 55%),radial-gradient(circle at 50% 110%,rgba(0,212,255,.1) 0%,transparent 50%);pointer-events:none}
.tl-mock-label{position:absolute;top:12px;left:14px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:#5a5a5e;text-transform:uppercase;z-index:3}
.tl-mock-led{position:absolute;top:14px;right:14px;display:flex;gap:5px;z-index:3}
.tl-mock-led i{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange);animation:tlBlink 1.6s infinite}
.tl-mock-led i:nth-child(2){background:var(--green);box-shadow:0 0 6px var(--green);animation-delay:.4s}
.tl-mock-led i:nth-child(3){background:var(--screen);box-shadow:0 0 6px var(--screen);animation-delay:.8s}
@keyframes tlBlink{0%,80%,100%{opacity:1}90%{opacity:.3}}
.tl-antenna{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:2px;height:8%;background:linear-gradient(180deg,transparent,#3a3a3e);z-index:2}
.tl-antenna i{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange),0 0 20px rgba(255,122,0,.6);animation:tlBlink 1.4s infinite}
.tl-headphones{position:absolute;inset:0;pointer-events:none}
.tl-hp-band{position:absolute;top:5%;left:6%;right:6%;height:18%;border:4px solid #2a2a2e;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 -4px 10px rgba(0,0,0,.5)}
.tl-hp-band::after{content:'';position:absolute;top:18%;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.65),transparent);box-shadow:0 0 8px rgba(255,122,0,.5);animation:tlScan 3.2s ease-in-out infinite}
@keyframes tlScan{0%,100%{transform:translateX(-12%)}50%{transform:translateX(12%)}}
.tl-hp-cup{position:absolute;top:11%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a3e 0%,#0a0a0b 70%);border:3px solid #1a1a1c;box-shadow:0 10px 24px rgba(0,0,0,.7),inset 0 0 20px rgba(0,0,0,.7)}
.tl-hp-cup-l{left:-2%}
.tl-hp-cup-r{right:-2%}
.tl-hp-cup i{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#1a1a1c 0%,#050506 100%);border:1px solid #2a2a2e;box-shadow:inset 0 0 12px rgba(0,0,0,.9)}
.tl-hp-cup i::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,0,.55),transparent 70%);animation:tlPulse 2s ease-in-out infinite}
.tl-hp-cup-r i::after{background:radial-gradient(circle,rgba(0,212,255,.55),transparent 70%);animation-delay:.6s}
@keyframes tlPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:.95;transform:scale(1.1)}}
.tl-badge{position:absolute;top:8%;left:50%;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;font-weight:800;color:var(--orange);background:#0a0a0b;padding:4px 10px;border:1px solid rgba(255,122,0,.35);border-radius:3px;box-shadow:0 0 10px rgba(255,122,0,.25);text-shadow:0 0 6px rgba(255,122,0,.6);z-index:3}
.tl-badge b{color:#5a5a5e;font-weight:400;margin:0 2px}
.tl-jog{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a3a3e,#0a0a0b 70%);border:3px solid #1a1a1c;box-shadow:0 8px 30px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.6);width:30%;aspect-ratio:1;top:24%}
.tl-jog.l{left:14%}
.tl-jog.r{right:14%}
.tl-jog::before{content:'';position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#222 0%,#0a0a0b 70%);border:1px solid #2a2a2e}
.tl-jog::after{content:'';position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffa544 0%,#ff5a00 50%,#5a2200 100%);box-shadow:0 0 28px rgba(255,122,0,.6),inset 0 -6px 12px rgba(0,0,0,.5);animation:tlSpin 6s linear infinite}
.tl-jog.r::after{animation-direction:reverse;animation-duration:5s;background:radial-gradient(circle at 30% 30%,#7fefff 0%,#00d4ff 50%,#003a5a 100%);box-shadow:0 0 28px rgba(0,212,255,.6),inset 0 -6px 12px rgba(0,0,0,.5)}
@keyframes tlSpin{to{transform:rotate(360deg)}}
.tl-pupil{position:absolute;inset:46%;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 22px rgba(255,255,255,.8);z-index:3;animation:tlLook 5s ease-in-out infinite}
.tl-jog.r .tl-pupil{animation-delay:.4s}
@keyframes tlLook{0%,100%{transform:translate(0,0)}25%{transform:translate(-25%,-15%)}55%{transform:translate(28%,10%)}75%{transform:translate(-12%,18%)}}
.tl-brow{position:absolute;top:21%;width:24%;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,122,0,.1),var(--orange),rgba(255,122,0,.1));box-shadow:0 0 14px rgba(255,122,0,.55);z-index:2}
.tl-brow-l{left:17%;transform:rotate(-9deg)}
.tl-brow-r{right:17%;transform:rotate(9deg);background:linear-gradient(90deg,rgba(0,212,255,.1),var(--screen),rgba(0,212,255,.1));box-shadow:0 0 14px rgba(0,212,255,.55)}
.tl-nose{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);width:14%;height:30%;background:linear-gradient(180deg,#1a1a1c 0%,#050506 100%);border:1px solid #2a2a2e;border-radius:4px 4px 8px 8px;display:flex;justify-content:space-around;align-items:flex-end;padding:14% 8% 8%;box-shadow:0 6px 24px rgba(0,0,0,.5),inset 0 0 20px rgba(0,0,0,.6)}
.tl-nose::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:60%;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--orange),var(--screen),transparent);box-shadow:0 0 10px rgba(255,122,0,.5)}
.tl-nose span{display:block;width:4px;height:100%;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 60%,var(--orange) 60%,var(--orange) 100%);border-radius:2px;animation:tlVu 1.4s ease-in-out infinite alternate;transform-origin:bottom}
.tl-nose span:nth-child(2){animation-delay:.2s;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 35%,var(--green) 35%,var(--green) 100%)}
.tl-nose span:nth-child(3){animation-delay:.4s;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 50%,var(--yellow) 50%,var(--yellow) 100%)}
.tl-nose span:nth-child(4){animation-delay:.6s;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 30%,var(--screen) 30%,var(--screen) 100%)}
@keyframes tlVu{from{filter:brightness(.55);transform:scaleY(.85)}to{filter:brightness(1.25);transform:scaleY(1)}}
.tl-mouth{position:absolute;left:18%;right:18%;bottom:14%;height:14%;background:radial-gradient(ellipse at 50% 50%,#0a0a0b 0%,#020203 100%);border:1px solid #1a1a1c;border-radius:8px;display:flex;justify-content:space-between;align-items:flex-end;padding:6px 10px;box-shadow:inset 0 0 18px rgba(0,0,0,.85),0 6px 18px rgba(0,0,0,.5)}
.tl-mouth span{display:block;width:6%;height:30%;background:linear-gradient(to top,var(--orange) 0%,#ffb347 100%);border-radius:1px;box-shadow:0 0 6px rgba(255,122,0,.55);animation:tlBars 1s ease-in-out infinite alternate;transform-origin:bottom}
.tl-mouth span:nth-child(2){background:linear-gradient(to top,#ffb347,var(--yellow));animation-delay:.05s}
.tl-mouth span:nth-child(3){background:linear-gradient(to top,var(--yellow),var(--green));animation-delay:.1s}
.tl-mouth span:nth-child(4){background:linear-gradient(to top,var(--green),var(--screen));animation-delay:.18s}
.tl-mouth span:nth-child(5){background:linear-gradient(to top,var(--screen),#7fefff);animation-delay:.24s}
.tl-mouth span:nth-child(6){background:linear-gradient(to top,#7fefff,#fff);animation-delay:.32s;height:80%}
.tl-mouth span:nth-child(7){background:linear-gradient(to top,#fff,#7fefff);animation-delay:.38s;height:78%}
.tl-mouth span:nth-child(8){background:linear-gradient(to top,var(--screen),#7fefff);animation-delay:.44s}
.tl-mouth span:nth-child(9){background:linear-gradient(to top,var(--green),var(--screen));animation-delay:.5s}
.tl-mouth span:nth-child(10){background:linear-gradient(to top,var(--yellow),var(--green));animation-delay:.58s}
.tl-mouth span:nth-child(11){background:linear-gradient(to top,#ffb347,var(--yellow));animation-delay:.66s}
.tl-mouth span:nth-child(12){background:linear-gradient(to top,var(--orange),#ffb347);animation-delay:.74s}
@keyframes tlBars{0%{transform:scaleY(.25);filter:brightness(.7)}40%{transform:scaleY(.85)}70%{transform:scaleY(1);filter:brightness(1.2)}100%{transform:scaleY(.55);filter:brightness(.85)}}
.tl-cheek{position:absolute;bottom:18%;width:9%;height:14%;display:flex;flex-direction:column;justify-content:space-between;padding:4px 0;z-index:1}
.tl-cheek-l{left:5%}
.tl-cheek-r{right:5%}
.tl-cheek i{display:block;height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.55),transparent);border-radius:1px;transform:skewX(-18deg)}
.tl-cheek-r i{background:linear-gradient(90deg,transparent,rgba(0,212,255,.55),transparent);transform:skewX(18deg)}
.tl-jaw{position:absolute;left:22%;right:22%;bottom:9%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.4),rgba(0,212,255,.4),transparent);border-radius:2px}
.tl-mock-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.tl-chip{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid color-mix(in srgb,var(--c,#ff7a00) 45%,transparent);background:color-mix(in srgb,var(--c,#ff7a00) 14%,transparent);color:var(--c,#ff7a00)}

/* --------------------------------------------------- at-a-glance panel */
.tl-panel{border:1px solid #23232a;border-radius:16px;background:linear-gradient(180deg,#141418,#0a0a0c 60%,#07070a);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 26px 60px -24px #000;padding:18px;min-width:0}
.tl-panel-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:#6d6d74;text-transform:uppercase;border-bottom:1px solid #1c1c22;padding-bottom:10px;margin-bottom:14px}
.tl-led{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);display:inline-block}
.tl-rows{display:flex;flex-direction:column;gap:9px}
.tl-row{display:flex;justify-content:space-between;gap:12px;font-family:'Share Tech Mono',monospace;font-size:12px;color:#b8b8bc;padding:9px 11px;border:1px solid #1b1b21;border-radius:8px;background:rgba(255,255,255,.015)}
.tl-row span:first-child{color:#7a7a7e;letter-spacing:1.4px;text-transform:uppercase;font-size:10.5px}
.tl-row a{color:var(--screen)}

/* ---------------------------------------------------------- stats band */
.tl-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,3.4vw,36px) 0;margin:clamp(26px,4vw,44px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center;background:linear-gradient(180deg,transparent,rgba(255,122,0,.02),transparent)}
.tl-stat b{display:block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(22px,3.4vw,38px);background:linear-gradient(135deg,var(--orange),#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;line-height:1.1;word-break:break-word}
.tl-stat span{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:2.4px;color:var(--dim);text-transform:uppercase}

/* ------------------------------------------------------------ sections */
.tl-section{margin:clamp(38px,6vw,76px) 0 0}
.tl-section-head{text-align:center;position:relative;padding-bottom:16px;margin-bottom:clamp(20px,3vw,34px)}
.tl-section-head::after{content:'';position:absolute;left:50%;bottom:0;width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);transform:translateX(-50%);border-radius:2px;opacity:.7}
h2{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(22px,3.6vw,40px);line-height:1.05;letter-spacing:1px;color:#fff;text-transform:uppercase;margin:12px 0 10px;text-wrap:balance}
h2 em{font-style:normal;color:var(--orange)}
.tl-section-head p{color:#a8a8ae;font-size:clamp(14px,1.3vw,16.5px);line-height:1.6;max-width:70ch;margin:0 auto}
h3{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:8px}
h4{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;color:#fff;margin-bottom:8px}
h5{font-family:'Orbitron',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;margin-bottom:6px}
p{color:#b8b8bc;line-height:1.65}

/* --------------------------------------------------------------- cards */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tl-card{display:block;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));border:1px solid var(--line);border-radius:14px;padding:18px;transition:border-color .25s ease,transform .25s ease}
.tl-card:hover{border-color:rgba(255,122,0,.45);transform:translateY(-2px)}
.tl-card b{display:block;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;letter-spacing:.6px;color:#fff;margin-bottom:6px}
.tl-card small{display:block;font-family:'Share Tech Mono',monospace;font-size:11px;line-height:1.55;color:#8a8a90}
.tl-card .tl-dot{color:var(--orange)}

/* ------------------------------------------------------------ features */
.tl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.tl-feat{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2.2vw,28px);transition:border-color .25s ease,transform .25s ease}
.tl-feat:hover{border-color:var(--orange);transform:translateY(-4px)}
.tl-feat-ico{font-size:28px;margin-bottom:12px;display:block}
.tl-feat p{font-size:14px;line-height:1.6;color:var(--dim)}

/* ------------------------------------------------------- club-grade band */
.tl-grade-card{border:1px solid rgba(255,122,0,.22);border-radius:20px;padding:clamp(20px,3vw,38px);background:linear-gradient(180deg,rgba(255,122,0,.05),rgba(255,255,255,0) 40%);box-shadow:0 30px 80px -40px rgba(255,122,0,.4)}
.tl-grade-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.tl-grade-pulse{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);animation:tlBlink 1.8s infinite}
.tl-grade-lead{max-width:80ch;margin-bottom:clamp(18px,2.6vw,28px);font-size:15px}
.tl-grade-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tl-grade-thead,.tl-grade-row{display:grid;grid-template-columns:1.1fr 1.2fr 1.4fr;gap:0}
.tl-grade-row+.tl-grade-row,.tl-grade-row{border-top:1px solid var(--line)}
.tl-grade-cell{padding:12px 14px;font-size:13.5px;color:#b8b8bc;min-width:0;overflow-wrap:anywhere}
.tl-grade-h{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#7a7a7e;background:rgba(255,255,255,.02)}
.tl-grade-h-titan{color:var(--orange)}
.tl-grade-feature{color:#fff;font-weight:600}
.tl-grade-club{color:#8a8a90}
.tl-grade-titan{color:var(--glow);display:flex;gap:8px;align-items:flex-start}
.tl-tick{font-style:normal;color:var(--green);flex:0 0 auto}
.tl-grade-foot{margin-top:16px;font-size:13.5px;color:#8a8a90;display:flex;gap:9px;align-items:flex-start}
.tl-grade-foot-tick{color:var(--green)}

/* ----------------------------------------------------- hardware showcase */
.tl-gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.tl-gear{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid var(--line);border-radius:18px;padding:clamp(14px,1.8vw,20px);min-width:0}
.tl-gear-mock{aspect-ratio:5/4;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#15151a,#07070b);border:1px solid #2a2a2e;margin-bottom:16px;display:flex;flex-direction:column;box-shadow:0 22px 50px rgba(0,0,0,.6)}
.tl-gear-mock img{width:100%;height:100%;object-fit:cover;display:block}
.tl-gear-tag{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.tl-gear-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.tl-gear-list li{font-size:14px;color:#a8a8ae;padding-left:16px;position:relative;line-height:1.55}
.tl-gear-list li::before{content:'▸';position:absolute;left:0;color:var(--orange)}
.tl-gear-list b{color:#fff;font-weight:600}
/* SOUND panel — CSS art, same as the homepage's */
.tl-sm{padding:12px;gap:10px;justify-content:space-between}
.tl-sm-head{display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#6d6d74;text-transform:uppercase}
.tl-sm-tag{color:var(--orange);letter-spacing:3px}
.tl-sm-led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-left:auto;animation:tlBlink 1.6s infinite}
.tl-sm-bands{display:flex;align-items:flex-end;gap:3px;height:46%;padding:0 2px}
.tl-sm-bands div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}
.tl-sm-bands i{display:block;width:100%;border-radius:2px 2px 0 0;background:linear-gradient(to top,var(--orange),#ffd49a)}
.tl-sm-bands span{font-family:'Share Tech Mono',monospace;font-size:6.5px;color:#5a5a60}
.tl-sm-rack{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tl-sm-mod{border:1px solid #23232a;border-radius:6px;padding:6px 4px;text-align:center;background:rgba(255,255,255,.02)}
.tl-sm-mod span{display:block;font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:1.5px;color:#7a7a7e}
.tl-sm-mod i{display:block;height:3px;margin-top:5px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--screen))}

/* ---------------------------------------------------------------- flow */
.tl-flow-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);counter-reset:step}
.tl-step{position:relative;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2vw,24px);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tl-step-num{font-family:'Orbitron',sans-serif;font-weight:900;font-size:26px;color:transparent;-webkit-text-stroke:1px rgba(255,122,0,.55);display:block;margin-bottom:10px}
.tl-step p{font-size:14px;color:var(--dim)}

/* --------------------------------------------------------------- vinyl */
.tl-vinyl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:center}
.tl-vn-deck{position:relative;aspect-ratio:1/1;border-radius:18px;border:1px solid #2a2a2e;background:linear-gradient(135deg,#161619,#08080a);box-shadow:0 30px 70px rgba(0,0,0,.7);overflow:hidden;padding:18px}
.tl-vn-tag{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2.5px;color:#6d6d74;text-transform:uppercase}
.tl-vn-tag span{color:var(--orange);margin-left:8px}
.tl-vn-platter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 32%,#2a2a2e 0%,#0a0a0b 62%);border:2px solid #1a1a1c;box-shadow:0 18px 40px rgba(0,0,0,.75),inset 0 0 40px rgba(0,0,0,.8);animation:tlSpin 12s linear infinite}
.tl-vn-grooves{position:absolute;inset:6%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}
.tl-vn-rings{position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(255,255,255,.05)}
.tl-vn-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0deg,rgba(255,255,255,.08) 40deg,transparent 90deg)}
.tl-vn-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46%;box-shadow:inset 0 0 18px rgba(0,0,0,.35),0 0 70px rgba(255,122,0,.5);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 34%,#ff9a3c,#c34b00);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.tl-vn-label-top{font-family:'Orbitron',sans-serif;font-weight:900;font-size:9px;line-height:1.15;letter-spacing:2px;color:#1a0d00}
.tl-vn-label-mid{font-family:'Orbitron',sans-serif;font-weight:800;font-size:7px;line-height:1.15;letter-spacing:3px;color:#3a1c00}
.tl-vn-label-bot{font-family:'Share Tech Mono',monospace;font-size:5.5px;line-height:1.3;letter-spacing:1px;color:#4a2400;margin-top:2px}
.tl-vn-spindle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eee,#777)}
.tl-vn-arm{position:absolute;right:8%;top:12%;width:34%;opacity:.95}
.tl-vn-led{position:absolute;left:18px;bottom:64px;display:flex;align-items:center;gap:6px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1.5px;color:#7a7a7e}
.tl-vn-led i{width:6px;height:6px;border-radius:50%;background:#2a2a2e}
.tl-vn-led i.active{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.tl-vn-startstop{position:absolute;left:18px;bottom:18px;display:flex;gap:8px}
.tl-vn-start,.tl-vn-stop{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:800;letter-spacing:2px;padding:7px 11px;border-radius:5px;border:1px solid #2a2a2e;color:#7a7a7e;background:#0d0d0f}
.tl-vn-start{background:linear-gradient(135deg,#00ff7a,#00b358);color:#00210f;border-color:transparent}
.tl-vn-stop{color:#ff5a7a;border-color:rgba(255,90,122,.45)}
.tl-vn-pitch{position:absolute;right:18px;bottom:18px;width:26px;height:38%;border-radius:6px;border:1px solid #2a2a2e;background:#0b0b0d}
.tl-vn-pitch-label{position:absolute;top:-16px;right:0;font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:1.2px;color:#6d6d74;white-space:nowrap}
.tl-vn-pitch-track{position:absolute;top:8%;bottom:8%;left:50%;width:3px;transform:translateX(-50%);border-radius:2px;background:#050506;box-shadow:inset 0 0 6px #000}
.tl-vn-pitch-tick{position:absolute;left:4px;right:4px;height:1px;background:#2a2a2e}
.tl-vn-pitch-tick-mid{background:var(--orange);box-shadow:0 0 6px rgba(255,122,0,.6)}
.tl-vn-pitch-handle{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);width:20px;height:9px;border-radius:3px;background:linear-gradient(180deg,#3a3a3e,#141416);border:1px solid #4a4a4e;box-shadow:0 3px 8px rgba(0,0,0,.7)}
.tl-vn-pitch-val{position:absolute;bottom:-16px;right:0;font-family:'Share Tech Mono',monospace;font-size:7px;color:var(--glow)}
.tl-vinyl-features{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-vinyl-feat{border:1px solid var(--line);border-radius:14px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tl-vinyl-ico{display:block;font-size:20px;color:var(--orange);margin-bottom:8px}
.tl-vinyl-feat p{font-size:13.5px;color:var(--dim)}

/* -------------------------------------------------------- genre chips */
.tl-sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tl-sound-chip{border:1px solid color-mix(in srgb,var(--c,#ff7a00) 40%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--c,#ff7a00) 12%,transparent),rgba(255,255,255,0));border-radius:12px;padding:14px 16px;transition:transform .2s ease}
.tl-sound-chip:hover{transform:translateY(-3px)}
.tl-sound-chip b{display:block;font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;color:var(--c,#ff7a00);margin-bottom:5px}
.tl-sound-chip span{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.2px;color:#8a8a90}

/* --------------------------------------------------------------- views */
.tl-views-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tl-view{border:1px solid var(--line);border-radius:16px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));min-width:0}
.tl-view-mock{position:relative;aspect-ratio:16/10;border-radius:10px;border:1px solid #23232a;background:linear-gradient(135deg,#141418,#08080a);display:flex;align-items:center;justify-content:center;gap:6px;padding:26px 12px 12px;margin-bottom:14px;overflow:hidden}
.vw-label{position:absolute;top:7px;left:9px;font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:1.8px;color:var(--screen);border:1px solid rgba(0,212,255,.35);background:rgba(0,212,255,.08);border-radius:3px;padding:2px 6px}
.vw-label-work{color:var(--orange);border-color:rgba(255,122,0,.35);background:rgba(255,122,0,.08)}
/* Decks read as glowing jog wheels, the way they do on the homepage. */
.vw-deck{position:relative;flex:1;aspect-ratio:1;max-height:100%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#2f2f34,#0d0d10 68%);border:1px solid #26262c;box-shadow:inset 0 0 14px rgba(0,0,0,.8)}
.vw-deck::after{content:'';position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ffb347,#ff5a00 60%,#7a2b00);box-shadow:0 0 16px rgba(255,122,0,.55)}
.vw-deck.small{flex:.72}
.vw-deck.wide{flex:1.25}
.vw-mixer{position:relative;width:15%;height:78%;border-radius:4px;background:linear-gradient(180deg,#1c1c20,#0c0c0e);border:1px solid #26262c}
.vw-mixer::before{content:'';position:absolute;top:14%;left:26%;right:26%;height:1px;background:#4a4a52;box-shadow:0 3px 0 #4a4a52,0 6px 0 #4a4a52}
.vw-mixer::after{content:'';position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:2px;height:46%;border-radius:2px;background:linear-gradient(to top,var(--orange),rgba(255,122,0,.25));box-shadow:0 0 8px rgba(255,122,0,.5)}
.vw-stage{position:absolute;inset:30% 16% 20%;border-radius:8px;background:linear-gradient(180deg,#1c1c20,#0a0a0c);border:1px solid #2a2a30;display:flex;align-items:center;justify-content:center}
.vw-stage b{font-family:'Orbitron',sans-serif;font-style:italic;font-weight:900;font-size:15px;color:var(--glow);text-shadow:0 0 12px rgba(255,165,68,.7)}
.vw-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,rgba(255,122,0,.35),transparent 60%)}
.tl-view p{font-size:13px;color:var(--dim)}

/* ----------------------------------------------------------------- lab */
.tl-lab-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);align-items:start}
.tl-lab-mock{border:1px solid #2a2a2e;border-radius:16px;background:linear-gradient(135deg,#15151a,#08080a);padding:14px;box-shadow:0 26px 60px rgba(0,0,0,.65)}
.tl-lab-head{display:flex;align-items:center;gap:10px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#6d6d74;text-transform:uppercase;margin-bottom:12px}
.tl-lab-tag{color:#fff;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:2.5px;font-size:10px}
.tl-lab-tag b{color:var(--orange)}
.tl-lab-rec{margin-left:auto;color:#ff5a7a;display:inline-flex;align-items:center;gap:5px}
.tl-lab-rec i{width:6px;height:6px;border-radius:50%;background:#ff5a7a;box-shadow:0 0 8px #ff5a7a;animation:tlBlink 1.4s infinite}
.tl-lab-pads{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:12px}
.tl-lab-pads i{aspect-ratio:1;border-radius:4px;background:#111114;border:1px solid #202027}
.tl-lab-pads i[class^='lp-']{background:linear-gradient(180deg,rgba(255,122,0,.75),rgba(255,122,0,.25));border-color:rgba(255,122,0,.5);box-shadow:0 0 10px rgba(255,122,0,.3)}
.tl-lab-pads i.lp-2,.tl-lab-pads i.lp-5,.tl-lab-pads i.lp-8{background:linear-gradient(180deg,rgba(0,212,255,.75),rgba(0,212,255,.25));border-color:rgba(0,212,255,.5);box-shadow:0 0 10px rgba(0,212,255,.3)}
.tl-lab-pads i.lp-3,.tl-lab-pads i.lp-9{background:linear-gradient(180deg,rgba(0,255,122,.7),rgba(0,255,122,.2));border-color:rgba(0,255,122,.5)}
.tl-lab-seq{position:relative;border-top:1px solid #1c1c22;padding-top:12px;display:flex;flex-direction:column;gap:6px}
.lab-seq-row{display:flex;align-items:center;gap:3px}
.lab-seq-name{width:34px;flex:0 0 auto;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1px;color:#6d6d74}
.lab-seq-row i{flex:1;height:12px;border-radius:2px;background:#111114;border:1px solid #202027}
.lab-seq-row i.on{background:linear-gradient(180deg,var(--orange),#a34e00);border-color:rgba(255,122,0,.6)}
.lab-seq-row[data-row='HAT'] i.on{background:linear-gradient(180deg,var(--screen),#00587a);border-color:rgba(0,212,255,.6)}
.lab-seq-row[data-row='SNR'] i.on{background:linear-gradient(180deg,var(--yellow),#7a6300);border-color:rgba(255,212,0,.6)}
.lab-seq-row[data-row='PRC'] i.on{background:linear-gradient(180deg,var(--green),#00764a);border-color:rgba(0,255,122,.6)}
.tl-lab-features{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-lab-feat{border:1px solid var(--line);border-radius:14px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tl-lab-ico{display:block;font-size:18px;color:var(--screen);margin-bottom:8px}
.tl-lab-feat p{font-size:13.5px;color:var(--dim)}

/* ---------------------------------------------------------- spec grid */
.tl-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tl-spec{border:1px solid var(--line);border-radius:16px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tl-spec-meta{font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:2.4px;color:#6d6d74;text-transform:uppercase}
.tl-spec-num{display:block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,40px);color:#fff;line-height:1.1;margin:6px 0 10px}
.tl-spec-num small{font-size:14px;color:var(--orange);margin-left:3px}
.tl-spec p{font-size:13.5px;color:var(--dim)}

/* ------------------------------------------------------- install cards */
.tl-os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-os{position:relative;border:1px solid var(--line);border-radius:18px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));min-width:0}
.tl-os-badges{position:absolute;top:14px;right:14px;display:flex;gap:6px}
.tl-os-badge{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.4px;padding:3px 7px;border-radius:99px;border:1px solid #2a2a30;color:#7a7a7e}
.tl-os-badge-size{color:var(--glow);border-color:rgba(255,165,68,.35)}
.tl-os-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tl-os-logo{width:30px;height:30px;flex:0 0 auto;color:var(--orange)}
.tl-os-mac .tl-os-logo{color:#d8d8dc}
.tl-os-linux .tl-os-logo{color:var(--yellow)}
.tl-os-head span{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.4px;color:#7a7a7e}
.tl-os-steps{list-style:none;counter-reset:os;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.tl-os-steps li{counter-increment:os;position:relative;padding-left:26px;font-size:13.5px;color:var(--dim);line-height:1.55}
.tl-os-steps li::before{content:counter(os);position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,122,0,.45);color:var(--orange);font-family:'Share Tech Mono',monospace;font-size:9px;display:flex;align-items:center;justify-content:center}
.tl-os-steps b{color:#fff;font-weight:600}
.tl-os-steps code{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--screen);overflow-wrap:anywhere}
.tl-os .tl-cta{width:100%;letter-spacing:2px;padding:14px 14px;text-align:center}
.tl-os-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tl-os-chip{font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:1.2px;padding:4px 9px;border-radius:99px;border:1px solid #26262c;color:#7a7a7e}
.tl-os-note{margin-top:18px;font-size:13.5px;color:#8a8a90;text-align:center;max-width:80ch;margin-inline:auto}

/* -------------------------------------------------------------- plans */
.tl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tl-plan{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));border:1px solid var(--line);border-radius:18px;padding:26px}
.tl-plan-featured{border-color:rgba(255,122,0,.45);box-shadow:0 20px 60px -30px rgba(255,122,0,.5)}
.tl-plan-tag{position:absolute;top:-11px;left:24px;font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;padding:4px 11px;border-radius:99px;background:linear-gradient(135deg,var(--orange),var(--cue));color:#000}
.tl-plan-ico{font-size:24px;display:block;margin-bottom:10px}
.tl-plan h3{color:var(--glow)}
.tl-plan-sub{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:#7a7a7e;margin-bottom:12px}
.tl-plan-price{display:flex;align-items:flex-start;gap:2px;font-family:'Orbitron',sans-serif;font-weight:900;color:#fff;line-height:1}
.tl-price-cur{font-size:20px;margin-top:6px;color:var(--orange)}
.tl-price-amt{font-size:clamp(38px,4.6vw,48px)}
.tl-price-per{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:400;color:#8a8a90;margin-top:14px;margin-left:6px;letter-spacing:1px}
.tl-plan-bill{font-size:13px;color:#8a8a90;margin:8px 0 14px}
.tl-plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.tl-plan li{font-size:14px;color:#b8b8bc;padding-left:18px;position:relative;line-height:1.5}
.tl-plan li::before{content:'▸';position:absolute;left:0;color:var(--orange)}
.tl-plan li small{display:block;font-family:'Share Tech Mono',monospace;font-size:10.5px;color:#6d6d74;margin-top:3px}
.tl-plan .tl-cta{margin-top:auto;width:100%}
.tl-plan-foot{margin-top:12px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.2px;color:#6d6d74;text-align:center}

/* ------------------------------------------------------------- voices */
.tl-voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-voice{border:1px solid var(--line);border-radius:16px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tl-voice blockquote{font-size:15px;line-height:1.6;color:#c8c8ce;margin-bottom:16px}
.tl-voice figcaption b{display:block;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.2px;color:#fff}
.tl-voice figcaption span{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.4px;color:#7a7a7e}

/* ---------------------------------------------------------------- faq */
.tl-faq{display:flex;flex-direction:column;gap:10px;max-width:900px;margin:0 auto}
details{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid var(--line);border-radius:12px;padding:0 20px}
details[open]{border-color:rgba(255,122,0,.35)}
summary{cursor:pointer;list-style:none;padding:16px 0;font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;letter-spacing:.8px;color:#fff;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--orange);font-family:'Share Tech Mono',monospace}
details[open] summary::after{content:'–'}
details p{padding:0 0 18px;font-size:14.5px}

/* ------------------------------------------------------------ contact */
.tl-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tl-contact-card{border:1px solid var(--line);border-radius:16px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.tl-channels{list-style:none;display:flex;flex-direction:column;gap:12px}
.tl-channels li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:#b8b8bc;border-bottom:1px dashed #1f1f23;padding-bottom:10px}
.tl-channels li:last-child{border-bottom:0;padding-bottom:0}
.tl-ch-k{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#7a7a7e}
.tl-channels a{color:var(--screen);overflow-wrap:anywhere}
.tl-promise{margin-top:16px;border:1px solid rgba(255,122,0,.28);border-radius:12px;padding:14px 16px;font-size:13.5px;color:#a8a8ae;background:rgba(255,122,0,.04)}
.tl-promise b{color:var(--glow)}

/* ---------------------------------------------------------- final CTA */
.tl-final-card{border:1px solid rgba(255,122,0,.3);border-radius:22px;padding:clamp(26px,4vw,52px);text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(255,122,0,.1),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));box-shadow:0 30px 90px -50px rgba(255,122,0,.6)}
.tl-final-card p{max-width:60ch;margin:0 auto clamp(18px,2.4vw,26px)}
.tl-final-card .tl-cta-row{justify-content:center}

/* ---------------------------------------------------- decorative bits */
.tl-wave{height:44px;margin:clamp(28px,5vw,54px) 0;background:repeating-linear-gradient(90deg,rgba(255,122,0,.55) 0 2px,transparent 2px 6px);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 72%);opacity:.5}
.tl-booth{border:1px solid #23232a;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#141418,#07070a);box-shadow:0 30px 80px -30px #000,0 0 60px -20px rgba(255,122,0,.25);max-width:760px;margin:clamp(18px,3vw,28px) auto 0}
.tl-booth img{display:block;width:100%;height:auto}
.tl-prose{max-width:75ch;margin:0 auto;text-align:center;font-size:15.5px}

/* --------------------------------------------------- crumbs and footer */
.tl-crumbs{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#6d6d74;margin-bottom:14px;overflow-wrap:anywhere}
.tl-crumbs a:hover{color:var(--orange)}
footer{margin-top:clamp(40px,7vw,84px);padding-top:22px;border-top:1px solid #16161b;font-family:'Share Tech Mono',monospace;font-size:11px;line-height:1.8;letter-spacing:1.2px;color:#6d6d74;text-transform:uppercase}
footer a{color:var(--dim)}
footer a:hover{color:var(--orange)}
footer .tl-attr{text-transform:none;letter-spacing:.4px;margin-top:8px;color:#5c5c63}

/* ==================================================================
   MOBILE — the layout is rebuilt, not just shrunk. Multi-column
   grids collapse in the order a phone reads them, the club-grade
   table turns into stacked cards (a 3-column table cannot work at
   360 px), and every tap target stays at 44 px or more.
   ================================================================== */
@media (max-width:1024px){
  .tl-features,.tl-spec-grid{grid-template-columns:repeat(2,1fr)}
  .tl-flow-grid{grid-template-columns:repeat(2,1fr)}
  .tl-views-grid{grid-template-columns:repeat(2,1fr)}
  .tl-gear-grid{grid-template-columns:1fr 1fr}
  .tl-gear-sound{grid-column:1/-1}
  .tl-os-grid{grid-template-columns:1fr}
  .tl-voices-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .tl-hero{grid-template-columns:1fr;gap:26px}
  .tl-mock{max-width:460px;margin:0 auto;width:100%}
  .tl-vinyl-grid,.tl-lab-grid{grid-template-columns:1fr}
  .tl-vn-deck{max-width:420px;margin:0 auto}
  .tl-lab-mock{max-width:520px;margin:0 auto}
}
@media (max-width:720px){
  .wrap{padding-bottom:56px}
  /* Nav becomes a single scrolling strip instead of wrapping into a
     three-line block that pushes the hero below the fold. */
  .tl-nav{flex-direction:column;align-items:stretch;gap:12px}
  .tl-navlinks{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;gap:16px}
  .tl-navlinks::-webkit-scrollbar{display:none}
  .tl-navlinks a{white-space:nowrap}
  .tl-band{grid-template-columns:1fr 1fr;gap:18px 12px}
  .tl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .tl-card{padding:14px}
  .tl-gear-grid{grid-template-columns:1fr}
  .tl-vinyl-features,.tl-lab-features{grid-template-columns:1fr}
  .tl-sound-grid{grid-template-columns:1fr 1fr;gap:10px}
  .tl-plans{grid-template-columns:1fr}
  .tl-wave{height:28px}
  .tl-prose{text-align:left}
  /* The comparison table stops being a table and becomes cards. The
     column headings come back as per-cell labels from data-k, so no
     content is duplicated in the HTML to make this work. */
  .tl-grade-table{border:0;border-radius:0}
  .tl-grade-thead{display:none}
  .tl-grade-row{display:block;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.02)}
  .tl-grade-row+.tl-grade-row{margin-top:10px}
  .tl-grade-cell{padding:0;display:block}
  .tl-grade-feature{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:10px}
  .tl-grade-cell[data-k]::before{content:attr(data-k);display:block;font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:#6d6d74;margin-bottom:2px}
  .tl-grade-club{margin-bottom:8px}
  .tl-grade-titan{display:block}
  .tl-grade-titan .tl-tick{margin-right:6px}
  .tl-cta{flex:1 1 auto;padding:13px 18px;font-size:11.5px;letter-spacing:2px}
}
@media (max-width:560px){
  .tl-features,.tl-spec-grid,.tl-flow-grid,.tl-views-grid{grid-template-columns:1fr}
  .tl-grid{grid-template-columns:1fr 1fr}
  .tl-row{flex-direction:column;gap:3px}
  .tl-row span:first-child{font-size:9.5px}
  details{padding:0 15px}
  summary{font-size:12.5px;padding:14px 0}
  .tl-channels li{flex-direction:column;gap:4px}
}
@media (max-width:420px){
  .tl-band{grid-template-columns:1fr 1fr;gap:14px 10px}
  .tl-grid,.tl-sound-grid{grid-template-columns:1fr}
  .tl-cta-row{flex-direction:column;align-items:stretch}
  .tl-cta{width:100%}
  .tl-mock-label{font-size:8px;letter-spacing:2px}
  .tl-lab-pads{gap:3px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}