/* Home: the constellation is made of the work. Each world after it wears its own brand's colors. */

/* hero sky */
.sky{background:var(--char-2) radial-gradient(1px 1px at 20% 30%,#fff8 50%,transparent 51%) 0 0/170px 170px;padding:24px 0 40px;overflow:hidden;margin-top:-100px;padding-top:124px}
.sky-grid{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:center;min-height:min(820px,calc(100vh - 80px))}
.sky h1{font:700 clamp(46px,6.2vw,94px)/.96 var(--display);letter-spacing:-.03em;max-width:11ch}
.sky .lede{font-size:19px;max-width:36ch;color:#D6D8D8}
.sky-cap{font-size:13px;color:var(--fog);text-align:right;margin-top:8px}

.const{position:relative;aspect-ratio:1/1;margin:9% 11% 9% 7%}
.const .lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.const .lines line{stroke:var(--green);stroke-width:.3;stroke-linecap:round}
.star{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:20%;transform:translate(-50%,-50%) rotate(var(--r));text-decoration:none;z-index:1;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.star img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:5px solid var(--white);border-radius:3px;box-shadow:0 18px 40px -12px #0009;background:#FFD84A}
.star.big{width:36%;z-index:2}
.star.big img,.star.wide img{aspect-ratio:16/10;object-position:top}
.star.wide{width:30%}
.star.tall{width:15%}
.star.tall img{aspect-ratio:9/16;object-position:top}
.star img.cut{object-fit:contain;padding:6px 0 0}
.star span{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap;font:500 13px var(--body);background:var(--white);color:var(--char);padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}
.star:hover,.star:focus-visible{transform:translate(-50%,-50%) rotate(0) scale(1.08);z-index:5}
.star:hover span,.star:focus-visible span{opacity:1}
.dot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:9px;height:9px;border-radius:50%;background:var(--white);transform:translate(-50%,-50%);box-shadow:0 0 0 5px #F7F7F51a}

/* one orchestrated moment: the lines draw, then the work lands on each star */
.js .const .lines line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1)}
.js .const.on .lines line{stroke-dashoffset:0}
.js .const .star{opacity:0;transform:translate(-50%,-40%) rotate(var(--r)) scale(.85);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .const.on .star{opacity:1;transform:translate(-50%,-50%) rotate(var(--r));transition-delay:calc(.7s + var(--i) * .11s)}
.js .const.on .star:hover,.js .const.on .star:focus-visible{transform:translate(-50%,-50%) rotate(0) scale(1.08);transition-delay:0s}

/* logo wall */
.logos{background:var(--white);color:var(--char);padding:88px 0 96px}
.logo-wall{list-style:none;padding:0;margin-top:36px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.logo-wall li{display:grid;grid-template-rows:auto auto;gap:12px;font-size:14px;color:#5E6161}
.logo-wall li img{background:var(--bg);aspect-ratio:1/1;width:100%;height:auto;object-fit:contain;padding:18%;border-radius:4px;box-sizing:border-box}

/* worlds */
.world{padding:110px 0;overflow:hidden}
.world-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.world-grid.flip .world-copy{order:2}
.kicker{font:600 17px var(--body);margin-bottom:14px}
.world h2{font:700 clamp(38px,4.6vw,68px)/1 var(--display);letter-spacing:-.025em}
.world-copy>p:not(.kicker){font-size:18px;margin-top:22px;max-width:44ch}

.jb{background:#24399B;color:#fff}
.jb .kicker{color:#FFE600}
.jb h2{color:#FFE600}
.jb .facts li{color:#C9D2FF}
.jb .facts li b{color:#fff}
.jb .btn{background:#FFE600;border-color:#FFE600;color:#1B1B1B}
.jb .btn:hover{background:#fff;border-color:#fff}
.world-art{position:relative}
.browser{margin:0;background:#fff;border-radius:10px;overflow:hidden;transform:rotate(-2deg);box-shadow:0 30px 60px -20px #000a}
.browser .bar{height:28px;background:#ECECEC;display:flex;gap:7px;align-items:center;padding:0 12px}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#C9C9C9}
.browser img{display:block;width:100%;height:auto}
.pin{position:absolute;border:6px solid #fff;box-shadow:0 20px 40px -14px #000b;object-fit:cover}
.pin.glass{width:30%;height:auto;aspect-ratio:3/4;left:-6%;bottom:-18%;transform:rotate(5deg)}

.sypp{background:radial-gradient(ellipse at 20% 30%,#5B3A8E 0,transparent 55%),radial-gradient(ellipse at 85% 80%,#7A2F7E 0,transparent 50%),#2A1840;color:#fff}
.sypp .kicker{color:#FFD84A}
.sypp .world-copy>p:not(.kicker){color:#E4DBF2}
.stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:32px}
.stats div{font-size:14px;color:#CFC3E6;max-width:12ch}
.stats b{display:block;font:700 46px/1 var(--display);color:#FFD84A;margin-bottom:6px}
.sypp .btn{background:#FFD84A;border-color:#FFD84A;color:#1B1B1B}
.sypp .btn:hover{background:#fff;border-color:#fff}
.sypp .btn.ghost{background:none;color:#fff;border-color:#8E77B5}
.sypp-art{aspect-ratio:1/1}
.sypp-art img{position:absolute;height:auto;object-fit:cover;border-radius:4px;box-shadow:0 24px 50px -18px #000c}
.sypp-art .p1{width:72%;aspect-ratio:16/9;left:0;top:4%;transform:rotate(-2deg)}
.sypp-art .p2{width:44%;aspect-ratio:1/1;right:0;top:30%;transform:rotate(3deg)}
.sypp-art .p3{width:34%;aspect-ratio:3/4;left:8%;bottom:0;transform:rotate(2deg);border:6px solid #fff}
.sypp-art .p4{width:19%;aspect-ratio:530/1080;object-fit:contain;left:45%;bottom:2%;box-shadow:none;filter:drop-shadow(0 20px 30px #0008)}

.apps{background:var(--white);color:var(--char);padding-bottom:96px}
.apps .kicker{color:#1E8A47}
.apps-head{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:end}
.apps-head>p{font-size:18px;color:#4A4D4D;max-width:44ch}
.rail{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:56px max(40px,calc((100vw - 1320px)/2 + 40px)) 40px;scrollbar-width:thin}
.rail:focus-visible{outline-offset:-4px}
.phone{flex:0 0 236px;margin:0;scroll-snap-align:start}
.phone:nth-child(even){margin-top:48px}
.phone img{display:block;width:100%;height:auto;aspect-ratio:600/1298;object-fit:cover;object-position:top;border:9px solid #222;border-radius:34px;box-shadow:0 26px 50px -22px #0007}
.phone figcaption{font-size:14px;color:#5E6161;margin-top:14px;padding-left:6px}
.phone figcaption b{display:block;color:var(--char);font-weight:600}
.pull{font:600 clamp(26px,3vw,40px)/1.15 var(--display);letter-spacing:-.015em;max-width:30ch;margin-top:24px;border-left:5px solid var(--green);padding-left:24px}
.pull cite{display:block;font:400 15px var(--body);font-style:normal;color:#5E6161;margin-top:14px;letter-spacing:0}

.paid{background:var(--green);color:#10291A;padding:72px 0 80px}
.paid ul{list-style:none;padding:0;margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.paid li{font-size:16px;border-top:2px solid #10291A;padding-top:16px}
.paid li b{display:block;font:700 clamp(26px,2.6vw,36px)/1.05 var(--display);margin-bottom:6px}

@media (max-width:1100px){
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .paid ul{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .sky{margin-top:-90px;padding-top:110px}
  .sky-grid{grid-template-columns:1fr;min-height:0;gap:8px}
  .const{margin:12% 12% 14% 8%}
  .star span{display:none}
  .world{padding:80px 0}
  .world-grid,.apps-head{grid-template-columns:1fr;gap:48px}
  .world-grid.flip .world-copy{order:0}
  .pin.glass{left:auto;right:-2%;bottom:-24%;width:34%}
  .jb .world-art{margin-bottom:40px}
  .phone{flex-basis:190px}
  .rail{padding:40px 16px 32px;gap:18px}
}
@media (max-width:560px){
  .logo-wall{grid-template-columns:1fr 1fr}
  .paid ul{grid-template-columns:1fr}
  .stats{gap:22px}
  .stats b{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .js .const .lines line,.js .const .star{transition:none!important;opacity:1;stroke-dashoffset:0}
  .js .const .star{transform:translate(-50%,-50%) rotate(var(--r))}
}