/* ==========================================================================
   DeoDap Dropshipping — Custom Styles
   Design system: dark navy + crimson red + Inter
   Built on Bootstrap 5. Mobile-first.
   ========================================================================== */

   
/* ---------------------------------------------------------------------------
   1. Design tokens
--------------------------------------------------------------------------- */
:root {
  --navy:        #2B2D42;   /* primary text / dark navy            */
  --navy-deep:   #1B1F3B;   /* deep navy for dark sections         */
  --crimson:     #E63950;   /* brand accent crimson red            */
  --crimson-dk:  #c41f37;   /* hover / pressed                     */
  --blush:       #FCEEF0;   /* light blush tint section bg         */
  --grey:        #F5F6FA;   /* light grey alternating section bg   */
  --white:       #ffffff;
  --muted:       #6b6e82;   /* muted body copy                     */
  --muted-light: #9aa0b4;
  --line:        #e7e8f0;   /* hairline borders                    */

  --radius:      16px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  --shadow-sm:  0 4px 14px rgba(27, 31, 59, 0.06);
  --shadow:     0 12px 34px rgba(27, 31, 59, 0.10);
  --shadow-lg:  0 22px 60px rgba(27, 31, 59, 0.16);
  --shadow-crimson: 0 12px 28px rgba(230, 57, 80, 0.32);

  --container: 1200px;
  --header-h:  76px;
  --topbar-h:  42px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;             /* safety net — body alone left html scrollable */
  max-width: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.1; color: var(--navy); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
p { color: var(--muted); }
ul { margin: 0; padding: 0; }

.container { max-width: var(--container); }

/* utility: section padding */
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 92px 0; } }

.bg-grey   { background: var(--grey); }
.bg-blush  { background: var(--blush); }
.bg-navy   { background: var(--navy-deep); color: #fff; }
.bg-navy p { color: rgba(255,255,255,.72); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }

/* ---------------------------------------------------------------------------
   3. Section eyebrow + two-tone headings
--------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--crimson);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }

.display-heading {
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.display-heading .accent { color: var(--crimson); }
/* Legal pages (terms / privacy): tone section headings down to a readable
   sub-heading size instead of the page-title-sized .display-heading. */
.legal-content h2.display-heading { font-size: 1.35rem; margin-top: 2.2rem; margin-bottom: .75rem; }
.legal-content h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: .6rem; }
/* Heading colour follows the section background: dark sections -> white,
   light/white sections keep the default navy. The .accent span keeps its
   crimson colour (set above) on every background. */
.bg-navy .display-heading,
.cta-section .display-heading,
.stat-band .display-heading,
.hero .display-heading,
.page-hero .display-heading { color: #fff; }

.lead-muted { font-size: 1.05rem; color: var(--muted); max-width: 600px; }
.text-center .lead-muted, .lead-muted.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------------------- */
.btn {
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--radius-pill);
  padding: 13px 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  border: 2px solid transparent;
  font-size: .95rem;
}
.btn-crimson {
  background: var(--crimson);
  color: #fff;
  box-shadow: var(--shadow-crimson);
}
.btn-crimson:hover {
  background: var(--crimson-dk);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(230, 57, 80, 0.42);
}
.btn-ghost {
  background: transparent;
  color: var(--crimson);
  border-color: var(--crimson);
}
.btn-ghost:hover { background: var(--crimson); color: #fff; transform: translateY(-3px); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-3px); }

.btn-lg { padding: 16px 38px; font-size: 1rem; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--crimson);
  transition: gap .25s var(--ease);
}
.arrow-link:hover { gap: 14px; color: var(--crimson-dk); }

/* ---------------------------------------------------------------------------
   4b. Top bar
--------------------------------------------------------------------------- */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1060;
  height: var(--topbar-h);
  background: rgba(13,18,36,.98);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center;
}
.top-bar-text {
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-bar-socials { display: flex; gap: 7px; margin-left: auto; flex-shrink: 0; }
.top-bar-socials a {
  width: 27px; height: 27px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); flex-shrink: 0;
  transition: border-color .2s, color .2s, background .2s;
}
.top-bar-socials a:hover { border-color: var(--crimson); color: var(--crimson); background: rgba(230,57,80,.1); }
@media (max-width: 575px) { .top-bar-text { display: none; } }

/* ---------------------------------------------------------------------------
   5. Header
--------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  z-index: 1050;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
  background: transparent;
}
.site-header.solid {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(27,31,59,.08);
}
/* pages without a dark hero start solid */
.site-header.on-light { background: rgba(255,255,255,0.96); box-shadow: 0 2px 18px rgba(27,31,59,.08); }

