:root{
  --orange:#F08000;
  --orange2:#F06010;
  --yellow:#F0C010;
  --cyan:#00D0F0;
  --blue:#0070E0;
  --deep:#0030A0;

  --ink:#18324A;
  --ink2:#27435F;
  --muted:#5D728A;
  --line: rgba(24, 50, 74, .12);

  --white:#ffffff;
  --shadow: 0 16px 40px rgba(20, 44, 70, .14);
  --shadow2: 0 10px 24px rgba(20, 44, 70, .12);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;

  --max: 1160px;
}

*{box-sizing:border-box}
*:focus-visible{
  outline: 3px solid rgba(0,112,224,.5);
  outline-offset: 2px;
  border-radius: 4px;
}
html,body{height:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family: ui-rounded, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 12% 0%, rgba(255,145,77,.14), transparent 68%),
    radial-gradient(950px 450px at 88% 5%, rgba(41,128,255,.13), transparent 65%),
    radial-gradient(800px 400px at 55% 35%, rgba(86,224,255,.10), transparent 68%),
    radial-gradient(600px 320px at 25% 80%, rgba(255,192,102,.08), transparent 70%),
    linear-gradient(180deg, #ffffff, #fefefe);
  overflow-x:hidden;
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn{
  from{opacity: 0; transform: translateY(8px)}
  to{opacity: 1; transform: translateY(0)}
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(255,145,77,.04) 1px, transparent 1px),
    radial-gradient(circle at 85% 60%, rgba(41,128,255,.04) 1px, transparent 1px);
  background-size: 60px 60px, 80px 80px;
  opacity: .6;
  pointer-events:none;
  z-index: 1;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

/* Buttons (glossy) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  font-weight: 950;
  letter-spacing: .2px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-2px); filter: saturate(1.08) brightness(1.02); box-shadow: 0 16px 32px rgba(0,0,0,.14)}
.btn:active{transform: translateY(0); filter: saturate(1.0)}
@media (hover: none){
  .btn:hover{transform: none; filter: none; box-shadow: 0 10px 22px rgba(0,0,0,.10)}
}
.btn-small{padding: 10px 16px; font-size: 14px}
.btn-wide{padding: 14px 22px; min-width: 220px}

.btn-orange{
  color: #fff;
  background: linear-gradient(180deg, #ffb150, var(--orange2));
}
.btn-blue{
  color:#fff;
  background: linear-gradient(180deg, #56c7ff, #1677ff);
}
.btn-green{
  color:#fff;
  background: linear-gradient(180deg, #6fe08b, #2fba57);
}

.btn-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.18));
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid rgba(24, 50, 74, .12);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 16px rgba(20,44,70,.04);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 12px 0;
}
.brand{display:flex; align-items:center}
.brand-logo{
  width: 120px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(20,44,70,.12));
  transition: transform .2s ease, filter .2s ease;
}
.brand:hover .brand-logo{
  transform: scale(1.02);
  filter: drop-shadow(0 10px 18px rgba(20,44,70,.16));
}
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(24, 50, 74, .10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 18px rgba(20,44,70,.08);
}
.nav a{
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 950;
  color: var(--ink2);
  transition: background .18s ease, color .18s ease, transform .18s ease;
  position: relative;
}
.nav a:hover{background: rgba(0,112,224,.12); color:#0b4fb4; transform: translateY(-1px)}
.nav a:active{transform: translateY(0)}
.topbar-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(24, 50, 74, .14);
  background: rgba(255,255,255,.70);
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px rgba(20,44,70,.08);
  color: var(--ink2);
}

.mobile-panel{
  display:none;
  border-top: 1px solid rgba(24, 50, 74, .10);
  background: rgba(255,255,255,.92);
}
.mobile-panel.open{display:block}
.mobile-panel .container{padding: 12px 0 16px 0}
.mobile-links{display:flex; flex-direction:column; gap: 6px}
.mobile-links a{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 950;
}
.mobile-links a:hover{border-color: rgba(24, 50, 74, .14); background: rgba(0,112,224,.06)}

/* Hero splash */
.hero-splash{
  position: relative;
  padding: 26px 0 0 0;
  overflow:hidden;
  color: #fff;
}
.hero-splash-bg{
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1400px 580px at -8% -5%, rgba(255,135,70,.78), transparent 58%),
    radial-gradient(1100px 560px at 105% 10%, rgba(28,110,255,.80), transparent 58%),
    radial-gradient(900px 540px at 52% -8%, rgba(70,215,255,.52), transparent 60%),
    radial-gradient(700px 420px at 80% 45%, rgba(255,160,95,.38), transparent 65%),
    linear-gradient(95deg, rgba(255,155,72,.88), rgba(255,190,115,.72) 35%, rgba(95,200,255,.76) 70%, rgba(75,165,255,.82));
  filter: saturate(1.12) contrast(1.02);
  opacity: .99;
  animation: heroGlow 18s ease-in-out infinite;
}

