:root{
  --brand:#d90429; --brand-2:#ef233c; --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:1.2rem}

header.site{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;border-bottom:4px solid #fff;box-shadow:0 8px 26px rgba(217,4,41,.25)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:900;font-size:1.15rem}
.brand .logo{width:34px;height:34px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand);box-shadow:0 3px 10px rgba(0,0,0,.15)}
.brand a{color:#fff;text-decoration:none}
.nav a{color:#fff;text-decoration:none;opacity:.95;padding:.35rem .55rem;border-radius:10px}
.nav a:hover{opacity:1;background:rgba(255,255,255,.12)}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.6rem 0}
.hero h1{font-size:2.2rem;margin:.3rem 0 .4rem}
.hero p{color:#5b677a;max-width:720px;margin:0 auto 1rem;font-size:1.1rem}
.search{max-width:560px;width:100%;display:flex;gap:.6rem;margin:.6rem auto 0}
.input{border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;width:100%;font-size:1rem}
.btn{border:1px solid var(--brand);color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:12px;padding:.7rem 1rem;font-weight:800;box-shadow:0 6px 14px rgba(217,4,41,.25);cursor:pointer}
.btn.secondary{background:#fff;color:var(--brand)}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem;box-shadow:0 12px 30px rgba(15,23,42,.06)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid3{grid-template-columns:1fr}}

.hcard{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:16px;padding:1rem;background:#fff;position:relative;overflow:hidden}
.hicon{font-size:1.4rem}
.htext{display:flex;flex-direction:column;gap:.2rem}
.hlink{font-weight:900;color:var(--ink);text-decoration:none}
.hlink:hover{color:var(--brand)}
.badge{position:absolute;top:10px;right:10px;background:#fff;color:var(--brand);border:1px solid var(--brand);padding:.25rem .5rem;border-radius:999px;font-weight:800;font-size:.8rem}

.countdown{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:1rem 0}
.tile{min-width:120px;border:2px solid var(--brand);border-radius:14px;padding:.9rem .8rem;background:linear-gradient(180deg,#fff,#fff 60%,#fff0)}
.num{font-size:2.2rem;font-weight:900;line-height:1;color:var(--brand)}
.lbl{font-size:.9rem;color:var(--muted);letter-spacing:.3px}
.progress{height:10px;border-radius:999px;background:#fde2e4;border:1px solid #f8b4bb;overflow:hidden;margin-top:.5rem}
.progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2))}

.hero-holiday{display:grid;gap:10px;place-items:center;text-align:center;padding:1.8rem 0}
.hero-holiday h1{font-size:2.2rem;margin:.2rem 0 .4rem 0}
.hero-holiday p{color:#5b677a}

.actions{display:flex;gap:.6rem;justify-content:center;margin-top:.8rem}
.share{display:flex;gap:.5rem;justify-content:center;margin-top:.8rem}
.share a{border:1px dashed var(--line);padding:.4rem .6rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.share a:hover{border-color:var(--brand);color:var(--brand)}

footer{margin-top:2rem;border-top:1px solid var(--line);background:#fff}
.footer-inner{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;padding:1.2rem 0;color:var(--muted)}
.footer-inner a{color:var(--muted);text-decoration:none}
.footer-inner a:hover{color:var(--brand)}


/* --- Header polish --- */
header.site{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;border-bottom:0;
  box-shadow:0 12px 28px rgba(217,4,41,.28)
}
.header-inner{padding:1rem 0}
.nav a{position:relative;}
.nav a::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-2px;height:2px;background:rgba(255,255,255,0);border-radius:2px;transition:background .2s ease;}
.nav a:hover::after{background:rgba(255,255,255,.9)}

/* --- Footer polish --- */
footer{margin-top:2.2rem;background:#fff;border-top:1px solid var(--line)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.2rem;align-items:start}
.footer-col h4{margin:.2rem 0 .4rem 0;font-size:1rem;color:var(--ink)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.3rem 0}
.footer-col a{color:var(--muted);text-decoration:none}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line);color:var(--muted);font-size:.95rem}
@media (max-width:800px){.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.5rem;align-items:flex-start}}

/* Brand tweaks */
.brand .logo{width:36px;height:36px;border-radius:12px}
.brand a{font-weight:900;letter-spacing:.2px}

/* Footer button-style links (applies to ALL footer columns) */


/* Keep list structure tight in footer */
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.25rem 0}

/* === Footer grid + button styles (Site 24/25 style) === */
footer{margin-top:2rem;background:#fff;border-top:1px solid var(--line)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.2rem;align-items:start}
.footer-col h4{margin:.2rem 0 .4rem 0;font-size:1rem;color:var(--ink)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.35rem 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line);color:var(--muted);font-size:.95rem}
@media (max-width:800px){.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.5rem;align-items:flex-start}}

/* Footer button-style links (apply to all footer columns) */



/* Footer simple underline link style */
.footer-col a {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 500;
}
.footer-col a:hover {
  color: var(--brand);
}