*, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      background-color: #F5F5F7;
      font-family: 'Inter','Helvetica Neue',Arial,sans-serif;
      color: #1D1D1F;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── Glassmorphism Nav ── */
    .glass-nav {
      background: rgba(255,255,255,0.72);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(210,210,215,0.5);
    }

    /* ── Buttons ── */
    .btn-primary {
      background: linear-gradient(135deg,#0071E3,#0066CC);
      transition: transform .25s cubic-bezier(.4,0,.2,1),
                  box-shadow .25s cubic-bezier(.4,0,.2,1),
                  background .25s;
    }
    .btn-primary:hover {
      transform: scale(1.035);
      box-shadow: 0 8px 28px rgba(0,113,227,.38);
      background: linear-gradient(135deg,#0077ED,#006FD6);
    }

   
    .bg-radial-gradient {
      background-image: radial-gradient(var(--tw-gradient-stops));
    }

    .btn-secondary {
      background: rgba(255,255,255,.9);
      border: 1.5px solid #D2D2D7;
      transition: transform .25s cubic-bezier(.4,0,.2,1),
                  box-shadow .25s, background .25s, border-color .25s;
    }
    .btn-secondary:hover {
      transform: scale(1.035);
      background: #fff;
      border-color: #86868B;
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }

    /* ── Feature Cards ── */
    .feature-card {
      transition: transform .3s cubic-bezier(.4,0,.2,1),
                  box-shadow .3s cubic-bezier(.4,0,.2,1);
    }
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 48px rgba(0,0,0,.09);
    }

    /* ── macOS Window ── */
    .macos-window {
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.06);
      border: 1px solid rgba(210,210,215,.85);
    }
    .macos-titlebar {
      background: linear-gradient(180deg,#EBEBEB,#D8D8D8);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      position: relative;
      border-bottom: 1px solid #C8C8C8;
    }
    .macos-title-label {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: #666;
      font-weight: 500;
      pointer-events: none;
      white-space: nowrap;
    }
    .dot {
      width: 12px; height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-right: 6px;
    }
    .dot-red    { background: #FF5F56; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.18); }
    .dot-yellow { background: #FFBD2E; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.1);  }
    .dot-green  { background: #27C93F; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.1);  }

    /* ── Terminal ── */
    .terminal-body {
      background: #1C1C1E;
      padding: 22px 24px 28px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      line-height: 1.75;
      min-height: 290px;
    }

    /* ── Neumorphic ── */
    .neumorphic {
      background: #F5F5F7;
      box-shadow: 8px 8px 18px #dcdcde, -8px -8px 18px #ffffff;
    }

    /* ── Glassmorphic card ── */
    .glass-card {
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(210,210,215,.7);
    }

    /* ── Scroll Fade-Up ── */
    .fade-up {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s cubic-bezier(.4,0,.2,1),
                  transform .65s cubic-bezier(.4,0,.2,1);
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ── FAQ ── */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .42s cubic-bezier(.4,0,.2,1);
    }
    .faq-answer.open { max-height: 220px; }
    .faq-icon { transition: transform .3s ease; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }

    /* ── Animations ── */
    @keyframes blink {
      0%,100% { opacity: 1; }
      50%      { opacity: 0; }
    }
    .cursor {
      display: inline-block;
      width: 8px; height: 14px;
      background: #27C93F;
      animation: blink 1s infinite;
      vertical-align: middle;
      margin-left: 2px;
    }
    @keyframes pulse-glow {
      0%,100% { box-shadow: 0 0 0 0 rgba(39,201,63,.35); }
      50%      { box-shadow: 0 0 0 7px rgba(39,201,63,0); }
    }
    .live-pulse { animation: pulse-glow 2s infinite; }

    @keyframes live-dot-pulse {
      0%,100% { opacity: 1; }
      50%      { opacity: .45; }
    }
    .live-dot {
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #27C93F;
      animation: live-dot-pulse 1.6s infinite;
    }
    /* ── Advanced FAQ ── */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-10px);
      transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                  opacity 0.4s ease,
                  transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .faq-answer.open { 
      max-height: 400px; /* high enough to fit text */
      opacity: 1;
      transform: translateY(0);
    }
    .faq-item.open .faq-chevron { 
      transform: rotate(180deg); 
    }
    .faq-item.open {
      border-color: rgba(0, 113, 227, 0.3);
      box-shadow: 0 12px 40px -10px rgba(0, 113, 227, 0.15);
    }

    /* ── Hero glow blob ── */
    .hero-blob {
      position: absolute;
      top: -60px; left: 50%;
      transform: translateX(-50%);
      width: 760px; height: 420px;
      background: radial-gradient(ellipse at center, rgba(209,231,255,.55) 0%, transparent 70%);
      pointer-events: none;
      border-radius: 50%;
      filter: blur(24px);
    }

    /* ── Gradient text ── */
    .gradient-text {
      background: linear-gradient(130deg,#0071E3 0%,#6DB8FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #F5F5F7; }
    ::-webkit-scrollbar-thumb { background: #C7C7CC; border-radius: 3px; }

    /* ── Advanced Hero Animations ── */

    /* Text Shimmer for H1 */
    @keyframes textShimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: -200% 50%; }
    }
    .animate-text-shimmer {
      animation: textShimmer 4s ease-in-out infinite alternate;
    }

    /* Staggered Fade Up for Left Column */
    .hero-stagger > * {
      opacity: 0;
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-stagger > *:nth-child(1) { animation-delay: 100ms; }
    .hero-stagger > *:nth-child(2) { animation-delay: 200ms; }
    .hero-stagger > *:nth-child(3) { animation-delay: 300ms; }
    .hero-stagger > *:nth-child(4) { animation-delay: 400ms; }
    .hero-stagger > *:nth-child(5) { animation-delay: 500ms; }

    /* Staggered Cards Entry */
    .stagger-cards > * {
      opacity: 0;
      animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .stagger-cards > *:nth-child(1) { animation-delay: 600ms; }
    .stagger-cards > *:nth-child(2) { animation-delay: 700ms; }

    @keyframes heroFadeUp {
      0% { opacity: 0; transform: translateY(30px) scale(0.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .delay-500 { animation-delay: 500ms; }

    /* 3D Perspective */
    .perspective-1200 { perspective: 1200px; }

    /* Complex Floating Animation */
    @keyframes floatComplex {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-8px) rotate(-1deg); }
      50% { transform: translateY(-12px) rotate(0deg); }
      75% { transform: translateY(-8px) rotate(1deg); }
    }
    .animate-float-complex {
      animation: floatComplex 8s ease-in-out infinite;
    }

    /* Background Drift Animations */
    @keyframes driftSlow {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(3vw, 3vw) scale(1.05); }
      100% { transform: translate(0, 0) scale(1); }
    }
    @keyframes driftMedium {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-3vw, 2vw) scale(0.95); }
      100% { transform: translate(0, 0) scale(1); }
    }
    @keyframes driftFast {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(2vw, -3vw) scale(1.02); }
      100% { transform: translate(0, 0) scale(1); }
    }
    
    .animate-drift-slow { animation: driftSlow 15s ease-in-out infinite; }
    .animate-drift-medium { animation: driftMedium 12s ease-in-out infinite; }
    .animate-drift-fast { animation: driftFast 9s ease-in-out infinite; }

    /* Utilities */
    .animate-spin-slow { animation: spin 8s linear infinite; }
    
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .animate-blink { animation: blink 1s step-end infinite; }
    
    @keyframes pulseSlow {
      0%, 100% { opacity: 0.5; transform: scale(0.9); }
      50% { opacity: 0.8; transform: scale(1.05); }
    }
    .animate-pulse-slow { animation: pulseSlow 6s ease-in-out infinite; }



/* Custom Light Scrollbar for the table on mobile */
  .custom-scroll::-webkit-scrollbar { height: 6px; }
  .custom-scroll::-webkit-scrollbar-track { background: transparent; }
  .custom-scroll::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 10px; }
  .custom-scroll::-webkit-scrollbar-thumb:hover { background: #D1D5DB; }


  @keyframes slideRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(80px); }
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }


  @keyframes shine {
    100% { left: 125%; }
  }


    /* Add any custom CSS classes here (like your .glass-nav or animations) */
    .glass-nav {
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .btn-primary {
      background: #1D1D1F;
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      background: #333336;
      transform: translateY(-1px);
    }

/* Custom Light Scrollbar */
  .custom-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scroll::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 10px;
  }
  .custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #D1D5DB;
  }