:root {
      --bg-deep: #05070E;
      --bg-surface: rgba(15, 20, 38, 0.72);
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-glow: rgba(110, 86, 255, 0.48);
    }

    body {
      background-color: var(--bg-deep);
      color: #F8FAFC;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      selection-background-color: #6E56FF;
    }

    h1, h2, h3, h4, .font-display {
      font-family: 'Plus Jakarta Sans', sans-serif;
      letter-spacing: -0.025em;
    }

    /* Metallic Silver-White Heading Mask */
    .text-metallic {
      background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 65%, #94A3B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .text-gradient-brand {
      background: linear-gradient(135deg, #A855F7 0%, #6E56FF 50%, #38BDF8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Cosmic Grid Pattern ("Home Pattern" / "Pricing Pattern") */
    .bg-cosmic-grid {
      background-size: 56px 56px;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    }

    .bg-dot-matrix {
      background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
    }

    /* 1. Signature Webflow Double-Text Vertical Slot-Slide Button & Link Effect */
    .wf-slot-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .wf-slot-wrap {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      overflow: hidden;
      height: 1.4em;
      line-height: 1.4em;
    }
    .wf-slot-wrap > span {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
      white-space: nowrap;
    }
    .wf-slot-wrap > span:nth-child(1) {
      transform: translateY(0%);
    }
    .wf-slot-wrap > span:nth-child(2) {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      transform: translateY(0%);
    }
    .wf-slot-btn:hover .wf-slot-wrap > span:nth-child(1),
    .wf-slot-link:hover .wf-slot-wrap > span:nth-child(1) {
      transform: translateY(-100%);
    }
    .wf-slot-btn:hover .wf-slot-wrap > span:nth-child(2),
    .wf-slot-link:hover .wf-slot-wrap > span:nth-child(2) {
      transform: translateY(-100%);
    }

    /* Glowing Primary Button */
    .btn-primary-glow {
      background: linear-gradient(135deg, #6E56FF 0%, #4F46E5 50%, #3B82F6 100%);
      box-shadow: 0 0 25px rgba(110, 86, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35);
      transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .btn-primary-glow:hover {
      box-shadow: 0 0 38px rgba(110, 86, 255, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.55);
      transform: translateY(-1px);
    }

    /* Glass Button */
    .btn-glass {
      background: rgba(15, 20, 38, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      transition: all 0.3s ease;
    }
    .btn-glass:hover {
      border-color: rgba(110, 86, 255, 0.55);
      background: rgba(24, 31, 58, 0.88);
      box-shadow: 0 0 24px rgba(110, 86, 255, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
    }

    /* Section Pill Badge */
    .section-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.375rem 1rem;
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #C4B5FD;
      background: radial-gradient(100% 100% at 50% 0%, rgba(110, 86, 255, 0.28) 0%, rgba(15, 20, 38, 0.85) 100%);
      border: 1px solid rgba(139, 92, 246, 0.35);
      box-shadow: 0 0 20px rgba(110, 86, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    /* Glassmorphic Cosmic Card */
    .cosmic-card {
      background: linear-gradient(180deg, rgba(18, 24, 46, 0.78) 0%, rgba(10, 14, 28, 0.88) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(16px);
      transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .cosmic-card:hover {
      border-color: rgba(110, 86, 255, 0.45);
      box-shadow: 0 24px 60px rgba(10, 12, 30, 0.75), 0 0 32px rgba(110, 86, 255, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
    }

    /* 2. Hero Falling Rain Lines ("Home Rain Line 01" & "02") */
    .rain-line-track {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.01) 100%);
      overflow: hidden;
      pointer-events: none;
    }
    .rain-droplet {
      position: absolute;
      top: -120px;
      left: -1px;
      width: 3px;
      height: 110px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(110, 86, 255, 0) 0%, rgba(110, 86, 255, 0.8) 65%, #38BDF8 100%);
      box-shadow: 0 0 12px #6E56FF;
      animation: rainDrop linear infinite;
    }
    @keyframes rainDrop {
      0% { transform: translateY(-120px); opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { transform: translateY(950px); opacity: 0; }
    }

    /* Hero Horizon Arc ("Home Shape") */
    .hero-horizon-arc {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 150%;
      max-width: 1800px;
      height: 540px;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      background: radial-gradient(50% 65% at 50% 0%, rgba(110, 86, 255, 0.26) 0%, rgba(59, 130, 246, 0.08) 48%, rgba(5, 7, 14, 0) 100%);
      border-top: 1px solid rgba(139, 92, 246, 0.45);
      box-shadow: 0 -25px 90px rgba(110, 86, 255, 0.32), inset 0 15px 50px rgba(110, 86, 255, 0.22);
      pointer-events: none;
    }

    /* 4. Odometer Rolling Digit Strip */
    .odometer-column {
      display: inline-block;
      height: 1.15em;
      overflow: hidden;
      vertical-align: bottom;
      position: relative;
    }
    .odometer-strip {
      display: flex;
      flex-direction: column;
      transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .odometer-strip span {
      height: 1.15em;
      line-height: 1.15em;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 5. Infinite Smooth Marquees */
    @keyframes marqueeScroll {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .animate-marquee-logos {
      display: flex;
      width: max-content;
      animation: marqueeScroll 28s linear infinite;
    }
    .animate-marquee-cards {
      display: flex;
      width: max-content;
      animation: marqueeScroll 42s linear infinite;
    }
    .animate-marquee- logos:hover,
    .animate-marquee-cards:hover {
      animation-play-state: paused;
    }

    /* 6. SVG Path Flow & Floating Nodes */
    @keyframes dashFlow {
      to {
        stroke-dashoffset: -120;
      }
    }
    .svg-beam-flow {
      stroke-dasharray: 8 16;
      animation: dashFlow 2.6s linear infinite;
    }
    .svg-beam-flow-reverse {
      stroke-dasharray: 8 16;
      animation: dashFlow 2.6s linear infinite reverse;
    }

    @keyframes floatBob {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }
    .float-bob-1 { animation: floatBob 4.2s ease-in-out infinite; }
    .float-bob-2 { animation: floatBob 5.1s ease-in-out 0.6s infinite; }
    .float-bob-3 { animation: floatBob 4.7s ease-in-out 1.2s infinite; }

    /* Bento Card Hover Floating Graphic ("Features Image Over") */
    .bento-over-graphic {
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
    }
    .cosmic-card:hover .bento-over-graphic {
      transform: translateY(-6px) scale(1.02);
    }

    /* Scroll Reveal Utility */
    .reveal-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-up.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Word Scrub Highlight */
    .scrub-word {
      color: rgba(148, 163, 184, 0.25);
      transition: color 0.25s ease, text-shadow 0.25s ease;
    }
    .scrub-word.active {
      color: #F8FAFC;
      text-shadow: 0 0 22px rgba(110, 86, 255, 0.35);
    }