/* ============================================================
   FloorLo — Complete Stylesheet
   Design: Premium editorial meets mobile-app utility
   Fonts: Playfair Display (display) + Manrope (body)
   ============================================================ */

:root {
  --primary: #069a9a;
  --primary-dk: #047272;
  --primary-soft: #e6fffb;
  --accent: #FF6B35;
  --accent2: #FFD93D;
  --dark: #0f172a;
  --dark2: #10152d;
  --muted: #8b8f98;
  --body-bg: #f7f4ef;
  --white: #ffffff;
  --card-bg: #ffffff;
  --shadow-sm: 0 4px 16px rgba(15, 23, 42, .07);
  --shadow: 0 10px 36px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .15);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-xl: 36px;
  --max: 1200px;
  --mob-max: 430px;
  --header-h: 76px;
  --mob-header-h: 148px;
}

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at 8% 4%, rgba(6, 154, 154, .08), transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(255, 107, 53, .07), transparent 24%),
    var(--body-bg);
  color: var(--dark);
  overflow-x: hidden;
  font-weight: 500;
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: 0;
}

input {
  font-family: inherit;
}

/* ── PAGE LOADER ── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--dark2);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  transition: opacity .4s ease, visibility .4s ease;
}

#page-loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader-bar {
  height: 3px;
  width: 0;
  background: var(--primary);
  animation: loaderBar .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes loaderBar {
  to {
    width: 100%;
  }
}

/* ── FloorLo APP ── */
.floorlo-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.fl-main {
  flex: 1;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 15px;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 8px 24px rgba(6, 154, 154, .35);
}

.btn-primary:hover {
  background: var(--primary-dk);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(6, 154, 154, .4);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 15px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, .25);
  transform: translateY(-2px);
}

/* ── BRAND ── */
.brand-image {
  width: auto;
  height: 58px;
  max-width: 230px;
  object-fit: contain;
}

.footer-brand-image {
  height: 52px;
  max-width: 190px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .16));
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.brand-name {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--primary);
}

.brand-name em {
  font-style: normal;
  color: var(--accent);
}

/* ── SECTION HELPERS ── */
.fl-section {
  max-width: var(--max);
  margin: 72px auto;
  padding: 0 24px;
}

.fl-section-head {
  margin-bottom: 28px;
}

.fl-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.fl-sh-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.06;
}

.fl-sh-sub {
  color: #667085;
  font-size: 15px;
  margin-top: 7px;
  line-height: 1.7;
}

.fl-sh-rule {
  display: inline-block;
  width: 7px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary);
  margin-right: 12px;
  vertical-align: middle;
}

.fl-view-all {
  color: var(--primary);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--primary-soft);
  transition: background .2s;
}

.fl-view-all:hover {
  background: rgba(6, 154, 154, .18);
}

/* ── ANIMATE ON SCROLL ── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}

[data-animate="fade-left"] {
  transform: translateX(30px);
}

[data-animate].in-view {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
  }
}

/* ========================================================
   DESKTOP HEADER
   ======================================================== */
/* The header must be sticky on this wrapper, not on .dh-inner/.mh-bar
   inside it -- those inner bars are exactly as tall as .fl-header itself,
   so a sticky position on them had no room to stick and silently did
   nothing while scrolling. Stick the wrapper against .floorlo-app instead,
   which is tall enough for the effect to actually happen. */
.fl-header {
  position: sticky;
  top: 0;
  z-index: 200;
}

.dh-inner {
  height: var(--header-h);
  padding: 0 6%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(24px);
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 10px 34px rgba(15, 23, 42, .06);
  transition: box-shadow .3s;
}

.dh-inner.scrolled {
  box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
}

.dh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 190px;
  min-width: 150px;
}

.dh-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.dh-link {
  font-weight: 800;
  font-size: 13px;
  color: #343944;
  padding: 6px 4px;
  transition: color .2s;
  position: relative;
}

.dh-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform .25s;
}

.dh-link:hover {
  color: var(--primary);
}

.dh-link:hover::after {
  transform: scaleX(1);
}

.dh-right {
  display: flex;
  align-items: center;
  gap: 14px;
}


.dh-search-wrap {
  width: 260px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(15, 23, 42, .1);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  transition: border-color .2s, box-shadow .2s;
}

.dh-search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 154, 154, .12);
}

.dh-search-ico {
  font-size: 18px;
  color: var(--muted);
}

.dh-search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}

.dh-cta {
  background: linear-gradient(135deg, var(--primary), #0f766e);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  border-radius: 999px;
  padding: 11px 22px;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 12px 28px rgba(6, 154, 154, .24);
}

.dh-cta:hover {
  background: linear-gradient(135deg, var(--primary-dk), #0f766e);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(6, 154, 154, .3);
}

.dh-login {
  color: var(--dark);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 4px;
  white-space: nowrap;
}

.dh-login:hover {
  color: var(--primary);
}

/* Mobile header hidden on desktop */
.mh-bar {
  display: none;
}

.mobile-menu-overlay,
.mobile-side-menu {
  display: none;
}

/* ========================================================
   HERO SECTION
   ======================================================== */
.hero-section {
  overflow: hidden;
}

.dh-hero {
  min-height: 600px;
  padding: 90px 6% 80px;
  background:
    radial-gradient(circle at 76% 14%, rgba(201, 169, 97, .22), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(6, 154, 154, .2), transparent 30%),
    linear-gradient(135deg, #073f44 0%, #0d223f 58%, #0f172a 100%);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.dh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .03) 0, transparent 70%);
}

.dh-hero-copy {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 20px;
}

.dh-hero h1 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: 0;
}

.dh-hero p {
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.85;
  max-width: 560px;
  margin-top: 18px;
}

.hero-btns {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.hs-item strong {
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 26px;
  display: block;
}

.hs-item span {
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
  margin-top: 2px;
}

.hs-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .2);
}

.dh-hero-visual {
  position: relative;
  min-height: 480px;
}

.hero-main-card {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hmc-image {
  height: 260px;
  background: linear-gradient(to bottom, rgba(15, 23, 42, .2), rgba(15, 23, 42, .6)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e9f2f1'/%3E%3Cpath d='M0 230l110-90 70 55 90-75 130 110H0z' fill='%23c7d6d4'/%3E%3Ccircle cx='120' cy='95' r='28' fill='%23c7d6d4'/%3E%3C/svg%3E") center/cover;
}

.hmc-body {
  padding: 22px 24px 24px;
}

.hmc-badge {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 12px;
  display: inline-block;
  margin-bottom: 10px;
}

.hmc-body h3 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: 28px;
}

.hmc-body p {
  color: rgba(255, 255, 255, .7);
  margin-top: 4px;
}

.hmc-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 18px;
}

.hmc-price-row strong {
  color: #2ef0d0;
  font-size: 26px;
  font-family: "Playfair Display", serif;
}

.hmc-price-row del {
  color: rgba(255, 255, 255, .45);
}

.hmc-cta {
  background: #fff;
  color: var(--primary);
  font-weight: 800;
  border-radius: 999px;
  padding: 11px 22px;
  width: 100%;
  transition: background .2s;
}

.hmc-cta:hover {
  background: var(--primary-soft);
}

.hero-float-card {
  position: absolute;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
  border-radius: 20px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .2);
  animation: floatBob 4s ease-in-out infinite;
}

.hero-float-card span {
  font-size: 26px;
}

.hero-float-card strong {
  font-weight: 800;
  font-size: 14px;
  display: block;
  color: var(--dark);
}

.hero-float-card p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.hero-float-card.top-right {
  top: 24px;
  right: -20px;
  animation-delay: 0s;
}

.hero-float-card.bottom-left {
  bottom: 80px;
  left: -28px;
  animation-delay: 1.2s;
}

.hero-float-card.mid-right {
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 2.4s;
}

@keyframes floatBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.hero-float-card.mid-right {
  animation: floatBobMid 4s ease-in-out infinite 2.4s;
}

@keyframes floatBobMid {

  0%,
  100% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% - 8px));
  }
}

/* Mobile banner — hidden on desktop */
.mob-banner-section {
  display: none;
}

/* ========================================================
   CATEGORIES
   ======================================================== */
.cat-desktop-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.cat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px 12px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 40ms);
}

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.cat-ico-wrap {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--c, var(--primary-soft));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 12px;
  transition: transform .25s;
}

.cat-card:hover .cat-ico-wrap {
  transform: scale(1.1);
}

.cat-card strong {
  display: block;
  font-weight: 800;
  font-size: 13px;
}

