:root{
  --suss-red:#E23224;        /* brand red */
  --off-white:#F7F3E8;       /* warm paper */
  --ink:#141414;             /* deep black */
  --cream:#FFF8EE;
  --bolt:#F9C301;            /* lightning pop */
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--off-white);
  line-height:1.4;
}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; max-width:1100px; margin:0 auto;
}
.brand{
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight:700; font-size:28px; letter-spacing:.2px;
  color:var(--ink); text-decoration:none; text-transform:lowercase;
}
.brand span{ color:var(--suss-red); }

.nav .btn{ margin-left:12px; }

.btn{
  display:inline-block; text-decoration:none; color:#fff;
  background:var(--suss-red); padding:12px 18px; border-radius:999px;
  font-weight:600; transition:transform .08s ease, opacity .2s;
}
.btn:hover{ transform:translateY(-1px); opacity:.95 }
.btn-light{ background:#fff; color:var(--ink); }
.btn-big{ padding:16px 28px; font-size:18px }

.hero{
  position:relative; background:var(--suss-red); color:#fff;
  border-radius:32px; margin:18px auto; max-width:1100px; overflow:hidden;
}
.hero-inner{
  padding:72px 28px 64px; text-align:center;
}
.hero h1{
  font-family:"Fraunces", Georgia, serif; text-transform:lowercase;
  font-size:56px; line-height:1; margin:0 0 10px;
}
.tag{ margin:0 auto 24px; max-width:700px; opacity:.95 }

.hero-badge{
  position:absolute; right:18px; bottom:16px; display:flex; gap:8px;
  align-items:center; font-weight:600; background:rgba(255,255,255,.1);
  padding:8px 12px; border-radius:999px; backdrop-filter:saturate(140%) blur(4px);
}
.bolt{ color:var(--bolt) }

.grid{
  display:grid; gap:14px; grid-template-columns:repeat(3,1fr);
  max-width:1100px; margin:22px auto; padding:0 2px;
}
.card{
  background:#fff; border:1px solid #eee; border-radius:var(--radius);
  padding:22px;
}
.card h2{
  font-family:"Fraunces", Georgia, serif; text-transform:lowercase;
  margin:0 0 8px; font-size:28px; color:var(--ink);
}

.cta{
  text-align:center; margin:36px 0 18px;
}
.cta .small{ margin-top:10px; font-size:14px }
.cta .small a{ color:var(--ink) }

.site-footer{
  text-align:center; padding:30px 0 50px; color:#666;
}

@media (max-width:840px){
  .grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:44px }
}