/* Сайт продукту dean.sphericow.tech: спокійна сторінка; акцент — колір ФТЛ, як в іграх */
:root{--paper:#F6F7FB;--card:#fff;--ink:#14161F;--ink2:#5B6070;--line:#E3E6EE;--accent:#E5007D;--live:#14A46A;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--paper:#14161F;--card:#1D2030;--ink:#F2F3F8;--ink2:#A9AEC0;--line:#2C3045;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:17px/1.6 Onest,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.top{background:var(--card);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:64px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.2}
.brand b{font-family:Unbounded,sans-serif;font-size:1.05rem}
.brand span{font-size:.78rem;color:var(--ink2)}
.menu{display:flex;flex-wrap:wrap;gap:4px 16px}
.menu a{color:var(--ink2);text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--ink);border-color:var(--accent)}
main{padding-top:36px;padding-bottom:40px}
h1{font-family:Unbounded,sans-serif;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.1;margin:0 0 10px;overflow-wrap:anywhere}
.tagline{color:var(--ink2);margin:0 0 18px;font-size:1.05rem}
.prose{max-width:68ch}
.prose h2,.block h2{font-family:Unbounded,sans-serif;font-size:1.3rem;margin:28px 0 10px}
.prose h3{font-size:1.1rem;margin:22px 0 8px}
.prose ul{padding-left:1.2em}
.prose li{margin:4px 0}
.block{margin-top:30px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card b{font-size:1.08rem}
.card .muted,.muted{color:var(--ink2);font-size:.92rem}
.card .go{margin-top:auto;color:var(--accent);font-weight:700;font-size:.92rem}
.badge{align-self:flex-start;font-size:.78rem;font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.1em .7em}
.badge.live{background:var(--live);color:#fff;border-color:var(--live)}
.games{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.games h2{margin-top:0}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:.7em 1.4em;border-radius:999px}
.foot{padding-top:18px;padding-bottom:30px;color:var(--ink2);font-size:.85rem;border-top:1px solid var(--line)}
.foot a{color:var(--ink2)}
/* Головна вітрини — сторінка продукту з маскотом Sphericow (бірюзова гама бренду; рожевий — за факультетом ФТЛ) */
/* Продукт має власний колір (як у брендбуку: Eco — синій, Click — рожевий, Школа — зелена): деканат — академічний індиго.
   Фірмовий м'ятний #00E8AF лишається лише в підписі «by Spheri·cow». */
.landing{--accent:#4338CA;--glow:#00E8AF}
@media (prefers-color-scheme:dark){.landing{--accent:#A5B4FC}}
.cow{color:#06B89C}
@media (prefers-color-scheme:dark){.cow{color:var(--glow)}}
.landing .btn{color:#fff}
@media (prefers-color-scheme:dark){.landing .btn{color:#1E1B4B}}
.btn-sm{padding:.45em 1.1em;font-size:.95rem}
.btn-lg{padding:.85em 1.7em;font-size:1.05rem}
.btn-ghost{display:inline-block;color:var(--ink);font-weight:700;text-decoration:none;padding:.85em 1.2em;border-radius:999px;box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.brand-cow{flex-direction:row;align-items:center;gap:10px}
.brand-cow>span{display:flex;flex-direction:column}
.landing main{padding-top:0}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding-top:48px;padding-bottom:24px}
.eyebrow{margin:0 0 8px;color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);margin-bottom:14px;overflow-wrap:normal;hyphens:manual}
.lead{font-size:clamp(1.05rem,2.4vw,1.25rem);color:var(--ink2);margin:0 0 22px;max-width:36ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.small{font-size:.88rem;max-width:52ch}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:380px;--doc-dx:170px;--doc-dy:110px}
.hero-blob{position:absolute;width:min(88%,380px);aspect-ratio:1;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;
  background:radial-gradient(circle at 35% 30%,#F5F6FF,#E0E4FF 55%,#C7CCFB);opacity:.95}
/* Маскот погойдується й «ковтає» документ кожні 3 с (у такт прильоту документів) */
.mascot-bob{position:relative;z-index:2;animation:bob 4s ease-in-out infinite}
.mascot{display:block;width:min(70vw,290px);height:auto;filter:drop-shadow(0 14px 18px rgba(30,27,75,.18));animation:gulp 3s ease-in-out 1.05s infinite;transform-origin:50% 60%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes gulp{0%,100%{transform:scale(1)}8%{transform:scale(1.06) rotate(-2deg)}18%{transform:scale(.98)}30%{transform:scale(1)}}
/* Документи: зліва «вхідні», за коровою «обробка», справа — готові з печаткою. Три документи зі зсувом 3 с, цикл 9 с */
.doc{position:absolute;left:50%;top:50%;width:172px;margin:-34px 0 0 -86px;z-index:1;opacity:0;animation:flow 9s cubic-bezier(.45,.05,.35,1) infinite}
.doc2{animation-delay:3s}.doc3{animation-delay:6s}
.doc>span{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:8px;row-gap:5px;align-items:center;
  height:68px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(30,27,75,.14)}
.doc i{grid-row:1/4;font-style:normal;font-size:1.35rem}
.doc b{font-size:.78rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc em{display:block;height:5px;border-radius:3px;background:var(--line)}
.doc em+em{width:65%}
.doc-out{animation:show-out 9s step-end infinite;animation-delay:inherit}
.doc-in{animation:show-in 9s step-end infinite;animation-delay:inherit}
.doc-out b{color:#15803D}
.doc-out s{position:absolute;right:-10px;top:-12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  font-weight:800;color:#fff;background:#16A34A;border:3px solid var(--card);box-shadow:0 4px 10px rgba(22,163,74,.35);transform:rotate(-12deg)}
@keyframes flow{
  0%{opacity:0;transform:translate(calc(var(--doc-dx) * -1.25),var(--doc-dy)) rotate(-10deg) scale(.85)}
  8%{opacity:1}
  32%{opacity:1;transform:translate(calc(var(--doc-dx) * -.85),calc(var(--doc-dy) * .35)) rotate(-5deg) scale(.95)}
  45%{opacity:0;transform:translate(0,0) rotate(0) scale(.35)}
  52%{opacity:0;transform:translate(0,0) rotate(0) scale(.35)}
  62%{opacity:1;transform:translate(calc(var(--doc-dx) * .85),calc(var(--doc-dy) * -.75)) rotate(5deg) scale(1)}
  88%{opacity:1;transform:translate(var(--doc-dx),calc(var(--doc-dy) * -1.05)) rotate(7deg) scale(1)}
  100%{opacity:0;transform:translate(calc(var(--doc-dx) * 1.1),calc(var(--doc-dy) * -1.4)) rotate(9deg) scale(.9)}}
@keyframes show-in{0%{opacity:1}48%{opacity:0}}
@keyframes show-out{0%{opacity:0}48%{opacity:1}}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.feature b{display:block;font-size:1.05rem;margin:8px 0 4px}
.feature p{margin:0;color:var(--ink2);font-size:.95rem}
.ficon{font-size:1.6rem}
.soon{margin:16px 0 0;color:var(--ink2)}
.about .prose{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 20px;max-width:none}
.cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:40px}
.cta div{display:flex;flex-direction:column;flex:1;min-width:200px}
.cta img{width:84px;height:auto;margin:-10px 0}
.brand-cow img{border-radius:9px}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:24px;gap:8px}
  .landing .bar{flex-wrap:nowrap}
  .landing .brand b{font-size:.92rem}
  .hero-art{order:-1;min-height:280px;overflow:hidden;--doc-dx:118px;--doc-dy:78px}
  .hero-blob{width:240px}
  .mascot{width:min(54vw,200px)}
  .doc{width:140px;margin-left:-70px;transform-origin:center}
  .doc>span{height:58px;padding:8px 10px}
  .doc b{font-size:.7rem;white-space:normal;line-height:1.15}
  .doc em+em{display:none}
}
@media (prefers-color-scheme:dark){.hero-blob{opacity:.18}.doc-out b{color:#4ADE80}}
/* Без руху: маскот стоїть, видно один вхідний і один готовий документ */
@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .mascot-bob,.mascot,.doc,.doc>span{animation:none}
  .doc1{opacity:1;transform:translate(calc(var(--doc-dx) * -.85),calc(var(--doc-dy) * .35)) rotate(-5deg)}
  .doc1 .doc-out,.doc2 .doc-in{opacity:0}
  .doc2{opacity:1;transform:translate(var(--doc-dx),calc(var(--doc-dy) * -1)) rotate(6deg)}
}