body {
      font-family: 'Inter', sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    .font-heading {
      font-family: 'Space Grotesk', sans-serif;
    }

    /* ---------- Hidden scrollbar (page still scrolls) ---------- */
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      background: transparent;
    }

    html {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    /* ---------- Animated aurora hero ---------- */
    .hero-bg {
      background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(30, 58, 138, 0.55), transparent 60%),
        radial-gradient(ellipse 50% 45% at 80% 15%, rgba(43, 75, 215, 0.35), transparent 60%),
        radial-gradient(ellipse 55% 50% at 70% 80%, rgba(212, 160, 23, 0.16), transparent 65%),
        radial-gradient(ellipse 45% 45% at 15% 85%, rgba(43, 75, 215, 0.28), transparent 60%),
        linear-gradient(135deg, #060914 0%, #0B1226 45%, #101A36 100%);
    }

    .aurora-blob {
      position: absolute;
      filter: blur(90px);
      opacity: 0.5;
      will-change: transform;
      pointer-events: none;
    }

    /* ---------- Grid overlay ---------- */
    .grid-overlay {
      background-image:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
      mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
    }

    /* ---------- Film grain ---------- */
    .grain::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 90;
      pointer-events: none;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* ---------- Glassmorphism ---------- */
    .glass {
      background: rgba(16, 26, 54, 0.55);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(148, 163, 184, 0.15);
    }

    .glass-strong {
      background: linear-gradient(160deg, rgba(30, 58, 138, 0.28), rgba(11, 18, 38, 0.7));
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      border: 1px solid rgba(148, 163, 184, 0.18);
    }

    /* ---------- Gradient border card ---------- */
    .grad-card {
      position: relative;
      background: linear-gradient(160deg, rgba(20, 32, 66, 0.6), rgba(10, 16, 34, 0.85));
      border-radius: 1.25rem;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    }

    .grad-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(150deg, rgba(245, 197, 24, 0.5), rgba(43, 75, 215, 0.3) 35%, rgba(148, 163, 184, 0.12) 70%, rgba(245, 197, 24, 0.25));
      -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;
      pointer-events: none;
    }

    .grad-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 60px -15px rgba(245, 197, 24, 0.2), 0 20px 50px -20px rgba(0, 0, 0, 0.7);
    }

    /* ---------- Spotlight mouse-follow ---------- */
    .spotlight {
      position: relative;
      overflow: hidden;
    }

    .spotlight::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(245, 197, 24, 0.12), transparent 45%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .spotlight:hover::after {
      opacity: 1;
    }

    /* ---------- Gold gradient text ---------- */
    .gold-text {
      background: linear-gradient(92deg, #FDE68A, #F5C518 35%, #D4A017 70%, #FDE68A);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmer 4s linear infinite;
    }

    /* ---------- Scroll reveal ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-d1 {
      transition-delay: 0.08s;
    }

    .reveal-d2 {
      transition-delay: 0.16s;
    }

    .reveal-d3 {
      transition-delay: 0.24s;
    }

    .reveal-d4 {
      transition-delay: 0.32s;
    }

    /* ---------- Cursor glow ---------- */
    .cursor-glow {
      position: fixed;
      top: 0;
      left: 0;
      width: 560px;
      height: 560px;
      border-radius: 9999px;
      background: radial-gradient(circle, rgba(43, 75, 215, 0.12), rgba(245, 197, 24, 0.05) 40%, transparent 70%);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 1;
      will-change: transform;
    }

    /* ---------- Scroll progress ---------- */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 100%;
      transform-origin: 0 50%;
      transform: scaleX(0);
      background: linear-gradient(90deg, #1E3A8A, #F5C518);
      z-index: 80;
    }

    /* ---------- Process timeline ---------- */
    .timeline-line {
      background: linear-gradient(180deg, rgba(245, 197, 24, 0.7), rgba(245, 197, 24, 0.08));
    }

    .step-node {
      position: relative;
      box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.15), 0 0 24px rgba(245, 197, 24, 0.35);
    }

    /* ---------- Marquee ---------- */
    .marquee-track {
      animation: marquee 28s linear infinite;
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    /* ---------- Hero mockup chart bars ---------- */
    .bar {
      border-radius: 4px 4px 0 0;
      transition: height 0.6s ease;
    }

    .bar-group:hover .bar {
      filter: brightness(1.3);
    }

    [id] {
      scroll-margin-top: 96px;
    }

    /* ---------- Reduced motion ---------- */
    @media (prefers-reduced-motion: reduce) {

      .aurora-blob,
      .gold-text,
      .marquee-track,
      .scroll-progress {
        animation: none !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .grad-card,
      .bar {
        transition: none;
      }

      html {
        scroll-behavior: auto;
      }

      .cursor-glow {
        display: none;
      }
    }

    /* ---------- Focus states ---------- */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
      outline: 2px solid #F5C518;
      outline-offset: 3px;
      border-radius: 8px;
    }