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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,Arial,sans-serif;
  background:#111;
  color:#fff;
  overflow-x:hidden;
}

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

/* ===============================
   KEYFRAMES
=================================*/
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(28px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeDown{
  from{
    opacity:0;
    transform:translateY(-22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes floatGlow1{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-18px,16px);}
}

@keyframes floatGlow2{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(16px,-14px);}
}

@keyframes pulseDot{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.5);
    opacity:.45;
  }
}

@keyframes scanSweep{
  0%{
    transform:translateX(-70px);
    opacity:0;
  }
  20%{opacity:1;}
  50%{
    transform:translateX(0);
    opacity:1;
  }
  80%{opacity:1;}
  100%{
    transform:translateX(70px);
    opacity:0;
  }
}

@keyframes eyeBlink{
  0%,42%,48%,80%,86%,100%{
    transform:scaleY(0);
  }
  45%,83%{
    transform:scaleY(1);
  }
}

@keyframes irisPulse{
  0%,100%{
    transform:scale(.95);
    opacity:.4;
  }
  50%{
    transform:scale(1.05);
    opacity:1;
  }
}

/* ===============================
   HERO
=================================*/
.hero-wrap{
  padding:28px;
  min-height:100vh;
  background:linear-gradient(90deg,#2c2c2c 0%,#111 18%,#111 82%,#2c2c2c 100%);
}

.hero-box{
  position:relative;
  min-height:92vh;
  border-radius:30px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,.05);
  padding:28px;
}

/* NAV */
.top-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  position:relative;
  z-index:10;
  opacity:0;
  animation:fadeDown .9s ease forwards;
}

.brand{
  font-size:1.45rem;
  font-weight:800;
}

.brand span{
  opacity:.75;
}

.menu-pill{
  display:flex;
  gap:20px;
  background:#111;
  padding:12px 18px;
  border-radius:999px;
}

.menu-pill a{
  opacity:.78;
  transition:.25s;
}

.menu-pill a:hover{
  opacity:1;
  transform:translateY(-1px);
}

.top-btn{
  background:#fff;
  color:#000;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  transition:.3s;
}

.top-btn:hover{
  transform:translateY(-3px) scale(1.03);
}

/* HERO CENTER */
.hero-center{
  position:absolute;
  top:52%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  max-width:850px;
  text-align:center;
  z-index:5;
}

.tiny-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:#111;
  margin-bottom:18px;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.2s;
}

.hero-center h1{
  font-size:5.3rem;
  line-height:1.03;
  letter-spacing:-2px;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:.35s;
}

.hero-sub{
  margin:22px auto 0;
  max-width:700px;
  color:#9ca3af;
  line-height:1.8;
  font-size:1.08rem;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:.55s;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:32px;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:.75s;
}

.main-btn,
.ghost-btn,
.bottom-btn,
.about-btn{
  padding:14px 24px;
  border-radius:999px;
  font-weight:700;
  transition:.3s;
}

.main-btn,
.bottom-btn,
.about-btn{
  background:#fff;
  color:#000;
}

.main-btn:hover,
.bottom-btn:hover,
.about-btn:hover{
  transform:translateY(-3px) scale(1.03);
}

.ghost-btn{
  border:1px solid rgba(255,255,255,.08);
}

.ghost-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);
}

/* MICRO LABELS */
.micro{
  position:absolute;
  z-index:5;
  font-size:1rem;
  color:#d4d4d8;
  opacity:0;
  animation:fadeUp .9s ease forwards;
}

.micro span{
  display:block;
  margin-top:6px;
  color:#6b7280;
  font-size:.9rem;
}

.micro span i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  display:inline-block;
  margin-right:8px;
  animation:pulseDot 1.3s infinite;
}

.left-one{top:28%;left:9%;animation-delay:.3s;}
.right-one{top:28%;right:10%;animation-delay:.45s;}
.left-two{bottom:26%;left:10%;animation-delay:.6s;}
.right-two{bottom:26%;right:10%;animation-delay:.75s;}

/* FOG */
.fog{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.75;
}

.fog-one{
  width:420px;
  height:420px;
  top:8%;
  right:7%;
  background:rgba(255,255,255,.16);
  animation:floatGlow1 7s ease-in-out infinite;
}

.fog-two{
  width:320px;
  height:320px;
  bottom:7%;
  left:6%;
  background:rgba(255,255,255,.12);
  animation:floatGlow2 8s ease-in-out infinite;
}

