/* Matchnela — brutalist / raw stylesheet, original build */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --lime:#a8ff00;
  --lime-dark:#6b9900;
  --gray:#efefef;
  --shadow-off: 6px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
}

h1,h2,h3,.mono,.tag,.btn,.logo,nav a,.stat-num,.card-num{
  font-family:'Space Mono', 'Courier New', monospace;
}

a{ color:var(--ink); }

img{ max-width:100%; display:block; }

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- header ---------- */

.site-header{
  border-bottom:4px solid var(--ink);
  background:var(--bg);
  position:relative;
  z-index:5;
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
  flex-wrap:wrap;
  gap:14px;
}

.logo{
  font-weight:700;
  font-size:26px;
  letter-spacing:-1px;
  text-decoration:none;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.logo .dot{
  width:14px;
  height:14px;
  background:var(--lime);
  border:2px solid var(--ink);
  display:inline-block;
}

.geo-tag{
  border:3px solid var(--ink);
  background:var(--lime);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  padding:5px 10px;
  transform:rotate(-2deg);
  display:inline-block;
}

nav.top-links{
  display:flex;
  gap:18px;
  font-size:14px;
}
nav.top-links a{ text-decoration:none; border-bottom:2px solid transparent; }
nav.top-links a:hover{ border-bottom-color:var(--ink); }

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  background:var(--lime);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:14px 28px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:hover{
  transform: translate(3px,3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:active{
  transform: translate(6px,6px);
  box-shadow: 0 0 0 var(--ink);
}
.btn.btn-ghost{
  background:var(--bg);
}
.btn.btn-lg{
  padding:18px 38px;
  font-size:17px;
}

/* ---------- hero ---------- */

.hero{
  padding:70px 0 60px;
  border-bottom:4px solid var(--ink);
  background:
    linear-gradient(var(--gray) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero .wrap{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:40px;
  align-items:center;
}

.hero-copy h1{
  font-size:52px;
  line-height:1.05;
  margin:0 0 22px;
  letter-spacing:-1px;
}
.hero-copy h1 .hl{
  background:var(--lime);
  padding:0 6px;
  display:inline-block;
  transform:rotate(-1deg);
  border:3px solid var(--ink);
}

.hero-copy p{
  font-size:18px;
  max-width:52ch;
  margin:0 0 30px;
}

.hero-ctas{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.hero-visual{
  position:relative;
  min-height:280px;
}

.stat-card{
  position:absolute;
  background:var(--bg);
  border:4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding:20px 22px;
  width:190px;
}
.stat-card.c1{ top:0; right:20px; transform:rotate(3deg); }
.stat-card.c2{ top:130px; right:120px; transform:rotate(-4deg); background:var(--ink); color:var(--bg); }
.stat-card.c3{ top:230px; right:0; transform:rotate(2deg); }

.stat-num{
  font-size:34px;
  font-weight:700;
  display:block;
  color:var(--lime-dark);
}
.stat-card.c2 .stat-num{ color:var(--lime); }
.stat-label{
  font-size:13px;
  margin-top:4px;
  display:block;
}

/* ---------- section heads ---------- */

.section{
  padding:64px 0;
  border-bottom:4px solid var(--ink);
}
.section:last-of-type{ border-bottom:none; }

.section-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:34px;
  flex-wrap:wrap;
}

.section-head h2{
  font-size:30px;
  margin:0;
  text-transform:uppercase;
  letter-spacing:-0.5px;
}

.section-head .idx{
  font-family:'Space Mono',monospace;
  font-size:14px;
  border:2px solid var(--ink);
  padding:2px 8px;
  transform:rotate(-2deg);
}

/* ---------- why grid ---------- */

.why-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:26px;
}

.why-card{
  border:4px solid var(--ink);
  padding:26px 22px;
  background:var(--bg);
  box-shadow: 6px 6px 0 var(--ink);
}
.why-card:nth-child(2){ transform:rotate(1.4deg); }
.why-card:nth-child(1){ transform:rotate(-1deg); }
.why-card:nth-child(3){ transform:rotate(1deg); }

.why-card .num{
  display:inline-block;
  background:var(--ink);
  color:var(--lime);
  font-family:'Space Mono',monospace;
  font-weight:700;
  padding:2px 9px;
  margin-bottom:14px;
}

.why-card h3{
  font-size:19px;
  margin:0 0 10px;
}
.why-card p{
  margin:0;
  font-size:15px;
  color:#333;
}

/* ---------- articles ---------- */

.article-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:28px;
}

.article-card{
  border:4px solid var(--ink);
  background:var(--bg);
  padding:0;
  overflow:hidden;
  box-shadow: 7px 7px 0 var(--ink);
}

.article-card .a-top{
  background:var(--ink);
  color:var(--bg);
  padding:10px 18px;
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.article-card .a-body{
  padding:24px 22px 26px;
}

.article-card h3{
  font-size:21px;
  line-height:1.25;
  margin:0 0 12px;
}

.article-card p{
  font-size:15px;
  color:#333;
  margin:0 0 18px;
}

.read-link{
  font-family:'Space Mono',monospace;
  font-weight:700;
  text-decoration:none;
  border-bottom:3px solid var(--lime);
  padding-bottom:2px;
}
.read-link:hover{ border-bottom-color:var(--ink); }

/* ---------- cta band ---------- */

.cta-band{
  background:var(--ink);
  color:var(--bg);
  padding:60px 0;
  text-align:center;
}
.cta-band h2{
  font-size:32px;
  margin:0 0 18px;
  color:var(--lime);
}
.cta-band p{
  margin:0 0 30px;
  color:#ddd;
  font-size:16px;
}
.cta-band .btn{
  box-shadow: 6px 6px 0 var(--lime);
}
.cta-band .btn:hover{
  box-shadow: 3px 3px 0 var(--lime);
}

/* ---------- footer ---------- */

footer.site-footer{
  padding:34px 0 44px;
  font-size:13px;
  color:#444;
}
footer.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
footer.site-footer a{
  color:#444;
  text-decoration:underline;
  margin-left:14px;
}
footer.site-footer .fmark{
  font-family:'Space Mono',monospace;
}

/* ---------- article page ---------- */

.article-page{
  padding:50px 0 70px;
}
.article-page .breadcrumb{
  font-family:'Space Mono',monospace;
  font-size:13px;
  margin-bottom:22px;
  display:inline-block;
}
.article-page .breadcrumb a{ text-decoration:none; border-bottom:2px solid var(--lime); }

.article-page h1{
  font-size:38px;
  line-height:1.15;
  margin:0 0 20px;
  max-width:22ch;
}

.article-page .meta{
  font-family:'Space Mono',monospace;
  font-size:13px;
  color:#555;
  margin-bottom:34px;
  border-bottom:4px solid var(--ink);
  padding-bottom:24px;
}

.article-body{
  max-width:70ch;
  font-size:17px;
}
.article-body h2{
  font-size:23px;
  margin:38px 0 14px;
  padding-left:14px;
  border-left:6px solid var(--lime);
}
.article-body p{ margin:0 0 18px; }
.article-body ul{ margin:0 0 18px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body strong{ background:var(--lime); padding:0 4px; }

.pullquote{
  border:3px solid var(--ink);
  background:var(--gray);
  padding:20px 22px;
  margin:28px 0;
  font-family:'Space Mono',monospace;
  font-size:15px;
  transform:rotate(-1deg);
}

.back-cta{
  margin-top:44px;
  padding-top:34px;
  border-top:4px solid var(--ink);
}

/* ---------- legal pages ---------- */

.legal-page{
  padding:50px 0 70px;
  max-width:74ch;
  margin:0 auto;
}
.legal-page h1{ font-size:32px; margin-bottom:8px; }
.legal-page .updated{
  font-family:'Space Mono',monospace;
  font-size:13px;
  color:#555;
  margin-bottom:34px;
}
.legal-page h2{
  font-size:19px;
  margin:32px 0 10px;
  border-bottom:3px solid var(--ink);
  padding-bottom:6px;
}
.legal-page p, .legal-page li{ font-size:15px; color:#222; }
.legal-page ul{ padding-left:20px; }

/* ---------- responsive ---------- */

@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ min-height:220px; margin-top:20px; }
  .stat-card.c1{ right:0; top:0; }
  .stat-card.c2{ right:auto; left:0; top:90px; }
  .stat-card.c3{ right:0; top:190px; }
  .why-grid{ grid-template-columns:1fr; }
  .article-grid{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:38px; }
}

@media (max-width: 520px){
  .wrap{ padding:0 16px; }
  .hero{ padding:44px 0 40px; }
  .article-page h1{ font-size:28px; }
  footer.site-footer .wrap{ flex-direction:column; align-items:flex-start; }
  footer.site-footer a{ margin-left:0; margin-right:14px; }
}