/* HERO */
.about-hero{
  padding:140px 0 100px;
  background:
    radial-gradient(900px at top right,#143d63,transparent),
    linear-gradient(180deg,#071a2f,#040d18);
  color:#fff;
  text-align:center;
}

.about-hero h1{
  font-size:56px;
  font-weight:800;
  margin-bottom:20px;
}

.about-metrics{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:30px;
}

.about-metrics h3{
  font-size:32px;
  font-weight:800;
  color:#4fd1c5;
}


/* STORY */
.about-story{
  padding:100px 0;
  background:#071a2f;
  color:#fff;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.about-highlight{
  background:linear-gradient(145deg,#0c2340,#071a30);
  padding:40px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
}


/* EXPERTISE */
.about-expertise{
  padding:100px 0;
  background:#051324;
  color:#fff;
}

.pillar-grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.pillar{
  background:rgba(255,255,255,.05);
  padding:30px;
  border-radius:20px;
  transition:.35s;
}

.pillar:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.08);
}

.pillar i{
  font-size:28px;
  color:#4fd1c5;
}


/* FRAMEWORK */
.about-framework{
  padding:100px 0;
  background:#071a2f;
  color:#fff;
}

.framework-steps{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

.step{
  background:rgba(255,255,255,.05);
  padding:30px;
  border-radius:20px;
}

.step span{
  font-size:24px;
  font-weight:800;
  color:#4fd1c5;
}


/* SECURITY */
.about-security{
  padding:100px 0;
  background:linear-gradient(135deg,#0f2747,#08182e);
  color:#fff;
}


/* CTA */
.about-cta{
  padding:120px 0;
  background:linear-gradient(135deg,#ff7a5c,#ff9a76);
  color:#fff;
}

.about-cta .btn-primary{
  background:#fff;
  color:#ff7a5c;
  font-weight:700;
  padding:14px 28px;
  border-radius:8px;
}


/* ===============================
   GO TO TOP BUTTON
================================ */

#goTopBtn{
  position:fixed;
  right:30px;
  bottom:30px;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,#4fd1c5,#38b2ac);
  color:#022;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 15px 40px rgba(0,0,0,.4);
  transition:all .35s ease;
  opacity:0;
  visibility:hidden;
  transform:translateY(20px);
  z-index:999;
}

#goTopBtn.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

#goTopBtn:hover{
  transform:translateY(-4px);
  box-shadow:0 25px 60px rgba(0,0,0,.6);
}

/* Dark mode premium glow */
#goTopBtn::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(79,209,197,.35),transparent 70%);
  z-index:-1;
}