/* SpilNote — новий сайт, варіант A «Нічний простір», акцент «Іній». Дві теми з однаковими блоками: ніч (типова) і світла.
   Тема — атрибут data-theme на <html> (ставить theme.js до малювання); без скриптів — за налаштуванням пристрою. */
:root{
  --bg:#070b14; --bg2:#0e1628; --bg3:#121c33; --ink:#e9eef6; --ink2:#b9c4d6; --ink3:#8f9bb1;
  --acc:#a9c0e3; --acc2:#c6d6ef; --acc-rgb:169,192,227; --on-acc:#0b1220; --acc-soft:#dfe8f6;
  --c-doc:#a9c0e3; --c-db:#7fc3e6; --c-st:#a99ce4; --c-dg:#6fc4a2; --c-cal:#dd94b6; --c-ai:#d9c27a; --c-site:#e39a8f;
  --s-doc:#0d1526; --s-db:#0b1a2a; --s-st:#140f2a; --s-dg:#08201c; --s-cal:#22101f; --s-ai:#19170b; --s-site:#211210; --s-more:#0e1628;
  --line:rgba(190,215,255,.12); --line2:rgba(190,215,255,.2);
  --card:rgba(10,16,30,.8); --card-in:rgba(255,255,255,.05); --card-in2:rgba(255,255,255,.09);
  --glass:rgba(12,18,33,.66); --menu:rgba(12,18,33,.97);
  --shadow:0 40px 90px -40px rgba(0,0,0,.9); --shadow-up:0 -40px 80px -20px rgba(0,0,0,.65);
  --sky-rgb:200,220,255; --sky-a:.55; --glow-a:26%; --ev-ink:#0b1120;
  --f-disp:'Unbounded','Onest',system-ui,sans-serif; --f-body:'Onest',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace; --f-draft:'SpDraft','JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1); --r:10px;
  color-scheme:dark;
}
:root[data-theme="light"]{ /* світла (Денис 15.10): усі блоки одного молочного кольору, як права частина сторінки входу (login.css --paper), без кольорових підкладок */
  --bg:#f3f1ea; --bg2:#f3f1ea; --bg3:#fbfaf6; --ink:#0e1626; --ink2:#3f4b62; --ink3:#5b6680;
  --acc:#3e5f8e; --acc2:#2f4d78; --acc-rgb:62,95,142; --on-acc:#ffffff; --acc-soft:#1f3a63;
  --c-doc:#3e5f8e; --c-db:#236a93; --c-st:#5446a8; --c-dg:#1f7354; --c-cal:#943762; --c-ai:#6b530c; --c-site:#a44533;
  --s-doc:#f3f1ea; --s-db:#f3f1ea; --s-st:#f3f1ea; --s-dg:#f3f1ea; --s-cal:#f3f1ea; --s-ai:#f3f1ea; --s-site:#f3f1ea; --s-more:#f3f1ea;
  --line:rgba(14,22,38,.1); --line2:rgba(14,22,38,.18);
  --card:rgba(255,255,255,.92); --card-in:rgba(14,22,38,.045); --card-in2:rgba(14,22,38,.08);
  --glass:rgba(255,255,255,.72); --menu:rgba(255,255,255,.98);
  --shadow:0 40px 80px -40px rgba(20,40,80,.28); --shadow-up:0 -30px 60px -24px rgba(20,40,80,.18);
  --sky-rgb:26,46,100; --sky-a:.55; --sky-l:.42; /* сузір'я першого екрана темно-сині, трохи помітніші (Денис 17.10, варіант A) */ --glow-a:0%; --ev-ink:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root:not([data-theme]){
  --bg:#f3f1ea; --bg2:#f3f1ea; --bg3:#fbfaf6; --ink:#0e1626; --ink2:#3f4b62; --ink3:#5b6680;
  --acc:#3e5f8e; --acc2:#2f4d78; --acc-rgb:62,95,142; --on-acc:#ffffff; --acc-soft:#1f3a63;
  --c-doc:#3e5f8e; --c-db:#236a93; --c-st:#5446a8; --c-dg:#1f7354; --c-cal:#943762; --c-ai:#6b530c; --c-site:#a44533;
  --s-doc:#f3f1ea; --s-db:#f3f1ea; --s-st:#f3f1ea; --s-dg:#f3f1ea; --s-cal:#f3f1ea; --s-ai:#f3f1ea; --s-site:#f3f1ea; --s-more:#f3f1ea;
  --line:rgba(14,22,38,.1); --line2:rgba(14,22,38,.18);
  --card:rgba(255,255,255,.92); --card-in:rgba(14,22,38,.045); --card-in2:rgba(14,22,38,.08);
  --glass:rgba(255,255,255,.72); --menu:rgba(255,255,255,.98);
  --shadow:0 40px 80px -40px rgba(20,40,80,.28); --shadow-up:0 -30px 60px -24px rgba(20,40,80,.18);
  --sky-rgb:26,46,100; --sky-a:.55; --sky-l:.42; /* сузір'я першого екрана темно-сині, трохи помітніші (Денис 17.10, варіант A) */ --glow-a:0%; --ev-ink:#ffffff; color-scheme:light}}
/* свої шрифти (CSP font-src 'self'); з Google — лише Unbounded для заголовків */
@font-face{font-family:'Onest';src:url(/assets/fonts/onest-lat.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';src:url(/assets/fonts/onest-latext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:'Onest';src:url(/assets/fonts/onest-cyr.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';src:url(/assets/fonts/onest-cyrext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0460-052F,U+20B4}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jbmono-lat.woff2) format('woff2');font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jbmono-cyr.woff2) format('woff2');font-weight:100 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'SpDraft';src:url(/assets/fonts/osifont.woff2) format('woff2');font-display:swap}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:16px;z-index:99;padding:8px 12px;background:var(--acc);color:var(--on-acc);border-radius:8px}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 12px 11px 18px;border-radius:var(--r);background:var(--acc);color:var(--on-acc);font-weight:700;font-size:15px;border:0;cursor:pointer;transition:transform .5s var(--ease),background .4s var(--ease)}
.btn>span{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(0,0,0,.1);transition:transform .5s var(--ease)}
.btn:hover{background:var(--acc2)}.btn:hover>span{transform:translate(2px,-2px)}.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card-in);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--card-in2)}
.btn.big{padding:15px 14px 15px 24px;font-size:17px}

