/* ════ CSS BLOCK 1 ════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  /* ── CLINIIFY REAL BRAND COLORS ── */
  --teal: #00B4B4;
  --teal-dark: #009999;
  --teal-deep: #007A7A;
  --teal-light: #33CCCC;
  --teal-pale: #E6F9F9;
  --teal-pale2: #C0EFEF;
  --teal-grad: linear-gradient(135deg, #00B4B4 0%, #00D4D4 100%);

  /* --navy: #1A2B4A; */
  --navy: #0a192f;
  --navy-mid: #1E3A5F;
  --text: #1A2B4A;
  --text-mid: #4A6080;
  --text-light: #7A90AA;

  --white: #FFFFFF;
  --off-white: #F7FEFE;
  --gray-100: #F0F4F8;
  --gray-200: #E0E8F0;
  --gray-300: #C8D8E8;

  --orange: #FF6B35;
  --green: #22C55E;

  /* specialties */
  --gen-c: #16A34A;
  --gen-bg: #F0FDF4;
  --gen-bd: #86EFAC;
  --dent-c: #00B4B4;
  --dent-bg: #E6F9F9;
  --dent-bd: #99DEDE;
  --phys-c: #7C4DFF;
  --phys-bg: #F3EFFF;
  --phys-bd: #C4B0FF;
  --derm-c: #FF5FA0;
  --derm-bg: #FFF0F7;
  --derm-bd: #FFB3D1;
  --orth-c: #FF8C00;
  --orth-bg: #FFF5E6;
  --orth-bd: #FFD099;
}

html {
  scroll-behavior: smooth
}

body {
  /* font-family: 'Nunito', sans-serif; */
  /* font-family: 'Jost', sans-serif; */
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: var(--text);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 5px
}

::-webkit-scrollbar-track {
  background: #f0fafa
}

::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 3px
}

/* ─── TOP BAR ─── */
.topbar {
  position: relative;
  background: var(--navy);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  text-decoration: none;
  color: rgba(255, 255, 255, .65)
}
.topbar-item:hover {
  color: var(--teal-light)
}
.topbar-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .8
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px
}
.topbar-tagline {
  background: linear-gradient(90deg, var(--teal), #00D4A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}
.tb-div {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .15)
}
/* MOBILE RESPONSIVE */
@media (max-width: 768px) {

  .topbar {
    height: auto;
    padding: 6px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .topbar .container-fluid,
  .topbar .row {
    width: 100%;
  }

  .topbar-left,
  .topbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .topbar-left {
    gap: 10px;
  }

  .topbar-item span {
    display: none; 
  }
  
  .topbar-right {
    margin-top: 4px;
  }
  
  .topbar-tagline {
    display: none; 
  }
  
  .tb-div {
    display: none; 
  }
}
/* ─── NAV ─── */
nav {
  position: sticky;
  top: 37px;
  left: 0;
  right: 0;
  z-index: 999;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1.5px solid var(--teal-pale2);
  transition: box-shadow .3s;
}
nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 180, 180, .12)
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-mark {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
/* 
.logo img {
  height: 48px;
  width: auto;
  margin-left: 119px;
} */
.logo-name {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}
.logo-name span {
  color: #00b4b4;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  list-style: none;
  padding-left:0 !important;
}
.nav-links>li {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: -22px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-mid);
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap
}
.nav-links a:hover {
  color: var(--teal)
}
.drop-arrow {
  width: 13px;
  height: 13px;
  transition: transform .25s;
  flex-shrink: 0;
  opacity: .6
}
.nav-links>li:hover .drop-arrow {
  transform: rotate(180deg)
}

/* ─── MEGA DROPDOWN ─── */
.mega-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.97);
  width: 760px;
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid var(--teal-pale2);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .13), 0 4px 18px rgba(0, 180, 180, .1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* invisible bridge fills the gap between nav link and dropdown */
.mega-drop::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.nav-links>li:hover .mega-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* arrow tip */
.mega-drop::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1.5px solid var(--teal-pale2);
  border-top: 1.5px solid var(--teal-pale2);
  border-radius: 3px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}

.mega-inner {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden
}

/* sidebar */
.mega-sidebar {
  background: var(--off-white);
  border-right: 1.5px solid var(--teal-pale2);
  padding: 25px 0
}

.mega-sidebar-hd {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 0 16px 12px;
}

.mega-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .18s;
}

.mega-cat:hover, .mega-cat.mc-active {
  background: #fff;
  border-left-color: var(--teal);
}

.mega-cat:hover .mc-label, .mega-cat.mc-active .mc-label {
  color: var(--teal-dark)
}

.mc-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: .95rem;
  flex-shrink: 0;
  background: var(--teal-pale);
  transition: background .18s
}

.mega-cat:hover .mc-ico, .mega-cat.mc-active .mc-ico {
  background: var(--teal-pale2)
}

.mc-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-mid);
  transition: color .18s;
  flex: 1
}

.mc-sub {
  font-size: .68rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 1px
}

.mc-arr {
  font-size: .7rem;
  color: var(--teal);
  opacity: 0;
  transition: opacity .18s
}

.mega-cat:hover .mc-arr, .mega-cat.mc-active .mc-arr {
  opacity: 1
}

/* panels */
.mega-panels {
  padding: 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.mega-panel {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%
}

.mega-panel.mp-on {
  display: flex !important
}

.mega-panel-hd {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px
}

.mega-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  flex: 1;
  overflow: hidden;
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* padding: 11px 12px; */
  border-radius: 11px;
  text-decoration: none;
  transition: all .18s;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.mega-item:hover {
  background: var(--teal-pale);
  border-color: var(--teal-pale2);
  /* transform: translateX(3px) */
}

.mi-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: .88rem;
  flex-shrink: 0;
  background: var(--teal-pale2);
  transition: background .18s
}

.mega-item:hover .mi-ico {
  background: var(--teal-pale)
}

.mi-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy)
}

.mi-desc {
  font-size: .7rem;
  color: var(--text-light);
  margin-top: 2px;
  line-height: 1.4;
  font-weight: 500
}

.mega-foot {
  border-top: 1.5px solid var(--teal-pale2);
  margin-top: 14px;
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mega-foot-link {
  font-size: .8rem;
  font-weight: 700;
  color: var(--teal-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .2s
}
.mega-foot-link:hover {
  color: var(--teal)
}
.nav-r {
  display: flex;
  align-items: center;
  gap: 10px
}
.btn-outline {
  padding: 9px 20px;
  border: 2px solid var(--teal-pale2);
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--teal-dark);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Nunito', sans-serif;
}
.btn-outline:hover {
  border-color: var(--teal);
  background: var(--teal-pale)
}
.btn-teal {
  padding: 10px 24px;
  border-radius: 10px;
  background: var(--teal-grad);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  /* box-shadow: 0 4px 16px rgba(0, 180, 180, .4); */
  transition: all .2s;
}
.btn-teal:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 8px 24px rgba(0, 180, 180, .5) */
}
/* Mobile tweaks */
@media (max-width: 768px) {
  .btn-teal {
    display: none;
    }
  .fb-1, .fb-2, .fb-3 { 
    display: none;
   }
  .cta-box-d {
     padding: 48px 24px; 
    }
  .sticky-cta { 
    padding: 10px 16px;
   }
}
@media (max-width: 576px) {
  .hero-h1 { font-size: 2.2rem; }
  .stat-num { font-size: 1.5rem; }
  .hero-proof { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════
       AXON AI NAV BUTTON
    ═══════════════════════════════════ */
@keyframes axon-spin   { to { transform: rotate(360deg); } }
@keyframes axon-pulse  { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }
@keyframes axon-float  { 0%,100%{transform:translateY(0) scale(1);opacity:0} 40%{opacity:.7} 100%{transform:translateY(-18px) scale(.4); opacity:0} }
@keyframes axon-glow   {
  0%,100%{
  box-shadow:0 0 0 0 rgba(99,102,241,0)
  /* box-shadow: 0 0 0 0 rgba(0, 122, 122, 0); */
  } 
  50%{
  box-shadow:0 0 18px 4px rgba(99,102,241,.35)
  /* box-shadow: 0 0 18px 4px rgba(0, 122, 122, 0.35); */
  } 
}
@keyframes axon-shimmer{ 0%{background-position:200% center} 100%{background-position:-200% center} }

.axon-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: 100px;
  background: linear-gradient(135deg, #0F0C29 0%, #1a1054 50%, #0d1f4c 100%);
  /* background: linear-gradient( 135deg, #003f3f 0%, #007A7A 50%, #002a2a 100% ); */
  border: 1.5px solid rgba(99,102,241,.55);
  /* border: 1.5px solid rgba(0, 122, 122, 0.55); */
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all .28s ease;
  animation: axon-glow 3s ease-in-out infinite;
}
.axon-nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(139,92,246,.18) 45%,
    rgba(99,102,241,.22) 50%,
    rgba(139,92,246,.18) 55%,
    transparent 70%
  );
  /* background: linear-gradient(
  105deg,
  transparent 30%,
  rgba(0, 122, 122, 0.18) 45%,
  rgba(0, 122, 122, 0.22) 50%,
  rgba(0, 122, 122, 0.18) 55%,
  transparent 70% 
); */
  background-size: 200% 100%;
  animation: axon-shimmer 2.8s linear infinite;
  border-radius: 100px;
}
.axon-nav-btn:hover {
  border-color: rgba(139,92,246,.9);
  /* border-color: rgba(0, 122, 122, 0.9); */
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99,102,241,.45);
  /* box-shadow: 0 8px 28px rgba(0, 122, 122, 0.45); */
}

/* Orb */
.axon-orb {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.axon-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.axon-ring-1 {
  border-top-color: #818cf8;
  /* border-top-color: #00a3a3; */
  border-right-color: rgba(129,140,248,.3);
  animation: axon-spin 1.8s linear infinite;
}
.axon-ring-2 {
  inset: 4px;
  border-bottom-color: #a78bfa;
  /* border-bottom-color: #005f5f; */
  border-left-color: rgba(167,139,250,.3);
  /* border-left-color: rgba(0, 122, 122, 0.3); */
  animation: axon-spin 1.2s linear infinite reverse;
}
.axon-icon {
  width: 11px; height: 11px;
  color: #e0e7ff;
  position: relative; z-index: 1;
  animation: axon-pulse 2.4s ease-in-out infinite;
}

/* Label */
.axon-label {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #e0e7ff;
  letter-spacing: .2px;
  position: relative; z-index: 1;
  white-space: nowrap;
}
.axon-ai-tag {
  display: inline-block;
  background: linear-gradient(90deg, #818cf8, #a78bfa);
  /* background: linear-gradient(90deg, #00a3a3, #007A7A); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .5px;
  margin-left: 1px;
}

/* Floating particles */
.axon-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #818cf8;
  /* background: #007A7A; */
  pointer-events: none;
}
.axon-p1 { 
  bottom: 4px; 
  left: 14px; 
  animation: axon-float 2.2s ease-out infinite; 
}
.axon-p2 { 
  bottom: 2px; 
  left: 22px; 
  animation: axon-float 2.8s .6s ease-out infinite; 
}
.axon-p3 { 
  bottom: 6px; 
  left: 8px;  
  animation: axon-float 2s  1.1s ease-out infinite; 
}

/* Mobile: hide label, keep orb */
@media (max-width: 768px) {
  .axon-label { display: none; }
  .axon-nav-btn { padding: 7px 9px; }
}

/* ─── HERO ─── */
.hero {
  padding: 10px 5% 50px;
  background: linear-gradient(145deg, #fff 0%, var(--teal-pale) 60%, #E8FAFA 100%);
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

/* decorative circles */
.hero-circle-1 {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .1), transparent 70%);
  pointer-events: none
}

.hero-circle-2 {
  position: absolute;
  bottom: -80px;
  left: 5%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 212, .08), transparent 70%);
  pointer-events: none
}

.hero-dots {
  position: absolute;
  top: 80px;
  left: 3%;
  opacity: .15;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(8, 12px);
  gap: 16px
}

.hero-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  display: block
}

.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1
}

/* left */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--teal-pale2);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 24px;
  box-shadow: 0 2px 16px rgba(0, 180, 180, .12);
  animation: fUp .6s ease both;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
  animation: pdot 2s infinite
}

@keyframes pdot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .4)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0)
  }
}

.hero h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  /* font-size: 3.5rem; */
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--navy);
  animation: fUp .7s .1s ease both;
}

.hero h1 .teal {
  color: var(--teal)
}

.hero h1 .grad {
  background: linear-gradient(90deg, var(--teal), #00D4A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 510px;
  animation: fUp .7s .2s ease both;
  font-weight: 400;
}

.spec-chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 26px;
  animation: fUp .7s .3s ease both
}

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  border: 2px solid;
  transition: all .22s;
  cursor: pointer
}

.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1)
}

.ch-d {
  color: var(--dent-c);
  border-color: var(--dent-bd);
  background: var(--dent-bg)
}

.ch-p {
  color: var(--phys-c);
  border-color: var(--phys-bd);
  background: var(--phys-bg)
}

.ch-r {
  color: var(--derm-c);
  border-color: var(--derm-bd);
  background: var(--derm-bg)
}

.ch-o {
  color: var(--orth-c);
  border-color: var(--orth-bd);
  background: var(--orth-bg)
}

.hero-btns {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  animation: fUp .7s .4s ease both
}

.btn-hero-primary {
  padding: 15px 32px;
  border-radius: 12px;
  background: var(--teal-grad);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  /* box-shadow: 0 6px 24px rgba(0, 180, 180, .45); */
  transition: all .25s;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.btn-hero-primary:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 10px 32px rgba(0, 180, 180, .55) */
}

.btn-hero-sec {
  padding: 15px 28px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--gray-200);
  cursor: pointer;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  transition: all .25s;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.btn-hero-sec:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, .08) */
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  animation: fUp .7s .5s ease both
}

.avatars {
  display: flex
}

.avatars span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  margin-left: -9px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), #00CCAA);
}

.avatars span:first-child {
  margin-left: 0
}

.avatars span:nth-child(2) {
  background: linear-gradient(135deg, var(--phys-c), #AA88FF)
}

.avatars span:nth-child(3) {
  background: linear-gradient(135deg, var(--derm-c), #FF88BB)
}

.avatars span:nth-child(4) {
  background: linear-gradient(135deg, var(--orth-c), #FFB040)
}

.proof-text {
  font-size: .83rem;
  color: var(--text-mid);
  line-height: 1.55;
  font-weight: 600
}

.proof-text strong {
  color: var(--navy);
  font-weight: 800
}

/* ─── DASHBOARD MOCKUP ─── */
.hero-vis {
  position: relative;
  animation: fIn .9s .3s ease both;
  width: 600px;
}

.dash-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 180, 180, .15), 0 4px 24px rgba(0, 0, 0, .06);
  overflow: hidden;
  border: 1.5px solid var(--teal-pale2);
}

.dash-topbar {
  background: linear-gradient(90deg, var(--teal) 0%, #00CCAA 100%);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.d-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4)
}

.d-title {
  margin-left: 8px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .9);
  font-weight: 700
}

.dash-body {
  padding: 20px
}

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

.d-ttl {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy)
}

.d-badge {
  font-size: .7rem;
  font-weight: 700;
  color: var(--teal-dark);
  background: var(--teal-pale);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--teal-pale2)
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px
}

.kpi {
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px
}

.kn {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy)
}

.kl {
  font-size: .62rem;
  color: var(--text-light);
  margin-top: 2px;
  font-weight: 600
}

.kg {
  font-size: .62rem;
  color: #16A34A;
  font-weight: 700
}

.kt {
  font-size: .62rem;
  color: var(--teal-dark);
  font-weight: 700
}

.spec-row-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px
}

.sm {
  border-radius: 10px;
  padding: 9px 7px;
  text-align: center;
  border: 1.5px solid
}

.sm-ic {
  font-size: 1.05rem;
  margin-bottom: 3px
}

.sm-n {
  font-size: .67rem;
  font-weight: 800
}

.sm-v {
  font-size: .58rem;
  color: var(--text-light);
  margin-top: 1px;
  font-weight: 600
}

.appt-lbl {
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .8px;
  color: var(--text-light);
  text-transform: uppercase;
  margin-bottom: 8px
}

.appts {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.appt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 9px 12px
}

.appt-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .63rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff
}

.appt-in {
  flex: 1
}

.appt-nm {
  font-size: .73rem;
  font-weight: 700;
  color: var(--navy)
}

.appt-tp {
  font-size: .62rem;
  color: var(--text-light);
  font-weight: 600
}

.appt-tm {
  font-size: .62rem;
  color: var(--text-light);
  font-weight: 600
}

