/* ============================================================
   KAPOW! — Bold Comic / Pop-Art Landing Template
   Self-hosted. No frameworks, no CDNs, no tracking.
   1.Fonts 2.Tokens 3.Base 4.A11y 5.Layout 6.Nav 7.Buttons
   8.Hero 9.Comic panels 10.Specs 11.Steps 12.Pricing 13.FAQ
   14.Forms 15.Footer 16.404 17.Responsive 18.Motion
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face { font-family:"Bebas Neue"; src:url("../fonts/BebasNeue-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url("../fonts/courier-prime-v11-latin-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url("../fonts/courier-prime-v11-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-ExtraBold.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ---------- 2. TOKENS ---------- */
:root {
  --red:#e61e25;
  --yellow:#ffcc00;
  --ink:#000;
  --paper:#fff;
  --cream:#fff8e6;
  --maxw:1100px;
  --border:5px solid var(--ink);
  --shadow:12px 12px 0 var(--ink);
  --shadow-red:12px 12px 0 var(--red);
  --shadow-sm:6px 6px 0 var(--ink);
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:"Inter",system-ui,Arial,sans-serif;
  color:var(--ink);
  background-color:var(--yellow);
  background-image:radial-gradient(var(--ink) 2.2px, transparent 2.3px);
  background-size:22px 22px;
  line-height:1.55; font-weight:400; font-size:1rem;
  overflow-x:hidden; min-height:100vh;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
ul { list-style:none; }
.display { font-family:"Bebas Neue",Impact,sans-serif; letter-spacing:1px; line-height:0.92; }
.mono { font-family:"Courier Prime",ui-monospace,monospace; }
h1,h2,h3 { font-family:"Bebas Neue",Impact,sans-serif; letter-spacing:1px; line-height:0.9; text-transform:uppercase; }

/* ---------- 4. A11Y ---------- */
.skip-link { position:absolute; left:8px; top:-50px; background:var(--ink); color:var(--yellow); font-weight:800; padding:10px 18px; z-index:300; border:3px solid var(--yellow); transition:top .2s ease; }
.skip-link:focus { top:8px; }
:focus-visible { outline:4px solid var(--red); outline-offset:3px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 5. LAYOUT ---------- */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section { padding:80px 0; }
.eyebrow { display:inline-block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.28em; background:var(--ink); color:var(--yellow); padding:6px 14px; margin-bottom:18px; }
.section-title { font-size:clamp(2.6rem,8vw,5rem); color:var(--ink); }
.section-title .red { color:var(--red); -webkit-text-stroke:2px #000; }
.lead { font-weight:800; font-size:1.05rem; max-width:60ch; }
.center { text-align:center; }
.center .lead { margin-inline:auto; }

/* ---------- 6. NAV ---------- */
.site-header { position:sticky; top:0; z-index:100; background:var(--ink); border-bottom:5px solid var(--yellow); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; max-width:var(--maxw); margin:0 auto; }
.brand { font-family:"Bebas Neue",Impact,sans-serif; font-size:2.1rem; color:var(--yellow); letter-spacing:2px; }
.brand .bang { color:var(--red); -webkit-text-stroke:1px var(--yellow); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:var(--paper); transition:color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--yellow); }
.nav-toggle { display:none; background:var(--yellow); border:3px solid var(--yellow); color:var(--ink); width:46px; height:42px; font-size:1.3rem; cursor:pointer; }

/* ---------- 7. BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.4rem; letter-spacing:1.5px; text-transform:uppercase; padding:14px 30px; border:var(--border); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; box-shadow:var(--shadow-sm); }
.btn:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.btn:active { transform:translate(0,0); box-shadow:3px 3px 0 var(--ink); }
.btn-red { background:var(--red); color:var(--paper); }
.btn-yellow { background:var(--yellow); color:var(--ink); }
.btn-white { background:var(--paper); color:var(--ink); }
.btn-block { width:100%; }

/* ---------- 8. HERO ---------- */
.hero { padding:64px 0; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.alert-bar { background:var(--red); color:var(--paper); border:var(--border); box-shadow:var(--shadow); font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(1.4rem,4vw,2.2rem); letter-spacing:3px; text-align:center; padding:12px; margin-bottom:26px; }
.hero h1 { font-size:clamp(3.4rem,12vw,7rem); color:var(--ink); text-shadow:4px 4px 0 var(--paper), 8px 8px 0 var(--red); }
.hero p.tagline { font-weight:800; font-size:1.2rem; margin:24px 0 30px; max-width:42ch; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero-art { position:relative; }
.hero-art .frame { border:var(--border); box-shadow:var(--shadow-red); background:var(--paper); }
.hero-art img { width:100%; display:block; }
.pow-bubble { position:absolute; top:-26px; right:-18px; background:var(--yellow); border:4px solid var(--ink); font-family:"Bebas Neue",Impact,sans-serif; font-size:1.5rem; padding:16px 20px; transform:rotate(8deg); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.price-splash { position:absolute; bottom:-22px; left:-20px; width:110px; height:110px; background:var(--red); color:var(--paper); border:4px solid var(--ink); border-radius:50%; display:grid; place-items:center; text-align:center; transform:rotate(-12deg); }
.price-splash .amt { font-family:"Bebas Neue",Impact,sans-serif; font-size:2rem; line-height:.8; }
.price-splash .lbl { font-family:"Courier Prime",monospace; font-size:.6rem; text-transform:uppercase; }

/* ---------- marquee strip ---------- */
.strip { background:var(--ink); color:var(--yellow); border-block:5px solid var(--yellow); padding:14px 0; }
.strip .container { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; font-family:"Courier Prime",monospace; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.2em; }
.strip .star { color:var(--red); }

/* ---------- 9. COMIC PANELS ---------- */
.panel { background:var(--paper); border:var(--border); box-shadow:var(--shadow); padding:28px; }
.panel.red { background:var(--red); color:var(--paper); }
.panel.yellow { background:var(--yellow); }
.panel.ink { background:var(--ink); color:var(--paper); }
.panel h2 { font-size:2.4rem; color:var(--red); text-shadow:2px 2px 0 var(--ink); margin-bottom:12px; }
.panel.red h2, .panel.ink h2 { color:var(--yellow); text-shadow:2px 2px 0 var(--ink); }
.panel p, .panel li { font-weight:800; }
.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.comic-list { margin-top:8px; }
.comic-list li { display:flex; gap:10px; padding:7px 0; }
.comic-list li::before { content:"\25B6"; color:var(--red); font-size:.8rem; line-height:1.6; }
.panel.red .comic-list li::before, .panel.ink .comic-list li::before { color:var(--yellow); }

/* ---------- 10. SPEC READOUT (was terminal) ---------- */
.specs { display:grid; grid-template-columns:1fr 1fr; gap:0; border:var(--border); box-shadow:var(--shadow); }
.spec-row { display:contents; }
.spec-hero { padding:26px; background:var(--paper); border-right:5px solid var(--ink); border-bottom:5px solid var(--ink); display:flex; flex-direction:column; justify-content:center; }
.spec-hero h3 { font-size:2.6rem; color:var(--red); line-height:.85; }
.spec-hero p { font-family:"Courier Prime",monospace; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.spec-data { padding:26px; background:var(--ink); color:var(--yellow); font-family:"Courier Prime",monospace; font-size:.92rem; line-height:1.5; border-bottom:5px solid var(--ink); }
.spec-data .label { color:var(--red); font-weight:700; text-transform:uppercase; }
.spec-data .tag { background:#333; color:var(--paper); padding:2px 6px; }
.spec-hero.alt { background:var(--yellow); }
.spec-hero.alt h3 { color:var(--ink); }

/* ---------- 11. STEPS ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:26px; position:relative; }
.step .num { position:absolute; top:-22px; left:-12px; width:48px; height:48px; background:var(--red); color:var(--paper); border:4px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.6rem; }
.step h3 { font-size:1.7rem; margin-bottom:8px; }
.step p { font-weight:800; font-size:.95rem; }

/* ---------- 12. PRICING ---------- */
.prices { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.tier { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:30px; display:flex; flex-direction:column; }
.tier.hot { background:var(--yellow); box-shadow:var(--shadow); transform:rotate(-1deg); }
.tier .name { font-family:"Courier Prime",monospace; font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; }
.tier .amt { font-family:"Bebas Neue",Impact,sans-serif; font-size:3.6rem; line-height:.9; color:var(--red); margin:8px 0; }
.tier .amt small { font-family:"Inter",sans-serif; font-size:.9rem; color:var(--ink); font-weight:800; }
.tier ul { margin:14px 0 22px; }
.tier li { font-weight:800; padding:7px 0; border-bottom:2px dashed var(--ink); }
.tier .btn { margin-top:auto; }

/* ---------- 13. FAQ ---------- */
.faq { max-width:800px; margin:0 auto; }
.faq-item { background:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); margin-bottom:16px; }
.faq-q { width:100%; text-align:left; background:none; border:none; font-family:"Bebas Neue",Impact,sans-serif; font-size:1.5rem; letter-spacing:.5px; padding:18px 22px; cursor:pointer; display:flex; justify-content:space-between; gap:14px; align-items:center; color:var(--ink); }
.faq-q .sign { color:var(--red); font-family:"Bebas Neue",sans-serif; font-size:2rem; transition:transform .2s; }
.faq-q[aria-expanded="true"] .sign { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a div { padding:0 22px 20px; font-weight:800; }

/* ---------- CTA ---------- */
.cta { background:var(--red); color:var(--paper); border:var(--border); box-shadow:var(--shadow); text-align:center; padding:64px 24px; }
.cta h2 { font-size:clamp(2.6rem,8vw,5rem); color:var(--paper); text-shadow:3px 3px 0 var(--ink); margin-bottom:18px; }
.cta p { font-weight:800; max-width:46ch; margin:0 auto 28px; }

/* ---------- 14. FORMS ---------- */
.page-hero { padding:56px 0; border-bottom:5px solid var(--ink); }
.page-hero h1 { font-size:clamp(2.8rem,9vw,5rem); text-shadow:3px 3px 0 var(--paper),6px 6px 0 var(--red); }
.prose { max-width:760px; }
.prose h2 { font-size:2rem; color:var(--red); text-shadow:2px 2px 0 var(--ink); margin:32px 0 12px; }
.prose p, .prose li { font-weight:800; margin-bottom:12px; }
.prose ul { padding-left:22px; }
.prose ul li { list-style:square; }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; }
.field { margin-bottom:18px; }
.field label { display:block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; margin-bottom:6px; }
.field input, .field textarea { width:100%; background:var(--paper); border:var(--border); padding:13px 15px; font-family:"Inter",sans-serif; font-weight:800; font-size:1rem; }
.field input:focus, .field textarea:focus { outline:none; box-shadow:var(--shadow-sm); }
.form-status { margin-top:14px; font-family:"Courier Prime",monospace; font-weight:700; background:var(--ink); color:var(--yellow); display:inline-block; padding:8px 12px; }
.form-status:empty { display:none; }
.form-note { font-weight:800; font-size:.86rem; margin-top:10px; }
.info { background:var(--ink); color:var(--paper); border:var(--border); box-shadow:var(--shadow-sm); padding:26px; }
.info li { padding:14px 0; border-bottom:2px dashed var(--yellow); }
.info .k { display:block; font-family:"Courier Prime",monospace; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--yellow); margin-bottom:4px; }

/* ---------- 15. FOOTER ---------- */
.site-footer { background:var(--ink); color:var(--paper); border-top:5px solid var(--yellow); padding:56px 0 28px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-brand .brand { font-size:2.6rem; }
.footer-brand p { font-weight:800; margin-top:12px; max-width:34ch; color:#ddd; }
.footer-col h4 { font-family:"Courier Prime",monospace; font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--yellow); margin-bottom:14px; }
.footer-col a { display:block; color:#ddd; font-weight:800; padding:5px 0; transition:color .2s; }
.footer-col a:hover { color:var(--yellow); }
.footer-bottom { border-top:2px dashed #555; padding-top:22px; text-align:center; font-family:"Courier Prime",monospace; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:#bbb; }

/* ---------- 16. 404 ---------- */
.error-page { min-height:66vh; display:grid; place-items:center; text-align:center; padding:70px 22px; }
.error-page .code { font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(6rem,24vw,15rem); line-height:.8; color:var(--red); text-shadow:5px 5px 0 var(--paper),10px 10px 0 var(--ink); }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-grid { grid-template-columns:1fr; }
  .panel-grid, .specs, .steps, .prices { grid-template-columns:1fr; }
  .spec-hero { border-right:0; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .nav-links { position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; background:var(--ink); border-bottom:5px solid var(--yellow); padding:6px 0; transform:translateY(-130%); transition:transform .3s ease; }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:15px 22px; width:100%; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .section { padding:56px 0; }
  .footer-grid { grid-template-columns:1fr; }
  .pow-bubble, .price-splash { position:static; display:inline-block; transform:none; clip-path:none; border-radius:0; width:auto; height:auto; margin-bottom:12px; }
}

/* ---------- 18. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}