/* ─────────── RESET / GLOBAL ───────────────────────────────────────── */
body{
  margin:0;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#03091c;          /* navy backdrop */
  color:#fff;
  overflow-x:hidden;
}

/* ─────────── NAV BAR ─────────────────────────────────────────────── */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 3rem;
  position:relative;
  z-index:10;                  /* keep it above the gradient band */
  opacity:0;
  transform:translateY(-20px);
  animation:fadeInDown 1s forwards;
}

.logo img{width:170px;height:auto;opacity:.9;}

.nav-links a{
  margin:0 1rem;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  position:relative;
  transition:color .3s ease;
}
.nav-links a::after{
  content:'';
  position:absolute;
  width:0;height:2px;
  background:#4db8ff;
  bottom:-4px;left:0;
  transition:width .3s;
}
.nav-links a:hover::after{width:100%;}

/* ─────────── HERO ────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding:1rem 3rem 1rem;      /* generous space above band */
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  opacity:0;
  transform:translateY(20px);
  z-index:1;
}

.hero-text{
  max-width:550px;
  position:relative;
  top:-10px;                   /* fine-tune vertical feel */
}

.hero-text h1{
  font-size:3rem;
  margin:0;
}
.hero-text h1 span{color:#4db8ff;}

.hero-text p{
  margin:1rem 0 2rem;
  color:#cbd5e1;
  line-height:1.6;
}

.btn{
  background:#000;
  color:#fff;
  padding:.8rem 1.5rem;
  border-radius:50px;
  font-weight:bold;
  font-size:1rem;
  border:none;
  cursor:pointer;
  transition:all .3s;
}
.btn:hover{
  background:#4db8ff;
  color:#000;
  transform:scale(1.05);
}

/* decorative blurred sphere */
.bg-sphere{
  position:absolute;
  bottom:-50px;left:-50px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* ─────────── GRADIENT BAND (new) ─────────────────────────────────── */
/* ─────────── GRADIENT BAND (clean fade) ─────────────────────── */
.gradient-band{
  width:100%;
  height:230px;                       /* desktop height          */
  background:linear-gradient(
        to right,
        #ff5edb 0%,
        #867eff 50%,
        #00d4ff 100%
  );
  position:relative;
  z-index:0;                          /* sits behind the nav */
  overflow:hidden;                    /* clip the pseudo-fades */
}

/* 24-px vertical fade at the TOP */
.gradient-band::before,
.gradient-band::after{
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:150px;                        /* thickness of the fade   */
  background:linear-gradient(
       to bottom,
       #03091c 0%,                   /* same as body background */
       rgba(3,9,28,0) 100%           /* fully transparent       */
  );
  pointer-events:none;
}

/* flip the gradient for the BOTTOM edge */
.gradient-band::after{
  bottom:0;
  transform:scaleY(-1);
}

@media(max-width:600px){
  .gradient-band{height:140px;}       /* shallower bar on phones */
}


@media(max-width:600px){
  .gradient-band{height:140px;}               /* shallower on phones */
  .hero{padding:4rem 1.5rem 3rem;text-align:center;}
}

/* ─────────── FADE-IN KEYFRAMES ───────────────────────────────────── */
@keyframes fadeInDown{to{opacity:1;transform:translateY(0);}}
.trusted, .how-it-works, .why-rasria, .use-cases {
  padding: 4rem 2rem;
  text-align: center;
  background-color: #050d25;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.trusted.visible, .how-it-works.visible, .why-rasria.visible, .use-cases.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero.visible,
.rocket.visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s ease;
}

.trusted h2, .how-it-works h2, .why-rasria h2, .use-cases h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.logos, .steps, .cases {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.step, .case, .why-rasria ul li {
  background: #111827;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  margin: 0.5rem;
  transition: transform 0.3s ease, background 0.3s;
}

.step:hover, .case:hover {
  transform: translateY(-5px);
  background: #1f2937;
}

.why-rasria ul {
  list-style: none;
  padding: 0;
}

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rocket {
    position: static;
    width: 220px;
    margin-top: 2rem;
  }

  .bg-sphere {
    display: none;
  }

  .logos, .steps, .cases {
    flex-direction: column;
    align-items: center;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}