/* ── острів-навігація ── */
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);max-width:calc(100% - 32px);transition:transform .6s var(--ease),box-shadow .5s var(--ease)}
.nav.tight{padding-block:4px;box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;gap:9px;font:800 18px/1 var(--f-disp);letter-spacing:-.04em;margin-right:10px;color:var(--ink)}
.logo svg{width:24px;height:24px}
.nav .l{padding:9px 12px;border-radius:9px;font-weight:500;font-size:14.5px;color:var(--ink2);background:none;border:0;cursor:pointer;font-family:inherit;transition:background .4s var(--ease),color .4s var(--ease)}
.nav .l:hover,.nav .menu.open>.l{background:var(--card-in);color:var(--ink)}
.nav .tri{display:inline-block;width:9px;height:9px;margin-left:6px;vertical-align:1px;transition:transform .4s var(--ease)}
.nav .menu.open .tri{transform:rotate(180deg)}
.nav .menu{position:relative}
.drop{position:absolute;top:calc(100% + 12px);left:-80px;width:600px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px;border-radius:14px;background:var(--menu);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;transform:translateY(8px) scale(.98);transform-origin:20% 0;pointer-events:none;transition:opacity .3s var(--ease),transform .5s var(--ease)}
.menu.open>.drop{opacity:1;transform:none;pointer-events:auto}
.drop a{display:flex;gap:12px;padding:10px;border-radius:9px;transition:background .3s var(--ease)}
.drop a:hover,.drop a:focus-visible{background:var(--card-in)}
.drop b{display:block;font-size:14.5px;color:var(--ink)}.drop small{color:var(--ink3);font-size:12.5px;line-height:1.35;display:block}
.drop .last{grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px;padding-top:12px;color:var(--ink2);font-size:13.5px}
/* живе мініпревʼю функції в меню */
.mp{flex:none;width:44px;height:36px;border-radius:8px;position:relative;overflow:hidden;background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.mp i{position:absolute;display:block;background:var(--c);border-radius:2px}
.mp.doc i{left:7px;height:3px;opacity:.85;animation:mpw 2.4s var(--ease) infinite}.mp.doc i:nth-child(1){top:8px;width:22px}.mp.doc i:nth-child(2){top:15px;width:28px;animation-delay:.3s}.mp.doc i:nth-child(3){top:22px;width:16px;animation-delay:.6s}
@keyframes mpw{0%{transform:scaleX(0);transform-origin:left}40%,100%{transform:scaleX(1);transform-origin:left}}
.mp.db i{width:8px;height:8px;border-radius:2px;animation:mpdb 3s var(--ease) infinite}.mp.db i:nth-child(1){left:7px;top:7px}.mp.db i:nth-child(2){left:18px;top:7px;animation-delay:.2s}.mp.db i:nth-child(3){left:29px;top:20px;animation-delay:.4s}
@keyframes mpdb{0%,100%{transform:none}50%{transform:translate(0,11px)}}
.mp.st i{left:6px;height:6px;border-radius:1px;opacity:.8;animation:mpst 2.6s var(--ease) infinite}.mp.st i:nth-child(1){top:6px;width:20px}.mp.st i:nth-child(2){top:15px;width:26px;left:12px;animation-delay:.4s}.mp.st i:nth-child(3){top:24px;width:16px;animation-delay:.8s}
@keyframes mpst{0%{opacity:0;transform:translateY(4px)}30%,100%{opacity:.85;transform:none}}
.mp.dg i{width:7px;height:7px;border-radius:2px}.mp.dg i:nth-child(1){left:6px;top:14px}.mp.dg i:nth-child(2){left:30px;top:6px}.mp.dg i:nth-child(3){left:30px;top:23px}
.mp.dg b{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--c);left:9px;top:16px;animation:mpdot 1.8s linear infinite}
@keyframes mpdot{to{transform:translate(22px,-8px)}}
.mp.cal i{width:8px;border-radius:2px;opacity:.85}.mp.cal i:nth-child(1){left:6px;top:6px;height:10px}.mp.cal i:nth-child(2){left:18px;top:14px;height:14px;animation:mpc 2.4s var(--ease) infinite}.mp.cal i:nth-child(3){left:30px;top:8px;height:8px}
@keyframes mpc{0%,30%{transform:scale(0)}55%,100%{transform:none}}
.mp.ai i{left:7px;top:8px;height:3px;width:0;animation:mpai 2.8s steps(10) infinite}.mp.ai i:nth-child(2){top:15px;animation-delay:.6s}.mp.ai i:nth-child(3){top:22px;animation-delay:1.2s}
@keyframes mpai{0%{width:0}50%,100%{width:28px}}
.mp.site i{left:6px;right:6px;height:3px}.mp.site i:nth-child(1){top:6px;opacity:.5}.mp.site i:nth-child(2){top:12px;bottom:6px;height:auto;opacity:.25;animation:mps 3s var(--ease) infinite}.mp.site i:nth-child(3){top:18px;left:12px;right:12px;opacity:.9}
@keyframes mps{0%,100%{transform:scale(.6)}50%{transform:none}}
.nav .sw{display:flex;gap:2px;margin-left:2px}
.nav .ic{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:0;background:none;color:var(--ink2);cursor:pointer;font:600 12.5px var(--f-body)}
.nav .ic:hover{background:var(--card-in);color:var(--ink)}
.nav .ic svg{width:18px;height:18px}
.nav .btn{margin-left:4px;white-space:nowrap;flex:none} /* «Sign in» на 375 px не переносити на два рядки (Р2-10) */
.burger{display:none}
@media (max-width:900px){
  .nav{left:12px;right:12px;transform:none;justify-content:space-between;padding-left:12px}
  .nav .menu,.nav .l.price{display:none}
  .burger{display:grid}
  .nav .btn{padding:9px 10px 9px 14px;font-size:14px}.nav .btn>span{display:none}
}
/* меню на телефоні — шторка зверху */
.sheet{position:fixed;inset:0;z-index:49;background:var(--bg);padding:84px 16px 24px;display:grid;align-content:start;gap:4px;overflow:auto;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.sheet.open{opacity:1;pointer-events:auto;transform:none}
.sheet a{display:flex;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);font-weight:600}
.sheet a small{display:block;font-weight:400;color:var(--ink3);font-size:13px}

