/* =========================================================
   ROOT IT — Web Design & SEO Agency
   Master stylesheet
   Palette drawn directly from the logo's rainbow circuit tree
   ========================================================= */

/* -------- 1. Tokens -------- */
:root {
  /* Surfaces */
  --bg-deepest: #050818;
  --bg-base:    #0a1130;
  --bg-raised:  #111a3e;
  --bg-card:    #16204d;
  --bg-soft:    #1c2858;

  /* Lines */
  --line:        #233066;
  --line-strong: #364587;

  /* Text */
  --ink-100: #ffffff;
  --ink-200: #d8dffa;
  --ink-300: #a8b3d8;
  --ink-400: #7b87b3;
  --ink-500: #525e88;

  /* Rainbow accents (echoing the logo branches) */
  --c-violet:  #8b5cf6;
  --c-indigo:  #6366f1;
  --c-blue:    #3b82f6;
  --c-cyan:    #22d3ee;
  --c-teal:    #14b8a6;
  --c-green:   #22c55e;
  --c-lime:    #a3e635;
  --c-yellow:  #facc15;
  --c-orange:  #fb923c;
  --c-red:     #f43f5e;
  --c-pink:    #ec4899;
  --c-magenta: #d946ef;

  /* Brand accent (the blue 'I' in ROOT IT) */
  --brand:      #2dd4ff;
  --brand-deep: #0ea5e9;
  --brand-warm: #ff7a45;

  /* Gradient signatures */
  --grad-tree: linear-gradient(90deg,
      #8b5cf6 0%, #6366f1 14%, #22d3ee 28%, #22c55e 42%,
      #facc15 58%, #fb923c 72%, #f43f5e 86%, #d946ef 100%);
  --grad-warm: linear-gradient(135deg, #fb923c 0%, #f43f5e 50%, #d946ef 100%);
  --grad-cool: linear-gradient(135deg, #22d3ee 0%, #6366f1 50%, #8b5cf6 100%);
  --grad-life: linear-gradient(135deg, #a3e635 0%, #22c55e 50%, #14b8a6 100%);

  /* Typography */
  --f-display: 'Bricolage Grotesque', 'Georgia', serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
}

/* -------- 2. Reset -------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-200);
  background: var(--bg-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle starfield/circuit texture on the body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(139,92,246,.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(34,211,238,.35), transparent 50%),
    radial-gradient(2px 2px at 44% 72%, rgba(34,197,94,.3), transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 84%, rgba(244,63,94,.3), transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 88%, rgba(250,204,21,.3), transparent 50%),
    radial-gradient(2px 2px at 64% 12%, rgba(217,70,239,.3), transparent 50%);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

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

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

button {
  font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}

ul, ol { list-style: none; }

[hidden] { display: none !important; }

::selection { background: var(--brand); color: var(--bg-deepest); }

/* -------- 3. Typography -------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--ink-100);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--brand);
}

.h-display {
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  font-weight: 500;
  letter-spacing: 0;
}

.h-section {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0;
}

.h-card {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0;
}

.grad-text {
  background: var(--grad-tree);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.warm-text {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cool-text {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.life-text {
  background: var(--grad-life);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { color: var(--ink-300); }
.lead { font-size: clamp(1rem, 1.25vw, 1.18rem); color: var(--ink-200); max-width: 60ch; }

/* -------- 4. Layout primitives -------- */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

section { padding: 110px 0; position: relative; }
section.tight { padding: 70px 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 60px;
}

.section-head .lead { margin-top: 16px; }

@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
}

/* -------- 5. Navigation -------- */
.topbar {
  background: var(--bg-deepest);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-300);
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
}

.topbar a:hover { color: var(--brand); }

.topbar .pill-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar .pill-promo::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 12px var(--c-green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

.topbar-right { display: flex; gap: 26px; }

nav.primary {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 17, 48, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(35, 48, 102, 0.5);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark svg { width: 38px; height: 38px; }

.brand-mark-real {
  flex-shrink: 0;
  gap: 0;
}

.brand-mark-real .brand-logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: 160px;
  object-fit: contain;
}

.brand-mark .brand-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--ink-100);
}
.brand-mark .brand-name span { color: var(--brand); }

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-links a {
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-200);
  transition: all .25s var(--ease-out);
  position: relative;
}

.nav-links a:hover { color: var(--ink-100); background: rgba(255,255,255,.04); }
.nav-links a.active {
  color: var(--ink-100);
  background: rgba(45, 212, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(45,212,255,.2);
}

.nav-cta { display: flex; gap: 10px; align-items: center; }

.mobile-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
}

.mobile-toggle span {
  width: 18px; height: 1.5px;
  background: var(--ink-100);
  position: relative;
  transition: all .3s var(--ease-out);
}
.mobile-toggle span::before,
.mobile-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--ink-100);
  transition: all .3s var(--ease-out);
}
.mobile-toggle span::before { top: -6px; }
.mobile-toggle span::after { top: 6px; }

@media (max-width: 960px) {
  .nav-links, .nav-cta .btn-secondary { display: none; }
  .mobile-toggle { display: inline-flex; }
  .topbar-right { gap: 14px; }
  .topbar-left .pill-promo span { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--bg-deepest);
  z-index: 99;
  transform: translateX(100%);
  transition: transform .35s var(--ease-out);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.drawer-links { display: flex; flex-direction: column; gap: 4px; }
.drawer-links a {
  padding: 22px 0;
  font-family: var(--f-display);
  font-size: 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-100);
}
.drawer-close {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: 20px;
}

/* -------- 6. Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0;
  transition: all .3s var(--ease-out);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}

.btn .arr {
  width: 16px; height: 16px;
  transition: transform .3s var(--ease-out);
}

.btn:hover .arr { transform: translateX(4px); }

.btn-primary {
  background: var(--ink-100);
  color: var(--bg-deepest);
}
.btn-primary:hover {
  background: var(--brand);
  box-shadow: 0 10px 40px -10px rgba(45,212,255,.6);
}

.btn-gradient {
  background: var(--grad-warm);
  color: var(--ink-100);
}
.btn-gradient:hover {
  filter: brightness(1.12);
  box-shadow: 0 14px 50px -14px rgba(244,63,94,.6);
}

.btn-secondary {
  background: transparent;
  color: var(--ink-100);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.04);
  border-color: var(--ink-300);
}

.btn-ghost {
  color: var(--ink-200);
  padding: 12px 18px;
}
.btn-ghost:hover { color: var(--brand); }

/* -------- 7. Hero -------- */
.hero {
  padding: 90px 0 120px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
}

.hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-badges .tag {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-200);
  background: rgba(255,255,255,.02);
}
.hero-badges .tag.brand-tag {
  color: var(--brand);
  border-color: rgba(45,212,255,.3);
  background: rgba(45,212,255,.06);
}

.hero h1 { margin-bottom: 28px; }
.hero h1 strong { font-weight: 500; }

.hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink-200);
  max-width: 540px;
  margin-bottom: 40px;
  line-height: 1.55;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-meta {
  margin-top: 56px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-meta .m-item .m-num {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink-100);
  letter-spacing: 0;
}
.hero-meta .m-item .m-num .grad { background: var(--grad-tree); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-meta .m-item .m-lab {
  font-family: var(--f-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-400);
  margin-top: 4px;
}

/* Hero visual canvas */
.hero-stage {
  position: relative;
  aspect-ratio: 1/1.05;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 70% 30%, rgba(45,212,255,.18), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(244,63,94,.15), transparent 50%),
    linear-gradient(180deg, var(--bg-raised), var(--bg-base));
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,212,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  pointer-events: none;
}

.tree-svg {
  width: 78%;
  height: 78%;
  animation: float-soft 8s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
  position: relative;
  z-index: 1;
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.tree-branch { animation: pulse-line 4s ease-in-out infinite; }

@keyframes pulse-line {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.hero-floating-card {
  position: absolute;
  background: rgba(22, 32, 77, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  animation: float-card 6s ease-in-out infinite;
}
.hero-floating-card .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 14px var(--c-green);
}
.hero-floating-card .fc-text {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-100);
}
.hero-floating-card .fc-sub {
  font-size: 11px;
  color: var(--ink-400);
}

.fc-1 { top: 12%; left: 4%; animation-delay: -2s; }
.fc-2 { bottom: 14%; right: 6%; animation-delay: -4s; }

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* -------- 8. Trust strip -------- */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-deepest);
  padding: 30px 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 80px;
  animation: marquee 28s linear infinite;
  width: max-content;
}

.marquee-track .m-item {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink-400);
  white-space: nowrap;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.marquee-track .m-item .sep {
  width: 6px; height: 6px;
  background: var(--c-orange);
  border-radius: 50%;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* -------- 9. Service cards -------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.svc-card {
  grid-column: span 4;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all .35s var(--ease-out);
}

.svc-card.featured { grid-column: span 6; }

@media (max-width: 900px) {
  .svc-card, .svc-card.featured { grid-column: span 12; }
}

.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--svc-glow, var(--brand)) 200%);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  pointer-events: none;
}

.svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--svc-glow, var(--brand));
}
.svc-card:hover::before { opacity: .08; }

.svc-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.svc-icon svg { width: 26px; height: 26px; }

.svc-card h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.svc-card p { font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }

.svc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.svc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-300);
}
.svc-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--svc-glow, var(--brand));
  flex-shrink: 0;
}

.svc-card .svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-glow, var(--brand));
  transition: gap .3s;
}
.svc-card .svc-link:hover { gap: 14px; }

/* -------- 10. Process -------- */
.process-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.process-step {
  padding: 50px 28px;
  border-right: 1px solid var(--line);
  position: relative;
}
.process-step:last-child { border-right: 0; }

.process-step .num {
  font-family: var(--f-display);
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: 0;
  background: var(--grad-tree);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 30px;
}

.process-step h4 { font-size: 1.3rem; margin-bottom: 12px; }
.process-step p { font-size: 14px; line-height: 1.55; }

@media (max-width: 900px) {
  .process-wrap { grid-template-columns: 1fr 1fr; }
  .process-step:nth-child(2) { border-right: 0; }
  .process-step:nth-child(1), .process-step:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .process-wrap { grid-template-columns: 1fr; }
  .process-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .process-step:last-child { border-bottom: 0; }
}

/* -------- 11. Portfolio grid -------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.work-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .4s var(--ease-out);
}

.work-card.size-lg { grid-column: span 8; }
.work-card.size-sm { grid-column: span 4; }
.work-card.size-half { grid-column: span 6; }

@media (max-width: 900px) {
  .work-card.size-lg, .work-card.size-sm, .work-card.size-half { grid-column: span 12; }
}

.work-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.work-overlay {
  position: absolute;
  inset: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 30%, rgba(5,8,24,.92) 100%);
  z-index: 2;
}

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

.work-card .work-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.work-card h3 {
  font-size: 1.5rem;
  color: var(--ink-100);
  margin-bottom: 6px;
}
.work-card .work-meta {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-300);
}

/* Decorative work backgrounds */
.canvas-1 { background: linear-gradient(135deg, #1e3a8a 0%, #06b6d4 100%); }
.canvas-2 { background: linear-gradient(135deg, #7c2d12 0%, #fb923c 100%); }
.canvas-3 { background: linear-gradient(135deg, #134e4a 0%, #22c55e 100%); }
.canvas-4 { background: linear-gradient(135deg, #581c87 0%, #d946ef 100%); }
.canvas-5 { background: linear-gradient(135deg, #0c4a6e 0%, #22d3ee 100%); }
.canvas-6 { background: linear-gradient(135deg, #831843 0%, #f43f5e 100%); }

.work-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
}

.work-graphic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* -------- 12. Stats panel -------- */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}

.stat {
  padding: 50px 32px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stat:last-child { border-right: 0; }

.stat .big {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 12px;
}
.stat .big.color-1 { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .big.color-2 { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .big.color-3 { background: var(--grad-life); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .big.color-4 { color: var(--ink-100); }
.stat .lab { font-size: 14px; color: var(--ink-300); }

@media (max-width: 900px) {
  .stats-panel { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .stats-panel { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

/* -------- 13. Testimonials -------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

.t-card {
  padding: 32px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.t-card .stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  color: var(--c-yellow);
}

.t-card blockquote {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-200);
  margin-bottom: 28px;
  flex: 1;
  letter-spacing: 0;
}

.t-card cite {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 12px;
}
.t-card cite .avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--grad-tree);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--bg-deepest);
}
.t-card cite .who { display: flex; flex-direction: column; }
.t-card cite .who b { color: var(--ink-100); font-size: 14px; font-weight: 600; }
.t-card cite .who small { color: var(--ink-400); font-size: 12.5px; }

/* -------- 14. CTA block -------- */
.cta-block {
  padding: 100px 0;
  position: relative;
}

.cta-card {
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-card) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: 70px 60px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-tree);
  opacity: .08;
  z-index: 0;
  background-size: 200% 200%;
  animation: shift-gradient 8s ease infinite;
}

@keyframes shift-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.cta-card > * { position: relative; z-index: 1; }

.cta-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: 16px; }
.cta-card p { max-width: 50ch; margin-bottom: 32px; }

@media (max-width: 800px) {
  .cta-card { grid-template-columns: 1fr; padding: 50px 32px; }
}

.cta-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------- 15. Footer -------- */
footer {
  background: var(--bg-deepest);
  border-top: 1px solid var(--line);
  padding: 90px 0 30px;
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 70px;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand p {
  margin: 22px 0 28px;
  font-size: 14.5px;
  max-width: 360px;
}

.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease-out);
}
.footer-socials a:hover {
  background: var(--brand);
  color: var(--bg-deepest);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.footer-col h5 {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 22px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-size: 14.5px;
  color: var(--ink-200);
  transition: color .25s;
}
.footer-col a:hover { color: var(--brand); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-400);
}
.footer-bottom a:hover { color: var(--brand); }
.footer-bottom-links { display: flex; gap: 24px; }

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; gap: 20px; }
}

/* -------- 16. Reveal animations -------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: all .9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }

/* -------- 17. Sub-page hero -------- */
.page-hero {
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.page-hero-inner {
  max-width: 920px;
}

.page-hero .crumbs {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 30px;
}
.page-hero .crumbs a:hover { color: var(--brand); }
.page-hero .crumbs span { color: var(--ink-300); margin: 0 10px; }

.page-hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.6rem);
  margin-bottom: 26px;
  font-weight: 500;
}

.page-hero .lead { font-size: 1.2rem; max-width: 60ch; }

/* -------- 18. Pricing -------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.plan {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-raised) 100%);
  border-color: var(--line-strong);
  transform: translateY(-12px);
}
.plan.featured::before {
  content: 'Most chosen';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-warm);
  padding: 6px 18px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  box-shadow: 0 10px 30px -8px rgba(244,63,94,.5);
}

@media (max-width: 900px) {
  .plan.featured { transform: none; }
}

.plan h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.plan .plan-tag {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 24px;
}

.plan .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.plan .price .amt {
  font-family: var(--f-display);
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
.plan.color-cool .amt { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.color-warm .amt { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.color-life .amt { background: var(--grad-life); -webkit-background-clip: text; background-clip: text; color: transparent; }

.plan .price .unit { color: var(--ink-400); font-size: 14px; }
.plan .price-sub { font-size: 13.5px; color: var(--ink-400); margin-bottom: 30px; }

.plan ul.features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 26px 0;
  flex: 1;
}
.plan ul.features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-200);
}
.plan ul.features li svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--c-green);
}
.plan ul.features li.muted { color: var(--ink-500); }
.plan ul.features li.muted svg { color: var(--ink-500); }

.plan .plan-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* Toggle for pricing */
.price-toggle {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 50px;
}
.price-toggle button {
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-300);
  transition: all .3s;
}
.price-toggle button.active {
  background: var(--ink-100);
  color: var(--bg-deepest);
}
.price-toggle .save-tag {
  font-size: 10px;
  background: var(--c-green);
  color: var(--bg-deepest);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* -------- 19. About / Team -------- */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
}

.story-text p {
  font-size: 1.05rem;
  margin-bottom: 22px;
  color: var(--ink-200);
}

.value-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 600px) { .value-list { grid-template-columns: 1fr; } }

.value-list .v-item {
  padding: 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.value-list .v-num {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  background: var(--grad-tree);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.value-list .v-item h4 { font-size: 1.05rem; margin-bottom: 6px; }
.value-list .v-item p { font-size: 13.5px; line-height: 1.55; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .team-grid { grid-template-columns: 1fr; } }

.member {
  text-align: left;
}

.member-photo {
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-photo .initial {
  font-family: var(--f-display);
  font-size: 5rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: 0;
}

.member-1 { background: linear-gradient(135deg, #581c87, #d946ef); }
.member-2 { background: linear-gradient(135deg, #0c4a6e, #22d3ee); }
.member-3 { background: linear-gradient(135deg, #134e4a, #a3e635); }
.member-4 { background: linear-gradient(135deg, #7c2d12, #fb923c); }

.member h4 { font-size: 1.1rem; margin-bottom: 2px; }
.member .role {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

/* -------- 20. Contact -------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info .info-block {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.contact-info .info-block:last-child { border-bottom: 0; }
.contact-info .ib-lab {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 8px;
}
.contact-info .ib-val {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-100);
  letter-spacing: 0;
}

.form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.field input,
.field textarea,
.field select {
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--ink-100);
  font-family: var(--f-body);
  font-size: 15px;
  transition: all .25s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(45,212,255,.1);
}
.field textarea { min-height: 130px; resize: vertical; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.chips label {
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-body);
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-200);
  transition: all .25s;
}
.chips label:hover { border-color: var(--ink-300); }
.chips input { display: none; }
.chips input:checked + label {
  background: var(--brand);
  color: var(--bg-deepest);
  border-color: var(--brand);
  font-weight: 600;
}

/* -------- 21. Service detail rows -------- */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 90px 0;
  border-bottom: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 0; }
.svc-row.reverse .svc-row-text { order: 2; }

@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; }
  .svc-row.reverse .svc-row-text { order: 0; }
}

.svc-row .svc-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}

.svc-row h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  margin-bottom: 22px;
}

.svc-row p { font-size: 1.05rem; margin-bottom: 26px; }

.svc-row .checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.svc-row .checklist li {
  font-size: 14px;
  color: var(--ink-200);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.svc-row .checklist li::before {
  content: '✓';
  color: var(--c-green);
  font-weight: 700;
}

.svc-row-visual {
  aspect-ratio: 1/1;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.svc-row-visual.tone-1 { background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.15), transparent 60%), var(--bg-raised); }
.svc-row-visual.tone-2 { background: radial-gradient(circle at 70% 30%, rgba(244,63,94,.15), transparent 60%), var(--bg-raised); }
.svc-row-visual.tone-3 { background: radial-gradient(circle at 50% 70%, rgba(34,197,94,.15), transparent 60%), var(--bg-raised); }
.svc-row-visual.tone-4 { background: radial-gradient(circle at 30% 70%, rgba(217,70,239,.15), transparent 60%), var(--bg-raised); }

/* -------- 22. FAQ -------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.faq-item summary {
  padding: 24px 28px;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-100);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--f-mono);
  font-size: 1.4rem;
  color: var(--brand);
  transition: transform .3s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item .faq-body {
  padding: 0 28px 26px;
  color: var(--ink-300);
  font-size: 14.5px;
  line-height: 1.65;
}

/* -------- 23. Filter pills (portfolio) -------- */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-bar button {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  transition: all .3s;
}
.filter-bar button:hover { color: var(--ink-100); }
.filter-bar button.active {
  background: var(--ink-100);
  color: var(--bg-deepest);
  border-color: var(--ink-100);
}

/* -------- 24. Misc helpers -------- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
  margin: 60px 0;
}

.thin-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}

.kpi-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--c-green);
  margin-top: 8px;
}
.kpi-line::before { content: '↗'; font-weight: 700; }

/* =========================================================
   v2 UPGRADES — Mega menu, audit form, tabbed pricing,
   world map, two-column FAQ, newsletter, mega footer
   ========================================================= */

/* ----- 25. Mega menu ----- */
.nav-links .has-mega {
  position: relative;
}

.mega-trigger {
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-200);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.mega-trigger:hover { color: var(--ink-100); background: rgba(255,255,255,.04); }
.mega-trigger svg { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
.has-mega.open .mega-trigger svg { transform: rotate(180deg); }
.has-mega.open .mega-trigger { color: var(--ink-100); background: rgba(45,212,255,.08); }

.mega-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  --mega-shift: 0px;
  /* X centering is in the transform; clamp shift is in margin-left so it
     applies INSTANTLY (margin-left is not in the transition list below) */
  margin-left: var(--mega-shift);
  transform: translateX(-50%) translateY(-10px);
  width: 920px;
  max-width: 92vw;
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-card) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(45,212,255,.05);
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Explicit transitions — margin-left intentionally omitted so the X clamp
     applied by JS takes effect without a 350ms slide-into-place animation. */
  transition: opacity .35s var(--ease-out),
              transform .35s var(--ease-out),
              visibility .35s var(--ease-out);
  z-index: 100;
}
.has-mega.open .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 40px;
}

.mega-col h6 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega-col h6 .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 10px var(--c-green);
  animation: pulse 2s infinite;
}

.mega-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  transition: all .25s var(--ease-out);
  align-items: flex-start;
}
.mega-item:hover { background: rgba(255,255,255,.04); transform: translateX(2px); }

.mega-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.mega-icon svg { width: 18px; height: 18px; }

.mega-item h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-100);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0;
  font-family: var(--f-body);
}
.mega-item h5 .new-tag {
  background: var(--grad-warm);
  color: white;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
}
.mega-item p {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-400);
}

.mega-footer-cta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.mega-footer-cta .left { color: var(--ink-300); }
.mega-footer-cta .left b { color: var(--ink-100); }

@media (max-width: 960px) { .has-mega { display: none; } }

/* ----- 26. Hero audit search ----- */
.audit-section {
  padding: 0 0 110px;
  margin-top: -20px;
}

.audit-card {
  position: relative;
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-card) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: 50px 60px;
  overflow: hidden;
  isolation: isolate;
}
.audit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(34,211,238,.12), transparent 40%),
    radial-gradient(circle at 88% 70%, rgba(244,63,94,.1), transparent 40%);
  z-index: -1;
}
.audit-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  z-index: -1;
}

.audit-head {
  text-align: center;
  margin-bottom: 32px;
}
.audit-head h3 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.audit-head p {
  font-size: 15px;
  color: var(--ink-300);
  max-width: 50ch;
  margin: 0 auto;
}

.audit-form {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-deepest);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px;
}
.audit-form input,
.audit-form select {
  background: transparent;
  border: 0;
  padding: 16px 20px;
  color: var(--ink-100);
  font-size: 15px;
  font-family: var(--f-body);
  outline: 0;
}
.audit-form input::placeholder { color: var(--ink-500); }
.audit-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b87b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 40px;
  border-left: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink-300);
}
.audit-form select option { background: var(--bg-base); color: var(--ink-100); }
.audit-form button {
  background: var(--grad-warm);
  color: white;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .25s var(--ease-out);
  white-space: nowrap;
}
.audit-form button:hover { filter: brightness(1.12); transform: translateX(2px); }
.audit-form button svg { width: 16px; height: 16px; }

.audit-meta {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.audit-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-300);
}
.audit-meta-item .check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(34,197,94,.15);
  color: var(--c-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 800px) {
  .audit-card { padding: 40px 24px; }
  .audit-form { grid-template-columns: 1fr; border-radius: var(--r-md); gap: 6px; padding: 6px; }
  .audit-form select { border-left: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .audit-form button { width: 100%; justify-content: center; border-radius: var(--r-md); }
}

/* ----- 27. Tabbed pricing ----- */
.tabs-bar {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px;
  margin: 0 auto 50px;
}
.tabs-bar-wrap { text-align: center; }

.tabs-bar button {
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-300);
  transition: all .3s var(--ease-out);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.tabs-bar button .dot-tab {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-400);
}
.tabs-bar button:hover { color: var(--ink-100); }
.tabs-bar button.active {
  background: var(--ink-100);
  color: var(--bg-deepest);
}
.tabs-bar button.active .dot-tab { background: var(--brand); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .4s var(--ease-out); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.price-card-tabbed {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 38px 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card-tabbed.featured {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-raised) 100%);
  border-color: rgba(244,63,94,.4);
  transform: translateY(-8px);
}
.price-card-tabbed.featured::before {
  content: 'Hot Offer';
  position: absolute;
  top: -14px;
  left: 32px;
  background: var(--grad-warm);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  box-shadow: 0 8px 24px -8px rgba(244,63,94,.5);
}
@media (max-width: 900px) { .price-card-tabbed.featured { transform: none; } }

