:root{
      --bg:#030917;
      --bg-2:#020611;
      --text:#ffffff;
      --muted:#a5b4cf;
      --muted-2:#7f8ca8;
      --line:rgba(255,255,255,0.08);
      --line-2:rgba(255,255,255,0.12);
      --blue:#2890ff;
      --blue-2:#1677f2;
      --btn-dark:#171d28;
      --btn-dark-border:rgba(255,255,255,0.08);
      --glow:rgba(34,126,255,0.22);
      --container:1180px;
      --radius:18px;

    }

    *{
      box-sizing:border-box;
    }


.contact-overlay{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.contact-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.9);
  z-index:0;
}

.contact-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.contact-box{
  width:1180px;
height:570px;
  max-width:95%;
  display:flex;
  border-radius:18px;
border:2px solid #051540;
  overflow:hidden;
  position:relative;

  background:
    linear-gradient(rgba(2,6,23,0.85), rgba(2,6,23,0.9));

  box-shadow:
    0 0 20px rgba(0,0,0,0.2),
    0 0 10px rgba(0,0,0,0.15);
}

/* GLOW EFFECT */
.contact-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  background:linear-gradient(120deg,#4f46e5,#3b82f6,#6366f1);
  filter:blur(30px);
  opacity:0.3;
  z-index:-1;
}

/* CLOSE */
.close-btn{
  position:absolute;
  top:15px;
  right:15px;
z-index:13;
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,0.4); /* 👈 dark background */
  backdrop-filter:blur(6px);

  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;

  color:#fff;
  font-size:18px;
  cursor:pointer;

  transition:all 0.2s ease;
}

.close-btn:hover{
  background:rgba(0,0,0,0.6);
  border-color:rgba(99,102,241,0.4);
  box-shadow:0 0 10px rgba(99,102,241,0.15);
}

.contact-left{
  position:relative;
  flex:1;
  padding:50px;
padding-top:30px;
  color:#cbd5f5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}


.contact-left::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("leftcontact.png") center/cover no-repeat;
  opacity:0.3; /* 👈 your value */
  z-index:0;
}

/* KEEP TEXT ABOVE IMAGE */
.contact-left *{
  position:relative;
  z-index:1;
}



.contact-left h2{
  color:#fff;
  font-size:38px;
  margin-bottom:5px;
}

.contact-info div{
  margin-top:15px;
  opacity:0.8;
}

 .contact-right{
  position:relative;
  flex:1;
  padding:40px;

padding-top:140px;

  box-shadow: -6px 0 16px rgba(0,0,0,0.3);

}

.contact-right::before{
  content:"";
  position:absolute;

  top:-120px;
  left:50%;                 /* 👈 center horizontally */
  transform:translateX(70%); /* 👈 perfect centering */

  width:320px;
  height:320px;


  filter:blur(35px);
  pointer-events:none;
}



/* FORM */
.row{
  display:flex;
  gap:12px;
  margin-bottom:12px;
}

input, textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  padding:16px 14px; /* bigger padding */
  font-size:16px;    /* bigger text */
  color:#fff;
  outline:none;
}

textarea{
  height:120px;
  resize:none;
  margin-bottom:15px;
 font-size:16px;
}

 
.submit-btn{
margin-top:10px;
  padding:12px;
  width:150px;
  border:none;
  border-radius:12px;
  background-color:#203c96;
  color:#fff;
  cursor:pointer;
font-size:16px;
font-family:tahoma;
font-weight:bold;
}

.submit-btn:hover{
  transform:translateY(-1px);
}

input:focus,
textarea:focus{
  background:rgba(0,0,0,0.1); /* 👈 darker on focus */
  border-color:rgba(99,102,241,0.6); /* subtle glow border */
  box-shadow:0 0 0 1px rgba(99,102,241,0.1);
}

.contact-right::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
 overflow:hidden;
  z-index:0;
  background-image: radial-gradient(rgba(120,140,255,0.28) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.4) 60%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.4) 60%, rgba(0,0,0,1) 100%);
}

.contact-line{
  display:flex;
  align-items:center; /* 👈 perfect vertical alignment */
  gap:10px;
}

.scene2{
  position:relative;
  overflow:hidden;
}

.data-area2{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}

.data-row{
  white-space:nowrap;
  font-family:monospace;
  font-size:18px;
  line-height:1;
  color:rgba(44,255,116,.45);
  letter-spacing:5px;
  user-select:none;
}

.data-row span.white{
  color:rgba(255,255,255,.9);
}




/* container */
.box-wrap{
  display:flex;
  gap:30px;
  padding:40px;
 justify-content:center;
}

/* base box */
.box-item{
  width:300px;
  height:275px;
  border-radius:24px;
  position:relative;
  overflow:visible;
  background:#15151a;
  border:1px solid transparent; /* base */
}