/* ── спільні елементи інтерфейсу в сценах ── */
.card{border-radius:14px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);padding:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.msg{padding:9px 11px;border-radius:10px;background:var(--card-in2);color:var(--ink2);max-width:92%;font-size:13.5px}
.msg.me{justify-self:end;background:rgba(var(--acc-rgb),.16);color:var(--acc-soft)}
.msg b{display:block;color:var(--ink);font-size:12px;margin-bottom:2px}
.pill{display:inline-block;padding:1px 8px;border-radius:5px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
:root[data-theme="light"] .pill{background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 72%,#000)} /* мелкий текст на тоні — AA */
.chk{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink2)}
.chk b{flex:none;width:16px;height:16px;border-radius:5px;border:1.6px solid var(--ink3)}
.chk.ok b{background:var(--c-dg);border-color:var(--c-dg)}
.chk.ok span{text-decoration:line-through;color:var(--ink3)}
.bar{height:9px;border-radius:2px;background:var(--card-in2)}
.av{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font:700 11px var(--f-body);color:var(--ev-ink);background:var(--c)}

/* ── підписи розділів, «далі →», курсор друку ── */
.num{font:500 12px var(--f-mono);letter-spacing:.18em;color:var(--c,var(--acc));text-transform:uppercase;display:flex;gap:10px;align-items:center}
.num::before{content:"";width:28px;height:2px;background:currentColor}
.more{display:inline-flex;gap:10px;align-items:center;color:var(--c,var(--acc));font-weight:600}
.more::after{content:"→";transition:transform .5s var(--ease)}.more:hover::after{transform:translateX(5px)}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--c,var(--acc));vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pic{width:100%;height:100%}