.cat-card p {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

.cat-mobile-rows {
  display: none;
}

/* ========================================================
   BUDGET-FRIENDLY
   ======================================================== */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.budget-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--g1), var(--g2));
  padding: 32px 24px 28px;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .12), 0 4px 12px color-mix(in srgb, var(--shadow) 30%, transparent);
  transition: transform .25s, box-shadow .25s;
  display: flex;
  align-items: center;
  gap: 16px;
}

.budget-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .18);
}

.bc-shine {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 130%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 50%;
}

.bc-body {
  flex: 1;
}

.bc-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  letter-spacing: 1px;
}

.bc-body h3 {
  font-family: "Playfair Display", serif;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin: 6px 0 8px;
}

.bc-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}

.bc-arrow {
  font-size: 24px;
  color: rgba(255, 255, 255, .7);
}

/* ========================================================
   SMART SAVINGS
   ======================================================== */
.savings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.savings-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid color-mix(in srgb, var(--sc) 20%, transparent);
  transition: transform .2s, box-shadow .2s;
}

.savings-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.sc-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sc) 15%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.savings-card strong {
  font-weight: 800;
  font-size: 14px;
  display: block;
}

.savings-card p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.sc-arrow {
  margin-left: auto;
  color: var(--muted);
}

/* ========================================================
   PROPERTIES
   ======================================================== */
.prop-scroll-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -24px;
  padding: 0 24px;
}

.prop-scroll-wrap::-webkit-scrollbar {
  display: none;
}

.prop-row {
  display: flex;
  gap: 20px;
  padding-bottom: 12px;
}

.prop-card {
  min-width: 300px;
  max-width: 320px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 60ms);
}

.prop-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.pc-image-wrap {
  position: relative;
  height: 210px;
  overflow: hidden;
}

.pc-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.prop-card:hover .pc-image-wrap img {
  transform: scale(1.05);
}

.pc-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 11px;
}

.pc-tag {
  position: absolute;
  top: 14px;
  right: 50px;
  z-index: 2;
  background: rgba(255, 255, 255, .9);
  color: #7a5200;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  border-radius: 999px;
  padding: 4px 9px;
}

.pc-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #dc5b6c;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
  transition: transform .2s;
}

.pc-heart:hover {
  transform: scale(1.15);
}

.pc-body {
  padding: 18px 18px 20px;
}

.pc-body h3 {
  font-family: "Playfair Display", serif;
  font-size: 19px;
  font-weight: 700;
}

.pc-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.pc-prices strong {
  color: var(--primary);
  font-size: 22px;
  font-family: "Playfair Display", serif;
}

.pc-prices del {
  color: #b0b0b0;
  font-size: 13px;
  margin-left: 6px;
}

.pc-cta {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}

.pc-cta:hover {
  background: var(--primary-dk);
  transform: scale(1.1);
}

/* Exclusive Grid */
.exclusive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.ex-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--sh, #000) 30%, transparent);
  transition: transform .3s;
  display: block;
}

.ex-card:hover {
  transform: scale(1.03);
}

.ex-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.ex-card:hover img {
  transform: scale(1.08);
}

.ex-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .88) 0%, rgba(15, 23, 42, .1) 55%, transparent 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ex-cat {
  display: inline-flex;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  width: max-content;
}

.ex-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ex-info h3 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: 18px;
}

.ex-rating {
  color: #FFD93D;
  font-weight: 800;
  font-size: 13px;
}

.ex-overlay>p {
  color: color-mix(in srgb, var(--g1, var(--primary)) 70%, #fff);
  font-size: 18px;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  margin-top: 6px;
}

/* ========================================================
   24HR DISPATCH
   ======================================================== */
.dispatch-section {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 36px 40px;
  box-shadow: var(--shadow-sm);
}

.dispatch-badge-title {
  margin-bottom: 6px;
}

.dispatch-badge {
  background: #1565C0;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  border-radius: 10px;
  padding: 10px 18px;
  display: inline-block;
}

.city-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ct-tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #f4f7f8;
  color: #555;
  border: 1.5px solid transparent;
  transition: all .2s;
}

.ct-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(6, 154, 154, .3);
}

.ct-tab:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}

.dispatch-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dp-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0f0f0;
  transition: transform .2s, box-shadow .2s;
}

.dp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.dp-img-wrap {
  position: relative;
  height: 175px;
  overflow: hidden;
  background: #f8f8f8;
}

.dp-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-badge {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  border-radius: 0 8px 8px 0;
}

.dp-badge.blue {
  background: #1565C0;
}

.dp-badge.green {
  background: #2E7D32;
}

.dp-badge.red {
  background: #C62828;
}

.dp-body {
  padding: 14px 14px 16px;
}

.dp-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.dp-stars {
  background: #2E7D32;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.dp-reviews {
  font-size: 11px;
  color: var(--muted);
}

.dp-body h4 {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
}

.dp-body p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.dp-prices {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

.dp-prices strong {
  font-size: 20px;
  font-family: "Playfair Display", serif;
}

.dp-prices del {
  font-size: 12px;
  color: #b0b0b0;
}

.dp-off {
  font-size: 11px;
  font-weight: 800;
  color: #2E7D32;
}

.dp-actions {
  display: flex;
  gap: 8px;
}

.dp-cart {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f4f7f8;
  font-size: 18px;
  flex-shrink: 0;
  transition: background .2s;
}

.dp-cart:hover {
  background: var(--primary-soft);
}

.dp-buy {
  flex: 1;
  background: #C62828;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border-radius: 10px;
  transition: background .2s;
}

.dp-buy:hover {
  background: #b71c1c;
}

/* ========================================================
   SERVICES
   ======================================================== */
.services-box {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
}

.qg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  padding: 14px 8px;
}

.qg-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--primary) 15%, #fff);
}

.qg-ico {
  font-size: 36px;
}

.qg-item strong {
  display: block;
  font-weight: 800;
  font-size: 13px;
  margin-top: 10px;
}

.qg-item p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.loan-banner {
  background: linear-gradient(135deg, #FF6B35, #FF8E53);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  box-shadow: 0 12px 36px rgba(255, 107, 53, .3);
  animation: pulseShadow 3s ease-in-out infinite;
}

@keyframes pulseShadow {

  0%,
  100% {
    box-shadow: 0 12px 36px rgba(255, 107, 53, .3);
  }

  50% {
    box-shadow: 0 18px 48px rgba(255, 107, 53, .5);
  }
}

.lb-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lb-ico {
  font-size: 44px;
}

.lb-left h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  color: #fff;
}

.lb-left p {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  margin-top: 4px;
}

.lb-cta {
  background: #fff;
  color: #FF6B35;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 24px;
  white-space: nowrap;
  font-size: 15px;
  transition: transform .2s;
}

.lb-cta:hover {
  transform: scale(1.05);
}

.offer-strip {
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  border-radius: var(--radius-lg);
  padding: 20px 26px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 10px 28px rgba(6, 154, 154, .3);
}

.os-left {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.os-ico {
  font-size: 32px;
}

.os-left strong {
  font-size: 17px;
  font-weight: 800;
}

.os-btn {
  background: #fff;
  color: var(--primary);
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 22px;
  transition: transform .2s;
}

.os-btn:hover {
  transform: scale(1.05);
}

/* ========================================================
   SMART HOME
   ======================================================== */
.smart-section {
  background: var(--dark2);
  border-radius: var(--radius-xl);
  padding: 52px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
  overflow: hidden;
  position: relative;
}

.smart-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(6, 154, 154, .2), transparent 70%);
  pointer-events: none;
}

.smart-inner {
  position: relative;
  z-index: 2;
}

.smart-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  margin-bottom: 36px;
}

.smart-eyebrow {
  background: rgba(6, 154, 154, .25);
  color: #2ef0d0;
  border: 1px solid rgba(6, 154, 154, .4);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 14px;
}

.smart-copy h2 {
  font-family: "Playfair Display", serif;
  font-size: 40px;
  color: #fff;
  line-height: 1.1;
}

.smart-copy p {
  color: rgba(255, 255, 255, .65);
  font-size: 16px;
  line-height: 1.7;
  max-width: 440px;
  margin-top: 12px;
}

.smart-copy .btn-primary {
  margin-top: 24px;
  background: var(--primary);
}

.smart-stats-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

.smart-stat {
  text-align: right;
}

.smart-stat strong {
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 28px;
  display: block;
}

.smart-stat span {
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

.smart-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sp-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background .25s, transform .25s;
}

.sp-card:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-4px);
}

.sp-img-wrap {
  position: relative;
  height: 170px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}

.sp-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FFD93D;
  color: #1b1b1b;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
}

