/* Hero */
.hero{
  position:relative;
  padding: 92px 0 52px;
  overflow:hidden;
  background: #061123;
  z-index:1;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 18% 25%, rgba(80,160,255,.35), transparent 60%),
    radial-gradient(900px 500px at 78% 40%, rgba(255,125,46,.22), transparent 60%),
    radial-gradient(900px 500px at 45% 95%, rgba(120,255,220,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,17,35,1), rgba(9,27,56,1));
  filter: saturate(1.15);
}
.hero__bg::after{
  content:"";
  position:absolute; inset:-2px;
  opacity:.85;
  background-image: url("../img/hero-network.d5bd52a211f2.svg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
}

.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 42px;
  align-items:center;
}
.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(210,230,255,.9);
  margin-bottom:12px;
}
.hero h1{
  margin:0 0 14px;
  color:white;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:600;
}
.lead{
  margin:0;
  color: rgba(220,235,255,.92);
  font-size:18px;
  line-height:1.55;
}
.page .lead{
  color:#3f4c66;
}
.cta-row{margin-top:22px; display:flex; gap:14px; flex-wrap:wrap}
.trust{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.trust__pill{
  display:flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(235,245,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.trust__pill span{color: rgba(220,235,255,.78); font-size:12px}
.trust__pill strong{font-size:12px}
.dot{width:10px;height:10px;border-radius:999px; display:inline-block}
.dot--green{background: var(--green)}
.dot--blue{background: #4aa8ff}
.dot--orange{background: var(--orange)}

.provider-row{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.provider{
  color: rgba(235,245,255,.88);
  font-weight:700;
  font-size:13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* Hero preview glass card */
.hero__preview{position:relative}
.glass-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  padding:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.glass-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.glass-card__top--below{margin:30px 0 12px}
.glass-title{color:#eef6ff;font-weight:800}
.glass-sub{color:rgba(220,235,255,.80); font-size:13px; margin-top:4px}
.mini-link{color:rgba(220,235,255,.90); font-size:13px; opacity:.9}
.mini-link:hover{opacity:1}

.steps{display:grid; gap:10px; margin:16px 0 6px}
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.badge{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(31,111,230,.22);
  border: 1px solid rgba(105,185,255,.35);
  color:#eef6ff;
  font-weight:800;
}
.step__title{color:#eef6ff; font-weight:800}
.step__desc{color:rgba(220,235,255,.78); font-size:13px; margin-top:2px}

.mini-table{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding:12px;
}
.mini-table__head{
  display:flex; justify-content:space-between; align-items:center;
  color:#eef6ff; font-weight:800; margin-bottom:10px;
}
.mini-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(235,245,255,.92);
  font-size:13px;
}
.mini-foot{margin-top:10px; font-size:12px}
.muted{color: var(--muted)}
.mini-table--hero .mini-table__head{font-size:15px}
.mini-table--hero .mini-row{font-size:14px}
.mini-table--hero .mini-foot{font-size:12px}
.hero .muted,
.glass-card .muted{
  color: rgba(220,235,255,.68);
}

/* Below hero */
.below{
  position:relative;
  z-index:4;
  margin-top:-32px;
  padding: 26px 0 10px;
  background: var(--bg);
}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:0}
.about-cards{margin-top:18px}
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 35px rgba(12,25,55,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position:relative;
  overflow:hidden;
  color: #0b1324;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:4px;
  background: linear-gradient(90deg, rgba(31,111,230,.55), rgba(255,125,46,.65));
  opacity:.55;
}
.card--learn::before{
  background: linear-gradient(90deg, rgba(46,191,255,.7), rgba(31,111,230,.85));
}
.card--atlas::before{
  background: linear-gradient(90deg, rgba(120,255,220,.7), rgba(40,199,111,.85));
}
.card--blog::before{
  background: linear-gradient(90deg, rgba(255,174,76,.75), rgba(255,125,46,.9));
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 42px rgba(12,25,55,.16);
  border-color: rgba(31,111,230,.25);
  background: #fbfcff;
}
.card--learn:hover{
  box-shadow:
    0 24px 42px rgba(12,25,55,.16),
    0 10px 30px rgba(31,111,230,.20);
  border-color: rgba(46,191,255,.45);
}
.card--atlas:hover{
  box-shadow:
    0 24px 42px rgba(12,25,55,.16),
    0 10px 30px rgba(40,199,111,.20);
  border-color: rgba(40,199,111,.45);
}
.card--blog:hover{
  box-shadow:
    0 24px 42px rgba(12,25,55,.16),
    0 10px 30px rgba(255,125,46,.22);
  border-color: rgba(255,125,46,.45);
}
.card__icon{
  width:34px; height:6px;
  border-radius:999px;
  background: rgba(31,111,230,.25);
}
.card--learn .card__icon{background: rgba(46,191,255,.35)}
.card--atlas .card__icon{background: rgba(40,199,111,.35)}
.card--blog .card__icon{background: rgba(255,125,46,.45)}
.card h3{margin:10px 0 6px; font-size:18px}
.card p{margin:0; color: #3f4c66; line-height:1.5}
.card__link{display:inline-block; margin-top:12px; color: var(--blue); font-weight:700}
.card__link:hover{text-decoration:underline}

/* Newsletter */
.newsletter{padding: 36px 0 56px}
.newsletter__inner{
  background: white;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  box-shadow: 0 18px 35px rgba(12,25,55,.08);
  color: #0b1324;
}
.newsletter .muted{color: #4c5a72}
.newsletter h2{margin:0 0 6px}
.newsletter__form{display:flex; gap:10px; align-items:center}
.newsletter__form input{
  width: 280px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(20,35,70,.18);
  outline:none;
}
.newsletter__form input:focus{border-color: rgba(31,111,230,.55); box-shadow: 0 0 0 4px rgba(31,111,230,.12)}

/* Placeholder page */
.page{padding: 66px 0}
.page__header{margin-bottom:14px}
.callout{
  margin-top:18px;
  background: white;
  border:1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  color: var(--muted);
  box-shadow: 0 18px 35px rgba(12,25,55,.06);
}

/* Footer */
.footer{
  border-top: 1px solid var(--stroke);
  background: white;
  padding: 18px 0;
}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:12px;color:rgba(20,35,70,.70)}
.footer__links{display:flex; gap:14px}
.footer__links a:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .topbar__actions{display:none}
  .nav-drawer{display:block}
  .hero__inner{grid-template-columns:1fr; gap:22px}
  .hero h1{font-size:42px}
  .cards{grid-template-columns:1fr}
  .blog-grid{grid-template-columns: 1fr}
  .learn-grid{grid-template-columns: 1fr}
  .newsletter__inner{flex-direction:column; align-items:flex-start}
  .newsletter__form{width:100%}
.newsletter__form input{width:100%}
}

/* Leaderboard callout */
.leaderboard{padding: 14px 0 6px}
.leaderboard__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-radius:20px;
  background: linear-gradient(120deg, rgba(255,255,255,.9), rgba(240,246,255,.95));
  border: 1px solid rgba(20,35,70,.10);
  box-shadow: 0 20px 40px rgba(12,25,55,.08);
}
.whats-new{
  position: relative;
  z-index: 6;         /* keep it above the pulled-up cards */
  padding: 14px 0 10px; /* optional: a touch more breathing room */
}

.whats-new + .below{
  margin-top: 18px;   /* overrides the -32px pull-up when "What's new" is present */
}
.whats-new__card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-radius:20px;
  background: linear-gradient(120deg, rgba(255,255,255,.95), rgba(246,250,255,.98));
  border: 1px solid rgba(31,111,230,.18);
  box-shadow: 0 18px 35px rgba(12,25,55,.08);
  flex-wrap:wrap;
  align-items:flex-start;
}
.whats-new__eyebrow{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#4a5a77;
  font-weight:800;
  margin-bottom:6px;
}
.whats-new__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}
.whats-new__pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(31,111,230,.08);
  border: 1px solid rgba(31,111,230,.15);
  font-weight:700;
  color:#2b3a55;
  font-size:12px;
}
.whats-new__list{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.whats-new__row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.whats-new__row a{font-weight:700; color: var(--blue)}
.whats-new__row a:hover{text-decoration:underline}
.whats-new__tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.whats-new__tag{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(20,35,70,.05);
  border: 1px solid rgba(20,35,70,.12);
  font-size:12px;
  font-weight:700;
}
.whats-new__tag--muted{opacity:.7}
.whats-new__cta{
  color:#111728;
  background: rgba(17,23,40,.08);
  border-color: rgba(17,23,40,.18);
  white-space:nowrap;
}
.whats-new__cta:hover{
  background: rgba(17,23,40,.12);
}
@media (max-width: 760px){
  .whats-new__card{flex-direction:column; align-items:flex-start}
}
.atlas-leaderboard{
  margin-top:16px;
}
.atlas-leaderboard .leaderboard__card{
  background: linear-gradient(120deg, rgba(17,23,40,.96), rgba(23,36,72,.96));
  color:#eef3ff;
  border: 1px solid rgba(97,162,255,.35);
  box-shadow:
    0 20px 40px rgba(12,25,55,.18),
    0 0 0 1px rgba(97,162,255,.22) inset;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.atlas-leaderboard .leaderboard__card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 26px 50px rgba(12,25,55,.28),
    0 0 0 1px rgba(120,200,255,.40) inset;
  border-color: rgba(120,200,255,.65);
}
.atlas-leaderboard .leaderboard__card h2{
  color:#f4f7ff;
  font-size:22px;
}
.atlas-leaderboard .leaderboard__card .muted{
  color: rgba(222,234,255,.8);
}
.atlas-leaderboard .leaderboard__cta{
  background: linear-gradient(120deg, rgba(79,70,229,.18), rgba(20,184,166,.18));
  border: 1px solid rgba(120,200,255,.35);
  color:#eef3ff;
  padding:10px 14px;
  border-radius:999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.atlas-leaderboard .leaderboard__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(79,70,229,.25);
  background: linear-gradient(120deg, rgba(79,70,229,.32), rgba(20,184,166,.32));
}
.atlas-leaderboard .leaderboard__cta-badge{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.leaderboard__card h2{margin:0 0 6px}
.leaderboard__card .muted{margin:0}
@media (max-width: 720px){
  .leaderboard__card{flex-direction:column; align-items:flex-start}
}