@font-face{font-family:"Archivo Black";src:url("https://fonts.gstatic.com/s/archivoblack/v21/HTxqL289NzCGg4MzN6KJ7eW6CYyF_g.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUXskPMBBSSJLm2E.woff2") format("woff2");font-display:swap}

:root{
  --bg:#26221a;
  --fg:#fbf6ea;
  --paper:#f3ecda;
  --ink:#1a1610;
  --accent:#ffd400;
  --accent-fg:#1a1610;
  --danger:#d8351b;
  --border:#1a1610;
}

*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:"Space Grotesk",system-ui,sans-serif;line-height:1.5}
body{
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(251,246,234,.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(251,246,234,.05) 39px 40px);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Archivo Black","Impact",sans-serif;letter-spacing:-.02em;line-height:.95;text-transform:uppercase;margin:0}
h1{font-size:clamp(2.5rem,6vw,5rem)}
h2{font-size:clamp(2rem,5vw,4rem)}
h3{font-size:1.5rem}
p{margin:.5em 0}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.section{border-bottom:3px solid var(--border);padding:4rem 0}
.section.dark{background:var(--bg)}
.section.light{background:var(--paper);color:var(--ink)}
.section.accent{background:var(--accent);color:var(--accent-fg)}
.section.danger{background:var(--danger);color:var(--fg);text-align:center}

.brutal-box{border:3px solid var(--border);box-shadow:8px 8px 0 0 var(--border);background:var(--paper);color:var(--ink);padding:1.5rem}
.brutal-box-accent{display:inline-block;border:3px solid var(--border);box-shadow:6px 6px 0 0 var(--border);background:var(--accent);color:var(--accent-fg);padding:.4rem .8rem;font-family:"Archivo Black";text-transform:uppercase;font-size:.8rem}
.brutal-cta{display:inline-flex;align-items:center;gap:.6rem;padding:1.1rem 2rem;background:var(--danger);color:var(--ink);border:4px solid var(--border);box-shadow:10px 10px 0 0 var(--border);font-family:"Archivo Black";text-transform:uppercase;font-size:1.15rem;transition:transform .12s,box-shadow .12s;cursor:pointer}
.brutal-cta:hover{transform:translate(4px,4px);box-shadow:4px 4px 0 0 var(--border)}
.brutal-cta.alt{background:var(--paper);color:var(--ink)}

/* HEADER */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:3px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;max-width:1200px;margin:0 auto}
.nav-logo{font-family:"Archivo Black";font-size:1.5rem}
.nav-logo span{color:var(--accent)}
.nav-links{display:none;gap:1.5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.nav-links a:hover{color:var(--accent)}
.nav-cta{border:3px solid var(--border);background:var(--accent);color:var(--accent-fg);padding:.5rem 1rem;font-family:"Archivo Black";text-transform:uppercase;font-size:.85rem;box-shadow:4px 4px 0 0 var(--border)}
@media(min-width:768px){.nav-links{display:flex}}

/* HERO */
.hero{display:grid;gap:2rem;padding:3rem 0;align-items:center}
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;padding:5rem 0}}
.hero h1 mark{background:var(--accent);color:var(--accent-fg);padding:0 .3em}
.hero .lead{font-size:1.15rem;max-width:30rem;margin-top:1.5rem}
.hero strong{color:var(--accent)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-stats{display:flex;gap:1.5rem;margin-top:2rem;font-size:.8rem;text-transform:uppercase}
.hero-stats b{display:block;font-family:"Archivo Black";font-size:2rem;color:var(--accent)}
.hero-img{position:relative}
.hero-img img{border:3px solid var(--border);box-shadow:10px 10px 0 0 var(--border);aspect-ratio:3/4;object-fit:cover;width:100%}
.hero-tag{position:absolute;top:1rem;left:-.5rem;transform:rotate(-6deg);z-index:2}
.hero-tag.bottom{top:auto;bottom:-1rem;right:-1rem;left:auto;transform:none}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--accent);color:var(--accent-fg);border-bottom:3px solid var(--border)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;padding:1rem 0;font-family:"Archivo Black";font-size:1.5rem;text-transform:uppercase;animation:scroll 30s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* GRID */
.grid-3{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr;align-items:center}}

.step-num{font-family:"Archivo Black";font-size:3.5rem;color:var(--danger);line-height:1}
.tag-label{display:inline-block;background:var(--accent);color:var(--accent-fg);padding:.3rem .7rem;font-family:"Archivo Black";text-transform:uppercase;font-size:.8rem;border:3px solid var(--border);margin-bottom:1rem}

.bullets{list-style:none;padding:0;margin:1.5rem 0}
.bullets li{display:flex;gap:.8rem;align-items:center;border-bottom:1px solid rgba(251,246,234,.2);padding:.6rem 0;text-transform:uppercase;font-size:.9rem}
.bullets .chk{background:var(--accent);color:var(--accent-fg);padding:0 .5rem;font-family:"Archivo Black";border:3px solid var(--border)}

.faq details{border:3px solid var(--border);background:var(--paper);color:var(--ink);padding:1rem 1.25rem;margin-bottom:.8rem;box-shadow:6px 6px 0 0 var(--border)}
.faq summary{cursor:pointer;font-family:"Archivo Black";text-transform:uppercase;font-size:1.05rem}

/* FOOTER */
footer{background:var(--bg);padding:2.5rem 0;font-size:.85rem}
footer .container{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
@media(min-width:768px){footer .container{flex-direction:row;justify-content:space-between;text-align:left}}

/* BLOG */
.blog-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{display:flex;flex-direction:column}
.blog-card .meta{font-size:.75rem;text-transform:uppercase;opacity:.6;letter-spacing:.05em}
.blog-card h2{font-size:1.4rem;margin-top:.5rem;line-height:1.1}
.blog-card p{flex:1;margin:.8rem 0}
.blog-card .brutal-cta{font-size:.9rem;padding:.7rem 1.2rem;align-self:flex-start}

.post{max-width:780px;margin:0 auto;padding:3rem 1rem;background:var(--paper);color:var(--ink)}
.post .meta{font-size:.8rem;text-transform:uppercase;opacity:.6;margin-bottom:.5rem}
.post h1{margin-bottom:1.5rem}
.post h2{font-size:1.8rem;margin-top:2rem;margin-bottom:.5rem}
.post p{font-size:1.05rem;line-height:1.7}
.post a{color:var(--danger);text-decoration:underline;font-weight:bold}
.post .cta-wrap{margin:2.5rem 0;text-align:center}
.related{background:var(--bg);color:var(--fg);padding:3rem 0;border-top:3px solid var(--border)}