:root {
  --bg1:#0f4c75; --bg2:#3282b8; --bg3:#bbe1fa;
  --gold:#ffd700; --cream:#ffe4b5; --ever:#2d5016; --cran:#c41e3a; --glass:rgba(255,255,255,.15);
}
* {margin:0; padding:0; box-sizing:border-box}
html, body {min-height:100%}
body {
  font-family: system-ui, sans-serif;
  background: linear-gradient(45deg,var(--bg1),var(--bg2),var(--bg3));
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color:#fff; overflow-x:hidden; position:relative;
}
@keyframes gradientShift {0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

header {text-align:center; padding:2.5rem 1rem .5rem}
.title {font-size:clamp(2rem, 5vw, 3.5rem); text-shadow: 3px 3px 6px rgba(0,0,0,.45)}
.subtitle {color: var(--cream); margin-top:.35rem}

.container {max-width:1200px; margin:0 auto; padding:1.5rem; z-index:1}

.countdown {display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin:2rem 0}
.unit {background:var(--glass); padding:1rem; border-radius:12px; text-align:center}

.hero-cta {display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:.75rem}
.btn {background:linear-gradient(45deg,var(--cran), #ff6b6b); color:#fff; padding:10px 20px; border-radius:20px; text-decoration:none; font-weight:700}
.btn.ghost {background:transparent; border:2px solid var(--gold)}

.grid {display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:1rem}
.card {background:#fff; color:#111; border-radius:12px; overflow:hidden}
.card img {width:100%; height:180px; object-fit:cover}
.card .c-body {padding:1rem}
.price {font-weight:800; margin:.35rem 0 .6rem}
.a-btn {display:inline-block; background:linear-gradient(45deg,#228b22,#53b453); color:#fff; padding:8px 14px; border-radius:8px; text-decoration:none}

.ad-slot {display:flex; align-items:center; justify-content:center; text-align:center; border:2px dashed #ccc; background:#fffef6}

footer {text-align:center; padding:2rem; color:#eaf6ff}
.legal {font-size:.85rem; opacity:.9}

.visually-hidden {position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}