/* ============================================================
   hero.css — Hero section, floating islands, launcher mockup,
   stat counters, marquee strip.
   ============================================================ */

.hero{min-height:100vh;display:flex;align-items:center;padding-top:140px;padding-bottom:80px;position:relative;overflow:hidden;}
.hero-islands{position:absolute;inset:0;z-index:0;opacity:.85;}
.island{position:absolute;filter:drop-shadow(0 20px 40px rgba(123,46,255,.35));animation:float 7s ease-in-out infinite;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:2;}
.hero-copy h1{font-size:clamp(38px,5.4vw,64px);line-height:1.05;margin-bottom:22px;}
.hero-copy h1 .grad{background:linear-gradient(100deg,var(--secondary),var(--accent) 55%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-copy p{font-size:18px;color:var(--text-2);max-width:520px;margin-bottom:34px;line-height:1.6;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:640px;}
.stat{padding:16px 6px;border-left:1px solid var(--line);}
.stat:first-child{border-left:none;padding-left:0;}
.stat b{display:block;font-family:var(--head-font);font-size:26px;background:linear-gradient(90deg,#fff,var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{font-size:12.5px;color:var(--text-2);}

/* Launcher mock */
.launcher-wrap{position:relative;perspective:1200px;}
.launcher{border-radius:26px;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.55), var(--glow-purple);transform:rotateY(-8deg) rotateX(4deg);transition:transform .5s;animation:hoverfloat 6s ease-in-out infinite;}
.launcher-wrap:hover .launcher{transform:rotateY(-2deg) rotateX(1deg) scale(1.02);}
.launcher-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.launcher-top .dots{display:flex;gap:6px;}
.launcher-top .dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);}
.launcher-hero-img{border-radius:16px;height:170px;background:
  radial-gradient(circle at 30% 30%, rgba(176,92,255,.5), transparent 60%),
  radial-gradient(circle at 75% 60%, rgba(63,140,255,.45), transparent 55%),
  linear-gradient(160deg,#1b1230,#0d0d18);
  position:relative;overflow:hidden;margin-bottom:18px;border:1px solid rgba(255,255,255,.08);}
.launcher-hero-img::before,.launcher-hero-img::after{content:'';position:absolute;border-radius:50%;filter:blur(1px);animation:twinkle 3s ease-in-out infinite;}
.launcher-hero-img::before{width:5px;height:5px;background:#fff;top:20%;left:20%;box-shadow:60px 40px 0 -1px #fff, 120px 10px 0 -1px #fff, 30px 90px 0 -1px #fff, 200px 60px 0 -1px #fff;}
.launcher-hero-img::after{width:3px;height:3px;background:var(--secondary);top:60%;left:70%;box-shadow:0 0 8px var(--secondary);}
.play-btn{position:absolute;bottom:14px;left:14px;background:linear-gradient(135deg,var(--primary),var(--secondary));padding:9px 18px;border-radius:10px;font-size:12px;font-family:var(--btn-font);font-weight:700;box-shadow:0 8px 24px rgba(123,46,255,.5);}
.launcher-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;}
.launcher-row:last-child{border-bottom:none;}
.launcher-row span:first-child{color:var(--text-2);}
.badge-pill{font-size:10.5px;padding:3px 9px;border-radius:20px;background:rgba(123,46,255,.18);color:var(--accent);border:1px solid rgba(176,92,255,.35);font-weight:600;}
.float-chip{position:absolute;padding:10px 16px;border-radius:14px;font-size:12.5px;font-weight:600;display:flex;gap:8px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:float 5.5s ease-in-out infinite;}
.chip-1{top:-6%;right:-8%;animation-delay:.4s;}
.chip-2{bottom:6%;left:-10%;animation-delay:1.2s;}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:var(--surface);overflow:hidden;white-space:nowrap;position:relative;z-index:2;}
.marquee-track{display:inline-flex;gap:60px;animation:scrollx 26s linear infinite;}
.marquee-track span{font-family:var(--head-font);font-size:14px;letter-spacing:.06em;color:var(--text-2);text-transform:uppercase;}
.marquee-track span b{color:var(--secondary);}