:root{
  --bg:#0c0a09;--bg2:#151210;--card:#1c1815;--line:#2e2823;
  --ink:#f3ead8;--mute:#a59a88;--tape:#ff5a1f;--amber:#ffb23e;--cy:#3ef0ff;--mg:#ff2e88;
  --serif:"Fraunces",Georgia,serif;--mono:"Space Mono",ui-monospace,monospace;--sans:"Inter Tight",system-ui,sans-serif;
  --r:18px;--w:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--tape);color:#000}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* CRT overlay: scanlines + grain + vignette */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100}
body::before{background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
body::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:99;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}

.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* header */
.hdr{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(var(--w),calc(100% - 28px));z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px;
  background:rgba(21,18,16,.72);backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);border-radius:999px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.brand svg{width:34px;height:34px;color:var(--tape)}
.brand em{font-style:italic;color:var(--tape)}
.nav{display:flex;gap:4px;list-style:none}
.nav a{display:block;padding:8px 16px;border-radius:999px;font-size:.95rem;color:var(--mute);transition:.25s}
.nav a:hover{color:var(--ink);background:var(--card)}
.nav a[aria-current]{color:#000;background:var(--ink)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.burger svg{margin:auto}
@media(max-width:760px){
  .burger{display:block}
  .nav{position:fixed;top:72px;left:14px;right:14px;flex-direction:column;padding:12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
    opacity:0;pointer-events:none;transform:translateY(-8px);transition:.25s}
  .nav.open{opacity:1;pointer-events:auto;transform:none}
  .nav a{padding:14px 18px;font-size:1.1rem}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .3s,background .2s}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn-hot{background:var(--tape);color:#120800;box-shadow:0 0 0 0 rgba(255,90,31,.5),0 10px 40px -10px var(--tape)}
.btn-hot:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(255,90,31,.15),0 16px 50px -10px var(--tape)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--card)}

/* hero */
.hero{position:relative;min-height:min(100svh,900px);display:grid;align-items:center;padding:130px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 400px at 78% 40%,rgba(255,90,31,.22),transparent 70%),
  radial-gradient(500px 360px at 12% 85%,rgba(62,240,255,.08),transparent 70%)}
.hero-grid>*{min-width:0}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.osd{display:flex;gap:22px;flex-wrap:wrap;color:var(--mute);margin-bottom:28px}
.rec{color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.rec i{width:10px;height:10px;border-radius:50%;background:#ff2b2b;box-shadow:0 0 12px #ff2b2b;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h1,.h2{font-family:var(--serif);font-weight:500;letter-spacing:-.035em;line-height:.95}
h1{font-size:clamp(3rem,8.4vw,7.4rem)}
h1 .it,.h2 .it{font-style:italic;color:var(--tape)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.glitch::before{color:var(--cy);mix-blend-mode:screen;transform:translate(-3px,0);opacity:.55;animation:gx 4s infinite}
.glitch::after{color:var(--mg);mix-blend-mode:screen;transform:translate(3px,0);opacity:.55;animation:gx 4s infinite reverse}
@keyframes gx{0%,90%,100%{clip-path:inset(0 0 0 0)}92%{clip-path:inset(20% 0 55% 0);transform:translate(-8px,0)}94%{clip-path:inset(60% 0 10% 0);transform:translate(8px,0)}96%{clip-path:inset(40% 0 30% 0)}}
.lede{max-width:520px;margin:28px 0 38px;font-size:1.2rem;color:var(--mute)}
.lede b{color:var(--ink);font-weight:500}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

/* cassette */
.deck{position:relative;aspect-ratio:1;display:grid;place-items:center}
.deck::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px dashed var(--line);animation:spin 60s linear infinite}
.cassette{width:100%;max-width:440px;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));transform:rotate(-8deg);transition:transform .2s ease-out}
.reel{transform-box:fill-box;transform-origin:center;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tc{position:absolute;bottom:6%;right:4%;font-family:var(--mono);font-size:1.05rem;color:var(--amber);text-shadow:0 0 10px rgba(255,178,62,.6);background:rgba(0,0,0,.5);padding:6px 12px;border-radius:6px}

/* marquee */
.marq{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:22px 0}
.marq-t{display:flex;gap:56px;width:max-content;animation:marq 32s linear infinite;font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.6rem);font-style:italic;color:var(--mute)}
.marq-t span{display:flex;align-items:center;gap:56px;white-space:nowrap}
.marq-t span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--tape)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(80px,12vw,150px) 0}
.eyebrow{color:var(--tape);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.h2{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:15ch}
.sub{color:var(--mute);max-width:52ch;margin-top:18px;font-size:1.1rem}
.head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:56px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;overflow:hidden;transition:border-color .3s,transform .3s}
.card:hover{border-color:#4a3f36;transform:translateY(-3px)}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,90,31,.12),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after{opacity:1}
.card h3{font-family:var(--serif);font-weight:500;font-size:1.65rem;letter-spacing:-.02em;margin:18px 0 10px;line-height:1.1}
.card p{color:var(--mute)}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(255,90,31,.12);color:var(--tape)}
.ico svg{width:26px;height:26px}
.c3{grid-column:span 3}.c2{grid-column:span 2}.c4{grid-column:span 4}
.big-n{font-family:var(--serif);font-size:clamp(4rem,9vw,7rem);line-height:1;color:var(--tape);font-style:italic;letter-spacing:-.04em}
@media(max-width:900px){.bento{grid-template-columns:1fr}.c3,.c2,.c4{grid-column:auto}.hero-grid{grid-template-columns:1fr}.deck{max-width:420px;margin:0 auto;width:100%}}

