/* =========================
   AURORA CYBER INTERFACE
========================= */

:root{

  --bg:#090b12;
  --bg-soft:#121623;
  --card:#171c2b;

  --text:#ffffff;
  --muted:#98a0b3;

  --cyan:#00f0ff;
  --violet:#8b5cf6;
  --blue:#2d7cff;

  --radius:24px;
  --border:rgba(255,255,255,.08);

  --shadow:
    0 15px 40px rgba(0,0,0,.45);

  --speed:.35s ease;
}

/* =========================
   RESET
========================= */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Manrope',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right,
      rgba(0,240,255,.08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(139,92,246,.08),
      transparent 35%),

    var(--bg);

  overflow-x:hidden;
  line-height:1.7;
}

/* =========================
   GLOBAL
========================= */

.container-aurora{
  width:min(1200px,92%);
  margin:auto;
}

.section-space{
  padding:90px 0;
}

/* =========================
   HEADER
========================= */

.aurora-header{
  width:100%;
  position:sticky;
  top:0;
  z-index:999;

  backdrop-filter:blur(18px);

  background:rgba(10,12,18,.72);

  border-bottom:1px solid var(--border);
}

.aurora-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:22px 0;
}

.aurora-logo{
  font-size:32px;
  font-weight:900;
  letter-spacing:.5px;

  background:linear-gradient(
    90deg,
    var(--cyan),
    var(--violet)
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.aurora-links{
  display:flex;
  gap:32px;
}

.aurora-links a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  transition:var(--speed);
  position:relative;
}

.aurora-links a:hover{
  color:#fff;
}

.aurora-links a::after{
  content:'';
  position:absolute;

  left:0;
  bottom:-8px;

  width:0%;
  height:2px;

  border-radius:50px;

  background:linear-gradient(
    90deg,
    var(--cyan),
    var(--violet)
  );

  transition:var(--speed);
}

.aurora-links a:hover::after{
  width:100%;
}

/* =========================
   HERO
========================= */

.aurora-hero{
  min-height:100vh;

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

  text-align:center;
  position:relative;
}

.aurora-hero::before{
  content:'';
  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
    radial-gradient(circle,
      rgba(0,240,255,.14),
      transparent 70%);

  filter:blur(40px);

  z-index:-1;
}

.aurora-content{
  max-width:920px;
}

.aurora-content h1{
  font-size:78px;
  line-height:1.05;
  font-weight:900;

  margin-bottom:25px;
}

.aurora-content h1 span{
  background:linear-gradient(
    90deg,
    var(--cyan),
    var(--violet)
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.aurora-content p{
  color:var(--muted);
  font-size:19px;

  margin-bottom:42px;
}

/* =========================
   BUTTONS
========================= */

.aurora-actions{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.aurora-btn{
  padding:17px 38px;
  border-radius:999px;

  text-decoration:none;
  font-weight:700;

  transition:var(--speed);
}

.aurora-btn-primary{
  color:#fff;

  background:linear-gradient(
    135deg,
    var(--cyan),
    var(--violet)
  );

  box-shadow:
    0 10px 35px rgba(0,240,255,.18);
}

.aurora-btn-outline{
  color:#fff;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.03);

  backdrop-filter:blur(12px);
}

.aurora-btn:hover{
  transform:
    translateY(-5px)
    scale(1.03);
}

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

.aurora-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

  gap:28px;
}

.aurora-card{
  position:relative;

  padding:36px;

  border-radius:var(--radius);

  overflow:hidden;

  border:1px solid var(--border);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );

  backdrop-filter:blur(16px);

  transition:var(--speed);
}

.aurora-card::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.08),
      transparent
    );

  transform:translateX(-120%);
  transition:.9s;
}

.aurora-card:hover::before{
  transform:translateX(120%);
}

.aurora-card:hover{
  transform:translateY(-12px);

  box-shadow:var(--shadow);

  border-color:
    rgba(255,255,255,.18);
}

.aurora-card h3{
  font-size:25px;
  margin-bottom:16px;
}

.aurora-card p{
  color:var(--muted);
}

/* =========================
   INFO BAR
========================= */

.aurora-info{
  margin-top:80px;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:22px;
}

.aurora-box{
  text-align:center;

  padding:34px;

  border-radius:20px;

  background:
    rgba(255,255,255,.03);

  border:1px solid var(--border);
}

.aurora-box h2{
  font-size:46px;
  margin-bottom:10px;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--violet)
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.aurora-box span{
  color:var(--muted);
}

/* =========================
   FOOTER
========================= */

.aurora-footer{
  margin-top:90px;

  border-top:
    1px solid var(--border);

  background:
    rgba(255,255,255,.02);

  padding:35px 20px;

  text-align:center;

  color:var(--muted);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:920px){

  .aurora-content h1{
    font-size:52px;
  }

  .aurora-nav{
    flex-direction:column;
    gap:20px;
  }

  .aurora-links{
    flex-wrap:wrap;
    justify-content:center;
  }

}

@media(max-width:640px){

  .aurora-content h1{
    font-size:40px;
  }

  .aurora-content p{
    font-size:16px;
  }

  .aurora-btn{
    width:100%;
    text-align:center;
  }

  .section-space{
    padding:70px 0;
  }

}