@keyframes heroGlow{
  0%, 100%{filter: saturate(1.12) contrast(1.02) hue-rotate(0deg)}
  50%{filter: saturate(1.18) contrast(1.04) hue-rotate(3deg)}
}

.hero-splash-bg::after{
  content:"";
  position:absolute;
  inset: -180px -180px auto -180px;
  height: 580px;
  background:
    radial-gradient(ellipse 420px 280px at 22% 38%, rgba(255,255,255,.58), transparent 58%),
    radial-gradient(ellipse 360px 240px at 68% 18%, rgba(255,255,255,.36), transparent 62%),
    radial-gradient(ellipse 280px 180px at 85% 55%, rgba(255,240,200,.28), transparent 65%);
  transform: rotate(-5deg);
  opacity: .70;
  animation: heroShine 12s ease-in-out infinite;
}

@keyframes heroShine{
  0%, 100%{opacity: .70; transform: rotate(-5deg) scale(1)}
  50%{opacity: .78; transform: rotate(-6deg) scale(1.02)}
}

.hero-splash-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:center;
  padding: 34px 0 54px 0;
}
.hero-title{margin:0}
.hero-kicker{
  display:block;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 1000;
  opacity: .96;
  text-shadow: 0 2px 0 rgba(0,0,0,.10);
}
.hero-wordmark{
  display:block;
  margin-top: 4px;
  font-size: clamp(56px, 7.2vw, 92px);
  font-weight: 1000;
  letter-spacing: -1px;
  line-height: .95;
  background: linear-gradient(95deg, 
    #ff8a25 0%, 
    #ffb155 22%, 
    #ffe08b 38%, 
    #fff5ba 48%,
    #8de5ff 62%,
    #4ac7ff 78%, 
    #1f8fff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.12)) drop-shadow(0 18px 38px rgba(0,0,0,.18));
}
.hero-tagline{
  margin: 10px 0 16px 0;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0,0,0,.10);
}
.hero-ctas{display:flex; flex-wrap:wrap; gap: 12px}

/* (Removed) store badges + download CTAs */

