@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink:#101419; --blue:#1687e8; --deep-blue:#072d4b; --red:#e74c3c; --gold:#ffc43d; --green:#7caf3f; --cream:#f4f1e9; }
html { scroll-behavior: smooth; background: var(--ink); }
body { font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; }
button { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.section { position:relative; padding:clamp(88px, 11vw, 170px) max(24px, calc((100vw - 1320px)/2)); }
.kicker,.eyebrow { color:var(--blue); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
h2 { font-family:"Archivo Black", Inter, sans-serif; font-size:clamp(42px, 6.2vw, 88px); line-height:.96; letter-spacing:-.055em; text-transform:uppercase; }
h2 span { color:var(--blue); }

.site-header { position:fixed; z-index:30; top:20px; left:50%; transform:translateX(-50%); width:min(94%, 1420px); height:82px; display:grid; grid-template-columns:180px 1fr 180px; align-items:center; padding:0 28px; color:#fff; background:rgba(5,7,9,.92); border:1px solid rgba(255,255,255,.12); border-radius:12px; backdrop-filter:blur(18px); box-shadow:0 18px 50px rgba(0,0,0,.2); transition:top .3s, background .3s; }
.site-header.scrolled { top:10px; background:rgba(5,7,9,.97); }
.brand { width:96px; }
.brand img { width:100%; }
.desktop-nav { display:flex; justify-content:center; gap:44px; }
.desktop-nav a, footer a { text-decoration:none; font-size:13px; font-weight:800; letter-spacing:.04em; }
.desktop-nav a { color:#aeb4bb; transition:color .2s; }
.desktop-nav a:hover { color:#fff; }
.nav-cta { justify-self:end; text-decoration:none; padding:13px 17px; border-radius:7px; background:#fff; color:#080a0d; font-size:12px; font-weight:900; text-transform:uppercase; }
.nav-cta span { color:var(--red); margin-left:5px; }
.menu-button { display:none; width:42px; height:42px; border:0; background:transparent; }
.menu-button span { display:block; width:24px; height:2px; margin:6px auto; background:#fff; }

.hero { position:relative; height:max(760px, 100svh); min-height:760px; color:#fff; background:#102b3d; overflow:hidden; }
.hero-art { position:absolute; inset:0; background:url('landing-assets/splashartlogo.webp?v=1') center/contain no-repeat; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06) 45%,rgba(3,8,12,.82) 100%),linear-gradient(90deg,rgba(0,0,0,.2),transparent 35%,transparent 65%,rgba(0,0,0,.12)); }
.hero-content { position:absolute; z-index:2; left:50%; bottom:78px; transform:translateX(-50%); width:min(92%,760px); text-align:center; }
.hero-content .eyebrow { color:#fff; opacity:.72; margin-bottom:12px; }
.hero-line { font-size:clamp(20px, 2.5vw, 34px); font-weight:600; text-shadow:0 2px 20px rgba(0,0,0,.8); }
.hero-line strong { color:var(--gold); }
.hero-store-buttons { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; }
.hero-store-buttons .app-store-badge { height:40px; }
.hero-store-buttons .google-play-badge { height:53px; }
.primary-button { display:inline-flex; align-items:center; gap:18px; margin-top:23px; padding:17px 22px 17px 24px; color:#fff; background:var(--red); border-radius:8px; text-decoration:none; font-size:13px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 12px 30px rgba(204,40,35,.35); transition:transform .2s,box-shadow .2s; }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(204,40,35,.48); }
.primary-button span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:rgba(0,0,0,.2); }
.scroll-cue { position:absolute; z-index:3; right:38px; bottom:36px; display:flex; align-items:center; gap:11px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.scroll-cue span { position:relative; width:22px; height:34px; border:1px solid #fff; border-radius:20px; }
.scroll-cue span:after { content:""; position:absolute; left:9px; top:7px; width:2px; height:6px; background:#fff; border-radius:3px; animation:scrollDot 1.6s ease infinite; }
@keyframes scrollDot { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }

.intro { min-height:900px; display:grid; grid-template-columns:minmax(430px,.95fr) 1.05fr; gap:clamp(45px,8vw,130px); align-items:center; background:#fff; overflow:hidden; }
.phone-stage { position:relative; height:690px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; z-index:2; height:760px; width:auto; filter:drop-shadow(0 35px 32px rgba(14,32,44,.22)); animation:phoneFloat 5s ease-in-out infinite; }
@keyframes phoneFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(-1deg)} }
.phone-glow { position:absolute; width:530px; height:530px; border-radius:50%; background:radial-gradient(circle,#ffd25a 0,#f0b128 24%,rgba(240,177,40,.05) 68%,transparent 72%); filter:blur(2px); opacity:.9; }
.battle-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid rgba(255,255,255,.45); border-radius:10px; color:#fff; background:rgba(8,21,32,.86); box-shadow:0 12px 30px rgba(0,0,0,.18); backdrop-filter:blur(8px); }
.battle-chip b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--blue); }
.battle-chip span { max-width:65px; font-size:9px; font-weight:800; line-height:1.2; text-transform:uppercase; }
.chip-one { left:4%; top:27%; }.chip-two { right:0; bottom:27%; }.chip-two b { background:var(--red); }
.intro-copy { max-width:620px; }
.intro-copy .kicker,.world-copy .kicker { margin-bottom:22px; }
.intro-copy > p:not(.kicker),.world-copy > p:not(.kicker) { max-width:570px; margin-top:30px; color:#606973; font-size:clamp(16px,1.4vw,20px); line-height:1.7; }
.stat-row { display:flex; margin-top:48px; padding-top:28px; border-top:1px solid #dfe3e5; }
.stat-row div { flex:1; display:flex; flex-direction:column; }
.stat-row strong { font-family:"Archivo Black",sans-serif; font-size:34px; line-height:1; }
.stat-row span { margin-top:8px; color:#7f8790; font-size:11px; font-weight:700; text-transform:uppercase; }

.features { color:#fff; background:#0d1218; }
.section-heading { max-width:850px; }
.section-heading .kicker { margin-bottom:24px; color:#67b6ff; }
.feature-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:75px; }
.feature-card { position:relative; height:640px; overflow:hidden; background:#19222a; border-radius:14px; }
.feature-card img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.feature-card:after { content:""; position:absolute; inset:32% 0 0; background:linear-gradient(transparent,rgba(5,8,11,.97)); }
.feature-card:hover img { transform:scale(1.04); }
.card-copy { position:absolute; z-index:2; left:30px; right:30px; bottom:30px; }
.card-copy > span { display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:15px; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#aab2b9; font-size:10px; font-weight:900; }
.card-copy h3 { font-family:"Archivo Black",sans-serif; font-size:26px; text-transform:uppercase; }
.card-copy p { margin-top:10px; color:#b9c0c6; font-size:13px; line-height:1.55; }

.worlds { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,130px); align-items:center; background:#e9f0f4; overflow:hidden; }
.world-copy { max-width:620px; }
.country-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:35px; }
.country-pills span { padding:12px 16px; background:#fff; border-radius:999px; box-shadow:0 6px 20px rgba(13,49,72,.08); font-size:12px; font-weight:800; }
.world-visual { position:relative; height:680px; overflow:hidden; border:10px solid #fff; border-radius:18px; box-shadow:0 35px 80px rgba(23,66,91,.2); transform:rotate(2deg); }
.world-visual img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.live-badge { position:absolute; left:18px; top:18px; display:flex; align-items:center; gap:8px; padding:10px 13px; color:#fff; background:rgba(5,13,19,.84); border-radius:999px; backdrop-filter:blur(8px); font-size:10px; font-weight:800; text-transform:uppercase; }
.live-badge i { width:7px; height:7px; border-radius:50%; background:#ff4d43; box-shadow:0 0 0 5px rgba(255,77,67,.18); animation:pulse 1.3s infinite; }
@keyframes pulse { 50%{box-shadow:0 0 0 9px rgba(255,77,67,0)} }

.showcase { padding-left:0; padding-right:0; color:#fff; background:#11161d; overflow:hidden; }
.showcase-head { display:flex; align-items:flex-end; justify-content:space-between; padding:0 max(24px, calc((100vw - 1320px)/2)); }
.showcase-head .kicker { color:#67b6ff; margin-bottom:20px; }
.gallery-controls { display:flex; gap:10px; }
.gallery-controls button { width:52px; height:52px; border:1px solid #3c454f; border-radius:50%; color:#fff; background:transparent; cursor:pointer; transition:.2s; }
.gallery-controls button:hover { border-color:#fff; background:#fff; color:#111; }
.gallery { display:flex; gap:22px; margin-top:65px; padding:0 max(24px, calc((100vw - 1320px)/2)) 35px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; }
.gallery::-webkit-scrollbar { display:none; }
.gallery.dragging { cursor:grabbing; scroll-snap-type:none; }
.gallery figure { flex:0 0 min(320px,72vw); scroll-snap-align:start; }
.gallery img { width:100%; aspect-ratio:702/1519; object-fit:cover; object-position:top; border-radius:15px; background:#25303a; box-shadow:0 24px 45px rgba(0,0,0,.28); }
.gallery figcaption { margin-top:14px; color:#9ca5ad; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.download { min-height:820px; display:grid; place-items:center; color:#fff; text-align:center; overflow:hidden; background:#092b42; }
.download-bg { position:absolute; inset:0; background:linear-gradient(rgba(3,16,25,.58),rgba(3,16,25,.88)),url('landing-assets/splashartlogo.webp?v=1') center/cover no-repeat; filter:saturate(.85); transform:scale(1.04); }
.download-copy { position:relative; z-index:2; }
.download-copy .kicker { color:#ffdb66; margin-bottom:18px; }
.store-buttons { display:flex; justify-content:center; gap:12px; margin-top:35px; flex-wrap:wrap; }
.store-badge-link { display:flex; align-items:center; justify-content:center; height:64px; text-decoration:none; transition:transform .2s; }
.store-badge-link:hover { transform:translateY(-3px); }
.app-store-badge { width:auto; height:48px; }
.google-play-badge { width:auto; height:64px; }

footer { min-height:145px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:30px max(24px,calc((100vw - 1320px)/2)); color:#a7adb3; background:#07090c; }
footer p { font-size:11px; } footer div { display:flex; gap:28px; } footer a { color:#c7ccd0; }

.reveal,.reveal-left,.reveal-right { opacity:0; transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.25,1); }
.reveal { transform:translateY(35px); }.reveal-left { transform:translateX(-45px); }.reveal-right { transform:translateX(45px); }
.is-visible { opacity:1; transform:none; }

@media (max-width:900px) {
  .site-header { top:10px; width:calc(100% - 20px); height:68px; grid-template-columns:1fr auto; padding:0 18px; }
  .site-header .brand { width:77px; }.desktop-nav,.nav-cta { display:none; }.menu-button { display:block; }
  .site-header.menu-open .desktop-nav { position:absolute; display:flex; top:calc(100% + 8px); left:0; right:0; flex-direction:column; gap:0; padding:8px 18px; background:rgba(5,7,9,.97); border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 18px 38px rgba(0,0,0,.26); backdrop-filter:blur(18px); }
  .site-header.menu-open .desktop-nav a { padding:13px 0; border-top:1px solid #282d32; }
  .hero { height:82svh; min-height:650px; }.hero-art { background-position:center; }
  .hero-content { bottom:47px; }.scroll-cue { display:none; }
  .intro,.worlds { grid-template-columns:1fr; }
  .intro { padding-top:70px; }.phone-stage { height:650px; }.phone { height:690px; }.intro-copy { padding-top:20px; }
  .feature-cards { grid-template-columns:1fr; }.feature-card { height:620px; }.feature-card img { object-position:center 23%; }
  .world-copy { order:2; }.world-visual { height:620px; }
}
@media (max-width:600px) {
  .section { padding:68px 20px; }
  h2 { font-size:clamp(37px,11.8vw,54px); line-height:.98; }
  .hero { height:100svh; min-height:700px; max-height:none; }
  .hero-art { inset:0; background-image:url('landing-assets/verticalsplashart.webp?v=1'); background-size:cover; background-position:center top; transform:none !important; }
  .hero-shade { background:linear-gradient(180deg,transparent 32%,rgba(3,8,12,.2) 50%,rgba(3,8,12,.96) 100%); }
  .hero-content { bottom:38px; width:100%; padding:0 18px; }
  .hero-line { font-size:17px; line-height:1.35; }.primary-button { margin-top:16px; padding:14px 16px 14px 19px; font-size:11px; }.hero-content .eyebrow { display:none; }
  .hero-store-buttons { margin-top:12px; gap:5px; }
  .hero-store-buttons .app-store-badge { height:38px; }
  .hero-store-buttons .google-play-badge { height:51px; }
  .download-bg { background-image:linear-gradient(rgba(3,16,25,.58),rgba(3,16,25,.88)),url('landing-assets/verticalsplashart.webp?v=1'); }
  .intro { gap:12px; padding-top:54px; }
  .phone-stage { width:100%; height:490px; margin:0; overflow:visible; }
  .phone { width:min(86vw,350px); height:auto; max-height:none; }
  .phone-glow { width:min(82vw,330px); height:min(82vw,330px); }
  .battle-chip { padding:8px 9px; gap:6px; transform:none; border-radius:8px; }
  .battle-chip b { width:28px; height:28px; font-size:12px; }
  .battle-chip span { max-width:50px; font-size:7px; }
  .chip-one { left:0; top:21%; }.chip-two { right:0; bottom:21%; }
  .intro-copy > p:not(.kicker),.world-copy > p:not(.kicker) { font-size:16px; margin-top:24px; }
  .stat-row { gap:10px; margin-top:34px; padding-top:22px; }.stat-row strong { font-size:26px; }.stat-row span { font-size:8px; line-height:1.25; }
  .features { padding-left:14px;padding-right:14px; }.features .section-heading { padding:0 6px; }.feature-cards { margin-top:38px; gap:14px; }.feature-card { height:min(145vw,570px); border-radius:12px; }.card-copy{left:22px;right:22px;bottom:22px}.card-copy h3{font-size:23px}.card-copy p{font-size:12px}
  .worlds { gap:40px; }.world-visual { order:1; width:100%; height:min(138vw,550px); margin:0; border-width:6px; border-radius:13px; transform:rotate(1deg); }.world-copy{order:2}.country-pills span{font-size:10px}
  .showcase { padding:68px 0; }.showcase-head { align-items:flex-end;padding:0 20px}.showcase-head h2{font-size:40px}.gallery-controls{gap:7px}.gallery-controls button{width:42px;height:42px}.gallery{gap:14px;padding:0 20px 25px;margin-top:36px}.gallery figure{flex-basis:min(72vw,285px)}
  .download { min-height:680px; padding-left:20px; padding-right:20px; }.download-bg { background-position:center; }.download h2{font-size:40px}.store-buttons{gap:7px;margin-top:28px}
  footer { flex-direction:column; text-align:center; padding-top:45px;padding-bottom:45px; } footer div{order:2}footer p{order:3}
}
@media (max-width:370px) {
  .section { padding-left:16px; padding-right:16px; }
  .site-header { width:calc(100% - 14px); }
  .phone-stage { height:430px; }
  .phone { width:82vw; }
  .battle-chip span { display:none; }
  .chip-one { left:2%; }.chip-two { right:2%; }
  .stat-row span { max-width:76px; }
  .showcase-head { padding-left:16px; padding-right:16px; }
  .gallery { padding-left:16px; padding-right:16px; }
  .store-buttons { flex-direction:column; align-items:center; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.phone,.scroll-cue span:after,.live-badge i{animation:none}.reveal,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none} }