.price-card-tabbed .head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 22px;
}
.price-card-tabbed h3 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 4px;
  font-family: var(--f-body);
  letter-spacing: 0;
}
.price-card-tabbed .sub {
  font-size: 13.5px;
  color: var(--ink-400);
}
.price-card-tabbed .starts {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 8px;
}
.price-card-tabbed .price-big {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 22px;
}
.price-card-tabbed .price-big .v {
  font-family: var(--f-display);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-100);
}
.price-card-tabbed .price-big .u { color: var(--ink-400); font-size: 14px; }

.price-card-tabbed .desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-300);
  margin-top: 26px;
  margin-bottom: 22px;
  flex: 1;
}
.price-card-tabbed .desc strong { color: var(--ink-100); }

.price-card-tabbed ul.feats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.price-card-tabbed ul.feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-200);
}
.price-card-tabbed ul.feats li::before {
  content: '✓';
  color: var(--c-green);
  font-weight: 700;
  font-size: 12px;
  background: rgba(34,197,94,.12);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.price-card-tabbed .pcta {
  margin-top: 22px;
}
.price-card-tabbed .pcta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  color: var(--ink-100);
  transition: all .25s var(--ease-out);
}
.price-card-tabbed .pcta a:hover { background: var(--brand); border-color: var(--brand); color: var(--bg-deepest); }
.price-card-tabbed.featured .pcta a { background: var(--grad-warm); border: 0; color: white; }
.price-card-tabbed.featured .pcta a:hover { filter: brightness(1.12); }

/* ----- 28. World map of locations ----- */
.world-section {
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}

.world-head {
  text-align: center;
  margin-bottom: 60px;
}

.world-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
}

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

.world-svg path {
  fill: rgba(255,255,255,.04);
  stroke: rgba(255,255,255,.1);
  stroke-width: 0.5;
}

.pop-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.pop-pin.right { flex-direction: row; }
.pop-pin.left { flex-direction: row-reverse; }
.pop-pin.top { flex-direction: column-reverse; }

.pop-pin .pop-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.pop-pin .pop-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .5;
  animation: pop-ring 2.5s ease-out infinite;
}
.pop-pin .pop-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  filter: blur(4px);
}

@keyframes pop-ring {
  0% { transform: scale(.7); opacity: .6; }
  100% { transform: scale(2.4); opacity: 0; }
}

.pop-pin .pop-line {
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .35;
  border-top: 1px dashed currentColor;
  background: transparent;
  position: relative;
}
.pop-pin .pop-line.short { width: 14px; }
.pop-pin .pop-line.long { width: 40px; }
.pop-pin.top .pop-line { width: 1px; height: 20px; border-top: 0; border-left: 1px dashed currentColor; }

.pop-pin .pop-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-100);
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(10, 17, 48, 0.85);
  border: 1px solid currentColor;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.pop-pin.color-cyan { color: var(--c-cyan); }
.pop-pin.color-orange { color: var(--c-orange); }
.pop-pin.color-green { color: var(--c-green); }
.pop-pin.color-pink { color: var(--c-pink); }
.pop-pin.color-violet { color: var(--c-violet); }
.pop-pin.color-yellow { color: var(--c-yellow); }
.pop-pin.color-blue { color: var(--c-blue); }
.pop-pin.color-red { color: var(--c-red); }

.world-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 70px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .world-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .world-stats { grid-template-columns: 1fr; }
}

.world-stats .ws-cell {
  padding: 32px 24px;
  border-right: 1px solid var(--line);
}
.world-stats .ws-cell:last-child { border-right: 0; }
@media (max-width: 800px) {
  .world-stats .ws-cell:nth-child(2) { border-right: 0; }
  .world-stats .ws-cell:nth-child(1), .world-stats .ws-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}

.world-stats .ws-num {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-100);
  margin-bottom: 4px;
}
.world-stats .ws-lab {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ----- 29. Two-column FAQ ----- */
.faq-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}
@media (max-width: 800px) { .faq-2col { grid-template-columns: 1fr; } }

.faq-2col .faq-item summary {
  padding: 18px 22px;
  font-size: 14.5px;
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0;
}
.faq-2col .faq-item .faq-body {
  padding: 0 22px 20px;
  font-size: 13.5px;
}

/* ----- 30. Newsletter card ----- */
.newsletter-wrap {
  margin-top: -60px;
  position: relative;
  z-index: 5;
}
.newsletter-card {
  background: linear-gradient(135deg, #1c2858 0%, #2c1b4a 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: 40px 50px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -10%;
  width: 60%;
  height: 200%;
  background: var(--grad-warm);
  filter: blur(60px);
  opacity: .25;
  z-index: 0;
}
.newsletter-card > * { position: relative; z-index: 1; }

.newsletter-icon {
  width: 64px; height: 64px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.newsletter-text h4 {
  font-size: 1.3rem;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: 0;
  font-family: var(--f-body);
}
.newsletter-text p {
  font-size: 14px;
  color: var(--ink-200);
  max-width: 50ch;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  background: var(--bg-deepest);
  border-radius: var(--r-pill);
  padding: 5px;
  border: 1px solid var(--line);
}
.newsletter-form input {
  background: transparent;
  border: 0;
  padding: 12px 18px;
  color: var(--ink-100);
  font-family: var(--f-body);
  font-size: 14px;
  outline: 0;
  width: 240px;
}
.newsletter-form input::placeholder { color: var(--ink-500); }
.newsletter-form button {
  background: var(--ink-100);
  color: var(--bg-deepest);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s var(--ease-out);
}
.newsletter-form button:hover { background: var(--brand); }
.newsletter-form button svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .newsletter-card { grid-template-columns: 1fr; text-align: center; padding: 36px 26px; gap: 24px; }
  .newsletter-icon { margin: 0 auto; }
  .newsletter-text p { margin: 0 auto; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { width: 100%; }
}

/* ----- 31. Mega footer ----- */
footer.mega {
  background: var(--bg-deepest);
  padding: 140px 0 30px;
  border-top: 1px solid var(--line);
  position: relative;
}

.mega-foot-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) repeat(4, minmax(0, 1fr));
  gap: 36px 22px;
  margin-bottom: 70px;
}

.mega-foot-grid > .foot-col:not(.foot-brand) {
  display: contents;
}

@media (max-width: 1100px) {
  .mega-foot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 34px;
  }

  .mega-foot-grid .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .mega-foot-grid { grid-template-columns: 1fr 1fr; }
  .mega-foot-grid .foot-brand { grid-column: span 2; }
}
@media (max-width: 480px) {
  .mega-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 28px;
    row-gap: 40px;
  }

  .mega-foot-grid .foot-brand {
    grid-column: 1 / -1;
  }
  .foot-section {
    min-width: 0;
  }

  .foot-section + .foot-section {
    margin-top: 0;
  }

  .foot-section h5 {
    margin-bottom: 16px;
  }

  .foot-section ul {
    gap: 12px;
    margin-bottom: 0;
  }

  .foot-section a {
    line-height: 1.4;
  }

  .foot-section-services { order: 1; }
  .foot-section-seo { order: 2; }
  .foot-section-hosting { order: 3; }
  .foot-section-studio { order: 4; }
}

.foot-brand p {
  margin: 22px 0 0;
  font-size: 14px;
  max-width: 320px;
  line-height: 1.55;
}

.foot-section + .foot-section {
  margin-top: 0;
}

.foot-col h5 {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-100);
  margin-bottom: 18px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.foot-col ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.foot-col a {
  font-size: 13.5px;
  color: var(--ink-300);
  transition: color .25s, padding .25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.foot-col a:hover { color: var(--brand); padding-left: 4px; }
.foot-col a .new-mini {
  background: var(--c-orange);
  color: white;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Bottom row */
.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
}

@media (max-width: 900px) {
  .foot-bottom { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .foot-bottom > div { justify-content: center; display: flex; flex-wrap: wrap; }
}

.foot-payment {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.foot-payment .pchip {
  height: 28px;
  padding: 0 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-200);
}
.foot-payment .pchip svg { width: 22px; height: 14px; }

.foot-meta {
  display: flex;
  gap: 22px;
  align-items: center;
}
.foot-meta .lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-200);
  cursor: pointer;
  transition: all .25s;
}
.foot-meta .lang-pill:hover { border-color: var(--ink-300); }
.foot-meta .socials { display: flex; gap: 8px; }
.foot-meta .socials a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-200);
  transition: all .25s;
}
.foot-meta .socials a:hover {
  background: var(--brand);
  color: var(--bg-deepest);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.foot-copyright {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-400);
}

.foot-copyright-row {
  margin-bottom: 10px;
}

.foot-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.foot-legal-links a {
  color: var(--ink-300);
}

.foot-legal-links a:not(:last-child)::after {
  content: "·";
  margin-left: 18px;
  color: var(--ink-500);
}

.foot-copyright a { color: var(--ink-300); }
.foot-copyright a:hover { color: var(--brand); }

/* ----- 32. Hero animated rotator ----- */
.rotator {
  display: inline-block;
  position: relative;
  height: 1.05em;
  overflow: hidden;
  vertical-align: bottom;
}
.rotator span {
  display: block;
  height: 1.05em;
  background: var(--grad-tree);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  animation: rotate-words 9s infinite;
}
@keyframes rotate-words {
  0%, 22% { transform: translateY(0); }
  25%, 47% { transform: translateY(-100%); }
  50%, 72% { transform: translateY(-200%); }
  75%, 97% { transform: translateY(-300%); }
  100% { transform: translateY(-400%); }
}

/* ----- 33. Page section wrapper backgrounds ----- */
.section-tint {
  background:
    radial-gradient(circle at 20% 20%, rgba(45,212,255,.05), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(244,63,94,.05), transparent 50%),
    var(--bg-deepest);
}

/* =========================================================
   v3 — INDEX-PAGE DEPTH UPGRADE
   Sections 34-50: top promo, hero v3, stat divider row,
   best-seller split, engagement selector, world map v2,
   awards row, features 2-col, blog cards, featured review,
   icon blocks, FAQ shell, polish
   ========================================================= */

/* ----- 34. Top promo bar (rainbow gradient like AccuWeb) ----- */
.top-promo {
  position: relative;
  background: linear-gradient(90deg, #22d3ee 0%, #6366f1 25%, #8b5cf6 50%, #d946ef 75%, #f43f5e 100%);
  padding: 0;
  font-size: 13.5px;
  z-index: 60;
  border-bottom: 1px solid rgba(0,0,0,.2);
  overflow: visible;
}
.top-promo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.2), transparent 30%, transparent 70%, rgba(0,0,0,.2));
  pointer-events: none;
}
.top-promo-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0;
  gap: 30px;
  color: white;
  position: relative;
  z-index: 1;
}
.top-promo-left { color: rgba(255,255,255,.85); }
.top-promo-msg {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
}
.top-promo-msg a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 700;
}
.top-promo-msg a:hover { text-decoration-thickness: 2px; }

.top-promo-right {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
}
.top-promo-right > a, .top-promo-right > button {
  color: white;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.top-promo-right > a:hover { opacity: .85; }
.top-promo-right .divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.3);
}
.top-promo-search-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: background .25s;
}
.top-promo-search-btn:hover { background: rgba(255,255,255,.3) !important; }

.contact-mini-drop {
  position: relative;
}
.contact-mini-drop > button { color: white; }
.contact-mobile-email-icon { display: none; }
.contact-mini-drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px;
  width: min(320px, calc(100vw - 32px));
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all .3s var(--ease-out);
  z-index: 80;
}
.contact-mini-drop.open .contact-mini-drop-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.contact-mini-drop-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-200);
  font-size: 13.5px;
  transition: background .2s;
}
.contact-mini-drop-panel a:hover { background: rgba(255,255,255,.04); color: var(--ink-100); }
.contact-mini-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.contact-mini-icon-mail {
  color: var(--brand);
}
.contact-mini-drop-panel a span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.contact-mini-drop-panel a .flag {
  width: 22px; height: 16px;
  border-radius: 2px;
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.contact-mini-drop-panel a .flag.us {
  background: linear-gradient(180deg, #b22234 0%, #b22234 33%, #ffffff 33%, #ffffff 66%, #b22234 66%);
  position: relative;
}
.contact-mini-drop-panel a .flag.us::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  background: #3c3b6e;
}
.contact-mini-drop-panel a .flag.uk {
  background: #012169;
  position: relative;
}
.contact-mini-drop-panel a .flag.uk::before, .contact-mini-drop-panel a .flag.uk::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: white;
}
.contact-mini-drop-panel a .flag.uk::before {
  width: 100%; height: 3px;
  transform: translate(-50%, -50%);
}
.contact-mini-drop-panel a .flag.uk::after {
  width: 3px; height: 100%;
  transform: translate(-50%, -50%);
}

@media (max-width: 800px) {
  .top-promo-inner { grid-template-columns: 1fr; gap: 8px; padding: 10px 0; }
  .top-promo-left, .top-promo-right { display: none; }
}

/* ----- 35. Multi mega-menu enhancement (3 panels) ----- */
.mega-panel.size-lg { width: 1080px; }
.mega-panel.size-xl { width: 1180px; }

.mega-grid.three-col { grid-template-columns: 1fr 1.5fr; gap: 8px 40px; }
.mega-grid.three-col .mega-col-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.mega-panel-banner {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(34,211,238,.06) 0%, rgba(244,63,94,.06) 100%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.mega-panel-banner .left {
  display: flex; align-items: center; gap: 14px;
}
.mega-panel-banner .promo-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad-warm);
  display: flex; align-items: center; justify-content: center;
}
.mega-panel-banner h6 {
  font-size: 13.5px;
  margin-bottom: 2px;
  color: var(--ink-100);
  font-weight: 600;
  font-family: var(--f-body);
  letter-spacing: 0;
}
.mega-panel-banner p { font-size: 12.5px; color: var(--ink-300); }

/* ----- 36. Hero v3 — device mockup right side ----- */
.hero-v3 {
  padding: 60px 0 30px;
  position: relative;
  overflow: hidden;
}
.hero-v3::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(244,63,94,.12), transparent 40%),
    radial-gradient(circle at 20% 70%, rgba(34,211,238,.1), transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.hero-v3 .wrap { position: relative; z-index: 1; }

.hero-v3-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 540px;
}
@media (max-width: 1000px) {
  .hero-v3-grid { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
}

.hero-v3-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(45,212,255,.08);
  border: 1px solid rgba(45,212,255,.2);
  color: var(--brand);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 26px;
}
.hero-v3-pill .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 8px var(--c-green);
  animation: pulse 2s infinite;
}

.hero-v3 h1 {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  margin-bottom: 24px;
  color: var(--ink-100);
}
.hero-v3 h1 .rotator-line {
  display: block;
  position: relative;
  height: 1.05em;
  overflow: hidden;
  margin-top: 4px;
}
.hero-v3 h1 .rotator-line .rword {
  display: block;
  height: 1.05em;
  font-style: italic;
  background: var(--grad-tree);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rotate-words 12s infinite;
}

.hero-v3-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-200);
}
.hero-v3-price .price-num {
  font-size: 2.2rem;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0;
}

.hero-v3-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-300);
  margin-bottom: 32px;
  max-width: 52ch;
}

.hero-v3-cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-v3-mini-trust {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-v3-mini-trust .mt-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--ink-300);
}
.hero-v3-mini-trust .mt-item .stars {
  color: var(--c-yellow);
  font-size: 13px;
  letter-spacing: 1px;
}
.hero-v3-mini-trust .mt-item b { color: var(--ink-100); font-weight: 600; }

