/* Hero */
.hero{position:relative;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(40px,7vw,96px));padding-bottom:clamp(60px,8vw,110px);overflow:hidden}
.hero::before{content:"";position:absolute;width:820px;height:820px;right:-220px;top:-120px;background:radial-gradient(closest-side,rgba(99,19,171,.28),rgba(99,19,171,0));filter:blur(10px);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.hero::after{content:"";position:absolute;width:700px;height:700px;left:-260px;bottom:-300px;background:radial-gradient(closest-side,rgba(40,80,200,.32),rgba(40,80,200,0));pointer-events:none}
@keyframes drift{to{transform:translate(-60px,50px) scale(1.08)}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.12em}
.hero h1 .line>span{display:block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 .line:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero .lead{margin-top:28px;opacity:0;animation:fadein .9s .5s forwards}
.hero-actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadein .9s .65s forwards}
.hero-note{margin-top:22px;font-size:.92rem;color:var(--muted);opacity:0;animation:fadein .9s .8s forwards;display:flex;align-items:center;gap:10px}
.hero-note i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18)}
@keyframes fadein{to{opacity:1}}
.reels{position:relative;height:560px;opacity:0;animation:fadein 1.2s .4s forwards}
.reel{position:absolute;width:200px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);transition:transform .2s ease-out}
.reel svg{width:100%;height:100%}
.reel .meta{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600}
.reel .meta span{background:rgba(5,9,20,.65);backdrop-filter:blur(6px);padding:5px 10px;border-radius:999px}
.reel.r1{left:0;top:60px;animation:float1 7s ease-in-out infinite}
.reel.r2{left:150px;top:0;width:220px;z-index:2;animation:float2 8s ease-in-out infinite}
.reel.r3{right:0;top:120px;animation:float1 9s ease-in-out infinite reverse}
@keyframes float1{50%{translate:0 -16px}}
@keyframes float2{50%{translate:0 14px}}
.live{position:absolute;left:8px;bottom:30px;z-index:3;background:var(--surface);border:1px solid var(--line-2);padding:14px 18px;border-radius:16px;display:flex;gap:14px;align-items:center;box-shadow:0 20px 50px -15px rgba(0,0,0,.7)}
.live b{font-family:var(--display);font-size:1.5rem;color:var(--orange-2);line-height:1}
.live small{display:block;color:var(--muted);font-size:.78rem;line-height:1.3}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .reels{height:470px;max-width:460px;margin-inline:auto;width:100%}
  .reel{width:150px}.reel.r2{width:170px;left:110px}
}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.stat{padding:38px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.1rem,4vw,3.3rem);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.stat b em{font-style:normal;color:var(--orange)}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:.95rem}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* Marquee */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:64px;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.client{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.03em;color:#5d6b92;white-space:nowrap;display:flex;align-items:center;gap:10px;transition:color .3s}
.client:hover{color:var(--text)}
.client svg{width:24px;height:24px}

/* Pillars */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .h-lg{max-width:16ch}
.pillars{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.pillar{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:32px;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:border-color .3s,transform .4s;text-align:left;width:100%}
.pillar:hover{border-color:rgba(99,19,171,.6);transform:translateY(-4px)}
.pillar .bgart{position:absolute;inset:0;z-index:-1;opacity:.9;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pillar:hover .bgart{transform:scale(1.07)}
.pillar .bgart svg{width:100%;height:100%}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,9,20,0) 20%,rgba(5,9,20,.92) 90%)}
.pillar h3{font-size:1.65rem;margin-bottom:10px}
.pillar p{color:#c2cce6;font-size:.98rem;max-width:42ch}
.pillar .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:.82rem;color:#dfe6fb}
.p-a{grid-column:span 7}.p-b{grid-column:span 5}.p-c{grid-column:span 7}.p-d{grid-column:span 5}
@media (max-width:860px){.p-a,.p-b,.p-c,.p-d{grid-column:span 12}.pillar{min-height:300px}}

/* Work grid */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.subfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px;min-height:0}
.fbtn{padding:10px 20px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-weight:500;transition:all .25s;font-size:.95rem}
.fbtn:hover{color:var(--text);border-color:var(--text)}
.fbtn[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.subfilters .fbtn{padding:7px 15px;font-size:.86rem}
.subfilters .fbtn[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;grid-auto-flow:dense}
.card{position:relative;border:0;padding:0;text-align:left;background:var(--surface);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:transform .4s,border-color .3s;display:block}
.card.wide{grid-column:span 3;aspect-ratio:16/10}
.card.tall{grid-column:span 2;aspect-ratio:4/5}
.card:hover{transform:translateY(-5px);border-color:rgba(99,19,171,.6)}
.card .art{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover .art{transform:scale(1.08)}
.card .art svg{width:100%;height:100%}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,20,.05) 40%,rgba(5,9,20,.88));pointer-events:none}
.card .tag{position:absolute;top:14px;left:14px;z-index:2;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(5,9,20,.6);backdrop-filter:blur(8px);border:1px solid var(--line-2)}
.card .play{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .3s,transform .3s}
.card:hover .play{background:var(--orange);transform:scale(1.1)}
.card .info{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.card .info h4{font-size:1.25rem;margin-bottom:2px}
.card .info p{font-size:.88rem;color:#c2cce6}
.card.enter{animation:cardin .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(24px) scale(.97)}}
@media (max-width:900px){.card.wide{grid-column:span 6}.card.tall{grid-column:span 3}}
@media (max-width:560px){.card.tall{grid-column:span 6}}

.pillar .bgart img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.p-a .bgart{opacity:1}
.artimg{width:100%;height:100%;object-fit:cover;display:block}
.card.imgcard{grid-column:span 2;aspect-ratio:1/1;cursor:default}
.card.imgcard:hover{transform:none;border-color:var(--line)}
.card.imgcard:hover .art{transform:none}
.card.imgcard::after{display:none}
.card.imgcard .artimg{object-fit:contain}
@media (max-width:860px){.card.imgcard{grid-column:span 6}}
/* Orbit showcase */
.work-grid.has-orbit{display:block}
.showorb{position:relative;width:min(100%,860px);aspect-ratio:1/1;margin:0 auto;border-radius:var(--r);overflow:hidden;background:#111}
.showorb .ob-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 4s ease}
.showorb .ob-bg.on{opacity:1;transform:scale(1)}
.showorb .ob-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45));pointer-events:none}
.showorb .ob-th{position:absolute;left:calc(50% + var(--x)*27%);bottom:calc(19% - var(--a)*var(--a)*4.75%);width:calc(11% + (2 - var(--a))*3.5%);aspect-ratio:1/1;transform:translateX(-50%);padding:5px;border-radius:50%;border:0;cursor:pointer;background:conic-gradient(from 20deg,#f4f4f4,#8a8a8a,#e8e8e8,#6d6d6d,#f4f4f4);box-shadow:0 10px 26px rgba(0,0,0,.5);transition:left .9s cubic-bezier(.6,.05,.2,1),bottom .9s cubic-bezier(.6,.05,.2,1),width .9s cubic-bezier(.6,.05,.2,1),opacity .6s}
.showorb .ob-th img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
@media (max-width:860px){.showorb .ob-th{padding:3px}}
/* Hero logo mark */
.hm-wrap{position:absolute;inset:0;display:grid;place-items:center}
.hm-mark{position:relative;width:min(56%,300px);aspect-ratio:1/1;transition:transform .25s ease-out;z-index:2}
.hm-mark img{width:100%;height:100%;display:block;filter:drop-shadow(0 24px 60px rgba(145,96,214,.55));animation:hmfloat 6s ease-in-out infinite,hmin 1.2s cubic-bezier(.2,.8,.2,1) both}
.hm-mark::before{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,rgba(145,96,214,.55),rgba(145,96,214,0) 65%);animation:hmglow 4s ease-in-out infinite;z-index:-1}
.hm-ring{position:absolute;left:50%;top:50%;width:min(56%,300px);aspect-ratio:1/1;border-radius:50%;border:1.5px solid rgba(180,130,255,.55);translate:-50% -50%;opacity:0;animation:hmring 5.4s cubic-bezier(.2,.6,.3,1) infinite}
.hm-ring.r2{animation-delay:1.8s}.hm-ring.r3{animation-delay:3.6s}
.hm-orbit{position:absolute;left:50%;top:50%;width:min(88%,480px);aspect-ratio:1/1;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(255,255,255,.12);animation:hmspin 28s linear infinite}
.hm-orbit i{position:absolute;width:12px;height:12px;border-radius:50%;background:#c98bff;box-shadow:0 0 18px 4px rgba(201,139,255,.7)}
.hm-orbit i:nth-child(1){left:50%;top:-6px}
.hm-orbit i:nth-child(2){right:14%;bottom:12%;width:8px;height:8px;background:#ff5ec4;box-shadow:0 0 16px 3px rgba(255,94,196,.7)}
.hm-orbit i:nth-child(3){left:6%;top:62%;width:6px;height:6px;background:#fff}
@keyframes hmfloat{50%{translate:0 -16px;rotate:2deg}}
@keyframes hmin{from{opacity:0;scale:.6;rotate:-25deg}}
@keyframes hmglow{50%{opacity:.55;transform:scale(1.12)}}
@keyframes hmring{0%{opacity:.7;scale:1}100%{opacity:0;scale:2.1}}
@keyframes hmspin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.hm-mark img,.hm-mark::before,.hm-ring,.hm-orbit{animation:none}.hm-ring{display:none}}

/* ===== Hero: black stage + high-motion intro ===== */
.hero{background:linear-gradient(180deg,#000 82%,var(--bg))}
.hero::before,.hero::after,.hero-bg{display:none}
.hero-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-stars i{position:absolute;border-radius:50%;background:#fff;opacity:0;animation:twinkle var(--t,4s) var(--dl,0s) ease-in-out infinite,sdrift var(--dr,18s) linear infinite alternate}
@keyframes twinkle{50%{opacity:var(--o,.6)}}
@keyframes sdrift{to{transform:translate(var(--dx,20px),var(--dy,-30px))}}
.hero-grid{will-change:transform,opacity}
/* headline: per-word masked reveal */
.hero h1 .line{overflow:visible;padding-bottom:.12em}
.hero h1 .line>span{transform:none;animation:none;display:block}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin-bottom:-.14em}
.hero h1 .w>b{display:inline-block;font-weight:inherit;transform:translateY(115%) rotate(7deg);transform-origin:0 100%;filter:blur(10px);opacity:0;animation:wordin 1.1s cubic-bezier(.16,.9,.24,1) forwards;animation-delay:calc(.2s + var(--i)*.11s)}
@keyframes wordin{60%{filter:blur(0)}to{transform:none;filter:blur(0);opacity:1}}
.hero h1 .line:nth-child(4) .w>b{background:linear-gradient(90deg,#b36bff,#ff5ec4 40%,#ff9a3d 70%,#b36bff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordin 1.1s cubic-bezier(.16,.9,.24,1) forwards,gshift 5s linear infinite;animation-delay:calc(.2s + var(--i)*.11s),0s}
.hero .hero-grid h1 .line:nth-child(3)>span{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
@keyframes gshift{to{background-position:220% 0}}
/* supporting copy */
.hero .lead{opacity:0;filter:blur(8px);transform:translateY(24px);animation:softin 1s 1.05s cubic-bezier(.2,.8,.2,1) forwards}
.hero-actions{opacity:1;animation:none}
.hero-actions>*{opacity:0;transform:translateY(22px) scale(.92);animation:popin .8s cubic-bezier(.2,.9,.3,1.2) forwards}
.hero-actions>*:nth-child(1){animation-delay:1.3s}.hero-actions>*:nth-child(2){animation-delay:1.42s}
.hero-note{opacity:0;transform:translateY(14px);animation:softin .9s 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.hero-note i{animation:ping 2s ease-out infinite}
@keyframes softin{to{opacity:1;filter:blur(0);transform:none}}
@keyframes popin{to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}100%{box-shadow:0 0 0 12px rgba(61,220,132,0)}}
.hero .btn.primary{position:relative;overflow:hidden}
.hero .btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sheen 3.8s 2.2s ease-in-out infinite}
@keyframes sheen{0%{left:-60%}35%,100%{left:140%}}
/* mark enters after the text */
.reels{animation:fadein 1s .5s forwards}
.hm-mark img{animation:hmfloat 6s 1.8s ease-in-out infinite,hmin 1.4s .5s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){
  .hero h1 .w>b,.hero .lead,.hero-actions>*,.hero-note{opacity:1;transform:none;filter:none;animation:none}
  .hero h1 .line:nth-child(3) .w>b{animation:none}
  .hero-stars i{animation:none;opacity:.3}
}

/* Logo mark: bouncing ball */
.hm-mark img{transform-origin:50% 100%;animation:hmbounce 3.2s 1.8s infinite,hmin 1.4s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes hmbounce{
  0%{transform:translateY(-36%) scale(1,1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  27%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  30%{transform:translateY(0) scale(1.18,.76);animation-timing-function:ease-out}
  34%{transform:translateY(-6%) scale(.94,1.08);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  47%{transform:translateY(-17%) scale(1,1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  59%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  61.5%{transform:translateY(0) scale(1.1,.88);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  72%{transform:translateY(-7%) scale(1,1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  79%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  80.5%{transform:translateY(0) scale(1.05,.95);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  85%{transform:translateY(-2%) scale(1,1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  89%{transform:translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  93%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  100%{transform:translateY(-36%) scale(1,1)}
}
/* light pool on the "floor" that reacts to the bounce */
.hm-mark::after{content:"";position:absolute;left:50%;bottom:-9%;width:78%;height:9%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(160,100,235,.65),rgba(160,100,235,0));filter:blur(4px);z-index:-1;animation:hmshadow 3.2s 1.8s infinite}
@keyframes hmshadow{
  0%{transform:scale(.55);opacity:.25;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  27%,30%{transform:scale(1.15);opacity:1;animation-timing-function:ease-out}
  47%{transform:scale(.8);opacity:.5;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  59%,61.5%{transform:scale(1.05);opacity:.9;animation-timing-function:ease-out}
  72%{transform:scale(.95);opacity:.75}
  79%,80.5%{transform:scale(1);opacity:.85}
  85%{transform:scale(1);opacity:.85}
  89%,93%{transform:scale(1);opacity:.9}
  100%{transform:scale(.55);opacity:.25}
}
@media (prefers-reduced-motion:reduce){.hm-mark img,.hm-mark::after{animation:none}}