:root {
  --mid: #454da1;
  --mid-d: #363d88;
  --mid-l: #eeeffe;
  --midnight-d: #363d88;
  --teal: #21bfcf;
  --teal-l: #e5f9fb;
  --green: #22c55e;
  --green-l: #dcfce7;
  --amber: #f59e0b;
  --red: #ef4444;
  --ink: #14142a;
  --body: #3d3d58;
  --muted: #7878a0;
  --white: #ffffff;
  --off: #f9f9fd;
  --lav: #f2f2fb;
  --lav-m: #e8e8f6;
  --midnight: #454da1;
  --midnight-light: #5c65b8;
  --turquoise: #21bfcf;
  --teal-soft: #e8f9fb;
  --black: #1a1a2e;
  --text: #2d2d44;
  --muted: #7b7b96;
  --white: #ffffff;
  --off-white: #fafafa;
  --lavender: #f2f2fb;
  --lavender-mid: #eaeaf8;
  --border: rgba(69, 77, 161, 0.1);
  --border-light: rgba(69, 77, 161, 0.07);
  --green: #16a34a;
  --shadow-sm: 0 2px 12px rgba(69, 77, 161, 0.08);
  --shadow-md: 0 8px 32px rgba(69, 77, 161, 0.12);
  --shadow-lg: 0 20px 60px rgba(69, 77, 161, 0.15);
  --ink: #14142a;
  --bd: rgba(69, 77, 161, 0.09);
  --bd-m: rgba(69, 77, 161, 0.18);
  --sh-s: 0 2px 12px rgba(69, 77, 161, 0.07);
  --sh-m: 0 8px 30px rgba(69, 77, 161, 0.11);
  --sh-l: 0 20px 56px rgba(69, 77, 161, 0.15);
  --sh-xl: 0 32px 72px rgba(69, 77, 161, 0.2);
  --midnight-deep: #2f3680;
  --midnight: #454da1;
  --midnight-darker: #1e2466;
  --grey-900: #14142a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}

body {
  font-family: "Inter", sans-serif;
  background: var(--white);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── TOP PROMO BAR (above nav — home) ─── */
.top-promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
  background: linear-gradient(
    90deg,
    var(--midnight-darker) 0%,
    var(--midnight) 45%,
    var(--midnight-light) 100%
  );
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.top-promo-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-promo-bar__offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.top-promo-bar__text {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.2;
  font-size: 12px;
}

.top-promo-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 5px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.top-promo-bar__cta:hover {
  background: #15803d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

.top-promo-bar__contact {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.top-promo-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.top-promo-bar__link:hover {
  color: #fff;
}

.top-promo-bar__link--chat {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 700;
}

.top-promo-bar__link i {
  font-size: 11px;
  opacity: 0.9;
}

body.has-top-promo-bar nav {
  top: 40px;
}

body.has-top-promo-bar nav.scrolled {
  top: 34px;
}

@media (max-width: 1024px) {
  .top-promo-bar__inner {
    padding: 5px 14px;
    gap: 10px;
  }

  .top-promo-bar__text {
    font-size: 11px;
  }

  .top-promo-bar__contact {
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .top-promo-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px 10px;
  }

  .top-promo-bar__offer {
    flex: 1 1 100%;
    justify-content: center;
  }

  .top-promo-bar__contact {
    flex: 1 1 100%;
    justify-content: center;
    gap: 16px;
  }

  body.has-top-promo-bar nav {
    top: 68px;
  }

  body.has-top-promo-bar nav.scrolled {
    top: 62px;
  }
}

@media (max-width: 520px) {
  .top-promo-bar__text {
    white-space: normal;
    text-align: center;
    font-size: 10px;
  }

  .top-promo-bar__cta {
    padding: 4px 10px;
    font-size: 10px;
  }

  .top-promo-bar__link {
    font-size: 11px;
  }

  .top-promo-bar__link--chat {
    font-size: 10px;
  }
}

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1200px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  box-shadow:
    0 8px 32px rgba(69, 77, 161, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo1 {
  width: 140px;
  height: 40px;
}

p {
  margin-bottom: 16px;
}

p:last-child {
  margin-bottom: 0;
}

nav.scrolled {
  top: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 12px 40px rgba(69, 77, 161, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  padding: 10px 11px;
}

.nav-logo {
  font-family: "Playfair Display", serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--midnight);
  text-decoration: none;
  letter-spacing: -0.5008px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.nav-logo::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, var(--turquoise), var(--midnight));
  border-radius: 4px;
  transform: rotate(45deg);
}

.nav-logo span {
  color: var(--turquoise);
}

.nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
}

.nav-links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-links a {
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  /* padding-bottom: 0rem; */
  border-radius: 100px;
  transition: all 0.3s ease;
  overflow: hidden;
  display: inline-block;
  z-index: 1;
}

.nav-links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--lavender);
  border-radius: 100px;
  z-index: -1;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover {
  color: var(--midnight);
}

.nav-links a:hover::before {
  opacity: 1;
  transform: scale(1);
}

.nav-links li > ul {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 10px 0;
  min-width: 275px;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.nav-links li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.nav-links li > ul::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.5rem solid #fff;
  transform: translateX(-50%);
  box-shadow: var(--shadow-md);
  z-index: -1;
}

.nav-links li > ul > li > a {
  display: flex;
  width: 100%;
  gap: 12px;
  padding: 10px 18px;
  outline: 0;
}

.nav-links li > ul > li > a::before {
  display: none;
}

.nav-links li > ul span.nav-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  min-height: 45px;
  min-width: 45px;
  border: none;
  box-shadow: none;
}

.nav-links li > ul span.nav-icon.default {
  color: var(--mid);
  background: var(--lavender);
}

.nav-links li > ul span.nav-icon.green {
  color: #1fdce5;
  background: rgba(31, 220, 229, 0.16);
}

.nav-links li > ul span.nav-icon.purple {
  color: var(--midnight);
  background: var(--lavender-mid);
}

.nav-links li > ul span.nav-icon > i {
  font-size: 17px;
  line-height: 1;
}

.nav-links li > ul span.nav-icon > svg {
  width: 25px;
  height: 25px;
  transition: fill 0.2s;
}

.nav-links li > ul h4 {
  font-weight: 600;
  margin-bottom: 0;
}

.nav-links li > ul p {
  font-size: 12px;
  color: var(--muted);
}

/* What We Do — 4 columns per row (20 items → 5 rows) */
.nav-links li.nav-item--what-we-do > ul {
  min-width: 840px;
  max-width: min(96vw, 920px);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 8px;
  max-height: none;
  overflow: visible;
}

.nav-links li.nav-item--what-we-do > ul > li > a {
  padding: 8px 10px;
  align-items: flex-start;
}

.nav-links li.nav-item--what-we-do > ul span.nav-icon {
  min-height: 40px;
  min-width: 40px;
}

.nav-links li.nav-item--what-we-do > ul span.nav-icon > i {
  font-size: 16px;
  line-height: 1;
}

.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 1) span.nav-icon,
.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 3) span.nav-icon,
.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 6) span.nav-icon,
.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 8) span.nav-icon {
  color: #1fdce5;
  background: rgba(31, 220, 229, 0.16);
}

.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 2) span.nav-icon,
.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 4) span.nav-icon,
.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 5) span.nav-icon,
.nav-links li.nav-item--what-we-do > ul > li:nth-child(8n + 7) span.nav-icon {
  color: var(--mid);
  background: var(--lavender);
}

.nav-links li.nav-item--what-we-do > ul h4 {
  font-size: 13px;
  line-height: 1.25;
}

.nav-links li.nav-item--what-we-do > ul p {
  font-size: 11px;
  line-height: 1.3;
}

.nav-cta {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--midnight) 0%,
    var(--turquoise) 100%
  );
  color: #fff;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(33, 191, 207, 0.3);
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--turquoise) 0%,
    var(--midnight) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 191, 207, 0.4);
  color: #fff;
}

.nav-cta:hover::before {
  opacity: 1;
}

/* Mobile menu toggle (hidden on desktop; shown ≤900px in media query below) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(69, 77, 161, 0.18);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--midnight);
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

nav.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

nav.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

nav.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── HERO ─── */
.hero {
  padding: 140px 56px 80px;
  background: linear-gradient(160deg, #ffffff 0%, #f7f7fd 50%, #eef5fb 100%);
  overflow: hidden;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(33, 191, 207, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(69, 77, 161, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(69, 77, 161, 0.07);
  border: 1px solid rgba(69, 77, 161, 0.15);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--midnight);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 28px;
  animation: fadeUp 0.5s ease both;
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 4.5vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.5008px;
  color: var(--black);
  font-weight: 500;
  margin-bottom: 20px;
  animation: fadeUp 0.5s 0.1s ease both;
}

h1 em {
  font-style: italic;
  color: var(--midnight);
}

h1 strong {
  font-weight: 600;
}

.hero-sub {
  font-size: 17px;
  font-weight: 400;
  color: #7e839d;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 36px;
  animation: fadeUp 0.5s 0.15s ease both;
}

.hero-sub strong {
  color: #161b3c;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  animation: fadeUp 0.5s 0.2s ease both;
  margin-bottom: 52px;
}
/* co-build note */
.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(69, 77, 161, 0.05);
  border: 1px solid rgba(69, 77, 161, 0.12);
  border-left: 3px solid var(--mid);
  border-radius: 0 10px 10px 0;
  padding: 12px 15px;
  margin-bottom: 28px;
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.6;
  animation: up 0.5s 0.17s ease both;
  max-width: 470px;
  border-radius: 8px;
}
.hero-note strong {
  color: var(--mid);
  font-weight: 600;
}

.btn-green {
  background: #16a34a;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-green:hover {
  background: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

.btn-outline {
  color: var(--midnight);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  padding: 13px 22px;
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-outline:hover {
  border-color: var(--midnight);
  background: var(--lavender);
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  animation: fadeUp 0.5s 0.25s ease both;
}

.hero-trust-faces {
  display: flex;
}

.hero-trust-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: -10px;
  object-fit: cover;
  background: #eaeaf8;
}

.hero-trust-text {
  font-size: 13px;
  color: var(--muted);
  margin-left: 18px;
}

.hero-trust-text strong {
  color: var(--text);
  font-weight: 500;
}

/* Hero visual card */
.hero-visual {
  animation: fadeUp 0.6s 0.3s ease both;
  position: relative;
}

.hero-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.hero-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-card-label::before {
  content: "●";
  animation: pulse 2s infinite;
}

.os-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.os-layer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lavender);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
  cursor: default;
}

.os-layer:hover {
  background: var(--lavender-mid);
  transform: translateX(4px);
}

.os-layer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.os-layer-icon.blue {
  background: rgba(69, 77, 161, 0.12);
}

.os-layer-icon.teal {
  background: rgba(33, 191, 207, 0.12);
}

.os-layer-icon.green {
  background: rgba(34, 197, 94, 0.1);
}

.os-layer-icon.purple {
  background: rgba(139, 92, 246, 0.1);
}

.os-layer-text {
  flex: 1;
}

.os-layer-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.2;
}

.os-layer-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.os-layer-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--midnight);
  background: rgba(69, 77, 161, 0.1);
  padding: 3px 8px;
  border-radius: 100px;
}

.hero-card-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
}

.hero-card-stat {
  text-align: center;
}

.hero-card-stat-num {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  color: var(--midnight);
  font-weight: 500;
}

.hero-card-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Floating badge */
.hero-float {
  position: absolute;
  top: -16px;
  right: -16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  z-index: 1;
}

.hero-float span {
  color: var(--green);
  font-weight: 600;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ─── LOGO BAR ─── */
.logo-bar {
  background: var(--white);
  padding: 28px 56px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.logo-bar-inner {
  max-width: 1052px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.logo-bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.logo-bar-logos {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  flex: 1;
}

.logo-item {
  font-size: 22px;
  font-weight: 600;
  color: #c0c0d0;
  letter-spacing: -0.2992px;
  white-space: nowrap;
  transition: color 0.2s;
}

.logo-item:hover {
  color: var(--muted);
}

.logo-item.serif {
  font-family: "Playfair Display", serif;
  font-style: italic;
}

@media (max-width: 1024px) {
  .logo-item {
    font-size: 19px;
}

  .growth-sys-diagram .gsd-you-card,
  .growth-sys-diagram .gsd-result-card {
    display: none;
  }

  .container {
    padding: 0;
  }
  .growth-sys-diagram .gsd-arrow-btn, .growth-sys-diagram .gsd-dashed-conn
  {
    display:none !important;
  }
  .growth-sys-diagram .gsd-arrow-btn::before
  {
    display: none;
  }
  .stat-row
  {
    flex-direction: column;
  }
  .stat-label:before
  {
    display: none;
  }
  section.philosophy .stat-number p
  {
    margin-top:10px;
    margin-bottom:10px;
  }

}

/* ─── SHARED ─── */
.container {
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 96px 56px;
}

.section-label {
  font-size: 11.5008px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 14px;
  font-style: normal;
}

h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.2992px;
  margin-bottom: 16px;
  color: var(--black);
}

h2 em {
  font-style: italic;
  color: var(--midnight);
}

h3 em {
  font-style: italic;
  color: var(--midnight);
}

.section-intro {
  font-size: 17px;
  font-weight: 400;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 56px;
}

/* ─── REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.d1 {
  transition-delay: 0.1s;
}

.d2 {
  transition-delay: 0.18s;
}

.d3 {
  transition-delay: 0.26s;
}

.d4 {
  transition-delay: 0.34s;
}

/* ─── PROBLEM ─── */
.problem-section {
  background: #2b2b2d;
  color: #f5f1ea;
  position: relative;
  overflow: hidden;
}

.problem-section .section-label {
  color: #21bfcf;
  border-color: rgba(245, 241, 234, 0.2);
}

/* .problem-section h2,
    .problem-section h2 em {
      color: #f5f1ea;
    } */
/* 
    .problem-section .section-intro {
      color: rgba(245, 241, 234, 0.7);
    } */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 56px 0 72px;
  align-items: start;
}

.stat-card {
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
  cursor: default;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid rgba(69, 77, 161, 0.07);
  box-shadow: 0 2px 12px rgba(69, 77, 161, 0.08);
  height: 100%;
}

/* coral */

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 32px rgba(69, 77, 161, 0.12);
}

/* .stat-card:nth-child(2):hover, .stat-card:nth-child(4):hover {
      transform: translateY(22px);
    } */