/* Device mockup right side */
.hero-stage-v3 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 580px;
  margin-left: auto;
}

.device-browser {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}
.device-browser .db-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
}
.device-browser .db-bar .dot {
  width: 9px; height: 9px; border-radius: 50%;
}
.device-browser .db-bar .dot.r { background: #f43f5e; }
.device-browser .db-bar .dot.y { background: #facc15; }
.device-browser .db-bar .dot.g { background: #22c55e; }
.device-browser .db-bar .url {
  margin-left: 12px;
  flex: 1;
  background: rgba(255,255,255,.04);
  border-radius: 5px;
  padding: 5px 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-400);
  display: flex; align-items: center; gap: 5px;
}
.device-browser .db-bar .url .lock {
  color: var(--c-green);
}

.device-browser-1 {
  top: 6%; left: 4%;
  width: 78%;
  z-index: 2;
}
.device-browser-1 .db-canvas {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #0a1130 0%, #16204d 100%);
  position: relative;
  overflow: hidden;
}

.device-phone {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 36%;
  aspect-ratio: 9 / 19;
  background: #050818;
  border: 8px solid #1c2858;
  border-radius: 26px;
  box-shadow: 0 24px 60px -15px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  z-index: 3;
}
.device-phone .notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 18px;
  background: #050818;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 2;
}
.device-phone-canvas {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #0a1130 0%, #1c2858 100%);
  position: relative;
}

/* Floating accent cards on the hero stage */
.hero-stage-v3 .floater {
  position: absolute;
  background: rgba(10, 17, 48, 0.85);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.5);
  z-index: 4;
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-stage-v3 .floater .icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-stage-v3 .floater .text {
  font-family: var(--f-body);
}
.hero-stage-v3 .floater .text .v {
  font-size: 16px; font-weight: 700; color: var(--ink-100); line-height: 1.1;
}
.hero-stage-v3 .floater .text .l {
  font-size: 11px; color: var(--ink-400);
  font-family: var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-stage-v3 .floater.f1 {
  top: 0; left: -20px;
  animation-delay: 0s;
}
.hero-stage-v3 .floater.f1 .icon { background: rgba(34,197,94,.2); color: var(--c-green); }
.hero-stage-v3 .floater.f2 {
  top: 28%; right: -10px;
  animation-delay: 1s;
}
.hero-stage-v3 .floater.f2 .icon { background: rgba(34,211,238,.2); color: var(--c-cyan); }

@media (max-width: 1000px) {
  .hero-stage-v3 { max-width: 420px; margin: 0 auto; }
  .hero-stage-v3 .floater.f1 { left: 0; }
  .hero-stage-v3 .floater.f2 { right: 0; }
}
@media (max-width: 540px) {
  .hero-stage-v3 .floater { padding: 8px 12px; }
  .hero-stage-v3 .floater .icon { width: 28px; height: 28px; }
  .hero-stage-v3 .floater .text .v { font-size: 13px; }
  .hero-stage-v3 .floater .text .l { font-size: 9px; }
}

/* ----- 37. Audit search panel v2 (rainbow gradient panel, like AccuWeb's Register Your Domain) ----- */
.audit-v2-wrap {
  padding: 0 0 80px;
  position: relative;
}
.audit-v2 {
  position: relative;
  background:
    radial-gradient(circle at 0% 50%, rgba(244,63,94,.18), transparent 50%),
    radial-gradient(circle at 100% 50%, rgba(139,92,246,.2), transparent 50%),
    linear-gradient(135deg, #1e1851 0%, #2a1547 50%, #3b1648 100%);
  border-radius: 16px;
  padding: 50px 60px;
  border: 1px solid rgba(217,70,239,.15);
  overflow: hidden;
}
.audit-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  opacity: .5;
  z-index: 0;
}
.audit-v2 > * { position: relative; z-index: 1; }

.audit-v2-head { text-align: center; margin-bottom: 28px; }
.audit-v2-head h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  color: white;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.audit-v2-head p {
  font-size: 14.5px;
  color: rgba(255,255,255,.7);
  max-width: 54ch;
  margin: 0 auto;
}

.audit-v2-form {
  display: grid;
  grid-template-columns: 1fr 200px auto;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.4);
}
.audit-v2-form input,
.audit-v2-form select {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  font-size: 15px;
  font-family: var(--f-body);
  color: #0a1130;
  outline: 0;
}
.audit-v2-form input::placeholder { color: #7b87b3; }
.audit-v2-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525e88' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 32px;
  border-left: 1px solid #e5e7eb;
  cursor: pointer;
  color: #525e88;
  font-weight: 500;
}
.audit-v2-form select option { color: #0a1130; }
.audit-v2-form button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  color: white;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: filter .25s;
}
.audit-v2-form button:hover { filter: brightness(1.12); }
.audit-v2-form button svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .audit-v2 { padding: 36px 22px; }
  .audit-v2-form { grid-template-columns: 1fr; }
  .audit-v2-form select { border-left: 0; border-top: 1px solid #e5e7eb; }
  .audit-v2-form button { width: 100%; justify-content: center; }
}

/* ----- 38. Stat divider row (4 cols, big colored numbers, divider lines) ----- */
.stat-row-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: transparent;
  margin: 60px 0 100px;
}
.stat-row-v2 .sr-cell {
  text-align: center;
  padding: 20px;
}
.stat-row-v2 .sr-num {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 8px;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-row-v2 .sr-cell:nth-child(2) .sr-num { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row-v2 .sr-cell:nth-child(3) .sr-num { background: var(--grad-life); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row-v2 .sr-cell:nth-child(4) .sr-num { background: linear-gradient(135deg, #d946ef, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row-v2 .sr-lab {
  font-size: 13px;
  color: var(--ink-300);
  font-family: var(--f-body);
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .stat-row-v2 { grid-template-columns: 1fr 1fr; gap: 30px 0; margin: 40px 0 70px; }
}

/* ----- 39. Best Seller split (image left, content right) ----- */
.best-seller-section {
  padding: 90px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.best-seller-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
@media (max-width: 1000px) {
  .best-seller-grid { grid-template-columns: 1fr; gap: 50px; }
}

.bs-illust {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-card) 100%);
  border: 1px solid var(--line-strong);
}
.bs-illust-canvas {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}

.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin: 28px 0 32px;
}
@media (max-width: 600px) { .check-list { grid-template-columns: 1fr; } }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-200);
  line-height: 1.5;
}
.check-list li::before {
  content: '';
  display: inline-block;
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}
.check-list li.cv::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.check-list li.cg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.check-list li.co::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb923c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.check-list li.cp::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d946ef' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }

/* ----- 40. Engagement selector (VCPU pattern adapted) ----- */
.engage-section {
  padding: 90px 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(34,211,238,.06), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(217,70,239,.06), transparent 40%),
    var(--bg-deepest);
}
.engage-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 1000px) { .engage-grid { grid-template-columns: 1fr; gap: 40px; } }

.engage-panel {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px;
}

.engage-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.engage-tabs button {
  flex: 1 1 auto;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-300);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  font-family: var(--f-body);
  letter-spacing: 0;
  cursor: pointer;
  transition: all .25s var(--ease-out);
  position: relative;
}
.engage-tabs button:hover { color: var(--ink-100); border-color: var(--line-strong); }
.engage-tabs button.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: rgba(139,92,246,.5);
  color: white;
  box-shadow: 0 8px 24px -8px rgba(139,92,246,.6);
}
.engage-tabs button.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #8b5cf6;
}

.engage-meta {
  background: rgba(34,211,238,.06);
  border: 1px solid rgba(34,211,238,.15);
  border-radius: var(--r-md);
  padding: 14px 20px;
  margin-bottom: 22px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-200);
  letter-spacing: 0.04em;
}
.engage-meta b { color: white; font-weight: 700; }
.engage-meta .sep { color: var(--ink-500); margin: 0 8px; }

.engage-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.engage-card {
  padding: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  text-align: center;
  transition: all .25s var(--ease-out);
}
.engage-card.featured {
  background: rgba(139,92,246,.06);
  border-color: rgba(139,92,246,.3);
  box-shadow: 0 0 0 1px rgba(139,92,246,.1), 0 12px 30px -10px rgba(139,92,246,.3);
}
.engage-card:hover { transform: translateY(-2px); }

.engage-card .ec-logo {
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-100);
}
.engage-card .ec-logo .gen { font-style: italic; color: var(--ink-300); font-weight: 400; }
.engage-card .ec-rule {
  width: 30px;
  height: 2px;
  background: var(--brand);
  margin: 10px auto 14px;
}
.engage-card.featured .ec-rule { background: var(--grad-warm); height: 3px; }

.engage-card .ec-line {
  font-size: 13.5px;
  margin: 6px 0;
  color: var(--ink-300);
}
.engage-card .ec-line b { color: var(--ink-100); font-weight: 700; }
.engage-card .ec-line.muted { color: var(--ink-400); font-size: 12px; }

/* ----- 41. World map v2 — dotted leader labels (AccuWeb style) ----- */
.world-v3 { padding: 90px 0; position: relative; }

.world-v3-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }

.world-v3-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1100 / 620;
}

.world-v3-svg {
  width: 100%; height: 100%;
  position: absolute;
  inset: 0;
}
.world-v3-svg .continent {
  fill: rgba(45, 212, 255, 0.06);
  stroke: rgba(45, 212, 255, 0.18);
  stroke-width: 0.4;
}

/* City label - AccuWeb style: bold city name + thin dotted leader to pin */
.city-pin {
  position: absolute;
  z-index: 4;
}
.city-pin .pin {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04), 0 0 20px currentColor;
  position: relative;
  transform: translate(-50%, -50%);
}
.city-pin .pin::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .6;
  animation: ring-out 2.5s ease-out infinite;
}
@keyframes ring-out {
  0% { transform: scale(.65); opacity: .8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.city-pin .leader {
  position: absolute;
  border-color: currentColor;
  border-style: dashed;
  border-width: 0;
  opacity: .55;
}

.city-pin .city-label {
  position: absolute;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-100);
  white-space: nowrap;
  letter-spacing: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.city-pin .city-label .sub {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 1px;
}

/* Color variants */
.city-pin.c-cyan { color: var(--c-cyan); }
.city-pin.c-orange { color: var(--c-orange); }
.city-pin.c-green { color: var(--c-green); }
.city-pin.c-yellow { color: var(--c-yellow); }
.city-pin.c-violet { color: var(--c-violet); }
.city-pin.c-pink { color: var(--c-pink); }
.city-pin.c-red { color: var(--c-red); }
.city-pin.c-blue { color: var(--c-blue); }
.city-pin.c-magenta { color: var(--c-magenta); }

@media (max-width: 800px) {
  .city-pin .city-label { font-size: 11px; }
  .city-pin .city-label .sub { font-size: 8.5px; }
}

/* ----- 42. Awards & Recognition row ----- */
.awards-section {
  padding: 90px 0;
  background:
    linear-gradient(180deg, transparent, rgba(45,212,255,.02) 50%, transparent),
    var(--bg-deepest);
  border-top: 1px solid var(--line);
}
.awards-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 50px 0 40px;
}
@media (max-width: 1100px) { .awards-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .awards-row { grid-template-columns: repeat(2, 1fr); } }

.award-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all .3s var(--ease-out);
  overflow: hidden;
}
.award-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--brand));
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.award-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent, var(--line-strong));
  box-shadow: 0 14px 30px -10px var(--accent-glow, rgba(45,212,255,.2));
}

.award-card .a-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--accent, var(--brand));
  margin-bottom: 10px;
}
.award-card .a-name {
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: 0;
  margin-bottom: 2px;
}
.award-card .a-sub {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.award-card .a-year {
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.awards-cta {
  text-align: center;
  margin-top: 36px;
}

/* ----- 43. Features 2-col with icon-on-right pattern ----- */
.features-2col-section {
  padding: 90px 0;
}
.features-2col-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}
.features-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .features-2col-grid { grid-template-columns: 1fr; } }

.feat-2-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all .3s var(--ease-out);
}
.feat-2-card::before {
  content: '';
  position: absolute;
  right: -30%;
  top: -30%;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle, var(--accent-glow, rgba(45,212,255,.1)), transparent 60%);
  pointer-events: none;
}
.feat-2-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }

.feat-2-card h4 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ink-100);
  letter-spacing: 0;
}
.feat-2-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-300);
}
.feat-2-card .f2-icon-block {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .feat-2-card { grid-template-columns: 1fr; padding: 28px; text-align: center; }
  .feat-2-card .f2-icon-block { margin: 0 auto; width: 80px; height: 80px; }
}

/* ----- 44. Blog cards grid ----- */
.blogs-section {
  padding: 90px 0;
  background: var(--bg-deepest);
}
.blogs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  gap: 30px;
  flex-wrap: wrap;
}

.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .blogs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .blogs-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .3s var(--ease-out);
  position: relative;
}
.blog-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, transparent 50%, var(--accent, var(--brand)) 50%);
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent, var(--line-strong));
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.5);
}

.blog-card-image {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-raised), var(--bg-card));
  border-bottom: 1px solid var(--line);
}
.blog-card-image .bg-pattern {
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(45deg, transparent 48%, currentColor 48%, currentColor 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, currentColor 48%, currentColor 52%, transparent 52%);
  background-size: 18px 18px;
}

.blog-card-image .bc-illust {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}

.blog-card-image .bc-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(10, 17, 48, 0.85);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, var(--brand));
  border: 1px solid var(--accent, var(--brand));
  z-index: 2;
}

.blog-card-body { padding: 22px 26px 26px; }
.blog-card h4 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-100);
  margin-bottom: 10px;
  letter-spacing: 0;
  line-height: 1.3;
}
.blog-card p {
  font-size: 13.5px;
  color: var(--ink-300);
  line-height: 1.55;
  margin-bottom: 16px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}
.blog-card-meta .author {
  display: flex;
  align-items: center;
  gap: 6px;
}
.blog-card-meta .author-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, var(--brand));
}

.blog-card-link {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, var(--brand));
}
.blog-card-link svg { width: 14px; height: 14px; transition: transform .25s; }
.blog-card:hover .blog-card-link svg { transform: translateX(3px); }

/* ----- 45. Featured review card (big accent panel) ----- */
.reviews-v3 {
  padding: 90px 0;
}
.reviews-v3-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 1000px) { .reviews-v3-grid { grid-template-columns: 1fr; } }

.review-featured-card {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(244,63,94,.15), transparent 50%),
    linear-gradient(135deg, #1e1851 0%, #2a1547 50%, #3b1648 100%);
  border-radius: var(--r-xl);
  padding: 42px;
  border: 1px solid rgba(217,70,239,.2);
  overflow: hidden;
  isolation: isolate;
}
.review-featured-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(circle at right top, black 20%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at right top, black 20%, transparent 60%);
  opacity: .35;
  z-index: -1;
}

.review-featured-card .src-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: white;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg-deepest);
  margin-bottom: 22px;
}
.review-featured-card .src-badge .src-star {
  width: 14px; height: 14px;
  background: var(--c-yellow);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
}

.review-featured-card h4 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
  letter-spacing: 0;
}
.review-featured-card .quote-block {
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 22px;
  margin-bottom: 22px;
}
.review-featured-card .quote-block p {
  color: rgba(255,255,255,.9);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.review-featured-card .quote-block p b { color: white; font-weight: 700; }

.review-featured-card .author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.review-featured-card .author-l {
  display: flex; align-items: center; gap: 14px;
}
.review-featured-card .author-l .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-warm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  color: white;
}
.review-featured-card .author-l .meta {
  font-family: var(--f-body);
}
.review-featured-card .author-l .meta b {
  display: block;
  color: white;
  font-size: 14.5px;
  font-weight: 600;
}
.review-featured-card .author-l .meta span {
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
}

.review-featured-card .author-r {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,.7);
}
.review-featured-card .author-r .row {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
}
.review-featured-card .author-r .star {
  color: var(--c-yellow);
}

.review-pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 26px;
}
.review-pager .pg {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-300);
  cursor: pointer;
  transition: all .25s;
}
.review-pager .pg.active {
  background: var(--brand);
  color: var(--bg-deepest);
  border-color: var(--brand);
}
.review-pager .pg:hover:not(.active) { border-color: var(--line-strong); }

/* ----- 46. Icon blocks row (Follow us / Live discussion / Support) ----- */
.icon-blocks-section {
  padding: 0 0 70px;
}
.icon-blocks-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) { .icon-blocks-row { grid-template-columns: 1fr; } }

.icon-block {
  padding: 36px 32px;
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-block:last-child { border-right: 0; }
@media (max-width: 800px) {
  .icon-block { border-right: 0; border-bottom: 1px solid var(--line); }
  .icon-block:last-child { border-bottom: 0; }
}

.icon-block .ib-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(45,212,255,.1);
  border: 1px solid rgba(45,212,255,.25);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.icon-block .ib-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-100);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.icon-block .ib-sub {
  font-size: 13px;
  color: var(--ink-300);
  max-width: 28ch;
  line-height: 1.5;
}

/* ----- 47. FAQ section styled ----- */
.faq-styled {
  padding: 90px 0;
  background: var(--bg-deepest);
}
.faq-styled-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}

/* Polish on existing 2-col FAQ for this context */
.faq-styled .faq-2col {
  max-width: 1100px;
  margin: 0 auto;
}
.faq-styled .faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 0;
}
.faq-styled .faq-item summary {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--ink-200);
}
.faq-styled .faq-item summary::after {
  content: '+';
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--brand);
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-styled .faq-item[open] summary::after { content: '−'; }
.faq-styled .faq-item[open] summary { color: var(--ink-100); }
.faq-styled .faq-item[open] { border-color: var(--line-strong); }

/* ----- 48. Polish — pricing tab underline like AccuWeb ----- */
.tabs-bar-v2-wrap {
  text-align: center;
  margin-bottom: 50px;
  border-bottom: 1px solid var(--line);
}
.tabs-bar-v2 {
  display: inline-flex;
  gap: 40px;
  margin: 0 auto -1px;
  padding: 0 20px;
}
.tabs-bar-v2 button {
  padding: 14px 0 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-300);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: var(--f-body);
  letter-spacing: 0;
  position: relative;
  transition: color .2s;
}
.tabs-bar-v2 button:hover { color: var(--ink-100); }
.tabs-bar-v2 button.active {
  color: white;
  border-bottom-color: var(--brand);
}

@media (max-width: 700px) {
  .tabs-bar-v2 { gap: 18px; overflow-x: auto; flex-wrap: nowrap; width: 100%; padding: 0 16px; }
  .tabs-bar-v2 button { white-space: nowrap; padding: 12px 0 14px; font-size: 13.5px; }
}

/* ----- 49. Best Plan section header ----- */
.best-plan-head {
  text-align: center;
  margin-bottom: 50px;
}
.best-plan-head .eyebrow {
  justify-content: center;
  margin-bottom: 14px;
}
.best-plan-head h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-100);
  margin-bottom: 10px;
}
.best-plan-head p {
  font-size: 16px;
  color: var(--ink-300);
  max-width: 56ch;
  margin: 0 auto;
}

/* ----- 50. Refined pricing card v3 (more like AccuWeb) ----- */
.price-card-v3 {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 28px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all .3s var(--ease-out);
}
.price-card-v3:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}
.price-card-v3.hot {
  border-color: rgba(139,92,246,.4);
  background: linear-gradient(180deg, rgba(139,92,246,.05) 0%, var(--bg-card) 50%);
  box-shadow: 0 0 0 1px rgba(139,92,246,.15), 0 16px 40px -12px rgba(139,92,246,.3);
}
.price-card-v3.hot::before {
  content: 'Hot Offer';
  position: absolute;
  top: 0; left: 32px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
  color: white;
  padding: 6px 18px;
  border-radius: 6px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px -4px rgba(139,92,246,.5);
}