.logo { display: flex; flex-direction: column; line-height: 1; }
.logo .logo-main {
  font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; color: var(--navy);
}
.logo .logo-main .dot { color: var(--crimson); }
.logo .logo-sub {
  font-size: .62rem; font-weight: 700; letter-spacing: .42em; color: var(--crimson);
  text-transform: uppercase; margin-top: 3px;
}
/* Logo: Deo = contextual colour, Dap = always coral-gradient */
.logo-deo { color: var(--navy); transition: color .35s var(--ease); }
.logo-dap {
  background: linear-gradient(135deg, #ff5c6c 0%, #e23744 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-header:not(.solid):not(.on-light) .logo-deo { color: #fff; }

/* Image logo (replaces the text lockup). Source art has a white background,
   so it sits on a rounded white chip that reads cleanly on dark sections too. */
.logo-img {
  width: 200px; max-width: 56vw; height: auto; display: block;
  background: #fff; border-radius: 8px; padding: 4px 8px;
}
.drawer-head .logo-img { width: 180px; }
.site-footer .logo-img { width: 200px; }
@media (max-width: 575px) { .logo-img { width: 160px; } }

/* ---------------------------------------------------------------------------
   Plan showcase — mirrors dropshipping.deodap.com/plans.php
   (alternating image + content rows on dark rounded cards)
--------------------------------------------------------------------------- */
.plan-section { padding: 2rem 10px; }
.plan-row {
  background: #0D1627;
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(18, 15, 38, .12);
  padding: 4rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
.plan-content h3 { font-size: 32px; font-weight: 700; margin-bottom: .5rem; color: #fff; }
.plan-tagline { font-size: 16px; margin: 0 0 1.2rem; color: #fff; }
.plan-list { padding-left: 1.25rem; margin-bottom: 0; color: #fff; }
.plan-list li { margin-bottom: .6rem; font-size: 15px; line-height: 1.6; }
.plan-image { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px rgba(4, 3, 12, .3); }
.plan-image a { display: block; position: relative; cursor: zoom-in; }
.plan-image img {
  width: 100%; height: 300px; object-fit: cover; display: block;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.plan-image a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .6));
  opacity: 0; transition: opacity .4s ease;
}
.plan-image a:hover img { transform: scale(1.04); filter: brightness(1.08); }
.plan-image a:hover::after { opacity: 1; }
.plan-content-col, .plan-image-col { display: flex; flex-direction: column; }
@media (max-width: 991px) {
  .plan-row { padding: 2rem 1.2rem; flex-wrap: wrap; }
  .plan-image-col { order: -1; margin-bottom: 1.5rem; }
}
@media (max-width: 576px) {
  .plan-row { padding: 2rem 1.2rem; }
  .plan-image img { height: 150px; }
}

.hamburger {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--crimson);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-crimson);
  transition: transform .2s var(--ease);
}
.hamburger:hover { transform: scale(1.06); }
.hamburger svg { width: 22px; height: 22px; }
@media (min-width: 992px) { .hamburger { display: none !important; } }

/* ---------------------------------------------------------------------------
   5b. Desktop inline nav
--------------------------------------------------------------------------- */
.desk-nav-wrap {
  display: none;
  align-items: center;
  gap: 6px;
}
.desk-nav {
  display: flex; list-style: none; gap: 2px; align-items: center; margin: 0; padding: 0;
}
.desk-nav a {
  display: block; padding: 8px 13px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .875rem; letter-spacing: .01em;
  color: rgba(255,255,255,.88); transition: color .2s, background .2s;
  white-space: nowrap;
}
.desk-nav a:hover { color: #fff; background: rgba(255,255,255,.13); }
.desk-nav a.active { color: var(--crimson); }
/* Solid-state (scrolled or inner page) */
.site-header.solid .desk-nav a,
.site-header.on-light .desk-nav a { color: var(--navy); }
.site-header.solid .desk-nav a:hover,
.site-header.on-light .desk-nav a:hover { background: var(--grey); color: var(--navy); }
.site-header.solid .desk-nav a.active,
.site-header.on-light .desk-nav a.active { color: var(--crimson); }
.desk-cta { font-size: .85rem !important; padding: 9px 22px !important; margin-left: 14px; flex-shrink: 0; }
@media (min-width: 992px) { .desk-nav-wrap { display: flex; } }

/* ---------------------------------------------------------------------------
   6. Slide-in drawer menu
--------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(27,31,59,.55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  z-index: 1090;
}
.menu-overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: var(--navy-deep);
  z-index: 1100;
  transform: translateX(105%);
  transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
  padding: 28px 30px;
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
}
.drawer.open { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.drawer-head .logo .logo-main { color: #fff; }
.drawer-close {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: none; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.drawer-close:hover { background: var(--crimson); }

.drawer-nav { list-style: none; }
.drawer-nav li { margin-bottom: 4px; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.82);
  font-weight: 700; font-size: 1.05rem;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s, padding-left .25s var(--ease);
}
.drawer-nav a::after { content: "→"; opacity: 0; transition: opacity .2s; }
.drawer-nav a:hover { color: #fff; padding-left: 12px; }
.drawer-nav a:hover::after { opacity: .6; }
.drawer-nav a.active { color: var(--crimson); }

.drawer-social { display: flex; gap: 12px; margin-top: auto; padding-top: 28px; }
.drawer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.drawer-social a:hover { background: var(--crimson); transform: translateY(-3px); }

/* ---------------------------------------------------------------------------
   7. Hero  —  V1 DISABLED (replaced by "HERO V2" at end of file).
   Wrapped in a never-matching @media so the old rules are preserved but
   never applied, and the new image-bg hero fully takes over.
--------------------------------------------------------------------------- */
@media (max-width: 0px) { /* ↓↓↓ HERO V1 DISABLED ↓↓↓ */
.hero {
  background: var(--navy-deep); /* fallback */
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--topbar-h) + var(--header-h) + 50px);
  padding-bottom: 64px;
}
/* dot-grid texture for depth */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.034) 1px, transparent 0);
  background-size: 28px 28px;
}
.hero::after { display: none; }
/* background image slider */
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero-slide.active { opacity: 1; }
/* slide colour palettes — simulate lifestyle photography */
.hs-amber {
  background:
    radial-gradient(ellipse at 76% 34%, rgba(220,90,30,.7) 0%, transparent 52%),
    linear-gradient(140deg, #1a0800 0%, #4a1c06 32%, #a03a10 66%, #c85520 100%);
}
.hs-ocean {
  background:
    radial-gradient(ellipse at 70% 38%, rgba(30,114,168,.65) 0%, transparent 52%),
    linear-gradient(140deg, #010d1a 0%, #0b2540 32%, #155080 66%, #1e72a8 100%);
}
.hs-brand {
  background:
    radial-gradient(ellipse at 72% 36%, rgba(230,57,80,.65) 0%, transparent 52%),
    linear-gradient(140deg, #130209 0%, #3a0415 32%, #8c1028 66%, #e63950 100%);
}
.hs-forest {
  background:
    radial-gradient(ellipse at 68% 40%, rgba(41,163,72,.6) 0%, transparent 52%),
    linear-gradient(140deg, #030b05 0%, #0c2e14 32%, #1b6630 66%, #29a348 100%);
}
/* semi-transparent overlay — symmetric so centered content reads evenly on top */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg,
    rgba(27,31,59,.88) 0%,
    rgba(27,31,59,.74) 50%,
    rgba(27,31,59,.88) 100%);
}
/* hero content slides — grid-stacked, fade + lift in */
.hero-slides-wrap { display: grid; grid-template-areas: 'slide'; }
.hero-content {
  grid-area: slide;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s .8s;
  pointer-events: none;
}
.hero-content.active {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s 0s;
}
/* pill badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92); font-size: .84rem; font-weight: 700;
  padding: 8px 18px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.hero-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--crimson); box-shadow: 0 0 0 3px rgba(230,57,80,.32);
  animation: badge-pulse 2.2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(230,57,80,.32); }
  50% { box-shadow: 0 0 0 7px rgba(230,57,80,.08); }
}
/* coral-gradient headline accent */
.gradient-text {
  background: linear-gradient(135deg, #ff5c6c 0%, #e23744 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* stat chips */
.stat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.stat-chip {
  background: rgba(255,255,255,.09); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.82); font-size: .8rem; font-weight: 700;
  padding: 7px 16px; border-radius: var(--radius-pill);
}
/* slider nav */
.hero-nav { display: flex; align-items: center; gap: 14px; margin-top: 38px; }
.hero-arrow-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .22s var(--ease); flex-shrink: 0;
}
.hero-arrow-btn:hover { background: var(--crimson); border-color: var(--crimson); transform: scale(1.06); }

.hero .container { position: relative; z-index: 3; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.82); }

/* centered hero layout — content sits centred on top of the slide background */
.hero-centered { text-align: center; }
.hero-centered .hero-content p { margin-left: auto; margin-right: auto; }
.hero-centered .hero-content > .d-flex { justify-content: center; }
.hero-centered .stat-chips { justify-content: center; }
.hero-centered .hero-nav { justify-content: center; }

.trust-line { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: rgba(255,255,255,.7); }
.trust-line .avatars { display: flex; }
.trust-line .avatars span {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--navy-deep);
  margin-left: -8px; background: linear-gradient(135deg, var(--crimson), #ff6b81);
  display: inline-block;
}

/* phone mockup */
.phone-mock {
  width: 250px; max-width: 70vw;
  aspect-ratio: 250 / 510;
  margin: 0 auto;
  background: linear-gradient(160deg, #2c3157, #1b1f3b);
  border-radius: 38px;
  border: 8px solid #0f1228;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.05);
  position: relative;
  padding: 18px 14px;
}
.phone-mock::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; background: #0f1228; border-radius: 0 0 14px 14px;
}
.phone-screen { height: 100%; border-radius: 26px; background: linear-gradient(170deg,#fff, #f1f2f8); overflow: hidden; padding: 30px 16px 16px; }
.phone-bar { height: 10px; border-radius: 6px; background: var(--grey); margin-bottom: 10px; }
.phone-bar.short { width: 55%; }
.phone-bar.accent { background: var(--crimson); width: 40%; height: 14px; }
.phone-card { background: var(--grey); border-radius: 12px; height: 70px; margin-bottom: 10px; }
.phone-card.tall { height: 110px; }

/* dot slider */
.dot-slider { display: flex; gap: 8px; }
.dot-slider .dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; transition: all .25s;
}
.dot-slider .dot.active { background: var(--crimson); width: 26px; border-radius: 6px; }
} /* ↑↑↑ HERO V1 DISABLED ↑↑↑ */

/* ---------------------------------------------------------------------------
   8. Page sub-hero (inner pages)
--------------------------------------------------------------------------- */
.page-hero {
  background: var(--navy-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: calc(var(--topbar-h) + var(--header-h) + 56px) 0 64px;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 80% -10%, rgba(230,57,80,.28), transparent 60%);
}
.page-hero.with-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(27,31,59,.94) 38%, rgba(27,31,59,.5)),
              repeating-linear-gradient(45deg,#23284a,#23284a 22px,#262c52 22px,#262c52 44px);
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.4rem); text-transform: uppercase; }

