/* === GAME-Z • Professional Gradient + Smooth Animation (FINAL v3) === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=Poppins:wght@400;500;600&display=swap');

/* THEME (Blue → Teal) */
:root{
  --bg-1:#0a1f4d;  --bg-2:#0e3572;  --bg-3:#0b7a6a;
  --c1:#22e0ff;    --c2:#26d39a;    --c3:#7fb1ff;  --c4:#2af5a2;
  --txt:#ffffff;   --muted:#d8e6ff; --stroke:rgba(255,255,255,.12);
  --bg-speed:120s; --hue-speed:180s;
}

/* RESET / BASE */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif; color:var(--txt); overflow-x:hidden;
  background: linear-gradient(120deg,var(--bg-1),var(--bg-2) 45%,var(--bg-3)) fixed;
  position:relative;
}

/* Animated BG */
body::before{
  content:""; position:fixed; inset:-12% -20%; z-index:-2;
  background:
    radial-gradient(60vmax 40vmax at 15% 15%, color-mix(in oklab, var(--c2) 26%, transparent) 0%, transparent 60%),
    radial-gradient(50vmax 35vmax at 85% 25%, color-mix(in oklab, var(--c1) 24%, transparent) 0%, transparent 60%),
    radial-gradient(55vmax 45vmax at 20% 85%, color-mix(in oklab, var(--c3) 20%, transparent) 0%, transparent 65%),
    radial-gradient(45vmax 35vmax at 80% 90%, color-mix(in oklab, var(--c4) 18%, transparent) 0%, transparent 65%);
  filter: blur(22px) saturate(110%);
  animation: drift var(--bg-speed) linear infinite;
}
body::after{
  content:""; position:fixed; inset:-8%; z-index:-3;
  background: conic-gradient(from 0deg at 50% 50%,
    color-mix(in oklab, var(--c2) 10%, transparent),
    color-mix(in oklab, var(--c3) 10%, transparent),
    color-mix(in oklab, var(--c4) 10%, transparent),
    color-mix(in oklab, var(--c1) 10%, transparent),
    color-mix(in oklab, var(--c2) 10%, transparent));
  opacity:.28; filter: blur(60px);
  animation: spin var(--hue-speed) linear infinite;
}
@keyframes drift{0%{transform:translateX(-2%)}50%{transform:translateX(2%)}100%{transform:translateX(-2%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Layout helpers */
.section{padding:34px 18px}
.center{text-align:center}
.small{font-size:13px;color:var(--muted);border-top:1px solid var(--stroke)}

/* ===== IMAGES: up/down + breathe + glow ===== */
.illu{ --dist: 18px; --dur: 7s; --delay: 0s; position: relative; display: inline-block; isolation: isolate; }
.illu img{
  width: min(520px, 90vw); height: auto; display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation: updown var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite,
             breathe calc(var(--dur) * 1.2) ease-in-out var(--delay) infinite;
  will-change: transform;
}
.illu::before{
  content:""; position:absolute; inset:-12%; z-index:-1; border-radius:28px; pointer-events:none;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(38,211,154,.35), transparent 70%),
    radial-gradient(55% 55% at 70% 60%, rgba(34,224,255,.30), transparent 75%);
  filter: blur(22px) saturate(120%);
  animation: glowshift calc(var(--dur) * 2) linear infinite;
}
@keyframes updown{ 0%{transform:translateY(calc(-1*var(--dist)))} 50%{transform:translateY(var(--dist))} 100%{transform:translateY(calc(-1*var(--dist)))} }
@keyframes breathe{ 0%,100%{transform:scale(1) translateY(calc(-1*var(--dist)))} 50%{transform:scale(1.03) translateY(var(--dist))} }
@keyframes glowshift{ 0%{transform:translateX(-2%);filter:blur(22px) saturate(120%) hue-rotate(0)} 50%{transform:translateX(2%);filter:blur(22px) saturate(120%) hue-rotate(180deg)} 100%{transform:translateX(-2%);filter:blur(22px) saturate(120%) hue-rotate(360deg)} }
.illu1{ --dist:22px; --dur:8s;  --delay:0s; }
.illu2{ --dist:20px; --dur:7.5s; --delay:.4s; }
.illu3{ --dist:24px; --dur:9s;  --delay:.8s; }

/* Subtle text reveal (optional) */
.fade-up{opacity:0; transform:translateY(12px); animation:fadeUp .9s ease forwards}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}

/* ===== PITCH ===== */
.pitch h1{
  font-size:30px; line-height:1.15; font-weight:700;
  background: linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pitch p{margin:12px auto 16px; max-width:640px; color:var(--muted); font-size:16px}

/* ===== DOWNLOAD BUTTON — GLASS CAPSULE + ANIMATED BORDER ===== */
.btn{
  --grad: linear-gradient(90deg, var(--c2), var(--c1));
  position: relative; display:inline-block; margin-top:12px;
  padding:14px 40px; font-weight:800; letter-spacing:.3px;
  color:#eaffff; text-decoration:none;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 22px color-mix(in oklab, var(--c1) 18%, transparent);
  transition: transform .12s ease, filter .25s ease, box-shadow .25s ease;
  /* gentle breathing */
  animation: btnBreath 3.4s ease-in-out infinite;
}
@keyframes btnBreath{
  0%,100%{ transform: translateY(0) scale(1); box-shadow:0 10px 26px rgba(0,0,0,.38), 0 0 20px color-mix(in oklab, var(--c2) 16%, transparent) }
  50%    { transform: translateY(-1px) scale(1.04); box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 34px color-mix(in oklab, var(--c1) 24%, transparent) }
}
/* animated rainbow border using mask */
.btn::before{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
  padding:1.5px; background: var(--grad); 
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderFlow 6s linear infinite;
}
@keyframes borderFlow{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}
/* inner sheen */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background: radial-gradient(120% 60% at 30% 20%, rgba(255,255,255,.24), transparent 60%);
  opacity:.2; transition:opacity .25s ease;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-2px) }