.price-card-v3 .pcv-title {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: 0;
  margin-bottom: 6px;
}
.price-card-v3 .pcv-rule {
  width: 26px; height: 2px;
  background: var(--brand);
  margin-bottom: 16px;
}
.price-card-v3.hot .pcv-rule { background: var(--grad-warm); height: 3px; }
.price-card-v3 .pcv-sub {
  font-size: 13.5px;
  color: var(--ink-300);
  margin-bottom: 22px;
  line-height: 1.5;
}
.price-card-v3 .pcv-start {
  font-size: 12.5px;
  color: var(--ink-400);
  margin-bottom: 4px;
}
.price-card-v3 .pcv-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 22px;
}
.price-card-v3 .pcv-price .v {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-100);
}
.price-card-v3 .pcv-price .u {
  font-size: 14px;
  color: var(--ink-400);
}

.price-card-v3 .pcv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  color: var(--ink-100);
  transition: all .25s;
  width: fit-content;
  margin-bottom: 26px;
}
.price-card-v3 .pcv-btn svg { width: 14px; height: 14px; }
.price-card-v3 .pcv-btn:hover { background: var(--brand); color: var(--bg-deepest); border-color: var(--brand); }
.price-card-v3.hot .pcv-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
  border: 0;
  color: white;
  padding: 12px 20px;
}
.price-card-v3.hot .pcv-btn:hover { filter: brightness(1.15); transform: translateX(2px); }

.price-card-v3 .pcv-feats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.price-card-v3 .pcv-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-200);
}
.price-card-v3 .pcv-feats li::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}
.price-card-v3.hot .pcv-feats li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.price-card-v3 .pcv-feats li b { color: var(--ink-100); font-weight: 700; }

.price-grid-v3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width: 720px) { .price-grid-v3 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

@media (min-width: 721px) and (max-width: 1180px) {
  #pricing .price-grid-v3 {
    max-width: none;
    margin: 0;
    gap: 12px;
  }

  #home-panel-design .price-grid-v3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #home-panel-seo .price-grid-v3,
  #home-panel-care .price-grid-v3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #home-panel-ecommerce .price-grid-v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pricing .price-card-v3 {
    min-width: 0;
    border-radius: 14px;
    padding: 22px 14px 18px;
  }

  #pricing .price-card-v3.hot::before {
    left: 14px;
    padding: 4px 10px;
    font-size: 9px;
  }

  #pricing .price-card-v3 .pcv-title {
    font-size: 1rem;
    line-height: 1.12;
  }

  #pricing .price-card-v3 .pcv-rule {
    margin-bottom: 12px;
  }

  #pricing .price-card-v3 .pcv-sub {
    font-size: 11.5px;
    line-height: 1.35;
    margin-bottom: 14px;
  }

  #pricing .price-card-v3 .pcv-start {
    font-size: 10.5px;
  }

  #pricing .price-card-v3 .pcv-price {
    flex-wrap: wrap;
    gap: 2px 4px;
    margin-bottom: 14px;
  }

  #pricing .price-card-v3 .pcv-price .v {
    font-size: clamp(1.55rem, 3.2vw, 2rem);
  }

  #pricing .price-card-v3 .pcv-price .u {
    font-size: 11px;
  }

  #pricing .price-card-v3 .pcv-btn,
  #pricing .price-card-v3.hot .pcv-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 10px;
    font-size: 11.5px;
    margin-bottom: 16px;
  }

  #pricing .price-card-v3 .pcv-feats {
    gap: 7px;
    padding-top: 14px;
  }

  #pricing .price-card-v3 .pcv-feats li {
    gap: 7px;
    font-size: 11.2px;
    line-height: 1.35;
  }

  #pricing .price-card-v3 .pcv-feats li::before {
    width: 14px;
    height: 14px;
    background-size: 11px;
  }
}


/* =========================================================
   v4 — RESPONSIVE OPTIMIZATION OVERLAY
   Section 51-65: 8K → mobile fluid scaling, a11y, polish
   ========================================================= */

/* ----- 51. Accessibility helpers ----- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--ink-100);
  color: var(--bg-deepest);
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top .25s var(--ease-out);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.4);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Visible focus rings — replace browser defaults */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.btn:focus-visible {
  outline-offset: 4px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-stage-v3 .floater { animation: none; }
  .city-pin .pin::after { animation: none; opacity: .3; }
  /* Show all reveals immediately */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ----- 52. Body font-size rem-based for proportional ultra-wide scaling ----- */
html { font-size: 100%; }                /* 1rem = 16px by default */
body { font-size: 1rem; }                /* override hard 16px */

/* ----- 53. Top promo bar — keep useful controls on mobile ----- */
.top-promo-msg .short { display: none; }
.top-promo-msg .full { display: inline; }

@media (max-width: 800px) {
  .top-promo-inner {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 8px 0;
  }
  .top-promo-left { display: none; }
  .top-promo-right { display: flex; }
  .top-promo-msg { text-align: left; font-size: 12.5px; line-height: 1.3; }
  .top-promo-msg .full { display: none; }
  .top-promo-msg .short { display: inline; }
  .top-promo-right { gap: 10px; }
  .top-promo-right .hide-on-tablet { display: none; }
  .contact-mini-drop > button .contact-label { display: none; }
  .contact-mini-drop > button {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    justify-content: center;
    padding: 0;
  }
  .contact-mini-drop > button .contact-chevron { display: none; }
  .contact-mini-drop > button::before {
    content: none;
  }
  .contact-mini-drop > button .contact-mobile-email-icon {
    display: block;
    width: 16px;
    height: 16px;
  }
  .contact-mini-drop-panel { width: min(320px, calc(100vw - 32px)); right: 0; }
}
@media (max-width: 480px) {
  .top-promo-msg { font-size: 12px; }
}

/* ----- 54. Hero v3 — tighter on small phones, no overflow ----- */
@media (max-width: 1000px) {
  .hero-v3 { padding: 48px 0 24px; }
}
@media (max-width: 720px) {
  .hero-v3 h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-v3-desc { font-size: 15.5px; }
  .hero-v3-price { font-size: 1.2rem; }
  .hero-v3-price .price-num { font-size: 1.9rem; }
  .hero-v3-mini-trust { gap: 14px 20px; font-size: 12px; padding-top: 20px; }
  .hero-v3-mini-trust .mt-item { font-size: 12px; }
  .hero-v3-cta-row .btn { padding: 12px 18px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .hero-v3 { padding: 36px 0 20px; }
  .hero-v3-pill { font-size: 10.5px; padding: 6px 12px; margin-bottom: 18px; }
  .hero-v3 h1 { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 18px; }
  .hero-v3-desc { margin-bottom: 24px; }
  .hero-v3-cta-row { gap: 10px; margin-bottom: 28px; }
  .hero-v3-cta-row .btn { flex: 1 1 auto; justify-content: center; }
  .hero-stage-v3 { max-width: 100%; }
  /* On very small phones, only show the browser mockup; hide phone + outer floaters to remove overlap */
  .hero-stage-v3 .device-phone { display: none; }
  .hero-stage-v3 .floater.f1 { top: -6px; left: 0; }
  .hero-stage-v3 .floater.f2 { top: auto; bottom: -8px; right: 0; }
  .device-browser-1 { width: 96%; left: 2%; top: 8%; }
}

/* ----- 55. Audit search panel — phone polish ----- */
@media (max-width: 700px) {
  .audit-v2 { padding: 32px 18px; border-radius: 14px; }
  .audit-v2-head h3 { font-size: 1.5rem; }
  .audit-v2-head p { font-size: 13.5px; }
  .audit-v2-form { gap: 4px; padding: 4px; }
  .audit-v2-form input,
  .audit-v2-form select { padding: 13px 14px; font-size: 14.5px; }
  .audit-v2-form button { padding: 14px; font-size: 14px; }
}

/* ----- 56. Stat row v2 — never go cramped 2x2 on tiny phones; switch to 1 col ----- */
@media (max-width: 480px) {
  .stat-row-v2 { grid-template-columns: 1fr 1fr; gap: 24px 0; margin: 30px 0 50px; }
  .stat-row-v2 .sr-cell { padding: 12px 8px; }
  .stat-row-v2 .sr-num { font-size: 2rem; }
  .stat-row-v2 .sr-lab { font-size: 12px; }
}
@media (max-width: 360px) {
  .stat-row-v2 { grid-template-columns: 1fr; }
}

/* ----- 57. Tabbed pricing — horizontal scroll on narrow widths ----- */
.tabs-bar-v2-wrap {
  display: flex; justify-content: center;
  margin: 36px 0 30px;
}
.tabs-bar-v2 {
  display: inline-flex;
  flex-wrap: nowrap;
}
@media (max-width: 720px) {
  /* Contain edge-bleed inside the .wrap by clipping rather than negative margin */
  .tabs-bar-v2-wrap {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    /* fade edge cue */
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .tabs-bar-v2-wrap::-webkit-scrollbar { display: none; }
  .tabs-bar-v2 { white-space: nowrap; }
  .tabs-bar-v2 button { font-size: 13px; padding: 10px 16px; }
}

/* ----- 58. Engage compare — stack on small phones ----- */
@media (max-width: 540px) {
  .engage-compare { grid-template-columns: 1fr; }
  .engage-panel { padding: 22px; border-radius: 18px; }
  .engage-tabs { gap: 4px; }
  .engage-tabs button { padding: 11px 12px; font-size: 12px; flex: 1 1 calc(50% - 4px); }
  .engage-meta { font-size: 11.5px; padding: 12px 14px; line-height: 1.5; }
  .engage-meta .sep { margin: 0 4px; }
}

/* ----- 59. World map — compact labels on small screens (percentages keep pins in place) ----- */
@media (max-width: 900px) {
  .world-v3 { padding: 60px 0; }
  .world-v3-head { margin-bottom: 36px; }
  .world-v3-wrap { overflow: hidden; border-radius: var(--r-md); } /* clip negative-positioned labels */
  .city-pin .pin { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 0 14px currentColor; }
  .city-pin .city-label { font-size: 11.5px; }
  .city-pin .city-label .sub { font-size: 8.5px; letter-spacing: 0.06em; }
}
@media (max-width: 700px) {
  /* Hide subtitle on very small screens to keep labels from colliding */
  .city-pin .city-label .sub { display: none; }
  .city-pin .city-label { font-size: 10.5px; padding: 1px 5px; background: rgba(10,17,48,.6); border-radius: 4px; backdrop-filter: blur(4px); }
  .city-pin .leader { display: none; }
}
@media (max-width: 480px) {
  /* On the smallest phones, hide labels entirely; pins still mark locations */
  .city-pin .city-label { display: none; }
  .city-pin .leader { display: none; }
  .world-v3-wrap { aspect-ratio: 1100 / 480; } /* tighter map height */
}
@media (max-width: 600px) {
  .world-v3-head h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .world-v3-head .lead { font-size: 14.5px; }
  .city-pin .city-label { font-size: 11.5px; }
  .city-pin .city-label .sub { font-size: 8.5px; }
}

/* ----- 60. Awards row — readable on tiny phones ----- */
@media (max-width: 380px) {
  .awards-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .award-card { padding: 14px; }
  .a-name { font-size: 13.5px; }
  .a-sub { font-size: 10.5px; }
}

/* ----- 61. Features 2-col, blog, reviews, FAQ polish ----- */
@media (max-width: 600px) {
  .feat-2-card h4 { font-size: 1.05rem; }
  .feat-2-card p { font-size: 13.5px; }
  .blogs-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .blogs-head h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .blog-card-body { padding: 20px 22px 22px; }
  .blog-card h4 { font-size: 1.05rem; }
  .review-featured-card { padding: 28px 22px; border-radius: 22px; }
  .review-featured-card h4 { font-size: 1.1rem; }
  .review-pager { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .reviews-v3 { padding: 60px 0; }
  .reviews-v3-grid { gap: 32px; }
  .reviews-left h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* FAQ — give summaries a comfortable tap target on mobile */
@media (max-width: 800px) {
  .faq-2col .faq-item summary {
    padding: 18px 18px;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
  }
  .faq-2col .faq-item .faq-body {
    padding: 0 18px 18px;
    font-size: 13px;
    line-height: 1.55;
  }
}

/* ----- 62. Newsletter — friendlier on small phones ----- */
@media (max-width: 600px) {
  .newsletter-wrap { margin-top: -40px; }
  .newsletter-card { padding: 30px 22px; gap: 20px; border-radius: 22px; }
  .newsletter-text h4 { font-size: 1.1rem; }
  .newsletter-text p { font-size: 13.5px; }
  .newsletter-form { flex-direction: column; padding: 6px; border-radius: 18px; gap: 4px; }
  .newsletter-form input { padding: 14px 16px; width: 100%; }
  .newsletter-form button {
    width: 100%;
    justify-content: center;
    border-radius: 14px;
    padding: 14px;
  }
}

/* ----- 63. Footer polish ----- */
@media (max-width: 600px) {
  footer.mega { padding: 110px 0 24px; }
  .foot-col h5 { font-size: 14px; }
  .foot-col a { font-size: 13px; padding: 4px 0; }
  .foot-payment { justify-content: center; }
  .foot-bottom { padding-top: 22px; gap: 18px; }
  .foot-copyright { font-size: 11.5px; line-height: 1.7; padding-top: 18px; }
  .foot-copyright-row { margin-bottom: 8px; }
  .foot-legal-links { gap: 2px 14px; }
  .foot-legal-links a { display: inline-block; padding: 2px 0; }
  .foot-legal-links a:not(:last-child)::after { margin-left: 14px; }
}

/* ----- 64. Mega menu — never overflow viewport ----- */
.mega-panel.size-lg,
.mega-panel.size-xl {
  width: min(1080px, calc(100vw - 48px));
  max-width: 1180px;
}
.mega-panel {
  max-width: calc(100vw - 48px);
}

/* ----- 65. Best-plan section — better tap area on cards ----- */
@media (max-width: 600px) {
  .price-card-v3 { padding: 32px 22px 24px; border-radius: 18px; }
  .price-card-v3 .pcv-title { font-size: 1.2rem; }
  .price-card-v3 .pcv-price .v { font-size: 2.2rem; }
  .price-card-v3 .pcv-feats li { font-size: 13px; }
  .best-plan-head h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .best-plan-head p { font-size: 14.5px; }
  section { padding: 64px 0; }
  section[style*="padding: 80px 0"] { padding: 56px 0 !important; }
}

/* ----- 66. Best Seller, awards, features sections — fluid section padding ----- */
@media (max-width: 600px) {
  .best-seller-section,
  .awards-section,
  .features-2col-section,
  .engage-section,
  .blogs-section,
  .world-v3,
  .icon-blocks-section,
  .faq-styled {
    padding: 60px 0;
  }
  .best-seller-grid { gap: 36px; }
  .icon-blocks-row { gap: 18px; }
}

/* ----- 67. Wrap padding — tighten on small phones, loosen on tablets ----- */
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
}
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
}

/* =========================================================
   v4b — ULTRAWIDE / 8K SCALING
   Grow type, container, and density on wide displays without
   ever stretching the design beyond comfort.
   ========================================================= */

/* 1600px+ — late desktop / wider laptops */
@media (min-width: 1600px) {
  .wrap { max-width: 1440px; padding: 0 36px; }
  .hero-v3-grid { gap: 80px; }
  section { padding: 130px 0; }
}

/* 1920px+ — full HD desktops, larger external monitors */
@media (min-width: 1920px) {
  :root { font-size: 17px; }
  .wrap { max-width: 1640px; padding: 0 48px; }
  .hero-v3 { padding: 80px 0 50px; }
  .hero-v3-grid { min-height: 600px; }
  .hero-stage-v3 { max-width: 660px; }
  section { padding: 140px 0; }
  .mega-panel.size-lg { width: min(1180px, calc(100vw - 64px)); }
}

/* 2560px+ — QHD / 1440p displays */
@media (min-width: 2560px) {
  :root { font-size: 18px; }
  .wrap { max-width: 1960px; padding: 0 64px; }
  .hero-v3-grid { gap: 100px; min-height: 720px; }
  .hero-stage-v3 { max-width: 780px; }
  section { padding: 160px 0; }
  .price-grid-v3 { gap: 32px; }
  .blogs-grid { gap: 32px; }
  .mega-foot-grid { gap: 48px 40px; }
}

/* 3200px+ — 4K-class scaled OR ultrawide */
@media (min-width: 3200px) {
  :root { font-size: 18px; }
  .wrap { max-width: 2400px; padding: 0 96px; }
  .hero-v3 { padding: 110px 0 70px; }
  .hero-v3-grid { gap: 120px; min-height: 860px; }
  .hero-stage-v3 { max-width: 920px; }
  section { padding: 180px 0; }
  .device-browser, .device-phone { border-radius: 18px; }
  .floater { padding: 16px 22px !important; border-radius: 18px !important; }
}

/* 3840px+ — true 4K native (no scaling) */
@media (min-width: 3840px) {
  :root { font-size: 18px; }
  .wrap { max-width: 2900px; padding: 0 120px; }
  .hero-v3-grid { min-height: 1000px; gap: 140px; }
  .hero-stage-v3 { max-width: 1080px; }
  section { padding: 200px 0; }
  .nav-inner { height: 96px; }
  .brand-mark svg { width: 48px; height: 48px; }
  .brand-mark .brand-name { font-size: 24px; }
}

/* 5120px+ — 5K iMac, ultrawide 5K */
@media (min-width: 5120px) {
  :root { font-size: 20px; }
  .wrap { max-width: 3800px; padding: 0 160px; }
  .hero-v3 { padding: 160px 0 100px; }
  .hero-v3-grid { min-height: 1200px; gap: 160px; }
  .hero-stage-v3 { max-width: 1280px; }
  section { padding: 240px 0; }
  .nav-inner { height: 112px; }
}

/* 7680px+ — 8K UHD displays */
@media (min-width: 7680px) {
  :root { font-size: 22px; }
  .wrap { max-width: 5400px; padding: 0 220px; }
  .hero-v3 { padding: 200px 0 140px; }
  .hero-v3-grid { min-height: 1500px; gap: 200px; }
  .hero-stage-v3 { max-width: 1600px; }
  section { padding: 280px 0; }
  .nav-inner { height: 140px; }
}

/* =========================================================
   v4c — DETAIL TWEAKS
   Last-mile polish noted during the audit pass
   ========================================================= */

/* Map labels: tighten kerning so they never wrap their continent */
.city-pin .city-label { letter-spacing: 0; }

/* Reduce floater visual noise on mid-sized devices where they crowd the browser frame */
@media (min-width: 720px) and (max-width: 999px) {
  .hero-stage-v3 .floater.f1 { left: -4px; }
  .hero-stage-v3 .floater.f2 { right: -4px; }
}

/* Sticky nav: drop shadow when scrolled (visual cue) — JS-driven .scrolled class */
nav.primary { transition: box-shadow .25s var(--ease-out), background .25s var(--ease-out); }
nav.primary.scrolled {
  background: rgba(10, 17, 48, 0.92);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.5), 0 0 0 1px rgba(35,48,102,.6);
}

/* Image and SVG: prevent layout shift; constrain to container width */
img, svg { max-width: 100%; height: auto; }
.world-v3-svg { height: 100%; } /* override - we want full fill */

/* Drawer: lock height for older mobile browsers */
.drawer { height: 100dvh; min-height: 100vh; }

/* Make all .btn min-height comfortable for thumb on touch */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; padding-block: 12px; }
  .nav-links a, .drawer-links a { min-height: 44px; }
  .faq-item summary { min-height: 48px; }
}

/* Tabbed pricing buttons */
.tabs-bar-v2 button {
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font-weight: 600;
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-300);
  background: transparent;
  transition: all .25s var(--ease-out);
  position: relative;
}
.tabs-bar-v2 button:hover { color: var(--ink-100); }
.tabs-bar-v2 button.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
  color: white;
  box-shadow: 0 8px 22px -6px rgba(139,92,246,.55);
}
.tabs-bar-v2 {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}

/* Larger SVG / icon scaling on ultrawide */
@media (min-width: 2560px) {
  .nav-cta .btn .arr { width: 18px; height: 18px; }
  .btn .arr { width: 18px; height: 18px; }
}