.breadcrumb-bar { display: flex; gap: 8px; font-size: .88rem; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.breadcrumb-bar a:hover { color: var(--crimson); }
.breadcrumb-bar .sep { opacity: .5; }
.breadcrumb-bar .current { color: var(--crimson); }

/* ---------------------------------------------------------------------------
   9. Cards
--------------------------------------------------------------------------- */
.feature-card, .service-card, .info-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.feature-card:hover, .service-card:hover, .info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.icon-badge {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--blush);
  color: var(--crimson);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: background .3s, color .3s;
}
.icon-badge svg { width: 28px; height: 28px; }
.feature-card:hover .icon-badge, .service-card:hover .icon-badge {
  background: var(--crimson); color: #fff;
}
.card-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.card-text { color: var(--muted); font-size: .95rem; margin: 0; }

/* numbered service plan card (about) */
.plan-num-card {
  background: #fff; border-radius: var(--radius); padding: 28px 26px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 100%;
  position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan-num-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan-num-card .num {
  font-size: 2.4rem; font-weight: 900; color: var(--blush); line-height: 1;
  position: absolute; top: 20px; right: 24px;
}
.plan-num-card:hover .num { color: rgba(230,57,80,.18); }

/* ---------------------------------------------------------------------------
   10. CTA strips
--------------------------------------------------------------------------- */
.cta-strip {
  background: var(--navy-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: ""; position: absolute; top: -80px; right: -40px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,80,.35), transparent 70%);
}
.cta-strip .container, .cta-strip > * { position: relative; z-index: 2; }
.cta-strip h2, .cta-strip h3 { color: #fff; }

/* limited-offer CTA: badge + struck price + daily countdown timer */
.cta-offer-badge {
  display: inline-block; font-size: .74rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: var(--crimson); padding: 5px 13px; border-radius: 999px;
}
.cta-price-old {
  font-size: 1.05rem; font-weight: 700; text-decoration: line-through;
  color: rgba(255,255,255,.5); margin-left: 6px;
}
.cta-price-free { font-size: 1.05rem; font-weight: 900; color: #4ade80; margin-left: 2px; }

.cta-offer-side { min-width: 240px; }
.cta-timer {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 12px 14px;
}
.cta-time-unit { display: flex; flex-direction: column; align-items: center; min-width: 50px; }
.cta-time-unit span {
  font-size: 1.7rem; font-weight: 900; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.cta-time-unit small {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: 5px;
}
.cta-time-sep { font-size: 1.4rem; font-weight: 800; color: rgba(255,255,255,.4); margin-top: 2px; }

.cta-section { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.cta-section::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 50% 120%, rgba(230,57,80,.3), transparent 60%);
}
.cta-section .container { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------------
   11. Steps / process flow
--------------------------------------------------------------------------- */
.flow {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 768px) { .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; } }
.flow-step {
  background: #fff; border-radius: var(--radius); padding: 26px 22px; text-align: center;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.flow-step .step-icon {
  width: 60px; height: 60px; border-radius: 16px; 
  /* margin: 0 auto 16px; */
  background: var(--blush); color: var(--crimson);
  display: inline-flex; align-items: center; justify-content: center;
}
.flow-step .step-icon svg { width: 30px; height: 30px; }
.flow-step h4 { font-size: 1.05rem; margin-bottom: 6px; }
.flow-step p { font-size: .9rem; margin: 0; }
.flow-arrow { color: var(--crimson); display: flex; justify-content: center; font-size: 1.6rem; }
@media (max-width: 767px) { .flow-arrow { transform: rotate(90deg); } }

/* numbered steps (how it works) */
.step-row { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .step-row { grid-template-columns: repeat(4, 1fr); } }
.step-block { text-align: center; position: relative; }
.step-block .circle {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--crimson); color: #fff; font-size: 1.6rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-crimson);
}
.step-block h4 { font-size: 1.1rem; margin-bottom: 8px; }
.step-block p { font-size: .92rem; }

/* plan pills */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-block; padding: 9px 18px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .88rem; color: var(--navy);
  transition: all .2s;
}
.pill:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); transform: translateY(-2px); }

