/* Specific styles for landing page */
    .hero {
      text-align: center;
      padding: var(--sp-32) 0 0;
    }

    .capsule {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-8);
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: var(--sp-24);
    }

    .capsule-success {
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: var(--success);
    }

    .capsule-accent {
      background: var(--active-glow);
      border: 1px solid rgba(99, 102, 241, 0.2);
      color: var(--text-primary);
      text-transform: none;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 16px;
      margin-top: var(--sp-24);
    }

    .hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 40px;
      font-weight: 900;
      letter-spacing: -1.2px;
      line-height: 1.18;
      max-width: 900px;
      margin: 0 auto var(--sp-24);
    }

    /* ── Cartes hero premium ──────────────────────────────────── */
    .hero-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-24);
      width: 100%;
      margin: var(--sp-32) auto 0;
      padding: 0 var(--sp-16);
    }

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

    .hero-card-pro {
      position: relative;
      overflow: hidden;
      text-align: left;
      padding: 26px 24px 24px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 45%),
        var(--surface);
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    /* Hairline d'accent en haut de carte */
    .hero-card-pro::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.9), transparent);
      opacity: .5;
      transition: opacity .25s ease;
    }

    /* Numéro d'étape en filigrane */
    .hero-card-pro__num {
      position: absolute;
      top: 14px;
      right: 20px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      color: var(--text-primary);
      opacity: .06;
      letter-spacing: -2px;
      user-select: none;
    }

    .hero-card-pro__head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .hero-card-pro__badge {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .hero-card-pro__badge .material-icons-round {
      font-size: 24px;
    }

    .hero-card-pro__title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 16px;
      letter-spacing: -.2px;
      line-height: 1.25;
      color: var(--text-primary);
    }

    .hero-card-pro__desc {
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-secondary);
      margin: 0;
    }

    .hero-card-pro:hover {
      transform: translateY(-4px);
      border-color: rgba(var(--accent-rgb), 0.45);
      box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), 0.28);
    }

    .hero-card-pro:hover::before {
      opacity: 1;
    }

    .hero-card-pro:hover .hero-card-pro__badge {
      transform: scale(1.06);
      box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.55);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-card-pro,
      .hero-card-pro__badge {
        transition: none;
      }

      .hero-card-pro:hover {
        transform: none;
      }
    }

    @media (max-width: 960px) {
      .hero-title {
        font-size: 27px;
        letter-spacing: -0.8px;
      }
    }

    .countdown-widget-premium {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-24);
      padding: 12px 24px;
      border-radius: 16px;
      background: rgba(249, 115, 22, 0.06);
      border: 1px solid rgba(249, 115, 22, 0.25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--warning);
      margin: 0;
      margin-top: var(--sp-12);
      max-width: 800px;
      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.05);
      transition: all 0.3s ease;
    }

    .countdown-widget-premium:hover {
      border-color: rgba(249, 115, 22, 0.4);
      box-shadow: 0 8px 30px rgba(249, 115, 22, 0.1);
      transform: translateY(-1px);
    }

    .countdown-content {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      text-align: left;
    }

    .countdown-content .alert-icon {
      font-size: 20px;
      animation: pulse-icon 2s infinite ease-in-out;
      flex-shrink: 0;
    }

    .countdown-content .banner-text {
      font-family: 'Roboto Mono', monospace;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
    }

    .btn-banner-contact {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-4);
      background: var(--warning);
      color: #0b0f19;
      border: none;
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
    }

    .btn-banner-contact:hover {
      background: #f97316;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
      transform: scale(1.03);
    }

    @keyframes pulse-icon {

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

      50% {
        opacity: 0.7;
        transform: scale(1.15);
      }
    }

    @media (max-width: 900px) {
      .countdown-widget-premium {
        flex-direction: column;
        gap: var(--sp-16);
        padding: var(--sp-16);
        width: calc(100% - var(--sp-32));
      }

      .countdown-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
      }

      .countdown-content .banner-text {
        font-size: 12px;
        text-align: center;
      }

      .btn-banner-contact {
        width: 100%;
        justify-content: center;
      }
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--sp-16);
      margin-bottom: var(--sp-24);
    }

    /* Social Proof Cards */
    .social-proof {
      padding: var(--sp-24) var(--sp-16);
      border-radius: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    .social-proof-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: 20px;
      text-align: center;
    }

    .social-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--sp-16);
    }

    .social-card {
      padding: var(--sp-16);
      border-radius: 16px;
      background: var(--overlay-bg);
      border: 1px solid var(--border);
      text-align: left;
    }

    .social-card-header {
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .social-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .social-quote {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.4;
      font-style: italic;
    }

    /* Persona Selector */
    .section-header {
      text-align: center;
      margin: 0 0 var(--sp-40);
    }

    .section-label {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 2.5px;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: var(--sp-12);
    }

    .section-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    @media (max-width: 768px) {
      .section-title {
        font-size: 24px;
      }
    }

    .persona-tabs {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: var(--sp-12);
      margin-bottom: var(--sp-40);
      overflow-x: auto;
      width: 100%;
      padding: 4px;
      scrollbar-width: none;
    }

    .persona-tabs::-webkit-scrollbar {
      display: none;
    }

    @media (min-width: 901px) {
      .persona-tabs {
        justify-content: center;
      }
    }

    .persona-tab {
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      padding: 14px 20px;
      border-radius: 12px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .persona-tab:hover {
      border-color: var(--accent);
    }

    .persona-tab-name {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-secondary);
    }

    .persona-tab-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 400;
      color: var(--text-secondary);
      display: none;
    }

    @media (min-width: 768px) {
      .persona-tab-subtitle {
        display: inline;
      }
    }

    .persona-tab-desc {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .persona-tab.active {
      background: var(--active-glow);
      border-color: var(--active-color, var(--accent));
    }

    .persona-tab.active .persona-tab-name {
      color: var(--text-primary);
    }

    .persona-panel {
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-32);
      text-align: left;
      display: flex;
      gap: var(--sp-48);
      min-height: 320px;
      box-shadow: 0 8px 32px var(--shadow-color);
      transition: all 0.25s ease;
    }

    @media (max-width: 900px) {
      .persona-panel {
        flex-direction: column;
        padding: var(--sp-20);
        gap: var(--sp-24);
      }
    }

    .persona-left {
      flex: 4;
    }

    .persona-right {
      flex: 5;
    }

    .persona-panel-divider {
      width: 1px;
      background: var(--border);
      align-self: stretch;
    }

    @media (max-width: 900px) {
      .persona-panel-divider {
        display: none;
      }
    }

    .persona-panel-header {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      margin-bottom: var(--sp-20);
    }

    .persona-icon-container {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--active-glow);
      color: var(--active-color, var(--accent));
    }

    .persona-panel-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 800;
    }

    .persona-pain {
      font-size: 15px;
      font-weight: 500;
      font-style: italic;
      color: var(--text-primary);
      margin-bottom: var(--sp-12);
      line-height: 1.4;
      opacity: 0.9;
    }

    .persona-hook {
      font-size: 13px;
      font-weight: 700;
      font-style: italic;
      color: var(--active-color, var(--accent));
      margin-bottom: var(--sp-24);
    }

    .persona-label-accent {
      font-size: 12px;
      font-weight: 800;
      color: var(--active-color, var(--accent));
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: var(--sp-8);
    }

    .persona-solution {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px;
      font-weight: 800;
    }

    .persona-features-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: var(--sp-16);
    }

    .feature-list {
      display: flex;
      flex-direction: column;
      gap: var(--sp-16);
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-12);
    }

    .feature-check-icon {
      color: var(--active-color, var(--accent));
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feature-item-text {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .feature-item-text strong {
      color: var(--text-primary);
    }

    .steer-cta-text {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--accent);
      margin: var(--sp-32) 0;
      text-align: center;
      line-height: 1.4;
    }

    /* Lock-In Section */
    .lock-in-card {
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-40);
      text-align: left;
      margin-bottom: var(--sp-48);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.03);
    }

    @media (max-width: 600px) {
      .lock-in-card {
        padding: var(--sp-20);
      }
    }

    .lock-in-header {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      margin-bottom: var(--sp-20);
    }

    .lock-in-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(249, 115, 22, 0.12);
      color: var(--warning);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lock-in-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .lock-in-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: var(--sp-24);
    }

    .lock-in-features-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-24);
    }

    .lock-in-feature-item {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 250px;
      flex: 1;
    }

    .lock-in-feature-item.wide {
      min-width: 320px;
      flex: 2;
    }

    .lock-in-feat-icon {
      color: var(--accent);
      flex-shrink: 0;
    }

    .lock-in-feat-text {
      font-size: 13px;
      font-weight: 600;
    }

    /* Ready Agents Section */
    .ready-agents-card {
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-40);
      text-align: left;
      margin-bottom: var(--sp-48);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.03);
    }

    .ready-agents-header {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      margin-bottom: var(--sp-20);
    }

    .ready-agents-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--active-glow);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ready-agents-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .ready-agents-intro {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: var(--sp-8);
      line-height: 1.4;
    }

    .ready-agents-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: var(--sp-28);
    }

    .agents-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-16);
      margin-bottom: 0;
    }

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

    .agent-card {
      padding: var(--sp-16);
      border-radius: 16px;
      background: var(--overlay-bg);
      border: 1px solid var(--border);
      display: flex;
      gap: var(--sp-14);
      align-items: flex-start;
    }

    .agent-icon-box {
      padding: var(--sp-8);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .agent-card-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: var(--sp-4);
    }

    .agent-card-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .ready-agents-alert {
      padding: var(--sp-12) var(--sp-16);
      background: var(--active-glow);
      border-radius: 16px;
      border: 1px solid rgba(99, 102, 241, 0.15);
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      font-size: 13px;
      font-weight: 700;
      margin-top: var(--sp-28);
    }

    #ready-alert-text {
      flex: 1;
      text-align: center;
    }

    @media (max-width: 900px) {
      .ready-agents-alert {
        justify-content: flex-start;
      }

      #ready-alert-text {
        text-align: left;
      }

      .ready-agents-card {
        padding: var(--sp-20);
      }
    }

    .ready-agents-alert-icon {
      color: var(--accent);
    }

    /* Services Table Section */
    .services-section {
      margin-bottom: var(--sp-48);
    }

    .services-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      margin-top: var(--sp-32);
    }

    .services-table th {
      background-color: var(--overlay-bg);
      padding: var(--sp-16) var(--sp-24);
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }

    .services-table td {
      padding: var(--sp-20) var(--sp-24);
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }

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

    .service-cell {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 14px;
    }

    .service-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(99, 102, 241, 0.1);
      flex-shrink: 0;
    }

    .service-desc-cell {
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .service-need-box {
      padding: var(--sp-8) var(--sp-12);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    @media (max-width: 900px) {
      .services-table {
        display: none;
      }

      .services-cards-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--sp-16);
        margin-top: var(--sp-32);
      }
    }

    @media (min-width: 901px) {
      .services-cards-mobile {
        display: none;
      }
    }

    .service-mobile-card {
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: var(--sp-16);
    }

    .service-mobile-header {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 15px;
      margin-bottom: var(--sp-12);
    }

    .service-mobile-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.45;
      margin-bottom: var(--sp-16);
    }

    .service-mobile-need {
      padding: var(--sp-12);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    .service-mobile-need-label {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: var(--sp-4);
      display: block;
    }

    .story-section {
      display: flex;
      gap: var(--sp-48);
      align-items: flex-start;
      margin-bottom: var(--sp-48);
    }

    .story-actions {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: var(--sp-16);
      margin-top: var(--sp-24);
    }

    @media (max-width: 900px) {
      .story-actions {
        justify-content: center;
      }
    }

    @media (max-width: 900px) {
      .story-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

    .story-left {
      width: 320px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--sp-24);
      align-items: center;
    }

    @media (max-width: 900px) {
      .story-left {
        display: none !important;
      }
    }

    .story-avatar {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
      border: 2px solid rgba(99, 102, 241, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
    }

    .story-avatar-inner {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: var(--surface);
      border: 1px solid var(--border);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story-avatar-img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    .whitepaper-card {
      width: 100%;
      padding: var(--sp-20);
      background-color: rgba(99, 102, 241, 0.05);
      border-radius: 16px;
      border: 1.5px solid rgba(99, 102, 241, 0.35);
      text-align: left;
    }

    .whitepaper-header {
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      margin-bottom: var(--sp-8);
    }

    .whitepaper-icon {
      color: var(--accent);
    }

    .whitepaper-desc {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: var(--sp-16);
      line-height: 1.4;
    }

    .story-content {
      flex-grow: 1;
      text-align: left;
    }

    .story-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: var(--sp-16);
    }

    .story-vision {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-style: italic;
      font-weight: 600;
      color: var(--accent);
      line-height: 1.4;
      margin-bottom: var(--sp-16);
    }

    .story-bio {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* Design Partner Section */
    .partner-section {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
      border: 1.5px dashed rgba(99, 102, 241, 0.4);
      border-radius: 24px;
      padding: var(--sp-32);
      margin-bottom: var(--sp-48);
    }

    .partner-header {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      margin-bottom: var(--sp-16);
    }

    .partner-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--active-glow);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .partner-title-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .partner-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .partner-spots {
      align-self: flex-start;
      padding: 2px 8px;
      background-color: rgba(239, 68, 68, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(239, 68, 68, 0.3);
      font-size: 10px;
      font-weight: 700;
      color: var(--danger);
    }

    .partner-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: var(--sp-24);
    }

    /* Contact Modal Specific Styles */
    .form-input-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .form-input-container .form-input {
      padding-left: 48px;
    }

    .form-input-container .form-input-icon {
      position: absolute;
      left: 16px;
      color: var(--text-secondary);
      font-size: 20px;
      pointer-events: none;
    }

    select.form-input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 20px;
      padding-right: 40px;
      cursor: pointer;
    }

    .challenge-chips-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .challenge-chip {
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid var(--border);
      background-color: rgba(255, 255, 255, 0.03);
      color: var(--text-secondary);
    }

    [data-theme="light"] .challenge-chip {
      background-color: rgba(0, 0, 0, 0.02);
    }

    .challenge-chip:hover {
      border-color: var(--text-secondary);
    }

    .challenge-chip.selected {
      background-color: rgba(99, 102, 241, 0.15);
      border-color: var(--accent);
      border-width: 1.5px;
      color: var(--text-primary);
      font-weight: 700;
      padding: 7.5px 13.5px;
    }

    .form-error-msg {
      color: var(--danger);
      font-size: 11px;
      margin-top: 4px;
      display: none;
    }

    .form-group.has-error .form-error-msg {
      display: block;
    }

    .form-group.has-error .form-input {
      border-color: var(--danger);
    }

    /* Spinner */
    .spinner-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 48px;
    }

    .form-input-spinner {
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      border-top-color: var(--accent);
      animation: form-spinner-spin 1s linear infinite;
    }

    @keyframes form-spinner-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Toast Notification */
    .toast-notification {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background-color: var(--surface);
      border: 1.5px solid var(--accent);
      border-radius: 16px;
      padding: 16px 20px;
      box-shadow: 0 10px 30px var(--shadow-color);
      z-index: 2000;
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      transform: translateY(100px);
      opacity: 0;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      max-width: 380px;
    }

    .toast-notification.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast-icon {
      color: var(--accent);
      font-size: 24px;
    }

    .toast-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }

    .toast-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .toast-msg {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* Global footer styles handled by exec_theme.css */

    /* macOS-style Cockpit Window Styles */
    .cockpit-window {
      /* Custom variables mapping exactly to Flutter ExecutiveTheme specifications */
      --cockpit-bg: var(--surface);
      --cockpit-border: var(--border);
      --cockpit-sidebar-bg: rgba(255, 255, 255, 0.01);
      --cockpit-main-bg: var(--surface);
      --cockpit-titlebar-bg: rgba(255, 255, 255, 0.02);
      --cockpit-text-primary: var(--text-primary);
      --cockpit-text-secondary: var(--text-secondary);
      --cockpit-active-bg: rgba(99, 102, 241, 0.1);
      --cockpit-active-text: var(--text-primary);
      --cockpit-category-text: var(--text-secondary);

      display: flex;
      flex-direction: column;
      width: 850px;
      height: 620px;
      border-radius: 20px;
      overflow: hidden;
      background-color: var(--cockpit-bg);
      border: 1.5px solid var(--cockpit-border);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 64px rgba(99, 102, 241, 0.1);
    }

    [data-theme="dark"] .cockpit-window {
      --cockpit-bg: #0B0F19;
      --cockpit-border: #1E293B;
      --cockpit-sidebar-bg: #0B0F19;
      --cockpit-main-bg: #070A13;
      --cockpit-titlebar-bg: #0F172A;
      --cockpit-text-primary: #FFFFFF;
      --cockpit-text-secondary: #94A3B8;
      --cockpit-active-bg: rgba(99, 102, 241, 0.1);
      --cockpit-active-text: #FFFFFF;
      --cockpit-category-text: #475569;
    }

    [data-theme="light"] .cockpit-window {
      --cockpit-bg: #FFFFFF;
      --cockpit-border: #E2E8F0;
      --cockpit-sidebar-bg: #FFFFFF;
      --cockpit-main-bg: #F8FAFC;
      --cockpit-titlebar-bg: #FFFFFF;
      --cockpit-text-primary: #0F172A;
      --cockpit-text-secondary: #64748B;
      --cockpit-active-bg: rgba(99, 102, 241, 0.1);
      --cockpit-active-text: var(--accent);
      --cockpit-category-text: rgba(100, 116, 139, 0.8);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    }

    .cockpit-titlebar {
      height: 40px;
      background-color: var(--cockpit-titlebar-bg);
      border-bottom: 1px solid var(--cockpit-border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      position: relative;
      user-select: none;
    }

    .cockpit-mac-buttons {
      display: flex;
      gap: 6px;
    }

    .cockpit-mac-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
    }

    .cockpit-mac-btn.close {
      background-color: #EF4444;
    }

    .cockpit-mac-btn.minimize {
      background-color: #F59E0B;
    }

    .cockpit-mac-btn.maximize {
      background-color: #10B981;
    }

    .cockpit-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--cockpit-text-secondary);
    }

    .cockpit-close-icon {
      position: absolute;
      right: 16px;
      font-size: 16px;
      color: var(--cockpit-text-secondary);
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .cockpit-close-icon:hover {
      color: var(--cockpit-text-primary);
    }

    .cockpit-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .cockpit-sidebar {
      width: 210px;
      background-color: var(--cockpit-sidebar-bg);
      border-right: 1.5px solid var(--cockpit-border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 16px 0;
    }

    .cockpit-sidebar-group {
      margin-bottom: 12px;
    }

    .cockpit-sidebar-group-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 10px;
      font-weight: 900;
      color: var(--cockpit-category-text);
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 16px;
      margin-bottom: 4px;
      opacity: 1;
    }

    .cockpit-sidebar-item {
      padding: 10px 16px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: var(--cockpit-text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s ease;
      border-left: 3px solid transparent;
      user-select: none;
    }

    .cockpit-sidebar-item:hover {
      background-color: rgba(255, 255, 255, 0.02);
      color: var(--cockpit-text-primary);
    }

    .cockpit-sidebar-item.active {
      background-color: var(--cockpit-active-bg);
      border-left-color: var(--accent);
      color: var(--cockpit-active-text);
      font-weight: 700;
    }

    .cockpit-sidebar-item .cockpit-sidebar-icon {
      font-size: 16px;
      color: var(--cockpit-text-secondary);
      transition: color 0.2s ease;
    }

    .cockpit-sidebar-item.active .cockpit-sidebar-icon {
      color: var(--accent);
    }

    .cockpit-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 20px;
      position: relative;
      background-color: var(--cockpit-main-bg);
    }

    .cockpit-main-header {
      margin-bottom: 20px;
    }

    .cockpit-main-eyebrow {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--accent);
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .cockpit-main-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .cockpit-main-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .cockpit-main-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* Toggle switch style */
    .cockpit-toggle-container {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      user-select: none;
    }

    .cockpit-toggle-switch {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 18px;
    }

    .cockpit-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .cockpit-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.1);
      transition: .3s;
      border-radius: 18px;
    }

    .cockpit-toggle-slider:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    input:checked+.cockpit-toggle-slider {
      background-color: var(--accent);
    }

    input:checked+.cockpit-toggle-slider:before {
      transform: translateX(14px);
    }

    /* KPI grid */
    .cockpit-kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .cockpit-kpi-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cockpit-kpi-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      opacity: 0.8;
    }

    .cockpit-kpi-value {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .cockpit-kpi-value.green {
      color: var(--success);
    }

    .cockpit-kpi-value.blue {
      color: var(--accent);
    }

    .cockpit-kpi-value.red {
      color: var(--danger);
    }

    .cockpit-kpi-value.purple {
      color: #A855F7;
    }

    /* Simulation Arena (Terminal Console) */
    .cockpit-console {
      background: #050811;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      font-family: 'Source Code Pro', 'Roboto Mono', monospace;
      font-size: 11px;
      line-height: 1.5;
      overflow-y: auto;
      height: 180px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 20px;
    }

    .console-line {
      display: flex;
      gap: 8px;
    }

    .console-time {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .console-tag {
      font-weight: 700;
      text-transform: uppercase;
    }

    .console-tag.info {
      color: #3B82F6;
    }

    .console-tag.success {
      color: var(--success);
    }

    .console-tag.danger {
      color: var(--danger);
    }

    .console-tag.warning {
      color: #F59E0B;
    }

    .console-tag.system {
      color: #A855F7;
    }

    .console-text {
      color: var(--text-primary);
    }

    .cockpit-progress-container {
      margin-bottom: 20px;
      display: none;
    }

    .cockpit-progress-bar {
      height: 6px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .cockpit-progress-fill {
      height: 100%;
      width: 0%;
      background-color: var(--accent);
      transition: width 0.1s linear;
    }

    .cockpit-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }

    /* Specialized View styles */
    .special-view-container {
      background: rgba(255, 255, 255, 0.01);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    /* Compliance Checklist */
    .compliance-checklist {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .compliance-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .compliance-item.checked {
      color: var(--text-primary);
    }

    .compliance-icon {
      font-size: 16px;
      line-height: 1;
    }

    .compliance-icon.checked {
      color: var(--success);
    }

    .compliance-icon.pending {
      color: var(--text-secondary);
      opacity: 0.5;
    }

    /* LLM Benchmark bar graph */
    .benchmark-graph {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .benchmark-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .benchmark-row-header {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
    }

    .benchmark-bar-outer {
      height: 12px;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 6px;
      overflow: hidden;
    }

    .benchmark-bar-inner {
      height: 100%;
      width: 0%;
      transition: width 0.5s ease;
      border-radius: 6px;
    }

    /* ROI Simulator */
    .roi-slider-container {
      display: flex;
      flex-direction: column;
      gap: var(--sp-12);
    }

    .roi-slider-row {
      display: flex;
      flex-direction: column;
      gap: var(--sp-8);
    }

    .roi-slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
    }

    .roi-slider {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      outline: none;
      background: rgba(255, 255, 255, 0.1);
      accent-color: var(--accent);
      cursor: pointer;
    }

    .roi-results-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-16);
      margin-top: var(--sp-16);
    }

    /* Prompt XML view */
    .prompt-xml-view {
      font-family: 'Source Code Pro', monospace;
      font-size: 11px;
      white-space: pre-wrap;
      color: #A855F7;
    }

    /* Playground Chat */
    .playground-chat {
      height: 120px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .chat-bubble {
      max-width: 80%;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.4;
    }

    .chat-bubble.user {
      align-self: flex-end;
      background-color: var(--accent);
      color: white;
    }

    .chat-bubble.ai {
      align-self: flex-start;
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: var(--text-primary);
    }

    /* Cockpit Status Bar */
    .cockpit-statusbar {
      height: 36px;
      background-color: var(--cockpit-titlebar-bg);
      border-top: 1.5px solid var(--cockpit-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 10px;
      color: var(--cockpit-text-secondary);
      user-select: none;
    }

    .statusbar-connection {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Roboto Mono', monospace;
      font-weight: 700;
    }

    .statusbar-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #10B981;
      animation: pulse-dot 1.5s infinite;
    }

    @keyframes pulse-dot {
      0% {
        opacity: 0.4;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.4;
      }
    }

    /* Responsive adaptations for Cockpit & Hero CTAs */
    @media (max-width: 960px) {
      #explore-modal {
        display: none !important;
      }

      .btn-explore-platform {
        display: none !important;
      }

      /* Upgrade the diagnostic button to primary on mobile since explore is hidden */
      .btn-diagnostic-cta {
        color: var(--text-primary) !important;
        border: 2px solid transparent !important;
        background: linear-gradient(var(--surface), var(--surface)) padding-box,
          linear-gradient(135deg, #A855F7, #3B82F6) border-box !important;
        box-shadow: -2px 2px 18px rgba(168, 85, 247, 0.20),
          2px 2px 18px rgba(59, 130, 246, 0.20) !important;
      }

      .btn-diagnostic-cta:hover {
        background: linear-gradient(rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.1)) padding-box,
          linear-gradient(135deg, #A855F7, #3B82F6) border-box !important;
      }
    }

    /* Benefits Table Section */
    .benefits-section {
      margin-top: var(--sp-32);
      margin-bottom: var(--sp-40);
      position: relative;
      z-index: 2;
    }

    .benefits-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--text-primary);
      text-align: center;
      margin-bottom: var(--sp-24);
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: var(--sp-12);
    }

    .benefit-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px var(--sp-20);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 14px;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .benefit-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.04);
    }

    .benefit-card-pain {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .benefit-card-pain .pain-icon {
      color: #EF4444;
      font-size: 14px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .benefit-card-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      width: 100%;
    }

    .benefit-card-gain {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13px;
      color: var(--text-primary);
      line-height: 1.5;
      font-weight: 500;
    }

    .benefit-card-gain .gain-icon {
      color: #10B981;
      font-size: 16px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .benefit-card-gain strong {
      color: #10B981;
      font-weight: 800;
    }

    @media (max-width: 1024px) {
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* Value Pillars Section */
    .value-pillars-section {
      margin-top: var(--sp-12);
      margin-bottom: var(--sp-32);
      position: relative;
      z-index: 2;
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-24);
    }

    .pillar-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: var(--sp-16);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    .pillar-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    }

    .pillar-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--icon-color), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pillar-card:hover::before {
      opacity: 1;
    }

    .pillar-icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--icon-color);
      transition: all 0.3s ease;
    }

    .pillar-card:hover .pillar-icon-wrapper {
      background: var(--icon-color);
      color: #000;
      box-shadow: 0 0 15px var(--icon-color);
    }

    /* In dark mode, icon text can be dark, but let's make sure it is readable */
    [data-theme="dark"] .pillar-card:hover .pillar-icon-wrapper {
      color: #fff;
    }

    .pillar-header {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      width: 100%;
    }

    .pillar-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0;
    }

    .pillar-desc {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin: 0;
      white-space: pre-line;
    }

    .pillar-extra {
      margin-top: 12px;
      padding: 8px 12px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--accent);
      background: rgba(59, 130, 246, 0.08);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      line-height: 1.4;
    }

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

    /* Sticky CTA Bar */
    .sticky-cta-bar {
      position: fixed;
      bottom: -120px;
      /* Hidden by default */
      left: 0;
      width: 100%;
      background: rgba(11, 15, 25, 0.85);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: var(--sp-12) var(--sp-24);
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
    }

    /* [THEME-002, 01/08/2026] DEUX CONVENTIONS DE THÈME DANS LE MÊME FICHIER.
       Cette règle était écrite `body.light-theme`, alors que la page pose son
       thème en `data-theme` sur `<html>` — dix occurrences pour une seule
       ici. La classe n'étant jamais ajoutée, la règle n'a JAMAIS pris.
       Conséquence : en thème clair, la barre d'appel à l'action gardait son
       fond sombre pendant que son texte passait en `#0F172A`. Sombre sur
       sombre, rapport 1,07 — le symptôme exact rapporté par Kane. */
    [data-theme="light"] .sticky-cta-bar {
      background: rgba(255, 255, 255, 0.85);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
    }

    /* Cookie Banner Adapters */
    .cookie-banner,
    #cookieBanner {
      position: fixed;
      bottom: 1.5rem;
      left: 1.5rem;
      right: 1.5rem;
      max-width: 860px;
      margin: 0 auto;
      background: rgba(6, 11, 19, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
      border-radius: 14px;
      padding: 1.25rem 1.5rem;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      z-index: 9999;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    }
    .cookie-text {
      font-size: 0.88rem;
      color: var(--text-primary, #f8fafc);
      line-height: 1.45;
    }
    .cookie-btn-reject {
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
      color: var(--text-secondary, #94a3b8);
      transition: all 0.2s;
    }
    .cookie-btn-accept {
      padding: 0.5rem 1.25rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      background: var(--accent, #6366f1);
      color: white;
      border: none;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
      transition: all 0.2s;
    }

    [data-theme="light"] .cookie-banner,
    [data-theme="light"] #cookieBanner {
      background: rgba(255, 255, 255, 0.98) !important;
      border: 1px solid #E2E8F0 !important;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
      color: #0F172A !important;
    }
    [data-theme="light"] .cookie-text,
    [data-theme="light"] #cookieBanner .cookie-text {
      color: #0F172A !important;
    }
    [data-theme="light"] .cookie-btn-reject,
    [data-theme="light"] #cookieBanner .cookie-btn-reject {
      background: #F1F5F9 !important;
      border: 1px solid #CBD5E1 !important;
      color: #334155 !important;
    }
    [data-theme="light"] .cookie-btn-reject:hover,
    [data-theme="light"] #cookieBanner .cookie-btn-reject:hover {
      background: #E2E8F0 !important;
      color: #0F172A !important;
    }
    [data-theme="light"] .cookie-btn-accept,
    [data-theme="light"] #cookieBanner .cookie-btn-accept {
      background: #4F46E5 !important;
      color: #FFFFFF !important;
    }

    @media (max-width: 640px) {
      .cookie-banner,
      #cookieBanner {
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        padding: 1rem 1.15rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
        border-radius: 12px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
      }
      .cookie-banner .cookie-text,
      #cookieBanner .cookie-text {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
      }
      .cookie-banner > div:last-child,
      #cookieBanner > div:last-child {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
      }
      .cookie-btn-reject,
      .cookie-btn-accept,
      #cookieBanner .cookie-btn-reject,
      #cookieBanner .cookie-btn-accept {
        flex: 1 1 0 !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0.6rem 0.5rem !important;
        font-size: 0.82rem !important;
      }
    }

    .sticky-cta-bar.visible {
      bottom: 0;
    }

    .sticky-cta-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .sticky-cta-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .sticky-cta-desc {
      font-size: 11.5px;
      color: var(--text-secondary);
    }

    .sticky-cta-actions {
      display: flex;
      gap: var(--sp-12);
    }

    /* Service Table & Card Accordion */
    .service-row-secondary {
      display: none;
    }

    .service-row-secondary.show {
      display: table-row !important;
    }

    .service-card-secondary {
      display: none;
    }

    .service-card-secondary.show {
      display: block !important;
    }

    @media (max-width: 900px) {
      .sticky-cta-bar {
        flex-direction: column;
        gap: var(--sp-12);
        padding: var(--sp-16) var(--sp-24);
        text-align: center;
      }

      .sticky-cta-info {
        align-items: center;
      }

      .sticky-cta-desc {
        display: none;
      }

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

      .sticky-cta-actions .btn {
        flex-grow: 1;
        text-align: center;
        justify-content: center;
      }

      .back-to-top-btn {
        bottom: 140px !important;
      }
    }

    @media (max-width: 480px) {
      .sticky-cta-bar {
        padding: var(--sp-12) var(--sp-16);
        gap: var(--sp-8);
      }

      .sticky-cta-title {
        font-size: 13px;
      }

      .sticky-cta-actions {
        gap: var(--sp-8);
      }

      .sticky-cta-actions .btn {
        padding: 8px 10px;
        font-size: 11px;
      }

      .back-to-top-btn {
        bottom: 130px !important;
      }
    }

    .pillar-kpi {
      margin-top: auto;
      width: 100%;
      padding-top: 0;
      border-top: none;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .pillar-kpi-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--icon-color);
      letter-spacing: -0.5px;
    }

    .pillar-kpi-source {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .back-to-top-btn {
      bottom: 96px !important;
    }

    /* Limitation de la largeur de toute la landing page à partir des garanties */
    .value-pillars-section,
    .benefits-section,
    .persona-section,
    .services-section,
    .story-section,
    .unified-ecosystem-section,
    .trust-security-section,
    .case-results-section,
    .partner-section {
      max-width: 1100px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: var(--sp-16) !important;
      padding-right: var(--sp-16) !important;
      box-sizing: border-box !important;
    }

    /* La carte « Votre prochaine étape » est un encadré qui EST le contenu :
       elle se cale sur la largeur de contenu (1068 = 1100 - 2×16), pas sur
       la largeur de section, pour aligner son cadre avec les cartes. */
    .faq-next-steps {
      max-width: 1068px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Cartes du hero alignées sur la même largeur que les sections (1100). */
    .hero-cards {
      max-width: 1100px;
    }

    /* Grilles de cartes 3 colonnes -> 1 colonne sur mobile (les grilles
       inline en repeat(3,1fr) ne s'effondrent pas seules). */
    @media (max-width: 900px) {
      .cards-3col {
        grid-template-columns: 1fr !important;
      }
    }

    /* Rythme vertical uniforme entre toutes les sections de la page.
       margin-top: 0 pour ne pas cumuler avec la marge basse de la section
       précédente ; une seule valeur de marge basse partout. */
    .value-pillars-section,
    .unified-ecosystem-section,
    .agents-objection-section,
    .benefits-section,
    .persona-section,
    .services-section,
    .story-section,
    .trust-security-section,
    .case-results-section,
    .faq-next-steps,
    .partner-section {
      margin-top: 0 !important;
      margin-bottom: var(--sp-48) !important;
    }

    /* Sticky Header matching medconnect.choraigraph.ai
     *
     * [UI-030] La `padding` n'est PLUS redéclarée ici : elle vient de
     * `exec_theme.css` (`0.8rem 3rem`, et `0.85rem 1rem` sous 768 px), comme
     * pour toutes les autres pages statiques. Cette page portait `1.5rem` sans
     * media query — le logo et le menu démarraient donc à 24 px alors que
     * /terms, /pricing et les autres démarrent à 48 px : la landing paraissait
     * décalée à gauche, et le décalage suivait l'utilisateur d'une page à
     * l'autre. Les autres propriétés restent, elles ne divergent pas du thème.
     */
    header {
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      background: var(--surface) !important;
      backdrop-filter: blur(16px) !important;
      border-bottom: 1px solid var(--border) !important;
      min-height: 70px !important;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    /* Top Phone Bar & Mobile Nav Drawer */
    .phone-bar {
      background: linear-gradient(90deg, #0891B2, #0D9488);
      color: #FFFFFF;
      padding: 6px 2rem;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }

    .phone-bar a {
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .phone-bar-info {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mobile-menu-toggle {
      display: none;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-primary);
      border-radius: 10px;
      padding: 8px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }

    /* [UI-031] Bloc RETIRÉ : il recopiait à l'identique le tiroir de
     * `exec_theme.css`, y compris l'animation sur `right` responsable du
     * tremblement. Le doublon aurait annulé le correctif du thème sur cette
     * seule page — et c'est celle qui sert aussi de vitrine carehelios.
     * Une seule définition, dans le thème. */

    .mobile-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .mobile-menu-close {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .mobile-drawer-links {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: auto;
    }

    .mobile-drawer-links a {
      color: var(--text-primary);
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 600;
      transition: color 0.2s;
    }

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

    .mobile-drawer-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    header nav {
      display: flex;
      align-items: center;
      gap: 1.8rem;
    }

    header nav a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: color 0.2s ease;
    }

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

    @media (max-width: 900px) {
      .phone-bar {
        padding: 6px 1rem;
        font-size: 12px;
        justify-content: center;
        text-align: center;
      }
      .phone-bar .phone-bar-info { display: none; }
      header nav { display: none !important; }
      .mobile-menu-toggle { display: inline-flex; }
      .nav-actions .pricing-link,
      .nav-actions .phone-link,
      .nav-actions .header-contact-btn { display: none !important; }
    }