:root{
  --c1:#1a2a6c;
  --c2:#b21f1f;
  --c3:#fdbb2d;
  --btn1:#00c6ff;
  --btn2:#0072ff;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  overflow-x:hidden;
}

/* Animated gradient background */
.bg-animated{
  position:fixed;
  inset:0;
  background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3));
  background-size:400% 400%;
  animation: gradientMove 14s ease infinite;
  z-index:-2;
}

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

/* Floating shapes */
.bg-shape{
  position:absolute;
  border-radius:50%;
  opacity:.18;
  filter: blur(20px);
  animation: floaty 10s ease-in-out infinite;
}
.bg-shape.s1{ width:260px; height:260px; left:8%; top:12%; background:#00c6ff; }
.bg-shape.s2{ width:360px; height:360px; right:10%; bottom:10%; background:#ff0080; animation-delay:2s; }
.bg-shape.s3{ width:180px; height:180px; right:28%; top:25%; background:#fff176; animation-delay:4s; }

@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0) }
  50%{ transform:translateY(-25px) rotate(12deg) }
}

/* Hero */
.hero{
  min-height:100dvh;
  display:grid;
  place-items:center;
}

.logo{
  font-weight:800;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  color:rosybrown;
  text-shadow:0 6px 30px rgba(0,0,0,.25);
  animation:pulse 2.2s infinite;
}

@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

.headline{
  font-size:clamp(2.2rem, 6vw, 3.5rem);
  margin:.2rem 0 .4rem;
  text-shadow:0 12px 40px rgba(0,0,0,.35);
}

.tagline{
  font-size:clamp(1rem, 2.2vw, 1.2rem);
  opacity:.95;
  max-width:780px;
  margin:0 auto 1rem;
}

.countdown{
  font-weight:600;
  font-size:clamp(1.1rem, 3vw, 1.6rem);
  margin: .6rem 0 1.2rem;
}

/* Subscribe */
.subscribe input.form-control{
  border-radius:30px;
  padding:.9rem 1.1rem;
  border:none;
  outline:none;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}

.btn-gradient{
  border:none;
  border-radius:30px;
  padding:.9rem 1.4rem;
  background:linear-gradient(45deg, var(--btn1), var(--btn2));
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(0, 114, 255, .35);
  transition: transform .2s ease, filter .2s ease;
}
.btn-gradient:hover{ transform: translateY(-2px) scale(1.03); filter:brightness(1.1); }
.company-name {
    font-family: Georgia;
    font-size: 120px;
    font-weight: 700;
    background: linear-gradient(90deg, #ff6a00, #ee0979, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 20px;
    animation: glow 2s infinite alternate ease-in-out;
}

@@keyframes glow {
    from {
        text-shadow: 0 0 10px rgba(255, 106, 0, 0.6), 0 0 20px rgba(238, 9, 121, 0.6);
    }

    to {
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.9), 0 0 40px rgba(238, 9, 121, 0.9);
    }
}

.tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: black;
    text-align: center;
    margin-bottom: 30px;
    animation: fadeUp 1.5s ease-in-out;
}

@@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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