.hero-art{
  position: relative;
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.phone{
  width: min(330px, 80vw);
  height: 420px;
  border-radius: 48px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.46));
  border: 10px solid rgba(12, 22, 40, .70);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  position:relative;
}
.phone-notch{
  position:absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 26px;
  border-radius: 999px;
  background: rgba(12, 22, 40, .86);
}
.phone-screen{
  position:absolute;
  inset: 18px;
  border-radius: 40px;
  background:
    radial-gradient(300px 220px at 20% 20%, rgba(255,168,62,.55), transparent 60%),
    radial-gradient(320px 240px at 80% 20%, rgba(57,214,255,.55), transparent 60%),
    radial-gradient(320px 240px at 50% 90%, rgba(255,255,255,.35), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.06));
  overflow:hidden;
}
.screen-ui{position:absolute; inset: 0; padding: 14px}
.screen-top{display:flex; justify-content:space-between; gap: 10px}
.screen-pill{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.38);
  font-weight: 1000;
  color: rgba(12, 22, 40, .86);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.tiles{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tile{
  height: 78px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  font-weight: 1000;
  box-shadow: 0 16px 24px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.45);
  color: rgba(12, 22, 40, .70);
}
.t1{background: linear-gradient(180deg, #ffd36b, #ff9c2b)}
.t2{background: linear-gradient(180deg, #9fe8ff, #39bfff)}
.t3{background: linear-gradient(180deg, #ffd4eb, #ff7fb8)}
.t4{background: linear-gradient(180deg, #c9f7d0, #5be082)}
.t5{background: linear-gradient(180deg, #d3d6ff, #6c7cff)}
.t6{background: linear-gradient(180deg, #fff, #e7f6ff)}

.floaty{
  position:absolute;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 
    0 20px 45px rgba(0,0,0,.20),
    0 8px 16px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.35) inset;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.62), transparent 58%),
    linear-gradient(140deg, rgba(255,165,60,.82), rgba(255,200,100,.70) 48%, rgba(75,200,255,.76));
  animation: floaty 8.5s ease-in-out infinite;
  transition: transform .12s ease-out;
  will-change: transform;
  opacity: .96;
}
.f1{
  left: 8%; top: 18%; 
  width: 72px; height: 72px;
  transform: rotate(-8deg);
  background: radial-gradient(circle at 28% 28%, rgba(255,245,210,.62), transparent 58%), linear-gradient(142deg, rgba(255,210,130,.88), rgba(255,155,75,.84));
}
.f2{
  left: 12%; bottom: 14%; 
  width: 56px; height: 56px; 
  animation-delay: .8s;
  background: radial-gradient(circle at 28% 28%, rgba(200,245,255,.60), transparent 58%), linear-gradient(138deg, rgba(140,230,255,.86), rgba(75,180,255,.82));
}
.f3{
  right: 8%; top: 18%; 
  width: 60px; height: 60px; 
  animation-delay: 1.3s;
  background: radial-gradient(circle at 28% 28%, rgba(255,250,200,.61), transparent 58%), linear-gradient(136deg, rgba(255,240,140,.85), rgba(255,200,95,.80));
}
.f4{
  right: 12%; bottom: 16%; 
  width: 68px; height: 68px; 
  animation-delay: .4s;
  background: radial-gradient(circle at 28% 28%, rgba(220,255,240,.59), transparent 58%), linear-gradient(140deg, rgba(150,255,200,.84), rgba(85,220,160,.80));
}
.f5{
  right: 22%; top: 2%; 
  width: 48px; height: 48px; 
  animation-delay: 1.6s;
  background: radial-gradient(circle at 28% 28%, rgba(220,240,255,.60), transparent 58%), linear-gradient(134deg, rgba(180,220,255,.86), rgba(120,180,255,.82));
}

@keyframes floaty{
  0%,100%{transform: translateY(0) rotate(-6deg) scale(1)}
  33%{transform: translateY(-16px) rotate(4deg) scale(1.02)}
  66%{transform: translateY(8px) rotate(-3deg) scale(0.98)}
}

.wave{position:absolute; left:0; right:0; height: 140px; pointer-events:none; opacity: .98}
.wave svg{width:100%; height:100%; display:block}
.wave-bottom{bottom: -1px; filter: drop-shadow(0 -3px 10px rgba(255,145,77,.07))}
.wave-top{top: -1px; filter: drop-shadow(0 3px 10px rgba(41,128,255,.07))}

/* Sections */
.section{padding: 56px 0}
.section-title{text-align:center}
.title-gradient{
  margin:0;
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 1000;
  letter-spacing: -0.6px;
  background: linear-gradient(115deg, 
    rgba(255,130,55,1) 0%, 
    rgba(255,165,80,1) 22%, 
    rgba(255,195,105,1) 38%,
    rgba(130,215,255,1) 62%,
    rgba(60,155,255,1) 82%,
    rgba(30,120,230,1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255,140,60,.16)) drop-shadow(0 2px 6px rgba(60,155,255,.14));
  animation: titleShimmer 7s ease-in-out infinite;
}

@keyframes titleShimmer{
  0%, 100%{filter: drop-shadow(0 2px 6px rgba(255,140,60,.16)) drop-shadow(0 2px 6px rgba(60,155,255,.14))}
  50%{filter: drop-shadow(0 3px 9px rgba(255,140,60,.20)) drop-shadow(0 3px 9px rgba(60,155,255,.18))}
}
.subtitle{
  margin: 6px 0 10px 0;
  color: var(--ink2);
  font-weight: 950;
}
.desc{
  margin: 0 auto;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 750;
}

.feature-row{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card{
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border: 1px solid rgba(24, 50, 74, .12);
  box-shadow: 
    0 18px 42px rgba(20,44,70,.12),
    0 2px 8px rgba(20,44,70,.06),
    0 0 0 1px rgba(255,255,255,.4) inset;
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(10px);
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease, border-color .3s ease;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(255,240,200,.2), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events:none;
}
.feature-card:hover{
  transform: translateY(-6px) rotate(0.5deg);
  box-shadow: 
    0 28px 64px rgba(20,44,70,.16),
    0 6px 16px rgba(20,44,70,.08),
    0 0 0 1px rgba(255,255,255,.5) inset;
  border-color: rgba(24, 50, 74, .16);
}
.feature-card:hover::before{
  opacity: 1;
}
.feature-card:nth-child(1){transform: rotate(-0.8deg)}
.feature-card:nth-child(1):hover{transform: translateY(-6px) rotate(-0.3deg)}
.feature-card:nth-child(2){transform: translateY(8px) rotate(0.6deg)}
.feature-card:nth-child(2):hover{transform: translateY(2px) rotate(1.1deg)}
.feature-card:nth-child(3){transform: translateY(-4px) rotate(-0.5deg)}
.feature-card:nth-child(3):hover{transform: translateY(-10px) rotate(0deg)}
.feature-card:nth-child(1){transform: rotate(-0.8deg)}
.feature-card:nth-child(1):hover{transform: translateY(-6px) rotate(-0.3deg)}
.feature-card:nth-child(2){transform: translateY(8px) rotate(0.6deg)}
.feature-card:nth-child(2):hover{transform: translateY(2px) rotate(1.1deg)}
.feature-card:nth-child(3){transform: translateY(-4px) rotate(-0.5deg)}
.feature-card:nth-child(3):hover{transform: translateY(-10px) rotate(0deg)}
.feature-top{
  height: 150px;
  position:relative;
}
.feature-svg{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .95;
  pointer-events:none;
}
.feature-top::after{
  content:"";
  position:absolute;
  inset:-60px -50px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.60), transparent 58%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,.28), transparent 62%);
  transform: rotate(12deg);
}
.top-orange{
  background:
    radial-gradient(280px 160px at 18% 22%, rgba(255,255,255,.62), transparent 68%),
    radial-gradient(200px 120px at 82% 75%, rgba(255,230,150,.35), transparent 65%),
    linear-gradient(142deg, rgba(255,165,60,.92) 0%, rgba(255,130,50,.88) 40%, rgba(255,100,20,.84) 100%);
}
.top-blue{
  background:
    radial-gradient(280px 160px at 18% 22%, rgba(255,255,255,.62), transparent 68%),
    radial-gradient(200px 120px at 82% 75%, rgba(180,230,255,.32), transparent 65%),
    linear-gradient(138deg, rgba(70,210,255,.90) 0%, rgba(50,170,255,.86) 45%, rgba(28,125,255,.85) 100%);
}
.top-green{
  background:
    radial-gradient(280px 160px at 18% 22%, rgba(255,255,255,.62), transparent 68%),
    radial-gradient(200px 120px at 82% 75%, rgba(200,255,220,.32), transparent 65%),
    linear-gradient(140deg, rgba(145,240,180,.92) 0%, rgba(90,220,135,.88) 42%, rgba(52,190,92,.82) 100%);
}
.feature-ico{
  position:absolute;
  left: 18px;
  bottom: 14px;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.feature-card:hover .feature-ico{
  transform: scale(1.05) rotate(2deg);
}
.feature-body{padding: 14px 16px 16px 16px}
.feature-body h3{margin: 0 0 8px 0; font-size: 18px; font-weight: 1000}
.feature-body p{margin: 0 0 12px 0; color: var(--muted); line-height: 1.6; font-weight: 750}

.center-cta{display:flex; justify-content:center; margin-top: 22px}

.section-head{margin-bottom: 14px}
.title-mini{margin:0; font-size: 28px; font-weight: 1000; letter-spacing: -.3px}
.desc-mini{margin: 6px 0 0 0; color: var(--muted); font-weight: 800; line-height: 1.6; max-width: 760px}

/* Games cards (light) - Masonry-like layout */
.games-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 18px;
  align-items:start;
}
.game-card{
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(252,252,254,.94));
  border: 1px solid rgba(24, 50, 74, .11);
  box-shadow: 
    0 16px 38px rgba(20,44,70,.11),
    0 4px 10px rgba(20,44,70,.06),
    0 0 0 1px rgba(255,255,255,.3) inset;
  overflow:hidden;
  position:relative;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s ease, border-color .25s ease;
}
.game-card::after{
  content:"";
  position:absolute;
  inset: -50% 0 0 0;
  height: 200%;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
  transform: translateY(-100%);
  transition: transform .6s ease;
  pointer-events:none;
}
.game-card:hover{
  transform: translateY(-5px) scale(1.015) rotate(0.3deg);
  box-shadow: 
    0 28px 58px rgba(20,44,70,.15),
    0 8px 18px rgba(20,44,70,.08),
    0 0 0 1px rgba(255,255,255,.4) inset;
  border-color: rgba(24, 50, 74, .15);
}
.game-card:hover::after{
  transform: translateY(0);
}
.game-card:nth-child(2n){transform: translateY(10px)}
.game-card:nth-child(3n){transform: translateY(-6px)}
.game-card:nth-child(2n):hover{transform: translateY(5px) scale(1.015) rotate(-0.3deg)}
.game-card:nth-child(3n):hover{transform: translateY(-11px) scale(1.015) rotate(0.4deg)}
.game-top{
  height: 130px;
  position:relative;
  background:
    radial-gradient(260px 150px at 18% 18%, rgba(255,255,255,.58), transparent 65%),
    radial-gradient(180px 110px at 85% 80%, rgba(255,220,150,.28), transparent 62%),
    linear-gradient(142deg, rgba(255,155,65,.82) 0%, rgba(255,200,120,.70) 48%, rgba(75,205,255,.76) 100%);
  overflow:hidden;
}
.game-top::before{
  content:"";
  position:absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, rgba(20,44,70,.02) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .4;
}
.game-art{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events:none;
}
.game-art svg{width:100%; height:100%; display:block}
.game-top::after{
  content:"";
  position:absolute;
  inset:-70px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 58%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,.22), transparent 62%);
  transform: rotate(16deg);
}
.game-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.46);
  color: rgba(12,22,40,.82);
  font-weight: 1000;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
}
.game-body{padding: 14px 16px 16px 16px}
.game-body h3{margin:0 0 8px 0; font-size: 18px; font-weight: 1000}
.game-body p{margin:0; color: var(--muted); line-height: 1.6; font-weight: 750}
.game-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
}
.game-meta small{color: var(--ink2); font-weight: 950}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(24, 50, 74, .10);
  background: rgba(255,255,255,.70);
  font-weight: 950;
  color: var(--ink2);
}
.dot{
  width:8px;
  height:8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--cyan));
  box-shadow: 0 0 0 4px rgba(0,208,240,.10);
}