.stat-num {
  font-family: "Playfair Display", serif;
  font-size: 56px;
  color: #454da1;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -1px;
}

.stat-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  /* margin-bottom: 14px; */
  /* padding-bottom: 14px; */
  /* border-bottom: 1px solid rgba(26, 26, 26, 0.18); */
}

.stat-card p {
  font-size: 13px;
  color: rgba(26, 26, 26, 0.72);
  line-height: 1.55;
  margin-top: 10px;
}

/* keep "Trap" subsection readable on dark bg */
.problem-section .trap-col {
  color: var(--black);
}

/* ── Trap / Leverage comparison ── */
/* .trap-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
} */

.trap-col {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 36px 28px 28px;
  box-shadow: 0 2px 12px rgba(69, 77, 161, 0.08);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* soft tinted wash inside each white card */
/* .trap-col.bad {
      background:
        radial-gradient(120% 60% at 100% 0%, rgba(239, 68, 68, .07), transparent 55%),
        radial-gradient(80% 50% at 0% 100%, rgba(239, 68, 68, .05), transparent 60%),
        #fff;
    }
    .trap-col.good {
      background:
        radial-gradient(120% 60% at 100% 0%, rgba(22, 163, 74, .08), transparent 55%),
        radial-gradient(80% 50% at 0% 100%, rgba(22, 163, 74, .05), transparent 60%),
        #fff;
    } */

/* .trap-col:hover {
      transform: translateY(-4px);
      box-shadow: 0 30px 60px -22px rgba(15, 18, 60, .45), 0 4px 10px rgba(15, 18, 60, .1);
    } */

/* top accent bar */
.trap-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0px;
  z-index: 2;
}

.trap-col.bad::before {
  background: linear-gradient(90deg, #ff6b6b, #ef4444 60%, #b91c1c);
}

.trap-col.good::before {
  background: linear-gradient(90deg, #34d399, var(--green) 55%, #0f9d6b);
}

/* soft side wash + corner glow */
.trap-col::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
  filter: blur(8px);
}

/* .trap-col.bad::after  { background: radial-gradient(circle, #ef4444, transparent 70%); }
    .trap-col.good::after { background: radial-gradient(circle, var(--green), transparent 70%); } */

/* hide old vertical edge accent — reference doesn't use it */
.trap-col .trap-edge {
  display: none;
}

/* ── Header: large circular badge + 2-line title + corner face emoji ── */
.trap-col-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
  padding-right: 68px;
  /* room for face emoji */
}

.trap-col-head .head-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  aspect-ratio: 1;
  /* line-height: 1;
      flex-shrink: 0; */
  /* box-shadow: 0 8px 20px -6px rgba(15,18,60,.25); */
}

.trap-col.bad .head-dot {
  background: #ef4444;
  /* box-shadow: 0 8px 22px -6px rgba(239,68,68,.55);  */
}

.trap-col.good .head-dot {
  background: var(--green);
  /* box-shadow: 0 8px 22px -6px rgba(22,163,74,.5); */
}

.trap-col-head .head-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text);
}

.trap-col.bad .head-title .head-accent {
  color: #b91c1c;
}

.trap-col.good .head-title .head-accent {
  color: #0f7a52;
}

.trap-col-head .head-face {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.trap-col.bad .head-face {
  background: rgba(239, 68, 68, 0.1);
}

.trap-col.good .head-face {
  background: rgba(22, 163, 74, 0.12);
}

/* ── Each item is now its own pill card ── */
.trap-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 18px 4px 0px;
  /* margin-bottom: 10px; */
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(15, 18, 60, 0.07);
  font-size: 14.5px;
  color: #2a2d4a;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  position: relative;
  z-index: 1;
}

/* .trap-col.bad .trap-row {
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(239,68,68,.04));
      border-color: rgba(239, 68, 68, .15);
    }
    .trap-col.good .trap-row {
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(22,163,74,.05));
      border-color: rgba(22, 163, 74, .18);
    } */

/* .trap-row:hover {
      transform: translateX(4px);
      box-shadow: 0 8px 22px -12px rgba(15,18,60,.25);
    } */
/* .trap-col.bad  .trap-row:hover { border-color: rgba(239, 68, 68, .35); }
    .trap-col.good .trap-row:hover { border-color: rgba(22, 163, 74, .4); } */

.trap-row:last-child {
  margin-bottom: 0;
}

/* circular icon badge per row (matches reference) */
.trap-row-icon {
  flex-shrink: 0;
  width: 20px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  /* justify-content: center; */
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  transition: transform 0.25s ease;
}

.text-danger {
  color: #ef4444 !important;
}

/* trailing meta dots (⋮) on the right of each row */
.trap-row-meta {
  margin-left: auto;
  color: rgba(15, 18, 60, 0.25);
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
  user-select: none;
}

.trap-col.bad .trap-row-meta {
  color: rgba(239, 68, 68, 0.35);
}

.trap-col.good .trap-row-meta {
  color: rgba(22, 163, 74, 0.4);
}

.trap-row:hover .trap-row-icon {
  transform: scale(1.1) rotate(-3deg);
}

/* ─── WHY FAIL ─── */
.fails-section {
  background: var(--white);
}

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

.fail-card {
  position: relative;
  /* border: 1px solid rgba(255, 255, 255, 0.06); */
  border-radius: 18px;
  padding: 32px 28px 30px;
  /* background: linear-gradient(160deg, #2b2b2d 0%, #1f1f22 100%); */
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  position: relative;
  overflow: hidden;
  color: #e8e8ec;
  /* min-height: 260px; */
  display: flex;
  flex-direction: column;
}

section.fails-section1 {
  background: var(--lavender);
}

.fail-card1 {
  background: #fff;
  border: 1px solid rgba(69, 77, 161, 0.07);
}

.fail-card1 img {
  border-radius: 16px;
  margin-top: 20px;
}

.fail-card1:hover {
  border-color: transparent !important;
}

.fail-card1 .fail-type {
  color: var(--text);
  font-family: "Inter", sans-serif;
  margin-bottom: 0px;
  font-size: 27px;
}

.fail-card1 > .fail-type + p {
  color: var(--text);
  font-family: "Inter", sans-serif;
}

.fail-card1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0fdac2 !important;
  transition: background 0.3s;
}

.fail-card1:hover:before {
  background: var(--midnight) !important;
}

/* .fail-card::before {
      content: '';
      position: absolute;
      top: 22px;
      right: 22px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: background 0.3s, border-color 0.3s;
    } */

/* .fail-card::after {
      content: '↗';
      position: absolute;
      top: 22px;
      right: 22px;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #fff;
      font-weight: 500;
      line-height: 1;
      transition: transform 0.3s;
    } */

/* .fail-card:hover {
      transform: translateY(-4px);
      border-color: rgba(217, 255, 92, 0.35);
      box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
    }

    .fail-card:hover::before {
      background: rgba(217, 255, 92, 0.15);
      border-color: rgba(217, 255, 92, 0.5);
    }

    .fail-card:hover::after {
      transform: rotate(-12deg);
    } */

.fail-type {
  /* font-family: 'Playfair Display', serif; */
  font-size: 34px;
  line-height: 1.05;
  font-weight: 700;
  color: #d9ff5c;
  margin-bottom: 18px;
  padding-right: 56px;
  letter-spacing: -0.5008px;
}

.fail-card > .fail-type + p {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
}

.fail-card p {
  font-size: 14.5008px;
  color: rgba(232, 232, 236, 0.72);
  line-height: 1.65;
  flex: 1;
}

.fail-cost {
  margin-top: 18px;
  font-size: 12.5008px;
  font-weight: 500;
  color: #ff8a7a;
  letter-spacing: 0.2px;
}

.fail-highlight {
  background: linear-gradient(160deg, #3a3550 0%, #2a2740 100%);
  border: 1px dashed rgba(217, 255, 92, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.fail-card.fail-highlight.fail-highlight1.reveal.d2.visible {
  padding-top: 47px;
}

.fail-highlight::before,
.fail-highlight::after {
  display: none;
}

.fail-highlight p {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  color: #f4f1ff;
  font-style: italic;
  border: none !important;
  padding: 0 !important;
}

/* ─── SOLUTION ─── */
.solution-section {
  background: var(--midnight);
  color: #fff;
}

.solution-section h2 {
  color: #fff;
}

.solution-section h2 em {
  color: var(--turquoise);
}

.solution-section .section-label {
  color: rgba(255, 255, 255, 0.45);
}

.solution-section .section-intro {
  color: rgba(255, 255, 255, 0.5);
  max-width: 580px;
}

/* ── Unified white card: layers list (left) + media (right) ── */
.solution-shell {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow:
    0 30px 60px -25px rgba(0, 0, 0, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(15, 18, 60, 0.05);
}

.solution-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.solution-layers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.sol-layer {
  display: grid;
  grid-template-columns: 85px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 18px;
  background: transparent;
  border: 1.5008px solid rgba(15, 18, 60, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: none;
  transform: none !important;
}

.sol-layer + .sol-layer {
  margin-top: 2px;
}

.sol-layer.is-active,
.sol-layer:hover {
  background: linear-gradient(135deg, #f5f7ff 0%, #eef0ff 100%);
  border-color: var(--midnight);
  box-shadow: 0 0 0 3px rgba(69, 77, 161, 0.12);
}

.sol-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--midnight);
  text-transform: uppercase;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

.sol-layer.is-active .sol-num,
.sol-layer:hover .sol-num {
  opacity: 1;
}

.sol-title {
  font-size: 15.5008px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}

.sol-desc {
  font-size: 13px;
  color: #4a4d6b;
  font-weight: 400;
  line-height: 1.5;
}

.sol-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--midnight);
  background: rgba(69, 77, 161, 0.08);
  padding: 6px 11px;
  border-radius: 100px;
  white-space: nowrap;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.sol-layer.is-active .sol-tag,
.sol-layer:hover .sol-tag {
  background: linear-gradient(135deg, var(--turquoise), var(--midnight));
  color: #fff;
}

/* media slot — fixed aspect, no shift */
.solution-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef1ff 0%, #e3e8ff 60%, #d6dcff 100%);
  border: 1px solid rgba(69, 77, 161, 0.15);
  min-height: 100%;
}

.solution-media .media-frame {
  position: absolute;
  inset: 0;
}

.solution-media .media-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 32px;
  text-align: center;
  overflow: hidden;
}

.solution-media .media-slide.is-active {
  opacity: 1;
}

.solution-media .media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.05);
}

/* readability scrim over the footage */
.solution-media .media-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(7, 11, 38, 0.55) 0%,
      rgba(7, 11, 38, 0.35) 40%,
      rgba(7, 11, 38, 0.78) 100%
    ),
    radial-gradient(
      120% 80% at 50% 50%,
      rgba(7, 11, 38, 0.15),
      rgba(7, 11, 38, 0.55)
    );
  pointer-events: none;
}

.solution-media iframe,
.solution-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-slide-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.media-slide-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turquoise);
  opacity: 0.95;
  font-weight: 700;
  margin-bottom: 14px;
}

.media-slide-title {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.media-slide-sub {
  margin-top: 12px;
  font-size: 13.5008px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ─── HOW IT WORKS ─── */
.hiw-section {
  background: var(--lavender);
}

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

.step-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(69, 77, 161, 0.2);
}

.step-num {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lavender-mid);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--midnight);
  margin-bottom: 18px;
}

.step-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--black);
}

.step-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── ASSISTANT ─── */
.assistant-section {
  background: var(--white);
}

.assistant-inner {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 64px;
  align-items: center;
}

.assistant-copy p {
  font-size: 17px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 32px;
  font-weight: 400;
}

.assistant-metrics {
  display: flex;
  gap: 12px;
  align-items: center;
}

.a-metric {
  flex: 1;
  text-align: center;
}

.a-metric + .a-metric {
  border-left: 1px solid #d1d5db;
  padding-left: 12px;
}

.a-metric-num {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  color: var(--midnight);
  line-height: 1;
}

.a-metric-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Tasks: dual marquee columns (one up, one down) ── */
.task-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  /* border: 1px solid var(--border-light);
      box-shadow: var(--shadow-sm); */
  height: 530px;
  position: relative;
}

.task-grid::before,
.task-grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  pointer-events: none;
  z-index: 2;
}

.task-grid::before {
  top: 0;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}

.task-grid::after {
  bottom: 0;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}

.task-col {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.task-col + .task-col {
  border-left: 1px solid var(--border-light);
}

.task-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: taskScrollUp 28s linear infinite;
  will-change: transform;
}

.task-track.v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: taskScrollUp 16s linear infinite;
  will-change: transform;
}

.task-col.v2 {
  position: relative;
  overflow: hidden;
  max-height: 114px;
  min-height: 114px;
}

.task-track.v2 .task-item {
  padding: 10px 18px 10px 22px;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.35;
}

.task-col.v2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  pointer-events: none;
  z-index: 2;
  top: 0;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}

.task-col.v2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  pointer-events: none;
  z-index: 2;
  bottom: 0;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}

.task-track.v2 > div::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  right: 0;
  height: 2px;
  width: 2px;
  background: rgb(69 77 161);
}

.task-col.down .task-track {
  animation-name: taskScrollDown;
  animation-duration: 32s;
}

.task-col:hover .task-track {
  animation-play-state: paused;
}

@keyframes taskScrollUp {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@keyframes taskScrollDown {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

.task-item {
  padding: 15px 18px;
  font-size: 13.5008px;
  color: #555;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    background 0.2s,
    color 0.2s;
}

.task-item:hover {
  background: var(--lavender);
  color: var(--black);
}

.task-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--turquoise);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ─── TEAMS ─── */
.teams-section {
  background: var(--lavender);
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.team-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 26px;
  align-items: stretch;
}

.team-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--midnight), var(--turquoise));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.team-card:hover::after {
  transform: scaleX(1);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.team-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.team-status::before {
  content: "●";
  font-size: 8px;
  animation: pulse 2s infinite;
}

.team-card h3 {
  font-size: 19px;
  /* font-family: 'Playfair Display', serif; */
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--black);
}

.team-card .team-desc {
  font-size: 13.5008px;
  color: var(--muted);
  margin-bottom: 26px;
  line-height: 1.6;
}

.team-bullets {
  list-style: none;
  position: relative;
  margin-top: auto;
  min-height: 108px;
}

.team-bullets li {
  font-size: 13px;
  color: #555;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  display: none;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.team-bullets li.is-visible {
  display: flex;
  opacity: 1;
}

