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

:root{

  --bg:#f7fbff;
  --card:rgba(255,255,255,.72);

  --white:#ffffff;

  --text:#000000;
  --muted:rgba(9,22,47,.66);

  --blue:#6aa8ff;
  --blue2:#2f6dff;
  --ice:#edf6ff;
  --cyan:#7ee7ff;

  --border:rgba(9,22,47,.08);

  --ff:'Alegreya', serif;
  --fb:'Space Grotesk', sans-serif;
}

/* RESET */
.logo {
    width: 130px;
    height: 80px;
}

html,
body{
  width:100%;

  overflow:hidden;
  overflow-x:hidden;

  background:var(--bg);
}

body{
  font-family:var(--fb);
  color:var(--text);

  background:#f7fbff;
}

/* NOISE */

.noise{
  position:fixed;
  inset:0;

  background-image:url("https://grainy-gradients.vercel.app/noise.svg");

  opacity:.04;

  pointer-events:none;

  z-index:999;
}

/* HERO */

.hero{
  position:relative;

  width:100%;
  min-height:100vh;

  overflow:hidden;
  isolation:isolate;

  display:flex;
  flex-direction:column;
}

/* BACKGROUND */

.gradient{
  position:absolute;
  inset:0;

  background:

    radial-gradient(
      circle at 10% 20%,
      rgba(106,168,255,.18),
      transparent 28%
    ),

    radial-gradient(
      circle at 85% 15%,
      rgba(127,231,255,.16),
      transparent 24%
    ),

    radial-gradient(
      circle at 50% 90%,
      rgba(62,125,255,.14),
      transparent 34%
    ),

    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f7fbff 45%,
      #eef6ff 100%
    );

  z-index:0;
}

/* GRID */

.hero::before{
  content:'';

  position:absolute;
  inset:0;

  background-image:

    linear-gradient(
      rgba(10,16,32,.04) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(10,16,32,.04) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    radial-gradient(circle at center, black 30%, transparent 90%);

  opacity:.55;

  z-index:1;
}

/* ORBS */

.orb{
  position:absolute;

  border-radius:50%;

  filter:blur(110px);

  opacity:.5;

  animation:float 14s ease-in-out infinite;
}

.orb-1{
  width:320px;
  height:320px;

  background:#b8d8ff;

  top:-120px;
  left:-80px;
}

.orb-2{
  width:280px;
  height:280px;

  background:#c8f5ff;

  right:-80px;
  top:18%;
}

.orb-3{
  width:420px;
  height:420px;

  background:#d7e7ff;

  bottom:-180px;
  left:35%;
}

@keyframes float{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-24px);
  }
}

/* LIGHT BEAMS */

.light-beam{
  position:absolute;

  width:600px;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.8),
      transparent
    );

  top:22%;
  left:-20%;

  transform:rotate(-12deg);

  opacity:.22;

  filter:blur(.5px);

  animation:beamMove 8s ease-in-out infinite;

  z-index:2;
}

.light-beam.beam-2{
  top:68%;
  left:40%;

  width:420px;

  transform:rotate(14deg);

  animation-delay:2s;
}

@keyframes beamMove{

  0%,100%{
    opacity:.08;
    transform:translateX(0px) rotate(-12deg);
  }

  50%{
    opacity:.26;
    transform:translateX(40px) rotate(-12deg);
  }
}

/* PARTICLES */

.particles span{
  position:absolute;

  width:6px;
  height:6px;

  border-radius:50%;

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

  box-shadow:
    0 0 12px rgba(106,168,255,.8);

  animation:particleFloat linear infinite;
}

.particles span:nth-child(1){
  top:12%;
  left:18%;
  animation-duration:9s;
}

.particles span:nth-child(2){
  top:28%;
  right:22%;
  animation-duration:13s;
}

.particles span:nth-child(3){
  bottom:18%;
  left:34%;
  animation-duration:11s;
}

.particles span:nth-child(4){
  top:58%;
  right:12%;
  animation-duration:15s;
}

.particles span:nth-child(5){
  top:78%;
  left:68%;
  animation-duration:12s;
}

.particles span:nth-child(6){
  top:42%;
  left:82%;
  animation-duration:14s;
}

@keyframes particleFloat{

  0%{
    transform:translateY(0px);
    opacity:.2;
  }

  50%{
    transform:translateY(-18px);
    opacity:1;
  }

  100%{
    transform:translateY(0px);
    opacity:.2;
  }
}

/* NAV */

.nav{
  position:relative;
  z-index:5;

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

  padding:28px 42px;
}

.logo{
  font-family:var(--ff);
  font-size:28px;
  font-weight:800;

  letter-spacing:-.04em;

  color:var(--text);
}

.logo span{
  color:var(--blue2);
}

.status{
  padding:10px 18px;

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

  border-radius:999px;

  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;

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

  color:rgba(10,16,32,.65);

  backdrop-filter:blur(10px);
}