.sp-info {
  padding: 16px;
}

.sp-info h4 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: 15px;
}

.sp-info p {
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.5;
}

.sp-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sp-bottom strong {
  color: #fff;
  font-size: 20px;
  font-family: "Playfair Display", serif;
  flex: 1;
}

.sp-delivery {
  font-size: 11px;
  color: #2ef0d0;
  background: rgba(6, 154, 154, .2);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.sp-add {
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .2s;
}

.sp-add:hover {
  background: var(--primary-dk);
}

/* ========================================================
   CONSULTANTS
   ======================================================== */
.con-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.con-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 70ms);
}

.con-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}

.con-img-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.con-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.con-card:hover .con-img-wrap img {
  transform: scale(1.07);
}

.con-avail {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(46, 213, 115, .9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
}

.con-body {
  padding: 18px 18px 22px;
  text-align: center;
}

.con-body h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

.con-title {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.con-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.con-rating {
  font-weight: 800;
  font-size: 13px;
}

.con-exp {
  font-size: 12px;
  color: var(--muted);
  background: #f4f7f8;
  padding: 3px 10px;
  border-radius: 999px;
}

.con-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 10px;
}

.con-tags span {
  font-size: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.con-cta {
  width: 100%;
  margin-top: 16px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  transition: background .2s;
}

.con-cta:hover {
  background: var(--primary-dk);
}

/* ========================================================
   DESIGNS
   ======================================================== */
.style-motion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.sm-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  aspect-ratio: 2/1;
}

.sm-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.sm-card:hover img {
  transform: scale(1.04);
}

.sm-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .8) 0%, rgba(15, 23, 42, .1) 60%, transparent 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sm-tag {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  width: max-content;
  margin-bottom: 10px;
}

.sm-info h3 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: 22px;
}

.sm-info p {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  margin-top: 4px;
}

.sm-info strong {
  color: #FFD93D;
  font-size: 20px;
  font-family: "Playfair Display", serif;
  margin-top: 8px;
  display: block;
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.dg-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 80ms);
}

.dg-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.dg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.dg-card:hover img {
  transform: scale(1.07);
}

.dg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .85) 0%, transparent 55%);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dg-tag {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  width: max-content;
  margin-bottom: 8px;
}

.dg-overlay h3 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: 20px;
}

.dg-overlay p {
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  margin-top: 4px;
}

.dg-price {
  color: #FFD93D;
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
  font-family: "Playfair Display", serif;
  display: block;
}

/* ========================================================
   TRENDING GADGETS
   ======================================================== */
.gadgets-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.gad-card {
  background: var(--gc, var(--dark));
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  transition: transform .25s;
  position: relative;
}

.gad-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .12), transparent 60%);
}

.gad-card:hover {
  transform: translateY(-6px) scale(1.02);
}

.gc-img {
  height: 130px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.gc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gc-body {
  padding: 12px 14px 16px;
}

.gc-body h4 {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.3;
}

.gc-body p {
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  margin-top: 4px;
}

.gc-body strong {
  color: #FFD93D;
  font-size: 16px;
  font-family: "Playfair Display", serif;
  display: block;
  margin-top: 8px;
}

.discount-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.ds-card {
  background: #fce4ec;
  border: 1.5px solid #f8bbd0;
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .25s;
}

.ds-card:hover {
  transform: translateY(-4px);
}

.ds-stars {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 18px;
}

.ds-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 10px;
}

.ds-card h4 {
  font-weight: 800;
  font-size: 14px;
}

.ds-card p {
  font-size: 12px;
  color: #b0454a;
  margin-top: 3px;
}

.ds-card strong {
  color: #c62828;
  font-size: 17px;
  font-family: "Playfair Display", serif;
  display: block;
  margin-top: 6px;
}

/* ========================================================
   FINANCE
   ======================================================== */
.fin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fin-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 70ms);
}

.fin-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.fin-logo-wrap {
  height: 100px;
  background: color-mix(in srgb, var(--lc, #069a9a) 12%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fin-logo-wrap img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.fin-body {
  padding: 18px 18px 22px;
  text-align: center;
}

.fin-body h4 {
  font-family: "Playfair Display", serif;
  font-size: 17px;
}

.fin-rate {
  font-size: 32px;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  color: var(--primary);
  margin-top: 8px;
}

.fin-rate span {
  font-size: 14px;
  color: var(--muted);
}

.fin-offer {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 8px;
}

.fin-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.fin-chips span {
  font-size: 11px;
  background: #f4f7f8;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--dark);
}

.fin-cta {
  width: 100%;
  margin-top: 16px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  transition: background .2s;
}

.fin-cta:hover {
  background: var(--primary-dk);
}

/* ========================================================
   SUPPLIERS
   ======================================================== */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.brand-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff8e1;
  border: 1.5px solid #ffe082;
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: transform .2s;
}

.brand-card:hover {
  transform: translateY(-3px);
}

.brand-img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.brand-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-card strong {
  font-weight: 800;
  font-size: 14px;
  display: block;
}

.brand-card p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.sup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sup-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 60ms);
}

.sup-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.sup-card>img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.sup-body {
  padding: 16px 14px 20px;
}

.sup-body h4 {
  font-family: "Playfair Display", serif;
  font-size: 17px;
}

.sup-body p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.sup-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}

.sup-body button {
  margin-top: 14px;
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 800;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
  transition: all .2s;
}

.sup-body button:hover {
  background: var(--primary);
  color: #fff;
}

/* ========================================================
   FOOTER
   ======================================================== */
.fl-footer {
  position: relative;
  background:
    radial-gradient(circle at 10% 0%, rgba(6, 154, 154, .16), transparent 34%),
    radial-gradient(circle at 92% 15%, rgba(4, 114, 114, .10), transparent 32%),
    linear-gradient(180deg, #e9f4f3 0%, #dcece9 100%);
  border-top: 3px solid var(--primary);
  overflow: hidden;
}

/* Giant faint brand wordmark sitting behind the footer content. */
.df-watermark {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 1;
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(90px, 15vw, 240px);
  line-height: 1;
  color: rgba(20, 32, 52, .045);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* On mobile the footer grows tall (stacked columns + nav clearance), so a
   percentage-based bottom offset pushes the mark out of the visible box.
   Anchor it near the skyline with a fixed offset instead. */
@media (max-width: 768px) {
  .df-watermark {
    bottom: 56px;
    font-size: clamp(56px, 20vw, 130px);
  }
}

@media (max-width: 430px) {
  .df-watermark {
    bottom: 50px;
  }
}

.df-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 34px 24px 22px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.5fr;
  gap: 26px;
  position: relative;
  z-index: 2;
}

.df-brand-col {
  position: relative;
}

/* Very light multi-hue tint sitting behind the logo -- a soft ambient
   reflection, not a colored patch, so it stays subtle. */
.df-logo-glow {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 220px;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(6, 154, 154, .10), transparent 55%),
    radial-gradient(circle at 70% 35%, rgba(232, 187, 50, .08), transparent 55%),
    radial-gradient(circle at 45% 75%, rgba(220, 91, 108, .06), transparent 55%);
  filter: blur(6px);
}

.df-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.df-brand .brand-name {
  color: var(--primary);
}

.df-brand-col p {
  color: #5c6b73;
  line-height: 1.7;
  font-size: 14px;
  max-width: 300px;
}

.df-socials {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.df-socials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e4ded0;
  color: #45575f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  transition: background .2s, color .2s, border-color .2s;
}

.df-socials a:hover {
  background: var(--primary);
  color: #fff;
}

.df-links-col h5 {
  font-family: "Playfair Display", serif;
  color: #142034;
  font-size: 16px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.df-links-col a,
.df-links-col p {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5c6b73;
  font-size: 14px;
  margin-top: 7px;
  line-height: 1.4;
  transition: color .2s;
}

.df-links-col a::before {
  content: "\25B8";
  color: var(--primary);
  font-size: 11px;
  flex: 0 0 auto;
}

.df-links-col a:hover {
  color: var(--primary);
}

.df-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.df-contact-text {
  min-width: 0;
  flex: 1 1 140px;
}

.df-contact-text p,
.df-contact-text a {
  margin-top: 8px;
}

.df-contact-text p:first-child,
.df-contact-text a:first-child {
  margin-top: 0;
}

.df-contact-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 90px;
  margin-top: 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e4ded0;
  box-shadow: 0 6px 16px rgba(20, 32, 52, .08);
  color: var(--primary);
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}

.df-contact-map span {
  font-size: 12px;
  font-weight: 700;
  color: #45575f;
}

.df-contact-map:hover {
  background: #f4faf9;
  transform: translateY(-2px);
}

