@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Six+Caps&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


    /* Basic reset */
    html, body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .nuto-sans-regular { font-family: "Nunito Sans", sans-serif; }
    .six-caps-regular { font-family: "Six Caps", sans-serif; font-weight: 400; }

    /* Container & background */
    .container {
      background: linear-gradient(135deg, #000814 0%, #0b1220 40%, #071a52 100%);
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 18px;
    }

    .bg {
      position: relative;
      width: 100%;
      max-width: 1024px;
      min-height: 600px;
      background: linear-gradient(180deg, rgba(27,24,31,0.95), rgba(17,14,22,0.96));
      box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.55);
      border-radius: 16px;
      padding: 20px;
      text-align: center;
      overflow: hidden;
      transform-origin: center;
      animation: cardAppear 600ms cubic-bezier(.2,.9,.3,1) both;
    }

    /* Entrance animation for the container card */
    @keyframes cardAppear {
      from { opacity: 0; transform: translateY(20px) scale(.995); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .small-title {
      letter-spacing: 2px;
      font-size: 20px;
      color: #F2F2F3;
      text-align: left;
      padding-left: 10px;
      margin-bottom: 6px;
      font-family: "Orbitron", sans-serif;
      font-weight: 800;
      /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    }

    .circle-row {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 44px;
      position: relative;
    }

    /* main circle (subtle float) */
    .circle {
      width: 300px;
      height: 300px;
      background: radial-gradient(closest-side, #2a2633 0%, #1B181F 65%);
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 4;
      box-shadow: inset -8px -6px 30px rgba(0,0,0,0.6);
      animation: floatUpDown 4.8s ease-in-out infinite;
      will-change: transform;
    }

    /* tiny inner ring to give depth */
    .circle::after {
      content: "";
      position: absolute;
      width: 78%;
      height: 78%;
      border-radius: 50%;
      box-shadow: inset 0 0 50px rgba(255,255,255,0.02);
      pointer-events: none;
    }

    /* glowing colored shape behind the circle */
    .circle-glow {
      width: 260px;
      height: 220px;
      border-radius: 50%;
      background: linear-gradient(90deg, rgba(7,3,93,0.95) 0%, rgba(35,70,146,0.95) 30%, rgba(5,78,129,0.95) 60%, rgba(149,65,119,0.85) 100%);
      position: absolute;
      bottom: 92px;
      filter: blur(28px) saturate(130%);
      opacity: 0.85;
      z-index: 2;
      transform-origin: center;
      animation: glowPulse 3.2s ease-in-out infinite, slowRotate 18s linear infinite;
      will-change: opacity, transform, filter;
    }

    /* small slow rotation for the glow */
    @keyframes slowRotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* pulsing glow (scale + blur + opacity shift) */
    @keyframes glowPulse {
      0%   { transform: scale(0.98); filter: blur(28px) saturate(110%); opacity: 0.75; }
      50%  { transform: scale(1.06); filter: blur(36px) saturate(140%); opacity: 1; }
      100% { transform: scale(0.98); filter: blur(28px) saturate(110%); opacity: 0.75; }
    }

    /* float effect on the main circle */
    @keyframes floatUpDown {
      0%   { transform: translateY(0px); }
      50%  { transform: translateY(-10px) rotate(-1deg); }
      100% { transform: translateY(0px); }
    }

    /* COMING SOON title slide + pop in */
    .title {
      color: #F2F2F3;
      font-weight: 800;
      font-size: 20px;
      letter-spacing: 18px;
      position: absolute;
      bottom: 120px;
      z-index: 5;
      transform-origin: center;
      animation: titlePopIn 700ms cubic-bezier(.2,.9,.25,1) 350ms both;
    }


    .socials {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      gap: 20px;
      z-index: 6;
      opacity: 0;
      animation: fadeUp 0.6s ease-out 1.7s both;
    }

    .socials a {
      color: #f2f2f3;
      font-size: 22px;
      transition: transform 0.25s ease, color 0.25s ease;
    }

    .socials a:hover {
      transform: scale(1.2) rotate(-5deg);
      color: #f1647e; /* matches your theme gradient */
    }

    @media (max-width: 480px) {
      .socials { gap: 16px; }
      .socials a { font-size: 20px; }
    }

    @keyframes titlePopIn {
      0%   { opacity: 0; transform: translateY(18px) scale(.98); }
      60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Notify area */
    .notify-section { margin-top: 22px; z-index: 6; position: relative; }

    .notify-label {
      color: #B16573;
      font-size: 14px;
      letter-spacing: 2px;
      opacity: 0;
      animation: fadeUp 520ms ease-out 1s both;
    }

    .notify-action {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      gap: 10px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 520ms ease-out 1.12s both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    input.email {
      background: #121113;
      border: 1px solid rgba(255,255,255,0.04);
      outline: none;
      border-radius: 20px;
      height: 40px;
      width: 60%;
      max-width: 320px;
      min-width: 180px;
      padding-left: 18px;
      color: #F2F2F3;
      transition: box-shadow .28s ease, transform .16s ease, border-color .18s ease;
      will-change: box-shadow, transform;
      font-size: 13px;
    }

    input.email:focus {
      box-shadow: 0 6px 20px rgba(85,35,120,0.22), 0 1px 0 rgba(255,255,255,0.02) inset;
      border-color: rgba(133,103,170,0.5);
      transform: translateY(-2px);
    }

    input::placeholder { color: #3E3946; font-size: 12px; letter-spacing: 1px; font-weight: 700; }

    /* Animated gradient button */
    .notify-btn {
      background: linear-gradient(90deg, #2F2C40 0%, #5d035c 50%, #f1647e 100%);
      border: none;
      border-radius: 20px;
      padding: 10px 20px;
      color: #F2F2F3;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 1.4px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease;
      background-size: 200% 200%;
      animation: buttonGradient 4s linear infinite;
      box-shadow: 0 6px 18px rgba(95,35,110,0.12);
    }

    .notify-btn:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 12px 34px rgba(95,35,110,0.2);
    }

    @keyframes buttonGradient {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Clock */
    .clock {
      margin-top: 12px;
      font-size: 14px;
      color: #cfcfd3;
      letter-spacing: 0.6px;
      opacity: 0;
      animation: fadeUp 520ms ease-out 0.8s both;
      font-family: "Roboto", sans-serif;
      font-weight: 800;
    }

    /* Services list - staggered reveals */
    .services {
      margin-top: 34px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      z-index: 6;
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
    }

    .service-item {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      color: #F2F2F3;
      padding: 12px 18px;
      border-radius: 12px;
      font-size: 13px;
      transition: transform .26s cubic-bezier(.2,.9,.3,1), box-shadow .26s;
      transform-origin: center;
      opacity: 0;
      animation: serviceFadeUp 520ms cubic-bezier(.2,.9,.3,1) both;
      will-change: transform, opacity;
      box-shadow: 0 6px 18px rgba(6,6,10,0.45);
    }

    .service-item:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 14px 38px rgba(6,6,10,0.55);
      background: linear-gradient(180deg, rgba(88,39,118,0.12), rgba(66,26,85,0.12));
    }

    @keyframes serviceFadeUp {
      from { opacity: 0; transform: translateY(12px) scale(.995); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Stagger timing: nth-child delays */
    .services .service-item:nth-child(1) { animation-delay: 1.28s; }
    .services .service-item:nth-child(2) { animation-delay: 1.36s; }
    .services .service-item:nth-child(3) { animation-delay: 1.44s; }
    .services .service-item:nth-child(4) { animation-delay: 1.52s; }
    .services .service-item:nth-child(5) { animation-delay: 1.6s; }

    /* Responsive */
    @media (max-width: 820px) {
      .bg { min-height: 680px; padding: 18px; }
      .container{ width: auto;}
      .circle { width: 220px; height: 220px; }
      .circle-glow { width: 200px; height: 160px; bottom: 88px; filter: blur(22px); }
      .title { bottom: 160px; letter-spacing: 10px; font-size: 16px; }
      .notify-action { gap: 8px;}
      input.email { width: 72%; max-width: 260px; }
    }

    @media (max-width: 820px){
     .title { top: 120px; letter-spacing: 8px; font-size: 14px; }

    }

    @media (max-width: 480px) {
      .bg { min-height: 760px; padding: 14px; }
      .circle { width: 188px; height: 188px; }
      .container{ width: auto;}
      .circle-glow { width: 170px; height: 140px; bottom: 84px; filter: blur(20px); }
      .title { top: 100px; letter-spacing: 8px; font-size: 14px; }
      .notify-action { flex-direction: column; gap: 12px; }
      input.email { width: 100%; max-width: 90%; min-width: 0; text-align: center;}
      .services { gap: 10px; }
    }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .bg, .circle, .circle-glow, .title, .service-item, .notify-btn, .notify-action, .notify-label {
        animation: none !important;
        transition: none !important;
      }
    }