body {
        background-color: #fdf9f3;
        background-image: radial-gradient(#d1d5db 1px, transparent 1px);
        background-size: 32px 32px;
      }
      
      .neo-card {
        background: #ffffff;
        border: 2px solid #002068;
        box-shadow: 6px 6px 0px 0px #002068;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
        will-change: transform;
      }

      .neo-card:hover:not(.no-hover) {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px 0px #002068;
      }

      .neo-card-primary {
        background: #ffffff;
        color: #002068;
        border: 2px solid #002068;
        box-shadow: 6px 6px 0px 0px #002068;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
        will-change: transform;
      }

      .neo-card-primary:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px 0px #002068;
        background-color: #002068;
        color: #ffffff;
      }

      .parallax-layer {
        will-change: transform;
      }

      .modal-open {
        overflow: hidden;
      }

      /* Mobile Reveal Effect */
      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .reveal.active {
        opacity: 1;
        transform: translateY(0);
      }

      @media (max-width: 1024px) {
        .parallax-layer {
          transform: none !important;
          position: relative !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          margin-bottom: 2.5rem;
          width: 100% !important;
          max-width: 100% !important;
          display: flex;
          justify-content: center;
        }
        body {
          overflow-y: auto;
          height: auto;
        }
        main {
          height: auto !important;
          padding: 7rem 1.5rem !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center;
        }
      }

      body.modal-open {
        overflow: hidden !important;
        height: 100vh !important;
        position: fixed !important;
        width: 100% !important;
      }

      /* ══════════════════════════════════════════════════════
         ENTRANCE & ANIMATION SYSTEM
         ══════════════════════════════════════════════════════ */

      /* ── Keyframes ─────────────────────────────────────── */
      @keyframes heroTitleIn {
        0%   { opacity: 0; transform: translateY(44px); filter: blur(5px); }
        100% { opacity: 1; transform: translateY(0);    filter: blur(0);   }
      }
      @keyframes springUp {
        0%   { opacity: 0; transform: translateY(26px); }
        55%  { opacity: 1; transform: translateY(-5px); }
        78%  { transform: translateY(3px); }
        100% { opacity: 1; transform: translateY(0); }
      }
      @keyframes headerIn {
        from { opacity: 0; transform: translateY(-22px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes drawStroke {
        to { stroke-dashoffset: 0; }
      }
      @keyframes floatY {
        0%, 100% { transform: translateY(0); }
        50%       { transform: translateY(-9px); }
      }

      /* ── Header entrance ──────────────────────────────── */
      .anim-header {
        opacity: 0;
        animation: headerIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      /* ── Hero text ────────────────────────────────────── */
      .anim-hero-title {
        opacity: 0;
        animation: heroTitleIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s;
      }
      .anim-hero-sub {
        opacity: 0;
        animation: springUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.55s;
      }

      /* ── Scroll / load reveal variants ───────────────── */
      /* Applied to inner wrapper divs — never on parallax-layer or neo-card */
      .reveal-left {
        opacity: 0;
        transform: translateX(-52px);
        transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .reveal-right {
        opacity: 0;
        transform: translateX(52px);
        transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .reveal-scale {
        opacity: 0;
        transform: scale(0.72) rotate(12deg);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .reveal-bounce {
        opacity: 0;
        transform: translateY(36px) scale(0.83);
        transition: opacity 0.6s ease,
                    transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .reveal-left.active  { opacity: 1; transform: translateX(0); }
      .reveal-right.active { opacity: 1; transform: translateX(0); }
      .reveal-scale.active { opacity: 1; transform: scale(1) rotate(0deg); }
      .reveal-bounce.active{ opacity: 1; transform: translateY(0) scale(1); }

      /* ── SVG stroke draw ──────────────────────────────── */
      .svg-draw path {
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation: drawStroke 0.85s ease forwards 0.75s;
      }
      .svg-draw-arrow path {
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        animation: drawStroke 0.65s ease forwards 1.0s;
      }

      /* ── Continuous float (desktop only) ─────────────── */
      @media (min-width: 1024px) {
        .float-a { animation: floatY 4.2s ease-in-out infinite; }
        .float-b { animation: floatY 5.6s ease-in-out infinite 1.1s; }
        .float-c { animation: floatY 4.9s ease-in-out infinite 0.5s; }
        .float-d { animation: floatY 6.1s ease-in-out infinite 1.8s; }
      }

      /* ── Reduced motion overrides ─────────────────────── */
      @media (prefers-reduced-motion: reduce) {
        .anim-header,
        .anim-hero-title,
        .anim-hero-sub { animation: none; opacity: 1; }

        .reveal-left,
        .reveal-right,
        .reveal-scale,
        .reveal-bounce { opacity: 0; transform: none; transition: opacity 0.3s ease; }

        .reveal-left.active,
        .reveal-right.active,
        .reveal-scale.active,
        .reveal-bounce.active { opacity: 1; }

        .svg-draw path,
        .svg-draw-arrow path { animation: none; stroke-dashoffset: 0; }

        .float-a, .float-b, .float-c, .float-d { animation: none !important; }
      }