:root { --bg:#050c18; --bg2:#0a1930; --surface:rgba(14,27,49,.78); --surface2:rgba(255,255,255,.045); --line:rgba(164,213,255,.16); --ink:#f7fbff; --muted:#a8b5c9; --green:#7cf0b7; --cyan:#61d5ff; --purple:#b69cff; --orange:#ff9d61; --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Space Grotesk",var(--font); --max:1240px; }
* { box-sizing:border-box; min-width:0; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; min-height:100vh; overflow-x:clip; color:var(--ink); font-family:var(--font); letter-spacing:-.018em; background:radial-gradient(circle at 10% 0%,rgba(97,213,255,.15),transparent 30rem),radial-gradient(circle at 92% 6%,rgba(182,156,255,.16),transparent 32rem),linear-gradient(180deg,var(--bg),var(--bg2)); }
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
button { font:inherit; }
.page-grid { position:fixed; inset:0; z-index:-1; opacity:.26; background-image:linear-gradient(rgba(124,240,183,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,240,183,.04) 1px,transparent 1px); background-size:30px 30px; }
.site-nav, main, .site-footer { width:min(var(--max),calc(100% - 32px)); margin-inline:auto; }
.site-nav { position:sticky; top:14px; z-index:50; display:flex; align-items:center; gap:22px; min-height:68px; margin-top:14px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(6,16,30,.78); backdrop-filter:blur(20px); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.site-brand { display:flex; align-items:center; gap:10px; margin-right:auto; font-family:var(--display); font-weight:800; }
.site-brand span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#06101e; background:linear-gradient(135deg,var(--green),var(--cyan)); font-weight:900; }
.site-menu { display:flex; align-items:center; gap:24px; color:var(--muted); font-size:.88rem; font-weight:800; }
.site-menu a:hover { color:var(--green); }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.05); cursor:pointer; }
.page-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:50px; padding:clamp(100px,14vw,170px) 0 78px; }
.kicker { margin:0; color:var(--green); font-size:.76rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.page-hero h1 { max-width:980px; margin:16px 0 24px; font-family:var(--display); font-size:clamp(3.5rem,7.7vw,7.7rem); line-height:.88; letter-spacing:-.075em; }
.page-hero p:not(.kicker) { max-width:760px; margin:0; color:var(--muted); font-size:1.08rem; line-height:1.72; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 20px; border:1px solid var(--line); border-radius:999px; font-weight:900; transition:transform .18s,box-shadow .18s,border-color .18s; }
.button:hover { transform:translateY(-2px); box-shadow:0 18px 48px rgba(0,0,0,.28); border-color:rgba(124,240,183,.42); }
.button.primary { color:#06101e; border-color:transparent; background:linear-gradient(110deg,var(--green),var(--cyan)); }
.button.secondary { background:rgba(255,255,255,.045); }
.hero-count { display:grid; place-items:center; width:150px; height:150px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.04); box-shadow:0 24px 80px rgba(0,0,0,.24); }
.hero-count strong { display:block; font-family:var(--display); font-size:3.2rem; line-height:1; }
.hero-count span { color:var(--muted); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.content-section { padding:72px 0; scroll-margin-top:95px; }
.section-head { max-width:820px; margin-bottom:30px; }
.section-head h2 { margin:10px 0 16px; font-family:var(--display); font-size:clamp(2.6rem,5.5vw,5.6rem); line-height:.94; letter-spacing:-.07em; }
.section-head p { margin:0; color:var(--muted); line-height:1.7; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.learning-card { display:flex; flex-direction:column; overflow:hidden; min-height:100%; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:0 26px 80px rgba(0,0,0,.22); transition:transform .2s,border-color .2s; }
.learning-card:hover { transform:translateY(-5px); border-color:rgba(124,240,183,.34); }
.card-media { position:relative; display:block; height:230px; overflow:hidden; background:#081220; }
.card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(4,9,19,.85)); }
.card-media > img:first-child { width:100%; height:100%; object-fit:cover; transition:transform .4s,filter .4s; }
.card-media:hover > img:first-child { transform:scale(1.04); filter:saturate(1.12); }
.card-media .subject { position:absolute; z-index:2; top:16px; left:16px; padding:7px 10px; border-radius:999px; color:#06101e; background:var(--green); font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.card-media .card-mark { position:absolute; z-index:2; left:17px; bottom:15px; width:60px; height:60px; border-radius:17px; box-shadow:0 15px 44px rgba(0,0,0,.46); }
.card-copy { display:flex; flex:1; flex-direction:column; padding:25px; }
.card-copy h3 { margin:0 0 12px; font-family:var(--display); font-size:clamp(1.8rem,2.6vw,2.8rem); line-height:.98; letter-spacing:-.065em; }
.card-copy p { margin:0; color:var(--muted); line-height:1.65; }
.card-copy ul { display:grid; gap:7px; margin:20px 0; padding-left:1.1rem; color:#cad5e7; font-size:.88rem; line-height:1.45; }
.card-copy .card-link { display:inline-flex; align-items:center; min-height:44px; margin-top:auto; color:var(--green); font-weight:900; }
.game-spotlight { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); overflow:hidden; border:1px solid var(--line); border-radius:32px; background:linear-gradient(145deg,#020711,#0a1d4a); box-shadow:0 30px 95px rgba(0,0,0,.32); }
.game-media { position:relative; min-height:430px; overflow:hidden; }
.game-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 54%,rgba(3,8,20,.86)); }
.game-media > img:first-child { width:100%; height:100%; object-fit:cover; }
.game-media .subject { position:absolute; z-index:2; top:20px; left:20px; padding:8px 11px; border-radius:999px; color:#061016; background:var(--cyan); font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.game-media .game-logo { position:absolute; z-index:2; left:20px; bottom:18px; width:72px; height:72px; border-radius:19px; box-shadow:0 16px 48px rgba(0,0,0,.45); }
.game-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,4.6vw,58px); }
.game-copy h3 { margin:16px 0 14px; font-family:var(--display); font-size:clamp(2.8rem,5vw,5.6rem); line-height:.9; letter-spacing:-.075em; }
.game-copy p { color:var(--muted); line-height:1.68; }
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:24px 0; }
.specs div { padding:13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); }
.specs dt { color:#71809f; font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.specs dd { margin:6px 0 0; font-weight:800; }
.hobby-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.hobby-grid article { padding:28px; border:1px solid var(--line); border-radius:23px; background:var(--surface2); }
.hobby-grid span { color:var(--green); font-size:.72rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.hobby-grid h3 { margin:13px 0 10px; font-family:var(--display); font-size:1.5rem; }
.hobby-grid p { margin:0; color:var(--muted); line-height:1.62; }
.info-note { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; margin-top:26px; padding:22px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.035); }
.info-note strong { color:var(--green); }
.info-note p { margin:0; color:var(--muted); line-height:1.58; }
.info-note a { color:var(--green); font-weight:900; white-space:nowrap; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:45px 0; color:var(--muted); font-size:.9rem; }
.site-footer a { color:var(--green); font-weight:900; }

@media (max-width:1000px) {
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-spotlight { grid-template-columns:1fr; }
  .game-media { min-height:330px; }
  .game-media::after { background:linear-gradient(180deg,transparent 56%,rgba(3,8,20,.86)); }
  .page-hero { grid-template-columns:1fr; }
  .hero-count { width:120px; height:120px; }
}
@media (max-width:760px) {
  .site-nav { width:calc(100% - 20px); min-height:62px; padding:8px 10px; gap:8px; }
  .site-brand span { width:40px; height:40px; }
  .menu-toggle { display:grid; place-items:center; }
  .site-menu { position:absolute; top:calc(100% + 8px); left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:2px; padding:10px; border:1px solid var(--line); border-radius:22px; background:#081425; box-shadow:0 25px 70px rgba(0,0,0,.42); }
  .site-menu.open { display:flex; }
  .site-menu a { min-height:44px; padding:12px 14px; border-radius:13px; }
  .site-menu a:hover { background:rgba(255,255,255,.05); }
  .page-hero { padding:90px 0 55px; }
  .page-hero h1 { font-size:clamp(3rem,15.5vw,5.2rem); }
  .hero-count { width:105px; height:105px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .button { width:100%; }
  .content-section { padding:55px 0; }
  .section-head h2 { font-size:clamp(2.45rem,12vw,4.3rem); }
  .card-grid, .hobby-grid { grid-template-columns:1fr; }
  .card-media { height:215px; }
  .game-media { min-height:245px; }
  .game-copy { padding:25px; }
  .specs { grid-template-columns:1fr; }
  .info-note { grid-template-columns:1fr; }
  .info-note a { white-space:normal; }
  .site-footer { flex-direction:column; }
}