/* soft overlay */
.box-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.5));
  pointer-events:none;
}

/* glowing top line */
.box-item::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
}

.box-purple{
  background:linear-gradient(135deg, #1b1b35, #0d0d18);
  border:1px solid rgba(168,85,247,0.18); /* soft purple border */
}

/* YELLOW */
.box-yellow{
  background:linear-gradient(
    135deg,
    rgba(31,31,31,0.4),
    rgba(18,18,18,0.4)
  );
  border:1px solid rgba(250,204,21,0.18); /* soft yellow border */
}

/* BLUE */
.box-blue{
  background:linear-gradient(135deg, #0f1f3a, #0a0f1c);
  border:1px solid rgba(59,130,246,0.18); /* soft blue border */
}

.box-yellow::after{
  background:linear-gradient(90deg, transparent, rgba(250,204,21,0.95), transparent);
  box-shadow:0 0 14px rgba(250,204,21,0.3);
}

/* BLUE */
.box-blue{
  background:linear-gradient(
    135deg,
    rgba(15,31,58,0.32),
    rgba(10,15,28,0.32)
  );
}

.box-blue::after{
  background:linear-gradient(90deg, transparent, rgba(59,130,246,0.95), transparent);
  box-shadow:0 0 14px rgba(59,130,246,0.9);
}

.box-green{
  background:linear-gradient(
    135deg,
    rgba(15,42,31,0.32),
    rgba(8,21,16,0.23)
  );
  border:1px solid rgba(34,197,94,0.18);
}

/* top glow line */
.box-green::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(34,197,94,0.9),
    transparent
  );
  box-shadow:0 0 12px rgba(34,197,94,0.3);
}


    html,body{
      margin:0;
      padding:0;
      background:
       
 
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      color:var(--text);
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#020714 !important;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    .page{
      min-height:100vh;
      overflow:hidden;
      position:relative;
    }

.pricing-row{
  display:flex;
  gap:32px;
  justify-content:center;
}

.pro-card{
  position:relative;
  width:340px;
  padding:42px 34px 30px;
  border-radius:28px;
  color:#fff;
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden;
}

/* MAP BACKGROUND LAYER */
.pro-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      to top,
      rgba(2,10,30,0) 0%,
      rgba(2,10,30,.3) 40%,
      rgba(2,10,30,.5) 80%,
      rgba(2,10,30,10) 100%
    ),
    url("101.png");

  background-size:cover;
  background-position:center;
  opacity:.32;
  z-index:0;
}

/* keep card content above map */
.pro-card > *{
  position:relative;
  z-index:1;
}

.pro-card h3{
  margin:0 0 26px;
  text-align:center;
  font-size:36px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1.5px;
  padding-bottom:14px;
}

.pro-card ul{
  list-style:none;
  padding:0;
  margin:0 0 28px;
}

.pro-card li{
  position:relative;
padding-top:0px;
  padding-left:58px;
  margin-bottom:18px;
  font-size:17px;
  color:rgba(255,255,255,.92);
}

.pro-card li::before{
  content:"";
  position:absolute;
  left:18px;
  top:-1px;

  width:20px;
  height:20px;

  background:url("check.png");
  background-size:contain;
  background-repeat:no-repeat;
}

.pro-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  padding:15px 18px;
  border-radius:16px;
}

.pro-card-1{
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.02), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.02), transparent 34%),
    linear-gradient(180deg, rgba(4,15,43,.77) 0%, rgba(2,10,30,.7) 100%);

  border:1px solid rgba(92,133,233,.4);

box-shadow:
  0 0 0 13px rgba(0,0,0,.0) inset,
 0 0 0 8px rgba(0,0,0,0)
}

.pro-card-1 .pro-badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#bdfce2;
  background:rgba(20,185,120,.12);
  border:1px solid rgba(34,197,94,.35);
  box-shadow:0 0 1px rgba(34,197,94,.18);
}



    .bulut{
      content:"";
      position:absolute;
      inset:-10% -5% auto auto;
      width:520px;
      height:700px;
      background:linear-gradient(180deg, rgba(34,126,255,.10), rgba(34,126,255,0));
      filter:blur(70px);
      transform:rotate(12deg);
      pointer-events:none;
    }

    .bulut2{
     opacity:0.6;
      content:"";
      position:absolute;
      inset:-10% -5% auto auto;
      width:320px;
      height:400px;
      background:linear-gradient(180deg, rgba(34,126,255,.10), rgba(34,126,255,0));
      filter:blur(70px);
      transform:rotate(12deg);
      pointer-events:none;
    }


