:root {
        --ink: #0a1728;
        --ink-2: #10233c;
        --muted: #617087;
        --paper: #f6f8fc;
        --white: #fff;
        --cyan: #28d7d0;
        --blue: #477cff;
        --line: rgba(18, 39, 66, 0.1);
        --shadow: 0 20px 55px rgba(12, 31, 56, 0.1);
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 90px;
      }
      body {
        margin: 0;
        font-family: "DM Sans", sans-serif;
        color: var(--ink);
        background: var(--white);
      }
      h1,
      h2,
      h3,
      h4,
      .navbar-brand {
        font-family: "Manrope", sans-serif;
      }
      a {
        text-decoration: none;
      }
      .top-strip {
        background: #06101e;
        color: #bdc9d9;
        font-size: 0.82rem;
      }
      .top-strip a {
        color: var(--cyan);
      }
      .navbar {
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
      }
      .navbar-brand {
        font-weight: 800;
        letter-spacing: -0.045em;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
      }
      .brand-mark {
        width: 45px;
        height: 45px;
        flex: 0 0 auto;
        border-radius: 10px;
        background-color: #000;
      }
      .brand-name {
        line-height: 1.05;
        font-size: 1.08rem;
      }
      .brand-logo {
        width: 80px;
        height: 80px;
        object-fit: contain;
      }

      .brand-name small {
        display: block;
        font-family: "DM Sans", sans-serif;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        font-weight: 700;
        color: #63748a;
        margin-top: 0.28rem;
      }
      .nav-link {
        font-size: 0.92rem;
        font-weight: 600;
        color: #41516a;
        margin: 0 0.22rem;
      }
      .nav-link:hover,
      .nav-link.active {
        color: #315ff0;
      }
      .btn-brand {
        background: var(--blue);
        border: 1px solid var(--blue);
        color: #fff;
        font-weight: 700;
        border-radius: 12px;
        padding: 0.82rem 1.15rem;
        box-shadow: 0 9px 22px rgba(71, 124, 255, 0.22);
        transition: 0.2s ease;
      }
      .btn-brand:hover {
        background: #315fe0;
        border-color: #315fe0;
        color: #fff;
        transform: translateY(-2px);
      }
      .btn-outline-brand {
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: #fff;
        border-radius: 12px;
        padding: 0.82rem 1.15rem;
        font-weight: 700;
      }
      .btn-outline-brand:hover {
        background: #fff;
        color: var(--ink);
      }
      .hero {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 80% 20%,
            rgba(40, 215, 208, 0.18),
            transparent 27%
          ),
          radial-gradient(
            circle at 15% 90%,
            rgba(71, 124, 255, 0.22),
            transparent 28%
          ),
          linear-gradient(120deg, #071426 0%, #0c1f38 58%, #102d48 100%);
        color: #fff;
        padding: 100px 0 88px;
      }
      .hero:after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.16;
        pointer-events: none;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.55) 0.7px,
          transparent 0.7px
        );
        background-size: 23px 23px;
        mask-image: linear-gradient(90deg, transparent, #000);
      }
      .hero .container {
        position: relative;
        z-index: 1;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--cyan);
        background: rgba(40, 215, 208, 0.09);
        border: 1px solid rgba(40, 215, 208, 0.22);
        border-radius: 999px;
        padding: 0.45rem 0.8rem;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }
      .hero h1 {
        font-size: clamp(2.55rem, 5.3vw, 4.65rem);
        font-weight: 800;
        letter-spacing: -0.065em;
        line-height: 1.08;
        max-width: 740px;
        margin: 1.3rem 0 1.15rem;
      }
      .hero h1 span {
        color: var(--cyan);
      }
      .hero-copy {
        max-width: 580px;
        color: #c2cedd;
        font-size: 1.08rem;
        line-height: 1.8;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 1.8rem;
      }
      .hero-note {
        color: #a9b8cb;
        font-size: 0.86rem;
        margin-top: 1.3rem;
      }
      .hero-note i {
        color: var(--cyan);
        margin-right: 0.35rem;
      }
      .hero-visual {
        position: relative;
        min-height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .orbit {
        width: min(390px, 100%);
        aspect-ratio: 1;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: radial-gradient(
          circle,
          rgba(40, 215, 208, 0.1),
          transparent 67%
        );
      }
      .orbit:before,
      .orbit:after {
        content: "";
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
      }
      .orbit:before {
        inset: 12%;
      }
      .orbit:after {
        inset: 25%;
      }
      .orbit-core {
        width: 145px;
        height: 145px;
        border-radius: 35px;
        background: linear-gradient(145deg, #2ee0d5, #477cff);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(-8deg);
        box-shadow: 0 22px 65px rgba(40, 215, 208, 0.23);
      }
      .orbit-core svg {
        width: 92px;
        height: 92px;
        transform: rotate(8deg);
      }
      .float-card {
        position: absolute;
        z-index: 2;
        display: flex;
        gap: 0.75rem;
        align-items: center;
        background: rgba(255, 255, 255, 0.96);
        color: var(--ink);
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0.85rem 1rem;
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
        min-width: 185px;
      }
      .float-card .icon-box {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: #eaf2ff;
        color: #3868ee;
        font-size: 1.2rem;
      }
      .float-card strong {
        display: block;
        font-size: 0.86rem;
      }
      .float-card small {
        display: block;
        color: #6c7b8f;
        font-size: 0.74rem;
        margin-top: 0.12rem;
      }
      .float-one {
        top: 12%;
        right: -2%;
      }
      .float-two {
        bottom: 12%;
        left: -3%;
      }
      .float-three {
        bottom: 1%;
        right: 7%;
        min-width: auto;
      }
      .section-pad {
        padding: 90px 0;
      }
      .section-kicker {
        color: #416ef0;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-size: 0.76rem;
        font-weight: 800;
      }
      .section-title {
        font-size: clamp(2rem, 3.4vw, 3.1rem);
        font-weight: 800;
        letter-spacing: -0.055em;
        line-height: 1.15;
        margin: 0.7rem 0 1rem;
      }
      .section-desc {
        color: var(--muted);
        line-height: 1.8;
        max-width: 650px;
      }
      .service-card {
        height: 100%;
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 1.65rem;
        background: #fff;
        transition: 0.25s ease;
        position: relative;
        overflow: hidden;
      }
      .service-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow);
        border-color: rgba(71, 124, 255, 0.25);
      }
      .service-icon {
        width: 58px;
        height: 58px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        font-size: 1.55rem;
        margin-bottom: 1.2rem;
      }
      .service-card h3 {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -0.025em;
      }
      .service-card p {
        color: var(--muted);
        line-height: 1.7;
        font-size: 0.93rem;
      }
      .service-card ul {
        padding-left: 1.1rem;
        margin: 0;
        color: #42536a;
        font-size: 0.88rem;
        line-height: 1.9;
      }
      .tint-blue {
        background: #edf2ff;
        color: #416df2;
      }
      .tint-teal {
        background: #e4fbf8;
        color: #099e98;
      }
      .tint-violet {
        background: #f2eaff;
        color: #8851db;
      }
      .tint-orange {
        background: #fff0e5;
        color: #e78131;
      }
      .tint-green {
        background: #e8f8ed;
        color: #21985a;
      }
      .tint-pink {
        background: #ffedf4;
        color: #d94c89;
      }
      .services-section {
        background: var(--paper);
      }
      .about-panel {
        background: linear-gradient(135deg, #0a192c, #112c49);
        color: #fff;
        border-radius: 28px;
        padding: clamp(2rem, 5vw, 4rem);
        position: relative;
        overflow: hidden;
      }
      .about-panel:after {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        border: 1px solid rgba(40, 215, 208, 0.18);
        border-radius: 50%;
        right: -80px;
        top: -100px;
        box-shadow:
          0 0 0 35px rgba(40, 215, 208, 0.035),
          0 0 0 70px rgba(40, 215, 208, 0.025);
      }
      .about-panel > * {
        position: relative;
        z-index: 1;
      }
      .check-line {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
        color: #d1dce9;
        margin: 0.9rem 0;
      }
      .check-line i {
        color: var(--cyan);
        font-size: 1.1rem;
      }
      .mini-stat {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 1rem;
        margin-top: 1.6rem;
        color: #b8c8da;
        font-size: 0.88rem;
      }
      .process-card {
        padding: 1.5rem 0;
        border-bottom: 1px solid var(--line);
        display: flex;
        gap: 1.1rem;
      }
      .process-card:last-child {
        border-bottom: 0;
      }
      .step-num {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: #eaf0ff;
        color: #416df2;
        display: grid;
        place-items: center;
        font-weight: 800;
      }
      .process-card h3 {
        font-size: 1.05rem;
        font-weight: 800;
        margin: 0.2rem 0 0.4rem;
      }
      .process-card p {
        color: var(--muted);
        font-size: 0.91rem;
        line-height: 1.7;
        margin: 0;
      }
      .contact-section {
        background: var(--paper);
      }
      .contact-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: clamp(1.4rem, 4vw, 2.4rem);
        height: 100%;
      }
      .form-control,
      .form-select {
        border: 1px solid #dce3ed;
        border-radius: 11px;
        padding: 0.8rem 0.9rem;
      }
      .form-control:focus,
      .form-select:focus {
        border-color: #6c91ff;
        box-shadow: 0 0 0 0.2rem rgba(71, 124, 255, 0.12);
      }
      .contact-detail {
        display: flex;
        gap: 1rem;
        margin: 1.4rem 0;
      }
      .contact-detail .detail-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        background: #eaf2ff;
        color: #416df2;
        border-radius: 13px;
        font-size: 1.1rem;
      }
      .contact-detail strong {
        display: block;
        font-size: 0.93rem;
      }
      .contact-detail span {
        display: block;
        color: var(--muted);
        font-size: 0.88rem;
        margin-top: 0.2rem;
      }
      .footer {
        background: #06101e;
        color: #aab8ca;
        padding: 34px 0;
      }
      .footer .brand-name {
        color: #fff;
      }
      .footer p {
        color: #8999ae;
        font-size: 0.86rem;
        line-height: 1.7;
      }
      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1.15rem;
        font-size: 0.86rem;
      }
      .footer-links a {
        color: #c4d0de;
      }
      .footer-links a:hover {
        color: var(--cyan);
      }
      .back-top {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 45px;
        height: 45px;
        border-radius: 14px;
        background: var(--blue);
        color: #fff;
        display: none;
        place-items: center;
        z-index: 99;
        box-shadow: 0 10px 25px rgba(71, 124, 255, 0.3);
      }
      .back-top.show {
        display: grid;
      }
      .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.65s ease,
          transform 0.65s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      @media (max-width: 991px) {
        .hero {
          padding: 75px 0 65px;
        }
        .hero-visual {
          min-height: 330px;
          margin-top: 1.5rem;
        }
        .float-one {
          right: 0;
        }
        .float-two {
          left: 0;
        }
        .navbar-collapse {
          padding: 1rem 0;
        }
      }
      @media (max-width: 575px) {
        .section-pad {
          padding: 68px 0;
        }
        .hero-visual {
          min-height: 290px;
        }
        .orbit {
          width: 280px;
        }
        .orbit-core {
          width: 112px;
          height: 112px;
          border-radius: 28px;
        }
        .orbit-core svg {
          width: 74px;
          height: 74px;
        }
        .float-card {
          min-width: 155px;
          padding: 0.65rem 0.75rem;
        }
        .float-card .icon-box {
          width: 35px;
          height: 35px;
        }
        .float-one {
          top: 3%;
          right: -1%;
        }
        .float-two {
          bottom: 7%;
          left: -1%;
        }
        .float-three {
          bottom: -1%;
          right: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      /* Premium motion layer */
      :root {
        --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
      }
      body {
        overflow-x: hidden;
      }
      .navbar {
        transition:
          box-shadow 0.3s ease,
          background 0.3s ease;
      }
      .navbar.scrolled {
        box-shadow: 0 10px 35px rgba(6, 16, 30, 0.1);
      }
      .hero {
        isolation: isolate;
      }
      .hero:before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        right: -150px;
        top: -220px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(71, 124, 255, 0.24),
          transparent 68%
        );
        filter: blur(5px);
        animation: glowDrift 12s ease-in-out infinite alternate;
        z-index: -1;
      }
      .hero .container {
        z-index: 2;
      }
      .hero h1 {
        animation: heroIn 0.9s var(--ease-premium) both;
      }
      .hero-copy {
        animation: heroIn 0.9s 0.12s var(--ease-premium) both;
      }
      .hero-actions {
        animation: heroIn 0.9s 0.22s var(--ease-premium) both;
      }
      .eyebrow {
        animation: heroIn 0.8s 0.04s var(--ease-premium) both;
      }
      .hero-note {
        animation: heroIn 0.9s 0.32s var(--ease-premium) both;
      }
      .orbit {
        animation: orbitBreath 7s ease-in-out infinite;
      }
      .orbit-core {
        animation: coreFloat 5s ease-in-out infinite;
      }
      .float-one {
        animation: floatCard 5.5s ease-in-out infinite;
      }
      .float-two {
        animation: floatCard 6s ease-in-out -1.5s infinite;
      }
      .float-three {
        animation: floatCard 5.2s ease-in-out -2s infinite;
      }
      .service-card {
        transition:
          transform 0.45s var(--ease-premium),
          box-shadow 0.45s var(--ease-premium),
          border-color 0.3s ease;
      }
      .service-card:before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: linear-gradient(90deg, var(--cyan), var(--blue), #9b72ff);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.45s var(--ease-premium);
      }
      .service-card:hover:before {
        transform: scaleX(1);
      }
      .service-icon {
        transition:
          transform 0.4s var(--ease-premium),
          border-radius 0.4s ease;
      }
      .service-card:hover .service-icon {
        transform: translateY(-3px) rotate(-5deg) scale(1.06);
        border-radius: 20px;
      }
      .btn-brand,
      .btn-outline-brand {
        position: relative;
        overflow: hidden;
      }
      .btn-brand:after,
      .btn-outline-brand:after {
        content: "";
        position: absolute;
        top: -120%;
        left: -40%;
        width: 30%;
        height: 340%;
        background: rgba(255, 255, 255, 0.22);
        transform: rotate(25deg) translateX(-250%);
        transition: transform 0.7s var(--ease-premium);
      }
      .btn-brand:hover:after,
      .btn-outline-brand:hover:after {
        transform: rotate(25deg) translateX(650%);
      }
      .section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
      }
      .section-kicker:before {
        content: "";
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 99px;
      }
      .about-panel {
        box-shadow: 0 30px 80px rgba(10, 25, 44, 0.13);
      }
      .contact-card {
        transition:
          transform 0.4s var(--ease-premium),
          box-shadow 0.4s var(--ease-premium);
      }
      .contact-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
      }
      .back-top {
        transition:
          transform 0.25s ease,
          opacity 0.25s ease;
      }
      .back-top:hover {
        transform: translateY(-4px);
        color: #fff;
      }
      .footer {
        position: relative;
      }
      .footer:before {
        content: "";
        display: block;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(40, 215, 208, 0.55),
          rgba(71, 124, 255, 0.55),
          transparent
        );
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }
      .scroll-progress {
        position: fixed;
        left: 0;
        top: 0;
        height: 3px;
        width: 0;
        z-index: 2000;
        background: linear-gradient(90deg, var(--cyan), var(--blue), #a27aff);
        box-shadow: 0 0 12px rgba(40, 215, 208, 0.5);
      }
      .hero-grid-glow {
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        border: 1px solid rgba(40, 215, 208, 0.13);
        right: 11%;
        top: 15%;
        pointer-events: none;
        animation: slowSpin 24s linear infinite;
      }
      .hero-grid-glow:before,
      .hero-grid-glow:after {
        content: "";
        position: absolute;
        border: 1px solid rgba(71, 124, 255, 0.16);
        border-radius: 50%;
        inset: 22%;
      }
      .hero-grid-glow:after {
        inset: 44%;
        background: rgba(40, 215, 208, 0.12);
        box-shadow: 0 0 50px rgba(40, 215, 208, 0.12);
      }
      @keyframes heroIn {
        from {
          opacity: 0;
          transform: translateY(22px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes glowDrift {
        from {
          transform: translate3d(-20px, 0, 0) scale(0.95);
        }
        to {
          transform: translate3d(20px, 35px, 0) scale(1.12);
        }
      }
      @keyframes orbitBreath {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.025);
        }
      }
      @keyframes coreFloat {
        0%,
        100% {
          transform: translateY(0) rotate(-8deg);
        }
        50% {
          transform: translateY(-10px) rotate(-5deg);
        }
      }
      @keyframes floatCard {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-9px);
        }
      }
      @keyframes slowSpin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (max-width: 991px) {
        .hero-grid-glow {
          right: 2%;
          top: 8%;
          width: 190px;
          height: 190px;
          opacity: 0.6;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero h1,
        .hero-copy,
        .hero-actions,
        .eyebrow,
        .hero-note,
        .orbit,
        .orbit-core,
        .float-one,
        .float-two,
        .float-three,
        .hero:before,
        .hero-grid-glow {
          animation: none !important;
        }
        .btn-brand:after,
        .btn-outline-brand:after {
          display: none;
        }
      }