/* ===================================
   app.css - Consolidated Styles
   hidemedia.co.in
   =================================== */

/* ===== 1. CSS Custom Properties ===== */
:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #DBEAFE;
  --heading: #0F172A;
  --text: #475569;
  --bg-light: #F8FAFC;
  --bg-blue: #e3f0ff;
  --white: #FFFFFF;
}

/* ===== 2. Base Overrides ===== */
html {
  scroll-behavior: smooth;
}
body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
}
a {
  color: var(--primary);
}
a:hover {
  color: var(--primary-dark);
}
.btn-primary,
.btn-theme {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-theme:hover,
.btn-theme:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ===== 3. Skip to Content ===== */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  padding: 8px 20px;
  z-index: 10000;
  border-radius: 0 0 5px 5px;
  font-weight: 600;
  transition: top 0.3s;
}
.skip-to-content:focus {
  top: 0;
  color: #fff;
}

/* ===== 4. Animation Keyframes (replaces animate.css) ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 5. Scroll Animation (replaces WOW.js) ===== */
.wow {
  opacity: 0;
  transform: translateY(20px);
}
.wow.animated {
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.6s ease forwards;
}

/* ===== 6. Navbar Styles (replaces bootsnav) ===== */
/* --- Navbar Shell --- */
.navbar.sticky-top {
  padding: 0;
  transition: all 0.35s ease;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: none;
}
.navbar.sticky-top.navbar-scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border-bottom-color: transparent;
}

/* --- Brand --- */
.navbar .navbar-brand {
  padding: 12px 0;
}
.navbar .navbar-brand .logo {
  height: 46px;
  width: auto;
  transition: height 0.3s ease;
}
.navbar.navbar-scrolled .navbar-brand .logo {
  height: 40px;
}

/* --- Nav Links --- */
.navbar .navbar-nav .nav-link {
  color: var(--heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  padding: 22px 16px;
  position: relative;
  transition: color 0.25s ease;
}
.navbar .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2.5px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--primary);
}
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-item.active .nav-link::after {
  transform: scaleX(1);
}
/* hide pseudo underline on dropdown toggles (caret already indicates) */
.navbar .navbar-nav .dropdown-toggle::after {
  margin-left: 5px;
  vertical-align: 2px;
  border-top-width: 5px;
  border-right-width: 4px;
  border-left-width: 4px;
  transition: transform 0.25s ease;
}
.navbar .navbar-nav .dropdown:hover > .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* --- Dropdown --- */
.navbar .dropdown-menu {
  border: none;
  border-top: 2.5px solid var(--primary);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  border-radius: 0 0 8px 8px;
  padding: 8px 0;
  min-width: 230px;
  animation: navDropIn 0.25s ease forwards;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.navbar .dropdown-menu .dropdown-item {
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: var(--bg-blue);
  color: var(--primary);
  border-left-color: var(--primary);
  padding-left: 23px;
}

/* --- CTA Button --- */
.btn-get-quote {
  background: var(--primary);
  color: #fff !important;
  border-radius: 50px;
  padding: 9px 24px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: none;
  box-shadow: 0 2px 12px rgba(37,99,235,0.3);
  transition: all 0.3s ease;
}
.btn-get-quote:hover {
  background: var(--primary-dark);
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.45);
  transform: translateY(-1px);
}

/* --- Mobile Toggler --- */
.navbar-toggler {
  border: none;
  padding: 6px;
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
}
.navbar-toggler-icon {
  width: 24px;
  height: 24px;
  background-image: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--heading);
  border-radius: 2px;
  position: absolute;
  transition: all 0.3s ease;
}
.navbar-toggler-icon::before { top: 5px; }
.navbar-toggler-icon::after  { bottom: 5px; }
.navbar-toggler-icon span     { top: 50%; transform: translateY(-50%); }

/* ===== 7. Top Bar ===== */
.top-bar-area.bg-dark {
  background: #1a1a2e !important;
  padding: 6px 0;
  font-size: 13px;
}
.top-bar-area .info ul {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
}
.top-bar-area .info ul li a {
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  font-size: 13px;
}
.top-bar-area .info ul li a:hover {
  color: #fff;
}
.top-bar-area .info ul li a i {
  margin-right: 4px;
}
.top-bar-area .item-flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ===== 7b. Breadcrumb Redesign ===== */
.breadcrumb-area {
  background: linear-gradient(135deg, #0F172A 0%, #1e3a5f 60%, #0F172A 100%) !important;
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.breadcrumb-area::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(37,99,235,0.08);
  top: -100px;
  right: -60px;
  pointer-events: none;
}
.breadcrumb-area::after {
  background: rgba(37,99,235,0.05) !important;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  bottom: -60px;
  left: 10%;
  opacity: 1 !important;
}
.breadcrumb-area.shadow.dark::after {
  background: none !important;
  opacity: 0 !important;
}
.breadcrumb-area h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.3px;
}
.breadcrumb-area .breadcrumb {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 18px !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.breadcrumb-area .breadcrumb::after { display: none !important; }
.breadcrumb-area .breadcrumb li {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}
.breadcrumb-area .breadcrumb li::after {
  display: inline !important;
  border: none !important;
  content: '/' !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 8px !important;
  color: rgba(255,255,255,0.25);
  font-size: 13px;
  top: auto !important;
  border-radius: 0 !important;
}
.breadcrumb-area .breadcrumb li:last-child::after { display: none !important; }
.breadcrumb-area .breadcrumb li:last-child { color: #60a5fa; }
.breadcrumb-area .breadcrumb a {
  color: rgba(255,255,255,0.8) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb-area .breadcrumb a:hover { color: #fff !important; }
.breadcrumb-area .breadcrumb li i { margin-right: 4px; font-size: 12px; }

/* ===== 8. Hero Split Layout ===== */
.hero-split {
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
}
.hero-split__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0edff 50%, #f8fafc 100%);
  z-index: 0;
}
.hero-split__shapes .shape {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.hero-split__shapes .shape--1 {
  width: 300px; height: 300px;
  background: rgba(37,99,235,0.06);
  top: -80px; right: -60px;
}
.hero-split__shapes .shape--2 {
  width: 200px; height: 200px;
  background: rgba(37,99,235,0.04);
  bottom: -40px; left: 10%;
}
.hero-split__shapes .shape--3 {
  width: 120px; height: 120px;
  background: rgba(37,99,235,0.08);
  top: 40%; left: 45%;
}
.hero-split .container { position: relative; z-index: 2; }
.hero-split__content { padding-right: 30px; }
.hero-split__badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}
.hero-split__content h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--heading);
}
.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-split__content p {
  font-size: 17px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 500px;
}
.hero-split__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-split__actions .btn { padding: 12px 28px; font-weight: 600; font-size: 15px; border-radius: 8px; }
.hero-split__actions .btn-primary i { margin-left: 6px; }
.hero-split__actions .btn-outline-dark i { margin-right: 6px; }
.hero-split__clients-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.hero-split__stars { color: #f59e0b; font-size: 13px; display: flex; gap: 2px; }
.hero-split__image {
  position: relative;
  text-align: center;
}
/* Dashboard Mockup */
.dash-mock {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(37,99,235,0.15);
  overflow: hidden;
  width: 100%;
}
.dash-mock__chrome {
  background: #1e293b;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-mock__dots {
  display: flex;
  gap: 6px;
}
.dash-mock__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dash-mock__dots span:nth-child(1) { background: #ef4444; }
.dash-mock__dots span:nth-child(2) { background: #eab308; }
.dash-mock__dots span:nth-child(3) { background: #22c55e; }
.dash-mock__url {
  flex: 1;
  background: #334155;
  border-radius: 6px;
  padding: 5px 12px;
  color: #cbd5e1;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-mock__url i { font-size: 9px; color: #22c55e; }
.dash-mock__body {
  display: flex;
  min-height: 320px;
}
.dash-mock__sidebar {
  width: 48px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dash-mock__nav {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #e2e8f0;
  transition: background 0.2s;
}
.dash-mock__nav.active { background: var(--primary); }
.dash-mock__main {
  flex: 1;
  padding: 16px;
  min-width: 0;
}
.dash-mock__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.dash-mock__title {
  width: 120px;
  height: 12px;
  background: #cbd5e1;
  border-radius: 4px;
}
.dash-mock__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
}
.dash-mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.dash-mock__card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
}
.dash-mock__card-label {
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  font-weight: 600;
}
.dash-mock__card-val {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}
.dash-mock__card-trend {
  font-size: 10px;
  color: #15803d;
  font-weight: 600;
  margin-top: 2px;
}
.dash-mock__chart {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}
.dash-mock__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dash-mock__chart-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}
.dash-mock__chart-period {
  font-size: 9px;
  color: #64748b;
}
.dash-mock__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}
.dash-mock__bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--primary), #60a5fa);
  height: var(--h);
  transform-origin: bottom;
  animation: dashBarGrow 0.8s ease-out both;
}
.dash-mock__bar:nth-child(1) { animation-delay: 0.1s; }
.dash-mock__bar:nth-child(2) { animation-delay: 0.2s; }
.dash-mock__bar:nth-child(3) { animation-delay: 0.3s; }
.dash-mock__bar:nth-child(4) { animation-delay: 0.4s; }
.dash-mock__bar:nth-child(5) { animation-delay: 0.5s; }
.dash-mock__bar:nth-child(6) { animation-delay: 0.6s; }
.dash-mock__bar:nth-child(7) { animation-delay: 0.7s; }
@keyframes dashBarGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.hero-split__float-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  z-index: 3;
}
.hero-split__float-card i {
  font-size: 28px;
  color: var(--primary);
}
.hero-split__float-card div strong { display: block; font-size: 18px; color: var(--heading); line-height: 1.2; }
.hero-split__float-card div span { font-size: 12px; color: var(--text); }
.hero-split__float-card--top { top: 15%; left: -30px; animation: floatY 3s ease-in-out infinite; }
.hero-split__float-card--bottom { bottom: 15%; right: -20px; animation: floatY 3s ease-in-out 1.5s infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== 9. Stats Bar ===== */
.stats-bar {
  background: #0F172A;
  padding: 40px 0;
}
.stats-bar__grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.stats-bar__item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 200px;
  justify-content: center;
}
.stats-bar__icon {
  width: 52px; height: 52px;
  background: rgba(37,99,235,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-size: 20px;
  flex-shrink: 0;
}
.stats-bar__num { color: #fff; font-size: 28px; font-weight: 800; margin: 0; line-height: 1; display: block; }
.stats-bar__data p { color: rgba(255,255,255,0.6); font-size: 13px; margin: 2px 0 0; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== 10. Section Intro ===== */
.section-intro__tag {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.btn-outline-primary {
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-outline-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.section-intro__tag--light {
  background: rgba(96,165,250,0.15);
  color: #93c5fd;
}
.section-subtitle {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 40px;
}
.text-white-70 { color: rgba(255,255,255,0.7) !important; }

/* ===== 11. Services Modern ===== */
.services-modern {
  background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
  position: relative;
}
.services-modern__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.services-modern .svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  padding: 0;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.services-modern .svc-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #7c3aed);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.services-modern .svc-card:hover .svc-card__accent {
  transform: scaleX(1);
}
.services-modern .svc-card:hover {
  border-color: transparent;
  box-shadow: 0 20px 48px rgba(37,99,235,0.13), 0 4px 12px rgba(0,0,0,0.04);
  transform: translateY(-6px);
}
.services-modern .svc-card__body {
  padding: 28px 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.services-modern .svc-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--bg-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 0 28px;
  transition: all 0.35s ease;
  flex-shrink: 0;
}
.services-modern .svc-card__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.services-modern .svc-card:hover .svc-card__icon {
  background: var(--primary);
  box-shadow: 0 8px 24px rgba(37,99,235,0.3);
}
.services-modern .svc-card:hover .svc-card__icon img {
  filter: brightness(0) invert(1);
  transform: scale(1.1);
}
.services-modern .svc-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 18px 28px 8px;
  color: var(--heading);
}
.services-modern .svc-card p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 28px 16px;
  flex: 1;
}
.services-modern .svc-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.25s ease, color 0.25s ease;
  margin: 0 28px 24px;
}
.services-modern .svc-card:hover .svc-card__link {
  gap: 10px;
  color: var(--primary-dark);
}
.services-modern__more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  justify-content: center;
}
.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid #dde3ed;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  transition: all 0.25s ease;
}
.svc-pill i {
  font-size: 13px;
  color: var(--primary);
  transition: transform 0.25s ease;
}
.svc-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.1);
}
.svc-pill:hover i {
  transform: scale(1.15);
}

/* ===== 12. About Modern ===== */
.about-modern__images { position: relative; }
.about-modern__main-img {
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  height: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.about-modern__badge-card {
  position: absolute;
  bottom: -20px;
  right: -10px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.about-modern__badge-card strong { display: block; font-size: 16px; color: var(--heading); }
.about-modern__badge-card span { font-size: 12px; color: var(--text); }
.about-modern__content h2 { font-size: 32px; font-weight: 800; margin-bottom: 16px; }
.about-modern__content p { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 24px; }
.about-modern__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.about-modern__feat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}
.about-modern__feat:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 15px rgba(37,99,235,0.1);
}
.about-modern__feat img { width: 22px; height: 22px; flex-shrink: 0; }
.about-modern__feat span { font-size: 14px; font-weight: 600; color: var(--heading); }

/* ===== 13. Tech Showcase ===== */
.tech-showcase { background: #fff; }
.tech-showcase__tabs { margin-top: 40px; }
.tech-showcase__tabs .nav-pills {
  gap: 8px;
  margin-bottom: 30px;
}
.tech-showcase__tabs .nav-pills .nav-link {
  background: var(--bg-light);
  color: var(--text);
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}
.tech-showcase__tabs .nav-pills .nav-link.active,
.tech-showcase__tabs .nav-pills .nav-link:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.tech-showcase__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}
.tech-item {
  text-align: center;
  width: 110px;
  transition: transform 0.2s;
}
.tech-item:hover { transform: translateY(-5px); }
.tech-item__icon {
  width: 80px; height: 80px;
  margin: 0 auto 10px;
  background: var(--bg-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}
.tech-item:hover .tech-item__icon {
  border-color: var(--primary);
  box-shadow: 0 8px 25px rgba(37,99,235,0.12);
}
.tech-item__icon img { max-width: 40px; height: auto; }
.tech-item span { font-size: 13px; font-weight: 600; color: var(--heading); }

/* ===== 14. Portfolio Showcase ===== */
.portfolio-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.port-card {
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.port-card:hover {
  transform: translateY(-8px);
  border-color: rgba(96,165,250,0.25);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(96,165,250,0.15);
  background: rgba(255,255,255,0.07);
}
.port-card__img {
  position: relative;
  overflow: hidden;
}
.port-card__img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #0F172A, transparent);
  z-index: 1;
  pointer-events: none;
}
.port-card__img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.port-card:hover .port-card__img img { transform: scale(1.08); }
.port-card__body { padding: 20px 22px 22px; }
.port-card__title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.port-card__desc {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.port-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(96,165,250,0.25);
  background: rgba(96,165,250,0.08);
  transition: all 0.25s;
}
.port-card__link:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateX(3px);
}
.port-card__link i { font-size: 11px; transition: transform 0.25s; }
.port-card__link:hover i { transform: translateX(3px); }

/* ===== 15. Clients Wall ===== */
.clients-wall { background: #fff; }
.clients-wall__item {
  background: #fff;
  border: 1px solid #e2e8f0;
  height: 120px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: 10px 5px;
  transition: all 0.2s;
}
.clients-wall__item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(37,99,235,0.1);
}
.clients-wall__item img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* ===== 16. Reviews Section ===== */
.reviews-section__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
}
.reviews-section__rating strong { color: #fff; font-size: 18px; }
.reviews-section__stars { color: #f59e0b; font-size: 16px; display: flex; gap: 2px; }
.reviews-section__sep { color: rgba(255,255,255,0.25); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.review-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.review-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(96,165,250,0.3);
  transform: translateY(-4px);
}
.review-card__quote {
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 12px;
  font-family: Georgia, serif;
}
.review-card__text {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  line-height: 1.75;
  font-style: italic;
  margin: 0 0 auto;
  padding-bottom: 20px;
}
.review-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.review-card__name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
}
.review-card__meta .review-card__stars {
  color: #f59e0b;
  font-size: 11px;
  display: flex;
  gap: 2px;
}

/* ===== 17. CTA Banner ===== */
.cta-banner {
  position: relative;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  padding: 60px 0;
  overflow: hidden;
}
.cta-banner__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: 17px; margin: 0; }
.cta-banner .btn-light {
  color: var(--primary);
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
}

/* ===== 18. Blog Cards ===== */
.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-bottom: 30px;
  transition: all 0.3s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0,0,0,0.1); }
.blog-card__img { position: relative; overflow: hidden; }
.blog-card__img img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__date {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.blog-card__body { padding: 20px; }
.blog-card__meta { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.blog-card__meta i { color: var(--primary); margin-right: 4px; }
.blog-card__body h3 { font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.blog-card__body h3 a { color: var(--heading); }
.blog-card__body h3 a:hover { color: var(--primary); }
.blog-card__read {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blog-card__read:hover { gap: 10px; }

/* ===== 11. Cookie Consent ===== */
#cookie-consent {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a2e;
  color: #fff;
  padding: 15px 20px;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookie-consent p {
  margin: 0;
  color: rgba(255,255,255,0.85);
}
#cookie-consent a {
  color: #bfdbfe;
  text-decoration: underline;
}
#cookie-accept {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#cookie-accept:hover {
  background: var(--primary-dark);
}

/* ===== 12. Chat Widget ===== */
.chat-widget__btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 55px;
  height: 55px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37,99,235,0.4);
  transition: background 0.3s, transform 0.3s;
  animation: chatPulse 2s infinite;
}
.chat-widget__btn:hover {
  background: var(--primary-dark);
  transform: scale(1.08);
}
.chat-widget__btn-icon--close { display: none; }
#chat-widget.active .chat-widget__btn-icon--chat { display: none; }
#chat-widget.active .chat-widget__btn-icon--close { display: block; }
#chat-widget.active .chat-widget__btn { animation: none; }

@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(37,99,235,0.4); }
  50% { box-shadow: 0 4px 25px rgba(37,99,235,0.7); }
}

.chat-widget__panel {
  position: fixed;
  bottom: 145px;
  right: 20px;
  width: 360px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.chat-widget__panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.chat-widget__header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-widget__header-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
}
.chat-widget__header-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  padding: 0;
  line-height: 1;
}
.chat-widget__header-close:hover { opacity: 1; }

.chat-widget__body {
  padding: 18px;
}

.chat-widget__bubble {
  background: var(--bg-blue);
  color: #1e293b;
  padding: 14px 16px;
  border-radius: 4px 16px 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.chat-widget__bubble strong {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-dark);
}
.chat-widget__bubble--reply {
  background: #ecfdf5;
  color: #065f46;
  border-radius: 16px 4px 16px 16px;
  margin-top: 16px;
  margin-bottom: 0;
}

.chat-widget__form {
  display: flex;
  gap: 8px;
}
.chat-widget__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.chat-widget__input-wrap:focus-within {
  border-color: var(--primary);
}
.chat-widget__prefix {
  padding: 0 8px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.chat-widget__input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 10px 10px 0;
  font-size: 14px;
  min-width: 0;
}
.chat-widget__input.error {
  background: #fef2f2;
}
.chat-widget__submit {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.chat-widget__submit:hover { background: var(--primary-dark); }
.chat-widget__submit:disabled { opacity: 0.7; cursor: not-allowed; }

.chat-widget__trust {
  margin-top: 14px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}
.chat-widget__trust i { margin-right: 2px; }

@media (max-width: 400px) {
  .chat-widget__panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 145px;
  }
  .chat-widget__btn {
    right: 12px;
  }
}

/* ===== 13. Owl Theme Essentials (replaces owl.theme.default.min.css) ===== */
.owl-theme .owl-dots {
  text-align: center;
  margin-top: 20px;
}
.owl-theme .owl-dots .owl-dot {
  display: inline-block;
}
.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 4px;
  background: #d6d6d6;
  display: block;
  border-radius: 50%;
  transition: all 0.3s;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--primary);
  transform: scale(1.2);
}
.owl-theme .owl-nav [class*='owl-'] {
  color: #fff;
  font-size: 14px;
  background: var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: all 0.3s;
}
.owl-theme .owl-nav [class*='owl-']:hover {
  background: var(--primary-dark);
}

/* ===== Old service card fallback (inner pages) ===== */
.services-items {
  margin-bottom: 30px;
}
.services-items .item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.services-items:hover .item {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ===== 15. Content from custom.css ===== */
@media (max-width:767px) {
  .hidden-xs {
    display: none !important;
  }
}
.col-xs-6 {
  width: 50%;
}
.mt-50 {
  margin-top: 50px;
}

/* Clients page items */
.clients .single-item .item {
  border: 2px dotted #333333;
  height: 150px;
  padding: 16px;
  display: flex;
  border-radius: 5px;
}
.clients .single-item .item:hover {
  border: 2px solid var(--primary);
}
.clients .single-item .item img {
  margin: auto;
}

/* Testimonial overrides */
.testimonial-items .single-testimonial {
  margin-bottom: 30px;
}
.testimonials-area .single-testimonial::before {
  border: none;
}

/* Payment gateway cards */
.payment-gateway {
  border: 2px dotted #333333;
  border-radius: 4px;
  margin-bottom: 20px;
}
.payment-gateway:hover {
  border: 2px dotted var(--primary);
}
.payment-gateway img {
  margin-top: 0px !important;
}

/* Form status messages */
.error {
  color: red;
}
.success {
  color: green;
}

/* Request callback modal */
.rc-modal { max-width: 440px; }
.rc-modal__content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.rc-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.rc-modal__close:hover { background: #e2e8f0; color: #1e293b; }
.rc-modal__body {
  padding: 40px 32px 32px;
  text-align: center;
}
.rc-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--primary-light, #e0edff);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.rc-modal__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 8px;
}
.rc-modal__subtitle {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 28px;
  line-height: 1.5;
}
.rc-modal__form { margin-bottom: 24px; }
.rc-modal__input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
  background: #fff;
}
.rc-modal__input-wrap:focus-within { border-color: var(--primary); }
.rc-modal__prefix {
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #475569;
  border-right: 2px solid #e2e8f0;
  line-height: 48px;
  background: #f8fafc;
  user-select: none;
}
.rc-modal__input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 16px;
  font-size: 15px;
  height: 48px;
  background: transparent;
  color: var(--heading);
  letter-spacing: 0.5px;
}
.rc-modal__input::placeholder { color: #94a3b8; }
.rc-modal__msg {
  text-align: center;
  font-size: 13px;
  min-height: 20px;
  margin: 8px 0 0;
}
.rc-modal__msg.error { color: #ef4444; }
.rc-modal__msg.success { color: #22c55e; }
.rc-modal__btn {
  width: 100%;
  padding: 14px 24px;
  margin-top: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rc-modal__btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.rc-modal__btn:active { transform: translateY(0); }
.rc-modal__trust {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}
.rc-modal__trust-item {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rc-modal__trust-item i { color: var(--primary); font-size: 13px; }

/* Legacy footer social (inner pages fallback) */
.f-item .footer-social ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.f-item .footer-social ul li a {
  padding: 6px;
  font-size: 16px;
}

/* Top bar social */
.top-bar-area .social ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-bar-area .social ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  transition: all 0.3s ease;
  font-weight: normal;
}
.top-bar-area .social ul li a:hover {
  transform: translateY(-1px);
  color: #fff;
}
.top-bar-area .social ul li.facebook a:hover { background: #1877F2; border-color: #1877F2; }
.top-bar-area .social ul li.twitter a:hover { background: #1DA1F2; border-color: #1DA1F2; }
.top-bar-area .social ul li.instagram a:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #dc2743; }
.top-bar-area .social ul li.linkedin a:hover { background: #0A66C2; border-color: #0A66C2; }
.top-bar-area .social ul li.pinterest a:hover { background: #E60023; border-color: #E60023; }
.top-bar-area .social ul li.youtube a:hover { background: #FF0000; border-color: #FF0000; }
.top-bar-area .social ul li a .fab {
  width: auto;
}

/* Footer social */
.footer-social ul li a .fab {
  width: 20px;
}

/* Logo items (clients page) */
.logo_item {
  justify-content: center;
  align-items: center;
  height: 130px !important;
  padding: 5px !important;
}

/* Features area */
.top-features-area .item .icon img {
  margin-bottom: 20px;
  height: 80px;
}

/* Ratings */
.rating .fas {
  color: #ffa41c;
}
.testimonial-items .info {
  padding: 0px 45px;
  text-align: center;
}

/* Floating call/whatsapp buttons */
#callnowbutton {
  background-color: #cf0942;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,.3);
  position: fixed;
  text-decoration: none;
  bottom: 15px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#callnowbutton i {
  color: #FFFFFF;
  font-size: 26px;
}
#wpnowbutton {
  background-color: #18c139;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  text-decoration: none;
  bottom: 15px;
  right: 20px;
  z-index: 9999;
}
#wpnowbutton i {
  color: #FFFFFF;
  font-size: 26px;
}

/* Technology icons */
.technology {
  margin-bottom: 30px;
}
.technology .iconbox_icon {
  width: 100px;
  height: 100px;
  margin: 0 0 16px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center top -3px;
  background-image: url(../images/shape/shape_polygon.webp);
  flex: 0 0 auto;
  border-radius: 100%;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.technology .iconbox_icon img {
  max-width: 50px;
  height: auto;
}
.technology .iconbox_title {
  line-height: 1;
  font-size: 18px;
  font-weight: 400;
}

/* Background blue */
.bg-blue {
  background-color: var(--bg-blue);
}

/* Portfolio case study blocks */
.case_study_block {
  display: flex;
  overflow: hidden;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 4px 23px 0 rgba(2, 9, 63, 0.16);
  margin-bottom: 40px;
}
.case_study_block .case_study_image {
  flex: 0 0 auto;
  max-width: 465px;
}
.case_study_block .case_study_content {
  padding: 40px;
}
.case_study_block .case_study_content h2 {
  font-size: 22px;
  font-weight: 600;
}

/* Home client logos */
.home_client_logo {
  background: #FFFFFF;
  border: 2px dotted #000000;
  height: 150px;
  padding: 10px;
  display: flex;
  border-radius: 5px;
  margin-bottom: 40px;
  align-items: center;
  justify-content: center;
}
.home_client_logo:hover {
  border: 2px solid var(--primary);
}
.home_client_logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Icon lists for service cards */
.icon_list {
  gap: 10px;
}
.unordered_list_block {
  display: flex;
  flex-direction: column;
}
.icon_list > li {
  line-height: 1;
  border-radius: 5px;
  padding: 11px 10px 11px 0;
  background: linear-gradient(90deg, transparent, var(--bg-blue));
  gap: 10px;
  display: flex;
  font-size: 15px;
  line-height: 28px;
  align-items: flex-start;
}
.icon_list .icon_list_icon {
  color: var(--primary);
}

/* Why Us facilities */
ul.service_facilities_group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.service_facilities_group > li {
  padding: 10px 10px 10px 0px;
  flex: 0 0 50%;
  list-style: none;
  display: inline-block;
}
.service_facilities_group .iconbox_block.layout_icon_left {
  display: flex;
  align-items: center;
  padding: 16px 20px 16px 16px;
  background: var(--bg-blue);
  border-radius: 5px;
  transition: background 0.3s;
}
.service_facilities_group .iconbox_block.layout_icon_left:hover {
  background: #c1d2e7;
}
.service_facilities_group .iconbox_block.layout_icon_left .iconbox_icon {
  width: 42px;
  height: 42px;
  margin: 0 16px 0 0;
  border-radius: 6px;
}
.service_facilities_group .iconbox_block.layout_icon_left .iconbox_icon img {
  max-width: 22px;
}
.service_facilities_group .iconbox_block.layout_icon_left .iconbox_title {
  font-size: 16px;
  line-height: 20px;
  color: #333333;
}
.iconbox_block .iconbox_icon {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  margin: 0 0 32px;
  border-radius: 100%;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  background-color: #FFFFFF;
}
.works-about-area .site-heading {
  margin-bottom: 25px;
}

/* View more button alignment (replaces <center>) */
.text-center-btn {
  text-align: center;
  margin-top: 20px;
}

/* ===== 16. Content from responsive.css ===== */

/* Tablet Layout: 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .top-bar-area .text-right {
    text-align: center !important;
    justify-content: center;
    margin-top: 10px;
    display: flex;
  }
  .breadcrumb-area { text-align: center; padding: 36px 0; }
  .breadcrumb-area h2 { margin-bottom: 14px; font-size: 24px; }
  .breadcrumb-area .text-right { text-align: center !important; }
  .about-area .thumb .overlay {
    right: 50px;
    transform: translate(0, -50%);
  }
  .about-area.reverse .info {
    padding-right: 15px;
    padding-bottom: 30px;
  }
  .about-area .thumb {
    margin-bottom: 50px;
  }
  .about-area.reverse .thumbs img {
    max-width: 100%;
  }
  .about-content-area .thumb img:first-child {
    width: 100%;
  }
  .about-content-area .thumb {
    margin-bottom: 100px;
  }
  .about-content-area .overlay {
    right: auto;
    left: 30px;
  }
  .services-area .services-tabs .row {
    margin-left: -15px;
    overflow: hidden;
  }
  .services-area .services-tabs .tab-pane {
    margin-bottom: 0;
    overflow: hidden;
  }
  .services-area .services-tabs .tab-pane::after {
    display: none;
  }
  .services-area .services-tabs .thumb {
    min-height: 350px;
  }
  .services-area .services-tabs .info .content {
    padding-left: 40px;
  }
  .service-area .service-box .item {
    text-align: center;
    display: block;
    padding: 50px 30px;
  }
  .service-area .service-box .item .icon {
    display: inline-block;
  }
  .service-area .service-box .item i {
    margin-right: 0;
    margin-bottom: 25px;
  }
  .services-details-area .sidebar {
    margin-top: 50px;
  }
  .services-area .services-content .item {
    display: block;
    text-align: center;
  }
  .services-area .services-content img {
    margin: auto;
  }
  .services-area .services-content .item .icon {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .services-area .services-content .item .bottom {
    justify-content: center;
  }
  .services-area .services-content .item .bottom span {
    display: none;
  }
  .testimonials-area {
    text-align: center;
  }
  .testimonials-area .testimonial-items .owl-stage-outer {
    margin: -15px -15px;
    padding: 15px;
  }
  .testimonials-area .item::before {
    display: none;
  }
  .testimonials-area .thumb {
    position: relative;
    z-index: 1;
    height: 200px;
    width: 200px;
    margin: auto auto 25px;
  }
  .testimonials-area .item .provider {
    justify-content: center;
  }
  .case-studies-area.grid-items .case-items.colums-2 .pf-item,
  .case-studies-area.grid-items .case-items.colums-3 .pf-item,
  .case-studies-area.grid-items .case-items.colums-4 .pf-item {
    width: 50%;
  }
  .case-details-area .content ul.project-info {
    display: block;
    overflow: hidden;
  }
  .case-details-area .content ul.project-info li {
    float: left;
    width: 50%;
    margin-bottom: 0;
    margin-top: 30px;
    text-align: center;
  }
  .case-details-area .content ul.project-info li .title {
    justify-content: center;
  }
  .case-details-area .content ul.project-info li:first-child,
  .case-details-area .content ul.project-info li:nth-child(2) {
    margin-top: 0;
  }
  .quick-contact-area {
    text-align: center;
  }
  .quick-contact-area .text-right {
    text-align: center !important;
    margin-top: 30px;
  }
  .faq-area .faq-content {
    margin-top: 50px;
  }
  .about-area.faq-area .faq-content {
    margin-top: 25px;
  }
  .faq-area .appoinment-form {
    margin-top: 30px;
  }
  .contact-area .contact-tabs {
    margin-top: 50px;
  }
  .contact-area .info {
    padding-left: 15px;
  }
  .blog-area.left-sidebar .blog-content {
    float: none;
  }
  .blog-area .blog-thin-colums .thumb {
    margin-bottom: 30px;
  }
  .blog-area.left-sidebar .sidebar,
  .blog-area.right-sidebar .sidebar {
    margin-top: 50px;
  }
  .blog-area .blog-items .blog-thin-colums .item {
    padding: 0;
    border: none;
  }
  .blog-area.right-sidebar .sidebar {
    padding-left: 15px;
  }
  .blog-area.left-sidebar .sidebar {
    padding-right: 15px;
  }
  .blog-area .item .thumb img {
    width: 100%;
  }
  .team-single-area .top-info .thumb {
    margin-bottom: 30px;
  }
  .team-single-area .basic-info::after {
    width: 100%;
  }
  .team-single-area .basic-info {
    margin-left: 0;
    margin-right: 0;
    padding: 30px;
  }
  .team-single-area .bottom-info {
    margin-top: 30px;
  }
  .team-single-area .skill-items {
    margin-top: 30px;
  }
  .top-features-area .item {
    text-align: center;
  }
  .top-features-area .item .more {
    text-align: center !important;
  }
  .top-features-area .item .more a {
    padding: 0;
  }
  .top-features-area .item .more a::after {
    display: none;
  }
  /* Hero split - tablet */
  .hero-split { padding: 50px 0 40px; }
  .hero-split__content { padding-right: 15px; margin-bottom: 30px; }
  .hero-split__content h1 { font-size: 34px; }
  .hero-split__float-card--top { left: 0; }
  .hero-split__float-card--bottom { right: 0; }
  /* Stats bar tablet */
  .stats-bar__grid { gap: 15px; }
  .stats-bar__item { min-width: 180px; }
  /* Services tablet */
  .services-modern__grid { grid-template-columns: 1fr 1fr; }
  /* Reviews tablet */
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  /* About tablet */
  .about-modern__images { margin-bottom: 40px; }
}

/* Mobile Layout: 320px */
@media only screen and (max-width: 767px) {
  h4 {
    font-size: 20px;
    line-height: 1.4;
  }
  h5 {
    line-height: 1.4;
  }
  h6 {
    line-height: 1.4;
  }
  .container-medium {
    width: 100%;
  }
  .default-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .padding-xl {
    padding-bottom: 50px;
    padding-top: 50px;
  }
  .default-padding.bottom-less {
    padding-bottom: 20px;
    padding-top: 50px;
  }
  .default-padding-bottom {
    padding-bottom: 50px;
  }
  .default-padding-top {
    padding-top: 50px;
  }
  .site-heading {
    margin-bottom: 40px;
  }
  .breadcrumb-area h1 {
    font-size: 36px;
  }
  .owl-carousel.owl-theme .owl-nav {
    display: none;
  }
  .breadcrumb-area { padding: 30px 0; text-align: center; }
  .breadcrumb-area h2 { font-size: 22px; margin-bottom: 12px; }
  .breadcrumb-area .text-right { text-align: center !important; }
  .breadcrumb-area .breadcrumb { padding: 8px 14px !important; }
  .breadcrumb-area .breadcrumb li { font-size: 12px; }
  .top-bar-area {
    display: none;
  }
  .attr-nav > ul > li.button {
    display: none;
  }
  .side {
    padding: 20px;
    width: 320px;
  }
  .heading-left .right-info {
    padding-left: 15px;
  }
  .heading-left h5 {
    margin-bottom: 15px;
    font-size: 16px;
  }
  .heading-left h2 {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .heading-left {
    margin-bottom: 40px;
  }
  .site-heading h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }
  body, .banner-area, .banner-area div {
    height: auto;
  }
  /* Hero split - mobile */
  .hero-split { padding: 30px 0 20px; }
  .hero-split__content { padding-right: 0; text-align: center; margin-bottom: 30px; }
  .hero-split__content h1 { font-size: 28px; }
  .hero-split__content p { font-size: 15px; margin-left: auto; margin-right: auto; }
  .hero-split__actions { justify-content: center; }
  .hero-split__clients-strip { justify-content: center; }
  .hero-split__float-card { display: none; }
  .dash-mock__body { min-height: 240px; }
  .dash-mock__sidebar { width: 36px; padding: 10px 0; gap: 8px; }
  .dash-mock__nav { width: 22px; height: 22px; }
  .dash-mock__main { padding: 10px; }
  .dash-mock__topbar { margin-bottom: 10px; }
  .dash-mock__cards { gap: 6px; margin-bottom: 10px; }
  .dash-mock__card { padding: 7px; }
  .dash-mock__card-label { font-size: 7px; }
  .dash-mock__card-val { font-size: 14px; }
  .dash-mock__card-trend { font-size: 8px; }
  .dash-mock__bars { height: 60px; gap: 5px; }
  .dash-mock__chart { padding: 8px; }
  .dash-mock__chart-label { font-size: 9px; }
  /* Stats bar mobile */
  .stats-bar { padding: 30px 0; }
  .stats-bar__grid { gap: 15px; }
  .stats-bar__item { min-width: 140px; flex: 0 0 45%; }
  .stats-bar__num { font-size: 22px; }
  /* Services mobile */
  .services-modern__grid { grid-template-columns: 1fr; }
  .section-intro { text-align: center; margin-bottom: 30px; }
  /* Portfolio mobile */
  .portfolio-showcase__grid { grid-template-columns: 1fr; }
  /* Reviews grid mobile */
  .reviews-grid { grid-template-columns: 1fr; }
  /* About mobile */
  .about-modern__images { margin-bottom: 40px; }
  .about-modern__features { grid-template-columns: 1fr; }
  .about-modern__badge-card { position: relative; bottom: auto; right: auto; margin-top: 16px; display: inline-flex; }
  /* CTA banner mobile */
  .cta-banner { text-align: center; padding: 40px 0; }
  .cta-banner h2 { font-size: 24px; }
  .cta-banner .text-lg-right { text-align: center !important; margin-top: 20px; }
  /* Tech showcase mobile */
  .tech-showcase__tabs .nav-pills { justify-content: center; }
  .tech-item { width: 80px; }
  .tech-item__icon { width: 60px; height: 60px; border-radius: 12px; }
  .tech-item__icon img { max-width: 30px; }
  .tech-item span { font-size: 11px; }
  /* Review cards mobile */
  .reviews-grid { grid-template-columns: 1fr; gap: 16px; }
  .review-card { padding: 22px 20px; }
  /* About */
  .about-area .thumb {
    margin-bottom: 30px;
  }
  .about-area .thumb img:first-child {
    width: 100%;
  }
  .about-area .thumb .overlay {
    position: inherit;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
    transform: inherit;
    display: inline-block;
    padding: 60px;
    margin-top: 30px;
    display: none;
  }
  .about-area .info {
    text-align: center;
  }
  .about-area.faq-area .info {
    text-align: left;
  }
  .about-area .info ul li {
    display: block;
  }
  .about-area .info ul li i {
    margin-right: 0;
    margin-bottom: 25px;
  }
  .about-area .author {
    justify-content: center;
  }
  .about-area.reverse .info {
    padding-right: 15px;
    padding-bottom: 30px;
  }
  .about-area.reverse .thumbs img {
    max-width: 100%;
  }
  .about-content-area .thumb img:first-child {
    width: 100%;
  }
  .about-content-area .overlay {
    right: auto;
    left: 30px;
  }
  .about-content-area .thumb {
    margin-bottom: 80px;
  }
  /* Testimonials */
  .testimonials-area {
    text-align: center;
  }
  .testimonials-area .testimonial-items .owl-stage-outer {
    margin: -15px -15px;
    padding: 15px;
  }
  .testimonials-area .item::before {
    display: none;
  }
  .testimonials-area .thumb {
    position: relative;
    z-index: 1;
    height: 200px;
    width: 200px;
    margin: auto auto 25px;
  }
  .testimonials-area .item .provider {
    justify-content: center;
  }
  /* Case Area */
  .case-studies-area.grid-items .case-items.colums-2 .pf-item,
  .case-studies-area.grid-items .case-items.colums-3 .pf-item,
  .case-studies-area.grid-items .case-items.colums-4 .pf-item {
    width: 100% !important;
  }
  .case-details-area .content {
    padding: 0 15px;
  }
  .case-details-area .content ul.project-info {
    display: block;
    overflow: hidden;
    top: 0;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .case-details-area .content ul.project-info li {
    float: left;
    width: 100%;
    margin-bottom: 0;
    margin-top: 30px;
    text-align: center;
  }
  .case-details-area .content ul.project-info li .title {
    justify-content: center;
  }
  .case-details-area .content ul.project-info li:first-child {
    margin-top: 0;
  }
  .quick-contact-area .text-right {
    text-align: left !important;
    margin-top: 30px;
  }
  /* Services Area */
  .services-area .services-tabs .row {
    margin-left: -15px;
  }
  .services-area .services-tabs ul li {
    display: inline-block;
    margin-bottom: 25px;
  }
  .services-area .services-tabs ul li:last-child {
    margin-bottom: 0;
  }
  .services-area .services-tabs ul li a {
    margin: 0;
  }
  .services-area .services-tabs .tab-pane {
    margin-bottom: 0;
    overflow: hidden;
  }
  .services-area .services-tabs .tab-pane::after {
    display: none;
  }
  .services-area .services-tabs .info {
    padding-left: 15px;
  }
  .services-area .services-tabs .info .content {
    padding: 50px 30px;
  }
  .services-area .services-tabs .thumb {
    min-height: 300px;
  }
  .featured-services-area {
    padding-top: 50px;
  }
  .service-area .service-box .item {
    text-align: center;
    display: block;
    padding: 50px 30px;
  }
  .service-area .service-box .item .icon {
    display: inline-block;
  }
  .service-area .service-box .item i {
    margin-right: 0;
    margin-bottom: 25px;
  }
  .services-details-area .sidebar {
    margin-top: 50px;
  }
  .services-area .services-content .item {
    display: block;
    text-align: center;
  }
  .services-area .services-content img {
    margin: auto;
  }
  .services-area .services-content .item .icon {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .services-area .services-content .item .bottom {
    justify-content: center;
  }
  .services-area .services-content .item .bottom span {
    display: none;
  }
  /* FAQ */
  .faq-area .faq-content {
    margin-top: 40px;
  }
  .about-area.faq-area .faq-content {
    margin-top: 25px;
  }
  .faq-area .appoinment-form {
    margin-top: 30px;
    padding: 50px 30px;
  }
  /* Team Single */
  .team-single-area .top-info .thumb {
    margin-bottom: 30px;
  }
  .team-single-area .basic-info::after {
    width: 100%;
  }
  .team-single-area .basic-info {
    margin-left: 0;
    margin-right: 0;
    padding: 30px;
  }
  .team-single-area .bottom-info {
    margin-top: 30px;
  }
  .team-single-area .skill-items {
    margin-top: 30px;
  }
  .team-single-area .basic-info li {
    width: 100%;
  }
  /* Blog */
  .blog-area .blog-thin-colums .thumb {
    margin-bottom: 30px;
  }
  .blog-area .blog-items .footer-meta ul {
    border-top: none;
    padding-top: 0;
  }
  .blog-area .blog-items .footer-meta ul li:first-child {
    display: none;
  }
  .blog-area .pagi-area .pagination {
    display: block;
  }
  .blog-area .pagi-area .pagination li {
    display: inline-block;
    margin-top: 5px;
  }
  .blog-area .blog-content .post-tags,
  .blog-area .blog-content .share {
    display: block;
    text-align: center;
  }
  .blog-area .blog-content .share .social {
    margin-top: 10px;
  }
  .blog-area.left-sidebar .blog-content {
    float: none;
  }
  .blog-area .sidebar .sidebar-item.add-banner .sidebar-info {
    padding: 50px 30px;
  }
  .blog-area.left-sidebar .sidebar,
  .blog-area.right-sidebar .sidebar {
    margin-top: 50px;
    overflow: hidden;
  }
  .blog-area.right-sidebar .sidebar {
    padding-left: 15px;
  }
  .blog-area.left-sidebar .sidebar {
    padding-right: 15px;
  }
  .blog-area.single .post-pagi-area {
    text-align: center;
  }
  .blog-area.single .post-pagi-area a {
    margin: 5px;
  }
  .blog-area.single .post-pagi-area a:last-child {
    float: none;
  }
  .comments-list .commen-item.reply {
    margin-left: 0;
    padding-left: 0;
  }
  .comments-list .commen-item .content,
  .comments-list .commen-item .avatar {
    display: block;
    text-align: center;
  }
  .comments-list .commen-item .content {
    width: 100%;
  }
  .comments-list .commen-item .avatar {
    float: none;
    height: 80px;
    width: 80px;
    margin: auto;
  }
  .comments-list .commen-item .content .title {
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .comments-list .commen-item .content .title span {
    margin: 0;
    padding: 0;
    border: none;
    display: block;
    margin-top: 15px;
  }
  .comments-list .commen-item {
    margin-bottom: 50px;
  }
  .comments-list .commen-item:last-child {
    margin-bottom: 0;
    padding: 0;
    border: none;
  }
  .blog-area .comments-form {
    margin-top: 50px;
  }
  /* Contact */
  .contact-area .info {
    padding-left: 15px;
    margin-top: 30px;
  }
  .contact-area .contact-tabs > ul {
    border: none;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
  }
  .contact-area .contact-tabs > ul li {
    display: inline-block;
    margin-bottom: 15px;
  }
  .contact-area .contact-tabs > ul li:last-child {
    margin-bottom: 0;
  }
  .contact-area .contact-tabs > ul li a {
    margin-right: 0;
    border: 1px solid #e7e7e7;
    background: #ffffff;
    font-size: 15px;
    padding: 6px 22px;
  }
  .contact-area .contact-tabs > ul li a.active {
    background: #ffffff;
  }
  .contact-tabs .tab-content iframe {
    height: 300px;
  }
  /* Error Page */
  .error-page-area .error-box h1 {
    display: none;
  }
  /* Footer */
  .site-footer .footer-bottom { text-align: center; }
  .footer-bottom__links { justify-content: center; margin-top: 10px; }
  /* Top features */
  .top-features-area .item {
    text-align: center;
  }
  .top-features-area .item .more {
    text-align: center !important;
  }
  .top-features-area .item .more a {
    padding: 0;
  }
  .top-features-area .item .more a::after {
    display: none;
  }
}

/* Wide Mobile Layout: 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .side {
    padding: 10px;
    width: 400px;
  }
  .comments-list .commen-item .content,
  .comments-list .commen-item .avatar {
    display: table-cell;
    text-align: left;
  }
  .comments-list .commen-item .content {
    width: auto;
  }
  .comments-list .commen-item .avatar {
    float: none;
    height: 80px;
    width: 80px;
    margin: inherit;
  }
  .comments-list .commen-item .content .title {
    margin-top: 0;
  }
  .comments-list .commen-item .content {
    padding-left: 25px;
  }
  .blog-area.single .post-pagi-area {
    text-align: inherit;
  }
  .blog-area.single .post-pagi-area a:last-child {
    float: right;
  }
}

@media screen and (max-width: 991px) {
  .order-last {
    order: 0;
  }
}

@media only screen and (max-width: 350px) {
  .faq-area .faq-content .card .card-header h4 {
    align-items: inherit;
  }
}

@media only screen and (max-width: 550px) {
  .video-area .fixed-shape-bottom {
    display: none;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonials-area .testimonial-items .owl-stage-outer {
    margin: -15px -15px;
    padding: 15px;
  }
  .testimonials-area .item::before {
    display: none;
  }
  .testimonial-items .item > .row {
    align-items: center;
  }
}

@media only screen and (max-width: 1199px) {
  .team-single-area .row.align-center {
    align-items: inherit;
  }
  .case-studies-area.grid-items .case-items.colums-2 .pf-item,
  .case-studies-area.grid-items .case-items.colums-3 .pf-item,
  .case-studies-area.grid-items .case-items.colums-4 .pf-item {
    width: 50%;
  }
}

/* Custom breakpoints */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
  .col-xs-4 {
    width: 33.33333333%;
  }
  .rc-modal__body { padding: 32px 20px 24px; }
  .rc-modal__trust { flex-direction: column; align-items: center; gap: 8px; }
  .services-details-area .content h2 {
    font-size: 24px;
  }
  header {
    height: auto;
  }
  .clients .single-item .item img {
    max-height: 80px;
  }
  .case_study_block {
    flex-direction: column-reverse;
  }
  .case_study_block .case_study_content {
    padding: 30px 20px;
  }
  .services-area .services-tabs ul li a {
    font-size: 12px;
    padding: 6px;
  }
  .featured-services-area .item {
    padding: 20px 15px;
  }
  .services-area .services-tabs ul li a.active::after {
    right: 6px;
  }
  .technology {
    margin-bottom: 20px;
  }
  .technology .iconbox_title {
    font-size: 14px;
    line-height: 18px;
  }
  .technology .iconbox_icon {
    width: 70px;
    height: 70px;
    margin: 0 0 6px;
  }
  .technology .iconbox_icon img {
    max-width: 30px;
  }
  .services-area .services-tabs ul {
    margin-bottom: 10px;
  }
  .about-area .info h2 {
    font-size: 24px;
  }
  .service_facilities_group > li {
    flex: 0 0 100%;
  }
  .works-about-area .thumb img {
    margin-top: 30px;
  }
  /* Navbar mobile */
  .btn-get-quote {
    margin: 12px 0;
    display: block;
    text-align: center;
    border-radius: 8px;
  }
  /* Services grid mobile-tablet */
  .services-modern__grid {
    grid-template-columns: 1fr;
  }
  .services-modern .svc-card__icon { margin: 24px 0 0 24px; }
  .services-modern .svc-card h3 { margin: 14px 24px 6px; }
  .services-modern .svc-card p { margin: 0 24px 14px; }
  .services-modern .svc-card__link { margin: 0 24px 20px; }
  /* Tech pills smaller */
  .tech-showcase__tabs .nav-pills .nav-link {
    font-size: 12px;
    padding: 6px 14px;
  }
  /* Portfolio grid */
  .portfolio-showcase__grid {
    grid-template-columns: 1fr;
  }
  .port-card__img img { height: 200px; }
}

/* ===== Certification SVG ===== */
.cert-icon-svg {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* ===== Navbar Alignment Fixes ===== */
.navbar.sticky-top .container {
  display: flex;
  align-items: center;
}
.navbar .navbar-collapse {
  justify-content: flex-end;
}
.navbar .navbar-nav {
  align-items: center;
}

/* Desktop hover-open dropdowns */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Mobile nav overrides */
@media (max-width: 991px) {
  .navbar.sticky-top {
    padding: 8px 0;
  }
  .navbar .navbar-nav {
    align-items: stretch;
    padding: 12px 0;
    gap: 0;
  }
  .navbar .navbar-nav .nav-link {
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .navbar .navbar-nav .nav-link::after {
    display: none;
  }
  .navbar .dropdown-menu {
    box-shadow: none;
    border: none;
    border-top: none;
    border-radius: 0;
    padding: 0 0 0 16px;
    background: transparent;
    animation: none;
  }
  .navbar .dropdown-menu .dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
    border-left: 2px solid rgba(37,99,235,0.2);
  }
  .navbar .dropdown-menu .dropdown-item:hover {
    border-left-color: var(--primary);
    padding-left: 14px;
  }
}

/* ===== Blog Heading Spacing ===== */
.blog-modern .section-subtitle {
  margin-bottom: 40px;
}
.blog-modern .section-intro__tag + h2 {
  margin-bottom: 10px;
}

/* ===== Contact Section Redesign ===== */
.contact-section {
  background: #fff;
}
.contact-section .section-subtitle {
  margin-bottom: 40px;
}
.contact-form-box {
  background: var(--bg-light);
  border-radius: 16px;
  padding: 36px;
  border: 1px solid #e2e8f0;
}
.input-icon-wrap {
  position: relative;
}
.input-icon-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 15px;
  z-index: 1;
}
.input-icon-wrap--textarea i {
  top: 18px;
  transform: none;
}
.input-icon-wrap .form-control {
  padding-left: 42px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  height: 48px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-icon-wrap .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.input-icon-wrap textarea.form-control {
  height: auto;
  padding-top: 14px;
}
.contact-form-box .btn-primary {
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}
.contact-form-box .btn-primary i {
  margin-right: 6px;
}
.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: center;
}
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-light);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s;
}
.contact-info-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 15px rgba(37,99,235,0.1);
}
.contact-info-card__icon {
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.contact-info-card__body h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.contact-info-card__body p {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}
.contact-info-card__body a {
  color: var(--primary);
  font-weight: 500;
}

/* ===== Footer Redesign ===== */
/* ===== FOOTER ===== */
.site-footer {
  background: #0B1120;
  color: rgba(255,255,255,0.7);
}

/* --- Footer CTA --- */
.footer-cta {
  background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
  padding: 36px 0;
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
.footer-cta h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}
.footer-cta__form { position: relative; }
.footer-cta__input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 50px;
  overflow: hidden;
  padding-left: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.footer-cta__input-wrap i {
  color: var(--primary);
  font-size: 15px;
  flex-shrink: 0;
}
.footer-cta__input-wrap .form-control {
  border: none;
  height: 48px;
  font-size: 14px;
  padding-left: 10px;
  background: transparent;
  box-shadow: none;
}
.footer-cta__input-wrap button {
  background: var(--primary-dark);
  color: #fff;
  border: none;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  height: 48px;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: background 0.25s;
}
.footer-cta__input-wrap button:hover { background: #1e3a8a; }
.footer-cta__phone {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s;
}
.footer-cta__phone:hover { color: #fff; opacity: 0.85; }
.footer-cta__phone i { font-size: 24px; }

/* --- Footer Main --- */
.footer-main {
  padding: 60px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.footer-logo {
  display: inline-block;
}
.footer-logo img {
  height: 45px;
  width: auto;
}
.footer-about p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  margin-bottom: 22px;
}

/* --- Footer Contact Info --- */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.footer-contact-item i {
  color: var(--primary);
  width: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 13px;
}
.footer-contact-item a {
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}
.footer-contact-item a:hover { color: #fff; }

/* --- Footer Social --- */
.footer-social {
  display: flex;
  gap: 8px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  transition: all 0.3s ease;
  font-weight: normal;
}
.footer-social a:hover {
  color: #fff;
  transform: translateY(-2px);
}
.footer-social a[aria-label="Facebook"]:hover  { background: #1877F2; border-color: #1877F2; }
.footer-social a[aria-label="Twitter"]:hover   { background: #1DA1F2; border-color: #1DA1F2; }
.footer-social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #dc2743; }
.footer-social a[aria-label="LinkedIn"]:hover  { background: #0A66C2; border-color: #0A66C2; }
.footer-social a[aria-label="Pinterest"]:hover { background: #E60023; border-color: #E60023; }
.footer-social a[aria-label="YouTube"]:hover   { background: #FF0000; border-color: #FF0000; }

/* --- Footer Widget --- */
.footer-widget__title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 12px;
}
.footer-widget__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2.5px;
  background: var(--primary);
  border-radius: 2px;
}

/* --- Footer Links --- */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 0;
}
.footer-links li a {
  color: rgba(255,255,255,0.55);
  font-size: 13.5px;
  transition: all 0.2s ease;
  display: block;
  padding: 5px 0;
  position: relative;
  font-weight: normal;
}
.footer-links li a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1.5px;
  background: var(--primary);
  vertical-align: middle;
  margin-right: 0;
  transition: all 0.25s ease;
}
.footer-links li a:hover {
  color: #fff;
  padding-left: 0;
}
.footer-links li a:hover::before {
  width: 12px;
  margin-right: 8px;
}

/* --- Footer Bottom --- */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 20px 0;
  background: rgba(0,0,0,0.15);
}
.site-footer .footer-bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.site-footer .footer-bottom strong {
  color: rgba(255,255,255,0.7);
}
.footer-bottom__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.footer-bottom__links li::after {
  content: '\00B7';
  color: rgba(255,255,255,0.5);
  margin-left: 8px;
}
.footer-bottom__links li:last-child::after {
  display: none;
}
.footer-bottom__links li a {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  transition: color 0.2s;
}
.footer-bottom__links li a:hover { color: #fff; }

/* --- Footer Responsive --- */
@media (max-width: 991px) {
  .footer-cta { text-align: center; }
  .footer-cta h3 { margin-bottom: 15px; }
  .footer-cta__phone { margin-top: 15px; display: block; }
  .footer-cta .text-lg-right { text-align: center !important; }
  .footer-main { padding: 40px 0 20px; }
  .footer-widget { margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .footer-bottom__links { justify-content: center; margin-top: 10px; }
  .site-footer .footer-bottom { text-align: center; }
  .footer-social { justify-content: center; }
  .contact-info-cards { margin-top: 30px; }
  .contact-form-box { padding: 24px; }
}

/* ===== Google Reviews Cards (testimonials page) ===== */
.gr-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.gr-summary__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gr-summary__logo svg { width: 32px; height: 32px; }
.gr-summary__logo span {
  font-size: 18px;
  font-weight: 600;
  color: #5f6368;
  letter-spacing: -.3px;
}
.gr-summary__score {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gr-summary__num {
  font-size: 48px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
}
.gr-summary__detail { text-align: left; }
.gr-summary__stars { color: #fbbc04; font-size: 18px; letter-spacing: 1px; display: flex; gap: 1px; }
.gr-summary__count { font-size: 13px; color: #70757a; margin-top: 2px; }

/* Grid */
.gr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Card */
.gr-card {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, border-color .3s;
  position: relative;
}
.gr-card:hover {
  border-color: #d2d5db;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
/* Google G icon */
.gr-card__g {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 22px;
  height: 22px;
  opacity: .6;
}
.gr-card:hover .gr-card__g { opacity: 1; }
/* Header row: avatar + name */
.gr-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.gr-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.gr-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
  margin: 0;
  line-height: 1.3;
}
.gr-card__desig {
  font-size: 12px;
  color: #70757a;
  display: block;
  margin-top: 1px;
  font-weight: 400;
}
/* Stars + time */
.gr-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.gr-card__stars { color: #fbbc04; font-size: 14px; letter-spacing: 1px; }
.gr-card__time { font-size: 12px; color: #70757a; }
/* Review text */
.gr-card__text {
  color: #3c4043;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
  flex: 1;
}
/* Footer: posted on google */
.gr-card__source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid #f1f3f4;
  font-size: 12px;
  color: #9aa0a6;
  margin-top: auto;
}
.gr-card__source svg { width: 14px; height: 14px; flex-shrink: 0; }
/* City badge */
.gr-card__city {
  font-size: 11px;
  color: #70757a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.gr-card__city i { font-size: 10px; color: #9aa0a6; }

/* Responsive */
@media (max-width: 991px) {
  .gr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .gr-grid { grid-template-columns: 1fr; }
  .gr-summary { flex-direction: column; gap: 16px; padding: 22px 20px; }
  .gr-summary__num { font-size: 40px; }
}

/* ===== Services grid 2-col for medium screens ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .services-modern__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Utility Classes ===== */
.bg-light-section { background: #f7f9fc; }
.bg-dark-navy { background: #0F172A; }
.bg-warm-light { background: #fff7ed; }
.img-showcase { max-width: 100%; border-radius: 14px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   PAGE-SPECIFIC STYLES (migrated from inline <style> blocks)
   ============================================================ */

/* ===== PAGE: Contact (ct-) ===== */
.ct-section { padding:70px 0; }
  .ct-section-title { text-align:center; margin-bottom:45px; }
  .ct-section-title .eyebrow { color:#e11d48; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ct-section-title h2 { font-weight:800; margin-top:8px; }
  .ct-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* CHANNELS GRID */
  .channel-card { background:#fff; border-radius:18px; padding:26px 18px; text-align:center; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.05); margin-bottom:24px; transition:.35s; cursor:pointer; position:relative; overflow:hidden; display:block; color:inherit; }
  .channel-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(244,63,94,.2); text-decoration:none; color:inherit; }
  .channel-card:before { content:""; position:absolute; top:-50px; right:-50px; width:120px; height:120px; background:radial-gradient(circle,rgba(244,63,94,.1) 0%,transparent 70%); border-radius:50%; transition:.4s; }
  .channel-card:hover:before { transform:scale(1.6); }
  .channel-card .ic { width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; margin:0 auto 14px; box-shadow:0 12px 26px rgba(0,0,0,.12); }
  .channel-card .ic.call { background:linear-gradient(135deg,#fb923c,#ea580c); }
  .channel-card .ic.wa { background:linear-gradient(135deg,#25d366,#128c7e); }
  .channel-card .ic.mail { background:linear-gradient(135deg,#f43f5e,#be123c); }
  .channel-card .ic.insta { background:linear-gradient(135deg,#e4405f,#8b5cf6); }
  .channel-card .ic.linkedin { background:linear-gradient(135deg,#0077b5,#0a66c2); }
  .channel-card .ic.visit { background:linear-gradient(135deg,#6366f1,#4f46e5); }
  .channel-card h5 { font-size:15px; font-weight:800; color:#0a0a23; margin:0 0 4px; }
  .channel-card .val { color:#555; font-size:13px; font-weight:700; }
  .channel-card .sub { color:#94a3b8; font-size:11px; margin-top:3px; }

  /* RESPONSE RIBBON */
  .ct-ribbon { background:linear-gradient(135deg,#fb923c,#f43f5e); color:#fff; padding:30px 0; }
  .ct-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .ct-ribbon .item:last-child { border-right:0; }
  .ct-ribbon .big { font-size:30px; font-weight:800; line-height:1; }
  .ct-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* OFFICE MAP */
  .ct-office { background:#0a0a23; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .ct-office:before { content:""; position:absolute; inset:0; background:url("<?=base_url().FRONTEND?>/images/map.svg") center/80% no-repeat; opacity:.06; }
  .ct-office .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .ct-office .head .eyebrow { color:#fb923c; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ct-office .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .office-card { background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); border:1px solid rgba(251,146,60,.25); border-radius:18px; padding:30px 24px; position:relative; z-index:2; backdrop-filter:blur(10px); height:100%; transition:.3s; }
  .office-card:hover { border-color:#fb923c; transform:translateY(-4px); box-shadow:0 22px 44px rgba(251,146,60,.22); }
  .office-card .flag { font-size:34px; margin-bottom:10px; }
  .office-card h4 { color:#fff; font-weight:800; margin:0 0 4px; font-size:18px; }
  .office-card .tag { display:inline-block; background:linear-gradient(135deg,#fb923c,#f43f5e); color:#fff; font-size:10px; font-weight:800; padding:3px 10px; border-radius:12px; letter-spacing:.5px; margin-bottom:12px; }
  .office-card address { font-size:13px; color:rgba(255,255,255,.75); line-height:1.7; font-style:normal; margin-bottom:14px; }
  .office-card .meta { display:flex; gap:14px; font-size:12px; color:rgba(255,255,255,.8); }
  .office-card .meta i { color:#fb923c; margin-right:5px; }
  .office-card .links { margin-top:18px; padding-top:14px; border-top:1px dashed rgba(251,146,60,.2); display:flex; gap:10px; flex-wrap:wrap; }
  .office-card .links a { font-size:12px; color:#fb923c; font-weight:700; text-decoration:none; padding:6px 12px; border:1px solid rgba(251,146,60,.3); border-radius:20px; transition:.3s; }
  .office-card .links a:hover { background:#fb923c; color:#fff; }

  .map-box { background:#1e1b4b; border:1px solid rgba(251,146,60,.2); border-radius:16px; overflow:hidden; height:100%; min-height:340px; position:relative; }
  .map-box iframe { width:100%; height:100%; border:0; }

  /* FAQ STRIP */
  .faq-card { background:#fff; border-radius:14px; padding:22px 24px; margin-bottom:18px; border:1px solid #eef0f5; box-shadow:0 4px 14px rgba(0,0,0,.04); transition:.3s; }
  .faq-card:hover { transform:translateY(-3px); border-color:#f43f5e; box-shadow:0 16px 32px rgba(244,63,94,.15); }
  .faq-card .q { font-size:15px; font-weight:800; color:#0a0a23; display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
  .faq-card .q i { color:#f43f5e; background:#ffe4e6; width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; }
  .faq-card .a { color:#64748b; font-size:13px; line-height:1.65; padding-left:40px; margin:0; }

  /* CTA */
  .ct-cta { background:linear-gradient(135deg,#0a0e1a,#2e0f05); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .ct-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#f43f5e 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .ct-cta .container { position:relative; z-index:2; }
  .ct-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .ct-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .ct-cta .btn-coral { background:linear-gradient(135deg,#fb923c,#f43f5e); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(244,63,94,.35); border:none; }
  .ct-cta .btn-coral:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .ct-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .ct-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* Hide the entire shared enquiry section (intro, info cards, all form fields & button) — contact page only */
  .contact-intro-hide .contact-section { display:none; }

/* ===== PAGE: Testimonials ===== */
.tm-section { padding:70px 0; }
  .tm-section-title { text-align:center; margin-bottom:45px; }
  .tm-section-title .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px;
  }
  .tm-section-title h2 { font-weight:800; margin-top:8px; }
  .tm-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero intro strip */
  .tm-intro { padding:60px 0 40px; background:#f7f9fc; }
  .tm-intro .rating-big { font-size:40px; color:#ffb400; letter-spacing:4px; }
  .tm-intro .rating-text { color:#333; margin-top:10px; font-size:16px; }
  .tm-intro .rating-text strong { color:#2e6cb8; font-size:20px; font-weight:800; }

  /* Stats strip */
  .tm-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .tm-stat { text-align:center; padding:10px; }
  .tm-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .tm-stat .num.suffix-plus:after { content:"+"; }
  .tm-stat .num.suffix-pct:after { content:"%"; }
  .tm-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Testimonial cards — now uses .gr-* classes from app.css */
  .tm-grid { padding:70px 0; }

  /* CTA band */
  .tm-cta { background:linear-gradient(135deg,#0a0e1a,#0a1a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .tm-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .tm-cta .container { position:relative; z-index:2; }
  .tm-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .tm-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .tm-cta .btn-primary-blue { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(59,130,246,.35); border:none; }
  .tm-cta .btn-primary-blue:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .tm-cta .btn-outline-white { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .tm-cta .btn-outline-white:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* Empty state */
  .tm-empty {
    text-align:center; padding:60px 20px; color:#666;
    background:#f7f9fc; border-radius:12px;
  }

  @media (max-width: 767px){
    .tm-stat .num { font-size:28px; }
  }

/* ===== PAGE: Our Clients (oc-) ===== */
/* Section helpers */
  .oc-section { padding:70px 0; }
  .oc-section-title { text-align:center; margin-bottom:45px; }
  .oc-section-title .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px;
  }
  .oc-section-title h2 { font-weight:800; margin-top:8px; }
  .oc-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Industries strip */
  .oc-ind { background:#f7f8fb; }
  .ind-item {
    background:#fff; border:1px solid #eef0f5; border-radius:12px;
    padding:26px 18px; text-align:center; height:100%;
    transition:.3s;
  }
  .ind-item:hover { transform:translateY(-4px); border-color:#c8d9ed; box-shadow:0 12px 26px rgba(46,108,184,.12); }
  .ind-item .ic {
    width:56px; height:56px; margin:0 auto 14px; border-radius:12px;
    background:#eaf2fb; color:#2e6cb8;
    display:flex; align-items:center; justify-content:center; font-size:22px;
  }
  .ind-item h5 { font-weight:700; font-size:15px; margin:0 0 4px; color:#111; }
  .ind-item p { color:#777; font-size:13px; margin:0; line-height:1.5; }

  /* Client logos */
  .oc-logos-wrap { padding:70px 0; background:#ffffff; }
  .oc-logos-wrap .logo-tile {
    background:#fff;
    border:1px solid #dde4ed;
    border-radius:12px;
    padding:22px 18px;
    height:120px;
    display:flex; align-items:center; justify-content:center;
    transition:.3s; margin-bottom:24px; overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.03);
  }
  .oc-logos-wrap .logo-tile:hover {
    border-color:var(--primary);
    box-shadow:0 14px 30px rgba(46,108,184,.15);
    transform:translateY(-4px);
  }
  .oc-logos-wrap .logo-tile a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
  .oc-logos-wrap .logo-tile img {
    max-width:100%; max-height:70px; width:auto; height:auto;
    object-fit:contain;
    transition:.35s;
  }
  .oc-logos-wrap .logo-tile:hover img { filter:grayscale(0%); opacity:1; transform:scale(1.05); }

  /* What We Do (service cards with logo image) */
  .oc-what { background:#fff; }
  .svc-logo-card {
    background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:30px 22px; text-align:center; height:100%;
    transition:.35s; position:relative; overflow:hidden;
    box-shadow:0 4px 18px rgba(0,0,0,.04);
  }
  .svc-logo-card:hover {
    transform:translateY(-8px);
    border-color:#2e6cb8;
    box-shadow:0 20px 40px rgba(46,108,184,.18);
  }
  .svc-logo-card:before {
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg,#2e6cb8,#4a8ad2);
    transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
  }
  .svc-logo-card:hover:before { transform:scaleX(1); }
  .svc-logo-thumb {
    width:110px; height:110px; margin:0 auto 18px;
    background:#eaf2fb; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:.35s;
    border:2px solid #c8d9ed;
  }
  .svc-logo-card:hover .svc-logo-thumb { background:#fff; border-color:#2e6cb8; transform:scale(1.05); }
  .svc-logo-thumb img {
    max-width:70px; max-height:70px; width:auto; height:auto;
    object-fit:contain;
  }
  .svc-logo-card h3 { font-size:19px; font-weight:700; color:#111; margin:0 0 10px; }
  .svc-logo-card p { color:#666; font-size:14px; line-height:1.65; margin:0 0 16px; min-height:62px; }
  .svc-logo-card .svc-go {
    color:#2e6cb8; font-weight:700; font-size:13px; text-decoration:none;
    text-transform:uppercase; letter-spacing:1px;
  }
  .svc-logo-card .svc-go i { margin-left:6px; transition:transform .3s; }
  .svc-logo-card:hover .svc-go i { transform:translateX(5px); }

  /* Why choose us (refreshed) */
  .oc-why { background:#f7f8fb; }
  .why-card {
    background:#fff; border:1px solid #eef0f5; border-radius:12px;
    padding:28px 24px; height:100%; transition:.3s;
  }
  .why-card:hover { transform:translateY(-5px); box-shadow:0 14px 32px rgba(46,108,184,.12); border-color:#c8d9ed; }
  .why-card .ic {
    width:58px; height:58px; border-radius:12px; background:#eaf2fb; color:#2e6cb8;
    display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px;
  }
  .why-card h4 { font-size:18px; font-weight:700; margin:0 0 8px; color:#111; }
  .why-card p { color:#666; font-size:14px; line-height:1.65; margin:0; }

  /* CTA band */
  .oc-cta { background:linear-gradient(135deg,#0a0e1a,#0a1a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .oc-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .oc-cta .container { position:relative; z-index:2; }
  .oc-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .oc-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .oc-cta .btn-primary-blue { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(59,130,246,.35); border:none; }
  .oc-cta .btn-primary-blue:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .oc-cta .btn-outline-white { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .oc-cta .btn-outline-white:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 767px){
    .oc-logos-wrap .logo-tile { height:100px; padding:16px 12px; }
    .oc-metric .num { font-size:34px; }
  }

/* ===== PAGE: Portfolio (pf-) ===== */
.pf-section { padding:70px 0; }
  .pf-section-title { text-align:center; margin-bottom:40px; }
  .pf-section-title .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px;
  }
  .pf-section-title h2 { font-weight:800; margin-top:8px; }
  .pf-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Intro */
  .pf-intro { padding:60px 0 30px; background:#f7f9fc; }
  .pf-intro .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px; margin-bottom:10px;
  }
  .pf-intro h2 { font-weight:800; line-height:1.25; margin-bottom:14px; }
  .pf-intro p { color:#555; font-size:16px; line-height:1.8; margin:0; }

  /* Stats */
  .pf-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .pf-stat { text-align:center; padding:8px; }
  .pf-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .pf-stat .num.plus:after { content:"+"; }
  .pf-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Filter tabs */
  .pf-filters {
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:0; margin:0 auto 44px;
    border-bottom:2px solid #e2e8f0;
    max-width:max-content;
  }
  .pf-filter {
    background:none; color:#94a3b8; border:none;
    padding:12px 24px; cursor:pointer;
    font-weight:600; font-size:14px; transition:all .25s;
    text-transform:capitalize;
    position:relative;
    letter-spacing:0.2px;
  }
  .pf-filter::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0;
    height:2px; background:var(--primary);
    transform:scaleX(0); transition:transform .25s;
  }
  .pf-filter:hover { color:var(--primary); }
  .pf-filter:hover::after { transform:scaleX(0.5); }
  .pf-filter.active { color:var(--primary); }
  .pf-filter.active::after { transform:scaleX(1); }

  /* Portfolio grid */
  .pf-grid { display:flex; flex-wrap:wrap; }
  .pf-grid .pf-item { margin-bottom:30px; display:flex; }
  .pf-card {
    position:relative; background:#fff; border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column;
    border:1px solid #eef0f5; box-shadow:0 4px 16px rgba(0,0,0,.05);
    transition:.35s; width:100%;
  }
  .pf-card .pf-body { flex:1; display:flex; flex-direction:column; }
  .pf-card .pf-body p { flex:1; }
  .pf-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.18); border-color:#c8d9ed; }
  .pf-thumb {
    position:relative; background:#eaf2fb; height:240px; overflow:hidden;
  }
  .pf-thumb img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .55s ease;
  }
  .pf-card:hover .pf-thumb img { transform:scale(1.08); }
  .pf-thumb .pf-overlay {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.85));
    display:flex; align-items:flex-end; padding:18px;
    opacity:0; transition:opacity .3s;
  }
  .pf-card:hover .pf-overlay { opacity:1; }
  .pf-overlay .pf-view {
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; color:#2e6cb8; padding:8px 16px;
    border-radius:24px; font-size:13px; font-weight:700;
    text-decoration:none;
  }
  .pf-overlay .pf-view:hover { background:#2e6cb8; color:#fff; text-decoration:none; }
  .pf-body { padding:22px; }
  .pf-body .pf-cat {
    display:inline-flex; align-items:center; gap:6px; width:fit-content;
    background:linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.08));
    color:var(--primary);
    font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    padding:5px 12px; border-radius:50px;
    margin-bottom:12px; border:none;
    position:relative; transition:all .25s ease;
  }
  .pf-body .pf-cat::before {
    content:''; width:6px; height:6px; border-radius:50%;
    background:var(--primary); flex-shrink:0;
    animation:pf-cat-pulse 2s ease-in-out infinite;
  }
  @keyframes pf-cat-pulse {
    0%,100% { opacity:.6; transform:scale(1); }
    50% { opacity:1; transform:scale(1.3); }
  }
  .pf-card:hover .pf-cat {
    background:var(--primary); color:#fff;
    box-shadow:0 4px 14px rgba(37,99,235,0.25);
  }
  .pf-card:hover .pf-cat::before { background:#fff; }
  .pf-body h3 {
    font-size:18px; font-weight:700; color:#111;
    margin:0 0 10px; line-height:1.35;
  }
  .pf-body p {
    color:#666; font-size:14px; line-height:1.65; margin:0 0 16px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pf-body .pf-actions { display:flex; gap:8px; }
  .pf-icon-btn {
    width:38px; height:38px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:14px; text-decoration:none; transition:all .25s;
    border:1.5px solid #e2e8f0; background:#f8fafc; color:#64748b;
  }
  .pf-icon-btn:hover {
    background:var(--primary); color:#fff; border-color:var(--primary);
    transform:scale(1.1); box-shadow:0 4px 12px rgba(37,99,235,0.25);
    text-decoration:none;
  }

  /* CTA band */
  .pf-cta { background:linear-gradient(135deg,#0a0e1a,#0a1a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .pf-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .pf-cta .container { position:relative; z-index:2; }
  .pf-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .pf-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .pf-cta .btn-primary-blue { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(59,130,246,.35); border:none; }
  .pf-cta .btn-primary-blue:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .pf-cta .btn-outline-white { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .pf-cta .btn-outline-white:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* Empty state */
  .pf-empty {
    text-align:center; padding:70px 20px; color:#666;
    background:#f7f9fc; border-radius:12px;
  }

  @media (max-width: 767px){
    .pf-thumb { height:200px; }
    .pf-stat .num { font-size:28px; }
  }

/* ===== PAGE: Company Overview (co-) ===== */
/* Intro */
  .co-intro { padding: 80px 0 40px; }
  .co-intro .eyebrow { color:var(--primary); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .co-intro h2 { font-weight:800; line-height:1.25; margin-bottom:18px; }
  .co-intro .lead { color:#555; font-size:16px; line-height:1.8; }
  .co-intro .intro-cta { margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
  .co-intro .intro-badges { margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
  .co-intro .intro-badges span {
    background:var(--primary-light,#e0edff); color:var(--primary); border:1px solid #c8d9ed;
    padding:8px 16px; border-radius:30px; font-size:13px; font-weight:600;
  }

  /* Blue Flywheel (company overview) */
  .flywheel--blue .ring { border-color: var(--primary); opacity: .25; }
  .flywheel--blue .core { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 30px 60px rgba(37,99,235,.35); }
  .flywheel--blue .seg.consult { top: -4%; left: 50%; transform: translateX(-50%); border-color: var(--primary); }
  .flywheel--blue .seg.consult i { color: var(--primary); }
  .flywheel--blue .seg.build { bottom: 12%; right: -8%; border-color: #0ea5e9; }
  .flywheel--blue .seg.build i { color: #0ea5e9; }
  .flywheel--blue .seg.grow { bottom: 12%; left: -8%; border-color: #10b981; }
  .flywheel--blue .seg.grow i { color: #10b981; }

  /* Stats strip */
  .co-stats { background:#4171b7; color:#fff; padding:20px 0; }
  .co-stats .stat { text-align:center; padding:10px; }
  .co-stats .stat .num { font-size:42px; font-weight:800; color:#FFFFFF; line-height:1; }
  .co-stats .stat .num:after { content:"+"; }
  .co-stats .stat .label { margin-top:8px; font-size:14px; opacity:.85; letter-spacing:.5px; }

  /* Section title helper */
  .co-section { padding:70px 0; }
  .co-section-title { text-align:center; margin-bottom:45px; }
  .co-section-title .eyebrow { color:var(--primary); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .co-section-title h2 { font-weight:800; margin-top:8px; }

  /* MVV cards */
  .mvv-card {
    background:#fff; border:1px solid #eee; border-radius:12px;
    padding:34px 28px; height:100%; transition:.3s;
    box-shadow:0 4px 20px rgba(0,0,0,.04);
  }
  .mvv-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.10); border-color:#c8d9ed; }
  .mvv-card .ic {
    width:62px; height:62px; border-radius:14px; background:#eaf2fb; color:var(--primary);
    display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px;
  }
  .mvv-card h3 { font-weight:700; margin-bottom:10px; font-size:22px; }
  .mvv-card p { color:#555; line-height:1.7; margin:0; }

  /* Why Choose Us */
  .co-why { background:#f7f8fb; }
  .why-item {
    display:flex; gap:16px; padding:22px; background:#fff;
    border-radius:12px; height:100%; border:1px solid #eef0f5; transition:.3s;
  }
  .why-item:hover { border-color:var(--primary); box-shadow:0 10px 28px rgba(46,108,184,.15); }
  .why-item .ic {
    flex:0 0 52px; height:52px; border-radius:10px; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .why-item h4 { font-weight:700; font-size:17px; margin:0 0 6px; }
  .why-item p { color:#666; margin:0; font-size:14px; line-height:1.6; }

  /* Journey timeline */
  .co-timeline { position:relative; padding:30px 0; }
  .co-timeline:before {
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:3px; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); transform:translateX(-50%);
    border-radius:3px;
  }
  .co-tl-row { position:relative; display:flex; margin-bottom:40px; }
  .co-tl-row:last-child { margin-bottom:0; }
  .co-tl-row .co-tl-content {
    width:44%; background:#fff; border:1px solid #eef0f5; border-radius:16px;
    padding:24px 28px; box-shadow:0 8px 28px rgba(37,99,235,.08);
    transition:.35s ease;
  }
  .co-tl-row .co-tl-content:hover {
    transform:translateY(-4px); box-shadow:0 18px 40px rgba(37,99,235,.16);
    border-color:var(--primary);
  }
  .co-tl-row.left  .co-tl-content { margin-right:auto; text-align:right; }
  .co-tl-row.right .co-tl-content { margin-left:auto;  text-align:left;  }
  .co-tl-row:before {
    content:""; position:absolute; left:50%; top:28px; width:18px; height:18px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark)); border:3px solid #fff; border-radius:50%;
    transform:translateX(-50%); box-shadow:0 0 0 3px var(--primary), 0 4px 12px rgba(37,99,235,.3);
    z-index:2;
  }
  .co-tl-row:after {
    content:""; position:absolute; left:50%; top:28px; width:30px; height:30px;
    background:rgba(37,99,235,.12); border-radius:50%; transform:translateX(-50%);
    z-index:1;
  }
  .co-tl-content .co-yr {
    display:inline-block; background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; font-weight:800; font-size:13px; padding:4px 14px; border-radius:20px;
    letter-spacing:.5px; margin-bottom:10px;
  }
  .co-tl-content h4 { font-weight:800; margin:0 0 8px; font-size:18px; color:#0a0a23; }
  .co-tl-content p { color:#555; margin:0; font-size:14px; line-height:1.7; }

  /* Service cards - modern grid */
  .co-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .co-svc-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 30px 24px;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .co-svc-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
  }
  .co-svc-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(37,99,235,0.12);
    border-color: var(--primary);
  }
  .co-svc-item:hover::before { transform: scaleX(1); }
  .co-svc-item__icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--primary-light, #e0edff);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 20px;
    transition: all 0.3s;
  }
  .co-svc-item:hover .co-svc-item__icon {
    background: var(--primary); color: #fff;
  }
  .co-svc-item h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--heading); }
  .co-svc-item p { color: #64748b; font-size: 14px; line-height: 1.65; margin: 0 0 18px; flex: 1; }
  .co-svc-item__link {
    color: var(--primary); font-weight: 600; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .co-svc-item__link i { font-size: 11px; transition: transform 0.3s; }
  .co-svc-item:hover .co-svc-item__link i { transform: translateX(4px); }

  /* CTA band */
  .co-cta { background:linear-gradient(135deg,#0a0e1a,#0a1a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .co-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#2563EB 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .co-cta .container { position:relative; z-index:2; }
  .co-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .co-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .co-cta .btn-light-outline { background:linear-gradient(135deg,#2563EB,#1D4ED8); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(37,99,235,.35); border:none; }
  .co-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .co-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .co-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* Responsive tweaks */
  @media (max-width: 991px){
    .co-svc-grid { grid-template-columns: 1fr 1fr; }
    .orbit { min-height: 500px; }
    .orbit__globe { width: 90px; height: 90px; }
    .orbit__globe span { font-size: 22px; }
    .orbit__icon { width: 42px; height: 42px; font-size: 15px; }
    .orbit__node--2, .orbit__node--3 { right: -4%; }
    .orbit__node--5, .orbit__node--6 { left: -4%; }
  }
  @media (max-width: 767px){
    .orbit { min-height: 420px; margin-bottom: 20px; }
    .orbit__ring--1 { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
    .orbit__ring--2 { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
    .orbit__ring--3 { width: 350px; height: 350px; margin: -175px 0 0 -175px; }
    .orbit__globe { width: 70px; height: 70px; }
    .orbit__globe span { font-size: 16px; }
    .orbit__icon { width: 36px; height: 36px; font-size: 13px; }
    .orbit__node span { font-size: 8px; }
    .orbit__node small { display: none; }
    .orbit__node--2, .orbit__node--3 { right: 0; }
    .orbit__node--5, .orbit__node--6 { left: 0; }
    .co-svc-grid { grid-template-columns: 1fr; }
    .co-timeline:before { left:20px; }
    .co-tl-row .co-tl-content { width:calc(100% - 56px); margin-left:46px !important; text-align:left !important; }
    .co-tl-row:before { left:20px; }
    .co-tl-row:after { left:20px; }
    .co-stats .stat .num { font-size:34px; }
  }

/* ===== PAGE: Blogs (bl-) ===== */
.bl-section { padding:70px 0; }
  .bl-section-title { text-align:center; margin-bottom:45px; }
  .bl-section-title .eyebrow { color:#b45309; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .bl-section-title h2 { font-weight:800; margin-top:8px; font-family:'Playfair Display',Georgia,serif; }
  .bl-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO — editorial masthead */
  .bl-masthead { padding:50px 0 40px; background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%); position:relative; overflow:hidden; border-bottom:1px solid #fcd34d; }
  .bl-masthead:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#ca8a04 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .bl-masthead .title-block { text-align:center; margin-bottom:36px; position:relative; }
  .bl-masthead .mk-tag { display:inline-block; background:#0a0a23; color:#fde68a; padding:4px 14px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:3px; margin-bottom:14px; }
  .bl-masthead h1 { font-family:'Playfair Display',Georgia,serif; font-weight:800; color:#0a0a23; font-size:54px; margin:0 0 10px; letter-spacing:-1px; }
  .bl-masthead h1 em { font-style:italic; color:#b45309; font-weight:800; }
  .bl-masthead .sub { color:#78350f; font-size:15px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
  .bl-masthead .sub:before, .bl-masthead .sub:after { content:""; display:inline-block; width:40px; height:2px; background:#ca8a04; vertical-align:middle; margin:0 12px; }

  /* FEATURED ARTICLE */
  .feat-article { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 22px 50px rgba(10,10,35,.14); border:1px solid rgba(202,138,4,.18); position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 1fr; }
  @media(max-width:767px){ .feat-article { grid-template-columns:1fr; } }
  .feat-article .ph { position:relative; overflow:hidden; min-height:340px; background:linear-gradient(135deg,#fde68a,#fcd34d); }
  .feat-article .ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .feat-article:hover .ph img { transform:scale(1.04); }
  .feat-article .ph .chip { position:absolute; top:16px; left:16px; background:#0a0a23; color:#fde68a; font-size:10px; font-weight:800; letter-spacing:2px; padding:6px 12px; border-radius:14px; z-index:2; }
  .feat-article .body { padding:36px 34px; display:flex; flex-direction:column; justify-content:center; }
  .feat-article .meta { display:flex; gap:14px; font-size:12px; color:#94a3b8; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:14px; }
  .feat-article .meta i { margin-right:4px; color:#b45309; }
  .feat-article h2 { font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:800; line-height:1.2; color:#0a0a23; margin:0 0 16px; letter-spacing:-.5px; }
  .feat-article h2 a { color:#0a0a23; text-decoration:none; transition:.2s; }
  .feat-article h2 a:hover { color:#b45309; }
  .feat-article p { color:#475569; font-size:15px; line-height:1.75; margin:0 0 22px; }
  .feat-article .read-btn { display:inline-flex; align-items:center; gap:10px; background:#0a0a23; color:#fde68a; padding:12px 22px; border-radius:30px; font-weight:700; font-size:13px; letter-spacing:.5px; text-decoration:none; transition:.3s; width:max-content; }
  .feat-article .read-btn:hover { background:#b45309; color:#fff; transform:translateX(4px); }
  .feat-article .read-btn i { transition:.3s; }
  .feat-article .read-btn:hover i { transform:translateX(3px); }

  /* CATEGORY PILLS */
  .bl-cats { background:#fff; padding:26px 0; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:10; }
  .cat-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; }
  .cat-row .cat-pill { padding:8px 18px; border-radius:30px; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; background:#f5f5f4; color:#44403c; border:1px solid #e5e7eb; cursor:pointer; transition:.25s; }
  .cat-row .cat-pill:hover { background:#0a0a23; color:#fde68a; border-color:#0a0a23; }
  .cat-row .cat-pill.active { background:#0a0a23; color:#fde68a; border-color:#0a0a23; }
  .cat-row .count { font-size:11px; color:#94a3b8; font-weight:700; margin-left:auto; padding:6px 0; }

  /* BLOG CARD GRID */
  .blog-card { background:#fff; border-radius:18px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 6px 20px rgba(0,0,0,.05); margin-bottom:30px; transition:.35s; display:flex; flex-direction:column; height:calc(100% - 30px); }
  .blog-card:hover { transform:translateY(-8px); box-shadow:0 28px 56px rgba(180,83,9,.18); border-color:#fcd34d; }
  .blog-card .thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .blog-card .thumb img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .6s ease; }
  .blog-card:hover .thumb img { transform:scale(1.06); }
  .blog-card .thumb .cat-tag { position:absolute; top:14px; left:14px; background:#fde68a; color:#78350f; font-size:10px; font-weight:800; letter-spacing:1.5px; padding:5px 11px; border-radius:12px; text-transform:uppercase; backdrop-filter:blur(6px); }
  .blog-card .thumb .date-ribbon { position:absolute; bottom:14px; right:14px; background:rgba(10,10,35,.82); color:#fde68a; padding:7px 12px; border-radius:10px; text-align:center; min-width:56px; backdrop-filter:blur(8px); }
  .blog-card .thumb .date-ribbon .d { font-size:18px; font-weight:800; line-height:1; }
  .blog-card .thumb .date-ribbon .m { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
  .blog-card .body { padding:22px 24px; flex:1; display:flex; flex-direction:column; }
  .blog-card .meta { font-size:11px; color:#94a3b8; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; }
  .blog-card .meta i { margin-right:4px; color:#b45309; }
  .blog-card h4 { font-family:'Playfair Display',Georgia,serif; font-size:20px; font-weight:800; line-height:1.3; margin:0 0 10px; letter-spacing:-.3px; }
  .blog-card h4 a { color:#0a0a23; text-decoration:none; transition:.2s; }
  .blog-card h4 a:hover { color:#b45309; }
  .blog-card p { color:#64748b; font-size:14px; line-height:1.65; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .blog-card .read-more { display:inline-flex; align-items:center; gap:6px; color:#b45309; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.5px; text-decoration:none; transition:.3s; }
  .blog-card .read-more:hover { color:#0a0a23; gap:10px; }
  .blog-card .read-more i { font-size:11px; transition:.3s; }

  /* NEWSLETTER STRIP */
  .bl-newsletter { background:linear-gradient(135deg,#0a0a23,#1e1b4b); color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .bl-newsletter:before { content:""; position:absolute; top:-150px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,#ca8a04 0%,transparent 70%); opacity:.28; border-radius:50%; }
  .bl-newsletter:after { content:""; position:absolute; bottom:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#fbbf24 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .bl-newsletter .container { position:relative; z-index:2; }
  .bl-newsletter .eyebrow { color:#fbbf24; font-weight:700; letter-spacing:3px; text-transform:uppercase; font-size:12px; margin-bottom:10px; }
  .bl-newsletter h2 { font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:36px; color:#fff; margin:0 0 10px; letter-spacing:-.5px; }
  .bl-newsletter p { color:rgba(255,255,255,.8); font-size:15px; line-height:1.75; margin:0 0 22px; }
  .nl-card { background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(251,191,36,.25); border-radius:18px; padding:22px; backdrop-filter:blur(10px); }
  .nl-form { display:flex; gap:8px; background:#fff; padding:6px 6px 6px 18px; border-radius:40px; box-shadow:0 14px 32px rgba(0,0,0,.2); }
  .nl-form i { color:#b45309; align-self:center; }
  .nl-form input { flex:1; border:none; padding:10px 6px; background:transparent; font-size:14px; outline:none; color:#0a0a23; }
  .nl-form button { background:linear-gradient(135deg,#b45309,#78350f); color:#fff; border:none; padding:12px 24px; border-radius:30px; font-weight:800; font-size:12px; letter-spacing:.5px; cursor:pointer; transition:.3s; }
  .nl-form button:hover { transform:translateX(2px); }
  .nl-trust { display:flex; gap:16px; margin-top:14px; color:rgba(255,255,255,.6); font-size:12px; }
  .nl-trust i { color:#fbbf24; margin-right:4px; }
  .nl-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .nl-stats .s { background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.22); border-radius:14px; padding:18px 14px; text-align:center; }
  .nl-stats .s .n { font-family:'Playfair Display',Georgia,serif; color:#fbbf24; font-size:28px; font-weight:800; line-height:1; }
  .nl-stats .s .l { font-size:11px; color:rgba(255,255,255,.65); font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-top:6px; }

  /* EMPTY STATE */
  .empty-state { text-align:center; padding:60px 20px; }
  .empty-state i { font-size:64px; color:#fcd34d; margin-bottom:18px; }
  .empty-state h3 { font-family:'Playfair Display',Georgia,serif; color:#0a0a23; margin-bottom:10px; }
  .empty-state p { color:#64748b; }

  /* CTA */
  .bl-cta { background:#fefce8; padding:60px 0; text-align:center; border-top:1px solid #fde68a; }
  .bl-cta h2 { font-family:'Playfair Display',Georgia,serif; color:#0a0a23; font-weight:800; margin-bottom:10px; font-size:30px; }
  .bl-cta p { color:#78350f; font-size:15px; margin-bottom:22px; }
  .bl-cta .btn-dark-coffee { background:#0a0a23; color:#fde68a; padding:12px 30px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; text-decoration:none; }
  .bl-cta .btn-dark-coffee:hover { background:#b45309; color:#fff; text-decoration:none; }
  .bl-cta .btn-outline-coffee { border:2px solid #0a0a23; color:#0a0a23; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; text-decoration:none; }
  .bl-cta .btn-outline-coffee:hover { background:#0a0a23; color:#fde68a; text-decoration:none; }

  @media(max-width:767px){
    .bl-masthead h1 { font-size:36px; }
    .feat-article h2 { font-size:24px; }
    .bl-newsletter h2 { font-size:28px; }
  }

/* ===== PAGE: Blog ===== */
/* Single blog page */
  .bp-article { padding:60px 0 50px; background:#fff; }
  .bp-article .container { max-width:900px; }

  /* Hero image */
  .bp-hero-img {
    width:100%; border-radius:16px; overflow:hidden; margin-bottom:32px;
    box-shadow:0 12px 36px rgba(0,0,0,.08);
  }
  .bp-hero-img img { width:100%; display:block; object-fit:contain; }

  /* Meta strip */
  .bp-meta {
    display:flex; align-items:center; flex-wrap:wrap; gap:16px;
    margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #eef0f5;
  }
  .bp-meta span {
    font-size:13px; color:#64748b; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  }
  .bp-meta span i { color:var(--primary,#2563EB); font-size:12px; }

  /* Article title */
  .bp-title {
    font-size:32px; font-weight:800; color:#0a0a23; line-height:1.3;
    margin:0 0 28px; letter-spacing:-.3px;
  }

  /* Article body */
  .bp-body { font-size:16px; line-height:1.85; color:#374151; }
  .bp-body h1,.bp-body h2,.bp-body h3,.bp-body h4,.bp-body h5,.bp-body h6 { color:#0a0a23; font-weight:700; margin:28px 0 14px; }
  .bp-body p { margin:0 0 18px; }
  .bp-body img { max-width:100%; height:auto; border-radius:10px; margin:16px 0; }
  .bp-body ul,.bp-body ol { padding-left:24px; margin:0 0 18px; }
  .bp-body li { margin-bottom:8px; }
  .bp-body blockquote {
    border-left:4px solid var(--primary,#2563EB); background:#f0f5ff; padding:18px 24px;
    margin:24px 0; border-radius:0 10px 10px 0; font-style:italic; color:#334155;
  }
  .bp-body a { color:var(--primary,#2563EB); text-decoration:underline; }
  .bp-body table { width:100%; border-collapse:collapse; margin:18px 0; }
  .bp-body th,.bp-body td { border:1px solid #e5e7eb; padding:10px 14px; text-align:left; font-size:14px; }
  .bp-body th { background:#f7f9fc; font-weight:700; color:#0a0a23; }

  /* Share bar */
  .bp-share {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:36px; padding-top:24px; border-top:1px solid #eef0f5;
  }
  .bp-share-label { font-size:14px; font-weight:700; color:#0a0a23; margin-right:4px; }
  .bp-share a {
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:16px; color:#fff; transition:.3s; text-decoration:none;
  }
  .bp-share a:hover { transform:translateY(-3px); opacity:.85; }
  .bp-share .sh-fb { background:#1877f2; }
  .bp-share .sh-tw { background:#000; }
  .bp-share .sh-li { background:#0a66c2; }
  .bp-share .sh-wa { background:#25d366; }
  .bp-share .sh-em { background:#64748b; }

  /* Sidebar */
  .bp-sidebar {}

  /* CTA card */
  .bp-cta-card {
    background:#0B1120; border-radius:16px; padding:28px 24px; text-align:center;
    margin-bottom:28px; color:#fff;
  }
  .bp-cta-card h5 { color:#fff; font-weight:800; font-size:17px; margin:0 0 8px; }
  .bp-cta-card p { color:#b0b8cc; font-size:13px; margin:0 0 16px; line-height:1.5; }
  .bp-cta-card a {
    display:inline-block; background:#fff; color:#0B1120; padding:10px 24px;
    border-radius:30px; font-weight:700; font-size:14px; transition:.3s; text-decoration:none;
  }
  .bp-cta-card a:hover { background:var(--primary,#2563EB); color:#fff; }

  /* Recent posts */
  .bp-recent { margin-bottom:28px; }
  .bp-recent h4 {
    font-size:17px; font-weight:800; color:#0a0a23; margin:0 0 18px;
    padding-bottom:12px; border-bottom:3px solid var(--primary,#2563EB); display:inline-block;
  }
  .bp-recent-item {
    display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #f1f3f7; transition:.3s;
  }
  .bp-recent-item:last-child { border-bottom:none; }
  .bp-recent-item:hover { padding-left:4px; }
  .bp-recent-item .rp-thumb {
    width:72px; height:54px; border-radius:8px; overflow:hidden; flex:0 0 72px;
    background:#f7f9fc;
  }
  .bp-recent-item .rp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .bp-recent-item .rp-info { flex:1; min-width:0; }
  .bp-recent-item .rp-info a {
    font-size:14px; font-weight:700; color:#0a0a23; text-decoration:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    line-height:1.4; transition:.2s;
  }
  .bp-recent-item .rp-info a:hover { color:var(--primary,#2563EB); }
  .bp-recent-item .rp-date { font-size:11px; color:#94a3b8; margin-top:4px; }

  /* Services list */
  .bp-services { margin-bottom:28px; }
  .bp-services h4 {
    font-size:17px; font-weight:800; color:#0a0a23; margin:0 0 18px;
    padding-bottom:12px; border-bottom:3px solid var(--primary,#2563EB); display:inline-block;
  }
  .bp-services ul { list-style:none; padding:0; margin:0; }
  .bp-services li { border-bottom:1px solid #f1f3f7; }
  .bp-services li:last-child { border-bottom:none; }
  .bp-services li a {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; font-size:14px; color:#374151; font-weight:600;
    text-decoration:none; transition:.2s;
  }
  .bp-services li a:hover { color:var(--primary,#2563EB); padding-left:6px; }
  .bp-services li a::after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:10px; color:#cbd5e1; }

  @media (max-width:991px){
    .bp-title { font-size:26px; }
    .bp-article .container { max-width:100%; }
  }

/* ===== PAGE: Careers (cr-) ===== */
.cr-section { padding:70px 0; }
  .cr-section-title { text-align:center; margin-bottom:45px; }
  .cr-section-title .eyebrow { color:#9333ea; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .cr-section-title h2 { font-weight:800; margin-top:8px; }
  .cr-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .cr-hero { padding:60px 0 50px; background:linear-gradient(135deg,#faf5ff 0%,#fce7f3 100%); position:relative; overflow:hidden; }
  .cr-hero:before { content:""; position:absolute; top:-100px; right:-80px; width:360px; height:360px; background:radial-gradient(circle,#a855f7 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .cr-hero:after { content:""; position:absolute; bottom:-80px; left:-80px; width:320px; height:320px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .cr-hero .eyebrow { display:inline-flex; align-items:center; gap:10px; background:#fff; color:#9333ea; font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:12px; padding:7px 14px; border-radius:20px; border:1px solid #e9d5ff; box-shadow:0 6px 18px rgba(168,85,247,.15); margin-bottom:14px; }
  .cr-hero .eyebrow .blip { width:8px; height:8px; border-radius:50%; background:#ef4444; animation:pulse 1.3s infinite; box-shadow:0 0 8px #ef4444; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .cr-hero h1 { font-weight:800; line-height:1.1; margin-bottom:18px; font-size:46px; color:#0a0a23; letter-spacing:-1px; }
  .cr-hero h1 span { background:linear-gradient(135deg,#a855f7,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .cr-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 24px; }
  .cr-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .cr-hero .btn-p { background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; padding:12px 28px; border-radius:30px; font-weight:700; border:none; display:inline-block; box-shadow:0 12px 28px rgba(168,85,247,.35); transition:.3s; text-decoration:none; }
  .cr-hero .btn-p:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .cr-hero .btn-ot { border:2px solid #0a0a23; color:#0a0a23; padding:10px 26px; border-radius:30px; font-weight:700; display:inline-block; transition:.3s; text-decoration:none; }
  .cr-hero .btn-ot:hover { background:#0a0a23; color:#fff; text-decoration:none; }

  /* TEAM MOSAIC (right side of hero) */
  .team-mosaic { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:12px; aspect-ratio:1/1; max-width:520px; margin:0 auto; position:relative; z-index:2; }
  .tm-tile { background:#fff; border-radius:18px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 14px 32px rgba(168,85,247,.12); transition:.35s; overflow:hidden; position:relative; }
  .tm-tile:hover { transform:translateY(-6px); box-shadow:0 26px 50px rgba(168,85,247,.22); }
  .tm-tile.grad { color:#fff; }
  .tm-tile.g1 { background:linear-gradient(135deg,#a855f7,#7e22ce); }
  .tm-tile.g2 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .tm-tile.g3 { background:linear-gradient(135deg,#f59e0b,#ea580c); }
  .tm-tile.g4 { background:linear-gradient(135deg,#10b981,#059669); }
  .tm-tile.span-2 { grid-column:span 2; }
  .tm-tile.row-2 { grid-row:span 2; }
  .tm-tile .emoji { font-size:34px; margin-bottom:4px; }
  .tm-tile .big { font-family:'Playfair Display',Georgia,serif; font-size:26px; font-weight:800; line-height:1; color:#0a0a23; }
  .tm-tile.grad .big { color:#fff; }
  .tm-tile .lbl { font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#64748b; margin-top:4px; }
  .tm-tile.grad .lbl { color:rgba(255,255,255,.85); }
  .tm-tile .avatars { display:flex; }
  .tm-tile .avatars span { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:11px; margin-right:-8px; border:2px solid #fff; }
  .tm-tile .avatars span:nth-child(1) { background:linear-gradient(135deg,#f97316,#ea580c); }
  .tm-tile .avatars span:nth-child(2) { background:linear-gradient(135deg,#10b981,#059669); }
  .tm-tile .avatars span:nth-child(3) { background:linear-gradient(135deg,#3b82f6,#1e40af); }
  .tm-tile .avatars span:nth-child(4) { background:linear-gradient(135deg,#ec4899,#be185d); }

  /* PERKS RIBBON */
  .cr-ribbon { background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; padding:30px 0; }
  .cr-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .cr-ribbon .item:last-child { border-right:0; }
  .cr-ribbon .big { font-size:30px; font-weight:800; line-height:1; }
  .cr-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* PERKS / CULTURE GRID */
  .perk-tile { position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; margin-bottom:24px; cursor:pointer; transition:.35s; box-shadow:0 8px 22px rgba(0,0,0,.06); }
  .perk-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; transition:transform .5s ease; }
  .perk-tile .bg.b1 { background:linear-gradient(135deg,#a855f7,#7e22ce); }
  .perk-tile .bg.b2 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .perk-tile .bg.b3 { background:linear-gradient(135deg,#10b981,#059669); }
  .perk-tile .bg.b4 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .perk-tile .bg.b5 { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
  .perk-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#b91c1c); }
  .perk-tile .cap { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); padding:20px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .perk-tile .cap h5 { color:#fff; font-size:17px; font-weight:800; margin:0 0 4px; }
  .perk-tile .cap small { opacity:.9; font-size:13px; line-height:1.5; }
  .perk-tile:hover { transform:translateY(-6px); box-shadow:0 26px 50px rgba(168,85,247,.28); }
  .perk-tile:hover .bg { transform:scale(1.08); }

  /* LIFE AT HM — collage strip */
  .life-strip { background:#0a0a23; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .life-strip:before { content:""; position:absolute; top:-50%; right:-10%; width:600px; height:600px; background:radial-gradient(circle,#a855f7 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .life-strip:after { content:""; position:absolute; bottom:-50%; left:-10%; width:500px; height:500px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .life-strip .head { text-align:center; margin-bottom:40px; position:relative; z-index:2; }
  .life-strip .head .eyebrow { color:#e879f9; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .life-strip .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .life-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; z-index:2; max-width:1100px; margin:0 auto; }
  @media(max-width:767px){ .life-grid { grid-template-columns:repeat(2,1fr); } }
  .life-card { aspect-ratio:3/4; border-radius:16px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; position:relative; overflow:hidden; transition:.35s; }
  .life-card:hover { transform:translateY(-5px); }
  .life-card.l1 { background:linear-gradient(135deg,#a855f7,#6d28d9); }
  .life-card.l2 { background:linear-gradient(135deg,#ec4899,#9f1239); }
  .life-card.l3 { background:linear-gradient(135deg,#0ea5e9,#1e40af); }
  .life-card.l4 { background:linear-gradient(135deg,#10b981,#065f46); }
  .life-card.l5 { background:linear-gradient(135deg,#f59e0b,#b45309); }
  .life-card.l6 { background:linear-gradient(135deg,#ef4444,#7f1d1d); }
  .life-card.l7 { background:linear-gradient(135deg,#14b8a6,#115e59); }
  .life-card.l8 { background:linear-gradient(135deg,#8b5cf6,#4c1d95); }
  .life-card .emoji { font-size:44px; position:absolute; top:18px; left:18px; }
  .life-card h5 { color:#fff; font-size:15px; font-weight:800; margin:0; }
  .life-card small { color:rgba(255,255,255,.82); font-size:11px; }

  /* OPENINGS SECTION */
  .cr-openings { background:#faf5ff; padding:70px 0; }
  .openings-wrap { max-width:900px; margin:0 auto; }
  .cr-msg { max-width:900px; margin:0 auto 20px; text-align:center; padding:12px 18px; background:#fef3c7; color:#92400e; border-radius:12px; font-weight:700; border:1px solid #fde68a; }
  .job-card { background:#fff; border:1px solid #eef0f5; border-radius:16px; margin-bottom:16px; overflow:hidden; transition:.3s; box-shadow:0 4px 14px rgba(0,0,0,.04); }
  .job-card:hover { border-color:#c084fc; box-shadow:0 18px 36px rgba(168,85,247,.16); }
  .job-card .job-head { padding:22px 26px; display:flex; align-items:center; gap:18px; cursor:pointer; background:#fff; transition:.2s; }
  .job-card .job-head:hover { background:#faf5ff; }
  .job-card .job-head .num { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; box-shadow:0 6px 16px rgba(168,85,247,.3); }
  .job-card .job-head .body { flex:1; }
  .job-card .job-head .body h4 { margin:0 0 6px; font-size:17px; font-weight:800; color:#0a0a23; }
  .job-card .job-head .body .pills { display:flex; gap:6px; flex-wrap:wrap; }
  .job-card .job-head .body .pill { display:inline-flex; align-items:center; gap:5px; background:#f5f3ff; color:#7e22ce; font-size:11px; font-weight:700; padding:3px 10px; border-radius:10px; }
  .job-card .job-head .body .pill i { font-size:10px; }
  .job-card .job-head .arr { width:36px; height:36px; border-radius:50%; background:#f5f3ff; color:#9333ea; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; transition:.3s; }
  .job-card .job-head[aria-expanded="true"] .arr { transform:rotate(180deg); background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; }
  .job-panel { padding:0 26px 26px; }
  .job-panel .details { background:#faf5ff; border-radius:14px; padding:22px 24px; margin-top:4px; }
  .job-panel .details h3 { font-weight:800; color:#0a0a23; font-size:20px; margin:0 0 14px; }
  .job-panel .details .project-info { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; padding:0; list-style:none; }
  @media(max-width:575px){ .job-panel .details .project-info { grid-template-columns:1fr; } }
  .job-panel .details .project-info li { background:#fff; border:1px solid #e9d5ff; border-radius:12px; padding:14px; }
  .job-panel .details .project-info .title { font-size:11px; font-weight:800; color:#9333ea; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
  .job-panel .details .project-info .title i { margin-right:4px; }
  .job-panel .details .project-info .details-val { font-size:14px; font-weight:700; color:#0a0a23; }
  .job-panel .jd { color:#334155; font-size:14px; line-height:1.75; margin-bottom:20px; }
  .job-panel .jd ul, .job-panel .jd ol { padding-left:22px; }

  /* APPLY FORM */
  .apply-form { background:#fff; border:1px solid #e9d5ff; border-radius:14px; padding:22px 24px; margin-top:14px; }
  .apply-form .form-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .apply-form .form-head .ic { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .apply-form .form-head h4 { margin:0; font-size:16px; font-weight:800; color:#0a0a23; }
  .apply-form .form-head small { display:block; font-size:11px; color:#94a3b8; font-weight:600; margin-top:2px; }
  .apply-form .form-control { border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 14px; font-size:13px; transition:.2s; width:100%; }
  .apply-form .form-control:focus { border-color:#a855f7; outline:none; box-shadow:0 0 0 3px rgba(168,85,247,.12); }
  .apply-form textarea.form-control { resize:vertical; min-height:90px; }
  .apply-form .error { display:block; font-size:11px; color:#94a3b8; margin-top:4px; }
  .apply-form .submit-btn { background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; padding:12px 32px; border-radius:30px; font-weight:800; font-size:13px; letter-spacing:.5px; border:none; cursor:pointer; transition:.3s; box-shadow:0 10px 24px rgba(168,85,247,.35); }
  .apply-form .submit-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(168,85,247,.45); }

  /* EMPTY STATE */
  .no-jobs { max-width:620px; margin:0 auto; background:#fff; border:1px dashed #c084fc; border-radius:20px; padding:50px 30px; text-align:center; }
  .no-jobs .icon { width:80px; height:80px; border-radius:24px; background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; margin:0 auto 18px; box-shadow:0 14px 32px rgba(168,85,247,.3); }
  .no-jobs h3 { font-weight:800; color:#0a0a23; margin:0 0 8px; }
  .no-jobs p { color:#64748b; font-size:14px; }
  .no-jobs .btn-p { background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; padding:12px 28px; border-radius:30px; font-weight:700; display:inline-block; margin-top:12px; text-decoration:none; }
  .no-jobs .btn-p:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }

  /* CTA */
  .cr-cta { background:linear-gradient(135deg,#0a0a23,#4a044e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .cr-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#a855f7 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .cr-cta:after { content:""; position:absolute; bottom:-100px; right:-100px; width:350px; height:350px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.25; border-radius:50%; }
  .cr-cta .container { position:relative; z-index:2; }
  .cr-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .cr-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .cr-cta .btn-grad { background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; padding:12px 30px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; box-shadow:0 12px 28px rgba(168,85,247,.4); transition:.3s; text-decoration:none; }
  .cr-cta .btn-grad:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .cr-cta .btn-ghost { border:2px solid #fff; color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; text-decoration:none; }
  .cr-cta .btn-ghost:hover { background:#fff; color:#0a0a23; text-decoration:none; }

  @media (max-width:991px){ .cr-hero h1 { font-size:34px; } .team-mosaic { margin-top:40px; } }

/* ===== PAGE: Recruitments (rc-) ===== */
.rc-section { padding:70px 0; }
  .rc-section-title { text-align:center; margin-bottom:45px; }
  .rc-section-title .eyebrow { color:#ca8a04; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .rc-section-title h2 { font-weight:800; margin-top:8px; color:#0f172a; }
  .rc-section-title p { color:#64748b; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .rc-hero { background:linear-gradient(135deg,#0f172a 0%,#1e293b 55%,#0c1631 100%); color:#fff; padding:80px 0 70px; position:relative; overflow:hidden; }
  .rc-hero:before { content:""; position:absolute; top:-100px; right:-80px; width:400px; height:400px; background:radial-gradient(circle,#fbbf24 0%,transparent 70%); opacity:.18; border-radius:50%; }
  .rc-hero:after { content:""; position:absolute; bottom:-140px; left:-100px; width:420px; height:420px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .rc-hero .banner-bg { position:absolute; inset:0; background-image:url(<?=base_url().FRONTEND?>/images/recruitments/banner.webp); background-size:cover; background-position:center; opacity:.08; mix-blend-mode:lighten; }
  .rc-hero .eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(251,191,36,.15); color:#fbbf24; font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:12px; padding:7px 14px; border-radius:20px; border:1px solid rgba(251,191,36,.25); margin-bottom:16px; }
  .rc-hero h1 { font-weight:800; line-height:1.1; margin-bottom:18px; font-size:48px; letter-spacing:-1px; color:#fff; }
  .rc-hero h1 span { color:#fbbf24; position:relative; }
  .rc-hero h1 span:after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:4px; background:#fbbf24; border-radius:2px; opacity:.35; }
  .rc-hero p { color:rgba(255,255,255,.82); font-size:16px; line-height:1.8; margin:0 0 26px; max-width:520px; }
  .rc-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .rc-hero .btn-gold { background:linear-gradient(135deg,#fbbf24,#eab308); color:#0f172a; padding:12px 28px; border-radius:30px; font-weight:800; display:inline-block; box-shadow:0 14px 28px rgba(251,191,36,.3); transition:.3s; text-decoration:none; }
  .rc-hero .btn-gold:hover { transform:translateY(-2px); color:#0f172a; text-decoration:none; }
  .rc-hero .btn-out { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 26px; border-radius:30px; font-weight:700; display:inline-block; transition:.3s; text-decoration:none; }
  .rc-hero .btn-out:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* MATCH MOCKUP */
  .match-card { background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(251,191,36,.25); border-radius:22px; padding:24px; backdrop-filter:blur(12px); box-shadow:0 32px 60px rgba(0,0,0,.35); position:relative; z-index:2; }
  .match-card .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:14px; border-bottom:1px dashed rgba(255,255,255,.1); }
  .match-card .top .lbl { font-size:12px; font-weight:800; color:#fff; letter-spacing:.5px; }
  .match-card .top .lbl i { color:#fbbf24; margin-right:6px; }
  .match-card .top .stat { font-size:11px; color:#34d399; font-weight:800; }
  .match-card .top .stat .dot { width:7px; height:7px; border-radius:50%; background:#34d399; display:inline-block; margin-right:4px; animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
  .match-pair { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
  .mp-side { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; text-align:center; transition:.3s; }
  .mp-side:hover { border-color:#fbbf24; }
  .mp-side .av { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#fff; margin:0 auto 8px; }
  .mp-side.candidate .av { background:linear-gradient(135deg,#3b82f6,#1e40af); }
  .mp-side.company .av { background:linear-gradient(135deg,#fbbf24,#eab308); color:#0f172a; }
  .mp-side .nm { color:#fff; font-weight:800; font-size:13px; margin-bottom:2px; }
  .mp-side .role { color:rgba(255,255,255,.65); font-size:11px; letter-spacing:.5px; text-transform:uppercase; font-weight:700; }
  .mp-side .tags { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
  .mp-side .tag { background:rgba(251,191,36,.15); color:#fbbf24; font-size:9px; font-weight:800; padding:2px 7px; border-radius:8px; letter-spacing:.4px; }
  .mp-link { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#eab308); display:flex; align-items:center; justify-content:center; color:#0f172a; font-size:14px; font-weight:800; box-shadow:0 6px 16px rgba(251,191,36,.4); animation:heartbeat 2s infinite; }
  @keyframes heartbeat { 0%,40%,100%{transform:scale(1);} 20%{transform:scale(1.12);} }
  .match-score { margin-top:16px; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px; }
  .match-score .ic { color:#34d399; font-size:16px; }
  .match-score .lbl { flex:1; font-size:12px; color:#fff; font-weight:700; }
  .match-score .pct { color:#34d399; font-weight:800; font-size:16px; }

  /* STATS RIBBON */
  .rc-ribbon { background:linear-gradient(135deg,#fbbf24,#eab308); color:#0f172a; padding:30px 0; }
  .rc-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(15,23,42,.12); }
  .rc-ribbon .item:last-child { border-right:0; }
  .rc-ribbon .big { font-size:30px; font-weight:800; line-height:1; }
  .rc-ribbon .lbl { font-size:12px; margin-top:4px; font-weight:700; letter-spacing:.3px; }

  /* ABOUT — two photos */
  .rc-about { padding:80px 0; position:relative; overflow:hidden; background:#fff; }
  .rc-about:before { content:""; position:absolute; top:-80px; right:-80px; width:260px; height:260px; background:radial-gradient(circle,#fbbf24 0%,transparent 70%); opacity:.15; border-radius:50%; }
  .rc-about .photos { position:relative; padding:0 20px 30px; }
  .rc-about .photos .p1, .rc-about .photos .p2 { border-radius:18px; overflow:hidden; box-shadow:0 20px 40px rgba(15,23,42,.18); }
  .rc-about .photos .p1 img, .rc-about .photos .p2 img { width:100%; display:block; }
  .rc-about .photos .p1 { position:relative; z-index:2; max-width:78%; margin-right:auto; }
  .rc-about .photos .p2 { position:absolute; right:0; bottom:0; width:58%; border:6px solid #fff; z-index:3; }
  .rc-about .photos .dot-grid { position:absolute; bottom:-20px; left:-12px; width:90px; height:90px; background-image:radial-gradient(#fbbf24 1.5px,transparent 1.5px); background-size:12px 12px; z-index:1; opacity:.4; }
  .rc-about .info h5 { color:#ca8a04; font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:12px; margin-bottom:10px; }
  .rc-about .info h2 { font-weight:800; color:#0f172a; font-size:32px; line-height:1.2; margin-bottom:16px; letter-spacing:-.5px; }
  .rc-about .info p { color:#475569; font-size:15px; line-height:1.8; margin-bottom:18px; }
  .rc-about .info .pull-quote { background:linear-gradient(135deg,#fffbeb,#fef3c7); border-left:4px solid #eab308; padding:18px 22px; border-radius:12px; color:#78350f; font-weight:700; font-size:15px; line-height:1.6; }
  .rc-about .info .pull-quote i { color:#eab308; margin-right:8px; }

  /* SERVICES */
  .srv-card { background:#fff; border-radius:18px; border:1px solid #eef0f5; padding:30px 26px; text-align:center; margin-bottom:24px; transition:.35s; position:relative; overflow:hidden; height:calc(100% - 24px); box-shadow:0 4px 18px rgba(0,0,0,.04); }
  .srv-card:before { content:""; position:absolute; top:-60px; right:-60px; width:140px; height:140px; background:radial-gradient(circle,#fbbf24 0%,transparent 70%); opacity:0; transition:.4s; border-radius:50%; }
  .srv-card:hover { transform:translateY(-8px); border-color:#fbbf24; box-shadow:0 28px 56px rgba(251,191,36,.18); }
  .srv-card:hover:before { opacity:.32; transform:scale(1.6); }
  .srv-card .ic-wrap { width:92px; height:92px; border-radius:22px; background:linear-gradient(135deg,#fef3c7,#fde68a); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; transition:.3s; position:relative; z-index:2; }
  .srv-card:hover .ic-wrap { transform:scale(1.06) rotate(-3deg); background:linear-gradient(135deg,#fbbf24,#eab308); }
  .srv-card .ic-wrap img { max-width:48px; max-height:48px; object-fit:contain; transition:.3s; }
  .srv-card h3 { font-size:18px; font-weight:800; color:#0f172a; margin:0 0 14px; position:relative; z-index:2; }
  .srv-card ul { list-style:none; padding:0; margin:0 0 16px; text-align:left; position:relative; z-index:2; }
  .srv-card ul li { padding:5px 0; font-size:13px; color:#475569; display:flex; align-items:center; gap:8px; }
  .srv-card ul li i { color:#eab308; font-size:9px; }
  .srv-card .enq { display:inline-flex; align-items:center; gap:6px; color:#ca8a04; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.5px; text-decoration:none; position:relative; z-index:2; transition:.3s; }
  .srv-card .enq:hover { color:#0f172a; gap:10px; text-decoration:none; }

  /* INDUSTRIES */
  .rc-industries { background:#fefce8; padding:70px 0; }
  .ind-tile { background:#fff; border:1px solid #fde68a; border-radius:18px; padding:24px 14px; text-align:center; transition:.3s; margin-bottom:24px; cursor:pointer; position:relative; overflow:hidden; }
  .ind-tile:hover { transform:translateY(-5px); border-color:#fbbf24; box-shadow:0 18px 36px rgba(251,191,36,.22); background:linear-gradient(135deg,#fffbeb,#fef3c7); }
  .ind-tile .ic-wrap { width:72px; height:72px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; background:#fef3c7; border-radius:50%; transition:.3s; }
  .ind-tile:hover .ic-wrap { background:linear-gradient(135deg,#fbbf24,#eab308); }
  .ind-tile .ic-wrap img { max-width:40px; max-height:40px; object-fit:contain; }
  .ind-tile h5 { font-size:13px; font-weight:800; color:#0f172a; margin:0; letter-spacing:.3px; }

  /* HIRING PROCESS */
  .rc-process { background:#0f172a; color:#fff; padding:80px 0; position:relative; overflow:hidden; }
  .rc-process:before { content:""; position:absolute; top:-50%; right:-10%; width:520px; height:520px; background:radial-gradient(circle,#fbbf24 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .rc-process .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .rc-process .head .eyebrow { color:#fbbf24; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .rc-process .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .proc-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:1100px; margin:0 auto; position:relative; z-index:2; }
  @media(max-width:991px){ .proc-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .proc-grid { grid-template-columns:repeat(2,1fr); } }
  .proc-step { background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01)); border:1px solid rgba(251,191,36,.28); border-radius:16px; padding:22px 14px; text-align:center; transition:.3s; position:relative; }
  .proc-step:hover { transform:translateY(-4px); border-color:#fbbf24; box-shadow:0 16px 32px rgba(251,191,36,.2); }
  .proc-step .num { position:absolute; top:-12px; right:12px; background:linear-gradient(135deg,#fbbf24,#eab308); color:#0f172a; font-weight:800; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; box-shadow:0 6px 14px rgba(251,191,36,.35); }
  .proc-step .ic { font-size:30px; color:#fbbf24; margin:10px 0; }
  .proc-step h5 { color:#fff; font-weight:800; font-size:14px; margin:0 0 3px; }
  .proc-step p { color:rgba(255,255,255,.7); font-size:11px; margin:0; line-height:1.4; }

  /* BENEFITS tiles */
  .bnft-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .bnft-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; transition:transform .5s; }
  .bnft-tile .bg.b1 { background:linear-gradient(135deg,#eab308,#a16207); }
  .bnft-tile .bg.b2 { background:linear-gradient(135deg,#3b82f6,#1e40af); }
  .bnft-tile .bg.b3 { background:linear-gradient(135deg,#10b981,#047857); }
  .bnft-tile .bg.b4 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .bnft-tile .bg.b5 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .bnft-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#b91c1c); }
  .bnft-tile .cap { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .bnft-tile .cap h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .bnft-tile .cap small { opacity:.85; font-size:12px; }
  .bnft-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(234,179,8,.3); }
  .bnft-tile:hover .bg { transform:scale(1.08); }

  /* CLIENTS CAROUSEL */
  .rc-clients { background:#fff; padding:70px 0; }
  .client-logo { background:#fff; border:1px solid #eef0f5; border-radius:14px; padding:16px; min-height:100px; display:flex; align-items:center; justify-content:center; transition:.3s; margin:0 8px; }
  .client-logo:hover { border-color:#fbbf24; transform:translateY(-4px); box-shadow:0 14px 28px rgba(251,191,36,.22); }
  .client-logo img { max-height:60px; max-width:100%; object-fit:contain; filter:grayscale(30%); transition:.3s; }
  .client-logo:hover img { filter:grayscale(0%); }

  /* CTA */
  .rc-cta { background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .rc-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#fbbf24 0%,transparent 70%); opacity:.28; border-radius:50%; }
  .rc-cta:after { content:""; position:absolute; bottom:-100px; right:-100px; width:350px; height:350px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .rc-cta .container { position:relative; z-index:2; }
  .rc-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .rc-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .rc-cta .btn-gold { background:linear-gradient(135deg,#fbbf24,#eab308); color:#0f172a; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(251,191,36,.35); text-decoration:none; }
  .rc-cta .btn-gold:hover { transform:translateY(-2px); color:#0f172a; text-decoration:none; }
  .rc-cta .btn-ghost { border:2px solid #fff; color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; text-decoration:none; }
  .rc-cta .btn-ghost:hover { background:#fff; color:#0f172a; text-decoration:none; }

  @media(max-width:991px){ .rc-hero h1 { font-size:34px; } .rc-about .photos { margin-top:30px; } .match-card { margin-top:30px; } }

/* ===== PAGE: Digital Marketing (dm-) ===== */
.dm-section { padding:70px 0; }
  .dm-section-title { text-align:center; margin-bottom:45px; }
  .dm-section-title .eyebrow { color:var(--primary,#2563EB); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .dm-section-title h2 { font-weight:800; margin-top:8px; }
  .dm-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .dm-hero { padding:60px 0 40px; background:#0B1120; position:relative; overflow:hidden; }
  .dm-hero .eyebrow { color:#f59e0b; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .dm-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; color:#fff; }
  .dm-hero p { color:#b0b8cc; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .dm-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* 3D floating scene */
  .dm-scene { perspective:900px; display:flex; align-items:center; justify-content:center; min-height:380px; }
  .dm-scene__inner {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%;
    transform:rotateX(8deg) rotateY(-12deg); transform-style:preserve-3d;
  }
  .dm-ch {
    background:rgba(255,255,255,.06); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1); border-radius:16px;
    padding:22px 14px; text-align:center; transition:.4s ease;
    transform:translateZ(0); position:relative;
  }
  .dm-ch:hover { transform:translateZ(30px) scale(1.06); }
  .dm-ch__icon { font-size:30px; margin-bottom:8px; display:block; }
  .dm-ch__label { color:#c8cfe0; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

  .dm-ch--seo { border-color:rgba(37,99,235,.3); } .dm-ch--seo .dm-ch__icon { color:#2563EB; }
  .dm-ch--smo { border-color:rgba(236,72,153,.3); } .dm-ch--smo .dm-ch__icon { color:#ec4899; }
  .dm-ch--ppc { border-color:rgba(249,115,22,.3); } .dm-ch--ppc .dm-ch__icon { color:#f97316; }
  .dm-ch--email { border-color:rgba(99,102,241,.3); } .dm-ch--email .dm-ch__icon { color:#6366f1; }
  .dm-ch--strategy { border-color:rgba(245,158,11,.35); transform:translateZ(40px) scale(1.08); } .dm-ch--strategy .dm-ch__icon { color:#f59e0b; }
  .dm-ch--sms { border-color:rgba(6,182,212,.3); } .dm-ch--sms .dm-ch__icon { color:#06b6d4; }
  .dm-ch--content { border-color:rgba(168,85,247,.3); } .dm-ch--content .dm-ch__icon { color:#a855f7; }
  .dm-ch--whatsapp { border-color:rgba(37,211,102,.3); } .dm-ch--whatsapp .dm-ch__icon { color:#25d366; }
  .dm-ch--inbound { border-color:rgba(234,179,8,.3); } .dm-ch--inbound .dm-ch__icon { color:#eab308; }

  @keyframes dm-float {
    0%,100% { transform:translateZ(var(--tz,0)) translateY(0); }
    50% { transform:translateZ(var(--tz,0)) translateY(-10px); }
  }
  .dm-ch:nth-child(1){ animation:dm-float 4.2s ease-in-out infinite; --tz:10px; }
  .dm-ch:nth-child(2){ animation:dm-float 3.8s ease-in-out .3s infinite; --tz:15px; }
  .dm-ch:nth-child(3){ animation:dm-float 4.5s ease-in-out .6s infinite; --tz:8px; }
  .dm-ch:nth-child(4){ animation:dm-float 3.6s ease-in-out .9s infinite; --tz:12px; }
  .dm-ch:nth-child(5){ animation:dm-float 5s ease-in-out .2s infinite; --tz:40px; }
  .dm-ch:nth-child(6){ animation:dm-float 4s ease-in-out .7s infinite; --tz:14px; }
  .dm-ch:nth-child(7){ animation:dm-float 3.9s ease-in-out .5s infinite; --tz:11px; }
  .dm-ch:nth-child(8){ animation:dm-float 4.3s ease-in-out .4s infinite; --tz:9px; }
  .dm-ch:nth-child(9){ animation:dm-float 4.1s ease-in-out .8s infinite; --tz:13px; }

  /* Stats */
  .dm-stats { background:linear-gradient(135deg,var(--primary,#2563EB),var(--primary-dark,#1D4ED8)); color:#fff; padding:40px 0; }
  .dm-stat { text-align:center; padding:10px; }
  .dm-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .dm-stat .num.plus:after { content:"+"; }
  .dm-stat .num.pct:after { content:"%"; }
  .dm-stat .num.x:after { content:"×"; }
  .dm-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Service cards — accent-top */
  .dm-card {
    position:relative; background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:32px 24px; height:100%; margin-bottom:24px; transition:.35s; overflow:hidden;
  }
  .dm-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:4px;
    background:var(--primary,#2563EB); transform:scaleX(0); transform-origin:left;
    transition:transform .4s ease; border-radius:14px 14px 0 0;
  }
  .dm-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(37,99,235,.12); }
  .dm-card:hover::before { transform:scaleX(1); }
  .dm-card__icon {
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#eef4ff; color:var(--primary,#2563EB); font-size:22px; margin-bottom:18px; transition:.3s;
  }
  .dm-card:hover .dm-card__icon { background:var(--primary,#2563EB); color:#fff; }
  .dm-card h5 { font-size:16px; font-weight:700; color:#111; margin:0 0 8px; }
  .dm-card h5 a { color:#111; text-decoration:none; transition:.2s; }
  .dm-card h5 a:hover { color:var(--primary,#2563EB); }
  .dm-card p { color:#666; font-size:13px; line-height:1.65; margin:0 0 14px; }
  .dm-card .link { font-size:13px; font-weight:700; color:var(--primary,#2563EB); text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:.2s; }
  .dm-card .link:hover { gap:10px; }
  .dm-card .link i { font-size:11px; }

  /* Process timeline */
  .dm-process { background:#f7f9fc; }
  .dm-timeline {
    display:flex; justify-content:space-between; position:relative; margin-top:20px; padding:0 20px;
  }
  .dm-timeline::before {
    content:''; position:absolute; top:30px; left:60px; right:60px; height:3px;
    background:linear-gradient(90deg,var(--primary,#2563EB),var(--primary-dark,#1D4ED8));
    border-radius:3px; z-index:0;
  }
  .dm-tl-step { flex:1; text-align:center; position:relative; z-index:1; }
  .dm-tl-node {
    width:60px; height:60px; border-radius:50%; margin:0 auto 16px;
    background:#fff; border:3px solid var(--primary,#2563EB);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:var(--primary,#2563EB); position:relative;
    box-shadow:0 6px 18px rgba(37,99,235,.15); transition:.3s;
  }
  .dm-tl-step:hover .dm-tl-node { background:var(--primary,#2563EB); color:#fff; transform:scale(1.1); }
  .dm-tl-node .badge-num {
    position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
    background:var(--primary-dark,#1D4ED8); color:#fff; font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center; border:2px solid #f7f9fc;
  }
  .dm-tl-body h5 { font-size:14px; font-weight:700; color:#111; margin:0 0 4px; }
  .dm-tl-body p { color:#666; font-size:12px; line-height:1.5; margin:0; padding:0 4px; }

  /* Why us */
  .dm-why { background:#101729; color:#fff; padding:70px 0; }
  .dm-why .dm-section-title h2 { color:#fff; }
  .dm-why .dm-section-title .eyebrow { color:#f59e0b; }
  .dm-why .dm-section-title p { color:#aab0c4; }
  .dm-why-card {
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding:28px 22px; text-align:center;
    transition:.3s; margin-bottom:24px; height:100%;
  }
  .dm-why-card:hover { background:rgba(37,99,235,.15); border-color:var(--primary,#2563EB); transform:translateY(-4px); }
  .dm-why-card i { font-size:28px; color:var(--primary,#2563EB); margin-bottom:14px; display:block; }
  .dm-why-card h5 { color:#fff; font-size:15px; font-weight:700; margin:0 0 8px; }
  .dm-why-card p { color:#94a3b8; font-size:13px; line-height:1.6; margin:0; }

  /* CTA */
  .dm-cta { background:linear-gradient(135deg,#0a0e1a,#2e1a05); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .dm-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#f59e0b 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .dm-cta .container { position:relative; z-index:2; }
  .dm-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .dm-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .dm-cta .btn-w { background:linear-gradient(135deg,#f59e0b,#d97706); color:#0a0a23; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(245,158,11,.35); border:none; }
  .dm-cta .btn-w:hover { transform:translateY(-2px); color:#0a0a23; text-decoration:none; }
  .dm-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .dm-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){
    .dm-hero h1 { font-size:32px; }
    .dm-scene { margin-top:36px; min-height:auto; }
    .dm-scene__inner { transform:rotateX(4deg) rotateY(-6deg); gap:10px; }
    .dm-ch { padding:16px 10px; } .dm-ch__icon { font-size:24px; }
  }
  @media (max-width:767px){
    .dm-timeline { flex-direction:column; align-items:flex-start; gap:24px; padding:0; }
    .dm-timeline::before { top:0; bottom:0; left:30px; right:auto; width:3px; height:100%; }
    .dm-tl-step { display:flex; align-items:flex-start; gap:16px; text-align:left; }
    .dm-tl-node { margin:0; flex:0 0 60px; }
    .dm-tl-body { padding-top:6px; }
  }

/* ===== PAGE: Website Designing (wd-) ===== */
.wd-section { padding:70px 0; }
  .wd-section-title { text-align:center; margin-bottom:45px; }
  .wd-section-title .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px;
  }
  .wd-section-title h2 { font-weight:800; margin-top:8px; }
  .wd-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .wd-hero { padding:70px 0 50px; background:#0B1120; position:relative; overflow:hidden; }
  .wd-hero::before {
    content:''; position:absolute; top:-120px; left:-120px;
    width:450px; height:450px; border-radius:50%;
    background:radial-gradient(circle, rgba(46,108,184,.25) 0%, transparent 70%);
  }
  .wd-hero::after {
    content:''; position:absolute; bottom:-80px; right:-80px;
    width:350px; height:350px; border-radius:50%;
    background:radial-gradient(circle, rgba(74,138,210,.2) 0%, transparent 70%);
  }
  .wd-hero .container { position:relative; z-index:2; }
  .wd-hero .eyebrow {
    color:#4a8ad2; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px; margin-bottom:12px;
  }
  .wd-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; color:#fff; }
  .wd-hero p { color:rgba(255,255,255,.75); font-size:16px; line-height:1.8; margin:0 0 22px; }
  .wd-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* 3D Tech Scene */
  .wd-scene {
    perspective:900px;
    display:flex; align-items:center; justify-content:center;
    min-height:420px; position:relative;
  }
  .wd-scene__inner {
    transform:rotateX(8deg) rotateY(-12deg);
    transform-style:preserve-3d;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:18px; padding:10px;
  }
  .wd-tech {
    width:110px; height:110px; border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; color:#fff; font-weight:700; font-size:12px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
    transition:transform .4s, box-shadow .4s;
    animation:wd-float 4s ease-in-out infinite;
    cursor:default;
  }
  .wd-tech:nth-child(2) { animation-delay:-.5s; }
  .wd-tech:nth-child(3) { animation-delay:-1s; }
  .wd-tech:nth-child(4) { animation-delay:-1.5s; }
  .wd-tech:nth-child(5) { animation-delay:-2s; transform:translateZ(30px); }
  .wd-tech:nth-child(6) { animation-delay:-2.5s; }
  .wd-tech:nth-child(7) { animation-delay:-3s; }
  .wd-tech:nth-child(8) { animation-delay:-3.5s; }
  .wd-tech:nth-child(9) { animation-delay:-.8s; }
  .wd-tech:hover {
    transform:translateZ(40px) scale(1.1);
    box-shadow:0 20px 50px rgba(46,108,184,.5), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .wd-tech i { font-size:32px; }
  .wd-tech span { letter-spacing:.5px; }
  .wd-tech--html5   { border-color:rgba(227,79,38,.4); }
  .wd-tech--html5 i { color:#E34F26; }
  .wd-tech--css3    { border-color:rgba(38,77,228,.4); }
  .wd-tech--css3 i  { color:#264DE4; }
  .wd-tech--js      { border-color:rgba(240,219,79,.4); }
  .wd-tech--js i    { color:#F0DB4F; }
  .wd-tech--react   { border-color:rgba(97,218,251,.4); }
  .wd-tech--react i { color:#61DAFB; }
  .wd-tech--wp      { border-color:rgba(33,115,187,.4); }
  .wd-tech--wp i    { color:#21759B; }
  .wd-tech--php     { border-color:rgba(119,123,180,.4); }
  .wd-tech--php i   { color:#777BB4; }
  .wd-tech--sass    { border-color:rgba(205,103,153,.4); }
  .wd-tech--sass i  { color:#CD6799; }
  .wd-tech--node    { border-color:rgba(104,159,56,.4); }
  .wd-tech--node i  { color:#689F38; }
  .wd-tech--figma   { border-color:rgba(162,89,255,.4); }
  .wd-tech--figma i { color:#A259FF; }
  @keyframes wd-float {
    0%,100% { transform:translateZ(0) translateY(0); }
    50%     { transform:translateZ(15px) translateY(-8px); }
  }
  .wd-tech:nth-child(5) {
    animation-name:wd-float-center;
  }
  @keyframes wd-float-center {
    0%,100% { transform:translateZ(30px) translateY(0); }
    50%     { transform:translateZ(45px) translateY(-10px); }
  }

  /* Marquee logos */
  .wd-trust {
    background:#fff; padding:28px 0; border-top:1px solid #eef0f5; border-bottom:1px solid #eef0f5;
  }
  .wd-trust .label {
    text-align:center; color:#888; font-size:12px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; margin-bottom:14px;
  }

  /* Showcase Grid */
  .wd-showcase { background:#fff; }
  .wd-card {
    position:relative; border-radius:14px; overflow:hidden;
    background:#eaf2fb;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
    transition:.35s; margin-bottom:24px;
    aspect-ratio: 4/3;
  }
  .wd-card img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s ease;
  }
  .wd-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .wd-card:hover img { transform:scale(1.08); }
  .wd-card .hover {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; color:#fff; opacity:0; transition:opacity .3s;
  }
  .wd-card:hover .hover { opacity:1; }
  .wd-card .hover .cat {
    display:inline-block; background:#2e6cb8; color:#fff; font-size:10px;
    font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content;
  }
  .wd-card .hover h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .wd-card .hover a.live {
    color:#fff; font-size:13px; font-weight:600; text-decoration:underline; margin-top:4px;
  }

  /* Capabilities */
  .wd-caps { background:#0a0a23; color:#fff; padding:70px 0; }
  .wd-caps .wd-section-title h2 { color:#fff; }
  .wd-caps .wd-section-title .eyebrow { color:#4a8ad2; }
  .wd-caps .wd-section-title p { color:#aab0c4; }
  .cap-item {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:22px; height:100%; text-align:center;
    transition:.3s;
  }
  .cap-item:hover { background:rgba(46,108,184,.15); border-color:#2e6cb8; transform:translateY(-4px); }
  .cap-item .ic {
    width:54px; height:54px; margin:0 auto 12px; border-radius:12px;
    background:#2e6cb8; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:22px;
  }
  .cap-item h5 { color:#fff; font-size:15px; font-weight:700; margin:0 0 6px; }
  .cap-item p { color:#aab0c4; font-size:13px; line-height:1.6; margin:0; }

  /* Process — timeline */
  .wd-process { background:#f7f9fc; }
  .wd-timeline { position:relative; display:flex; justify-content:center; gap:0; margin:0 auto; max-width:860px; }
  .wd-timeline::before {
    content:''; position:absolute; top:36px; left:60px; right:60px;
    height:3px; background:linear-gradient(90deg,#c8d9ed,#2e6cb8,#c8d9ed);
    border-radius:3px; z-index:0;
  }
  .wd-tl-step {
    flex:1; display:flex; flex-direction:column; align-items:center;
    text-align:center; position:relative; z-index:1; padding:0 10px;
  }
  .wd-tl-node {
    width:72px; height:72px; border-radius:50%;
    background:#fff; border:3px solid #2e6cb8;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#2e6cb8;
    box-shadow:0 8px 24px rgba(46,108,184,.18);
    transition:.4s; position:relative;
  }
  .wd-tl-step:hover .wd-tl-node {
    background:#2e6cb8; color:#fff;
    transform:scale(1.12);
    box-shadow:0 12px 32px rgba(46,108,184,.35);
  }
  .wd-tl-node .wd-tl-num {
    position:absolute; top:-8px; right:-8px;
    width:26px; height:26px; border-radius:50%;
    background:#0B1120; color:#fff;
    font-size:12px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
  }
  .wd-tl-body { margin-top:18px; }
  .wd-tl-body h5 { font-size:15px; font-weight:800; color:#111; margin:0 0 6px; }
  .wd-tl-body p { color:#666; font-size:13px; line-height:1.55; margin:0; max-width:170px; }

  /* CTA */
  .wd-cta { background:linear-gradient(135deg,#0a0e1a,#051a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .wd-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#06b6d4 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .wd-cta .container { position:relative; z-index:2; }
  .wd-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .wd-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .wd-cta .btn-light-outline { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(6,182,212,.35); border:none; }
  .wd-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .wd-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .wd-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .wd-hero h1 { font-size:32px; }
    .wd-scene { min-height:340px; margin-top:30px; }
  }
  @media (max-width: 767px){
    .wd-scene__inner {
      grid-template-columns:repeat(3, 1fr); gap:12px;
    }
    .wd-tech { width:90px; height:90px; }
    .wd-tech i { font-size:26px; }
    .wd-tech span { font-size:10px; }
    .wd-timeline { flex-direction:column; gap:32px; align-items:flex-start; padding-left:36px; }
    .wd-timeline::before {
      top:0; bottom:0; left:36px; right:auto;
      width:3px; height:100%;
    }
    .wd-tl-step { flex-direction:row; text-align:left; gap:18px; padding:0; }
    .wd-tl-node { min-width:60px; width:60px; height:60px; font-size:22px; }
    .wd-tl-body { margin-top:0; }
    .wd-tl-body p { max-width:none; }
  }

/* ===== PAGE: Website Development (wv-) ===== */
.wv-section { padding:70px 0; }
  .wv-section-title { text-align:center; margin-bottom:45px; }
  .wv-section-title .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px;
  }
  .wv-section-title h2 { font-weight:800; margin-top:8px; }
  .wv-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .wv-hero { padding:70px 0 50px; background:#0B1120; position:relative; overflow:hidden; }
  .wv-hero::before {
    content:''; position:absolute; top:-100px; right:-100px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(16,185,129,.2) 0%, transparent 70%);
  }
  .wv-hero::after {
    content:''; position:absolute; bottom:-80px; left:-80px;
    width:350px; height:350px; border-radius:50%;
    background:radial-gradient(circle, rgba(46,108,184,.2) 0%, transparent 70%);
  }
  .wv-hero .container { position:relative; z-index:2; }
  .wv-hero .eyebrow {
    color:#10b981; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px; margin-bottom:12px;
  }
  .wv-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; color:#fff; }
  .wv-hero p { color:rgba(255,255,255,.75); font-size:16px; line-height:1.8; margin:0 0 22px; }
  .wv-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* 3D Dev Scene */
  .wv-scene {
    perspective:900px;
    display:flex; align-items:center; justify-content:center;
    min-height:420px; position:relative;
  }
  .wv-scene__inner {
    transform:rotateX(8deg) rotateY(-12deg);
    transform-style:preserve-3d;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:18px; padding:10px;
  }
  .wv-dev {
    width:110px; height:110px; border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; color:#fff; font-weight:700; font-size:12px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
    transition:transform .4s, box-shadow .4s;
    animation:wv-float 4s ease-in-out infinite;
    cursor:default;
  }
  .wv-dev:nth-child(2) { animation-delay:-.6s; }
  .wv-dev:nth-child(3) { animation-delay:-1.2s; }
  .wv-dev:nth-child(4) { animation-delay:-1.8s; }
  .wv-dev:nth-child(5) { animation-delay:-2s; transform:translateZ(30px); }
  .wv-dev:nth-child(6) { animation-delay:-2.6s; }
  .wv-dev:nth-child(7) { animation-delay:-3s; }
  .wv-dev:nth-child(8) { animation-delay:-3.4s; }
  .wv-dev:nth-child(9) { animation-delay:-.9s; }
  .wv-dev:hover {
    transform:translateZ(40px) scale(1.1);
    box-shadow:0 20px 50px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .wv-dev i { font-size:32px; }
  .wv-dev span { letter-spacing:.5px; }
  .wv-dev--php    { border-color:rgba(119,123,180,.4); }
  .wv-dev--php i  { color:#777BB4; }
  .wv-dev--node   { border-color:rgba(104,159,56,.4); }
  .wv-dev--node i { color:#689F38; }
  .wv-dev--react  { border-color:rgba(97,218,251,.4); }
  .wv-dev--react i{ color:#61DAFB; }
  .wv-dev--wp     { border-color:rgba(33,115,187,.4); }
  .wv-dev--wp i   { color:#21759B; }
  .wv-dev--db     { border-color:rgba(16,185,129,.4); }
  .wv-dev--db i   { color:#10B981; }
  .wv-dev--py     { border-color:rgba(55,118,171,.4); }
  .wv-dev--py i   { color:#3776AB; }
  .wv-dev--git    { border-color:rgba(240,80,51,.4); }
  .wv-dev--git i  { color:#F05033; }
  .wv-dev--server { border-color:rgba(99,102,241,.4); }
  .wv-dev--server i { color:#6366F1; }
  .wv-dev--term   { border-color:rgba(34,197,94,.4); }
  .wv-dev--term i { color:#22C55E; }
  @keyframes wv-float {
    0%,100% { transform:translateZ(0) translateY(0); }
    50%     { transform:translateZ(15px) translateY(-8px); }
  }
  .wv-dev:nth-child(5) { animation-name:wv-float-center; }
  @keyframes wv-float-center {
    0%,100% { transform:translateZ(30px) translateY(0); }
    50%     { transform:translateZ(45px) translateY(-10px); }
  }

  /* Stats band */
  .wv-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .wv-stat { text-align:center; padding:10px; }
  .wv-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .wv-stat .num.plus:after { content:"+"; }
  .wv-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Showcase */
  .wv-card {
    position:relative; border-radius:14px; overflow:hidden;
    background:#eaf2fb; box-shadow:0 4px 16px rgba(0,0,0,.06);
    transition:.35s; margin-bottom:24px;
    aspect-ratio: 4/3;
  }
  .wv-card img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s ease;
  }
  .wv-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .wv-card:hover img { transform:scale(1.08); }
  .wv-card .hover {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; color:#fff; opacity:0; transition:opacity .3s;
  }
  .wv-card:hover .hover { opacity:1; }
  .wv-card .cat {
    display:inline-block; background:#2e6cb8; color:#fff; font-size:10px;
    font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content;
  }
  .wv-card .hover h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .wv-card .hover a.live {
    color:#fff; font-size:13px; font-weight:600; text-decoration:underline;
  }

  /* What we build (icon-image cards) */
  .wv-types { background:#fff; }
  .type-card {
    background:#fff; border:1px solid #eef0f5; border-radius:14px;
    overflow:hidden; height:100%; margin-bottom:24px; transition:.3s;
  }
  .type-card:hover { transform:translateY(-6px); border-color:#2e6cb8; box-shadow:0 18px 38px rgba(46,108,184,.16); }
  .type-card .tc-thumb {
    height:170px; background:#eaf2fb; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .type-card .tc-thumb i {
    font-size:54px; color:#2e6cb8;
    transition:transform .4s;
  }
  .type-card:hover .tc-thumb i { transform:scale(1.15); }
  .type-card .tc-body { padding:20px 22px; }
  .type-card .tc-body h5 { font-size:17px; font-weight:700; color:#111; margin:0 0 6px; }
  .type-card .tc-body p { color:#666; font-size:13px; line-height:1.6; margin:0; }

  /* Tech stack */
  .wv-tech { background:#0a0a23; color:#fff; padding:70px 0; }
  .wv-tech .wv-section-title h2 { color:#fff; }
  .wv-tech .wv-section-title .eyebrow { color:#4a8ad2; }
  .wv-tech .wv-section-title p { color:#aab0c4; }
  .tech-tile {
    background:#fff; border:1px solid rgba(255,255,255,.15);
    border-radius:14px; padding:20px; text-align:center;
    height:130px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px;
    transition:.3s;
  }
  .tech-tile:hover { background:#fff; border-color:#2e6cb8; transform:translateY(-4px); box-shadow:0 12px 28px rgba(46,108,184,.25); }
  .tech-tile img { max-height:50px; max-width:80%; }
  .tech-tile span { color:#333; font-size:12px; font-weight:600; letter-spacing:.5px; }

  /* Process — timeline */
  .wv-process { background:#f7f9fc; }
  .wv-timeline { position:relative; display:flex; justify-content:space-between; padding:0; margin:0 auto; max-width:960px; }
  .wv-timeline::before {
    content:''; position:absolute; top:36px; left:40px; right:40px;
    height:3px; background:linear-gradient(90deg,#c8d9ed,#2e6cb8,#c8d9ed);
    border-radius:3px; z-index:0;
  }
  .wv-tl-step {
    flex:1; display:flex; flex-direction:column; align-items:center;
    text-align:center; position:relative; z-index:1; padding:0 8px;
  }
  .wv-tl-node {
    width:72px; height:72px; border-radius:50%;
    background:#fff; border:3px solid #2e6cb8;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#2e6cb8;
    box-shadow:0 8px 24px rgba(46,108,184,.18);
    transition:.4s; position:relative;
  }
  .wv-tl-step:hover .wv-tl-node {
    background:#2e6cb8; color:#fff;
    transform:scale(1.12);
    box-shadow:0 12px 32px rgba(46,108,184,.35);
  }
  .wv-tl-node .wv-tl-num {
    position:absolute; top:-8px; right:-8px;
    width:26px; height:26px; border-radius:50%;
    background:#0B1120; color:#fff;
    font-size:12px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
  }
  .wv-tl-body { margin-top:18px; }
  .wv-tl-body h5 { font-size:15px; font-weight:800; color:#111; margin:0 0 6px; }
  .wv-tl-body p { color:#666; font-size:13px; line-height:1.55; margin:0; max-width:160px; }

  /* CTA */
  .wv-cta { background:linear-gradient(135deg,#0a0e1a,#0a1a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .wv-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .wv-cta .container { position:relative; z-index:2; }
  .wv-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .wv-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .wv-cta .btn-light-outline { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(59,130,246,.35); border:none; }
  .wv-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .wv-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .wv-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .wv-hero h1 { font-size:32px; }
    .wv-scene { min-height:340px; margin-top:30px; }
  }
  @media (max-width: 767px){
    .wv-scene__inner { grid-template-columns:repeat(3, 1fr); gap:12px; }
    .wv-dev { width:90px; height:90px; }
    .wv-dev i { font-size:26px; }
    .wv-dev span { font-size:10px; }
    .wv-stat .num { font-size:28px; }
    .wv-timeline { flex-direction:column; gap:32px; align-items:flex-start; padding-left:36px; }
    .wv-timeline::before {
      top:0; bottom:0; left:36px; right:auto;
      width:3px; height:100%;
    }
    .wv-tl-step { flex-direction:row; text-align:left; gap:18px; padding:0; }
    .wv-tl-node { min-width:60px; width:60px; height:60px; font-size:22px; }
    .wv-tl-body { margin-top:0; }
    .wv-tl-body p { max-width:none; }
  }

/* ===== PAGE: Mobile App Development (ma-) ===== */
.ma-section { padding:70px 0; }
  .ma-section-title { text-align:center; margin-bottom:45px; }
  .ma-section-title .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px;
  }
  .ma-section-title h2 { font-weight:800; margin-top:8px; }
  .ma-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .ma-hero { padding:60px 0 40px; background:#f7f9fc; position:relative; overflow:hidden; }
  .ma-hero .eyebrow {
    color:#2e6cb8; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; font-size:13px; margin-bottom:12px;
  }
  .ma-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; }
  .ma-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .ma-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .ma-hero .store-badges { margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .ma-hero .store-badges .store {
    display:inline-flex; align-items:center; gap:10px;
    background:#0a0a23; color:#fff; padding:10px 18px; border-radius:10px;
    text-decoration:none; transition:.3s;
  }
  .ma-hero .store-badges .store:hover { background:#2e6cb8; color:#fff; }
  .ma-hero .store-badges .store i { font-size:26px; }
  .ma-hero .store-badges .store small { display:block; font-size:10px; opacity:.8; letter-spacing:1px; }
  .ma-hero .store-badges .store strong { display:block; font-size:14px; font-weight:700; }

  /* Phone mockups */
  .phones-wrap {
    position:relative; height:520px; display:flex;
    align-items:center; justify-content:center;
  }
  .phone {
    position:absolute; border-radius:36px; overflow:hidden;
    background:#0a0a23;
    width:220px; height:440px;
    border:10px solid #0a0a23;
    box-shadow:0 22px 48px rgba(10,10,35,.25);
    transition:transform .35s ease;
  }
  .phone:before {
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:60px; height:12px; background:#0a0a23;
    border-radius:0 0 12px 12px; z-index:2;
  }
  .phone img { width:100%; height:100%; object-fit:cover; display:block; }
  .phone.p1 { transform:rotate(-8deg) translate(-90px, 10px); z-index:1; }
  .phone.p2 { z-index:3; transform:translateY(-10px) scale(1.05); }
  .phone.p3 { transform:rotate(8deg) translate(90px, 10px); z-index:1; }
  .phone:hover { transform:translateY(-12px) scale(1.06); z-index:4; }
  .phone.p1:hover { transform:rotate(-8deg) translate(-90px, -2px) scale(1.04); }
  .phone.p3:hover { transform:rotate(8deg) translate(90px, -2px) scale(1.04); }

  /* ---- Mobile App hero fan ---- */
  .ma-fan { position:relative; height:520px; display:flex; align-items:center; justify-content:center; }
  .ma-phone {
    position:absolute; width:220px; height:440px; border-radius:36px;
    background:#fff; border:10px solid #0a0a23; overflow:hidden;
    box-shadow:0 22px 48px rgba(10,10,35,.25);
    transition:transform .4s ease;
    display:flex; flex-direction:column;
  }
  .ma-phone::before {
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:60px; height:12px; background:#0a0a23;
    border-radius:0 0 12px 12px; z-index:2;
  }
  .ma-phone__head {
    padding:24px 14px 10px; display:flex; align-items:center; gap:8px;
  }
  .ma-phone__logo { font-size:18px; }
  .ma-phone__logo.android { color:#3ddc84; }
  .ma-phone__logo.flutter { color:#02569b; }
  .ma-phone__logo.apple { color:#111; }
  .ma-phone__name { font-weight:700; font-size:13px; color:#111; }
  .ma-phone__screen { flex:1; overflow:hidden; background:#eaf2fb; }
  .ma-phone__screen img { width:100%; height:100%; object-fit:cover; display:block; }
  .ma-phone__nav {
    padding:10px 14px; display:flex; justify-content:space-around;
    border-top:1px solid #eef0f5; background:#fff;
  }
  .ma-phone__nav i { font-size:14px; color:#94a3b8; transition:color .2s; }
  .ma-phone:hover .ma-phone__nav i:first-child { color:var(--primary); }
  .ma-phone.left  { transform:rotate(-10deg) translate(-80px, 8px); z-index:1; }
  .ma-phone.right { transform:rotate(10deg)  translate(80px, 8px);  z-index:1; }
  .ma-phone.mid   { z-index:3; transform:translateY(-6px) scale(1.04); }
  .ma-phone:hover { z-index:4; transform:translateY(-16px) scale(1.06); }
  .ma-phone.left:hover  { transform:rotate(-10deg) translate(-80px, -4px) scale(1.05); }
  .ma-phone.right:hover { transform:rotate(10deg)  translate(80px, -4px)  scale(1.05); }

  /* Stats */
  .ma-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .ma-stat { text-align:center; padding:10px; }
  .ma-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .ma-stat .num.plus:after { content:"+"; }
  .ma-stat .num.star:after { content:" ★"; color:#ffb400; }
  .ma-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Platforms */
  .platform-card {
    background:#fff; border:1px solid #eef0f5; border-radius:16px;
    padding:36px 28px; text-align:center; height:100%;
    transition:.35s; position:relative; overflow:hidden;
  }
  .platform-card:hover {
    transform:translateY(-8px);
    border-color:#2e6cb8;
    box-shadow:0 22px 44px rgba(46,108,184,.18);
  }
  .platform-card .pic {
    width:90px; height:90px; margin:0 auto 16px; border-radius:50%;
    background:#eaf2fb; display:flex; align-items:center; justify-content:center;
    font-size:42px; color:#2e6cb8; transition:.3s;
  }
  .platform-card:hover .pic { background:#2e6cb8; color:#fff; transform:scale(1.06); }
  .platform-card h4 { font-weight:700; font-size:20px; color:#111; margin:0 0 10px; }
  .platform-card p { color:#666; font-size:14px; line-height:1.7; margin:0; }

  /* Showcase grid (app mock tiles) */
  .ma-showcase { background:#f7f9fc; }
  .app-device-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
  }
  .app-device {
    background:#0a0a23; border-radius:32px; overflow:hidden;
    padding:0; position:relative;
    box-shadow:0 16px 40px rgba(10,10,35,.22);
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .app-device:hover {
    transform:translateY(-10px);
    box-shadow:0 28px 56px rgba(10,10,35,.3);
  }
  /* Notch */
  .app-device__notch {
    width:80px; height:22px; margin:0 auto;
    background:#0a0a23; border-radius:0 0 16px 16px;
    position:relative; z-index:3;
  }
  /* Status bar */
  .app-device__status {
    display:flex; justify-content:space-between; align-items:center;
    padding:0 16px 6px; background:#0a0a23; color:rgba(255,255,255,.6);
    font-size:10px; font-weight:600;
  }
  .app-device__icons { display:flex; gap:5px; font-size:9px; }
  /* Screen */
  .app-device__screen {
    position:relative; margin:0 6px; border-radius:4px 4px 0 0;
    overflow:hidden; aspect-ratio:9/16; background:#eaf2fb;
  }
  .app-device__screen img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease;
  }
  .app-device:hover .app-device__screen img { transform:scale(1.05); }
  /* Hover overlay */
  .app-device__overlay {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 30%, rgba(10,10,35,.92));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:20px 16px; opacity:0; transition:opacity .35s ease;
  }
  .app-device:hover .app-device__overlay { opacity:1; }
  .app-device__tag {
    display:inline-block; width:fit-content;
    background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
    color:#fff; font-size:10px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; margin-bottom:8px;
  }
  .app-device__overlay h5 {
    color:#fff; font-size:15px; font-weight:700; margin:0 0 6px; line-height:1.3;
  }
  .app-device__link {
    color:rgba(255,255,255,.85); font-size:12px; font-weight:600;
    display:inline-flex; align-items:center; gap:5px;
    transition:color .2s;
  }
  .app-device__link:hover { color:#fff; text-decoration:none; }
  /* Home indicator */
  .app-device__home {
    height:24px; background:#0a0a23; display:flex;
    align-items:center; justify-content:center;
  }
  .app-device__home::after {
    content:''; width:48px; height:4px;
    background:rgba(255,255,255,.25); border-radius:4px;
  }

  /* Features */
  .ma-feat { background:#0a0a23; color:#fff; padding:70px 0; }
  .ma-feat .ma-section-title h2 { color:#fff; }
  .ma-feat .ma-section-title .eyebrow { color:#4a8ad2; }
  .ma-feat .ma-section-title p { color:#aab0c4; }
  .feat-item {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:22px; height:100%; transition:.3s;
    display:flex; gap:14px; align-items:flex-start;
  }
  .feat-item:hover { background:rgba(46,108,184,.15); border-color:#2e6cb8; }
  .feat-item .ic {
    flex:0 0 46px; width:46px; height:46px; border-radius:10px;
    background:#2e6cb8; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px;
  }
  .feat-item h5 { color:#fff; font-size:15px; font-weight:700; margin:0 0 4px; }
  .feat-item p { color:#aab0c4; font-size:13px; line-height:1.6; margin:0; }

  /* Process — timeline */
  .ma-process { background:#f7f9fc; }
  .ma-timeline { position:relative; display:flex; justify-content:space-between; padding:0; margin:0 auto; max-width:960px; }
  .ma-timeline::before {
    content:''; position:absolute; top:36px; left:40px; right:40px;
    height:3px; background:linear-gradient(90deg,#c8d9ed,#2e6cb8,#c8d9ed);
    border-radius:3px; z-index:0;
  }
  .ma-tl-step {
    flex:1; display:flex; flex-direction:column; align-items:center;
    text-align:center; position:relative; z-index:1; padding:0 8px;
  }
  .ma-tl-node {
    width:72px; height:72px; border-radius:50%;
    background:#fff; border:3px solid #2e6cb8;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#2e6cb8;
    box-shadow:0 8px 24px rgba(46,108,184,.18);
    transition:.4s; position:relative;
  }
  .ma-tl-step:hover .ma-tl-node {
    background:#2e6cb8; color:#fff;
    transform:scale(1.12);
    box-shadow:0 12px 32px rgba(46,108,184,.35);
  }
  .ma-tl-node .ma-tl-num {
    position:absolute; top:-8px; right:-8px;
    width:26px; height:26px; border-radius:50%;
    background:#0B1120; color:#fff;
    font-size:12px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
  }
  .ma-tl-body { margin-top:18px; }
  .ma-tl-body h5 { font-size:15px; font-weight:800; color:#111; margin:0 0 6px; }
  .ma-tl-body p { color:#666; font-size:13px; line-height:1.55; margin:0; max-width:160px; }

  /* CTA */
  .ma-cta { background:linear-gradient(135deg,#0a0e1a,#1a052e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .ma-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#8b5cf6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .ma-cta .container { position:relative; z-index:2; }
  .ma-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .ma-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .ma-cta .btn-light-outline { background:linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(139,92,246,.35); border:none; }
  .ma-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .ma-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .ma-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .ma-hero h1 { font-size:32px; }
    .phones-wrap { height:460px; margin-top:30px; }
    .phone { width:180px; height:360px; }
    .ma-fan { height:480px; margin-top:30px; }
    .ma-phone { width:180px; height:360px; }
    .app-device-grid { grid-template-columns:repeat(3, 1fr); gap:22px; }
  }
  @media (max-width: 767px){
    .app-device-grid { grid-template-columns:repeat(2, 1fr); gap:18px; }
    .app-device { border-radius:24px; }
    .app-device__notch { width:60px; height:16px; border-radius:0 0 10px 10px; }
    .app-device__status { padding:0 12px 4px; font-size:9px; }
    .app-device__screen { margin:0 5px; }
    .app-device__overlay { padding:14px 12px; }
    .app-device__overlay h5 { font-size:13px; }
    .app-device__home { height:20px; }
    .app-device__home::after { width:36px; height:3px; }
  }
  @media (max-width: 575px){
    .phones-wrap { height:400px; }
    .phone { width:140px; height:280px; border-width:8px; }
    .phone.p1 { transform:rotate(-8deg) translate(-60px, 8px); }
    .phone.p3 { transform:rotate(8deg) translate(60px, 8px); }
    .ma-fan { height:420px; }
    .ma-phone { width:160px; height:320px; border-width:8px; }
    .ma-phone.left { transform:rotate(-10deg) translate(-60px, 6px); }
    .ma-phone.right { transform:rotate(10deg) translate(60px, 6px); }
    .ma-phone__head { padding:20px 10px 6px; }
    .ma-phone__logo { font-size:14px; }
    .ma-phone__name { font-size:11px; }
    .ma-phone__nav i { font-size:12px; }
    .ma-stat .num { font-size:28px; }
    .ma-timeline { flex-direction:column; gap:32px; align-items:flex-start; padding-left:36px; }
    .ma-timeline::before {
      top:0; bottom:0; left:36px; right:auto;
      width:3px; height:100%;
    }
    .ma-tl-step { flex-direction:row; text-align:left; gap:18px; padding:0; }
    .ma-tl-node { min-width:60px; width:60px; height:60px; font-size:22px; }
    .ma-tl-body { margin-top:0; }
    .ma-tl-body p { max-width:none; }
  }

/* ===== PAGE: E-commerce Development (ec-) ===== */
.ec-section { padding:70px 0; }
  .ec-section-title { text-align:center; margin-bottom:45px; }
  .ec-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ec-section-title h2 { font-weight:800; margin-top:8px; }
  .ec-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .ec-hero { padding:70px 0 50px; background:#0B1120; position:relative; overflow:hidden; }
  .ec-hero::before {
    content:''; position:absolute; top:-100px; left:-100px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(139,92,246,.2) 0%, transparent 70%);
  }
  .ec-hero::after {
    content:''; position:absolute; bottom:-80px; right:-80px;
    width:350px; height:350px; border-radius:50%;
    background:radial-gradient(circle, rgba(46,108,184,.2) 0%, transparent 70%);
  }
  .ec-hero .container { position:relative; z-index:2; }
  .ec-hero .eyebrow { color:#a78bfa; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .ec-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; color:#fff; }
  .ec-hero p { color:rgba(255,255,255,.75); font-size:16px; line-height:1.8; margin:0 0 22px; }
  .ec-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .ec-hero .mini-badges { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
  .ec-hero .mini-badges span {
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); padding:6px 14px; border-radius:20px;
    font-size:12px; font-weight:600; border:1px solid rgba(255,255,255,.12);
  }

  /* 3D Marketplace Scene */
  .ec-scene {
    perspective:900px;
    display:flex; align-items:center; justify-content:center;
    min-height:420px; position:relative;
  }
  .ec-scene__inner {
    transform:rotateX(8deg) rotateY(-12deg);
    transform-style:preserve-3d;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:18px; padding:10px;
  }
  .ec-mk {
    width:110px; height:110px; border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; color:#fff; font-weight:700; font-size:11px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
    transition:transform .4s, box-shadow .4s;
    animation:ec-float 4s ease-in-out infinite;
    cursor:default;
  }
  .ec-mk:nth-child(2) { animation-delay:-.5s; }
  .ec-mk:nth-child(3) { animation-delay:-1s; }
  .ec-mk:nth-child(4) { animation-delay:-1.5s; }
  .ec-mk:nth-child(5) { animation-delay:-2s; transform:translateZ(30px); }
  .ec-mk:nth-child(6) { animation-delay:-2.5s; }
  .ec-mk:nth-child(7) { animation-delay:-3s; }
  .ec-mk:nth-child(8) { animation-delay:-3.5s; }
  .ec-mk:nth-child(9) { animation-delay:-.8s; }
  .ec-mk:hover {
    transform:translateZ(40px) scale(1.1);
    box-shadow:0 20px 50px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .ec-mk i { font-size:32px; }
  .ec-mk span { letter-spacing:.5px; text-align:center; line-height:1.2; }
  .ec-mk--shopify   { border-color:rgba(150,191,72,.4); }
  .ec-mk--shopify i { color:#96BF48; }
  .ec-mk--woo       { border-color:rgba(150,100,180,.4); }
  .ec-mk--woo i     { color:#9B5C8F; }
  .ec-mk--amazon    { border-color:rgba(255,153,0,.4); }
  .ec-mk--amazon i  { color:#FF9900; }
  .ec-mk--stripe    { border-color:rgba(99,91,255,.4); }
  .ec-mk--stripe i  { color:#635BFF; }
  .ec-mk--cart      { border-color:rgba(46,108,184,.4); }
  .ec-mk--cart i    { color:#2e6cb8; }
  .ec-mk--razorpay  { border-color:rgba(18,130,237,.4); }
  .ec-mk--razorpay i{ color:#1282ED; }
  .ec-mk--paypal    { border-color:rgba(0,48,135,.4); }
  .ec-mk--paypal i  { color:#003087; }
  .ec-mk--wp        { border-color:rgba(33,115,187,.4); }
  .ec-mk--wp i      { color:#21759B; }
  .ec-mk--ship      { border-color:rgba(16,185,129,.4); }
  .ec-mk--ship i    { color:#10B981; }
  @keyframes ec-float {
    0%,100% { transform:translateZ(0) translateY(0); }
    50%     { transform:translateZ(15px) translateY(-8px); }
  }
  .ec-mk:nth-child(5) { animation-name:ec-float-center; }
  @keyframes ec-float-center {
    0%,100% { transform:translateZ(30px) translateY(0); }
    50%     { transform:translateZ(45px) translateY(-10px); }
  }

  /* Stats */
  .ec-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .ec-stat { text-align:center; padding:10px; }
  .ec-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .ec-stat .num.plus:after { content:"+"; }
  .ec-stat .num.cr:after { content:"Cr+"; font-size:22px; margin-left:4px; }
  .ec-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Store types — accent-top cards */
  .ec-types { background:#f7f9fc; }
  .ec-type {
    background:#fff; border-radius:14px; height:100%;
    border:1px solid #eef0f5; margin-bottom:24px;
    padding:28px 24px; position:relative; overflow:hidden;
    transition:.35s;
  }
  .ec-type::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:4px; background:var(--primary);
    transform:scaleX(0); transform-origin:left;
    transition:transform .35s;
  }
  .ec-type:hover {
    transform:translateY(-6px);
    border-color:#c8d9ed;
    box-shadow:0 18px 40px rgba(46,108,184,.14);
  }
  .ec-type:hover::before { transform:scaleX(1); }
  .ec-type__icon {
    width:56px; height:56px; border-radius:14px;
    background:#eaf2fb; display:flex; align-items:center; justify-content:center;
    font-size:24px; color:#2e6cb8; margin-bottom:18px;
    transition:.3s;
  }
  .ec-type:hover .ec-type__icon {
    background:#2e6cb8; color:#fff;
    box-shadow:0 8px 20px rgba(46,108,184,.3);
  }
  .ec-type h5 { font-size:17px; font-weight:700; color:#111; margin:0 0 8px; }
  .ec-type p { color:#666; font-size:13px; line-height:1.65; margin:0; }

  /* Showcase */
  .ec-card {
    position:relative; border-radius:14px; overflow:hidden;
    background:#eaf2fb; box-shadow:0 4px 16px rgba(0,0,0,.06);
    transition:.35s; margin-bottom:24px; aspect-ratio: 4/3;
  }
  .ec-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .ec-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .ec-card:hover img { transform:scale(1.08); }
  .ec-card .hover {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; color:#fff; opacity:0; transition:opacity .3s;
  }
  .ec-card:hover .hover { opacity:1; }
  .ec-card .cat { display:inline-block; background:#2e6cb8; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .ec-card .hover h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .ec-card .hover a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* Platforms — dark */
  .ec-plat { background:#0a0a23; color:#fff; padding:70px 0; }
  .ec-plat .ec-section-title h2 { color:#fff; }
  .ec-plat .ec-section-title .eyebrow { color:#4a8ad2; }
  .ec-plat .ec-section-title p { color:#aab0c4; }
  .plat-tile {
    background:#fff; border:1px solid rgba(255,255,255,.15);
    border-radius:14px; padding:20px; text-align:center;
    height:130px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px;
    transition:.3s;
  }
  .plat-tile:hover { background:#fff; border-color:#2e6cb8; transform:translateY(-4px); box-shadow:0 12px 28px rgba(46,108,184,.25); }
  .plat-tile img { max-height:50px; max-width:80%; }
  .plat-tile span { color:#333; font-size:12px; font-weight:600; letter-spacing:.5px; }

  /* Payment gateways */
  .gw-tile {
    background:#fff; border:1px solid #eef0f5; border-radius:12px;
    padding:18px 10px; height:90px; display:flex; align-items:center; justify-content:center;
    transition:.3s; margin-bottom:16px;
  }
  .gw-tile:hover { border-color:#2e6cb8; box-shadow:0 10px 20px rgba(46,108,184,.12); transform:translateY(-3px); }
  .gw-tile img { max-height:44px; max-width:85%; object-fit:contain; transition:.3s; }

  /* CTA */
  .ec-cta { background:linear-gradient(135deg,#0a0e1a,#2e1505); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .ec-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#f97316 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .ec-cta .container { position:relative; z-index:2; }
  .ec-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .ec-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .ec-cta .btn-light-outline { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(249,115,22,.35); border:none; }
  .ec-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .ec-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .ec-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .ec-hero h1 { font-size:32px; }
    .ec-scene { min-height:340px; margin-top:30px; }
  }
  @media (max-width: 767px){
    .ec-scene__inner { grid-template-columns:repeat(3, 1fr); gap:12px; }
    .ec-mk { width:90px; height:90px; }
    .ec-mk i { font-size:26px; }
    .ec-mk span { font-size:10px; }
  }

/* ===== PAGE: ERP Development (er-) ===== */
.er-section { padding:70px 0; }
  .er-section-title { text-align:center; margin-bottom:45px; }
  .er-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .er-section-title h2 { font-weight:800; margin-top:8px; }
  .er-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .er-hero { padding:60px 0 40px; background:#f7f9fc; position:relative; overflow:hidden; }
  .er-hero .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .er-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; }
  .er-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .er-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* Dashboard mockup */
  .dash-wrap {
    position:relative; border-radius:14px; overflow:hidden;
    background:#0a0a23; box-shadow:0 26px 52px rgba(10,10,35,.25);
  }
  .dash-wrap .top {
    background:#0a0a23; padding:10px 16px;
    display:flex; align-items:center; gap:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .dash-wrap .top .dot { width:10px; height:10px; border-radius:50%; }
  .dash-wrap .d1 { background:#ff5f56; } .dash-wrap .d2 { background:#ffbd2e; } .dash-wrap .d3 { background:#27c93f; }
  .dash-wrap .top .title {
    color:#fff; font-size:12px; margin-left:10px; opacity:.7;
  }
  .dash-body { background:#f7f9fc; padding:18px; display:grid; gap:12px;
    grid-template-columns: 1fr 1fr 1fr; grid-auto-rows:auto; }
  .kpi {
    background:#fff; border:1px solid #eef0f5; border-radius:10px;
    padding:14px; text-align:left;
  }
  .kpi .lbl { color:#888; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
  .kpi .val { color:#2e6cb8; font-size:22px; font-weight:800; margin-top:4px; }
  .kpi .delta { color:#27a65a; font-size:11px; font-weight:700; margin-top:2px; }
  .kpi.kpi-red .delta { color:#d14; }
  .chart-card, .list-card {
    grid-column: span 3;
    background:#fff; border:1px solid #eef0f5; border-radius:10px; padding:14px;
  }
  .chart-card .head, .list-card .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .chart-card h6, .list-card h6 { margin:0; font-size:13px; font-weight:700; color:#111; }
  .chart-card .tag { background:#eaf2fb; color:#2e6cb8; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
  .bars { display:flex; align-items:flex-end; gap:6px; height:80px; }
  .bars .b { flex:1; background:linear-gradient(180deg,#4a8ad2,#2e6cb8); border-radius:4px 4px 0 0; }
  .list-card ul { padding:0; margin:0; list-style:none; }
  .list-card li { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:12px; color:#333; border-bottom:1px dashed #eef0f5; }
  .list-card li:last-child { border-bottom:0; }
  .list-card li .pill { background:#eaf2fb; color:#2e6cb8; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:auto; }

  /* Stats band */
  .er-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .er-stat { text-align:center; padding:10px; }
  .er-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .er-stat .num.plus:after { content:"+"; }
  .er-stat .num.pct:after { content:"%"; }
  .er-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Modules grid (visual icon cards) */
  .mod-card {
    background:#fff; border:1px solid #eef0f5; border-radius:16px;
    padding:26px 22px; text-align:center; height:100%;
    transition:.3s; margin-bottom:24px; position:relative; overflow:hidden;
  }
  .mod-card:hover { transform:translateY(-6px); border-color:#2e6cb8; box-shadow:0 20px 40px rgba(46,108,184,.18); }
  .mod-card:after {
    content:""; position:absolute; inset:auto -50% -60% auto;
    width:150%; height:150%; border-radius:50%;
    background:radial-gradient(circle at center, rgba(46,108,184,.08), transparent 60%);
    pointer-events:none;
  }
  .mod-card .ic {
    width:66px; height:66px; margin:0 auto 14px; border-radius:16px;
    background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:24px;
    box-shadow:0 10px 22px rgba(46,108,184,.35);
    transition:.35s;
  }
  .mod-card:hover .ic { transform:rotate(-6deg) scale(1.08); }
  .mod-card .code { font-size:20px; font-weight:800; color:#111; margin:0 0 4px; letter-spacing:1px; }
  .mod-card .sub { color:#666; font-size:13px; margin:0; }

  /* Showcase */
  .er-card {
    position:relative; border-radius:14px; overflow:hidden;
    background:#eaf2fb; box-shadow:0 4px 16px rgba(0,0,0,.06);
    transition:.35s; margin-bottom:24px; aspect-ratio: 16/10;
  }
  .er-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .er-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .er-card:hover img { transform:scale(1.08); }
  .er-card .hover {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; color:#fff; opacity:0; transition:opacity .3s;
  }
  .er-card:hover .hover { opacity:1; }
  .er-card .cat { display:inline-block; background:#2e6cb8; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .er-card .hover h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .er-card .hover a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* Benefits (dark) */
  .er-ben { background:#101729; color:#fff; padding:70px 0; }
  .er-ben .er-section-title h2 { color:#fff; }
  .er-ben .er-section-title .eyebrow { color:#4a8ad2; }
  .er-ben .er-section-title p { color:#aab0c4; }
  .ben-item {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:22px; height:100%; transition:.3s;
    display:flex; gap:14px; align-items:flex-start;
  }
  .ben-item:hover { background:rgba(46,108,184,.15); border-color:#2e6cb8; }
  .ben-item .ic {
    flex:0 0 46px; width:46px; height:46px; border-radius:10px;
    background:#2e6cb8; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px;
  }
  .ben-item h5 { color:#fff; font-size:15px; font-weight:700; margin:0 0 4px; }
  .ben-item p { color:#aab0c4; font-size:13px; line-height:1.6; margin:0; }

  /* CTA */
  .er-cta { background:linear-gradient(135deg,#0a0e1a,#051e1a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .er-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#14b8a6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .er-cta .container { position:relative; z-index:2; }
  .er-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .er-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .er-cta .btn-light-outline { background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(20,184,166,.35); border:none; }
  .er-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .er-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .er-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .er-hero h1 { font-size:32px; }
    .dash-wrap { margin-top:30px; }
  }
  @media (max-width: 575px){
    .dash-body { grid-template-columns:1fr 1fr; }
    .chart-card, .list-card { grid-column:span 2; }
    .er-stat .num { font-size:28px; }
  }

/* ===== PAGE: Website Maintenance (wm-) ===== */
.wm-section { padding:70px 0; }
  .wm-section-title { text-align:center; margin-bottom:45px; }
  .wm-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .wm-section-title h2 { font-weight:800; margin-top:8px; }
  .wm-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .wm-hero { padding:60px 0 40px; background:#f7f9fc; position:relative; overflow:hidden; }
  .wm-hero .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .wm-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; }
  .wm-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .wm-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .wm-hero .pills { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
  .wm-hero .pills span {
    background:#eaf2fb; color:#2e6cb8; padding:6px 14px; border-radius:20px;
    font-size:12px; font-weight:600; border:1px solid #c8d9ed;
  }
  .wm-hero .pills span.green { background:#e9f6ef; color:#27a65a; border-color:#c8e8d3; }

  /* Monitor mockup */
  .mon-wrap {
    border-radius:14px; overflow:hidden;
    background:#0a0a23; box-shadow:0 26px 52px rgba(10,10,35,.25);
  }
  .mon-wrap .top {
    padding:10px 14px; display:flex; align-items:center; gap:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mon-wrap .top .dot { width:10px; height:10px; border-radius:50%; }
  .mon-wrap .d1 { background:#ff5f56; } .mon-wrap .d2 { background:#ffbd2e; } .mon-wrap .d3 { background:#27c93f; }
  .mon-wrap .top .title { color:#aab0c4; font-size:12px; margin-left:10px; }
  .mon-wrap .top .live {
    margin-left:auto; background:rgba(39,166,90,.18); color:#27c93f;
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px;
  }
  .mon-wrap .top .live:before {
    content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:#27c93f; margin-right:6px; animation:pulse 1.4s infinite;
  }
  @keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(39,201,63,.6);} 50% { box-shadow:0 0 0 6px rgba(39,201,63,0);} }

  .mon-body {
    background:#f7f9fc; padding:16px;
    display:grid; gap:10px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .metric {
    background:#fff; border:1px solid #eef0f5; border-radius:10px; padding:14px;
  }
  .metric .lbl { color:#888; font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
  .metric .val { color:#2e6cb8; font-size:22px; font-weight:800; margin-top:4px; }
  .metric .hint { font-size:10px; font-weight:700; margin-top:2px; color:#27a65a; }
  .metric.danger .val { color:#d14; }
  .metric.danger .hint { color:#d14; }

  .line-card {
    grid-column:span 3; background:#fff; border:1px solid #eef0f5; border-radius:10px;
    padding:14px;
  }
  .line-card .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .line-card h6 { margin:0; font-size:12px; font-weight:700; color:#111; }
  .line-card .uptime { font-size:11px; font-weight:700; color:#27a65a; }
  .line-chart { display:flex; gap:2px; align-items:flex-end; height:44px; }
  .line-chart .bar { flex:1; background:#27c93f; border-radius:1px 1px 0 0; min-height:10%; }
  .line-chart .bar.warn { background:#ffbd2e; }
  .line-chart .bar.down { background:#ff5f56; min-height:6px; height:14px !important; }

  .evt-card {
    grid-column:span 3; background:#fff; border:1px solid #eef0f5; border-radius:10px;
    padding:14px;
  }
  .evt-card h6 { margin:0 0 8px; font-size:12px; font-weight:700; color:#111; }
  .evt-card ul { margin:0; padding:0; list-style:none; }
  .evt-card li { display:flex; align-items:center; gap:10px; font-size:11px; color:#333; padding:5px 0; border-bottom:1px dashed #eef0f5; }
  .evt-card li:last-child { border-bottom:0; }
  .evt-card li .dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
  .evt-card li .ok { background:#27a65a; }
  .evt-card li .warn2 { background:#ffbd2e; }
  .evt-card li .time { margin-left:auto; color:#888; font-size:10px; }

  /* Stats */
  .wm-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .wm-stat { text-align:center; padding:10px; }
  .wm-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .wm-stat .num.pct:after { content:"%"; }
  .wm-stat .num.plus:after { content:"+"; }
  .wm-stat .num.clock:after { content:"×7"; font-size:22px; }
  .wm-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Services — accent-top cards */
  .wm-services { background:#f7f9fc; }
  .svc-card {
    background:#fff; border:1px solid #eef0f5; border-radius:14px;
    height:100%; margin-bottom:24px; padding:28px 24px;
    position:relative; overflow:hidden; transition:.35s;
  }
  .svc-card::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:4px; background:var(--primary);
    transform:scaleX(0); transform-origin:left;
    transition:transform .35s;
  }
  .svc-card:hover {
    transform:translateY(-6px); border-color:#c8d9ed;
    box-shadow:0 18px 40px rgba(46,108,184,.14);
  }
  .svc-card:hover::before { transform:scaleX(1); }
  .svc-card__icon {
    width:56px; height:56px; border-radius:14px;
    background:#eaf2fb; display:flex; align-items:center; justify-content:center;
    font-size:24px; color:#2e6cb8; margin-bottom:18px; transition:.3s;
  }
  .svc-card:hover .svc-card__icon {
    background:#2e6cb8; color:#fff;
    box-shadow:0 8px 20px rgba(46,108,184,.3);
  }
  .svc-card h5 { font-size:16px; font-weight:700; color:#111; margin:0 0 8px; }
  .svc-card p { color:#666; font-size:13px; line-height:1.65; margin:0; }

  /* Showcase */
  .wm-card {
    position:relative; border-radius:14px; overflow:hidden;
    background:#eaf2fb; box-shadow:0 4px 16px rgba(0,0,0,.06);
    transition:.35s; margin-bottom:24px; aspect-ratio: 16/10;
  }
  .wm-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .wm-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .wm-card:hover img { transform:scale(1.08); }
  .wm-card .hover {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; color:#fff; opacity:0; transition:opacity .3s;
  }
  .wm-card:hover .hover { opacity:1; }
  .wm-card .cat { display:inline-block; background:#2e6cb8; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .wm-card .hover h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .wm-card .hover a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* Plans */
  .wm-plans { background:#101729; color:#fff; padding:70px 0; }
  .wm-plans .wm-section-title h2 { color:#fff; }
  .wm-plans .wm-section-title .eyebrow { color:#4a8ad2; }
  .wm-plans .wm-section-title p { color:#aab0c4; }
  .plan {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    border-radius:16px; padding:32px 26px; height:100%; transition:.3s;
    position:relative; margin-bottom:24px;
  }
  .plan:hover { transform:translateY(-8px); border-color:#2e6cb8; background:rgba(46,108,184,.1); }
  .plan.featured { border-color:#2e6cb8; background:linear-gradient(180deg, rgba(46,108,184,.18), rgba(46,108,184,.04)); }
  .plan.featured:before {
    content:"Most Popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:#2e6cb8; color:#fff; font-size:11px; font-weight:700; letter-spacing:1px;
    padding:4px 14px; border-radius:14px;
  }
  .plan h4 { color:#fff; font-size:18px; font-weight:700; margin:0 0 6px; }
  .plan .tag { color:#4a8ad2; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
  .plan ul { list-style:none; padding:0; margin:22px 0 0; }
  .plan ul li {
    color:#d6dae8; font-size:13px; padding:8px 0;
    border-bottom:1px dashed rgba(255,255,255,.08);
    display:flex; gap:10px; align-items:center;
  }
  .plan ul li:last-child { border-bottom:0; }
  .plan ul li i { color:#4a8ad2; font-size:13px; }

  /* CTA */
  .wm-cta { background:linear-gradient(135deg,#0a0e1a,#051e0a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .wm-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#22c55e 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .wm-cta .container { position:relative; z-index:2; }
  .wm-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .wm-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .wm-cta .btn-light-outline { background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(34,197,94,.35); border:none; }
  .wm-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .wm-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .wm-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .wm-hero h1 { font-size:32px; }
    .mon-wrap { margin-top:28px; }
  }
  @media (max-width: 575px){
    .mon-body { grid-template-columns:1fr 1fr; }
    .line-card, .evt-card { grid-column:span 2; }
    .wm-stat .num { font-size:28px; }
  }

/* ===== PAGE: Video Maker (vm-) ===== */
.vm-section { padding:70px 0; }
  .vm-section-title { text-align:center; margin-bottom:45px; }
  .vm-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .vm-section-title h2 { font-weight:800; margin-top:8px; }
  .vm-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .vm-hero { padding:60px 0 40px; background:#f7f9fc; position:relative; overflow:hidden; }
  .vm-hero .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .vm-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; }
  .vm-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .vm-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .vm-hero .pills { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
  .vm-hero .pills span {
    background:#eaf2fb; color:#2e6cb8; padding:6px 14px; border-radius:20px;
    font-size:12px; font-weight:600; border:1px solid #c8d9ed;
    display:inline-flex; align-items:center; gap:6px;
  }

  /* Player mockup */
  .player {
    position:relative; border-radius:14px; overflow:hidden;
    background:#000; box-shadow:0 26px 52px rgba(10,10,35,.3);
    aspect-ratio: 16/9;
  }
  .player > img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
  .player .play-btn {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at center, rgba(0,0,0,.2), rgba(0,0,0,.6));
    cursor:pointer; transition:.3s;
  }
  .player .play-btn .circle {
    width:88px; height:88px; border-radius:50%;
    background:#fff; color:#2e6cb8; display:flex; align-items:center; justify-content:center;
    font-size:34px; box-shadow:0 18px 40px rgba(0,0,0,.4); transition:.3s;
    animation:pulse-ring 2s infinite;
  }
  @keyframes pulse-ring { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.5);} 100%{ box-shadow:0 0 0 28px rgba(255,255,255,0);} }
  .player:hover .play-btn .circle { transform:scale(1.1); color:#fff; background:#2e6cb8; }
  .player .bar {
    position:absolute; left:0; right:0; bottom:0; padding:12px 18px;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.9));
    display:flex; align-items:center; gap:10px;
    color:#fff;
  }
  .player .bar .line {
    flex:1; height:4px; background:rgba(255,255,255,.25); border-radius:2px; position:relative;
  }
  .player .bar .line:after {
    content:""; position:absolute; left:0; top:0; bottom:0; width:35%;
    background:#2e6cb8; border-radius:2px;
  }
  .player .bar .time { font-size:12px; font-weight:700; }
  .player .tag {
    position:absolute; top:14px; left:14px;
    background:#d14; color:#fff; padding:3px 10px; border-radius:12px;
    font-size:11px; font-weight:700; letter-spacing:1px;
  }

  /* Stats */
  .vm-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .vm-stat { text-align:center; padding:10px; }
  .vm-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .vm-stat .num.plus:after { content:"+"; }
  .vm-stat .num.m:after { content:"M+"; font-size:22px; margin-left:2px; }
  .vm-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Video gallery (thumbnail grid with play overlay) */
  .vm-gallery { background:#fff; }
  .vid-tile {
    position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
    background:#000; margin-bottom:24px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:.35s;
  }
  .vid-tile:hover { transform:translateY(-5px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .vid-tile img {
    width:100%; height:100%; object-fit:cover; display:block;
    opacity:.85; transition:transform .5s ease, opacity .3s;
  }
  .vid-tile:hover img { transform:scale(1.06); opacity:.75; }
  .vid-tile .overlay {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    transition:.3s;
  }
  .vid-tile .play {
    width:62px; height:62px; border-radius:50%;
    background:rgba(255,255,255,.9); color:#2e6cb8;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; transition:.3s;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  .vid-tile:hover .play { background:#2e6cb8; color:#fff; transform:scale(1.12); }
  .vid-tile .dur {
    position:absolute; bottom:10px; right:10px;
    background:rgba(0,0,0,.75); color:#fff;
    font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px;
  }
  .vid-tile .cap {
    position:absolute; left:12px; bottom:10px; right:60px;
    color:#fff; font-size:13px; font-weight:700;
    text-shadow:0 2px 6px rgba(0,0,0,.8);
  }

  /* Video types — accent-top cards */
  .vt-card {
    position:relative; background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:32px 24px; height:100%; margin-bottom:24px; transition:.35s; overflow:hidden;
  }
  .vt-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:4px;
    background:var(--primary,#2563EB); transform:scaleX(0); transform-origin:left;
    transition:transform .4s ease; border-radius:14px 14px 0 0;
  }
  .vt-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(37,99,235,.12); }
  .vt-card:hover::before { transform:scaleX(1); }
  .vt-card__icon {
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#eef4ff; color:var(--primary,#2563EB); font-size:22px; margin-bottom:18px; transition:.3s;
  }
  .vt-card:hover .vt-card__icon { background:var(--primary,#2563EB); color:#fff; }
  .vt-card h5 { font-size:16px; font-weight:700; color:#111; margin:0 0 8px; }
  .vt-card p { color:#666; font-size:13px; line-height:1.65; margin:0; }

  /* Platforms (where we publish) */
  .vm-plat { background:#101729; color:#fff; padding:70px 0; }
  .vm-plat .vm-section-title h2 { color:#fff; }
  .vm-plat .vm-section-title .eyebrow { color:#4a8ad2; }
  .vm-plat .vm-section-title p { color:#aab0c4; }
  .plat-badge {
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding:20px 10px; text-align:center;
    transition:.3s; margin-bottom:16px;
  }
  .plat-badge:hover { background:rgba(46,108,184,.15); border-color:#2e6cb8; transform:translateY(-4px); }
  .plat-badge i { font-size:34px; color:#4a8ad2; margin-bottom:10px; display:block; }
  .plat-badge span { color:#d6dae8; font-size:12px; font-weight:600; letter-spacing:.5px; }

  /* CTA */
  .vm-cta { background:linear-gradient(135deg,#0a0e1a,#0a1a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .vm-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#2563EB 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .vm-cta .container { position:relative; z-index:2; }
  .vm-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .vm-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .vm-cta .btn-light-outline { background:linear-gradient(135deg,#2563EB,#1D4ED8); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(37,99,235,.35); border:none; }
  .vm-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .vm-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .vm-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .vm-hero h1 { font-size:32px; }
    .player { margin-top:28px; }
    .player .play-btn .circle { width:68px; height:68px; font-size:26px; }
  }

/* ===== PAGE: Logo Designing (ld-) ===== */
.ld-section { padding:70px 0; }
  .ld-section-title { text-align:center; margin-bottom:45px; }
  .ld-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ld-section-title h2 { font-weight:800; margin-top:8px; }
  .ld-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* Hero */
  .ld-hero { padding:60px 0 40px; background:#0B1120; position:relative; overflow:hidden; }
  .ld-hero .eyebrow { color:#f59e0b; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .ld-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; color:#fff; }
  .ld-hero p { color:#b0b8cc; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .ld-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* 3D floating design tools scene */
  .ld-scene { perspective:900px; display:flex; align-items:center; justify-content:center; min-height:380px; }
  .ld-scene__inner {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%;
    transform:rotateX(8deg) rotateY(-12deg); transform-style:preserve-3d;
  }
  .ld-tool {
    background:rgba(255,255,255,.06); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1); border-radius:16px;
    padding:22px 14px; text-align:center; transition:.4s ease;
    transform:translateZ(0); position:relative;
  }
  .ld-tool:hover { transform:translateZ(30px) scale(1.06); border-color:rgba(245,158,11,.4); }
  .ld-tool__icon { font-size:30px; margin-bottom:8px; display:block; }
  .ld-tool__label { color:#c8cfe0; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

  /* Individual tool colors */
  .ld-tool--illustrator { border-color:rgba(255,97,0,.3); }
  .ld-tool--illustrator .ld-tool__icon { color:#FF6100; }
  .ld-tool--photoshop { border-color:rgba(49,168,255,.3); }
  .ld-tool--photoshop .ld-tool__icon { color:#31A8FF; }
  .ld-tool--figma { border-color:rgba(162,89,255,.3); }
  .ld-tool--figma .ld-tool__icon { color:#A259FF; }
  .ld-tool--coreldraw { border-color:rgba(0,160,70,.3); }
  .ld-tool--coreldraw .ld-tool__icon { color:#00A046; }
  .ld-tool--palette { border-color:rgba(245,158,11,.35); transform:translateZ(40px) scale(1.08); }
  .ld-tool--palette .ld-tool__icon { color:#f59e0b; }
  .ld-tool--typography { border-color:rgba(255,255,255,.2); }
  .ld-tool--typography .ld-tool__icon { color:#fff; }
  .ld-tool--pentool { border-color:rgba(239,68,68,.3); }
  .ld-tool--pentool .ld-tool__icon { color:#EF4444; }
  .ld-tool--canva { border-color:rgba(0,196,204,.3); }
  .ld-tool--canva .ld-tool__icon { color:#00C4CC; }
  .ld-tool--indesign { border-color:rgba(255,61,113,.3); }
  .ld-tool--indesign .ld-tool__icon { color:#FF3D71; }

  /* Float animation */
  @keyframes ld-float {
    0%,100% { transform:translateZ(var(--tz,0)) translateY(0); }
    50% { transform:translateZ(var(--tz,0)) translateY(-10px); }
  }
  .ld-tool:nth-child(1){ animation:ld-float 4.2s ease-in-out infinite; --tz:10px; }
  .ld-tool:nth-child(2){ animation:ld-float 3.8s ease-in-out .3s infinite; --tz:15px; }
  .ld-tool:nth-child(3){ animation:ld-float 4.5s ease-in-out .6s infinite; --tz:8px; }
  .ld-tool:nth-child(4){ animation:ld-float 3.6s ease-in-out .9s infinite; --tz:12px; }
  .ld-tool:nth-child(5){ animation:ld-float 5s ease-in-out .2s infinite; --tz:40px; }
  .ld-tool:nth-child(6){ animation:ld-float 4s ease-in-out .7s infinite; --tz:14px; }
  .ld-tool:nth-child(7){ animation:ld-float 3.9s ease-in-out .5s infinite; --tz:11px; }
  .ld-tool:nth-child(8){ animation:ld-float 4.3s ease-in-out .4s infinite; --tz:9px; }
  .ld-tool:nth-child(9){ animation:ld-float 4.1s ease-in-out .8s infinite; --tz:13px; }

  /* Stats */
  .ld-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .ld-stat { text-align:center; padding:10px; }
  .ld-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .ld-stat .num.plus:after { content:"+"; }
  .ld-stat .num.hr:after { content:"hr"; font-size:22px; margin-left:4px; }
  .ld-stat .label { margin-top:6px; font-size:13px; opacity:.9; letter-spacing:.5px; }

  /* Logo gallery (main showcase) */
  .ld-gallery { background:#fff; }
  .logo-tile {
    border-radius:14px; padding:28px 20px;
    height:150px; display:flex; align-items:center; justify-content:center;
    transition:.35s; margin-bottom:20px; overflow:hidden;
    background:#fff;
    border:1px solid #dde4ed;
    position:relative;
  }
  .logo-tile img {
    max-width:100%; max-height:90px;
    object-fit:contain;
    filter:grayscale(20%);
    transition:filter .35s, transform .35s;
  }
  .logo-tile:hover { transform:translateY(-6px); box-shadow:0 18px 38px rgba(46,108,184,.15); border-color:#c8d9ed; }
  .logo-tile:hover img { filter:grayscale(0%); transform:scale(1.08); }
  .logo-tile a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

  /* Logo styles (icon cards) */
  .style-card {
    background:#fff; border:1px solid #eef0f5; border-radius:16px;
    padding:28px 24px; text-align:center; height:100%;
    transition:.35s; margin-bottom:24px; position:relative; overflow:hidden;
  }
  .style-card:hover { transform:translateY(-6px); border-color:#2e6cb8; box-shadow:0 22px 44px rgba(46,108,184,.18); }
  .style-card .ic {
    width:72px; height:72px; margin:0 auto 14px; border-radius:18px;
    background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:30px;
    box-shadow:0 10px 22px rgba(46,108,184,.35);
    transition:.3s;
  }
  .style-card:hover .ic { transform:rotate(-6deg) scale(1.08); }
  .style-card h5 { font-size:17px; font-weight:700; color:#111; margin:0 0 8px; }
  .style-card p { color:#666; font-size:13px; line-height:1.65; margin:0; }

  /* Process — horizontal timeline */
  .ld-process { background:#f7f9fc; }
  .ld-timeline {
    display:flex; justify-content:space-between; position:relative; margin-top:20px; padding:0 20px;
  }
  .ld-timeline::before {
    content:''; position:absolute; top:30px; left:60px; right:60px; height:3px;
    background:linear-gradient(90deg,var(--primary,#2563EB),var(--primary-dark,#1D4ED8));
    border-radius:3px; z-index:0;
  }
  .ld-tl-step { flex:1; text-align:center; position:relative; z-index:1; }
  .ld-tl-node {
    width:60px; height:60px; border-radius:50%; margin:0 auto 16px;
    background:#fff; border:3px solid var(--primary,#2563EB);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:var(--primary,#2563EB); position:relative;
    box-shadow:0 6px 18px rgba(37,99,235,.15); transition:.3s;
  }
  .ld-tl-step:hover .ld-tl-node { background:var(--primary,#2563EB); color:#fff; transform:scale(1.1); }
  .ld-tl-node .badge-num {
    position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
    background:var(--primary-dark,#1D4ED8); color:#fff; font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center; border:2px solid #f7f9fc;
  }
  .ld-tl-body h5 { font-size:14px; font-weight:700; color:#111; margin:0 0 4px; }
  .ld-tl-body p { color:#666; font-size:12px; line-height:1.5; margin:0; padding:0 4px; }

  @media (max-width:767px){
    .ld-timeline { flex-direction:column; align-items:flex-start; gap:24px; padding:0; }
    .ld-timeline::before { top:0; bottom:0; left:30px; right:auto; width:3px; height:100%; }
    .ld-tl-step { display:flex; align-items:flex-start; gap:16px; text-align:left; }
    .ld-tl-node { margin:0; flex:0 0 60px; }
    .ld-tl-body { padding-top:6px; }
  }

  /* Industries served */
  .ld-ind { background:#101729; color:#fff; padding:70px 0; }
  .ld-ind .ld-section-title h2 { color:#fff; }
  .ld-ind .ld-section-title .eyebrow { color:#4a8ad2; }
  .ld-ind .ld-section-title p { color:#aab0c4; }
  .ind-chip {
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:12px; padding:18px 14px; text-align:center;
    transition:.3s; margin-bottom:16px;
  }
  .ind-chip:hover { background:rgba(46,108,184,.15); border-color:#2e6cb8; transform:translateY(-4px); }
  .ind-chip i { font-size:22px; color:#4a8ad2; margin-bottom:8px; display:block; }
  .ind-chip span { color:#d6dae8; font-size:13px; font-weight:600; }

  /* CTA */
  .ld-cta { background:linear-gradient(135deg,#0a0e1a,#2e1a05); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .ld-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#f59e0b 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .ld-cta .container { position:relative; z-index:2; }
  .ld-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .ld-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .ld-cta .btn-light-outline { background:linear-gradient(135deg,#f59e0b,#d97706); color:#0a0a23; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(245,158,11,.35); border:none; }
  .ld-cta .btn-light-outline:hover { transform:translateY(-2px); color:#0a0a23; text-decoration:none; }
  .ld-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .ld-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width: 991px){
    .ld-hero h1 { font-size:32px; }
    .ld-scene { margin-top:36px; min-height:auto; }
    .ld-scene__inner { transform:rotateX(4deg) rotateY(-6deg); gap:10px; }
    .ld-tool { padding:16px 10px; }
    .ld-tool__icon { font-size:24px; }
  }

/* ===== PAGE: Content Writing (cw-) ===== */
.cw-section { padding:70px 0; }
  .cw-section-title { text-align:center; margin-bottom:45px; }
  .cw-section-title .eyebrow { color:#be123c; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .cw-section-title h2 { font-weight:800; margin-top:8px; }
  .cw-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .cw-hero { padding:60px 0 50px; background:linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%); position:relative; overflow:hidden; }
  .cw-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#e11d48 0%,transparent 70%); opacity:.18; border-radius:50%; }
  .cw-hero .eyebrow { color:#be123c; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .cw-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .cw-hero h1 span { color:#e11d48; }
  .cw-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .cw-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* DOCUMENT MOCKUP */
  .doc-wrap { position:relative; z-index:2; }
  .doc-paper { background:#fff; border-radius:14px; padding:30px 28px 26px; box-shadow:0 22px 50px rgba(225,29,72,.22); border:1px solid #ffe4e6; position:relative; transform:rotate(1deg); }
  .doc-paper:before { content:""; position:absolute; top:14px; left:14px; width:14px; height:14px; background:#ef4444; border-radius:50%; box-shadow:24px 0 #f59e0b, 48px 0 #10b981; }
  .doc-paper .doc-head { border-bottom:2px solid #fecdd3; padding:24px 0 12px; margin-bottom:14px; }
  .doc-paper .doc-head .tag { display:inline-block; background:#e11d48; color:#fff; font-size:10px; font-weight:800; letter-spacing:1px; padding:3px 10px; border-radius:10px; text-transform:uppercase; margin-bottom:8px; }
  .doc-paper .doc-head h3 { font-size:22px; font-weight:800; color:#0a0a23; margin:0 0 4px; line-height:1.3; }
  .doc-paper .doc-head .meta { font-size:11px; color:#94a3b8; }
  .doc-paper .doc-head .meta i { margin-right:4px; color:#e11d48; }
  .doc-paper .line { height:10px; background:#fee2e2; border-radius:5px; margin:8px 0; }
  .doc-paper .line.full { background:#fecdd3; }
  .doc-paper .line.w90 { width:92%; }
  .doc-paper .line.w75 { width:72%; }
  .doc-paper .line.w60 { width:58%; }
  .doc-paper .line.accent { background:linear-gradient(90deg,#e11d48,#be123c); height:12px; width:35%; margin-top:14px; }
  .doc-paper .typing-cursor { display:inline-block; width:2px; height:14px; background:#e11d48; margin-left:2px; animation:blink 1s infinite; vertical-align:middle; }
  @keyframes blink { 50% { opacity:0; } }
  .doc-paper .highlight { background:linear-gradient(180deg, transparent 60%, #fecdd3 60%); padding:0 3px; font-weight:800; color:#0a0a23; font-size:13px; }
  .doc-paper .stats-row { display:flex; gap:14px; margin-top:18px; padding-top:14px; border-top:1px dashed #fecdd3; }
  .doc-paper .stats-row .st { flex:1; }
  .doc-paper .stats-row .st .n { font-size:22px; font-weight:800; color:#e11d48; }
  .doc-paper .stats-row .st .l { font-size:10px; color:#64748b; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
  .doc-sticky { position:absolute; top:-18px; right:-10px; background:#fef3c7; color:#78350f; padding:12px 18px; transform:rotate(8deg); box-shadow:0 8px 20px rgba(245,158,11,.3); border-radius:4px; font-family:'Caveat',cursive; font-size:15px; font-weight:700; z-index:3; }
  .doc-sticky:before { content:"✓ "; color:#10b981; font-weight:800; }

  /* CONTENT TYPES GRID */
  .cw-type-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); display:flex; flex-direction:column; }
  .cw-type-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(225,29,72,.2); }
  .cw-type-card .visual { height:180px; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden; }
  .cw-type-card .visual.blog { background:linear-gradient(135deg,#fff1f2,#ffe4e6); }
  .cw-type-card .visual.web { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
  .cw-type-card .visual.prod { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .cw-type-card .visual.adcopy { background:linear-gradient(135deg,#fed7aa,#fdba74); }
  .cw-type-card .visual.press { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .cw-type-card .visual.social { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .cw-type-card .visual.tech { background:linear-gradient(135deg,#e0e7ff,#c7d2fe); }
  .cw-type-card .visual.case { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .cw-type-card .big-ic { font-size:72px; opacity:.9; }
  .cw-type-card .big-ic.blog { color:#e11d48; }
  .cw-type-card .big-ic.web { color:#2563eb; }
  .cw-type-card .big-ic.prod { color:#d97706; }
  .cw-type-card .big-ic.adcopy { color:#ea580c; }
  .cw-type-card .big-ic.press { color:#7c3aed; }
  .cw-type-card .big-ic.social { color:#059669; }
  .cw-type-card .big-ic.tech { color:#4f46e5; }
  .cw-type-card .big-ic.case { color:#db2777; }
  .cw-type-card .body { padding:18px 20px; flex:1; }
  .cw-type-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .cw-type-card p { color:#666; font-size:13px; margin:0; line-height:1.5; }
  .cw-type-card .tag-line { background:#fff1f2; color:#be123c; font-size:10px; font-weight:800; padding:3px 8px; border-radius:10px; display:inline-block; margin-top:10px; letter-spacing:.5px; }

  /* PROCESS / TIMELINE */
  .cw-process { background:#0a0a23; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .cw-process:before { content:""; position:absolute; top:-50%; right:-10%; width:600px; height:600px; background:radial-gradient(circle,#e11d48 0%,transparent 70%); opacity:.18; border-radius:50%; }
  .cw-process .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .cw-process .head .eyebrow { color:#e11d48; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .cw-process .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .process-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1100px; margin:0 auto; position:relative; z-index:2; }
  @media(max-width:991px){ .process-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .process-grid { grid-template-columns:repeat(2,1fr); } }
  .ps-step { background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(225,29,72,.3); border-radius:16px; padding:22px 14px; text-align:center; transition:.3s; position:relative; }
  .ps-step:hover { transform:translateY(-4px); border-color:#e11d48; box-shadow:0 20px 40px rgba(225,29,72,.25); }
  .ps-step .num { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:28px; height:28px; border-radius:50%; background:#e11d48; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(225,29,72,.5); }
  .ps-step .ic { font-size:32px; color:#e11d48; margin:10px 0; }
  .ps-step h5 { color:#fff; font-weight:800; font-size:14px; margin:0 0 4px; }
  .ps-step p { color:rgba(255,255,255,.7); font-size:11px; margin:0; line-height:1.4; }

  /* QUALITY RIBBON */
  .cw-quality { background:linear-gradient(135deg,#fff1f2,#ffe4e6); padding:30px 0; }
  .cw-quality .item { text-align:center; padding:6px 10px; border-right:1px dashed rgba(190,18,60,.2); }
  .cw-quality .item:last-child { border-right:0; }
  .cw-quality .item i { font-size:28px; color:#e11d48; }
  .cw-quality .item .val { font-size:20px; font-weight:800; margin-top:6px; color:#0a0a23; }
  .cw-quality .item .lbl { font-size:12px; color:#be123c; font-weight:700; letter-spacing:.5px; }

  /* STATS */
  .cw-stats { background:linear-gradient(135deg,#e11d48,#be123c); color:#fff; padding:50px 0; }
  .cw-stat { text-align:center; padding:10px; }
  .cw-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .cw-stat .num.pct:after { content:"%"; }
  .cw-stat .num.x:after { content:"×"; }
  .cw-stat .num.plus:after { content:"+"; }
  .cw-stat .num.k:after { content:"K+"; }
  .cw-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#e11d48,#be123c); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#f97316,#c2410c); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(225,29,72,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#ffe4e6; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(225,29,72,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#be123c; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .cw-cta { background:linear-gradient(135deg,#0a0e1a,#2e050f); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .cw-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#e11d48 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .cw-cta .container { position:relative; z-index:2; }
  .cw-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .cw-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .cw-cta .btn-rose { background:linear-gradient(135deg,#e11d48,#be123c); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(225,29,72,.35); border:none; }
  .cw-cta .btn-rose:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .cw-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .cw-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .cw-hero h1 { font-size:32px; } .doc-wrap { margin-top:40px; } }

/* ===== PAGE: SEO Marketing (so-) ===== */
.so-section { padding:70px 0; }
  .so-section-title { text-align:center; margin-bottom:45px; }
  .so-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .so-section-title h2 { font-weight:800; margin-top:8px; }
  .so-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  .so-hero { padding:60px 0 40px; background:#f7f9fc; }
  .so-hero .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .so-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; }
  .so-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .so-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  .serp { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 22px 50px rgba(10,10,35,.15); border:1px solid #eef0f5; }
  .serp .browser { background:#f2f4f8; padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid #e5e8ef; }
  .serp .browser .dot { width:10px; height:10px; border-radius:50%; }
  .serp .d1 { background:#ff5f56; } .serp .d2 { background:#ffbd2e; } .serp .d3 { background:#27c93f; }
  .serp .browser .url { flex:1; background:#fff; border-radius:20px; padding:6px 12px; font-size:12px; color:#666; margin-left:12px; border:1px solid #e5e8ef; }
  .serp .body { padding:20px; }
  .serp .search-bar { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dfe1e5; border-radius:24px; padding:8px 16px; margin-bottom:16px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
  .serp .search-bar i { color:#9aa0a6; }
  .serp .search-bar .q { flex:1; font-size:13px; color:#333; }
  .serp .result { margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed #eef0f5; }
  .serp .result:last-child { border-bottom:0; }
  .serp .result.you { background:#eaf2fb; border:1px solid #c8d9ed; border-radius:10px; padding:12px; position:relative; }
  .serp .result.you:before { content:"#1"; position:absolute; top:-10px; left:12px; background:#2e6cb8; color:#fff; font-size:11px; font-weight:800; padding:2px 10px; border-radius:10px; }
  .serp .result .link-url { color:#006621; font-size:12px; }
  .serp .result h6 { color:#1a0dab; font-size:15px; font-weight:500; margin:4px 0; }
  .serp .result p { color:#4d5156; font-size:12px; margin:0; line-height:1.5; }

  .so-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .so-stat { text-align:center; padding:10px; }
  .so-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .so-stat .num.pct:after { content:"%"; }
  .so-stat .num.x:after { content:"×"; }
  .so-stat .num.plus:after { content:"+"; }
  .so-stat .label { margin-top:6px; font-size:13px; opacity:.9; }

  .rank-mock { background:#fff; border:1px solid #eef0f5; border-radius:14px; padding:24px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
  .rank-mock h5 { font-weight:800; margin:0 0 4px; font-size:16px; }
  .rank-mock small { color:#888; font-size:12px; }
  .rank-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed #eef0f5; font-size:13px; }
  .rank-row:last-child { border-bottom:0; }
  .rank-row .kw { flex:1; color:#333; font-weight:600; }
  .rank-row .was { color:#888; text-decoration:line-through; }
  .rank-row .now { color:#27a65a; font-weight:800; }
  .rank-row .arrow { color:#27a65a; }

  /* SEO service cards — accent-top */
  .svc-card {
    position:relative; background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:32px 24px; height:100%; margin-bottom:24px; transition:.35s; overflow:hidden;
  }
  .svc-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:4px;
    background:var(--primary,#2563EB); transform:scaleX(0); transform-origin:left;
    transition:transform .4s ease; border-radius:14px 14px 0 0;
  }
  .svc-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(37,99,235,.12); }
  .svc-card:hover::before { transform:scaleX(1); }
  .svc-card__icon {
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#eef4ff; color:var(--primary,#2563EB); font-size:22px; margin-bottom:18px; transition:.3s;
  }
  .svc-card:hover .svc-card__icon { background:var(--primary,#2563EB); color:#fff; }
  .svc-card h5 { font-size:16px; font-weight:700; color:#111; margin:0 0 8px; }
  .svc-card p { color:#666; font-size:13px; line-height:1.65; margin:0; }

  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#eaf2fb; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#2e6cb8; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  .so-cta { background:linear-gradient(135deg,#0a0e1a,#051a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .so-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#2563EB 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .so-cta .container { position:relative; z-index:2; }
  .so-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .so-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .so-cta .btn-light-outline { background:linear-gradient(135deg,#2563EB,#1D4ED8); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(37,99,235,.35); border:none; }
  .so-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .so-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .so-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .so-hero h1 { font-size:32px; } .serp { margin-top:28px; } }

/* ===== PAGE: SMO Marketing (smo-) ===== */
.smo-section { padding:70px 0; }
  .smo-section-title { text-align:center; margin-bottom:45px; }
  .smo-section-title .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .smo-section-title h2 { font-weight:800; margin-top:8px; }
  .smo-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  .smo-hero { padding:60px 0 40px; background:#f7f9fc; position:relative; overflow:hidden; }
  .smo-hero .eyebrow { color:#2e6cb8; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .smo-hero h1 { font-weight:800; line-height:1.2; margin-bottom:18px; font-size:40px; }
  .smo-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }

  /* Fan of phone mockups showing different social feeds */
  .social-fan { position:relative; height:520px; display:flex; align-items:center; justify-content:center; }
  .sp {
    position:absolute; width:220px; height:440px; border-radius:36px;
    background:#fff; border:10px solid #0a0a23; overflow:hidden;
    box-shadow:0 22px 48px rgba(10,10,35,.25);
    transition:transform .4s ease;
  }
  .sp:before { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:60px; height:12px; background:#0a0a23; border-radius:0 0 12px 12px; }
  .sp .app-head { padding:24px 14px 10px; display:flex; align-items:center; gap:8px; }
  .sp .app-head .logo { font-size:18px; }
  .sp .app-head .name { font-weight:700; font-size:13px; }
  .sp .post-img { height:230px; overflow:hidden; background:#eaf2fb; }
  .sp .post-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .sp .post-meta { padding:8px 14px; display:flex; gap:14px; color:#333; font-size:13px; }
  .sp .post-meta i { color:#2e6cb8; }
  .sp .post-caption { padding:0 14px 12px; font-size:11px; color:#333; }
  .sp .post-caption b { color:#2e6cb8; }
  .sp.left  { transform:rotate(-10deg) translate(-80px, 8px); z-index:1; }
  .sp.right { transform:rotate(10deg)  translate(80px, 8px);  z-index:1; }
  .sp.mid   { z-index:3; transform:translateY(-6px) scale(1.04); }
  .sp:hover { z-index:4; transform:translateY(-16px) scale(1.06); }
  .sp.left:hover  { transform:rotate(-10deg) translate(-80px, -4px) scale(1.05); }
  .sp.right:hover { transform:rotate(10deg)  translate(80px, -4px)  scale(1.05); }

  /* Feed tiles with brand colors */
  .sp.ig .app-head .logo { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .sp.fb .app-head .logo { color:#1877f2; }
  .sp.li .app-head .logo { color:#0a66c2; }

  .smo-stats { background:linear-gradient(135deg,#2e6cb8,#4a8ad2); color:#fff; padding:40px 0; }
  .smo-stat { text-align:center; padding:10px; }
  .smo-stat .num { font-size:36px; font-weight:800; line-height:1; color:#fff; }
  .smo-stat .num.m:after { content:"M+"; font-size:22px; }
  .smo-stat .num.plus:after { content:"+"; }
  .smo-stat .num.pct:after { content:"%"; }
  .smo-stat .label { margin-top:6px; font-size:13px; opacity:.9; }

  .plat-card {
    background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:28px 22px; text-align:center; height:100%;
    transition:.35s; margin-bottom:24px;
  }
  .plat-card:hover { transform:translateY(-6px); border-color:#2e6cb8; box-shadow:0 20px 40px rgba(46,108,184,.18); }
  .plat-card .ic {
    width:64px; height:64px; margin:0 auto 14px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff;
  }
  .plat-card.ig .ic { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
  .plat-card.fb .ic { background:#1877f2; }
  .plat-card.li .ic { background:#0a66c2; }
  .plat-card.yt .ic { background:#ff0000; }
  .plat-card.tw .ic { background:#000; }
  .plat-card.tk .ic { background:#010101; }
  .plat-card.pn .ic { background:#e60023; }
  .plat-card.wa .ic { background:#25d366; }
  .plat-card h5 { font-size:15px; font-weight:700; color:#111; margin:0 0 4px; }
  .plat-card p { color:#666; font-size:12px; line-height:1.6; margin:0; }

  /* Service cards — accent-top */
  .svc-card {
    position:relative; background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:32px 24px; height:100%; margin-bottom:24px; transition:.35s; overflow:hidden;
  }
  .svc-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:4px;
    background:var(--primary,#2563EB); transform:scaleX(0); transform-origin:left;
    transition:transform .4s ease; border-radius:14px 14px 0 0;
  }
  .svc-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(37,99,235,.12); }
  .svc-card:hover::before { transform:scaleX(1); }
  .svc-card__icon {
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#eef4ff; color:var(--primary,#2563EB); font-size:22px; margin-bottom:18px; transition:.3s;
  }
  .svc-card:hover .svc-card__icon { background:var(--primary,#2563EB); color:#fff; }
  .svc-card h5 { font-size:16px; font-weight:700; color:#111; margin:0 0 8px; }
  .svc-card p { color:#666; font-size:13px; line-height:1.65; margin:0; }

  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#eaf2fb; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:1/1; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(46,108,184,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#2e6cb8; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0; font-size:15px; font-weight:700; }

  .smo-cta { background:linear-gradient(135deg,#0a0e1a,#2e051a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .smo-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .smo-cta .container { position:relative; z-index:2; }
  .smo-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .smo-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .smo-cta .btn-light-outline { background:linear-gradient(135deg,#ec4899,#db2777); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(236,72,153,.35); border:none; }
  .smo-cta .btn-light-outline:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .smo-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .smo-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .smo-hero h1 { font-size:32px; } .social-fan { height:480px; margin-top:30px; } }
  @media (max-width:575px){ .social-fan { height:420px; } .sp { width:160px; height:320px; border-width:8px; } .sp.left { transform:rotate(-10deg) translate(-60px, 6px); } .sp.right { transform:rotate(10deg) translate(60px, 6px); } .sp .post-img { height:160px; } }

/* ===== PAGE: PPC Management (pp-) ===== */
.pp-section { padding:70px 0; }
  .pp-section-title { text-align:center; margin-bottom:45px; }
  .pp-section-title .eyebrow { color:#f97316; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .pp-section-title h2 { font-weight:800; margin-top:8px; }
  .pp-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .pp-hero { padding:60px 0 50px; background:linear-gradient(135deg,#fff7ed 0%,#fef3c7 100%); position:relative; overflow:hidden; }
  .pp-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#f97316 0%,transparent 70%); opacity:.18; border-radius:50%; }
  .pp-hero .eyebrow { color:#f97316; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .pp-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .pp-hero h1 span { color:#f97316; }
  .pp-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .pp-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* GOOGLE AD MOCKUP */
  .ad-mock { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 22px 50px rgba(10,10,35,.18); border:1px solid #eef0f5; position:relative; z-index:2; }
  .ad-mock .browser { background:#f2f4f8; padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid #e5e8ef; }
  .ad-mock .browser .dot { width:10px; height:10px; border-radius:50%; }
  .ad-mock .d1 { background:#ff5f56; } .ad-mock .d2 { background:#ffbd2e; } .ad-mock .d3 { background:#27c93f; }
  .ad-mock .browser .url { flex:1; background:#fff; border-radius:20px; padding:6px 12px; font-size:12px; color:#666; margin-left:12px; border:1px solid #e5e8ef; }
  .ad-mock .body { padding:20px; }
  .ad-mock .search-bar { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dfe1e5; border-radius:24px; padding:8px 16px; margin-bottom:18px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
  .ad-mock .search-bar i.g { color:#4285f4; font-size:16px; }
  .ad-mock .search-bar .q { flex:1; font-size:13px; color:#333; }
  .ad-mock .ad { padding:12px; border-radius:10px; margin-bottom:10px; background:#fff8f0; border:1px solid #fde8c9; position:relative; }
  .ad-mock .ad.you { background:linear-gradient(135deg,#fff7ed,#fef3c7); border:1px solid #f97316; box-shadow:0 6px 18px rgba(249,115,22,.18); }
  .ad-mock .ad .tag { display:inline-block; background:#0a0a23; color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:4px; letter-spacing:.5px; margin-right:8px; }
  .ad-mock .ad.you .tag { background:#f97316; }
  .ad-mock .ad .link-url { color:#006621; font-size:12px; display:inline-block; }
  .ad-mock .ad h6 { color:#1a0dab; font-size:15px; font-weight:600; margin:4px 0; }
  .ad-mock .ad p { color:#4d5156; font-size:12px; margin:0; line-height:1.5; }
  .ad-mock .ad .cta-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
  .ad-mock .ad .cta-row span { font-size:11px; color:#1a0dab; text-decoration:underline; }

  /* PLATFORMS */
  .pp-platforms { background:#0a0a23; color:#fff; padding:50px 0; }
  .pp-platforms .head { text-align:center; margin-bottom:30px; }
  .pp-platforms .head .eyebrow { color:#f97316; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .pp-platforms .head h3 { color:#fff; font-weight:800; margin-top:8px; font-size:28px; }
  .platform-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
  .platform-tile { background:#fff; border-radius:14px; padding:22px 10px; text-align:center; transition:.3s; cursor:pointer; }
  .platform-tile:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(249,115,22,.35); }
  .platform-tile img { height:48px; width:auto; object-fit:contain; margin-bottom:10px; }
  .platform-tile .fa-logo { font-size:44px; margin-bottom:10px; display:block; }
  .platform-tile .fa-insta { color:#e4405f; }
  .platform-tile .fa-linkedin { color:#0077b5; }
  .platform-tile span { display:block; font-size:12px; font-weight:700; color:#0a0a23; letter-spacing:.5px; }
  @media(max-width:991px){ .platform-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .platform-grid { grid-template-columns:repeat(2,1fr); } }

  /* AD FORMATS GALLERY */
  .format-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; }
  .format-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(249,115,22,.2); }
  .format-card .visual { height:230px; display:flex; align-items:center; justify-content:center; padding:18px; position:relative; overflow:hidden; }
  .format-card .visual.search { background:linear-gradient(135deg,#e8f0fe,#d2e3fc); }
  .format-card .visual.display { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .format-card .visual.social { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .format-card .visual.video { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .format-card .visual.shop { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .format-card .visual.remarketing { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .format-card .visual .mini { background:#fff; border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.12); width:100%; }
  .format-card .visual .mini .line { height:8px; background:#e5e7eb; border-radius:4px; margin:6px 0; }
  .format-card .visual .mini .line.t { background:#1a0dab; height:10px; width:75%; }
  .format-card .visual .mini .line.u { background:#27a65a; height:7px; width:50%; }
  .format-card .visual .mini .img-ph { height:90px; background:linear-gradient(135deg,#f97316,#ea580c); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; }
  .format-card .visual .mini .btn-ph { display:inline-block; background:#f97316; color:#fff; font-size:11px; font-weight:700; padding:6px 14px; border-radius:20px; margin-top:8px; }
  .format-card .visual .mini .play { width:56px; height:56px; background:rgba(0,0,0,.7); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
  .format-card .body { padding:18px 20px; }
  .format-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .format-card p { color:#666; font-size:13px; margin:0; line-height:1.6; }

  /* DASHBOARD MOCKUP */
  .pp-dash { background:#f7f9fc; }
  .dash-mock { background:#fff; border-radius:16px; padding:26px; box-shadow:0 12px 36px rgba(10,10,35,.1); border:1px solid #eef0f5; }
  .dash-mock .dash-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #eef0f5; }
  .dash-mock .dash-head h5 { margin:0; font-weight:800; font-size:16px; color:#0a0a23; }
  .dash-mock .dash-head .live-dot { width:8px; height:8px; border-radius:50%; background:#27a65a; display:inline-block; margin-right:6px; animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
  @media(max-width:767px){ .kpi-grid { grid-template-columns:repeat(2,1fr); } }
  .kpi { background:linear-gradient(135deg,#fff7ed,#fef3c7); border-radius:12px; padding:16px; border:1px solid #fde8c9; }
  .kpi .label { font-size:11px; text-transform:uppercase; color:#92400e; font-weight:700; letter-spacing:.5px; }
  .kpi .value { font-size:24px; font-weight:800; color:#0a0a23; margin:4px 0 2px; }
  .kpi .trend { font-size:11px; color:#27a65a; font-weight:700; }
  .kpi .trend i { margin-right:3px; }
  .chart-bars { display:flex; align-items:flex-end; gap:8px; height:140px; padding:14px; background:#fafbfd; border-radius:12px; border:1px dashed #e5e7eb; }
  .chart-bars .bar { flex:1; background:linear-gradient(to top,#f97316,#fbbf24); border-radius:6px 6px 0 0; position:relative; transition:.4s; }
  .chart-bars .bar:hover { transform:scaleY(1.05); }

  /* STATS */
  .pp-stats { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; padding:50px 0; }
  .pp-stat { text-align:center; padding:10px; }
  .pp-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .pp-stat .num.pct:after { content:"%"; }
  .pp-stat .num.x:after { content:"×"; }
  .pp-stat .num.plus:after { content:"+"; }
  .pp-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS — image tiles */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#f97316,#ea580c); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#f43f5e,#be123c); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#3b82f6,#1e40af); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(249,115,22,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#fef3c7; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(249,115,22,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#f97316; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .pp-cta { background:linear-gradient(135deg,#0a0e1a,#2e1505); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .pp-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#f97316 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .pp-cta .container { position:relative; z-index:2; }
  .pp-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .pp-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .pp-cta .btn-orange { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(249,115,22,.35); border:none; }
  .pp-cta .btn-orange:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .pp-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .pp-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .pp-hero h1 { font-size:32px; } .ad-mock { margin-top:28px; } }

/* ===== PAGE: Email Marketing (em-) ===== */
.em-section { padding:70px 0; }
  .em-section-title { text-align:center; margin-bottom:45px; }
  .em-section-title .eyebrow { color:#6366f1; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .em-section-title h2 { font-weight:800; margin-top:8px; }
  .em-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .em-hero { padding:60px 0 50px; background:linear-gradient(135deg,#eef2ff 0%,#f5f3ff 100%); position:relative; overflow:hidden; }
  .em-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#6366f1 0%,transparent 70%); opacity:.18; border-radius:50%; }
  .em-hero .eyebrow { color:#6366f1; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .em-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .em-hero h1 span { color:#6366f1; }
  .em-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .em-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* INBOX MOCKUP */
  .inbox { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 22px 50px rgba(10,10,35,.18); border:1px solid #eef0f5; position:relative; z-index:2; }
  .inbox .inbox-head { background:#f5f3ff; padding:14px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e5e7eb; }
  .inbox .inbox-head .ic { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
  .inbox .inbox-head .title { flex:1; font-weight:700; color:#0a0a23; font-size:14px; }
  .inbox .inbox-head .badge-count { background:#ef4444; color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; }
  .inbox .row-mail { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #f1f5f9; transition:.2s; cursor:pointer; }
  .inbox .row-mail:hover { background:#fafafa; }
  .inbox .row-mail.unread { background:#fff; border-left:3px solid #6366f1; }
  .inbox .row-mail.you { background:linear-gradient(90deg,#eef2ff,#f5f3ff); border-left:3px solid #6366f1; }
  .inbox .row-mail .av { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
  .inbox .row-mail .av.a1 { background:linear-gradient(135deg,#6366f1,#8b5cf6); }
  .inbox .row-mail .av.a2 { background:linear-gradient(135deg,#f97316,#ea580c); }
  .inbox .row-mail .av.a3 { background:linear-gradient(135deg,#10b981,#059669); }
  .inbox .row-mail .av.a4 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .inbox .row-mail .mail-body { flex:1; min-width:0; }
  .inbox .row-mail .sender { font-size:13px; font-weight:700; color:#0a0a23; }
  .inbox .row-mail.you .sender:after { content:"★"; color:#fbbf24; margin-left:6px; }
  .inbox .row-mail .subj { font-size:13px; color:#0a0a23; font-weight:600; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inbox .row-mail.you .subj { color:#6366f1; }
  .inbox .row-mail .snippet { font-size:12px; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inbox .row-mail .time { font-size:11px; color:#94a3b8; flex-shrink:0; }
  .inbox .row-mail .tag-pill { background:#6366f1; color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; margin-right:6px; text-transform:uppercase; letter-spacing:.5px; }

  /* PROVIDERS */
  .em-providers { background:#0a0a23; color:#fff; padding:50px 0; }
  .em-providers .head { text-align:center; margin-bottom:30px; }
  .em-providers .head .eyebrow { color:#8b5cf6; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .em-providers .head h3 { color:#fff; font-weight:800; margin-top:8px; font-size:28px; }
  .provider-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
  .provider-tile { background:#fff; border-radius:14px; padding:22px 10px; text-align:center; transition:.3s; cursor:pointer; }
  .provider-tile:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(139,92,246,.35); }
  .provider-tile .fa-logo { font-size:44px; margin-bottom:10px; display:block; }
  .provider-tile .fa-gmail { color:#ea4335; }
  .provider-tile .fa-outlook { color:#0078d4; }
  .provider-tile .fa-apple { color:#0a0a23; }
  .provider-tile .fa-yahoo { color:#720e9e; }
  .provider-tile .fa-mailchimp { color:#ffe01b; background:#0a0a23; padding:8px; border-radius:50%; width:52px; height:52px; line-height:36px; margin:0 auto 10px; }
  .provider-tile .fa-sendgrid { color:#1a82e2; }
  .provider-tile span { display:block; font-size:12px; font-weight:700; color:#0a0a23; letter-spacing:.5px; }
  @media(max-width:991px){ .provider-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .provider-grid { grid-template-columns:repeat(2,1fr); } }

  /* TEMPLATE GALLERY */
  .tmpl-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; }
  .tmpl-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(99,102,241,.22); }
  .tmpl-card .preview { height:260px; padding:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .tmpl-card .preview.newsletter { background:linear-gradient(135deg,#eef2ff,#e0e7ff); }
  .tmpl-card .preview.promo { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .tmpl-card .preview.welcome { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .tmpl-card .preview.cart { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .tmpl-card .preview.drip { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .tmpl-card .preview.reeng { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .tmpl-card .env { background:#fff; border-radius:10px; padding:14px; box-shadow:0 10px 28px rgba(0,0,0,.12); width:100%; max-width:240px; }
  .tmpl-card .env .banner-ph { height:70px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; margin-bottom:10px; }
  .tmpl-card .env .banner-ph.p1 { background:linear-gradient(135deg,#6366f1,#8b5cf6); }
  .tmpl-card .env .banner-ph.p2 { background:linear-gradient(135deg,#f97316,#ea580c); }
  .tmpl-card .env .banner-ph.p3 { background:linear-gradient(135deg,#10b981,#059669); }
  .tmpl-card .env .banner-ph.p4 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .tmpl-card .env .banner-ph.p5 { background:linear-gradient(135deg,#ec4899,#db2777); }
  .tmpl-card .env .banner-ph.p6 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .tmpl-card .env .line { height:7px; background:#e5e7eb; border-radius:4px; margin:5px 0; }
  .tmpl-card .env .line.t { background:#0a0a23; height:9px; width:70%; }
  .tmpl-card .env .btn-ph { display:inline-block; color:#fff; font-size:10px; font-weight:700; padding:6px 14px; border-radius:20px; margin-top:8px; }
  .tmpl-card .env .btn-ph.p1 { background:#6366f1; }
  .tmpl-card .env .btn-ph.p2 { background:#f97316; }
  .tmpl-card .env .btn-ph.p3 { background:#10b981; }
  .tmpl-card .env .btn-ph.p4 { background:#ef4444; }
  .tmpl-card .env .btn-ph.p5 { background:#ec4899; }
  .tmpl-card .env .btn-ph.p6 { background:#06b6d4; }
  .tmpl-card .body { padding:18px 20px; }
  .tmpl-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .tmpl-card p { color:#666; font-size:13px; margin:0; line-height:1.6; }

  /* DASHBOARD */
  .em-dash { background:#f7f9fc; }
  .dash-mock { background:#fff; border-radius:16px; padding:26px; box-shadow:0 12px 36px rgba(10,10,35,.1); border:1px solid #eef0f5; }
  .dash-mock .dash-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #eef0f5; }
  .dash-mock .dash-head h5 { margin:0; font-weight:800; font-size:16px; color:#0a0a23; }
  .dash-mock .dash-head .live-dot { width:8px; height:8px; border-radius:50%; background:#10b981; display:inline-block; margin-right:6px; animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
  @media(max-width:767px){ .kpi-grid { grid-template-columns:repeat(2,1fr); } }
  .kpi { background:linear-gradient(135deg,#eef2ff,#f5f3ff); border-radius:12px; padding:16px; border:1px solid #e0e7ff; }
  .kpi .label { font-size:11px; text-transform:uppercase; color:#4f46e5; font-weight:700; letter-spacing:.5px; }
  .kpi .value { font-size:24px; font-weight:800; color:#0a0a23; margin:4px 0 2px; }
  .kpi .trend { font-size:11px; color:#10b981; font-weight:700; }
  .kpi .trend i { margin-right:3px; }
  .funnel-viz { padding:14px; background:#fafbfd; border-radius:12px; border:1px dashed #e5e7eb; }
  .funnel-row { display:flex; align-items:center; gap:12px; padding:8px 0; font-size:13px; }
  .funnel-row .lbl { flex:0 0 90px; font-weight:700; color:#0a0a23; font-size:12px; }
  .funnel-row .bar-wrap { flex:1; height:22px; background:#eef2ff; border-radius:11px; overflow:hidden; }
  .funnel-row .bar-fill { height:100%; border-radius:11px; display:flex; align-items:center; justify-content:flex-end; color:#fff; font-size:11px; font-weight:700; padding-right:10px; }
  .funnel-row .bar-fill.f1 { background:linear-gradient(90deg,#6366f1,#8b5cf6); width:100%; }
  .funnel-row .bar-fill.f2 { background:linear-gradient(90deg,#8b5cf6,#a855f7); width:72%; }
  .funnel-row .bar-fill.f3 { background:linear-gradient(90deg,#a855f7,#d946ef); width:45%; }
  .funnel-row .bar-fill.f4 { background:linear-gradient(90deg,#d946ef,#ec4899); width:28%; }
  .funnel-row .bar-fill.f5 { background:linear-gradient(90deg,#ec4899,#f43f5e); width:12%; }

  /* STATS */
  .em-stats { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; padding:50px 0; }
  .em-stat { text-align:center; padding:10px; }
  .em-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .em-stat .num.pct:after { content:"%"; }
  .em-stat .num.x:after { content:"×"; }
  .em-stat .num.plus:after { content:"+"; }
  .em-stat .num.b:after { content:"B"; }
  .em-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#6366f1,#4f46e5); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#f97316,#ea580c); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(99,102,241,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#eef2ff; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(99,102,241,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#6366f1; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .em-cta { background:linear-gradient(135deg,#0a0e1a,#0f052e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .em-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#6366f1 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .em-cta .container { position:relative; z-index:2; }
  .em-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .em-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .em-cta .btn-indigo { background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(99,102,241,.35); border:none; }
  .em-cta .btn-indigo:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .em-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .em-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .em-hero h1 { font-size:32px; } .inbox { margin-top:28px; } }

/* ===== PAGE: Content Marketing (cm-) ===== */
.cm-section { padding:70px 0; }
  .cm-section-title { text-align:center; margin-bottom:45px; }
  .cm-section-title .eyebrow { color:#db2777; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .cm-section-title h2 { font-weight:800; margin-top:8px; }
  .cm-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .cm-hero { padding:60px 0 50px; background:linear-gradient(135deg,#fdf2f8 0%,#fce7f3 100%); position:relative; overflow:hidden; }
  .cm-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .cm-hero .eyebrow { color:#db2777; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .cm-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .cm-hero h1 span { color:#ec4899; }
  .cm-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .cm-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* STACKED CONTENT VISUAL */
  .stack-wrap { position:relative; height:340px; perspective:1200px; }
  .stack-card { position:absolute; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 22px 50px rgba(236,72,153,.25); border:1px solid #fce7f3; width:78%; transition:.5s; }
  .stack-card .top-img { height:140px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:42px; }
  .stack-card .top-img.c1 { background:linear-gradient(135deg,#ec4899,#db2777); }
  .stack-card .top-img.c2 { background:linear-gradient(135deg,#a855f7,#7c3aed); }
  .stack-card .top-img.c3 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .stack-card .cb { padding:14px 18px; }
  .stack-card .cat { display:inline-block; background:#ec4899; color:#fff; font-size:10px; font-weight:800; letter-spacing:1px; padding:3px 9px; border-radius:10px; text-transform:uppercase; margin-bottom:6px; }
  .stack-card h4 { margin:0 0 8px; font-size:15px; font-weight:800; color:#0a0a23; line-height:1.35; }
  .stack-card .meta { color:#94a3b8; font-size:11px; display:flex; gap:10px; align-items:center; }
  .stack-card .meta i { margin-right:3px; color:#ec4899; }
  .stack-card.s1 { top:0; right:0; z-index:3; transform:rotate(2deg); }
  .stack-card.s2 { top:40px; right:40px; z-index:2; transform:rotate(-3deg); opacity:.85; }
  .stack-card.s3 { top:80px; right:80px; z-index:1; transform:rotate(5deg); opacity:.7; }
  .stack-card.s1:hover { transform:rotate(0) translateY(-6px); z-index:4; }

  /* CONTENT TYPES GALLERY */
  .ct-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); }
  .ct-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(236,72,153,.2); }
  .ct-card .visual { height:220px; display:flex; align-items:center; justify-content:center; padding:18px; position:relative; overflow:hidden; }
  .ct-card .visual.blog { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .ct-card .visual.video { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .ct-card .visual.infographic { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .ct-card .visual.ebook { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .ct-card .visual.podcast { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .ct-card .visual.social { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .ct-card .mock { background:#fff; border-radius:10px; padding:12px; box-shadow:0 10px 28px rgba(0,0,0,.12); max-width:230px; width:100%; }
  .ct-card .mock .ph { height:80px; border-radius:8px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; position:relative; }
  .ct-card .mock .ph.p1 { background:linear-gradient(135deg,#ec4899,#db2777); }
  .ct-card .mock .ph.p2 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .ct-card .mock .ph.p3 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .ct-card .mock .ph.p4 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .ct-card .mock .ph.p5 { background:linear-gradient(135deg,#10b981,#059669); }
  .ct-card .mock .ph.p6 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .ct-card .mock .ph .play { position:absolute; width:40px; height:40px; background:rgba(0,0,0,.65); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; }
  .ct-card .mock .line { height:7px; background:#e5e7eb; border-radius:4px; margin:5px 0; }
  .ct-card .mock .line.t { background:#0a0a23; height:9px; width:75%; }
  .ct-card .mock .bars { display:flex; align-items:flex-end; gap:5px; height:50px; padding:6px 0; }
  .ct-card .mock .bars span { flex:1; border-radius:3px 3px 0 0; }
  .ct-card .mock .wave { display:flex; align-items:center; gap:3px; height:40px; justify-content:center; }
  .ct-card .mock .wave span { width:3px; background:#10b981; border-radius:2px; }
  .ct-card .body { padding:18px 20px; }
  .ct-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .ct-card p { color:#666; font-size:13px; margin:0; line-height:1.6; }

  /* WORKFLOW / TIMELINE */
  .cm-flow { background:#0a0a23; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .cm-flow:before { content:""; position:absolute; top:-50%; right:-10%; width:600px; height:600px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.18; border-radius:50%; }
  .cm-flow .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .cm-flow .head .eyebrow { color:#ec4899; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .cm-flow .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .timeline { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; max-width:1100px; margin:0 auto; position:relative; z-index:2; }
  @media(max-width:991px){ .timeline { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .timeline { grid-template-columns:repeat(2,1fr); } }
  .tl-step { background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(236,72,153,.3); border-radius:16px; padding:22px 14px; text-align:center; transition:.3s; position:relative; }
  .tl-step:hover { transform:translateY(-4px); border-color:#ec4899; box-shadow:0 20px 40px rgba(236,72,153,.25); }
  .tl-step .num { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:28px; height:28px; border-radius:50%; background:#ec4899; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(236,72,153,.5); }
  .tl-step .ic { font-size:32px; color:#ec4899; margin:10px 0; }
  .tl-step h5 { color:#fff; font-weight:800; font-size:14px; margin:0 0 4px; }
  .tl-step p { color:rgba(255,255,255,.7); font-size:11px; margin:0; line-height:1.4; }

  /* STATS */
  .cm-stats { background:linear-gradient(135deg,#ec4899,#db2777); color:#fff; padding:50px 0; }
  .cm-stat { text-align:center; padding:10px; }
  .cm-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .cm-stat .num.pct:after { content:"%"; }
  .cm-stat .num.x:after { content:"×"; }
  .cm-stat .num.plus:after { content:"+"; }
  .cm-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#ec4899,#db2777); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#a855f7,#7c3aed); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#6366f1,#4f46e5); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(236,72,153,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#fce7f3; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(236,72,153,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#db2777; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .cm-cta { background:linear-gradient(135deg,#0a0e1a,#2e051a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .cm-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#ec4899 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .cm-cta .container { position:relative; z-index:2; }
  .cm-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .cm-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .cm-cta .btn-pink { background:linear-gradient(135deg,#ec4899,#db2777); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(236,72,153,.35); border:none; }
  .cm-cta .btn-pink:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .cm-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .cm-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .cm-hero h1 { font-size:32px; } .stack-wrap { margin-top:40px; height:320px; } }

/* ===== PAGE: SMS Marketing (sms-) ===== */
.sms-section { padding:70px 0; }
  .sms-section-title { text-align:center; margin-bottom:45px; }
  .sms-section-title .eyebrow { color:#0891b2; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .sms-section-title h2 { font-weight:800; margin-top:8px; }
  .sms-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .sms-hero { padding:60px 0 50px; background:linear-gradient(135deg,#ecfeff 0%,#cffafe 100%); position:relative; overflow:hidden; }
  .sms-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#06b6d4 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .sms-hero .eyebrow { color:#0891b2; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .sms-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .sms-hero h1 span { color:#0891b2; }
  .sms-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .sms-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* PHONE DEVICE MOCKUP */
  .sms-device-wrap { display:flex; justify-content:center; position:relative; z-index:2; }
  .sms-device {
    width:320px; background:#0a0a23; border-radius:44px;
    overflow:hidden; position:relative;
    box-shadow:0 30px 70px rgba(10,10,35,.35), 0 8px 20px rgba(6,182,212,.1);
    display:flex; flex-direction:column;
  }
  /* Notch */
  .sms-device__notch {
    width:100px; height:24px; margin:0 auto;
    background:#0a0a23; border-radius:0 0 18px 18px;
    position:relative; z-index:3;
  }
  /* Status bar */
  .sms-device__statusbar {
    display:flex; justify-content:space-between; align-items:center;
    padding:0 22px 6px; background:#0a0a23;
    color:rgba(255,255,255,.6); font-size:11px; font-weight:600;
  }
  .sms-device__icons { display:flex; gap:6px; font-size:10px; }
  /* App header */
  .sms-device__header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 18px; margin:0 8px; border-radius:14px 14px 0 0;
    background:linear-gradient(180deg,#e0f2fe,#ecfeff);
    color:#0a0a23; font-weight:700; font-size:15px;
  }
  .sms-device__header i { color:#0891b2; font-size:13px; }
  /* Screen with messages */
  .sms-device__screen {
    margin:0 8px; padding:14px 12px 18px;
    background:linear-gradient(180deg,#ecfeff,#f0f9ff);
    min-height:420px; overflow-y:auto;
  }
  /* Home indicator */
  .sms-device__home {
    height:28px; background:#0a0a23;
    display:flex; align-items:center; justify-content:center;
  }
  .sms-device__home::after {
    content:''; width:52px; height:4px;
    background:rgba(255,255,255,.25); border-radius:4px;
  }
  .sms-bubble { background:#fff; border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:0 4px 14px rgba(0,0,0,.08); position:relative; }
  .sms-bubble.you { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; box-shadow:0 8px 22px rgba(6,182,212,.35); }
  .sms-bubble .sender { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
  .sms-bubble.you .sender { color:rgba(255,255,255,.85); }
  .sms-bubble .msg { font-size:13px; color:#0a0a23; line-height:1.5; margin:0; }
  .sms-bubble.you .msg { color:#fff; }
  .sms-bubble .time { font-size:10px; color:#94a3b8; margin-top:6px; display:block; }
  .sms-bubble.you .time { color:rgba(255,255,255,.75); }
  .sms-bubble .link-in { color:#06b6d4; font-weight:700; text-decoration:underline; }
  .sms-bubble.you .link-in { color:#fef08a; }
  .typing { display:inline-flex; gap:3px; }
  .typing span { width:6px; height:6px; background:#94a3b8; border-radius:50%; animation:bounce 1.2s infinite; }
  .typing span:nth-child(2) { animation-delay:.2s; }
  .typing span:nth-child(3) { animation-delay:.4s; }
  @keyframes bounce { 0%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-4px);} }

  /* STATS ribbon highlight */
  .sms-read-ribbon { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; padding:30px 0; }
  .sms-read-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .sms-read-ribbon .item:last-child { border-right:0; }
  .sms-read-ribbon .big { font-size:32px; font-weight:800; line-height:1; }
  .sms-read-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* USE CASES */
  .uc-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; }
  .uc-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(6,182,212,.22); }
  .uc-card .visual { height:220px; display:flex; align-items:center; justify-content:center; padding:18px; position:relative; overflow:hidden; }
  .uc-card .visual.otp { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .uc-card .visual.promo { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .uc-card .visual.txn { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .uc-card .visual.alert { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .uc-card .visual.remind { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .uc-card .visual.survey { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .uc-card .mini-sms { background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 10px 28px rgba(0,0,0,.15); max-width:230px; width:100%; }
  .uc-card .mini-sms .head { font-size:10px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
  .uc-card .mini-sms .txt { font-size:12px; color:#0a0a23; line-height:1.5; margin:0; }
  .uc-card .mini-sms .otp-code { background:#06b6d4; color:#fff; font-family:monospace; font-size:18px; font-weight:800; padding:6px 14px; border-radius:8px; display:inline-block; letter-spacing:3px; margin:6px 0; }
  .uc-card .mini-sms .highlight { color:#06b6d4; font-weight:700; }
  .uc-card .mini-sms .money { color:#059669; font-weight:800; }
  .uc-card .body { padding:18px 20px; }
  .uc-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .uc-card p { color:#666; font-size:13px; margin:0; line-height:1.6; }

  /* FLOW DIAGRAM — Pipeline */
  .sms-flow { background:#0a0a23; color:#fff; padding:80px 0; position:relative; overflow:hidden; }
  .sms-flow::before {
    content:''; position:absolute; top:-120px; right:-120px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(6,182,212,.12), transparent 70%);
  }
  .sms-flow .head { text-align:center; margin-bottom:56px; position:relative; z-index:2; }
  .sms-flow .head .eyebrow { color:#06b6d4; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .sms-flow .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .sms-flow .head__sub { color:#94a3b8; font-size:15px; margin-top:10px; }
  /* Pipeline layout */
  .sms-pipeline {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
    max-width:1050px; margin:0 auto; position:relative; z-index:2;
  }
  /* Connecting line */
  .sms-pipeline__line {
    position:absolute; top:28px; left:calc(16.66% + 16px); right:calc(16.66% + 16px);
    height:3px; background:linear-gradient(90deg, #06b6d4, #0891b2, #06b6d4);
    border-radius:3px; z-index:1; opacity:.4;
  }
  .sms-pipeline__pulse {
    position:absolute; top:-3px; left:0; width:10px; height:10px;
    background:#06b6d4; border-radius:50%;
    box-shadow:0 0 12px rgba(6,182,212,.7);
    animation:sms-pulse-travel 3s ease-in-out infinite;
  }
  .sms-pipeline__pulse.p2 { animation-delay:1.5s; }
  @keyframes sms-pulse-travel {
    0% { left:0; opacity:0; }
    10% { opacity:1; }
    90% { opacity:1; }
    100% { left:100%; opacity:0; }
  }
  /* Step */
  .sms-step { position:relative; z-index:2; text-align:center; }
  .sms-step__marker {
    width:56px; height:56px; border-radius:50%; margin:0 auto 20px;
    background:linear-gradient(135deg, #06b6d4, #0891b2);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 28px rgba(6,182,212,.4);
    position:relative; z-index:3;
  }
  .sms-step__marker span {
    font-size:22px; font-weight:900; color:#fff; line-height:1;
  }
  .sms-step__card {
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(6,182,212,.2); border-radius:18px;
    padding:28px 22px 22px; backdrop-filter:blur(8px);
    transition:all .35s ease;
  }
  .sms-step:hover .sms-step__card {
    border-color:#06b6d4; transform:translateY(-6px);
    box-shadow:0 24px 48px rgba(6,182,212,.2);
  }
  .sms-step:hover .sms-step__marker {
    box-shadow:0 8px 32px rgba(6,182,212,.6);
    transform:scale(1.1);
  }
  .sms-step__marker { transition:all .35s ease; }
  .sms-step__icon {
    width:48px; height:48px; border-radius:12px; margin:0 auto 16px;
    background:rgba(6,182,212,.1); display:flex;
    align-items:center; justify-content:center;
    font-size:20px; color:#06b6d4;
  }
  .sms-step__card h4 { color:#fff; font-weight:800; font-size:18px; margin:0 0 8px; }
  .sms-step__card p { color:#94a3b8; font-size:13px; line-height:1.65; margin:0 0 14px; }
  .sms-step__tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .sms-step__tags span {
    display:inline-block; padding:4px 10px; border-radius:20px;
    background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2);
    color:#67e8f9; font-size:11px; font-weight:600;
  }
  @media(max-width:767px){
    .sms-pipeline { grid-template-columns:1fr; gap:24px; max-width:400px; }
    .sms-pipeline__line {
      top:28px; bottom:28px; left:28px; right:auto;
      width:3px; height:auto;
    }
    .sms-pipeline__pulse { animation-name:sms-pulse-travel-v; }
    @keyframes sms-pulse-travel-v {
      0% { top:0; left:-3px; opacity:0; }
      10% { opacity:1; }
      90% { opacity:1; }
      100% { top:100%; left:-3px; opacity:0; }
    }
    .sms-step { text-align:left; display:flex; gap:18px; align-items:flex-start; }
    .sms-step__marker { margin:0; flex-shrink:0; width:48px; height:48px; }
    .sms-step__marker span { font-size:18px; }
    .sms-step__card { text-align:left; }
    .sms-step__icon { margin:0 0 12px; }
    .sms-step__tags { justify-content:flex-start; }
  }

  /* STATS band */
  .sms-stats { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; padding:50px 0; }
  .sms-stat { text-align:center; padding:10px; }
  .sms-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .sms-stat .num.pct:after { content:"%"; }
  .sms-stat .num.x:after { content:"×"; }
  .sms-stat .num.plus:after { content:"+"; }
  .sms-stat .num.sec:after { content:"s"; }
  .sms-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#f97316,#ea580c); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#3b82f6,#1e40af); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(6,182,212,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#cffafe; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(6,182,212,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#0891b2; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .sms-cta { background:linear-gradient(135deg,#0a0e1a,#051a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .sms-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#06b6d4 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .sms-cta .container { position:relative; z-index:2; }
  .sms-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .sms-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .sms-cta .btn-cyan { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(6,182,212,.35); border:none; }
  .sms-cta .btn-cyan:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .sms-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .sms-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .sms-hero h1 { font-size:32px; } .sms-device-wrap { margin-top:30px; } .sms-device { width:280px; } }
  @media (max-width:575px){ .sms-device { width:260px; border-radius:36px; } .sms-device__notch { width:80px; height:18px; } .sms-device__screen { min-height:360px; } }

/* ===== PAGE: WhatsApp Marketing (wa-) ===== */
.wa-section { padding:70px 0; }
  .wa-section-title { text-align:center; margin-bottom:45px; }
  .wa-section-title .eyebrow { color:#128c7e; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .wa-section-title h2 { font-weight:800; margin-top:8px; }
  .wa-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .wa-hero { padding:60px 0 50px; background:linear-gradient(135deg,#e8f5e9 0%,#dcfce7 100%); position:relative; overflow:hidden; }
  .wa-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#25d366 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .wa-hero .eyebrow { color:#128c7e; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .wa-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .wa-hero h1 span { color:#25d366; }
  .wa-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .wa-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* WHATSAPP CHAT MOCKUP */
  .wa-phone-wrap { display:flex; justify-content:center; position:relative; z-index:2; }
  .wa-phone { width:320px; background:#0a0a23; border-radius:40px; padding:12px; box-shadow:0 30px 60px rgba(18,140,126,.3); position:relative; }
  .wa-phone:before { content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:20px; background:#0a0a23; border-radius:0 0 16px 16px; z-index:2; }
  .wa-screen { background:#e5ddd5; border-radius:30px; overflow:hidden; min-height:540px; position:relative; }
  .wa-topbar { background:#075e54; color:#fff; padding:34px 16px 12px; display:flex; align-items:center; gap:10px; }
  .wa-topbar .back { color:#fff; opacity:.8; }
  .wa-topbar .ava { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; }
  .wa-topbar .info { flex:1; line-height:1.2; }
  .wa-topbar .info .nm { font-size:14px; font-weight:700; }
  .wa-topbar .info .st { font-size:11px; opacity:.85; }
  .wa-topbar .info .st .online { color:#b3ff9e; }
  .wa-topbar i { font-size:14px; opacity:.8; }
  .wa-chat { padding:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d7cfc3'/%3E%3C/svg%3E") #e5ddd5; min-height:440px; }
  .wa-bubble { max-width:82%; border-radius:10px; padding:8px 12px; margin-bottom:8px; position:relative; font-size:12px; line-height:1.45; color:#0a0a23; box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .wa-bubble.in { background:#fff; border-top-left-radius:2px; }
  .wa-bubble.out { background:#dcf8c6; margin-left:auto; border-top-right-radius:2px; }
  .wa-bubble.out.brand { background:linear-gradient(135deg,#dcf8c6,#b3ffab); }
  .wa-bubble .hd { font-size:11px; font-weight:800; color:#128c7e; display:block; margin-bottom:2px; }
  .wa-bubble .hd i { margin-right:3px; color:#25d366; }
  .wa-bubble .tm { font-size:9px; color:#667781; text-align:right; display:block; margin-top:3px; }
  .wa-bubble .tm i { color:#34b7f1; margin-left:2px; }
  .wa-bubble .media { background:linear-gradient(135deg,#25d366,#128c7e); height:90px; border-radius:6px; margin-bottom:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; }
  .wa-bubble .quick { display:block; background:rgba(18,140,126,.1); color:#128c7e; font-weight:700; text-align:center; padding:6px; border-radius:6px; margin-top:6px; font-size:11px; }
  .wa-bubble .quick i { margin-right:4px; }

  /* STATS ribbon */
  .wa-ribbon { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; padding:30px 0; }
  .wa-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .wa-ribbon .item:last-child { border-right:0; }
  .wa-ribbon .big { font-size:32px; font-weight:800; line-height:1; }
  .wa-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* USE CASES */
  .wa-uc-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; }
  .wa-uc-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(37,211,102,.22); }
  .wa-uc-card .visual { height:230px; display:flex; align-items:center; justify-content:center; padding:18px; position:relative; overflow:hidden; }
  .wa-uc-card .visual.broadcast { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .wa-uc-card .visual.bot { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .wa-uc-card .visual.catalog { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .wa-uc-card .visual.cart { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .wa-uc-card .visual.order { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .wa-uc-card .visual.support { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .wa-uc-card .mini-chat { background:#e5ddd5; border-radius:12px; padding:10px; box-shadow:0 10px 28px rgba(0,0,0,.15); max-width:240px; width:100%; }
  .wa-uc-card .mini-b { background:#dcf8c6; border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:11px; color:#0a0a23; line-height:1.45; box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .wa-uc-card .mini-b.in { background:#fff; }
  .wa-uc-card .mini-b .hd { display:block; font-weight:800; color:#128c7e; font-size:10px; margin-bottom:2px; }
  .wa-uc-card .mini-b .img { height:55px; background:linear-gradient(135deg,#25d366,#128c7e); border-radius:6px; margin-bottom:4px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
  .wa-uc-card .mini-b .btn { display:block; text-align:center; color:#128c7e; font-weight:700; margin-top:4px; font-size:10px; border-top:1px solid rgba(0,0,0,.05); padding-top:4px; }
  .wa-uc-card .body { padding:18px 20px; }
  .wa-uc-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .wa-uc-card p { color:#666; font-size:13px; margin:0; line-height:1.6; }

  /* API FLOW */
  .wa-flow { background:#075e54; color:#fff; padding:80px 0; position:relative; overflow:hidden; }
  .wa-flow::before {
    content:''; position:absolute; top:-120px; right:-120px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(37,211,102,.15), transparent 70%);
  }
  .wa-flow .head { text-align:center; margin-bottom:56px; position:relative; z-index:2; }
  .wa-flow .head .eyebrow { color:#25d366; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .wa-flow .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .wa-flow .head__sub { color:rgba(255,255,255,.65); font-size:15px; margin-top:10px; }
  /* Pipeline layout */
  .wa-pipeline {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
    max-width:1050px; margin:0 auto; position:relative; z-index:2;
  }
  /* Connecting line */
  .wa-pipeline__line {
    position:absolute; top:28px; left:calc(16.66% + 16px); right:calc(16.66% + 16px);
    height:3px; background:linear-gradient(90deg, #25d366, #128c7e, #25d366);
    border-radius:3px; z-index:1; opacity:.4;
  }
  .wa-pipeline__pulse {
    position:absolute; top:-3px; left:0; width:10px; height:10px;
    background:#25d366; border-radius:50%;
    box-shadow:0 0 12px rgba(37,211,102,.7);
    animation:wa-pulse-travel 3s ease-in-out infinite;
  }
  .wa-pipeline__pulse.p2 { animation-delay:1.5s; }
  @keyframes wa-pulse-travel {
    0% { left:0; opacity:0; }
    10% { opacity:1; }
    90% { opacity:1; }
    100% { left:100%; opacity:0; }
  }
  /* Step */
  .wa-step { position:relative; z-index:2; text-align:center; }
  .wa-step__marker {
    width:56px; height:56px; border-radius:50%; margin:0 auto 20px;
    background:linear-gradient(135deg, #25d366, #128c7e);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 28px rgba(37,211,102,.4);
    position:relative; z-index:3; transition:all .35s ease;
  }
  .wa-step__marker span { font-size:22px; font-weight:900; color:#fff; line-height:1; }
  .wa-step__card {
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(37,211,102,.2); border-radius:18px;
    padding:28px 22px 22px; backdrop-filter:blur(8px);
    transition:all .35s ease;
  }
  .wa-step:hover .wa-step__card {
    border-color:#25d366; transform:translateY(-6px);
    box-shadow:0 24px 48px rgba(37,211,102,.2);
  }
  .wa-step:hover .wa-step__marker {
    box-shadow:0 8px 32px rgba(37,211,102,.6); transform:scale(1.1);
  }
  .wa-step__icon {
    width:48px; height:48px; border-radius:12px; margin:0 auto 16px;
    background:rgba(37,211,102,.12); display:flex;
    align-items:center; justify-content:center;
    font-size:20px; color:#25d366;
  }
  .wa-step__card h4 { color:#fff; font-weight:800; font-size:18px; margin:0 0 8px; }
  .wa-step__card p { color:rgba(255,255,255,.7); font-size:13px; line-height:1.65; margin:0 0 14px; }
  .wa-step__tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .wa-step__tags span {
    display:inline-block; padding:4px 10px; border-radius:20px;
    background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.25);
    color:#86efac; font-size:11px; font-weight:600;
  }
  @media(max-width:767px){
    .wa-pipeline { grid-template-columns:1fr; gap:24px; max-width:400px; }
    .wa-pipeline__line {
      top:28px; bottom:28px; left:28px; right:auto;
      width:3px; height:auto;
    }
    .wa-pipeline__pulse { animation-name:wa-pulse-travel-v; }
    @keyframes wa-pulse-travel-v {
      0% { top:0; left:-3px; opacity:0; }
      10% { opacity:1; }
      90% { opacity:1; }
      100% { top:100%; left:-3px; opacity:0; }
    }
    .wa-step { text-align:left; display:flex; gap:18px; align-items:flex-start; }
    .wa-step__marker { margin:0; flex-shrink:0; width:48px; height:48px; }
    .wa-step__marker span { font-size:18px; }
    .wa-step__card { text-align:left; }
    .wa-step__icon { margin:0 0 12px; }
    .wa-step__tags { justify-content:flex-start; }
  }

  /* STATS */
  .wa-stats { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; padding:50px 0; }
  .wa-stat { text-align:center; padding:10px; }
  .wa-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .wa-stat .num.pct:after { content:"%"; }
  .wa-stat .num.x:after { content:"×"; }
  .wa-stat .num.plus:after { content:"+"; }
  .wa-stat .num.b:after { content:"B"; }
  .wa-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#25d366,#128c7e); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#34b7f1,#0284c7); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#f59e0b,#b45309); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(37,211,102,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#dcfce7; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(37,211,102,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#128c7e; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .wa-cta { background:linear-gradient(135deg,#0a0e1a,#051e0a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .wa-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#25d366 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .wa-cta .container { position:relative; z-index:2; }
  .wa-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .wa-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .wa-cta .btn-green { background:linear-gradient(135deg,#25d366,#128c7e); color:#0a0a23; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(37,211,102,.35); border:none; }
  .wa-cta .btn-green:hover { transform:translateY(-2px); color:#0a0a23; text-decoration:none; }
  .wa-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .wa-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .wa-hero h1 { font-size:32px; } .wa-phone-wrap { margin-top:30px; } }

/* ===== PAGE: Inbound Marketing (ib-) ===== */
.ib-section { padding:70px 0; }
  .ib-section-title { text-align:center; margin-bottom:45px; }
  .ib-section-title .eyebrow { color:#d97706; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ib-section-title h2 { font-weight:800; margin-top:8px; }
  .ib-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .ib-hero { padding:60px 0 50px; background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); position:relative; overflow:hidden; }
  .ib-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#f59e0b 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .ib-hero .eyebrow { color:#d97706; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .ib-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .ib-hero h1 span { color:#f59e0b; }
  .ib-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .ib-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* FLYWHEEL */
  .flywheel { position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin:0 auto; }
  .flywheel .ring { position:absolute; inset:0; border-radius:50%; border:3px dashed #f59e0b; opacity:.3; animation:spin 40s linear infinite; }
  @keyframes spin { 100% { transform:rotate(360deg); } }
  .flywheel .core { position:absolute; inset:25%; background:linear-gradient(135deg,#f59e0b,#d97706); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; text-align:center; padding:20px; box-shadow:0 30px 60px rgba(245,158,11,.35); }
  .flywheel .core i { font-size:36px; margin-bottom:6px; }
  .flywheel .core h4 { color:#fff; font-weight:800; margin:0; font-size:18px; }
  .flywheel .core small { opacity:.9; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
  .flywheel .seg { position:absolute; width:120px; background:#fff; border-radius:14px; padding:14px; box-shadow:0 12px 28px rgba(10,10,35,.15); text-align:center; border-top:3px solid; }
  .flywheel .seg i { font-size:26px; margin-bottom:6px; display:block; }
  .flywheel .seg h5 { font-size:14px; font-weight:800; color:#0a0a23; margin:0 0 3px; }
  .flywheel .seg p { font-size:10px; color:#64748b; margin:0; line-height:1.3; }
  .flywheel .seg.attract { top:-4%; left:50%; transform:translateX(-50%); border-color:#f59e0b; }
  .flywheel .seg.attract i { color:#f59e0b; }
  .flywheel .seg.engage { bottom:12%; right:-8%; border-color:#8b5cf6; }
  .flywheel .seg.engage i { color:#8b5cf6; }
  .flywheel .seg.delight { bottom:12%; left:-8%; border-color:#10b981; }
  .flywheel .seg.delight i { color:#10b981; }

  /* FUNNEL */
  .ib-funnel { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#0a0a23; padding:30px 0; }
  .ib-funnel .stage { text-align:center; padding:10px; border-right:1px dashed rgba(217,119,6,.3); }
  .ib-funnel .stage:last-child { border-right:0; }
  .ib-funnel .stage i { font-size:32px; color:#d97706; }
  .ib-funnel .stage .val { font-size:22px; font-weight:800; margin-top:6px; }
  .ib-funnel .stage .lbl { font-size:12px; color:#78350f; font-weight:700; letter-spacing:.5px; }

  /* CONTENT TYPES / TOOLS */
  .ib-tool-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); }
  .ib-tool-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(245,158,11,.22); }
  .ib-tool-card .visual { height:200px; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden; }
  .ib-tool-card .visual.video { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .ib-tool-card .visual.blog { background:linear-gradient(135deg,#fed7aa,#fdba74); }
  .ib-tool-card .visual.ebook { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .ib-tool-card .visual.newsletter { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .ib-tool-card .visual.webinar { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .ib-tool-card .visual.infographic { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .ib-tool-card .visual.social { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .ib-tool-card .visual.interview { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
  .ib-tool-card .visual .icon-big { font-size:80px; opacity:.9; }
  .ib-tool-card .visual .icon-big.v { color:#d97706; }
  .ib-tool-card .visual .icon-big.b { color:#ea580c; }
  .ib-tool-card .visual .icon-big.e { color:#7c3aed; }
  .ib-tool-card .visual .icon-big.n { color:#0891b2; }
  .ib-tool-card .visual .icon-big.w { color:#dc2626; }
  .ib-tool-card .visual .icon-big.i { color:#db2777; }
  .ib-tool-card .visual .icon-big.s { color:#059669; }
  .ib-tool-card .visual .icon-big.in { color:#2563eb; }
  .ib-tool-card .body { padding:18px 20px; text-align:center; }
  .ib-tool-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .ib-tool-card p { color:#666; font-size:13px; margin:0; line-height:1.5; }

  /* STATS */
  .ib-stats { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; padding:50px 0; }
  .ib-stat { text-align:center; padding:10px; }
  .ib-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .ib-stat .num.pct:after { content:"%"; }
  .ib-stat .num.x:after { content:"×"; }
  .ib-stat .num.plus:after { content:"+"; }
  .ib-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#ea580c,#c2410c); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(245,158,11,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#fef3c7; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(245,158,11,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#d97706; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .ib-cta { background:linear-gradient(135deg,#0a0e1a,#2e1a05); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .ib-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#f59e0b 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .ib-cta .container { position:relative; z-index:2; }
  .ib-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .ib-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .ib-cta .btn-amber { background:linear-gradient(135deg,#f59e0b,#d97706); color:#0a0a23; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(245,158,11,.35); border:none; }
  .ib-cta .btn-amber:hover { transform:translateY(-2px); color:#0a0a23; text-decoration:none; }
  .ib-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .ib-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .ib-hero h1 { font-size:32px; } .flywheel { margin-top:40px; max-width:360px; } }

/* ===== PAGE: Bulk SMS Provider (bs-) ===== */
.bs-section { padding:70px 0; }
  .bs-section-title { text-align:center; margin-bottom:45px; }
  .bs-section-title .eyebrow { color:#0369a1; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .bs-section-title h2 { font-weight:800; margin-top:8px; }
  .bs-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .bs-hero { padding:60px 0 50px; background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%); position:relative; overflow:hidden; }
  .bs-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#0ea5e9 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .bs-hero .eyebrow { color:#0369a1; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .bs-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .bs-hero h1 span { color:#0ea5e9; }
  .bs-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .bs-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* CAMPAIGN COMPOSER MOCKUP */
  .composer { background:#fff; border-radius:16px; box-shadow:0 22px 50px rgba(14,165,233,.2); border:1px solid #bae6fd; overflow:hidden; position:relative; z-index:2; }
  .composer .head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; }
  .composer .head .lbl { font-size:14px; font-weight:800; display:flex; align-items:center; gap:8px; }
  .composer .head .st { font-size:11px; font-weight:800; background:rgba(255,255,255,.2); padding:3px 10px; border-radius:12px; letter-spacing:.5px; }
  .composer .body { padding:20px; display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
  @media(max-width:575px){ .composer .body { grid-template-columns:1fr; } }
  .composer .fld { margin-bottom:14px; }
  .composer .fld label { display:block; font-size:11px; color:#64748b; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
  .composer .fld .input { background:#f0f9ff; border:1px solid #bae6fd; border-radius:10px; padding:10px 12px; font-size:13px; color:#0a0a23; }
  .composer .fld .input.pill { display:inline-block; margin-right:5px; margin-bottom:4px; background:#e0f2fe; padding:4px 10px; border-radius:14px; font-size:11px; font-weight:700; color:#0369a1; }
  .composer .fld .input.pill.count { background:#0ea5e9; color:#fff; }
  .composer .text-area { background:#f0f9ff; border:1px solid #bae6fd; border-radius:10px; padding:12px; font-size:12px; color:#0a0a23; line-height:1.55; min-height:110px; }
  .composer .text-area .brand { font-weight:800; color:#0369a1; }
  .composer .text-area .link { color:#0ea5e9; text-decoration:underline; }
  .composer .btn-send { display:block; width:100%; background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; border:none; padding:12px; border-radius:30px; font-weight:800; font-size:13px; letter-spacing:.5px; margin-top:10px; cursor:pointer; box-shadow:0 8px 20px rgba(14,165,233,.35); }
  .composer .preview-phone { background:#0a0a23; border-radius:22px; padding:12px 6px; position:relative; }
  .composer .preview-phone:before { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:54px; height:12px; background:#000; border-radius:0 0 12px 12px; }
  .composer .preview-phone .screen { background:#f0f9ff; border-radius:16px; padding:22px 10px 12px; min-height:260px; }
  .composer .preview-phone .sms { background:#fff; border-radius:10px; padding:8px 10px; font-size:11px; line-height:1.5; color:#0a0a23; box-shadow:0 2px 6px rgba(0,0,0,.06); }
  .composer .preview-phone .sender { font-size:10px; font-weight:800; color:#0369a1; margin-bottom:3px; letter-spacing:.5px; }
  .composer .progress { margin-top:14px; background:#f0f9ff; border-radius:10px; padding:10px 14px; border:1px dashed #bae6fd; }
  .composer .progress .pr-lbl { font-size:11px; color:#0369a1; font-weight:800; display:flex; justify-content:space-between; margin-bottom:6px; }
  .composer .progress .pr-bar { height:6px; background:#e0f2fe; border-radius:3px; overflow:hidden; }
  .composer .progress .pr-fill { height:100%; background:linear-gradient(90deg,#0ea5e9,#06b6d4); width:78%; border-radius:3px; position:relative; overflow:hidden; }
  .composer .progress .pr-fill:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:shine 2s infinite; }
  @keyframes shine { 100% { transform:translateX(100%); } }

  /* SPEED RIBBON */
  .bs-ribbon { background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; padding:30px 0; }
  .bs-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .bs-ribbon .item:last-child { border-right:0; }
  .bs-ribbon .big { font-size:30px; font-weight:800; line-height:1; }
  .bs-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* FEATURES / INTERFACES */
  .bs-feat-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); }
  .bs-feat-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(14,165,233,.22); }
  .bs-feat-card .visual { height:200px; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden; }
  .bs-feat-card .visual.web { background:linear-gradient(135deg,#f0f9ff,#e0f2fe); }
  .bs-feat-card .visual.excel { background:linear-gradient(135deg,#dcfce7,#bbf7d0); }
  .bs-feat-card .visual.api { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .bs-feat-card .visual.schedule { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .bs-feat-card .visual.dlt { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .bs-feat-card .visual.report { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .bs-feat-card .visual .mock { background:#fff; border-radius:10px; padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.12); width:100%; max-width:220px; }
  .bs-feat-card .visual .big-ic { font-size:72px; }
  .bs-feat-card .visual .big-ic.w { color:#0ea5e9; }
  .bs-feat-card .visual .big-ic.e { color:#059669; }
  .bs-feat-card .visual .big-ic.a { color:#7c3aed; }
  .bs-feat-card .visual .big-ic.s { color:#d97706; }
  .bs-feat-card .visual .big-ic.d { color:#dc2626; }
  .bs-feat-card .visual .big-ic.r { color:#db2777; }
  .bs-feat-card .body { padding:18px 20px; }
  .bs-feat-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .bs-feat-card p { color:#666; font-size:13px; margin:0; line-height:1.5; }
  .bs-feat-card .pill { display:inline-block; background:#f0f9ff; color:#0369a1; font-size:10px; font-weight:800; padding:3px 8px; border-radius:10px; letter-spacing:.5px; margin-top:8px; }

  /* FLOW DIAGRAM */
  .bs-flow { background:#0c4a6e; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .bs-flow:before { content:""; position:absolute; top:-30%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,#0ea5e9 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .bs-flow .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .bs-flow .head .eyebrow { color:#7dd3fc; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .bs-flow .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .flow-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; max-width:1100px; margin:0 auto; position:relative; z-index:2; }
  @media(max-width:991px){ .flow-grid { grid-template-columns:1fr; gap:14px; } .flow-arrow { transform:rotate(90deg); justify-self:center; } }
  .flow-node { background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(14,165,233,.4); border-radius:14px; padding:22px 14px; text-align:center; transition:.3s; backdrop-filter:blur(8px); }
  .flow-node:hover { transform:translateY(-4px); border-color:#0ea5e9; box-shadow:0 16px 32px rgba(14,165,233,.3); }
  .flow-node .ic { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#0ea5e9,#0284c7); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; margin:0 auto 12px; box-shadow:0 8px 18px rgba(14,165,233,.4); }
  .flow-node h5 { color:#fff; font-weight:800; font-size:13px; margin:0 0 3px; }
  .flow-node p { color:rgba(255,255,255,.7); font-size:11px; margin:0; line-height:1.4; }
  .flow-arrow { color:#0ea5e9; font-size:22px; }

  /* STATS */
  .bs-stats { background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; padding:50px 0; }
  .bs-stat { text-align:center; padding:10px; }
  .bs-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .bs-stat .num.pct:after { content:"%"; }
  .bs-stat .num.x:after { content:"×"; }
  .bs-stat .num.plus:after { content:"+"; }
  .bs-stat .num.m:after { content:"M+"; }
  .bs-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ec4899,#be185d); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(14,165,233,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#e0f2fe; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(14,165,233,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#0369a1; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .bs-cta { background:linear-gradient(135deg,#0a0e1a,#051a2e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .bs-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#0ea5e9 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .bs-cta .container { position:relative; z-index:2; }
  .bs-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .bs-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .bs-cta .btn-sky { background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(14,165,233,.35); border:none; }
  .bs-cta .btn-sky:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .bs-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .bs-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .bs-hero h1 { font-size:32px; } .composer { margin-top:30px; } }

/* ===== PAGE: Domain Booking (db-) ===== */
.db-section { padding:70px 0; }
  .db-section-title { text-align:center; margin-bottom:45px; }
  .db-section-title .eyebrow { color:#0d9488; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .db-section-title h2 { font-weight:800; margin-top:8px; }
  .db-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .db-hero { padding:60px 0 50px; background:linear-gradient(135deg,#ecfeff 0%,#ccfbf1 100%); position:relative; overflow:hidden; }
  .db-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#14b8a6 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .db-hero .eyebrow { color:#0d9488; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .db-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .db-hero h1 span { color:#14b8a6; }
  .db-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .db-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* DOMAIN SEARCH MOCKUP */
  .domain-search { background:#fff; border-radius:20px; padding:28px; box-shadow:0 22px 50px rgba(20,184,166,.2); border:1px solid #ccfbf1; position:relative; z-index:2; }
  .domain-search .search-box { display:flex; align-items:center; background:linear-gradient(135deg,#f0fdfa,#ccfbf1); border:2px solid #14b8a6; border-radius:40px; padding:6px 8px 6px 20px; margin-bottom:20px; box-shadow:0 10px 24px rgba(20,184,166,.15); }
  .domain-search .search-box i { color:#0d9488; font-size:16px; margin-right:10px; }
  .domain-search .search-box input { flex:1; border:none; background:transparent; font-size:15px; font-weight:700; color:#0a0a23; padding:10px 4px; outline:none; }
  .domain-search .search-box .go { background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; font-weight:800; font-size:13px; border:none; padding:12px 24px; border-radius:30px; cursor:pointer; letter-spacing:.5px; }
  .domain-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:10px; transition:.25s; }
  .domain-row:hover { border-color:#14b8a6; transform:translateX(4px); box-shadow:0 8px 20px rgba(20,184,166,.12); }
  .domain-row.avail { background:linear-gradient(135deg,#f0fdfa,#ccfbf1); border-color:#14b8a6; }
  .domain-row.taken { background:#fef2f2; opacity:.75; }
  .domain-row .dom { flex:1; font-size:16px; font-weight:800; color:#0a0a23; }
  .domain-row .tld { color:#14b8a6; }
  .domain-row.taken .dom { text-decoration:line-through; color:#94a3b8; }
  .domain-row .status { font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; letter-spacing:.5px; text-transform:uppercase; }
  .domain-row .status.ok { background:#14b8a6; color:#fff; }
  .domain-row .status.no { background:#ef4444; color:#fff; }
  .domain-row .price { font-size:14px; font-weight:800; color:#0a0a23; }
  .domain-row .price .strike { text-decoration:line-through; color:#94a3b8; font-weight:500; font-size:12px; margin-right:6px; }
  .domain-row .buy { background:#14b8a6; color:#fff; border:none; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700; cursor:pointer; }
  .domain-row .buy:hover { background:#0d9488; }

  /* TLD GRID */
  .tld-tile { background:#fff; border-radius:16px; padding:26px 18px; text-align:center; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; cursor:pointer; position:relative; overflow:hidden; }
  .tld-tile:hover { transform:translateY(-6px); border-color:#14b8a6; box-shadow:0 22px 44px rgba(20,184,166,.22); }
  .tld-tile:before { content:""; position:absolute; top:-40px; right:-40px; width:100px; height:100px; background:radial-gradient(circle,rgba(20,184,166,.15) 0%,transparent 70%); border-radius:50%; transition:.4s; }
  .tld-tile:hover:before { transform:scale(1.6); }
  .tld-tile .big { font-size:30px; font-weight:800; color:#14b8a6; letter-spacing:-1px; margin-bottom:4px; position:relative; z-index:2; }
  .tld-tile .big:before { content:"."; }
  .tld-tile .price { font-size:22px; font-weight:800; color:#0a0a23; margin-top:8px; position:relative; z-index:2; }
  .tld-tile .price small { font-size:12px; color:#64748b; font-weight:500; }
  .tld-tile .strike { font-size:12px; color:#94a3b8; text-decoration:line-through; font-weight:500; position:relative; z-index:2; }
  .tld-tile .per { font-size:11px; color:#64748b; position:relative; z-index:2; }
  .tld-tile.popular { background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; border-color:#14b8a6; }
  .tld-tile.popular .big, .tld-tile.popular .price { color:#fff; }
  .tld-tile.popular .per, .tld-tile.popular .strike { color:rgba(255,255,255,.8); }
  .tld-tile.popular .tag { position:absolute; top:10px; right:10px; background:#fbbf24; color:#0a0a23; font-size:10px; font-weight:800; padding:3px 8px; border-radius:8px; }

  /* FEATURES STRIP */
  .db-features { background:#0a0a23; color:#fff; padding:60px 0; position:relative; overflow:hidden; }
  .db-features:before { content:""; position:absolute; top:-30%; left:-10%; width:500px; height:500px; background:radial-gradient(circle,#14b8a6 0%,transparent 70%); opacity:.15; border-radius:50%; }
  .db-features .head { text-align:center; margin-bottom:40px; position:relative; z-index:2; }
  .db-features .head .eyebrow { color:#14b8a6; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .db-features .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .feat-tile { background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(20,184,166,.3); border-radius:14px; padding:24px 18px; text-align:center; transition:.3s; margin-bottom:24px; position:relative; z-index:2; height:calc(100% - 24px); }
  .feat-tile:hover { transform:translateY(-4px); border-color:#14b8a6; box-shadow:0 20px 40px rgba(20,184,166,.2); }
  .feat-tile .ic { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#14b8a6,#0d9488); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin:0 auto 14px; box-shadow:0 8px 20px rgba(20,184,166,.35); }
  .feat-tile h5 { color:#fff; font-weight:800; font-size:14px; margin:0 0 4px; }
  .feat-tile p { color:rgba(255,255,255,.7); font-size:12px; margin:0; line-height:1.4; }

  /* STATS */
  .db-stats { background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; padding:50px 0; }
  .db-stat { text-align:center; padding:10px; }
  .db-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .db-stat .num.pct:after { content:"%"; }
  .db-stat .num.x:after { content:"×"; }
  .db-stat .num.plus:after { content:"+"; }
  .db-stat .num.k:after { content:"K+"; }
  .db-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#14b8a6,#0d9488); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#6366f1,#4f46e5); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(20,184,166,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#ccfbf1; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(20,184,166,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#0d9488; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .db-cta { background:linear-gradient(135deg,#0a0e1a,#051e1a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .db-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#14b8a6 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .db-cta .container { position:relative; z-index:2; }
  .db-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .db-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .db-cta .btn-teal { background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(20,184,166,.35); border:none; }
  .db-cta .btn-teal:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .db-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .db-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .db-hero h1 { font-size:32px; } .domain-search { margin-top:30px; } }

/* ===== PAGE: Hosting Booking (hb-) ===== */
.hb-section { padding:70px 0; }
  .hb-section-title { text-align:center; margin-bottom:45px; }
  .hb-section-title .eyebrow { color:#7c3aed; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .hb-section-title h2 { font-weight:800; margin-top:8px; }
  .hb-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .hb-hero { padding:60px 0 50px; background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%); color:#fff; position:relative; overflow:hidden; }
  .hb-hero:before { content:""; position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,#7c3aed 0%,transparent 70%); opacity:.35; border-radius:50%; animation:float 8s ease-in-out infinite; }
  .hb-hero:after { content:""; position:absolute; bottom:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#06b6d4 0%,transparent 70%); opacity:.25; border-radius:50%; animation:float 10s ease-in-out infinite reverse; }
  @keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }
  .hb-hero .eyebrow { color:#a78bfa; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .hb-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:44px; color:#fff; }
  .hb-hero h1 span { background:linear-gradient(135deg,#a78bfa,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .hb-hero p { color:rgba(255,255,255,.85); font-size:16px; line-height:1.8; margin:0 0 22px; }
  .hb-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  .hb-hero .btn-purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; padding:12px 28px; border-radius:30px; font-weight:700; border:none; margin-right:10px; display:inline-block; box-shadow:0 12px 28px rgba(124,58,237,.4); transition:.3s; }
  .hb-hero .btn-purple:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .hb-hero .btn-out { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; transition:.3s; }
  .hb-hero .btn-out:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* SERVER MOCKUP */
  .server-viz { background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(6,182,212,.08)); border-radius:20px; padding:26px; border:1px solid rgba(167,139,250,.3); backdrop-filter:blur(8px); position:relative; z-index:2; box-shadow:0 22px 50px rgba(0,0,0,.4); }
  .server-viz .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1); }
  .server-viz .top .lbl { font-size:12px; font-weight:800; color:#fff; letter-spacing:.5px; }
  .server-viz .top .lbl i { color:#a78bfa; margin-right:6px; }
  .server-viz .top .stat { font-size:11px; color:#10b981; font-weight:800; }
  .server-viz .top .stat .dot { width:8px; height:8px; border-radius:50%; background:#10b981; display:inline-block; margin-right:5px; animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .server-rack { background:linear-gradient(180deg,#1e293b,#0f172a); border-radius:12px; padding:14px; margin-bottom:14px; border:1px solid rgba(124,58,237,.3); }
  .server-rack .unit { display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(0,0,0,.3); border-radius:6px; margin-bottom:6px; }
  .server-rack .unit:last-child { margin-bottom:0; }
  .server-rack .unit .led { width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; animation:pulse 2s infinite; }
  .server-rack .unit .led.b { background:#06b6d4; box-shadow:0 0 8px #06b6d4; animation-delay:.3s; }
  .server-rack .unit .led.p { background:#a78bfa; box-shadow:0 0 8px #a78bfa; animation-delay:.6s; }
  .server-rack .unit .name { flex:1; font-size:11px; color:#e5e7eb; font-family:monospace; }
  .server-rack .unit .val { font-size:10px; color:#94a3b8; font-family:monospace; }
  .server-meters { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .meter { background:rgba(0,0,0,.3); border-radius:10px; padding:10px 12px; }
  .meter .lbl { font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
  .meter .val { font-size:18px; color:#fff; font-weight:800; margin:2px 0; }
  .meter .bar { height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
  .meter .bar i { display:block; height:100%; border-radius:2px; }
  .meter .bar i.p1 { background:linear-gradient(90deg,#7c3aed,#a78bfa); width:78%; }
  .meter .bar i.p2 { background:linear-gradient(90deg,#06b6d4,#0891b2); width:42%; }
  .meter .bar i.p3 { background:linear-gradient(90deg,#10b981,#059669); width:91%; }

  /* UPTIME RIBBON */
  .hb-ribbon { background:#0a0a23; color:#fff; padding:30px 0; border-top:1px solid rgba(124,58,237,.2); border-bottom:1px solid rgba(124,58,237,.2); }
  .hb-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.1); }
  .hb-ribbon .item:last-child { border-right:0; }
  .hb-ribbon .big { font-size:30px; font-weight:800; line-height:1; background:linear-gradient(135deg,#a78bfa,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .hb-ribbon .lbl { font-size:12px; opacity:.85; margin-top:4px; }

  /* PLANS */
  .plan-card { background:#fff; border-radius:18px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; position:relative; height:calc(100% - 24px); display:flex; flex-direction:column; }
  .plan-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(124,58,237,.22); }
  .plan-card.featured { border:2px solid #7c3aed; }
  .plan-card .tag { position:absolute; top:16px; right:16px; background:linear-gradient(135deg,#f59e0b,#ea580c); color:#fff; font-size:10px; font-weight:800; padding:4px 10px; border-radius:16px; letter-spacing:.5px; }
  .plan-card .head { padding:22px 24px; background:linear-gradient(135deg,#f5f3ff,#ede9fe); border-bottom:1px solid #e5e7eb; }
  .plan-card.featured .head { background:linear-gradient(135deg,#7c3aed,#5b21b6); color:#fff; }
  .plan-card.featured .head h4, .plan-card.featured .head .price { color:#fff; }
  .plan-card .head .plan-ic { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#7c3aed,#a78bfa); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; margin-bottom:10px; }
  .plan-card.featured .head .plan-ic { background:rgba(255,255,255,.2); }
  .plan-card .head h4 { font-weight:800; color:#0a0a23; font-size:19px; margin:0 0 2px; }
  .plan-card .head .sub { font-size:12px; color:#64748b; }
  .plan-card.featured .head .sub { color:rgba(255,255,255,.8); }
  .plan-card .head .price { font-size:30px; font-weight:800; color:#0a0a23; margin-top:12px; }
  .plan-card .head .price small { font-size:13px; color:#64748b; font-weight:500; }
  .plan-card.featured .head .price small { color:rgba(255,255,255,.85); }
  .plan-card .specs { padding:18px 24px; flex:1; }
  .plan-card .specs li { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:#334155; list-style:none; }
  .plan-card .specs li i { color:#10b981; font-size:11px; }
  .plan-card .specs li strong { color:#0a0a23; font-weight:700; }
  .plan-card .foot { padding:0 24px 22px; }
  .plan-card .foot .pick { display:block; background:#0a0a23; color:#fff; text-align:center; padding:11px; border-radius:30px; font-weight:700; font-size:13px; letter-spacing:.3px; transition:.3s; }
  .plan-card .foot .pick:hover { background:#7c3aed; color:#fff; text-decoration:none; }
  .plan-card.featured .foot .pick { background:linear-gradient(135deg,#7c3aed,#5b21b6); }

  /* DATA CENTERS */
  .hb-locations { background:linear-gradient(135deg,#0f0c29,#24243e); color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .hb-locations:before { content:""; position:absolute; inset:0; background:url("<?=base_url().FRONTEND?>/images/map.svg") center/80% no-repeat; opacity:.08; }
  .hb-locations .head { text-align:center; margin-bottom:40px; position:relative; z-index:2; }
  .hb-locations .head .eyebrow { color:#a78bfa; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .hb-locations .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .dc-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; position:relative; z-index:2; }
  @media(max-width:991px){ .dc-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .dc-grid { grid-template-columns:repeat(2,1fr); } }
  .dc-tile { background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(167,139,250,.3); border-radius:14px; padding:18px 10px; text-align:center; transition:.3s; }
  .dc-tile:hover { transform:translateY(-4px); border-color:#a78bfa; box-shadow:0 14px 28px rgba(124,58,237,.2); }
  .dc-tile .flag { font-size:32px; margin-bottom:6px; }
  .dc-tile .city { font-size:13px; color:#fff; font-weight:800; }
  .dc-tile .ping { font-size:10px; color:#10b981; font-weight:800; margin-top:3px; }
  .dc-tile .ping .dot { width:6px; height:6px; border-radius:50%; background:#10b981; display:inline-block; margin-right:3px; animation:pulse 2s infinite; }

  /* STATS */
  .hb-stats { background:linear-gradient(135deg,#7c3aed,#5b21b6); color:#fff; padding:50px 0; }
  .hb-stat { text-align:center; padding:10px; }
  .hb-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .hb-stat .num.pct:after { content:"%"; }
  .hb-stat .num.x:after { content:"×"; }
  .hb-stat .num.plus:after { content:"+"; }
  .hb-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#7c3aed,#5b21b6); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(124,58,237,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#ede9fe; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(124,58,237,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#7c3aed; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .hb-cta { background:linear-gradient(135deg,#0a0e1a,#1a052e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .hb-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#7c3aed 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .hb-cta .container { position:relative; z-index:2; }
  .hb-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .hb-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .hb-cta .btn-purple { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(124,58,237,.35); border:none; }
  .hb-cta .btn-purple:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .hb-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .hb-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .hb-hero h1 { font-size:32px; } .server-viz { margin-top:30px; } }

/* ===== PAGE: Payment Gateway Integration (pg-) ===== */
.pg-section { padding:70px 0; }
  .pg-section-title { text-align:center; margin-bottom:45px; }
  .pg-section-title .eyebrow { color:#047857; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .pg-section-title h2 { font-weight:800; margin-top:8px; }
  .pg-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .pg-hero { padding:60px 0 50px; background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%); position:relative; overflow:hidden; }
  .pg-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#10b981 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .pg-hero .eyebrow { color:#047857; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .pg-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .pg-hero h1 span { color:#059669; }
  .pg-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .pg-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* CHECKOUT MOCKUP */
  .checkout { background:#fff; border-radius:16px; box-shadow:0 22px 50px rgba(5,150,105,.22); border:1px solid #d1fae5; overflow:hidden; position:relative; z-index:2; }
  .checkout .head { background:linear-gradient(135deg,#059669,#047857); color:#fff; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; }
  .checkout .head .lbl { font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; }
  .checkout .head .secure { font-size:11px; background:rgba(255,255,255,.2); padding:4px 10px; border-radius:12px; font-weight:700; letter-spacing:.5px; }
  .checkout .head .secure i { color:#fef08a; margin-right:4px; }
  .checkout .body { padding:22px; }
  .checkout .amount { text-align:center; padding:16px; background:linear-gradient(135deg,#ecfdf5,#d1fae5); border-radius:12px; margin-bottom:18px; border:1px dashed #10b981; }
  .checkout .amount small { font-size:11px; color:#047857; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
  .checkout .amount .val { font-size:32px; font-weight:800; color:#0a0a23; margin-top:4px; }
  .checkout .amount .val small { font-size:16px; color:#047857; }
  .checkout h6 { font-size:12px; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin:0 0 10px; }
  .pm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
  .pm { border:2px solid #e5e7eb; border-radius:10px; padding:12px 6px; text-align:center; font-size:11px; font-weight:800; color:#64748b; cursor:pointer; transition:.2s; }
  .pm i { font-size:22px; display:block; margin-bottom:4px; color:#64748b; }
  .pm:hover { border-color:#10b981; color:#047857; }
  .pm:hover i { color:#10b981; }
  .pm.selected { background:linear-gradient(135deg,#ecfdf5,#d1fae5); border-color:#10b981; color:#047857; }
  .pm.selected i { color:#059669; }
  .card-mock { background:linear-gradient(135deg,#0a0a23,#1e3a8a); border-radius:12px; padding:18px; color:#fff; position:relative; overflow:hidden; margin-bottom:14px; }
  .card-mock:before { content:""; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:radial-gradient(circle,rgba(255,255,255,.15),transparent); border-radius:50%; }
  .card-mock .chip { width:36px; height:26px; background:linear-gradient(135deg,#fbbf24,#f59e0b); border-radius:5px; margin-bottom:14px; }
  .card-mock .num { font-family:monospace; font-size:16px; letter-spacing:3px; font-weight:700; }
  .card-mock .num b { background:#fff; color:#0a0a23; padding:0 5px; border-radius:3px; }
  .card-mock .foot { display:flex; justify-content:space-between; margin-top:14px; font-size:11px; }
  .card-mock .foot .v { font-weight:800; }
  .card-mock .brand { position:absolute; top:14px; right:14px; font-size:14px; font-weight:800; font-style:italic; }
  .pay-btn { display:block; width:100%; background:linear-gradient(135deg,#059669,#047857); color:#fff; padding:14px; border-radius:30px; font-weight:800; font-size:14px; letter-spacing:.5px; text-align:center; box-shadow:0 10px 24px rgba(5,150,105,.35); border:none; cursor:pointer; }
  .pay-btn i { margin-right:8px; }
  .pay-lock { text-align:center; margin-top:10px; font-size:11px; color:#64748b; }
  .pay-lock i { color:#059669; margin-right:4px; }

  /* PARTNER GATEWAYS */
  .pg-partners { background:#0a0a23; color:#fff; padding:60px 0; }
  .pg-partners .head { text-align:center; margin-bottom:40px; }
  .pg-partners .head .eyebrow { color:#34d399; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .pg-partners .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .pg-partner-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
  @media(max-width:991px){ .pg-partner-grid { grid-template-columns:repeat(3,1fr); } }
  @media(max-width:575px){ .pg-partner-grid { grid-template-columns:repeat(2,1fr); } }
  .pg-partner-tile { background:#fff; border-radius:12px; padding:22px 14px; display:flex; align-items:center; justify-content:center; min-height:90px; transition:.3s; cursor:pointer; }
  .pg-partner-tile:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(16,185,129,.25); }
  .pg-partner-tile img { max-height:40px; max-width:100%; object-fit:contain; filter:grayscale(30%); transition:.3s; }
  .pg-partner-tile:hover img { filter:grayscale(0%); }

  /* FLOW DIAGRAM */
  .pg-flow { background:#ecfdf5; padding:70px 0; }
  .pg-flow .head { text-align:center; margin-bottom:50px; }
  .pg-flow .head .eyebrow { color:#047857; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .pg-flow .head h2 { color:#0a0a23; font-weight:800; margin-top:8px; }
  .flow-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; max-width:1100px; margin:0 auto; position:relative; }
  @media(max-width:991px){ .flow-grid { grid-template-columns:repeat(2,1fr); } }
  @media(max-width:575px){ .flow-grid { grid-template-columns:1fr; } }
  .flow-node { background:#fff; border:1px solid #d1fae5; border-radius:16px; padding:24px 14px; text-align:center; transition:.3s; position:relative; box-shadow:0 4px 14px rgba(0,0,0,.04); }
  .flow-node:hover { transform:translateY(-4px); border-color:#10b981; box-shadow:0 18px 36px rgba(16,185,129,.22); }
  .flow-node .ic { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#10b981,#059669); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin:0 auto 12px; box-shadow:0 8px 20px rgba(16,185,129,.35); }
  .flow-node h5 { color:#0a0a23; font-weight:800; font-size:14px; margin:0 0 3px; }
  .flow-node p { color:#64748b; font-size:11px; margin:0; line-height:1.4; }
  .flow-node .step-no { position:absolute; top:-10px; right:10px; background:#f59e0b; color:#fff; font-weight:800; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; }

  /* METHODS GALLERY */
  .method-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); }
  .method-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(16,185,129,.22); }
  .method-card .visual { height:160px; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; }
  .method-card .visual.card { background:linear-gradient(135deg,#ecfdf5,#d1fae5); }
  .method-card .visual.upi { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .method-card .visual.wallet { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .method-card .visual.netb { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
  .method-card .visual.intl { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .method-card .visual.emi { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .method-card .big-ic { font-size:64px; }
  .method-card .big-ic.c { color:#059669; }
  .method-card .big-ic.u { color:#d97706; }
  .method-card .big-ic.w { color:#7c3aed; }
  .method-card .big-ic.n { color:#2563eb; }
  .method-card .big-ic.i { color:#db2777; }
  .method-card .big-ic.e { color:#dc2626; }
  .method-card .body { padding:16px 20px; }
  .method-card h5 { font-size:15px; font-weight:800; color:#0a0a23; margin:0 0 4px; }
  .method-card p { color:#666; font-size:12px; margin:0; line-height:1.5; }

  /* TRUST RIBBON */
  .pg-trust { background:#0a0a23; color:#fff; padding:30px 0; }
  .pg-trust .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.1); }
  .pg-trust .item:last-child { border-right:0; }
  .pg-trust .item i { color:#34d399; font-size:22px; }
  .pg-trust .item .big { font-size:20px; font-weight:800; margin-top:4px; }
  .pg-trust .item .lbl { font-size:11px; color:#94a3b8; margin-top:2px; }

  /* STATS */
  .pg-stats { background:linear-gradient(135deg,#059669,#047857); color:#fff; padding:50px 0; }
  .pg-stat { text-align:center; padding:10px; }
  .pg-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .pg-stat .num.pct:after { content:"%"; }
  .pg-stat .num.x:after { content:"×"; }
  .pg-stat .num.plus:after { content:"+"; }
  .pg-stat .num.k:after { content:"K+"; }
  .pg-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#059669,#047857); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#10b981,#059669); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#2563eb,#1e40af); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(16,185,129,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#d1fae5; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(16,185,129,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#047857; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .pg-cta { background:linear-gradient(135deg,#0a0e1a,#051e0a); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .pg-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#10b981 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .pg-cta .container { position:relative; z-index:2; }
  .pg-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .pg-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .pg-cta .btn-green { background:linear-gradient(135deg,#10b981,#059669); color:#fff; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(16,185,129,.35); border:none; }
  .pg-cta .btn-green:hover { transform:translateY(-2px); color:#fff; text-decoration:none; }
  .pg-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .pg-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .pg-hero h1 { font-size:32px; } .checkout { margin-top:30px; } }

/* ===== PAGE: SMS Gateway Integration (sg-) ===== */
.sg-section { padding:70px 0; }
  .sg-section-title { text-align:center; margin-bottom:45px; }
  .sg-section-title .eyebrow { color:#65a30d; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .sg-section-title h2 { font-weight:800; margin-top:8px; }
  .sg-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO — dark developer vibe */
  .sg-hero { padding:60px 0 50px; background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%); color:#fff; position:relative; overflow:hidden; }
  .sg-hero:before { content:""; position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,#84cc16 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .sg-hero:after { content:""; position:absolute; bottom:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#4338ca 0%,transparent 70%); opacity:.25; border-radius:50%; }
  .sg-hero .eyebrow { color:#84cc16; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .sg-hero .eyebrow:before { content:"> "; }
  .sg-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:44px; color:#fff; font-family:'Inter',sans-serif; }
  .sg-hero h1 span { background:linear-gradient(135deg,#84cc16,#22c55e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .sg-hero p { color:rgba(255,255,255,.8); font-size:16px; line-height:1.8; margin:0 0 22px; }
  .sg-hero .btn-lime { background:linear-gradient(135deg,#84cc16,#65a30d); color:#0a0a23; padding:12px 28px; border-radius:30px; font-weight:800; border:none; margin-right:10px; display:inline-block; box-shadow:0 12px 28px rgba(132,204,22,.35); transition:.3s; }
  .sg-hero .btn-lime:hover { transform:translateY(-2px); color:#0a0a23; text-decoration:none; }
  .sg-hero .btn-out { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; transition:.3s; }
  .sg-hero .btn-out:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  /* TERMINAL / CODE WINDOW */
  .terminal { background:#0a0e1a; border-radius:12px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.5); border:1px solid rgba(132,204,22,.2); position:relative; z-index:2; }
  .terminal .bar { background:#161b28; padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,.06); }
  .terminal .bar .dot { width:10px; height:10px; border-radius:50%; }
  .terminal .bar .r { background:#ef4444; } .terminal .bar .y { background:#fbbf24; } .terminal .bar .g { background:#22c55e; }
  .terminal .bar .t { margin-left:auto; font-size:11px; color:#64748b; font-family:monospace; }
  .terminal pre { margin:0; padding:18px 20px; font-family:'Monaco','Courier New',monospace; font-size:12px; line-height:1.7; color:#e5e7eb; overflow-x:auto; }
  .terminal .prompt { color:#84cc16; }
  .terminal .k { color:#f472b6; }
  .terminal .s { color:#fde68a; }
  .terminal .c { color:#64748b; }
  .terminal .n { color:#60a5fa; }
  .terminal .v { color:#22d3ee; }
  .terminal .ok { color:#22c55e; font-weight:700; }
  .terminal .url { color:#a78bfa; }

  /* PROTOCOLS RIBBON */
  .sg-ribbon { background:#0a0a23; color:#fff; padding:30px 0; border-top:1px solid rgba(132,204,22,.15); border-bottom:1px solid rgba(132,204,22,.15); }
  .sg-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.08); }
  .sg-ribbon .item:last-child { border-right:0; }
  .sg-ribbon .big { font-size:26px; font-weight:800; line-height:1; font-family:monospace; background:linear-gradient(135deg,#84cc16,#22c55e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .sg-ribbon .lbl { font-size:12px; color:#94a3b8; margin-top:4px; }

  /* SDK CARDS */
  .sdk-card { background:#0f172a; border:1px solid rgba(132,204,22,.2); border-radius:14px; padding:22px 18px; text-align:center; margin-bottom:24px; transition:.35s; cursor:pointer; color:#fff; height:calc(100% - 24px); }
  .sdk-card:hover { transform:translateY(-6px); border-color:#84cc16; box-shadow:0 20px 40px rgba(132,204,22,.25); }
  .sdk-card .ic { font-size:44px; margin-bottom:10px; }
  .sdk-card .ic.php { color:#787cb5; }
  .sdk-card .ic.python { color:#3776ab; }
  .sdk-card .ic.node { color:#8cc84b; }
  .sdk-card .ic.java { color:#f89820; }
  .sdk-card .ic.net { color:#512bd4; }
  .sdk-card .ic.ruby { color:#cc342d; }
  .sdk-card .ic.go { color:#00add8; }
  .sdk-card .ic.curl { color:#84cc16; }
  .sdk-card h5 { color:#fff; font-size:14px; font-weight:800; margin:0 0 3px; font-family:monospace; }
  .sdk-card p { color:#64748b; font-size:11px; margin:0; font-family:monospace; }
  .sdk-section { background:#060a14; padding:70px 0; color:#fff; }
  .sdk-section .sg-section-title { color:#fff; }
  .sdk-section .sg-section-title h2 { color:#fff; }
  .sdk-section .sg-section-title p { color:#94a3b8; }
  .sdk-section .sg-section-title .eyebrow { color:#84cc16; }

  /* FLOW DIAGRAM */
  .sg-flow { background:#0a0e1a; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .sg-flow:before { content:""; position:absolute; top:-30%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,#84cc16 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .sg-flow .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .sg-flow .head .eyebrow { color:#84cc16; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .sg-flow .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .flow-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; max-width:1100px; margin:0 auto; position:relative; z-index:2; }
  @media(max-width:991px){ .flow-grid { grid-template-columns:1fr; gap:14px; } .flow-arrow { transform:rotate(90deg); justify-self:center; } }
  .flow-node { background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); border:1px solid rgba(132,204,22,.3); border-radius:14px; padding:22px 14px; text-align:center; transition:.3s; }
  .flow-node:hover { transform:translateY(-4px); border-color:#84cc16; box-shadow:0 16px 32px rgba(132,204,22,.25); }
  .flow-node .ic { width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,#84cc16,#65a30d); display:flex; align-items:center; justify-content:center; font-size:22px; color:#0a0a23; margin:0 auto 12px; box-shadow:0 8px 18px rgba(132,204,22,.3); }
  .flow-node h5 { color:#fff; font-weight:800; font-size:13px; margin:0 0 3px; font-family:monospace; }
  .flow-node p { color:rgba(255,255,255,.6); font-size:11px; margin:0; line-height:1.4; font-family:monospace; }
  .flow-arrow { color:#84cc16; font-size:22px; }

  /* STATS */
  .sg-stats { background:linear-gradient(135deg,#65a30d,#4d7c0f); color:#fff; padding:50px 0; }
  .sg-stat { text-align:center; padding:10px; }
  .sg-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; font-family:monospace; }
  .sg-stat .num.pct:after { content:"%"; }
  .sg-stat .num.x:after { content:"×"; }
  .sg-stat .num.plus:after { content:"+"; }
  .sg-stat .num.ms:after { content:"ms"; }
  .sg-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#84cc16,#65a30d); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#22c55e,#16a34a); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#4338ca,#312e81); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#0891b2,#0e7490); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#d97706,#b45309); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#be123c,#9f1239); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(132,204,22,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#1f2937; box-shadow:0 4px 16px rgba(0,0,0,.2); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(132,204,22,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#65a30d; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .sg-cta { background:linear-gradient(135deg,#0a0e1a,#1a2e05); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .sg-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#84cc16 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .sg-cta .container { position:relative; z-index:2; }
  .sg-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .sg-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .sg-cta .btn-lime { background:linear-gradient(135deg,#84cc16,#65a30d); color:#0a0a23; padding:12px 30px; border-radius:30px; font-weight:800; display:inline-block; margin:4px; transition:.3s; box-shadow:0 12px 28px rgba(132,204,22,.35); }
  .sg-cta .btn-lime:hover { transform:translateY(-2px); color:#0a0a23; text-decoration:none; }
  .sg-cta .btn-ghost { border:2px solid rgba(255,255,255,.3); color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .sg-cta .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }

  @media (max-width:991px){ .sg-hero h1 { font-size:32px; } .terminal { margin-top:30px; } .terminal pre { font-size:11px; } }

/* ===== PAGE: WhatsApp Integration (wi-) ===== */
.wi-section { padding:70px 0; }
  .wi-section-title { text-align:center; margin-bottom:45px; }
  .wi-section-title .eyebrow { color:#128c7e; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .wi-section-title h2 { font-weight:800; margin-top:8px; }
  .wi-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .wi-hero { padding:60px 0 50px; background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%); position:relative; overflow:hidden; }
  .wi-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#128c7e 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .wi-hero .eyebrow { color:#075e54; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .wi-hero .eyebrow .pill { display:inline-block; background:#128c7e; color:#fff; padding:2px 10px; border-radius:10px; font-size:11px; margin-right:6px; }
  .wi-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .wi-hero h1 span { color:#128c7e; }
  .wi-hero h1 span:after { content:" ✓"; color:#34b7f1; font-size:30px; vertical-align:middle; }
  .wi-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .wi-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* AGENT DASHBOARD MOCKUP (enterprise style — not a consumer phone chat) */
  .wa-dashboard { background:#fff; border-radius:16px; box-shadow:0 22px 50px rgba(18,140,126,.25); border:1px solid #a7f3d0; overflow:hidden; position:relative; z-index:2; display:grid; grid-template-columns:140px 1fr; min-height:460px; }
  @media(max-width:575px){ .wa-dashboard { grid-template-columns:1fr; min-height:auto; } }
  .wa-dashboard .sidebar { background:#075e54; color:#fff; padding:18px 14px; }
  .wa-dashboard .sidebar .logo { display:flex; align-items:center; gap:6px; font-weight:800; font-size:12px; margin-bottom:20px; }
  .wa-dashboard .sidebar .logo .ic { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); display:flex; align-items:center; justify-content:center; font-size:13px; }
  .wa-dashboard .sidebar .nav-i { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:rgba(255,255,255,.8); font-size:12px; margin-bottom:4px; cursor:pointer; transition:.2s; }
  .wa-dashboard .sidebar .nav-i.active { background:rgba(37,211,102,.2); color:#fff; font-weight:700; }
  .wa-dashboard .sidebar .nav-i i { width:16px; }
  .wa-dashboard .sidebar .nav-i .badge { margin-left:auto; background:#ef4444; color:#fff; font-size:9px; font-weight:800; padding:1px 6px; border-radius:8px; }
  .wa-dashboard .main { padding:16px; background:#f0fdf4; }
  .wa-dashboard .topbar { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #d1fae5; margin-bottom:14px; }
  .wa-dashboard .topbar .av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:12px; }
  .wa-dashboard .topbar .nm { font-size:13px; font-weight:800; color:#0a0a23; }
  .wa-dashboard .topbar .nm .ver { color:#34b7f1; font-size:11px; margin-left:4px; }
  .wa-dashboard .topbar .st { font-size:10px; color:#10b981; font-weight:700; }
  .wa-dashboard .topbar .tags { margin-left:auto; display:flex; gap:4px; }
  .wa-dashboard .topbar .tags span { background:#d1fae5; color:#065f46; font-size:9px; font-weight:800; padding:2px 7px; border-radius:8px; letter-spacing:.3px; }
  .wa-dashboard .chat { background:#e5ddd5; border-radius:10px; padding:12px; min-height:230px; display:flex; flex-direction:column; gap:6px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d7cfc3'/%3E%3C/svg%3E"); }
  .wa-dashboard .bu { max-width:80%; padding:7px 10px; border-radius:8px; font-size:11px; line-height:1.45; color:#0a0a23; box-shadow:0 1px 2px rgba(0,0,0,.08); position:relative; }
  .wa-dashboard .bu.in { background:#fff; border-top-left-radius:2px; }
  .wa-dashboard .bu.out { background:#dcf8c6; margin-left:auto; border-top-right-radius:2px; }
  .wa-dashboard .bu .sender { font-size:9px; font-weight:800; display:block; margin-bottom:1px; }
  .wa-dashboard .bu.out .sender { color:#128c7e; }
  .wa-dashboard .bu .tm { font-size:8px; color:#94a3b8; display:block; text-align:right; margin-top:3px; }
  .wa-dashboard .bu .tm i { color:#34b7f1; }
  .wa-dashboard .bu .btn-quick { display:block; text-align:center; background:rgba(18,140,126,.1); color:#075e54; font-weight:700; font-size:10px; padding:4px; border-radius:5px; margin-top:4px; }
  .wa-dashboard .bot-tag { background:#34b7f1; color:#fff; font-size:9px; font-weight:800; padding:1px 5px; border-radius:4px; margin-right:4px; }
  .wa-dashboard .composer { display:flex; align-items:center; gap:8px; background:#fff; border-radius:20px; padding:6px 10px; margin-top:10px; border:1px solid #d1fae5; }
  .wa-dashboard .composer i { color:#128c7e; }
  .wa-dashboard .composer .input { flex:1; font-size:11px; color:#94a3b8; }
  .wa-dashboard .composer .snd { background:#128c7e; color:#fff; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; }

  /* VOLUME RIBBON */
  .wi-ribbon { background:linear-gradient(135deg,#128c7e,#075e54); color:#fff; padding:30px 0; }
  .wi-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .wi-ribbon .item:last-child { border-right:0; }
  .wi-ribbon .big { font-size:30px; font-weight:800; line-height:1; }
  .wi-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* FEATURE GALLERY */
  .wi-feat-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); }
  .wi-feat-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(18,140,126,.22); }
  .wi-feat-card .visual { height:200px; padding:18px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .wi-feat-card .visual.bot { background:linear-gradient(135deg,#d1fae5,#a7f3d0); }
  .wi-feat-card .visual.tmpl { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .wi-feat-card .visual.flow { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .wi-feat-card .visual.agent { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .wi-feat-card .visual.media { background:linear-gradient(135deg,#fee2e2,#fecaca); }
  .wi-feat-card .visual.insight { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .wi-feat-card .mini { background:#fff; border-radius:10px; padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.12); max-width:220px; width:100%; }
  .wi-feat-card .mini .hd { font-size:10px; font-weight:800; color:#128c7e; display:block; margin-bottom:4px; }
  .wi-feat-card .mini .ln { height:6px; background:#e5e7eb; border-radius:3px; margin:4px 0; }
  .wi-feat-card .mini .ln.t { background:#0a0a23; height:8px; width:70%; }
  .wi-feat-card .mini .btn { display:inline-block; background:#128c7e; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:12px; margin-top:6px; }
  .wi-feat-card .mini .img-ph { height:60px; background:linear-gradient(135deg,#25d366,#128c7e); border-radius:6px; margin-bottom:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
  .wi-feat-card .mini .bars { display:flex; align-items:flex-end; gap:3px; height:50px; padding:4px 0; }
  .wi-feat-card .mini .bars span { flex:1; border-radius:2px 2px 0 0; }
  .wi-feat-card .visual .big-ic { font-size:72px; }
  .wi-feat-card .visual .big-ic.b { color:#128c7e; }
  .wi-feat-card .body { padding:18px 20px; }
  .wi-feat-card h5 { font-size:16px; font-weight:800; color:#0a0a23; margin:0 0 6px; }
  .wi-feat-card p { color:#666; font-size:13px; margin:0; line-height:1.5; }
  .wi-feat-card .api-pill { display:inline-block; background:rgba(52,183,241,.15); color:#0369a1; font-size:10px; font-weight:800; padding:3px 8px; border-radius:10px; margin-top:8px; letter-spacing:.3px; }

  /* ARCHITECTURE FLOW */
  .wi-arch { background:#075e54; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .wi-arch:before { content:""; position:absolute; top:-30%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,#25d366 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .wi-arch .head { text-align:center; margin-bottom:50px; position:relative; z-index:2; }
  .wi-arch .head .eyebrow { color:#25d366; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .wi-arch .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .arch-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; max-width:1100px; margin:0 auto; position:relative; z-index:2; }
  @media(max-width:991px){ .arch-grid { grid-template-columns:1fr; gap:14px; } .arch-arrow { transform:rotate(90deg); justify-self:center; } }
  .arch-node { background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(37,211,102,.35); border-radius:14px; padding:22px 14px; text-align:center; transition:.3s; backdrop-filter:blur(6px); }
  .arch-node:hover { transform:translateY(-4px); border-color:#25d366; box-shadow:0 16px 32px rgba(37,211,102,.3); }
  .arch-node .ic { width:54px; height:54px; border-radius:12px; background:linear-gradient(135deg,#25d366,#128c7e); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin:0 auto 12px; box-shadow:0 8px 18px rgba(37,211,102,.35); }
  .arch-node h5 { color:#fff; font-weight:800; font-size:13px; margin:0 0 3px; }
  .arch-node p { color:rgba(255,255,255,.7); font-size:11px; margin:0; line-height:1.4; }
  .arch-arrow { color:#25d366; font-size:22px; }

  /* STATS */
  .wi-stats { background:linear-gradient(135deg,#128c7e,#0d6e63); color:#fff; padding:50px 0; }
  .wi-stat { text-align:center; padding:10px; }
  .wi-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .wi-stat .num.pct:after { content:"%"; }
  .wi-stat .num.x:after { content:"×"; }
  .wi-stat .num.plus:after { content:"+"; }
  .wi-stat .num.b:after { content:"B"; }
  .wi-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#128c7e,#075e54); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#25d366,#128c7e); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#34b7f1,#0284c7); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(18,140,126,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#d1fae5; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(18,140,126,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#075e54; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .wi-cta { background:linear-gradient(135deg,#0a0a23,#075e54); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .wi-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#128c7e 0%,transparent 70%); opacity:.3; border-radius:50%; }
  .wi-cta .container { position:relative; z-index:2; }
  .wi-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .wi-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .wi-cta .btn-teal { background:#128c7e; color:#fff; padding:12px 30px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; border:2px solid #128c7e; }
  .wi-cta .btn-teal:hover { background:#075e54; border-color:#075e54; color:#fff; text-decoration:none; }
  .wi-cta .btn-ghost { border:2px solid #fff; color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .wi-cta .btn-ghost:hover { background:#fff; color:#0a0a23; text-decoration:none; }

  @media (max-width:991px){ .wi-hero h1 { font-size:32px; } .wa-dashboard { margin-top:30px; } }

/* ===== PAGE: Third Party API Integration (ti-) ===== */
.ti-section { padding:70px 0; }
  .ti-section-title { text-align:center; margin-bottom:45px; }
  .ti-section-title .eyebrow { color:#a21caf; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ti-section-title h2 { font-weight:800; margin-top:8px; }
  .ti-section-title p { color:#666; max-width:720px; margin:14px auto 0; font-size:15px; line-height:1.75; }

  /* HERO */
  .ti-hero { padding:60px 0 50px; background:linear-gradient(135deg,#fdf4ff 0%,#fae8ff 100%); position:relative; overflow:hidden; }
  .ti-hero:before { content:""; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background:radial-gradient(circle,#c026d3 0%,transparent 70%); opacity:.22; border-radius:50%; }
  .ti-hero .eyebrow { color:#a21caf; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
  .ti-hero h1 { font-weight:800; line-height:1.15; margin-bottom:18px; font-size:42px; color:#0a0a23; }
  .ti-hero h1 span { background:linear-gradient(135deg,#c026d3,#a21caf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .ti-hero p { color:#555; font-size:16px; line-height:1.8; margin:0 0 22px; }
  .ti-hero .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

  /* HUB DIAGRAM — central node with orbiting service logos */
  .hub-wrap { position:relative; width:100%; max-width:560px; aspect-ratio:1/1; margin:0 auto; }
  .hub-wrap .ring { position:absolute; inset:22%; border:2px dashed rgba(192,38,211,.3); border-radius:50%; animation:spin 40s linear infinite; }
  .hub-wrap .ring.r2 { inset:8%; border-color:rgba(192,38,211,.2); animation-duration:60s; animation-direction:reverse; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .hub-wrap .core { position:absolute; inset:34%; background:linear-gradient(135deg,#c026d3,#a21caf); border-radius:22px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px; box-shadow:0 30px 60px rgba(192,38,211,.4); z-index:3; }
  .hub-wrap .core i { font-size:32px; margin-bottom:4px; }
  .hub-wrap .core h4 { color:#fff; margin:0; font-size:15px; font-weight:800; line-height:1.2; }
  .hub-wrap .core small { font-size:10px; opacity:.9; letter-spacing:1px; text-transform:uppercase; margin-top:3px; }
  .hub-wrap .sat { position:absolute; width:66px; height:66px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(192,38,211,.25); border:2px solid rgba(192,38,211,.15); transition:.3s; padding:12px; z-index:2; }
  .hub-wrap .sat:hover { transform:scale(1.12); border-color:#c026d3; box-shadow:0 18px 40px rgba(192,38,211,.4); z-index:4; }
  .hub-wrap .sat img { max-width:100%; max-height:100%; object-fit:contain; }
  .hub-wrap .sat i { font-size:24px; }
  /* 8 satellites around ring */
  .hub-wrap .sat.p1 { top:2%; left:50%; transform:translateX(-50%); }
  .hub-wrap .sat.p2 { top:17%; right:4%; }
  .hub-wrap .sat.p3 { top:50%; right:-2%; transform:translateY(-50%); }
  .hub-wrap .sat.p4 { bottom:17%; right:4%; }
  .hub-wrap .sat.p5 { bottom:2%; left:50%; transform:translateX(-50%); }
  .hub-wrap .sat.p6 { bottom:17%; left:4%; }
  .hub-wrap .sat.p7 { top:50%; left:-2%; transform:translateY(-50%); }
  .hub-wrap .sat.p8 { top:17%; left:4%; }
  .hub-wrap .sat.p1:hover, .hub-wrap .sat.p5:hover { transform:translateX(-50%) scale(1.12); }
  .hub-wrap .sat.p3:hover, .hub-wrap .sat.p7:hover { transform:translateY(-50%) scale(1.12); }
  .hub-wrap svg.connectors { position:absolute; inset:0; z-index:1; pointer-events:none; }
  .hub-wrap svg.connectors line { stroke:rgba(192,38,211,.25); stroke-width:1.2; stroke-dasharray:4 4; animation:dash 20s linear infinite; }
  @keyframes dash { to { stroke-dashoffset:-80; } }

  /* PARTNER RIBBON */
  .ti-ribbon { background:linear-gradient(135deg,#c026d3,#86198f); color:#fff; padding:30px 0; }
  .ti-ribbon .item { text-align:center; padding:6px 10px; border-right:1px solid rgba(255,255,255,.2); }
  .ti-ribbon .item:last-child { border-right:0; }
  .ti-ribbon .big { font-size:30px; font-weight:800; line-height:1; }
  .ti-ribbon .lbl { font-size:12px; opacity:.95; margin-top:4px; }

  /* API CATEGORIES */
  .ti-cat-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef0f5; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:24px; transition:.35s; height:calc(100% - 24px); }
  .ti-cat-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(192,38,211,.22); }
  .ti-cat-card .visual { height:170px; padding:18px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .ti-cat-card .visual.pay { background:linear-gradient(135deg,#d1fae5,#a7f3d0); }
  .ti-cat-card .visual.ship { background:linear-gradient(135deg,#fed7aa,#fdba74); }
  .ti-cat-card .visual.mkt { background:linear-gradient(135deg,#cffafe,#a5f3fc); }
  .ti-cat-card .visual.commerce { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
  .ti-cat-card .visual.social { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
  .ti-cat-card .visual.cloud { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
  .ti-cat-card .visual.crm { background:linear-gradient(135deg,#fef3c7,#fde68a); }
  .ti-cat-card .visual.ai { background:linear-gradient(135deg,#fae8ff,#f5d0fe); }
  .ti-cat-card .big-ic { font-size:64px; }
  .ti-cat-card .big-ic.pay { color:#059669; }
  .ti-cat-card .big-ic.ship { color:#ea580c; }
  .ti-cat-card .big-ic.mkt { color:#0891b2; }
  .ti-cat-card .big-ic.commerce { color:#db2777; }
  .ti-cat-card .big-ic.social { color:#2563eb; }
  .ti-cat-card .big-ic.cloud { color:#7c3aed; }
  .ti-cat-card .big-ic.crm { color:#d97706; }
  .ti-cat-card .big-ic.ai { color:#c026d3; }
  .ti-cat-card .body { padding:16px 20px; }
  .ti-cat-card h5 { font-size:15px; font-weight:800; color:#0a0a23; margin:0 0 4px; }
  .ti-cat-card p { color:#666; font-size:12px; margin:0; line-height:1.5; }
  .ti-cat-card .count { display:inline-block; background:#fae8ff; color:#86198f; font-size:10px; font-weight:800; padding:3px 8px; border-radius:10px; margin-top:8px; letter-spacing:.3px; }

  /* PARTNERS GRID */
  .ti-partners { background:#0a0a23; color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .ti-partners:before { content:""; position:absolute; top:-30%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,#c026d3 0%,transparent 70%); opacity:.2; border-radius:50%; }
  .ti-partners .head { text-align:center; margin-bottom:40px; position:relative; z-index:2; }
  .ti-partners .head .eyebrow { color:#e879f9; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ti-partners .head h2 { color:#fff; font-weight:800; margin-top:8px; }
  .partner-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:12px; position:relative; z-index:2; }
  @media(max-width:991px){ .partner-grid { grid-template-columns:repeat(4,1fr); } }
  @media(max-width:575px){ .partner-grid { grid-template-columns:repeat(3,1fr); } }
  .partner-tile { background:#fff; border-radius:12px; padding:16px 10px; display:flex; align-items:center; justify-content:center; min-height:80px; transition:.3s; cursor:pointer; }
  .partner-tile:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(192,38,211,.35); }
  .partner-tile img { max-height:34px; max-width:100%; object-fit:contain; filter:grayscale(30%); transition:.3s; }
  .partner-tile:hover img { filter:grayscale(0%); }

  /* INTEGRATION FLOW */
  .ti-flow { background:linear-gradient(135deg,#fdf4ff,#fae8ff); padding:70px 0; }
  .ti-flow .head { text-align:center; margin-bottom:50px; }
  .ti-flow .head .eyebrow { color:#a21caf; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
  .ti-flow .head h2 { color:#0a0a23; font-weight:800; margin-top:8px; }
  .flow-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1100px; margin:0 auto; }
  @media(max-width:991px){ .flow-grid { grid-template-columns:repeat(2,1fr); } }
  @media(max-width:575px){ .flow-grid { grid-template-columns:1fr; } }
  .flow-node { background:#fff; border:1px solid #fae8ff; border-radius:16px; padding:22px 14px; text-align:center; transition:.3s; position:relative; box-shadow:0 4px 14px rgba(0,0,0,.04); }
  .flow-node:hover { transform:translateY(-4px); border-color:#c026d3; box-shadow:0 18px 36px rgba(192,38,211,.22); }
  .flow-node .ic { width:54px; height:54px; border-radius:12px; background:linear-gradient(135deg,#c026d3,#a21caf); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin:0 auto 12px; box-shadow:0 8px 18px rgba(192,38,211,.35); }
  .flow-node h5 { color:#0a0a23; font-weight:800; font-size:14px; margin:0 0 3px; }
  .flow-node p { color:#64748b; font-size:11px; margin:0; line-height:1.4; }
  .flow-node .step-no { position:absolute; top:-10px; right:10px; background:#f59e0b; color:#fff; font-weight:800; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; }

  /* STATS */
  .ti-stats { background:linear-gradient(135deg,#c026d3,#a21caf); color:#fff; padding:50px 0; }
  .ti-stat { text-align:center; padding:10px; }
  .ti-stat .num { font-size:38px; font-weight:800; line-height:1; color:#fff; }
  .ti-stat .num.pct:after { content:"%"; }
  .ti-stat .num.x:after { content:"×"; }
  .ti-stat .num.plus:after { content:"+"; }
  .ti-stat .num.k:after { content:"K+"; }
  .ti-stat .label { margin-top:6px; font-size:13px; opacity:.95; }

  /* BENEFITS */
  .benefit-tile { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; margin-bottom:24px; cursor:pointer; transition:.35s; }
  .benefit-tile .bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:80px; color:#fff; }
  .benefit-tile .bg.b1 { background:linear-gradient(135deg,#c026d3,#a21caf); }
  .benefit-tile .bg.b2 { background:linear-gradient(135deg,#e879f9,#c026d3); }
  .benefit-tile .bg.b3 { background:linear-gradient(135deg,#3b82f6,#1e40af); }
  .benefit-tile .bg.b4 { background:linear-gradient(135deg,#10b981,#047857); }
  .benefit-tile .bg.b5 { background:linear-gradient(135deg,#f59e0b,#d97706); }
  .benefit-tile .bg.b6 { background:linear-gradient(135deg,#ef4444,#dc2626); }
  .benefit-tile .caption { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 40%, rgba(10,10,35,.92)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .benefit-tile .caption h5 { color:#fff; font-size:16px; font-weight:800; margin:0 0 4px; }
  .benefit-tile .caption small { opacity:.85; font-size:12px; }
  .benefit-tile:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(192,38,211,.3); }
  .benefit-tile:hover .bg { transform:scale(1.08); }
  .benefit-tile .bg { transition:transform .5s ease; }

  /* SHOWCASE */
  .show-card { position:relative; border-radius:14px; overflow:hidden; background:#fae8ff; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.35s; margin-bottom:24px; aspect-ratio:16/10; }
  .show-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .show-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(192,38,211,.22); }
  .show-card:hover img { transform:scale(1.08); }
  .show-card .hover { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,35,0) 35%, rgba(10,10,35,.88)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; opacity:0; transition:.3s; }
  .show-card:hover .hover { opacity:1; }
  .show-card .cat { display:inline-block; background:#a21caf; color:#fff; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 10px; border-radius:18px; margin-bottom:8px; width:max-content; }
  .show-card h4 { color:#fff; margin:0 0 6px; font-size:17px; font-weight:700; }
  .show-card a.live { color:#fff; font-size:13px; font-weight:600; text-decoration:underline; }

  /* CTA */
  .ti-cta { background:linear-gradient(135deg,#0a0a23,#4a044e); color:#fff; padding:60px 0; text-align:center; position:relative; overflow:hidden; }
  .ti-cta:before { content:""; position:absolute; top:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,#c026d3 0%,transparent 70%); opacity:.32; border-radius:50%; }
  .ti-cta .container { position:relative; z-index:2; }
  .ti-cta h2 { color:#fff; font-weight:800; margin-bottom:10px; }
  .ti-cta p { color:#fff; font-size:16px; margin-bottom:22px; }
  .ti-cta .btn-fuchsia { background:#c026d3; color:#fff; padding:12px 30px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; border:2px solid #c026d3; }
  .ti-cta .btn-fuchsia:hover { background:#a21caf; border-color:#a21caf; color:#fff; text-decoration:none; }
  .ti-cta .btn-ghost { border:2px solid #fff; color:#fff; padding:10px 28px; border-radius:30px; font-weight:700; display:inline-block; margin:4px; transition:.3s; }
  .ti-cta .btn-ghost:hover { background:#fff; color:#0a0a23; text-decoration:none; }

  @media (max-width:991px){ .ti-hero h1 { font-size:32px; } .hub-wrap { margin-top:40px; max-width:420px; } }