/* =========================================
   ROOT + GLOBAL RESET
========================================= */
:root {
  --accent:#2f80ed;
  --accent2:#56ccf2;
  --dark:#111;
  --light:#fff;
  --gray:#f4f4f4;
  --hero-glow:rgba(255,255,255,0.08);
  --hero-bg1:#0d0d0d;
  --hero-bg2:#101820;
  --hero-bg3:#1e3c72;
}

html { scroll-behavior:smooth; scroll-padding-top:100px; }
body {
  margin:0;
  font-family:"Inter",sans-serif;
  background:var(--light);
  color:var(--dark);
}
h1,h2,h3 { margin:0; }
a { color:inherit; text-decoration:none !important; }

/* =========================================
   FLOATING NAV
========================================= */
.masthead {
  position:fixed; top:22px; left:0; right:0;
  max-width:1100px; margin:auto;
  z-index:999; display:flex; flex-direction:column;
  align-items:center; padding-bottom:40px;
}

.masthead .brand {
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12);
  position:relative; top:-10px; z-index:2;
}
.masthead .brand img { width:48px; height:48px; border-radius:50%; }

.masthead .nav-pill {
  display:flex; align-items:center; justify-content:center;
  gap:1.6rem; padding:.8rem 1.6rem;
  min-width:min(92vw,1000px);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin-top:-12px;
}

.nav-pill a { font-weight:600; transition:color .25s; }
.nav-pill a:hover { color:var(--accent); }

.masthead .hamburger {
  position:absolute; top:10px; right:14px;
  width:46px; height:46px; border-radius:12px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);
  display:none; align-items:center; justify-content:center;
  font-size:22px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  z-index:3;
}

#nav-drawer {
  display:none;
  position:fixed; top:86px; right:12px;
  background:#fff; padding:.8rem 1rem;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  z-index:998;
}
#nav-drawer a { display:block; padding:.6rem .4rem; font-weight:600; }
#nav-drawer a:hover { color:var(--accent); }

@media(max-width:768px){
  .masthead .nav-pill { display:none; }
  .masthead .hamburger { display:flex; }
}

/* =========================================
   CINEMATIC HERO
========================================= */
header {
  height:100vh;
  background:linear-gradient(135deg,var(--hero-bg1),var(--hero-bg2),var(--hero-bg3));
  background-size:200% 200%;
  animation:heroGradient 12s ease-in-out infinite;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:2rem; padding-top:180px;
  overflow:hidden; position:relative;
}

header::after {
  content:""; position:absolute;
  width:600px; height:600px;
  background:radial-gradient(circle,var(--hero-glow),transparent 70%);
  filter:blur(60px);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:.6;
  animation:heroGlow 8s ease-in-out infinite;
}

header::before {
  content:""; position:absolute; top:0; left:-150%;
  width:200%; height:100%;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.10) 50%,transparent 70%);
  animation:shine 8s linear infinite;
}

@keyframes heroGradient {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
@keyframes heroGlow {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.55; }
  50% { transform:translate(-48%,-52%) scale(1.15); opacity:.75; }
}
@keyframes shine {
  0% { left:-150%; }
  60%,100% { left:150%; }
}

/* HERO CONTENT */
header .hero-content {
  max-width:700px; opacity:0;
  animation:fadeUp 1s ease-out forwards;
  z-index:2;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}

header h1 {
  font-size:2.9rem;
  margin-bottom:1rem;
  animation:breath 6s ease-in-out infinite;
}
@keyframes breath {
  0%,100% { letter-spacing:0; }
  50% { letter-spacing:1.2px; }
}

header p {
  max-width:650px;
  opacity:.85; margin:auto;
  line-height:1.6;
  animation:fadeUp 1.4s ease-out forwards;
}

/* CTA ROW */
.cta-row {
  display:flex; justify-content:center; align-items:center;
  gap:1rem; margin-top:2.2rem;
  flex-wrap:wrap; width:100%;
  animation:fadeUp 1.8s ease-out forwards;
  opacity:0;
}

/* CTA BUTTONS */
.cta {
  padding:1rem 2.2rem; border-radius:50px;
  font-weight:600; transition:.3s;
  white-space:nowrap;
}

.primary-cta {
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  color:#fff;
}
.primary-cta:hover {
  transform:scale(1.05);
  box-shadow:0 8px 22px rgba(47,128,237,.4);
}