.team-bullets li.is-visible:last-child,
.team-bullets li.is-visible.is-last {
  border-bottom: none;
}

.team-bullets li::before {
  content: "▸";
  color: var(--midnight);
  font-size: 10px;
  flex-shrink: 0;
}

/* Right side rotating image */
.team-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--lavender);
  min-height: 220px;
}

.team-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}

.team-media:has(img:only-of-type) img {
  opacity: 1;
}

.team-media img.is-visible {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .team-media img {
    transition-duration: 0.01ms;
  }
}

.team-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 17, 38, 0.18));
  pointer-events: none;
}

/* ─── COMPARISON ─── */
.comparison-section {
  background: var(--white);
}

.comp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

.comp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}

.comp-table th {
  padding: 16px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: var(--lavender);
  border-bottom: 1px solid var(--border-light);
  letter-spacing: 0.02em;
}

.comp-table th:first-child {
  text-align: left;
}

.comp-table th.hi {
  color: var(--midnight);
  background: rgba(69, 77, 161, 0.07);
}

.comp-table td {
  padding: 15px 20px;
  text-align: left;
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid var(--border-light);
  background: #fff;
  overflow-wrap: anywhere;
}

.comp-table td:first-child {
  text-align: left;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}

.comp-table td.hi {
  background: rgba(69, 77, 161, 0.1);
  font-weight: 700;
}

.comp-table tr:last-child td {
  border-bottom: none;
}

.comp-table svg.wrong {
  width: 17px;
  height: auto;
  max-height: 19px;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
}

.comp-table th.hi .logo1,
.comp-table th.hi .logo2 {
  max-width: min(104px, 24vw);
  height: auto;
}

@media (max-width: 900px) {
  .comparison-section .comp-table-wrap {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: 8px;
  }
}

@media (max-width: 640px) {
  .comp-table {
    min-width: 600px;
  }

  .comp-table th,
  .comp-table td {
    padding: 10px 9px;
    font-size: 12.5px;
    vertical-align: top;
  }

  .comp-table th:first-child,
  .comp-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 8px 0 16px -8px rgba(27, 42, 107, 0.15);
  }

  .comp-table thead th:first-child {
    z-index: 2;
    background: var(--lavender);
  }

  .comp-table tbody td:first-child {
    background: var(--white);
  }

  .comp-table tbody tr:nth-child(even) td:first-child {
    background: #fafbfd;
  }
}

.check-y {
  color: var(--green);
  font-size: 17px;
  font-weight: 700;
}

.check-n {
  color: #d1d5db;
  font-size: 17px;
}

.check-p {
  color: #fbbf24;
  font-size: 15px;
}

/* ══════════════════════════════
   PRICING
══════════════════════════════ */
.pricing-sec {
  background: var(--white);
}

.pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
}

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

.p-card {
  background: var(--lav);
  border: 1.5008px solid var(--bd);
  border-radius: 10px;
  padding: 28px 24px;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.p-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bd);
  transition: background 0.3s;
}

.p-card:hover::before {
  background: linear-gradient(90deg, var(--mid), var(--turquoise));
}

.p-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-l);
  background: var(--white);
}

.p-card.featured {
  background: var(--mid);
  border-color: var(--mid);
  box-shadow: 0 14px 48px rgba(69, 77, 161, 0.35);
}

.p-card.featured::before {
  background: linear-gradient(
    90deg,
    var(--turquoise),
    rgba(255, 255, 255, 0.4)
  );
}

.p-card.featured:hover {
  transform: translateY(-6px);
}

.p-pop {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--turquoise);
  background: rgba(33, 191, 207, 0.15);
  padding: 3px 10px;
  border-radius: 100px;
}

.p-tier {
  font-size: 10.5008px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 18px;
}

.p-card.featured .p-tier {
  color: rgba(255, 255, 255, 0.5);
}

.p-price {
  font-family: "Playfair Display", serif;
  font-size: 42px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.5008px;
  margin-bottom: 4px;
}

.p-card.featured .p-price {
  color: #fff;
}

.p-was {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.p-card.featured .p-was {
  color: rgba(255, 255, 255, 0.38);
}

.p-period {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.p-card.featured .p-period {
  color: rgba(255, 255, 255, 0.45);
}

.p-name {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}

.p-card.featured .p-name {
  color: #fff;
}

.p-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.6;
}

.p-card.featured .p-desc {
  color: rgba(255, 255, 255, 0.48);
}

.p-features {
  list-style: none;
  margin-bottom: 26px;
}

.p-features li {
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bd);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--body);
}

.p-card.featured .p-features li {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
}

.p-features li::before {
  content: "\2713";
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.p-features li:last-child {
  border-bottom: none;
}

.p-btn {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}

.pb-out {
  border: 1.5008px solid var(--bd-m);
  color: var(--mid);
}

.pb-out:hover {
  border-color: var(--mid);
  background: var(--mid-l);
}

.pb-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.27);
}

.pb-green:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

/* ─── PRICING ─── */
.pricing-section {
  background: var(--lavender);
}

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

.pricing-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pricing-card.featured {
  background: var(--midnight);
  border-color: var(--midnight);
  box-shadow: 0 12px 48px rgba(69, 77, 161, 0.35);
}

.pricing-card.featured:hover {
  transform: translateY(-6px);
}

.p-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquoise);
  background: rgba(33, 191, 207, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 24px;
}

.featured .p-badge {
  background: rgba(33, 191, 207, 0.2);
}

.p-price {
  font-family: "Playfair Display", serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--black);
}

.featured .p-price {
  color: #fff;
}

.p-period {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}

.featured .p-period {
  color: rgba(255, 255, 255, 0.5);
}

.p-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--black);
}

.featured .p-name {
  color: #fff;
}

.p-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

.featured .p-desc {
  color: rgba(255, 255, 255, 0.5);
}

.p-features {
  list-style: none;
  margin-bottom: 32px;
}

.p-features li {
  font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text);
}

.featured .p-features li {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.p-features li::before {
  content: "\2713";
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.p-features li:last-child {
  border-bottom: none;
}

.p-btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  font-size: 14.5008px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.p-btn-outline {
  border: 1.5008px solid var(--border);
  color: var(--midnight);
  background: #fff;
}

.p-btn-outline:hover {
  border-color: var(--midnight);
  background: var(--lavender);
}

.p-btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.p-btn-green:hover {
  background: #16a34a;
  transform: translateY(-1px);
}
.logo2 {
  width: 90px;
}

/* ─── TESTIMONIALS ─── */
.testimonials-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
  overflow: hidden;
  /* position: relative; */
}

.testi-marquee-wrap {
  margin-top: 64px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0;
}

.testi-row {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.testi-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 8px 14px;
  will-change: transform;
  backface-visibility: hidden;
  animation: none;
}

.testi-row .testi-track.testi-ready {
  animation-name: testi-scroll-left;
  animation-duration: var(--testi-duration, 70s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

.testi-row.reverse .testi-track.testi-ready {
  animation-name: testi-scroll-right;
}

.testi-row:hover .testi-track.testi-ready {
  animation-play-state: paused;
}

@keyframes testi-scroll-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes testi-scroll-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.testi-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 480px;
  min-height: 230px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(69, 77, 161, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 8px 24px -12px rgba(69, 77, 161, 0.12);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}

.testi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(69, 77, 161, 0.18);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.05),
    0 24px 48px -16px rgba(69, 77, 161, 0.22);
}

.testi-video {
  position: relative;
  width: 180px;
  flex-shrink: 0;
  background: #0f1024;
  overflow: hidden;
}

.testi-video video,
.testi-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.testi-card:hover .testi-video img {
  transform: scale(1.05);
}

.testi-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 50% 60%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.45) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.25) 100%);
  cursor: pointer;
}

.testi-video-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  letter-spacing: 0.2992px;
}

.testi-video-play::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}

.testi-card:hover .testi-video-play::before {
  transform: scale(1.08);
}

.testi-video-play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 16px solid var(--midnight);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 5px;
}

.testi-content {
  flex: 1;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  position: relative;
}

.testi-content::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: "Playfair Display", serif;
  font-size: 64px;
  line-height: 1;
  color: rgba(69, 77, 161, 0.08);
  font-weight: 600;
  pointer-events: none;
}

.stars {
  color: #f5b800;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 14px;
  display: inline-block;
}

.testi-quote {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1f2336;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.1008px;
}

.testi-quote strong {
  font-style: italic;
  font-weight: 600;
  color: var(--midnight);
  background: linear-gradient(
    180deg,
    transparent 65%,
    rgba(33, 191, 207, 0.18) 65%
  );
  padding: 0 2px;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(69, 77, 161, 0.08);
}

.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1.5008px var(--midnight),
    0 4px 10px rgba(69, 77, 161, 0.18);
}

.testi-name {
  font-size: 13.5008px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.1008px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.testi-name::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--turquoise);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2l2.6 2.1 3.3-.5.9 3.2 3.2.9-.5 3.3L23.6 12l-2.1 2.6.5 3.3-3.2.9-.9 3.2-3.3-.5L12 23.6l-2.6-2.1-3.3.5-.9-3.2-3.2-.9.5-3.3L.4 12l2.1-2.6-.5-3.3 3.2-.9.9-3.2 3.3.5L12 .4zm-1.2 14.4l6-6-1.4-1.4-4.6 4.6-2.2-2.2-1.4 1.4 3.6 3.6z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2l2.6 2.1 3.3-.5.9 3.2 3.2.9-.5 3.3L23.6 12l-2.1 2.6.5 3.3-3.2.9-.9 3.2-3.3-.5L12 23.6l-2.6-2.1-3.3.5-.9-3.2-3.2-.9.5-3.3L.4 12l2.1-2.6-.5-3.3 3.2-.9.9-3.2 3.3.5L12 .4zm-1.2 14.4l6-6-1.4-1.4-4.6 4.6-2.2-2.2-1.4 1.4 3.6 3.6z'/></svg>")
    center / contain no-repeat;
}

.testi-role {
  font-size: 11.5008px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.1008px;
}

/* ─── TRANSFORMATION ─── */
.transform-section {
  background: var(--lavender);
}

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

.transform-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.transform-row:hover {
  box-shadow: var(--shadow-md);
}

.transform-before,
.transform-after {
  padding: 18px 20px;
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.transform-before {
  color: var(--muted);
  border-right: 1px solid var(--border-light);
}

.transform-before::before {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ef4444;
  margin-bottom: 4px;
  content: "Before";
}

.transform-after {
  color: var(--text);
  font-weight: 500;
}

.transform-after::before {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
  content: "After";
}

.transform-arrow {
  padding: 0 10px;
  color: var(--muted);
  font-size: 16px;
  flex-shrink: 0;
}

/* ─── TRANSFORMATION (detailed) — transform-two-* only ─── */
.transform-two-section {
  position: relative;
  background: var(--lavender);
  overflow: hidden;
}

.transform-two-wrap {
  position: relative;
  z-index: 1;
  /* max-width: 960px; */
  /* margin: 0 auto; */
}

.transform-two-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.transform-two-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.2992px;
  margin-bottom: 14px;
  color: var(--black);
}

.transform-two-title em {
  font-style: italic;
  color: var(--midnight);
}

.transform-two-intro {
  font-size: 17px;
  font-weight: 400;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.transform-two-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.transform-two-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.transform-two-row:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(69, 77, 161, 0.2);
  transform: translateY(-2px);
}

.transform-two-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    165deg,
    var(--mid-d) 0%,
    var(--mid) 48%,
    var(--midnight-light) 100%
  );
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.transform-two-num {
  opacity: 0.95;
}

.transform-two-main {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.transform-two-before,
.transform-two-after {
  padding: 18px 20px;
  flex: 1;
  font-size: 15px;
  line-height: 1.55;
  min-width: 0;
}

.transform-two-before {
  color: var(--muted);
  /* border-right: 1px solid var(--border-light); */
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.07) 0%,
    rgba(255, 255, 255, 0.65) 55%,
    #fff 100%
  );
}

.transform-two-before::before {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ef4444;
  margin-bottom: 6px;
  content: "Before";
}

.transform-two-after {
  color: var(--text);
  font-weight: 500;
  background: linear-gradient(
    225deg,
    rgba(34, 197, 94, 0.09) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    #fff 100%
  );
}

.transform-two-after::before {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
  content: "After";
}

.transform-two-arrow {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  margin: 0 2px;
  color: var(--mid);
  font-size: 14px;
}

.transform-two-arrow i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    rgba(69, 77, 161, 0.12) 0%,
    rgba(33, 191, 207, 0.1) 100%
  );
  border: 1px solid rgba(69, 77, 161, 0.14);
  box-shadow: 0 2px 8px rgba(69, 77, 161, 0.1);
}

.transform-two-foot {
  margin-top: 32px;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  border-left: 4px solid var(--mid);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.transform-two-foot-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}