.bulut3{ opacity:0.4; content:""; position:absolute; inset:-10% -5% auto auto;
 width:1200px; height:600px; 
background:linear-gradient(180deg, rgba(128,46,225,.4), rgba(128,46,225,0)); filter:blur(70px); transform:rotate(24deg); pointer-events:none; }

.container{
  width:100%;
  max-width:1300px;
  margin:0 auto;
  padding:0 32px;
  position:relative;
}

.container::before{
  content:"";
  position:absolute;
  top:-220px;
  left:-220px;
  width:700px;
  height:700px;

  background:radial-gradient(
    circle,
    rgba(60,120,255,.25) 10%,
    rgba(60,120,255,.10) 30%,
    rgba(60,120,255,.05) 40%,
    transparent 30%
  );

  filter:blur(90px);
  pointer-events:none;
}

    /* HEADER */
    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:22px 0;
      position:relative;
      z-index:3;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      font-size:18px;
      letter-spacing:-0.02em;
    }

    .brand-icon{
      width:28px;
      height:28px;
      border-radius:8px;
      background:linear-gradient(180deg, #4aa3ff, #1d7ef5);
      display:grid;
      place-items:center;
      box-shadow:0 8px 24px rgba(40,144,255,.28);
      position:relative;
    }

    .brand-icon::before,
    .brand-icon::after{
      content:"";
      position:absolute;
      width:6px;
      height:12px;
      background:#fff;
      border-radius:10px;
      top:8px;
      transform:skewX(-18deg);
      opacity:.95;
    }

    .brand-icon::before{ left:8px; }
    .brand-icon::after{ right:8px; }

    .nav{
      display:flex;
      align-items:right;
      gap:34px;
      margin-left:36px;
    }

    .nav a{
      font-size:16px;
      color:#d6e0f5;
      opacity:.74;
font-family:arial;
    }

    .nav a:hover{
      font-size:16px;
      color:#d6e0f5;
      opacity:1;
font-family:arial;
    }


    .nav a span{
      opacity:.7;
      margin-left:4px;
      font-size:11px;
      position:relative;
      top:-1px;
    }

    .header-left{
      display:flex;
      align-items:center;
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      padding:0 22px;
      border-radius:10px;
      font-weight:700;
      font-size:15px;
      transition:.2s ease;
      white-space:nowrap;
    }

    .btn-dark{
      background:rgba(255,255,255,0.04);
      border:1px solid var(--btn-dark-border);
      color:#fff;
    }

    .btn-dark:hover{
      background:rgba(255,255,255,0.09);
    }

    .btn-primary{
background: linear-gradient(180deg, #22a455, #157a3d);
      color:#fff;
      box-shadow:0 14px 34px rgba(34,169,90,.2);
    }

    .btn-primary:hover{
background: linear-gradient(180deg, #29b563, #1b8f49);
    }



    /* HERO */
    .hero{
      display:grid;
      grid-template-columns: 1.02fr .98fr;
  
      gap:20px;
      height:560px;
      padding:38px 0 54px;
      position:relative;
      z-index:2;
    }

    .hero-left{
      width:800px;
      padding-top:12px;

    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:0 14px;
      border-radius:999px;
      background:rgba(34,126,255,0.16);
      border:1px solid rgba(59,138,255,0.12);
      color:#d7ebff;
      font-size:14px;
      font-weight:700;
      margin-bottom:22px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
    }

    h1{
      margin:0;
padding-right:0px;
      font-size:64px;
      line-height:1.2;
      letter-spacing:-0.015em;
      font-weight:900;
      max-width:620px;
      text-wrap:balance; 
white-space:nowrap;
    }

    .hero-subtitle{
      margin:28px 0 28px;
      color:var(--muted);
      font-size:18px;
      line-height:1.6;
      max-width:640px;
    }

    .hero-actions{
      display:flex;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom:22px;
    }

    .hero-actions .btn{
      min-height:56px;
      padding:0 22px;
      border-radius:10px;
      font-size:16px;
    }

    .hero-actions .btn-secondary{
      background:#1a202c;
      border:1px solid rgba(255,255,255,0.07);
      color:#fff;
    }

    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:22px;
      color:#f2f7ff;
      font-size:14px;
      margin:10px 0 26px;
    }

    .trust-item{
      display:flex;
      align-items:center;
      gap:10px;
      color:#eef5ff;
    }

    .trust-item svg{
      width:14px;
      height:14px;
      fill:#3ea0ff;
      flex:none;
    }

    .reviews{
      display:flex;
      align-items:center;
      gap:18px;
      margin-top:8px;
      flex-wrap:wrap;
    }

    .review-icons{
      display:flex;
      align-items:center;
    }

    .review-circle{
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,0.08);
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), rgba(255,255,255,.02));
      margin-left:-10px;
      backdrop-filter:blur(6px);
      box-shadow:0 8px 22px rgba(0,0,0,.18);
    }

    .review-circle:first-child{
      margin-left:0;
    }

    .review-rating{
      display:flex;
      flex-direction:column;
      gap:5px;
    }

    .stars{
      color:#ffc93c;
      font-size:24px;
      letter-spacing:1px;
      line-height:1;
    }

    .review-text{
      color:#f2f6ff;
      font-size:15px;
    }

    /* RIGHT EMPTY RADAR */
    .hero-right{
      position:relative;
      min-height:620px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .radar-shell{
      position:relative;
      width:min(650px, 100%);
      aspect-ratio:1 / 1;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      isolation:isolate;
    }

    .radar-shell::before{
      content:"";
      position:absolute;
      inset:10%;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(52,107,255,.12), rgba(52,107,255,0) 52%);
      filter:blur(30px);
      z-index:0;
      pointer-events:none;
    }

    .radar-ring{
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(255,255,255,0.12);
      box-shadow:0 0 40px rgba(34,126,255,0.03);
    }

    .ring-1{ width:100%; height:100%; opacity:.32; }
    .ring-2{ width:78%; height:78%; opacity:.42; }
    .ring-3{ width:56%; height:56%; opacity:.52; }
    .ring-4{ width:34%; height:34%; opacity:.62; }

    .radar-cross{
      position:absolute;
      inset:0;
      border-radius:50%;
      pointer-events:none;
      opacity:.18;
    }

    .radar-cross::before,
    .radar-cross::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
      transform:translate(-50%,-50%);
    }

    .radar-cross::before{
      width:1px;
      height:74%;
    }

    .radar-cross::after{
      height:1px;
      width:74%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    }

    .radar-placeholder{
      position:relative;
      z-index:2;
      width:66%;
      height:66%;
      border-radius:50%;
      border:1px dashed rgba(66,146,255,.28);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:40px;
      color:#8ea4c9;
      background:
        radial-gradient(circle at 50% 50%, rgba(34,126,255,.08), rgba(34,126,255,0) 65%);
      backdrop-filter:blur(4px);
    }

    .radar-placeholder-inner{
      max-width:280px;
    }

    .radar-placeholder strong{
      display:block;
      color:#dce9ff;
      font-size:20px;
      margin-bottom:10px;
      letter-spacing:-0.02em;
    }

    .radar-placeholder span{
      display:block;
      font-size:14px;
      line-height:1.6;
    }

    /* optional glow blobs */
    .glow{
      position:absolute;
      border-radius:50%;
      filter:blur(40px);
      pointer-events:none;
      z-index:0;
      opacity:.55;
    }

    .glow-1{
      width:180px;
      height:180px;
      background:rgba(0,90,255,.20);
      top:3%;
      left:18%;
    }

    .glow-2{
      width:140px;
      height:140px;
      background:rgba(113,0,255,.13);
      left:16%;
      top:38%;
    }

    .glow-3{
      width:140px;
      height:140px;
      background:rgba(38,188,104,.12);
      left:10%;
      bottom:18%;
    }

    @media (max-width: 1100px){
      .hero{
        grid-template-columns:1fr;
        gap:42px;
        padding-top:24px;
      }

      .hero-left{
        max-width:100%;
      }

      .hero-right{
        min-height:auto;
      }

      .radar-shell{
        width:min(700px, 92vw);
      }
    }

    @media (max-width: 760px){
      .container{
        width:min(100% - 28px, var(--container));
      }

      .header{
        gap:16px;
        flex-wrap:wrap;
      }

      .header-left{
        width:100%;
        justify-content:space-between;
      }

      .nav{
        display:none;
      }

      h1{
        font-size:clamp(40px, 12vw, 64px);
      }

      .hero-subtitle{
        font-size:16px;
      }

      .hero-actions{
        gap:12px;
      }

      .hero-actions .btn{
        width:100%;
      }

      .trust-row{
        gap:12px 18px;
        flex-direction:column;
        align-items:flex-start;
      }

      .review-text{
        font-size:14px;
      }

      .radar-placeholder{
        width:72%;
        height:72%;
        padding:28px;
      }
    }
	
	
		.white-loader{
  width:52px;
  height:52px;
  border-radius:50%;
  background:transparent;

  border:3px solid rgba(255,255,255,0.18);
  border-top:3px solid #ffffff;
  border-right:3px solid rgba(255,255,255,0.8);

  animation:spin 0.9s linear infinite;
}

