/* ═══════════════════════════════════════════════
   Home — the constellation hero.
   Preserved from the original prototype; the only
   change is that images now load from assets/img/
   instead of being inlined as base64.
   ═══════════════════════════════════════════════ */

:root{ --man:url(../img/man.webp); }

.kicker{text-align:center;margin:2px 0 10px;font-size:.82rem;letter-spacing:.2em;color:var(--muted)}

.frame{perspective:1400px;perspective-origin:50% 42%}
.system{
  position:relative;width:min(1180px,97vw);aspect-ratio:1672/941;margin:0 auto;
  container-type:inline-size;transform-style:preserve-3d;will-change:transform
}
.orbits{position:absolute;inset:0;transform:translateZ(-140px);opacity:.5}
.orbits ellipse{fill:none;stroke:#3F62B8;stroke-width:1;stroke-dasharray:7 13}
.orbits ellipse.warm{stroke:#8A5A1E}
.halo{
  position:absolute;left:50%;top:6%;translate:-50% 0;width:34%;aspect-ratio:1;
  border-radius:50%;border:3px solid transparent;transform:translateZ(-40px);
  background:conic-gradient(from 200deg,var(--blue),var(--cyan) 24%,transparent 46%,var(--orange) 72%,var(--blue)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.75
}

.ic{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  translate:-50% -50%;transform:translateZ(var(--z));
  background:none;border:0;padding:0;cursor:pointer;
  transition:opacity .35s,scale .35s
}
.ic .art{
  display:block;width:100%;aspect-ratio:var(--ar);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  animation:bob var(--dur) ease-in-out var(--d) infinite alternate;
  transition:scale .25s cubic-bezier(.2,.9,.3,1.4),filter .25s
}
@keyframes bob{from{translate:0 -5px}to{translate:0 6px}}
.ic:hover .art,.ic:focus-visible .art{scale:1.24;filter:brightness(1.12) drop-shadow(0 0 16px rgba(110,155,255,.75))}
.ic:focus-visible{outline:none}
.ic .tag{
  position:absolute;left:50%;top:calc(100% + 4px);translate:-50% 0;
  white-space:nowrap;font-size:11.5px;letter-spacing:.12em;color:#DCE6FF;
  background:rgba(6,10,22,.86);border:1px solid rgba(110,155,255,.3);
  border-radius:8px;padding:4px 9px;opacity:0;transition:opacity .2s,translate .2s;pointer-events:none
}
.ic:hover .tag,.ic:focus-visible .tag{opacity:1;translate:-50% 4px}

.centre{
  position:absolute;left:50%;bottom:39%;translate:-50% 0;width:41%;
  aspect-ratio:886/680;transform:translateZ(90px)
}
.figure{position:absolute;inset:0;background-image:var(--man);background-size:contain;
  background-position:bottom center;background-repeat:no-repeat;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.sheen{
  position:absolute;inset:0;-webkit-mask-image:var(--man);mask-image:var(--man);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:bottom center;mask-position:bottom center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:radial-gradient(circle 260px at var(--mx,50%) var(--my,30%),rgba(140,185,255,.55),rgba(140,185,255,.1) 44%,transparent 68%);
  mix-blend-mode:screen;pointer-events:none
}

.word{position:absolute;left:50%;bottom:1%;translate:-50% 0;width:56%;text-align:center;transform:translateZ(130px);z-index:6}
.word h1{
  font-family:var(--display);font-variation-settings:var(--display-set);margin:0;
  font-size:8.4cqw;line-height:.84;letter-spacing:-.03em;transform:skewX(-5deg);
  background:linear-gradient(178deg,#fff 20%,#CBD9F6 56%,#8DA4CF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 0 rgba(43,107,255,.3),0 8px 0 rgba(4,6,14,.8)
}
.banner{
  display:inline-block;margin-top:1.2cqw;padding:1cqw 4cqw;
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;
  font-size:3.4cqw;letter-spacing:.1em;color:#0B1226;
  background:linear-gradient(180deg,var(--amber),var(--orange));
  clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);
  box-shadow:0 8px 24px rgba(247,146,25,.3)
}
.lockup{position:relative;display:inline-block;margin-top:1.2cqw}
.lockup .banner{position:relative;z-index:2;margin-top:0}
.lockup .cog{
  position:absolute;left:50%;top:58%;translate:-50% 0;
  width:9cqw;height:9cqw;z-index:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.65))
}
.lockup .brk{
  position:absolute;top:calc(58% + 3.4cqw);width:2.5cqw;height:2.5cqw;z-index:2;
  fill:none;stroke:var(--cyan);stroke-width:14;stroke-linecap:round;stroke-linejoin:round
}
.lockup .brk.l{left:calc(50% - 8.2cqw)}
.lockup .brk.r{right:calc(50% - 8.2cqw)}

.tags{margin:9.6cqw 0 0;font-size:1.3cqw;letter-spacing:.3em;color:#B6C4E2}
.tags i{font-style:normal;color:var(--orange)}
.tags u{text-decoration:none;color:var(--cyan)}

.bubble{
  position:absolute;left:66%;top:14%;z-index:9;max-width:23cqw;
  background:var(--paper);color:#0B1226;border-radius:16px;padding:2cqw 2.4cqw;
  font-size:1.5cqw;line-height:1.4;font-weight:400;
  box-shadow:0 18px 40px rgba(0,0,0,.6);transform:translateZ(150px)
}
.bubble::after{content:"";position:absolute;left:-9px;bottom:20px;width:20px;height:20px;
  background:var(--paper);clip-path:polygon(100% 0,100% 100%,0 74%)}
.bubble .txt{display:block;transition:opacity .18s,translate .18s}
.bubble.swap .txt{opacity:0;translate:0 -6px}

@media (max-width:820px){
  .system{aspect-ratio:1/1.1}
  .centre{width:88%;bottom:38%}
  .halo{width:58%;top:10%}
  .word{width:86%}
  .word h1{font-size:16cqw}
  .banner{font-size:6cqw;padding:1.8cqw 6cqw}
  .tags{font-size:2.6cqw;margin-top:15.5cqw}
  .lockup .cog{width:16cqw;height:16cqw}
  .lockup .brk{width:4.4cqw;height:4.4cqw;top:calc(58% + 6cqw)}
  .lockup .brk.l{left:calc(50% - 14.5cqw)}
  .lockup .brk.r{right:calc(50% - 14.5cqw)}
  .frame{margin-bottom:124px}
  .bubble{left:50%;top:auto;bottom:-9%;translate:-50% 0;max-width:74cqw;font-size:3.2cqw;padding:3.4cqw}
  .bubble::after{display:none}
  /* Phone: the container turns portrait, so the photo and the badge together cover
     about 58% of it and the only genuinely free space is the left margin plus a
     strip top-right. Five icons are kept and placed in that space; the rest are
     hidden rather than clipped off the edges. !important beats the inline styles. */
  .ic{display:none}
  #i-idea,#i-chatgpt,#i-database,#i-instagram,#i-googleads{display:block;--w:11.5% !important}
  #i-idea      {--x:10%   !important;--y:9%    !important}
  #i-chatgpt   {--x:25%   !important;--y:20.5% !important}
  #i-database  {--x:10%   !important;--y:34%   !important}
  #i-instagram {--x:89%   !important;--y:8%    !important}
  #i-googleads {--x:89%   !important;--y:23%   !important}
}
@media (prefers-reduced-motion:reduce){
  .ic .art{animation:none}
}

/* icon art */
#i-idea      .art{background-image:url(../img/i-idea.webp)}
#i-aiauto    .art{background-image:url(../img/i-aiauto.webp)}
#i-brain     .art{background-image:url(../img/i-brain.webp)}
#i-meta      .art{background-image:url(../img/i-meta.webp)}
#i-instagram .art{background-image:url(../img/i-instagram.webp)}
#i-googleads .art{background-image:url(../img/i-googleads.webp)}
#i-youtube   .art{background-image:url(../img/i-youtube.webp)}
#i-chatgpt   .art{background-image:url(../img/i-chatgpt.webp)}
#i-code      .art{background-image:url(../img/i-code.webp)}
#i-cloud     .art{background-image:url(../img/i-cloud.webp)}
#i-megaphone .art{background-image:url(../img/i-megaphone.webp)}
#i-target    .art{background-image:url(../img/i-target.webp)}
#i-database  .art{background-image:url(../img/i-database.webp)}
#i-analytics .art{background-image:url(../img/i-analytics.webp)}
#i-roi       .art{background-image:url(../img/i-roi.webp)}
#i-dev       .art{background-image:url(../img/i-dev.webp)}
#i-bot       .art{background-image:url(../img/i-bot.webp)}
#i-systems   .art{background-image:url(../img/i-systems.webp)}
#i-growth    .art{background-image:url(../img/i-growth.webp)}