/* ---------------------------------------------------------------------------
   12. Webinar / countdown
--------------------------------------------------------------------------- */
.check-list { list-style: none; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-weight: 600; color: var(--navy); }
.bg-navy .check-list li { color: rgba(255,255,255,.9); }
.check-list .tick {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--crimson); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; margin-top: 2px;
}
.countdown { display: flex; gap: 12px; }
.countdown .unit {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px 10px; text-align: center; min-width: 76px;
}
.countdown .unit .num { font-size: 2.1rem; font-weight: 900; color: #fff; line-height: 1; }
.countdown .unit .lbl { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; }

/* ---------------------------------------------------------------------------
   13. Clients marquee
--------------------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 70px; width: max-content; animation: marquee 22s linear infinite; }
.marquee-track .client {
  display: inline-flex; align-items: center; justify-content: center; height: 56px;
  opacity: .75; transition: opacity .2s;
}
.marquee-track .client img {
  max-height: 56px; width: auto; max-width: 180px; object-fit: contain; display: block;
}
.marquee-track .client:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   14. Testimonials
--------------------------------------------------------------------------- */
/* carousel wrapper: viewport flanked by left/right nav arrows */
.testi-carousel { position: relative; }
.testi-viewport { overflow: hidden; padding: 14px 0; }
.testi-track { display: flex; transition: transform .5s var(--ease); }

.testi-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  box-shadow: var(--shadow);
}
.testi-nav-prev { left: -22px; }
.testi-nav-next { right: -22px; }
.testi-carousel .testi-nav:hover { transform: translateY(-50%) scale(1.06); }
/* on narrow screens keep the arrows on-screen, overlapping the slide edges */
@media (max-width: 991.98px){
  .testi-nav-prev { left: -6px; }
  .testi-nav-next { right: -6px; }
}
@media (max-width: 575.98px){
  .testi-nav-prev { left: 4px; }
  .testi-nav-next { right: 4px; }
}
/* 1 slide on mobile, 2 on tablet, 3 on desktop */
.testi-slide { min-width: 100%; padding: 0 10px; box-sizing: border-box; }
@media (min-width: 576px){ .testi-slide { min-width: 50%; } }
@media (min-width: 992px){ .testi-slide { min-width: 33.3333%; } }

.testi-vid {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 5px solid var(--navy-deep);
  aspect-ratio: 1 / 1; background: linear-gradient(150deg, #2c3157, #1b1f3b);
  max-width: 300px; margin: 0 auto;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.testi-vid:hover {
  border-color: var(--crimson);
  box-shadow: var(--shadow-crimson);
  transform: translateY(-6px);
}
.testi-vid img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* YouTube Shorts thumbnails are landscape with blurred side pillars around the
     vertical frame — zoom in so those bars are cropped and the video fills the square. */
  transform: scale(1.75);
  transition: transform .45s var(--ease);
}
.testi-vid:hover img { transform: scale(1.85); }
.testi-vid::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.5));
}
.testi-vid .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85); z-index: 2;
  width: 64px; height: 64px; border-radius: 50%; background: var(--crimson); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-crimson);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
}
.testi-vid:hover .play { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* Square testimonial player in the VenoBox lightbox, with rounded corners. */
.vbox-content .venoframe,
.vbox-content .vbox-inline,
.vbox-content iframe {
  border-radius: var(--radius);
  overflow: hidden;
}

.carousel-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line);
  background: #fff; color: var(--navy); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease);
}
.carousel-btn:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); transform: translateY(-2px); }