/* ===============================
   ABOUT
=================================*/
.about-screen{
  position:relative;
  min-height:100vh;
  padding:90px 0;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.about-shell{
  width:92%;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:90px;
  align-items:start;
  position:relative;
  z-index:2;
}

/* LEFT */
.about-left{
  padding-top:80px;
}

.mini-tag{
  font-size:.95rem;
  letter-spacing:4px;
  color:#8b8b95;
  margin-bottom:22px;
}

.about-left h2{
  font-size:5rem;
  line-height:1.03;
  letter-spacing:-2px;
  margin-bottom:26px;
}

.lead{
  color:#d1d5db;
  font-size:1.18rem;
  line-height:1.8;
  margin-bottom:20px;
}

.about-left p{
  color:#8f8f98;
  font-size:1.08rem;
  line-height:1.9;
  max-width:640px;
}

.about-btn{
  display:inline-block;
  margin-top:28px;
}

/* RIGHT */
.about-right{
  position:relative;
  min-height:620px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* EYE TOP CENTER */
.eye-core{
  position:absolute;
  top:35px;
  left:50%;
  transform:translateX(-50%);
  width:250px;
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.eye-core::before{
  content:"";
  position:absolute;
  width:255px;
  height:130px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50% / 60%;
}

.eye-core::after{
  content:"";
  position:absolute;
  width:255px;
  height:130px;
  border-radius:50% / 60%;
  background:#000;
  transform:scaleY(0);
  transform-origin:center;
  animation:eyeBlink 6s infinite;
  z-index:8;
}

.iris-ring{
  position:absolute;
  border-radius:50%;
}

.outer{
  width:105px;
  height:105px;
  border:1px solid rgba(255,255,255,.08);
  animation:irisPulse 3s infinite;
}

.mid{
  width:74px;
  height:74px;
  border:1px solid rgba(255,255,255,.10);
}

.inner{
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.12);
  animation:irisPulse 2.2s infinite;
}

.pupil{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  z-index:5;
  box-shadow:0 0 18px rgba(255,255,255,.45);
}

.scan-line{
  position:absolute;
  width:130px;
  height:2px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:scanSweep 3s ease-in-out infinite;
  z-index:6;
}

/* FEATURE LINES */
.feature-lines{
  width:100%;
  max-width:620px;
  margin-top:115px;
  height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.line-stat{
  padding:0 0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.15rem;
  line-height:1.5;
  transition:.35s ease;
  cursor:pointer;
  position:relative;
}

.line-stat span{
  display:block;
  color:#5e5e67;
  font-size:.82rem;
  margin-bottom:10px;
  letter-spacing:1px;
  transition:.35s;
}

.line-stat:hover{
  padding-left:14px;
  border-color:rgba(255,255,255,.22);
  color:#fff;
}

.line-stat:hover span{
  color:#9ca3af;
}

.line-stat:hover span{
  color:#fff;
  letter-spacing:2px;
}

.line-stat::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:#fff;
  transition:.35s;
}

.line-stat:hover::after{
  width:100%;
}

/* BG */
.about-glow{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);
  left:18%;
  top:18%;
  filter:blur(18px);
}

.about-grid-lines{
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ===============================
   GENERIC
=================================*/
.section{
  width:90%;
  margin:auto;
  padding:110px 0;
  text-align:center;
}

.section h2{
  font-size:3rem;
  margin-bottom:18px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:40px;
}

.card{
  padding:30px;
  border-radius:22px;
  background:#171717;
  border:1px solid rgba(255,255,255,.04);
}

.bottom-btn{
  display:inline-block;
  margin-top:38px;
}

.footer{
  text-align:center;
  padding:38px;
  color:#6b7280;
  border-top:1px solid rgba(255,255,255,.04);
}

/* ===============================
   RESPONSIVE
=================================*/
@media(max-width:1100px){

.about-shell{
  grid-template-columns:1fr;
  gap:70px;
}

.about-left h2{
  font-size:3.6rem;
}

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

.eye-core{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  margin-bottom:40px;
}

.feature-lines{
  margin-top:0;
}

.grid{
  grid-template-columns:1fr;
}
}

@media(max-width:900px){

.hero-center h1{
  font-size:3.4rem;
}

.menu-pill,
.micro{
  display:none;
}

.hero-actions{
  flex-direction:column;
  align-items:center;
}

.about-left h2{
  font-size:2.8rem;
}
}

@media(max-width:700px){

.hero-wrap{
  padding:14px;
}

.hero-box{
  padding:20px;
}

.brand{
  font-size:1.1rem;
}

.top-btn{
  padding:10px 16px;
}

.hero-center h1{
  font-size:2.6rem;
}

.hero-sub{
  font-size:1rem;
}

.about-left h2{
  font-size:2.3rem;
}

.section h2{
  font-size:2.2rem;
}
}


/* ===============================
   HOW IT WORKS SECTION
=================================*/

.how-screen{
  position:relative;
  min-height:100vh;
  padding:100px 0;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.how-shell{
  width:92%;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* LEFT */
.how-left h2{
  font-size:5rem;
  line-height:1.03;
  letter-spacing:-2px;
  margin-bottom:28px;
}

.how-lead{
  color:#d1d5db;
  font-size:1.15rem;
  line-height:1.9;
  max-width:620px;
  margin-bottom:22px;
}

.how-sub{
  color:#8f8f98;
  font-size:1.05rem;
  line-height:1.9;
  max-width:620px;
}

/* RIGHT */
.how-right{
  position:relative;
  padding-left:40px;
  display:flex;
  flex-direction:column;
  gap:34px;
}

.process-line{
  position:absolute;
  left:11px;
  top:10px;
  bottom:10px;
  width:1px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.05),
    rgba(255,255,255,.15),
    rgba(255,255,255,.05)
  );
}

.step-item{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:24px;
  position:relative;
  transition:.35s ease;
  padding:10px 0;
  cursor:pointer;
}

.step-item span{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  color:#8f8f98;
  background:#0a0a0a;
  z-index:2;
  transition:.35s;
}

.step-item h3{
  font-size:1.2rem;
  margin-bottom:8px;
  font-weight:600;
}

.step-item p{
  color:#8f8f98;
  font-size:1rem;
  line-height:1.7;
  transition:.35s;
}

/* HOVER */
.step-item:hover{
  transform:translateX(12px);
}

.step-item:hover span{
  background:#fff;
  color:#000;
  box-shadow:0 0 18px rgba(255,255,255,.22);
}

.step-item:hover h3{
  color:#fff;
}

.step-item:hover p{
  color:#d1d5db;
}

/* BACKGROUND FX */
.how-glow{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);
  right:10%;
  top:18%;
  filter:blur(18px);
}

.how-bg-grid{
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
}

/* RESPONSIVE */
@media(max-width:1100px){

.how-shell{
  grid-template-columns:1fr;
  gap:70px;
}

.how-left h2{
  font-size:3.8rem;
}

}

@media(max-width:700px){

.how-left h2{
  font-size:2.6rem;
}

.how-right{
  padding-left:20px;
}

.step-item{
  grid-template-columns:42px 1fr;
  gap:16px;
}

}


.final-alert{
min-height:100vh;
position:relative;
overflow:hidden;
padding:80px 8%;
display:flex;
align-items:center;
background:#050505;
}

.alert-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size:60px 60px;
opacity:.35;
}