@media (max-width: 720px) {
  .transform-two-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .transform-two-rail {
    justify-content: flex-start;
    padding: 10px 16px;
    min-height: 0;
  }

  .transform-two-main {
    flex-direction: column;
  }

  .transform-two-before {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .transform-two-arrow {
    margin: 4px auto 8px;
    order: 2;
  }

  .transform-two-arrow i {
    transform: rotate(90deg);
  }

  .transform-two-after {
    order: 3;
  }
}

/* ─── FAQ ─── */
.faq-section {
  position: relative;
  background:
    radial-gradient(
      1100px 520px at 50% -10%,
      rgba(168, 184, 255, 0.55),
      transparent 60%
    ),
    radial-gradient(
      800px 400px at 10% 110%,
      rgba(196, 208, 255, 0.45),
      transparent 60%
    ),
    linear-gradient(180deg, #eef2ff 0%, #e6ecff 50%, #dde4ff 100%);
  overflow: hidden;
}

.faq-section::before,
.faq-section::after {
  content: "";
  position: absolute;
  top: -10%;
  width: 60%;
  height: 120%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  );
  transform: skewX(-18deg);
  pointer-events: none;
  filter: blur(2px);
}

.faq-section::before {
  left: -10%;
}

.faq-section::after {
  right: -10%;
  transform: skewX(18deg);
}

.faq-section > .container {
  position: relative;
  z-index: 1;
}

.faq-wrap {
  /* max-width: 1050px; */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid rgba(69, 77, 161, 0.12);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 22px -16px rgba(15, 18, 60, 0.25);
  padding: 0 22px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  height: fit-content;
}

.faq-item:hover {
  border-color: rgba(69, 77, 161, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 30px -18px rgba(15, 18, 60, 0.35);
}

.faq-item.open {
  border-color: rgba(69, 77, 161, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 36px -18px rgba(69, 77, 161, 0.3);
}

.faq-q {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15.5008px;
  font-weight: 600;
  color: var(--black);
  font-family: "Inter", sans-serif;
  transition: color 0.2s;
}

.faq-q:hover {
  color: var(--midnight);
}

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5008px solid rgba(69, 77, 161, 0.25);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--midnight);
  transition: all 0.3s;
  line-height: 0.9;
}

.faq-item.open .faq-icon {
  background: var(--midnight);
  color: #fff;
  border-color: var(--midnight);
  transform: rotate(45deg);
}

.faq-item.open .faq-q {
  color: var(--midnight);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 14.5008px;
  color: #4a4d6b;
  line-height: 1.75;
  transition:
    max-height 0.4s ease,
    padding 0.3s;
}

.faq-item.open .faq-a {
  max-height: 320px;
  padding-bottom: 22px;
}

/* ─── CTA SECTION ─── */
.cta-section {
  background: linear-gradient(
    135deg,
    var(--midnight) 0%,
    #363d8a 60%,
    #2d3474 100%
  );
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(33, 191, 207, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cta-section::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* 
.cta-left .section-label {
  color: rgba(255, 255, 255, 0.4);
} */

.cta-left h2 {
  color: #fff;
}

.cta-left h2 em {
  color: var(--turquoise);
}

.cta-left p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  margin-bottom: 36px;
}

.cta-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cta-meta-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 10px 28px -14px rgba(8, 10, 40, 0.55),
    0 2px 6px rgba(8, 10, 40, 0.18);
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.cta-meta-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--turquoise), var(--midnight));
  opacity: 0.9;
}

.cta-meta-row:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -16px rgba(8, 10, 40, 0.65),
    0 4px 10px rgba(8, 10, 40, 0.22);
}

.cta-meta-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-soft), #ffffff);
  border: 1px solid rgba(33, 191, 207, 0.25);
  color: var(--midnight);
  box-shadow:
    0 4px 10px -4px rgba(33, 191, 207, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.cta-meta-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cta-meta-row.is-format .cta-meta-icon {
  background: linear-gradient(135deg, #fff, #f2f2fb);
  border-color: rgba(69, 77, 161, 0.25);
  color: var(--midnight);
  box-shadow:
    0 4px 10px -4px rgba(69, 77, 161, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.cta-meta-row.is-outcome .cta-meta-icon {
  background: linear-gradient(135deg, #ecfdf3, #ffffff);
  border-color: rgba(34, 197, 94, 0.3);
  color: #15803d;
  box-shadow:
    0 4px 10px -4px rgba(34, 197, 94, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.cta-meta-label {
  font-size: 10.5008px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 3px;
}

.cta-meta-value {
  font-size: 14.5008px;
  color: var(--black);
  font-weight: 600;
  line-height: 1.35;
}

.cta-form {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.cta-form-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 6px;
}

.cta-form-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 12.5008px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.03em;
}

.form-group input,
.form-group select {
  background: var(--lavender);
  border: 1.5008px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--black);
  font-family: "Inter", sans-serif;
  outline: none;
  width: 100%;
  transition:
    border-color 0.2s,
    background 0.2s;
  appearance: none;
}

.form-group input::placeholder {
  color: #b0b0c0;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--midnight);
  background: #fff;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-submit {
  width: 100%;
  background: var(--midnight);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(69, 77, 161, 0.3);
  letter-spacing: 0.01em;
  margin-top: 8px;
}
.form-submit:hover {
  background: var(--midnight-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(69, 77, 161, 0.38);
}

.form-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}

/* ─── FOOTER ─── */
footer {
  background: var(--black);
  padding: 56px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 32px;
}

.footer-brand-name {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}

.footer-brand-name span {
  color: var(--turquoise);
}

.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  max-width: 220px;
  line-height: 1.6;
}

.footer-links-group h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}

.footer-links-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-group a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links-group a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-size: 13px;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ─── RESPONSIVE ─── */

/* ─── NAV BEAUTIFY ─── */
nav::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(33, 191, 207, 0.5),
    rgba(69, 77, 161, 0) 40%,
    rgba(69, 77, 161, 0.4)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
  pointer-events: none;
}

.nav-logo::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--turquoise),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-logo:hover::after {
  opacity: 0.6;
}

/* ─── HERO QUIZ ─── */
.quiz-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(69, 77, 161, 0.1);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(69, 77, 161, 0.15);
  /* theme turquoise border, soft tint glow */
  /* border: 1.5008px solid #36a2ad; */
  padding: 32px 32px 26px;
  /* box-shadow:
        0 0 0 5px rgba(33, 191, 207, .12),
        0 20px 50px -20px rgba(33, 191, 207, .25),
        var(--shadow-lg); */
  animation: fadeUp 0.6s 0.3s ease both;
}

.quiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 14px;
}

.quiz-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(33, 191, 207, 0.18);
  animation: pulse 2s infinite;
}

.quiz-question {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.quiz-card.fading .quiz-question,
.quiz-card.fading .quiz-options {
  opacity: 0;
  transform: translateY(6px);
}

.quiz-progress-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.section-label.reveal.reveal01.visible {
  color: #21bfcf !important;
}

.quiz-progress-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.quiz-progress-track {
  width: 100%;
  max-width: 240px;
  height: 4px;
  border-radius: 100px;
  background: rgba(69, 77, 161, 0.1);
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  width: 11.1%;
  background: linear-gradient(
    135deg,
    var(--midnight) 0%,
    var(--turquoise) 100%
  );
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* margin-bottom: 14px; */
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  /* keep border thickness constant (1px) across states to avoid layout jitter */
  background: #f2f2fb;
  border: 1px solid rgba(69, 77, 161, 0.07);
  font-size: 12px;
  color: #7b7b96;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  min-height: 52px;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
  will-change: background-color, border-color, color;
}

.quiz-option:hover {
  background: #eaeaf8;
  border-color: #d6d9e6;
  color: var(--text);
}

.quiz-option.selected {
  border-color: #0fdac2;
  background: #f4f5fa;
  color: #5f657e;
  /* keep font-weight same as default to prevent text-width jitter */
}

/* ── Single-select: hollow ring → filled dot ── */
.quiz-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5008px solid #c4c7d6;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.quiz-option:hover .quiz-check {
  border-color: #9ea3bd;
}

.quiz-option.selected .quiz-check {
  border-color: var(--midnight);
  background: #fff;
}

.quiz-option.selected .quiz-check::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--midnight);
}

/* ── Multi-select: rounded square checkbox ── */
.quiz-option[data-select="multi"] .quiz-check {
  border-radius: 6px;
}

.quiz-option[data-select="multi"].selected .quiz-check {
  background: #0fdac2;
  border-color: #0fdac2;
}

.quiz-option[data-select="multi"].selected .quiz-check::before {
  content: "";
  width: 11px;
  height: 6px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  border-radius: 1px;
  background: transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

.quiz-input {
  grid-column: 1 / -1;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5008px solid var(--border);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  transition: all 0.2s ease;
}

.quiz-input:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(33, 191, 207, 0.15);
}

.quiz-error {
  font-size: 12px;
  color: #dc2626;
  min-height: 16px;
  line-height: 20px;
  margin-bottom: 6px;
}

.quiz-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.quiz-back,
.quiz-next {
  font: inherit;
  font-size: 13.5008px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.quiz-back {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.quiz-back:not(:disabled):hover {
  color: var(--midnight);
  border-color: var(--midnight);
}

.quiz-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quiz-next {
  background: linear-gradient(135deg, var(--midnight), var(--turquoise));
  color: #fff;
  box-shadow: 0 4px 16px rgba(33, 191, 207, 0.3);
}

.quiz-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(33, 191, 207, 0.4);
}

.quiz-foot {
  text-align: center;
  font-size: 11.5008px;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.quiz-done {
  text-align: center;
  padding: 18px 4px 8px;
}

.quiz-done-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--turquoise), var(--midnight));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(33, 191, 207, 0.35);
}

.quiz-done h4 {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 8px;
}

.quiz-done p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}

/* ─── FOOTER BEAUTIFY ─── */
footer {
  background: #000;
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.45);
}

footer::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(33, 191, 207, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(33, 191, 207, 0.4),
    rgba(69, 77, 161, 0.4),
    transparent
  );
}

.footer-inner {
  position: relative;
  z-index: 1;
}

.footer-brand-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.5008px;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.5);
  max-width: 260px;
  margin-top: 14px;
}

.footer-newsletter {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  /* max-width: 320px; */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px;
  border-radius: 14px;
}

.footer-newsletter input {
  flex: 1;
  padding: 11px 16px;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 13px;
  transition: all 0.2s;
}

.footer-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.footer-newsletter input:focus {
  outline: none;
  border-color: rgba(33, 191, 207, 0.6);
  background: transparent;
}

.footer-newsletter button {
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--midnight), var(--turquoise));
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(33, 191, 207, 0.3);
  transition: all 0.2s;
}

.footer-newsletter button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(33, 191, 207, 0.45);
}

.footer-links-group h4 {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 34px;
}

.footer-links-group a {
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  padding-left: 0;
  transition: all 0.2s;
}

.footer-links-group a:hover {
  color: #fff;
  padding-left: 6px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: all 0.25s ease;
  text-decoration: none;
}

.footer-social a.insta {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-social a.insta:hover .instagram1 {
  color: #fff;
}
.youtube {
  color: #f71e38;
}

.pinterest {
  color: #e60023;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.4);
}

.title1,
.subtitle1,
.text1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.problem-section1 {
  background: #f2f2fb;
}

.reveal2 {
  text-align: center;
}

.lineinfo {
  background: linear-gradient(
    135deg,
    var(--turquoise) 0%,
    var(--midnight) 100%
  );
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  color: #fff;
}

/* form card */
.form-card {
  background: #fff;
  border-radius: 10px;
  padding: 34px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.form-card-h {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.form-card-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}

.fg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.fg label {
  font-size: 11px;
  font-weight: 800;
  color: var(--body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fg input,
.fg select {
  background: var(--lav);
  border: 1.5008px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14.5008px;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  outline: none;
  width: 100%;
  transition:
    border-color 0.2s,
    background 0.2s;
  appearance: none;
}

.fg input::placeholder {
  color: #b0b0c4;
}

.fg input:focus,
.fg select:focus {
  border-color: var(--midnight);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(69, 77, 161, 0.07);
}

.fg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-q-label {
  font-size: 12.5008px;
  font-weight: 700;
  color: var(--body);
  margin-bottom: 8px;
  margin-top: 6px;
}

.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 14px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid rgba(69, 77, 161, 0.07);
  background: #f2f2fb;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.17s;
  font-size: 12.5008px;
  color: var(--body);
}

.opt:hover {
  background: #eef0f8;
  border-color: #d6d9e6;
}

.opt.active {
  border-color: #0fdac2;
  background: #f4f5fa;
  color: #5f657e;
}
.opt input[type="radio"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #b5b5c8 !important;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.opt input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #0fdac2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.opt.sel {
  border-color: var(--midnight);
  background: rgba(69, 77, 161, 0.07);
  color: var(--midnight);
  font-weight: 600;
}

.opt input {
  accent-color: #0ab19d;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  outline: none;
  border: 1.5px solid #0ab19d;
  color: #0ab19d;
}

.opt input:checked {
  border-color: #0ab19d;
  background-color: #0ab19d;
}

.opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #0ab19d;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  padding: 0;
}

.opt input[type="checkbox"]:checked {
  background: #0ab19d;
  border-color: #0ab19d;
}

.opt input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #0ab19d;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  padding: 0;
}

.opt input[type="radio"]:checked {
  background: #fff;
  border-color: #0ab19d;
}

.opt input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #0ab19d;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.opt-full {
  grid-column: span 2;
}

.fdivider {
  height: 1px;
  background: var(--border);
  margin: 12px 0 18px;
}

/* .form-submit{
  width:100%;background:var(--midnight);color:#fff;
  border:none;padding:14px;border-radius:9px;
  font-size:15px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all .2s;
  box-shadow:0 4px 18px rgba(69,77,161,.3);letter-spacing:.01em;
  margin-top:8px;
} */
/* .form-submit:hover{background:var(--midnight-d);transform:translateY(-2px);box-shadow:0 8px 28px rgba(69,77,161,.38);} */
.form-follow {
  display: block;
  text-align: center;
  margin-top: 13px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.form-follow:hover {
  color: var(--midnight);
}

.form-note {
  font-size: 11.5008px;
  color: var(--muted);
  text-align: center;
  margin-top: 9px;
  line-height: 1.5;
}

.purple-form {
  background: var(--mid);
  color: #fff;
}

.purple-form .form-submit {
  background: var(--green);
  color: var(--white);
}

.purple-form .form-follow:hover,
.purple-form .fg label,
.purple-form .form-q-label,
.purple-form .form-card-h {
  color: var(--white);
}

/* ── HERO STRIP ── */
.hero-strip {
  background: var(--ink);
  margin: 0 -56px;
  padding: 18px 56px;
}

.hs-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.hs-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-stat:first-child {
  padding-left: 0;
}

.hs-stat:last-child {
  border-right: none;
}

.hs-num {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 600;
  color: #21bfcf;
  line-height: 1;
}

.hs-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

/* ══════════════════════════════
   HOW IT WORKS
══════════════════════════════ */
.hiw-sec {
  background: #fff;
}

.hiw-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.steps-row::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bd-m) 10%,
    var(--bd-m) 90%,
    transparent
  );
}

.step {
  padding: 0 16px;
  position: relative;
}

.step-n {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--white);
  border: 1.5008px solid var(--bd-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  box-shadow: var(--sh-s);
  transition: all 0.22s;
}

.step:hover .step-n {
  background: var(--mid);
  color: #fff;
  border-color: var(--mid);
}

.step h3 {
  font-size: 14.5008px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

.step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.step-tag {
  margin-top: 10px;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--teal-l);
  padding: 3px 10px;
  border-radius: 100px;
}

.chip {
  font-size: 11.5008px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 14px;
  font-style: normal;
}

.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
}

.sec-sub.r {
  margin-bottom: 52px;
}

.form-step-2 {
  display: none;
}