/* Best plan section: scoped padding override fallback for inline style */
@media (max-width: 600px) {
  section[style*="padding: 80px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* Ensure hero stage doesn't bleed past viewport on awkward landscape phones */
@media (max-width: 1000px) and (orientation: landscape) {
  .hero-stage-v3 { max-width: 480px; }
}

/* Drawer links: better tap target spacing */
.drawer-links a { padding: 20px 4px; }

/* Footer: keep payment chips from blowing out on mid-tablet */
@media (max-width: 720px) {
  .foot-payment .pchip { font-size: 9.5px; padding: 0 8px; height: 26px; }
  .foot-meta { gap: 14px; }
  .foot-meta .socials a { width: 30px; height: 30px; }
}

/* Live region for promo bar: keep marquee text readable on small screens */
.top-promo-msg a { white-space: nowrap; }

/* SVG world map: smoother on retina */
.world-v3-svg .continent {
  vector-effect: non-scaling-stroke;
}

/* End v4 overlay */

/* ----- 68. Mega menu — drop h6 heading semantics, keep visual ----- */
.mega-col .mega-col-head {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega-col .mega-col-head .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 10px var(--c-green);
  animation: pulse 2s infinite;
}
.mega-panel-banner .mega-banner-head {
  font-size: 13.5px;
  margin-bottom: 2px;
  color: var(--ink-100);
  font-weight: 600;
  font-family: var(--f-body);
  letter-spacing: 0;
}

/* ----- 69. Belt + braces: prevent any rogue element from creating horizontal scroll ----- */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* =========================================================
   v4d — ULTRA-WIDE FONT NORMALISATION
   Hardcoded px font-sizes throughout the design don't scale
   with :root font-size. Override the most-visible ones to rem
   at each ultra-wide tier so body text, buttons, captions, and
   pricing cards stay legible on QHD → 8K displays.
   ========================================================= */

@media (min-width: 2560px) {
  /* Buttons & nav */
  .btn { font-size: 0.85rem; padding: 0.85rem 1.5rem; }
  .nav-links a { font-size: 0.9rem; padding: 0.62rem 1rem; }
  .top-promo,
  .top-promo-msg { font-size: 0.8rem; }
  .top-promo-right > a,
  .contact-mini-drop > button { font-size: 0.9rem; }
  /* Hero */
  .hero-v3-pill { font-size: 0.72rem; }
  .hero-v3-desc { font-size: 1.05rem; }
  .hero-v3-price { font-size: 1.4rem; }
  .hero-v3-mini-trust .mt-item { font-size: 0.78rem; }
  /* Eyebrow + lead */
  .eyebrow { font-size: 0.72rem; }
  .lead { font-size: 1.05rem; }
  /* Pricing cards */
  .price-card-v3 .pcv-title { font-size: 1.35rem; }
  .price-card-v3 .pcv-sub { font-size: 0.82rem; }
  .price-card-v3 .pcv-start { font-size: 0.78rem; }
  .price-card-v3 .pcv-price .u { font-size: 0.85rem; }
  .price-card-v3 .pcv-btn { font-size: 0.82rem; }
  .price-card-v3 .pcv-feats li { font-size: 0.82rem; }
  /* Tabs bar */
  .tabs-bar-v2 button { font-size: 0.85rem; padding: 0.72rem 1.2rem; }
  /* Best seller / check list */
  .check-list li { font-size: 0.88rem; }
  /* Engagement panel */
  .engage-tabs button { font-size: 0.8rem; }
  .engage-meta { font-size: 0.78rem; }
  .engage-card .ec-line { font-size: 0.82rem; }
  /* Awards */
  .a-name { font-size: 0.88rem; }
  .a-sub { font-size: 0.72rem; }
  .a-year { font-size: 0.7rem; }
  /* Features 2-col */
  .feat-2-card h4 { font-size: 1.2rem; }
  .feat-2-card p { font-size: 0.9rem; }
  /* Blog cards */
  .blog-card h4 { font-size: 1.15rem; }
  .blog-card p { font-size: 0.82rem; }
  .blog-card-meta { font-size: 0.7rem; }
  .blog-card-link { font-size: 0.82rem; }
  /* Reviews */
  .review-featured-card h4 { font-size: 1.4rem; }
  .quote-block p { font-size: 0.9rem; }
  /* Icon blocks */
  .ib-title { font-size: 1rem; }
  .ib-sub { font-size: 0.85rem; }
  /* FAQ */
  .faq-2col .faq-item summary { font-size: 0.92rem; }
  .faq-2col .faq-item .faq-body { font-size: 0.84rem; }
  /* Newsletter */
  .newsletter-text h4 { font-size: 1.3rem; }
  .newsletter-text p { font-size: 0.88rem; }
  .newsletter-form input,
  .newsletter-form button { font-size: 0.88rem; }
  /* Audit form */
  .audit-v2-form input,
  .audit-v2-form select { font-size: 0.95rem; padding: 0.85rem 1.1rem; }
  .audit-v2-form button { font-size: 0.9rem; padding: 0.85rem 1.6rem; }
  .audit-v2-head p { font-size: 0.9rem; }
  /* Stat row labels */
  .stat-row-v2 .sr-lab { font-size: 0.82rem; }
  /* Footer */
  .foot-col h5 { font-size: 0.88rem; }
  .foot-col li a { font-size: 0.85rem; }
  .foot-brand p { font-size: 0.88rem; }
  .foot-payment .pchip { font-size: 0.62rem; height: 1.65rem; padding: 0 0.62rem; }
  .foot-copyright { font-size: 0.78rem; }
  /* Mega menu */
  .mega-col .mega-col-head { font-size: 0.7rem; }
  .mega-item h5 { font-size: 0.9rem; }
  .mega-item p { font-size: 0.78rem; }
  /* City labels (map) */
  .city-pin .city-label { font-size: 0.85rem; }
  .city-pin .city-label .sub { font-size: 0.6rem; }
  /* World stats */
  .world-stats .ws-lab { font-size: 0.7rem; }
}

@media (min-width: 3840px) {
  /* Slightly larger floaters on the hero stage to match scale */
  .hero-stage-v3 .floater { padding: 0.9rem 1.2rem; border-radius: 0.85rem; }
  .hero-stage-v3 .floater .icon { width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; }
  .hero-stage-v3 .floater .text .v { font-size: 1rem; }
  .hero-stage-v3 .floater .text .l { font-size: 0.7rem; }
}


/* =========================================================
   v4e — DETAIL FIX: Contact button + promo bar edge spacing
   ========================================================= */

/* The .top-promo-right > a, .top-promo-right > button rule targets only
   direct children, so the .contact-mini-drop > button (a grandchild) was
   falling back to <button>'s default inline-block, which made the inline
   <svg> chevron stack BELOW the "Contact" text (because the CSS reset sets
   svg { display: block }). Restore inline-flex here. */
.contact-mini-drop > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 500;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1.2;
}

.top-promo-right > a,
.contact-mini-drop > button {
  font-size: 14.5px;
}
.contact-mini-drop > button svg { display: inline-block; flex-shrink: 0; }
.contact-mini-drop > button .contact-mobile-email-icon { display: none; }

/* Give the right edge of the promo bar breathing room so the focus ring
   isn't clipped by the viewport edge. The .wrap already adds padding, but
   make sure the rightmost interactive element has its outline-offset room. */
.top-promo-right {
  padding-right: 4px;
}
.contact-mini-drop > button:focus-visible {
  outline-offset: 2px;
}

@media (min-width: 801px) {
  .top-promo-right {
    gap: 12px;
  }

  .top-promo-msg a,
  .top-promo-right > a,
  .top-promo-right > button,
  .top-promo-search-btn,
  .contact-mini-drop > button {
    min-width: 0;
    min-height: 0;
  }

  .top-promo-search-btn {
    width: 34px;
    height: 34px;
  }

  .top-promo-search-btn svg {
    width: 12px;
    height: 12px;
  }

  .contact-mini-drop > button {
    height: 34px;
  }

  .nav-cta {
    gap: 8px;
  }

  .nav-cta .btn {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 13.5px;
  }

  .nav-cta .btn .arr {
    width: 14px;
    height: 14px;
  }
}


/* =========================================================
   v5 — DOT-GRID WORLD MAP
   Replaces the old hand-drawn continent blobs with a modern
   equirectangular dot field, glowing city pins, animated
   great-circle arcs from Dallas HQ to every other city,
   and an atmospheric radial glow.
   ========================================================= */

.world-frame {
  position: relative;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  aspect-ratio: 1600 / 760;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(22, 32, 77, .55) 0%,
      rgba(10, 17, 48, .85) 70%,
      var(--bg-base) 100%);
  border: 1px solid rgba(45, 212, 255, .08);
}

/* Atmospheric ambient glow layered over the gradient base */
.world-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(34, 211, 238, .09), transparent 42%),
    radial-gradient(circle at 75% 32%, rgba(217, 70, 239, .08), transparent 45%),
    radial-gradient(circle at 60% 72%, rgba(34, 197, 94, .05), transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* Subtle vignette so dots near edges fade away */
.world-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(10, 17, 48, .55) 95%,
    rgba(10, 17, 48, .9) 100%);
  pointer-events: none;
  z-index: 3;
}

.world-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.world-svg .europe-dot-fill {
  fill: none;
  stroke: rgba(170, 224, 255, .72);
  stroke-linecap: round;
  stroke-width: 2.35;
  stroke-dasharray: .01 6.35;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, .18));
}

.world-svg .europe-dot-fill .dot-row-soft {
  opacity: .58;
}

.world-svg .europe-dot-fill .dot-row-strong {
  opacity: .88;
}

.world-svg .arc-europe-bridge {
  filter: drop-shadow(0 0 7px rgba(45, 212, 255, .34));
}

/* Arc draw-in animation */
@keyframes arc-draw {
  0%   { stroke-dashoffset: var(--len, 1000); opacity: 0; }
  20%  { opacity: .85; }
  100% { stroke-dashoffset: 0; opacity: .55; }
}

@keyframes arc-draw-strong {
  0%   { stroke-dashoffset: var(--len, 1000); opacity: 0; }
  18%  { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: .76; }
}

/* ----- City pins ----- */
.world-pin {
  position: absolute;
  z-index: 5;
  width: 0; height: 0;
  color: var(--c-cyan); /* default; .c-* classes override */
}
.world-pin .pin-core {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .06),
    0 0 22px currentColor,
    0 0 4px currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease-out);
}
.world-pin .pin-core::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .55;
  animation: world-ring-out 2.6s ease-out infinite;
}
@keyframes world-ring-out {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(2.7); opacity: 0; }
}

/* Color variants for pins */
.world-pin.c-cyan    { color: var(--c-cyan); }
.world-pin.c-orange  { color: var(--c-orange); }
.world-pin.c-green   { color: var(--c-green); }
.world-pin.c-yellow  { color: var(--c-yellow); }
.world-pin.c-violet  { color: var(--c-violet); }
.world-pin.c-pink    { color: var(--c-pink); }
.world-pin.c-red     { color: var(--c-red); }
.world-pin.c-blue    { color: var(--c-blue); }
.world-pin.c-magenta { color: var(--c-magenta); }

/* ----- City labels (8-direction placement) ----- */
.world-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  background: rgba(8, 12, 36, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 5px 10px 6px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .65);
  pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), background .3s;
  --lx: 0px;
  --ly: 0px;
}
.world-label b {
  font-weight: 600;
  color: var(--ink-100);
  font-size: 12.5px;
  letter-spacing: 0;
  line-height: 1.15;
  font-family: var(--f-body);
}
.world-label i {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .9;
  margin-top: 2px;
}

/* Directional placement (pin sits at top:0,left:0 of the .world-pin div) */
.world-label[data-dir="t"]  { left: 50%;  bottom: calc(14px + var(--ly) * -1); transform: translate(calc(-50% + var(--lx)), 0); }
.world-label[data-dir="b"]  { left: 50%;  top:    calc(14px + var(--ly));      transform: translate(calc(-50% + var(--lx)), 0); }
.world-label[data-dir="l"]  { right: calc(14px + var(--lx) * -1); top: 50%;    transform: translate(0, calc(-50% + var(--ly))); }
.world-label[data-dir="r"]  { left:  calc(14px + var(--lx));      top: 50%;    transform: translate(0, calc(-50% + var(--ly))); }
.world-label[data-dir="tl"] { right: calc(12px + var(--lx) * -1); bottom: calc(12px + var(--ly) * -1); }
.world-label[data-dir="tr"] { left:  calc(12px + var(--lx));      bottom: calc(12px + var(--ly) * -1); }
.world-label[data-dir="bl"] { right: calc(12px + var(--lx) * -1); top:    calc(12px + var(--ly)); }
.world-label[data-dir="br"] { left:  calc(12px + var(--lx));      top:    calc(12px + var(--ly)); }

/* Hover (only relevant on devices that support hover) */
.world-pin:hover .pin-core   { transform: translate(-50%, -50%) scale(1.3); }
.world-pin:hover .world-label { background: rgba(8, 12, 36, .95); }
.world-pin:hover               { z-index: 6; }

/* ----- Override old .world-v3-* styles that conflict with the new map ----- */
.world-v3 { padding: 90px 0; position: relative; }
.world-v3-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }

/* ----- Responsive: shrink pin / label scale on smaller screens ----- */
@media (max-width: 1000px) {
  .world-frame { aspect-ratio: 1600 / 820; border-radius: 18px; }
  .world-pin .pin-core { width: 9px; height: 9px; }
  .world-label { padding: 4px 8px; }
  .world-label b { font-size: 11px; }
  .world-label i { font-size: 8px; letter-spacing: .1em; }
}

@media (max-width: 720px) {
  /* On small phones, hide labels for a clean dot map with glowing pins only.
     The Worldwide Reach claim is in the section copy already. */
  .world-label { display: none; }
  .world-pin .pin-core { width: 8px; height: 8px; }
  .world-frame { aspect-ratio: 1600 / 900; border-radius: 14px; }
}

@media (max-width: 480px) {
  /* Keep only the major hubs visible: HQ + key cities.
     Hide the smaller client pins so the map doesn't look like a busy
     constellation on a 320px-wide phone. */
  .world-pin[data-city="Austin"],
  .world-pin[data-city="Bogotá"],
  .world-pin[data-city="Madrid"],
  .world-pin[data-city="Amsterdam"],
  .world-pin[data-city="Frankfurt"],
  .world-pin[data-city="Mumbai"],
  .world-pin[data-city="Singapore"],
  .world-pin[data-city="São Paulo"],
  .world-pin[data-city="Cape Town"] { display: none; }
}

/* Ultra-wide */
@media (min-width: 2560px) {
  .world-frame { max-width: 2000px; border-radius: 28px; }
  .world-pin .pin-core { width: 13px; height: 13px; }
  .world-label b { font-size: 0.85rem; }
  .world-label i { font-size: 0.62rem; }
}
@media (min-width: 3840px) {
  .world-frame { max-width: 2600px; }
  .world-pin .pin-core { width: 16px; height: 16px; }
  .world-label { padding: 8px 14px; border-radius: 12px; }
  .world-label b { font-size: 0.95rem; }
  .world-label i { font-size: 0.68rem; }
}

/* Reduced motion: stop the ring pulse and arc draw */
@media (prefers-reduced-motion: reduce) {
  .world-pin .pin-core::after { animation: none; opacity: .35; }
  .world-svg .arcs path { animation: none !important; stroke-dashoffset: 0 !important; opacity: .35; }
  .world-svg .arc-europe-bridge { opacity: .62; }
}


/* Dallas HQ — make the focal pin more prominent than client pins */
.world-pin[data-city="Dallas"] .pin-core {
  width: 14px; height: 14px;
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, .12),
    0 0 30px var(--c-cyan),
    0 0 8px var(--c-cyan);
}
.world-pin[data-city="Dallas"] .pin-core::after {
  inset: -9px;
  border-width: 2.5px;
  animation-duration: 2.2s;
}
.world-pin[data-city="Dallas"] .world-label {
  background: linear-gradient(135deg, rgba(34, 211, 238, .14), rgba(34, 211, 238, .04));
  border-color: rgba(34, 211, 238, .35);
  box-shadow:
    0 10px 24px -10px rgba(34, 211, 238, .35),
    inset 0 0 0 1px rgba(34, 211, 238, .12);
}
.world-pin[data-city="Dallas"] .world-label b { color: #fff; }


/* =========================================================
   v6 — Map upgrades: polygon coastlines + traveling particles
   ========================================================= */

/* Keyframe for the arc particle fade-in (wrapper sits at opacity:0
   then this animates to opacity:1 once the arc has finished drawing) */
@keyframes pt-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Arc particles should respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .world-svg .arc-particles { display: none; }
}

/* Slightly tighten label typography for the denser map */
.world-label b { font-size: 12px; }
.world-label i { font-size: 8px; }

/* Subtle "LIVE" indicator on the Dallas label */
.world-pin[data-city="Dallas"] .world-label::after {
  content: 'LIVE';
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--c-green);
  color: var(--bg-deepest);
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(34, 197, 94, .8);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, .55); }
  50%      { box-shadow: 0 0 18px rgba(34, 197, 94, .95); }
}


/* =========================================================
   v7 — FAQ SECTION FIXES & POLISH
   ---------------------------------------------------------
   Bugs:
   1) Grid was using default align-items: stretch, so a closed
      item in the same row as an open one was getting stretched
      to the open item's height (large empty box).
   2) The toggle marker rendered as a slash "/" because
      .faq-item[open] summary::after had transform: rotate(45deg)
      from one rule AND content: '−' from another — rotating a
      minus 45° produces a slash.
   3) Multi-line questions weren't wrapping cleanly because
      summary used align-items: center on a single-line baseline.
   Plus polish for hover/focus/open animation.
   ========================================================= */

/* (1) Fix grid stretch — each item only takes its natural height */
.faq-2col,
.faq-styled .faq-2col {
  align-items: start;
}

/* (2) Fix toggle marker cascade conflict.
       Strategy: keep ONE source of truth in .faq-styled —
       a smooth + → × rotation. Reset the content swap and
       any conflicting rotation from earlier rules. */
.faq-styled .faq-item summary::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
  background: rgba(45, 212, 255, .08);
  border: 1px solid rgba(45, 212, 255, .18);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform .35s var(--ease-out),
              background .25s,
              color .25s,
              border-color .25s;
}
.faq-styled .faq-item[open] summary::after {
  content: '+';                /* keep '+' — rotation makes it × */
  transform: rotate(45deg);    /* single source of truth */
  background: rgba(45, 212, 255, .18);
  border-color: rgba(45, 212, 255, .35);
  color: var(--ink-100);
}

/* (3) Multi-line summary wrap-friendly layout */
.faq-styled .faq-item summary {
  align-items: flex-start;     /* top-align the +/× to the first line */
  gap: 12px;
  line-height: 1.4;
  padding: 18px 20px;
  min-height: 56px;
  transition: background .25s var(--ease-out);
}
.faq-styled .faq-item summary > * { flex: 1 1 auto; }
.faq-styled .faq-item summary::after { margin-top: -2px; }   /* nudge marker to baseline */

/* Hover: subtle background change */
.faq-styled .faq-item:hover {
  border-color: rgba(45, 212, 255, .22);
}
.faq-styled .faq-item:hover summary::after {
  background: rgba(45, 212, 255, .14);
  border-color: rgba(45, 212, 255, .3);
}
.faq-styled .faq-item:hover summary { color: var(--ink-100); }

/* Open state: stronger left-edge accent + softer card */
.faq-styled .faq-item[open] {
  border-color: rgba(45, 212, 255, .28);
  background:
    linear-gradient(135deg, rgba(45, 212, 255, .045), transparent 40%),
    var(--bg-card);
  box-shadow: 0 8px 28px -12px rgba(45, 212, 255, .25);
}

/* Body styling — better spacing, top divider, smooth fade-in on open */
.faq-styled .faq-item .faq-body {
  padding: 4px 20px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-300);
  border-top: 1px solid rgba(45, 212, 255, .08);
  margin-top: 4px;
  padding-top: 16px;
}
.faq-styled .faq-item[open] .faq-body {
  animation: faq-body-in .35s var(--ease-out) both;
}
@keyframes faq-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Focus ring on summary keeps offset so the +/× doesn't get cropped */
.faq-styled .faq-item summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-radius: var(--r-md);
}

