:root{
  --bg:#1b1a3a; --bg2:#22204a; --card:#28265a; --line:#3d3a78;
  --gold:#e3b23c; --gold2:#f4d58d; --text:#f5efe3; --muted:#bdb6d6;
  --violet:#8b6cff; --violet2:#c9b6ff;
  /* кольори продуктів (як в Інстаграмі) */
  --p-top:#f2369b; --p-gc:#1fa64a; --p-access:#29b6e8; --p-zirka:#8b6cff; --p-create:#e8262b; --p-yellow:#ffc72c;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:17px/1.65 Inter,system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:var(--gold2)}
h1,h2,h3{font-family:Oswald,Impact,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
h1{font-size:clamp(44px,9vw,104px)}
h2{font-size:clamp(32px,5.5vw,60px);margin-bottom:28px}
h2 .star{color:var(--gold);margin-right:10px}
h3{font-size:24px;margin-bottom:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:80px 0}
.muted{color:var(--muted)}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(27,26,58,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-family:Oswald,sans-serif;font-size:22px;text-transform:uppercase;color:var(--text);text-decoration:none;letter-spacing:.04em}
.logo span{color:var(--gold)}
nav{display:flex;gap:22px;align-items:center}
nav a{color:var(--text);text-decoration:none;font-size:15px}
nav a:hover,nav a.on{color:var(--gold)}
.burger{display:none;background:none;border:0;color:var(--text);font-size:28px;cursor:pointer}
@media(max-width:760px){
  .burger{display:block}
  nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--bg2);padding:20px;border-bottom:1px solid var(--line)}
  nav.open{display:flex}
}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:#1a1405;font-weight:600;text-decoration:none;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;font-size:16px}
.btn:hover{background:var(--gold2)}
.btn.ghost{background:transparent;color:var(--gold2);border:1px solid var(--gold)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;padding:0 0 70px;
  background:radial-gradient(ellipse at 15% 5%,rgba(139,108,255,.38),transparent 55%),radial-gradient(ellipse at 90% 80%,rgba(227,178,60,.18),transparent 50%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;width:100%}
.hero .role{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.3em;color:var(--gold);margin:14px 0 18px}
.hero p.lead{font-size:20px;max-width:560px}
.hero .photo{border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;object-fit:cover;width:100%}
@media(max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero{min-height:auto;padding-top:40px}}

/* grids & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card .price{font-family:Oswald,sans-serif;font-size:22px;color:var(--gold)}
.card .tag{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.card .btn{align-self:flex-start;margin-top:auto}
.card img{border-radius:14px;aspect-ratio:16/10;object-fit:cover;width:100%}
.band{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.list{list-style:none;display:grid;gap:14px}
.list li{padding-left:30px;position:relative}
.list li:before{content:"✦";position:absolute;left:0;color:var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:30px}
.stat b{display:block;font-family:Oswald,sans-serif;font-size:44px;color:var(--gold)}
.quote{font-size:15px}
.quote b{display:block;color:var(--gold2);margin-top:10px}
section[id],.block[id]{scroll-margin-top:80px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chips a{border:1px solid var(--gold);color:var(--gold2);text-decoration:none;padding:8px 16px;border-radius:999px;font-size:15px}
.chips a:hover{background:var(--gold);color:#1a1405}
.block{border-top:1px solid var(--line);padding:36px 0;display:flex;flex-direction:column;gap:12px;max-width:820px}
.block h3{font-size:clamp(26px,4vw,38px)}
.block .tag{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.block .btn,.block .btns{align-self:flex-start}
.accent{color:var(--violet2);font-style:italic}
.prices{display:flex;flex-wrap:wrap;gap:14px}
.prices div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;font-size:14px;color:var(--muted)}
.prices b{display:block;font-family:Oswald,sans-serif;font-size:24px;color:var(--gold)}
.video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.todo{outline:1px dashed #c9693a;outline-offset:4px}

/* blog */
.post-card a{color:var(--text);text-decoration:none}
.post-card a:hover h3{color:var(--gold)}
article.post{max-width:740px;margin:0 auto;padding:60px 20px}
article.post h1{font-size:clamp(34px,6vw,56px);margin-bottom:16px}
article.post h2{font-size:30px;margin:40px 0 14px}
article.post p,article.post ul{margin-bottom:18px}
article.post ul{padding-left:22px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:20px}
.cta{background:var(--card);border:1px solid var(--gold);border-radius:20px;padding:28px;margin-top:40px}

footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer a{color:var(--text)}

/* зірковий пил на фоні */
body{background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 72% 8%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 40% 60%,rgba(201,182,255,.45),transparent),radial-gradient(1px 1px at 88% 42%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 25% 85%,rgba(244,213,141,.4),transparent);background-attachment:fixed}
.band{background:linear-gradient(180deg,rgba(34,32,74,.9),rgba(27,26,58,.6))}
.hand{font-family:Caveat,cursive;font-weight:600;text-transform:none;letter-spacing:0}
h2 .star{color:var(--violet2)}
/* кожен продукт — свій колір */
.pc-top{--pc:var(--p-top)} .pc-gc{--pc:var(--p-gc)} .pc-access{--pc:var(--p-access)} .pc-zirka{--pc:var(--p-zirka)} .pc-create{--pc:var(--p-create)} .pc-drakon{--pc:#ff6b3d} .pc-kola{--pc:var(--p-yellow)}
[class*="pc-"] .tag{color:var(--pc)}
.card[class*="pc-"]{border-top:3px solid var(--pc)}
.block[class*="pc-"]{border-top:3px solid var(--pc);padding-top:30px}
.block[class*="pc-"] h3{color:var(--pc)}

/* ===================== ГЛИБИНА (12.11, відгук Дарії) =====================
   живий космос на фоні (script.js малює #sky), без полосок між блоками,
   картки — «скло», що пливе. Варіанти неба: html[data-sky="kosmos|siyvo|zoloto"] */
:root{--card:rgba(40,36,92,.42);--line:rgba(201,182,255,.14);--glass:rgba(30,27,72,.48)}
html{background:#07061a}
body{background:transparent!important;background-image:none!important}
#sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%)}
#sky canvas{position:absolute;inset:0;width:100%;height:100%}
#sky .neb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;will-change:transform;mix-blend-mode:screen}
#sky .n1{width:70vmax;height:55vmax;left:-20vmax;top:-12vmax;background:radial-gradient(closest-side,var(--neb1),transparent)}
#sky .n2{width:60vmax;height:60vmax;right:-22vmax;top:30vh;background:radial-gradient(closest-side,var(--neb2),transparent)}
#sky .n3{width:80vmax;height:50vmax;left:5vmax;top:110vh;background:radial-gradient(closest-side,var(--neb3),transparent)}
#sky .vign{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(3,2,14,.6) 100%)}
html,html[data-sky="kosmos"]{--sky1:#120f33;--sky2:#0b0a24;--sky3:#05040f;--neb1:rgba(139,108,255,.55);--neb2:rgba(242,54,155,.32);--neb3:rgba(41,182,232,.25);--star:255,246,230}
html[data-sky="siyvo"]{--sky1:#061a2c;--sky2:#081127;--sky3:#04050f;--neb1:rgba(31,200,160,.42);--neb2:rgba(139,108,255,.40);--neb3:rgba(41,182,232,.32);--star:220,245,255}
html[data-sky="zoloto"]{--sky1:#241133;--sky2:#140b24;--sky3:#07040e;--neb1:rgba(227,178,60,.38);--neb2:rgba(242,54,155,.34);--neb3:rgba(139,108,255,.38);--star:255,232,190}

/* без полосок: секції прозорі, межі зникають */
section,.band,.hero{background:transparent!important;border:0!important}
section{padding:100px 0;position:relative}
.band:before{content:"";position:absolute;inset:-60px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(139,108,255,.10),transparent 70%)}
header{background:rgba(10,9,30,.35);border-bottom:0;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transition:background .3s,box-shadow .3s}
header.scrolled{background:rgba(10,9,30,.7);box-shadow:0 10px 40px rgba(0,0,0,.35)}
@media(max-width:760px){nav{background:rgba(14,12,40,.96);border-bottom:0}}
footer{border-top:0;padding:70px 0 40px;background:linear-gradient(180deg,transparent,rgba(3,2,12,.6))}
.block{border-top:0!important;padding:34px 30px;margin:18px 0;background:var(--glass);border-radius:24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}

/* картки-скло з глибиною */
.card,.ring,.step,.sph,.include div,.prices div,.badges span{background:var(--glass)!important;border:1px solid rgba(255,255,255,.07)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
.card{position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.card:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(0,0,0,.45),0 0 40px rgba(var(--glow,139,108,255),.22),inset 0 1px 0 rgba(255,255,255,.1)}
.card[class*="pc-"],.block[class*="pc-"]{border-top:1px solid rgba(255,255,255,.07)!important}
.card[class*="pc-"]:after,.block[class*="pc-"]:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--pc) 28%,transparent),transparent 60%)}
.block[class*="pc-"]{position:relative}
.pc-top{--glow:242,54,155}.pc-gc{--glow:31,166,74}.pc-access{--glow:41,182,232}.pc-zirka{--glow:139,108,255}.pc-kola{--glow:255,199,44}.pc-drakon{--glow:255,107,61}
.card>*{position:relative;z-index:1}
.hero .photo{border:0;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 80px rgba(139,108,255,.25)}
.video{border:0;box-shadow:0 30px 80px rgba(0,0,0,.5)}

/* світіння заголовків */
h1{background:linear-gradient(180deg,#fff7e8 20%,var(--gold2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(227,178,60,.25))}
h2 .star{display:inline-block;text-shadow:0 0 18px currentColor;animation:twinkle 3.5s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.45;transform:scale(.85) rotate(20deg)}}
.btn{box-shadow:0 10px 30px rgba(227,178,60,.25);transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(227,178,60,.4)}
.btn.ghost{box-shadow:none;backdrop-filter:blur(6px)}
.hero .role.hand{font-family:Caveat,cursive!important;text-transform:none!important}

/* картки «пливуть» при появі */
.float{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.float.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.float{opacity:1;transform:none}h2 .star{animation:none}}

/* перемикач варіантів неба (лише для перегляду, на живому сайті прихований) */
#skypick{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;gap:6px;padding:8px;border-radius:999px;background:rgba(10,9,30,.75);backdrop-filter:blur(10px);font:13px Inter,sans-serif}
#skypick button{border:0;border-radius:999px;padding:7px 12px;cursor:pointer;background:transparent;color:#f5efe3}
#skypick button.on{background:var(--gold);color:#1a1405}
/* фото в описах ігор і сесій */
.pics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px}
.pics img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.4);transition:transform .4s}
.pics img:hover{transform:scale(1.03)}
@media(max-width:560px){.pics{grid-template-columns:1fr 1fr}.pics img:nth-child(3){display:none}}
/* рубрики блогу */
.rubrics{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.rubrics button{border:1px solid rgba(244,213,141,.35);background:rgba(30,27,72,.45);backdrop-filter:blur(8px);color:var(--text);padding:9px 16px;border-radius:999px;font:15px Inter,sans-serif;cursor:pointer;transition:.25s}
.rubrics button small{opacity:.55;margin-left:2px}
.rubrics button:hover{border-color:var(--gold)}
.rubrics button.on{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.rubrics button.zero{opacity:.5}
.post-card[hidden]{display:none}
/* усе, що чекає даних від Дарії, — видно лише локально; на живому сайті сховано */
.todo,[data-todo]{display:none!important}
html.local .todo,html.local [data-todo]{display:revert!important;outline:1px dashed #c9693a;outline-offset:4px}
/* малюнки від руки для сесій без фото */
.sketch{float:right;width:150px;height:150px;margin:0 0 10px 24px;overflow:visible}
.sketch g{fill:none;stroke:var(--gold2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough);
  filter:url(#rough) drop-shadow(0 0 6px rgba(244,213,141,.35))}
.sketch g>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1)}
.in .sketch g>*,.no-anim .sketch g>*{stroke-dashoffset:0}
.sketch g>*:nth-child(2){transition-delay:.3s}.sketch g>*:nth-child(3){transition-delay:.6s}.sketch g>*:nth-child(n+4){transition-delay:.9s}
.sketch g>[stroke-dasharray="4 6"]{stroke-dasharray:4 6;stroke-dashoffset:0}
.block[class*="pc-"] .sketch g{stroke:color-mix(in srgb,var(--pc) 60%,#fff)}
.card .sketch{float:none;width:110px;height:110px;margin:0 0 4px}
@media(max-width:560px){.sketch{width:96px;height:96px;margin-left:12px}}
@media(prefers-reduced-motion:reduce){.sketch g>*{stroke-dashoffset:0}}
.block .sketch{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:170px;height:170px;margin:0;float:none}
.block:has(.sketch){position:relative;padding-right:230px}
@media(max-width:760px){
  .block:has(.sketch){padding-right:30px}
  .block .sketch{position:static;transform:none;align-self:flex-end;width:96px;height:96px;margin:-8px -6px -40px 0}
}