.form-step-2.active {
  display: block;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.quiz-progress-row-2 {
  margin-bottom: 28px;
  text-align: center;
}

.quiz-progress-label-2 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #73789a;
  margin-bottom: 10px;
  text-align: left;
}

.quiz-progress-track-2 {
  width: 240px;
  height: 4px;
  margin: 0 auto;
  background: #e5e7f0;
  border-radius: 999px;
  overflow: hidden;
  margin-left: 0rem;
}

.quiz-progress-fill-2 {
  width: 33.33%;
  height: 100%;
  background: linear-gradient(90deg, #3258b8, #22c7d8);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.hero-float {
  position: absolute;
  top: -16px;
  right: -16px;
  background: #fff;
  border: 1px solid rgba(69, 77, 161, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(69, 77, 161, 0.12);
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  white-space: nowrap;
}

.hero-float span {
  color: #22c55e;
  font-weight: 600;
}

.btn-ghost {
  color: #7b7b96;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px dashed rgba(69, 77, 161, 0.17);
  padding-bottom: 1px;
  transition: color 0.2s;
}

.form-scarcity {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  /* padding: 15px 18px; */
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 15px;
}

.fs-text {
  font-size: 11px;
  color: #000;
  white-space: nowrap;
}

.fs-text strong {
  color: #000;
}

.fs-bar {
  flex: 1;
}

.fs-track {
  height: 5px;
  background: rgb(242 242 251);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 4px;
}

.fs-fill {
  height: 100%;
  width: 48%;
  background: linear-gradient(
    135deg,
    var(--midnight) 0%,
    var(--turquoise) 100%
  );
  border-radius: 100px;
}

.fs-note {
  font-size: 11px;
  color: #424141;
  text-align: left;
  margin-bottom: 12px;
}
.green1 {
  color: #22c55e;
  font-size: 16px;
  font-weight: 600;
}
.wrong {
  width: 14px;
  height: 14px;
}
.wrong1 {
  color: #ef4444;
  font-size: 16px;
  font-weight: 600;
}

.quiz-input1 {
  background: var(--lav);
  border: 1.5008px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14.5008px;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition:
    border-color 0.2s,
    background 0.2s;
  width: 100%;
}

.nl-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26, 26, 46, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.nl-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nl-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border-radius: 20px;
  padding: 48px 40px 36px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.nl-overlay.open .nl-modal {
  transform: translateY(0) scale(1);
}

.nl-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--midnight), var(--turquoise));
}

.nl-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--lavender);
  color: var(--midnight);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.nl-close:hover {
  background: var(--lavender-mid);
  transform: rotate(90deg);
}

.nl-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 14px;
}

.nl-title {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--midnight);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.nl-title em {
  font-style: italic;
  color: var(--turquoise);
  font-weight: 400;
}

.nl-subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

.nl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nl-input {
  width: 100%;
  height: 46px;
  padding: 14px 18px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: all 0.2s;
}

.nl-input:focus {
  border-color: var(--midnight);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(69, 77, 161, 0.08);
}

.nl-button {
  width: 100%;
  padding: 14px 22px;
  background: var(--midnight);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(69, 77, 161, 0.3);
}

.nl-button:hover {
  background: var(--midnight-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(69, 77, 161, 0.35);
}

.nl-divider {
  margin: 28px 0 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.nl-divider::before,
.nl-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.nl-socials {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.nl-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  text-decoration: none;
}
/* 
    .nl-socials a:hover {
      background: var(--midnight);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(69, 77, 161, 0.3);
    } */

.nl-socials svg {
  width: 17px;
  height: 17px;
}

.nl-success {
  display: none;
  padding: 20px 0 8px;
}

.nl-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.nl-success-text {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  color: var(--midnight);
  margin-bottom: 6px;
}

.nl-success-sub {
  font-size: 14px;
  color: var(--muted);
}

.hsize {
  font-size: 40px;
}

/* trap */
.trap-wrap {
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  /* gap: 24px; */
}

.trap-col {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  width: 50%;
}

.trap-dif {
  background: var(--midnight);
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.trap-col:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.trap-col:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.trap-col.bad {
  border-top: 3px solid #ef4444;
}

.trap-col.good {
  border-top: 3px solid var(--green);
}

.trap-col-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trap-col.bad .trap-col-head {
  color: #ef4444;
}

.trap-col.good .trap-col-head {
  color: #16a34a;
}

/* .trap-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border-light);
  font-size: 14.5px; color: #444; font-weight: 400;
  transition: color 0.15s;
} */
.trap-row:hover {
  color: var(--black);
}

.trap-row:last-child {
  border-bottom: none;
}

.trap-row-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 3px;
}

.fails-section {
  background: var(--white);
}

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

.fail-card {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 28px 24px;
  background: #fff;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}

.fail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border);
  transition: background 0.3s;
}

.fail-card:hover::before {
  background: linear-gradient(90deg, var(--midnight), var(--turquoise));
}

.fail-card:hover {
  transform: translateY(-3px);
}

.fail-type {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--midnight);
  margin-bottom: 8px;
}

.fail-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.fail-cost {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #e53e3e;
}

.fail-highlight {
  background-color: var(--lavender);
  border: 0;
  border: 1px dashed rgba(69, 77, 161, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* .fail-highlight::after {
  display: block;
  content: "";
  position: absolute;
  background: url("../images/highlight.jpeg") center center;
  background-size: cover;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.1;
  filter: grayscale(1);
} */

.fail-highlight p {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  color: #fff;
  color: var(--midnight);
  font-style: italic;
  font-weight: 500;
}

.mt-3 {
  margin-top: 12px;
}

.form-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.form-perk i {
  font-size: 16px;
  color: var(--mid);
}

/* CTA “Claim founding spot” perks: icons on soft rounded tile (sample ref) */
.cta-section .form-perk > i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 15px;
  line-height: 1;
  color: var(--midnight);
  background: #eef2ff;
  border-radius: 10px;
}

.cta-section .form-perks > .form-perk:first-child > i {
  background: #e5ffee;
}

.cta-section .form-perks > .form-perk:last-child > i {
  background: #e8f4f8;
}

.form-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 13.5px;
  color: #000;
  overflow: hidden;
}
.form-perk:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--turquoise);
  transition: background 0.3s;
}
.facebook {
  color: #007cf7;
}
.linkedin {
  color: #0b63bd;
}
.instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.xtwitter {
  color: #000;
}
.fxtwitter {
  color: #fff;
}

.portfolio-section {
  padding: 96px 0 112px;
  padding-top: 0px;
  background: var(--lavender);
  overflow: hidden;
}

.portfolio-section .container {
  margin-bottom: 48px;
}

.portfolio-rows {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.portfolio-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.portfolio-track {
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}

.portfolio-row.left .portfolio-track,
.portfolio-row.right .portfolio-track {
  animation: none;
}

.portfolio-row.left .portfolio-track.pf-ready {
  animation-name: portfolio-scroll-left;
  animation-duration: var(--pf-duration, 80s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

.portfolio-row.right .portfolio-track.pf-ready {
  animation-name: portfolio-scroll-right;
  animation-duration: var(--pf-duration, 80s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

.portfolio-row:hover .portfolio-track.pf-ready {
  animation-play-state: paused;
}

.cf-icon {
  font-size: 18px;
  flex-shrink: 0;
}

@keyframes portfolio-scroll-left {
  from {
    transform: translateX(0);
  }

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

@keyframes portfolio-scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.portfolio-card {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(69, 77, 161, 0.08);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 10px 28px -14px rgba(69, 77, 161, 0.18);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    opacity 0.3s ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 6px rgba(17, 24, 39, 0.06),
    0 22px 48px -18px rgba(69, 77, 161, 0.32);
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-card:hover img {
  transform: scale(1.06);
}

.portfolio-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(26, 26, 46, 0.78) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.portfolio-card:hover::after {
  opacity: 1;
}

.portfolio-meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: #fff;
  transform: translateY(8px);
  opacity: 0;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  z-index: 2;
}

.portfolio-card:hover .portfolio-meta {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-meta .pf-tag {
  display: inline-block;
  font-size: 10.5008px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 6px;
}

.portfolio-meta .pf-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.pf-lightbox[hidden] {
  display: none !important;
}

.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 24px;
  background: rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(6px);
}

.pf-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pf-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.pf-lightbox__inner {
  max-width: min(92vw, 1100px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pf-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.pf-lightbox.is-scrollable {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pf-lightbox.is-scrollable .pf-lightbox__inner {
  max-height: none;
  justify-content: flex-start;
  margin: 0 auto;
}

.pf-lightbox__img.pf-lightbox__img--full {
  max-height: none;
  width: min(92vw, 1100px);
  height: auto;
}

.pf-lightbox__gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(92vw, 1100px);
}

.pf-lightbox__gallery .pf-lightbox__img {
  margin: 0 auto;
}

.pf-lightbox__caption {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  max-width: 640px;
}

.portfolio-tabs {
  margin: 34px auto 40px;
  padding: 4px;
  border-radius: 12px;
  background: #e8e8f6;
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  text-align: center;
  border: 1px solid #d9daef;
}

.portfolio-tab {
  border: 0;
  background: transparent;
  color: #7878a0;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.25s ease;
  white-space: nowrap;
}

.portfolio-tab.active {
  background: #fff;
  color: #454da1;
}

@media (min-width: 769px) {
  .page-logo-design .portfolio-tabs.portfolio-tabs--index,
  .brand-identity-page .portfolio-tabs.portfolio-tabs--index {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    gap: 4px;
  }

  .page-logo-design .portfolio-tabs.portfolio-tabs--index .portfolio-tab,
  .brand-identity-page .portfolio-tabs.portfolio-tabs--index .portfolio-tab {
    flex: 0 0 auto;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
  }
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.next-btn,
.back-btn {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

/* ══════════════════
   HERO-growth
══════════════════ */
.hero-growth {
  padding: 140px 56px 80px;
  background: linear-gradient(160deg, #fff 0%, #f6f6fd 50%, #ecf3fa 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero-growth::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(33, 191, 207, 0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.hero-growth-inner {
  max-width: 740px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-growth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(69, 77, 161, 0.07);
  border: 1px solid rgba(69, 77, 161, 0.15);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  animation: up 0.5s ease both;
}
.hero-growth-badge .star {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mid), var(--turquoise));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
}

.hero-growth h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 20px;
  animation: up 0.5s 0.08s ease both;
}
.hero-growth h1 em {
  font-style: italic;
  color: var(--mid);
}
.hero-growth h1 .accent {
  color: var(--green);
}

.hero-growth-sub {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.hero-growth-btn,
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-growth-btn svg,
.cta-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero-growth-note {
  font-size: 13px;
  color: var(--muted);
  animation: up 0.5s 0.28s ease both;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hero-growth-note::before {
  content: "🔒";
  font-size: 12px;
}

/* about.html — no hero: keep footer below fixed nav */
body.page-about > footer {
  padding-top: clamp(100px, 22vw, 140px);
}
.about-banner-client-image
{
  position: relative;
  width:100%
}
.about-banner-client-image img
{
  max-width: 60px;
  height:60px;
  border-radius: 100px;
}

/* ══════════════════
   UNCOMFORTABLE TRUTH
══════════════════ */
.truth-sec {
  background: var(--lav);
}
.truth-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.truth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.glue-box {
  background: var(--mid);
  color: #fff;
  border-radius: 16px;
  padding: 28px 30px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}
.glue-box::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(33, 191, 207, 0.15);
  pointer-events: none;
}
.glue-box-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}
.glue-box h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.2;
}
.glue-box p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: 16px;
}
.glue-box .verdict {
  font-size: 14px;
  font-weight: 600;
  color: var(--mid);
  display: flex;
  /* display: flex;
  align-items: flex-start; */
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.5;
}
.glue-box .verdict::before {
  content: "→";
  color: var(--mid);
  flex-shrink: 0;
}

.glue-box .verdict > span {
  flex: 1;
}

/* right side — roles list */
.roles-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.role-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--sh-s);
  transition: all 0.22s;
  cursor: default;
}
.role-item:hover {
  transform: translateX(5px);
  box-shadow: var(--sh-m);
  border-color: var(--bd-m);
}
.role-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.svc-icon
{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.role-icon2 svg
{
  display: block;
  margin: auto;
  width:25px;
  height:25px;
}

.role-icon3 svg
{
  width:25px;
  height:25px;
}

.role-icon3 svg
{
  filter: brightness(0) saturate(100%) invert(33%) sepia(18%) saturate(2197%) hue-rotate(198deg) brightness(93%) contrast(92%);
}
.role-icon2 svg *
{
  stroke-width: 2.05;
}
.role-icon3 svg *
{
  stroke-width: 2.05;
}

.si3
{
  width:36px;
  height:36px;
  background: #d8f5e7;
}

.ri-red {
  /* background: rgba(239, 68, 68, 0.08); */
  background: var(--lavender);
}
.ri-amber {
  /* background: rgba(245, 158, 11, 0.08); */
  background: #e5ffee;
}
.ri-blue {
  background: rgba(69, 77, 161, 0.08);
}
.ri-purple {
  /* background: rgba(139, 92, 246, 0.08); */
  background: #e5ffee;
}
.ri-teal {
  /* background: rgba(33, 191, 207, 0.08); */
  background: rgba(69, 77, 161, 0.08);
}
.ri-green {
  background: rgba(34, 197, 94, 0.08);
}
.role-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.role-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.role-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.rb-you {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.rb-os {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

/* ══════════════════
   HOW IT WORKS TOGETHER
══════════════════ */
.hiw-sec {
  background: var(--white);
}
.hiw-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hiw-inner.hiw-diagram-header {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 8px;
}
.hiw-diagram-eyebrow {
  margin: 0 auto 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquoise);
}
.hiw-diagram-header h2 {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}
.hiw-diagram-intro {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 75px !important;
}
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}
.hiw-card-area {
  display: flex;
  flex-direction: column;
}
.hiw-card {
  background: var(--lav);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 28px 22px;
  position: relative;
  transition: all 0.25s;
  overflow: hidden;
  flex: 1;
}
.hiw-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mid), var(--turquoise));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.hiw-card:hover::after {
  transform: scaleX(1);
}
.hiw-card:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
}
.hiw-step {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hiw-step::before {
  content: attr(data-n);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--turquoise);
}
.hiw-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.hiw-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}
.hiw-connector {
  position: absolute;
  top: 50%;
  left: calc(100% - 2px);
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  /* border-radius: 50%;
        background: #fff; */
  /* border: 1.5px solid var(--bd-m); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--mid);
  font-weight: 700;
  /* box-shadow: var(--sh-s); */
}

.hiw-connector > svg {
  height: 16px;
}

/* ── Growth OS: full growth-system diagram (scoped .growth-sys-diagram / gsd-*) ── */
.growth-sys-diagram-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}
.growth-sys-diagram .gsd-diagram-scroll {
  width: 100%;
}
.growth-sys-diagram .gsd-diagram-scroll::-webkit-scrollbar {
  height: 10px;
}
.growth-sys-diagram .gsd-diagram-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 5px;
}
.growth-sys-diagram .gsd-outer {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.growth-sys-diagram .gsd-diagram-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0;
  width: max-content;
  margin-inline: auto;
}
.growth-sys-diagram .gsd-you-card {
  margin-right:12px;
  width: 150px;
  min-width: 150px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 20px 14px 16px;
  box-shadow: 0 2px 16px rgba(30, 64, 175, 0.08);
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}
.growth-sys-diagram .gsd-you-avatar {
  width: 50px;
  height: 50px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 11px;
}
.growth-sys-diagram .gsd-you-avatar svg {
  width: 25px;
  height: 25px;
  fill: #3b82f6;
}
.growth-sys-diagram .gsd-you-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.growth-sys-diagram .gsd-you-role {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 1.35;
}
.growth-sys-diagram .gsd-you-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}
.growth-sys-diagram .gsd-arrow-btn {
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #2563eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(37, 99, 235, 0.45);
  margin: 0 -4px;
  z-index: 40;
  flex-shrink: 0;
  top: 0;
  left: -7px;
  transform: translateX(50%);
  z-index: 1;
}

