/* ===== Footer ===== */
footer.ft{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;text-align:left;padding:26px 22px;max-width:1100px;margin:40px auto 0}
.ft-b{display:flex;flex-direction:column;gap:2px}.ft-b b{color:var(--tx);font-size:1rem}
.ft-l{display:flex;flex-wrap:wrap;gap:6px 18px}
.ft-l a{position:relative;color:var(--pr);text-decoration:none;font-weight:600;padding:2px 0}
.ft-l a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--g);border-radius:2px;transition:width .3s}
.ft-l a:hover::after{width:100%}.ft-l a:hover{text-decoration:none}
@media(max-width:600px){footer.ft{flex-direction:column;align-items:center;text-align:center}.ft-l{justify-content:center}}

/* ===== Channels: black + light silver ===== */
#channels{padding:50px 0}
.ch-wrap{position:relative;overflow:hidden;background:#050505;border:1px solid #26272b;border-radius:30px;padding:38px 26px 30px;box-shadow:0 30px 70px -30px #000}
.ch-wrap::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(214,218,226,.16),transparent 65%);top:-200px;right:-120px;animation:chglow 9s ease-in-out infinite}
.ch-wrap::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.012) 22px 23px);pointer-events:none}
@keyframes chglow{50%{transform:translate(-70px,60px) scale(1.2)}}
.ch-wrap>*{position:relative;z-index:1}
.ch-wrap h2{color:#eceef2}.ch-wrap h2::after{background:linear-gradient(90deg,#fff,#9ea3ae)}
.ch-wrap .sub{color:#8f939e}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.ch{--rx:0deg;--ry:0deg;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:22px;background:linear-gradient(160deg,#131316,#0a0a0b);border:1px solid #2b2c31;opacity:0;transform:translateY(26px) scale(.95);transition:opacity .7s var(--d,0ms),transform .7s var(--d,0ms) cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.ch.show{opacity:1;transform:none}
.ch.show:hover{transform:perspective(700px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));border-color:#cfd2d9;box-shadow:0 20px 44px -20px rgba(222,226,234,.35);transition-delay:0s}
.ch::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.1),transparent);transform:skewX(-18deg);transition:left .7s}
.ch:hover::after{left:140%}
.ch-h{display:flex;gap:14px;align-items:center}
.ch-ic{width:68px;height:68px;flex:none;border-radius:20px;display:grid;place-items:center;overflow:hidden;background:#1a1b1f;border:1px solid #3a3c43;animation:chbob 4s ease-in-out infinite}
.ch:nth-child(even) .ch-ic{animation-delay:-2s}
@keyframes chbob{50%{transform:translateY(-4px) rotate(-2deg)}}
.ch:hover .ch-ic{animation:chwig .6s}
@keyframes chwig{25%{transform:rotate(-8deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}
.ch-ic img{width:100%;height:100%;object-fit:cover;display:block}
.ch-ic svg{width:32px;height:32px;fill:none;stroke:#d9dce3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ch h3{color:#f2f3f6;font-size:1.08rem;line-height:1.25}
.ch-k{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:.72rem;color:#c3c7d0;letter-spacing:.02em}
.ch-k::before{content:"";width:7px;height:7px;border-radius:50%;background:#d6d9e0;animation:chping 2s infinite}
@keyframes chping{0%{box-shadow:0 0 0 0 rgba(214,217,224,.6)}100%{box-shadow:0 0 0 9px rgba(214,217,224,0)}}
.ch-f{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:99px;border:1px solid #484b53;color:#b9bdc7;font-size:.7rem}
.ch p{color:#9b9ea8;font-size:.9rem;flex:1}
.ch-b{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#f6f7fa,#b4b8c2);color:#0a0a0b;font-weight:700;font-size:.92rem;text-decoration:none;transition:transform .25s,filter .25s}
.ch-b:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ch-b svg{width:18px;height:18px;fill:none;stroke:#0a0a0b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ch-b:hover svg{transform:translateX(4px)}

/* ===== Chote mazedar touches ===== */
.pj-b,.ch-b{position:relative;overflow:hidden}
.pj:hover,.pj.rv.on:hover{transform:perspective(700px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pj:hover .lg{animation:chwig .6s}
.rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rpl .6s ease-out forwards;pointer-events:none}
@keyframes rpl{to{transform:scale(1);opacity:0}}
.pf{position:fixed;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:99;animation:pfly .7s ease-out forwards}
@keyframes pfly{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.empty{grid-column:1/-1;text-align:center;color:var(--mu);padding:40px 16px;border:1px dashed var(--bd);border-radius:22px}
@media(prefers-reduced-motion:reduce){.ch{opacity:1;transform:none}.ch-ic,.ch-wrap::before{animation:none}}

/* ===== Motion graphics layer ===== */
body{animation:pgin .7s ease both}@keyframes pgin{from{opacity:0}}
.mg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mg span{position:absolute;display:block}
.mg .m1{width:340px;height:340px;border-radius:50%;border:1.5px solid rgba(var(--ac),.14);top:10%;right:-90px;animation:mrot 40s linear infinite}
.mg .m1::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(var(--ac),.5);top:-6px;left:50%}
.mg .m2{width:120px;height:120px;border:1.5px solid rgba(var(--ac),.18);border-radius:26px;left:6%;top:62%;animation:mrot 26s linear infinite reverse,mfl 9s ease-in-out infinite}
.mg .m3{width:220px;height:220px;right:12%;bottom:6%;background:radial-gradient(rgba(var(--ac),.28) 1.5px,transparent 1.6px) 0 0/22px 22px;animation:mfl 12s ease-in-out infinite;-webkit-mask:radial-gradient(circle,#000 30%,transparent 72%);mask:radial-gradient(circle,#000 30%,transparent 72%)}
.mg .m4{width:2px;height:55vh;left:3%;top:-10%;background:linear-gradient(transparent,rgba(var(--ac),.35),transparent);animation:mdrop 7s ease-in-out infinite}
.mg .m5{width:64px;height:64px;border-radius:50%;border:1.5px dashed rgba(var(--ac),.25);left:44%;top:14%;animation:mrot 18s linear infinite,mfl 7s ease-in-out infinite}
@keyframes mrot{to{transform:rotate(360deg)}}
@keyframes mfl{50%{translate:0 -26px}}
@keyframes mdrop{0%{transform:translateY(-30vh);opacity:0}40%{opacity:1}100%{transform:translateY(90vh);opacity:0}}
.cg{position:fixed;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(var(--ac),.10),transparent 65%);transition:opacity .4s;opacity:0}
.cg.on{opacity:1}

/* scroll reveal (index) */
.js .sr{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js .sr.in{opacity:1;transform:none}

/* hero polish */
.txt h1{background:linear-gradient(100deg,var(--tx) 25%,var(--pr2) 50%,var(--tx) 75%);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shn 7s linear infinite}
@keyframes shn{to{background-position:-260% center}}
.card,.pc,.edu,.btn{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .3s}
.card:hover{transform:translateY(-8px) rotate(-1deg)}
.pc:hover{transform:translateY(-8px)}
.card:hover img,.card:hover .brand-svg{animation:chwig .6s}
.btn:active{transform:scale(.96)}
[data-theme=dark] .ch-wrap{background:#0b0b0d;border-color:#363840}
@media(prefers-reduced-motion:reduce){.mg,.cg{display:none}.js .sr{opacity:1;transform:none;filter:none}}

/* ===== softer scroll animation (all pages) ===== */
.rv,.card.rv,.edu.rv,.cta.rv{--x:0px;--y:14px;--sc:1;filter:none;transition:opacity .5s ease,transform .5s ease}
.about>div:first-child .rv,.about .stats{--x:0px;--y:14px}
.rv.on{filter:none}

/* ===== list pages: heading / back link spacing (mobile friendly) ===== */
.wrap.ph{padding:96px 22px 14px}
.ph a.back{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:1px solid var(--bd);border-radius:99px;background:var(--bg2);font-weight:600;transition:transform .25s,border-color .25s}
.ph a.back:hover{transform:translateX(-3px);border-color:var(--pr2)}
.ph h1{margin-top:22px;font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:8px;letter-spacing:-.02em}.ph h1::after{content:"";display:block;width:46px;height:3px;border-radius:3px;margin-top:10px;background:var(--g)}
@media(max-width:600px){.wrap.ph{padding:88px 22px 8px}.ph h1{margin-top:20px}.pj{padding:18px}.pg.pj-g{gap:16px}.lg{width:64px;height:64px}}

/* ===== touch devices: no sticky hover box / tooltip on the dock ===== */
.dock a,.dock button{-webkit-tap-highlight-color:transparent;outline:none}
@media(hover:none){
  .dock [data-l]::after{display:none!important}
  .dock a,.dock button{--s:1!important;transform:none!important}
  .dock a:hover,.dock button:hover{background:none;box-shadow:none;color:var(--tx)}
  .dock a.act,.dock a.act:hover{background:rgba(var(--ac),.13);color:var(--pr)}
  .pj:hover,.ch.show:hover,.card:hover,.pc:hover{transform:none}
}