/* Make sure the underlying generic rule doesn't re-apply rotation to nothing */
.faq-styled .faq-item[open] summary::after {
  /* (already set above) — defensive: ensure the v2 generic
     .faq-item[open] summary::after { transform: rotate(45deg); }
     can't combine with a content swap. */
}

/* Mobile polish — taller tap target, slightly larger marker */
@media (max-width: 800px) {
  .faq-styled .faq-item summary {
    padding: 16px 18px;
    min-height: 60px;
    font-size: 14px;
  }
  .faq-styled .faq-item summary::after {
    width: 26px; height: 26px;
    font-size: 17px;
  }
  .faq-styled .faq-item .faq-body {
    padding: 12px 18px 18px;
    font-size: 13px;
  }
}

/* Reduced motion: skip the slide-fade body animation, instant +/× swap */
@media (prefers-reduced-motion: reduce) {
  .faq-styled .faq-item summary::after { transition: none; }
  .faq-styled .faq-item[open] .faq-body { animation: none; }
}

/* Ultra-wide refinements: bigger marker, more padding */
@media (min-width: 2560px) {
  .faq-styled .faq-item summary {
    padding: 1.2rem 1.4rem;
    min-height: 4.2rem;
    font-size: 1rem;
    gap: 1rem;
  }
  .faq-styled .faq-item summary::after {
    width: 2rem; height: 2rem;
    font-size: 1.1rem;
  }
  .faq-styled .faq-item .faq-body {
    padding: 1rem 1.4rem 1.4rem;
    font-size: 0.9rem;
  }
}


/* =========================================================
   v8 — FAQ: TWO INDEPENDENT COLUMN CONTAINERS
   ---------------------------------------------------------
   The row-major grid (1fr 1fr) had a structural flaw: each
   row's items must share a y-position, so opening an item
   in one column either stretched its closed neighbour (v1)
   or left a vertical gap (v7's align-items: start).

   Fix: the outer .faq-2col now holds TWO independent flex
   columns (.faq-col), each filling its own items top-to-bottom
   with no coupling between sides. Opening any item only
   reflows that column.

   DOM order: items 1-6 are in the left column, items 7-12 in
   the right. On mobile the grid collapses to one column, so
   the natural reading order Q1 -> Q12 is preserved.
   ========================================================= */

.faq-styled .faq-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;             /* horizontal gutter between the two columns */
  align-items: start;
}

.faq-styled .faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;             /* vertical rhythm inside each column */
  /* contain: layout helps the browser optimise reflow when items expand */
  contain: layout;
}

/* Single-column on small screens — both .faq-col containers stack */
@media (max-width: 800px) {
  .faq-styled .faq-2col {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* When stacked, both .faq-col containers feel like one continuous list */
  .faq-styled .faq-col { gap: 12px; }
}

/* Ultra-wide: a bit more horizontal breathing room between columns */
@media (min-width: 2560px) {
  .faq-styled .faq-2col { gap: 2rem; }
  .faq-styled .faq-col  { gap: 0.85rem; }
}


/* =========================================================
   v9 — HOSTING TIERS SECTION + MEGA MENU 3RD COLUMN
   ---------------------------------------------------------
   New on-page section showcasing Web / VPS / Dedicated tiers,
   plus the restructured Services mega menu with a real third
   "Hosting" column, plus footer additions.
   ========================================================= */

/* ---------- Mega menu: real 3-col grid for Services ---------- */
.mega-panel.size-xl {
  /* Wider than .size-lg to comfortably fit three real columns.
     Still clamps to viewport via the existing rule in v3 (line ~4530). */
  width: min(1180px, calc(100vw - 48px));
}
.mega-grid.three-col-real {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 8px 36px;
}
.mega-grid.three-col-real .mega-col-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

/* pulse-green variant — used on the Hosting mega-col-head */
.mega-col .mega-col-head .pulse.pulse-green {
  background: var(--c-green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}
.mega-col .mega-col-head .pulse.pulse-green::after {
  background: var(--c-green);
}

/* "Compare all tiers" CTA item — bottom of Hosting column */
.mega-item.mega-item-cta {
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.mega-item.mega-item-cta .mega-icon {
  background: rgba(251, 146, 60, .1);
  border-color: rgba(251, 146, 60, .25);
}
.mega-item.mega-item-cta:hover .mega-icon {
  background: rgba(251, 146, 60, .2);
}
.mega-item.mega-item-cta h5 { color: var(--c-orange-light, #fdba74); }

/* ---------- Footer: muted price suffix ---------- */
.muted-mini {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-300);
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  letter-spacing: 0.02em;
}

/* ---------- Premium Hosting section ---------- */
.hosting-section {
  padding: 110px 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(34, 211, 238, .04), transparent 70%),
    var(--bg-deepest);
  position: relative;
}
.hosting-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

/* Card grid */
.hosting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

/* Base card */
.hosting-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px 28px 28px;
  transition: transform .35s var(--ease-out),
              border-color .25s,
              box-shadow .25s;
}
.hosting-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}

/* Per-tier accent strip on the top edge of the card */
.hosting-card::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c-green);
  opacity: .8;
}
.hosting-card[data-tier="vps"]::before        { background: var(--c-cyan); }
.hosting-card[data-tier="dedicated"]::before  { background: var(--c-violet); }

/* Featured card — VPS gets elevated treatment */
.hosting-card.hosting-featured {
  border-color: rgba(34, 211, 238, .35);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, .04), transparent 30%),
    var(--bg-card);
  box-shadow: 0 22px 50px -20px rgba(34, 211, 238, .22);
  transform: scale(1.025);
}
.hosting-card.hosting-featured:hover {
  transform: scale(1.025) translateY(-3px);
  border-color: rgba(34, 211, 238, .5);
}
.hosting-card.hosting-featured::before {
  height: 4px;
  opacity: 1;
}

/* "Most Popular" badge */
.hosting-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-cool, linear-gradient(135deg, #22d3ee 0%, #8b5cf6 100%));
  color: var(--bg-deepest);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 14px -4px rgba(34, 211, 238, .55);
}

/* Tier icon */
.hosting-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.hosting-card[data-tier="web"] .hosting-icon       { background: rgba(34, 197, 94, .07); border-color: rgba(34, 197, 94, .2); }
.hosting-card[data-tier="vps"] .hosting-icon       { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .25); }
.hosting-card[data-tier="dedicated"] .hosting-icon { background: rgba(139, 92, 246, .07); border-color: rgba(139, 92, 246, .25); }
.hosting-icon svg { width: 30px; height: 30px; }

/* Tier name & subline */
.hosting-tier-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.hosting-tier-label {
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--ink-100);
  letter-spacing: 0;
  line-height: 1.1;
}
.hosting-tier-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-300);
}

/* Price block */
.hosting-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.hosting-price .hp-from {
  font-size: 12px;
  color: var(--ink-300);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--f-mono);
}
.hosting-price .hp-amount {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--ink-100);
  letter-spacing: 0;
  line-height: 1;
}
.hosting-price .hp-period {
  font-size: 14px;
  color: var(--ink-300);
}

/* Description */
.hosting-desc {
  color: var(--ink-300);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Feature list with custom check bullets */
.hosting-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1 1 auto;
}
.hosting-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-200);
  line-height: 1.45;
}
.hosting-feats .ok {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .35);
  position: relative;
  margin-top: 2px;
}
.hosting-feats .ok::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--c-green);
  border-bottom: 1.5px solid var(--c-green);
  transform: rotate(-45deg);
}
/* Tier-tinted bullets */
.hosting-card[data-tier="vps"] .hosting-feats .ok       { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .35); }
.hosting-card[data-tier="vps"] .hosting-feats .ok::after { border-color: var(--c-cyan); }
.hosting-card[data-tier="dedicated"] .hosting-feats .ok       { background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .35); }
.hosting-card[data-tier="dedicated"] .hosting-feats .ok::after { border-color: var(--c-violet); }

/* CTA button — full width inside the card */
.hosting-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 18px !important;
  font-size: 14px !important;
  margin-top: auto;
}

/* ---------- "Included with every tier" strip ---------- */
.hosting-included {
  margin: 60px auto 0;
  max-width: 1240px;
  padding: 32px 36px;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .03) 0%, rgba(139, 92, 246, .03) 100%),
    var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.hi-head {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-300);
  margin-bottom: 24px;
}
.hi-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 32px;
}
.hi-grid li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hi-grid li svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.hi-grid li div { display: flex; flex-direction: column; gap: 2px; }
.hi-grid li b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-100);
}
.hi-grid li span {
  font-size: 12.5px;
  color: var(--ink-300);
  line-height: 1.4;
}

/* ---------- Responsive: mobile stack ---------- */
@media (max-width: 900px) {
  .hosting-grid { grid-template-columns: 1fr; gap: 18px; max-width: 480px; }
  .hosting-card.hosting-featured { transform: none; }
  .hosting-card.hosting-featured:hover { transform: translateY(-3px); }
  .hi-grid { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
}
@media (max-width: 600px) {
  .hosting-section { padding: 70px 0; }
  .hosting-head { margin-bottom: 36px; }
  .hosting-card { padding: 28px 22px 22px; }
  .hosting-price .hp-amount { font-size: 2.2rem; }
  .hosting-included { margin-top: 36px; padding: 24px 22px; }
  .hi-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Ultra-wide breakpoints ---------- */
@media (min-width: 1920px) {
  .hosting-section { padding: 130px 0; }
  .hosting-grid { max-width: 1380px; gap: 26px; }
  .hosting-card { padding: 38px 32px 32px; }
  .hosting-tier-label { font-size: 1.7rem; }
  .hosting-price .hp-amount { font-size: 2.85rem; }
}
@media (min-width: 2560px) {
  .hosting-section { padding: 160px 0; }
  .hosting-grid { max-width: 1640px; gap: 2rem; }
  .hosting-card { padding: 2.4rem 2rem 2rem; border-radius: 1.4rem; }
  .hosting-icon { width: 4rem; height: 4rem; }
  .hosting-icon svg { width: 2rem; height: 2rem; }
  .hosting-tier-label { font-size: 1.9rem; }
  .hosting-price .hp-amount { font-size: 3.2rem; }
  .hosting-desc, .hosting-feats li { font-size: 0.85rem; }
  .hi-grid li b { font-size: 0.9rem; }
  .hi-grid li span { font-size: 0.8rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hosting-card,
  .hosting-card:hover,
  .hosting-card.hosting-featured,
  .hosting-card.hosting-featured:hover {
    transition: none;
    transform: none;
  }
}


/* =========================================================
   v10 — REVIEWS CAROUSEL: 6 stacked cards + pager logic
   ---------------------------------------------------------
   All 6 review cards live inside .reviews-stack and are
   stacked via grid so the container takes the height of the
   tallest card (no layout shift between pages). Only one is
   visible at a time via [data-active] + opacity/transform.
   ========================================================= */

.reviews-stack {
  display: grid;
  /* All cards share the same grid cell so the container sizes
     to the largest card and there's no jump when switching */
  grid-template-areas: "card";
  margin-bottom: 22px;
}
.reviews-stack > .review-featured-card {
  grid-area: card;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-out),
              transform .35s var(--ease-out),
              visibility .35s var(--ease-out);
}
.reviews-stack > .review-featured-card[data-active] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- Source badge variants ---------- */
/* G2 — red star on white pill (their brand) */
.review-featured-card[data-src="g2"] .src-badge .src-star {
  background: #ff492c;
  font-size: 8px;
  letter-spacing: 0;
}
/* Trustpilot — green star */
.review-featured-card[data-src="trustpilot"] .src-badge .src-star {
  background: #00b67a;
}
/* GoodFirms — blue diamond */
.review-featured-card[data-src="goodfirms"] .src-badge .src-star {
  background: #2870b8;
  font-size: 8px;
}
/* Clutch keeps the existing yellow star — already styled */

/* ---------- Author avatar variants ---------- */
.review-featured-card .av.av-warm   { background: var(--grad-warm); }
.review-featured-card .av.av-cool   { background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%); }
.review-featured-card .av.av-mint   { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); }
.review-featured-card .av.av-orange { background: linear-gradient(135deg, #fb923c 0%, #f43f5e 100%); }
.review-featured-card .av.av-violet { background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%); }
.review-featured-card .av.av-green  { background: linear-gradient(135deg, #22c55e 0%, #84cc16 100%); }

/* ---------- Pager polish ---------- */
.review-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.review-pager .pg {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-300);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.review-pager .pg:hover {
  border-color: var(--line-strong);
  color: var(--ink-100);
  background: rgba(255, 255, 255, .03);
}
.review-pager .pg.active {
  background: rgba(45, 212, 255, .12);
  border-color: rgba(45, 212, 255, .45);
  color: var(--brand);
  box-shadow: 0 0 0 1px rgba(45, 212, 255, .25);
}
.review-pager .pg:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Reduced motion: instant transition between reviews */
@media (prefers-reduced-motion: reduce) {
  .reviews-stack > .review-featured-card { transition: none; transform: none; }
}

/* =========================================================
   UX / accessibility remediation
   ========================================================= */

/* Promo controls are real targets on touch devices, not tiny text links. */
.top-promo-msg a,
.top-promo-right > a,
.top-promo-right > button,
.top-promo-search-btn,
.contact-mini-drop > button {
  min-width: 44px;
  min-height: 44px;
}

.top-promo-msg a,
.top-promo-right > a,
.top-promo-right > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

nav.primary .brand-mark,
.nav-links a,
.mega-trigger {
  min-height: 44px;
}

@media (max-width: 800px) {
  .top-promo-inner {
    min-height: 44px;
    grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
    gap: 0;
    padding: 0;
  }

  .top-promo-left {
    display: block;
    grid-column: 1;
    min-width: 88px;
    visibility: hidden;
  }

  .top-promo-msg {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
  }

  .top-promo-right {
    grid-column: 3;
    gap: 4px;
    justify-content: flex-end;
    min-width: 88px;
  }

  .top-promo-search-btn,
  .contact-mini-drop > button {
    width: 44px;
    height: 44px;
  }

  .contact-mini-drop > button::before {
    font-size: 16px;
  }

  .contact-mini-drop > button .contact-label,
  .contact-mini-drop > button .contact-chevron {
    display: none;
  }

  .contact-mini-drop > button::before {
    content: none;
  }

  .contact-mini-drop > button .contact-mobile-email-icon {
    display: block;
    width: 18px;
    height: 18px;
  }

  nav.primary .brand-mark,
  .mobile-toggle {
    min-height: 44px;
  }

  .mobile-toggle,
  .drawer-close {
    width: 44px;
    height: 44px;
  }

  .mobile-toggle {
    flex: 0 0 44px;
    min-width: 44px;
  }

  .nav-inner {
    gap: 16px;
  }

  .nav-cta {
    margin-left: auto;
  }

  .nav-cta .btn-primary {
    display: none;
  }

  nav.primary .brand-mark-real .brand-logo {
    height: 40px;
    max-width: 132px;
  }

  .drawer .brand-mark-real .brand-logo {
    height: 38px;
    max-width: 128px;
  }
}

footer.mega .brand-mark-real .brand-logo {
  height: 56px;
  max-width: 210px;
}

@media (max-width: 380px) {
  nav.primary .brand-mark-real .brand-logo {
    height: 36px;
    max-width: 118px;
  }
}

@media (max-width: 360px) {
  .top-promo-msg {
    font-size: 11.5px;
  }

  .top-promo-inner {
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
  }

  .top-promo-left,
  .top-promo-right {
    min-width: 80px;
  }
}

/* Keep the off-canvas drawer out of the visual and focus model while closed. */
.drawer {
  visibility: hidden;
  transition:
    transform .35s var(--ease-out),
    visibility 0s linear .35s;
}

.drawer.open {
  visibility: visible;
  transition:
    transform .35s var(--ease-out),
    visibility 0s;
}

/* Tab widgets expose state to assistive tech and remain usable on phones. */
.tabs-bar[role="tablist"] button {
  min-height: 44px;
}

.tab-panel[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .tabs-bar-v2-wrap {
    overflow: visible;
    padding: 0;
  }

  .tabs-bar-v2 {
    width: 100%;
    white-space: normal;
    flex-wrap: wrap;
    gap: 6px;
    border-radius: 18px;
  }

  .tabs-bar-v2 button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .tabs-bar-v2 button {
    flex-basis: 100%;
  }
}

/* Mobile footer sections are independent grid items; desktop stacked-section
   margins must not offset one side of a paired row. */
@media (max-width: 480px) {
  .mega-foot-grid .foot-section + .foot-section {
    margin-top: 0;
  }
}

/* Desktop/tablet header controls should stay compact; phones retain the
   larger 44px targets from the mobile-specific rules above. */
@media (min-width: 801px) {
  .top-promo-search-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .top-promo-search-btn svg {
    width: 12px;
    height: 12px;
  }

  .top-promo-right > a,
  .top-promo-right > button,
  .contact-mini-drop > button {
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px;
  }

  .nav-cta .btn {
    min-height: 40px;
    padding: 9px 18px;
    font-size: 13px;
  }

  .nav-cta .btn .arr {
    width: 13px;
    height: 13px;
  }
}

/* Blog article modal */
.blog-modal[hidden] {
  display: none !important;
}

.blog-modal {
  --blog-accent: var(--brand);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blog-accent) 12%, transparent), transparent 34%),
    rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.blog-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.blog-modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(88vh, 880px);
  overflow: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--blog-accent) 34%, var(--line));
  border-radius: 24px;
  background:
    linear-gradient(145deg, #080d25, #060a1e 54%, #0d0c22),
    #050818;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.blog-modal.open .blog-modal-card {
  transform: translateY(0) scale(1);
}

.blog-modal-card::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--blog-accent), #a3e635 48%, #facc15 72%, #fb7185);
  z-index: 4;
}

.blog-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.82);
  color: var(--ink-100);
  font: 700 14px/1 var(--f-body);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.blog-modal-close:hover,
.blog-modal-close:focus-visible {
  border-color: color-mix(in srgb, var(--blog-accent) 72%, white);
  background: rgba(14, 30, 50, 0.95);
  outline: 0;
  transform: translateY(-1px);
}

.blog-modal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 28px;
  padding: 42px 48px 30px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--blog-accent) 16%, transparent), transparent 42%),
    #070b20;
}

.blog-modal-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--blog-accent) 44%, transparent);
  border-radius: 999px;
  padding: 8px 11px;
  color: color-mix(in srgb, var(--blog-accent) 78%, white);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--blog-accent) 10%, transparent);
}

.blog-modal-hero h2 {
  max-width: 760px;
  margin: 0;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: 0;
}

.blog-modal-hero p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--ink-300);
  font-size: 16px;
  line-height: 1.65;
}

.blog-modal-stat {
  align-self: end;
  border-left: 2px solid var(--blog-accent);
  padding-left: 18px;
}

.blog-modal-stat span {
  display: block;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0;
}

.blog-modal-stat b {
  display: block;
  margin-top: 10px;
  color: var(--ink-300);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 16px 48px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: var(--ink-400);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-modal-meta span:not(:last-child)::after {
  content: "/";
  margin-left: 18px;
  color: color-mix(in srgb, var(--blog-accent) 70%, var(--ink-400));
}

.blog-modal-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 46px;
  padding: 34px 48px 38px;
  background: #050818;
}

.blog-modal-takeaways {
  border-left: 2px solid color-mix(in srgb, var(--blog-accent) 62%, transparent);
  padding-left: 18px;
}

.blog-modal-takeaways h3 {
  margin: 0 0 14px;
  color: var(--ink-100);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.blog-modal-takeaways ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-modal-takeaways li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-300);
  font-size: 13px;
  line-height: 1.55;
}

.blog-modal-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blog-accent);
}

.blog-modal-article {
  display: grid;
  gap: 26px;
}

.blog-modal-article section {
  padding: 0;
}