/* tapes (services) */
.tapes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tape{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.tape:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--tape)}
.tape-top{position:relative;height:150px;background:linear-gradient(135deg,#221d19,#151210);display:grid;place-items:center;border-bottom:1px solid var(--line)}
.tape-top svg{width:120px;color:var(--mute);transition:color .3s}
.tape:hover .tape-top svg{color:var(--tape)}
.tape-top .mono{position:absolute;top:14px;left:16px;color:var(--amber)}
.tape-b{padding:26px}
.tape-b h3{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:-.02em;margin-bottom:8px}
.tape-b p{color:var(--mute);margin-bottom:18px}
.ticks{list-style:none;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:center;font-size:.95rem}
.ticks svg{width:16px;height:16px;color:var(--tape);flex:none}
@media(max-width:900px){.tapes{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:30px 24px 0 0}
.step .mono{color:var(--tape)}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:12px 0 8px}
.step p{color:var(--mute);font-size:.98rem}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:10px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* pricing */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px;display:flex;flex-direction:column}
.price.hot{background:linear-gradient(160deg,#2a1608,#1c1815 60%);border-color:var(--tape);box-shadow:0 30px 80px -40px var(--tape)}
.price .tag{align-self:flex-start;color:#120800;background:var(--tape);padding:5px 10px;border-radius:999px;margin-bottom:16px}
.price h3{font-family:var(--serif);font-weight:500;font-size:1.6rem}
.amt{font-family:var(--serif);font-size:3.6rem;letter-spacing:-.03em;margin:10px 0 22px;line-height:1}
.amt small{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--mute);display:block;margin-bottom:6px}
.price .ticks{margin-bottom:30px;flex:1}
@media(max-width:700px){.prices{grid-template-columns:1fr}}

/* reviews */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:24px}
.stars{display:flex;gap:3px;color:var(--amber)}.stars svg{width:18px;height:18px}
.q blockquote{font-family:var(--serif);font-size:1.35rem;line-height:1.35;letter-spacing:-.01em;flex:1}
.who{display:flex;align-items:center;gap:12px}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--tape);color:#120800;font-weight:700}
.who small{display:block;color:var(--mute)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cc{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:.3s}
.cc:hover{border-color:var(--tape);transform:translateY(-4px)}
.cc h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:20px 0 6px}
.cc p{color:var(--mute)}
.cc .val{color:var(--ink);font-weight:500;word-break:break-word}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* CTA band */
.band{position:relative;border-radius:28px;padding:clamp(48px,8vw,96px);overflow:hidden;background:var(--tape);color:#120800}
.band .h2{max-width:18ch}
.band p{max-width:46ch;margin:18px 0 32px;font-size:1.15rem}
.band .btn{background:#120800;color:var(--ink)}
.band svg.bg{position:absolute;right:-60px;bottom:-60px;width:380px;opacity:.18;color:#120800}

/* page hero (subpages) */
.phero{padding:170px 0 40px}
.phero h1{font-size:clamp(3rem,8vw,6.4rem)}

/* footer */
.ftr{border-top:1px solid var(--line);margin-top:80px;padding:64px 0 32px;background:var(--bg2)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.ftr h4{color:var(--mute);margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr a{display:inline-flex;gap:10px;align-items:flex-start;color:var(--ink);transition:color .2s}
.ftr a:hover{color:var(--tape)}
.ftr a svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--tape)}
.ftr .brand{margin-bottom:14px}
.ftr-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
.ftr-b a{color:var(--ink)}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
.fh{color:var(--mute);margin-bottom:16px}
.rating{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:12px 20px;border:1px solid var(--line);border-radius:999px;background:var(--card);transition:border-color .2s}
.rating:hover{border-color:var(--amber)}.rating b{font-size:1.1rem}.rating span:last-child{color:var(--mute)}
.band .h2 .it{color:#fff4e8}