body {
      font-family: "Poppins", Arial, sans-serif;
    }

    /* Stable fallbacks for the finalized brand theme. */
    .bg-brand-blue { background-color: #33A8FF; }
    .bg-brand-dark { background-color: #0B1220; }
    .text-brand-blue { color: #33A8FF; }
    .text-brand-dark { color: #0B1220; }
    .text-brand-slate { color: #1F2937; }
    .border-brand-blue { border-color: #33A8FF; }
    .to-brand-soft { --tw-gradient-to: #EAF7FF var(--tw-gradient-to-position); }
    .shadow-soft { box-shadow: 0 22px 70px rgba(51, 168, 255, 0.16); }
    .hover\:border-brand-blue:hover { border-color: #33A8FF; }

    .display-title {
      font-family: "Anton", Impact, sans-serif;
      font-weight: 400;
      letter-spacing: 0;
    }

    .brand-shape {
      position: relative;
      overflow: hidden;
    }

    .hero-visual {
      max-width: 620px;
      margin-left: auto;
    }

    .menu-toggle {
      display: grid;
      gap: 4px;
      width: 42px;
      height: 42px;
      place-content: center;
      border: 1px solid rgba(51, 168, 255, 0.28);
      border-radius: 999px;
      background: #fff;
    }

    .menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: #0B1220;
      transition: transform 220ms ease, opacity 220ms ease;
    }

    .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .mobile-menu {
      display: grid;
      max-height: 0;
      overflow: hidden;
      padding: 0 1.25rem;
      background: rgba(255, 255, 255, 0.98);
      opacity: 0;
      transition: max-height 280ms ease, padding 280ms ease, opacity 180ms ease;
    }

    .mobile-menu.open {
      max-height: 360px;
      padding-top: 0.5rem;
      padding-bottom: 1.25rem;
      opacity: 1;
    }

    .mobile-menu a {
      border-bottom: 1px solid #e0f2fe;
      padding: 0.9rem 0;
      color: #1F2937;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .service-icon {
      display: grid;
      width: 3rem;
      height: 3rem;
      margin-bottom: 1.5rem;
      place-items: center;
      border-radius: 1rem;
      background: #33A8FF;
      color: #fff;
    }

    .service-icon svg {
      width: 1.35rem;
      height: 1.35rem;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.7;
    }

    .service-card-featured {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 1.25rem;
      align-items: start;
    }

    .service-card-featured .service-icon {
      grid-row: span 2;
      margin-bottom: 0;
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

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

    .float-soft {
      animation: floatSoft 6s ease-in-out infinite;
    }

    .pulse-glow {
      animation: pulseGlow 3.8s ease-in-out infinite;
    }

    .hero-title-line {
      display: block;
      opacity: 0;
      transform: translateY(28px);
      animation: titleRise 850ms ease forwards;
    }

    .hero-title-line:nth-child(2) {
      animation-delay: 160ms;
    }

    .hero-title-question {
      max-width: 42rem;
      font-size: 0.68em;
      line-height: 1.12;
    }

    .shine-btn {
      position: relative;
      overflow: hidden;
    }

    .shine-btn::after {
      content: "";
      position: absolute;
      inset: 0;
      width: 48%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
      transform: translateX(-140%) skewX(-18deg);
      transition: transform 650ms ease;
      pointer-events: none;
    }

    .shine-btn:hover::after {
      transform: translateX(260%) skewX(-18deg);
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 26s linear infinite;
    }

    .marquee-group {
      display: flex;
      flex-shrink: 0;
      gap: 2rem;
      padding-right: 2rem;
    }

    .service-card {
      position: relative;
      overflow: hidden;
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(51, 168, 255, 0.16), transparent 42%);
      opacity: 0;
      transition: opacity 300ms ease;
      pointer-events: none;
    }

    .service-card:hover::before {
      opacity: 1;
    }

    @keyframes floatSoft {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-14px);
      }
    }

    @keyframes pulseGlow {
      0%, 100% {
        box-shadow: 0 22px 70px rgba(51, 168, 255, 0.16);
      }
      50% {
        box-shadow: 0 26px 90px rgba(51, 168, 255, 0.28);
      }
    }

    @keyframes titleRise {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes marquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .reveal,
      .float-soft,
      .pulse-glow,
      .hero-title-line,
      .marquee-track,
      .service-card,
      .service-card::before {
        animation: none;
        transition: none;
      }

      .reveal,
      .hero-title-line {
        opacity: 1;
        transform: none;
      }
    }

    @media (min-width: 1024px) {
      .menu-toggle,
      .mobile-menu {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .service-card-featured {
        display: block;
      }

      .service-card-featured .service-icon {
        margin-bottom: 1.5rem;
      }
    }

    @media (max-width: 420px) {
      .header-cta {
        display: none;
      }
    }