@charset "UTF-8";
/* ============================================================
   HERO ORBIT — app icons scattered around the headline.
   The layer is wider than the text column, so tiles sit beside
   the copy, never behind it. Depth classes d1..d4 drive size,
   opacity, blur and how far a tile parallaxes.
   Tiles are white so the black marks (GitHub, Vercel, OpenAI)
   keep their real colour on a black page.
   ============================================================ */

.hero{position:relative}

.hero-orbit{
  position:absolute;
  top:104px;bottom:-16px;
  left:50%;
  width:min(1520px,98vw);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
}

/* ============================================================
   BRAND MARKS — one material, lit from above, each carrying
   its own colour as light rather than as a background.

   Why not a white tile: on a black page a white chip is the
   brightest object on screen and steals the headline, and seven
   identical chips flatten into wallpaper. A brand's monochrome
   mark is also *designed* to invert — GitHub, Vercel and OpenAI
   ship white marks for dark surfaces, so white here IS their
   real colour. Telegram, WhatsApp and Claude stay as drawn.
   ============================================================ */

.orbit-icon,
.toolkit .tool-mark{
  position:relative;
  display:grid;place-items:center;
  border-radius:calc(var(--s,46px) * .29);
  background:
    linear-gradient(158deg,rgba(255,255,255,.115),rgba(255,255,255,.028) 52%,rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),          /* top edge catches the light */
    inset 0 -1px 0 rgba(0,0,0,.45),               /* and the underside falls away */
    0 10px 26px -10px rgba(0,0,0,.9),
    0 0 30px -8px var(--glow,transparent);        /* the mark's own colour, as a halo */
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  overflow:hidden;
}
/* a faint sheen across the upper half, so the surface reads as glass */
.orbit-icon::after,
.toolkit .tool-mark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 46%);
  opacity:.9;
}
.orbit-icon img,
.toolkit .tool-mark img{
  position:relative;z-index:1;
  width:56%;height:56%;
  object-fit:contain;
  display:block;
}

/* monochrome marks invert for dark surfaces — that is their dark-mode form */
.b-github  img,.b-vercel img,.b-openai img,
.tool-mark.github img,.tool-mark.vercel img,
.tool-mark.codex  img,.tool-mark.chatgpt img{
  filter:brightness(0) invert(1);
  opacity:.94;
}
/* colour marks keep their own hue, lifted a little off the black */
.b-telegram img,.b-whatsapp img,.b-claude img,
.tool-mark.telegram img,.tool-mark.whatsapp img,.tool-mark.claude img{
  filter:saturate(1.08) brightness(1.06);
}

/* per-brand halo */
.b-github,.tool-mark.github     {--glow:rgba(255,255,255,.2)}
.b-vercel,.tool-mark.vercel     {--glow:rgba(255,255,255,.18)}
.b-openai,.tool-mark.codex,
.tool-mark.chatgpt              {--glow:rgba(255,255,255,.18)}
.b-telegram,.tool-mark.telegram {--glow:rgba(56,170,232,.5)}
.b-whatsapp,.tool-mark.whatsapp {--glow:rgba(37,211,102,.44)}
.b-claude,.tool-mark.claude     {--glow:rgba(217,119,87,.52)}

/* ============================================================
   HERO ORBIT TILES
   ============================================================ */
.orbit-icon{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  margin-left:calc(var(--s) / -2);
  margin-top:calc(var(--s) / -2);
  /* --dx/--dy drift, --rx/--ry tilt: all written by motion.js */
  transform:
    perspective(620px)
    translate3d(var(--dx,0px),var(--dy,0px),0)
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
    rotate(var(--r,0deg))
    scale(var(--in,.82));
  opacity:0;
  transition:opacity .66s cubic-bezier(.4,0,.2,1),transform .66s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.orbit-icon img{width:56%;height:56%;object-fit:contain;display:block}

/* depth of field: the far tiles are smaller, dimmer and genuinely out of focus */
.orbit-icon.d1{filter:none}
.orbit-icon.d2{filter:blur(.4px)}
.orbit-icon.d3{filter:blur(1.1px)}
.orbit-icon.d4{filter:blur(2.4px)}

.hero-orbit.is-in .orbit-icon{--in:1}
.hero-orbit.is-in .orbit-icon.d1{opacity:1}
.hero-orbit.is-in .orbit-icon.d2{opacity:.84}
.hero-orbit.is-in .orbit-icon.d3{opacity:.58}
.hero-orbit.is-in .orbit-icon.d4{opacity:.36}

/* keep the headline above the scatter */
.hero-copy{position:relative;z-index:2}

@media (max-width:1100px){
  .orbit-icon.d1{--s:44px !important}
  .orbit-icon.d2{--s:38px !important}
}
@media (max-width:820px){
  .hero-orbit{width:100%;top:-8px;bottom:-8px}
  .orbit-icon.d3,.orbit-icon.d4{display:none}
  .orbit-icon.d1{--s:38px !important}
  .orbit-icon.d2{--s:32px !important}
  .hero-orbit.is-in .orbit-icon.d1{opacity:.78}
  .hero-orbit.is-in .orbit-icon.d2{opacity:.6}
}
@media (max-width:560px){
  .hero-orbit{display:none}
}

@media (prefers-reduced-motion:reduce){html:not(.motion-on) .orbit-icon{transition:none;--in:1}}

/* ============================================================
   TOOLKIT RAIL
   Every rail rule is scoped under .is-rail, and ONLY motion.js
   adds that class — and only when it has actually cloned the
   cards. CSS and JS can no longer disagree about whether this
   is a rail or a grid, which is what produced duplicate cards
   wrapped into a grid. Without the class the original grid
   stands untouched.
   ============================================================ */

/* card skin, shared by both modes */
.toolkit .tool-item{
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hair-soft);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}

/* ---- rail mode ---- */
.toolkit .tool-grid.is-rail{
  display:block;
  position:relative;
  overflow:hidden;
  padding:12px 0 18px;
  border:0;
  gap:0;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  cursor:grab;
  touch-action:pan-y;
}
.toolkit .tool-grid.is-rail.is-dragging{cursor:grabbing}

.is-rail .tool-rail{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:14px;
  width:max-content;
  will-change:transform;
}

.is-rail .tool-item{
  flex:0 0 auto;
  width:170px;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:16px 16px 18px;
  margin:0;
  /* --sc / --by are written by the rail loop */
  transform:translate3d(0,var(--by,0px),0) scale(var(--sc,1));
  will-change:transform;
  user-select:none;
}
.is-rail .tool-item .tool-mark{
  width:46px;height:46px;
  transform:rotate(var(--mr,0deg)) scale(var(--ms,1));
  transition:transform .42s cubic-bezier(.34,1.3,.5,1),box-shadow .3s ease;
}
/* hovering lifts the mark and pushes its own halo out, rather than
   replacing the material's lighting with a flat drop shadow */
.is-rail .tool-item:hover .tool-mark{
  --mr:-6deg;--ms:1.1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 14px 30px -10px rgba(0,0,0,.95),
    0 0 42px -6px var(--glow,transparent);
}
.is-rail .tool-item span{
  font-size:15px;font-weight:600;
  color:rgba(255,255,255,calc(.6 + .4 * var(--f,0)));
}
.is-rail .tool-item small{
  font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,calc(.3 + .22 * var(--f,0)));
}
.is-rail .tool-item img{pointer-events:none;-webkit-user-drag:none}

@media (max-width:620px){
  .is-rail .tool-item{width:148px;padding:14px 14px 16px}
  .is-rail .tool-item .tool-mark{width:40px;height:40px}
}