.appt-st {
  font-size: .6rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px
}

/* floating cards */
.float-ai {
  position: absolute;
  bottom: -18px;
  left: -38px;
  background: #fff;
  border: 2px solid var(--teal-pale2);
  border-radius: 16px;
  padding: 14px 18px;
  width: 196px;
  box-shadow: 0 16px 48px rgba(0, 180, 180, .2);
  animation: floatUp 4s ease-in-out infinite alternate;
}

@keyframes floatUp {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-12px)
  }
}

.fa-lbl {
  font-size: .63rem;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 5px
}

.fa-val {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--teal)
}

.fa-sub {
  font-size: .63rem;
  color: var(--text-light);
  font-weight: 600;
  margin-top: 2px
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: 9px;
  height: 26px
}

.bar {
  width: 9px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--teal), var(--teal-light));
  animation: bAnim 1.5s ease-in-out infinite alternate
}

@keyframes bAnim {
  from {
    opacity: .35;
    transform: scaleY(.5)
  }

  to {
    opacity: 1;
    transform: scaleY(1)
  }
}

.float-stat {
  position: absolute;
  top: 14px;
  right: -34px;
  background: #fff;
  border: 2px solid var(--teal-pale2);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .08);
  animation: floatUp 5s 1s ease-in-out infinite alternate;
}

.fs-stars {
  color: #F59E0B;
  font-size: .85rem;
  margin-bottom: 4px
}

.fs-val {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy)
}

.fs-lbl {
  font-size: .63rem;
  color: var(--text-light);
  font-weight: 600
}

@keyframes fUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ─── TRUST BAND ─── */
.trust-band {
  background: var(--teal-pale);
  border-top: 1.5px solid var(--teal-pale2);
  border-bottom: 1.5px solid var(--teal-pale2);
  padding: 18px 5%;
  overflow: hidden;
}

.tb-inner {
  display: flex;
  align-items: center
}

.tb-lbl {
  font-size: .72rem;
  color: var(--teal-deep);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
  margin-right: 44px;
  min-width: max-content
}

.tb-track {
  display: flex;
  gap: 54px;
  align-items: center;
  animation: scrlLeft 26s linear infinite
}

.tb-item {
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal-pale2);
  white-space: nowrap;
  transition: color .2s;
  filter: saturate(0) brightness(.6)
}

.tb-item:hover {
  color: var(--teal);
  filter: none
}

@keyframes scrlLeft {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ─── platform features ─── */
section {
  position: relative
}
.sw {
  max-width: 1369px;
  margin: 0 auto;
  padding: 0 5%
}
.sh {
  text-align: center;
  margin-bottom: 56px
}
.s-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--teal-pale);
  padding: 6px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--teal-pale2);
  margin-bottom: 14px;
}
.s-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: var(--navy)
}
.s-title .tl {
  color: var(--teal)
}
.s-sub {
  margin-top: 14px;
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 551px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

/* ───  SPECIALTIES platform ─── */
.specs {
  padding: 80px 0; 
  background: #fff
}
.sp-tabs {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px
}

.sp-tab {
  padding: 11px 24px;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 500;
  border: 2px solid;
  cursor: pointer;
  transition: all .22s;
  background: transparent;
  font-family: 'Nunito', sans-serif;
}

.sp-tab:hover, .sp-tab.active {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1)
}

.sp-g {
  color: var(--gen-c);
  border-color: var(--gen-bd)
}

.sp-g.active, .sp-g:hover {
  background: var(--gen-bg)
}

.sp-d {
  color: var(--dent-c);
  border-color: var(--dent-bd)
}

.sp-d.active, .sp-d:hover {
  background: var(--dent-bg)
}

.sp-p {
  color: var(--phys-c);
  border-color: var(--phys-bd)
}

.sp-p.active, .sp-p:hover {
  background: var(--phys-bg)
}

.sp-r {
  color: var(--derm-c);
  border-color: var(--derm-bd)
}

.sp-r.active, .sp-r:hover {
  background: var(--derm-bg)
}

.sp-o {
  color: var(--orth-c);
  border-color: var(--orth-bd)
}

.sp-o.active, .sp-o:hover {
  background: var(--orth-bg)
}

.sp-panel {
  display: none
}

.sp-panel.on {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center
}

.spl h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--navy)
}

.spl p {
  color: var(--text-mid);
  font-size: .97rem;
  line-height: 1.75;
  margin-bottom: 28px;
  font-weight: 400
}

.sfeats {
  display: flex;
  flex-direction: column;
  gap: 13px
}

.sfeat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 15px 17px;
  transition: all .22s
}

.sfeat:hover {
  transform: translateX(5px);
  border-color: var(--teal-pale2);
  background: var(--teal-pale)
}

.sfeat-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0
}

.sfeat-t {
  font-weight: 500;
  font-size: .875rem;
  color: var(--navy);
  margin-bottom: 3px
}

.sfeat-d {
  font-size: .78rem;
  color: var(--text-mid);
  line-height: 1.55;
  font-weight: 500
}

.spr {
  background: var(--off-white);
  border: 1.5px solid var(--teal-pale2);
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 48px rgba(0, 180, 180, .1)
}

/* ─── FEATURES ─── */
.feats-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

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

.feat-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 28px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.feat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal-grad);
  opacity: 0;
  transition: opacity .3s;
}

.feat-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-pale2);
  box-shadow: 0 16px 48px rgba(0, 180, 180, .12)
}

.feat-card:hover::before {
  opacity: 1
}

.feat-card.star {
  border-color: var(--teal-pale2);
  background: linear-gradient(160deg, var(--teal-pale) 0%, #fff 60%)
}

.feat-card.star::before {
  opacity: 1
}

.feat-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  margin-bottom: 18px
}

.feat-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 9px
}

.feat-desc {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 500
}

.feat-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 20px;
  margin-top: 14px
}
.pf-tabs {
  max-height: 100%;
}

/* ─── STATS ─── */
.stats-sec {
  padding: 72px 0;
  background: #fff
}

.stats-inner {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 40%, var(--teal-deep) 100%);
  border-radius: 26px;
  padding: 58px 5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  box-shadow: 0 28px 64px rgba(0, 180, 180, .35);
  position: relative;
  overflow: hidden;
}

.stats-inner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}

.st-n {
  font-family: 'Poppins', sans-serif;
  font-size: 3.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1
}

.st-l {
  color: rgba(255, 255, 255, .7);
  font-size: .88rem;
  margin-top: 8px;
  font-weight: 600
}

/* ─── HOW IT WORKS ─── */
.how-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

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

.how-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  padding: 34px;
  text-align: center;
  transition: all .3s
}

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 180, 180, .1);
  border-color: var(--teal-pale2)
}

.how-num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--teal-pale);
  border: 2px solid var(--teal-pale2);
  color: var(--teal);
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin: 0 auto 18px
}

.how-ico {
  font-size: 2.4rem;
  margin-bottom: 16px
}

.how-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px
}

.how-desc {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 500
}

/* ─── TESTIMONIALS ─── */
.testis-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

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

.t-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 28px;
  transition: all .3s
}

.t-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(0, 180, 180, .1);
  border-color: var(--teal-pale2)
}

.t-stars {
  color: #F59E0B;
  font-size: .85rem;
  margin-bottom: 13px
}

.t-q {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 20px;
  font-weight: 500
}

.t-auth {
  display: flex;
  align-items: center;
  gap: 12px
}

.t-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff
}

.t-nm {
  font-weight: 800;
  font-size: .875rem;
  color: var(--navy)
}

.t-rl {
  font-size: .73rem;
  color: var(--text-light);
  font-weight: 500
}

.t-sp {
  font-size: .63rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 10px;
  margin-top: 4px;
  display: inline-block
}

/* ─── CTA ─── */
.cta-sec {
  padding: 80px 0; 
  background: #fff
}

.cta-box {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 50%, #007070 100%);
  border-radius: 30px;
  padding: 82px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 180, 180, .35);
}

.cta-box::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06)
}

.cta-box::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04)
}

.cta-box h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.8px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1
}

.cta-box p {
  color: rgba(255, 255, 255, .8);
  font-size: 1.05rem;
  max-width: 510px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
  line-height: 1.75;
  font-weight: 500
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1
}

.btn-white {
  padding: 15px 32px;
  border-radius: 12px;
  background: #fff;
  color: var(--teal-dark);
  font-size: 1rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  transition: all .25s;
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2)
}

.btn-white-o {
  padding: 15px 28px;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, .45);
  cursor: pointer;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  transition: all .25s;
}

.btn-white-o:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8)
}

.cta-meta {
  margin-top: 22px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
  position: relative;
  z-index: 1;
  font-weight: 600
}

/* ─── FOOTER OLD ─── */
footer {
  background: var(--navy);
  padding: 62px 5% 28px
}

.ft-inner {
  max-width: 1240px;
  margin: 0 auto
}

.ft-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px
}

.ft-brand p {
  font-size: .875rem;
  /* color: #5A7899; */
  line-height: 1.75;
  margin-top: 14px;
  max-width: 255px;
  font-weight: 500;
  color: rgba(255, 255, 255, .65);
}

.ft-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px
}

.ftchip {
  font-size: .63rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1.5px solid
}

.ft-col h4 {
  font-family: 'Poppins', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  color: #E0EEF8;
  margin-bottom: 16px
}

.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ft-col ul li a {
  font-size: .85rem;
  /* color: #5A7899; */
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  transition: color .2s;
  font-weight: 500;
}

.ft-col ul li a:hover {
  color: var(--teal-light)
}

.ft-bot {
  border-top: 1px solid #243448;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ft-bot p {
  font-size: .78rem;
  /* color: #3A5470; */
  font-weight: 500;
  color: rgba(255, 255, 255, .65);
}

/* ─── AI FEATURES ─── */
.ai-sec {
  padding: 100px 0;
  background: var(--navy);
  position: relative;
  overflow: hidden
}

.ai-sec::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -160px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .12), transparent 70%);
  pointer-events: none
}

.ai-sec::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 212, .08), transparent 70%);
  pointer-events: none
}

.ai-sec .s-tag {
  background: rgba(0, 180, 180, .15);
  border-color: rgba(0, 180, 180, .3);
  color: var(--teal-light)
}

.ai-sec .s-title {
  color: #fff
}

.ai-sec .s-sub {
  color: rgba(255, 255, 255, .6)
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1
}

.ai-card {
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(0, 180, 180, .18);
  border-radius: 20px;
  padding: 30px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.ai-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  opacity: 0;
  transition: opacity .3s;
}

.ai-card:hover {
  transform: translateY(-7px);
  background: rgba(0, 180, 180, .08);
  border-color: rgba(0, 180, 180, .4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.ai-card:hover::before {
  opacity: 1
}

.ai-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 180, 180, .2), rgba(0, 180, 180, .08));
  border: 1.5px solid rgba(0, 180, 180, .25);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.ai-card-label {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal-light);
  background: rgba(0, 180, 180, .12);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.ai-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3
}

.ai-card-desc {
  font-size: .875rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.72;
  font-weight: 500
}

.ai-card.featured {
  background: linear-gradient(135deg, rgba(0, 180, 180, .15) 0%, rgba(0, 180, 180, .05) 100%);
  border-color: rgba(0, 180, 180, .4);
}

.ai-card.featured::before {
  opacity: 1
}

/* ─── SECURITY ─── */
.sec-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

.sec-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 5%
}

.sec-left h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -.8px;
  margin-bottom: 16px
}

.sec-left h2 span {
  color: var(--teal)
}

.sec-left p {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.75;
  font-weight: 500;
  margin-bottom: 32px
}

.sec-shield {
  width: 110px;
  height: 110px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  display: grid;
  place-items: center;
  font-size: 3rem;
  box-shadow: 0 16px 48px rgba(0, 180, 180, .35);
  margin-bottom: 28px;
}

.sec-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.sec-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 26px;
  transition: all .3s;
}

.sec-card:hover {
  transform: translateY(-5px);
  border-color: var(--teal-pale2);
  box-shadow: 0 14px 44px rgba(0, 180, 180, .1)
}

.sec-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--teal-pale), var(--teal-pale2));
  border: 1.5px solid var(--teal-pale2);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 16px
}

.sec-title {
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px
}

.sec-desc {
  font-size: .82rem;
  color: var(--text-mid);
  line-height: 1.68;
  font-weight: 500
}

/* ─── REVEAL ─── */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease
}

.rv.vis {
  opacity: 1;
  transform: translateY(0)
}

/* ─── RESPONSIVE ─── */
@media(max-width:1100px) {
  .hero-inner {
    grid-template-columns: 1fr
  }

  .hero-vis {
    display: none
  }

  .sp-panel.on {
    grid-template-columns: 1fr
  }

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

  .stats-inner {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .ft-top {
    grid-template-columns: 1fr 1fr
  }

  .how-grid {
    grid-template-columns: 1fr
  }

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

  .sec-inner {
    grid-template-columns: 1fr
  }

  .sec-left {
    text-align: center
  }

  .sec-shield {
    margin: 0 auto 28px
  }

  .sec-cta-row {
    justify-content: center
  }
}

@media(max-width:640px) {
  .nav-links {
    display: none
  }

  .feat-grid {
    grid-template-columns: 1fr
  }

  .t-grid {
    grid-template-columns: 1fr
  }

  .ft-top {
    grid-template-columns: 1fr
  }

  .cta-box {
    padding: 50px 28px
  }

  .stats-inner {
    grid-template-columns: 1fr 1fr
  }

  .ai-grid {
    grid-template-columns: 1fr
  }

  .sec-grid {
    grid-template-columns: 1fr
  }
}

/* ════ BENTO GRID — FEATURES ════ */
.feats-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

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

.bento-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  padding: 26px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-pale2);
  box-shadow: 0 16px 48px rgba(0, 180, 180, .1)
}

/* Hero: col 1-2, row 1-2 */
.bento-hero {
  grid-column: 1/3;
  grid-row: 1/3;
  background: linear-gradient(135deg, var(--teal-pale) 0%, #fff 60%);
  border-color: var(--teal-pale2);
  padding: 34px;
}

.bento-bg-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .12), transparent 65%);
  pointer-events: none;
}

.bento-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  background: var(--teal);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .5px;
  margin-bottom: 16px
}

.bento-ico {
  margin-bottom: 14px;
  display: block
}

.bento-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.25
}

.bento-hero .bento-title {
  font-size: 1.5rem
}

.bento-desc {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 500
}

.bento-mockup {
  margin-top: 20px;
  background: rgba(0, 180, 180, .06);
  border: 1.5px solid var(--teal-pale2);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.bm-chip {
  font-size: .7rem;
  font-weight: 800;
  color: var(--teal-dark);
  background: var(--teal-pale);
  padding: 4px 12px;
  border-radius: 20px;
  width: fit-content;
  animation: pulse2 2s infinite
}

@keyframes pulse2 {
  0%, 100% {
    opacity: 1
  }

  50% {
    opacity: .6
  }
}

.bm-suggestion {
  font-size: .78rem;
  color: var(--navy);
  font-weight: 600;
  background: #fff;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--gray-200)
}

.bm-accept {
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  background: var(--teal);
  padding: 6px 16px;
  border-radius: 8px;
  width: fit-content;
  cursor: pointer
}

/* Tall: col3, row 1-2 */
.bento-tall {
  grid-column: 3/4;
  grid-row: 1/3
}

.bento-phone {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.bp-bar {
  height: 5px;
  background: var(--teal-pale2);
  border-radius: 3px;
  margin-bottom: 4px
}

.bp-row {
  font-size: .75rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  padding: 8px 12px
}

/* Wide: col4 full col */
.bento-wide {
  grid-column: 4/5
}

.bento-branches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 25px;
  justify-content: center;
}

.bb {
  /* font-size: .68rem;
  font-weight: 800; */
  font-size: 13px;
    font-weight: 600;
  /* padding: 4px 11px; */
    padding: 9px 16px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--text-mid);
  border: 1px solid var(--gray-200)
}

.teal-bb {
  background: var(--teal-pale);
  color: var(--teal-dark);
  border-color: var(--teal-pale2)
}

/* Small cards */
.bento-sm {
  grid-column: auto/span 1
}

.bento-sm .bento-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 14px
}

.bento-sm .bento-title {
  font-size: .95rem;
  margin-bottom: 7px
}

/* Wide-short: spans 2 cols, inline layout */
.bento-wide-short {
  grid-column: auto/span 2;
  display: flex;
  align-items: center;
  gap: 18px
}

.bento-wide-short .bento-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: 0
}

/* ════ HOW IT WORKS — TIMELINE ════ */
.how-sec {
  padding: 80px 0; 
  background: #fff
}

