/* Envuelta en `@layer webflow` por la refactorización de componentes
   compartidos.
 *
 * Estas hojas redefinen nombres de utilidad que Tailwind también usa: .hidden,
 * .flex, .grid, .block, .gap-*, .text-*. Al cargarse después de Tailwind le
 * ganaban por orden de cascada, y el header y el footer compartidos entraban en
 * una página Webflow con su menú en `hidden` y el `min-[1000px]:flex` que debía
 * revertirlo perdiendo la discusión: el menú no aparecía nunca.
 *
 * Dentro de una capa se acaba el conflicto. Cualquier regla fuera de capa gana a
 * cualquier regla dentro de capa, sin importar especificidad ni orden de carga,
 * así que Tailwind gana siempre y estas hojas siguen estilando todo lo demás
 * exactamente igual que antes: entre ellas la cascada no cambia, porque todas
 * están en la misma capa.
 *
 * El puesto de la capa lo reserva `@layer webflow;` en globals.css, declarado
 * antes que las capas de Tailwind.
 */
@layer webflow {

    * { font-family: 'Inter', sans-serif; }
    .text-block-100 { font-family: 'Russo One', sans-serif !important; }

    /* Country Selector */
    .country-selector {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-left: 12px;
    }
    .country-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #e5e5e5;
      background: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: all 0.2s ease;
    }
    .country-btn:hover {
      border-color: #141414;
    }
    .country-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      padding-top: 8px;
      background: transparent;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
      z-index: 1000;
    }
    .country-dropdown-inner {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      min-width: 180px;
      overflow: hidden;
    }
    .country-selector:hover .country-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .country-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      font-weight: 500;
      transition: background 0.2s ease;
    }
    .country-option:hover {
      background: #f5f5f5;
    }
    .country-option.active {
      background: #f0f0f0;
    }
    .country-option span.flag {
      font-size: 20px;
    }

    /* Geist font for headings */
    .heading-style-h1,
    .heading-style-h1 *,
    .heading-style-h1 span,
    .hero-heading,
    .hero-heading *,
    .hero-heading span,
    .h3-heading-17,
    .ps-title,
    h1, h1 *, h1 span,
    h2, h2 *, h2 span,
    h3, h4 {
      font-family: 'Geist', sans-serif !important;
    }

    /* Hero heading specific styles (same as SaaS) */
    .heading-style-h1.hero-heading {
      font-size: 55px !important;
      font-weight: 500 !important;
      line-height: 1.1 !important;
      letter-spacing: -0.02em !important;
      color: #0f172a !important;
    }

    .heading-style-h1.hero-heading *,
    .heading-style-h1.hero-heading span {
      font-family: 'Geist', sans-serif !important;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
    }

    /* Colombia specific styles */
    .colombia-section { padding: 80px 0; }
    .colombia-section.gray-bg { background: #f8f9fa; }
    .colombia-section.dark-bg { background: #0a0a0a; color: #fff; }

    .colombia-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

    .colombia-hero { padding: 100px 0 60px; background: #fff; }
    .colombia-hero .hero-container { max-width: 900px; margin: 0 auto; text-align: center; }

    .hero-tag {
      display: inline-block;
      font-family: 'Geist Mono', monospace;
      background: #f5f5f5;
      color: #1a1a1a;
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 12px;
      border: 1px solid #e5e5e5;
      letter-spacing: -0.01em;
    }

    .hero-cta-black {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #141414;
      color: #fff;
      padding: 16px 28px;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .hero-cta-black:hover {
      background: #000;
      transform: translateY(-1px);
    }
    .hero-cta-black svg {
      width: 18px;
      height: 18px;
      transition: transform 0.2s ease;
    }
    .hero-cta-black:hover svg {
      transform: translateX(3px);
    }

    .ps-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      margin-top: 50px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
    @media (max-width: 768px) {
      .ps-grid { grid-template-columns: 1fr; gap: 40px; }
    }

    .ps-column {}
    .ps-title {
      font-size: 20px;
      font-weight: 600;
      color: #111;
      margin-bottom: 32px;
      text-align: center;
    }
    .ps-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 32px;
    }
    .ps-solution-card {
      background: #f5f5f5;
      border-radius: 16px;
    }
    .ps-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      font-size: 15px;
      color: #374151;
      line-height: 1.5;
      min-height: 44px;
    }
    .ps-icon-x {
      font-size: 18px;
      color: #c4c4c4;
      flex-shrink: 0;
      margin-top: 0;
      font-weight: 300;
    }
    .ps-icon-sol {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      margin-top: 0;
      color: #111;
    }
    .ps-icon-sol svg {
      width: 22px;
      height: 22px;
      color: #111;
    }

    /* Scroll Animations */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-up-delay-1 { transition-delay: 0.1s; }
    .fade-up-delay-2 { transition-delay: 0.2s; }
    .fade-up-delay-3 { transition-delay: 0.3s; }

    /* Dark tag for dark sections */
    .hero-tag-dark {
      display: inline-block;
      font-family: 'Geist Mono', monospace;
      background: #2a2a2a;
      color: #fff;
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 12px;
      border: 1px solid #3a3a3a;
      letter-spacing: -0.01em;
    }

    /* Dark benefits grid */
    .benefits-grid-dark {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 60px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
    @media (max-width: 900px) {
      .benefits-grid-dark { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .benefits-grid-dark { grid-template-columns: 1fr; }
    }

    .benefit-card-dark {
      text-align: left;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 28px;
    }
    .benefit-icon-dark {
      width: 48px;
      height: 48px;
      background: rgba(255,255,255,0.08);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: #fff;
    }
    .benefit-icon-dark svg {
      width: 24px;
      height: 24px;
    }
    .benefit-card-dark h4 {
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 10px;
    }
    .benefit-card-dark p {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
    }

    .features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      margin-top: 48px;
    }
    @media (max-width: 768px) {
      .features-grid { grid-template-columns: 1fr; gap: 40px; }
    }
    .features-list { list-style: none; padding: 0; margin: 24px 0 0; }
    .features-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid #f3f4f6;
    }
    .features-list li:last-child { border-bottom: none; }
    .features-list .check-black {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      color: #111;
    }
    .features-list .check-black svg { width: 20px; height: 20px; }
    .features-list li span { font-size: 15px; color: #374151; }

    .features-image {
      width: 100%;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    /* Transaction Animation */
    .transaction-animation-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .transaction-scroll-container {
      position: relative;
      width: 100%;
      max-width: 380px;
      height: 400px;
      overflow: hidden;
      background: #fff;
      border-radius: 20px;
      border: 1px solid #e5e5e5;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }
    .transaction-scroll {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
    }
    .transaction-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: #fff;
      margin: 5px 14px;
      border-radius: 12px;
      border: 1px solid #eee;
      transition: all 0.4s ease;
      opacity: 0.3;
      transform: scale(0.96);
    }
    .transaction-item.active {
      opacity: 1;
      transform: scale(1);
      border-color: #044737;
      box-shadow: 0 4px 20px rgba(4,71,55,0.15);
    }
    .tx-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .tx-icon svg {
      width: 18px;
      height: 18px;
    }
    .tx-icon.pending {
      background: #f3f4f6;
      color: #9ca3af;
    }
    .tx-icon.success {
      background: #cef17b;
      color: #1a1a1a;
    }
    .tx-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .tx-name {
      font-size: 13px;
      font-weight: 500;
      color: #111;
    }
    .tx-amount {
      font-size: 12px;
      color: #888;
    }
    .tx-status {
      font-size: 11px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 20px;
      transition: all 0.3s ease;
    }
    .tx-status.pending {
      background: #f3f4f6;
      color: #6b7280;
    }
    .tx-status.success {
      background: #cef17b;
      color: #1a1a1a;
    }

    /* New Process Steps */
    .process-steps-new {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 60px;
    }
    @media (max-width: 900px) {
      .process-steps-new { flex-direction: column; }
      .step-arrow { transform: rotate(90deg); }
    }
    .step-card-new {
      background: #fff;
      border-radius: 20px;
      padding: 28px;
      width: 280px;
      border: 1px solid #e5e5e5;
      box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }
    .step-label {
      font-family: 'Geist Mono', monospace;
      font-size: 11px;
      color: #9ca3af;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }
    .step-title {
      font-size: 18px;
      font-weight: 600;
      color: #111;
      margin-bottom: 20px;
    }
    .step-illustration {
      background: #f5f5f5;
      border-radius: 12px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .step-tag {
      display: inline-block;
      background: #f5f5f5;
      color: #374151;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 14px;
      border-radius: 20px;
      margin-top: 16px;
    }
    .step-arrow {
      color: #d1d5db;
      flex-shrink: 0;
    }
    .step-arrow svg {
      width: 24px;
      height: 24px;
    }

    /* Illustration 1 - Connect */
    .illus-connect {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .illus-window {
      width: 120px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .illus-window-bar {
      background: #e5e5e5;
      padding: 6px 8px;
      display: flex;
      gap: 4px;
    }
    .illus-window-bar span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ccc;
    }
    .illus-window-content {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .illus-icon-link {
      width: 32px;
      height: 32px;
      color: #9ca3af;
      animation: pulse-icon 2s ease-in-out infinite;
    }
    @keyframes pulse-icon {
      0%, 100% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.1); opacity: 1; }
    }
    .illus-card-float {
      position: absolute;
      right: 30px;
      bottom: 25px;
      background: #fff;
      padding: 10px 14px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      animation: float-card 3s ease-in-out infinite;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes float-card {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .illus-stripe-logo {
      width: 24px;
      height: 10px;
      color: #635bff;
    }

    /* Illustration 2 - Config */
    .illus-config {
      width: 140px;
      padding: 15px;
      position: relative;
    }
    .illus-form-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .illus-form-label {
      width: 40px;
      height: 8px;
      background: #ddd;
      border-radius: 4px;
    }
    .illus-form-label.short { width: 30px; }
    .illus-form-input {
      flex: 1;
      height: 24px;
      background: #fff;
      border-radius: 6px;
      border: 1px solid #e5e5e5;
    }
    .illus-form-toggle {
      width: 36px;
      height: 20px;
      background: #cef17b;
      border-radius: 10px;
      padding: 2px;
      display: flex;
      justify-content: flex-end;
    }
    .toggle-dot {
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      animation: toggle-move 2s ease-in-out infinite;
    }
    @keyframes toggle-move {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(-16px); }
    }
    .illus-check-float {
      position: absolute;
      right: -10px;
      top: 10px;
      width: 28px;
      height: 28px;
      background: #cef17b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1a1a1a;
      animation: pop-in 2s ease-in-out infinite;
    }
    .illus-check-float svg { width: 14px; height: 14px; }
    @keyframes pop-in {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    /* Illustration 3 - Auto invoicing */
    .illus-auto {
      position: relative;
      width: 140px;
      height: 120px;
    }
    .illus-invoice {
      position: absolute;
      width: 80px;
      background: #fff;
      border-radius: 6px;
      padding: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }
    .illus-invoice-header {
      width: 50%;
      height: 6px;
      background: #e5e5e5;
      border-radius: 3px;
      margin-bottom: 8px;
    }
    .illus-invoice-line {
      width: 100%;
      height: 4px;
      background: #f3f4f6;
      border-radius: 2px;
      margin-bottom: 5px;
    }
    .illus-invoice-line.short { width: 60%; }
    .illus-invoice:nth-child(1) {
      left: 0;
      top: 10px;
      opacity: 0.4;
      transform: scale(0.9);
    }
    .illus-invoice-2 {
      left: 20px;
      top: 20px;
      opacity: 0.7;
      transform: scale(0.95);
    }
    .illus-invoice-3 {
      left: 40px;
      top: 30px;
      opacity: 1;
      animation: invoice-stack 3s ease-in-out infinite;
    }
    @keyframes invoice-stack {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    .illus-dian-badge {
      position: absolute;
      right: -15px;
      top: -8px;
      background: #cef17b;
      color: #1a1a1a;
      font-size: 9px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 10px;
      animation: badge-pulse 2s ease-in-out infinite;
    }
    @keyframes badge-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .faq-container { max-width: 800px; margin: 48px auto 0; }
    .faq-item {
      background: #fff;
      border-radius: 12px;
      margin-bottom: 12px;
      border: 1px solid #e5e7eb;
      overflow: hidden;
    }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      color: #111;
    }
    .faq-question:hover { color: #044737; }
    .faq-icon { transition: transform 0.3s; }
    .faq-item.active .faq-icon { transform: rotate(45deg); }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .faq-item.active .faq-answer { max-height: 200px; }
    .faq-answer-content {
      padding: 0 24px 20px;
      font-size: 15px;
      color: #6b7280;
      line-height: 1.7;
    }

    /* New FAQ Grid Styles */
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    @media (max-width: 768px) {
      .faq-grid { grid-template-columns: 1fr; }
    }
    .faq-column {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-item-new {
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 16px;
      overflow: hidden;
      transition: border-color 0.2s ease;
    }
    .faq-item-new:hover {
      border-color: #d1d1d1;
    }
    .faq-item-new.active {
      border-color: #111;
    }
    .faq-question-new {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 24px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 500;
      color: #111;
      transition: color 0.2s ease;
    }
    .faq-question-new:hover {
      color: #333;
    }
    .faq-question-new span:first-child {
      flex: 1;
      padding-right: 16px;
    }
    .faq-icon-new {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #9ca3af;
      transition: transform 0.3s ease, color 0.2s ease;
    }
    .faq-icon-new svg {
      width: 18px;
      height: 18px;
    }
    .faq-item-new.active .faq-icon-new {
      transform: rotate(45deg);
      color: #111;
    }
    .faq-answer-new {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .faq-item-new.active .faq-answer-new {
      max-height: 200px;
    }
    .faq-answer-new p {
      padding: 0 24px 22px;
      font-size: 14px;
      color: #6b7280;
      line-height: 1.7;
      margin: 0;
    }

    .cta-section {
      background: linear-gradient(135deg, #044737 0%, #065f46 100%);
      padding: 80px 0;
      text-align: center;
    }
    .cta-section h2 { color: #fff; margin-bottom: 16px; }
    .cta-section p { color: rgba(255,255,255,0.85); margin-bottom: 32px; font-size: 18px; }
    .cta-section .button-primary-12 {
      background: #fff !important;
      color: #044737 !important;
    }

    /* New CTA Section */
    .cta-section-new {
      background: #fff;
      padding: 80px 0 100px;
    }
    .cta-card-dark {
      background: #141414;
      border-radius: 24px;
      padding: 100px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-decorations {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }
    .cta-dash {
      position: absolute;
      width: 20px;
      height: 2px;
      background: rgba(255,255,255,0.15);
      border-radius: 1px;
    }
    .cta-button-white {
      display: inline-block;
      background: #fff;
      color: #141414;
      padding: 16px 32px;
      border-radius: 100px;
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .cta-button-white:hover {
      background: #f5f5f5;
      transform: translateY(-2px);
    }
    .cta-btn-white {
      background: #fff !important;
      color: #141414 !important;
      border-color: #fff !important;
    }
    .cta-btn-white:hover {
      background: #f0f0f0 !important;
      color: #141414 !important;
    }

    .section-header { text-align: center; max-width: 700px; margin: 0 auto; }
    .section-header.left { text-align: left; max-width: none; }

    .dark-bg h1,
    .dark-bg h2,
    .dark-bg h3,
    .dark-bg h4,
    .dark-bg .h3-heading-17,
    .dark-bg .heading-style-h1,
    .dark-bg .hero-heading,
    .dark-bg .heading-style-h1.hero-heading,
    .colombia-section.dark-bg h1,
    .colombia-section.dark-bg h2,
    .colombia-section.dark-bg h3,
    .colombia-section.dark-bg .heading-style-h1,
    .colombia-section.dark-bg .hero-heading {
      color: #ffffff !important;
    }
    .dark-bg .text-size-medium-3 { color: rgba(255,255,255,0.8); }
    .dark-bg p { color: rgba(255,255,255,0.7); }
    .dark-bg .benefit-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
    .dark-bg .benefit-card h4 { color: #fff; }
    .dark-bg .benefit-card p { color: rgba(255,255,255,0.7); }
    .dark-bg .benefit-card .icon-wrap { background: rgba(206,237,178,0.15); }

    /* WhatsApp Button */
    .whatsapp-bubble {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 60px;
      height: 60px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: transform 0.2s;
      z-index: 1000;
    }
    .whatsapp-bubble:hover { transform: scale(1.05); }
    .whatsapp-bubble svg { width: 32px; height: 32px; }

    /* New Hero Styles - Using Design System (same as SaaS) */
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Geist Mono', monospace;
      background: #ffffff !important;
      color: #1a1a1a;
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      letter-spacing: -0.01em;
    }

    .social-proof {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
    }
    .avatars-group {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .avatars-group .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #fafafa;
      margin-left: -8px;
      object-fit: cover;
      display: block;
    }
    .avatars-group .avatar:first-child {
      margin-left: 0;
    }
    .social-proof-text {
      font-size: 14px;
      color: #6b7280;
      font-weight: 500;
      display: flex;
      align-items: center;
      height: 28px;
    }

    .hero-features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-10);
      margin-top: var(--space-20);
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
      align-items: start;
      justify-items: center;
    }
    @media (max-width: 900px) {
      .hero-features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
      .hero-feature-card {
        max-width: 100%;
        margin: 0 auto;
      }
    }

    .hero-feature-card {
      text-align: center !important;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center !important;
      justify-content: flex-start;
    }
    .feature-icon-circle {
      width: 64px;
      height: 64px;
      background: #141414;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px auto;
      color: #fff;
    }
    .feature-icon-circle svg {
      width: 28px;
      height: 28px;
    }
    .feature-title {
      font-family: 'Geist', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #0f172a;
      margin: 0 0 8px 0;
      line-height: 1.25;
      text-align: center !important;
    }
    .feature-description {
      font-size: 15px;
      color: #6b7280;
      line-height: 1.5;
      margin: 0;
      text-align: center !important;
    }

    /* Responsive adjustments for new hero (same as SaaS) */
    @media (max-width: 991px) {
      .heading-style-h1.hero-heading {
        font-size: 40px !important;
      }
      .hero-features-grid {
        margin-top: var(--space-16);
      }
    }

    @media (max-width: 767px) {
      .heading-style-h1.hero-heading {
        font-size: 32px !important;
        line-height: 1.15 !important;
      }
      .hero-features-grid {
        margin-top: var(--space-12);
      }
      .hero-tag {
        font-size: 12px !important;
        padding: 6px 14px !important;
      }
    }

    @media (max-width: 479px) {
      .heading-style-h1.hero-heading {
        font-size: 28px !important;
      }
      .hero-tag {
        font-size: 11px !important;
        padding: 5px 12px !important;
      }
    }

    /* Modal Styles */
    body.modal-open .navigation-component {
      visibility: hidden;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(30,30,30,0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    }
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .modal-container {
      background: #fff;
      border-radius: 20px;
      padding: 36px;
      max-width: 380px;
      width: 90%;
      position: relative;
      transform: scale(0.9) translateY(30px);
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      margin: 40px 20px;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
    .modal-overlay.active .modal-container {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border: none;
      background: #f5f5f5;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .modal-close:hover {
      background: #e5e5e5;
      transform: rotate(90deg);
    }
    .modal-close svg {
      width: 18px;
      height: 18px;
      color: #666;
    }
    .modal-content {
      text-align: center;
    }
    /* Phone input styles */
    .iti {
      width: 100%;
    }
    .iti__flag-container {
      padding-left: 4px;
    }
    .iti__selected-flag {
      padding: 0 8px 0 10px;
    }
    .iti--separate-dial-code .iti__selected-flag {
      background: transparent;
    }
    .iti__country-list {
      max-height: 200px;
      border-radius: 10px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
    .form-group .iti input {
      padding-left: 90px;
    }
    .form-error {
      color: #dc2626;
      font-size: 12px;
      margin-top: 6px;
      display: none;
    }
    .form-group.error input {
      border-color: #dc2626;
    }
    .form-group.error .form-error {
      display: block;
    }
    .modal-title {
      font-family: 'Geist', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #111;
      margin: 0 0 24px;
      line-height: 1.2;
    }
    .modal-form {
      text-align: left;
    }
    .form-group {
      margin-bottom: 16px;
    }
    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }
    .form-group input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }
    .form-group input:focus {
      outline: none;
      border-color: #141414;
      box-shadow: 0 0 0 3px rgba(20,20,20,0.1);
    }
    .form-group input::placeholder {
      color: #aaa;
    }
    .modal-submit {
      width: 100%;
      margin-top: 8px;
      justify-content: center;
    }
    .modal-disclaimer {
      font-size: 12px;
      color: #999;
      margin: 20px 0 0;
      text-align: center;
    }

    /* Success State */
    .modal-success {
      display: none;
      text-align: center;
      padding: 20px 0;
    }
    .modal-success.active {
      display: block;
      animation: success-appear 0.5s ease forwards;
    }
    @keyframes success-appear {
      0% { opacity: 0; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1); }
    }
    .modal-content.hidden {
      display: none;
    }
    .success-icon {
      width: 80px;
      height: 80px;
      background: #cef17b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      animation: success-bounce 0.6s ease;
    }
    @keyframes success-bounce {
      0% { transform: scale(0); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    .success-icon svg {
      width: 40px;
      height: 40px;
      color: #1a1a1a;
      animation: check-draw 0.4s ease 0.3s forwards;
      stroke-dasharray: 50;
      stroke-dashoffset: 50;
    }
    @keyframes check-draw {
      to { stroke-dashoffset: 0; }
    }
}