.alert-glow{
position:absolute;
width:520px;
height:520px;
right:10%;
top:50%;
transform:translateY(-50%);
background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
filter:blur(55px);
}

.alert-shell{
position:relative;
z-index:2;
width:100%;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:80px;
align-items:center;
}

.alert-tag{
font-size:13px;
letter-spacing:5px;
color:#9ca3af;
margin-bottom:22px;
}

.alert-left h2{
font-size:78px;
line-height:1.02;
font-weight:700;
margin-bottom:28px;
color:white;
}

.alert-sub{
font-size:21px;
line-height:1.8;
color:#9ca3af;
max-width:620px;
margin-bottom:42px;
}

.alert-actions{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.alert-btn,
.alert-ghost{
padding:18px 34px;
border-radius:999px;
font-weight:600;
text-decoration:none;
transition:.3s ease;
}

.alert-btn{
background:white;
color:black;
}

.alert-btn:hover{
transform:translateY(-4px);
}

.alert-ghost{
border:1px solid rgba(255,255,255,0.12);
color:white;
}

.alert-ghost:hover{
background:white;
color:black;
}

.alert-right{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.pulse-core{
position:relative;
width:320px;
height:320px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:34px;
}

.ring{
position:absolute;
border:1px solid rgba(255,255,255,0.08);
border-radius:50%;
animation:pulseRing 4s infinite ease-out;
}

.r1{width:90px;height:90px;}
.r2{width:150px;height:150px;animation-delay:.5s;}
.r3{width:220px;height:220px;animation-delay:1s;}
.r4{width:300px;height:300px;animation-delay:1.5s;}

.core-dot{
width:18px;
height:18px;
border-radius:50%;
background:white;
box-shadow:0 0 20px rgba(255,255,255,.9);
animation:blinkDot 2s infinite;
}

.status-box{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
letter-spacing:3px;
color:#e5e7eb;
margin-bottom:14px;
}

.status-box span{
width:10px;
height:10px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 12px #22c55e;
animation:blinkGreen 1.5s infinite;
}

.status-text{
color:#9ca3af;
font-size:16px;
text-align:center;
max-width:300px;
line-height:1.7;
}

@keyframes pulseRing{
0%{transform:scale(.8);opacity:.5;}
100%{transform:scale(1.15);opacity:.05;}
}

@keyframes blinkDot{
0%,100%{opacity:1;}
50%{opacity:.45;}
}

@keyframes blinkGreen{
0%,100%{opacity:1;}
50%{opacity:.35;}
}

@media(max-width:980px){

.alert-shell{
grid-template-columns:1fr;
gap:60px;
text-align:center;
}

.alert-left h2{
font-size:56px;
}

.alert-sub{
margin-left:auto;
margin-right:auto;
}

.alert-actions{
justify-content:center;
}
}

@media(max-width:768px){

.alert-left h2{
font-size:42px;
}

.alert-sub{
font-size:18px;
}

.pulse-core{
width:240px;
height:240px;
}
}