.timeline {
  position: relative;
  padding-top: 20px
}

.tl-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0
}

.tl-connector {
  font-size: 1.6rem;
  color: var(--teal-pale2);
  align-self: flex-start;
  padding-top: 24px;
  text-align: center;
}

.tl-step {
  text-align: center;
  padding: 0 8px
}

.tl-node {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid var(--teal-pale2);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  transition: all .3s;
  box-shadow: 0 4px 16px rgba(0, 180, 180, .08);
}

.tl-node.active {
  border-color: var(--teal);
  background: var(--teal-pale);
  box-shadow: 0 6px 24px rgba(0, 180, 180, .2)
}

.tl-ico {
  font-size: 1.4rem;
  line-height: 1
}

.tl-num {
  font-size: .55rem;
  font-weight: 900;
  color: var(--text-light);
  letter-spacing: 1px;
  margin-top: 2px
}

.tl-node.active .tl-num {
  color: var(--teal-dark)
}

.tl-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px
}

.tl-content p {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 500
}

.tl-time {
  display: inline-block;
  margin-top: 14px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--text-light);
  background: var(--gray-100);
  padding: 4px 12px;
  border-radius: 20px
}

.tl-time-green {
  background: #DCFCE7;
  color: #16A34A
}

/* ════ AI FEATURES — ALTERNATING ROWS ════ */
.ai-sec {
  padding: 80px 0; 
  background: linear-gradient(170deg, var(--navy) 0%, #0D2235 100%);
  position: relative;
  overflow: hidden
}

.ai-sec::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .1), transparent 65%);
  pointer-events: none
}

.ai-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1
}

.ai-row {
  display: grid;
  gap: 24px
}

.ai-row-1 {
  grid-template-columns: 1.4fr 1fr
}

.ai-row-2 {
  grid-template-columns: 1fr 1.4fr
}

.ai-feature-big {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(0, 180, 180, .2);
  border-radius: 22px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: all .3s;
}

.ai-feature-big:hover {
  background: rgba(0, 180, 180, .1);
  border-color: rgba(0, 180, 180, .4)
}

.ai-feature-big::before {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .12), transparent 65%)
}

.aifb-tag {
  display: inline-block;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal-light);
  background: rgba(0, 180, 180, .15);
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 14px
}

.aifb-ico {
  font-size: 2.6rem;
  margin-bottom: 16px;
  display: block
}

.ai-feature-big h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2
}

.ai-feature-big p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.75;
  font-weight: 500
}

.aifb-chip {
  display: inline-block;
  margin-top: 18px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal-light);
  background: rgba(0, 180, 180, .12);
  border: 1px solid rgba(0, 180, 180, .25);
  padding: 5px 14px;
  border-radius: 20px
}

.ai-feature-stack {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.ai-feature-sm {
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all .3s;
  flex: 1;
}

.ai-feature-sm:hover {
  background: rgba(0, 180, 180, .08);
  border-color: rgba(0, 180, 180, .25);
  transform: translateX(4px)
}

.aifsm-ico {
  font-size: 1.8rem;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 180, 180, .15);
  border: 1px solid rgba(0, 180, 180, .2);
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.aifsm-tag {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 6px
}

.ai-feature-sm h4 {
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 7px
}

.ai-feature-sm p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.65;
  font-weight: 500
}

/* ════ SECURITY — CHECKLIST + VISUAL ════ */
.sec-sec {
  padding: 80px 0; 
  background: var(--navy);
  overflow: hidden
}

.sec-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 5%
}

.sec-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 14px
}

.sec-left h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -.8px;
  margin-bottom: 14px
}

.sec-left h2 span {
  color: var(--teal)
}

.sec-left>p {
  font-size: .97rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 32px
}

.sec-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px
}

.sc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.sc-item:last-child {
  border-bottom: none
}

.sc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 180, 180, .15);
  border: 1px solid rgba(0, 180, 180, .25);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0
}

.sc-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 4px
}

.sc-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.55;
  font-weight: 400;
}

.sec-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

/* Security visual */
.sec-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 420px
}

.sv-center {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center
}

.sv-shield {
  width: 110px;
  height: 110px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  display: grid;
  place-items: center;
  box-shadow: 0 20px 60px rgba(0, 180, 180, .4);
  z-index: 2;
  position: relative
}

.sv-shield-inner {
  font-size: 2.8rem
}

.sv-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 180, 180, .2);
  transform: translate(-50%, -50%)
}

.sv-ring1 {
  width: 170px;
  height: 170px;
  animation: svSpin 20s linear infinite
}

.sv-ring2 {
  width: 230px;
  height: 230px;
  animation: svSpin 30s linear infinite reverse;
  border-style: dashed
}

.sv-ring3 {
  width: 300px;
  height: 300px;
  animation: svSpin 40s linear infinite;
  border-color: rgba(255, 255, 255, .06)
}

@keyframes svSpin {
  from {
    transform: translate(-50%, -50%) rotate(0)
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

.sv-badge {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 6px
}

.sv-badge span {
  font-size: .9rem
}

.sv-b1 {
  top: 2%;
  left: -10%;
  animation: svFloat 4s ease-in-out infinite
}

.sv-b2 {
  top: 2%;
  right: -10%;
  animation: svFloat 5s 1s ease-in-out infinite
}

.sv-b3 {
  bottom: 8%;
  left: -8%;
  animation: svFloat 4.5s .5s ease-in-out infinite
}

.sv-b4 {
  bottom: 8%;
  right: -8%;
  animation: svFloat 3.8s 1.5s ease-in-out infinite
}

@keyframes svFloat {
  0%, 100% {
    transform: translateY(0)
  }

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

/* ════ TESTIMONIALS — FEATURED + GRID ════ */
.testis-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

.t-featured {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-radius: 24px;
  padding: 48px 52px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 180, 180, .25);
}

.t-featured::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07)
}

.tf-quote {
  font-size: 8rem;
  line-height: .8;
  color: rgba(255, 255, 255, .15);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  position: absolute;
  top: 20px;
  left: 36px
}

.tf-text {
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.75;
  font-weight: 500;
  max-width: 820px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  font-style: italic
}

.tf-auth {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1
}

.tf-av {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .9rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, .3)
}

.tf-nm {
  font-weight: 800;
  font-size: .95rem;
  color: #fff
}

.tf-rl {
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
  margin-top: 2px
}

.tf-stars {
  color: #FDE68A;
  font-size: 1rem;
  margin-left: auto
}

.tf-sp {
  font-size: .68rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  margin-left: 8px
}

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

/* first card spans 2 cols in testimonials grid */
.t-grid .t-card:first-child {
  grid-column: span 2
}

.t-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 26px;
  transition: all .3s
}

.t-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(0, 180, 180, .1);
  border-color: var(--teal-pale2)
}

.t-stars {
  color: #F59E0B;
  font-size: .85rem;
  margin-bottom: 11px
}

.t-q {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.72;
  font-style: italic;
  margin-bottom: 18px;
  font-weight: 500
}

.t-auth {
  display: flex;
  align-items: center;
  gap: 11px
}

.t-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff
}

.t-nm {
  font-weight: 800;
  font-size: .875rem;
  color: var(--navy)
}

.t-rl {
  font-size: .72rem;
  color: var(--text-light);
  font-weight: 500
}

.t-sp {
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 10px;
  margin-top: 4px;
  display: inline-block
}

@media(max-width:1100px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .bento-hero {
    grid-column: 1/3;
    grid-row: auto
  }

  .bento-tall {
    grid-column: auto;
    grid-row: auto
  }

  .bento-wide {
    grid-column: auto
  }

  .tl-steps {
    grid-template-columns: 1fr;
    gap: 0
  }

  .tl-connector {
    display: none
  }

  .tl-step {
    display: flex;
    gap: 20px;
    text-align: left;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-200)
  }

  .tl-node {
    margin: 0;
    flex-shrink: 0
  }

  .ai-row-1, .ai-row-2 {
    grid-template-columns: 1fr
  }

  .sec-inner {
    grid-template-columns: 1fr
  }

  .sec-visual {
    display: none
  }

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

  .t-grid .t-card:first-child {
    grid-column: span 2
  }
}

@media(max-width:640px) {
  .bento-grid {
    grid-template-columns: 1fr
  }

  .bento-hero {
    grid-column: auto
  }

  .bento-wide-short {
    flex-direction: column
  }

  .t-grid {
    grid-template-columns: 1fr
  }

  .t-grid .t-card:first-child {
    grid-column: span 1
  }

  .t-featured {
    padding: 32px 28px
  }

  .tf-text {
    font-size: 1rem
  }

  .tf-stars {
    margin-left: 0
  }
}

/* ════ DIAMOND CHAIN — HOW IT WORKS ════ */
.how-sec {
  padding: 80px 0; 
  background: #fff
}

.diamond-chain {
  position: relative;
  padding: 20px 0 40px;
  max-width: 1080px;
  margin: 0 auto;
}

/* TOP ROW — 3 diamonds evenly spread */
.dc-row-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  position: relative;
  z-index: 2;
}

/* BOTTOM ROW — 2 diamonds in between gaps */
.dc-row-bot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 12.5%;
  /* shift inward so they land between top diamonds */
  position: relative;
  z-index: 2;
  margin-top: -30px;
  /* overlap slightly for the connected look */
}

.dc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0
}

.dc-top {
  flex-direction: column
}

/* label above, diamond below */
.dc-bot {
  flex-direction: column-reverse
}

/* diamond above, label below */

/* Label above (for top row) */
.dc-label-above {
  text-align: center;
  padding: 0 12px 20px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Label below (for bottom row) */
.dc-label-below {
  text-align: center;
  padding: 20px 12px 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.dc-step-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.2;
}

.dc-step-desc {
  font-size: .78rem;
  color: var(--text-mid);
  line-height: 1.6;
  font-weight: 500;
  max-width: 190px
}

/* THE DIAMOND SHAPE */
.dc-diamond {
  width: 100px;
  height: 100px;
  position: relative;
  flex-shrink: 0;
  transition: transform .3s;
  cursor: default;
}

.dc-diamond:hover {
  transform: scale(1.08) rotate(0deg)
}

/* Rotated square = diamond */
.dc-inner {
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid;
  position: relative;
  transition: all .3s;
  background: #fff;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .07);
}

.dc-diamond:hover .dc-inner {
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14)
}

/* Icon & number counter-rotate to stay upright */
.dc-inner>* {
  transform: rotate(-45deg)
}

.dc-inner {
  flex-direction: column;
  gap: 6px
}

.dc-num {
  font-family: 'Poppins', sans-serif;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .8px;
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: .35;
}

/* ── Individual diamond colors matching reference ── */
.dc-d1 .dc-inner {
  border-color: #00B4B4;
  color: #00B4B4
}

.dc-d1 .dc-inner:hover {
  background: #E6F9F9
}

.dc-d2 .dc-inner {
  border-color: #FF6B35;
  color: #FF6B35
}

.dc-d2 .dc-inner:hover {
  background: #FFF3EE
}

.dc-d3 .dc-inner {
  border-color: #E53E3E;
  color: #E53E3E
}

.dc-d3 .dc-inner:hover {
  background: #FFF5F5
}

.dc-d4 .dc-inner {
  border-color: #F6AD55;
  color: #D97706
}

.dc-d4 .dc-inner:hover {
  background: #FFFBEB
}

.dc-d5 .dc-inner {
  border-color: #38A169;
  color: #38A169
}

.dc-d5 .dc-inner:hover {
  background: #F0FFF4
}

/* Time badge */
.dc-time {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-light);
  background: var(--gray-100);
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 25px;
}

.dc-time-live {
  background: #DCFCE7;
  color: #16A34A
}

/* ── CONNECTOR LINES ── */
.dc-connectors {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* We draw 4 diagonal connectors via SVG overlay */
.dc-connectors svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Responsive ── */
@media(max-width:900px) {
  .diamond-chain {
    max-width: 100%
  }

  .dc-row-top {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .dc-row-bot {
    grid-template-columns: 1fr;
    margin: 20px 0;
    gap: 30px
  }

  .dc-bot {
    flex-direction: column
  }

  .dc-label-below {
    padding: 8px 0 0
  }
}

/* ════ PLATFORM FEATURES — TAB SHOWCASE ════ */
.feats-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

.pf-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  max-height: 560px;
  align-items: start;
  background: #fff;
  border-radius: 24px;
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .06);
}

/* LEFT TABS */
.pf-tabs {
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border-right: 1.5px solid var(--gray-200);
  padding: 21px 0;
  min-height: 580px;
  justify-content: space-evenly;
}

.pf-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .2s;
  position: relative;
}

.pf-tab:hover {
  background: #fff;
  border-left-color: var(--teal-pale2)
}

.pf-tab.pf-active {
  background: #fff;
  border-left-color: var(--teal);
  box-shadow: inset -4px 0 0 0 transparent;
}

.pf-tab-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform .2s;
}

.pf-tab:hover .pf-tab-ico, .pf-tab.pf-active .pf-tab-ico {
  transform: scale(1.1)
}

.pf-tab-text {
  flex: 1;
  min-width: 0
}

.pf-tab-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.pf-tab.pf-active .pf-tab-title {
  color: var(--teal-dark)
}

.pf-tab-sub {
  font-size: .68rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 1px
}

.pf-tab-arrow {
  font-size: .9rem;
  color: var(--text-light);
  opacity: 0;
  transition: opacity .2s
}

.pf-tab:hover .pf-tab-arrow, .pf-tab.pf-active .pf-tab-arrow {
  opacity: 1;
  color: var(--teal)
}

/* RIGHT PANEL */
.pf-panel-wrap {
  padding: 32px;
  min-height: 580px;
  position: relative
}

.pf-panel {
  display: none;
  animation: pfFadeIn .3s ease
}

.pf-panel.pf-panel-on {
  display: flex;
  flex-direction: column;
  gap: 24px
}

@keyframes pfFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.pf-panel-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  padding: 4px 13px;
  border-radius: 20px;
  margin-bottom: 12px;
  width: fit-content;
}

.pf-panel-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -.5px;
}

.pf-panel-desc {
  font-size: .93rem;
  color: var(--text-mid);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 16px;
  max-width: 904px;
}

.pf-panel-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pf-point {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
}

.pf-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal-dark);
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* MOCKUP BOX */
.pf-panel-mockup {
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.pfm-bar {
  background: var(--gray-100);
  border-bottom: 1.5px solid var(--gray-200);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-mid);
}

.pfm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray-300)
}

.pfm-dot:nth-child(1) {
  background: #FF6B6B
}

.pfm-dot:nth-child(2) {
  background: #FFD93D
}

.pfm-dot:nth-child(3) {
  background: #6BCB77
}

.pfm-bar span {
  margin-left: 6px;
  flex: 1
}

.pfm-live {
  font-size: .62rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--teal-pale);
  color: var(--teal-dark)
}

.pfm-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

/* AI listening animation */
.pfm-listening {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--teal-pale);
  border: 1.5px solid var(--teal-pale2);
  border-radius: 10px;
  padding: 10px 14px;
}

.pfm-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px
}

.pfm-wave span {
  display: block;
  width: 3px;
  background: var(--teal);
  border-radius: 2px;
  animation: waveBars .8s ease-in-out infinite;
}

.pfm-wave span:nth-child(1) {
  animation-delay: 0s;
  height: 6px
}

.pfm-wave span:nth-child(2) {
  animation-delay: .1s;
  height: 14px
}

.pfm-wave span:nth-child(3) {
  animation-delay: .2s;
  height: 18px
}

.pfm-wave span:nth-child(4) {
  animation-delay: .3s;
  height: 12px
}

.pfm-wave span:nth-child(5) {
  animation-delay: .4s;
  height: 8px
}

@keyframes waveBars {
  0%, 100% {
    transform: scaleY(1)
  }

  50% {
    transform: scaleY(1.6)
  }
}

.pfm-suggestion {
  background: #fff;
  border: 1.5px solid var(--teal-pale2);
  border-radius: 10px;
  padding: 13px;
}

.pfm-s-label {
  font-size: .62rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: .6px;
  margin-bottom: 7px
}

.pfm-s-text {
  font-size: .78rem;
  color: var(--navy);
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 10px
}

.pfm-s-btns {
  display: flex;
  gap: 8px
}

.pfm-btn-a {
  font-size: .68rem;
  font-weight: 800;
  background: var(--teal);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer
}

.pfm-btn-b {
  font-size: .68rem;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid var(--gray-200)
}

.pfm-row-notes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.pfm-note-chip {
  font-size: .65rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--text-mid)
}