.df-badge-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.app-badge {
  background: #fff;
  border: 1px solid #e4ded0;
  color: #45575f;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 10px;
}

.df-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 24px;
  border-top: 1px solid #e6e0d2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  color: #7c8b93;
  font-size: 13px;
  position: relative;
  z-index: 2;
}

.df-bottom p {
  margin: 0;
}

/* Decorative skyline band along the very bottom edge of the footer --
   two depth layers plus a scatter of lit windows on the near buildings. */
.df-skyline {
  position: relative;
  z-index: 2;
  height: 96px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 25, 30, .04) 100%);
}

.df-skyline svg {
  display: block;
  width: 100%;
  height: 100%;
}

.df-skyline-back rect {
  fill: #d7e1e0;
}

.df-skyline-front rect {
  fill: #a9bcbb;
}

.df-skyline-windows rect {
  fill: #ffd98a;
  animation: df-twinkle 3.6s ease-in-out infinite;
}

.df-skyline-windows rect:nth-child(2n) {
  animation-delay: .6s;
}

.df-skyline-windows rect:nth-child(3n) {
  animation-delay: 1.3s;
}

.df-skyline-windows rect:nth-child(4n) {
  animation-delay: 2s;
}

.df-skyline-windows rect:nth-child(5n) {
  animation-delay: 2.6s;
}

@keyframes df-twinkle {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: .95;
  }
}

/* A small plane drifts left to right across the skyline's sky, trailing a
   contrail that fades out along its own length (via the gradient stroke
   on the line in the markup) rather than lingering behind it. */
.df-plane {
  opacity: .85;
  animation: df-fly 55s linear infinite;
}

@keyframes df-fly {
  0% {
    transform: translate(-70px, 26px);
  }

  100% {
    transform: translate(1270px, 8px);
  }
}

/* A few small, softly colored birds drifting through the same sky, each
   at its own size/speed/height so they read as a loose flock rather than
   a repeated copy. */
.df-bird {
  opacity: .8;
}

.df-bird-1 {
  animation: df-bird-fly-1 34s linear infinite;
}

.df-bird-2 {
  animation: df-bird-fly-2 41s linear infinite 6s;
}

.df-bird-3 {
  animation: df-bird-fly-3 38s linear infinite 16s;
}

@keyframes df-bird-fly-1 {
  0% {
    transform: translate(-40px, 40px);
  }

  100% {
    transform: translate(1240px, 18px);
  }
}

@keyframes df-bird-fly-2 {
  0% {
    transform: translate(-40px, 22px);
  }

  100% {
    transform: translate(1240px, 44px);
  }
}

@keyframes df-bird-fly-3 {
  0% {
    transform: translate(-40px, 34px);
  }

  100% {
    transform: translate(1240px, 14px);
  }
}

/* Floating back-to-top button. Repositioned on small screens (see media
   query below) so it clears the fixed mobile bottom nav and chat button. */
.df-back-top {
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(6, 154, 154, .45), 0 10px 24px rgba(6, 154, 154, .35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.9);
  transition: transform .2s ease, background .15s ease, opacity .2s ease;
}

.df-back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: df-pulse 2.8s ease-out infinite;
}

.df-back-top:hover {
  background: #057e7e;
  transform: translateY(-2px);
  animation-play-state: paused;
}

@keyframes df-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 154, 154, .45), 0 10px 24px rgba(6, 154, 154, .35);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(6, 154, 154, 0), 0 10px 24px rgba(6, 154, 154, .35);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(6, 154, 154, 0), 0 10px 24px rgba(6, 154, 154, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .df-skyline-windows rect {
    animation: none;
    opacity: .85;
  }

  .df-back-top.is-visible {
    animation: none;
  }

  .df-plane,
  .df-bird {
    animation: none;
    display: none;
  }
}

@media (max-width: 768px) {
  .df-back-top {
    right: 16px;
    bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }
}

/* Mobile nav — hidden on desktop */
.mob-nav {
  display: none;
}

/* Shared hover tooltip for the floating corner buttons (back-to-top, chat). */
[data-tooltip] {
  position: fixed;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: #142034;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
  [data-tooltip]::after {
    display: none;
  }
}

/* ========================================================
   SERVICE DRAWER
   ======================================================== */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  z-index: 280;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}

.drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.service-drawer {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 290;
  transform: translateX(-50%) translateY(110%);
  width: 100%;
  max-width: 430px;
  height: 88vh;
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 10px 20px 32px;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
}

.service-drawer.open {
  transform: translateX(-50%) translateY(0);
}

.drawer-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #d8dce2;
  margin: 0 auto 18px;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.drawer-head h3 {
  font-family: "Playfair Display", serif;
  font-size: 22px;
}

.drawer-head p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f2f4f8;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.drawer-close:hover {
  background: #e5e7eb;
}

.drawer-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  background: #f5f7f9;
  border-radius: 14px;
  padding: 0 14px;
  margin-bottom: 20px;
}

.drawer-search-row input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: 15px;
}

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px 12px;
  border-radius: 18px;
  background: #f8fbfb;
  text-align: center;
  transition: background .2s, transform .2s;
}

.drawer-item:hover {
  background: var(--primary-soft);
  transform: translateY(-2px);
}

.di-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(6, 154, 154, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.drawer-item p {
  font-size: 12px;
  font-weight: 800;
  margin-top: 8px;
}

/* ========================================================
   AUTH PAGES
   ======================================================== */
.auth-page {
  min-height: calc(100vh - 86px);
  padding: 90px 6%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: min(100%, 920px);
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  overflow: hidden;
}

.auth-copy {
  background: linear-gradient(145deg, var(--primary), #0f172a);
  color: #fff;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-kicker {
  width: max-content;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;
}

.auth-copy h1 {
  font-family: "Playfair Display", serif;
  font-size: 40px;
  line-height: 1.1;
}

.auth-copy p {
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.7;
  margin-top: 14px;
}

.auth-form {
  padding: 46px;
  display: flex;
  flex-direction: column;
}

.auth-form label {
  color: var(--dark);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
  height: 50px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 14px;
  background: #f8fafc;
  outline: 0;
  padding: 0 15px;
  font-size: 15px;
  margin-bottom: 18px;
}

.auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 154, 154, .12);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.auth-check input {
  width: 16px;
  height: 16px;
}

.auth-row a,
.auth-switch a {
  color: var(--primary);
  font-weight: 800;
}

.auth-submit {
  height: 52px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  transition: background .2s, transform .2s;
}

.auth-submit:hover {
  background: var(--primary-dk);
  transform: translateY(-1px);
}

.auth-switch {
  color: var(--muted);
  text-align: center;
  margin-top: 18px;
}

/* ========================================================
   API DYNAMIC HOME
   ======================================================== */
.dynamic-home {
  width: 100%;
}

.api-slider-section {
  max-width: min(1480px, calc(100vw - 48px));
  margin: clamp(18px, 3vw, 34px) auto 0;
  padding: 0;
}

.api-slider-viewport {
  overflow: hidden;
}

.api-slider-track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.api-slide-card {
  position: relative;
  flex: 0 0 calc((100% - (clamp(16px, 2vw, 28px) * 2)) / 3);
  min-height: clamp(210px, 18vw, 280px);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

.api-slide-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transform: scale(1.01);
}

.api-slide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(15, 23, 42, .82) 0%, rgba(15, 23, 42, .34) 54%, rgba(15, 23, 42, .06) 100%);
}

.api-slide-card>div {
  position: absolute;
  inset: auto 22px 22px 22px;
  z-index: 2;
  color: #fff;
}

.api-slide-card span {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.api-slide-card h2 {
  max-width: 78%;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.08;
  font-weight: 900;
}

.api-slide-card p {
  max-width: 80%;
  margin-top: 7px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.45;
}

.api-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.api-slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d1d5db;
  transition: width .25s, background .25s;
}

.api-slider-dots button.active {
  width: 34px;
  background: var(--primary);
}

.home-loading {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
}

.home-loading-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  text-align: center;
}

.home-loading-card span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-block;
  border: 4px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: homeSpin .8s linear infinite;
  margin-bottom: 12px;
}

@keyframes homeSpin {
  to {
    transform: rotate(360deg);
  }
}