/* News */
.news-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr 1fr;
  gap: 18px 20px;
  align-items:start;
}
.news-card{
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, rgba(255,255,255,.97), rgba(250,252,254,.93));
  border: 1px solid rgba(24, 50, 74, .11);
  box-shadow: 
    0 16px 40px rgba(20,44,70,.10),
    0 4px 12px rgba(20,44,70,.05),
    0 0 0 1px rgba(255,255,255,.35) inset;
  overflow:hidden;
  position:relative;
  transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .24s ease, border-color .24s ease;
}
.news-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,245,200,.25), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events:none;
}
.news-card:hover{
  transform: translateY(-4px) rotate(0.4deg);
  box-shadow: 
    0 24px 52px rgba(20,44,70,.14),
    0 8px 18px rgba(20,44,70,.07),
    0 0 0 1px rgba(255,255,255,.4) inset;
  border-color: rgba(24, 50, 74, .15);
}
.news-card:hover::before{
  opacity: 1;
}
.news-card:nth-child(1){transform: rotate(-0.5deg)}
.news-card:nth-child(2){transform: translateY(6px) rotate(0.6deg)}
.news-card:nth-child(3){transform: translateY(-3px) rotate(-0.4deg)}
.news-card:nth-child(1):hover{transform: translateY(-4px) rotate(-0.1deg)}
.news-card:nth-child(2):hover{transform: translateY(2px) rotate(1deg)}
.news-card:nth-child(3):hover{transform: translateY(-7px) rotate(0deg)}
.news-art{
  height: 120px;
  position:relative;
}
.news-art svg{width:100%; height:100%; display:block}
.news-body{padding: 14px 16px 16px 16px}
.news-body h3{margin:0 0 8px 0; font-size: 18px; font-weight: 1000}
.news-body p{margin:0; color: var(--muted); line-height: 1.6; font-weight: 750}
.news-body small{display:block; margin-top: 10px; color: rgba(39,67,95,.75); font-weight: 950}