/* ---------------------------------------------------------------------------
   15. Stats / counters
--------------------------------------------------------------------------- */
.stat-band { background: var(--navy-deep); color: #fff; }
.stat { text-align: center; }
.stat .num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #fff; line-height: 1; }
.stat .num .accent { color: var(--crimson); }
.stat .lbl { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 8px; }
.stat-band .stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.1); }
@media (max-width: 767px){ .stat-band .stat { border-right: none !important; } }

.stat-light .num { color: var(--navy); }
.stat-light .num .accent { color: var(--crimson); }
.stat-light .lbl { color: var(--muted); }

/* ---------------------------------------------------------------------------
   16. Timeline (about)
--------------------------------------------------------------------------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 0; }
.timeline::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--line);
}
@media (min-width: 768px){ .timeline::before { left: 50%; transform: translateX(-50%); } }
.tl-item { position: relative; padding: 0 0 36px 56px; }
@media (min-width: 768px){
  .tl-item { width: 50%; padding: 0 40px 46px 40px; }
  .tl-item:nth-child(odd) { left: 0; text-align: right; }
  .tl-item:nth-child(even) { left: 50%; }
}
.tl-dot {
  position: absolute; left: 11px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--crimson); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--crimson);
}
@media (min-width: 768px){
  .tl-item:nth-child(odd) .tl-dot { left: auto; right: -9px; }
  .tl-item:nth-child(even) .tl-dot { left: -9px; }
}
.tl-year { font-size: 1.3rem; font-weight: 900; color: var(--crimson); }
.tl-card { background: #fff; border:1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-sm); margin-top: 8px; }
.tl-card h4 { font-size: 1.05rem; margin-bottom: 6px; }
.tl-card p { font-size: .9rem; margin: 0; }

/* ---------------------------------------------------------------------------
   17. Pricing cards
--------------------------------------------------------------------------- */
.price-card {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); padding: 32px 28px; height: 100%;
  display: flex; flex-direction: column; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.price-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.price-card.popular { border: 2px solid var(--crimson); box-shadow: var(--shadow); }
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--crimson); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  padding: 6px 16px; border-radius: var(--radius-pill); text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--shadow-crimson);
}
.price-card .plan-name { font-size: 1.2rem; font-weight: 800; }
.price-card .plan-tag { font-size: .85rem; color: var(--muted); margin-bottom: 18px; min-height: 38px; }
.price-card .price { font-size: 2.2rem; font-weight: 900; color: var(--navy); }
.price-card .price .cur { font-size: 1.2rem; vertical-align: super; }
.price-card .price-sub { font-size: .8rem; color: var(--muted); margin-bottom: 20px; }
.price-card .feat { list-style: none; margin-bottom: 24px; flex-grow: 1; }
.price-card .feat li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--navy); margin-bottom: 12px; }
.price-card .feat .tick { color: var(--crimson); flex: 0 0 auto; margin-top: 3px; }
.price-card .btn { width: 100%; }