.blog-modal-article h3 {
  margin: 0 0 10px;
  color: var(--ink-100);
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.blog-modal-article p {
  margin: 0;
  color: var(--ink-300);
  font-size: 15px;
  line-height: 1.78;
}

.blog-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 48px 42px;
}

@media (max-width: 820px) {
  .blog-modal {
    padding: 16px;
  }

  .blog-modal-card {
    max-height: calc(100dvh - 32px);
    border-radius: 20px;
  }

  .blog-modal-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 28px 26px;
  }

  .blog-modal-stat {
    align-self: start;
  }

  .blog-modal-meta {
    padding: 14px 28px;
  }

  .blog-modal-body {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 28px;
  }

  .blog-modal-actions {
    padding: 0 28px 30px;
  }
}

@media (max-width: 560px) {
  .blog-modal {
    padding: 10px;
  }

  .blog-modal-card {
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .blog-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .blog-modal-hero {
    padding: 28px 18px 22px;
  }

  .blog-modal-hero h2 {
    padding-right: 42px;
    font-size: 34px;
  }

  .blog-modal-meta {
    padding: 14px 18px;
  }

  .blog-modal-meta span:not(:last-child)::after {
    margin-left: 10px;
  }

  .blog-modal-body {
    gap: 26px;
    padding: 24px 18px;
  }

  .blog-modal-actions {
    flex-direction: column;
    padding: 0 18px 22px;
  }

  .blog-modal-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

/* Project intake modal */
.project-modal[hidden] {
  display: none !important;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 255, 0.16), transparent 32%),
    rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.project-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.project-modal-card {
  position: relative;
  width: min(940px, 100%);
  max-height: min(88vh, 860px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(125, 233, 255, 0.26);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(8, 13, 37, 0.98), rgba(6, 10, 30, 0.98) 48%, rgba(13, 12, 34, 0.98)),
    var(--bg-base);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.project-modal.open .project-modal-card {
  transform: translateY(0) scale(1);
}

.project-modal-card::before {
  content: "";
  position: relative;
  top: 0;
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #22d3ee, #a3e635 34%, #facc15 62%, #fb7185);
  z-index: 2;
}

.project-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: var(--ink-100);
  font: 700 14px/1 var(--f-body);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.project-modal-close:hover,
.project-modal-close:focus-visible {
  border-color: rgba(45, 212, 255, 0.72);
  background: rgba(14, 30, 50, 0.92);
  outline: 0;
  transform: translateY(-1px);
}

.project-modal-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.35fr);
  max-height: calc(min(88vh, 860px) - 4px);
  overflow: auto;
}

.project-modal-intro {
  padding: 36px 30px 34px;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(45, 212, 255, 0.08), transparent 48%),
    rgba(2, 6, 23, 0.36);
}

.project-modal-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  border: 1px solid rgba(45, 212, 255, 0.32);
  border-radius: 999px;
  padding: 8px 11px;
  color: #7dd3fc;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(8, 47, 73, 0.28);
}

.project-modal-intro h2 {
  margin: 0;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 0.98;
  letter-spacing: 0;
}

.project-modal-intro p {
  margin: 18px 0 0;
  color: var(--ink-300);
  font-size: 15px;
  line-height: 1.65;
}

.project-modal-signal {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
}

.project-modal-signal span {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 12px 13px;
  color: var(--ink-300);
  background: rgba(15, 23, 42, 0.58);
}

.project-modal-signal b {
  color: var(--ink-100);
}

.project-modal-points {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.project-modal-points li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-300);
  font-size: 13px;
  line-height: 1.5;
}

.project-modal-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #a3e635);
}

.project-modal-form {
  padding: 36px 34px 34px;
}

.project-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.project-modal .field {
  margin: 0;
}

.project-modal .field.span-2 {
  grid-column: 1 / -1;
}

.project-modal .field label {
  color: #c4d0ee;
}

.project-modal .field input,
.project-modal .field textarea,
.project-modal .field select {
  width: 100%;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.58);
  color: var(--ink-100);
}

.project-modal .field textarea {
  min-height: 116px;
}

.project-modal .field input::placeholder,
.project-modal .field textarea::placeholder {
  color: rgba(180, 191, 219, 0.58);
}

.project-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.project-modal-actions p {
  max-width: 330px;
  margin: 0;
  color: var(--ink-300);
  font-size: 13px;
  line-height: 1.5;
}

.project-modal-actions .btn {
  white-space: nowrap;
}

.project-modal-status {
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ink-200);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  background: rgba(15, 23, 42, 0.58);
}

.project-modal-status[hidden] {
  display: none;
}

.project-modal-status.is-error {
  border-color: rgba(251, 146, 60, 0.38);
  color: #fed7aa;
  background: rgba(124, 45, 18, 0.22);
}

.project-modal-status.is-success {
  border-color: rgba(34, 197, 94, 0.34);
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.22);
}

/* Audit request modal */
.audit-request-modal[hidden] {
  display: none !important;
}

.audit-request-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 34% 12%, rgba(45, 212, 255, 0.16), transparent 30%),
    radial-gradient(circle at 76% 18%, rgba(163, 230, 53, 0.12), transparent 34%),
    rgba(2, 6, 23, 0.84);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.audit-request-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.audit-request-card {
  position: relative;
  width: min(580px, 100%);
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(125, 233, 255, 0.26);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(8, 13, 37, 0.98), rgba(6, 10, 30, 0.98) 50%, rgba(11, 20, 36, 0.98)),
    var(--bg-base);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.045) inset;
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.audit-request-modal.open .audit-request-card {
  transform: translateY(0) scale(1);
}

.audit-request-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #22d3ee, #a3e635 42%, #facc15 72%, #fb7185);
}

.audit-request-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: var(--ink-100);
  font: 700 14px/1 var(--f-body);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.audit-request-close:hover,
.audit-request-close:focus-visible {
  border-color: rgba(45, 212, 255, 0.72);
  background: rgba(14, 30, 50, 0.92);
  outline: 0;
  transform: translateY(-1px);
}

.audit-request-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 16px;
  border: 1px solid rgba(45, 212, 255, 0.32);
  border-radius: 999px;
  padding: 8px 11px;
  color: #7dd3fc;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(8, 47, 73, 0.28);
}

.audit-request-head {
  padding-right: 44px;
}

.audit-request-head h2 {
  margin: 0;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1;
  letter-spacing: 0;
}

.audit-request-head p {
  margin: 14px 0 0;
  color: var(--ink-300);
  font-size: 15px;
  line-height: 1.6;
}

.audit-request-form {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.audit-request-form .field {
  margin: 0;
}

.audit-request-form .field label {
  color: #c4d0ee;
}

.audit-request-form .field input,
.audit-request-form .field select {
  width: 100%;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.58);
  color: var(--ink-100);
}

.audit-request-form .field input::placeholder {
  color: rgba(180, 191, 219, 0.58);
}

.audit-request-form .field select option {
  background: var(--bg-base);
  color: var(--ink-100);
}

.audit-request-meta {
  border: 1px solid rgba(45, 212, 255, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ink-300);
  font-size: 13px;
  line-height: 1.45;
  background: rgba(8, 47, 73, 0.2);
}

.audit-request-meta b {
  color: var(--ink-100);
}

.audit-request-submit {
  justify-content: center;
  width: 100%;
}

@media (max-width: 560px) {
  .audit-request-modal {
    padding: 10px;
  }

  .audit-request-card {
    border-radius: 18px;
    padding: 26px 18px 20px;
  }

  .audit-request-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .audit-request-head {
    padding-right: 36px;
  }
}

/* Sales contact modal */
.sales-modal[hidden] {
  display: none !important;
}

.sales-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 35% 12%, rgba(45, 212, 255, 0.16), transparent 30%),
    radial-gradient(circle at 74% 18%, rgba(251, 146, 60, 0.12), transparent 32%),
    rgba(2, 6, 23, 0.84);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.sales-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.sales-modal-card {
  position: relative;
  width: min(560px, 100%);
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(125, 233, 255, 0.26);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(8, 13, 37, 0.98), rgba(6, 10, 30, 0.98) 50%, rgba(17, 13, 42, 0.98)),
    var(--bg-base);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.045) inset;
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.sales-modal.open .sales-modal-card {
  transform: translateY(0) scale(1);
}

.sales-modal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #22d3ee, #8b5cf6 44%, #fb923c 74%, #f43f5e);
}

.sales-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: var(--ink-100);
  font: 700 14px/1 var(--f-body);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.sales-modal-close:hover,
.sales-modal-close:focus-visible {
  border-color: rgba(45, 212, 255, 0.72);
  background: rgba(14, 30, 50, 0.92);
  outline: 0;
  transform: translateY(-1px);
}

.sales-modal-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 16px;
  border: 1px solid rgba(45, 212, 255, 0.32);
  border-radius: 999px;
  padding: 8px 11px;
  color: #7dd3fc;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(8, 47, 73, 0.28);
}

.sales-modal-head {
  padding-right: 44px;
}

.sales-modal-head h2 {
  margin: 0;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1;
  letter-spacing: 0;
}

.sales-modal-head p {
  margin: 14px 0 0;
  color: var(--ink-300);
  font-size: 15px;
  line-height: 1.6;
}

.sales-contact-grid {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.sales-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 15px;
  color: var(--ink-100);
  background: rgba(15, 23, 42, 0.58);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.sales-contact-card:hover,
.sales-contact-card:focus-visible {
  border-color: rgba(45, 212, 255, 0.52);
  background: rgba(15, 23, 42, 0.82);
  outline: 0;
  transform: translateY(-1px);
}

.sales-contact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.54);
}

.sales-contact-icon svg {
  width: 24px;
  height: 24px;
}

.sales-contact-icon-mail {
  color: #7dd3fc;
}

.sales-contact-card b,
.sales-contact-card small {
  display: block;
}

.sales-contact-card b {
  font-size: 15px;
  letter-spacing: 0;
}

.sales-contact-card small {
  margin-top: 4px;
  color: var(--ink-400);
  font-size: 12.5px;
  line-height: 1.35;
}

.sales-modal-note {
  margin: 18px 0 0;
  color: var(--ink-400);
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .sales-modal {
    padding: 10px;
  }

  .sales-modal-card {
    border-radius: 18px;
    padding: 26px 18px 20px;
  }

  .sales-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .sales-modal-head {
    padding-right: 36px;
  }

  .sales-contact-card {
    align-items: flex-start;
    padding: 13px;
  }
}

@media (max-width: 820px) {
  .project-modal {
    padding: 16px;
  }

  .project-modal-card {
    max-height: calc(100dvh - 32px);
    border-radius: 20px;
  }

  .project-modal-shell {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 36px);
  }

  .project-modal-intro {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding: 28px 24px 24px;
  }

  .project-modal-signal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-modal-signal span {
    display: grid;
    justify-content: start;
  }

  .project-modal-form {
    padding: 26px 24px 24px;
  }
}

@media (max-width: 560px) {
  .project-modal {
    padding: 10px;
  }

  .project-modal-card {
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .project-modal-shell {
    max-height: calc(100dvh - 24px);
  }

  .project-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .project-modal-intro {
    padding: 24px 18px 20px;
  }

  .project-modal-intro h2 {
    padding-right: 42px;
    font-size: 34px;
  }

  .project-modal-signal {
    grid-template-columns: 1fr;
  }

  .project-modal-form {
    padding: 22px 18px 20px;
  }

  .project-modal-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .project-modal .field.span-2 {
    grid-column: auto;
  }

  .project-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .project-modal-actions p {
    max-width: none;
  }

  .project-modal-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

/* Client portal login modal */
.client-modal[hidden] {
  display: none !important;
}

.client-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 10%, rgba(34, 211, 238, 0.18), transparent 30%),
    radial-gradient(circle at 78% 24%, rgba(139, 92, 246, 0.16), transparent 34%),
    rgba(2, 6, 23, 0.84);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.client-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.client-modal-card {
  position: relative;
  width: min(860px, 100%);
  max-height: min(88vh, 760px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(125, 233, 255, 0.26);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(7, 13, 35, 0.98), rgba(5, 9, 29, 0.98) 46%, rgba(17, 13, 42, 0.98)),
    var(--bg-base);
  box-shadow: 0 34px 95px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.045) inset;
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.client-modal.open .client-modal-card {
  transform: translateY(0) scale(1);
}

.client-modal-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #22d3ee, #8b5cf6 42%, #fb923c 72%, #f43f5e);
}

.client-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: var(--ink-100);
  font: 700 14px/1 var(--f-body);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.client-modal-close:hover,
.client-modal-close:focus-visible {
  border-color: rgba(45, 212, 255, 0.72);
  background: rgba(14, 30, 50, 0.92);
  outline: 0;
  transform: translateY(-1px);
}

.client-modal-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1fr);
}

.client-modal-panel {
  position: relative;
  overflow: hidden;
  padding: 38px 32px 34px;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(45, 212, 255, 0.09), transparent 52%),
    rgba(2, 6, 23, 0.38);
}

.client-modal-panel::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(45, 212, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(139, 92, 246, 0.035), 0 0 0 68px rgba(45, 212, 255, 0.025);
}

.client-modal-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  border: 1px solid rgba(45, 212, 255, 0.32);
  border-radius: 999px;
  padding: 8px 11px;
  color: #7dd3fc;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(8, 47, 73, 0.28);
}

.client-modal-panel h2 {
  position: relative;
  z-index: 1;
  max-width: 320px;
  margin: 0;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1;
  letter-spacing: 0;
}

.client-modal-panel p {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  color: var(--ink-300);
  font-size: 15px;
  line-height: 1.65;
}

.client-modal-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  border: 1px solid rgba(45, 212, 255, 0.2);
  border-radius: 14px;
  padding: 12px 13px;
  color: #d8efff;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(8, 47, 73, 0.24);
}

.client-modal-status span {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.58);
}

.client-modal-points {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.client-modal-points li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-300);
  font-size: 13px;
  line-height: 1.5;
}

.client-modal-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
}

.client-login-form {
  padding: 42px 36px 36px;
}

.client-login-head {
  margin-bottom: 22px;
  padding-right: 42px;
}

.client-login-head span {
  display: block;
  color: var(--ink-100);
  font-family: var(--f-head);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.client-login-head p {
  margin: 8px 0 0;
  color: var(--ink-300);
  font-size: 14px;
  line-height: 1.5;
}

.client-login-alert {
  margin-bottom: 18px;
  border: 1px solid rgba(251, 146, 60, 0.34);
  border-radius: 14px;
  padding: 12px 14px;
  color: #fed7aa;
  font-size: 14px;
  font-weight: 700;
  background: rgba(124, 45, 18, 0.22);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.08) inset;
}

.client-login-alert[hidden] {
  display: none;
}

.client-modal .field {
  margin: 0 0 16px;
}

.client-modal .field label {
  color: #c4d0ee;
}

.client-modal .field input {
  width: 100%;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.58);
  color: var(--ink-100);
}

.client-modal .field input::placeholder {
  color: rgba(180, 191, 219, 0.58);
}

.client-modal .field input[aria-invalid="true"] {
  border-color: rgba(251, 146, 60, 0.62);
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1);
}

.client-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 22px;
  color: var(--ink-300);
  font-size: 13px;
}

.client-login-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.client-login-check input {
  width: 16px;
  height: 16px;
  accent-color: #22d3ee;
}

.client-login-options a {
  color: #7dd3fc;
  font-weight: 700;
}

.client-login-submit {
  justify-content: center;
  width: 100%;
}

.client-login-footnote {
  margin: 16px 0 0;
  color: var(--ink-400);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 820px) {
  .client-modal {
    padding: 16px;
  }

  .client-modal-card {
    max-height: calc(100dvh - 32px);
    overflow: auto;
    border-radius: 20px;
  }

  .client-modal-shell {
    grid-template-columns: 1fr;
  }

  .client-modal-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding: 30px 24px 24px;
  }

  .client-login-form {
    padding: 28px 24px 24px;
  }
}

@media (max-width: 560px) {
  .client-modal {
    padding: 10px;
  }

  .client-modal-card {
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .client-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .client-modal-panel {
    padding: 24px 18px 20px;
  }

  .client-modal-panel h2 {
    padding-right: 42px;
    font-size: 33px;
  }

  .client-login-form {
    padding: 24px 18px 20px;
  }

  .client-login-head {
    padding-right: 34px;
  }

  .client-login-options {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   v8 — UHD DISPLAY OPTIMIZATION
   4K, 5K, and 8K screens need a wider composition and larger
   media surfaces, but not runaway root scaling. These rules
   intentionally come last to normalize older ultra-wide passes.
   ========================================================= */

@media (min-width: 3840px) {
  :root {
    font-size: 18px;
    --uhd-wrap: 2680px;
    --uhd-section-y: 190px;
  }

  body {
    font-size: 17px;
  }

  .wrap {
    width: min(100% - 240px, var(--uhd-wrap));
    max-width: var(--uhd-wrap);
    padding-inline: 0;
  }

  section {
    padding-block: var(--uhd-section-y);
  }

  .top-promo-inner,
  .nav-inner {
    width: min(100% - 240px, var(--uhd-wrap));
    max-width: var(--uhd-wrap);
    padding-inline: 0;
  }

  .nav-inner {
    height: 92px;
  }

  nav.primary .brand-mark-real .brand-logo {
    max-width: 190px;
  }

  .hero-v3 {
    padding-block: 140px 92px;
  }

  .hero-v3-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(760px, 1.02fr);
    min-height: 940px;
    gap: 140px;
  }

  .hero-v3 h1 {
    font-size: clamp(5.8rem, 4.1vw, 7rem);
    max-width: 11ch;
  }

  .hero-v3-desc {
    max-width: 58ch;
    font-size: 1.12rem;
  }

  .hero-stage-v3 {
    max-width: 1020px;
  }

  .hero-stage-v3 .floater {
    padding: 0.9rem 1.1rem !important;
  }

  #pricing .price-grid-v3 {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 24rem));
    justify-content: center;
    gap: 1.5rem;
  }

  #pricing .price-card-v3 {
    min-width: 0;
  }

  .hosting-grid {
    grid-template-columns: repeat(3, minmax(0, 32rem));
    justify-content: center;
    max-width: none;
    gap: 1.6rem;
  }

  .hosting-included {
    max-width: min(var(--uhd-wrap), 172rem);
  }

  .world-v3 {
    padding-block: 180px;
  }

  .world-v3-head {
    max-width: 920px;
    margin-bottom: 70px;
  }

  .world-frame {
    max-width: min(100%, 3020px);
    border-radius: 30px;
  }

  .world-pin .pin-core {
    width: 15px;
    height: 15px;
  }

  .world-label {
    padding: 0.48rem 0.78rem;
  }

  .world-label b {
    font-size: 0.88rem;
  }

  .world-label i {
    font-size: 0.62rem;
  }

  footer.mega {
    padding-block: 170px 48px;
  }

  .mega-foot-grid {
    column-gap: 3rem;
    row-gap: 3rem;
  }

  .foot-brand p {
    max-width: 34rem;
  }

  .project-modal-card,
  .client-modal-card,
  .audit-request-card,
  .sales-modal-card,
  .blog-modal-card {
    transform: translateZ(0);
  }
}

@media (min-width: 5120px) {
  :root {
    font-size: 20px;
    --uhd-wrap: 3320px;
    --uhd-section-y: 230px;
  }

  body {
    font-size: 18px;
  }

  .wrap,
  .top-promo-inner,
  .nav-inner {
    width: min(100% - 360px, var(--uhd-wrap));
  }

  .nav-inner {
    height: 104px;
  }

  nav.primary .brand-mark-real .brand-logo {
    max-width: 220px;
  }

  .hero-v3 {
    padding-block: 175px 110px;
  }

  .hero-v3-grid {
    grid-template-columns: minmax(0, 1fr) minmax(900px, 1fr);
    min-height: 1120px;
    gap: 170px;
  }

  .hero-v3 h1 {
    font-size: clamp(6.4rem, 3.55vw, 7.6rem);
  }

  .hero-stage-v3 {
    max-width: 1220px;
  }

  #pricing .price-grid-v3 {
    grid-template-columns: repeat(auto-fit, minmax(18.5rem, 25rem));
    gap: 1.75rem;
  }

  .hosting-grid {
    grid-template-columns: repeat(3, minmax(0, 34rem));
    gap: 1.8rem;
  }

  .world-frame {
    max-width: min(100%, 3720px);
  }

  .world-pin .pin-core {
    width: 17px;
    height: 17px;
  }

  footer.mega {
    padding-top: 210px;
  }
}

