:root{
  --bg:#faf7f2;
  --bg-alt:#f1ece2;
  --ink:#17181c;
  --ink-soft:#3d3e45;
  --ink-mute:#5a5c65;
  --line:#e4ddcf;
  --brand:#d02332;
  --brand-2:#e46a00;
  --brand-ink:#9e1824;
  --gold:#ffc043;
  --ok:#0d8a4f;
  --surface:#ffffff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .6em;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.4vw,3.8rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em;color:var(--ink-soft)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

.skip-link{position:absolute;left:-9999px;top:0;padding:10px;background:var(--ink);color:#fff}
.skip-link:focus{left:10px;top:10px;z-index:100}

/* buttons: chunky, offset-shadow style (neo-brutalist vibe) */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;font-weight:700;font-size:.96rem;transition:transform .1s ease,box-shadow .15s ease,background .15s;border:2px solid var(--ink);cursor:pointer;border-radius:4px;position:relative}
.btn-lg{padding:18px 32px;font-size:1.05rem}
.btn-primary{background:var(--brand);color:#fff;box-shadow:4px 4px 0 0 var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink);background:#d12f3b}
.btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn-outline{background:var(--surface);color:var(--ink);box-shadow:4px 4px 0 0 var(--ink)}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);box-shadow:4px 4px 0 0 rgba(0,0,0,.25)}
.btn-light:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 rgba(0,0,0,.25)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.18rem;letter-spacing:-.02em}
.logo-mark{background:var(--ink);color:var(--gold);width:42px;height:42px;display:grid;place-items:center;border-radius:6px;font-size:.95rem;font-weight:900;transform:rotate(-4deg)}
.logo-text em{color:var(--brand);font-style:normal;margin-left:4px;font-weight:900}
.menu{display:flex;gap:2px;flex:1;justify-content:center}
.menu a{padding:10px 14px;color:var(--ink-soft);font-weight:600;font-size:.94rem;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.menu a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.cta-top{white-space:nowrap;padding:10px 18px !important;font-size:.9rem !important}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;gap:5px;flex-direction:column}
.menu-toggle span{display:block;width:26px;height:3px;background:var(--ink);border-radius:2px}

@media (max-width:960px){
  .menu{display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);flex-direction:column;padding:12px;border-bottom:2px solid var(--ink)}
  .menu.open{display:flex}
  .menu a{border-bottom:none;padding:12px 16px}
  .menu-toggle{display:flex}
  .cta-top{display:none}
}

/* hero: asymmetric, with color block background */
.hero{position:relative;padding:70px 0 80px;overflow:hidden;background:var(--bg)}
.hero::before{content:"";position:absolute;top:-100px;right:-80px;width:520px;height:520px;background:var(--brand);border-radius:50%;opacity:.08;z-index:0}
.hero::after{content:"";position:absolute;bottom:-200px;left:-120px;width:400px;height:400px;background:var(--brand-2);border-radius:50%;opacity:.06;z-index:0}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.badge{display:inline-block;padding:7px 14px;background:var(--gold);color:var(--ink);font-size:.8rem;font-weight:800;margin-bottom:20px;border:2px solid var(--ink);border-radius:4px;letter-spacing:.02em;box-shadow:3px 3px 0 0 var(--ink);transform:rotate(-1deg)}
.gradient{color:var(--brand);position:relative;display:inline-block}
.gradient::after{content:"";position:absolute;bottom:.05em;left:-4px;right:-4px;height:.35em;background:var(--gold);z-index:-1;transform:skew(-8deg)}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 32px}
.hero-checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px}
.hero-checks li{position:relative;padding-left:30px;color:var(--ink-soft);font-size:.95rem;font-weight:500}
.hero-checks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;background:var(--brand);color:#fff;display:grid;place-items:center;border-radius:4px;font-size:.8rem;font-weight:900}

