/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --red:       #D72638;
  --red-dk:    #A81D2A;
  --red-lt:    #FEF0F1;
  --red-glow:  rgba(215,38,56,0.18);
  --ink:       #0C0C0E;
  --ink-2:     #1E1E24;
  --ink-3:     #3A3A44;
  --muted:     #6E6E80;
  --border:    #E4E4EC;
  --surface:   #F8F8FC;
  --white:     #FFFFFF;
  --radius:    10px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.14);
  --ease:      cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Sora',sans-serif; color:var(--ink); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ============================================================
   TYPOGRAPHY HELPERS
============================================================ */
.eyebrow {
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before {
  content:''; display:block; width:28px; height:2px; background:var(--red); flex-shrink:0;
}
.section-h2 {
  font-family:'DM Serif Display',serif; font-size:clamp(32px,4vw,52px);
  line-height:1.12; color:var(--ink); margin-bottom:14px;
}
.section-p {
  font-size:16px; color:var(--muted); line-height:1.72; max-width:560px;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:8px; font-size:14px;
  font-weight:600; transition:.28s var(--ease); white-space:nowrap;
}
.btn-red {
  background:var(--red); color:#fff;
  box-shadow:0 4px 18px rgba(215,38,56,.30);
}
.btn-red:hover { background:var(--red-dk); transform:translateY(-2px); box-shadow:0 8px 26px rgba(215,38,56,.38); }
.btn-ghost {
  background:transparent; color:var(--ink); border:1.5px solid var(--border);
}
.btn-ghost:hover { border-color:var(--red); color:var(--red); }
.btn-white {
  background:#fff; color:var(--red); box-shadow:var(--shadow-md);
}
.btn-white:hover { background:var(--red); color:#fff; }
.btn-outline-white {
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);
}
.btn-outline-white:hover { background:rgba(255,255,255,.10); }

/* ============================================================
   LAYOUT
============================================================ */
.container { max-width:1220px; margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
.section-sm { padding:60px 0; }

/* ============================================================
   ░░ HEADER ░░
============================================================ */
#header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:72px;
  /* background:rgba(255,255,255,.97); */
background-image: linear-gradient(to right top, #300b0f, #4e111a, #6d1823, #8e1e2c, #b02633);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
#header.scrolled {
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.header-inner {
  height:72px; display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}

/* LOGO */
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:100px; height:auto; border-radius:9px;
  /* background:var(--red); display:flex; align-items:center; justify-content:center; */
  background: white;
}
.logo-mark svg { width:22px; height:22px; fill:#fff; }
.logo-name { font-family:'DM Serif Display',serif; font-size:19px; color:var(--ink); }
.logo-tag { font-size:9.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color:var(--red); margin-top:-3px; }

/* DESKTOP NAV */
.desk-nav { display:flex; align-items:center; gap:2px; }
.desk-nav > li { position:relative; }
.desk-nav > li > a {
  display:block; padding:10px 15px; font-size:14px; font-weight:500;
  /* color:var(--ink-3); */
  color: white;
   border-radius:6px; transition:.2s;
}
/*.desk-nav > li > a:hover,*/
/*.desk-nav > li.active > a { color:var(--red); background:var(--red-lt); }*/

/* MEGA MENU */
.mega-wrap {
  display:none; position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%); width:700px; z-index:9999;
  background:#fff; border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.13);
  padding:28px; opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  transform:translateX(-50%) translateY(8px);
}
.desk-nav li:hover .mega-wrap,
.desk-nav li.open-mega .mega-wrap {
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mega-inner { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.mega-col .mega-cat {
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--red); padding:0 10px 8px;
  border-bottom:1px solid var(--border); margin-bottom:6px;
}
.mega-col a {
  display:block; padding:7px 10px; font-size:13px; color:var(--muted);
  border-radius:6px; transition:.18s;
}
.mega-col a:hover { background:var(--red-lt); color:var(--red); }
.mega-footer {
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.mega-footer span { font-size:13px; color:var(--muted); }

/* HEADER CTA */
.header-cta { display:flex; align-items:center; gap:10px; }

/* HAMBURGER */
.hamburger {
  display:none; width:42px; height:42px; border-radius:8px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  cursor:pointer;  border:1.5px solid var(--border);
  transition:.2s;
  /*background:transparent;*/
  background: white;
}
.hamburger span {
  display:block; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:.3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; transform:translateX(-6px); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* MOBILE DRAWER */
.mobile-drawer {
  display:none; position:fixed;
  top:72px; right:0; bottom:0; width:min(320px,100vw);
  background:#fff; z-index:998; overflow-y:auto;
  box-shadow:-8px 0 40px rgba(0,0,0,.12);
  transform:translateX(100%);
  transition:transform .32s var(--ease);
  padding:0 0 40px;
}
.mobile-drawer.open { transform:translateX(0); }
.drawer-overlay {
  display:none; position:fixed; inset:72px 0 0 0;
  background:rgba(0,0,0,.35); z-index:997;
  opacity:0; transition:opacity .3s;
}
.drawer-overlay.open { opacity:1; }

.mob-nav-list { padding:16px; }
.mob-nav-item { border-bottom:1px solid var(--border); }
.mob-nav-item a {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px; font-size:15px; font-weight:500; color:var(--ink);
}
.mob-nav-item a .arr { font-size:12px; color:var(--muted); transition:.22s; }
.mob-nav-item.open a .arr { transform:rotate(180deg); color:var(--red); }
.mob-sub {
  max-height:0; overflow:hidden;
  transition:max-height .32s var(--ease), padding .22s;
  background:var(--surface); border-radius:8px; margin:0 4px 8px;
}
.mob-sub.open { max-height:600px; padding:8px 0; }
.mob-sub a {
  padding:9px 20px; font-size:13.5px; color:var(--muted);
  border:none; justify-content:flex-start; gap:8px;
}
.mob-sub a::before { content:'—'; color:var(--red); font-size:11px; }
.mob-sub a:hover { color:var(--red); }
.mob-cta { padding:16px; }
.mob-cta .btn { width:100%; justify-content:center; }

/* ============================================================
   ░░ HERO ░░
============================================================ */
.hero {
  min-height:100vh; padding-top:72px;
  background:linear-gradient(130deg,#0C0C0E 0%,#1B0609 45%,#2A0A0F 100%);
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 70% at 65% 55%, rgba(215,38,56,.17) 0%, transparent 65%),
    radial-gradient(ellipse 35% 35% at 15% 85%, rgba(215,38,56,.09) 0%, transparent 60%);
}
/* animated grid texture */
.hero-grid {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hero-grid::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:55px 55px;
}

.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center; padding:80px 0;
}
.hero-lhs { color:#fff; }
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(215,38,56,.18); border:1px solid rgba(215,38,56,.35);
  color:#FFA0AC; font-size:11.5px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; padding:6px 14px; border-radius:100px;
  margin-bottom:28px;
}
.hero-pill .pulse {
  width:6px; height:6px; border-radius:50%; background:#FFA0AC;
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }
.hero h1 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(40px,5.5vw,72px); line-height:1.07;
  color:#fff; margin-bottom:22px;
}
.hero h1 em { color:var(--red); font-style:normal; }
.hero-sub { font-size:17px; color:rgba(255,255,255,.62); line-height:1.7; margin-bottom:36px; max-width:480px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.trust-strip { display:flex; gap:12px; flex-wrap:wrap; }
.trust-badge {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:8px; padding:8px 14px; font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,.78); letter-spacing:.4px;
}
.trust-badge svg { width:15px; height:15px; fill:#FFD700; }

/* hero right panel */
.hero-rhs { position:relative; }
.hero-card-main {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(8px); border-radius:20px; overflow:hidden;
  aspect-ratio:4/5; position:relative;
}
.hero-float {
  position:absolute; background:#fff; border-radius:12px;
  padding:12px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.2);
}
.hero-float.fl-a { left:-28px; bottom:100px; }
.hero-float.fl-b { right:-24px; top:-35px; }
.fl-icon {
  width:38px; height:38px; border-radius:9px; background:var(--red-lt);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.fl-icon svg { width:18px; height:18px; stroke:var(--red); fill:none; stroke-width:2; }
.fl-num { font-family:'DM Serif Display',serif; font-size:20px; line-height:1; color:var(--ink); }
.fl-lbl { font-size:11px; color:var(--muted); margin-top:1px; }

/* ============================================================
   ░░ STATS BAR ░░
============================================================ */
.stats-bar {
  background:var(--ink-2); padding:0;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,.07);
}
.stat-box {
  background:var(--ink-2); text-align:center;
  padding:38px 20px; transition:.25s;
}
.stat-box:hover { background:rgba(215,38,56,.12); }
.stat-big {
  font-family:'DM Serif Display',serif; font-size:44px; color:#fff; line-height:1;
}
.stat-big span { color:var(--red); }
.stat-lbl { font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:6px; }

/* ============================================================
   ░░ ABOUT ░░
============================================================ */
.about { background:var(--surface); }
.about-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.about-img-wrap { position:relative; }
.about-img {
  width:100%; aspect-ratio:4/5; border-radius:var(--radius-lg);
  overflow:hidden; background:linear-gradient(145deg,#e8f0fe,#fce4ec);
}
.cert-card {
  display: none;
  position:absolute; right:-18px; bottom:60px;
  background:#fff; border-radius:12px; padding:18px 20px;
  box-shadow:var(--shadow-md); min-width:168px;
}
.cert-row { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.cert-row:last-child { margin:0; }
.cert-dot { width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0; }
.cert-t { font-size:12px; font-weight:600; color:var(--ink-3); }

.about-highlights {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px;
}
.hl-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; transition:.24s;
}
.hl-card:hover { border-color:var(--red); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.hl-icon {
  width:42px; height:42px; background:var(--red-lt); border-radius:9px;
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.hl-icon svg { width:20px; height:20px; stroke:var(--red); fill:none; stroke-width:2; }
.hl-t { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.hl-d { font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ============================================================
   ░░ PRODUCTS SECTION ░░
============================================================ */
.products-sec { background:#fff; }
.prod-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:48px; flex-wrap:wrap; gap:20px;
}
/* CATEGORY TABS */
.cat-tabs {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px;
}
.cat-tab {
  padding:8px 18px; border-radius:100px; font-size:13px; font-weight:600;
  border:1.5px solid var(--border); color:var(--muted);
  cursor:pointer; transition:.2s;
}
.cat-tab.active, .cat-tab:hover {
  background:var(--red); color:#fff; border-color:var(--red);
}

/* PRODUCT SLIDER */
.slider-wrap { position:relative; overflow:hidden; }
.slider-track {
  display:flex; gap:24px;
  transition:transform .45s var(--ease);
}
.prod-card {
  flex:0 0 calc(25% - 18px); background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:.3s var(--ease);
}
.prod-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:rgba(215,38,56,.2); }
.prod-img {
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.prod-overlay {
  position:absolute; inset:0; background:rgba(215,38,56,.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:.28s;
}
.prod-card:hover .prod-overlay { opacity:1; }
.prod-overlay span {
  color:#fff; font-size:13px; font-weight:600;
  border:2px solid #fff; padding:7px 18px; border-radius:6px;
}
.prod-body { padding:18px; }
.prod-cat { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:5px; }
.prod-name { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.prod-cnt { font-size:12.5px; color:var(--muted); }

/* SLIDER CONTROLS */
.slider-controls {
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin-top:32px;
}
.sl-arrow {
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.22s;
}
.sl-arrow:hover { background:var(--red); border-color:var(--red); }
.sl-arrow:hover svg { stroke:#fff; }
.sl-arrow svg { width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2; transition:.22s; }
.sl-dots { display:flex; gap:8px; }
.sl-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--border); cursor:pointer; transition:.22s;
}
.sl-dot.active { background:var(--red); width:24px; border-radius:4px; }

/* ============================================================
   ░░ WHY CHOOSE ░░
============================================================ */
.why { background:var(--ink-2); }
.why .section-h2 { color:#fff; }
.why .section-p { color:rgba(255,255,255,.5); }
.why .eyebrow { color:#FF8FA3; }
.why .eyebrow::before { background:#FF8FA3; }

.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px; background:rgba(255,255,255,.05);
  border-radius:var(--radius-lg); overflow:hidden; margin-top:56px;
}
.why-item {
  background:var(--ink-2); padding:38px 30px;
  transition:.28s; position:relative; overflow:hidden;
}
.why-item::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:3px; background:var(--red); transition:.3s var(--ease);
}
.why-item:hover { background:rgba(255,255,255,.03); }
.why-item:hover::after { width:100%; }
.why-icon {
  width:54px; height:54px; background:rgba(215,38,56,.14);
  border-radius:var(--radius); display:flex; align-items:center;
  justify-content:center; margin-bottom:18px; transition:.28s;
}
.why-item:hover .why-icon { background:rgba(215,38,56,.25); }
.why-icon svg { width:25px; height:25px; stroke:var(--red); fill:none; stroke-width:2; }
.why-t { font-size:17px; font-weight:600; color:#fff; margin-bottom:8px; }
.why-d { font-size:13.5px; color:rgba(255,255,255,.48); line-height:1.6; }

/* ============================================================
   ░░ FRANCHISE ░░
============================================================ */
.franchise {
  /*background:linear-gradient(130deg, var(--red) 0%, var(--red-dk) 100%);*/
  background:linear-gradient(to right top, #300b0f, #4e111a, #6d1823, #8e1e2c, #b02633);
  position:relative; overflow:hidden;
}
.franchise::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:450px; height:450px; background:rgba(255,255,255,.05); border-radius:50%;
}
.franchise::after {
  content:''; position:absolute; bottom:-180px; left:-100px;
  width:560px; height:560px; background:rgba(0,0,0,.08); border-radius:50%;
}
.franchise-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start;
}
.franchise .eyebrow { color:rgba(255,255,255,.65); }
.franchise .eyebrow::before { background:rgba(255,255,255,.5); }
.franchise .section-h2 { color:#fff; }
.franchise .section-p { color:rgba(255,255,255,.72); }
.ben-list { margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.ben-item {
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13);
  border-radius:10px; padding:14px 16px; transition:.22s;
}
.ben-item:hover { background:rgba(255,255,255,.14); }
.ben-num {
  width:30px; height:30px; background:rgba(255,255,255,.15);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
}
.ben-t { font-size:14px; font-weight:600; color:#fff; margin-bottom:2px; }
.ben-d { font-size:12.5px; color:rgba(255,255,255,.62); }

/* FRANCHISE FORM */
.frm-box {
  background:#fff; border-radius:var(--radius-lg); padding:36px;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
}
.frm-title { font-family:'DM Serif Display',serif; font-size:24px; color:var(--ink); margin-bottom:5px; }
.frm-sub { font-size:13.5px; color:var(--muted); margin-bottom:24px; }
.frm-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.frm-grp { margin-bottom:14px; }
.frm-grp label {
  display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.frm-grp input, .frm-grp select, .frm-grp textarea {
  width:100%; padding:11px 14px; border:1.5px solid var(--border);
  border-radius:8px; font-family:'Sora',sans-serif; font-size:13.5px;
  color:var(--ink); background:var(--surface); outline:none;
  transition:.22s; appearance:none;
}
.frm-grp input:focus, .frm-grp select:focus, .frm-grp textarea:focus {
  border-color:var(--red); background:#fff;
  box-shadow:0 0 0 3px rgba(215,38,56,.09);
}
.frm-grp textarea { resize:vertical; min-height:90px; }
.frm-submit { width:100%; padding:14px; font-size:15px; margin-top:4px; border-radius:8px; }

/* ============================================================
   ░░ TESTIMONIALS ░░
============================================================ */
.testi { background:var(--surface); }
.testi-slider-wrap { position:relative; overflow:hidden; margin-top:44px; }
.testi-track {
  display:flex; gap:22px; transition:transform .45s var(--ease);
}
.testi-card {
  flex:0 0 calc(33.333% - 15px);
  background:#fff; border-radius:var(--radius-lg);
  padding:30px; border:1px solid var(--border);
  transition:.28s;
}
.testi-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.quote-bg { font-size:56px; line-height:1; color:var(--red); opacity:.18; margin-bottom:-10px; font-family:Georgia,serif; }
.testi-txt { font-size:14.5px; color:var(--muted); line-height:1.72; font-style:italic; margin-bottom:22px; }
.stars { display:flex; gap:3px; margin-bottom:14px; color:#FFB800; font-size:15px; }
.testi-auth { display:flex; align-items:center; gap:12px; }
.auth-av {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff; flex-shrink:0;
}
.auth-name { font-size:14px; font-weight:600; color:var(--ink); }
.auth-role { font-size:12px; color:var(--muted); }

/* ============================================================
   ░░ BLOG ░░
============================================================ */
.blog-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px;
}
.blog-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; transition:.28s;
}
.blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.blog-img {
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.blog-tag {
  position:absolute; top:14px; left:14px; background:var(--red);
  color:#fff; font-size:10px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; padding:4px 10px; border-radius:4px;
}
.blog-body { padding:22px; }
.blog-meta { font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.blog-title {
  font-family:'DM Serif Display',serif; font-size:18px; color:var(--ink);
  line-height:1.38; margin-bottom:10px; transition:.2s;
}
.blog-card:hover .blog-title { color:var(--red); }
.blog-exc { font-size:13.5px; color:var(--muted); line-height:1.65; margin-bottom:14px; }
.read-more { font-size:13px; font-weight:600; color:var(--red); display:inline-flex; align-items:center; gap:5px; transition:.2s; }
.read-more:hover { gap:9px; }

/* ============================================================
   ░░ CONTACT ░░
============================================================ */
.contact { background:var(--surface); }
.contact-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.contact-info-list { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.ci-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; display:flex; align-items:flex-start; gap:14px; transition:.22s;
}
.ci-card:hover { border-color:var(--red); box-shadow:var(--shadow-sm); }
.ci-icon {
  width:42px; height:42px; background:var(--red-lt); border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ci-icon svg { width:19px; height:19px; stroke:var(--red); fill:none; stroke-width:2; }
.ci-label { font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.ci-val { font-size:14.5px; font-weight:500; color:var(--ink); }
.map-embed {
  margin-top:22px; height:190px; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  background:linear-gradient(135deg,#e3eeff,#f0f4ff);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--muted); gap:8px;
}
.contact-form-box {
  background:#fff; border-radius:var(--radius-lg);
  padding:36px; border:1px solid var(--border); box-shadow:var(--shadow-sm);
}

/* ============================================================
   ░░ FOOTER ░░
============================================================ */
footer {
  background:#080810; color:rgba(255,255,255,.55);
  padding:72px 0 0;
}
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand-name { font-family:'DM Serif Display',serif; font-size:20px; color:#fff; }
.footer-p { font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.38); margin-top:14px; max-width:250px; }
.soc-links { display:flex; gap:8px; margin-top:22px; }
.soc-link {
  width:36px; height:36px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.45); transition:.22s;
}
.soc-link:hover { background:var(--red); border-color:var(--red); color:#fff; }
.foot-col h4 {
  font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:rgba(255,255,255,.9); margin-bottom:18px;
}
.foot-links { display:flex; flex-direction:column; gap:9px; }
.foot-links a { font-size:13.5px; color:rgba(255,255,255,.38); transition:.2s; }
.foot-links a:hover { color:#fff; padding-left:4px; }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; font-size:12.5px; flex-wrap:wrap; gap:14px;
}
.footer-bottom a { color:var(--red); }

/* ============================================================
   ░░ FADE-IN ANIMATION ░░
============================================================ */
.fade { opacity:0; transform:translateY(22px); transition:opacity .6s,transform .6s; }
.fade.in { opacity:1; transform:translateY(0); }

/* ============================================================
   ░░ SUCCESS MODAL ░░
============================================================ */
.modal-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:9999;
  align-items:center; justify-content:center;
}
.modal-bg.open { display:flex; }
.modal-box {
  background:#fff; border-radius:20px; padding:44px 36px;
  max-width:380px; width:90%; text-align:center;
  box-shadow:0 32px 80px rgba(0,0,0,.25);
  animation:modalIn .28s var(--ease);
}
@keyframes modalIn { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
.modal-icon {
  width:60px; height:60px; background:#e8f5e9; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-size:26px; color:#2E7D32;
}
.modal-h { font-family:'DM Serif Display',serif; font-size:22px; color:var(--ink); margin-bottom:10px; }
.modal-p { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:24px; }

/* ============================================================
   ░░ RESPONSIVE ░░
============================================================ */
@media(max-width:1024px){
  .footer-top { grid-template-columns:1fr 1fr; }
  .prod-card { flex:0 0 calc(33.333% - 16px); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  .desk-nav, .header-cta .btn:not(.btn-red) { display:none; }
  .hamburger { display:flex; }
  .mobile-drawer { display:block; }
  .drawer-overlay { display:block; }
  .hero-inner, .about-inner, .franchise-inner, .contact-inner { grid-template-columns:1fr; }
  .hero-rhs { display:none; }
  .cert-card { display:none; }
  .about-highlights { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .prod-card { flex:0 0 calc(50% - 12px); }
  .testi-card { flex:0 0 calc(100% - 0px); }
  .blog-grid { grid-template-columns:1fr; }
  .frm-row { grid-template-columns:1fr; }
  .section { padding:64px 0; }
  .prod-header { flex-direction:column; align-items:flex-start; }
}
@media(max-width:560px){
  .stats-grid { grid-template-columns:1fr 1fr; }
  .prod-card { flex:0 0 calc(100% - 0px); }
  .about-highlights { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .trust-strip { flex-direction:column; align-items:flex-start; }
  .cat-tabs { gap:6px; }
}

/* COLOR UTILS */
.bg-r1 { background:linear-gradient(135deg,#fce4ec,#f8bbd0); }
.bg-b1 { background:linear-gradient(135deg,#e3f2fd,#bbdefb); }
.bg-g1 { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.bg-o1 { background:linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-p1 { background:linear-gradient(135deg,#f3e5f5,#e1bee7); }
.bg-c1 { background:linear-gradient(135deg,#e0f7fa,#b2ebf2); }
.bg-y1 { background:linear-gradient(135deg,#fff8e1,#ffecb3); }
.bg-gr { background:linear-gradient(135deg,#fafafa,#eeeeee); }

.av-r { background:linear-gradient(135deg,#C8102E,#9E0B22); }
.av-b { background:linear-gradient(135deg,#1565C0,#0D47A1); }
.av-g { background:linear-gradient(135deg,#2E7D32,#1B5E20); }



@media (max-width: 556px) {
 
  .btn-red {
    display: none;
  }
 
}

.desk-nav > li > a:hover::after {
  transform: scaleX(1);
}

.desk-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #d52e3e;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
 .desk-nav > li > a {
  position: relative;
  display: inline-block;
}
 
@media (max-width: 556px) {
  .why-t {
    font-size: 14px;
}
}