/* ---------------------------------------------------------------------------
   18. Comparison table
--------------------------------------------------------------------------- */
.compare-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: .9rem; }
.compare-table thead th { background: var(--navy-deep); color: #fff; font-size: .85rem; position: sticky; top: 0; }
.compare-table thead th:first-child { text-align: left; border-top-left-radius: var(--radius); }
.compare-table tbody td:first-child, .compare-table tbody th:first-child { text-align: left; font-weight: 700; color: var(--navy); }
.compare-table tbody tr:nth-child(even) { background: var(--grey); }
.compare-table .yes { color: #18a558; font-weight: 800; }
.compare-table .no { color: #cdd0dd; font-weight: 800; }
.compare-table .price-row td { font-weight: 900; color: var(--crimson); }
.compare-table .popular-col { background: rgba(230,57,80,.06); }

/* ---------------------------------------------------------------------------
   19. Category & product cards (products)
--------------------------------------------------------------------------- */
.cat-card {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); padding: 26px 24px; height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.cat-card .icon-badge { margin-bottom: 22px; }
.cat-card .cat-count { display: block; color: var(--crimson); font-weight: 800; font-size: .72rem; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; }
.cat-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.cat-card p { font-size: .88rem; margin: 0; }
a.cat-card { display: block; text-decoration: none; color: inherit; }
a.cat-card:hover { color: inherit; }

.product-card {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); overflow: hidden; height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-thumb {
  aspect-ratio: 4/3; background: linear-gradient(145deg, var(--blush), #fff);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.product-thumb svg { width: 64px; height: 64px; color: var(--crimson); opacity: .55; }
.product-thumb .tag {
  position: absolute; top: 12px; left: 12px; background: var(--navy-deep); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 5px 12px; border-radius: var(--radius-pill);
}
.product-body { padding: 20px 20px 24px; }
.product-body h4 { font-size: 1.02rem; margin-bottom: 8px; min-height: 48px; }
.product-body .price { color: var(--crimson); font-weight: 900; font-size: 1.15rem; margin-bottom: 14px; }
.product-body .price small { color: var(--muted); font-weight: 600; font-size: .72rem; }

/* ---------------------------------------------------------------------------
   20. FAQ accordion + filter
--------------------------------------------------------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-pill {
  padding: 10px 22px; border-radius: var(--radius-pill); border: 2px solid var(--line);
  background: #fff; font-weight: 700; font-size: .9rem; color: var(--navy); cursor: pointer; transition: all .2s;
}
.filter-pill:hover { border-color: var(--crimson); color: var(--crimson); }
.filter-pill.active { background: var(--crimson); color: #fff; border-color: var(--crimson); }

.accordion-list { max-width: 820px; margin: 0 auto; }
.acc-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.acc-item.open { box-shadow: var(--shadow); border-color: transparent; }
.acc-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; font-weight: 700; color: var(--navy); font-size: 1.02rem;
}
.acc-q .ico { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--blush); color: var(--crimson);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .3s var(--ease), background .2s, color .2s; }
.acc-item.open .acc-q .ico { background: var(--crimson); color: #fff; transform: rotate(45deg); }
.acc-a { display: grid; grid-template-rows: 0fr; }
.acc-item.open .acc-a { grid-template-rows: 1fr; }
.acc-a-inner { overflow: hidden; min-height: 0; padding: 0 24px; color: var(--muted); opacity: 0; transition: opacity .3s var(--ease); }
.acc-item.open .acc-a-inner { padding: 0 24px 22px; opacity: 1; }

/* ---------------------------------------------------------------------------
   21. Contact form
--------------------------------------------------------------------------- */
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 32px; border: 1px solid var(--line); }
.form-label { font-weight: 700; font-size: .88rem; color: var(--navy); margin-bottom: 6px; }
.form-label .req { color: var(--crimson); }
.form-control, .form-select {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(230,57,80,.12); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--crimson); }
.field-error { color: var(--crimson); font-size: .8rem; margin-top: 5px; display: none; }
.form-success {
  display: none; background: #eafaf0; border: 1px solid #b6e8c8; color: #18794e;
  border-radius: var(--radius-sm); padding: 14px 18px; font-weight: 600; margin-bottom: 20px;
}
.form-error-banner {
  background: #fdecee; border: 1px solid #f5c2c7; color: #b02a37;
  border-radius: var(--radius-sm); padding: 14px 18px; font-weight: 600; margin-bottom: 20px;
}

.contact-info-card { background: var(--navy-deep); color: #fff; border-radius: var(--radius); padding: 36px 32px; height: 100%; }
.contact-info-card h3 { color: #fff; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.contact-row .ci {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.08);
  color: var(--crimson); display: inline-flex; align-items: center; justify-content: center;
}
.contact-row .ci svg { width: 22px; height: 22px; }
.contact-row .lbl { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 3px; }
.contact-row .val { color: #fff; font-weight: 600; }
.contact-row .val a { color: #fff; }
.contact-row .val a:hover { color: var(--crimson); }

.map-placeholder {
  border-radius: var(--radius); overflow: hidden; height: 380px; min-height: 240px; position: relative;
  background:
    linear-gradient(135deg, rgba(230,57,80,.06), transparent),
    repeating-linear-gradient(0deg,#eef0f6,#eef0f6 1px,transparent 1px,transparent 40px),
    repeating-linear-gradient(90deg,#eef0f6,#eef0f6 1px,transparent 1px,transparent 40px),
    #f5f6fa;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  border: 1px solid var(--line);
}
.map-placeholder .pin { color: var(--crimson); }
/* iframe fills the box edge-to-edge and is clipped by the rounded corners */
.map-placeholder iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; border-radius: inherit;
}
@media (max-width: 575.98px) { .map-placeholder { height: 300px; } }

.action-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px; text-align: center;
  box-shadow: var(--shadow-sm); height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.action-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.action-card .ico-circle {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; background: var(--blush); color: var(--crimson);
  display: flex; align-items: center; justify-content: center;
}
.action-card .ico-circle svg { width: 30px; height: 30px; }

/* contact / faq quick badges */
.badge-soft { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); color: #fff;
  padding: 8px 16px; border-radius: var(--radius-pill); font-size: .85rem; font-weight: 600; }
.badge-soft .tick { color: var(--crimson); }

/* ---------------------------------------------------------------------------
   22. Footer
--------------------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.7); padding-top: 64px; }
.site-footer .logo .logo-main { color: #fff; }
.site-footer h5 { color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 20px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: rgba(255,255,255,.7); transition: color .2s, padding-left .2s; font-size: .94rem; }
.footer-links a:hover { color: var(--crimson); padding-left: 5px; }
.footer-contact { font-size: .92rem; line-height: 1.7; }
.footer-contact a:hover { color: var(--crimson); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.footer-social a:hover { background: var(--crimson); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding: 22px 0; font-size: .88rem; }

/* ---------------------------------------------------------------------------
   23. Floating WhatsApp
--------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 1080;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,.45);
  transition: transform .25s var(--ease);
  animation: wa-pulse 2.4s infinite;
}
.wa-float:hover { transform: scale(1.1); color: #fff; }
.wa-float svg { width: 32px; height: 32px; }
@keyframes wa-pulse {
  0% { box-shadow: 0 12px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 12px 30px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 12px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------------------------------------------------------------------------
   24. Reveal-on-scroll
--------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* small helpers */
.text-crimson { color: var(--crimson) !important; }
.fw-900 { font-weight: 900; }
.rounded-img { border-radius: var(--radius); box-shadow: var(--shadow); }
.section-head { max-width: 680px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   HERO V2 — image background + dark overlay Swiper slider
   Ported from /banner (section 26 "Background Image + Overlay") and wired to
   this site's design tokens. Replaces the disabled "7. Hero" block above.
   ========================================================================== */
.hero-section {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  height: 100vh;
  min-height: 600px;
}
.hero-swiper { width: 100%; height: 100%; }
.hero-swiper .swiper-wrapper { height: 100%; }
.hero-swiper .swiper-slide {
  height: 100% !important;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* slide layers: background photo + dark gradient overlay + content */
.hero-slide-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-slide-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg,
    rgba(27,31,59,.93) 0%,
    rgba(27,31,59,.80) 48%,
    rgba(27,31,59,.42) 100%);
}
.hero-slide-content {
  position: relative; z-index: 2; width: 100%;
  padding: calc(var(--topbar-h) + var(--header-h) + 36px) 0 80px;
}
/* content wrapper (resets the disabled V1 .hero-slide absolute/opacity rules) */
.hero-section .hero-slide {
  width: 100%; padding: 0;
  position: relative; inset: auto; opacity: 1;
  background: none; transition: none;
}

/* badge */
.hero-section .hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.2);
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 600; margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.hero-section .hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--crimson); box-shadow: none;
  animation: hero2-pulse 2s infinite;
}
@keyframes hero2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

/* headline + sub */
.hero-section .hero-h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800; line-height: 1.1; letter-spacing: -1px;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.25);
  margin-bottom: 20px;
}
.hero-section .gradient-text {
  background: linear-gradient(135deg, #ff5c6c 0%, #e23744 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-section .hero-sub {
  font-size: 17px; color: rgba(255,255,255,.78);
  max-width: 520px; margin-bottom: 34px; line-height: 1.75;
}

/* CTA group + trust pills */
.hero-cta-group {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-bottom: 40px;
}
.hero-trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-section .trust-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: 13px; font-weight: 500;
}

/* buttons (ported from banner) */
.hero-section .btn-primary-custom {
  background: linear-gradient(135deg, #ff5c6c 0%, #e23744 100%);
  color: #fff; border: none;
  padding: 13px 34px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; letter-spacing: .3px;
  box-shadow: var(--shadow-crimson);
  transition: all .25s var(--ease);
  display: inline-block; cursor: pointer; text-decoration: none;
}
.hero-section .btn-primary-custom:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(230,57,80,.55);
  color: #fff;
}
.hero-section .btn-outline-custom {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.5);
  padding: 11px 32px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px;
  transition: all .25s var(--ease);
  display: inline-block; cursor: pointer; text-decoration: none;
}
.hero-section .btn-outline-custom:hover {
  background: #fff; color: var(--navy-deep); border-color: #fff;
  transform: translateY(-3px);
}

