/* === ÜLDINE === */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  font-family:"Outfit",sans-serif;
  background:#071525;
  color:#f8f9fa;
  overflow-x:hidden;
  scroll-behavior:smooth
}
a{text-decoration:none}

/* === HERO === */
.hero{
  position:relative;width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1
}
.hero__gradient{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 600px at 20% 20%,rgba(0,200,255,.28),transparent 60%),
    radial-gradient(900px 500px at 80% 30%,rgba(255,215,0,.20),transparent 70%),
    linear-gradient(180deg,rgba(7,21,37,0)0%,rgba(7,21,37,.5)55%,rgba(7,21,37,.88)100%);
  z-index:2;pointer-events:none
}
.hero__overlay{position:relative;z-index:3;max-width:900px;padding:0 20px}

/* --- vertikaalne kasv animatsioon --- */
.growY{opacity:0;transform:scaleY(.7);transform-origin:bottom;
  animation:growY .7s cubic-bezier(.2,.7,.2,1) forwards}
.growY.delay-1{animation-delay:.25s}.growY.delay-2{animation-delay:.5s}
@keyframes growY{0%{opacity:0;transform:scaleY(.7)}100%{opacity:1;transform:scaleY(1)}}

.hero h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:800;color:#fff;margin-bottom:14px}
.hero p{font-size:clamp(1.05rem,2.2vw,1.3rem);color:#e6f7ff;margin-bottom:28px}

/* --- CTA kollane --- */
.btn-cta-yellow{
  display:inline-block;background:#f4ed9a;color:#111;font-weight:800;
  padding:14px 34px;border:3px solid #000;border-radius:12px;
  box-shadow:6px 6px 0 #0003;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease
}
.btn-cta-yellow:hover{transform:translateY(-2px)scale(1.03);
  box-shadow:8px 8px 0 #0003;background:#f0e77d}

/* === INTRO === */
.intro{
  background:linear-gradient(180deg,#0a233f 0%,#1b3c6b 100%);
  text-align:center;padding:100px 20px 130px;position:relative
}
.intro::after{
  content:"";position:absolute;left:0;bottom:0;height:160px;
  background:linear-gradient(180deg,rgba(27,60,107,1)0%,#071525 100%);
  z-index:1
}
.intro h2{font-size:clamp(1.4rem,2.8vw,2rem);color:#fff;margin-bottom:18px}
.intro p{color:#cfeafb;font-size:clamp(1rem,2.1vw,1.15rem);
  line-height:1.7;max-width:760px;margin:0 auto}

/* === FEATURES === */
.features{
  background:linear-gradient(180deg,#071525 0%,#000c18 100%);
  text-align:center;padding:100px 20px;position:relative;z-index:2
}
.white-title{font-size:clamp(1.5rem,3vw,2.2rem);color:#fff;margin-bottom:44px}
.feature-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:34px;max-width:1100px;margin:0 auto
}
.feature{
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.12);
  border-radius:16px;padding:26px 22px;
  backdrop-filter:blur(6px);
  transition:all .25s ease
}
.feature:hover{
  transform:translateY(-6px)scale(1.05);
  border-color:#f4ed9a;box-shadow:0 10px 28px rgba(0,0,0,.25)
}
.feature h4{color:#f4ed9a;font-size:1.3rem;margin-bottom:10px}
.feature p{color:#d8f1ff;font-size:1.03rem;line-height:1.6}

/* === FOOTER === */
footer{
  background:#07111d;text-align:center;padding:36px 15px;
  font-size:.95rem;color:#a9d6f7
}
footer a{color:#7fd4ff}footer a:hover{text-decoration:underline}

/* SCROLL-REVEAL */
.fade-in-up{opacity:0;transform:translateY(24px);transition:.6s ease}
.fade-in-up.visible{opacity:1;transform:translateY(0)}

/* --- CTA nupud kõrvuti --- */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

/* --- Pro versiooni nupp --- */
.btn-cta-outline {
  display:inline-block;
  background:transparent;
  color:#fff;
  font-weight:700;
  padding:14px 34px;
  border:3px solid #f4ed9a;
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-cta-outline:hover {
  background:#f4ed9a;
  color:#111;
  transform:translateY(-2px) scale(1.03);
  box-shadow:6px 6px 0 rgba(0,0,0,0.3);
}