@keyframes spin{
  100%{
    transform:rotate(360deg);
  }
}
	


.radar-iframe{
  width:780px;
  height:780px;
  position:relative;
}

.radar-iframe iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:transparent;
}


.testimonial{

  padding:10px;

  border-radius:16px;

  background:rgba(255,255,255,0.04);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.10);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05);

  color:#fff;
}

/* header */

.testimonial-header{
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:16px;
}

.testimonial-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;

  border:2px solid rgba(255,255,255,0.15);
}

/* text */

.testimonial-name{
  font-weight:600;
  font-size:15px;
  letter-spacing:0.2px;
}

.testimonial-role{
  font-size:13px;
  color:#9fb2d8;
  margin-top:2px;
}

.testimonial-text{
  font-size:15px;
  line-height:1.6;
  color:#d6e3ff;
}

.stats{
  background:linear-gradient(180deg,#030c1d,#020816);
  padding:60px 20px;
}

.stats-container{
  max-width:1200px;
  margin:auto;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;

  text-align:center;
}

.stat{
  flex:1;
}

.stat-number{
  font-size:34px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:.5px;
}

.stat-label{
  margin-top:8px;
  font-size:14px;
  color:#8fa3c4;
}

.h2a {
  background: linear-gradient(90deg,#3b82f6 0%,#22a6f2 35%,#22c1c3 65%,#22c55e 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
font-size:30px;
padding-top:0px;margin-top:10px;
}


.h2c {
background: linear-gradient(90deg,#34d399 0%,#4ade80 35%,#6ee7b7 65%,#a7f3d0 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
font-size:30px;
padding-top:0px;margin-top:10px;
}

.h2d {
background: linear-gradient(90deg,#2563eb 0%,#0ea5e9 40%,#22c1c3 70%,#16a34a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
font-size:30px;
padding-top:0px;margin-top:10px;
}

.h2aa {
background: #fff;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
font-size:34px;
padding-top:0px;margin-top:10px;
}



.cards-style-2{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;

text-align:left;
}

.cards-style-2 .info-card{
  position:relative;
  padding:22px 22px 21px;
  border-radius:16px;

  border:1px solid rgba(80,200,160,.24);

  overflow:hidden;
}

.cards-style-2 .info-card::before{
  content:"";
  position:absolute;
  inset:auto -60px -70px auto;
  width:180px;
  height:180px;
  border-radius:50%;
background: radial-gradient(circle, rgba(30,64,175,.12), transparent 68%);  pointer-events:none;
}

.cards-style-2 .info-card::after{
  content:"";
  position:absolute;
  left:-30px;
  top:-30px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.12), transparent 70%);
  pointer-events:none;
}

.cards-style-2 .mini-line{
  display:block;
  width:58px;
  height:4px;
  border-radius:999px;
  margin-bottom:18px;
  background:linear-gradient(90deg, #22c55e, #38bdf8);
  box-shadow:0 0 16px rgba(34,197,94,.45);
}

.cards-style-2 h3{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.25;
  color:#f8fafc;
}

.cards-style-2 p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:rgba(226,232,240,.78);
}

@media (max-width: 980px){
  .cards-style-2{grid-template-columns:1fr;}
}

.map{
    position:relative;
    width:700px;
    height:420px;
}

/* world */

.world{
    position:absolute;
    width:100%;
    height:110%;
    opacity:.25;
    background:url("map.png") center/contain no-repeat;
    filter:invert(1) brightness(.7);
}


/* ===== NODE SYSTEM ===== */

.node{
    position:absolute;
    width:110px;
    height:110px;
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity .9s ease;
}

.node.active{
    opacity:1;
}

/* glow */

.node::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:50%;
    background:radial-gradient(circle,
        rgba(34,197,94,.65) 0%,
        rgba(34,197,94,.25) 35%,
        rgba(34,197,94,0) 70%);
    filter:blur(4px);
}

/* center dot */

.node::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:10px;
		border:1px solid #0a4f23;
    height:10px;
    transform:translate(-50%,-50%);
    background:#22c55e;
    border-radius:50%;
    box-shadow:0 0 5px rgba(34,197,94,.9);
}


