/* old background + modern card */
:root{
  --bg-1:#0f1115;
  --bg-2:#12141a;
  --brand:#F2A533;
  --brand-2:#FFCF66;
  --text:#f6f7f9;
  --muted:#b9c0cf;
  --stroke:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background: linear-gradient(120deg,var(--bg-1),var(--bg-2));
  font-family:'Poppins',system-ui,Segoe UI,Arial,sans-serif;
  overflow-x:hidden;
}

/* Background from v1 */
.bg-gradient{
  position:fixed; inset:-10% -10% auto -10%; height:65vh;
  background: radial-gradient(1000px 600px at 20% -10%, rgba(255, 192, 92, .35), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(255, 160, 50, .25), transparent 60%);
  filter: blur(30px); pointer-events:none; z-index:0;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  opacity:.12; mix-blend-mode:soft-light;
}

.container{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; padding:64px 24px; }

.hero{
  width:min(920px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--stroke);
  border-radius:28px;
  padding:48px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* Animated solar glow */
.sun-glow{
  position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 197, 92, .25), rgba(255, 164, 56, .10) 40%, transparent 70%);
  filter: blur(8px);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.85 } 50%{ transform:translateX(-50%) scale(1.04); opacity:1 } }

/* LOGO ANIMATION */
.logo-wrap{
  position:relative;
  display:inline-block;
  margin: 4px auto 12px;
  perspective:800px; /* for subtle 3D tilt */
}
.logo{
  width:min(380px,75vw); height:auto; display:block;
  filter: drop-shadow(0 10px 26px rgba(242,165,51,.35));
  animation: floatY 6.5s ease-in-out infinite, glowPulse 4.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
/* Shine sweep overlay */
.logo-wrap::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%) skewX(-12deg);
  filter: blur(1px);
  animation: shine 5.5s ease-in-out infinite 1.2s;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes shine{ 0%{ transform: translateX(-120%) skewX(-12deg);} 60%{ transform: translateX(120%) skewX(-12deg);} 100%{ transform: translateX(120%) skewX(-12deg);} }
@keyframes floatY{ 0%,100%{ transform: translateY(0px) } 50%{ transform: translateY(-10px) } }
@keyframes glowPulse{ 0%,100%{ filter: drop-shadow(0 8px 22px rgba(242,165,51,.35)); } 50%{ filter: drop-shadow(0 12px 30px rgba(242,165,51,.6)); } }
/* Tilt parallax on hover (js adds --rx/--ry) */
.logo { transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease; }

h1{ margin: 10px 0 6px; font-weight:600; letter-spacing:.3px; font-size: clamp(26px, 4vw, 38px); }
h1 span{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subtitle{ margin:0 auto 22px; color:var(--muted); font-size: clamp(14px, 2.2vw, 18px); max-width: 720px; }

.cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:8px; animation: fadeInUp 1.2s ease-out forwards; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 26px; border-radius:14px; font-weight:600; text-decoration:none; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(242,165,51,.25); border-color: rgba(255,255,255,.25); }
.btn.primary{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#1a1a1a; border-color: transparent; }
.btn.outline{ color:var(--text); }
.btn.ghost{ color:#fff; background: linear-gradient(135deg,#fd5949,#d6249f,#285AEB); background-size:200% 200%; animation: gradientMove 4s ease infinite; }
@keyframes gradientMove{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes fadeInUp{ 0%{opacity:0; transform:translateY(30px)} 100%{opacity:1; transform:translateY(0)} }

footer{ text-align:center; color:var(--muted); font-size:14px; display:flex; flex-direction:column; gap:10px; align-items:center; }
footer .tag{ border:1px solid var(--stroke); padding:8px 12px; border-radius:12px; background: rgba(255,255,255,0.04); }

/* Decorative SVGs from v1 */
.decor{ position:fixed; left:0; right:0; width:100%; pointer-events:none; opacity:.25; z-index:0; }
.decor-top{ top:0; transform: translateY(-35%); }
.decor-bottom{ bottom:0; transform: translateY(35%); }

@media (max-width:480px){
  .hero{ padding:36px 20px; border-radius:22px; }
  .btn{ width:100%; }
}