@keyframes spinRingFace {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

/* Responsive */
@media(max-width:960px) {
  .pf-showcase {
    grid-template-columns: 1fr
  }

  .pf-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1.5px solid var(--gray-200);
    min-height: auto;
    padding: 8px
  }

  .pf-tab {
    flex-direction: column;
    text-align: center;
    padding: 10px 12px;
    min-width: 100px;
    border-left: none;
    border-bottom: 3px solid transparent
  }

  .pf-tab.pf-active {
    border-bottom-color: var(--teal);
    border-left-color: transparent
  }

  .pf-tab-sub, .pf-tab-arrow {
    display: none
  }

  .pf-panel-points {
    grid-template-columns: 1fr
  }
}

@media(max-width:640px) {
  .pf-panel-wrap {
    padding: 20px
  }

  .pf-panel-title {
    font-size: 1.3rem
  }
}

/* ════ CSS BLOCK 2 ════ */
/* ── CHATBOT TRIGGER ── */
.cb-trigger {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.cb-trigger-ico {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00B4B4, #00D4D4);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px rgba(0, 180, 180, .5);
  transition: transform .25s, box-shadow .25s;
  position: relative;
  z-index: 2;
}

.cb-trigger:hover .cb-trigger-ico {
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(0, 180, 180, .6);
}

.cb-pulse {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 180, 180, .35);
  animation: cbPulse 2.5s ease-out infinite;
  z-index: 1;
}

@keyframes cbPulse {
  0% {
    transform: scale(1);
    opacity: 1
  }

  100% {
    transform: scale(1.8);
    opacity: 0
  }
}

.cb-label {
  background: #fff;
  color: #1A2B4A;
  font-size: .78rem;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  white-space: nowrap;
  font-family: 'Nunito', sans-serif;
  transition: all .25s;
}

.cb-trigger:hover .cb-label {
  background: #00B4B4;
  color: #fff
}

/* ── CHAT WINDOW ── */
.cb-window {
  position: fixed;
  bottom: 100px;
  right: 28px;
  z-index: 1000;
  width: 360px;
  max-height: 560px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .18), 0 4px 20px rgba(0, 180, 180, .12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid #C0EFEF;
  transform: scale(.88) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: bottom right;
}

.cb-window.cb-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Header */
.cb-header {
  background: linear-gradient(135deg, #00B4B4, #009090);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cb-header-left {
  display: flex;
  align-items: center;
  gap: 12px
}

.cb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
  border: 2px solid rgba(255, 255, 255, .3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cb-header-name {
  font-size: .9rem;
  font-weight: 500;
  color: #fff;
  font-family: 'Nunito', sans-serif
}

.cb-header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
  margin-top: 2px;
}

.cb-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  animation: cbBlink 2s infinite;
}

@keyframes cbBlink {
  0%, 100% {
    opacity: 1
  }

  50% {
    opacity: .5
  }
}

.cb-btn-icon {
  background: rgba(255, 255, 255, .15);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  transition: background .2s;
}

.cb-btn-icon:hover {
  background: rgba(255, 255, 255, .3)
}

/* Messages */
.cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.cb-messages::-webkit-scrollbar {
  width: 4px
}

.cb-messages::-webkit-scrollbar-thumb {
  background: #C0EFEF;
  border-radius: 2px
}

.cb-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px
}

.cb-msg-bot {
  flex-direction: row
}

.cb-msg-user {
  flex-direction: row-reverse
}

.cb-msg-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00B4B4, #00D4D4);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
}

.cb-msg-bubble {
  max-width: 78%;
  font-size: .82rem;
  line-height: 1.65;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: 'Nunito', sans-serif;
}

.cb-msg-bot .cb-msg-bubble {
  background: #F4FAFA;
  border: 1.5px solid #E0F4F4;
  color: #1A2B4A;
  border-bottom-left-radius: 4px;
}

.cb-msg-user .cb-msg-bubble {
  background: linear-gradient(135deg, #00B4B4, #009090);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Quick replies */
.cb-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 36px;
}

.cb-qr {
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 100px;
  border: 1.5px solid #C0EFEF;
  background: #F4FAFA;
  color: #007A7A;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Nunito', sans-serif;
}

.cb-qr:hover {
  background: #00B4B4;
  color: #fff;
  border-color: #00B4B4;
  transform: translateY(-1px)
}

/* Typing indicator */
.cb-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  flex-shrink: 0;
}

.cb-typing-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00B4B4, #00D4D4);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: 'Nunito', sans-serif;
}

.cb-typing-dots {
  background: #F4FAFA;
  border: 1.5px solid #E0F4F4;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 9px 14px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.cb-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00B4B4;
  animation: cbDot .9s ease-in-out infinite;
}

.cb-typing-dots span:nth-child(2) {
  animation-delay: .18s
}

.cb-typing-dots span:nth-child(3) {
  animation-delay: .36s
}

@keyframes cbDot {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: .4
  }

  40% {
    transform: scale(1);
    opacity: 1
  }
}

/* Input area */
.cb-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1.5px solid #E0F4F4;
  flex-shrink: 0;
}

.cb-input {
  flex: 1;
  border: 1.5px solid #E0F4F4;
  border-radius: 100px;
  padding: 9px 16px;
  font-size: .82rem;
  font-weight: 500;
  font-family: 'Nunito', sans-serif;
  color: #1A2B4A;
  background: #F4FAFA;
  outline: none;
  transition: border .2s;
}

.cb-input:focus {
  border-color: #00B4B4;
  background: #fff
}

.cb-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00B4B4, #009090);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 180, 180, .4);
  transition: all .2s;
  flex-shrink: 0;
}

.cb-send:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 180, 180, .5)
}

/* Footer */
.cb-footer {
  text-align: center;
  font-size: .65rem;
  color: #9ABABA;
  padding: 7px 0 10px;
  font-family: 'Nunito', sans-serif;
}

/* Mobile */
@media(max-width:480px) {
  .cb-window {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 90px
  }

  .cb-trigger {
    right: 16px;
    bottom: 20px
  }

  .cb-label {
    display: none
  }
}

/* ════ TESTIMONIALS — MARQUEE CAROUSEL ════ */
.testis-sec {
  padding: 96px 0 80px;
  background: var(--navy);
  overflow: hidden;
  position: relative;
}

.testis-sec::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .07), transparent 65%);
  pointer-events: none;
}

/* Header */
.ts-header {
  text-align: center;
  padding: 0 5% 52px;
  position: relative;
  z-index: 1;
}

.ts-header .s-tag {
  background: rgba(0, 180, 180, .15);
  border-color: rgba(0, 180, 180, .3);
  color: var(--teal-light);
}

.ts-header .s-title {
  color: #fff
}

.ts-header .s-sub {
  color: rgba(255, 255, 255, .55)
}

/* Rating row */
.ts-rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 36px;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 28px 40px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.ts-rating-block {
  text-align: center;
  padding: 0 32px
}

.ts-big-num {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.ts-stars-lg {
  color: #FDE68A;
  font-size: 1.1rem;
  margin-top: 6px;
  letter-spacing: 2px
}

.ts-rating-lbl {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .8px
}

.ts-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, .1)
}

/* ── MARQUEE ── */
.ts-marquee-wrap {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.ts-marquee {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 8px 0;
}

.ts-left {
  animation: marqueeLeft 35s linear infinite
}

.ts-right {
  animation: marqueeRight 40s linear infinite
}

@keyframes marqueeLeft {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

@keyframes marqueeRight {
  from {
    transform: translateX(-50%)
  }

  to {
    transform: translateX(0)
  }
}

/* Pause on hover */
.ts-marquee-wrap:hover .ts-marquee {
  animation-play-state: paused
}

/* ── CARD ── */
.ts-card {
  flex-shrink: 0;
  width: 320px;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  border: 1.5px solid rgba(255, 255, 255, .08);
  transition: transform .3s, box-shadow .3s;
  cursor: default;
}

.ts-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.ts-card-dark {
  background: linear-gradient(145deg, #1A2B4A, #0D1F3C);
  border-color: rgba(0, 180, 180, .2);
}

.ts-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ts-stars {
  color: #F59E0B;
  font-size: .85rem;
  letter-spacing: 2px
}

.ts-sp-chip {
  font-size: .63rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.ts-quote {
  font-size: .855rem;
  line-height: 1.72;
  color: var(--text-mid);
  font-style: italic;
  margin-bottom: 18px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-card-dark .ts-quote {
  color: rgba(255, 255, 255, .6)
}

.ts-author {
  display: flex;
  align-items: center;
  gap: 11px
}

.ts-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}

.ts-name {
  font-size: .82rem;
  font-weight: 800;
  color: var(--navy)
}

.ts-role {
  font-size: .7rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 2px
}

.ts-card-dark .ts-name {
  color: #fff
}

/* ── PLATFORMS ── */
.ts-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 52px;
  padding: 0 5%;
  flex-wrap: wrap;
}

.ts-plat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
}

.ts-plat-stars {
  color: #F59E0B;
  font-size: .8rem;
  letter-spacing: 1px;
  margin-bottom: 3px
}

.ts-plat-name {
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .8)
}

.ts-plat-count {
  font-size: .65rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 600;
  margin-top: 2px
}

.ts-plat-div {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, .1)
}

/* Responsive */
@media(max-width:768px) {
  .ts-rating-row {
    gap: 0;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center
  }

  .ts-rating-block {
    padding: 12px 16px
  }

  .ts-divider {
    display: none
  }

  .ts-plat {
    padding: 12px 16px
  }

  .ts-plat-div {
    display: none
  }

  .ts-card {
    width: 280px
  }
}

/* ════ TESTIMONIALS — SPLIT LAYOUT ════ */
.testis-sec {
  padding: 80px 0; 
  background: #F0F2F5;
}

.ts-hd {
  text-align: center;
  margin-bottom: 52px
}

.ts-hd-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.6px;
  margin-bottom: 10px;
}
.ts-hd-sub {
  font-size: 1rem;
  color: var(--text-mid);
  font-weight: 500
}

/* Main layout */
.ts-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 28px;
  align-items: stretch;
}

/* LEFT VIDEO PANEL */
.ts-left-panel {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .15);
  height: 653px;
}

.ts-video-wrap {
  width: 100%;
  height: 100%;
  min-height: 520px;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #D4C8B8;
}

.ts-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: all .25s;
  z-index: 3;
  padding-left: 4px;
}

.ts-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.ts-video-grad {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent);
  z-index: 2;
  border-radius: 0 0 22px 22px;
}

/* RIGHT 2x2 GRID */
.ts-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* REVIEW CARD */
.ts-rc {
  background: #fff;
  border-radius: 9px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
  border: 1.5px solid rgba(0, 0, 0, .06);
  transition: all .3s;
}

.ts-rc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 180, 180, .12);
  border-color: var(--teal-pale2);
}

.ts-rc-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-rc-av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.ts-rc-info {
  flex: 1
}

.ts-rc-name {
  font-size: .88rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.2;
}

.ts-rc-spec {
  font-size: .7rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 2px;
}

.ts-rc-qq {
  font-size: 2rem;
  line-height: 1;
  color: var(--teal-pale2);
  font-family: 'Georgia', serif;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -4px;
}

.ts-rc-text {
  font-size: .82rem;
  color: var(--text-mid);
  line-height: 1.72;
  font-weight: 500;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-rc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1.5px solid var(--gray-100);
  gap: 10px;
}

.ts-rc-date {
  font-size: .7rem;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}

.ts-rc-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-rc-g-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #E8E8E8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.ts-rc-stars {
  font-size: .72rem;
  color: #F59E0B;
  line-height: 1;
}

.ts-rc-count {
  font-size: .62rem;
  color: var(--text-light);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}

.ts-rc-score {
  font-size: .8rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}

/* Responsive */
@media(max-width:1024px) {
  .ts-layout {
    grid-template-columns: 1fr
  }

  .ts-left-panel {
    min-height: 320px;
    max-height: 400px
  }

  .ts-video-wrap {
    min-height: 320px
  }
}

@media(max-width:600px) {
  .ts-reviews-grid {
    grid-template-columns: 1fr
  }
}

/* ════ SECURITY REDESIGN ════ */
.sec-sec {
  padding: 100px 0 80px;
  background: linear-gradient(170deg, #081828 0%, #0D2035 50%, #081828 100%);
  position: relative;
  overflow: hidden;
}

/* Mesh background dots */
.sec-bg-mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 180, 180, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Glowing blob top right */
.sec-sec::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .1), transparent 65%);
  pointer-events: none;
}

/* Glowing blob bottom left */
.sec-sec::after {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 150, 150, .07), transparent 65%);
  pointer-events: none;
}

/* Header */
.sec-hd {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
  z-index: 1
}

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
  background: rgba(0, 180, 180, .12);
  border: 1.5px solid rgba(0, 180, 180, .25);
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.sec-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.8px;
  margin-bottom: 16px;
}

.sec-title span {
  background: linear-gradient(90deg, var(--teal), #00E8C8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sec-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto;
  font-weight: 500;
}

/* 2x2 Pillar Grid */
.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.sec-pillar {
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: all .3s;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sec-pillar:hover {
  background: rgba(0, 180, 180, .07);
  border-color: rgba(0, 180, 180, .25);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

/* Glow per pillar */
.sec-pillar-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  top: -60px;
  right: -60px;
}

.sec-pillar:hover .sec-pillar-glow {
  opacity: 1
}

.sec-glow-1 {
  background: radial-gradient(circle, rgba(255, 153, 51, .08), transparent 65%)
}

.sec-glow-2 {
  background: radial-gradient(circle, rgba(0, 180, 180, .1), transparent 65%)
}

.sec-glow-3 {
  background: radial-gradient(circle, rgba(124, 77, 255, .1), transparent 65%)
}

.sec-glow-4 {
  background: radial-gradient(circle, rgba(34, 197, 94, .08), transparent 65%)
}

/* Icon wrapper */
.sec-pillar-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sp-aws {
  background: rgba(255, 153, 51, .15);
  color: #FF9933;
  border: 1.5px solid rgba(255, 153, 51, .25)
}

.sp-backup {
  background: rgba(0, 180, 180, .15);
  color: var(--teal-light);
  border: 1.5px solid rgba(0, 180, 180, .25)
}

.sp-2fa {
  background: rgba(124, 77, 255, .15);
  color: #B4A0FF;
  border: 1.5px solid rgba(124, 77, 255, .25)
}

.sp-ip {
  background: rgba(34, 197, 94, .12);
  color: #4ADE80;
  border: 1.5px solid rgba(34, 197, 94, .2)
}

.sec-pillar-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.sec-pillar-content p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.72;
  font-weight: 500;
}

/* Stat chip at bottom */
.sec-pillar-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.sps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: spsPulse 2s infinite
}

.sps-green {
  background: #22C55E;
  box-shadow: 0 0 8px rgba(34, 197, 94, .6)
}

.sps-teal {
  background: var(--teal);
  box-shadow: 0 0 8px rgba(0, 180, 180, .6)
}

@keyframes spsPulse {
  0%, 100% {
    opacity: 1
  }

  50% {
    opacity: .6
  }
}

.sec-pillar-stat span {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .45)
}

/* Live Status Bar */
.sec-status-bar {
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  gap: 14px;
}

.ssb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .5);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-right: 8px;
  white-space: nowrap;
}

.ssb-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  animation: spsPulse 2s infinite;
}

.ssb-items {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  flex-wrap: wrap
}

.ssb-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px
}

.ssb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%
}

.ssb-dot.ssb-green {
  background: #22C55E
}

.ssb-name {
  font-size: .72rem;
  color: rgba(255, 255, 255, .45);
  font-weight: 600
}

.ssb-val {
  font-size: .72rem;
  font-weight: 800;
  color: #22C55E
}

.ssb-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .08)
}

.ssb-enc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  color: rgba(0, 180, 180, .7);
  background: rgba(0, 180, 180, .08);
  border: 1px solid rgba(0, 180, 180, .2);
  padding: 5px 13px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Compliance badges */
.sec-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1.5px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 22px 32px;
  flex-wrap: wrap;
  gap: 0;
}

.sec-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 28px;
}

.sb-ico {
  font-size: 1.4rem
}

.sb-title {
  font-size: .85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .8)
}

.sb-sub {
  font-size: .65rem;
  color: rgba(255, 255, 255, .35);
  font-weight: 600;
  margin-top: 2px
}

.sec-badge-div {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .08)
}

/* Responsive */
@media(max-width:900px) {
  .sec-grid {
    grid-template-columns: 1fr
  }

  .sec-badges {
    padding: 18px
  }

  .sec-badge {
    padding: 8px 16px
  }

  .sec-badge-div {
    display: none
  }

  .ssb-items {
    justify-content: center
  }

  .sec-status-bar {
    justify-content: center
  }
}