/* ── фінал і підвал ── */
.final{position:relative;padding:160px 24px 130px;text-align:center;overflow:hidden;background:radial-gradient(60% 60% at 50% 100%,rgba(var(--acc-rgb),.24),transparent 70%),var(--bg)}
.final h2{font-size:clamp(44px,9vw,150px);letter-spacing:-.05em}
.final p{color:var(--ink2);max-width:560px;margin:26px auto 34px}
footer.foot{border-top:1px solid var(--line);background:var(--bg)}
.foot .in{max-width:1320px;margin:0 auto;padding:44px 24px 36px;display:grid;grid-template-columns:1.2fr 2fr;gap:32px}
.foot .about{display:grid;gap:12px;align-content:start;color:var(--ink3);font-size:14px}
.foot nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;font-size:14.5px}
.foot nav b{font:500 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.foot nav div{display:grid;gap:7px;align-content:start}
.foot nav a{color:var(--ink2)}.foot nav a:hover{color:var(--ink)}
.foot .ua{display:inline-flex;gap:8px;align-items:center}.foot .ua svg{width:18px;height:12px;border-radius:2px}
.foot .row2{max-width:1320px;margin:0 auto;padding:18px 24px 34px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--ink3);font-size:13.5px}
@media (max-width:760px){.foot .in{grid-template-columns:1fr}.foot nav{grid-template-columns:1fr 1fr}}

/* ── питання ── */
.faq{max-width:980px;margin:0 auto;padding:110px 24px 60px;display:grid;gap:28px}
.faq h2{font-size:clamp(32px,4vw,56px)}
.faq .list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:linear-gradient(currentColor,currentColor) center/11px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 11px no-repeat;transition:background-size .4s var(--ease)}
.faq details[open] summary::after{background-size:11px 1.6px,1.6px 0}
.faq details>p{color:var(--ink2);padding:0 0 22px;margin:0;max-width:70ch}

/* світла (Денис 15.10): без голубої димки — перший екран, фінал, світіння «наступної функції» (головна — home.css) */
:root[data-theme="light"] :is(.fhero,.final){background:none}:root[data-theme="light"] .nextfn .glow{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme]) :is(.fhero,.final){background:none}:root:not([data-theme]) .nextfn .glow{display:none}}
/* значки меню рухаються, лише коли меню відкрите (інакше їхні нескінченні анімації рахуються кожен кадр) */
.menu:not(.open) .mp *,.sheet:not(.open) .mp *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}