/* original nodes */

.n1{ left:200px; top:150px;}   /* USA */
.n2{ left:510px; top:170px;}   /* Asia */
.n3{ left:240px; top:270px;}   /* South America */

/* NEW nodes (red marks you drew) */

.n4{ left:400px; top:145px;}   /* Europe */
.n5{ left:600px; top:110px;}   /* Siberia */
.n6{ left:200px; top:210px;}   /* Central America */
.n7{ left:640px; top:300px;}   /* AUS */
.n8{ left:480px; top:270px;}   /* africa */


/* ===== CARDS ===== */

.card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 20px;
    border-radius:16px;
    background:rgba(28,32,42,.55);
    backdrop-filter:blur(3px);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 12px 40px rgba(0,0,0,.5);
    color:white;
}



.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
}

.name{
    font-weight:600;
}

.time{
padding-top:3px;
text-align:left;
    font-size:12px;
    opacity:.5;
}

.text{
    margin-left:14px;
    opacity:.9;
}

/* card positions */

.c1{ left:50px; top:40px;}
.c2{ right:60px; top:170px;}
.c3{ left:120px; bottom:55px;}

.feature{
    display:flex;
    align-items:center;   /* vertical alignment */
    gap:14px;             /* space between icon and text */
    font-size:16px;
padding-bottom:20px;
}