@media(max-width:600px) {
  .sec-status-bar {
    flex-direction: column;
    text-align: center
  }

  .ssb-sep {
    display: none
  }

  .ssb-item {
    padding: 4px 8px
  }
}

/* ── 3-STEP DIAMOND OVERRIDE ── */
.diamond-3 {
  padding: 40px 0 20px
}

.dc-row-3 {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}

.dc-conn-h {
  display: flex;
  align-items: center;
  padding: 0 8px;
  /* push connectors to the diamond mid-line (accounting for label heights) */
  margin-top: 0;
}

/* Step 1 & 3: label above, so item is taller on top */
.dc-row-3 .dc-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Step 2: label below */
.dc-row-3 .dc-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Align connectors vertically with the diamonds */
.dc-row-3 .dc-conn-h {
  align-self: center;
  margin-top: 0;
}

@media(max-width:760px) {
  .dc-row-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dc-conn-h {
    display: none
  }

  .dc-row-3 .dc-top, .dc-row-3 .dc-bot {
    flex-direction: row;
    gap: 20px;
    text-align: left;
    padding: 18px 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .dc-row-3 .dc-bot {
    flex-direction: row-reverse
  }

  .dc-label-above, .dc-label-below {
    padding: 0
  }
}

/* ════ BLOG SECTION ════ */
.blog-sec {
  padding: 80px 0; 
  background: #fff
}

.blog-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.blog-stack {
  display: flex;
  flex-direction: column;
  gap: 24px
}

/* Card base */
.blog-card {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: all .3s;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 52px rgba(0, 180, 180, .1);
  border-color: var(--teal-pale2);
}

/* Image placeholder panels */
.blog-img {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-featured .blog-img {
  height: 220px
}

.blog-img-sm {
  height: 140px
}

/* Colored gradient backgrounds simulating images */
.blog-img-1 {
  background: linear-gradient(135deg, #0D2A2A 0%, #007A7A 50%, #00B4B4 100%)
}

.blog-img-2 {
  background: linear-gradient(135deg, #1E0A4A 0%, #5A2DB0 50%, #9C6FE8 100%)
}

.blog-img-3 {
  background: linear-gradient(135deg, #2A1400 0%, #B05000 50%, #FF8C00 100%)
}

/* Grid pattern over image */
.blog-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.blog-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, transparent 60%);
}

.blog-cat-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: .65rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .2);
  letter-spacing: .3px;
}

/* Body */
.blog-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  color: var(--text-light);
  font-weight: 600
}

.blog-dot {
  opacity: .4
}

.blog-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-featured .blog-title {
  font-size: 1.15rem
}

.blog-excerpt {
  font-size: .82rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 500;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1.5px solid var(--gray-100);
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 9px
}

.blog-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .65rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}

.blog-au-name {
  font-size: .75rem;
  font-weight: 800;
  color: var(--navy)
}

.blog-au-role {
  font-size: .65rem;
  color: var(--text-light);
  font-weight: 500
}

.blog-read-btn {
  font-size: .75rem;
  font-weight: 800;
  color: var(--teal-dark);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--teal-pale2);
  background: var(--teal-pale);
  transition: all .2s;
}

.blog-read-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal)
}

/* Bottom topic row */
.blog-topics {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.blog-topic-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  transition: all .25s;
  cursor: pointer;
  text-decoration: none;
}

.blog-topic-card:hover {
  background: var(--teal-pale);
  border-color: var(--teal-pale2);
  transform: translateX(5px);
}

.bt-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.bt-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4
}

.bt-meta {
  font-size: .68rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 3px
}

.bt-arrow {
  font-size: 1rem;
  color: var(--text-light);
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  display: grid;
  place-items: center;
  transition: all .2s;
  text-decoration: none;
}

.blog-topic-card:hover .bt-arrow {
  background: var(--teal);
  color: #fff
}

/* Responsive */
@media(max-width:1024px) {
  .blog-grid {
    grid-template-columns: 1fr
  }

  .blog-stack {
    flex-direction: row
  }
}

@media(max-width:640px) {
  .blog-stack {
    flex-direction: column
  }

  .blog-grid {
    grid-template-columns: 1fr
  }
}

/* ════ BLOG SLIDER ════ */
.blog-sec {
  padding: 80px 0; 
  background: var(--off-white)
}

.blog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 24px;
  flex-wrap: wrap;
}

.blog-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-top: 8px;
}

.blog-prev, .blog-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--teal-pale2);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--teal-dark);
  transition: all .22s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.blog-prev:hover, .blog-next:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 180, 180, .4);
  transform: scale(1.05);
}

.blog-dots {
  display: flex;
  gap: 6px;
  align-items: center
}

.blog-dot-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  cursor: pointer;
  transition: all .25s;
  border: none;
  padding: 0;
}

.blog-dot-pip.active {
  background: var(--teal);
  width: 24px;
  border-radius: 4px;
}

/* Slider */
.blog-slider-wrap {
  overflow: hidden;
  border-radius: 4px;
  cursor: grab;
  user-select: none;
}

.blog-slider-wrap:active {
  cursor: grabbing
}

.blog-slider-track {
  display: flex;
  gap: 24px;
  transition: transform .45s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}

/* Card */
.bs-card {
  flex-shrink: 0;
  width: calc((100% - 48px) / 3);
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: all .3s;
  display: flex;
  flex-direction: column;
}

.bs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0, 180, 180, .12);
  border-color: var(--teal-pale2);
}

/* Image panel */
.bs-img {
  height: 200px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.bs-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 1;
}

.bs-img-overlay {
  /* position: absolute; */
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, transparent 55%);
}

/* Gradient backgrounds per article */
.bs-img-1 {
  background: linear-gradient(135deg, #0A2828 0%, #006060 50%, #00B4B4 100%)
}
.bs-img-2 {
  background: linear-gradient(135deg, #180A3A 0%, #5A2DB0 50%, #9C6FE8 100%)
}
.bs-img-3 {
  background: linear-gradient(135deg, #2A1200 0%, #A04800 50%, #FF8C00 100%)
}
.bs-img-4 {
  background: linear-gradient(135deg, #001A1A 0%, #007070 50%, #00D4D4 100%)
}
.bs-img-5 {
  background: linear-gradient(135deg, #2A0A18 0%, #B0306A 50%, #FF5FA0 100%)
}
.bs-img-6 {
  background: linear-gradient(135deg, #0A1A0A 0%, #166534 50%, #22C55E 100%)
}

/* Decorative shape on image */
.bs-img::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  z-index: 1;
}
.bs-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-size: .63rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.bs-read-time {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .3);
  padding: 3px 10px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}

/* Body */
.bs-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bs-meta {
  font-size: .7rem;
  color: var(--text-light);
  font-weight: 600
}
.bs-title {
  font-family: 'Poppins', sans-serif;
  font-size: .97rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-excerpt {
  font-size: .82rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 500;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1.5px solid var(--gray-100);
  margin-top: 4px;
  gap: 10px;
}
.bs-author {
  display: flex;
  align-items: center;
  gap: 9px
}
.bs-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .63rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}
.bs-au-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--navy)
}
.bs-au-role {
  font-size: .63rem;
  color: var(--text-light);
  font-weight: 500
}
.bs-btn {
  font-size: .73rem;
  font-weight: 700;
  color: var(--teal-dark);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--teal-pale2);
  background: var(--teal-pale);
  transition: all .2s;
  flex-shrink: 0;
}
.bs-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal)
}
/* Responsive */
@media(max-width:1024px) {
  .bs-card {
    width: calc((100% - 24px) / 2)
  }
}

@media(max-width:640px) {
  .bs-card {
    width: calc(100% - 0px)
  }

  .blog-header {
    flex-direction: column;
    gap: 16px
  }
}

/* ════ ABOUT US ════ */
.about-sec {
  padding: 80px 0; 
  background: #fff
}

/* Main split layout */
.about-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 72px;
}

.about-right {
  display: none
}

/* LEFT — story */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start
}

.about-quote {
  grid-column: 1/2
}

.about-paras {
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.about-mvv {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.about-quote {
  background: var(--navy);
  border-radius: 22px;
  padding: 32px 34px;
  position: relative;
  overflow: hidden;
}

.about-quote::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 180, .12), transparent 65%);
}

.aq-mark {
  font-size: 5rem;
  line-height: .8;
  color: rgba(0, 180, 180, .3);
  font-family: 'Georgia', serif;
  margin-bottom: 10px;
}

.aq-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.75;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.aq-author {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1
}

.aq-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  border: 2px solid rgba(255, 255, 255, .2);
}

.aq-name {
  font-size: .875rem;
  font-weight: 800;
  color: #fff
}

.aq-role {
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px
}

.about-paras {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.about-paras p {
  font-size: .92rem;
  color: var(--text-mid);
  line-height: 1.78;
  font-weight: 500
}

.about-paras strong {
  color: var(--navy);
  font-weight: 800
}

/* Mission / Vision cards */
.about-mvv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.mvv-card {
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  padding: 20px;
  transition: all .3s;
}

.mvv-card:hover {
  border-color: var(--teal-pale2);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 180, 180, .08)
}

.mvv-ico {
  font-size: 1.5rem;
  margin-bottom: 10px
}

.mvv-title {
  font-family: 'Poppins', sans-serif;
  font-size: .875rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px
}

.mvv-text {
  font-size: .78rem;
  color: var(--text-mid);
  line-height: 1.65;
  font-weight: 500
}

/* RIGHT */
.about-right {
  display: flex;
  flex-direction: column;
  gap: 24px
}

/* Stats grid */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ast-card {
  background: linear-gradient(135deg, var(--teal-pale) 0%, #fff 100%);
  border: 1.5px solid var(--teal-pale2);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  transition: all .3s;
}

.ast-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 180, 180, .12)
}

.ast-num {
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}

.ast-num span {
  font-size: 1.2rem;
  color: var(--teal)
}

.ast-lbl {
  font-size: .72rem;
  color: var(--text-light);
  font-weight: 600;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .5px
}

/* Team */
.about-team {
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 22px
}

.at-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
  margin-bottom: 16px
}

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

.at-member {
  text-align: center
}

.at-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  margin: 0 auto 8px;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: transform .2s;
}

.at-member:hover .at-av {
  transform: scale(1.1)
}

.at-name {
  font-size: .72rem;
  font-weight: 800;
  color: var(--navy)
}

.at-role {
  font-size: .63rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3
}

/* Awards */
.about-awards {
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 22px
}

.aw-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
  margin-bottom: 16px
}

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

.aw-item {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: all .25s;
}

.aw-item:hover {
  border-color: var(--teal-pale2);
  transform: translateY(-2px)
}

.aw-ico {
  font-size: 1.4rem;
  margin-bottom: 6px
}

.aw-text {
  font-size: .7rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4
}

.aw-text span {
  font-size: .63rem;
  color: var(--text-light);
  font-weight: 500;
  display: block;
  margin-top: 2px
}

/* TIMELINE */
.about-timeline {
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: 22px;
  padding: 36px 40px;
}

.atl-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
  margin-bottom: 28px;
}

.atl-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

/* Connecting line */
.atl-track::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-pale2));
  z-index: 0;
}

.atl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  position: relative;
  z-index: 1;
}

.atl-year {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-light);
  margin-bottom: 8px;
}

.atl-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--teal-pale2);
  margin-bottom: 12px;
  flex-shrink: 0;
}

.atl-dot-phys {
  background: var(--phys-c);
  box-shadow: 0 0 0 3px var(--phys-bg)
}

.atl-dot-derm {
  background: var(--derm-c);
  box-shadow: 0 0 0 3px var(--derm-bg)
}

.atl-dot-orth {
  background: var(--orth-c);
  box-shadow: 0 0 0 3px var(--orth-bg)
}

.atl-dot-now {
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--gray-200);
  width: 22px;
  height: 22px;
}

.atl-title {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 5px
}

.atl-desc {
  font-size: .72rem;
  color: var(--text-mid);
  line-height: 1.55;
  font-weight: 500
}

/* Responsive */
@media(max-width:1024px) {
  .about-story {
    grid-template-columns: 1fr
  }

  .about-quote, .about-paras {
    grid-column: auto
  }

  .about-mvv {
    grid-template-columns: 1fr 1fr
  }

  .atl-track {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .atl-track::before {
    display: none
  }

  .atl-item {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    align-items: flex-start
  }

  .atl-dot {
    flex-shrink: 0;
    margin: 3px 0 0
  }
}

@media(max-width:640px) {
  .about-mvv {
    grid-template-columns: 1fr
  }

  .about-stats-grid {
    grid-template-columns: 1fr 1fr
  }

  .aw-grid {
    grid-template-columns: 1fr
  }

  .about-timeline {
    padding: 24px 20px
  }

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

.pf-panel-mockup img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .pf-panel-mockup {
    margin-top: 20px;
  }
}
.position-relative img {
  border-radius: 12px;
}

.position-relative a {
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.position-relative a:hover {
  transform: scale(1.1);
}
.ts-rc-av img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.ts-rc-g-logo img {
  width: 20px;
  height: 20px;
}
.ts-divider {
  width: 100%;
  height: 1px;
  background-color: #e5e7eb;
  margin: 2px 0;
}
.ts-rc {
  height: 260px;            
  display: flex;
  flex-direction: column;
}
.ts-rc-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;      
  -webkit-box-orient: vertical;
}
.card-img-top {
  margin-bottom: 0px;
}
.card-body h5 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

.card-body p {
  margin-bottom: 35px;
}
footer a:hover {
  color: #00b4b4 !important;
}

footer h6 {
  letter-spacing: 0.5px;
}

footer p {
  line-height: 1.6;
}

.text-light-color{
  color: #5A7899 !important;
}
a.text-light-color{
  color: #5A7899 !important;
}
a.text-light-color:hover{
  color: #00E8C8 !important;
}

footer .footer-logo{
  width: 180px;
  height: auto;
}

@media (max-width: 768px) {

  .topbar {
    display: none;
  }
  nav {
  top: 0px;
}
    .pf-tab {
      min-width: fit-content !important;
    }
    /* .pf-panel-wrap {
      min-height: 580px;
    } */
     .pf-showcase {
      max-height: fit-content;
     }
     .specs,
     .feats-sec{
      padding: 40px 0;
     }
}
.copywrite-section{
  background-color: #00000050 !important;
}
         /* ── RIGHT SIDE — Visual ── */
.right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 560px;
  animation: fadeUp .7s .3s ease both;
}

/* Hexagonal honeycomb grid */
.hex-grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}

/* Central orb — the main element */
.orb-stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Concentric pulsing rings */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: ringPulse 4s ease-in-out infinite;
}

.ring-a {
  width: 220px; height: 220px;
  border-color: rgba(0,201,167,0.3);
  animation-delay: 0s;
}

.ring-b {
  width: 300px; height: 300px;
  border-color: rgba(0,201,167,0.15);
  animation-delay: .5s;
}

.ring-c {
  width: 390px; height: 390px;
  border-color: rgba(0,201,167,0.08);
  animation-delay: 1s;
}

.ring-d {
  width: 480px; height: 480px;
  border-color: rgba(0,201,167,0.04);
  animation-delay: 1.5s;
}

@keyframes ringPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.03); }
}

/* Rotating dashed ring with orbiting dot */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0,201,167,0.18);
  animation: spin linear infinite;
}

.orbit-ring-1 {
  width: 350px; height: 350px;
  animation-duration: 28s;
}

.orbit-ring-2 {
  width: 440px; height: 440px;
  animation-duration: 40s;
  animation-direction: reverse;
  border-color: rgba(37,99,235,0.12);
}

.orbit-ring-3 {
  width: 260px; height: 260px;
  animation-duration: 18s;
  border-color: rgba(0,201,167,0.1);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbiting dot */
.orbit-dot {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
}

.orbit-dot-2 {
  background: #60a5fa;
  box-shadow: 0 0 10px #60a5fa;
}

/* Core shield */
.shield-core {
  width: 120px; height: 120px;
  border-radius: 24px;
  background: linear-gradient(145deg, #0d2a28 0%, #0a1f2e 100%);
  border: 1px solid rgba(0,201,167,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0,201,167,0.1),
    0 0 40px rgba(0,201,167,0.25),
    0 0 80px rgba(0,201,167,0.1),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  animation: coreFloat 5s ease-in-out infinite;
}

@keyframes coreFloat {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 1px rgba(0,201,167,0.1), 0 0 40px rgba(0,201,167,0.25), 0 0 80px rgba(0,201,167,0.1), inset 0 1px 0 rgba(255,255,255,0.08); }
  50% { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(0,201,167,0.3), 0 0 80px rgba(0,201,167,0.15), inset 0 1px 0 rgba(255,255,255,0.1); }
}

/* Shield SVG icon */
.shield-svg {
  width: 52px; height: 52px;
}

/* Scan beam */
.scan-beam {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,201,167,0.6), transparent);
  top: 10%;
  border-radius: 1px;
  animation: scanBeam 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scanBeam {
  0% { top: 5%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 0.7; }
  100% { top: 95%; opacity: 0; }
}

