:root {
        color-scheme: dark;
      }

      body {
        background:
          radial-gradient(circle at top, rgba(167, 139, 250, 0.14), transparent 22%),
          linear-gradient(180deg, #050b14 0%, #07111f 36%, #091523 100%);
        overflow-x: hidden;
      }

      .grid-fade {
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 70px 70px;
        mask-image: radial-gradient(circle at center, black 35%, transparent 80%);
      }

      .hero-content-shell {
        position: relative;
        z-index: 1;
      }

      .hero-main-layout {
        padding-top: 2.75rem;
        padding-bottom: 5rem;
      }

      .hero-device-backdrop {
        position: absolute;
        inset: 5.75rem 0 0;
        display: flex;
        justify-content: center;
        pointer-events: none;
        z-index: 0;
      }

      .hero-device-backdrop__image {
        --device-shift-x: 8%;
        --device-shift-y: 0rem;
        --device-scale: 1;
        width: min(84rem, 104vw);
        max-width: none;
        opacity: 0.3;
        object-fit: contain;
        transform: translate3d(var(--device-shift-x), var(--device-shift-y), 0) scale(var(--device-scale));
        filter: drop-shadow(0 32px 90px rgba(16, 11, 38, 0.55)) saturate(1.05);
        -webkit-mask-image: radial-gradient(circle at 58% 42%, black 0, black 52%, transparent 90%);
        mask-image: radial-gradient(circle at 58% 42%, black 0, black 52%, transparent 90%);
        animation: device-float 15s ease-in-out infinite;
      }

      .contact-map-frame {
        height: 30rem;
      }

      .contact-form__label {
        display: block;
        margin-bottom: 0.7rem;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgb(148 163 184);
      }

      .contact-form__required {
        color: rgb(248 113 113);
      }

      .contact-form__input {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.06);
        padding: 1rem 1.1rem;
        color: rgb(255, 255, 255);
        outline: none;
        transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
      }

      .contact-form__input:focus {
        border-color: rgba(196, 181, 253, 0.55);
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
      }

      .contact-form__input[aria-invalid="true"] {
        border-color: rgba(248, 113, 113, 0.8);
        box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
      }

      .contact-form__textarea {
        min-height: 11rem;
        resize: vertical;
      }

      .contact-form__error {
        min-height: 1.35rem;
        margin-top: 0.55rem;
        font-size: 0.85rem;
        line-height: 1.35rem;
        color: rgb(252 165 165);
      }

      .contact-form__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 9999px;
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
        padding: 1rem 1.75rem;
        font-size: 1rem;
        font-weight: 700;
        color: rgb(255, 255, 255);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 80px rgba(94, 45, 180, 0.34);
        transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
      }

      .contact-form__submit:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
      }

      .contact-form__submit:disabled {
        cursor: wait;
        opacity: 0.78;
        transform: none;
      }

      .contact-form__status {
        min-height: 3.35rem;
        flex: 1 1 auto;
        border-radius: 1rem;
        border: 1px solid transparent;
        padding: 0.95rem 1rem;
        font-size: 0.95rem;
        line-height: 1.45rem;
        color: rgb(203 213 225);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
      }

      .contact-form__status.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .contact-form__status.is-loading {
        border-color: rgba(196, 181, 253, 0.2);
        background: rgba(255, 255, 255, 0.05);
      }

      .contact-form__status.is-success {
        border-color: rgba(74, 222, 128, 0.28);
        background: rgba(34, 197, 94, 0.12);
        color: rgb(220 252 231);
      }

      .contact-form__status.is-error {
        border-color: rgba(248, 113, 113, 0.3);
        background: rgba(239, 68, 68, 0.12);
        color: rgb(254 226 226);
      }

      .contact-layout > * {
        min-width: 0;
      }

      .contact-detail-value,
      .contact-detail-text {
        min-width: 0;
      }

      .contact-detail-value span,
      .contact-detail-text {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .panel-hover {
        position: relative;
        overflow: hidden;
        transition:
          transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 260ms ease,
          border-color 260ms ease,
          background-color 260ms ease;
      }

      .panel-hover::after {
        content: "";
        position: absolute;
        inset: auto -12% -24% auto;
        width: 14rem;
        height: 14rem;
        border-radius: 9999px;
        background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, rgba(167, 139, 250, 0.08) 38%, transparent 72%);
        opacity: 0;
        transform: translate3d(1rem, 1rem, 0) scale(0.85);
        transition: opacity 260ms ease, transform 260ms ease;
        pointer-events: none;
      }

      .panel-hover .rounded-full {
        transition:
          transform 220ms ease,
          border-color 220ms ease,
          background-color 220ms ease,
          color 220ms ease;
      }

      .spotlight {
        position: absolute;
        inset: auto;
        width: 26rem;
        height: 26rem;
        border-radius: 9999px;
        filter: blur(48px);
        opacity: 0.55;
        animation: drift 16s ease-in-out infinite alternate;
      }

      .orbital-ring {
        position: absolute;
        inset: 50% auto auto 50%;
        border: 1px solid rgba(221, 235, 255, 0.12);
        border-radius: 9999px;
        transform-style: preserve-3d;
      }

      .orbital-ring::before {
        content: "";
        position: absolute;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 9999px;
        background: linear-gradient(135deg, #c4b5fd, #7c3aed);
        box-shadow: 0 0 24px rgba(196, 181, 253, 0.7);
      }

      .ring-a {
        width: 16rem;
        height: 16rem;
        margin-left: -8rem;
        margin-top: -8rem;
        transform: rotateX(72deg) rotateZ(0deg);
        animation: spin 12s linear infinite;
      }

      .ring-a::before {
        top: 1.3rem;
        left: 1.5rem;
      }

      .ring-b {
        width: 22rem;
        height: 22rem;
        margin-left: -11rem;
        margin-top: -11rem;
        transform: rotateX(74deg) rotateZ(0deg);
        animation: spin-reverse 16s linear infinite;
      }

      .ring-b::before {
        right: 2.25rem;
        bottom: 1.75rem;
      }

      .three-d-stage {
        perspective: 1600px;
        transform-style: preserve-3d;
        animation: stage-sway 9s ease-in-out infinite;
      }

      .tilt-card {
        transform-style: preserve-3d;
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
      }

      .tilt-layer {
        transform: translateZ(40px);
      }

      .tilt-layer-deep {
        transform: translateZ(75px);
      }

      .ambient-depth {
        animation: depth-float 7.5s ease-in-out infinite;
      }

      .ambient-card-a {
        animation: card-orbit-a 7.2s ease-in-out infinite;
      }

      .ambient-card-b {
        animation: card-orbit-b 6.4s ease-in-out -1.2s infinite;
      }

      .ambient-card-c {
        animation: card-orbit-c 8.1s ease-in-out -2.1s infinite;
      }

      .ambient-cluster {
        animation: cluster-float 7.8s ease-in-out -1.4s infinite;
      }

      .glass-panel {
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)),
          linear-gradient(135deg, rgba(56, 33, 104, 0.42), rgba(34, 49, 112, 0.3) 52%, rgba(18, 29, 68, 0.22) 100%);
      }

      .hero-outline {
        position: relative;
      }

      .hero-outline::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, rgba(196, 181, 253, 0.22), rgba(255, 255, 255, 0.03), rgba(196, 181, 253, 0.12));
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .reveal-up {
        opacity: 0;
        transform: translateY(28px);
        animation: reveal 1s ease forwards;
      }

      .reveal-delay-1 {
        animation-delay: 0.1s;
      }

      .reveal-delay-2 {
        animation-delay: 0.22s;
      }

      .reveal-delay-3 {
        animation-delay: 0.34s;
      }

      .reveal-delay-4 {
        animation-delay: 0.46s;
      }

      .pulse-line {
        position: relative;
        overflow: hidden;
      }

      .pulse-line::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
        animation: sweep 4.8s ease-in-out infinite;
      }

      .section-shell,
      .tilt-card,
      .glass-panel,
      .spotlight,
      .orbital-ring,
      .scroll-progress__bar,
      .scroll-progress__glow {
        will-change: transform, opacity;
      }

      .scroll-progress {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 70;
        height: 4px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
      }

      .scroll-progress__bar {
        height: 100%;
        width: 100%;
        transform-origin: left center;
        transform: scaleX(0);
        background: linear-gradient(90deg, #c026d3 0%, #c4b5fd 45%, #7c3aed 100%);
      }

      .scroll-progress__glow {
        position: absolute;
        inset: -6px 0 auto 0;
        height: 14px;
        transform-origin: left center;
        transform: scaleX(0);
        filter: blur(12px);
        opacity: 0.8;
        background: linear-gradient(90deg, rgba(192, 38, 211, 0.7), rgba(196, 181, 253, 0.8), rgba(124, 58, 237, 0.7));
      }

      .section-shell {
        position: relative;
      }

      .section-shell::after {
        content: "";
        position: absolute;
        inset: auto 2rem 0 2rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
        pointer-events: none;
      }

      .floating-badge {
        animation:
          reveal 0.9s ease forwards,
          drift 12s ease-in-out 1s infinite alternate;
      }

      @keyframes spin {
        from {
          transform: rotateX(72deg) rotateZ(0deg);
        }
        to {
          transform: rotateX(72deg) rotateZ(360deg);
        }
      }

      @keyframes spin-reverse {
        from {
          transform: rotateX(74deg) rotateZ(360deg);
        }
        to {
          transform: rotateX(74deg) rotateZ(0deg);
        }
      }

      @keyframes drift {
        from {
          transform: translate3d(-2rem, -1rem, 0) scale(0.95);
        }
        to {
          transform: translate3d(2rem, 1rem, 0) scale(1.08);
        }
      }

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

      @keyframes device-float {
        0%,
        100% {
          transform: translate3d(var(--device-shift-x), var(--device-shift-y), 0) scale(var(--device-scale));
        }
        50% {
          transform: translate3d(calc(var(--device-shift-x) + 1.5%), calc(var(--device-shift-y) - 14px), 0) scale(calc(var(--device-scale) * 1.018));
        }
      }

      @keyframes stage-sway {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: translate3d(0, -12px, 0) rotateX(1.5deg) rotateY(-2deg);
        }
      }

      @keyframes depth-float {
        0%,
        100% {
          transform: translate3d(0, 0, 75px) rotateX(0deg);
        }
        50% {
          transform: translate3d(0, -10px, 92px) rotateX(1.2deg);
        }
      }

      @keyframes card-orbit-a {
        0%,
        100% {
          transform: translate3d(0, 0, 40px) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: translate3d(-8px, -14px, 58px) rotateX(1.8deg) rotateY(-2.2deg);
        }
      }

      @keyframes card-orbit-b {
        0%,
        100% {
          transform: translate3d(0, 0, 40px) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: translate3d(9px, -10px, 54px) rotateX(-1.2deg) rotateY(1.8deg);
        }
      }

      @keyframes card-orbit-c {
        0%,
        100% {
          transform: translate3d(0, 0, 40px) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: translate3d(-6px, -12px, 56px) rotateX(1deg) rotateY(-1.5deg);
        }
      }

      @keyframes cluster-float {
        0%,
        100% {
          transform: translate3d(0, 0, 40px);
        }
        50% {
          transform: translate3d(0, -8px, 50px);
        }
      }

      @keyframes sweep {
        0%,
        12% {
          transform: translateX(-120%);
        }
        48%,
        100% {
          transform: translateX(120%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .spotlight,
        .orbital-ring,
        .reveal-up,
        .pulse-line::after,
        .floating-badge,
        .hero-device-backdrop__image {
          animation: none !important;
        }

        .reveal-up {
          opacity: 1 !important;
          transform: none !important;
        }

        .tilt-card {
          transition: none;
          transform: none !important;
        }

        .three-d-stage,
        .ambient-depth,
        .ambient-card-a,
        .ambient-card-b,
        .ambient-card-c,
        .ambient-cluster {
          animation: none !important;
          transform: none !important;
        }
      }

      @media (max-width: 767px) {
        .contact-map-frame {
          height: 22rem;
        }

        .contact-detail-value,
        .contact-detail-text {
          font-size: 1rem;
          line-height: 1.5rem;
        }

        .hero-main-layout {
          padding-top: 2rem;
          padding-bottom: 4rem;
        }

        .hero-device-backdrop {
          inset: 7.25rem -20% auto;
        }

        .hero-device-backdrop__image {
          width: min(44rem, 148vw);
          --device-shift-x: 0%;
          --device-shift-y: 0rem;
          opacity: 0.22;
          -webkit-mask-image: radial-gradient(circle at 50% 42%, black 0, black 48%, transparent 86%);
          mask-image: radial-gradient(circle at 50% 42%, black 0, black 48%, transparent 86%);
        }

        .spotlight {
          width: 16rem;
          height: 16rem;
          filter: blur(42px);
          opacity: 0.42;
        }

        .ring-a {
          width: 11rem;
          height: 11rem;
          margin-left: -5.5rem;
          margin-top: -5.5rem;
        }

        .ring-b {
          width: 15rem;
          height: 15rem;
          margin-left: -7.5rem;
          margin-top: -7.5rem;
        }

        .section-shell::after {
          inset-inline: 1rem;
        }

        .three-d-stage {
          animation-duration: 11s;
        }

        .ambient-depth,
        .ambient-card-a,
        .ambient-card-b,
        .ambient-card-c,
        .ambient-cluster {
          animation-duration: 9.5s;
        }
      }

      @media (hover: hover) and (pointer: fine) {
        .panel-hover:hover {
          transform: translateY(-8px) scale(1.01);
          border-color: rgba(196, 181, 253, 0.24);
          box-shadow:
            0 26px 70px rgba(8, 10, 20, 0.46),
            0 0 0 1px rgba(196, 181, 253, 0.1),
            0 0 42px rgba(124, 58, 237, 0.14);
        }

        .panel-hover:hover::after {
          opacity: 1;
          transform: translate3d(0, 0, 0) scale(1);
        }

        .panel-hover:hover .rounded-full {
          transform: translateY(-2px);
          border-color: rgba(196, 181, 253, 0.22);
          background-color: rgba(255, 255, 255, 0.085);
        }

        .panel-hover:hover h3 {
          text-shadow: 0 0 18px rgba(196, 181, 253, 0.12);
        }
      }

      @media (min-width: 640px) {
        .contact-form__span-two {
          grid-column: span 2;
        }
      }

      @media (min-width: 1024px) {
        .hero-main-layout {
          padding-top: 3.5rem;
          padding-bottom: 7rem;
        }

        .hero-device-backdrop {
          inset: 8.55rem auto 0 29.25%;
          width: min(45.5rem, 40.5vw);
          justify-content: flex-start;
          align-items: flex-start;
          overflow: visible;
        }

        .hero-device-backdrop__image {
          width: 100%;
          --device-shift-x: -19.5%;
          --device-shift-y: 3.35rem;
          --device-scale: 1.11;
          opacity: 0.38;
          -webkit-mask-image: radial-gradient(circle at 53% 45%, black 0, black 58%, transparent 94%);
          mask-image: radial-gradient(circle at 53% 45%, black 0, black 58%, transparent 94%);
        }
      }

.spotlight-delay-alt{animation-delay:-6s;}