.btn:hover::after{ opacity:.35 }
.btn:active{ transform:translateY(1px) }

/* HIDE the old blue links under the button */
.links{ display:none !important; }

/* ===== ABOUT (out of box, as requested) ===== */
.about{
  text-align:center; padding-top:42px; padding-bottom:10px;
  background: transparent; border: none;
}
.about h2{
  font-size:26px; margin-bottom:10px; font-weight:700;
  background: linear-gradient(90deg,var(--c3),var(--c1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about p{ max-width:760px; margin:0 auto 6px; color:var(--muted) }

/* Feature cards (unchanged look, polished) */
.bullets{
  list-style:none; display:grid; gap:12px;
  grid-template-columns:1fr 1fr;
  max-width:720px; margin:18px auto 0; padding:0 4px;
}
.bullets li{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid var(--stroke);
  border-radius:14px; padding:14px 12px;
  text-align:center; color:#f2f7ff; font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:saturate(110%) blur(2px);
  --shine: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  opacity:0; transform:translateY(14px) scale(.98); animation:featureIn .8s ease forwards;
}
.bullets li::before{
  content:""; position:absolute; inset:auto -40% -60% -40%;
  height:160%; background:var(--shine); transform:skewX(-20deg) translateX(-120%);
  animation: shine 6s ease-in-out infinite;
}
.bullets li:nth-child(1){ animation-delay:.05s }
.bullets li:nth-child(2){ animation-delay:.15s }
.bullets li:nth-child(3){ animation-delay:.25s }
.bullets li:nth-child(4){ animation-delay:.35s }
@keyframes featureIn{ to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes shine{ 50%{transform:skewX(-20deg) translateX(120%)} }

/* ===== REVIEWS ===== */
.reviews h2{
  font-size:24px; margin-bottom:14px; text-align:center;
  background: linear-gradient(90deg,var(--c2),var(--c1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.review-grid{ display:grid; gap:14px; grid-template-columns:1fr; max-width:900px; margin:0 auto; }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid var(--stroke); border-radius:16px; padding:16px;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  opacity:0; transform:translateY(18px) scale(.98); animation:cardRise .9s ease forwards;
}
.review-grid .card:nth-child(1){ animation-delay:.1s }
.review-grid .card:nth-child(2){ animation-delay:.25s }
.review-grid .card:nth-child(3){ animation-delay:.4s }
@keyframes cardRise{ to{ opacity:1; transform:translateY(0) scale(1) } }
.card p{color:#f2f3ff}
.card .who{margin-top:8px; color:var(--muted); font-size:14px}

/* Responsive */
@media (min-width:768px){
  .pitch h1{font-size:40px}
  .review-grid{grid-template-columns:repeat(3,1fr)}
  .bullets{grid-template-columns:repeat(4,1fr)}
  .illu{ --dist:26px; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
}



/* ================== FOOTER STYLING ================== */
.site-footer {
  background: #0f172a;
  color: #cbd5e1;
  font-family: 'Poppins', sans-serif;
  padding: 50px 0 20px 0;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.footer-container h3 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.footer-container p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin: 8px 0;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #38bdf8;
}

.footer-bottom {
  text-align: center;
  padding: 20px;
  border-top: 1px solid #334155;
  margin-top: 40px;
  font-size: 0.9rem;
  color: #94a3b8;
}

.footer-bottom p {
  margin: 5px 0;
}