/* CricStream — about, support and 404 */

/* About: story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.quote{position:sticky;top:120px;font-family:var(--fd);font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.04;letter-spacing:-.04em}
.quote em{font-style:normal;color:var(--volt)}
.quote small{display:block;margin-top:22px;font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--tx3)}
.story-txt{display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:1.7;color:var(--tx2)}
.story-txt p strong{color:var(--tx)}
.then-now{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.then-now div{padding:20px;border-radius:20px;border:1px solid var(--line)}
.then-now div:last-child{border-color:rgba(198,255,77,.35);background:rgba(198,255,77,.05)}
.then-now h4{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--tx3);margin-bottom:12px}
.then-now div:last-child h4{color:var(--volt)}
.then-now ul{list-style:none;display:grid;gap:8px;font-size:15px}
.then-now li{display:flex;gap:10px;align-items:baseline}
.then-now li::before{content:"✕";font-size:11px;color:#ff8a8a}
.then-now div:last-child li::before{content:"✓";color:var(--volt)}

/* About: values */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.val{padding:28px 24px;min-height:300px;display:flex;flex-direction:column;gap:14px}
.val .num{font-family:var(--fm);font-size:12px;color:var(--volt);letter-spacing:.14em}
.val .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--volt-a);color:var(--volt);margin-bottom:auto}
.val .ico svg{width:24px;height:24px}
.val h3{font-family:var(--fd);font-size:23px;letter-spacing:-.03em;line-height:1.1}
.val p{color:var(--tx2);font-size:15px}

/* About: facts strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.facts div{padding:36px 24px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-family:var(--fd);font-size:clamp(46px,5vw,72px);letter-spacing:-.05em;line-height:.9}
.facts span{display:block;margin-top:10px;color:var(--tx2);font-size:14.5px}

/* About: next */
.next{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.next article{display:flex;gap:18px;padding:24px;align-items:flex-start}
.next .tag3{flex:none;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.14em;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.05);color:var(--tx2)}
.next h3{font-family:var(--fd);font-size:21px;letter-spacing:-.025em;margin-bottom:6px}
.next p{color:var(--tx2);font-size:15px}

/* Contact / quick cards */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qc{padding:24px;display:flex;flex-direction:column;gap:10px;min-height:210px;transition:transform .4s var(--ease),border-color .3s}
.qc:hover{transform:translateY(-4px);border-color:var(--line3)}
.qc .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--volt-a);color:var(--volt);margin-bottom:auto}
.qc .ico svg{width:22px;height:22px}
.qc h3{font-family:var(--fd);font-size:20px;letter-spacing:-.025em}
.qc p{color:var(--tx2);font-size:14.5px}
.qc .go{font-size:13.5px;font-weight:700;color:var(--volt);display:flex;align-items:center;gap:6px}
.qc .go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.qc:hover .go svg{transform:translateX(4px)}

.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:clamp(28px,5vw,56px)}
.contact h2{font-family:var(--fd);font-size:clamp(30px,3.6vw,46px);letter-spacing:-.04em;line-height:1}
.contact p{color:var(--tx2);margin-top:14px;max-width:48ch}
.contact .stack{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mail{font-family:var(--fd);font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--volt);border-bottom:2px solid rgba(198,255,77,.3);transition:border-color .2s;word-break:break-all}
.mail:hover{border-color:var(--volt)}

/* Support: search + faq */
.hsearch{position:relative;width:100%;max-width:620px;margin-top:8px;display:block}
.hsearch input{width:100%;height:64px;border-radius:20px;border:1px solid var(--line2);background:rgba(255,255,255,.035);color:var(--tx);font:inherit;font-size:17px;padding:0 20px 0 56px;
  transition:border-color .2s,box-shadow .2s,background .2s}
