/* Главная svetorod.ru, 14.10.2026: мир изобретателя со звёздным мышлением. Всё внутри .gl, шапка и подвал общие */
.gl{background:var(--night); color:var(--star); font:18px/1.6 var(--f-body)}
.gl b,.gl strong{color:inherit}
.gl p{max-width:none}
.gl h1,.gl h2,.gl h3,.gl h4{color:inherit}
.gl :focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.gl{
  --night:#1c2257; --night-2:#252c6b; --night-3:#2c3580; --night-line:#4553a6;
  --star:#fff6df; --star-muted:#c3c6e6;
  --paper:#fbf6ea; --paper-2:#f3ead6; --paper-line:#e3cfa6;
  --ink:#2a2114; --ink-muted:#6a5a42;
  --gold:#f5b73c; --gold-deep:#a8540f; --gold-ink:#2a1d05;
  --f-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:"PT Serif", Georgia, "Times New Roman", serif;
  --f-ui:"PT Sans", "Segoe UI", Arial, sans-serif;
  
}
.gl .wrap{max-width:1120px; margin:0 auto; padding-inline:20px}
.gl h1,.gl h2,.gl h3,.gl h4{font-family:var(--f-display); text-wrap:balance; line-height:1.12; margin:0}
.gl p{margin:0}
.gl a{color:inherit}
.gl .lab{font:700 15.5px/1.25 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.gl .gbtn{display:inline-flex; align-items:center; gap:8px; font:700 16px/1 var(--f-ui); padding:15px 22px; border-radius:999px; text-decoration:none; border:1.5px solid transparent; cursor:pointer}
.gl .gbtn.main{background:var(--gold); color:var(--gold-ink); box-shadow:0 0 28px rgba(245,183,60,.45)}
.gl .gbtn.main:hover{transform:translateY(-1px); box-shadow:0 0 40px rgba(245,183,60,.6)}
.gl .gbtn.line{border-color:rgba(255,246,223,.45); color:var(--star)}
.gl .gbtn.line:hover{border-color:var(--gold)}
@media (max-width:820px){}
.gl .ghero{position:relative; overflow:hidden; isolation:isolate}
.gl .ghero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.gl .ghero .wrap{display:grid; grid-template-columns:1.25fr .9fr; gap:34px; align-items:center; padding-block:70px 80px}
.gl .ghero h1{font-size:clamp(36px,5.6vw,64px); color:var(--star); margin:14px 0 18px; text-shadow:0 2px 20px rgba(20,24,70,.8)}
.gl .ghero h1 em{font-style:italic; color:var(--gold)}
.gl .ghero .sub{font-size:clamp(17px,1.6vw,20px); color:var(--star); max-width:56ch; text-shadow:0 1px 10px rgba(20,24,70,.9)}
.gl .ghero .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.gl .facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; font:700 14px/1 var(--f-ui)}
.gl .facts span{padding:8px 12px; border-radius:999px; background:rgba(44,53,128,.75); border:1px solid var(--night-line); color:var(--star-muted)}
.gl .iskorka{position:relative; justify-self:center; width:min(100%,420px)}
.gl .iskorka img{width:100%; border-radius:50%; aspect-ratio:1; object-fit:cover; object-position:40% 45%; border:3px solid rgba(245,183,60,.7); box-shadow:0 0 60px rgba(245,183,60,.35), 0 0 0 12px rgba(245,183,60,.08)}
.gl .iskorka figcaption{position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); white-space:nowrap; background:var(--gold); color:var(--gold-ink); font:700 14px/1 var(--f-ui); padding:9px 14px; border-radius:999px}
@media (max-width:860px){.gl .ghero .wrap{grid-template-columns:1fr; padding-block:44px 60px}
.gl .iskorka{width:min(80%,320px); order:-1}}
.gl .paper{background:var(--paper); color:var(--ink);
  background-image:linear-gradient(rgba(168,84,15,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(168,84,15,.07) 1px,transparent 1px); background-size:26px 26px}
.gl .paper .lab{color:var(--gold-deep)}
.gl .paper h2{color:var(--ink)}
.gl .sec{padding-block:clamp(56px,8vw,96px)}
.gl .head{display:grid; gap:12px; max-width:760px; margin-bottom:34px}
.gl .head h2{font-size:clamp(30px,4.2vw,46px)}
.gl .head p{font-size:19px; color:inherit; opacity:.85}
.gl .path{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:st; position:relative}
.gl .step{position:relative; background:#fffdf7; border:1.5px solid var(--paper-line); border-radius:16px; padding:18px 16px 18px; display:grid; gap:10px; align-content:start; min-width:0}
.gl .step::before{counter-increment:st; content:counter(st); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--night); color:var(--gold); font:800 17px/1 var(--f-ui); box-shadow:0 0 0 4px rgba(245,183,60,.25)}
.gl .step h3{font-size:19px; color:var(--ink)}
.gl .step p{font-size:15.5px; line-height:1.5; color:var(--ink-muted)}
.gl .step svg{width:100%; height:74px; display:block}
@media (max-width:980px){.gl .path{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}}
.gl .quote{margin-top:34px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; background:var(--night); color:var(--star); border-radius:18px; padding:22px 26px}
.gl .quote b{font:800 52px/1 var(--f-display); color:var(--gold)}
.gl .quote p{font:italic 20px/1.5 var(--f-body)}
.gl .cosmos{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 80% 10%, #36409a 0%, var(--night) 60%)}
.gl .cosmos .grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.gl .cosmos .big{font:italic 600 clamp(26px,3.4vw,38px)/1.3 var(--f-display); color:var(--star)}
.gl .cosmos .big em{color:var(--gold)}
.gl .cosmos .txt{display:grid; gap:16px; font-size:18.5px; color:var(--star-muted)}
.gl .cosmos .txt b{color:var(--star)}
.gl .dream{margin-top:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.gl .dream div{background:rgba(44,53,128,.6); border:1px solid var(--night-line); border-radius:14px; padding:16px; display:grid; gap:6px}
.gl .dream h4{font-size:19px; color:var(--gold)}
.gl .dream p{font-size:15.5px; color:var(--star-muted); line-height:1.5}
@media (max-width:860px){.gl .cosmos .grid{grid-template-columns:1fr}
.gl .dream{grid-template-columns:1fr}}
.gl .map{display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:stretch}
.gl .sky{position:relative; border-radius:22px; overflow:hidden; background:radial-gradient(90% 80% at 50% 40%, #2a3380, #161b4a); border:1px solid var(--night-line); min-height:420px}
.gl .sky svg{position:absolute; inset:0; width:100%; height:100%}
.gl .sky .ln{stroke:rgba(245,183,60,.45); stroke-width:1.5; stroke-dasharray:5 6; fill:none}
.gl .st{cursor:pointer}
.gl .st circle.halo{fill:rgba(245,183,60,.16); transition:r .25s}
.gl .st path{fill:var(--gold); transition:transform .25s}
.gl .st text{fill:var(--star); font:700 15px var(--f-ui); paint-order:stroke; stroke:#161b4a; stroke-width:5px; stroke-linejoin:round}
.gl .st text.age{fill:var(--star-muted); font-weight:400; font-size:12.5px}
.gl .st:hover circle.halo,.gl .st.on circle.halo{r:30}
.gl .st:focus{outline:none}
.gl .st:focus-visible circle.halo{stroke:var(--gold); stroke-width:2}
.gl .st.on path{fill:#fff3c4}
.gl .st.soon path{fill:var(--star-muted)}
.gl .panel{background:var(--night-2); border:1px solid var(--night-line); border-radius:22px; padding:24px; display:grid; gap:12px; align-content:start; min-width:0}
.gl .panel .tag{justify-self:start; font:700 12px/1 var(--f-ui); padding:6px 10px; border-radius:999px; background:var(--gold); color:var(--gold-ink)}
.gl .panel .tag.soon{background:transparent; border:1px solid var(--star-muted); color:var(--star-muted)}
.gl .panel h3{font-size:28px; color:var(--star)}
.gl .panel .who{font:700 15px/1.3 var(--f-ui); color:var(--gold)}
.gl .panel p{color:var(--star-muted); font-size:17px}
.gl .panel ul{margin:0; padding-left:20px; display:grid; gap:6px; color:var(--star); font-size:16.5px}
.gl .panel .acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.gl .panel .gbtn{padding:12px 18px; font-size:15px}
.gl .hint{font:14px/1.4 var(--f-ui); color:var(--star-muted); margin-top:12px}
@media (max-width:900px){.gl .map{grid-template-columns:1fr}
.gl .sky{min-height:360px}}
.gl .board{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.gl .shots{position:relative; aspect-ratio:1.15; max-width:100%}
.gl .shots img{position:absolute; border-radius:14px; border:1px solid var(--paper-line); box-shadow:0 18px 40px rgba(120,90,35,.22); background:#fff}
.gl .shots .a{left:0; top:6%; width:62%; transform:rotate(-3deg)}
.gl .shots .b{right:0; top:0; width:50%; transform:rotate(4deg)}
.gl .shots .c{left:20%; bottom:0; width:58%; transform:rotate(1.5deg)}
.gl .tools{display:grid; gap:14px}
.gl .tool{display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:start}
.gl .tool i{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--night); color:var(--gold); font:700 20px/1 var(--f-display); font-style:normal}
.gl .tool h3{font-size:20px; color:var(--ink)}
.gl .tool p{font-size:16px; color:var(--ink-muted); line-height:1.5}
@media (max-width:860px){.gl .board{grid-template-columns:1fr}}
.gl .try{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center}
.gl .sud{display:grid; grid-template-columns:repeat(4,64px); grid-template-rows:repeat(4,64px); background:#6b3f1d; padding:10px; border-radius:16px; gap:4px; box-shadow:0 18px 40px rgba(120,90,35,.3)}
.gl .sud button{border:0; border-radius:8px; background:#fffaf0; font:700 28px/1 var(--f-ui); color:var(--gold-deep); cursor:pointer}
.gl .sud button.giv{color:var(--ink); cursor:default; background:#f3e3c3}
.gl .sud button.star{background:#fff3c4; color:var(--gold-deep)}
.gl .sud button.star:empty::before{content:"★"; color:var(--gold)}
.gl .sud button:nth-child(4n+2){margin-right:4px}
.gl .sud .r2{margin-bottom:4px}
.gl .sud button.bad{background:#f6d3cb}
.gl .try .msg{min-height:1.6em; font:700 18px/1.4 var(--f-ui); color:var(--gold-deep)}
.gl .try ol{margin:12px 0 0; padding-left:22px; display:grid; gap:6px; color:var(--ink-muted)}
@media (max-width:760px){.gl .try{grid-template-columns:1fr; justify-items:start}
.gl .sud{grid-template-columns:repeat(4,56px); grid-template-rows:repeat(4,56px)}}
.gl .games{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:16px}
.gl .game{position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:18px; overflow:hidden; background:var(--night-2); border:1px solid var(--night-line); text-decoration:none; transition:transform .25s, box-shadow .25s; min-width:0}
.gl .game:hover{transform:translateY(-4px); box-shadow:0 0 30px rgba(245,183,60,.3)}
.gl .game .pic{aspect-ratio:10/7; overflow:hidden; background:#f3e3c3}
.gl .game .pic img{width:100%; height:100%; object-fit:cover; display:block}
.gl .game .body{padding:14px 16px 16px; display:grid; gap:5px; align-content:start}
.gl .game h3{font-size:20px; color:var(--star)}
.gl .game p{font-size:15px; line-height:1.45; color:var(--star-muted)}
.gl .game .t{position:absolute; top:10px; left:10px; font:700 12px/1 var(--f-ui); padding:6px 9px; border-radius:999px; background:var(--gold); color:var(--gold-ink)}
.gl .bridge{margin-top:28px; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:rgba(245,183,60,.1); border:1px dashed rgba(245,183,60,.6); border-radius:18px; padding:18px 22px}
.gl .bridge p{font-size:18px; max-width:60ch}
.gl .gfounder{display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:start}
.gl .portrait{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:var(--night); display:grid; place-items:center; color:var(--star-muted); text-align:center; padding:20px; border:1px solid var(--paper-line)}
.gl .portrait img{width:58%; border-radius:50%; box-shadow:0 0 50px rgba(245,183,60,.4)}
.gl .portrait span{position:absolute; bottom:16px; left:16px; right:16px; font:14px/1.4 var(--f-ui)}
.gl .gfounder .say{font:italic 600 clamp(24px,2.8vw,32px)/1.3 var(--f-display); color:var(--ink)}
.gl .gfounder .say em{color:var(--gold-deep)}
.gl .gfounder .txt{display:grid; gap:14px; margin-top:18px; color:var(--ink); font-size:18px}
.gl .exp{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px}
.gl .exp div{background:#fffdf7; border:1.5px solid var(--paper-line); border-radius:12px; padding:12px 14px; font:15.5px/1.4 var(--f-ui); color:var(--ink-muted)}
.gl .exp b{display:block; font:700 17px/1.3 var(--f-display); color:var(--ink); margin-bottom:2px}
@media (max-width:860px){.gl .gfounder{grid-template-columns:1fr}
.gl .portrait{max-width:340px}
.gl .exp{grid-template-columns:1fr}}
.gl .pain-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.gl .pain-tabs button,.gl .ch-tabs button{border:1.5px solid var(--paper-line); background:#fffdf7; border-radius:999px; padding:9px 15px; font:700 15px/1 var(--f-ui); color:var(--ink); cursor:pointer}
.gl .pain-tabs button[aria-pressed="true"],.gl .ch-tabs button[aria-pressed="true"]{background:var(--night); border-color:var(--night); color:var(--gold)}
.gl .pains{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:14px}
.gl .pain{background:#fffdf7; border:1.5px solid var(--paper-line); border-radius:18px; padding:18px; display:grid; gap:10px; align-content:start; min-width:0}
.gl .pain .top2{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.gl .pain h3{font-size:22px; color:var(--ink)}
.gl .pain .cl{font:700 13px/1 var(--f-ui); color:var(--gold-deep); white-space:nowrap}
.gl .pain .bol{font:italic 16.5px/1.45 var(--f-body); color:#8a3a22; background:#fbeee6; border-radius:10px; padding:9px 12px}
.gl .pain .lek{font:15.5px/1.5 var(--f-ui); color:var(--ink)}
.gl .pain .lek b{color:var(--gold-deep)}
.gl .pain .go{justify-self:start; font:700 14.5px/1 var(--f-ui); padding:10px 14px; border-radius:999px; background:var(--gold); color:var(--gold-ink); text-decoration:none}
.gl .pain.soon .go{background:transparent; border:1.5px dashed var(--paper-line); color:var(--ink-muted)}
.gl .cure{margin-top:26px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; background:var(--night); color:var(--star); border-radius:18px; padding:20px 24px}
.gl .cure img{width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:40% 45%; border:2px solid var(--gold)}
.gl .cure p{font-size:18.5px}
.gl .cure b{color:var(--gold)}
/* 15.10.2026: «Закажи игру» внизу блока «Тема не даётся?» -> svetorod.ru/zakaz/ */
.gl .zakaz-cta{margin-top:14px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; background:#fffdf7; border:2px dashed var(--gold-deep); border-radius:18px; padding:18px 22px; color:var(--ink)}
.gl .zakaz-cta img{width:84px; height:84px; border-radius:50%; object-fit:cover; border:2px solid var(--gold)}
.gl .zakaz-cta h3{font-size:clamp(20px,2.4vw,26px); margin:6px 0 4px; color:var(--ink)}
.gl .zakaz-cta p{font-size:16.5px; color:var(--ink-muted)}
@media (max-width:700px){.gl .zakaz-cta{grid-template-columns:auto 1fr}.gl .zakaz-cta .gbtn{grid-column:1 / -1; justify-content:center}}
.gl .choose{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start}
.gl .ch-box{background:#fffdf7; border:1.5px solid var(--paper-line); border-radius:20px; padding:22px; min-width:0}
.gl .ch-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.gl .ch-list{display:grid; gap:10px}
.gl .ch-item{display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:center; border-top:1px dashed var(--paper-line); padding-top:10px}
.gl .ch-item b{font:700 18px/1.3 var(--f-display); color:var(--ink)}
.gl .ch-item span{font:15px/1.4 var(--f-ui); color:var(--ink-muted); grid-column:1}
.gl .ch-item a{grid-row:1/3; grid-column:2; font:700 14px/1 var(--f-ui); color:var(--gold-deep); text-decoration:none; white-space:nowrap}
.gl .tarifs{display:grid; gap:12px}
.gl .tarif{border-radius:18px; padding:20px; display:grid; gap:6px; background:#fffdf7; border:1.5px solid var(--paper-line)}
.gl .tarif.hit{background:var(--night); color:var(--star); border-color:var(--night); box-shadow:0 0 0 4px rgba(245,183,60,.35)}
.gl .tarif .price{font:800 40px/1 var(--f-display); color:var(--gold-deep); font-variant-numeric:tabular-nums}
.gl .tarif.hit .price{color:var(--gold)}
.gl .tarif .price small{font:700 16px/1 var(--f-ui); opacity:.8}
.gl .tarif h3{font-size:21px}
.gl .tarif.hit h3{color:var(--star)}
.gl .tarif p{font:15.5px/1.5 var(--f-ui); color:var(--ink-muted)}
.gl .tarif.hit p{color:var(--star-muted)}
.gl .tarif .gbtn{justify-self:start; margin-top:6px; padding:12px 18px; font-size:15px}
@media (max-width:900px){.gl .choose{grid-template-columns:1fr}}
.gl .cta{text-align:center; display:grid; gap:18px; justify-items:center}
.gl .cta h2{font-size:clamp(30px,4.4vw,48px)}
.gl .cta p{max-width:58ch; color:var(--star-muted); font-size:19px}
@media (prefers-reduced-motion: reduce){}