/* Status badges floating around */
.badge-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(10,15,26,0.85);
  backdrop-filter: blur(20px);
  font-size: 12px;
  font-weight: 500;
  color: #c4d4e0;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  animation: badgeFloat 5s ease-in-out infinite;
}

.badge-float .b-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* Badge positions */
.b-encrypted  { top: 44px; left: 28%; transform: translateX(-90%); animation-delay: 0s; }
.b-aws        { top: 44px; right: -53px; animation-delay: .8s; }
.b-hipaa      { bottom: 80px; left: -20px; animation-delay: 1.6s; }
.b-twofa      { bottom: 80px; right: -97px; animation-delay: 2.4s; }

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.b-encrypted  { animation-name: bf1; }
.b-aws        { animation-name: bf2; }
.b-hipaa      { animation-name: bf3; }
.b-twofa      { animation-name: bf4; }

@keyframes bf1 { 0%,100%{top:44px} 50%{top:38px} }
@keyframes bf2 { 0%,100%{top:44px} 50%{top:50px} }
@keyframes bf3 { 0%,100%{bottom:80px} 50%{bottom:86px} }
@keyframes bf4 { 0%,100%{bottom:80px} 50%{bottom:74px} }

/* Particle field */
@keyframes particleDrift {
  0% { opacity: 0; transform: translate(0,0) scale(0); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5); }
}

.particle {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--teal);
  animation: particleDrift var(--dur, 4s) ease-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

/* Live feed ticker */
.feed {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  opacity: 0;
  animation: feedIn 8s ease-in-out infinite;
}

.feed-item:nth-child(1) { animation-delay: 0s; }
.feed-item:nth-child(2) { animation-delay: 2.5s; }
.feed-item:nth-child(3) { animation-delay: 5s; }

.feed-dot { width: 5px; height: 5px; border-radius: 50%; }

@keyframes feedIn {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 30% { opacity: 1; transform: translateY(0); }
  38%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Corner decorations */
.corner-dec {
  position: absolute;
  width: 40px; height: 40px;
  opacity: 0.3;
}

.corner-dec::before, .corner-dec::after {
  content: '';
  position: absolute;
  background: var(--teal);
}

.corner-dec.tl { top: 0; left: 0; }
.corner-dec.tl::before { top:0; left:0; width:1px; height:16px; }
.corner-dec.tl::after  { top:0; left:0; width:16px; height:1px; }

.corner-dec.br { bottom: 0; right: 0; }
.corner-dec.br::before { bottom:0; right:0; width:1px; height:16px; }
.corner-dec.br::after  { bottom:0; right:0; width:16px; height:1px; }

/* Utility */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Glow colors for badge icons */
.ic-teal   { background: rgba(0,201,167,0.12); color: #00c9a7; }
.ic-blue   { background: rgba(37,99,235,0.15); color: #60a5fa; }
.ic-green  { background: rgba(16,185,129,0.15); color: #34d399; }
.ic-amber  { background: rgba(245,158,11,0.15); color: #fbbf24; }

.dot-teal   { background: #00c9a7; box-shadow: 0 0 6px #00c9a7; }
.dot-blue   { background: #60a5fa; box-shadow: 0 0 6px #60a5fa; }
.dot-green  { background: #34d399; box-shadow: 0 0 6px #34d399; }
.dot-amber  { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }

/* Data line animation on rings */
.data-line {
  position: absolute;
  border-radius: 50%;
  width: 350px; height: 350px;
  border: 1px solid transparent;
  border-top: 2px solid rgba(0,201,167,0.5);
  animation: spin 3s linear infinite;
  filter: blur(0.5px);
}

.data-line-2 {
  width: 440px; height: 440px;
  border-top-color: rgba(37,99,235,0.3);
  animation-duration: 5s;
  animation-direction: reverse;
}
/* ════════════════════════════════════
   FAQ + ENQUIRY FORM
════════════════════════════════════ */
.faq-sec{
  padding:80px 0;
  background:#fff
}
.faq-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
/* ── Enquiry Form Card ── */
.faq-form-wrap{
  background:var(--navy);
  border-radius:22px;
  padding:36px;
  position:relative;
  overflow:hidden;
}
.faq-form-wrap::before{
  content:'';
  position:absolute;
  top:-80px;
  right:-80px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,180,.13),transparent 65%);
  pointer-events:none;
}
.faq-form-header{
  margin-bottom:24px;
  position:relative;
  z-index:1
}
.faq-form-title{
  font-family:'Poppins',sans-serif;
  font-size:1.25rem;
  font-weight:500;
  color:#fff;
  margin-bottom:6px;
}
.faq-form-sub{
  font-size:.82rem;
  color:rgba(255,255,255,.5);
  font-weight:500}

.faq-form{
  display:flex;
  flex-direction:column;
  gap:13px;
  position:relative;
  z-index:1;
}
.ff-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.ff-field{
  display:flex;
  flex-direction:column;
  gap:5px
}
.ff-label{
  font-size:.7rem;
  font-weight:600;
  color:rgba(255,255,255,.65);
  letter-spacing:.4px;
  text-transform:uppercase;
}
.ff-input{
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:.85rem;font-weight:500;
  font-family:'Nunito',sans-serif;
  outline:none;
  transition:border-color .2s,background .2s;
  box-sizing:border-box;
}
.ff-input::placeholder{
  color:rgba(255,255,255,.28)
}
.ff-input:focus{
  border-color:var(--teal);
  background:rgba(0,180,180,.1);
}
.ff-select{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none
}
.ff-select option{
  background:#1A2B4A;
  color:#fff
}
.ff-textarea{
  resize:vertical;
  min-height:82px;
  line-height:1.55
}

.ff-submit{
  width:100%;
  padding:13px 20px;
  border-radius:12px;
  background:linear-gradient(135deg,#00B4B4,#00D4D4);
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  font-family:'Nunito',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  /* box-shadow:0 4px 20px rgba(0,180,180,.4); */
  transition:all .25s;
  margin-top:4px;
}
.ff-submit:hover{
  transform:translateY(-2px);
  /* box-shadow:0 8px 28px rgba(0,180,180,.55); */
  transition:all .25s;
}
.ff-success{
  background:rgba(34,197,94,.14);
  border:1.5px solid rgba(34,197,94,.3);
  color:#4ADE80;
  border-radius:10px;
  padding:12px 16px;
  font-size:.82rem;
  font-weight:700;
  text-align:center;
}
.ff-note{
  font-size:.67rem;
  color:rgba(255,255,255,.3);
  text-align:center;
  font-weight:500;
}

/* ── FAQ Accordion ── */
.faq-list{
  display:flex;
  flex-direction:column;
  padding-top:31px;
}
.faq-item{
  border-bottom:1.5px solid var(--gray-200);
  overflow:hidden
}
.faq-item:first-child{
  border-top:1.5px solid var(--gray-200);
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 0;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  /* font-family:'Nunito',sans-serif; */
  font-size:.92rem;
  font-weight:500;
  color:var(--navy);
  transition:color .2s;
}
.faq-q:hover{
  color:var(--teal)
}
.faq-item.faq-open .faq-q{
  color:var(--teal)
}
.faq-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--gray-100);
  display:grid;
  place-items:center;
  color:var(--text-light);
  transition:all .3s;
}
.faq-item.faq-open .faq-icon{
  background:var(--teal);
  color:#fff;
  transform:rotate(180deg);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.25,.46,.45,.94);
}
.faq-item.faq-open .faq-a{
  max-height:220px
}
.faq-a p{
  padding:0 0 18px;
  font-size:.875rem;
  color:var(--text-mid);
  line-height:1.75;
  font-weight:400;
}

/* Responsive FAQ */
@media(max-width:900px){
  .faq-inner{
    grid-template-columns:1fr;
  }
  .ff-row{
    grid-template-columns:1fr;
  }
}
/* ════ INLINE CTA STRIP ════ */
.inline-cta-strip {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, #1E3A5F 55%, #0D2238 100%);
  padding: 90px 5%;
  overflow: hidden;
  border-top: 1.5px solid rgba(0,180,180,.18);
  border-bottom: 1.5px solid rgba(0,180,180,.18);
}

/* Background glow blobs */
.inline-cta-strip::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,180,.12), transparent 65%);
  pointer-events: none;
}
.inline-cta-strip::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,212,.08), transparent 65%);
  pointer-events: none;
}

.ics-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

/* Left */
.ics-left { flex: 1; min-width: 260px; }

.ics-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--teal-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.ics-dot {
  width: 8px; height: 8px;
  background: #22C55E;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pdot 2s infinite;
}

.ics-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.4px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.ics-title span {
  background: linear-gradient(90deg, var(--teal), #00D4A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ics-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  font-weight: 400;
  margin: 0;
}

/* Right */
.ics-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ics-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  background: var(--teal-grad);
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  /* box-shadow: 0 6px 22px rgba(0,180,180,.45); */
  /* transition: all .25s; */
  white-space: nowrap;
}
.ics-btn-primary:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 10px 30px rgba(0,180,180,.6); */
  color: #fff;
  transition: all .25s;
}

.ics-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  font-weight: 500;
  border: 2px solid rgba(255,255,255,.2);
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  transition: all .25s;
  white-space: nowrap;
}
.ics-btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal-light);
  background: rgba(0,180,180,.08);
  transform: translateY(-2px);
}

/* Decorative wave */
.ics-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--teal) 25%,
    var(--teal-light) 50%,
    var(--teal) 75%,
    transparent 100%
  );
  opacity: .5;
}

/* Responsive */
@media (max-width: 768px) {
  .inline-cta-strip { padding: 40px 5%; }
  .ics-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .ics-right { width: 100%; }
  .ics-btn-primary, .ics-btn-ghost { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  .ics-right { flex-direction: column; }
  .ics-btn-primary, .ics-btn-ghost { width: 100%; }
}
/* ════ BLOG SECTION ════ */
.blog-sec{padding:96px 0;background:#fff}

.blog-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px;
  margin-bottom:24px;
}
.blog-stack{display:flex;flex-direction:column;gap:24px}

/* Card base */
.blog-card{
  background:#fff;border-radius:20px;
  border:1.5px solid var(--gray-200);
  overflow:hidden;transition:all .3s;
  display:flex;flex-direction:column;
}
.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 52px rgba(0,180,180,.1);
  border-color:var(--teal-pale2);
}

/* Image placeholder panels */
.blog-img{
  position:relative;overflow:hidden;flex-shrink:0;
}
.blog-featured .blog-img{height:220px}
.blog-img-sm{height:140px}