.hsearch input::placeholder{color:var(--tx3)}
.hsearch input:focus{outline:none;border-color:var(--volt);box-shadow:0 0 0 5px rgba(198,255,77,.12);background:rgba(255,255,255,.05)}
.hsearch svg{position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--tx3)}
.hsearch kbd{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--fm);font-size:12px;padding:4px 8px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx3)}
.sup-faq{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.sup-nav{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px}
.sup-nav a{padding:10px 14px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--tx3);display:flex;justify-content:space-between;transition:color .2s,background .2s}
.sup-nav a:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.sup-nav a span{font-family:var(--fm);font-size:12px}
.sup-g{scroll-margin-top:110px}
.sup-g+.sup-g{margin-top:48px}
.sup-g h2{font-family:var(--fd);font-size:28px;letter-spacing:-.03em;margin-bottom:6px}
.qa.hide{display:none}
.sup-g.empty{display:none}
.noresult{display:none;padding:40px;border-radius:20px;border:1px dashed var(--line2);color:var(--tx2);text-align:center}
.noresult.show{display:block}
.qa mark{background:rgba(198,255,77,.25);color:var(--tx);border-radius:3px;padding:0 2px}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gut) 60px;position:relative;overflow:hidden}
.nf .glow{width:560px;height:560px;background:var(--red);opacity:.1;top:10%;left:50%;margin-left:-280px}
.nf-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.wicket{position:relative;width:150px;height:170px;margin-bottom:10px}
.wicket .st{position:absolute;bottom:0;width:14px;height:140px;border-radius:7px 7px 2px 2px;background:linear-gradient(90deg,#f6f1e6,#d9cfb8)}
.wicket .st:nth-child(1){left:30px;transform-origin:bottom center;animation:st1 2.6s var(--ease) infinite}
.wicket .st:nth-child(2){left:68px;animation:st2 2.6s var(--ease) infinite;transform-origin:bottom center}
.wicket .st:nth-child(3){left:106px;transform-origin:bottom center;animation:st3 2.6s var(--ease) infinite}
.wicket .bail{position:absolute;top:24px;width:44px;height:8px;border-radius:4px;background:#e9dcc0}
.wicket .bail.a{left:30px;animation:bail1 2.6s var(--ease) infinite}
.wicket .bail.b{left:76px;animation:bail2 2.6s var(--ease) infinite}
.wicket .ballx{position:absolute;bottom:40px;left:-120px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8080,#c01818);box-shadow:0 0 0 1px rgba(255,255,255,.1);animation:ball404 2.6s var(--ease) infinite}
@keyframes ball404{0%{transform:translate(0,0);opacity:1}30%{transform:translate(190px,-6px);opacity:1}55%,100%{transform:translate(330px,30px);opacity:0}}
@keyframes st1{0%,28%{transform:none}40%,85%{transform:rotate(-24deg)}100%{transform:none}}
@keyframes st2{0%,28%{transform:none}40%,85%{transform:rotate(14deg) translateX(6px)}100%{transform:none}}
@keyframes st3{0%,30%{transform:none}42%,85%{transform:rotate(30deg)}100%{transform:none}}
@keyframes bail1{0%,28%{transform:none;opacity:1}45%{transform:translate(-50px,-90px) rotate(-200deg)}85%{transform:translate(-80px,120px) rotate(-340deg);opacity:0}100%{transform:none;opacity:0}}
@keyframes bail2{0%,28%{transform:none;opacity:1}45%{transform:translate(60px,-110px) rotate(220deg)}85%{transform:translate(90px,120px) rotate(380deg);opacity:0}100%{transform:none;opacity:0}}
.nf .code404{font-family:var(--fm);font-size:13px;letter-spacing:.24em;color:var(--red)}
.nf .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

@media (max-width:1020px){
  .values{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:1fr 1fr}
  .story{grid-template-columns:1fr}
  .quote{position:relative;top:0}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .sup-faq{grid-template-columns:1fr}
  .sup-nav{position:relative;top:0;flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:0 var(--gut)}
  .sup-nav a{flex:none;box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;gap:8px}
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .values,.quick,.next{grid-template-columns:1fr}
  .val{min-height:0}
  .qc{min-height:0}
  .then-now{grid-template-columns:1fr}
  .facts div{padding:26px 14px 26px 0}
  .facts div:nth-child(even){padding-left:14px}
  .hsearch kbd{display:none}
}