.api-hero {
  min-height: 640px;
  padding: 96px 6%;
  background:
    radial-gradient(circle at 74% 14%, rgba(255, 217, 61, .22), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(6, 154, 154, .22), transparent 30%),
    linear-gradient(135deg, #063f42 0%, #0d223f 58%, #0f172a 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
  gap: 54px;
  align-items: center;
  overflow: hidden;
}

.api-hero-copy h1 {
  max-width: 760px;
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 1.02;
}

.api-hero-copy>p {
  max-width: 620px;
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.85;
  margin-top: 18px;
}

.api-hero-visual {
  position: relative;
}

.api-feature-card {
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.api-feature-card>img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.api-feature-card>div {
  padding: 24px;
  color: #fff;
}

.api-feature-card span,
.api-card-img span,
.api-smart-list span {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
}

.api-feature-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  margin-top: 12px;
}

.api-feature-card p {
  color: rgba(255, 255, 255, .72);
  margin-top: 4px;
}

.api-feature-card strong {
  display: block;
  color: #2ef0d0;
  font-size: 28px;
  margin-top: 12px;
}

.api-band {
  max-width: var(--max);
  margin: 34px auto 0;
  padding: 0 24px;
}

.api-banner-row,
.api-card-row {
  display: grid;
  gap: 18px;
}

.api-banner-row {
  grid-template-columns: repeat(3, 1fr);
}

.api-banner-card {
  min-height: 210px;
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  color: #fff;
}

.api-banner-card img,
.api-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.api-banner-card::after,
.api-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .78), rgba(15, 23, 42, .08));
}

.api-banner-card>div {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}

.api-banner-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
}

.api-banner-card p {
  color: rgba(255, 255, 255, .78);
  margin-top: 5px;
}

.api-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.api-category-card,
.api-saving-card,
.api-service-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  padding: 18px 10px;
  transition: transform .2s, box-shadow .2s;
}

.api-category-card {
  border-radius: 14px;
  padding: 12px 6px 10px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #fff 58%, color-mix(in srgb, var(--cat-color, var(--primary)) 10%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--primary)) 16%, #edf1f5);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.api-category-card::before {
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat-color, var(--primary)) 22%, transparent);
  filter: blur(16px);
  opacity: .55;
  pointer-events: none;
}

.api-category-card:hover {
  border-color: color-mix(in srgb, var(--cat-color, var(--primary)) 45%, transparent);
  box-shadow: 0 16px 32px -6px color-mix(in srgb, var(--cat-color, var(--primary)) 24%, transparent);
}

.api-category-card:hover,
.api-saving-card:hover,
.api-service-card:hover,
.api-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.api-category-card span,
.api-saving-card span,
.api-service-card span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
}

.api-category-card span {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 15px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--cat-color, var(--primary)) 20%, #fff), color-mix(in srgb, var(--cat-color, var(--primary)) 6%, #fff));
  color: var(--cat-color, var(--primary));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--primary)) 22%, transparent);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--cat-color, var(--primary)) 30%, transparent);
  position: relative;
  z-index: 1;
  transition: transform .25s;
}

.api-category-card:hover span {
  transform: scale(1.08) rotate(-4deg);
}

