/* ===== Fonts ===== */

    @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");



    /* ===== Reset & Base ===== */

    *,

    *::before,

    *::after {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    html {

      scroll-padding-top: 100px;

      -webkit-font-smoothing: antialiased;

      -moz-osx-font-smoothing: grayscale;

      font-size: 16px;

    }



    html.lenis {

      height: auto;

    }



    .lenis.lenis-smooth {

      scroll-behavior: auto !important;

    }



    .lenis.lenis-smooth [data-lenis-prevent] {

      overscroll-behavior: contain;

    }



    .lenis.lenis-stopped {

      overflow: hidden;

    }



    .lenis.lenis-scrolling iframe {

      pointer-events: none;

    }



    body {

      font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

      color: var(--slate-900);

      background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 40%, #eef2ff 80%, #f8fafc 100%);

      line-height: 1.5;

      overflow-x: hidden;

      width: 100%;

      cursor: none;

    }



    a {

      color: inherit;

      text-decoration: none;

    }



    ul {

      list-style: none;

    }



    img,

    svg,

    iframe,

    video {

      display: block;

      max-width: 100%;

      height: auto;

    }



    button,

    input {

      font: inherit;

      border: none;

      outline: none;

      background: none;

    }



    ::selection {

      background: #e0e7ff;

      color: #312e81;

    }



    /* ===== Design Tokens (Vibrant Bright Indigo Theme) ===== */

    :root {

      --indigo-50: #eef2ff;

      --indigo-100: #e0e7ff;

      --indigo-200: #c7d2fe;

      --indigo-500: #6366f1;

      --indigo-600: #4f46e5;

      --indigo-700: #4338ca;

      --indigo-900: #312e81;

      --purple-50: #faf5ff;

      --purple-100: #f3e8ff;

      --purple-400: #a78bfa;

      --purple-500: #a855f7;

      --purple-600: #9333ea;

      --purple-700: #7e22ce;

      --slate-50: #f8fafc;

      --slate-100: #f1f5f9;

      --slate-200: #e2e8f0;

      --slate-300: #cbd5e1;

      --slate-400: #94a3b8;

      --slate-500: #64748b;

      --slate-600: #475569;

      --slate-700: #334155;

      --slate-800: #1e293b;

      --slate-900: #0f172a;

      --green-50: #f0fdf4;

      --green-100: #dcfce7;

      --green-500: #22c55e;

      --green-600: #16a34a;

      --red-50: #fef2f2;

      --red-600: #dc2626;

      --amber-50: #fffbeb;

      --amber-100: #fef3c7;

      --amber-500: #f59e0b;

      --amber-600: #d97706;

      --amber-700: #b45309;

      --blue-50: #eff6ff;

      --blue-600: #2563eb;

      --white: #ffffff;

      --real-white: #ffffff;

      --radius: 24px;

      /* Bento Box Curve */

    }



    /* ===== Custom Cursor ===== */

    .custom-cursor {

      position: fixed;

      top: 0;

      left: 0;

      width: 20px;

      height: 20px;

      border-radius: 50%;

      background: var(--indigo-500);

      pointer-events: none;

      z-index: 9999;

      transform: translate(-50%, -50%);

      transition: width 0.2s, height 0.2s, background 0.2s;

    }



    .custom-cursor.hover {

      width: 60px;

      height: 60px;

      background: rgba(99, 102, 241, 0.15);

      backdrop-filter: (4px);

      border: 1px solid rgba(99, 102, 241, 0.5);

    }



    /* ===== Scroll Reveal Animations ===== */

    .reveal {

      opacity: 0;

      transform: translateY(40px);

      transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);

    }



    .reveal.active {

      opacity: 1;

      transform: translateY(0);

    }



    /* ===== Bento Box Component Classes ===== */

    .glass-card,

    .crisp-card,

    .glass-card-water {

      background: rgba(255, 255, 255, 0.55) !important;

      border: 1px solid rgba(226, 232, 240, 0.8) !important;

      border-radius: var(--radius) !important;

      backdrop-filter: blur(30px) !important;

      -webkit-backdrop-filter: blur(30px) !important;

      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;

      position: relative;

      overflow: hidden;

      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;

    }



    .premium-shadow {

      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    }



    .crisp-card::after {

      content: '';

      position: absolute;

      inset: 0;

      pointer-events: none;

      background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.08), transparent 40%);

      opacity: 0;

      transition: opacity 0.3s;

    }



    .crisp-card:hover::after {

      opacity: 1;

    }



    .crisp-card:hover,

    .glass-card-water:hover,

    .glass-card:hover {

      transform: translateY(-8px) scale(1.02);

      box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.15), 0 8px 10px -6px rgba(99, 102, 241, 0.1) !important;

      border-color: var(--indigo-200) !important;

    }



    /* ===== Water Glassmorphism (Indigo + White UI) ===== */

    .glass-section-bg {

      position: relative;

      background: transparent;

      overflow: hidden;

    }



    .water-blob {

      position: absolute;

      border-radius: 50%;

      filter: blur(80px);

      z-index: 0;

      opacity: 0.6;

      pointer-events: none;

    }



    .water-blob.indigo {

      background: rgba(99, 102, 241, 0.5);

      /* Indigo */

    }



    .water-blob.blue {

      background: rgba(79, 70, 229, 0.4);

      /* Deep Indigo */

    }



    .glass-card-water::before {

      content: '';

      position: absolute;

      top: 0;

      left: -100%;

      width: 50%;

      height: 100%;

      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);

      transform: skewX(-20deg);

      transition: all 0.7s ease;

      z-index: 0;

      pointer-events: none;

    }



    .glass-card-water:hover::before {

      left: 200%;

    }



    .glass-card-water:hover::before {

      left: 200%;

    }



    .glass-card-water>* {

      position: relative;

      z-index: 1;

    }



    .glass-card-water .feature-card-icon {

      background: rgba(255, 255, 255, 0.6);

      border: 1px solid rgba(255, 255, 255, 1);

      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12);

      color: var(--indigo-600);

    }



    .text-gradient {

      background: linear-gradient(135deg, var(--slate-900), var(--slate-800), var(--indigo-600));

      -webkit-background-clip: text;

      background-clip: text;

      -webkit-text-fill-color: transparent;

    }



    .container {

      max-width: 80rem;

      margin: 0 auto;

      padding: 0 clamp(1rem, 5vw, 1.5rem);

      width: 100%;

      position: relative;

      z-index: 2;

    }



    /* ===== Landing Shell ===== */

    #landing-shell {

      position: relative;

      width: 100%;

      background: transparent;

      overflow-x: hidden;

      transition: opacity 0.8s ease, transform 0.8s ease;

      z-index: 1;

    }



    #landing-shell.hidden {

      opacity: 0;

      pointer-events: none;

      transform: scale(1.02);

      position: absolute;

    }



    /* ===== 1. Beta Banner & Floating Glass Nav ===== */

    .beta-banner {

      position: relative;

      z-index: 2000;

      background: linear-gradient(135deg, var(--indigo-600), var(--indigo-900));

      color: var(--white);

      text-align: center;

      padding: clamp(0.5rem, 2vw, 0.6rem) 1rem;

      font-size: clamp(0.75rem, 2vw, 0.85rem);

      font-weight: 600;

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: center;

      gap: 1rem;

      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    }



    .btn-beta-banner {

      background: var(--white);

      color: var(--indigo-600);

      padding: 0.3rem 1rem;

      border-radius: 2rem;

      font-size: 0.75rem;

      font-weight: 800;

      cursor: pointer;

      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

      text-transform: uppercase;

      letter-spacing: 0.05em;

    }



    .top-nav {

      position: sticky;

      top: 1rem;

      z-index: 100;

      width: calc(100% - 2rem);

      max-width: 64rem;

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 0.75rem clamp(1rem, 3vw, 1.5rem);

      border-radius: calc(var(--radius) * 1.8);

      margin: 1rem auto;

      transition: all 0.3s ease;

    }



    .nav-logo {

      display: flex;

      align-items: center;

      gap: 0.625rem;

      z-index: 102;

    }



    .nav-logo-img {

      height: 2.25rem;

      width: auto;

      max-width: 180px;

      object-fit: contain;

      display: block;

    }



    .nav-logo-icon {

      background: var(--indigo-600);

      padding: 0.375rem;

      border-radius: 0.5rem;

      box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.15);

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .nav-logo-icon svg {

      width: 1.25rem;

      height: 1.25rem;

      color: var(--white);

    }



    .nav-logo span {

      font-size: clamp(1rem, 2.5vw, 1.125rem);

      font-weight: 700;

      letter-spacing: -0.025em;

      color: var(--slate-900);

    }



    .nav-right {

      display: flex;

      align-items: center;

      gap: 1rem;

    }



    .nav-links {

      display: flex;

      align-items: center;

      gap: clamp(1rem, 3vw, 2rem);

      font-size: 0.875rem;

      font-weight: 600;

      color: var(--slate-600);

      transition: all 0.3s ease;

    }



    .nav-links a {

      transition: color 0.15s;

    }



    .nav-links a:hover,

    .nav-links a.active {

      color: var(--indigo-600);

    }



    .nav-actions {

      display: flex;

      align-items: center;

      gap: 0.75rem;

      z-index: 102;

    }



    .hamburger {

      display: none;

      flex-direction: column;

      justify-content: space-between;

      width: 24px;

      height: 18px;

      cursor: pointer;

      z-index: 102;

      background: transparent;

      border: none;

      padding: 0;

    }



    .hamburger span {

      width: 100%;

      height: 2px;

      background-color: var(--slate-900);

      border-radius: 2px;

      transition: all 0.3s ease-in-out;

      transform-origin: left center;

    }



    .hamburger.active span:nth-child(1) {

      transform: rotate(45deg);

    }



    .hamburger.active span:nth-child(2) {

      opacity: 0;

      width: 0;

    }



    .hamburger.active span:nth-child(3) {

      transform: rotate(-45deg);

    }



    /* ===== Buttons & Button Interactions ===== */

    .btn {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      font-weight: 700;

      cursor: pointer;

      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

      white-space: nowrap;

      position: relative;

      overflow: hidden;

    }



    .btn:active {

      transform: scale(0.95);

    }



    .btn:not(.tab-btn):not(.faq-question):hover,

    .btn-beta-banner:hover,

    .btn-primary-sm:hover,

    .btn-indigo-lg:hover,

    .btn-dark-lg:hover,

    .btn-white-lg:hover {

      transform: scale(1.03);

      box-shadow: 0 8px 25px -5px rgba(79, 70, 229, 0.4);

    }



    .btn-ghost {

      background: transparent;

      color: var(--slate-600);

      font-size: clamp(0.8rem, 2vw, 0.875rem);

      padding: 0.5rem 1rem;

      border-radius: 3rem;

    }



    .btn-ghost:hover {

      color: var(--indigo-600);

      box-shadow: none !important;

    }



    .btn-primary-sm {

      background: var(--indigo-600);

      color: var(--white);

      font-size: clamp(0.75rem, 2vw, 0.875rem);

      padding: 0.5625rem clamp(1rem, 3vw, 1.25rem);

      border-radius: 3rem;

      box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1);

    }



    .btn-dark-lg {

      background: var(--slate-900);

      color: var(--white);

      font-size: clamp(0.9rem, 2vw, 1rem);

      padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 4vw, 2.5rem);

      border-radius: 3rem;

      box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);

    }



    .btn-ghost-lg {

      background: transparent;

      color: var(--slate-600);

      font-size: clamp(0.9rem, 2vw, 1rem);

      padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 4vw, 2.5rem);

      border-radius: 3rem;

      border: 1px solid transparent;

    }



    .btn-ghost-lg:hover {

      background: var(--white);

      border-color: var(--slate-200);

      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

      transform: translateY(-2px);

    }



    .btn-indigo-lg {

      background: var(--indigo-600);

      color: var(--white);

      font-size: clamp(0.9rem, 2vw, 1rem);

      padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 4vw, 2.5rem);

      border-radius: 3rem;

      box-shadow: 0 8px 16px -4px rgba(79, 70, 229, 0.2);

    }



    .btn-white-lg {

      background: var(--white);

      color: var(--slate-900);

      font-size: clamp(0.9rem, 2vw, 1rem);

      padding: clamp(0.75rem, 2vw, 0.875rem) clamp(1.5rem, 4vw, 2.5rem);

      border-radius: 3rem;

      border: 1px solid var(--slate-200);

      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    }



    .btn svg.arrow {

      width: 1.25rem;

      height: 1.25rem;

      margin-left: 0.5rem;

      transition: transform 0.2s;

    }



    .btn:hover svg.arrow {

      transform: translateX(4px);

    }



    .btn-loader {

      display: none;

      width: 18px;

      height: 18px;

      border: 2px solid rgba(255, 255, 255, 0.3);

      border-top-color: #fff;

      border-radius: 50%;

      animation: spin 0.8s linear infinite;

      margin-left: 8px;

    }



    .btn-loading .btn-text,

    .btn-loading svg.arrow {

      display: none;

    }



    .btn-loading .btn-loader {

      display: block;

    }



    @keyframes spin {

      to {

        transform: rotate(360deg);

      }

    }



    /* ===== Global Input Fields Fix ===== */

    input {

      color: var(--slate-900) !important;

    }



    input::placeholder {

      color: var(--slate-400);

      opacity: 1;

    }



    /* ===== 2. Hero Section ===== */

    .hero {

      position: relative;

      padding: clamp(6rem, 15vh, 10rem) 0 clamp(4rem, 10vh, 6rem);

      overflow: hidden;

      display: flex;

      flex-direction: column;

      align-items: center;

    }



    .hero-grid-bg {

      position: absolute;

      inset: 0;

      z-index: -1;

      background-color: transparent;

      background-image: none;

    }



    .hero-inner {

      text-align: center;

      display: flex;

      flex-direction: column;

      align-items: center;

      width: 100%;

    }



    .hero-badge {

      display: inline-flex;

      align-items: center;

      gap: 0.5rem;

      padding: 0.3rem clamp(0.75rem, 2vw, 1rem);

      border-radius: 3rem;

      background: rgba(255, 255, 255, 0.5);

      border: 1px solid var(--slate-200);

      color: var(--slate-600);

      font-size: clamp(0.6rem, 1.5vw, 0.7rem);

      font-weight: 800;

      text-transform: uppercase;

      letter-spacing: 0.2em;

      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

      margin-bottom: clamp(1.5rem, 4vw, 2.5rem);

    }



    .hero-badge svg {

      width: 0.75rem;

      height: 0.75rem;

      color: var(--indigo-600);

    }



    .hero-title {

      font-size: clamp(2.5rem, 8vw, 5.5rem);

      font-weight: 800;

      letter-spacing: -0.04em;

      line-height: 1.1;

      margin-bottom: clamp(1rem, 3vw, 1.5rem);

      max-width: 100%;

    }



    .hero-subtitle {

      font-size: clamp(1rem, 2vw, 1.25rem);

      color: var(--slate-500);

      max-width: 42rem;

      margin: 0 auto clamp(2rem, 5vw, 3rem);

      line-height: 1.6;

      font-weight: 500;

    }



    .hero-actions {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: center;

      gap: 1rem;

      margin-bottom: clamp(3rem, 8vw, 5rem);

      width: 100%;

    }



    @keyframes fadeInUp {

      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    /* ===== Premium Rotating Glass + Neumorphism Carousel ===== */

    .rotator-container {

      position: relative;

      width: 100%;

      max-width: 72rem;

      margin: 0 auto;

      padding: 3rem 0;

      opacity: 0;

      animation: fadeInUp 1s forwards 1s;

    }



    .rotator-wrapper {

      position: relative;

      width: 100%;

      height: clamp(450px, 60vw, 680px);

      /* Tall wrapper to hold frame */

      display: flex;

      justify-content: center;

      align-items: center;

      perspective: 1400px;

    }



    /* Glass + Soft UI Hybrid Frame with Indigo Border */

    .rotator-item {

      position: absolute;

      width: clamp(230px, 32vw, 320px);

      height: clamp(460px, 62vw, 640px);

      border-radius: 2.5rem;

      padding: 1.25rem;

      /* The glass frame padding around the image */



      /* Glassmorphism base */

      background: rgba(248, 250, 252, 0.25);

      backdrop-filter: blur(20px);

      -webkit-backdrop-filter: blur(20px);



      /* Website Indigo Theme Border */

      border: 4px solid var(--indigo-600);



      /* Neumorphism soft shadows (matching #f8fafc bg) */

      box-shadow:

        15px 15px 35px rgba(148, 163, 184, 0.25),

        -15px -15px 35px rgba(255, 255, 255, 0.9),

        inset 2px 2px 4px rgba(255, 255, 255, 0.8),

        inset -2px -2px 4px rgba(148, 163, 184, 0.1);



      transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);

      cursor: pointer;

      user-select: none;

      -webkit-user-select: none;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    /* Gradient Glass Overlay (Shine Effect) */

    .rotator-item::after {

      content: '';

      position: absolute;

      inset: 0;

      border-radius: inherit;

      background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.1) 100%);

      pointer-events: none;

      z-index: 10;

    }



    /* Fit-To-Frame Image */

    .rotator-item img {

      width: 100%;

      height: 100%;

      object-fit: contain;

      /* Guarantees the entire image fits inside perfectly */

      object-position: center;

      border-radius: 1.5rem;

      /* Smooth inner corners */

      background: rgba(255, 255, 255, 0.5);

      /* White backing so transparent/padding gaps look like a screen */

      z-index: 5;

      position: relative;

      /* Add subtle inner depth to the "screen" */

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    }



    /* Floating Glass Label */

    .rotator-label {

      position: absolute;

      bottom: 2.5rem;

      left: 50%;

      transform: translateX(-50%);

      background: rgba(255, 255, 255, 0.7);

      backdrop-filter: blur(12px);

      -webkit-backdrop-filter: blur(12px);

      padding: 0.6rem 1.2rem;

      border-radius: 2rem;

      font-weight: 800;

      color: var(--slate-900);

      font-size: clamp(0.75rem, 1.5vw, 0.9rem);

      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

      border: 1px solid rgba(226, 232, 240, 0.8);

      white-space: nowrap;

      transition: opacity 0.3s;

      z-index: 20;

    }



    /* 3D Depth Positioning Logic */

    .rotator-item[data-pos="0"] {

      transform: translateX(0) translateZ(0) scale(1);

      opacity: 1;

      z-index: 5;

      cursor: default;

      /* Enhanced depth for the active center item */

      box-shadow:

        20px 20px 40px rgba(148, 163, 184, 0.35),

        -20px -20px 40px rgba(255, 255, 255, 1),

        inset 2px 2px 4px rgba(255, 255, 255, 0.8),

        inset -2px -2px 4px rgba(148, 163, 184, 0.1);

    }



    .rotator-item[data-pos="-1"] {

      transform: translateX(calc(-85% + 2vw)) translateZ(-100px) scale(0.85) rotateY(15deg);

      opacity: 0.7;

      z-index: 4;

    }



    .rotator-item[data-pos="1"] {

      transform: translateX(calc(85% - 2vw)) translateZ(-100px) scale(0.85) rotateY(-15deg);

      opacity: 0.7;

      z-index: 4;

    }



    .rotator-item[data-pos="-2"] {

      transform: translateX(calc(-160% + 4vw)) translateZ(-200px) scale(0.7) rotateY(25deg);

      opacity: 0.4;

      z-index: 3;

    }



    .rotator-item[data-pos="2"] {

      transform: translateX(calc(160% - 4vw)) translateZ(-200px) scale(0.7) rotateY(-25deg);

      opacity: 0.4;

      z-index: 3;

    }



    /* Hide labels on inactive items */

    .rotator-item:not([data-pos="0"]) .rotator-label {

      opacity: 0;

    }



    /* Dot Navigation */

    .rotator-dots {

      display: flex;

      justify-content: center;

      gap: 0.75rem;

      margin-top: 2rem;

    }



    .rotator-dot {

      width: 0.6rem;

      height: 0.6rem;

      border-radius: 50%;

      background: rgba(203, 213, 225, 0.3);

      cursor: pointer;

      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    }



    .rotator-dot.active {

      background: var(--indigo-600);

      transform: scale(1.5);

      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);

    }



    /* Mobile Carousel Tweaks */

    @media (max-width: 768px) {

      .rotator-item[data-pos="-1"] {

        transform: translateX(-55%) translateZ(-100px) scale(0.85) rotateY(10deg);

      }



      .rotator-item[data-pos="1"] {

        transform: translateX(55%) translateZ(-100px) scale(0.85) rotateY(-10deg);

      }



      .rotator-item[data-pos="-2"] {

        opacity: 0;

        pointer-events: none;

      }



      .rotator-item[data-pos="2"] {

        opacity: 0;

        pointer-events: none;

      }

    }



    /* ===== 3. Challenges Section ===== */

    .section {

      padding: clamp(4rem, 10vw, 8rem) 0;

      overflow: hidden;

      width: 100%;

    }



    .section-alt {

      background: transparent;

    }



    .section-title {

      font-size: clamp(2rem, 6vw, 3rem);

      font-weight: 800;

      color: var(--slate-900);

      letter-spacing: -0.04em;

      margin-bottom: 1.5rem;

      text-align: center;

      line-height: 1.2;

    }



    .section-title .hl {

      color: var(--indigo-600);

    }



    .section-desc {

      color: var(--slate-500);

      max-width: 42rem;

      margin: 0 auto clamp(3rem, 8vw, 5rem);

      font-size: clamp(1rem, 2.5vw, 1.125rem);

      font-weight: 500;

      text-align: center;

      line-height: 1.6;

    }



    .challenge-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));

      gap: clamp(1rem, 3vw, 1.5rem);

    }



    .challenge-card {

      padding: clamp(1.5rem, 4vw, 2.5rem);

      transition: all 0.3s;

      display: flex;

      flex-direction: column;

      align-items: center;

      text-align: center;

    }



    .challenge-icon {

      width: 3.5rem;

      height: 3.5rem;

      border-radius: 1rem;

      display: flex;

      align-items: center;

      justify-content: center;

      margin-bottom: 1.5rem;

      transition: transform 0.3s;

      flex-shrink: 0;

    }



    .challenge-card:hover .challenge-icon {

      transform: scale(1.1) rotate(5deg);

    }



    .icon-red {

      background: var(--red-50);

      color: var(--red-600);

    }



    .icon-amber {

      background: var(--amber-50);

      color: var(--amber-600);

    }



    .icon-blue {

      background: var(--blue-50);

      color: var(--blue-600);

    }



    .card-title {

      font-size: clamp(1.1rem, 2.5vw, 1.25rem);

      font-weight: 700;

      color: var(--slate-900);

      margin-bottom: 0.75rem;

    }



    .card-desc {

      color: var(--slate-500);

      font-size: clamp(0.85rem, 2vw, 0.9rem);

      line-height: 1.6;

      font-weight: 500;

    }



    /* ===== Trust Building Section ===== */

    .trust-section {

      background: rgba(238, 242, 255, 0.2);

      border-top: 1px solid rgba(224, 231, 255, 0.4);

      border-bottom: 1px solid rgba(224, 231, 255, 0.4);

      padding: clamp(4rem, 10vw, 6rem) 0;

    }



    .trust-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));

      gap: clamp(1.5rem, 4vw, 2rem);

      margin-top: clamp(2rem, 5vw, 3rem);

    }



    .trust-item {

      display: flex;

      align-items: flex-start;

      gap: 1rem;

      text-align: left;

      flex-direction: column;

      align-items: center;

      text-align: center;

    }



    .trust-icon {

      flex-shrink: 0;

      width: 3rem;

      height: 3rem;

      background: rgba(255, 255, 255, 0.4);

      color: var(--indigo-600);

      border-radius: 1rem;

      display: flex;

      align-items: center;

      justify-content: center;

      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    }



    .trust-item h3 {

      font-size: clamp(1rem, 2.5vw, 1.1rem);

      font-weight: 700;

      color: var(--slate-900);

      margin-bottom: 0.4rem;

    }



    .trust-item p {

      font-size: clamp(0.85rem, 2vw, 0.9rem);

      color: var(--slate-500);

      line-height: 1.5;

      max-width: 300px;

      margin: 0 auto;

    }



    /* ===== 4. One Platform (Clockwise Orbital + Straight 3D Characters) ===== */

    .platform-grid {

      display: flex;

      flex-direction: column;

      gap: clamp(3rem, 8vw, 5rem);

      align-items: center;

    }



    .platform-text {

      max-width: 100%;

      text-align: center;

    }



    .platform-text h2 {

      font-size: clamp(2rem, 5vw, 3rem);

      font-weight: 800;

      line-height: 1.2;

      margin-bottom: 1.5rem;

    }



    .platform-text>p {

      color: var(--slate-500);

      font-size: clamp(1rem, 2.5vw, 1.1rem);

      margin-bottom: 2rem;

      line-height: 1.6;

      max-width: 600px;

      margin-left: auto;

      margin-right: auto;

    }



    .platform-features {

      display: grid;

      grid-template-columns: 1fr;

      gap: 1rem;

    }



    .platform-feature {

      display: flex;

      gap: 1.25rem;

      padding: clamp(1rem, 3vw, 1.5rem);

      background: rgba(248, 250, 252, 0.3);

      border-radius: 1.5rem;

      border: 1px solid var(--slate-100);

      transition: all 0.3s;

      align-items: flex-start;

      text-align: left;

    }



    .platform-feature:hover {

      background: rgba(255, 255, 255, 0.5);

      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);

      border-color: var(--indigo-100);

      transform: translateY(-5px);

    }



    .platform-feature-icon {

      flex-shrink: 0;

      width: clamp(2.5rem, 8vw, 3.5rem);

      height: clamp(2.5rem, 8vw, 3.5rem);

      background: rgba(255, 255, 255, 0.5);

      border-radius: 1rem;

      display: flex;

      align-items: center;

      justify-content: center;

      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      color: var(--indigo-600);

    }



    .platform-feature-icon svg {

      width: 50%;

      height: 50%;

    }



    .platform-feature h4 {

      font-weight: 800;

      font-size: clamp(1rem, 2.5vw, 1.1rem);

      margin-bottom: 0.3rem;

      color: var(--slate-900);

    }



    .platform-feature p {

      color: var(--slate-500);

      font-size: clamp(0.8rem, 2vw, 0.9rem);

      line-height: 1.5;

    }



    .orbital-wrapper {

      position: relative;

      width: 100%;

      max-width: clamp(280px, 80vw, 32rem);

      aspect-ratio: 1;

      margin: 0 auto;

      animation: orbitSpin 40s linear infinite;

    }



    .orbital-center {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      z-index: 10;

      animation: counterSpin 40s linear infinite;

    }



    .orbital-glow {

      position: absolute;

      inset: -40%;

      background: rgba(99, 102, 241, 0.2);

      filter: blur(clamp(30px, 8vw, 60px));

      border-radius: 50%;

    }



    .orbital-logo {

      position: relative;

      width: clamp(5rem, 15vw, 8rem);

      height: clamp(5rem, 15vw, 8rem);

      background: var(--indigo-600);

      border-radius: clamp(1.5rem, 5vw, 2.5rem);

      display: flex;

      align-items: center;

      justify-content: center;

      box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.4);

      z-index: 10;

      padding: 0.5rem;

    }



    .orbital-logo svg,

    .orbital-logo img,

    .orbital-logo-img {

      width: 85%;

      height: auto;

      object-fit: contain;

    }



    .orbit-item {

      position: absolute;

      width: 0;

      height: 0;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      animation: counterSpin 40s linear infinite;

    }



    .avatar-3d {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      width: clamp(3.5rem, 12vw, 5.5rem);

      height: clamp(3.5rem, 12vw, 5.5rem);

      background: rgba(255, 255, 255, 0.4);

      border-radius: 50%;

      border: clamp(2px, 1vw, 4px) solid var(--white);

      box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.05);

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

      flex-shrink: 0;

    }



    .avatar-3d img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }



    .avatar-tag {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, calc(clamp(3.5rem, 12vw, 5.5rem) * 0.45));

      background: var(--slate-900);

      color: var(--white);

      font-size: clamp(0.5rem, 1.5vw, 0.65rem);

      font-weight: 800;

      padding: 0.3rem 0.8rem;

      border-radius: 1rem;

      letter-spacing: 0.08em;

      text-transform: uppercase;

      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

      z-index: 15;

      white-space: nowrap;

    }



    .pos-1 {

      left: 50%;

      top: 0%;

    }



    .pos-2 {

      left: 93.3%;

      top: 25%;

    }



    .pos-3 {

      left: 93.3%;

      top: 75%;

    }



    .pos-4 {

      left: 50%;

      top: 100%;

    }



    .pos-5 {

      left: 6.7%;

      top: 75%;

    }



    .pos-6 {

      left: 6.7%;

      top: 25%;

    }



    .orbital-rings {

      position: absolute;

      inset: 0;

      z-index: -1;

      opacity: 0.15;

      width: 100%;

      height: 100%;

    }



    @keyframes orbitSpin {

      0% {

        transform: rotate(0deg);

      }



      100% {

        transform: rotate(360deg);

      }

    }



    @keyframes counterSpin {

      0% {

        transform: translate(-50%, -50%) rotate(0deg);

      }



      100% {

        transform: translate(-50%, -50%) rotate(-360deg);

      }

    }



    /* ===== 5. Features Grid (Updated to Glassmorphism) ===== */

    .features-grid {

      display: grid;

      grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));

      gap: clamp(1rem, 3vw, 1.5rem);

    }



    .feature-card {

      padding: clamp(1.5rem, 4vw, 2rem);

      position: relative;

      overflow: hidden;

      text-align: left;

      display: flex;

      flex-direction: column;

    }



    .feature-card-icon {

      width: 3rem;

      height: 3rem;

      border-radius: 0.75rem;

      display: flex;

      align-items: center;

      justify-content: center;

      margin-bottom: 1.5rem;

      transition: all 0.3s;

      flex-shrink: 0;

    }



    .feature-card-icon svg {

      width: 1.5rem;

      height: 1.5rem;

    }



    .feature-card:hover .feature-card-icon {

      transform: scale(1.1);

    }



    .feature-card h3 {

      font-size: clamp(1.05rem, 2.5vw, 1.125rem);

      font-weight: 700;

      margin-bottom: 0.75rem;

      transition: color 0.3s;

      color: var(--slate-900);

    }



    .feature-card:hover h3 {

      color: var(--indigo-600);

    }



    .feature-card p {

      color: var(--slate-500);

      font-size: clamp(0.85rem, 2vw, 0.875rem);

      line-height: 1.6;

      font-weight: 500;

      flex: 1;

    }



    /* ===== 6. Stakeholders Tabs ===== */

    .tabs-bar {

      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      padding: 0.375rem;

      background: rgba(248, 250, 252, 0.3);

      border-radius: 3rem;

      border: 1px solid rgba(226, 232, 240, 0.6);

      margin: 0 auto clamp(2rem, 6vw, 4rem);

      max-width: 100%;

      gap: 0.25rem;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

      scrollbar-width: none;

    }



    .tabs-bar::-webkit-scrollbar {

      display: none;

    }



    .tab-btn {

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 0.5rem;

      padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);

      border-radius: 3rem;

      font-size: clamp(0.8rem, 2vw, 0.875rem);

      font-weight: 700;

      color: var(--slate-500);

      cursor: pointer;

      transition: all 0.3s;

      border: none;

      background: transparent;

      white-space: nowrap;

      flex-shrink: 0;

    }



    .tab-btn svg {

      width: 1.25rem;

      height: 1.25rem;

      flex-shrink: 0;

    }



    .tab-btn.active {

      background: rgba(255, 255, 255, 0.5);

      color: var(--indigo-600);

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    }



    .tab-panel {

      display: none;

    }



    .tab-panel.active {

      display: grid;

      grid-template-columns: 1fr;

      gap: clamp(2rem, 6vw, 4rem);

      align-items: center;

      padding: clamp(1.5rem, 5vw, 3rem);

      animation: fadeUp 0.5s ease-out;

    }



    @keyframes fadeUp {

      from {

        opacity: 0;

        transform: translateY(10px);

      }



      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    .tab-panel-badge {

      display: inline-flex;

      align-items: center;

      padding: 0.3rem 0.8rem;

      border-radius: 3rem;

      background: var(--indigo-50);

      color: var(--indigo-600);

      font-size: 0.65rem;

      font-weight: 800;

      text-transform: uppercase;

      letter-spacing: 0.1em;

      margin-bottom: 1.5rem;

    }



    .tab-panel h3 {

      font-size: clamp(1.5rem, 4vw, 2.25rem);

      font-weight: 800;

      margin-bottom: clamp(1rem, 3vw, 1.5rem);

      color: var(--slate-900);

    }



    .tab-panel-desc {

      color: var(--slate-500);

      font-size: clamp(1rem, 2.5vw, 1.1rem);

      line-height: 1.6;

      margin-bottom: clamp(1.5rem, 4vw, 2.5rem);

    }



    .tab-benefits {

      display: flex;

      flex-direction: column;

      gap: clamp(1rem, 3vw, 1.25rem);

    }



    .tab-benefit {

      display: flex;

      align-items: center;

      gap: 0.875rem;

      font-weight: 700;

      color: var(--slate-700);

      font-size: clamp(0.9rem, 2.5vw, 1.05rem);

      letter-spacing: -0.01em;

    }



    .tab-benefit-check {

      flex-shrink: 0;

      width: 1.75rem;

      height: 1.75rem;

      border-radius: 50%;

      background: var(--indigo-50);

      display: flex;

      align-items: center;

      justify-content: center;

      color: var(--indigo-600);

    }



    .tab-benefit-check svg {

      width: 1.1rem;

      height: 1.1rem;

      stroke-width: 3.5;

      stroke-linecap: round;

      stroke-linejoin: round;

    }



    .tab-preview {

      position: relative;

      width: 100%;

      aspect-ratio: 1;

      max-height: 400px;

      background: radial-gradient(circle at center, var(--indigo-50), var(--slate-50));

      border-radius: clamp(1rem, 4vw, 2rem);

      border: 1px solid var(--slate-100);

      overflow: hidden;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

    }



    .tab-3d-character {

      width: clamp(8rem, 40vw, 13rem);

      height: clamp(8rem, 40vw, 13rem);

      border-radius: 50%;

      background: white;

      border: clamp(4px, 2vw, 8px) solid white;

      box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);

      animation: float3D 6s ease-in-out infinite;

      display: flex;

      align-items: center;

      justify-content: center;

      position: relative;

      z-index: 2;

      overflow: hidden;

      flex-shrink: 0;

    }



    .tab-3d-character img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }



    .tab-avatar-tag {

      background: var(--slate-900);

      color: var(--white);

      font-size: clamp(0.6rem, 2vw, 0.85rem);

      font-weight: 800;

      padding: 0.4rem clamp(1rem, 3vw, 1.5rem);

      border-radius: 2rem;

      letter-spacing: 0.1em;

      text-transform: uppercase;

      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

      margin-top: -15px;

      z-index: 5;

      animation: float3D 6s ease-in-out infinite;

      white-space: nowrap;

    }



    .tab-ui-element {

      position: absolute;

      background: white;

      border-radius: 1rem;

      padding: clamp(0.5rem, 2vw, 1rem);

      box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);

      border: 1px solid var(--slate-100);

      z-index: 1;

      animation: float3D 8s ease-in-out infinite reverse;

    }



    .tab-ui-element>div:first-child {

      font-size: clamp(0.5rem, 1.5vw, 0.7rem);

    }



    .tab-ui-element>div:last-child {

      font-size: clamp(1rem, 3vw, 1.5rem);

    }



    /* ===== 7. Comparison Table ===== */

    .comparison-container {

      width: 100%;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

      border-radius: calc(var(--radius) * 2.2);

      padding-bottom: 1rem;

      /* Space for scrollbar */

    }



    .comparison-table {

      min-width: 600px;

      width: 100%;

      max-width: 64rem;

      margin: 0 auto;

      overflow: hidden;

      border-radius: calc(var(--radius) * 2.2);

    }



    .comparison-table table {

      width: 100%;

      border-collapse: collapse;

    }



    .comparison-table thead tr {

      background: rgba(248, 250, 252, 0.3);

      border-bottom: 1px solid var(--slate-100);

    }



    .comparison-table th {

      padding: 1.5rem clamp(1rem, 2vw, 2rem);

      font-size: 0.625rem;

      font-weight: 800;

      color: var(--slate-400);

      text-transform: uppercase;

      letter-spacing: 0.2em;

      text-align: center;

      white-space: nowrap;

    }



    .comparison-table th:first-child {

      text-align: left;

    }



    .comparison-table th.hl {

      color: var(--indigo-600);

      background: rgba(238, 242, 255, 0.5);

    }



    .comparison-table tbody tr {

      border-bottom: 1px solid var(--slate-100);

      transition: background 0.15s;

    }



    .comparison-table tbody tr:hover {

      background: rgba(248, 250, 252, 0.2);

    }



    .comparison-table td {

      padding: 1.25rem clamp(1rem, 2vw, 2rem);

      font-size: clamp(0.8rem, 2vw, 0.9rem);

      text-align: center;

      font-weight: 600;

    }



    .comparison-table td:first-child {

      text-align: left;

      font-weight: 700;

      color: var(--slate-700);

    }



    .comparison-table td.hl {

      background: rgba(238, 242, 255, 0.3);

    }



    .comparison-table tbody tr:hover td.hl {

      background: rgba(238, 242, 255, 0.5);

    }



    .comp-badge {

      display: inline-block;

      font-size: clamp(0.6rem, 1.5vw, 0.65rem);

      font-weight: 800;

      text-transform: uppercase;

      letter-spacing: 0.1em;

      padding: 0.3rem 0.8rem;

      border-radius: 0.5rem;

      white-space: nowrap;

    }



    .comp-badge-grey {

      background: rgba(241, 245, 249, 0.3);

      color: var(--slate-500);

    }



    .comp-badge-indigo {

      background: rgba(255, 255, 255, 0.5);

      color: var(--indigo-600);

      box-shadow: 0 4px 10px rgba(79, 70, 229, 0.15);

      border: 1px solid var(--indigo-100);

    }



    .comp-check {

      color: var(--indigo-600);

    }



    .comp-cross {

      color: var(--slate-300);

    }



    .comp-check svg,

    .comp-cross svg {

      width: 1.5rem;

      height: 1.5rem;

      margin: 0 auto;

    }



    /* ===== Product Roadmap Section ===== */

    .roadmap-card {

      padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);

      display: flex;

      flex-direction: column;

      gap: 1rem;

      transition: all 0.3s ease;

      border-top: 4px solid var(--indigo-600);

      text-align: left;

    }



    .roadmap-card:hover {

      transform: translateY(-8px);

      box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.15);

    }



    .roadmap-icon {

      width: 3rem;

      height: 3rem;

      background: var(--indigo-50);

      color: var(--indigo-600);

      border-radius: 1rem;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

    }



    .roadmap-icon svg {

      width: 1.5rem;

      height: 1.5rem;

    }



    /* ===== 8. FAQ ===== */

    .faq-list {

      max-width: 48rem;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      gap: 1rem;

      width: 100%;

    }



    .faq-item {

      background: rgba(255, 255, 255, 0.4);

      border-radius: calc(var(--radius) * 2.2);

      overflow: hidden;

      border: 1px solid transparent;

      transition: all 0.3s;

    }



    .faq-item.open {

      border-color: var(--indigo-200);

      box-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.15);

    }



    .faq-question {

      width: 100%;

      display: flex;

      align-items: center;

      justify-content: space-between;

      text-align: left;

      padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 2rem);

      cursor: pointer;

      font-size: clamp(0.9rem, 2vw, 1rem);

      font-weight: 700;

      color: var(--slate-800);

      transition: color 0.15s;

    }



    .faq-question:hover,

    .faq-item.open .faq-question {

      color: var(--indigo-600);

    }



    .faq-question svg {

      width: 1.25rem;

      height: 1.25rem;

      color: var(--slate-400);

      transition: transform 0.3s;

      flex-shrink: 0;

      margin-left: 1rem;

    }



    .faq-item.open .faq-question svg {

      transform: rotate(180deg);

      color: var(--indigo-600);

    }



    .faq-answer {

      max-height: 0;

      overflow: hidden;

      transition: max-height 0.4s ease;

    }



    .faq-item.open .faq-answer {

      max-height: 500px;

    }



    .faq-answer-inner {

      padding: 0 clamp(1rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem);

      color: var(--slate-500);

      font-weight: 500;

      line-height: 1.6;

      font-size: clamp(0.85rem, 2vw, 0.95rem);

      text-align: left;

    }



    /* ===== Insights / Blog Preview Section ===== */

    .blog-card {

      display: flex;

      flex-direction: column;

      height: 100%;

      padding: 0;

      overflow: hidden;

      text-align: left;

    }



    .blog-img-wrap {

      height: clamp(160px, 25vw, 220px);

      overflow: hidden;

      width: 100%;

    }



    .blog-img-wrap img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.4s ease;

    }



    .blog-card:hover .blog-img-wrap img {

      transform: scale(1.05);

    }



    .blog-content {

      padding: clamp(1.5rem, 4vw, 2rem);

      flex: 1;

      display: flex;

      flex-direction: column;

    }



    .blog-title {

      font-size: clamp(1.1rem, 2.5vw, 1.25rem);

      font-weight: 800;

      color: var(--slate-900);

      margin-bottom: 1rem;

      line-height: 1.4;

      text-align: left;

    }



    .blog-desc {

      color: var(--slate-500);

      font-size: clamp(0.85rem, 2vw, 0.9rem);

      line-height: 1.6;

      margin-bottom: 1.5rem;

      flex: 1;

      text-align: left;

    }



    .blog-link {

      color: var(--indigo-600);

      font-weight: 700;

      font-size: 0.9rem;

      display: inline-flex;

      align-items: center;

      gap: 0.5rem;

      transition: gap 0.3s;

      cursor: pointer;

      align-self: flex-start;

    }



    .blog-link:hover {

      gap: 0.8rem;

    }



    .blog-link svg {

      width: 1rem;

      height: 1rem;

      flex-shrink: 0;

    }



    /* ===== Early Access / Beta Section ===== */

    .early-access-section {

      padding: clamp(4rem, 10vw, 8rem) 0;

      background: transparent;

      width: 100%;

    }



    .early-access-card {

      background: linear-gradient(135deg, rgba(238, 242, 255, 0.4), rgba(255, 255, 255, 0.3));

      border: 1px solid var(--indigo-100);

      border-radius: clamp(1.5rem, 5vw, 2.5rem);

      padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2rem);

      text-align: center;

      box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.1);

      max-width: 64rem;

      margin: 0 auto;

      position: relative;

      overflow: hidden;

    }



    .ea-title {

      font-size: clamp(2rem, 5vw, 3rem);

      font-weight: 800;

      margin-bottom: clamp(1rem, 3vw, 1.5rem);

      color: var(--slate-900);

      line-height: 1.2;

    }



    .ea-desc {

      font-size: clamp(1rem, 2.5vw, 1.1rem);

      color: var(--slate-500);

      max-width: 40rem;

      margin: 0 auto clamp(1.5rem, 4vw, 2rem);

      line-height: 1.6;

    }



    .ea-list {

      display: flex;

      gap: clamp(1rem, 3vw, 2rem);

      flex-wrap: wrap;

      justify-content: center;

      margin-bottom: clamp(2rem, 5vw, 3rem);

    }



    .ea-list li {

      display: flex;

      align-items: center;

      gap: 0.5rem;

      font-weight: 700;

      font-size: clamp(0.85rem, 2vw, 0.95rem);

      color: var(--slate-700);

    }



    .ea-list svg {

      color: var(--indigo-600);

      width: 1.25rem;

      height: 1.25rem;

      flex-shrink: 0;

    }



    .ea-form {

      display: flex;

      gap: 1rem;

      width: 100%;

      max-width: 32rem;

      margin: 0 auto;

      position: relative;

      z-index: 2;

      flex-direction: column;

    }



    @media (min-width: 480px) {

      .ea-form {

        flex-direction: row;

      }

    }



    .ea-form input {

      flex: 1;

      padding: 1rem 1.5rem;

      border-radius: 3rem;

      border: 1px solid var(--slate-300);

      background: rgba(255, 255, 255, 0.4);

      color: var(--slate-900) !important;

      font-size: 1rem;

      font-weight: 600;

      transition: all 0.3s;

      width: 100%;

    }



    .ea-form input:focus {

      border-color: var(--indigo-500);

      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);

    }



    .ea-form button {

      padding: 1rem 2rem;

      border-radius: 3rem;

      background: var(--indigo-600);

      color: var(--white);

      font-weight: 800;

      font-size: 1rem;

      cursor: pointer;

      transition: all 0.3s;

      white-space: nowrap;

      border: none;

      width: 100%;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    @media (min-width: 480px) {

      .ea-form button {

        width: auto;

      }

    }



    .ea-form button:hover {

      background: var(--indigo-700);

      transform: scale(1.05);

      box-shadow: 0 8px 25px -5px rgba(79, 70, 229, 0.4);

    }



    /* ===== 9. CTA Section ===== */

    .cta-section {

      padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 10vw, 8rem);

      background: transparent;

      width: 100%;

    }



    .cta-box {

      position: relative;

      border-radius: clamp(1.5rem, 5vw, 3rem);

      background: var(--slate-900);

      padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2rem);

      overflow: hidden;

      text-align: center;

    }



    .cta-blob {

      position: absolute;

      border-radius: 50%;

      filter: blur(clamp(50px, 10vw, 100px));

      opacity: 0.5;

      pointer-events: none;

    }



    .cta-blob-1 {

      top: -20%;

      left: -10%;

      width: 60%;

      height: 60%;

      background: var(--indigo-600);

    }



    .cta-blob-2 {

      bottom: -20%;

      right: -10%;

      width: 60%;

      height: 60%;

      background: var(--purple-500);

    }



    .cta-content {

      position: relative;

      z-index: 10;

      max-width: 56rem;

      margin: 0 auto;

      color: white;

    }



    .cta-content h2 {

      font-size: clamp(2rem, 5vw, 3.75rem);

      font-weight: 800;

      letter-spacing: -0.04em;

      line-height: 1.2;

      margin-bottom: clamp(1rem, 3vw, 2rem);

      color: white;

    }



    .cta-content p {

      color: var(--slate-300);

      font-size: clamp(1rem, 2vw, 1.25rem);

      margin-bottom: clamp(2rem, 5vw, 3rem);

      line-height: 1.6;

      font-weight: 500;

      max-width: 42rem;

      margin-left: auto;

      margin-right: auto;

    }



    .cta-actions {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: center;

      gap: 1rem;

    }



    /* ===== 10. Footer ===== */

    .site-footer {

      background: rgba(255, 255, 255, 0.3);

      padding: clamp(3rem, 8vw, 4rem) 0 clamp(2rem, 5vw, 3rem);

      border-top: 1px solid var(--slate-100);

      width: 100%;

    }



    .footer-grid {

      display: grid;

      grid-template-columns: 1fr;

      gap: clamp(2rem, 6vw, 4rem);

      margin-bottom: clamp(3rem, 8vw, 6rem);

      text-align: center;

    }



    .footer-brand {

      display: flex;

      flex-direction: column;

      align-items: center;

    }



    .footer-brand p {

      color: var(--slate-500);

      font-size: 0.9rem;

      line-height: 1.6;

      font-weight: 500;

      max-width: 20rem;

      margin: 1.5rem auto;

    }



    .footer-social {

      display: flex;

      gap: 1rem;

      justify-content: center;

    }



    .footer-social a {

      width: 2.5rem;

      height: 2.5rem;

      border-radius: 0.75rem;

      background: transparent;

      display: flex;

      align-items: center;

      justify-content: center;

      color: var(--slate-400);

      border: 1px solid var(--slate-100);

      transition: all 0.2s;

    }



    .footer-social a:hover {

      background: var(--indigo-50);

      color: var(--indigo-600);

      transform: translateY(-3px);

    }



    .footer-social a svg {

      width: 1.2rem;

      height: 1.2rem;

    }



    .footer-col h4 {

      font-weight: 800;

      color: var(--slate-900);

      margin-bottom: 1.5rem;

      text-transform: uppercase;

      font-size: 0.7rem;

      letter-spacing: 0.15em;

    }



    .footer-col ul {

      display: flex;

      flex-direction: column;

      gap: 1rem;

      align-items: center;

    }



    .footer-col a {

      color: var(--slate-500);

      font-size: 0.9rem;

      font-weight: 500;

      transition: color 0.15s;

    }



    .footer-col a:hover {

      color: var(--indigo-600);

    }



    .footer-newsletter {

      display: flex;

      flex-direction: column;

      align-items: center;

    }



    .footer-newsletter p {

      color: var(--slate-500);

      font-size: 0.9rem;

      font-weight: 500;

      margin-bottom: 1.5rem;

    }



    .footer-newsletter-form {

      display: flex;

      gap: 0.5rem;

      width: 100%;

      max-width: 300px;

      flex-direction: column;

    }



    @media (min-width: 480px) {

      .footer-newsletter-form {

        flex-direction: row;

        max-width: 100%;

      }

    }



    .footer-newsletter-form input {

      flex: 1;

      padding: 0.75rem 1rem;

      border-radius: 0.75rem;

      border: 1px solid var(--slate-200);

      background: transparent;

      font-size: 0.9rem;

      font-weight: 600;

      color: var(--slate-900) !important;

      width: 100%;

    }



    .footer-newsletter-form input::placeholder {

      color: var(--slate-400);

      opacity: 1;

      font-weight: 500;

    }



    .footer-newsletter-form input:focus {

      outline: 2px solid rgba(99, 102, 241, 0.3);

      border-color: var(--indigo-500);

    }



    .footer-newsletter-form button {

      padding: 0.75rem 1rem;

      background: var(--indigo-600);

      color: var(--white);

      border-radius: 0.75rem;

      cursor: pointer;

      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

      font-weight: 700;

      box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);

      display: flex;

      align-items: center;

      justify-content: center;

      border: none;

      width: 100%;

    }



    @media (min-width: 480px) {

      .footer-newsletter-form button {

        width: auto;

      }

    }



    .footer-newsletter-form button:hover {

      background: var(--indigo-700);

      transform: scale(1.05) translateY(-2px);

      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);

    }



    .footer-newsletter-form button:active {

      transform: scale(0.95);

    }



    .footer-bottom {

      padding-top: 2rem;

      border-top: 1px solid var(--slate-100);

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 1.5rem;

      font-size: 0.75rem;

      color: var(--slate-400);

      font-weight: 600;

      text-align: center;

    }



    .footer-bottom-links {

      display: flex;

      gap: 1rem;

      flex-wrap: wrap;

      justify-content: center;

    }



    .footer-bottom-links a:hover {

      color: var(--indigo-600);

    }



    /* ===== Responsive Adjustments ===== */

    @media (max-width: 768px) {

      .hamburger {

        display: flex;

      }



      .nav-links {

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        right: 0;

        background: rgba(255, 255, 255, 0.5);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        flex-direction: column;

        padding: 1.5rem;

        border-radius: 1.5rem;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        border: 1px solid rgba(226, 232, 240, 0.8);

        opacity: 0;

        pointer-events: none;

        transform: translateY(-10px);

        gap: 1.5rem;

        align-items: center;

      }



      .nav-links.active {

        opacity: 1;

        pointer-events: all;

        transform: translateY(0);

      }



      .nav-actions {

        display: none;

      }



      .nav-links-mobile-cta {

        display: flex;

        width: 100%;

      }



      .nav-links-mobile-cta .btn {

        width: 100%;

      }

    }



    @media (min-width: 769px) {

      .nav-links {

        display: flex;

      }



      .nav-links-mobile-cta {

        display: none;

      }



      .tab-panel.active {

        grid-template-columns: 1fr 1fr;

        text-align: left;

      }



      .footer-grid {

        grid-template-columns: repeat(2, 1fr);

        text-align: left;

      }



      .footer-brand {

        align-items: flex-start;

      }



      .footer-brand p {

        margin: 1.5rem 0;

      }



      .footer-social {

        justify-content: flex-start;

      }



      .footer-col ul {

        align-items: flex-start;

      }



      .footer-newsletter {

        align-items: flex-start;

      }



      .footer-bottom {

        flex-direction: row;

        justify-content: space-between;

      }

    }



    @media (min-width: 1024px) {

      .platform-grid {

        flex-direction: row;

      }



      .platform-text {

        flex: 1;

        text-align: left;

      }



      .platform-text>p {

        margin-left: 0;

        margin-right: 0;

      }



      .orbital-wrapper {

        flex: 1;

      }



      .footer-grid {

        grid-template-columns: 2fr 1fr 1fr 1.5fr;

      }

    }



    /* ============================================================

       CINEMATIC ENHANCEMENTS — Phases 1-5

       ============================================================ */



    /* ===== Phase 1: Hero Kinetic Typography ===== */

    .hero-title .word-wrap {

      display: inline-block;

      overflow: hidden;

      vertical-align: bottom;

      padding-bottom: 0.05em;

    }



    .hero-title .word-inner {

      display: inline-block;

      transform: translateY(110%);

      will-change: transform;

    }



    /* Override default hero animations — now GSAP-controlled via class */

    .hero-hidden {

      opacity: 0;

      animation: none;

      transform: translateY(30px);

    }



    /* ===== Phase 3: Magnetic Buttons ===== */

    .btn {

      will-change: transform;

    }



    /* ===== Phase 3: 3D Tilt Cards ===== */

    .crisp-card,

    .glass-card,

    .glass-card-water {

      transform-style: preserve-3d;

      will-change: transform;

    }



    .crisp-card>*,

    .glass-card>*,

    .glass-card-water>* {

      transform: translateZ(0);

    }



    /* ===== Phase 3: Cursor Trail Ring ===== */

    .cursor-trail {

      position: fixed;

      top: 0;

      left: 0;

      width: 40px;

      height: 40px;

      border-radius: 50%;

      border: 1.5px solid rgba(99, 102, 241, 0.3);

      pointer-events: none;

      z-index: 9998;

      transform: translate(-50%, -50%);

      transition: width 0.3s, height 0.3s, border-color 0.3s;

    }



    .cursor-trail.hover {

      width: 70px;

      height: 70px;

      border-color: rgba(99, 102, 241, 0.5);

    }



    /* ===== Phase 4: Section Cinematic Transitions ===== */

    /* Compositing handled by GSAP — no persistent will-change needed */



    /* ===== Phase 4: Title Mask Reveals ===== */

    .section-title .word-wrap {

      display: inline-block;

      overflow: hidden;

      vertical-align: bottom;

      padding-bottom: 0.05em;

    }



    .section-title .word-inner {

      display: inline-block;

      transform: translateY(105%);

    }



    /* ===== Phase 5: Ambient Gradient Cycle ===== */

    /* Removed hue-rotate animation — it forced full page repaint every frame */



    .no-scroll {

      overflow: hidden;

    }



    .hl-indigo-grad {

      background: linear-gradient(135deg, var(--slate-900), var(--slate-800), var(--indigo-600));

      -webkit-background-clip: text;

      background-clip: text;

      -webkit-text-fill-color: transparent;

    }



    .founders-section {

      position: relative;

      padding: clamp(5rem, 10vw, 8rem) 0;

      overflow: hidden;

      z-index: 2;

      background: transparent;

      width: 100%;

    }



    .founders-badge {

      display: inline-flex;

      align-items: center;

      gap: 0.5rem;

      padding: 0.35rem 1.1rem;

      border-radius: 2rem;

      background: rgba(99, 102, 241, 0.08);

      border: 1.5px solid rgba(99, 102, 241, 0.25);

      color: var(--indigo-600);

      font-size: 0.7rem;

      font-weight: 800;

      letter-spacing: 0.15em;

      text-transform: uppercase;

      margin-bottom: 1.5rem;

      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.04);

      margin-left: auto;

      margin-right: auto;

    }



    .founders-spotlight {

      position: absolute;

      border-radius: 50%;

      filter: blur(120px);

      opacity: 0.25;

      pointer-events: none;

      z-index: 1;

    }



    .founders-spotlight.spotlight-1 {

      top: 10%;

      left: 15%;

      width: 350px;

      height: 350px;

      background: radial-gradient(circle, var(--indigo-500), transparent 75%);

    }



    .founders-spotlight.spotlight-2 {

      bottom: 20%;

      right: 15%;

      width: 400px;

      height: 400px;

      background: radial-gradient(circle, var(--indigo-500), transparent 75%);

    }



    .founders-grid-3d {

      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      gap: clamp(1.5rem, 3vw, 2.5rem);

      margin: clamp(3rem, 6vw, 4.5rem) auto;

      max-width: 72rem;

      perspective: 1500px;

      align-items: center;

    }



    .founder-card-wrapper {

      flex: 1;

      min-width: 290px;

      max-width: 360px;

      height: 560px;

      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

      transform-style: preserve-3d;

    }



    .founder-card {

      position: relative;

      width: 100%;

      height: 100%;

      border-radius: 28px;

      background: rgba(255, 255, 255, 0.35);

      backdrop-filter: blur(25px);

      -webkit-backdrop-filter: blur(25px);

      border: 1.5px solid rgba(255, 255, 255, 0.6);

      padding: 2.25rem 1.75rem;

      display: flex;

      flex-direction: column;

      align-items: center;

      text-align: center;

      box-shadow:

        0 10px 30px -10px rgba(0, 0, 0, 0.05),

        0 20px 40px -15px rgba(99, 102, 241, 0.05),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

      transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);

      transform-style: preserve-3d;

      overflow: hidden;

    }



    /* Glowing edge trails on hover */

    .founder-card::after {

      content: '';

      position: absolute;

      inset: -2px;

      border-radius: 28px;

      padding: 2px;

      background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(99, 102, 241, 0.4) 100%);

      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

      -webkit-mask-composite: xor;

      mask-composite: exclude;

      opacity: 0;

      transition: opacity 0.5s ease;

      pointer-events: none;

      z-index: 10;

    }



    .founder-card:hover::after {

      opacity: 1;

    }



    .founder-card-wrapper:hover .founder-card {

      border-color: rgba(99, 102, 241, 0.4);

      box-shadow:

        0 20px 45px -12px rgba(99, 102, 241, 0.12),

        0 10px 25px -10px rgba(99, 102, 241, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    }



    .image-frame {

      position: relative;

      width: 140px;

      height: 140px;

      border-radius: 50%;

      margin-bottom: 1.5rem;

      transform: translateZ(35px);

      z-index: 2;

    }



    .image-frame img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      border-radius: 50%;

      border: 4px solid rgba(255, 255, 255, 0.8);

      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

      transition: transform 0.5s ease;

    }



    .founder-card:hover .image-frame img {

      transform: scale(1.05);

    }



    .accent-ring {

      position: absolute;

      inset: -8px;

      border-radius: 50%;

      background: linear-gradient(135deg, var(--indigo-500), var(--purple-400));

      z-index: -1;

      animation: rotateRing 10s linear infinite;

      opacity: 0.7;

      filter: blur(4px);

    }



    @keyframes rotateRing {

      0% {

        transform: rotate(0deg);

      }



      100% {

        transform: rotate(360deg);

      }

    }



    .founder-info {

      display: flex;

      flex-direction: column;

      align-items: center;

      transform: translateZ(25px);

    }



    .founder-info h3 {

      font-size: 1.5rem;

      font-weight: 800;

      color: var(--slate-900);

      margin-bottom: 0.25rem;

    }



    .role-badge {

      font-size: 0.75rem;

      font-weight: 800;

      color: var(--indigo-600);

      text-transform: uppercase;

      letter-spacing: 0.1em;

      padding: 0.25rem 0.75rem;

      background: rgba(99, 102, 241, 0.08);

      border-radius: 12px;

      margin-bottom: 1rem;

      display: inline-block;

    }



    .founder-info p {

      font-size: 0.85rem;

      color: var(--slate-500);

      line-height: 1.6;

      margin-bottom: 1.5rem;

      font-weight: 500;

      max-width: 280px;

    }



    .founder-socials {

      display: flex;

      gap: 0.75rem;

      margin-bottom: 1.5rem;

    }



    .founder-socials a {

      width: 2rem;

      height: 2rem;

      border-radius: 50%;

      background: rgba(255, 255, 255, 0.5);

      border: 1px solid rgba(226, 232, 240, 0.8);

      display: flex;

      align-items: center;

      justify-content: center;

      color: var(--slate-600);

      transition: all 0.3s ease;

    }



    .founder-socials a:hover {

      background: var(--indigo-600);

      color: var(--white);

      transform: translateY(-2px);

      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);

    }



    .btn-story {

      display: inline-flex;

      align-items: center;

      gap: 0.5rem;

      padding: 0.6rem 1.25rem;

      background: var(--slate-900);

      color: var(--white);

      border-radius: 30px;

      font-size: 0.8rem;

      font-weight: 700;

      cursor: pointer;

      transition: all 0.3s ease;

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    }



    .btn-story:hover {

      background: var(--indigo-600);

      color: var(--white);

      box-shadow: 0 6px 15px rgba(79, 70, 229, 0.3);

      transform: translateY(-2px);

    }



    .audio-wave {

      display: flex;

      align-items: flex-end;

      gap: 2px;

      height: 12px;

      width: 14px;

    }



    .audio-wave span {

      width: 2px;

      background-color: currentColor;

      border-radius: 1px;

      height: 100%;

      animation: bounceWave 0.8s ease infinite alternate;

      transform-origin: bottom;

    }



    .audio-wave span:nth-child(1) {

      animation-delay: 0.1s;

      height: 30%;

    }



    .audio-wave span:nth-child(2) {

      animation-delay: 0.4s;

      height: 90%;

    }



    .audio-wave span:nth-child(3) {

      animation-delay: 0.2s;

      height: 60%;

    }



    .audio-wave span:nth-child(4) {

      animation-delay: 0.5s;

      height: 40%;

    }



    .btn-story:hover .audio-wave span {

      animation-play-state: running;

    }



    .btn-story .audio-wave span {

      animation-play-state: paused;

    }



    @keyframes bounceWave {

      0% {

        transform: scaleY(0.3);

      }



      100% {

        transform: scaleY(1.1);

      }

    }



    .storytelling-panel {

      position: relative;

      max-width: 58rem;

      margin: 6rem auto 4rem;

      padding: 3rem clamp(1.5rem, 5vw, 4rem);

      background: rgba(255, 255, 255, 0.4);

      backdrop-filter: blur(30px);

      -webkit-backdrop-filter: blur(30px);

      border: 1.5px solid rgba(255, 255, 255, 0.7);

      border-radius: 36px;

      box-shadow:

        0 15px 35px -10px rgba(0, 0, 0, 0.04),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

      text-align: center;

      overflow: hidden;

    }



    .storytelling-panel .panel-glow {

      position: absolute;

      top: -20%;

      left: 20%;

      width: 60%;

      height: 40%;

      background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);

      pointer-events: none;

      z-index: 0;

    }



    .glass-quote {

      font-family: serif;

      font-size: 8rem;

      line-height: 0.1;

      color: rgba(99, 102, 241, 0.12);

      position: absolute;

      top: 2.5rem;

      left: 2.5rem;

      user-select: none;

    }



    .storytelling-panel h3 {

      font-size: 2rem;

      font-weight: 800;

      color: var(--slate-900);

      margin-bottom: 1.5rem;

      position: relative;

      z-index: 1;

    }



    .storytelling-panel .story-text {

      font-size: clamp(1rem, 2.5vw, 1.15rem);

      line-height: 1.8;

      color: var(--slate-600);

      margin-bottom: 2rem;

      position: relative;

      z-index: 1;

      font-weight: 500;

      text-align: justify;

    }



    .storytelling-panel .story-footer {

      font-size: 0.95rem;

      line-height: 1.7;

      color: var(--slate-700);

      font-weight: 600;

      border-top: 1.5px solid rgba(226, 232, 240, 0.6);

      padding-top: 1.5rem;

      position: relative;

      z-index: 1;

      text-align: left;

    }



    .highlight-motive {

      color: var(--indigo-600);

      font-weight: 800;

      text-transform: uppercase;

      letter-spacing: 0.05em;

    }



    .founders-stats-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

      gap: 1.5rem;

      max-width: 58rem;

      margin: 0 auto 5rem;

    }



    .stat-box {

      background: rgba(255, 255, 255, 0.4);

      backdrop-filter: blur(20px);

      -webkit-backdrop-filter: blur(20px);

      border: 1px solid rgba(255, 255, 255, 0.6);

      border-radius: 24px;

      padding: 2rem 1.5rem;

      text-align: center;

      box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.03);

      transition: transform 0.4s ease, border-color 0.4s ease;

    }



    .stat-box:hover {

      transform: translateY(-5px);

      border-color: rgba(99, 102, 241, 0.4);

    }



    .stat-number {

      display: inline-block;

      font-size: 3rem;

      font-weight: 800;

      color: var(--slate-900);

      line-height: 1;

    }



    .stat-plus {

      font-size: 2rem;

      font-weight: 800;

      color: var(--indigo-600);

      vertical-align: top;

      margin-left: 2px;

    }



    .stat-label {

      font-size: 0.9rem;

      color: var(--slate-500);

      font-weight: 700;

      margin-top: 0.5rem;

    }



    .journey-timeline {

      max-width: 58rem;

      margin: 0 auto 6rem;

      padding: 0 1rem;

      text-align: center;

    }



    .timeline-title {

      font-size: 1.5rem;

      font-weight: 800;

      color: var(--slate-900);

      margin-bottom: 3.5rem;

    }



    .timeline-line {

      position: relative;

      height: 4px;

      background: rgba(226, 232, 240, 0.8);

      border-radius: 2px;

      margin-bottom: 2rem;

    }



    .timeline-progress {

      position: absolute;

      top: 0;

      left: 0;

      height: 100%;

      width: 0%;

      background: linear-gradient(90deg, var(--indigo-500), var(--purple-400));

      border-radius: 2px;

    }



    .timeline-steps {

      display: flex;

      justify-content: space-between;

      position: relative;

    }



    .timeline-step {

      width: 30%;

      position: relative;

      top: -24px;

      display: flex;

      flex-direction: column;

      align-items: center;

    }



    .step-dot {

      width: 14px;

      height: 14px;

      border-radius: 50%;

      background: var(--white);

      border: 3px solid rgba(226, 232, 240, 1);

      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      transition: all 0.4s ease;

      margin-bottom: 1rem;

      z-index: 10;

    }



    .timeline-step.active .step-dot {

      border-color: var(--purple-400);

      background: var(--indigo-600);

      transform: scale(1.3);

      box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);

    }



    .step-year {

      font-size: 1.1rem;

      font-weight: 800;

      color: var(--slate-900);

      margin-bottom: 0.25rem;

    }



    .step-desc {

      font-size: 0.85rem;

      color: var(--slate-500);

      font-weight: 600;

    }



    .no-scroll {

      overflow: hidden;

    }