/* frosted glass stats panel */
.hero-glass-panel {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 32px 28px; max-width: 300px; margin-left: auto;
}
.hgp-stat { text-align: center; padding: 18px 0; }
.hgp-stat:first-child { padding-top: 4px; }
.hgp-stat:last-child  { padding-bottom: 4px; }
.hgp-divider { height: 1px; background: rgba(255,255,255,.12); }
.hgp-icon { font-size: 30px; margin-bottom: 8px; }
.hgp-val {
  font-size: 28px; font-weight: 800; color: #fff;
  line-height: 1; margin-bottom: 4px;
}
.hgp-lbl { font-size: 12.5px; color: rgba(255,255,255,.58); font-weight: 500; }

/* pagination */
.hero-swiper .swiper-pagination { bottom: 30px; }
.hero-swiper .swiper-pagination-bullet {
  width: 8px; height: 8px; background: rgba(255,255,255,.45);
  opacity: 1; transition: all .25s var(--ease);
}
.hero-swiper .swiper-pagination-bullet-active {
  background: var(--crimson); width: 26px; border-radius: 4px;
}

/* responsive */
@media (max-width: 991.98px) {
  .hero-section { height: auto; min-height: 0; }
  .hero-slide-content { padding: calc(var(--topbar-h) + var(--header-h) + 40px) 0 70px; }
  .hero-glass-panel { display: none; }
}
@media (max-width: 575.98px) {
  .hero-section .hero-h1 { font-size: 30px; letter-spacing: -.5px; }
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-section .btn-primary-custom,
  .hero-section .btn-outline-custom { text-align: center; }
}

/* ---------------------------------------------------------------------------
   Profit margin calculator  (#profit-calculator)
   Mirrors res/profit_calculator (1).xlsx
--------------------------------------------------------------------------- */
/* compact section so the calculator fits in roughly one viewport */
#profit-calculator.section { padding: 44px 0; }
#profit-calculator .section-head { margin-bottom: 24px !important; }
#profit-calculator .display-heading { font-size: clamp(26px, 4vw, 38px); }
#profit-calculator .lead-muted { font-size: .98rem; }

.pc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  height: 100%;
}

/* coloured section header bar (mirrors the Excel section rows) */
.pc-section-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crimson);
  background: var(--blush);
  border-left: 3px solid var(--crimson);
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.pc-section-label span { color: var(--navy); }

/* ---- inputs ---- */
.pc-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
}
.pc-field-group { display: flex; flex-direction: column; }
.pc-field-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-field {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  background: #fffdf5;            /* "yellow cell" feel from the sheet */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pc-field:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(230, 57, 80, .12);
  background: #fff;
}
select.pc-field { cursor: pointer; }
.pc-help {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted-light);
}

/* info tooltip */
.pc-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  font-size: 11px;
  color: var(--crimson);
  cursor: help;
  border-radius: 50%;
}
.pc-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 210px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 5;
  pointer-events: none;
}
.pc-info:hover .pc-tooltip,
.pc-info:focus .pc-tooltip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ---- sliders ---- */
.pc-slider-group { margin-top: 14px; }
.pc-slider-group label {
  font-size: 13px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.pc-slider-val {
  margin-left: auto;
  font-weight: 800;
  color: var(--crimson);
  background: var(--blush);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.pc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px;
  background: var(--line); outline: none; cursor: pointer;
}
.pc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--crimson); border: 3px solid #fff;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.pc-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--crimson); border: 3px solid #fff;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.pc-ticks {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--muted-light);
}

/* ---- results / headline ---- */
.pc-results { display: flex; flex-direction: column; }
.pc-profit-block {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 16px;
}
.pc-profit-label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.pc-profit-value {
  display: block;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 900; line-height: 1.05;
  margin: 4px 0 3px;
  color: #fff;
}
.pc-profit-sub { display: block; font-size: 12px; color: rgba(255,255,255,.62); }