.api-category-card span img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.api-category-card p {
  font-size: 9.5px;
  font-weight: 800;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-budget-grid,
.api-savings-grid {
  display: grid;
  gap: 16px;
}

.api-budget-grid {
  grid-template-columns: repeat(3, 1fr);
}

.api-budget-card {
  min-height: 170px;
  border-radius: 28px;
  padding: 24px;
  color: #fff;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, #ff9a3c, #ff6b35);
}

.api-budget-card.mint {
  background: linear-gradient(135deg, #02b98f, #069a9a);
}

.api-budget-card.blue {
  background: linear-gradient(135deg, #4facfe, #0f6cbd);
}

.api-budget-card small {
  font-weight: 800;
  color: rgba(255, 255, 255, .78);
}

.api-budget-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  margin-top: 18px;
  line-height: 1.04;
}

.api-budget-card span {
  display: inline-block;
  margin-top: 12px;
  font-weight: 900;
}

.api-savings-grid {
  grid-template-columns: repeat(6, 1fr);
}

.api-saving-card h4,
.api-service-card h3 {
  font-size: 15px;
  margin-top: 12px;
  font-weight: 900;
}

.api-saving-card p,
.api-service-card p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.api-card-row {
  grid-template-columns: repeat(4, 1fr);
}

.api-card {
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}

.api-card-img {
  height: 190px;
  position: relative;
  overflow: hidden;
}

.api-card-img span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.api-card-img>b {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 6px 12px;
  background: #02ad74;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

/* The image fallback is media, not the small card badge. */
.api-card-img>.api-image-fallback {
  position: static;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 190px;
  place-items: center;
  border-radius: 0;
  padding: 0;
  background: #e5f5f1;
  color: #078b80;
  font-size: 42px;
  font-weight: 800;
}

.api-card-body {
  padding: 18px;
}

.api-card-body h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

.api-card-body p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.api-card-body strong {
  display: inline-block;
  color: var(--primary);
  font-size: 22px;
  margin-top: 12px;
  margin-right: 8px;
}

.api-card-body del {
  color: #a7a7a7;
  font-size: 13px;
}

.api-service-card {
  min-height: 150px;
}

.api-smart-home {
  background: linear-gradient(135deg, #111827, #0d223f);
  color: #fff;
  border-radius: 34px;
  padding: 42px;
}

.api-smart-home .fl-sh-sub {
  color: rgba(255, 255, 255, .65);
}

.api-smart-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.api-smart-list article {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
}

.api-smart-list img {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  object-fit: cover;
}

.api-smart-list h3 {
  font-size: 16px;
  margin-top: 10px;
}

.api-smart-list p {
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
  margin-top: 4px;
}

.api-smart-list strong {
  display: block;
  color: #2ef0d0;
  margin-top: 8px;
}

/* ========================================================
   RESPONSIVE — TABLET 1024px
   ======================================================== */
@media (max-width: 1100px) {
  .dh-nav {
    gap: 16px;
  }

  .dh-link {
    font-size: 13px;
  }

  .dh-search-wrap {
    width: 200px;
  }

  .api-slider-section {
    max-width: calc(100vw - 36px);
  }

  .api-slide-card {
    flex-basis: calc((100% - (clamp(16px, 2vw, 28px) * 2)) / 3);
    min-height: 210px;
  }

  .api-slide-card h2 {
    max-width: 88%;
  }

  .api-slide-card p {
    max-width: 88%;
  }

  .cat-desktop-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .con-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .smart-products {
    grid-template-columns: repeat(2, 1fr);
  }

  .gadgets-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .fin-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dispatch-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .sup-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .exclusive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .df-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 840px) {
  .dh-inner {
    padding: 0 4%;
  }

  .dh-nav {
    display: none;
  }

  .dh-search-wrap {
    display: none;
  }

  .api-slider-section {
    max-width: calc(100vw - 32px);
  }

  .api-slide-card {
    flex-basis: 100%;
  }

  .quick-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .savings-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .discount-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .style-motion-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   RESPONSIVE — MOBILE  ≤ 768px
   App-first layout
   ======================================================== */
@media (max-width: 768px) {
  :root {
    --max: 430px;
  }

  /* body's own padding-bottom for this breakpoint is set once, further down
     this file (search "MOBILE BOTTOM NAV -- canonical" section) alongside
     the safe-area-aware value that was actually winning here already -- a
     plain 100px was dead code sitting in this block, silently overridden by
     that later, more correct declaration. */

  /* ── HEADER ── */
  .dh-inner {
    display: none;
  }

  .mh-bar {
    display: block;
    position: relative;
    height: var(--mob-header-h);
    overflow: hidden;
  }

  /* Background GIF / gradient layer -- position:relative on .mh-bar above is
     load-bearing: without it, this absolutely-positioned inset:0 layer has
     no positioned ancestor of its own to bind to and falls back to
     .fl-header (position:sticky further up), which only happens to match
     .mh-bar's height when .dh-inner truly contributes zero box -- any
     mismatch there let this decorative layer (and its skyline ::after)
     silently stretch past .mh-bar's own visible bottom edge, bleeding into
     the page content below it. */
  .mh-bg-layer {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 40%, rgba(0, 255, 210, .32), transparent 35%),
      linear-gradient(160deg, #7ecfcf 0%, #d8f5f5 60%, #ebfafa 100%);
  }

  /* Skyline decoration */
  .mh-bg-layer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65px;
    opacity: .22;
    background:
      linear-gradient(to top, #0f3040 0 8px, transparent 8px),
      repeating-linear-gradient(90deg, transparent 0 20px, rgba(15, 23, 42, .4) 20px 44px, transparent 44px 60px);
    mask-image: linear-gradient(to top, black, transparent);
  }

  .mh-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 52px 16px 14px;
  }

  .mh-icon-btn {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    border: 1.2px solid rgba(15, 23, 42, .35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    transition: transform .15s;
  }

  .mh-icon-btn:hover {
    transform: scale(.96);
  }

  .mh-search {
    flex: 1;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .32);
    backdrop-filter: blur(6px);
    border: 1.2px solid rgba(15, 23, 42, .3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .09);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    transition: border-color .2s, box-shadow .2s;
  }

  .mh-search:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(6, 154, 154, .15);
  }

  .mh-search-ico {
    color: var(--dark);
    flex-shrink: 0;
  }

  .mh-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    min-width: 0;
  }

  .mh-search input::placeholder {
    color: rgba(15, 23, 42, .45);
    letter-spacing: .4px;
  }

  .mh-mic-btn {
    flex-shrink: 0;
    background: none;
    color: var(--dark);
    display: flex;
    align-items: center;
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .mobile-menu-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-side-menu {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 510;
    width: min(84vw, 340px);
    height: 100vh;
    background: #fff;
    padding: 22px 20px 96px;
    box-shadow: 22px 0 45px rgba(15, 23, 42, .18);
    transform: translateX(-105%);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
  }

  .mobile-side-menu.open {
    transform: translateX(0);
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-menu-head .dh-brand {
    font-size: 23px;
  }

  .mobile-menu-head .brand-image {
    height: 44px;
    max-width: 160px;
  }

  .mobile-menu-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f4f8;
    color: var(--dark);
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-links a {
    padding: 16px 2px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    color: var(--dark);
    font-size: 17px;
    font-weight: 800;
  }

  .mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
  }

  .mobile-menu-actions a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-login {
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    color: var(--dark);
    font-weight: 800;
    background: #fff;
  }

  /* ── DESKTOP HERO HIDDEN ── */
  .dh-hero {
    display: none;
  }

  /* ── MOBILE BANNER ── */
  .mob-banner-section {
    display: block;
    max-width: var(--mob-max);
    margin: 18px auto 0;
    padding: 0 16px;
  }

  .mob-slider {
    position: relative;
    height: 200px;
    border-radius: 24px;
    overflow: hidden;
  }

  .mob-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity .4s ease, transform .4s ease;
    display: flex;
    align-items: center;
    padding: 28px 24px;
  }

  .mob-slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .ms-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

  .ms-bg-1 {
    background: linear-gradient(135deg, #061b24, #064e4e);
  }

  .ms-bg-2 {
    background: linear-gradient(135deg, #063f53, #0f172a);
  }

  .ms-bg-3 {
    background: linear-gradient(135deg, #2f1b55, #0f172a);
  }

  .ms-bg-4 {
    background: linear-gradient(135deg, #1a3a1a, #0a2a0a);
  }

  .ms-content {
    position: relative;
    z-index: 2;
  }

  .ms-tag {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 10px;
  }

  .ms-content h2 {
    font-family: "Playfair Display", serif;
    font-size: 28px;
    color: #fff;
    line-height: 1.1;
  }

  .ms-content h2 b {
    color: #06d6b6;
    font-style: normal;
  }

  .ms-content p {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    margin-top: 6px;
  }

  .ms-btn {
    display: inline-block;
    margin-top: 12px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 999px;
  }

  .mob-slider-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
  }

  .mob-slider-dots button {
    width: 20px;
    height: 6px;
    border-radius: 999px;
    background: #d0d5db;
    border: 0;
    cursor: pointer;
    transition: width .3s, background .3s;
  }

  .mob-slider-dots button.active {
    width: 44px;
    background: var(--primary);
  }

  /* ── SECTIONS ── */
  .fl-section {
    margin: 28px auto;
    padding: 0 16px;
  }

  .fl-sh-title {
    font-size: 22px;
  }

  .fl-sh-sub {
    font-size: 14px;
  }

  .api-slider-section {
    max-width: var(--mob-max);
    margin-top: 16px;
    padding: 0 16px;
  }

  .api-slider-track {
    gap: 12px;
  }

  .api-slide-card {
    flex-basis: 100%;
    min-height: 180px;
    border-radius: 18px;
  }

  .api-slide-card>div {
    inset: auto 18px 18px 18px;
  }

  .api-slide-card span {
    padding: 5px 10px;
    margin-bottom: 8px;
    font-size: 10px;
  }

  .api-slide-card h2 {
    max-width: 90%;
    font-size: 23px;
  }

  .api-slide-card p {
    max-width: 90%;
    font-size: 12px;
  }

  /* ── CATEGORIES MOBILE ── */
  .cat-desktop-grid {
    display: none;
  }

  .cat-mobile-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cat-mob-row {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cat-mob-row::-webkit-scrollbar {
    display: none;
  }

  .cat-mob-item {
    flex-shrink: 0;
    width: calc(100% / 5);
    min-width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px;
  }

  .cat-mob-item span {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
  }

  .cat-mob-item p {
    font-size: 11px;
    font-weight: 700;
    margin-top: 6px;
    text-align: center;
  }

  /* ── BUDGET ── */
  .budget-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .bc-body h3 {
    font-size: 24px;
  }

  .bc-body .bc-sub {
    display: none;
  }

  /* ── SAVINGS ── */
  .savings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .sc-ico {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .savings-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .savings-card strong {
    font-size: 13px;
  }

  /* ── PROPERTIES ── */
  .prop-scroll-wrap {
    margin: 0 -16px;
    padding: 0 16px;
  }

  .prop-card {
    min-width: 290px;
  }

  .exclusive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ex-card {
    aspect-ratio: 1/1;
  }

  /* ── DISPATCH ── */
  .dispatch-section {
    padding: 22px 16px 24px;
    border-radius: var(--radius-lg);
  }

  .dispatch-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .dp-img-wrap {
    height: 140px;
  }

  .dp-buy {
    font-size: 12px;
  }

  /* ── SERVICES ── */
  .services-box {
    border-radius: var(--radius-lg);
    padding: 20px 16px;
  }

  .quick-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .qg-item {
    min-height: 90px;
    border-radius: var(--radius-sm);
    padding: 10px 4px;
  }

  .qg-ico {
    font-size: 28px;
  }

  .qg-item strong {
    font-size: 11px;
    margin-top: 6px;
  }

  .qg-item p {
    display: none;
  }

  .loan-banner {
    flex-direction: column;
    text-align: center;
    border-radius: var(--radius);
    padding: 20px 16px;
  }

  .lb-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .lb-cta {
    width: 100%;
    text-align: center;
  }

  .offer-strip {
    border-radius: var(--radius);
    padding: 16px;
    gap: 10px;
  }

  .os-left strong {
    font-size: 14px;
  }

  /* ── SMART HOME ── */
  .smart-section {
    border-radius: var(--radius-lg);
    padding: 24px 16px;
  }

  .smart-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .smart-copy h2 {
    font-size: 28px;
  }

  .smart-stats-col {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .smart-stat {
    text-align: center;
  }

  .smart-stat strong {
    font-size: 20px;
  }

  .smart-products {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sp-card {
    display: grid;
    grid-template-columns: 90px 1fr;
    border-radius: var(--radius-sm);
  }

  .sp-img-wrap {
    height: 100%;
    min-height: 100px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  .sp-info h4 {
    font-size: 14px;
  }

  /* ── CONSULTANTS ── */
  .con-row {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .con-row::-webkit-scrollbar {
    display: none;
  }

  .con-card {
    min-width: 280px;
  }

  /* ── DESIGNS ── */
  .style-motion-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sm-card {
    aspect-ratio: 16/9;
  }

  .design-grid {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .design-grid::-webkit-scrollbar {
    display: none;
  }

  .dg-card {
    min-width: 280px;
    min-height: 220px;
  }

  /* ── GADGETS ── */
  .gadgets-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gc-img {
    height: 110px;
  }

  .discount-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ── FINANCE ── */
  .fin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .fin-rate {
    font-size: 26px;
  }

  /* ── SUPPLIERS ── */
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .sup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* ── FOOTER ── */
  .df-inner {
    display: none;
  }

  .df-bottom {
    display: none;
  }

  /* ── MOBILE BOTTOM NAV ──
     Full rule set consolidated at the single definition further down this
     file (search "MOBILE BOTTOM NAV -- canonical") -- this used to be split
     across two separate max-width:768px blocks with overlapping/conflicting
     position, width and height values (the second block's safe-area-aware
     values always won in practice, making these dead code that was easy to
     misread as the real behavior). Kept as one definition to stop the two
     from drifting apart again. */

  /* ── SERVICE DRAWER ── */
  .drawer-overlay {
    display: block;
  }

  .service-drawer {
    display: block;
  }

  .auth-page {
    min-height: auto;
    padding: 28px 16px;
  }

  .auth-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .auth-copy,
  .auth-form {
    padding: 28px 22px;
  }

  .auth-copy h1 {
    font-size: 30px;
  }

  .auth-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .api-hero {
    min-height: auto;
    padding: 32px 18px 26px;
    display: block;
  }

  .api-hero-copy h1 {
    font-size: 38px;
  }

  .api-hero-copy>p {
    font-size: 15px;
  }

  .api-hero-visual {
    margin-top: 28px;
  }

  .api-feature-card {
    border-radius: 24px;
  }

  .api-feature-card>img {
    height: 220px;
  }

  .hero-stats {
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hero-stats::-webkit-scrollbar {
    display: none;
  }

  .api-band {
    max-width: var(--mob-max);
    margin-top: 18px;
    padding: 0 16px;
  }

  .api-banner-row,
  .api-card-row {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .api-banner-row::-webkit-scrollbar,
  .api-card-row::-webkit-scrollbar {
    display: none;
  }

  .api-banner-card {
    min-width: 310px;
    min-height: 180px;
  }

  .api-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 8px;
  }

  .api-category-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: 0;
  }

  .api-category-card::before {
    display: none;
  }

  .api-category-card:hover {
    transform: none;
    box-shadow: none;
  }

  .api-category-card span {
    width: 58px;
    height: 58px;
    background: #fff;
    border-color: color-mix(in srgb, var(--cat-color, var(--primary)) 18%, transparent);
    box-shadow: var(--shadow-sm);
  }

  .api-budget-grid,
  .api-savings-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .api-budget-grid::-webkit-scrollbar,
  .api-savings-grid::-webkit-scrollbar {
    display: none;
  }

  .api-budget-card {
    min-width: 250px;
  }

  .api-saving-card {
    min-width: 132px;
  }

  .api-card {
    min-width: 285px;
  }

  .api-card-img {
    height: 190px;
  }

  .api-service-card {
    min-width: 150px;
  }

  .api-smart-home {
    border-radius: 24px;
    padding: 24px 16px;
  }

  .api-smart-list {
    grid-template-columns: 1fr;
  }

  .api-smart-list article {
    grid-template-columns: 90px 1fr;
  }

  .api-smart-list img {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 430px) {
  .mh-inner {
    padding: 48px 14px 12px;
    gap: 8px;
  }

  .mh-icon-btn {
    width: 48px;
    height: 48px;
  }

  .mh-search {
    height: 48px;
  }

  .api-slider-section {
    padding: 0 12px;
  }

  .api-slide-card {
    min-height: 168px;
  }

  .api-slide-card h2 {
    font-size: 21px;
  }

  .api-slide-card p {
    font-size: 11px;
  }

  .budget-grid {
    gap: 8px;
  }

  .bc-body h3 {
    font-size: 22px;
  }

  .dispatch-row {
    grid-template-columns: 1fr;
  }

  .fin-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   RESPONSIVE HARDENING
   Keeps header, footer nav and API home inside the viewport.
   ======================================================== */
html,
body,
.floorlo-app,
.fl-main,
.dynamic-home {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.df-inner,
.df-bottom,
.fl-section,
.api-slider-section {
  max-width: min(var(--max), 100%);
}

@media (max-width: 1180px) {
  .dh-inner {
    padding-inline: 24px;
    gap: 16px;
  }

  .dh-nav {
    gap: 14px;
  }

  .dh-search-wrap {
    width: clamp(150px, 18vw, 220px);
  }

  .brand-image {
    max-width: 190px;
    height: 50px;
  }

  .dh-cta {
    padding: 10px 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --max: 100%;
    /* Reverted to the original 132px -- tightening this to 120px turned out
       to shrink the header's reserved flow space more than page content on
       other pages (e.g. the /property/ hero heading) actually needed,
       causing a new overlap where none existed before. Not worth the
       tradeoff for a purely cosmetic few extra px of color at the bottom
       of the header. */
    --mob-header-h: 132px;
  }

  body {
    /* Was 92px, only just clearing .mob-nav's own 82px bar height -- it
       never accounted for the raised FAB overhanging a further 28px above
       the bar (.mob-nav-fab{top:-28px}), so the last ~18px of every page's
       content sat directly under the FAB, covered by it. 110 (bar+FAB) +
       10px of real clearance. */
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  .dh-inner {
    display: none;
  }

  .mh-bar {
    display: block;
    position: relative;
    height: var(--mob-header-h);
    width: 100%;
    overflow: hidden;
  }

  .mh-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 10px;
    padding: 44px 18px 14px;
  }

  .mh-icon-btn {
    width: 52px;
    height: 52px;
    max-width: 100%;
  }

  .mh-search {
    width: 100%;
    min-width: 0;
  }

  .mh-search input {
    min-width: 0;
    width: 100%;
  }

  .api-slider-section,
  .fl-section {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(14px, 4vw, 24px);
  }

  .api-slider-section {
    margin-top: 8px;
  }

  .api-slider-viewport,
  .api-card-row,
  .api-budget-grid,
  .api-savings-grid {
    width: 100%;
    max-width: 100%;
  }

  .api-slider-track {
    gap: 12px;
  }

  .api-slide-card {
    flex: 0 0 100%;
    min-width: 0;
  }

  .api-category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px 8px;
  }

  .api-category-card {
    min-width: 0;
  }

  .api-category-card span {
    width: clamp(54px, 15vw, 66px);
    height: clamp(54px, 15vw, 66px);
  }

  .api-category-card span img {
    width: 70%;
    height: 70%;
  }

  .api-category-card p {
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .api-budget-grid,
  .api-savings-grid,
  .api-card-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .api-budget-grid>*,
  .api-savings-grid>*,
  .api-card-row>* {
    scroll-snap-align: start;
  }

  .api-budget-card {
    flex: 0 0 min(78vw, 280px);
  }

  .api-saving-card {
    flex: 0 0 min(38vw, 150px);
  }

  .api-card {
    flex: 0 0 min(78vw, 300px);
  }

  .api-smart-home {
    width: calc(100% - clamp(28px, 8vw, 48px));
    margin-inline: auto;
  }

  .df-inner,
  .df-bottom {
    display: none;
  }

  /* MOBILE BOTTOM NAV -- canonical (see the note where this used to be
     split, up near "MOBILE BOTTOM NAV" earlier in this file). Full-bleed,
     safe-area-aware positioning (the values that were actually winning the
     cascade before) merged with the visual styling (background, shadow,
     radius, colors) that only ever lived in the other, now-removed block. */
  .mob-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: calc(82px + env(safe-area-inset-bottom, 0px));
    padding: 8px max(10px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px));
    background: #fff;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .13);
    align-items: center;
    justify-content: space-around;
    z-index: 250;
    transition: transform .3s ease;
  }

  .mob-nav.hide {
    transform: translateY(110%);
  }

  .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;
    padding: 8px 0;
    flex: 1;
    min-width: 0;
  }

  .mob-nav-item small {
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
  }

  .mob-nav-item.active .mob-nav-ico {
    color: var(--primary);
  }

  .mob-nav-item.active small {
    color: var(--primary);
  }

  .mob-nav-ico {
    line-height: 1;
  }

  .mob-nav-fab {
    position: absolute;
    left: 50%;
    top: -28px;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(6, 154, 154, .45);
    border: 6px solid #fff;
    transition: transform .2s;
  }

  .mob-nav-fab:hover {
    transform: translateX(-50%);
  }
}

@media (max-width: 520px) {
  :root {
    /* Reverted to the original 122px -- see the 768px breakpoint's note
       above; tightening this shrank the header's reserved space more than
       other pages' content actually needed, causing overlap elsewhere. */
    --mob-header-h: 122px;
  }

  .mh-inner {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 8px;
    padding: 36px 14px 12px;
  }

  .mh-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .mh-search {
    height: 48px;
    border-radius: 15px;
    padding-inline: 10px;
  }

  .mh-search input {
    font-size: 14px;
  }

  .api-slide-card {
    min-height: 176px;
    border-radius: 18px;
  }

  .api-slide-card>div {
    inset: auto 18px 18px;
  }

  .api-slide-card h2 {
    max-width: 96%;
    font-size: clamp(21px, 7vw, 28px);
  }

  .api-slide-card p {
    max-width: 96%;
    font-size: 12px;
  }

  .fl-section {
    margin-block: 30px;
  }

  .fl-row-head {
    gap: 10px;
  }

  .fl-sh-title {
    font-size: clamp(24px, 8vw, 34px);
  }

  .fl-sh-sub {
    font-size: 15px;
    line-height: 1.65;
  }

  .api-category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px 6px;
  }

  .api-category-card span {
    width: clamp(56px, 17vw, 70px);
    height: clamp(56px, 17vw, 70px);
    border-radius: 18px;
  }

  .api-category-card p {
    font-size: clamp(11px, 3.1vw, 13px);
  }

  .api-saving-card {
    flex-basis: min(42vw, 150px);
  }

  .api-card {
    flex-basis: min(82vw, 310px);
  }

  .mobile-side-menu {
    width: min(88vw, 340px);
  }
}

@media (max-width: 360px) {
  .mh-inner {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding-inline: 10px;
  }

  .mh-icon-btn {
    width: 44px;
    height: 44px;
  }

  .mh-search {
    height: 44px;
  }

  .mh-search input::placeholder {
    font-size: 12px;
  }

  .api-category-grid {
    gap: 14px 4px;
  }

  .api-category-card span {
    width: 52px;
    height: 52px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  body {
    padding-bottom: 0;
  }

  .dh-inner {
    display: flex !important;
    height: 68px;
    padding-inline: 18px;
    gap: 12px;
  }

  .mh-bar,
  .mobile-menu-overlay,
  .mobile-side-menu,
  .mob-nav {
    display: none !important;
  }

  .brand-image {
    height: 44px;
    max-width: 165px;
  }

  .dh-nav {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(10px, 1.3vw, 16px);
    min-width: 0;
  }

  .dh-link {
    font-size: clamp(11px, 1.25vw, 13px);
    white-space: nowrap;
  }

  .dh-right {
    flex-shrink: 0;
    gap: 8px;
  }

  .dh-search-wrap {
    display: flex !important;
    width: clamp(120px, 16vw, 180px);
    height: 38px;
    padding-inline: 10px;
  }

  .dh-search-wrap input {
    font-size: 12px;
  }

  .dh-login {
    font-size: 12px;
    padding-inline: 2px;
  }

  .dh-cta {
    font-size: 12px;
    padding: 9px 14px;
  }

  .df-inner {
    display: grid;
  }

  .df-bottom {
    display: flex;
  }

  .api-slider-section {
    max-width: calc(100vw - 32px);
    padding: 0;
  }

  .api-slider-track {
    gap: 14px;
  }

  .api-slide-card {
    flex: 0 0 calc((100% - 28px) / 3);
    min-height: clamp(150px, 22vw, 210px);
  }

  .api-slide-card>div {
    inset: auto 14px 14px;
  }

  .api-slide-card h2 {
    font-size: clamp(16px, 2.1vw, 23px);
  }

  .api-slide-card p {
    font-size: clamp(10px, 1.2vw, 13px);
  }
}

/* ========================================================
   DESKTOP POLISH
   Final balance pass for header, slider and first sections.
   ======================================================== */
@media (min-width: 1101px) {
  :root {
    --header-h: 70px;
  }

  .dh-inner {
    height: var(--header-h);
    padding-inline: clamp(42px, 6vw, 92px);
    gap: 28px;
    width: 100%;
    max-width: none;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
  }

  .dh-brand {
    flex: 0 0 238px;
    min-width: 238px;
  }

  .dh-brand .brand-image {
    height: 48px;
    max-width: 238px;
  }

  .dh-nav {
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(18px, 1.65vw, 28px);
  }

  .dh-link {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .dh-right {
    flex: 0 0 auto;
    gap: 16px;
  }

  .dh-search-wrap {
    width: clamp(250px, 18vw, 330px);
    height: 48px;
    background: #fff;
  }

  .dh-login {
    font-size: 15px;
    padding: 10px 0;
  }

  .dh-cta {
    min-width: 108px;
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    line-height: 1.1;
  }

  .api-slider-section {
    max-width: min(1500px, calc(100vw - 96px));
    margin-top: 44px;
  }

  .api-slider-track {
    gap: 28px;
  }

  .api-slide-card {
    flex-basis: calc((100% - 56px) / 3);
    min-height: clamp(260px, 19vw, 330px);
    border-radius: 18px;
  }

  .api-slide-card>div {
    inset: auto 28px 28px;
  }

  .api-slide-card h2 {
    max-width: 88%;
    font-size: clamp(28px, 2.15vw, 40px);
  }

  .api-slide-card p {
    max-width: 82%;
    font-size: 16px;
  }

  .api-slider-dots {
    margin-top: 16px;
  }

  .fl-section {
    max-width: min(1460px, calc(100vw - 96px));
    margin: 78px auto;
    padding-inline: 0;
  }

  .api-category-section {
    margin-top: 86px;
  }

  .api-category-grid {
    gap: 18px;
  }

  .api-category-card {
    border-radius: 20px;
    padding: 22px 10px 18px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .dh-brand {
    flex: 0 0 176px;
    min-width: 176px;
  }

  .dh-brand .brand-image {
    height: 40px;
    max-width: 176px;
  }

  .dh-cta {
    min-width: 82px;
    min-height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
  }
}

/* ========================================================
   AUTH HEADER STATE
   ======================================================== */
.profile-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.profile-initial,
.mh-profile-initial {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 12px 28px rgba(6, 154, 154, .24);
  text-transform: uppercase;
}

.profile-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 260;
  width: 230px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  border: 1px solid rgba(15, 23, 42, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.profile-menu:hover .profile-popover,
.profile-menu:focus-within .profile-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-popover strong,
.mobile-profile-card strong {
  display: block;
  color: var(--dark);
  font-size: 14px;
  font-weight: 900;
}

.profile-popover span,
.mobile-profile-card p {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.profile-popover form {
  margin-top: 14px;
}

.profile-popover button,
.mobile-logout-form button {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dk);
  font-weight: 900;
}

.profile-popover button:hover,
.mobile-logout-form button:hover {
  background: var(--primary);
  color: #fff;
}

.mobile-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #f7fbfb;
  border: 1px solid rgba(6, 154, 154, .12);
}

.mobile-profile-card .profile-initial {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.mobile-logout-form {
  margin-top: -8px;
}

.mob-nav-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

/* ========================================================
   CATEGORY PAGES
   ======================================================== */
.category-hero {
  max-width: min(1460px, calc(100vw - 96px));
  margin: 44px auto 0;
  min-height: 320px;
  border-radius: 24px;
  padding: clamp(34px, 5vw, 70px);
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(135deg, rgba(6, 154, 154, .92), rgba(15, 23, 42, .9)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e9f2f1'/%3E%3Cpath d='M0 230l110-90 70 55 90-75 130 110H0z' fill='%23c7d6d4'/%3E%3Ccircle cx='120' cy='95' r='28' fill='%23c7d6d4'/%3E%3C/svg%3E") center/cover;
  color: #fff;
  overflow: hidden;
}

.category-hero-copy {
  max-width: 760px;
}

.category-back,
.category-hero span {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  font-weight: 900;
}

.category-back {
  margin-bottom: 18px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}

.category-hero span {
  padding: 6px 12px;
  background: var(--primary);
  font-size: 12px;
  margin-bottom: 12px;
}

.category-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1;
}

.category-hero p {
  max-width: 640px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.7;
}

.category-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.category-detail-card {
  min-height: 220px;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.category-detail-card span {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
}

.category-detail-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  margin-top: 20px;
}

.category-detail-card p {
  color: var(--muted);
  line-height: 1.7;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .category-hero {
    max-width: calc(100vw - 28px);
    margin-top: 18px;
    min-height: 260px;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .category-hero h1 {
    font-size: 42px;
  }

  .category-hero p {
    font-size: 15px;
  }

  .category-detail-grid {
    grid-template-columns: 1fr;
  }

  .category-detail-card {
    min-height: auto;
    padding: 22px;
  }
}

.prop-card-main-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none
}

.prop-card-main-link:hover {
  color: inherit
}

.prop-card-main-link .pc-image-wrap {
  position: relative
}

.pc-image-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #e5f5f1;
  color: #078b80;
  font-size: 48px;
  font-weight: 800
}

.prop-card>.pc-heart {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 14px
}

.pc-prices small {
  display: block;
  margin-top: 3px;
  color: #7b8797;
  font-size: 10px
}

.api-property-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer
}

.api-property-link:hover {
  color: inherit;
  transform: translateY(-4px)
}

.api-property-link .api-card-body span {
  display: block;
  margin-top: 12px;
  color: #009b79;
  font-size: 11px;
  font-weight: 800
}

.api-image-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 180px;
  place-items: center;
  background: #e5f5f1;
  color: #078b80;
  font-size: 42px;
  font-weight: 800
}