/* hero art: sticker/TV set with halftone background */
.hero-art{position:relative}
.card-glow{position:relative;padding:28px;background:var(--surface);border:2px solid var(--ink);border-radius:8px;box-shadow:10px 10px 0 0 var(--ink);transform:rotate(1.5deg)}
.card-glow::before{content:"";position:absolute;top:-12px;left:-12px;right:20px;bottom:20px;background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 8px);z-index:-1;opacity:.22}
.tv-frame{aspect-ratio:16/10;background:var(--ink);border-radius:10px;padding:14px;position:relative}
.tv-screen{height:100%;border-radius:6px;background:linear-gradient(135deg,#ff7b00 0%,#e63946 100%);position:relative;overflow:hidden}
.tv-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px);pointer-events:none}
.tv-screen .pill{position:absolute;top:14px;left:14px;padding:6px 12px;background:var(--ink);border-radius:4px;font-size:.7rem;letter-spacing:.12em;color:var(--gold);font-weight:900}
.tv-screen .bars{position:absolute;bottom:26px;left:14px;right:14px;display:flex;gap:8px;align-items:flex-end;height:60px}
.tv-screen .bars span{flex:1;background:#fff;border:2px solid var(--ink);border-radius:2px;animation:bar 1.6s ease-in-out infinite}
.tv-screen .bars span:nth-child(2){animation-delay:.2s;background:var(--gold)}
.tv-screen .bars span:nth-child(3){animation-delay:.4s;background:#fff}
.tv-screen .bars span:nth-child(4){animation-delay:.6s;background:var(--gold)}
@keyframes bar{0%,100%{height:40%}50%{height:100%}}
.tv-screen .lines{position:absolute;top:56px;left:14px;right:40%;display:flex;flex-direction:column;gap:8px}
.tv-screen .lines b{height:8px;background:rgba(0,0,0,.22);border-radius:2px;display:block;width:100%}
.tv-screen .lines b:nth-child(2){width:70%;background:rgba(255,255,255,.5)}
.tv-screen .lines b:nth-child(3){width:50%;background:rgba(0,0,0,.2)}
.tv-base{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:100px;height:10px;background:var(--ink);border-radius:3px}

@media (max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1;max-width:440px;margin:0 auto}.hero-checks{grid-template-columns:1fr}}

/* stats: hard blocks of color */
.stats{background:var(--ink);padding:36px 0;color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stats-grid strong{display:block;font-size:2rem;font-weight:900;color:var(--gold);letter-spacing:-.02em}
.stats-grid span{color:#d7cfbe;font-size:.88rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em}
@media (max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}}

/* sections */
.section{padding:90px 0}
.section-alt{background:var(--bg-alt)}
.section-head{text-align:center;max-width:740px;margin:0 auto 50px}
.eyebrow{display:inline-block;padding:6px 12px;background:var(--ink);color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800;margin-bottom:16px;border-radius:4px}
.section-head p{color:var(--ink-soft);font-size:1.05rem}

/* features: cards with rotating offset */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feature{padding:30px;background:var(--surface);border:2px solid var(--ink);border-radius:6px;transition:transform .15s,box-shadow .15s;box-shadow:5px 5px 0 0 var(--ink)}
.feature:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 0 var(--ink)}
.feature .icon{width:54px;height:54px;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:1.5rem;margin-bottom:18px;border-radius:6px;border:2px solid var(--ink)}
.feature h3{color:var(--ink)}
.feature p{color:var(--ink-soft);margin:0}
.feature:nth-child(2) .icon{background:var(--brand-2)}
.feature:nth-child(3) .icon{background:var(--gold);color:var(--ink)}
.feature:nth-child(4) .icon{background:var(--ok)}
.feature:nth-child(5) .icon{background:var(--brand-2)}
.feature:nth-child(6) .icon{background:var(--ink);color:var(--gold)}
@media (max-width:860px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.features{grid-template-columns:1fr}}

/* plans: ticket / price tag style */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{position:relative;background:var(--surface);border:2px solid var(--ink);border-radius:6px;padding:34px 30px;display:flex;flex-direction:column;box-shadow:6px 6px 0 0 var(--ink);transition:transform .15s,box-shadow .15s}
.plan:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 0 var(--ink)}
.plan.featured{background:var(--ink);color:#fff;transform:translateY(-8px);box-shadow:6px 6px 0 0 var(--brand)}
.plan.featured:hover{transform:translate(-3px,-11px);box-shadow:9px 9px 0 0 var(--brand)}
.plan.featured h3,.plan.featured .plan-desc,.plan.featured .price strong{color:#fff}
.plan.featured .plan-desc,.plan.featured .price em,.plan.featured .price span{color:#bbb}
.plan.featured li{color:#e4ddcf}
.plan.featured li::before{background:var(--gold);color:var(--ink)}
.plan h3{font-size:1.55rem;margin-bottom:4px;letter-spacing:-.02em}
.plan-desc{color:var(--ink-mute);font-size:.92rem;margin:0 0 22px;font-weight:500}
.price{display:flex;align-items:baseline;gap:4px;margin:18px 0 26px;padding-bottom:22px;border-bottom:2px dashed var(--line)}
.plan.featured .price{border-bottom-color:#2d2e34}
.price span{color:var(--ink-mute);font-size:1rem;font-weight:700}
.price strong{font-size:3.2rem;font-weight:900;line-height:1;color:var(--brand);letter-spacing:-.04em}
.price em{color:var(--ink-mute);font-style:normal;font-size:1rem;font-weight:600}
.plan ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px;flex:1}
.plan li{padding-left:30px;position:relative;color:var(--ink-soft);font-size:.95rem}
.plan li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;display:grid;place-items:center;background:var(--ok);color:#fff;border-radius:50%;font-size:.72rem;font-weight:900}
.plan .btn{width:100%}
.ribbon{position:absolute;top:-18px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--gold);color:var(--ink);padding:8px 18px;font-size:.78rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;border:2px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 0 var(--ink)}
.plans-note{text-align:center;color:var(--ink-mute);margin-top:34px;font-size:.94rem}
@media (max-width:860px){.plans{grid-template-columns:1fr}.plan.featured{transform:none}.plan.featured:hover{transform:translate(-3px,-3px)}}

/* two col */
.two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.two-col .eyebrow{margin-top:0}
.dotted{list-style:none;padding:0;margin:20px 0;display:grid;gap:14px}
.dotted li{padding-left:30px;position:relative;color:var(--ink-soft);font-weight:500}
.dotted li::before{content:"▸";position:absolute;left:0;top:0;color:var(--brand);font-weight:900;font-size:1.1rem}
.devices{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.device{height:150px;background:var(--surface);border:2px solid var(--ink);border-radius:6px;display:grid;place-items:center;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;box-shadow:4px 4px 0 0 var(--ink)}
.device:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink)}
.device span{position:absolute;bottom:14px;left:14px;color:var(--ink);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.device::before{content:"";position:absolute;top:22%;left:18%;right:18%;bottom:40%;background:var(--brand);border-radius:4px;border:2px solid var(--ink)}
.device.phone::before{left:40%;right:40%;top:15%;bottom:25%;border-radius:10px;background:var(--brand-2)}
.device.laptop::before{top:28%;bottom:42%;border-radius:3px 3px 0 0;background:var(--gold)}
.device.box::before{left:30%;right:30%;top:35%;bottom:45%;border-radius:3px;background:var(--ok)}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:40px}}

/* compat: chips */
.compat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.compat div{padding:18px 12px;background:var(--surface);border:2px solid var(--ink);border-radius:4px;color:var(--ink);font-size:.88rem;font-weight:700;transition:background .15s,color .15s}
.compat div:hover{background:var(--ink);color:var(--gold)}
@media (max-width:760px){.compat{grid-template-columns:repeat(2,1fr)}}

/* reviews: quote cards */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reviews blockquote{margin:0;padding:30px;background:var(--surface);border:2px solid var(--ink);border-radius:6px;position:relative;box-shadow:5px 5px 0 0 var(--ink)}
.reviews blockquote::before{content:"\201C";position:absolute;top:-18px;left:20px;font-size:5rem;color:var(--brand);line-height:1;font-family:Georgia,serif;font-weight:700}
.reviews p{font-size:1rem;color:var(--ink-soft);margin:10px 0 14px;font-style:italic}
.reviews cite{font-style:normal;color:var(--ink);font-size:.9rem;font-weight:700}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}