/* Colored gradient backgrounds simulating images */
.blog-img-1{background:linear-gradient(135deg,#0D2A2A 0%,#007A7A 50%,#00B4B4 100%)}
.blog-img-2{background:linear-gradient(135deg,#1E0A4A 0%,#5A2DB0 50%,#9C6FE8 100%)}
.blog-img-3{background:linear-gradient(135deg,#2A1400 0%,#B05000 50%,#FF8C00 100%)}

/* Grid pattern over image */
.blog-img::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.blog-img-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 60%);
}
.blog-cat-chip{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  font-size:.65rem;
  font-weight:800;
  padding:4px 12px;
  border-radius:100px;
  background:rgba(255,255,255,.15);
  color:#fff;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  letter-spacing:.3px;
}

/* Body */
.blog-body{padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1
}
.blog-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.7rem;
  color:var(--text-light);
  font-weight:600
}
.blog-dot{
  opacity:.4
}
.blog-title{
  font-family:'Poppins',sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-featured .blog-title{
  font-size:1.15rem
}
.blog-excerpt{
  font-size:.82rem;
  color:var(--text-mid);
  line-height:1.7;
  font-weight:500;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
  padding-top:14px;
  border-top:1.5px solid var(--gray-100);
}
.blog-author{
  display:flex;
  align-items:center;
  gap:9px
}
.blog-av{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.65rem;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
  font-family:'Poppins',sans-serif;
}
.blog-au-name{
  font-size:.75rem;
  font-weight:800;
  color:var(--navy)
}
.blog-au-role{
  font-size:.65rem;
  color:var(--text-light);
  font-weight:500
}
.blog-read-btn{
  font-size:.75rem;
  font-weight:800;
  color:var(--teal-dark);
  text-decoration:none;
  white-space:nowrap;
  padding:6px 14px;
  border-radius:100px;
  border:1.5px solid var(--teal-pale2);
  background:var(--teal-pale);
  transition:all .2s;
}
.blog-read-btn:hover{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal)
}

/* Bottom topic row */
.blog-topics{
  display:flex;
  flex-direction:column;
  gap:2px
}
.blog-topic-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-radius:14px;
  background:#fff;
  border:1.5px solid var(--gray-200);
  transition:all .25s;
  cursor:pointer;
  text-decoration:none;
}
.blog-topic-card:hover{
  background:var(--teal-pale);
  border-color:var(--teal-pale2);
  transform:translateX(5px);
}
.bt-ico{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.bt-title{
  font-size:.875rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.4
}
.bt-meta{
  font-size:.68rem;
  color:var(--text-light);
  font-weight:500;
  margin-top:3px
}
.bt-arrow{
  font-size:1rem;
  color:var(--text-light);
  margin-left:auto;
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--gray-100);
  display:grid;
  place-items:center;
  transition:all .2s;
  text-decoration:none;
}
.blog-topic-card:hover .bt-arrow{
  background:var(--teal);
  color:#fff
}

/* Responsive */
@media(max-width:1024px){
  .blog-grid{
    grid-template-columns:1fr
  }
  .blog-stack{
    flex-direction:row
  }
}
@media(max-width:640px){
  .blog-stack{
    flex-direction:column
  }
  .blog-grid{
    grid-template-columns:1fr
  }
}

.bs-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  height: 220px;
}

.bs-img-overlay {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bs-img-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ensures proper cropping */
  display: block;
  transition: transform 0.4s ease;
}

/* Optional: smooth zoom effect on hover */
.bs-card:hover .bs-img-overlay img {
  transform: scale(1.05);
}

/* ════════════════════════════════════
   FOOTER — COMPLETE REDESIGN
════════════════════════════════════ */
.footer{
  background: var(--navy);
  padding: 62px 5% 28px;
}
.site-footer{
  background:#0B1E35;
  /* font-family:'Nunito',sans-serif; */
}

/* ── Main body ── */
.ft-main{
  padding:72px 0 56px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ft-inner{
  max-width:1240px;margin:0 auto;padding:0 5%;
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;
  gap:48px;
  align-items:start;
}

/* Brand column */
.ft-brand{
  color: rgba(255, 255, 255, .65) !important;
}
.ft-tagline{
  font-size:.85rem;
  color:#4A6580;
  line-height:1.7;
  font-weight:500;
  margin-bottom:24px;
  max-width:260px;
}

/* Contact list */
.ft-contact{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:22px;
  padding-left: 0 !important;
}
.ft-contact li{
  display:flex;
  align-items:center;
  gap:10px;
  /* font-size:.82rem; */
  font-size: 14px;
  /* color:#4A6580; */
  color: rgba(255, 255, 255, .65);
  font-weight:500;
}
.ft-contact a{
  text-decoration: none;
}
.ft-ci{
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(0,180,180,.1);
  border:1px solid rgba(0,180,180,.15);
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--teal);
}

/* Social icons */
.ft-socials{
  display:flex;
  gap:8px;
  margin-bottom:22px;
}
.ft-si{
  width:36px;
  height:36px;
  border-radius:9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  display:grid;
  place-items:center;
  color:#4A6580;
  text-decoration:none;
  transition:all .2s;
}
.ft-si:hover{
  /* background:var(--teal); */
  color:#FFFFFF;
  border-color:var(--teal);
  transform:translateY(-3px);
  /* box-shadow:0 6px 18px rgba(0,180,180,.3); */
}

/* App store badges */
.ft-stores{
  display:flex;flex-direction:column;gap:10px;
}
.ft-store{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:10px 16px;
  text-decoration:none;color:#fff;
  transition:all .22s;
  min-width:160px;
}
.ft-store:hover{
  background:rgba(0,180,180,.12);
  border-color:rgba(0,180,180,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.ft-store svg{
  flex-shrink:0;
  opacity:.85
}
.ft-store-sub{
  font-size:.57rem;
  color:rgba(255,255,255,.45);
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1;
  margin-bottom:3px;
}
.ft-store-nm{
  font-size:.9rem;
  font-weight:800;
  font-family:'Poppins',sans-serif;
  line-height:1;
}

/* Link columns */
.ft-col h4{
  font-family:'Poppins',sans-serif;
  /* font-size:.8rem; */
  font-size: 15px;
  font-weight:500;
  color:#C5D8EA;
  letter-spacing:.4px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ft-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
  padding-left: 0 !important;
}
.ft-col ul li a{
  /* font-size:.83rem; */
  font-size: 14px;
  /* color:#4A6580; */
  text-decoration:none;
  font-weight:500;
  transition:color .2s,padding .2s;
  display:block;
  color: rgba(255, 255, 255, .65);
}
.ft-col ul li a:hover{
  color:var(--teal-light);
  padding-left:6px;
}

/* ── Bottom bar ── */
.ft-bar{
  padding:18px 0;
  background:#071526;
}
.ft-bar-inner{
  max-width:1240px;margin:0 auto;padding:0 5%;
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.ft-copy{
  font-size:14px;
  color:#2A4560;
  font-weight:500;
  margin-bottom: 0;
}
.ft-trust{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.ft-trust span{
  font-size: 14px;
  color:#2A4560;
  font-weight:500;
}

/* Responsive */
@media(max-width:1100px){
  .ft-inner{grid-template-columns:1fr 1fr 1fr;gap:36px}
  .ft-brand{grid-column:1/-1}
  .ft-stores{flex-direction:row}
}
@media(max-width:640px){
  .ft-inner{grid-template-columns:1fr 1fr;gap:28px}
  .ft-brand{grid-column:1/-1}
  .ft-bar-inner{flex-direction:column;text-align:center}
  .ft-trust{justify-content:center}
  .ft-stores{flex-direction:column}
}

/* ════ FOOTER CTA BAND ════ */
.ft-cta-band{
  background:linear-gradient(135deg, #00B4B4 0%, #008A8A 50%, #006F6F 100%);
  padding:44px 5%;
  position:relative;
  overflow:hidden;
}
.ft-cta-band::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.ft-cta-band::after{
  content:'';position:absolute;bottom:-80px;left:20%;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none;
}
.ft-cta-inner{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.ft-cta-title{
  font-family:'Poppins',sans-serif;
  font-size:1.45rem;font-weight:800;color:#fff;
  line-height:1.2;
}
.ft-cta-sub{
  font-size:.9rem;color:rgba(255,255,255,.72);
  margin-top:6px;font-weight:500;
}
.ft-cta-btns{
  display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap;
}
.ft-btn-primary{
  padding:14px 30px;
  border-radius:12px;
  background:#fff;
  color:#007A7A;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
  font-family:'Nunito',sans-serif;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  transition:all .22s;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.ft-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  background:#f0fdf4;
}
.ft-btn-ghost{
  padding:14px 30px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
  font-family:'Nunito',sans-serif;
  border:2px solid rgba(255,255,255,.3);
  transition:all .22s;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.ft-btn-ghost:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.7);
  transform:translateY(-2px);
}
.topbar-item {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: rgba(255,255,255,.65);
  transition: color .2s; font-size: 13px;
}
.topbar-item:hover { 
  color: var(--teal-light);
}
.dental-badge {
    background: var(--dent-bg);
    border: 1.5px solid var(--dent-bd);
    color: var(--dent-c);
    font-size: .68rem; 
    font-weight: 700;
    padding: 3px 12px; 
    border-radius: 100px; 
    letter-spacing: .3px;
}
/* ═══════════════════════════════════════
       DENTAL FEATURES — ALTERNATING SPLIT ROWS
    ═══════════════════════════════════════ */
/* Hero mockup card */
.hero-card {
  background: #fff; border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,180,180,.15), 0 4px 24px rgba(0,0,0,.06);
  border: 1.5px solid var(--teal-pale2); overflow: hidden;
  animation: fIn .9s .3s ease both;
}
.hc-topbar {
  background: linear-gradient(90deg,var(--teal),#00CCAA);
  padding: 12px 18px; display: flex; align-items: center; gap: 7px;
}
.hc-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
.hc-title { margin-left: 6px; font-size: .72rem; color: rgba(255,255,255,.9); font-weight: 700; }
.hc-body { padding: 18px; }

/* Floating badges */
.float-badge {
  position: absolute; background: #fff;
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  border: 1.5px solid var(--teal-pale2);
  font-size: .75rem; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 8px;
  animation: fUp .8s ease both;
}
.fb-1 { top: 14%; right: -18px; animation-delay: .6s; }
.fb-2 { bottom: 22%; left: -22px; animation-delay: .8s; }
.fb-3 { bottom: 4%; right: 8%; animation-delay: 1s; }

/* Feature Mockup */
.features-sec {
  padding: 0; background: #fff; overflow: hidden;
}
.feat-block {
  padding: 80px 0; 
  position: relative;
  border-bottom: 1.5px solid var(--gray-200);
}
.feat-block:last-child { border-bottom: none; }
.feat-block:nth-child(even) { background: var(--off-white); }
.feat-block:nth-child(odd)  { background: #fff; }
.feat-block::before {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,180,180,.06), transparent 70%);
}
.feat-block:nth-child(odd)::before  { top: -80px; right: -80px; }
.feat-block:nth-child(even)::before { bottom: -80px; left: -80px; }

.feat-step {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.feat-step-num {
  width: 36px; 
  height: 36px; 
  border-radius: 10px;
  background: var(--teal-pale);
   border: 1.5px solid var(--teal-pale2);
  color: var(--teal-dark);
   font-size: .78rem; 
   font-weight: 600;
  display: grid; 
  place-items: center; 
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}
.feat-step-label {
  font-size: .72rem; 
  font-weight: 600; 
  letter-spacing: 1px;
  text-transform: uppercase;
   color: var(--teal);
}

.feat-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 600; color: var(--navy);
  letter-spacing: -.4px; line-height: 1.18; margin-bottom: 16px;
}
.feat-title .tl { 
  color: var(--teal); 
}

.feat-desc {
  font-size: 1rem; 
  color: var(--text-mid);
  line-height: 1.82; 
  font-weight: 400; 
  margin-bottom: 28px;
  text-align: justify;
}
 
.feat-bullets {
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  margin-bottom: 32px;
}
.feat-bullet {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .9rem; color: var(--text-mid); font-weight: 500;
  line-height: 1.5;
}
.feat-bullet-dot {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  background: var(--teal-pale); border: 1.5px solid var(--teal-pale2);
  color: var(--teal); display: grid; place-items: center;
  font-size: .65rem; font-weight: 600; margin-top: 1px;
}
.feat-bullet strong { 
  color: var(--navy); 
  font-weight: 600; 
}

 .feat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px; 
  border-radius: 10px;
  background: var(--teal-grad);
  border: 1.5px solid var(--teal-pale2);
  font-size: .88rem; 
  font-weight: 600; 
  color: #fff;
  text-decoration: none; 
  transition: all .22s;
} 
.feat-link:hover {
  background: var(--teal); 
  color: #fff; 
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,180,180,.3);
} 
.feat-link svg { transition: transform .2s; }
.feat-link:hover svg { transform: translateX(3px); }

.feat-mockup {
  background: #fff; border: 1.5px solid var(--teal-pale2);
  border-radius: 22px;
  box-shadow: 0 32px 80px rgba(0,180,180,.14), 0 4px 24px rgba(0,0,0,.06);
  overflow: hidden; position: relative; z-index: 1;
}
.fm-bar {
  background: linear-gradient(90deg, var(--teal) 0%, #00CCAA 100%);
  padding: 12px 18px; display: flex; align-items: center; gap: 7px;
}
.fm-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.fm-title { margin-left: 6px; font-size: .72rem; color: rgba(255,255,255,.9); font-weight: 700; flex: 1; }
.fm-badge {
  font-size: .62rem; font-weight: 800; padding: 3px 10px;
  border-radius: 20px; background: rgba(255,255,255,.2); color: #fff;
}
.fm-body { padding: 20px; }

.feat-visual-wrap {
  position: relative;
}
.feat-visual-wrap::before {
  content: '';
  position: absolute; inset: 20px -12px -16px 12px;
  background: linear-gradient(135deg, var(--teal-pale2), var(--teal-pale));
  border-radius: 24px; z-index: 0;
  opacity: .6;
}
 
.features-header {
  background: var(--navy); padding: 80px 0 64px;
  text-align: center; position: relative; overflow: hidden;
}
.features-header::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,180,.1), transparent 70%);
}
.features-header::after {
  content: ''; position: absolute; bottom: -80px; left: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,212,.06), transparent 70%);
}

@media (max-width: 991px) {
  .feat-block { padding: 64px 0; }
  .feat-visual-wrap { margin-top: 40px; }
  .feat-visual-wrap::before { display: none; }
}
@media (max-width: 576px) {
  .feat-block { padding: 48px 0; }
}
/* treatment procedure */
.procedures-sec { 
  padding: 80px 0; 
  background: #fff; 
}

.proc-card {
  background: var(--off-white); border: 1.5px solid var(--gray-200);
  border-radius: 16px; padding: 22px 20px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: all .25s; height: 100%;
}
.proc-card:hover {
  background: var(--teal-pale); border-color: var(--teal-pale2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,180,180,.1);
}
.proc-num {
  width: 36px; 
  height: 36px; 
  border-radius: 10px; 
  flex-shrink: 0;
  background: var(--teal-pale2); 
  color: var(--teal-dark);
  display: grid; 
  place-items: center;
  font-size: .78rem; 
  font-weight: 800;
}
.proc-title { 
  font-size: .9rem; 
  font-weight: 600; 
  color: var(--navy); 
  margin-bottom: 4px; 
}
.proc-desc  { 
  font-size: .8rem; 
  color: var(--text-mid); 
  line-height: 1.6; 
  font-weight: 400; 
}


/* AI COPILOT SECTION */
.ai-sec-dental {
  padding: 80px 0;  
  background: var(--navy);
  position: relative; 
  overflow: hidden;
}
.ai-sec-dental::before {
  content: ''; 
  position: absolute; 
  top: -160px; 
  right: -160px;
  width: 500px; 
  height: 500px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,180,.12), transparent 70%);
}
.ai-sec-dental::after {
  content: ''; 
  position: absolute; 
  bottom: -120px; 
  left: -120px;
  width: 380px; 
  height: 380px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,212,.08), transparent 70%);
}
.ai-card-d {
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(0,180,180,.18);
  border-radius: 20px; 
  padding: 28px;
  transition: all .3s; 
  position: relative; 
  overflow: hidden;
  height: 100%;
}
.ai-card-d::before {
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 2px;
  background: linear-gradient(90deg,var(--teal),var(--teal-light));
  opacity: 0; 
  transition: opacity .3s;
}
.ai-card-d:hover {
  transform: translateY(-6px);
  background: rgba(0,180,180,.08);
  border-color: rgba(0,180,180,.4);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ai-card-d:hover::before { 
  opacity: 1; 
}
.ai-icon-d {
  width: 54px; 
  height: 54px; 
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(0,180,180,.2),rgba(0,180,180,.08));
  border: 1.5px solid rgba(0,180,180,.25);
  display: grid; 
  place-items: center; 
  font-size: 1.5rem; 
  margin-bottom: 18px;
}
.ai-tag-d {
  font-size: .62rem; 
  font-weight: 800; 
  letter-spacing: 1px;
  text-transform: uppercase; 
  color: var(--teal-light);
  background: rgba(0,180,180,.12); 
  padding: 3px 10px;
  border-radius: 20px; 
  display: inline-block;
  margin-bottom: 10px;
}
.ai-title-d { 
  font-family: 'Poppins',sans-serif; 
  font-size: 1.05rem; 
  font-weight: 700; 
  color: #fff; 
  margin-bottom: 8px; 
}
.ai-desc-d  { 
  font-size: .85rem; 
  color: rgba(255,255,255,.6); 
  line-height: 1.7; 
  font-weight: 400; 
}

/*  TESTIMONIALS */
.testi-sec { 
  padding: 80px 0; 
  background: #fff; 
}
.testi-card {
  background: var(--off-white); 
  border: 1.5px solid var(--gray-200);
  border-radius: 20px; 
  padding: 28px; 
  height: 100%; 
  transition: all .3s;
}
.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(0,180,180,.1);
  border-color: var(--teal-pale2);
}
.testi-stars { 
  color: #F59E0B; 
  font-size: .9rem; 
  margin-bottom: 12px; 
}
.testi-text  {
  font-size: .9rem; 
  color: var(--text-mid); 
  line-height: 1.75;
  font-style: italic; 
  margin-bottom: 20px; 
  font-weight: 400;
}
.testi-av {
  width: 42px; 
  height: 42px; 
  border-radius: 50%;
  display: grid; 
  place-items: center;
  font-size: .82rem; 
  font-weight: 800; 
  flex-shrink: 0; 
  color: #fff;
}
.testi-name { 
  font-weight: 600; 
  font-size: .88rem; 
  color: var(--navy); 
}
.testi-role { 
  font-size: .73rem; 
  color: var(--text-light); 
  margin-top: 2px; 
}
.testi-badge {
  font-size: .62rem; 
  font-weight: 600; 
  padding: 2px 9px;
  border-radius: 10px; 
  margin-top: 4px; 
  display: inline-block;
}    

/* ═══════════════════════════
    UTILITIES
═══════════════════════════ */
.teal-text { color: var(--teal); }
.grad-text {
  background: linear-gradient(90deg, var(--teal), #00D4A0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-divider {
  height: 1.5px; background: var(--gray-200); margin: 0;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .dental-hero { 
    padding: 80px 0 56px; 
    min-height: auto; 
  }
  .fb-1, .fb-2, .fb-3 {
     display: none; 
  }
  .cta-box-d {
     padding: 48px 24px;
  }
  .sticky-cta {
     padding: 10px 16px;
  }
}
@media (max-width: 576px) {
  .hero-h1 { 
    font-size: 2.2rem; 
  }
  .stat-num {
     font-size: 1.5rem; 
    }
  .hero-proof { 
    flex-direction: column; 
    align-items: flex-start; 
    }
}
/* SOLO-CLINIC BANNER MOKEUP */
.stats-band {
    background: var(--navy);
    padding: 36px 0;
    border-top: 1.5px solid rgba(0, 180, 180, .15);
    border-bottom: 1.5px solid rgba(0, 180, 180, .15)
}

.stat-item {
    text-align: center;
    padding: 8px 0
}

.stat-num {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px
}

.stat-num span {
    color: var(--teal);
    font-size: 1.1rem
}

.stat-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45)
}

.stat-div {
    width: 1px;
    background: rgba(255, 255, 255, .1)
}

/* Section headers */
.sh {
    text-align: center;
    margin-bottom: 56px
}

.s-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--teal-pale);
    border: 1.5px solid var(--teal-pale2);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--teal-dark);
    margin-bottom: 18px
}

.s-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.5px;
    line-height: 1.18;
    margin-bottom: 14px
}

.s-title .tl {
    color: var(--teal)
}

.s-sub {
    font-size: 1rem;
    color: var(--text-mid);
    font-weight: 400;
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto
}
/* Solo Clinic Feature */
.showcase-sec { 
  padding: 80px 0; 
  background: var(--white); 
}
.showcase-mockup {
  background: #fff; border: 1.5px solid var(--teal-pale2);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,180,180,.13), 0 4px 20px rgba(0,0,0,.05);
  overflow: hidden;
}
.sm-bar {
  background: linear-gradient(90deg, var(--teal), #00CCAA);
  padding: 12px 18px; display: flex; align-items: center; gap: 7px;
}
.sm-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.sm-title { margin-left: 6px; font-size: .72rem; color: rgba(255,255,255,.9); font-weight: 700; }
.sm-live {
  margin-left: auto; font-size: .62rem; font-weight: 800;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,.2); color: #fff;
}
.sm-body { padding: 18px; }

