:root{
  --bg:#000;
  --fg:#F5F5F5;
  --muted:#8A8A8A;
  --body:#A3A3A3;
  --dim:#6B6B6B;
  --line:#1F1F1F;
  --card:#050505;
  --accent:#F65CF0;
  --live:#8EF0E8;
  --pad:48px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:"Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--fg)}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3,p{margin:0}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dim{color:var(--dim)}
.row{display:flex;justify-content:space-between;align-items:baseline}
.row h2{font-size:inherit;font-weight:400}

.grad{background:linear-gradient(100deg,#8EF0E8 0%,#FFB8E6 32%,#F65CF0 58%,#B04BFF 80%,#6E9BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.spin{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* header */
.bar{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:28px var(--pad);border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bar-name{color:var(--fg)}
.bar-loc{text-align:center}
.bar-loc .short{display:none}
.bar-mail{justify-self:end;padding:12px 0;text-decoration:none}

/* hero */
.hero{overflow:clip;display:grid;grid-template-columns:1fr 560px;gap:96px;align-items:center;padding:96px var(--pad) 112px;border-bottom:1px solid var(--line)}
.hero-copy{display:flex;flex-direction:column;gap:40px}
.hero h1{font-size:46px;font-weight:400;line-height:1.14;letter-spacing:-.045em}
.lede{max-width:560px;font-size:22px;line-height:1.45;color:var(--body)}
.logo{width:100%;max-width:560px;height:auto;aspect-ratio:1;display:block;border-radius:50%}

/* apps */
.apps{display:flex;flex-direction:column;gap:32px;padding:64px var(--pad) 80px;border-bottom:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{display:flex;flex-direction:column;gap:24px;min-height:380px;padding:28px;background:var(--card)}
.meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.status{display:flex;align-items:center;gap:8px;color:var(--fg)}
.dot{display:block;width:8px;height:8px;border-radius:50%}
.dot.live{background:var(--live)}
.dot.hollow{width:6px;height:6px;border:1px solid var(--muted)}
.icon{display:block;width:72px;height:72px;border-radius:16px;object-fit:cover}
.body{flex-grow:1;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:28px;font-weight:700;letter-spacing:-.04em}
.card p{font-size:16px;line-height:1.5;color:var(--body)}
.cta{font-size:13px;padding:12px 0;text-decoration:none}
.muted{color:var(--muted)}

/* footer */
.foot{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;gap:96px;padding:48px var(--pad) 40px}
.foot nav{display:flex;gap:40px}
.foot nav a{padding:12px 0;margin:-12px 0;text-decoration:none}
.foot-mail{display:none}
.foot .row{align-items:baseline}
.wordmark-wrap{display:flex;flex-direction:column;gap:16px;container-type:inline-size}
.wordmark{font-size:12cqw;font-weight:700;line-height:.95;letter-spacing:-.07em;white-space:nowrap;text-align:center}
.wordmark span{display:inline}
.legal{align-items:baseline}

/* tablet */
@media (max-width:1100px){
  :root{--pad:32px}
  .hero{grid-template-columns:1fr;gap:56px;padding:64px var(--pad) 72px}
  .logo{max-width:420px;order:-1}
  .grid{grid-template-columns:repeat(2,1fr)}
}

/* mobile */
@media (max-width:640px){
  :root{--pad:20px}
  .label,.bar{font-size:11px}
  .bar{display:flex;justify-content:space-between;padding:16px var(--pad)}
  .bar-loc .full,.bar-mail{display:none}
  .bar-loc .short{display:inline}
  .hero{display:flex;flex-direction:column;align-items:flex-start;gap:32px;padding:40px var(--pad) 56px}
  .hero-copy{display:contents}
  .logo{order:-1;width:300px;max-width:100%}
  .hero h1{font-size:26px;line-height:1.18}
  .lede{font-size:18px}
  .apps{gap:24px;padding:40px var(--pad) 48px}
  .grid{grid-template-columns:1fr}
  .card{display:grid;grid-template-columns:56px 1fr;grid-template-areas:"icon head" "icon body" "icon cta";column-gap:16px;row-gap:6px;min-height:0;padding:20px}
  .meta{display:contents}
  .meta>span:first-child{display:none}
  .icon{grid-area:icon;width:56px;height:56px;border-radius:12.5px}
  .status{grid-area:head;justify-self:end;align-self:center;font-size:11px;gap:6px}
  .body{display:contents}
  .card h3{grid-area:head;font-size:20px;letter-spacing:-.03em;align-self:center}
  .card p{grid-area:body;font-size:15px;line-height:1.45}
  .cta{grid-area:cta;padding:12px 0 0}
  .dot{width:7px;height:7px}
  .foot{gap:40px;padding:40px var(--pad) 28px}
  .foot .row:first-child{flex-direction:column;gap:8px}
  .foot nav{flex-direction:column;gap:0}
  .foot-mail{display:inline}
  .wordmark{display:flex;flex-direction:column;align-items:flex-start;text-align:left;font-size:27cqw;letter-spacing:-.06em;white-space:normal}
  .wordmark-wrap{gap:12px}
}