.map-distance-ui{
  position:absolute;
  right:110px;
  top:148px;
  width:170px;
  height:70px;
z-index:4;
opacity:0.5;
}

.distance-link{
  position:absolute;
  inset:0;
  overflow:visible;
}



.scene{
border:0px solid red;
  position:relative;
  width:1260px;
  height:270px;
  border-radius:26px;
  overflow:hidden;
margin-top:20px;
}

/* LEFT SIDE NUMBERS */
.data-area{
  position:absolute;
  left:40px;
  right:50%;
  margin-right:42px;
  top:42px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:1;
}

.data-row{
  display:flex;
  gap:5px;
  font-size:14px;
  line-height:14px;
  white-space:nowrap;
  color:#bfe9ff;
  text-shadow:
    0 0 8px rgba(100,220,255,.20),
    0 0 14px rgba(0,255,180,.06);
}

.data-row span{
  display:inline-block;
  min-width:8px;
  text-align:center;
  color:#9adfff;
  opacity:.55;
  text-shadow:0 0 6px rgba(110,220,255,.10);
  transition:
    color .10s linear,
    opacity .10s linear,
    text-shadow .10s linear;
}

.data-row span.white{
  color:rgba(235,247,255,.95);
  opacity:.82;
  text-shadow:
    0 0 7px rgba(220,240,255,.08),
    0 0 12px rgba(120,220,255,.04);
}

/* CENTER SERVER */
.server-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:80px;
  display:grid;
margin-top:-61px;
  place-items:center;
  z-index:4;
margin-left:20px;
margin-right:12px;
}

.server-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(120,220,255,.38);
  box-shadow:0 0 20px rgba(0,170,255,.18);
  animation:spin 6s linear infinite;
}

.server-ring::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:2px dotted rgba(120,255,220,.72);
  animation:spinReverse 10s linear infinite;
}

.server{
  position:relative;
  width:76px;
  height:76px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(20,40,70,.95),rgba(10,20,38,.2));
  border:1px solid rgba(140,220,255,.2);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  box-shadow:0 0 30px rgba(0,180,255,.15);
}

.server div{
  width:32px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#72bfff,#8fffd0);
}

/* RIGHT SIDE USER FLOW */
.users-area{
  position:absolute;
  left:calc(50% + 72px);
  right:26px;
  top:0px;
  bottom:0;
  z-index:2;
  pointer-events:none;
margin-left:50px;
border:0px solid red;
}

.user-particle{
  position:absolute;
  width:36px;
  height:36px;
  border-radius:50%;
  opacity:0;
  transform:translateY(-50%) scale(.92);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 18px rgba(120,230,255,.10),
    0 10px 24px rgba(0,0,0,.22);
  animation:userFloat linear forwards;
  background:#0d1726;
}

.user-particle img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.user-particle::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(170,235,255,.10);
}

@keyframes userFloat{
  0%{
    opacity:0;
    transform:translate(0,-50%) scale(.88);
  }
  15%{
    opacity:.95;
    transform:translate(18px,-50%) scale(1);
  }
  70%{
    opacity:.55;
    transform:translate(var(--travel), calc(-50% + var(--drift))) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(calc(var(--travel) + 24px), calc(-50% + var(--drift))) scale(.97);
  }
}

@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes spinReverse{
  from{transform:rotate(360deg)}
  to{transform:rotate(0deg)}
}

/* RIGHT SIDE SHINING DOTS */
.sparkles-area{
  position:absolute;

  /* position relative to server */
  left:calc(50% + 70px);
  top:50%;

  width:400px;
  height:90px;

  transform:translateY(-50%);

  pointer-events:none;
  overflow:hidden;
}

.sparkle{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  opacity:0;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(120,255,220,.75) 38%, rgba(120,255,220,0) 72%);
  box-shadow:
    0 0 8px rgba(120,255,220,.30),
    0 0 16px rgba(80,220,255,.14);
  animation:sparkleFloat linear forwards;
}

.sparkle.tiny{
  width:3px;
  height:3px;
  box-shadow:
    0 0 6px rgba(120,255,220,.24),
    0 0 10px rgba(80,220,255,.10);
}

.sparkle.mid{
  width:5px;
  height:5px;
}

.sparkle.big{
  width:8px;
  height:8px;
  box-shadow:
    0 0 10px rgba(120,255,220,.36),
    0 0 22px rgba(80,220,255,.18);
}

