/* ======================================================
   RESET
====================================================== */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:#0b0f17;
  color:#ffffff;
  overflow-x:hidden;
  line-height:1.6;
}

/* ======================================================
   GLOBAL BACKGROUND
====================================================== */

.bg{
  position:fixed;
  inset:0;
  background:linear-gradient(130deg,#0b0f17,#0f172a,#111827);
  background-size:300% 300%;
  animation:gradientMove 20s ease infinite;
  z-index:-3;
}

@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.blob{
  position:fixed;
  border-radius:50%;
  filter:blur(140px);
  opacity:.35;
  z-index:-2;
  animation:float 24s infinite ease-in-out;
}

.blob1{
  width:600px;
  height:600px;
  background:#ff8c00;
  top:-200px;
  left:-150px;
}

.blob2{
  width:700px;
  height:700px;
  background:#ffb300;
  bottom:-250px;
  right:-200px;
  animation-delay:6s;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-160px)}
}

/* ======================================================
   LAYOUT
====================================================== */

.container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}

section{
  padding:140px 0;
  position:relative;
}

/* ======================================================
   TYPOGRAPHY
====================================================== */

h1{
  font-size:64px;
  font-weight:900;
  line-height:1.05;
  margin-bottom:24px;
}

h2{
  font-size:44px;
  font-weight:800;
  margin-bottom:60px;
  text-align:center;
}

p{
  font-size:18px;
  opacity:.8;
}

.highlight{
  background:linear-gradient(90deg,#ff8c00,#ffb300);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ======================================================
   GLOBAL REVEAL SYSTEM
====================================================== */

.reveal{
  opacity:0;
  transform:translateY(60px) scale(.97);
  filter:blur(8px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* Optional stagger delays */
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.25s}
.reveal[data-delay="3"]{transition-delay:.4s}
.reveal[data-delay="4"]{transition-delay:.55s}
.reveal[data-delay="5"]{transition-delay:.7s}

/* ======================================================
   CTA BASE (shared)
====================================================== */

.cta{
  display:inline-block;
  padding:20px 48px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8c00,#ffb300);
  color:#000;
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  transition:.4s ease;
  box-shadow:0 25px 60px rgba(255,140,0,.4);
}

.cta:hover{
  transform:translateY(-6px) scale(1.05);
}

/* ======================================================
   PROGRESS BAR
====================================================== */

.progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,#ff8c00,#ffb300);
  z-index:9999;
}

/* ======================================================
   STICKY CTA (GLOBAL)
====================================================== */

.sticky{
  position:fixed;
  bottom:30px;
  right:30px;
  z-index:1000;
  opacity:0;
  transform:translateY(40px);
  transition:.4s ease;
}

.sticky.active{
  opacity:1;
  transform:translateY(0);
}

/* ======================================================
   RESPONSIVE GLOBAL
====================================================== */

@media(max-width:1000px){
  h1{font-size:48px}
  h2{font-size:36px}
}

@media(max-width:640px){
  h1{font-size:36px}
  h2{font-size:28px}
  section{padding:100px 0}
}