:root{
  --brand:#7e0d5a;
  --brand-2:#c41f7a;
  --ink:#1f2937;
  --bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:10}
.header img{height:56px;width:auto}
.header nav{margin-left:auto;display:flex;gap:18px;font-weight:600}
.hero{position:relative;isolation:isolate}
.hero img{width:100%;height:56svh;object-fit:cover;display:block;filter:grayscale(20%)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(120deg, #00000066, #7e0d5a66);z-index:1}
.hero .content{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:#fff;padding:24px}
.hero h1{font-size:clamp(28px,7vw,56px);margin:0 0 12px}
.hero p{font-size:clamp(16px,3vw,22px);opacity:.95}
.section{padding:56px 0;border-top:1px solid #f1f1f1}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.card{grid-column:span 4;background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px #0000000d}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card .p{padding:16px}
.badge{display:inline-block;background:#f6e7f1;color:var(--brand);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em}
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:28px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta a{background:#fff;color:var(--brand);padding:10px 16px;border-radius:10px;font-weight:700}
footer{padding:24px;text-align:center;color:#6b7280}
@media (max-width:900px){
  .card{grid-column:span 6}
}
@media (max-width:640px){
  .grid{gap:16px}
  .card{grid-column:span 12}
}