@keyframes sparkleFloat{
  0%{
    opacity:0;
    transform:translate(0,-50%) scale(.7);
  }
  10%{
    opacity:.95;
    transform:translate(10px,-50%) scale(1);
  }
  68%{
    opacity:.55;
    transform:translate(var(--travel), calc(-50% + var(--drift))) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(calc(var(--travel) + 24px), calc(-50% + var(--drift))) scale(.85);
  }
}


/* STATS CONTAINER */

.stats{

display:flex;
align-items:center;
justify-content:space-between;

gap:50px;

padding:34px 50px;

border-radius:20px;

position:relative;

background:
linear-gradient(180deg,#06142d,#020817, 0.4);

border:1px solid rgba(120,180,255,.22);

box-shadow:
0 0 10px rgba(0,140,255,.03),
inset 0 1px 0 rgba(255,255,255,.03);

max-width:1200px;

z-index:2;

}


/* TOP GRADIENT LINE */

.stats::before{
opacity:0.5;
content:"";
position:absolute;

top:0;
left:0;
right:0;

height:1px;

background:linear-gradient(
90deg,
transparent,
#44e0ff,
#3cff8f,
#5f6bff,
transparent
);

}


/* BOTTOM GLOW */

.stats::after{

content:"";
position:absolute;

bottom:-15px;
left:10%;
right:30%;

height:20px;

background:linear-gradient(
90deg,
transparent,
rgba(0,255,160,.05),
rgba(80,120,255,.05),
transparent
);

filter:blur(14px);

}


/* METRIC */

.stat{

text-align:center;
min-width:100px;

}

.value{

font-size:34px;
font-weight:700;

color:white;

letter-spacing:-1px;

}

.label{

margin-top:6px;

font-size:16px;
color:#8aa6d9;

}


/* DIVIDER */

.divider{

width:1px;
height:60px;

background:linear-gradient(
transparent,
#3cd3ff,
transparent
);

box-shadow:0 0 14px rgba(60,210,255,.4);

}


.dots{
position:absolute;
inset:0;
pointer-events:none;
}





.footer{
margin-top:0px;
margin-left:13px;
position:relative;
overflow:hidden;
padding:54px 24px 26px;
border-top:1px solid rgba(255,255,255,.09);
}

  /* subtle grid background */
  .footer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:7px 7px;
    opacity:.35;
    pointer-events:none;
  }

  .footer::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 30%, rgba(85,120,255,.06), transparent 30%),
      radial-gradient(circle at 80% 20%, rgba(90,60,255,.04), transparent 28%),
      radial-gradient(circle at 60% 80%, rgba(0,140,255,.08), transparent 24%);
    pointer-events:none;
  }



  .footer-inner{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:0 auto;
  }

  .footer-top{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:56px;
    align-items:start;
  }

  .brand{
    max-width:300px;
  }

  .brand-logo{
    width:86px;
    height:86px;
    object-fit:contain;
    display:block;
    margin-bottom:20px;
  }

  .brand-text{
    margin:0;
    color:rgba(255,255,255,.92);
    font-size:17px;
    line-height:1.55;
    max-width:250px;
  }

  .footer-col h4{
    margin:12px 0 18px;
    font-size:17px;
    line-height:1.2;
    font-weight:700;
    color:#fff;
  }

  .footer-col a{
    display:block;
    margin:0 0 12px;
    color:rgba(255,255,255,.6);
    text-decoration:none;
    font-size:14px;
    line-height:1.2;
    transition:opacity .2s ease;
  }

  .footer-col a:hover{
    opacity:.75;
  }

  .footer-divider{
    height:1px;
    margin:34px 0 22px;
    background:rgba(255,255,255,.14);
  }

  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
  }

  .copyright{
    color:rgba(255,255,255,.9);
    font-size:15px;
    line-height:1.4;
  }

  .payments{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .pay-box{
    height:32px;
    min-width:42px;
    padding:0 10px;
    border-radius:6px;
    background:#fff;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }

  .visa{ color:#1434cb; }
  .mc{
    gap:0;
    min-width:44px;
  }
  .mc span{
    display:block;
    width:14px;
    height:14px;
    border-radius:50%;
  }
  .mc .c1{ background:#ea001b; margin-right:-4px; }
  .mc .c2{ background:#f79e1b; }
  .apple{ font-size:15px; }
  .gpay{
    font-size:13px;
    font-weight:600;
    color:#444;
  }
  .gpay b:nth-child(1){ color:#4285F4; }
  .gpay b:nth-child(2){ color:#DB4437; }
  .gpay b:nth-child(3){ color:#F4B400; }
  .gpay b:nth-child(4){ color:#4285F4; }

  @media (max-width: 900px){
    .footer-top{
      grid-template-columns:1fr 1fr;
      gap:36px 28px;
    }
  }

  @media (max-width: 640px){
    .footer{
      padding:40px 20px 24px;
    }

    .footer-top{
      grid-template-columns:1fr;
      gap:26px;
    }

    .footer-bottom{
      flex-direction:column;
      align-items:flex-start;
    }

    .brand-logo{
      width:74px;
      height:74px;
    }

    .brand-text{
      font-size:16px;
    }
  }

.rgx-scene{
position:relative;
width:1190px;
height:600px;
overflow:hidden;

background:transparent;
}

/* canvas */

#rgx-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
}

/* optional overlay content */

.rgx-content{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:2;
}

.rgx-badge{
padding:12px 20px;
border-radius:14px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.03);
color:white;
font-family:Inter,system-ui;
}



.saas-card{
    display:none;
    width:1200px;
z-index:1;
    min-height:690px;
    position:relative;
overflow:hidden;
    border-radius:30px;
    overflow:hidden;
    color:#fff;
    background-size:
        50px 50px,
        50px 50px,
        100% 100%,
        auto;

    border:1px solid rgba(78,82,153,0.2);

    box-shadow:
        0 0 0 5px rgba(0,0,0,0.9) inset,
        0 5px 5px rgba(0,0,0,0.7),
        0 0 5px rgba(0,0,0,0.7);
}



.popup-content{
    position:relative;
    z-index:2;
    padding:40px;
    color:#fff;
    font-size:24px;
background-color:#000;
padding-top:20x;
}




#popupOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}


#popupOverlay.active{
    display:flex;
}

#popupOverlay.active .saas-card{
    display:block;
}


.popup-close{
    position:absolute;
    top:-18px;
    right:-18px;

    width:36px;
    height:36px;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.2);

    background:#080e1c;
    color:#b2b2b2;

    font-size:20px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
z-index:100;
}


.pricing-hero{
border:1px solid #1d0b51;
    position:relative;
    padding:60px 60px 60px;
width:1210px;
height:780px;
border-radius:36px;
    text-align:center;
    color:white;
overflow:visible; 
    background-color:#020714;
box-shadow:0px 0px 60px #010514;
}


.pricing-hero::before{
    content:"";
    position:absolute;
    inset:0;
border-radius:36px;
    background-image:url("arks.png");
    background-size:cover;
    background-position:center;

    opacity:0.7;

    pointer-events:none;
}





/* title */


/* subtitle */

.pricing-hero p{
    color:rgba(255,255,255,.8);
    max-width:520px;
    margin:0 auto 30px;
    font-size:16px;
    line-height:1.6;
font-family:arial;
}


/* toggle pill */

.pricing-tabs{
    display:inline-flex;
    background:rgba(255,255,255,0.065);
    padding:6px;
    border-radius:40px;
    backdrop-filter:blur(2px);
}

.pricing-tabs button{
    border:none;
    background:transparent;
    color:rgba(255,255,255,.8);
    padding:10px 46px;
    border-radius:30px;
    font-size:16px;
    cursor:pointer;
font-family:arial;
    transition:.25s;
}

/* active tab */

.pricing-tabs button.active{
    background:linear-gradient(90deg,#6d28d9,#9333ea);
    color:white;
}

/* hover */

.pricing-tabs button:hover{
    color:white;
}


.login-row{
  display:flex;
  align-items:center;
  gap:16px; /* space between input & button */
}


/* wrapper */
.login-wrap{
flex:1;
  position:relative;
width:100%;
  border-radius:10px;
border:1px solid #5b20a1;
}

/* ONLY border animation (thin line) */
.login-wrap::before{
width:100%;
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  padding:1px;

  background: linear-gradient(
    120deg,
    rgba(168,85,247,0.2),
    rgba(255,255,255,0.3),
    rgba(168,85,247,0.4)
  );

  background-size:200% 200%;
  animation:borderMove 6s linear infinite;

  /* cut center → only border visible */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* input */
.login-input{
  height:60px;
  border:none;
  outline:none;
  box-sizing:border-box;
   width:100%;
padding-left:20px;
  border-radius:10px;

  color:#fff;
  font-size:16px;

  /* VERY LOW opacity dark */
  background:rgba(5, 8, 20, 0.07);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);


}

.login-input::placeholder{
  color:rgba(255,255,255,0.35);
}

/* optional subtle focus */
.login-input:focus{
  background:rgba(5, 8, 20, 0.12);
}

/* animation */
@keyframes borderMove{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

.border{
margin-top:18px;
width:320px;
height:4px;
border-radius:3px;
background:linear-gradient(
90deg,
#3b82f6 0%,
#22c55e 60%,
rgba(34,197,94,0) 100%
);
}