.growth-sys-diagram .gsd-arrow-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 47%;
  transform: translate(-50%, -50%);
  border-top: 1px dashed #2563eb;
  width: 188%;
  z-index: -1;
}
.growth-sys-diagram .gsd-arrow-btn svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.growth-sys-diagram .gsd-circle-stage {
  position: relative;
  width: 687px;
  min-width: 629px;
  height: 536px;
  flex-shrink: 0;
}

.gsd-circle-stage > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92.5%;
  flex-shrink: 0;
  z-index: 1;
}

.growth-sys-diagram .gsd-bg-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  height: 78%;
  pointer-events: none;
  z-index: 1;
}
.growth-sys-diagram .gsd-inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 264px;
  height: 264px;
  border-radius: 50%;
  background: transparent;
  border: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.growth-sys-diagram .gsd-center-content {
  text-align: center;
  padding: 0 14px;
  z-index: 1;
}
.growth-sys-diagram .gsd-center-refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}
.growth-sys-diagram .gsd-center-refresh-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.growth-sys-diagram .gsd-center-content h3 {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif !important;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a !important;
  line-height: 1.3;
  margin-bottom: 7px;
}
.growth-sys-diagram .gsd-center-content p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  color: #475569 !important;
  line-height: 1.65;
  margin: 0;
}
.growth-sys-diagram .gsd-step-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 20px 14px 12px;
  box-shadow:
    0 3px 18px rgba(69, 77, 161, 0.09),
    0 1px 4px rgba(30, 64, 175, 0.05);
  z-index: 20;
  overflow: visible;
}
/* Count badge: top-center, half above card (matches reference) */
.growth-sys-diagram .gsd-step-card > .gsd-nbadge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  background: var(--gsd-accent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid #fff;
}
.growth-sys-diagram .gsd-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.growth-sys-diagram .gsd-step-card .gsd-card-ico {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gsd-accent-soft);
  color: var(--gsd-accent);
}
.growth-sys-diagram .gsd-card-ico svg {
  width: 17px;
  height: 17px;
}
.growth-sys-diagram .gsd-card-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #010101;
  line-height: 1.35;
  padding-top: 2px;
}
.growth-sys-diagram ul.gsd-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.growth-sys-diagram ul.gsd-card-list > li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 10.5px;
  color: var(--ink);
  padding: 3px 0;
  line-height: 1.45;
  font-weight: 500;
}
.growth-sys-diagram .gsd-step-card ul.gsd-card-list > li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background: var(--gsd-accent);
}
.growth-sys-diagram .gsd-card-01 {
  --gsd-accent: #3c49f3;
  --gsd-accent-soft: #eaecfd;
  top: -20px;
  left: 50.6%;
  transform: translateX(-50%);
}
.growth-sys-diagram .gsd-card-02 {
  --gsd-accent: #2facd3;
  --gsd-accent-soft: #e5f8fc;
  top: 88px;
  right: -22px;
}
.growth-sys-diagram .gsd-card-03 {
  --gsd-accent: #21aea4;
  --gsd-accent-soft: #e4f9f7;
  bottom: -9px;
  right: 69px;
}
.growth-sys-diagram .gsd-card-04 {
  --gsd-accent: #5da64e;
  --gsd-accent-soft: #eef6ed;
  bottom: 10px;
  left: 55px;
}
.growth-sys-diagram .gsd-card-05 {
  --gsd-accent: #5d37d5;
  --gsd-accent-soft: #eee9fb;
  top: 83px;
  left: -7px;
}
.growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-01,
.growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-02,
.growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-04,
.growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-05 {
  width: 187px;
}
.growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-03 {
  width: 200px;
}
.growth-sys-diagram .gsd-dashed-conn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0 0 -17px;
  z-index: 1;
  position: relative;
}
.growth-sys-diagram .gsd-dash-seg {
  width: 8px;
  height: 0;
  border-top: 2px dashed #94a3b8;
  margin: 0 1px;
}
.growth-sys-diagram .gsd-dash-head {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #94a3b8;
  margin-left: 2px;
}
.growth-sys-diagram .gsd-result-card {
  width: 160px;
  min-width: 160px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 20px 14px 16px;
  box-shadow: 0 2px 16px rgba(30, 64, 175, 0.08);
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  margin-left:9px;
}
.growth-sys-diagram .gsd-result-ico {
  width: 50px;
  height: 50px;
  background: #f0fdf4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 11px;
}
.growth-sys-diagram .gsd-result-ico svg {
  width: 25px;
  height: 25px;
}
.growth-sys-diagram .gsd-result-card h3 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #16a34a !important;
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin: 0 0 9px;
}
.growth-sys-diagram .gsd-result-card p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  color: #64748b !important;
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
}

/* Growth OS diagram: Why row + tinted CTA bar (layout per design reference) */
.growth-sys-diagram .gsd-why-wrap {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 28px 22px 26px;
  margin-top: 55px;
  box-shadow: var(--sh-s);
}
.growth-sys-diagram .gsd-why-heading {
  text-align: center;
  margin-bottom: 22px;
}
.growth-sys-diagram .gsd-why-heading h3 {
  margin: 0 auto;
  font-family: "Playfair Display", serif;
  color: var(--ink);
  max-width: min(640px, 92vw);
  line-height: 1.35;
  font-size: 17px;
  font-weight: 700;
}
.growth-sys-diagram .gsd-why-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.growth-sys-diagram .gsd-why-item {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 0;
  min-width: 128px;
}
.growth-sys-diagram .gsd-why-ico {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.growth-sys-diagram .gsd-why-ico img {
  display: block;
  width: 24px;
  height: auto;
}
.growth-sys-diagram .gsd-why-ico > svg {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.growth-sys-diagram .gsd-why-ico--1 {
  background: #f5f6fe;
}
.growth-sys-diagram .gsd-why-ico--2 {
  background: #f2fcfe;
}
.growth-sys-diagram .gsd-why-ico--3 {
  background: #f2fcfb;
}
.growth-sys-diagram .gsd-why-ico--4 {
  background: #f7fbf6;
}
.growth-sys-diagram .gsd-why-ico--5 {
  background: #f6fef9;
}
.growth-sys-diagram .gsd-why-ico--6 {
  background: #f7f4fd;
}
.growth-sys-diagram .gsd-why-label {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.5;
  color: var(--body);
  font-size: 13.5px;
  font-weight: 600;
}
.growth-sys-diagram .gsd-cta-bar {
  margin-top: 16px;
  padding: 12px 0 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 28px;
}
.growth-sys-diagram .gsd-cta-col--left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.growth-sys-diagram .gsd-cta-col--center {
  display: flex;
  justify-content: center;
}
.growth-sys-diagram .gsd-cta-col--right {
  display: flex;
  justify-content: center;
  text-align: center;
}
.growth-sys-diagram .gsd-cta-star-badge {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #4f57ad, var(--mid));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(69, 77, 161, 0.32);
}
.growth-sys-diagram .gsd-cta-star-badge svg {
  width: 20px;
  height: 20px;
}
.growth-sys-diagram .gsd-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.growth-sys-diagram .gsd-cta-copy-line {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--ink);
  line-height: 1.45;
  font-size: 14px;
  font-weight: 600;
}
.growth-sys-diagram .gsd-cta-copy-line--muted {
  font-weight: 400;
  color: var(--muted);
  font-size: 13.5px;
}
/* Same visual treatment as header .nav-cta (scoped class avoids global .nav-cta mobile hide) */
.growth-sys-diagram .gsd-cta-install-btn {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--midnight) 0%,
    var(--turquoise) 100%
  );
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(33, 191, 207, 0.3);
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.growth-sys-diagram .gsd-cta-install-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--turquoise) 0%,
    var(--midnight) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.growth-sys-diagram .gsd-cta-install-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 191, 207, 0.4);
  color: #fff !important;
}
.growth-sys-diagram .gsd-cta-install-btn:hover::before {
  opacity: 1;
}
.growth-sys-diagram .gsd-cta-text-link {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--mid) !important;
  text-decoration: none !important;
  white-space: nowrap;
  border: none;
  background: none;
  padding: 10px 0;
  cursor: pointer;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
}
.growth-sys-diagram .gsd-cta-text-link:hover {
  text-decoration: underline !important;
  color: var(--mid-d) !important;
}
/* growth-os.html — "How it works together" diagram: mobile layout only ≤576px
   (was split across 900 / 720 / 768 / 576; consolidated per request) */
