:root {
        --bg: #040814;
        --bg-2: #061026;
        --text: #eaf2ff;
        --muted: #9cb0d8;
        --line: rgba(127, 192, 255, 0.24);
        --glass: rgba(14, 24, 44, 0.56);
        --card: rgba(12, 22, 42, 0.7);
        --blue: #5ab2ff;
        --cyan: #6ee6ff;
        --violet: #a682ff;
        --glow-blue: 0 0 28px rgba(90, 178, 255, 0.45);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        min-height: 100vh;
        font-family: "Montserrat", sans-serif;
        color: var(--text);
        background:
          radial-gradient(circle at 10% 10%, rgba(110, 230, 255, 0.15), transparent 35%),
          radial-gradient(circle at 85% 20%, rgba(128, 157, 255, 0.2), transparent 40%),
          linear-gradient(150deg, #02040a 0%, #040814 45%, #07132b 100%);
        overflow-x: hidden;
      }

      .mouse-glow {
        position: fixed;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(94, 177, 255, 0.16), transparent 68%);
        transform: translate(-50%, -50%);
        z-index: -1;
        transition: left 0.08s linear, top 0.08s linear;
      }

      .bg-grid {
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(102, 169, 255, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(102, 169, 255, 0.08) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: radial-gradient(circle at center, black 38%, transparent 88%);
        animation: driftGrid 14s linear infinite;
      }

      .neural-lines {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at 20% 80%, rgba(85, 198, 255, 0.12) 0 2px, transparent 2px),
          radial-gradient(circle at 72% 34%, rgba(133, 154, 255, 0.16) 0 2px, transparent 2px),
          radial-gradient(circle at 42% 26%, rgba(111, 233, 255, 0.16) 0 2px, transparent 2px);
        background-size: 320px 320px;
        animation: neuralFloat 12s ease-in-out infinite alternate;
      }

      @keyframes driftGrid {
        from { transform: translateY(0); }
        to { transform: translateY(44px); }
      }

      @keyframes neuralFloat {
        from { transform: translate3d(0, 0, 0); opacity: 0.6; }
        to { transform: translate3d(16px, -12px, 0); opacity: 0.95; }
      }

      .container {
        width: min(1150px, 92%);
        margin: 0 auto;
      }

      section {
        padding: 4.2rem 0;
      }

      .section-title {
        text-align: center;
        font-size: clamp(1.4rem, 2.9vw, 2.2rem);
        margin-bottom: 1rem;
      }

      .fade {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s ease, transform 0.7s ease;
      }

      .fade.show {
        opacity: 1;
        transform: translateY(0);
      }

      .hero {
        min-height: 84vh;
        display: flex;
        align-items: center;
        text-align: center;
        padding-top: 4.5rem;
      }

      .launch-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.56rem 1.05rem;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(15, 27, 52, 0.7);
        color: #b8ddff;
        font-size: 0.78rem;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }

      .launch-badge::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 14px var(--cyan);
      }

      h1 {
        margin-top: 1.25rem;
        font-size: clamp(2rem, 4.5vw, 3.9rem);
        line-height: 1.12;
        letter-spacing: 0.02em;
        text-shadow: 0 0 16px rgba(104, 184, 255, 0.85), 0 0 44px rgba(90, 142, 255, 0.45);
        animation: glowText 3s ease-in-out infinite;
      }

      @keyframes glowText {
        0%, 100% { text-shadow: 0 0 16px rgba(104, 184, 255, 0.85), 0 0 44px rgba(90, 142, 255, 0.45); }
        50% { text-shadow: 0 0 24px rgba(128, 214, 255, 0.95), 0 0 56px rgba(124, 138, 255, 0.6); }
      }

      .hero-sub {
        margin-top: 0.8rem;
        font-size: clamp(1rem, 2.2vw, 1.35rem);
        color: #d8ebff;
        font-weight: 500;
      }

      .hero-note {
        margin-top: 0.65rem;
        color: var(--muted);
      }

      .floating-icons {
        position: relative;
        width: min(560px, 100%);
        height: 68px;
        margin: 1.2rem auto 0;
      }

      .float-icon {
        position: absolute;
        font-size: 1.1rem;
        color: #9cd8ff;
        opacity: 0.8;
        animation: floatIcon 5.5s ease-in-out infinite;
      }

      .float-icon:nth-child(1) { left: 8%; animation-delay: -1s; }
      .float-icon:nth-child(2) { left: 29%; animation-delay: -2.8s; }
      .float-icon:nth-child(3) { left: 52%; animation-delay: -1.8s; }
      .float-icon:nth-child(4) { left: 73%; animation-delay: -3.6s; }
      .float-icon:nth-child(5) { left: 90%; animation-delay: -0.5s; }

      @keyframes floatIcon {
        0%, 100% { transform: translateY(2px); }
        50% { transform: translateY(-10px); }
      }

      .countdown {
        margin-top: 1.6rem;
        display: grid;
        grid-template-columns: repeat(4, minmax(70px, 130px));
        justify-content: center;
        gap: 0.8rem;
      }

      .count-box {
        background: linear-gradient(145deg, rgba(16, 30, 57, 0.75), rgba(8, 18, 35, 0.82));
        border: 1px solid rgba(122, 186, 255, 0.35);
        border-radius: 0.9rem;
        padding: 1rem 0.55rem;
        box-shadow: inset 0 0 24px rgba(86, 146, 255, 0.14);
      }

      .count-value {
        font-size: clamp(1.2rem, 2.8vw, 1.8rem);
        font-weight: 700;
        display: block;
        transition: transform 0.22s ease, text-shadow 0.22s ease;
      }

      .count-value.changed {
        transform: scale(1.08);
        text-shadow: 0 0 16px rgba(132, 209, 255, 0.9);
      }

      .count-label {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }

      .about, .services, .why-us, .contact {
        border-top: 1px solid rgba(116, 179, 255, 0.14);
      }

      .about p,
      .contact p {
        text-align: center;
        color: var(--muted);
        max-width: 820px;
        margin: 0 auto;
      }

      .services-wrapper {
        position: relative;
      }

      .services-wrapper::before {
        content: "";
        position: absolute;
        inset: 14% 8% auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(124, 196, 255, 0.55), transparent);
        filter: blur(0.5px);
      }

      .services-grid {
        margin-top: 1.4rem;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
      }

      .service-card {
        position: relative;
        background: var(--glass);
        border: 1px solid var(--line);
        border-radius: 1rem;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 1rem;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      }

      .service-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 10%, rgba(118, 200, 255, 0.18) 50%, transparent 90%);
        transform: translateX(-130%);
        transition: transform 0.65s ease;
      }

      .service-card:hover {
        transform: translateY(-7px);
        border-color: rgba(145, 212, 255, 0.75);
        box-shadow: var(--glow-blue);
      }

      .service-card:hover::before {
        transform: translateX(130%);
      }

      .service-icon {
        width: 2.3rem;
        height: 2.3rem;
        margin-bottom: 0.8rem;
        border-radius: 0.62rem;
        border: 1px solid rgba(124, 194, 255, 0.48);
        background: rgba(20, 38, 70, 0.85);
        display: grid;
        place-items: center;
      }

      .service-icon svg {
        width: 1.2rem;
        height: 1.2rem;
        stroke: #84ceff;
        fill: none;
        stroke-width: 1.8;
      }

      .service-card h3 {
        font-size: 1rem;
        margin-bottom: 0.45rem;
      }

      .service-card p {
        color: var(--muted);
        font-size: 0.9rem;
      }

      .why-grid {
        margin-top: 1.3rem;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.9rem;
      }

      .why-item {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 0.95rem;
        padding: 0.95rem;
        text-align: center;
      }

      .check {
        width: 2rem;
        height: 2rem;
        margin: 0 auto 0.45rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #d4f1ff;
        background: radial-gradient(circle, rgba(100, 187, 255, 0.72), rgba(40, 96, 183, 0.42));
        box-shadow: 0 0 18px rgba(102, 185, 255, 0.5);
        animation: breathe 2.2s ease-in-out infinite;
      }

      @keyframes breathe {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.08); }
      }

      .why-item h3 {
        font-size: 0.96rem;
      }

      .contact-list {
        margin-top: 1rem;
        display: grid;
        gap: 0.6rem;
        justify-items: center;
      }

      .contact-list a,
      .contact-list span {
        color: #d9ecff;
        text-decoration: none;
        font-weight: 500;
      }

      .cta-btn {
        display: inline-block;
        margin-top: 1.35rem;
        text-decoration: none;
        color: #f1f8ff;
        border-radius: 999px;
        border: 1px solid rgba(128, 202, 255, 0.8);
        background: linear-gradient(90deg, rgba(70, 149, 255, 0.3), rgba(67, 114, 255, 0.35));
        padding: 0.78rem 1.55rem;
        font-weight: 600;
        transition: transform 0.24s ease, box-shadow 0.24s ease;
      }

      .cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 28px rgba(111, 190, 255, 0.55);
      }

      footer {
        text-align: center;
        color: #91a9d2;
        font-size: 0.85rem;
        padding: 1.2rem 1rem 2.4rem;
        border-top: 1px solid rgba(123, 194, 255, 0.26);
        box-shadow: 0 -8px 28px rgba(75, 137, 235, 0.08);
      }

      @media (max-width: 980px) {
        .services-grid,
        .why-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 620px) {
        .hero {
          min-height: 78vh;
        }

        section {
          padding: 3.1rem 0;
        }

        .countdown {
          grid-template-columns: repeat(2, minmax(90px, 1fr));
          max-width: 280px;
          margin-left: auto;
          margin-right: auto;
        }

        .services-grid,
        .why-grid {
          grid-template-columns: 1fr;
        }
      }