*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff9ef;color:#26334a}
body{overflow-x:hidden}
button,a{font:inherit}
a{text-decoration:none;color:inherit}
.portal{min-height:100vh;position:relative;overflow:hidden;background:
radial-gradient(circle at 7% 10%,#fff 0 7%,transparent 20%),
radial-gradient(circle at 92% 18%,#fff1bd 0 7%,transparent 20%),
radial-gradient(circle at 10% 82%,#d9f6ff 0 8%,transparent 23%),
radial-gradient(circle at 90% 84%,#f0e3ff 0 8%,transparent 22%),
linear-gradient(145deg,#fffaf0 0%,#eefbff 50%,#fff2fb 100%);
padding-bottom:50px}
.portal:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.52;
background-image:radial-gradient(circle,#ffd76b 0 3px,transparent 4px),radial-gradient(circle,#9edfff 0 4px,transparent 5px),radial-gradient(circle,#d7b8ff 0 3px,transparent 4px);
background-size:125px 145px,180px 170px,155px 190px;background-position:20px 40px,80px 10px,45px 95px}
.topbar{position:sticky;top:0;z-index:20;height:70px;display:flex;align-items:center;justify-content:space-between;padding:10px max(18px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid #eadff5}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#ffca42,#ff8d8d);color:#fff;font-size:23px;font-weight:900;box-shadow:0 7px 16px #e9b8a555}
.brand strong{display:block;font-size:16px;line-height:1}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:#836e9b}
.sound{width:42px;height:42px;border:0;border-radius:14px;background:#fff;box-shadow:0 5px 15px #59417a18;font-size:19px}
.hero{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:55px 18px 25px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;color:#8d72aa}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-3px;margin:12px 0}
.hero h1 span{color:#7c57d8}
.hero p{font-size:18px;color:#42516a;max-width:600px;line-height:1.55;margin:0 0 20px}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:13px 21px;font-weight:900}
.primary{background:linear-gradient(135deg,#7b59d8,#9b62ea);color:#fff;box-shadow:0 10px 24px #7655c744}
.secondary{background:#fff;border:1px solid #e4d9ef;color:#3c4960}
.hero-art{min-height:320px;display:grid;place-items:center;position:relative}
.hero-card{width:min(360px,90%);padding:25px;border-radius:36px;background:rgba(255,255,255,.9);border:1px solid #eadff4;box-shadow:0 25px 70px #536b8626;text-align:center;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:#ffe08b;left:-55px;top:-55px}
.hero-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:#d9c7ff;right:-70px;bottom:-70px}
.hero-card img{width:190px;height:190px;object-fit:cover;border-radius:50%;border:8px solid #fff;margin:5px auto 15px;box-shadow:0 15px 35px #7358a42c;position:relative;z-index:1}
.hero-card strong{display:block;font-size:24px;position:relative;z-index:1}.hero-card small{display:block;color:#5d6b82;margin-top:5px;position:relative;z-index:1}
.section{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:25px 18px}
.section-head{text-align:center;margin-bottom:20px}.section-head h2{font-size:clamp(28px,4vw,42px);margin:7px 0}.section-head p{color:#53627a;margin:0}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.game-card{background:rgba(255,255,255,.94);border:1px solid #e7dcef;border-radius:26px;padding:20px;box-shadow:0 15px 35px #536b8618;transition:.2s;position:relative;overflow:hidden}
.game-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px #536b8628}
.game-icon{height:130px;border-radius:20px;display:grid;place-items:center;font-size:66px;background:linear-gradient(145deg,#fff1c7,#e5f8ff)}
.game-card:nth-child(2) .game-icon{background:linear-gradient(145deg,#ffe2e8,#eee3ff)}
.game-card:nth-child(3) .game-icon{background:linear-gradient(145deg,#ddf9e8,#fff3c8)}
.game-card:nth-child(4) .game-icon{background:linear-gradient(145deg,#e1ecff,#ffe3ef)}
.game-card:nth-child(5) .game-icon{background:linear-gradient(145deg,#fff0d7,#e5f1ff)}
.game-card:nth-child(6) .game-icon{background:linear-gradient(145deg,#e8e1ff,#e1f9f5)}
.game-card h3{margin:15px 0 6px;font-size:21px}.game-card p{color:#5d6b82;font-size:14px;line-height:1.45;min-height:42px}
.play-card{display:inline-flex;margin-top:8px;padding:10px 15px;border-radius:13px;background:#7b59d8;color:#fff;font-weight:800;font-size:14px}
.coming{background:#f2eef8;color:#7d708d}.tag{position:absolute;right:15px;top:15px;font-size:9px;letter-spacing:1px;font-weight:900;color:#8d72aa;background:#fff;padding:6px 8px;border-radius:99px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}.feature{background:#ffffffcc;border:1px solid #eadff4;border-radius:18px;padding:15px;text-align:center}.feature b{display:block;font-size:13px;margin-top:5px}.feature span{font-size:25px}
.footer{text-align:center;color:#65738a;font-size:12px;padding:25px 18px;position:relative;z-index:1}
@media(max-width:850px){.hero{grid-template-columns:1fr;text-align:center;padding-top:35px}.hero p{margin-left:auto;margin-right:auto}.hero-buttons{justify-content:center}.hero-art{min-height:270px}.games{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.hero h1{font-size:43px}.hero p{font-size:16px}.games{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}.game-icon{height:110px}.hero-card{width:310px}.hero-card img{width:160px;height:160px}}