@media (max-width: 576px) {
  .hiw-sec .hiw-inner.hiw-diagram-header {
    padding: 0 clamp(12px, 4vw, 16px);
    margin-bottom: 4px;
  }

  .hiw-sec .hiw-diagram-header h2 {
    font-size: clamp(22px, 5.2vw + 0.6rem, 34px);
  }

  .hiw-sec .hiw-diagram-intro br {
    display: none;
  }

  .growth-sys-diagram-wrap {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .growth-sys-diagram#growthSysDiagram,
  .growth-sys-diagram {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-diagram-scroll {
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-diagram-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    align-items: stretch;
    gap: clamp(4px, 1.2vw, 10px) 0;
  }

  .growth-sys-diagram .gsd-you-card,
  .growth-sys-diagram .gsd-result-card {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: clamp(14px, 3vw, 20px) clamp(12px, 3vw, 14px)
      clamp(12px, 2.5vw, 16px);
  }

  .growth-sys-diagram .gsd-arrow-btn {
    transform: rotate(90deg);
    margin: clamp(2px, 0.8vw, 6px) auto;
    align-self: center;
  }

  .growth-sys-diagram .gsd-arrow-btn::before {
    display: none;
  }

  .growth-sys-diagram .gsd-dashed-conn {
    display: none;
  }

  .growth-sys-diagram .gsd-step-card {
    padding: clamp(14px, 2.5vw, 20px) clamp(10px, 2vw, 14px)
      clamp(10px, 2vw, 12px);
  }

  .growth-sys-diagram .gsd-why-wrap {
    margin-top: clamp(8px, 2vw, 14px);
    padding: clamp(16px, 4vw, 22px) clamp(12px, 3.5vw, 18px)
      clamp(14px, 3.5vw, 20px);
    border-radius: clamp(12px, 2.5vw, 16px);
  }

  .growth-sys-diagram .gsd-why-heading h3 {
    font-size: clamp(15px, 2.8vw + 0.35rem, 17px);
  }

  .growth-sys-diagram .gsd-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
    gap: clamp(12px, 2.5vw, 16px) clamp(10px, 2vw, 14px);
    overflow-x: visible;
    padding-bottom: 0;
    align-items: start;
  }

  .growth-sys-diagram .gsd-why-item {
    display: flex;
    min-width: 0;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-cta-bar {
    flex-direction: column;
    padding-top: clamp(2px, 1vw, 8px);
    gap: clamp(12px, 3vw, 18px) clamp(16px, 4vw, 28px);
  }

  .growth-sys-diagram .gsd-cta-col--left {
    flex-direction: column;
    text-align: center;
  }

  .growth-sys-diagram .gsd-cta-text-link {
    white-space: normal;
  }

  .growth-sys-diagram .gsd-cta-install-btn {
    width: 100%;
    max-width: min(100%, 340px);
    box-sizing: border-box;
    justify-content: center;
    padding: clamp(11px, 2vw, 12px) clamp(18px, 4vw, 28px);
    font-size: clamp(12.5px, 1.1vw + 11px, 14px);
  }

  .growth-sys-diagram .gsd-cta-copy-line {
    font-size: clamp(12.5px, 0.8vw + 12px, 14px);
  }

  .growth-sys-diagram .gsd-cta-copy-line--muted {
    font-size: clamp(12px, 0.6vw + 11.5px, 13.5px);
  }

  /* Narrow-phone overrides */
  .hiw-sec .hiw-inner.hiw-diagram-header {
    padding: 0 12px;
  }

  .hiw-sec .hiw-diagram-header h2 {
    font-size: clamp(20px, 6.5vw, 26px);
    line-height: 1.15;
  }

  .hiw-sec .hiw-diagram-intro {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  .growth-sys-diagram-wrap {
    overflow-x: clip;
    overflow-y: visible;
  }

  .growth-sys-diagram .gsd-outer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: visible;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-diagram-scroll {
    overflow-x: visible;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-diagram-row {
    gap: 6px 0;
    align-items: stretch;
  }

  /* Step cards: list bullets centered with line */
  .growth-sys-diagram .gsd-step-card ul.gsd-card-list > li {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .growth-sys-diagram .gsd-step-card ul.gsd-card-list > li::before {
    margin-top: 0;
    align-self: center;
  }

  .growth-sys-diagram .gsd-step-card > .gsd-nbadge {
    width: 28px;
    height: 28px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    border-width: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .growth-sys-diagram .gsd-you-card,
  .growth-sys-diagram .gsd-result-card {
    max-width: 100%;
    padding: 14px 12px 12px;
  }

  /* 687px artboard → scale so drawn width matches viewport (100% / full-bleed) */
  .growth-sys-diagram .gsd-circle-stage {
    --gsd-diag-scale: min(1, max(0.45, calc(100vw / 687)));
    transform: scale(var(--gsd-diag-scale));
    transform-origin: center top;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(536px * (var(--gsd-diag-scale) - 1));
    align-self: center;
  }

  .growth-sys-diagram .gsd-circle-stage > img {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-center-content h3 {
    font-size: 13px !important;
  }

  .growth-sys-diagram .gsd-center-content p {
    font-size: 10px !important;
  }

  .growth-sys-diagram .gsd-step-card {
    padding: 14px 9px 9px;
    text-align: center;
  }

  .growth-sys-diagram .gsd-step-card .gsd-card-top {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .growth-sys-diagram .gsd-step-card .gsd-card-title {
    text-align: center;
    padding-top: 0;
  }

  .growth-sys-diagram .gsd-step-card ul.gsd-card-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .growth-sys-diagram .gsd-why-wrap {
    margin-top: 10px;
    padding: 16px 12px 14px;
  }

  .growth-sys-diagram .gsd-why-heading h3 {
    font-size: 15px;
  }

  .growth-sys-diagram .gsd-why-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .growth-sys-diagram .gsd-why-item {
    align-items: center;
  }

  .growth-sys-diagram .gsd-cta-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
    padding-top: 6px;
  }

  .growth-sys-diagram .gsd-cta-col--left,
  .growth-sys-diagram .gsd-cta-col--center,
  .growth-sys-diagram .gsd-cta-col--right {
    justify-content: center;
    width: 100%;
  }

  .growth-sys-diagram .gsd-cta-install-btn {
    max-width: none;
  }

  .growth-sys-diagram .gsd-cta-text-link {
    padding: 8px 0;
  }

  /* Step cards 01–05: uniform 290px width (≤576px only) */
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-01,
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-02,
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-03,
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-04,
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-05 {
    width: 290px;
    max-width: 290px;
    min-width: 290px;
    box-sizing: border-box;
  }

  .growth-sys-diagram .gsd-card-01
  {
    top:0;
    left:0;
    transform: translateX(0);
  }
  .growth-sys-diagram .gsd-circle-stage > img, .gsd-inner-circle-img
  {
    display: none;
  }
  .growth-sys-diagram .gsd-inner-circle
  {
    position:relative;
    left:0;
    top:0;
    transform: translateX(0);
  }
  .growth-sys-diagram .gsd-circle-stage
  {
    height:auto;
  }
  .hero-badge
  {
    font-size:10px;
  }
}

.videoImageWrapper {
  cursor: pointer;
  border-radius: 1rem;
  transition: transform 0.3s;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.personImage,
.videoImage {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: cover;
  object-position: center 22.5%;
}

.rightSection {
  background-color: #21164c;
  border-radius: 0.925rem;
  flex-direction: column;
  gap: 32px;
  padding: 1rem;
  display: flex;
}

.videoWrapper {
  cursor: pointer;
  transition: transform 0.3s;
}

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

.videoCard {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #020016cc;
  border: 2px solid #643bff4d;
  border-radius: 16px;
  transition: all 0.3s;
  box-shadow:
    0 0 20px #643bff33,
    0 0 40px #643bff1a,
    inset 0 0 20px #643bff0d;
}

.videoImage,
.videoImageWrapper {
  width: 100%;
}

.videoWrapper:hover .videoCard {
  box-shadow:
    0 0 30px #643bff66,
    0 0 60px #643bff33,
    inset 0 0 20px #643bff0d;
}

.videoThumbnail {
  background: linear-gradient(135deg, #1a1a2e 0, #0a0a1a 100%);
  align-items: center;
  display: flex;
}

.videoImageWrapper {
  cursor: pointer;
  border-radius: 1rem;
  transition: transform 0.3s;
  display: inline-block;
}

.playButtonContainer,
.videoImage,
.videoMain {
  border-radius: 0.925rem;
}

.videoImageWrapper:before {
  content: "";
  z-index: 1;
  background: #00000059;
  border-radius: 0.925rem;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  position: absolute;
  top: 0;
  left: 0;
}

.videoImageWrapper:hover .playButton,
.videoWrapper:hover .playButton {
  transform: scale(1.1);
}

.videoMain {
  background-color: #21164c;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}

.personImageContainer {
  width: fit-content;
  height: 100%;
  display: block;
  position: relative;
}

.personImage {
  object-fit: cover;
  width: 90% !important;
  height: auto !important;
  position: relative !important;
}

.personImageOverlay {
  background: linear-gradient(90deg, #02001699 0, #0000 100%);
  width: 100%;
  height: 100%;
  position: relative;
}

.overlayText {
  color: #ffffffe6;
  text-shadow: 0 2px 4px #0000004d;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.playButtonContainer {
  pointer-events: none;
  z-index: 10;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.playButton {
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    var(--turquoise) 0%,
    var(--midnight) 100%
  );
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 5.5rem;
  height: 5.5rem;
  transition: all 0.3s;
  display: flex;
  box-shadow: 0 0 20px #ffffff60;
}

.playIcon {
  color: #fff;
  width: 2rem;
  height: 2rem;
  margin-left: 4px;
}

/* ══════════════════
   WHY DIFFERENT
══════════════════ */
.diff-sec {
  background: var(--white);
}
.diff-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.diff-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* margin-bottom: 32px; */
}
.diff-point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--lav);
  border: 1px solid var(--bd);
  border-radius: 12px;
  transition: all 0.22s;
  cursor: default;
  overflow: hidden;
}
.diff-point:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--green);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}
.diff-point:hover {
  background: var(--lav-m);
  border-color: var(--bd-m);
  /* transform: translateX(4px); */
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.diff-point:hover:before {
  transform: scaleY(1);
}
.diff-check {
  width: 33px;
  height: 33px;
  /* border-radius: 50%; */
  border-radius: 10px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.3s ease;
}
.diff-check svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}
.diff-point-tag {
  font-size: 17px;
  font-weight: 700;
  /* letter-spacing: 0.14em; */
  text-transform: uppercase;
  color: var( --midnight-d);
  /* margin-bottom: 8px; */
}
.diff-point-text h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.diff-point-text p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.diff-quote {
  background: var(--ink);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.diff-quote::before {
  content: '"';
  position: absolute;
  bottom: -20px;
  right: 16px;
  font-family: "Playfair Display", serif;
  font-size: 120px;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
  pointer-events: none;
}
.diff-quote p {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.diff-quote cite {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.38);
  font-style: normal;
}

/* ══════════════════
   FOUNDER QUOTE BANNER
══════════════════ */
.quote-banner {
  padding: 72px 56px;
  background: var(--mid);
  position: relative;
  overflow: hidden;
}
.quote-banner::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(33, 191, 207, 0.14) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.quote-banner::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.quote-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.qb-quote {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
}
.qb-quote em {
  color: var(--turquoise);
  font-style: normal;
}
.qb-author {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.qb-author strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.qb-visual {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 28px;
}
.qb-visual-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* color: rgba(255, 255, 255, 0.4); */
  margin-bottom: 16px;
}
.qb-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--lav);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 10px;
}
.qb-stat:last-child {
  margin-bottom: 0;
}
.qb-stat-num {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--mid);
  line-height: 1;
  min-width: 60px;
}
.qb-stat-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

.hero-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  animation: fadeUp 0.5s 0.18s ease both;
}
.ind-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--bd-m);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  box-shadow: var(--sh-s);
  transition: all 0.18s;
}
.ind-tag:hover {
  border-color: var(--mid);
  background: var(--mid-l);
  color: var(--mid);
}
.ind-tag::before {
  content: "\2713";
  font-weight: 800;
  font-size: 14px;
  color: var(--green);
}
.ind-tag span {
  font-size: 13px;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

  .solution-media {
    min-height: 280px;
  }

  .solution-section--index .solution-shell,
  .solution-section--index .solution-split,
  .solution-section--index .solution-media,
  .solution-section--index .media-frame {
    min-width: 0;
    max-width: 100%;
  }

  .sol-layer:hover {
    box-shadow: inset 0 3px 0 var(--midnight);
  }
}
@media (max-width: 768px) {
  nav > a.nav-cta {
    display: none !important;
  }

  .team-card {
    grid-template-columns: 1fr;
  }

  .team-media {
    min-height: 180px;
    order: -1;
  }
  .growth-sys-diagram .gsd-diagram-row
  {
    flex-direction: column;
  }
  .growth-sys-diagram .gsd-dashed-conn, .growth-sys-diagram .gsd-arrow-btn, .growth-sys-diagram .gsd-you-card, .growth-sys-diagram .gsd-result-card
  {
    display: none;
  }
  .logo-bar-logos
  {
    gap:15px;
  }
  .logo-item
  {
    font-size: 15px;
  }
  section.hero-growth
  {
    padding:125px 18px 64px;
  }

  .hero-strip {
    margin: 0px !important;
  }

  .container {
    padding: 0;
  }
  section.founder-sec .founder-card-header
  {
    background-size:contain;
  }
}
@media (max-width: 640px) {
  .testi-card {
    width: 88vw;
    min-height: auto;
  }

  .testi-video {
    width: 130px;
  }

  .testi-content {
    padding: 20px;
  }

  .testi-quote {
    font-size: 14px;
  }
}
@media (max-width: 900px) {
  nav {
    width: 92%;
    padding: 12px 20px;
    top: 12px;
    border-radius: 16px;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: visible;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 199;
    max-height: min(75vh, calc(100dvh - 88px));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: #fff;
    border-radius: 16px;
    box-shadow:
      0 24px 48px rgba(15, 18, 60, 0.18),
      0 0 0 1px rgba(69, 77, 161, 0.08);
  }

  nav.nav-open .nav-links {
    display: flex !important;
  }

  .nav-links > li {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links > li > a {
    display: block;
    width: 100%;
    border-radius: 0;
    padding: 14px 18px;
  }

  .nav-links li > ul {
    position: static;
    left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    width: auto;
    margin: 0 12px 10px;
    padding: 8px 0;
    box-shadow: none;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--lavender);
  }

  .nav-links li > ul::before {
    display: none;
  }

  .nav-links li.nav-item--what-we-do > ul {
    display: block;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 8px 0;
  }

  section {
    padding: 72px 20px;
  }

  .hero {
    padding: 120px 20px 60px;
  }

  .hero-inner,
  .assistant-inner,
  .cta-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-visual {
    display: none;
  }

  .stats-row,
  .steps-grid,
  .teams-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .stat-card:nth-child(2) {
    transform: none;
  }

  .stat-card:nth-child(2):hover {
    transform: translateY(-6px);
  }

  .fails-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Trap: flex row + middle bar — stack on small screens */
  .trap-wrap {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .trap-col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }

  .trap-col:first-child,
  .trap-col:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }

  .trap-dif {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 12px 16px;
    border-radius: 12px;
  }

  .trap-dif svg {
    transform: rotate(90deg);
  }

  .transform-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  footer {
    padding: 40px 20px;
  }

  .footer-inner {
    flex-direction: column;
  }

  .logo-bar {
    padding: 20px;
  }

  .logo-bar-inner {
    gap: 24px;
  }
}

/* index — How It Works: at ≤768px (incl. iPad portrait) avoid one ultra-narrow
   column when the 900px breakpoint stacks .steps-grid; keep layout to this section only */
@media (max-width: 768px) {
  .hiw-section .steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 18px;
  }

  .hiw-section .step-card {
    padding: 22px 18px;
    min-width: 0;
  }

  .hiw-section .step-num {
    margin-bottom: 14px;
  }

  .hiw-section .step-card h3 {
    font-size: 15px;
    line-height: 1.3;
  }

  .hiw-section .step-card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .hiw-section .section-intro br {
    display: none;
  }
}