/* compact key-stat strip in the right results box */
.pc-stats-mini {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.pc-stats-mini .pc-stat { padding: 10px; text-align: center; }
.pc-stats-mini .pc-stat-label { font-size: 11px; }
.pc-stats-mini .pc-stat-value { font-size: 18px; margin-top: 2px; }

/* ---- breakdown / line-item lists ---- */
.pc-breakdown { list-style: none; margin: 0; padding: 0; }
.pc-breakdown li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.pc-breakdown-tight li { padding: 6px 0; font-size: 13.5px; }
.pc-breakdown li:last-child { border-bottom: none; }
.pc-breakdown li span:last-child { font-weight: 800; white-space: nowrap; }
.pc-breakdown li em {
  display: block; font-style: normal; font-weight: 500;
  font-size: 11.5px; color: var(--muted-light); margin-top: 2px;
}
.pc-breakdown .pc-deduct span:last-child { color: var(--crimson); }
.pc-breakdown .pc-subtotal {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 4px; font-weight: 800;
}
.pc-breakdown .pc-net {
  margin-top: 6px; padding-top: 14px;
  border-top: 2px solid var(--navy);
  font-size: 16px; font-weight: 900;
}
.pc-breakdown .pc-net span:last-child { color: #1a8f4c; }

/* ---- order-flow tiles ---- */
.pc-flow-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.pc-tile {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; background: var(--grey);
}
.pc-tile-accent { background: var(--blush); border-color: rgba(230,57,80,.25); }
.pc-tile-val { display: block; font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1; }
.pc-tile-accent .pc-tile-val { color: var(--crimson); }
.pc-tile-label { display: block; font-size: 13px; font-weight: 700; margin-top: 6px; color: var(--navy); }
.pc-tile-sub { display: block; font-size: 11.5px; color: var(--muted-light); margin-top: 3px; }

/* ---- monthly metric cards (8 tiles) ---- */
.pc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.pc-stat {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; background: var(--grey); text-align: left;
}
.pc-stat-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pc-stat-label em { font-style: normal; color: var(--muted-light); }
.pc-stat-value { display: block; font-size: 22px; font-weight: 900; color: var(--navy); margin-top: 4px; }

/* ---- break-even + CTA ---- */
.pc-breakeven-card { display: flex; flex-direction: column; }
.pc-breakeven-line { font-size: 18px; font-weight: 700; color: var(--navy); margin: 4px 0 8px; }
.pc-breakeven-num { color: var(--crimson); font-weight: 900; font-size: 1.35em; }
.pc-breakeven-note { font-size: 13.5px; }
.pc-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }
.pc-cta-row .btn { flex: 1 1 auto; }
.pc-disclaimer { font-size: 11.5px; color: var(--muted-light); margin: 14px 0 0; line-height: 1.5; }

/* ---- full-breakdown toggle + collapsible detail ---- */
.pc-details-toggle {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--navy);
  font-weight: 700; font-size: 13.5px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pc-details-toggle:hover { border-color: var(--crimson); color: var(--crimson); }
.pc-details[hidden] { display: none; }
.pc-details { margin-top: 4px; }

/* ---- design note ---- */
.pc-note {
  background: #fffaf0;
  border: 1px dashed rgba(230,57,80,.35);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.pc-note strong { color: var(--navy); }
.pc-note span { color: var(--crimson); font-weight: 800; }
.pc-note em { font-style: italic; }

/* ---- responsive ---- */
@media (max-width: 575.98px) {
  .pc-card { padding: 16px; }
  .pc-inputs { grid-template-columns: repeat(2, 1fr); }
  .pc-stats { grid-template-columns: repeat(2, 1fr); }
  .pc-stats-mini { grid-template-columns: repeat(2, 1fr); }
  .pc-flow-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   25. Mobile fixes (<= 575.98px)
   Everything below exists to keep the document exactly as wide as the viewport
   at 320/360/390px and to keep the floating WhatsApp button clear of the
   footer. Measured offenders were: the .pc-tooltip bubbles (+70px), the
   .row.g-5 negative gutters (+12px) and the 4-up webinar countdown (+18px).
--------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* -- 1. Bootstrap g-5 rows -------------------------------------------------
     g-5 = 3rem gutter => row margin -24px each side, but .container only pads
     12px, so the row box hangs 12px past the viewport on both edges. Dropping
     the gutter to 1.5rem on mobile makes the negative margin cancel the
     container padding exactly (same as switching the row to g-3). */
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }

  /* hero specifically: keep the columns padded even though the row is flush */
  .hero-section .row { margin-left: 0; margin-right: 0; }
  .hero-section .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

  /* -- 2. Profit-calculator tooltips ----------------------------------------
     210px bubbles centred on a 16px icon shot ~70px past the right edge.
     Anchor them to the field label instead of the icon and align them towards
     the inside of the card (left column opens right, right column opens left). */
  .pc-info { position: static; }
  .pc-field-group > label,
  .pc-slider-group > label { position: relative; }
  .pc-tooltip { width: 190px; transform: translateY(4px); }
  .pc-info:hover .pc-tooltip,
  .pc-info:focus .pc-tooltip { transform: translateY(0); }
  .pc-inputs > .pc-field-group:nth-child(odd)  label .pc-tooltip { left: 0; right: auto; }
  .pc-inputs > .pc-field-group:nth-child(even) label .pc-tooltip { left: auto; right: 0; }
  .pc-slider-group label .pc-tooltip { left: 0; right: auto; }

  /* -- 3. Webinar countdown --------------------------------------------------
     4 x 76px + 3 x 12px gap = 340px, wider than the column. Let the units
     share the available width instead. */
  .countdown { gap: 8px; }
  .countdown .unit { min-width: 0; flex: 1 1 0; padding: 12px 4px; }
  .countdown .unit .num { font-size: 1.6rem; }
  .countdown .unit .lbl { font-size: .6rem; letter-spacing: .06em; }

  /* -- 4. Floating WhatsApp vs. footer ---------------------------------------
     Slightly smaller button + room under the footer so it never sits on top
     of the footer links or the copyright line. */
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 28px; height: 28px; }
  .site-footer { padding-bottom: 96px; }
}