.secondary-cta {
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(6px);
  color:#fff;
}
.secondary-cta:hover {
  transform:scale(1.05);
  box-shadow:0 8px 20px rgba(255,255,255,.25);
}

header .credibility {
  margin-top:1.3rem;
  font-size:.95rem;
  color:#eaeaea;
  animation:fadeUp 2.2s ease-out forwards;
  opacity:0;
}

/* MOBILE HERO */
@media(max-width:600px){
  header h1 { font-size:2.2rem; }
  .cta-row { flex-direction:column; gap:.8rem; }
  .cta { width:100%; max-width:320px; text-align:center; }
}

/* =========================================
   SECTIONS + FEATURES
========================================= */
section {
  padding:6rem 2rem;
  max-width:1100px; margin:auto;
  opacity:0; transform:translateY(40px);
  transition:.8s ease-out;
}
.visible { opacity:1; transform:translateY(0); }

h2 { text-align:center; font-size:2rem; margin-bottom:2.5rem; }

.features {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.feature {
  padding:2rem; border-radius:1rem;
  background:var(--gray);
  text-align:center;
  transition:.3s;
}
.feature:hover {
  transform:translateY(-6px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.feature img { width:30px; height:30px; margin-bottom:1rem; }

/* PRODUCT CARDS */
.product-card {
  background:var(--gray);
  padding:2rem;
  border-radius:1rem;
  text-align:center;
  transition:.25s;
}

/* =========================================
   FEATURED SKY + FLAME SECTION
========================================= */
#featured {
  color:#fff;
  text-align:center;
  padding:8rem 2rem;
  position:relative;
  overflow:hidden;
}

.sky-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#0f2749,#233b7a,#6b8cce);
  background-size:400% 400%;
  animation:skyShift 25s ease infinite;
}
@keyframes skyShift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

.flame {
  position:absolute; bottom:-40px; left:50%;
  transform:translateX(-50%);
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(255,160,40,.4),rgba(255,80,0,.15),transparent 70%);
  mix-blend-mode:screen;
  filter:blur(40px);
  animation:flameFlicker 2.8s ease-in-out infinite alternate,
           flameDrift 12s linear infinite;
}
@keyframes flameFlicker {
  0%,100% { opacity:.4; transform:translateX(-50%) scale(.95); }
  50% { opacity:.55; transform:translateX(-50%) scale(1.05); }
}
@keyframes flameDrift {
  0%,100% { background-position:50% 40%; }
  25% { background-position:52% 35%; }
  50% { background-position:48% 45%; }
  75% { background-position:51% 38%; }
}

.featured-content { position:relative; z-index:2; max-width:650px; margin:auto; }
.featured-content p { color:#e8e8e8; }
.featured-content a {
  margin-top:1.5rem; display:inline-block;
  padding:1rem 2rem;
  background:linear-gradient(45deg,#ff6600,#ffaa33);
  border-radius:50px;
  color:#fff; font-weight:600;
  transition:.3s;
}
.featured-content a:hover { transform:scale(1.05); }

/* =========================================
   TESTIMONIALS / WAITLIST
========================================= */
.testimonials {
  background:#f7f9fc; text-align:center;
  padding:5rem 2rem;
}
.quote {
  max-width:700px; margin:auto;
  padding:1.5rem 2rem;
  border-radius:1rem;
  background:#fff;
  font-style:italic;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.author { margin-top:.5rem; font-weight:600; color:var(--accent); }

.waitlist {
  text-align:center;
  padding:6rem 2rem;
  background:#f9fafc;
}
.waitlist p { color:#444; }
.waitlist-form { max-width:600px; margin:auto; border-radius:10px; overflow:hidden; }

/* =========================================
   FOOTER
========================================= */
footer {
  max-width:1100px; margin:auto;
  text-align:center;
  padding:5rem 2rem;
  background:linear-gradient(135deg,#0d0d0d,#101820,#1e3c72);
  border-radius:12px 12px 0 0;
  color:#eee; font-size:.9rem;
}
footer a { color:var(--accent2); font-weight:500; }

/* =========================================
   MOBILE CTA FIX
========================================= */
@media(max-width:600px){
  .cta-row { flex-direction:column; }
  .cta { width:100%; max-width:320px; }
}