:root {
      --cream: #FAF8F5;
      --off-white: #F4F1EC;
      --sand: #EDE8DF;
      --stone: #C8C0B4;
      --ink: #1A1916;
      --ink-soft: #3D3A35;
      --ink-muted: #706C63;
      --accent: #C41230;
      --accent-light: #F4637A;
      --accent-pale: #FFF1F3;
      --green: #16A34A;
      --green-pale: #F0FDF4;
      --amber: #D97706;
      --amber-pale: #FFFBEB;
  }

  /*--*/

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

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--ink);
      overflow-x: hidden;
  }

  /* ── NAV ─────────────────────────────────── */
  nav {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 1200px;
      border-radius: 100px;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      height: 72px;
      background: rgba(255, 253, 253, 0.829);
      /* More translucent dark */
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      /* Full subtle border */
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      transition: all .3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  nav.scrolled {
      top: 16px;
      background: rgba(255, 248, 248, 0.9);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
      border-color: rgba(255, 255, 255, 0.18);
  }

  .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
  }

  .logo-img {
      height: 40px;
      width: auto;
      object-fit: contain;
  }

  .logo-icon {
      width: 34px;
      height: 34px;
      background: var(--accent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .logo-icon svg {
      color: #fff;
      width: 18px;
      height: 18px;
  }

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

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

  .nav-links a {
      font-size: .85rem;
      font-weight: 500;
      color: rgba(65, 65, 65, 0.7);
      text-decoration: none;
      transition: color .2s;
  }

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

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

  .btn-ghost {
      padding: 9px 20px;
      border-radius: 10px;
      border: 1.5px solid rgba(255, 255, 255, 0.2);
      background: transparent;
      color: var(--accent);
      font-family: 'DM Sans', sans-serif;
      font-size: .875rem;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: all .2s;
  }

  .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.05);
  }

  .btn-primary {
      padding: 9px 22px;
      border-radius: 10px;
      background: var(--accent);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .875rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      border: none;
      transition: all .2s;
  }

  .btn-primary:active {
      transform: scale(0.97);
  }

  /* ── MOBILE MENU ─────────────────────────── */
  .menu-toggle {
      display: none;
      background: none;
      border: none;
      color: var(--accent);
      cursor: pointer;
      padding: 4px;
      margin-left: auto;
  }

  .menu-close {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: absolute;
      top: 24px;
      right: 24px;
      transition: background 0.2s;
  }

  .menu-close:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  .mobile-menu {
      position: fixed;
      inset: 0;
      background: var(--ink);
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu.active {
      opacity: 1;
      pointer-events: auto;
  }

  .mobile-menu-inner {
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(20px);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu.active .mobile-menu-inner {
      transform: translateY(0);
  }

  .mobile-nav-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 28px;
      text-align: center;
      margin-bottom: 48px;
  }

  .mobile-nav-links a {
      font-family: 'DM Serif Display', serif;
      font-size: 2rem;
      color: #fff;
      text-decoration: none;
      transition: color 0.2s;
  }

  .mobile-nav-links a:hover {
      color: var(--accent-light);
  }

  .mobile-nav-cta {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      max-width: 300px;
  }

  .mobile-nav-cta .btn-ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.2);
      text-align: center;
  }

  .mobile-nav-cta .btn-primary {
      text-align: center;
      padding: 14px 22px;
  }

  /* ── HERO ────────────────────────────────── */
  .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 130px 24px 80px;
      position: relative;
      overflow: hidden;
  }

  .hero-bg {
      position: absolute;
      inset: 0;
      background:
          radial-gradient(ellipse 900px 600px at 50% 0%, rgba(196, 18, 48, 0.09) 0%, transparent 70%),
          radial-gradient(ellipse 600px 400px at 85% 80%, rgba(22, 163, 74, 0.05) 0%, transparent 60%),
          radial-gradient(ellipse 500px 400px at 5% 70%, rgba(196, 18, 48, 0.06) 0%, transparent 60%);
      pointer-events: none;
  }

  .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(200, 192, 180, 0.15) 1px, transparent 1px),
          linear-gradient(90deg, rgba(200, 192, 180, 0.15) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 100%);
      pointer-events: none;
  }

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent-pale);
      border: 1px solid rgba(196, 18, 48, 0.2);
      color: var(--accent);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 32px;
  }

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

  @keyframes pulse {

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

      50% {
          opacity: .5;
          transform: scale(1.5);
      }
  }

  h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(3rem, 7vw, 6rem);
      line-height: 1.04;
      letter-spacing: -.03em;
      color: var(--ink);
      max-width: 920px;
  }

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

  .hero-sub {
      margin-top: 28px;
      font-size: 1.12rem;
      font-weight: 300;
      color: var(--ink-muted);
      line-height: 1.72;
      max-width: 560px;
  }

  .hero-trust {
      margin-top: 18px;
      font-size: .85rem;
      color: var(--stone);
      font-weight: 400;
      max-width: 580px;
      line-height: 1.6;
  }

  .hero-actions {
      display: flex;
      gap: 14px;
      margin-top: 44px;
      flex-wrap: wrap;
      justify-content: center;
  }

  .btn-accent {
      padding: 15px 34px;
      border-radius: 10px;
      background: var(--accent);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .975rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      border: none;
      box-shadow: 0 8px 28px rgba(196, 18, 48, 0.3);
      transition: all .25s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: relative;
  }

  .btn-accent:hover {
      background: #A30F28;
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(196, 18, 48, 0.4);
  }

  .btn-outline-dark {
      padding: 15px 34px;
      border-radius: 10px;
      border: 1.5px solid var(--sand);
      background: transparent;
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      font-size: .975rem;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: all .25s;
      display: inline-flex;
      align-items: center;
      gap: 9px;
  }

  .btn-outline-dark:hover {
      border-color: var(--stone);
      background: var(--off-white);
  }

  .hero-stats {
      display: flex;
      margin-top: 64px;
      /* Glassmorphism background */
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(196, 18, 48, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.5);
      position: relative;
  }

  /* Subtle gradient glow behind the glass */
  .hero-stats::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(196, 18, 48, 0.1) 0%, transparent 100%);
      pointer-events: none;
      z-index: 0;
  }

  .stat {
      padding: 28px 48px;
      text-align: center;
      border-right: 1px solid rgba(196, 18, 48, 0.1);
      position: relative;
      z-index: 1;
  }

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

  .stat-num {
      font-family: 'DM Serif Display', serif;
      font-size: 2.2rem;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 8px;
      /* Slight text shadow for depth */
      text-shadow: 0 2px 10px rgba(196, 18, 48, 0.2);
  }

  .stat-label {
      font-size: .8rem;
      font-weight: 500;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
  }

  .stat-label i {
      color: var(--accent-light);
  }

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

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

  /* ── LOGOS ───────────────────────────────── */
  .logos-section {
      padding: 52px 60px;
      text-align: center;
      background: var(--off-white);
      border-top: 1px solid var(--sand);
      border-bottom: 1px solid var(--sand);
  }

  .logos-label {
      font-size: .74rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--stone);
      margin-bottom: 28px;
  }

  .logos-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 52px;
      flex-wrap: wrap;
  }

  .logo-pill {
      font-family: 'DM Serif Display', serif;
      font-size: 1.05rem;
      color: var(--stone);
      letter-spacing: -.01em;
      transition: color .2s;
  }

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

  /* ── SECTION COMMON ──────────────────────── */
  section {
      padding: 100px 60px;
  }

  .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--accent);
      margin-bottom: 18px;
  }

  h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(2rem, 4vw, 3.1rem);
      line-height: 1.1;
      letter-spacing: -.025em;
      color: var(--ink);
      max-width: 700px;
  }

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

  .section-sub {
      font-size: 1.05rem;
      color: var(--ink-muted);
      line-height: 1.72;
      max-width: 600px;
      margin-top: 18px;
      font-weight: 300;
  }

  /* ── BUSINESS PROBLEM SECTION ────────────── */
  .problem-section {
      background: var(--cream);
  }

  .problem-inner {
      max-width: 1200px;
      margin: 0 auto;
  }

  .problem-text {
      margin-bottom: 56px;
  }

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

  .pain-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 20px;
      padding: 28px 24px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      transition: transform .25s, box-shadow .25s;
  }

  .pain-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(26, 25, 22, 0.07);
  }

  .pain-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .pain-card h4 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.08rem;
      color: var(--ink);
      margin-bottom: 6px;
      letter-spacing: -.01em;
  }

  .pain-card p {
      font-size: .86rem;
      color: var(--ink-muted);
      line-height: 1.6;
      font-weight: 300;
  }

  /* ── SOLUTION SECTION ────────────────────── */
  .solution-section {
      background: linear-gradient(135deg, #1A1916 0%, #5C0A18 50%, #1A1916 100%);
      position: relative;
      overflow: hidden;
  }

  .solution-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 800px 500px at 50% 50%, rgba(196, 18, 48, 0.2) 0%, transparent 70%);
      pointer-events: none;
  }

  .solution-inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
  }

  .solution-header {
      text-align: center;
      margin-bottom: 60px;
  }

  .solution-header h2 {
      margin: 0 auto;
  }

  .solution-header .section-sub {
      margin: 18px auto 0;
  }

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

  .sol-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 32px 28px;
      backdrop-filter: blur(10px);
      transition: transform .25s, background .25s, box-shadow .25s;
  }

  .sol-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  }

  .sol-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(196, 18, 48, 0.25);
      border: 1px solid rgba(244, 99, 122, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
  }

  .sol-card h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.18rem;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: -.015em;
  }

  .sol-card p {
      font-size: .88rem;
      color: rgba(255, 255, 255, 0.58);
      line-height: 1.62;
      font-weight: 300;
  }

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

  .how-header {
      text-align: center;
      margin-bottom: 68px;
  }

  .how-header h2,
  .how-header .section-sub {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
  }

  .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .step-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 24px;
      padding: 40px 36px;
      position: relative;
      overflow: hidden;
      transition: transform .25s, box-shadow .25s;
  }

  .step-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 56px rgba(26, 25, 22, 0.07);
  }

  .step-num {
      font-family: 'DM Serif Display', serif;
      font-size: 5rem;
      color: var(--sand);
      line-height: 1;
      position: absolute;
      top: 18px;
      right: 26px;
  }

  .step-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
  }

  .step-icon svg {
      width: 22px;
      height: 22px;
  }

  .step-card h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.4rem;
      color: var(--ink);
      margin-bottom: 12px;
      letter-spacing: -.015em;
  }

  .step-card p {
      font-size: .93rem;
      color: var(--ink-muted);
      line-height: 1.65;
      font-weight: 300;
  }

  /* ── FEATURES ────────────────────────────── */
  .features-section {
      background: var(--off-white);
  }

  .features-inner {
      max-width: 1200px;
      margin: 0 auto;
  }

  .features-intro {
      margin-bottom: 60px;
  }

  .features-grid {
      display: grid;
      gap: 20px;
  }

  .feat-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
  }

  .feat-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 24px;
      padding: 42px 38px;
      transition: transform .25s, box-shadow .25s;
      position: relative;
      overflow: hidden;
  }

  .feat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 48px rgba(26, 25, 22, 0.07);
  }

  .feat-card.wide {
      grid-column: span 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
  }

  .feat-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
  }

  .feat-icon svg {
      width: 22px;
      height: 22px;
  }

  .feat-card h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.48rem;
      color: var(--ink);
      margin-bottom: 12px;
      letter-spacing: -.015em;
  }

  .feat-card p {
      font-size: .93rem;
      color: var(--ink-muted);
      line-height: 1.65;
      font-weight: 300;
  }

  .feat-list {
      list-style: none;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .feat-list li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: .88rem;
      color: var(--ink-soft);
      font-weight: 400;
  }

  .feat-list li .check {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--green-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
  }

  .feat-list li .check svg {
      width: 9px;
      height: 9px;
      color: var(--green);
  }

  /* call sim */
  .call-sim {
      background: var(--off-white);
      border: 1px solid var(--sand);
      border-radius: 18px;
      padding: 26px;
      font-size: .875rem;
  }

  .call-sim-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--sand);
  }

  .call-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse 2s infinite;
  }

  .call-sim-header span {
      font-weight: 600;
      font-size: .78rem;
      color: var(--green);
      letter-spacing: .05em;
      text-transform: uppercase;
  }

  .call-time {
      margin-left: auto;
      font-size: .75rem;
      color: var(--stone);
      display: flex;
      align-items: center;
      gap: 4px;
  }

  .msg {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      align-items: flex-start;
  }

  .msg-ai .bubble {
      background: var(--ink);
      color: #fff;
      border-radius: 4px 16px 16px 16px;
      padding: 10px 14px;
      font-size: .82rem;
      line-height: 1.55;
      max-width: 240px;
  }

  .msg-human {
      flex-direction: row-reverse;
  }

  .msg-human .bubble {
      background: var(--accent-pale);
      color: var(--ink);
      border-radius: 16px 4px 16px 16px;
      padding: 10px 14px;
      font-size: .82rem;
      line-height: 1.55;
      max-width: 200px;
      border: 1px solid rgba(196, 18, 48, 0.15);
  }

  .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      font-weight: 700;
      flex-shrink: 0;
  }

  .avatar-ai {
      background: var(--ink);
      color: var(--cream);
  }

  .avatar-human {
      background: var(--sand);
      color: var(--ink-muted);
  }

  .wave-wrap {
      padding-left: 38px;
      margin-top: 6px;
  }

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

  .wave-bar {
      width: 3px;
      background: var(--accent);
      border-radius: 2px;
      animation: waveAnim 1.2s ease infinite;
  }

  .wave-bar:nth-child(1) {
      animation-delay: 0s
  }

  .wave-bar:nth-child(2) {
      animation-delay: .1s
  }

  .wave-bar:nth-child(3) {
      animation-delay: .2s
  }

  .wave-bar:nth-child(4) {
      animation-delay: .3s
  }

  .wave-bar:nth-child(5) {
      animation-delay: .4s
  }

  .wave-bar:nth-child(6) {
      animation-delay: .3s
  }

  .wave-bar:nth-child(7) {
      animation-delay: .2s
  }

  @keyframes waveAnim {

      0%,
      100% {
          height: 4px;
          opacity: .3
      }

      50% {
          height: 20px;
          opacity: 1
      }
  }

  /* metrics */
  .metrics-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 18px;
      padding: 26px;
  }

  .metrics-title {
      font-size: .75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--stone);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .metric-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--off-white);
  }

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

  .metric-label {
      font-size: .82rem;
      color: var(--ink-muted);
      font-weight: 400;
  }

  .metric-value {
      font-family: 'DM Serif Display', serif;
      font-size: 1.45rem;
      color: var(--ink);
  }

  .metric-delta {
      font-size: .72rem;
      font-weight: 600;
      color: var(--green);
  }

  .metric-bar-wrap {
      height: 5px;
      background: var(--off-white);
      border-radius: 3px;
      margin-top: 5px;
  }

  .metric-bar {
      height: 5px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
  }

  /* ── INDUSTRIES ───────────────────────────── */
  .industries-section {
      background: var(--cream);
  }

  .ind-header {
      max-width: 1200px;
      margin: 0 auto 56px;
  }

  .ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .ind-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 20px;
      padding: 32px 28px;
      transition: transform .25s, box-shadow .25s;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .ind-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 48px rgba(26, 25, 22, 0.06);
  }

  .ind-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .ind-icon svg {
      width: 20px;
      height: 20px;
  }

  .ind-card h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.2rem;
      color: var(--ink);
      letter-spacing: -.01em;
  }

  .ind-card p {
      font-size: .88rem;
      color: var(--ink-muted);
      line-height: 1.62;
      font-weight: 300;
  }

  /* ── ROI SECTION ─────────────────────────── */
  .roi-section {
      background: var(--off-white);
  }

  .roi-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
  }

  .roi-text h2 {
      margin: 12px 0;
  }

  .roi-text p {
      font-size: .95rem;
      color: var(--ink-muted);
      line-height: 1.72;
      margin-bottom: 12px;
      font-weight: 300;
  }

  .roi-compare {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .roi-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  .roi-row-label {
      font-size: .78rem;
      color: var(--ink-muted);
      font-weight: 500;
  }

  .roi-bar-track {
      height: 38px;
      background: var(--sand);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
  }

  .roi-bar-fill {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 14px;
      font-size: .8rem;
      font-weight: 600;
      white-space: nowrap;
      border-radius: 10px;
  }

  .roi-bar-human {
      background: rgba(200, 192, 180, 0.6);
      color: var(--ink-muted);
  }

  .roi-bar-ai {
      background: var(--accent);
      color: #fff;
  }

  .roi-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .roi-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 18px;
      padding: 26px 28px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
  }

  .roi-card-ico {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .roi-card-ico svg {
      width: 20px;
      height: 20px;
  }

  .roi-card-label {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--stone);
      margin-bottom: 4px;
  }

  .roi-card-stat {
      font-family: 'DM Serif Display', serif;
      font-size: 1.7rem;
      color: var(--ink);
      letter-spacing: -.02em;
      margin-bottom: 3px;
  }

  .roi-card-stat.green {
      color: var(--green);
  }

  .roi-card-desc {
      font-size: .8rem;
      color: var(--ink-muted);
      line-height: 1.55;
  }

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

  .pricing-header {
      text-align: center;
      margin-bottom: 56px;
  }

  .pricing-header h2 {
      margin: 0 auto 14px;
  }

  .pricing-header .section-sub {
      margin: 0 auto;
  }

  .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1280px;
      margin: 0 auto;
  }

  .price-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 24px;
      padding: 38px 34px;
      transition: transform .25s, box-shadow .25s;
      position: relative;
  }

  .price-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 56px rgba(26, 25, 22, 0.07);
  }

  .price-card.featured {
      background: var(--ink);
      border-color: var(--ink);
      transform: scale(1.04);
  }

  .price-card.featured:hover {
      transform: scale(1.04) translateY(-4px);
  }

  .price-badge {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 4px 12px;
      border-radius: 100px;
      margin-bottom: 18px;
  }

  .price-plan {
      font-size: .76rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--stone);
      margin-bottom: 8px;
  }

  .price-card.featured .price-plan {
      color: rgba(255, 255, 255, .45);
  }

  .price-amount {
      font-family: 'DM Serif Display', serif;
      font-size: 3rem;
      color: var(--ink);
      letter-spacing: -.03em;
      line-height: 1;
  }

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

  .price-period {
      font-size: .82rem;
      color: var(--stone);
      margin-left: 3px;
  }

  .price-card.featured .price-period {
      color: rgba(255, 255, 255, .35);
  }

  .price-desc {
      font-size: .88rem;
      color: var(--ink-muted);
      margin: 14px 0 26px;
      font-weight: 300;
      line-height: 1.55;
  }

  .price-card.featured .price-desc {
      color: rgba(255, 255, 255, .55);
  }

  .price-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
      margin-bottom: 30px;
  }

  .price-features li {
      display: flex;
      gap: 9px;
      font-size: .88rem;
      color: var(--ink-soft);
      align-items: flex-start;
  }

  .price-card.featured .price-features li {
      color: rgba(255, 255, 255, .75);
  }

  .price-features li svg {
      width: 15px;
      height: 15px;
      color: var(--green);
      flex-shrink: 0;
      margin-top: 1px;
  }

  .price-card.featured .price-features li svg {
      color: #86efac;
  }

  .price-btn {
      display: block;
      text-align: center;
      padding: 13px 22px;
      border-radius: 10px;
      font-family: 'DM Sans', sans-serif;
      font-size: .875rem;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: all .2s;
  }

  .price-btn-outline {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--sand);
  }

  .price-btn-outline:hover {
      background: var(--off-white);
      border-color: var(--stone);
  }

  .price-btn-accent {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 6px 22px rgba(196, 18, 48, 0.3);
  }

  .price-btn-accent:hover {
      background: #A30F28;
      transform: translateY(-1px);
      box-shadow: 0 10px 30px rgba(196, 18, 48, 0.4);
  }

  /* ── TESTIMONIALS ────────────────────────── */
  .testimonials-section {
      background: var(--off-white);
  }

  .testi-header {
      max-width: 1200px;
      margin: 0 auto 52px;
  }

  .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .testi-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 22px;
      padding: 34px 30px;
      transition: transform .25s;
  }

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

  .stars {
      color: var(--amber);
      font-size: .95rem;
      margin-bottom: 16px;
      letter-spacing: 3px;
  }

  .testi-quote {
      font-family: 'DM Serif Display', serif;
      font-style: italic;
      font-size: 1.06rem;
      color: var(--ink);
      line-height: 1.56;
      margin-bottom: 22px;
  }

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

  .author-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--accent-pale);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .75rem;
      font-weight: 700;
      flex-shrink: 0;
      border: 1px solid rgba(196, 18, 48, 0.15);
  }

  .author-name {
      font-weight: 600;
      font-size: .88rem;
      color: var(--ink);
  }

  .author-role {
      font-size: .76rem;
      color: var(--ink-muted);
  }

  /* ── CTA ─────────────────────────────────── */
  .cta-section {
      background: var(--ink);
      padding: 120px 60px;
      text-align: center;
      position: relative;
      overflow: hidden;
  }

  .cta-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 700px 400px at 50% 110%, rgba(196, 18, 48, 0.25) 0%, transparent 70%);
      pointer-events: none;
  }

  .cta-section h2 {
      color: #fff;
      max-width: 680px;
      margin: 0 auto 18px;
  }

  .cta-section .section-sub {
      color: rgba(255, 255, 255, .48);
      margin: 0 auto 48px;
  }

  .cta-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
  }

  .btn-white {
      padding: 15px 38px;
      border-radius: 10px;
      background: #fff;
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      font-size: .975rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      border: none;
      transition: all .25s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: relative;
  }

  .btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(255, 255, 255, 0.18);
  }

  .btn-outline-white {
      padding: 15px 38px;
      border-radius: 10px;
      border: 1.5px solid rgba(255, 255, 255, .22);
      background: transparent;
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .975rem;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: all .25s;
  }

  .btn-outline-white:hover {
      border-color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .05);
  }

  /* ── FOOTER ──────────────────────────────── */
  footer {
      background: var(--ink);
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding: 60px 60px 40px;
  }

  .footer-inner {
      max-width: 1200px;
      margin: 0 auto 52px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 56px;
  }

  .footer-logo {
      display: block;
      margin-bottom: 14px;
      text-decoration: none;
  }

  .footer-logo-img {
      height: 36px;
      width: auto;
      object-fit: contain;
      /* make logo visible on dark background - invert if needed */
      filter: brightness(0) invert(1);
      opacity: 0.85;
  }

  .footer-logo-icon {
      width: 30px;
      height: 30px;
      background: var(--accent);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .footer-logo-icon svg {
      color: #fff;
      width: 16px;
      height: 16px;
  }

  .footer-logo span {
      color: var(--accent-light);
  }

  .footer-brand p {
      font-size: .875rem;
      color: rgba(255, 255, 255, .38);
      line-height: 1.62;
      font-weight: 300;
      max-width: 270px;
  }

  .footer-social {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 24px;
  }

  .footer-social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.6);
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      text-decoration: none;
  }

  .footer-social a:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(196, 18, 48, 0.3);
  }

  .footer-social a i {
      width: 18px;
      height: 18px;
  }

  .footer-col h4 {
      font-size: .76rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(255, 255, 255, .3);
      margin-bottom: 16px;
  }

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

  .footer-col a {
      font-size: .88rem;
      color: rgba(255, 255, 255, .48);
      text-decoration: none;
      transition: color .2s;
  }

  .footer-col a:hover {
      color: #fff;
  }

  .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .footer-bottom p {
      font-size: .78rem;
      color: rgba(255, 255, 255, .26);
  }

  /* ── CSS ANIMATIONS ──────────────────────── */

  /* Keyframes */
  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(28px);
      }

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

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  @keyframes scaleUp {
      from {
          opacity: 0;
          transform: scale(0.94) translateY(18px);
      }

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

  @keyframes slideRight {
      from {
          opacity: 0;
          transform: translateX(-28px);
      }

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

  /* Hero entrance (fired immediately by JS adding .hero-anim + animation-delay) */
  .hero-anim {
      opacity: 0;
      animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* Scroll-reveal base state — hidden until .in-view is added by IntersectionObserver */
  .gsap-reveal {
      opacity: 0;
      filter: blur(8px);
      transform: translateY(30px) scale(0.96);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .gsap-reveal.in-view {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
  }

  /* Stagger container children — each child gets .in-view + inline animation-delay */
  .gsap-reveal-stagger>* {
      opacity: 0;
      filter: blur(8px);
      transform: translateY(24px) scale(0.96);
      transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
          filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .gsap-reveal-stagger>*.in-view {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
  }

  /* Card base state — hidden, revealed with stagger via JS setTimeout + .in-view */
  .pain-card,
  .sol-card,
  .step-card,
  .ind-card,
  .testi-card,
  .price-card,
  .service-card,
  .roi-card {
      opacity: 0;
      filter: blur(8px);
      transform: translateY(28px) scale(0.94);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
          filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.25s ease;
  }

  .pain-card.in-view,
  .sol-card.in-view,
  .step-card.in-view,
  .ind-card.in-view,
  .testi-card.in-view,
  .price-card.in-view,
  .service-card.in-view,
  .roi-card.in-view {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
  }

  /* Sol-card has a slightly deeper perspective */
  .sol-card {
      transform: translateY(24px) scale(0.90) perspective(1000px) rotateX(4deg);
  }

  .sol-card.in-view {
      transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
  }

  /* Hover lift (replaces GSAP hover) — applied to buttons */
  .btn-accent,
  .btn-white {
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
          background 0.2s ease;
  }

  .btn-accent:active,
  .btn-white:active {
      transform: scale(0.97);
  }

  .service-card {
      transition: transform .25s, box-shadow .25s;
  }

  .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 56px rgba(26, 25, 22, 0.07);
  }

  /* ── MODAL & CUSTOM SELECT ───────────────── */
  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26, 25, 22, 0.8);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 1000;
      display: flex;
      padding: 40px 20px;
      overflow-y: auto;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
  }

  .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
  }

  .modal-content {
      background: #fff;
      width: 100%;
      max-width: 500px;
      border-radius: 24px;
      position: relative;
      margin: auto;
      transform: translateY(20px) scale(0.95);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  }

  .modal-overlay.active .modal-content {
      transform: translateY(0) scale(1);
  }

  .modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      background: var(--off-white);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--ink-muted);
      transition: all 0.2s;
      z-index: 20;
  }

  .modal-close:hover {
      background: var(--sand);
      color: var(--ink);
  }

  .modal-header {
      padding: 40px 40px 20px;
  }

  .modal-header h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.8rem;
      color: var(--ink);
      margin-bottom: 8px;
      line-height: 1.1;
  }

  .modal-header p {
      font-size: 0.95rem;
      color: var(--ink-muted);
      margin-bottom: 0;
      line-height: 1.5;
  }

  .demo-form {
      display: flex;
      flex-direction: column;
  }

  .modal-body {
      padding: 20px 40px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .modal-footer {
      padding: 20px 40px 40px;
      background: #fff;
      border-top: 1px solid var(--sand);
      border-radius: 0 0 24px 24px;
      position: relative;
      z-index: 10;
  }

  .form-row {
      display: flex;
      gap: 16px;
  }

  @media (max-width: 600px) {
      .form-row {
          flex-direction: column;
          gap: 16px;
      }
  }

  .form-row .form-group {
      flex: 1;
  }

  .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
  }

  .form-group.country-group {
      z-index: 100;
  }

  .form-group label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--ink);
      text-transform: uppercase;
      letter-spacing: 0.05em;
  }

  .demo-form input:not([type="hidden"]),
  .demo-form select {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--sand);
      background: var(--cream);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      color: var(--ink);
      outline: none;
      transition: all 0.2s;
      appearance: none;
  }

  .demo-form select {
      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23706C63%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 16px;
      padding-right: 40px;
      cursor: pointer;
  }

  .demo-form input:focus,
  .demo-form select:focus {
      border-color: var(--accent-light);
      box-shadow: 0 0 0 3px var(--accent-pale);
      background: #fff;
  }

  .custom-select-trigger {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--sand);
      background: var(--cream);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
  }

  .custom-select-wrapper.open .custom-select-trigger {
      border-color: var(--accent-light);
      box-shadow: 0 0 0 3px var(--accent-pale);
      background: #fff;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }

  .custom-select-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid var(--sand);
      border-top: none;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
      z-index: 2000;
      display: none;
      flex-direction: column;
  }

  .custom-select-wrapper.open .custom-select-dropdown {
      display: flex;
  }

  /* ── PHONE COMBINED OVERRIDES ────────────────── */
  .phone-combined-input {
      display: flex;
      align-items: stretch;
      width: 100%;
  }

  .phone-combined-input .custom-select-wrapper {
      width: auto !important;
      min-width: 110px !important;
  }

  .phone-combined-input .custom-select-trigger {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      border-right: none !important;
      white-space: nowrap;
      padding: 12px 10px 12px 16px;
  }

  .phone-combined-input input[type="tel"] {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      flex: 1;
  }

  .custom-select-wrapper.open {
      z-index: 1000 !important;
  }

  .search-container {
      padding: 10px;
      border-bottom: 1px solid var(--sand);
  }

  .country-search {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid var(--sand);
      background: var(--off-white);
      font-size: 0.9rem;
      outline: none;
  }

  .country-search:focus {
      border-color: var(--accent-light);
      background: #fff;
  }

  .country-options {
      list-style: none;
      max-height: 200px;
      overflow-y: auto;
      padding: 0;
      margin: 0;
  }

  .country-options li {
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 0.95rem;
      transition: background 0.15s;
  }

  .country-options li:hover,
  .country-options li.highlighted {
      background: var(--accent-pale);
      color: var(--accent);
  }

  .country-flag {
      font-size: 1.2rem;
      line-height: 1;
  }

  .country-options::-webkit-scrollbar {
      width: 6px;
  }

  .country-options::-webkit-scrollbar-track {
      background: transparent;
  }

  .country-options::-webkit-scrollbar-thumb {
      background: var(--stone);
      border-radius: 10px;
  }

  /* ── RESPONSIVE ──────────────────────────── */
  @media(max-width:1024px) {
      nav {
          padding: 0 28px;
          height: 64px;
      }

      footer {
          padding: 52px 32px 36px;
      }

      section {
          padding: 80px 32px;
      }

      .logos-section {
          padding: 44px 32px;
      }

      .hero-stats {
          flex-wrap: wrap;
      }

      .stat {
          border-right: none;
          border-bottom: 1px solid rgba(196, 18, 48, 0.1);
          min-width: 140px;
      }

      .stat:last-child {
          border-bottom: none;
      }

      .problem-pain-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .solution-cards {
          grid-template-columns: repeat(2, 1fr);
      }

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

  @media(max-width:860px) {

      .nav-links,
      .nav-cta {
          display: none;
      }

      .menu-toggle {
          display: block;
      }

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

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

      .feat-card.wide {
          grid-column: span 1;
          grid-template-columns: 1fr;
      }

      .ind-grid {
          grid-template-columns: 1fr 1fr;
      }

      .roi-inner {
          grid-template-columns: 1fr;
          gap: 40px;
      }

      .pricing-grid {
          grid-template-columns: 1fr;
          max-width: 420px;
      }

      .price-card.featured {
          transform: none;
      }

      .testi-grid {
          grid-template-columns: 1fr;
      }

      .footer-inner {
          grid-template-columns: 1fr 1fr;
          gap: 36px;
      }

      .cta-section {
          padding: 80px 28px;
      }

      footer {
          padding: 52px 28px 36px;
      }

      .problem-pain-grid {
          grid-template-columns: 1fr;
      }

      .solution-cards {
          grid-template-columns: 1fr;
      }
  }

  @media(max-width:520px) {
      h1 {
          font-size: clamp(2.4rem, 10vw, 3rem);
      }

      h2 {
          font-size: clamp(1.8rem, 8vw, 2.2rem);
      }

      .hero {
          padding-top: 110px;
      }

      nav {
          top: 16px;
          width: calc(100% - 24px);
          padding: 0 20px;
          height: 56px;
      }

      nav.scrolled {
          top: 12px;
      }

      .logos-section {
          padding: 36px 20px;
      }

      .logos-row {
          gap: 16px 24px;
      }

      .logo-pill {
          font-size: .95rem;
      }

      .ind-grid {
          grid-template-columns: 1fr;
      }

      .footer-inner {
          grid-template-columns: 1fr;
      }

      footer {
          padding: 48px 22px 32px;
      }

      section {
          padding: 72px 22px;
      }

      .hero-actions {
          flex-direction: column;
          width: 100%;
          max-width: 300px;
      }

      .hero-actions a {
          width: 100%;
          justify-content: center;
      }

      .stat {
          min-width: 100%;
      }

      .cta-actions {
          flex-direction: column;
      }

      .cta-actions a {
          width: 100%;
          justify-content: center;
      }
  }

  /* ── CONTACT REDESIGN ── */
  /* ── CONTACT REDESIGN HARMONY ── */
  /* ── CONTACT SYNC WITH INDEX ── */
  .contact-hero {
      min-height: auto;
      padding-bottom: 80px;
  }

  .contact-main {
      padding-top: 0;
      padding-bottom: 120px;
  }

  .contact-hero .hero-bg {
      mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 50%, transparent 100%);
  }

  .contact-main-grid {
      max-width: 1200px;
      margin: 40px auto 0;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 40px;
      align-items: start;
      position: relative;
      z-index: 2;
  }

  .contact-hero-header {
      text-align: center;
      position: relative;
      z-index: 2;
  }

  /* Card Overrides within Sync */
  .contact-form-card.sol-card {
      padding: 48px;
      background: rgba(255, 255, 255, 0.06);
  }

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

  .contact-info-stack .sol-card {
      padding: 32px 40px;
      background: rgba(255, 255, 255, 0.04);
  }

  /* Form Styles Sync */
  .premium-form .form-group {
      margin-bottom: 24px;
  }

  .premium-form label {
      display: block;
      font-size: 0.82rem;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--stone);
      text-transform: uppercase;
      letter-spacing: .05em;
  }

  .premium-form input,
  .premium-form textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 14px 18px;
      color: #fff;
      font-size: 0.95rem;
      font-family: inherit;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .premium-form input:focus,
  .premium-form textarea:focus {
      outline: none;
      border-color: var(--accent-light);
      background: rgba(255, 255, 255, 0.08);
  }

  @media (max-width: 991px) {
      .contact-main-grid {
          grid-template-columns: 1fr;
      }
  }

  .office-info-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 32px;
  }

  .office-info-item {
      display: flex;
      gap: 16px;
  }

  .office-info-item i {
      color: #3B82F6;
      width: 20px;
      height: 20px;
      margin-top: 2px;
  }

  .office-info-item span {
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.5;
  }

  .office-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
  }

  .gallery-img {
      height: 100px;
      border-radius: 12px;
      background: #222;
  }

  @media (max-width: 1024px) {
      .contact-main-grid {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 768px) {

      .contact-form-card,
      .info-card {
          padding: 32px 24px;
      }
  }

  /* Testimonials Premium */
  .testimonials-wide {
      background: var(--ink);
      padding: 120px 60px;
  }

  .testi-grid-custom {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
  }

  .testi-card-premium {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 48px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.3s;
  }

  .testi-card-premium:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.05);
  }

  .premium-quote {
      font-size: 1.35rem;
      line-height: 1.5;
      color: #fff;
      font-weight: 300;
      margin-bottom: 40px;
      font-style: italic;
      letter-spacing: -.01em;
  }

  .testi-user {
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
  }

  .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 0.9rem;
      color: var(--ink);
  }

  .user-name {
      color: #fff;
      font-weight: 600;
      font-size: 1.05rem;
  }

  .user-role {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.85rem;
      margin-top: 2px;
  }

  .quote-icon {
      margin-left: auto;
      color: rgba(196, 18, 48, 0.2);
  }

  /* Map Section */
  .map-section {
      padding: 100px 60px;
      background: var(--cream);
  }

  .map-container {
      max-width: 1200px;
      margin: 0 auto;
  }

  .map-frame {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--sand);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  }

  .map-info-overlay {
      position: absolute;
      top: 24px;
      left: 24px;
      background: #fff;
      padding: 24px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      z-index: 10;
      width: 300px;
      display: flex;
      justify-content: space-between;
  }

  .map-address strong {
      font-size: 1.1rem;
      display: block;
      margin-bottom: 4px;
  }

  .map-address p {
      font-size: 0.85rem;
      color: var(--ink-soft);
      line-height: 1.4;
      margin-bottom: 12px;
  }

  .no-reviews {
      font-size: 0.75rem;
      color: var(--accent);
      text-decoration: none;
  }

  .map-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .map-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-pale);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }

  .map-placeholder {
      height: 450px;
  }

  /* Animations Helper */
  .gsap-reveal,
  .testi-card-premium {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
  }

  .gsap-reveal.in-view,
  .testi-card-premium.in-view {
      opacity: 1;
      transform: translateY(0);
  }

  @media (max-width: 768px) {
      .meeting-meta {
          grid-template-columns: 1fr;
          gap: 16px;
      }

      .calendar-days-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .testi-grid-custom {
          grid-template-columns: 1fr;
      }

      .testi-card-premium {
          padding: 32px;
      }

      .map-info-overlay {
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          border-radius: 0;
          box-shadow: none;
          border-bottom: 1px solid var(--sand);
      }
  }

  /* ── CONTACT FORM SECTION ─────────────────────── */
  .contact-form-section {
      background: var(--cream);
      padding: 100px 60px;
  }

  .contact-form-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 480px;
      gap: 60px;
      align-items: start;
  }

  /* Form Column */
  .cf-form-col h2 {
      max-width: 100%;
      margin-bottom: 40px;
      line-height: 1.15;
  }

  .cf-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .cf-field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .cf-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .cf-field label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: .01em;
  }

  .cf-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
  }

  .cf-input-icon {
      position: absolute;
      left: 14px;
      width: 16px;
      height: 16px;
      color: var(--stone);
      pointer-events: none;
      flex-shrink: 0;
      top: 50%;
      transform: translateY(-50%);
  }

  .cf-textarea-wrap .cf-textarea-icon {
      top: 17px;
      transform: none;
  }

  .cf-input-wrap input,
  .cf-input-wrap textarea {
      width: 100%;
      padding: 13px 16px 13px 42px;
      border: 1.5px solid var(--sand);
      border-radius: 12px;
      background: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .93rem;
      color: var(--ink);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
      resize: none;
  }

  .cf-input-wrap input::placeholder,
  .cf-input-wrap textarea::placeholder {
      color: var(--stone);
      font-weight: 300;
  }

  .cf-input-wrap input:focus,
  .cf-input-wrap textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(196, 18, 48, 0.09);
  }

  .cf-input-wrap input:focus~.cf-input-icon,
  .cf-input-wrap textarea:focus~.cf-input-icon {
      color: var(--accent);
  }

  .cf-submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 15px 32px;
      border-radius: 12px;
      background: var(--accent);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .975rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(196, 18, 48, 0.3);
      transition: all .25s;
      width: 100%;
      margin-top: 4px;
  }

  .cf-submit-btn:hover:not(:disabled) {
      background: #A30F28;
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(196, 18, 48, 0.38);
  }

  .cf-submit-btn:disabled {
      opacity: 0.75;
      cursor: not-allowed;
  }

  .cf-btn-text,
  .cf-btn-loading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
  }

  .cf-spinner {
      width: 17px;
      height: 17px;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: cfSpin .7s linear infinite;
      flex-shrink: 0;
  }

  @keyframes cfSpin {
      to {
          transform: rotate(360deg);
      }
  }

  .cf-privacy {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .8rem;
      color: var(--ink-muted);
      font-weight: 300;
      line-height: 1.5;
  }

  .cf-privacy a {
      color: var(--accent);
      text-decoration: none;
  }

  .cf-privacy a:hover {
      text-decoration: underline;
  }

  .cf-success {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--green-pale);
      border: 1.5px solid rgba(22, 163, 74, 0.25);
      border-radius: 14px;
      padding: 18px 20px;
      animation: fadeUp .4s ease;
  }

  .cf-success strong {
      display: block;
      font-size: .95rem;
      color: var(--green);
      margin-bottom: 2px;
  }

  .cf-success p {
      font-size: .84rem;
      color: var(--ink-muted);
      margin: 0;
  }

  /* Info Column */
  .cf-info-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: sticky;
      top: 110px;
  }

  /* Benefits Card */
  .cf-benefits-card {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(26, 25, 22, 0.05);
  }

  .cf-benefits-header {
      background: linear-gradient(135deg, var(--accent) 0%, #DC143C 100%);
      padding: 24px 28px;
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .cf-benefits-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .cf-benefits-header h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.35rem;
      color: #fff;
      letter-spacing: -.015em;
  }

  .cf-benefits-list {
      list-style: none;
      padding: 20px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
  }

  .cf-benefits-list li {
      display: flex;
      gap: 14px;
      align-items: flex-start;
  }

  .cf-benefit-ico {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .cf-benefits-list li div strong {
      display: block;
      font-size: .9rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 2px;
  }

  .cf-benefits-list li div span {
      font-size: .82rem;
      color: var(--ink-muted);
      font-weight: 300;
      line-height: 1.5;
  }

  /* Contact Details */
  .cf-contact-details {
      background: #fff;
      border: 1px solid var(--sand);
      border-radius: 20px;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 4px 16px rgba(26, 25, 22, 0.04);
  }

  .cf-detail-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
  }

  .cf-detail-ico {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--off-white);
      border: 1px solid var(--sand);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .cf-detail-label {
      display: block;
      font-size: .74rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--stone);
      margin-bottom: 3px;
  }

  .cf-detail-value {
      font-size: .9rem;
      color: var(--ink-soft);
      line-height: 1.55;
      font-weight: 400;
  }

  /* Responsive */
  @media (max-width: 900px) {
      .contact-form-inner {
          grid-template-columns: 1fr;
          gap: 40px;
      }

      .cf-info-col {
          position: static;
      }

      .cf-field-row {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 600px) {
      .contact-form-section {
          padding: 70px 24px;
      }

      .cf-benefits-header {
          padding: 20px 22px;
      }

      .cf-benefits-list {
          padding: 16px 20px 20px;
      }
  }
/* --- FOOTER MOBILE FIXES OVERRIDES --- */
@media (max-width: 900px) {
    .footer-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }
    .footer-brand {
        grid-column: 1 / -1 !important;
        text-align: center;
        margin-bottom: 20px;
    }
    .footer-brand p {
        margin: 0 auto;
    }
    .footer-social {
        justify-content: center;
    }
}
@media (max-width: 550px) {
    .footer-inner {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center;
    }
    .footer-col {
        align-items: center;
    }
    .footer-col ul {
        align-items: center;
    }
}