/* Tooth grid */
.tooth-grid {
  display: grid; grid-template-columns: repeat(8,1fr); gap: 5px;
  margin-bottom: 12px;
}
.tooth {
  aspect-ratio: 1; border-radius: 8px; display: grid;
  place-items: center; font-size: .65rem; font-weight: 800;
  border: 1.5px solid var(--gray-200); background: var(--off-white);
  cursor: pointer; transition: all .2s; color: var(--text-mid);
}
.tooth.t-ok  { background: var(--teal-pale); border-color: var(--teal-pale2); color: var(--teal-dark); }
.tooth.t-bad { background: #FFF1F0; border-color: #FECACA; color: #DC2626; }
.tooth.t-warn{ background: #FFFBEB; border-color: #FDE68A; color: #D97706; }
.tooth.t-done{ background: #F0FDF4; border-color: #86EFAC; color: #16A34A; }
.tooth-label { font-size: .58rem; margin-top: 1px; }
/* ═══════════════════════════
    BILLING SECTION
═══════════════════════════ */
.billing-sec { 
  padding: 80px 0;  
  background: var(--off-white); 
}

.bill-point {
  display: flex; 
  align-items: flex-start; 
  gap: 12px; 
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-200);
}
.bill-point:last-child { 
  border-bottom: none; 
}
.bill-check {
  width: 26px; 
  height: 26px; 
  border-radius: 50%; 
  margin-top: 10px;
  flex-shrink: 0;
  background: var(--teal-pale); 
  color: var(--teal);
  display: grid; 
  place-items: center; 
  font-size: .7rem; 
  font-weight: 900;
}
.bill-pt-title { 
  font-size: .9rem; 
  font-weight: 700; 
  color: var(--navy); 
  margin-bottom: 2px; 
}
.bill-pt-desc  { 
  font-size: .8rem; color: var(--text-mid); line-height: 1.5; font-weight: 400; }

.workflow-section {
    padding: 80px 0;
    background: var(--off-white);
}

/* Card Base */
.workflow-card {
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    height: 100%;
    transition: all 0.3s;
}

.workflow-card:hover {
    box-shadow: 0 14px 44px rgba(0, 180, 180, 0.1);
    border-color: var(--teal-pale2);
}

/* Icon */
.workflow-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--teal-pale);
    border: 1.5px solid var(--teal-pale2);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin: 0 auto 16px;
}

/* Titles */
.workflow-card .title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

/* Description */
.workflow-card .desc {
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.6;
}

/* Time */
.workflow-card .time {
    margin-top: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--teal);
}

/* Highlight Card */
.workflow-card.highlight {
    background: var(--teal-grad);
    border: none;
}

/* White Variants */
.workflow-card .white {
    color: #fff;
}

.workflow-card .white-light {
    color: rgba(255, 255, 255, 0.8);
}

.workflow-card.highlight .icon {
    background: rgba(255, 255, 255, 0.2);
    border: none;
}
/* ════════════════════════
   CITIES — FULL-BLEED MAP STYLE
════════════════════════ */
.cities-sec {
  padding: 80px 0;
  background: var(--off-white);
  /* position:relative; */
}
.cities-sec::before {
  content:'🍁';
  position:absolute; font-size:320px; top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:.025; pointer-events:none; user-select:none;
  line-height:1;
}
.cities-inner { max-width:1280px; margin:0 auto; }
.cities-split {
  display:grid; grid-template-columns:380px 1fr;
  gap:4rem; align-items:start;
}
.cities-left { position:sticky; top:100px; }
.cities-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2rem;
}
.c-stat {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.25rem;
  text-align:center;
}
.c-stat .cnum {
  font-family:var(--font-display); font-size:1.8rem; font-weight:800;
  color:var(--teal);
}
.c-stat .clbl { font-size:11px; color:var(--smoke); margin-top:3px; }

.cities-right { display:flex; flex-direction:column; gap:.75rem; }
.city-row {
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:1.25rem;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-xl); padding:1.25rem 1.5rem;
  transition:.25s; cursor:pointer;
}
.city-row:hover { border-color:var(--teal); box-shadow:0 8px 32px rgba(25,186,172,.1); transform:translateX(4px); }
.city-row.hot { border-color:var(--teal); background:var(--teal-pale); }
.city-rank {
  font-family:var(--font-display); font-size:.85rem; font-weight:800;
  color:var(--smoke); width:28px; text-align:center;
}
.city-row.hot .city-rank { color:var(--teal-deep); }
.city-info { }
.city-name { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--ink); }
.city-prov { font-size:11px; color:var(--smoke); text-transform:uppercase; letter-spacing:.06em; margin-top:1px; }
.city-bar-wrap { flex:1; display:flex; align-items:center; gap:10px; }
.city-bar-track { flex:1; height:5px; background:var(--mist); border-radius:100px; overflow:hidden; }
.city-bar-fill { height:100%; background:var(--grad-teal); border-radius:100px; transition:width .4s; }
.city-count {
  font-family:var(--font-display); font-size:.95rem; font-weight:700;
  color:var(--navy); white-space:nowrap;
}
.city-row.hot .city-count { color:var(--teal-deep); }
.city-badge {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 8px; border-radius:100px;
  background:var(--teal); color:#fff;
}

.image-text-section{
    display:flex;
    align-items:center;
    min-height:70vh;
    border-bottom:1px solid #ddd;
}

.section-image,
.section-content{
    width:50%;
}

.section-image{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:10rem;
}

.image-wrapper{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
}

.image-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.section-content{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px;
}

.content-inner{
    max-width:500px;
}

.section-label{
    display:block;
    margin-bottom:20px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:#666;
}

.content-inner h2{
    margin-bottom:20px;
    font-size:40px;
    font-weight:600;
    line-height:1.2;
    color:#000;
}

.content-inner p{
    margin-bottom:30px;
    font-size:18px;
    line-height:1.7;
    color:#555;
}

.content-inner button{
    padding:14px 32px;
    border:1px solid #000;
    background:transparent;
    color:#000;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    transition:all .3s ease;
}

.content-inner button:hover{
    background:#115478;
    color:#fff;
}

@media (max-width:768px){
    .image-text-section{
        flex-direction:column;
    }

    .section-image,
    .section-content{
        width:100%;
        padding:30px 20px;
    }

    .content-inner{
        max-width:100%;
    }
}

/* css code for "getting started" section -index  */

.getting-started-v2{
    padding:120px 0;
    background:#f8fbfb;
    overflow:hidden;
}

.getting-started-v2 .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.section-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 80px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    background:#fff;
    border:1px solid #dfeeee;
    border-radius:999px;
    font-size:.9rem;
    font-weight:600;
    color:#008080;
}

.section-tag img{
    width:20px;
    height:20px;
}

.section-header h2{
    font-size:3rem;
    line-height:1.15;
    margin:24px 0 18px;
    color:#111;
}

.section-header h2 span{
    color:#0f9d9d;
}

.section-header p{
    font-size:1.1rem;
    line-height:1.8;
    color:#666;
}

.steps-wrapper{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.progress-line{
    position:absolute;
    top:70px;
    left:15%;
    right:15%;
    height:3px;
    background:linear-gradient(
      to right,
      #c8efef,
      #87dcdc,
      #32c5c5
    );
    z-index:1;
}

.steps-wrapper{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.step-card{
    position:relative;
    z-index:2;
    background:#f7fcfc;
    border-radius:20px;
    padding:32px 24px;
    text-align:center;
    border:1px solid #d9f0f0;
    background: linear-gradient(
        180deg,
        #81C1D4 0%,
        #ffffff 100%
    );
    box-shadow:
        0 10px 30px rgba(0,0,0,.04),
        0 2px 10px rgba(15,157,157,.06);
    transition:.35s ease;
}

.step-card:hover{
    transform: translateY(-10px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.14),
        0 12px 35px rgba(15,157,157,.18);
}

.step-number{
    position:absolute;
    top:20px;
    right:20px;
    font-size:.9rem;
    font-weight:700;
    color:#0f9d9d;
}

.step-icon{
    width:72px;
    height:72px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#e7f8f8;
    color:#0f9d9d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.7rem;
}

.step-icon.success{
    background:#e8fff1;
    color:#16a34a;
}

.step-card h3{
    font-size:1.25rem;
    margin-bottom:12px;
    color:#111;
}

.step-card p{
    color:#666;
    line-height:1.65;
    font-size:.95rem;
    margin-bottom:20px;
}

.step-time{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:#edf7f7;
    color:#555;
    font-size:.85rem;
    font-weight:600;
}

.step-time.live{
    background:#e8fff1;
    color:#16a34a;
}

.getting-started-v2{
    padding:120px 0;
    background:#ffffff;
    overflow:hidden;
}
@media(max-width:991px){

    .steps-wrapper{
        grid-template-columns:1fr;
        gap:25px;
    }

    .progress-line{
        display:none;
    }

    .section-header h2{
        font-size:2.2rem;
    }
}




/* ═══════════════════════════════════════════
   Features folder html file's css code
═══════════════════════════════════════════ */
:root {
  --teal:        #00BFA5;
  --teal-dark:   #009688;
  --teal-light:  #E0F7F4;
  --navy:        #1A2B3C;
  --charcoal:    #2D3748;
  --body-text:   #4A5568;
  --muted:       #718096;
  --border:      #E2E8F0;
  --bg-white:    #FFFFFF;
  --bg-pale:     #F7FAFB;
  --bg-dark:     #1B2B3A;

  --font-head:  'Manrope', sans-serif;
  --font-body:  'Inter', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 6px 24px rgba(0,0,0,0.09);
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════
   SHARED UTILITIES
═══════════════════════════════════════════ */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 28px;
}

.highlight { color: var(--teal); }
.brand-teal { color: var(--teal); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.btn--outline {
  border-color: var(--teal);
  color: var(--teal);
  background: transparent;
}
.btn--outline:hover { background: var(--teal-light); }

.btn--teal {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.btn--teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.btn--dark {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--dark:hover { background: var(--charcoal); }

.btn--white {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  font-weight: 700;
}
.btn--white:hover { background: #f0fdfb; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero-f{
  background:linear-gradient(
    135deg,
    #eef9f7 0%,
    #f7ffff 50%,
    #ecf8fa 100%
  );
  padding:90px 24px;
  overflow:hidden;
  position:relative;
}

.hero__inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px;
}

.hero__content{
  max-width:620px;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:100px;
  background:#e3fbf7;
  border:1px solid rgba(0,180,180,.18);
  color:#009c95;
  font-size:.8rem;
  font-weight:700;
  margin-bottom:28px;
}

.hero__headline{
  font-family:var(--font-head);
  font-size:clamp(3rem,2vw,3rem);
  line-height:1.05;
  font-weight:600;
  color:#13253f;
  letter-spacing:-2px;
}

.highlight{
  display:block;
  background:linear-gradient(
    90deg,
    #00c5bb,
    #23d2c9
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero__desc{
  margin-top:28px;
  font-size:1.15rem;
  line-height:1.8;
  color:#5f7289;
  max-width:560px;
}

.hero__actions{
  display:flex;
  gap:16px;
  margin-top:36px;
  flex-wrap:wrap;
}

.hero-btn{
  text-decoration:none;
  font-weight:700;
  border-radius:14px;
  transition:.25s;
}

.hero-btn-primary{
  background:#13c8bb;
  color:white;
  padding:16px 28px;
  box-shadow:0 12px 30px rgba(19,200,187,.25);
}

.hero-btn-primary:hover{
  transform:translateY(-2px);
}

.hero-btn-secondary{
  padding:16px 28px;
  border:1px solid rgba(19,37,63,.1);
  background:white;
  color:#13253f;
}

.hero__image-wrap{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.hero__image{
  width:100%;
  display:block;
  height:520px;
  object-fit:cover;
}

.hero-card{
  position:absolute;
  left:24px;
  bottom:24px;
  background:white;
  padding:16px 18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.hero-card-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#e5fbf8;
  color:#10b8ab;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.hero-card-title{
  font-weight:700;
  color:#13253f;
}

.hero-card-sub{
  font-size:.85rem;
  color:#66768b;
}

@media(max-width:900px){

  .hero__inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .hero__headline{
    font-size:clamp(2.6rem,8vw,4rem);
  }

  .hero__image{
    height:420px;
  }
}

/* ═══════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1120px;
  margin: 20px auto;
  padding: 0 24px;
  font-size: 0.82rem;
  color: var(--muted);
}

.breadcrumb .sep { color: var(--border); }
.breadcrumb .active { color: var(--charcoal); font-weight: 500; }

/* ═══════════════════════════════════════════
   HOW IT HELPS
═══════════════════════════════════════════ */
.helps{
  padding:100px 24px;
  background:#f8fcfc;
}

.helps-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 70px;
}

.helps-title{
  font-family:var(--font-head);
  font-size:clamp(1.5rem,3vw,3rem);
  font-weight:600;
  color:var(--navy);
  line-height:1.15;
  margin-bottom:18px;
}

.helps-subtitle{
  font-size:1.1rem;
  line-height:1.7;
  color:#6c7b8e;
}

.helps__inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  align-items:center;
}

.help-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 24px;
  background:#fff;
  border:1px solid #dfeeee;
  border-radius:16px;
  box-shadow:
    0 4px 12px rgba(15,23,42,.03);

  transition:.3s ease;
  margin-bottom:15px;
}

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

  border-color:#9ddfd8;

  box-shadow:
    0 14px 32px rgba(0,191,165,.16),
    0 8px 20px rgba(15,23,42,.10);
}

.help-card::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:20px;
  background:#11c5ba;
}

.help-card h3{
  font-size:1rem;
  font-weight:600;
  color:var(--navy);
  margin-bottom:6px;
}

.help-card p{
  font-size:0.86rem;
  line-height:1.7;
  color:#66768b;
}

.help-card__icon{
  
  border-radius:12px;
  background:#e5fbf8;
  color:#10b8ab;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
/* ==========================================
   AXON SECTION
========================================== */

.axon {
  background: #f8fcfc;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}

.axon::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,191,165,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.axon__inner {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.axon__visual {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(15,23,42,0.1),
              0 0 0 1px rgba(0,191,165,0.12);
}

.axon__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.axon__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #00bfa5;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.axon__heading {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #0d2535;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.axon__heading .highlight {
  color: #00bfa5;
}

.axon__subtext {
  font-size: 0.88rem;
  color: #6c7b8e;
  line-height: 1.75;
  margin-bottom: 28px;
}

.axon__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 36px;
}

.axon-feat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.axon-feat__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.axon-feat__check svg {
  width: 100%;
  height: 100%;
}

.axon-feat strong {
  font-size: 0.83rem;
  font-weight: 600;
  color: #0d2535;
  line-height: 1.4;
}

.btn--teal {
  display: inline-block;
  padding: 13px 28px;
  background: #00bfa5;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.01em;
  border: 2px solid #00bfa5;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn--teal:hover {
  background: transparent;
  color: #00bfa5;
}

/* ═══════════════════════════════════════════
   CAPABILITIES SUITE
═══════════════════════════════════════════ */
.suite {
  padding: 80px 24px;
  background: var(--bg-white);
  text-align: center;
}

.suite__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

.suite__heading {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
}

.suite__sub {
  font-size: 0.9rem;
  color: var(--body-text);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.65;
}

.suite__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.suite-card {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-align: left;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.suite-card:hover,
.suite-card--active {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}

.suite-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.suite-card__icon svg { width: 42px; height: 42px; }

.suite-card__title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.suite-card__desc {
  font-size: 0.83rem;
  color: var(--body-text);
  line-height: 1.65;
}

/* Pagination dots */
.suite__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.dot--active {
  background: var(--teal);
  width: 22px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
.faq {
  padding: 80px 24px;
  background: var(--bg-pale);
}

.faq__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: flex-start;
}

.faq__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

.faq__heading {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}

.faq__cta-text {
  font-size: 0.85rem;
  color: var(--body-text);
  margin-bottom: 28px;
  line-height: 1.6;
}

.faq__cta-text a { color: var(--teal); font-weight: 600; }
.faq__cta-text a:hover { text-decoration: underline; }

/* FAQ items */
.faq-item {
  border-bottom: 1.5px solid var(--border);
  padding: 18px 0;
}

.faq-item:first-child { border-top: 1.5px solid var(--border); }

.faq-item__q {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.faq-item__q::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item[open] > .faq-item__q::after {
  content: '×';
}

.faq-item__a {
  font-size: 0.85rem;
  color: var(--body-text);
  line-height: 1.7;
  padding-top: 12px;
}

.faq-item--open { }

/* ═══════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════ */
.cta-banner {
  background: linear-gradient(90deg, #1B3A4B 0%, #0D2E3C 100%);
  padding: 36px 24px;
}

.cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-banner__text {
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 600;
  color: #fff;
  max-width: 680px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero__inner,
  .helps__inner,
  .axon__inner,
  .faq__inner {
    grid-template-columns: 1fr;
  }

  .hero__image-wrap { max-height: 260px; }
  .hero__image      { height: 260px; }

  .hero__content { padding-bottom: 0; }

  .axon__inner { direction: ltr; }

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

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

@media (max-width: 560px) {
  .cta-banner__inner { flex-direction: column; align-items: flex-start; }
}