/* Base */
:root{
  --bg: #0b1020;
  --white: #fff;
  --muted: rgba(255,255,255,.85);
  --muted-2: rgba(255,255,255,.8);
  --shadow: 0 10px 40px rgba(0,0,0,.25);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--white);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
.container{
  width:100%;
  max-width: 64rem; /* ~max-w-4xl */
  margin: 0 auto;
  padding: 0 1.5rem;
}

footer a:hover {
    text-decoration: underline;
}
.narrow{ max-width: 48rem; }
.center{ text-align:center }
.mb-32{ margin-bottom:2rem }

/* Hero */
.hero{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding: 0 1.5rem;
}
.title{
  font-size: clamp(2.6rem, 8vw, 4.5rem); /* text-5xl md:text-7xl */
  font-weight: 800;
  margin: 0 0 .75rem;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.subtitle{
  font-size: clamp(1.1rem, 3vw, 1.5rem); /* text-xl md:text-2xl */
  margin: 0 0 .25rem;
  color: var(--muted);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.subtitle-2{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0 0 2rem;
  color: var(--muted-2);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.chevron{
  position:absolute;
  bottom: 2rem;
  animation: bounce 1.5s infinite;
  opacity:.95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(6px) }
}

/* Animated gradient background (as in screenshot) */
.gradient-animated{
  background: radial-gradient(1000px 700px at 25% -10%, rgba(135, 206, 250, 0.40), transparent 60%),
              radial-gradient(900px 600px at 110% 20%, rgba(255, 102, 244, 0.35), transparent 60%),
              linear-gradient(135deg, #5b8df7, #b059ff 35%, #ff5fcb 70%);
  background-size: 160% 160%;
  animation: gradientShift 5s ease-in-out infinite alternate;
}
@keyframes gradientShift{
  0%{ background-position: 0% 50%, 100% 50%, 0% 50% }
  100%{ background-position: 100% 50%, 0% 50%, 100% 50% }
}

/* Sections */
.section{ padding: 5rem 1.5rem }
.muted-bg{ background: rgba(255,255,255,.08) }
.h2{
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 1rem;
  color:#fcfbf8;
}
.lead{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .9rem 1.5rem;
  border-radius: .6rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px) }
.with-icon .icon{ display:block }

.gradient-primary{
  background-image: linear-gradient(90deg, #7c3aed, #2563eb);
  color:#fff;
}
.gradient-primary:hover{ opacity:.95; box-shadow:0 12px 34px rgba(124,58,237,.35) }

/* Footer */
.footer{
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}

/* Simple fade-in */
.fade-in{ opacity:0; transform: translateY(10px); transition: all .6s ease }
.fade-in.in{ opacity:1; transform:none }
.fade-in-delay{ opacity:0; transform: translateY(10px); transition: all .6s ease .2s }
.fade-in-delay.in{ opacity:1; transform:none }