:root {
  color-scheme: dark;
  --ink:#f7fbff;
  --muted:#a9bfd0;
  --navy:#06131e;
  --panel:#142d40;
  --yellow:#ffd447;
  --green:#2f9a75;
  --surface:#f4f7f3;
}

* { box-sizing: border-box; }
html { background: var(--navy); scroll-behavior: smooth; }
body {
  min-height:100vh;
  margin:0;
  color:var(--ink);
  background:radial-gradient(circle at 84% 2%,#24516a 0,transparent 29rem), linear-gradient(140deg,#06131e 0%,#102a3e 45%,#0b1723 100%);
  font-family:"Trebuchet MS",system-ui,sans-serif;
  overflow-x:hidden;
}

.hero {
  max-width:1240px;
  margin:auto;
  padding:16px 34px 24px;
  position:relative;
  display:grid;
  gap:16px;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:0 0 38px 38px;
  pointer-events:none;
}
.hero::after {
  content:"";
  position:absolute;
  right:4%;
  top:58px;
  width:260px;
  height:180px;
  opacity:.14;
  background:radial-gradient(circle at 50% 50%,transparent 0 24%,#fff 25% 26%,transparent 27% 44%,#fff 45% 46%,transparent 47%);
  filter:blur(1px);
}

.hero-top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }
.brand { display:inline-flex; align-items:center; gap:12px; color:white; text-decoration:none; font:800 23px "Trebuchet MS",sans-serif; letter-spacing:.02em; }
.brand-mark {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:12px;
  color:#173044;
  background:var(--yellow);
  transform:rotate(-5deg);
  box-shadow:0 7px 22px #06121e80;
}
.top-link {
  color:#dcecf7;
  text-decoration:none;
  font-weight:700;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.hero-copy {
  max-width:720px;
  margin-top:8px;
  position:relative;
  z-index:1;
  display:grid;
  gap:12px;
}
.eyebrow {
  margin:0;
  color:#70d9ae;
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
h1,h2,h3 { margin:0; font-family:"Trebuchet MS",sans-serif; line-height:.98; }
h1 { font-size:clamp(28px,4vw,44px); letter-spacing:-.035em; }
h1 span { color:var(--yellow); }
.intro { max-width:650px; margin:0; color:#c1d2df; font-size:16px; line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease;
  min-width:180px;
}
.btn:hover,.btn:focus-visible { transform:translateY(-2px); }
.btn-primary { color:#082030; background:var(--yellow); box-shadow:0 10px 22px rgba(255,212,71,.2); }
.btn-secondary { color:#f7fbff; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); }
main { background:var(--surface); color:#173044; border-radius:40px 40px 0 0; padding-bottom:20px; }
.library { max-width:1240px; margin:auto; padding:16px 34px 60px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.section-heading .eyebrow { color:#15815d; }
h2 { font-size:clamp(36px,5vw,54px); letter-spacing:-.02em; }
.game-count { margin:0; padding:8px 14px; color:#476074; background:#e1e9e5; border-radius:100px; font-weight:800; }
.game-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.game-card {
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  background:white;
  border:1px solid #dce5e2;
  border-radius:25px;
  text-decoration:none;
  box-shadow:0 12px 35px rgba(23,48,68,.08);
  transition:transform .22s ease, box-shadow .22s ease;
}
.game-card:hover,.game-card:focus-visible { transform:translateY(-7px); box-shadow:0 22px 45px rgba(23,48,68,.16); outline:3px solid var(--green); outline-offset:3px; }
.art { position:relative; height:230px; overflow:hidden; isolation:isolate; }
.play-badge { position:absolute; z-index:8; right:18px; bottom:18px; display:grid; place-items:center; width:48px; height:48px; padding-left:3px; border:3px solid #fff; border-radius:50%; color:white; background:#173044d9; box-shadow:0 6px 18px rgba(20,40,57,.35); }
.card-copy { flex:1; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; padding:25px 26px 24px; }
.category { margin:0 0 8px; color:#258666; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.card-copy h3 { font-size:32px; }
.card-copy p:not(.category) { margin:12px 0 22px; color:#5a6e7d; line-height:1.55; }
.play-link { display:flex; justify-content:space-between; align-items:center; padding-top:17px; border-top:1px solid #e2e9e6; font-weight:800; }
.play-link b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:#173044; font-size:20px; }
.gulli-art { background:linear-gradient(#78cfee 0 65%,#8ab851 65% 77%,#c88948 77%); }
.gulli-sun { position:absolute; width:54px; height:54px; right:25px; top:23px; border-radius:50%; background:#ffd84e; box-shadow:0 0 0 11px rgba(255,216,78,.2); }
.gulli-house { position:absolute; left:14px; bottom:47px; width:104px; height:74px; background:#e9935a; box-shadow:inset -10px 0 #cd7048; }
.gulli-house::before { content:""; position:absolute; left:-12px; top:-48px; border-left:64px solid transparent; border-right:64px solid transparent; border-bottom:54px solid #a94e38; }
.gulli-house::after { content:""; position:absolute; left:41px; bottom:0; width:26px; height:43px; background:#693a27; }
.gulli-tree { position:absolute; right:38px; bottom:42px; width:14px; height:91px; background:#76502c; }
.gulli-tree::before { content:""; position:absolute; width:76px; height:70px; left:-31px; top:-40px; border-radius:48% 52% 45% 55%; background:#3d884c; box-shadow:-22px 19px #4a9955,20px 17px #377a45; }
.gulli-player { position:absolute; z-index:3; left:43%; bottom:27px; width:39px; height:79px; border-radius:16px 16px 8px 8px; background:#db563d; box-shadow:inset 0 -18px #f0ad35; }
.gulli-player::before { content:""; position:absolute; width:30px; height:30px; left:5px; top:-29px; border-radius:50%; background:#a45f3b; box-shadow:0 -8px 0 -2px #30231d; }
.gulli-player::after { content:""; position:absolute; width:12px; height:35px; left:4px; bottom:-29px; border-radius:6px; background:#6a3826; box-shadow:22px 0 #6a3826; }
.gulli-player i { position:absolute; width:47px; height:10px; right:-36px; top:16px; border-radius:8px; background:#a45f3b; transform:rotate(-14deg); }
.danda { position:absolute; z-index:4; left:51%; bottom:96px; width:111px; height:9px; border-radius:8px; background:linear-gradient(90deg,#6d351d,#c17b39,#6d351d); transform:rotate(-29deg); transform-origin:left; }
.flying-gulli { position:absolute; z-index:5; left:68%; top:31%; width:41px; height:14px; border:2px solid #713619; border-radius:80% 18%; background:#e99535; transform:rotate(-16deg); box-shadow:0 5px 8px rgba(97,65,28,.24); }
.mango-art { background:linear-gradient(#67cbf3 0 76%,#72c95b 76%); }
.sun,.car-sun { position:absolute; width:58px; height:58px; right:26px; top:24px; border-radius:50%; background:#ffe45b; box-shadow:0 0 0 12px rgba(255,228,91,.18); }
.cloud { position:absolute; width:75px; height:24px; border-radius:30px; background:#fffddd; box-shadow:20px -12px 0 -2px #fffddd,-20px -5px 0 -5px #fffddd; opacity:.9; }
.cloud-one{left:35px;top:42px}
.cloud-two{right:87px;top:101px;transform:scale(.7)}
.fruit { position:absolute; width:30px; height:39px; border-radius:55% 45% 52% 48%; background:#ffad2f; transform:rotate(18deg); box-shadow:inset 8px 1px #ffcf49; }
.fruit::after{content:"";position:absolute;width:13px;height:6px;left:13px;top:-5px;border-radius:100% 0;background:#2f9c50}
.fruit-one{left:22%;top:32%}
.fruit-two{left:53%;top:20%;transform:rotate(-12deg) scale(.8)}
.fruit-three{right:18%;top:51%;transform:rotate(12deg) scale(.92)}
.basket { position:absolute; left:50%; bottom:4px; width:142px; height:72px; transform:translateX(-50%); background:repeating-linear-gradient(75deg,#bd6c35 0 8px,#e19b52 9px 17px); clip-path:polygon(5% 0,95% 0,81% 100%,19% 100%); }
.basket::before{content:"";position:absolute;inset:0 0 auto;height:13px;background:#81421f;border-radius:50%}
.car-art { background:linear-gradient(#74c9ef 0 46%,#55a955 46%); }
.car-sun{width:48px;height:48px;right:35px;top:26px}
.mountains{position:absolute;left:-5%;right:-5%;top:65px;height:75px;background:#66879a;clip-path:polygon(0 100%,12% 35%,23% 100%,39% 20%,55% 100%,72% 5%,89% 100%,100% 45%,100% 100%)}
.road { position:absolute; left:14%; right:14%; bottom:-15px; height:155px; background:#4c5158; clip-path:polygon(42% 0,58% 0,100% 100%,0 100%); }
.road-line{position:absolute;z-index:2;left:48%;bottom:0;width:4%;height:112px;background:repeating-linear-gradient(#ffd447 0 20px,transparent 20px 36px);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.race-car{position:absolute;z-index:4;left:50%;bottom:15px;width:108px;height:64px;transform:translateX(-50%);border-radius:38% 38% 20% 20%;background:#e9424a;box-shadow:inset 12px 0 #b52735,-9px 8px 0 -4px #1e252a,9px 8px 0 -4px #1e252a}.race-car::before{content:"";position:absolute;left:22px;top:-23px;width:64px;height:32px;background:#3f7791;clip-path:polygon(17% 0,83% 0,100% 100%,0 100%);border:5px solid #aa2935}.race-car i{position:absolute;left:14px;right:14px;bottom:10px;height:10px;border-radius:5px;background:linear-gradient(90deg,#ffbf46 0 23%,#7c1d29 23% 77%,#ffbf46 77%)}.star{position:absolute;z-index:3;left:26%;top:41%;color:#ffd447;font-size:32px;text-shadow:0 2px #b77b17}
.letter-art{background:linear-gradient(#9fdcf5 0 72%,#65b75b 72%)}.letter-cloud{position:absolute;left:12%;top:25px;width:76%;height:58px;border-radius:50%;background:#fff8dd99}.letter{position:absolute;font:800 49px "Trebuchet MS";text-shadow:0 3px #fff}.letter.a{left:18%;top:28%;color:#ec5a55;transform:rotate(-9deg)}.letter.b{left:47%;top:14%;color:#337ec4;transform:rotate(7deg)}.letter.g{right:16%;top:37%;color:#734fb2;transform:rotate(13deg)}
.letter-basket{position:absolute;bottom:0;width:105px;height:73px;padding-top:26px;text-align:center;color:#57341e;background:#d99149;clip-path:polygon(5% 0,95% 0,82% 100%,18% 100%);font:800 21px "Trebuchet MS"}.basket-a{left:18%}.basket-b{right:18%}
footer { max-width:1240px; margin:auto; display:flex; justify-content:space-between; padding:28px 34px; color:#9db5c5; font-size:14px; }
@media(max-width:1000px){
  .game-grid{grid-template-columns:1fr 1fr}
  .hero::after{display:none}
}
@media(max-width:760px){
  .hero{padding:24px 20px 40px; gap:20px}
  .hero-top{flex-direction:column; align-items:flex-start}
  .hero-copy{margin-top:0}
  .hero-actions{flex-direction:column; align-items:stretch}
  .btn{width:100%; min-width:0}
  .section-heading{flex-direction:column; align-items:flex-start; margin-bottom:20px}
  .game-grid{grid-template-columns:1fr 1fr; gap:18px}
  .card-copy{min-height:auto; padding:20px 20px 22px}
  .art{height:200px}
}
@media(max-width:580px){
  .hero{padding:20px 20px 34px}
  .hero-copy{margin-top:14px}
  .brand{font-size:20px}
  .intro{font-size:16px}
  .library{padding:48px 18px 60px}
  .game-grid{grid-template-columns:1fr}
  .game-card:last-child{grid-column:auto}
  .art{height:215px}
  .section-heading{align-items:start}
  .game-count{white-space:nowrap}
  footer{padding-inline:20px;gap:20px;flex-direction:column}
}

@media(max-width:460px){
  .hero{padding:16px 16px 22px; gap:14px;}
  .hero-top{gap:12px;}
  .top-link{padding:9px 12px; font-size:14px;}
  .hero-copy{gap:10px;}
  .hero::after{display:none;}
  .brand{font-size:18px;}
  h1{font-size:clamp(26px,5vw,36px); line-height:1.1;}
  .intro{font-size:15px; line-height:1.5;}
  .hero-actions{margin-top:6px;}
  .btn{padding:12px 16px; min-width:0;}
  .library{padding:18px 16px 50px;}
  .section-heading{margin-bottom:14px;}
  h2{font-size:clamp(28px,5vw,36px);}
  .game-grid{gap:16px;}
  .art{height:180px;}
  .card-copy{padding:18px 18px 20px;}
  footer{padding:18px 16px; gap:14px;}
}