:root {
  --sbi-blue:#2e278a;
  --sbi-cyan:#08a9df;
  --festive:#8d235e;
  --festive-deep:#681741;
  --gold:#f7bd16;
  --gold-2:#ffcf3f;
  --cream:#fff8ea;
  --ink:#24213a;
  --muted:#6c6876;
  --line:#eee8e2;
  --card:#ffffff;
}
* { 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:#faf8f7;
}
a { color:inherit; }
.top-strip {
  height:4px;
  background:linear-gradient(90deg,var(--sbi-blue) 0 50%,var(--sbi-cyan) 50% 100%);
}
.header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(36,33,58,.08);
}
.nav {
  max-width:1280px; margin:auto; padding:11px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.sbi-logo { width:142px; height:auto; display:block; }
.nav-cta {
  text-decoration:none; background:var(--sbi-blue); color:#fff; font-weight:750;
  padding:11px 18px; border-radius:999px; font-size:13px;
}
.hero-shell { background:#fff; }
.hero-banner {
  width:100%;
  display:block;
  background:#20b1df;
  overflow:hidden;
}
.hero-picture {
  display:block;
  width:100%;
}
.hero-banner img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

/* Desktop: banner-d.jpg (1920 × 426) */
@media (min-width:1025px) {
  .hero-banner img {
    aspect-ratio:1920 / 426;
    object-fit:cover;
  }
}

/* Tablet: banner-t.jpg (1024 × 450) */
@media (min-width:601px) and (max-width:1024px) {
  .hero-banner img {
    aspect-ratio:1024 / 450;
    object-fit:cover;
  }
}

/* Mobile: banner-m.jpg (480 × 432) */
@media (max-width:600px) {
  .hero-banner img {
    aspect-ratio:480 / 432;
    object-fit:cover;
  }
}
.section {
  position:relative;
  overflow:hidden;
  max-width:1180px; margin:auto; padding:54px 24px 70px;
}
.section::before {
  position:absolute;
  left:-50px;
  top:45px;
  font-family:Georgia,serif;
  font-size:180px;
  color:rgba(141,35,94,.025);
  pointer-events:none;
}
.section::after {
  content:"✦  ❈  ✦";
  position:absolute;
  right:-10px;
  bottom:35px;
  font-size:22px;
  letter-spacing:12px;
  color:rgba(247,189,22,.13);
  pointer-events:none;
}
.section-head {
  display:flex; justify-content:center; align-items:center; gap:20px; margin-bottom:22px;
}
.kicker {
  color:var(--festive); font-size:12px; font-weight:850; letter-spacing:1.8px;
  text-transform:uppercase;
  text-align:center;
}
.section h2 {
  margin:6px 0 0; font-size:clamp(27px,4vw,42px); line-height:1.1; letter-spacing:-1.3px; text-align:center;;
}
.section-intro { margin:7px 0 0; color:var(--muted); max-width:650px; line-height:1.6; text-align:center; }
.count { color:var(--muted); font-size:13px; white-space:nowrap; }
.toolbar {
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;
}
.search {
  flex:1 1 260px; min-width:220px; border:1px solid var(--line); background:#fff;
  border-radius:13px; padding:13px 15px; outline:none; font-size:14px;
}
.filter {
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:10px 14px; font-weight:700; cursor:pointer;
}
.filter.active { background:var(--festive); color:#fff; border-color:var(--festive); }
.offers {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.festive-divider {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 0 24px; color:var(--gold);
}
.festive-divider i {
  width:92px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.festive-divider span { font-size:16px; line-height:1; }

.offer-card {
  background:#fff;
  border:1px solid rgba(141,35,94,.14);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:400px;
  box-shadow:0 6px 22px rgba(52,31,49,.07);
  transition:transform .22s ease, box-shadow .22s ease;
  position:relative;
}
.offer-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--festive),var(--gold),var(--festive));
}
.offer-card::after {
  content:"";
  position:absolute;
  right:-22px;
  top:-22px;
  width:72px;
  height:72px;
  border-radius:50%;
  border:1px solid rgba(247,189,22,.22);
  box-shadow:0 0 0 8px rgba(247,189,22,.035),0 0 0 16px rgba(141,35,94,.025);
  pointer-events:none;
}
.offer-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 34px rgba(104,23,65,.13);
}

.offer-logo-wrap {
  height:126px;
  margin:17px 17px 0;
  border-radius:13px;
  background:#fff;
  border:1px solid #eee;
  display:grid;
  place-items:center;
  padding:15px 20px;
  position:relative;
  overflow:hidden;
}
.offer-logo-wrap::before {
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid rgba(247,189,22,.14);
  left:-70px;
  top:-60px;
}
.offer-logo-wrap::after {
  content:"✦";
  position:absolute;
  right:12px;
  bottom:9px;
  color:var(--gold);
  opacity:.65;
  font-size:12px;
}
.offer-logo {
  max-width:88%;
  max-height:88px;
  width:auto;
  height:auto;
  object-fit:contain;
  position:relative;
  z-index:1;
}

.offer-body {
  padding:16px 18px 18px;
  display:flex;
  flex:1;
  flex-direction:column;
  position:relative;
}
.offer-body::before {
  content:"❈";
  position:absolute;
  right:17px;
  top:12px;
  color:rgba(141,35,94,.18);
  font-size:17px;
}
.offer-title {
  color:var(--festive);
  font-size:19px;
  line-height:1.3;
  font-weight:850;
  padding-right:25px;
}
.offer-details {
  margin-top:10px;
  color:#5c5864;
  font-size:15px;
  line-height:1.65;
}
.detail { margin-top:2px; }

.offer-validity {
  margin-top:auto;
  padding-top:13px;
  border-top:1px dashed rgba(141,35,94,.22);
  color:#77717b;
  font-size:13.5px;
  display:flex;
  align-items:center;
  gap:7px;
}
.calendar-dot {
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff8df;
  color:var(--festive);
  display:grid;
  place-items:center;
  font-weight:900;
  border:1px solid rgba(247,189,22,.45);
}
.offer-cta {
  margin-top:13px;
  text-decoration:none;
  background:var(--festive);
  color:#fff;
  border-radius:10px;
  padding:11px 14px;
  font-size:13px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(104,23,65,.12);
}
.offer-cta:hover { background:#731948; }

.note {
  margin-top:34px; padding:18px 20px; border-radius:16px; background:#fff;
  border:1px solid var(--line); color:#706b73; font-size:12px; line-height:1.65;
}
.footer {
  background:#211d3b;
  color:#d9d6e2;
  padding:34px 24px;
}

.footer-inner {
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:50px;
  width:100%;
}

.footer-disclaimer {
  flex:1 1 auto;
  min-width:0;
  max-width:900px;
}

.footer strong { color:#fff; }
.footer small { color:#aaa6b5; line-height:1.6; }

.footer-logo {
  width:142px;
  height:auto;
  display:block;
  margin-bottom:2px;
}

.social-area {
  flex:0 0 180px;
  margin-left:auto;
  padding-top:4px;
  text-align:right;
}

.social-title {
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:600;
  margin-bottom:11px;
}

.social-icons {
  display:flex;
  justify-content:flex-end;
  gap:9px;
}

.social-icon {
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.06);
  font-weight:800;
  font-size:14px;
  transition:.2s ease;
}

.social-icon img {
  width:30px;
  height:30px;
  display:block;
  object-fit:contain;
}

.social-icon.linkedin { font-size:11px; letter-spacing:-.5px; }
.social-icon.instagram { font-size:20px; font-weight:400; }
.social-icon:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-2px);
}

@media(max-width:900px) {
  .offers { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .footer-inner {
    gap:32px;
  }
  .footer-disclaimer {
    max-width:none;
  }
}

@media(max-width:600px) {
  .nav { padding:12px 16px; }
  .sbi-logo { width:126px; }
  .nav-cta { padding:9px 13px; font-size:12px; }
  .section { position:relative; overflow:hidden; padding:38px 16px 50px; }
  .section-head { align-items:center; flex-direction:column; }
  .offers { grid-template-columns:1fr; }
  .offer-card { min-height:365px; }

  .footer {
    padding:28px 16px;
  }

  .footer-inner {
    flex-direction:column;
    align-items:stretch;
    gap:24px;
  }

  .footer-disclaimer {
    width:100%;
    text-align:left;
  }

  .social-area {
    flex:0 0 auto;
    width:100%;
    margin-left:0;
    padding-top:0;
    text-align:left;
  }

  .social-icons {
    justify-content:flex-start;
  }
}

/* Offer category tabs */
.offer-tabs {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:0 0 28px;
  border-bottom:1px solid var(--line);
}
.offer-tab {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:13px 22px;
  font:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.offer-tab:hover {
  color:var(--festive);
  background:rgba(141,35,94,.04);
}
.offer-tab.active {
  color:var(--festive);
  border-bottom-color:var(--gold);
}
.offer-tab-panel[hidden] { display:none; }
.offer-tab-panel.active { display:block; }

/* Hyperlocal offers table */
.table-wrap {
  width:100%;
  overflow-x:auto;
  background:#fff;
  border:1px solid rgba(141,35,94,.14);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(52,31,49,.07);
}
.hyperlocal-table {
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.5;
}
.hyperlocal-table th {
  background:var(--festive);
  color:#fff;
  text-align:left;
  padding:14px 15px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  position:sticky;
  top:0;
  z-index:1;
}
.hyperlocal-table td {
  padding:13px 15px;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  color:#514d59;
}
.hyperlocal-table tbody tr:last-child td { border-bottom:0; }
.hyperlocal-table tbody tr:nth-child(even) { background:#fffcf8; }
.hyperlocal-table tbody tr:hover { background:#fff6e9; }
.hyperlocal-table td:first-child,
.hyperlocal-table td:nth-child(2) {
  color:var(--ink);
  font-weight:750;
}
.hyperlocal-table td:first-child { white-space:nowrap; }
.hyperlocal-table td:nth-child(2) { min-width:190px; }
.hyperlocal-table td:nth-child(3) { white-space:nowrap; }
.hyperlocal-table td:nth-child(4) { min-width:310px; }
.hyperlocal-table td:nth-child(5) { min-width:260px; }

@media(max-width:600px) {
  .offer-tabs {
    justify-content:flex-start;
    overflow-x:auto;
    margin-bottom:22px;
    gap:2px;
    scrollbar-width:none;
  }
  .offer-tabs::-webkit-scrollbar { display:none; }
  .offer-tab {
    flex:0 0 auto;
    padding:12px 14px;
    font-size:13px;
  }
  .table-wrap {
    border-radius:14px;
    overflow:visible;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .hyperlocal-table,
  .hyperlocal-table tbody,
  .hyperlocal-table tr,
  .hyperlocal-table td {
    display:block;
    width:100%;
  }
  .hyperlocal-table {
    min-width:0;
    font-size:13px;
  }
  .hyperlocal-table thead { display:none; }
  .hyperlocal-table tr {
    margin-bottom:14px;
    background:#fff;
    border:1px solid rgba(141,35,94,.14);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(52,31,49,.06);
  }
  .hyperlocal-table tbody tr:nth-child(even),
  .hyperlocal-table tbody tr:hover { background:#fff; }
  .hyperlocal-table td {
    min-width:0 !important;
    padding:9px 13px 9px 42%;
    position:relative;
    border-bottom:1px solid var(--line);
    min-height:42px;
  }
  .hyperlocal-table td:last-child { border-bottom:0; }
  .hyperlocal-table td::before {
    content:attr(data-label);
    position:absolute;
    left:13px;
    top:9px;
    width:35%;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
  }
  .hyperlocal-table td:first-child { white-space:normal; }
}