/* Built by Kris: inner-page components */
.phero{padding:160px 0 70px;position:relative}
.phero h1{font-size:clamp(40px,6vw,84px);margin:22px 0 20px;max-width:15ch}
.phero.wide h1{max-width:18ch}
.phero .lead{font-size:clamp(17px,1.7vw,21px);color:var(--mute);max-width:640px}
.phero .lead b{color:#fff;font-weight:600}
.phero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero-art{position:absolute;right:max(20px,calc(50% - 600px));top:130px;width:min(380px,36vw);aspect-ratio:1;pointer-events:none}
.phero-art svg{width:100%;height:100%;overflow:visible}
.phero-art .orbit{transform-origin:50% 50%;animation:spin 30s linear infinite}
.phero-art .orbit.b{animation-duration:46s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.phero-art{display:none}.phero{padding-top:130px}}
.sumbar{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.sumbar div{padding:14px 22px;border-radius:20px;border:1px solid var(--line);background:rgba(120,150,255,.06);display:flex;align-items:baseline;gap:10px}
.sumbar strong{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.03em;text-shadow:0 0 24px var(--cyan)}
.sumbar span{color:var(--mute);font-size:14.5px}
.pad{padding:60px 0 100px}
.cta-band{border-radius:34px;padding:2px;background:conic-gradient(from var(--a),var(--blue),var(--purple),var(--red),var(--yellow),var(--green),var(--blue));animation:rot 8s linear infinite}
@keyframes rot{to{--a:360deg}}
.cta-in{border-radius:32px;background:linear-gradient(160deg,#0b1438,#060b22);padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:800px){.cta-in{grid-template-columns:1fr}}
.cta-in h2{font-size:clamp(30px,4vw,52px);margin-top:16px}
.cta-in p{color:var(--mute);font-size:19px;margin-bottom:22px}

/* use cases */
.ucb{display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:start}
@media(max-width:940px){.ucb{grid-template-columns:1fr}}
.sel{position:sticky;top:96px;display:grid;gap:8px;padding:12px;border-radius:26px;border:1px solid var(--line);background:rgba(8,14,40,.7);backdrop-filter:blur(14px)}
.sel .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:6px 10px}
.sel button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;text-align:left;transition:.3s var(--ease)}
.sel button:hover{background:rgba(120,150,255,.09)}
.sel button.on{background:color-mix(in srgb,var(--c0) 18%,transparent);border-color:color-mix(in srgb,var(--c0) 65%,transparent);box-shadow:0 0 30px -10px var(--c0)}
.sel .mk2{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 13px var(--sans);color:#050a1c;background:linear-gradient(135deg,var(--c),var(--c0));flex:none}
.sel b{display:block;font-size:15.5px;line-height:1.2}.sel small{color:var(--mute);font-size:12.5px}
.sel i{margin-left:auto;font-style:normal;color:var(--c);opacity:0;transform:translateX(-6px);transition:.3s}
.sel button.on i,.sel button:hover i{opacity:1;transform:none}
@media(max-width:940px){.sel{position:static;display:flex;overflow-x:auto;border-radius:22px;scrollbar-width:thin}.sel .lab{display:none}.sel button{flex:none}.sel i,.sel small{display:none}}
.pn-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.pn-head .mk{margin:0;flex:none}
.pn-head p{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.pn-head h2{font-size:clamp(28px,3.4vw,44px)}
.pn-head span.t{display:block;color:var(--mute);font-size:16px;margin-top:2px}
.pn-head .btn{margin-left:auto;background:var(--c);box-shadow:0 10px 30px -8px var(--c0);padding:12px 22px;font-size:15px}
.scen{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;perspective:1600px}
.sc{position:relative;min-height:400px;transform-style:preserve-3d;transition:transform .8s var(--ease);cursor:pointer;outline:none}
.sc.flipped{transform:rotateY(180deg)}
.sc .fc{position:absolute;inset:0;border-radius:26px;padding:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;gap:14px;background:linear-gradient(165deg,rgba(18,28,70,.92),rgba(7,12,34,.96));border:1px solid var(--line);transition:border-color .3s,box-shadow .4s}
.sc:hover .fc,.sc:focus-visible .fc{border-color:color-mix(in srgb,var(--c0) 70%,transparent);box-shadow:0 30px 70px -28px var(--c0)}
.sc .fc::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a),transparent 0 60%,var(--c) 85%,#fff 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;animation:rot 3.4s linear infinite;pointer-events:none}
.sc:hover .fc::after{opacity:1}
.sc .num{font:800 46px/1 var(--sans);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--c);opacity:.9}
.sc .aud{font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.sc h3{font-size:22px;line-height:1.12;margin-top:4px}
.sc dl{display:grid;gap:10px}
.sc dt{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sc dd{font-size:14.2px;line-height:1.45;color:#d4dcff}
.sc dl>div:last-child dd{color:#fff;font-weight:600}
.sc .fh{margin-top:auto;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sc .bk{transform:rotateY(180deg);justify-content:center;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--c0) 40%,transparent),transparent 70%),linear-gradient(165deg,#0d1646,#060b22)}
.sc .kick{font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.sc blockquote{font-size:22px;line-height:1.28;font-weight:700;letter-spacing:-.015em;color:#fff;text-shadow:0 0 24px color-mix(in srgb,var(--c0) 60%,transparent)}
.sc .bk p{color:var(--mute);font-size:14px}

/* notes */
.nbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.nbar .chips{flex:1}
.search{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(8,14,40,.7);min-width:min(280px,100%)}
.search svg{width:16px;height:16px;color:var(--mute);flex:none}
.search input{background:none;border:0;outline:0;color:#fff;font:500 15px var(--sans);width:100%}
.search:focus-within{border-color:var(--cyan);box-shadow:0 0 30px -8px var(--cyan)}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.nc{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:linear-gradient(165deg,rgba(18,28,70,.85),rgba(7,12,34,.92));border:1px solid var(--line);transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.nc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c0) 65%,transparent);box-shadow:0 28px 60px -26px var(--c0)}
.nc .im{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--c0) 45%,#0a1230),#0a1230)}
.nc .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .6s;opacity:0}
.nc .im img.ld{opacity:1}
.nc:hover .im img{transform:scale(1.07)}
.nc .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,10,28,.85));pointer-events:none}
.nc .im .m{position:absolute;left:14px;top:14px;z-index:2;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font:800 14px var(--sans);color:#050a1c;background:linear-gradient(135deg,var(--c),var(--c0));box-shadow:0 0 24px -2px var(--c0)}
.nc .bd{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.nc .meta{display:flex;gap:10px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.nc .meta span+span{color:var(--mute)}
.nc h3{font-size:21px;line-height:1.16;letter-spacing:-.02em}
.nc h3 a:hover{color:var(--c)}
.nc p{color:var(--mute);font-size:14.8px;line-height:1.5}
.nc .rd{margin-top:auto;font-weight:700;font-size:14.5px;color:var(--c)}
.nc .rd span{display:inline-block;transition:transform .3s var(--ease)}.nc:hover .rd span{transform:translateX(6px)}
.more{display:flex;justify-content:center;margin-top:36px}
.empty{color:var(--mute);padding:40px;text-align:center;border:1px dashed var(--line);border-radius:24px}
.back{display:inline-flex;gap:8px;align-items:center;color:var(--cyan);font-weight:600;margin-bottom:26px}
.back:hover{text-shadow:0 0 18px var(--cyan)}
.art{max-width:880px;margin-inline:auto}
.art header{display:grid;gap:26px}
.art .meta{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.art h1{font-size:clamp(32px,5vw,62px);margin:14px 0 14px}
.art .hook{font-size:clamp(19px,2vw,24px);color:#dbe3ff;font-weight:500;line-height:1.4}
.art .hero-img{border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -40px var(--c0),0 0 0 1px rgba(255,255,255,.03) inset;background:#0a1230}
.art .hero-img img{display:block;width:100%;height:auto}
.art .bodyc{margin:40px 0;display:grid;gap:20px}
.art .bodyc p{font-size:19px;line-height:1.7;color:#cfd8fb}
.art .bodyc p:first-child::first-line{color:#fff;font-weight:700}
.art .tags{font-family:var(--mono);font-size:13.5px;color:var(--c)!important}
.art .rel{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:24px 28px;border-radius:26px;border:1px solid color-mix(in srgb,var(--c0) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c0) 18%,transparent),rgba(8,14,40,.6));box-shadow:0 30px 70px -34px var(--c0)}
.rel span{font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block}
.rel strong{font-size:26px;color:var(--c)}
.rel .acts{display:flex;gap:10px;flex-wrap:wrap}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.pn a{padding:18px 22px;border-radius:20px;border:1px solid var(--line);background:rgba(120,150,255,.05);transition:.3s}
.pn a:hover{border-color:var(--cyan);transform:translateY(-3px)}
.pn small{display:block;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pn b{font-size:16px;line-height:1.3;display:block;margin-top:4px}
.pn a:last-child{text-align:right}
@media(max-width:600px){.pn{grid-template-columns:1fr}.pn a:last-child{text-align:left}}

/* about */
.glance{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;align-items:stretch}
.glance .big{padding:28px 44px;border-radius:26px;border:1px solid rgba(255,201,51,.4);background:linear-gradient(160deg,rgba(255,201,51,.14),rgba(255,201,51,.02));box-shadow:0 0 50px -18px var(--yellow)}
.glance .big strong{display:block;font-size:clamp(88px,13vw,150px);font-weight:800;line-height:.95;letter-spacing:-.04em;color:#fff;text-shadow:0 0 30px var(--yellow)}
.glance .big>span{color:var(--mute);font-size:16px}
.glance .tg{display:flex;flex-wrap:wrap;gap:10px;align-content:center;max-width:380px}
.glance .tg span{padding:9px 18px;border-radius:999px;font-weight:700;font-size:15px;border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);box-shadow:0 0 22px -8px var(--c)}
.think{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
@media(max-width:900px){.think{grid-template-columns:1fr}}
.think h2{font-size:clamp(30px,4vw,52px);margin:18px 0}
.think p{color:var(--mute);font-size:18.5px;margin-bottom:18px}
.bring{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.bc{padding:30px;border-radius:28px;background:linear-gradient(165deg,rgba(18,28,70,.85),rgba(7,12,34,.92));border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.bc:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 30px 70px -30px var(--c)}
.bc .n{font:800 15px var(--mono);color:var(--c);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--c);display:grid;place-items:center;margin-bottom:18px;transition:.35s}
.bc:hover .n{background:var(--c);color:#050a1c;box-shadow:0 0 28px var(--c)}
.bc h3{font-size:23px;margin-bottom:8px}.bc p{color:var(--mute);font-size:15.5px}
.terr{display:grid;gap:12px;max-width:820px}
.terr li{list-style:none;display:flex;gap:16px;align-items:center;padding:18px 24px;border-radius:20px;border:1px solid var(--line);background:rgba(120,150,255,.05);font-size:17.5px;transition:.35s var(--ease)}
.terr li:hover{transform:translateX(10px);border-color:var(--yellow);background:rgba(255,201,51,.07)}
.terr svg{width:20px;height:20px;color:var(--yellow);filter:drop-shadow(0 0 8px var(--yellow));flex:none}

/* legal */
.legal{max-width:860px;margin-inline:auto;display:grid;gap:16px}
.lg{padding:30px 32px;border-radius:26px;background:linear-gradient(165deg,rgba(18,28,70,.8),rgba(7,12,34,.9));border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .3s}
.lg:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.lg::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--c);box-shadow:0 0 18px var(--c)}
.lg .k{font:700 12px var(--mono);letter-spacing:.16em;color:var(--c)}
.lg h2{font-size:26px;margin:6px 0 12px;letter-spacing:-.02em}
.lg p,.lg li{color:#c6d0f5;font-size:16.5px;line-height:1.65}
.lg ul{display:grid;gap:10px;list-style:none;margin-top:6px}
.lg li{padding-left:24px;position:relative}
.lg li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;background:var(--c);clip-path:polygon(60% 0,0 55%,45% 55%,30% 100%,100% 40%,55% 40%);box-shadow:0 0 8px var(--c)}
.lg li b{color:#fff}
.lg a{color:var(--cyan);border-bottom:1px solid rgba(77,227,255,.4)}
.eff{font-family:var(--mono);color:var(--mute);font-size:13.5px;text-align:center;margin-top:10px}

/* chips (shared with the friction finder on home) */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font:600 14.5px var(--sans);padding:9px 16px;border-radius:999px;background:rgba(120,150,255,.08);border:1px solid var(--line);color:#dbe3ff;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--c);color:#fff;transform:translateY(-2px)}
.chip.on{background:var(--c);color:#050a1c;border-color:var(--c);box-shadow:0 0 26px -2px var(--c)}

/* about: compact CTA bolt */
.final svg.bigbolt{width:52px;height:52px;margin-bottom:16px}