@media (max-width: 576px) {
  .hs-inner {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-strip {
    margin: 0px !important;
  }

  /* for-startups / founding-members — layer rows: num, copy, tag stacked */
  .solution-section:not(.solution-section--index) .sol-layer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    padding: 14px 12px;
    min-width: 0;
  }

  .solution-section:not(.solution-section--index) .sol-num {
    white-space: normal;
    line-height: 1.3;
  }

  .solution-section:not(.solution-section--index) .sol-tag {
    justify-self: start;
    white-space: normal;
  }

  .hs-label {
    font-size: 10px !important;
}
  .container {
    padding: 0;
  }

  .nav-cta {
    display: none !important;
  }

  .quote
  {
    width:90%;
  }

  .role-icon.ri-blue , .stat-row .role-icon.ri-amber
  {
    margin-bottom: 30px;
  }
  .location-header
  {
    flex-direction: column;
    gap:0;
  }
  .loc-badge
  {
    font-size:9px;
  }

  .stat-row
  {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stat-label
  {
    margin-top:20px;
  }

  .stat-label::before{
    display: none;
  }

  section.hero-growth
  {
    height:800px;
    min-height: 800px;
    padding: 140px 18px 0;
  }

  /* Dropdown: full width of nav bar (nav has transform → fixed is relative to nav;
     4%/4% was % of nav, so panel looked narrower than the pill) */
  .nav-links {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    border-radius: 0 0 14px 14px;
  }

  .fails-grid {
    grid-template-columns: 1fr;
  }

  .fail-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* index.html — "As seen in": label + logos stacked so row doesn’t clip */
  .logo-bar--index {
    padding: 62px 16px;
}

  .logo-bar--index .logo-bar-inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .btn-green
  {
    padding:14px 20px;
  }

  .logo-bar--index .logo-bar-label {
    text-align: center;
  }

  .logo-bar--index .logo-bar-logos {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    flex: none;
  }

  .logo-bar--index .logo-item {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  /* index.html — Solution: white shell + layer rows fit viewport (no tag clip) */
  .solution-section--index .container {
    min-width: 0;
  }

  .solution-section--index .solution-shell {
    padding: 12px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .solution-section--index .solution-split {
    gap: 12px;
  }

  .solution-section--index .sol-layer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: start;
    padding: 12px;
    min-width: 0;
  }

  .solution-section--index .sol-num {
    grid-column: 1;
    grid-row: 1;
    white-space: normal;
    line-height: 1.25;
    min-width: 0;
  }

  .solution-section--index .sol-tag {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    white-space: normal;
    text-align: right;
    line-height: 1.2;
    max-width: 12em;
    padding: 5px 9px;
  }

  .solution-section--index .sol-layer > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .solution-section--index .sol-title {
    font-size: 14px;
  }

  .solution-section--index .sol-desc {
    font-size: 12.5px;
  }

  .solution-section--index .solution-media {
    min-height: 220px;
  }

  /* index.html — Assistant counter rows: stack so 3-col flex doesn’t crush labels */
  .assistant-section--index .assistant-metrics {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  .assistant-section--index .assistant-metrics.mt-3 {
    margin-top: 6px;
  }

  .assistant-section--index .a-metric {
    flex: none;
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(69, 77, 161, 0.12);
  }

  .assistant-section--index
    .assistant-metrics:last-of-type
    .a-metric:last-child {
    border-bottom: none;
  }

  .assistant-section--index .a-metric + .a-metric {
    border-left: none;
    padding-left: 12px;
  }

  .assistant-section--index .a-metric-num {
    font-size: 32px;
  }

  .assistant-section--index .a-metric-label {
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.35;
  }

  .portfolio-section {
    padding: 0 20px;
  }

  /* index.html — portfolio filter tabs: stack full-width (beats later 768 .portfolio-tab flex) */
  .portfolio-tabs.portfolio-tabs--index {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    gap: 8px;
  }

  .portfolio-tabs.portfolio-tabs--index .portfolio-tab {
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }
  .growth-sys-diagram .gsd-step-card
  {
    position: relative;
    top: 0;
    left: 0;
    width: fit-content;
    max-width: fit-content;
    min-width: fit-content;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 22px;
  }
  .growth-sys-diagram .gsd-circle-stage
  {
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Stack order (≤576px): Strategy card (05) above Execution card (01) */
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-05 {
    order: 2;
  }
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-01 {
    order: 3;
  }
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-02 {
    order: 4;
  }
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-03 {
    order: 5;
  }
  .growth-sys-diagram .gsd-circle-stage .gsd-step-card.gsd-card-04 {
    order: 6;
  }

  .growth-sys-diagram .gsd-result-card
  {
    margin-left:0px;
  }
  .growth-sys-diagram .gsd-inner-circle
  {
    width:100%;
    height:auto;
    margin-top:15px;
    margin-bottom:25px;
    order: 1;
  }
}

@media (max-width: 900px) {
  .quiz-options {
    grid-template-columns: 1fr;
  }
  .growth-sys-diagram .gsd-circle-stage > img
  {
    width: none;
  }

  .quiz-card {
    padding: 26px 22px 22px;
  }

  .quiz-question {
    font-size: 19px;
  }

  .hero-growth {
    padding: 64px 18px;
  }
}
@media (max-width: 480px) {
  .nl-modal {
    padding: 40px 24px 28px;
  }

  .nl-title {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .portfolio-card {
    width: 220px;
    height: 220px;
    border-radius: 18px;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) and (min-width: 577px) {
  .portfolio-section {
    padding: 72px 0 88px;
  }
}

@media (max-width: 480px) {
  .portfolio-card {
    width: 180px;
    height: 180px;
  }
}
@media (max-width: 768px) {
  .portfolio-tabs {
    flex-wrap: wrap;
    gap: 4px;
  }

  .portfolio-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 14px;
    font-size: 13px;
  }
}

.mb-28 {
  margin-bottom: 28px;
}

.justify-center {
  justify-content: center;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.d-flex {
  display: flex;
}

.relative {
  position: relative;
}

.bg-white {
  background: var(--white);
}

.pb-0 {
  padding-bottom: 0 !important;
}

/* =============================================================================
   who-we-help
   ============================================================================= */

.wwh-path-sec {
  background: #faf9fd;
  padding: 190px 28px 100px;
}
.wwh-path-inner {
  max-width: 960px;
  margin: 0 auto;
}
.wwh-path-heading {
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--black);
  margin-bottom: 18px;
}
.wwh-path-heading-plain {
  font-weight: 500;
  font-style: normal;
  color: var(--black);
}
.wwh-path-grad-startup {
  font-style: italic;
  font-weight: 500;
  color: #454da1;
}
.wwh-path-grad-agency {
  font-style: italic;
  font-weight: 500;
  color: #22c55e;
}
.wwh-path-sub {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted);
  text-align: left;
  max-width: 520px;
  margin: 0 0 26px;
}

.wwh-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.wwh-path-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
  margin: 40px auto 0;
  padding: 0 8px;
}
.wwh-path-trust-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.wwh-path-trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5008px solid rgba(15, 18, 60, 0.1);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(124, 58, 237);
  font-size: 15px;
  flex-shrink: 0;
}
.wwh-path-trust-title {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #4a4469;
  margin: 2px 0 0;
  line-height: 1.35;
  min-width: 0;
}
.wwh-path-trust-sub {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
  text-align: center;
  width: 100%;
}
.wwh-path-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 18px;
  padding: 32px 28px 30px;
  box-shadow: var(--sh-m);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.wwh-path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-l);
}
.wwh-path-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.wwh-path-card-icon.wwh-path-green-card-icon {
  background: #e5ffee !important;
}
.wwh-path-card-icon svg {
  display: block;
  flex-shrink: 0;
}
.wwh-path-card--startup .wwh-path-card-icon svg {
  width: 27px;
  height: 27px;
}
.wwh-path-card--agency .wwh-path-card-icon svg {
  width: 26px;
  height: 26px;
}
.wwh-path-card--startup .wwh-path-card-icon {
  background: #e9e8fc;
  color: #454da1;
}
.wwh-path-card--agency .wwh-path-card-icon {
  background: #e8f4f8;
  color: #21bfcf;
}
.wwh-path-card--agency .wwh-path-card-icon i {
  font-size: 27px;
}
.wwh-path-card-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 16px;
}
.wwh-path-card-title-plain {
  font-weight: 600;
  font-style: normal;
  color: var(--black);
}

.wwh-path-card--startup .wwh-path-card-accent {
  background: #7c3aed;
}
.wwh-path-card--agency .wwh-path-card-accent {
  background: #21bfcf;
}
.wwh-path-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  flex: 1;
}
.wwh-path-btn {
  font-family: "Inter", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.wwh-path-btn--startup {
  color: #fff;
  border: none;
  background: linear-gradient(
    135deg,
    var(--midnight) 0%,
    var(--turquoise) 100%
  );
  box-shadow: 0 8px 24px rgba(69, 77, 161, 0.28);
  transition: all 0.3s ease;
}
.wwh-path-btn--startup:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 191, 207, 0.4);
  background: linear-gradient(
    135deg,
    var(--turquoise) 0%,
    var(--midnight) 100%
  );
  color: #fff;
}
.wwh-path-btn--agency {
  color: #fff;
  background: #22c55e;
  box-shadow: 0 6px 24px rgba(34, 197, 94, 0.32);
}
.wwh-path-btn--agency:hover {
  transform: translateY(-2px);
  background: #16a34a;
  color: #fff;
}

.ba-section {
  width: 100%;
  padding: 64px 20px 76px;
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,0.95), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 20% 40%, rgba(77, 91, 232, 0.06), transparent 28%),
    radial-gradient(circle at 78% 48%, rgba(22, 169, 79, 0.055), transparent 30%),
    linear-gradient(180deg, #fbfbff 0%, #f4f5ff 100%);
  font-family: "Inter", Arial, sans-serif;
  color: #10142c;
  overflow: hidden;
}

.ba-container {
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}

.ba-header {
  text-align: center;
  margin-bottom: 34px;
}

.ba-eyebrow {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 8px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(64, 82, 223, 0.16);
  box-shadow:
    0 10px 26px rgba(35, 42, 102, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.95);
  color: #4052df;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ba-header h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(44px, 4.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 700;
  color: #0f142d;
}

.ba-header h2 span {
  color: #4353e6;
  text-shadow: 0 12px 28px rgba(64, 82, 223, 0.14);
}

.ba-header p {
  margin: 18px auto 0;
  max-width: 760px;
  font-size: 20px;
  line-height: 1.5;
  color: #57607d;
  font-weight: 500;
}

.ba-header p strong {
  color: #10142c;
  font-weight: 900;
}

.ba-list {
  display: grid;
  gap: 12px;
}

.ba-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.ba-row::before,
.ba-row::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 66px;
  border-top: 3px dotted rgba(64, 82, 223, 0.38);
  transform: translateY(-50%);
  z-index: 1;
}

.ba-row::before {
  left: calc(50% - 98px);
}

.ba-row::after {
  right: calc(50% - 98px);
}

.ba-card {
  position: relative;
  z-index: 1;
  min-height: 86px;
  border-radius: 13px;
  padding: 20px 24px 20px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid rgba(64, 82, 223, 0.10);
  box-shadow:
    0 14px 34px rgba(35, 42, 102, 0.075),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

.before-card {
  background:
    radial-gradient(circle at 88% 50%, rgba(255, 89, 89, 0.105), transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,250,250,0.88) 100%);
}
.ba-card.before-card
{
  height:100px;
}
.ba-card.after-card
{
  height:100px;
}
.after-card {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at 88% 50%, rgba(22, 169, 79, 0.105), transparent 22%),
    linear-gradient(90deg, rgba(246,255,251,0.9) 0%, rgba(255,255,255,0.94) 100%);
}

.ba-label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.before-label {
  color: #ff2e2e;
}

.after-label {
  color: #0e9d55;
}

.ba-card p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.55;
}

.ba-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow:
    0 12px 26px rgba(35, 42, 102, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.ba-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.before-icon {
  background: #fff0f0;
  color: #e74b4b;
  border: 1px solid rgba(231, 75, 75, 0.16);
}

.after-icon {
  background: #eefbf5;
  color: #0f9f60;
  border: 1px solid rgba(15, 159, 96, 0.18);
}

.ba-arrow {
  position: relative;
  z-index: 3;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(64, 82, 223, 0.16);
  box-shadow:
    0 16px 34px rgba(35, 42, 102, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
}

.ba-arrow svg {
  width: 25px;
  height: 25px; 
  fill: none;
  stroke: #4052df;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

  .ba-row::before,
  .ba-row::after {
    display: none;
  }

  .ba-arrow {
    transform: rotate(90deg);
    width: 52px;
    height: 52px;
  }

  .ba-arrow svg {
    width: 28px;
    height: 28px;
  }

  .ba-card {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .ba-section {
    padding: 48px 16px 58px;
  }

  .ba-container {
    padding: 0 16px;
  }

  .ba-header h2 {
    font-size: 40px;
  }

  .ba-header p {
    font-size: 16px;
  }

  .ba-section .ba-container > h2 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.12;
  }

  .ba-section .section-intro {
    font-size: 16px;
    line-height: 1.5;
  }

  .ba-list {
    gap: 10px;
  }

  .ba-row {
    gap: 12px;
  }

  .ba-card {
    align-items: flex-start;
    min-height: 0;
    padding: 16px 14px 16px 18px;
    gap: 14px;
  }

  .ba-card.before-card,
  .ba-card.after-card {
    height: auto;
  }

  .ba-card p {
    font-size: 15px;
    line-height: 1.5;
  }

  .ba-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: 22px;
    border-radius: 13px;
  }

  .ba-icon svg {
    width: 26px;
    height: 26px;
  }

  .ba-arrow {
    width: 48px;
    height: 48px;
    margin: 4px auto;
  }

  .ba-arrow svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 768px) {
  .wwh-path-grid {
    grid-template-columns: 1fr;
  }
  .wwh-path-sec {
    padding-top: 120px;
  }
}

/* Site-wide chat FAB (What We Do + pages without side-rail) */
.site-chat-widget {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.site-chat-panel {
  pointer-events: auto;
  width: min(360px, calc(100vw - 32px));
  height: min(480px, calc(100vh - 120px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(15, 18, 60, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    visibility 0.24s ease;
}

.site-chat-widget.is-open .site-chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.site-chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--midnight);
  color: #fff;
  flex-shrink: 0;
}

.site-chat-panel__head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.site-chat-panel__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.site-chat-panel__brand {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.site-chat-panel__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
}

.site-chat-panel__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

.site-chat-panel__close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.site-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f7f8fc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
}

.site-chat-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.site-chat-msg__bubble {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333;
  background: #fff;
  border: 1px solid rgba(15, 18, 60, 0.08);
  box-shadow: 0 1px 2px rgba(15, 18, 60, 0.04);
}

.site-chat-msg--user .site-chat-msg__bubble {
  background: var(--midnight);
  color: #fff;
  border-color: transparent;
}

.site-chat-msg__time {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.55;
}

.site-chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
  background: #f7f8fc;
  flex-shrink: 0;
}

.site-chat-quick__btn {
  border: 1px solid rgba(69, 77, 161, 0.22);
  background: #fff;
  color: var(--midnight);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.site-chat-quick__btn:hover {
  background: var(--lavender);
  border-color: rgba(69, 77, 161, 0.35);
}

.site-chat-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(15, 18, 60, 0.08);
  background: #fff;
  flex-shrink: 0;
}

.site-chat-compose__input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(15, 18, 60, 0.12);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #f9fafc;
}

.site-chat-compose__input:focus {
  border-color: rgba(69, 77, 161, 0.45);
  background: #fff;
}

.site-chat-compose__send {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--midnight);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-chat-compose__send:hover {
  background: var(--midnight-deep);
}

.site-chat-msg__bubble .site-chat-inline-btn {
  margin-top: 8px;
  border: 1px solid rgba(69, 77, 161, 0.22);
  background: #fff;
  color: var(--midnight);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.site-chat-fab {
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  background: #4285f4;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(66, 133, 244, 0.4);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.site-chat-fab__icon {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
  transform: translateY(-1px);
  shape-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.site-chat-fab:hover,
.site-chat-fab:focus-visible {
  background: #3b78e7;
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.48);
  outline: none;
}

.site-chat-widget.is-open .site-chat-fab {
  background: #3b78e7;
}

.site-chat-widget.is-open .site-chat-fab__icon {
  display: none;
}

.site-chat-widget.is-open .site-chat-fab__close {
  display: block;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}

.site-chat-fab__close {
  display: none;
}

@media (max-width: 640px) {
  .site-chat-widget {
    right: 16px;
    bottom: 20px;
  }

  .site-chat-panel {
    width: calc(100vw - 24px);
    height: min(70vh, 520px);
    border-radius: 14px;
  }

  .site-chat-fab {
    width: 50px;
    height: 50px;
  }

  .site-chat-fab__icon {
    width: 32px;
    height: 32px;
  }
}