/* CONTENT */

.hero-content{
  position:relative;
  z-index:5;

  max-width:720px;

  padding:40px 42px;

  margin-top:auto;
  margin-bottom:auto;
}

.eyebrow{
  font-size:11px;

  letter-spacing:.24em;
  text-transform:uppercase;

  color:rgba(10,16,32,.45);

  margin-bottom:24px;
}

/* HEADINGS */

h1{
  font-family:var(--ff);

  font-size:clamp(58px, 7vw, 100px);

  line-height:.80;
  letter-spacing:-.08em;

  margin-bottom:10px;

  color:var(--text);

  text-shadow:
    0 0 24px rgba(106,168,255,.12);
}

h2{
  font-size:clamp(24px, 2.5vw, 42px);

  font-weight:600;

  color:var(--blue2);

  margin-bottom:22px;

  letter-spacing:-.04em;
}

/* DESCRIPTION */

.desc-wrap{
  position:relative;

  display:inline-block;
}

.desc-wrap::before{
  content:'';

  position:absolute;

  inset:-16px -18px;

  background:
    linear-gradient(
      to bottom right,
      rgba(255,255,255,.82),
      rgba(255,255,255,.58)
    );

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

  border-radius:28px;

  backdrop-filter:blur(14px);

  box-shadow:
    0 10px 40px rgba(80,120,200,.08);

  z-index:-1;
}

.desc{
  max-width:560px;

  font-size:12px;
  line-height:1.7;

  color:rgba(10,16,32,.74);

  font-weight:500;

  margin-bottom:26px;
}

/* TAGS */

.tags{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-bottom:28px;
}

.tag{
  padding:10px 16px;

  border-radius:999px;

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

  border:1px solid rgba(10,16,32,.06);

  font-size:12px;

  color:#111827;

  backdrop-filter:blur(12px);
}

/* BUTTONS */

.buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  text-decoration:none;

  padding:14px 26px;

  border-radius:999px;

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

  letter-spacing:.14em;
  text-transform:uppercase;

  transition:.28s ease;
}

.primary{
  background:var(--blue2);
  color:white;
}

.primary:hover{
  transform:translateY(-3px);

  background:#2468ff;

  box-shadow:
    0 18px 40px rgba(62,125,255,.22);
}

.secondary{
  border:1px solid rgba(10,16,32,.08);

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

  color:#111827;
}

.secondary:hover{
  background:rgba(255,255,255,.95);
}

/* FLOATING STACK */

.floating-stack{
  position:absolute;

  right:5%;
  top:50%;

  transform:translateY(-50%) scale(.9);

  z-index:4;

  display:flex;
  flex-direction:column;
  gap:14px;
}

.float-card{
  width:270px;

  padding:18px 20px;

  border-radius:22px;

  background:
    linear-gradient(
      to bottom right,
      rgba(255,255,255,.92),
      rgba(255,255,255,.72)
    );

  border:1px solid rgba(10,16,32,.06);

  backdrop-filter:blur(20px);

  box-shadow:
    0 10px 40px rgba(50,80,120,.08);

  font-size:14px;
  font-weight:500;

  color:#111827;

  transition:.35s ease;

  animation:cardFloat 5s ease-in-out infinite;
}

.float-card:nth-child(2){
  animation-delay:.8s;
}

.float-card:nth-child(3){
  animation-delay:1.6s;
}

.float-card:nth-child(4){
  animation-delay:2.4s;
}

.float-card:nth-child(5){
  animation-delay:3.2s;
}

.float-card span{
  color:var(--blue2);

  margin-right:10px;
}

.float-card:hover{
  transform:
    translateY(-8px)
    scale(1.02);

  border-color:rgba(62,125,255,.2);

  background:rgba(255,255,255,.95);
}

@keyframes cardFloat{

  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }
}

/* FOOTER */

.bottom-bar{
  position:relative;
  z-index:5;

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

  padding:20px 42px;

  border-top:1px solid rgba(10,16,32,.06);

  color:rgba(10,16,32,.38);

  font-size:10px;

  letter-spacing:.16em;
  text-transform:uppercase;
}

/* MOBILE */

@media (max-width:1100px){

  .floating-stack{
    opacity:.3;

    right:-100px;

    transform:
      translateY(-50%)
      scale(.8);
  }
}

@media (max-width:768px){

  body{
    overflow:auto;
  }

  .floating-stack{
    display:none;
  }

  .nav{
    padding:24px;
  }

  .hero-content{
    padding:40px 24px 60px;
  }

  .bottom-bar{
    padding:20px 24px;

    flex-direction:column;
    gap:10px;

    align-items:flex-start;
  }

  h1{
    font-size:64px;
  }

  h2{
    font-size:30px;
  }

  .desc{
    font-size:14px;
  }
}