:root {
  --ink:#101820;
  --muted:#607080;
  --line:#e7eaf0;
  --paper:#fff;
  --soft:#f6f8fb;
  --pink:#ff3f68;
  --orange:#ff7b22;
  --green:#10a86b;
  --blue:#1479ff;
  --purple:#7d4dff;
  --red:#f0253d;
  --gold:#f7a900;
  --shadow:0 14px 40px rgba(16,24,32,.10);
  --radius:24px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#fff 72%,#fff7f8 100%);
}
a { color:inherit; }
.skip {
  position:absolute;
  left:-9999px;
}
.skip:focus {
  left:16px; top:16px; z-index:99;
  background:#fff; padding:10px 14px; border-radius:10px;
}

.site-header {
  position:sticky; top:0; z-index:50;
  display:flex; gap:24px; align-items:center; justify-content:space-between;
  padding:12px clamp(14px,4vw,48px);
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; font-size:clamp(18px,2.2vw,28px); font-weight:800;
  white-space:nowrap;
}
.brand strong { color:var(--pink); }
.brand-mark { font-size:1.2em; }
.quick-nav {
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
}
.quick-nav::-webkit-scrollbar { display:none; }
.quick-nav a {
  flex:none; text-decoration:none; font-weight:750; font-size:14px;
  padding:9px 12px; border-radius:999px; background:var(--soft);
}
.quick-nav a:hover { background:#eef2f7; }

main { width:min(1180px, calc(100% - 24px)); margin:18px auto 0; }

.hero {
  position:relative; overflow:hidden; border-radius:30px; min-height:420px;
  box-shadow:var(--shadow); background:#111;
}
.hero img {
  display:block; width:100%; height:100%; min-height:420px;
  object-fit:cover; object-position:center;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.24) 52%,rgba(0,0,0,.08));
}
.hero-overlay {
  position:absolute; z-index:2; inset:auto auto 0 0;
  width:min(620px,92%); padding:clamp(24px,5vw,54px);
  color:#fff;
}
.eyebrow {
  display:inline-block; margin:0 0 10px; padding:7px 10px;
  border-radius:999px; font-weight:800; background:rgba(255,63,104,.94);
}
.hero h1 { margin:0; font-size:clamp(38px,7vw,78px); line-height:.95; letter-spacing:-.04em; }
.hero p:not(.eyebrow) { max-width:560px; font-size:clamp(16px,2vw,21px); line-height:1.5; }
.hero-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.hero-links a {
  text-decoration:none; font-weight:850; padding:13px 17px; border-radius:14px;
  background:#fff; color:#111;
}
.hero-links a.secondary { color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); }

.intro-strip {
  margin:18px 0 6px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.intro-strip span {
  padding:14px; border-radius:16px; background:#fff; border:1px solid var(--line);
  text-align:center; font-weight:800; box-shadow:0 8px 20px rgba(16,24,32,.05);
}

.deal-sections { padding:8px 0 0; }
.deal-section { scroll-margin-top:92px; padding:28px 0 4px; }
.section-head {
  display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px;
}
.section-head h2 { margin:0; font-size:clamp(27px,4vw,42px); letter-spacing:-.03em; }
.section-head p { margin:0; color:var(--muted); font-weight:650; }
.deal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.deal-card {
  min-height:176px; display:flex; flex-direction:column; justify-content:space-between;
  padding:18px; border:1px solid var(--line); border-radius:22px; background:#fff;
  box-shadow:0 8px 28px rgba(16,24,32,.07);
  transition:.18s ease;
}
.deal-card.active:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,24,32,.12); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.icon {
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:14px; font-size:24px; background:var(--soft);
}
.pill {
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
  padding:6px 9px; border-radius:999px; background:#fff2f5; color:#d91f49;
}
.deal-card h3 { margin:20px 0 4px; font-size:25px; letter-spacing:-.02em; }
.deal-card .micro { color:var(--muted); font-size:14px; font-weight:650; }
.deal-link {
  margin-top:18px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 14px; border-radius:14px; text-decoration:none;
  font-weight:900; color:#fff; background:var(--ink);
}
.deal-card.pending { background:#fbfcfe; }
.deal-card.pending .deal-link {
  color:#7a8795; background:#edf1f5; pointer-events:none;
}
.deal-card.pending .pill { color:#667; background:#eef1f5; }

.deal-section[data-accent="blue"] .active .deal-link { background:var(--blue); }
.deal-section[data-accent="orange"] .active .deal-link { background:var(--orange); }
.deal-section[data-accent="green"] .active .deal-link { background:var(--green); }
.deal-section[data-accent="purple"] .active .deal-link { background:var(--purple); }
.deal-section[data-accent="red"] .active .deal-link { background:var(--red); }
.deal-section[data-accent="gold"] .active .deal-link { background:var(--gold); color:#111; }
.deal-section[data-accent="pink"] .active .deal-link { background:var(--pink); }

.sponsored {
  margin:34px 0; padding:24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-radius:24px;
  background:linear-gradient(135deg,#131722,#2b203f);
  color:#fff;
}
.sponsored h2 { margin:6px 0; font-size:30px; }
.sponsored p { margin:0; color:#d8dce4; }
.sponsored-label {
  display:inline-block; padding:5px 9px; font-size:11px; font-weight:900;
  border-radius:999px; color:#111; background:#fff;
  text-transform:uppercase; letter-spacing:.08em;
}
.sponsored-button {
  flex:none; text-decoration:none; color:#111; background:#fff;
  font-weight:900; padding:14px 18px; border-radius:14px;
}

footer {
  margin-top:34px; padding:34px max(18px,calc((100vw - 1180px)/2));
  border-top:1px solid var(--line); background:#fff;
}
footer p { margin:6px 0; }
.disclosure { color:var(--muted); font-size:13px; }

@media (max-width: 840px) {
  .site-header { align-items:flex-start; flex-direction:column; gap:8px; padding-top:10px; }
  .quick-nav { width:100%; }
  main { width:min(100% - 16px,1180px); margin-top:10px; }
  .hero, .hero img { min-height:540px; }
  .hero img { object-position:58% center; }
  .hero::after { background:linear-gradient(0deg,rgba(0,0,0,.76),rgba(0,0,0,.12) 72%); }
  .hero-overlay { width:100%; padding:24px; }
  .intro-strip { grid-template-columns:1fr; }
  .deal-grid { grid-template-columns:1fr; }
  .section-head { align-items:flex-start; flex-direction:column; gap:3px; }
  .sponsored { align-items:flex-start; flex-direction:column; }
  .sponsored-button { width:100%; text-align:center; }
}