/* Contact */
.contact-card{
  border-radius: var(--radius-xl);
  background:
    radial-gradient(800px 260px at 25% 0%, rgba(240,128,0,.14), transparent 60%),
    radial-gradient(700px 260px at 100% 15%, rgba(0,112,224,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  border: 1px solid rgba(24, 50, 74, .12);
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.contact-line{margin: 10px 0 0 0; color: var(--ink2); font-weight: 900}
.contact-actions{display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end}

/* Trailer */
.trailer-card{
  border-radius: var(--radius-xl);
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(240,128,0,.10), transparent 60%),
    radial-gradient(900px 300px at 100% 10%, rgba(0,112,224,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 1px solid rgba(24, 50, 74, .10);
  box-shadow: var(--shadow);
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:center;
}
.trailer-copy h3{margin: 0 0 8px 0; font-size: 18px; font-weight: 1000}
.trailer-copy p{margin: 0 0 12px 0; color: var(--muted); line-height: 1.6; font-weight: 750}
.trailer-points{display:flex; flex-wrap:wrap; gap: 10px}
.trailer-frame{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 18px 44px rgba(20,44,70,.18);
  border: 1px solid rgba(24, 50, 74, .10);
}
.trailer-play{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.trailer-play span{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  font-weight: 1000;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.40);
  color: rgba(12,22,40,.90);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

/* Footer */
.footer{
  position: relative;
  background: linear-gradient(180deg, #2a5fd0, #143a86 65%, #0b2358);
  color: rgba(255,255,255,.96);
  padding: 90px 0 26px 0;
  overflow:hidden;
}
.footer-inner{position:relative}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
}
.footer-brand img{
  width: 160px;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.30));
}
.footer-brand p{margin:0; font-weight: 950; opacity:.95}

.footer-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px auto 0 auto;
  max-width: 560px;
}
.footer-col{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 14px 14px;
}
.footer-col h4{margin:0 0 8px 0; font-size: 14px; font-weight: 1000}
.footer-col a{
  display:block;
  padding: 8px 10px;
  border-radius: 14px;
  margin: 4px 0;
  color: rgba(255,255,255,.92);
  font-weight: 950;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.footer-col a:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  transform: translateX(2px);
}

/* Legal pages */
.legal{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.legal-card{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(24, 50, 74, .10);
  box-shadow: var(--shadow2);
  padding: 16px 16px;
}
.legal-card h2{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.2px;
  color: var(--ink);
}
.legal-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 750;
}
.legal-card ul{
  margin: 10px 0 0 18px;
  padding: 0;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 750;
}
.legal-card li{margin: 6px 0}

.footer-badges{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 16px;
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 18px;
  font-weight: 950;
  opacity: .95;
}
.footer-fine{opacity:.85}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:flex}
  .hero-splash-inner{grid-template-columns: 1fr; padding-bottom: 64px}
  .hero-art{min-height: 360px}
  .hero-title{text-align:center}
  .hero-tagline{text-align:center}
  .hero-ctas{justify-content:center}
  .feature-row{grid-template-columns: 1fr; gap: 14px}
  .games-grid{grid-template-columns: 1fr; gap: 14px}
  .news-grid{grid-template-columns: 1fr; gap: 14px}
  .contact-card{flex-direction:column; align-items:flex-start}
  .contact-actions{justify-content:flex-start}
  .trailer-card{grid-template-columns: 1fr}
  .footer-cols{grid-template-columns: 1fr}
}

@media (max-width: 640px){
  .container{width: calc(100% - 28px)}
  .hero-kicker{font-size: 20px}
  .hero-wordmark{font-size: 48px}
  .btn{padding: 11px 16px; font-size: 14px}
  .btn-wide{min-width: 180px; padding: 12px 18px}
  .title-gradient{font-size: 32px}
  .section-title{text-align:center}
  .feature-card, .game-card, .news-card{border-radius: var(--radius-lg)}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* Design annotations layer (only for design.html) */
.anno-toggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display:none;
}
body.design .anno-toggle{display:inline-flex}
body.design .anno{
  outline: 2px dashed rgba(0,112,224,.55);
  outline-offset: 4px;
  position:relative;
}
body.design .anno::after{
  content: attr(data-anno);
  position:absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing:.2px;
  color: rgba(12,22,40,.92);
  background: linear-gradient(135deg, rgba(57,214,255,.92), rgba(255,168,62,.92));
  padding: 6px 8px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
body.design[data-anno="off"] .anno{outline:none}
body.design[data-anno="off"] .anno::after{display:none}