/* cta banner */
.cta-banner{background:var(--brand);padding:72px 0;text-align:center;position:relative;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cta-banner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px);pointer-events:none}
.cta-inner{position:relative;z-index:1}
.cta-banner h2{color:#fff;margin-bottom:12px;font-size:clamp(1.8rem,4vw,2.8rem)}
.cta-banner p{color:#fff;opacity:.95;font-size:1.12rem;margin-bottom:26px}

/* footer */
.site-footer{background:var(--ink);padding:70px 0 24px;color:#f0ebdd;border-top:2px solid var(--ink)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #3a3b42}
.footer-grid h3,.footer-grid h4{color:var(--gold);font-size:.92rem;margin-bottom:18px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-grid a{color:#f0ebdd;font-size:.92rem;transition:color .15s}
.footer-grid a:hover{color:var(--gold)}
.footer-grid p{color:#f0ebdd;margin-top:16px;font-size:.92rem}
.footer-grid li{color:#f0ebdd;font-size:.92rem}
.footer-grid .logo-text em{color:var(--gold)}
.footer-bottom{padding-top:22px;text-align:center;color:#f0ebdd;font-size:.9rem;font-weight:500}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}}

/* forms */
.form-card{max-width:640px;margin:0 auto;background:var(--surface);border:2px solid var(--ink);border-radius:6px;padding:40px;box-shadow:8px 8px 0 0 var(--ink)}
.form-row{display:grid;gap:16px;margin-bottom:16px}
.form-row.two{grid-template-columns:1fr 1fr}
.form-row label{display:block;font-size:.88rem;color:var(--ink);margin-bottom:6px;font-weight:700}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:14px 16px;background:var(--bg);border:2px solid var(--ink);color:var(--ink);font-family:inherit;font-size:.95rem;border-radius:4px;transition:background .15s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;background:#fff;box-shadow:3px 3px 0 0 var(--brand)}
.form-row textarea{min-height:120px;resize:vertical}
@media (max-width:560px){.form-row.two{grid-template-columns:1fr}}

/* faq */
.faq{max-width:840px;margin:0 auto;display:grid;gap:14px}
.faq details{background:var(--surface);border:2px solid var(--ink);border-radius:6px;padding:22px 26px;transition:box-shadow .15s;box-shadow:4px 4px 0 0 var(--ink)}
.faq details[open]{box-shadow:4px 4px 0 0 var(--brand)}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;position:relative;padding-right:36px;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-4px;font-size:1.7rem;color:var(--brand);font-weight:700;transition:transform .2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:14px;color:var(--ink-soft);font-size:.95rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:step;margin-top:30px}
.step{position:relative;padding:32px 26px 26px;background:var(--surface);border:2px solid var(--ink);border-radius:6px;counter-increment:step;box-shadow:5px 5px 0 0 var(--ink)}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;top:-22px;left:22px;background:var(--brand);color:#fff;width:48px;height:48px;display:grid;place-items:center;border-radius:6px;font-weight:900;border:2px solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);font-size:1rem}
.step h3{margin-top:14px;font-size:1.1rem}
.step p{color:var(--ink-soft);font-size:.92rem;margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* page head */
.page-head{padding:70px 0 40px;text-align:center;position:relative;background:var(--bg-alt);border-bottom:2px solid var(--ink)}
.page-head h1{max-width:880px;margin:0 auto 14px;position:relative}
.page-head p{max-width:740px;margin:0 auto;color:var(--ink-soft);font-size:1.1rem;position:relative}