/* The front-page hero carousel (owner, 2026-10-27): five scenes on a 3D coverflow, drawn by public/hero-banner.js.
   Its own palette names so the site tokens (--muted, --ok are light-theme there) never bleed in. */
.hb{--hb-mut:#9c97ad;--v:#7c3aed;--v2:#a78bfa;--v3:#c4b5fd;--hb-ok:#4ade80}
.hb *{box-sizing:border-box}
/* full page width: the section edge to edge, no card corners (owner, 2026-10-27) */
.hb{position:relative;overflow:hidden;background:var(--ground-dark);color:#f3f1fa;isolation:isolate}
/* aurora */
.hb-aur{position:absolute;inset:-20%;z-index:-1;filter:blur(60px);opacity:.75;pointer-events:none}
.hb-aur i{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;animation:hb-aur 18s ease-in-out infinite alternate}
.hb-aur i:nth-child(1){left:5%;top:10%;background:radial-gradient(#6d28d9,transparent 65%)}
.hb-aur i:nth-child(2){right:0;top:30%;background:radial-gradient(#4338ca,transparent 65%);animation-duration:23s;animation-direction:alternate-reverse}
.hb-aur i:nth-child(3){left:35%;bottom:-10%;background:radial-gradient(#a21caf,transparent 65%);opacity:.6;animation-duration:27s}
@keyframes hb-aur{50%{transform:translate(12%,-8%) scale(1.15)}100%{transform:translate(-10%,10%) scale(.9)}}
.hb-tag{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v3)}
.hb-tag em{font-style:normal;margin-left:8px;padding:3px 10px;border-radius:99px;background:var(--v);color:#fff;letter-spacing:.04em}
.hb-h{margin:10px 0 12px;font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.hb-h span{display:inline-block;animation:hb-rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*55ms + 120ms)}
@keyframes hb-rise{from{opacity:0;transform:translateY(.6em) rotateX(-70deg);filter:blur(6px)}}
@keyframes hb-fade{from{opacity:0;transform:translateY(8px)}}
.hb-tabs{display:flex;gap:8px;flex-wrap:wrap}
.hb-tabs button{position:relative;overflow:hidden;font:inherit;font-size:13px;font-weight:700;letter-spacing:.05em;padding:10px 16px;border-radius:999px;border:0;background:rgba(255,255,255,.06);color:var(--hb-mut);cursor:pointer;transition:color .3s,background .3s}
.hb-tabs button.on{color:#fff;background:rgba(124,58,237,.28)}
.hb-tabs button.on::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0)*100%);background:var(--v2)}
.hb-arrow{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer;transition:background .2s,transform .2s}
.hb-arrow:hover{background:var(--v);transform:scale(1.08)}

/* ===== scenes: every panel is 16:10, sized by its container ===== */
.pn{container-type:size}
.sc{position:absolute;inset:0;container-type:size;overflow:hidden;border-radius:14px;background:#15121e;font-size:2.2cqw}
.sc img,.sc video{display:block}
.sc .lbl{position:absolute;padding:.35em .8em;border-radius:99px;font-size:1.5cqw;font-weight:700;letter-spacing:.06em;background:rgba(14,12,21,.72);backdrop-filter:blur(6px);color:#fff;z-index:3}

/* 1 PHOTO */
.ph-b,.ph-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-a{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.ph-line{position:absolute;top:0;bottom:0;left:0;width:3px;background:#fff;box-shadow:0 0 20px #a78bfa,0 0 4px #fff;opacity:0;z-index:2}
.ph-scan{position:absolute;inset:0;z-index:2;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(167,139,250,.45) 50%,transparent 70%);background-size:250% 100%}
.sc-photo.go .ph-scan{animation:hb-scan .7s ease-in both}
.sc-photo.go .ph-a{animation:hb-wipe 1.2s .6s cubic-bezier(.65,0,.35,1) both}
.sc-photo.go .ph-line{animation:hb-wline 1.2s .6s cubic-bezier(.65,0,.35,1) both}
@keyframes hb-scan{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-30% 0}}
@keyframes hb-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes hb-wline{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.ph-l{left:3%;top:4%}.ph-r{right:3%;top:4%;background:var(--v)!important}
.ph-tool{position:absolute;left:3%;bottom:16%;z-index:3;display:flex;flex-direction:column;gap:.2em;padding:.7em 1em;border-radius:.6em;background:rgba(14,12,21,.75);backdrop-filter:blur(8px)}
.ph-tool b{font-size:2.6cqw}.ph-tool span{font-size:1.6cqw;color:var(--v3);font-weight:700}
.sc-photo.go .ph-tool{animation:hb-pop .6s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes hb-pop{from{opacity:0;transform:translateY(30%) scale(.85)}}
.ph-list{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:.5em;padding:1.2em 3% 1em;background:linear-gradient(0deg,rgba(14,12,21,.9),transparent);overflow:hidden}
.ph-list span{flex:none;padding:.35em .8em;border-radius:99px;font-size:1.45cqw;font-weight:700;background:rgba(255,255,255,.1);transition:background .3s,transform .3s}
.ph-list span.on{background:var(--v);transform:translateY(-.2em)}

/* 2 VIDEO LISTING */
.sc-video{background:radial-gradient(80% 90% at 75% 40%,#2a1f45,#15121e)}
.vd-board{position:absolute;left:4%;top:17%;width:55%;display:flex;flex-direction:column;gap:.6em}
.vd-lane{position:relative;display:flex;gap:1.5%;align-items:center;height:3.2em;padding:0 2% 0 12%;border-radius:.5em;background:rgba(255,255,255,.05)}
.vd-lane::before{content:attr(data-n);position:absolute;left:2.5%;font-size:1.3cqw;font-weight:700;color:var(--hb-mut);letter-spacing:.04em}
.vd-ph{height:8.5em}
.vd-ph img{width:14.5%;height:80%;object-fit:cover;border-radius:.35em;opacity:0}
.sc-video.on .vd-ph img{animation:hb-fly .8s cubic-bezier(.2,.8,.2,1.1) both;animation-delay:calc(var(--i)*.17s + .2s)}
@keyframes hb-fly{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--r)) scale(1.5)}to{opacity:1}}
.vd-ti i{height:45%;width:0;border-radius:.3em;background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.sc-video.on .vd-ti i{animation:hb-grow .5s ease-out both;animation-delay:calc(var(--i)*.15s + 1.5s)}
@keyframes hb-grow{to{width:var(--w)}}
.vd-mu i{flex:1;height:20%;border-radius:2px;background:#c4b5fd;opacity:.25}
.sc-video.on .vd-mu i{animation:hb-bar .5s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s);opacity:.8}
@keyframes hb-bar{to{height:var(--h)}}
.vd-head{position:absolute;top:-.4em;bottom:-.4em;left:12%;width:2px;background:#fff;box-shadow:0 0 12px #a78bfa;opacity:0}
.sc-video.on .vd-head{animation:hb-head 3.2s 2.3s linear both}
@keyframes hb-head{0%{opacity:1;left:12%}97%{opacity:1}100%{left:98%;opacity:0}}
/* the preview frame morphs between the three formats (data-ar on .sc-video, cycled by banner.js) */
.vd-phone{position:absolute;left:78%;top:50%;transform:translate(-50%,-50%);width:48.4cqh;height:86cqh;transition:width .8s cubic-bezier(.6,0,.3,1.3),height .8s cubic-bezier(.6,0,.3,1.3),border-radius .8s;border-radius:2em;padding:.5em;background:#0b0a10;box-shadow:0 30px 60px -20px #000,inset 0 0 0 2px #2a2733}
.vd-scr{position:relative;width:100%;height:100%;border-radius:1.55em;overflow:hidden;background:#000}
.vd-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.vd-scr img:first-child{opacity:1}
.sc-video.on .vd-scr img{animation:hb-kb 6s linear infinite;animation-delay:calc(var(--i)*1s + 2.3s)}
@keyframes hb-kb{0%{opacity:0;transform:scale(1.25)}4%{opacity:1}17%{opacity:1}21%{opacity:0;transform:scale(1)}100%{opacity:0}}
.vd-cap{position:absolute;left:8%;right:8%;bottom:10%;text-align:center;font-weight:800;font-size:1.6cqw;opacity:0;text-shadow:0 2px 8px #000}
.sc-video.on .vd-cap{animation:hb-fade .5s 2.6s both;opacity:1}
.sc-video[data-ar=s] .vd-phone{width:56cqh;height:56cqh;border-radius:1.4em}
.sc-video[data-ar=h] .vd-phone{width:38cqw;height:21.4cqw;border-radius:1em}
.sc-video[data-ar=s] .vd-scr,.sc-video[data-ar=h] .vd-scr{border-radius:.8em}
.vd-ar{position:absolute;left:4%;bottom:8%;display:flex;gap:.5em;z-index:3}
.vd-ar span{display:flex;align-items:center;gap:.5em;padding:.45em .8em;border-radius:99px;font-size:1.4cqw;font-weight:700;background:rgba(255,255,255,.07);color:var(--hb-mut);transition:background .3s,color .3s}
.vd-ar span b{font-weight:inherit}
.vd-ar span i{display:block;border:2px solid currentColor;border-radius:2px}
.vd-ar span.on{background:var(--v);color:#fff}
.sc-video.on .vd-ar span{animation:hb-pop .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i)*.12s + 2s)}
.vd-cr{position:absolute;left:4%;top:4%;display:flex;align-items:baseline;gap:.3em;font-weight:800;color:var(--v3)}
.vd-cr b{font-size:5cqw;color:#fff;letter-spacing:-.04em}
.sc-video.on .vd-cr{animation:hb-pop .7s .1s both}

/* 3 REELS + AVATAR */
.sc-reels{perspective:900px;background:radial-gradient(70% 90% at 50% 100%,#3b1d6e,#15121e)}
.rl-ph{position:absolute;top:8%;height:84%;aspect-ratio:9/16;border-radius:2em;padding:.5em;background:#0b0a10;box-shadow:0 40px 70px -25px #000,inset 0 0 0 2px #2a2733;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.rl-ph video{width:100%;height:100%;object-fit:cover;border-radius:1.55em;background:#000}
.rl-1{left:16%;transform:rotateY(18deg) translateZ(-40px)}
.rl-2{right:16%;transform:rotateY(-18deg) translateZ(-40px)}
.sc-reels.on .rl-1{animation:hb-sw1 6s ease-in-out infinite alternate}
.sc-reels.on .rl-2{animation:hb-sw2 6s ease-in-out infinite alternate}
@keyframes hb-sw1{to{transform:rotateY(8deg) translateZ(0) translateY(-3%)}}
@keyframes hb-sw2{to{transform:rotateY(-8deg) translateZ(0) translateY(3%)}}
.rl-ph .lbl{top:4%;left:50%;transform:translateX(-50%)}
.rl-ph:last-of-type .lbl{background:var(--v)}
.rl-cc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:.6em;z-index:4}
.rl-cc span{padding:.5em 1em;border-radius:.6em;font-size:1.7cqw;font-weight:700;white-space:nowrap;background:rgba(32,28,44,.92);box-shadow:0 10px 30px -10px #000,inset 0 0 0 1px rgba(167,139,250,.4)}
.sc-reels.on .rl-cc span{animation:hb-pop .6s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i)*.45s + .6s)}
.rl-nets{position:absolute;left:0;right:0;bottom:4%;display:flex;justify-content:center;gap:.6em;z-index:4}
.rl-nets span{padding:.3em .8em;border-radius:99px;font-size:1.35cqw;font-weight:700;background:rgba(255,255,255,.1)}
.sc-reels.on .rl-nets span{animation:hb-fade .5s both;animation-delay:calc(var(--i)*.12s + 2.2s)}

/* 4 SHOWCASE */
.sh-film{position:absolute;left:4%;right:4%;top:5%;height:72%;border-radius:.8em;overflow:hidden;background:#000;box-shadow:0 30px 60px -25px #000}
.sh-film video{width:100%;height:100%;object-fit:cover}
.sc-showcase.on .sh-film{animation:hb-zoomin 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes hb-zoomin{from{transform:scale(.85);opacity:0}}
.sh-n{left:3%;bottom:6%}.sh-r{right:3%;bottom:6%;background:var(--v)!important}
.sh-strip{position:absolute;left:4%;right:4%;bottom:5%;display:grid;grid-template-columns:repeat(9,1fr);gap:1%}
.sh-strip img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:.3em;opacity:.3;transform:scale(.9);transition:opacity .35s,transform .35s,box-shadow .35s}
.sh-strip img.on{opacity:1;transform:translateY(-12%) scale(1.04);box-shadow:0 0 0 2px #a78bfa}
.sc-showcase.on .sh-strip img{animation:hb-fly .6s both;animation-delay:calc(var(--i)*.07s + .3s)}

/* 5 POSTING */
.sc-post{background:radial-gradient(60% 80% at 50% 45%,#2e1a55,#15121e)}
.ps-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.ps-svg path{fill:none;stroke:rgba(167,139,250,.5);stroke-width:.5;stroke-dasharray:1.5 1.8;animation:hb-dash 1s linear infinite}
@keyframes hb-dash{to{stroke-dashoffset:-3.3}}
.ps-svg circle{fill:#e9d5ff;filter:drop-shadow(0 0 2px #a78bfa)}
.ps-ph{position:absolute;left:50%;top:7%;height:66%;aspect-ratio:9/16;transform:translateX(-50%);border-radius:1.6em;padding:.45em;background:#0b0a10;box-shadow:0 0 0 .4em rgba(124,58,237,.25),0 30px 60px -20px #000;z-index:2}
.ps-ph video{width:100%;height:100%;object-fit:cover;border-radius:1.2em}
.sc-post.on .ps-ph{animation:hb-pulse 2s ease-in-out infinite}
@keyframes hb-pulse{50%{box-shadow:0 0 0 1em rgba(124,58,237,.08),0 30px 60px -20px #000}}
.ps-n{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.4em;padding:.4em .8em .4em .4em;border-radius:99px;background:rgba(32,28,44,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:1.5cqw;font-weight:700}
.ps-n i{width:2em;height:2em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.8em;font-weight:800;color:#fff}
.ps-n s{text-decoration:none;color:var(--hb-ok);transform:scale(0);transition:transform .3s cubic-bezier(.2,.9,.3,1.5)}
.sc-post.on .ps-n{animation:hb-pop .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i)*.15s + .3s)}
.sc-post.on .ps-n s{animation:hb-chk .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(var(--i)*.35s + 1.8s)}
@keyframes hb-chk{from{transform:scale(0)}to{transform:scale(1)}}
.ps-cal{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:flex;gap:.4em;z-index:3}
.ps-cal span{position:relative;width:4.4em;padding:.4em 0 1.6em;border-radius:.45em;background:rgba(255,255,255,.06);text-align:center;font-size:1.25cqw;font-weight:700;color:var(--hb-mut)}
.ps-cal span b{position:absolute;left:20%;right:20%;bottom:.45em;height:.8em;border-radius:.25em;background:var(--v2);opacity:0}
.sc-post.on .ps-cal span b{animation:hb-drop .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i)*.25s + 2.6s)}
@keyframes hb-drop{from{opacity:0;transform:translateY(-250%)}to{opacity:1}}
/* posting modes either side of the calendar: a tap posts by hand, a switch turns autopilot on */
.ps-mode{position:absolute;bottom:4.5%;z-index:3;display:flex;align-items:center;gap:.6em;padding:.55em .9em;border-radius:.6em;background:rgba(32,28,44,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:1.45cqw;font-weight:700;line-height:1.2}
.ps-mode small{display:block;font-size:.78em;font-weight:600;color:var(--hb-mut)}
.ps-man{left:3%}.ps-aut{right:3%}
.ps-tap{position:absolute;right:-.5em;bottom:-.9em;font-style:normal;font-size:1.5em;opacity:0}
.sc-post.on .ps-mode{animation:hb-pop .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:1.1s}
.sc-post.on .ps-aut{animation-delay:1.3s}
.sc-post.on .ps-tap{animation:hb-tap 3s 1.6s ease-in-out infinite}
@keyframes hb-tap{0%{opacity:0;transform:translate(1.2em,1em)}25%{opacity:1;transform:none}32%{transform:scale(.75)}40%{transform:none}75%{opacity:1}100%{opacity:0}}
.ps-sw{position:relative;flex:none;width:2.3em;height:1.3em;border-radius:99px;background:rgba(255,255,255,.15)}
.ps-sw::after{content:'';position:absolute;left:.18em;top:.18em;width:.94em;height:.94em;border-radius:50%;background:#fff}
.sc-post.on .ps-sw{animation:hb-swbg .35s 2.3s both}
.sc-post.on .ps-sw::after{animation:hb-swk .35s 2.3s cubic-bezier(.2,.9,.3,1.4) both}
.sc-post.on .ps-aut{animation:hb-pop .5s 1.3s cubic-bezier(.2,.9,.3,1.4) both,hb-glowv 1.6s 2.6s ease-in-out infinite}
@keyframes hb-swbg{to{background:#7c3aed}}
@keyframes hb-swk{to{transform:translateX(1em)}}
@keyframes hb-glowv{50%{box-shadow:inset 0 0 0 1px #a78bfa,0 0 18px -2px rgba(124,58,237,.8)}}

/* small panels (phones): cqw labels would drop to ~5px, so they get a readable floor */
@container (max-width:480px){
  .sc .lbl,.ph-list span,.vd-ar span,.rl-nets span,.ps-n,.ps-mode{font-size:9px}
  .ph-tool b{font-size:12px}.ph-tool span,.rl-cc span{font-size:10px}
  .vd-lane{padding-left:3%}.vd-lane::before{display:none}.vd-ar span b,.ps-mode small{display:none}
  .ps-cal{gap:2px}.ps-cal span{width:2.8em;font-size:7px}.ps-cal span:nth-child(even){display:none}
  .ps-n{padding:.3em .6em .3em .3em}.ps-mode{padding:.45em .6em;gap:.4em}
}
@media (prefers-reduced-motion:reduce){.hb *,.hb *::before,.hb *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.hb{--W:min(620px,74vw);padding:30px 0;user-select:none;container-type:inline-size}
.hb-top{padding:0 48px;position:relative;z-index:2}
.hb [data-copy]{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,18px)}
.hb [data-copy]{--fs:clamp(12px,2.3cqw,24px);align-items:baseline}
.hb .hb-tag{flex:none;font-size:var(--fs);letter-spacing:0;white-space:nowrap}
.hb .hb-tag em{font-size:1em;padding:.05em .45em;margin-left:.35em}
.hb .hb-h{margin:0;font-size:var(--fs);white-space:nowrap}
.hb-stage{position:relative;height:calc(var(--W)*.625 + 70px);margin-top:20px;perspective:1300px}
.hb-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s ease-out}
.hb .pn{position:absolute;left:50%;top:10px;width:var(--W);aspect-ratio:16/10;margin-left:calc(var(--W)/-2);border-radius:14px;cursor:pointer;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s,opacity 1.1s;box-shadow:0 50px 90px -40px #000,0 0 0 1px rgba(255,255,255,.08);
  -webkit-box-reflect:below 12px linear-gradient(transparent 80%,rgba(255,255,255,.16))}
.hb .pn.on{cursor:default;box-shadow:0 60px 100px -40px #000,0 0 0 1px rgba(167,139,250,.6),0 0 80px -10px rgba(124,58,237,.55)}
.hb .pn.jump{transition:none}
.hb .pn::before{content:'';position:absolute;inset:0;z-index:6;border-radius:14px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:300% 100%}
.hb .pn.on::before{animation:hb-glare 1.4s .5s ease-out}
@keyframes hb-glare{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
.hb-glow{position:absolute;left:50%;bottom:20px;width:70%;height:120px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(rgba(124,58,237,.55),transparent 70%);filter:blur(20px);z-index:-1;animation:hb-glow 4s ease-in-out infinite alternate}
@keyframes hb-glow{to{transform:translateX(-50%) scaleX(1.2);opacity:.6}}
.hb-nav{display:flex;justify-content:center;align-items:center;gap:14px;position:relative;z-index:2}
@media(max-width:820px){.hb-top{padding:0 16px}}
@media(max-width:540px){.hb [data-copy]{flex-wrap:wrap}.hb .hb-h{white-space:normal}}
/* phone: wider centre card, swipe instead of arrows, tabs in one scrolling row */
@media(max-width:820px){.hb{--W:88vw}.hb-nav{padding:0 12px}.hb-nav .hb-arrow{display:none}
  .hb .hb-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}.hb .hb-tabs::-webkit-scrollbar{display:none}
  .hb .hb-tabs{gap:4px;justify-content:center}.hb .hb-tabs button{flex:none;font-size:10px;letter-spacing:.03em;padding:8px 9px}}