@media (min-width: 7680px) {
  :root {
    font-size: 22px;
    --uhd-wrap: 4480px;
    --uhd-section-y: 280px;
  }

  body {
    font-size: 20px;
  }

  .wrap,
  .top-promo-inner,
  .nav-inner {
    width: min(100% - 640px, var(--uhd-wrap));
  }

  .nav-inner {
    height: 124px;
  }

  nav.primary .brand-mark-real .brand-logo {
    max-width: 260px;
  }

  .hero-v3 {
    padding-block: 230px 150px;
  }

  .hero-v3-grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(1120px, 1.04fr);
    min-height: 1380px;
    gap: 220px;
  }

  .hero-v3 h1 {
    font-size: clamp(7rem, 2.75vw, 8.6rem);
  }

  .hero-v3-desc {
    max-width: 62ch;
    font-size: 1.16rem;
  }

  .hero-stage-v3 {
    max-width: 1520px;
  }

  #pricing .price-grid-v3 {
    grid-template-columns: repeat(auto-fit, minmax(19rem, 26rem));
    gap: 2rem;
  }

  .hosting-grid {
    grid-template-columns: repeat(3, minmax(0, 36rem));
    gap: 2rem;
  }

  .world-frame {
    max-width: min(100%, 5000px);
    border-radius: 36px;
  }

  .world-pin .pin-core {
    width: 19px;
    height: 19px;
  }

  .world-label b {
    font-size: 0.96rem;
  }

  footer.mega {
    padding-block: 250px 64px;
  }
}

/* =========================================================
   v9 — BRANDED LIGHT MODE
   Light mode uses a professional Root palette: charcoal,
   slate, teal, and warm space white. The default remains dark.
   ========================================================= */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg-deepest: #eeeeee;
  --bg-base: #f7f9fb;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #eef3f6;

  --line: #d9e2ea;
  --line-strong: #b7c4cf;

  --ink-100: #222831;
  --ink-200: #393e46;
  --ink-300: #586573;
  --ink-400: #53606d;
  --ink-500: #6b7784;

  --brand: #00adb5;
  --brand-deep: #007f87;
  --brand-warm: #f97316;

  --grad-tree: linear-gradient(90deg,
      #4f46e5 0%, #2563eb 16%, #00adb5 34%, #10b981 48%,
      #ca8a04 62%, #f97316 76%, #e11d48 90%, #9333ea 100%);
  --grad-cool: linear-gradient(135deg, #00adb5 0%, #2563eb 52%, #4f46e5 100%);
  --grad-life: linear-gradient(135deg, #00adb5 0%, #10b981 54%, #84cc16 100%);
}

html[data-theme="light"] body {
  color: var(--ink-200);
  background:
    radial-gradient(circle at 16% 12%, rgba(0, 173, 181, 0.12), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(34, 40, 49, 0.08), transparent 32%),
    radial-gradient(circle at 72% 82%, rgba(249, 115, 22, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fb 44%, #eeeeee 100%);
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(0, 173, 181, .16), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(34, 40, 49, .12), transparent 50%),
    radial-gradient(2px 2px at 44% 72%, rgba(16, 185, 129, .12), transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 84%, rgba(249, 115, 22, .14), transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 88%, rgba(202, 138, 4, .12), transparent 50%);
  opacity: .75;
}

html[data-theme="light"] ::selection {
  background: var(--brand);
  color: #ffffff;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 42px;
  min-width: 42px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-100);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: rgba(45, 212, 255, 0.55);
  background: rgba(45, 212, 255, 0.08);
  outline: 0;
  transform: translateY(-1px);
}

.theme-toggle-track {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.theme-icon {
  position: absolute;
  width: 17px;
  height: 17px;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}

.theme-icon-sun {
  opacity: 0;
  transform: scale(.72) rotate(-18deg);
}

.theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.theme-toggle-label {
  display: none;
}

html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-100);
  border-color: rgba(57, 62, 70, 0.16);
  box-shadow: 0 8px 24px rgba(34, 40, 49, 0.08);
}

html[data-theme="light"] .theme-toggle-track {
  background: rgba(0, 173, 181, 0.12);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, 0.22);
}

html[data-theme="light"] .theme-icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html[data-theme="light"] .theme-icon-moon {
  opacity: 0;
  transform: scale(.72) rotate(18deg);
}

html[data-theme="light"] nav.primary {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(57, 62, 70, 0.12);
  box-shadow: 0 14px 38px rgba(34, 40, 49, 0.07);
}

html[data-theme="light"] .brand-mark-real {
  background: #222831;
  border: 1px solid rgba(0, 173, 181, 0.16);
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: 0 12px 30px rgba(34, 40, 49, 0.14);
}

html[data-theme="light"] nav.primary.scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px -26px rgba(34, 40, 49, 0.4), 0 0 0 1px rgba(217, 226, 234, 0.78);
}

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .mega-trigger:hover,
html[data-theme="light"] .mega-item:hover,
html[data-theme="light"] .btn-secondary:hover {
  background: rgba(0, 173, 181, 0.08);
}

html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .has-mega.open .mega-trigger {
  background: rgba(0, 173, 181, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 173, 181, 0.22);
}

html[data-theme="light"] .mobile-toggle,
html[data-theme="light"] .drawer-close {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(57, 62, 70, 0.16);
  color: var(--ink-100);
}

.drawer-head-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

html[data-theme="light"] .drawer {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 173, 181, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff, #eeeeee);
}

html[data-theme="light"] .drawer-links a {
  border-bottom-color: rgba(57, 62, 70, 0.13);
}

html[data-theme="light"] .top-promo {
  border-bottom-color: rgba(34, 40, 49, 0.16);
}

html[data-theme="light"] .top-promo::before {
  background: linear-gradient(90deg, rgba(34,40,49,.18), transparent 30%, transparent 70%, rgba(34,40,49,.18));
}

html[data-theme="light"] .contact-mini-drop-panel,
html[data-theme="light"] .mega-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  border-color: rgba(57, 62, 70, 0.14);
  box-shadow: 0 28px 80px -34px rgba(34, 40, 49, 0.38), 0 0 0 1px rgba(255,255,255,.72) inset;
}

html[data-theme="light"] .mega-icon,
html[data-theme="light"] .contact-mini-icon,
html[data-theme="light"] .sales-contact-icon {
  background: rgba(0, 173, 181, 0.08);
  border-color: rgba(0, 173, 181, 0.16);
}

html[data-theme="light"] .mega-panel-banner,
html[data-theme="light"] .audit-card,
html[data-theme="light"] .audit-v2-panel,
html[data-theme="light"] .tabs-bar-v2,
html[data-theme="light"] .price-card-v3,
html[data-theme="light"] .hosting-card,
html[data-theme="light"] .hosting-included,
html[data-theme="light"] .best-seller-card,
html[data-theme="light"] .engage-card,
html[data-theme="light"] .feat-2-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .review-featured-card,
html[data-theme="light"] .icon-block,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .newsletter-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(57, 62, 70, 0.13);
  box-shadow: 0 20px 52px rgba(34, 40, 49, 0.06);
}

html[data-theme="light"] .price-card-v3.hot,
html[data-theme="light"] .hosting-card.hosting-featured {
  background: linear-gradient(180deg, rgba(0, 173, 181, 0.08), rgba(255, 255, 255, 0.94) 42%);
  border-color: rgba(0, 173, 181, 0.32);
  box-shadow: 0 24px 70px rgba(0, 173, 181, 0.12), 0 0 0 1px rgba(0, 173, 181, 0.08);
}

html[data-theme="light"] .hero-v3::before {
  background:
    radial-gradient(circle at 80% 30%, rgba(0,173,181,.14), transparent 42%),
    radial-gradient(circle at 18% 68%, rgba(249,115,22,.10), transparent 38%);
}

html[data-theme="light"] .device-browser,
html[data-theme="light"] .device-phone,
html[data-theme="light"] .hero-stage-v3 .floater {
  border-color: rgba(57, 62, 70, 0.18);
  box-shadow: 0 30px 80px -34px rgba(34, 40, 49, 0.38), 0 0 0 1px rgba(255,255,255,.64);
}

html[data-theme="light"] .device-browser .db-bar {
  background: rgba(34, 40, 49, 0.08);
  border-bottom-color: rgba(57, 62, 70, 0.12);
}

html[data-theme="light"] .hero-stage-v3 .floater {
  background: rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .audit-v2-wrap {
  background:
    radial-gradient(circle at 28% 34%, rgba(0, 173, 181, .13), transparent 42%),
    radial-gradient(circle at 74% 64%, rgba(249, 115, 22, .08), transparent 44%),
    linear-gradient(180deg, #ffffff 0%, #eef3f6 100%);
  border-color: rgba(57, 62, 70, 0.12);
  box-shadow: 0 24px 70px rgba(34, 40, 49, 0.08);
}

html[data-theme="light"] .world-frame {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(22, 32, 77, .55) 0%,
      rgba(10, 17, 48, .85) 70%,
      #050818 100%);
  border-color: rgba(45, 212, 255, .08);
  box-shadow: 0 24px 70px rgba(34, 40, 49, 0.22);
}

html[data-theme="light"] .world-frame::after {
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(10, 17, 48, .55) 95%,
    rgba(10, 17, 48, .9) 100%);
}

html[data-theme="light"] .world-label {
  background: rgba(8, 12, 36, .82);
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .65);
}

html[data-theme="light"] .world-label b,
html[data-theme="light"] .world-pin[data-city="Dallas"] .world-label b {
  color: #ffffff;
}

html[data-theme="light"] .world-label i {
  color: currentColor;
  opacity: .9;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-100);
  border-color: rgba(57, 62, 70, 0.16);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(88, 101, 115, 0.72);
}

html[data-theme="light"] .project-modal,
html[data-theme="light"] .audit-request-modal,
html[data-theme="light"] .sales-modal,
html[data-theme="light"] .client-modal,
html[data-theme="light"] .blog-modal {
  background:
    radial-gradient(circle at 34% 12%, rgba(0, 173, 181, 0.16), transparent 32%),
    rgba(238, 238, 238, 0.82);
}

html[data-theme="light"] .project-modal-card,
html[data-theme="light"] .audit-request-card,
html[data-theme="light"] .sales-modal-card,
html[data-theme="light"] .client-modal-card,
html[data-theme="light"] .blog-modal-card {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,249,251,.98) 54%, rgba(238,238,238,.98));
  border-color: rgba(0, 173, 181, 0.22);
  box-shadow: 0 34px 95px rgba(34, 40, 49, 0.18), 0 0 0 1px rgba(255,255,255,.72) inset;
}

html[data-theme="light"] .project-modal-intro,
html[data-theme="light"] .client-modal-panel {
  background: linear-gradient(180deg, rgba(0, 173, 181, 0.08), transparent 52%), rgba(255,255,255,.72);
  border-color: rgba(57, 62, 70, 0.12);
}

html[data-theme="light"] .project-modal-close,
html[data-theme="light"] .audit-request-close,
html[data-theme="light"] .sales-modal-close,
html[data-theme="light"] .client-modal-close,
html[data-theme="light"] .blog-modal-close {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(57, 62, 70, 0.18);
  color: var(--ink-100);
}

html[data-theme="light"] .sales-contact-card,
html[data-theme="light"] .client-modal-status,
html[data-theme="light"] .project-modal-status,
html[data-theme="light"] .audit-request-note {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(57, 62, 70, 0.12);
}

html[data-theme="light"] .project-modal-card,
html[data-theme="light"] .audit-request-card,
html[data-theme="light"] .sales-modal-card,
html[data-theme="light"] .client-modal-card,
html[data-theme="light"] .blog-modal-card {
  color: var(--ink-200);
}

html[data-theme="light"] .project-modal-kicker,
html[data-theme="light"] .audit-request-kicker,
html[data-theme="light"] .sales-modal-kicker,
html[data-theme="light"] .client-modal-kicker,
html[data-theme="light"] .blog-modal-kicker {
  background: rgba(0, 173, 181, 0.1);
  border-color: rgba(0, 99, 106, 0.28);
  color: #00636a;
}

html[data-theme="light"] .project-modal .field label,
html[data-theme="light"] .audit-request-form .field label,
html[data-theme="light"] .client-modal .field label {
  color: var(--ink-300);
  font-weight: 800;
}

html[data-theme="light"] .project-modal .field input,
html[data-theme="light"] .project-modal .field textarea,
html[data-theme="light"] .project-modal .field select,
html[data-theme="light"] .audit-request-form .field input,
html[data-theme="light"] .audit-request-form .field select,
html[data-theme="light"] .client-modal .field input {
  background: #ffffff;
  border-color: rgba(57, 62, 70, 0.18);
  color: var(--ink-100);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 30px rgba(34, 40, 49, 0.035);
}

html[data-theme="light"] .project-modal .field input:focus,
html[data-theme="light"] .project-modal .field textarea:focus,
html[data-theme="light"] .project-modal .field select:focus,
html[data-theme="light"] .audit-request-form .field input:focus,
html[data-theme="light"] .audit-request-form .field select:focus,
html[data-theme="light"] .client-modal .field input:focus {
  border-color: rgba(0, 127, 135, 0.56);
  box-shadow: 0 0 0 4px rgba(0, 173, 181, 0.12), 0 12px 30px rgba(34, 40, 49, 0.045);
  outline: 0;
}

html[data-theme="light"] .project-modal .field input::placeholder,
html[data-theme="light"] .project-modal .field textarea::placeholder,
html[data-theme="light"] .audit-request-form .field input::placeholder,
html[data-theme="light"] .client-modal .field input::placeholder {
  color: rgba(83, 96, 109, 0.7);
}

html[data-theme="light"] .project-modal .field select option,
html[data-theme="light"] .audit-request-form .field select option {
  background: #ffffff;
  color: var(--ink-100);
}

html[data-theme="light"] .project-modal-signal span,
html[data-theme="light"] .audit-request-meta,
html[data-theme="light"] .client-modal-status {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(57, 62, 70, 0.14);
  color: var(--ink-300);
  box-shadow: 0 10px 26px rgba(34, 40, 49, 0.045);
}

html[data-theme="light"] .project-modal-signal b,
html[data-theme="light"] .audit-request-meta b,
html[data-theme="light"] .client-modal-status strong {
  color: var(--ink-100);
}

html[data-theme="light"] .project-modal-points li,
html[data-theme="light"] .client-modal-points li,
html[data-theme="light"] .project-modal-actions p,
html[data-theme="light"] .client-login-head p,
html[data-theme="light"] .client-login-options,
html[data-theme="light"] .client-login-footnote,
html[data-theme="light"] .sales-contact-card small,
html[data-theme="light"] .sales-modal-note,
html[data-theme="light"] .blog-modal-hero p,
html[data-theme="light"] .blog-modal-stat b,
html[data-theme="light"] .blog-modal-takeaways li,
html[data-theme="light"] .blog-modal-article p {
  color: var(--ink-300);
}

html[data-theme="light"] .client-login-options a {
  color: #00636a;
}

html[data-theme="light"] .client-login-alert,
html[data-theme="light"] .project-modal-status.is-error {
  background: #fff7ed;
  border-color: rgba(194, 65, 12, 0.28);
  color: #9a3412;
}

html[data-theme="light"] .project-modal-status.is-success {
  background: #f0fdf4;
  border-color: rgba(21, 128, 61, 0.24);
  color: #166534;
}

html[data-theme="light"] .sales-contact-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(57, 62, 70, 0.14);
  box-shadow: 0 10px 26px rgba(34, 40, 49, 0.045);
}

html[data-theme="light"] .sales-contact-card:hover,
html[data-theme="light"] .sales-contact-card:focus-visible {
  background: #ffffff;
  border-color: rgba(0, 127, 135, 0.32);
  box-shadow: 0 16px 36px rgba(34, 40, 49, 0.08);
}

html[data-theme="light"] .sales-contact-icon {
  background: rgba(0, 173, 181, 0.08);
  border-color: rgba(0, 127, 135, 0.16);
}

html[data-theme="light"] .blog-modal-hero {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--blog-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  border-bottom-color: rgba(57, 62, 70, 0.12);
}

html[data-theme="light"] .blog-modal-body {
  background: #ffffff;
}

html[data-theme="light"] .blog-modal-meta {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(57, 62, 70, 0.12);
  color: var(--ink-400);
}

html[data-theme="light"] .blog-modal-takeaways {
  border-left-color: color-mix(in srgb, var(--blog-accent) 72%, #00636a);
}

html[data-theme="light"] .blog-modal-stat span,
html[data-theme="light"] .blog-modal-takeaways h3,
html[data-theme="light"] .blog-modal-article h3 {
  color: var(--ink-100);
}

html[data-theme="light"] footer.mega {
  background: linear-gradient(180deg, #f7f9fb 0%, #eeeeee 100%);
  border-top-color: rgba(57, 62, 70, 0.12);
}

html[data-theme="light"] .foot-bottom,
html[data-theme="light"] .foot-copyright {
  border-color: rgba(57, 62, 70, 0.12);
}

html[data-theme="light"] .foot-payment .pchip,
html[data-theme="light"] .lang-pill,
html[data-theme="light"] .socials a {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(57, 62, 70, 0.14);
  color: var(--ink-200);
}

html[data-theme="light"] .eyebrow {
  color: #00636a;
}

html[data-theme="light"] .tabs-bar-v2 button.active {
  color: var(--ink-100);
  border-bottom-color: var(--brand-deep);
}

html[data-theme="light"] .tabs-bar button.active,
html[data-theme="light"] .engage-tabs button.active {
  background: linear-gradient(135deg, #00636a, var(--brand-deep));
  border-color: rgba(0, 99, 106, 0.44);
  color: #ffffff;
  box-shadow: 0 10px 26px -12px rgba(0, 99, 106, 0.64);
}

html[data-theme="light"] .tabs-bar button.active .dot-tab {
  background: #ffffff;
}

html[data-theme="light"] .engage-tabs button.active::after {
  border-top-color: var(--brand-deep);
}

html[data-theme="light"] .engage-meta {
  background: rgba(0, 173, 181, 0.08);
  border-color: rgba(0, 127, 135, 0.18);
  color: var(--ink-200);
}

html[data-theme="light"] .engage-meta b,
html[data-theme="light"] .engage-card .ec-line b {
  color: var(--ink-100);
}

html[data-theme="light"] .engage-card .ec-logo span {
  color: #00636a !important;
}

html[data-theme="light"] .engage-card .ec-line {
  color: var(--ink-300);
}

html[data-theme="light"] .engage-card .ec-line.muted,
html[data-theme="light"] .price-card-v3 .pcv-start,
html[data-theme="light"] .price-card-v3 .pcv-price .u,
html[data-theme="light"] .hosting-desc,
html[data-theme="light"] .hosting-tier-sub,
html[data-theme="light"] .hi-grid li span {
  color: var(--ink-400);
}

html[data-theme="light"] .price-card-v3 .pcv-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(57, 62, 70, 0.2);
  color: var(--ink-100);
}

html[data-theme="light"] .price-card-v3 .pcv-btn:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #ffffff;
}

html[data-theme="light"] .price-card-v3.hot .pcv-btn {
  background: linear-gradient(135deg, #4f46e5, #7c3aed, #c026d3);
  color: #ffffff;
}

html[data-theme="light"] .hosting-badge {
  background: linear-gradient(135deg, #00636a, #2563eb, #4f46e5);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(34, 40, 49, 0.45);
}

html[data-theme="light"] .new-mini {
  color: var(--ink-100);
}

html[data-theme="light"] .hero-v3-price,
html[data-theme="light"] .hero-v3-price span {
  color: var(--ink-300);
}

html[data-theme="light"] .hero-v3-price .price-num {
  color: var(--ink-100);
}