:root{
  color-scheme:dark;
  --canvas:#080a0d;
  --canvas-raised:#0c0f13;
  --surface:#11151a;
  --surface-lit:#161b21;
  --hairline:#2a3037;
  --primary:#f4f5f4;
  --secondary:#a7afb8;
  --quiet:#717a84;
  --solar:#f5b94c;
  --solar-hot:#f17f4b;
  --sky:#67c9ff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--canvas)}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 84% 7%,rgba(245,185,76,.07),transparent 23rem),
    radial-gradient(circle at 8% 42%,rgba(103,201,255,.045),transparent 28rem),
    var(--canvas);
  color:var(--primary);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
}
.page-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:100% 44px;
  mask-image:linear-gradient(to bottom,#000,transparent 65%);
}
.wrap{
  position:relative;
  width:min(1100px,100%);
  margin:0 auto;
  padding:64px 32px 80px;
}
.identity{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:60px;
}
.identity.compact{margin-bottom:44px}
.app-icon{
  width:72px;
  height:72px;
  flex:none;
  border-radius:17px;
  box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);
}
.compact .app-icon{width:52px;height:52px;border-radius:13px}
.eyebrow,.section-label{
  margin:0 0 8px;
  color:var(--solar);
  font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  letter-spacing:.18em;
}
h1,h2,h3,p{max-width:72ch}
h1{
  margin:0;
  font:600 clamp(28px,4vw,44px)/1.06 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  letter-spacing:-.035em;
}
h2{
  margin:0 0 26px;
  font:590 clamp(28px,4.2vw,48px)/1.08 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  letter-spacing:-.04em;
}
h3{
  margin:12px 0 8px;
  font:600 20px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  letter-spacing:-.02em;
}
p{margin:.75em 0}
a{color:var(--primary);text-decoration-color:var(--solar);text-underline-offset:4px}
a:hover{color:var(--solar)}
.tag{margin:4px 0 0;color:var(--secondary);font-size:17px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  align-items:center;
  gap:72px;
  min-height:440px;
  margin-bottom:120px;
}
.lede{
  margin:0;
  color:var(--secondary);
  font-size:clamp(19px,2.4vw,26px);
  line-height:1.48;
  letter-spacing:-.015em;
}
.availability{
  display:inline-flex;
  align-items:center;
  margin-top:28px;
  padding:9px 14px;
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--secondary);
  background:rgba(255,255,255,.025);
  font-size:13px;
}
.availability::before{
  content:"";
  width:7px;
  height:7px;
  margin-right:9px;
  border-radius:50%;
  background:var(--solar);
  box-shadow:0 0 16px var(--solar);
}
.solar-face{
  position:relative;
  width:min(360px,80vw);
  aspect-ratio:1;
  justify-self:center;
  border-radius:50%;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.025) 0 44%,transparent 45%),
    conic-gradient(from 210deg,#101319,#111821,#2b2b26,#6a3b26,#d07d34,#f5b94c,#e8833c,#58352a,#1b2632,#101319);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 80px rgba(0,0,0,.55),0 40px 100px rgba(0,0,0,.6);
}
.solar-face::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 50px rgba(0,0,0,.6);
}
.face-core{
  position:absolute;
  inset:33%;
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:rgba(8,10,13,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 50px rgba(0,0,0,.75);
}
.face-time{font:540 25px/1.05 ui-monospace,"SF Mono",monospace;letter-spacing:-.04em}
.face-city{margin-top:7px;color:var(--secondary);font-size:9px;letter-spacing:.16em}
.orbit{position:absolute;inset:0;border-radius:50%;z-index:2}
.orbit span{
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 18px rgba(255,255,255,.4);
}
.orbit-one{transform:rotate(18deg)}.orbit-one span{top:3%;left:48%}
.orbit-two{transform:rotate(141deg)}.orbit-two span{top:3%;left:48%;background:var(--solar)}
.orbit-three{transform:rotate(252deg)}.orbit-three span{top:3%;left:48%;background:var(--sky)}
section+section{margin-top:108px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  padding:26px;
  border:1px solid var(--hairline);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.card p{margin-bottom:0;color:var(--secondary)}
.feature-number{color:var(--quiet);font:500 12px/1 ui-monospace,"SF Mono",monospace}
.plus-panel,.privacy-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  padding:42px;
  border:1px solid var(--hairline);
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 5%,rgba(245,185,76,.09),transparent 20rem),
    var(--surface);
}
.plus-panel h2,.privacy-panel h2{margin-bottom:0}
.plus-panel p,.privacy-panel p{color:var(--secondary)}
.muted{color:var(--quiet)!important;font-size:14px}
.privacy-panel{display:block}
.privacy-panel p{max-width:780px}
.text-link{display:inline-block;margin-top:12px;font-weight:600}
nav{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:84px;
  padding-top:24px;
  border-top:1px solid var(--hairline);
  font-size:14px;
}
footer{margin-top:16px;color:var(--quiet);font-size:13px}
.legal{width:min(760px,100%)}
.legal h2{margin:44px 0 10px;font-size:24px;letter-spacing:-.025em}
.legal .lede{margin:28px 0 48px}
.legal p{color:var(--secondary)}
.legal .card{margin:16px 0}
.legal .card h3{margin-top:0}
.updated{color:var(--quiet)!important;font-size:13px}
@media(max-width:760px){
  .wrap{padding:40px 22px 64px}
  .identity{margin-bottom:42px}
  .hero{grid-template-columns:1fr;gap:48px;margin-bottom:88px}
  .solar-face{grid-row:1}
  section+section{margin-top:80px}
  .feature-grid{grid-template-columns:1fr}
  .plus-panel{grid-template-columns:1fr;gap:12px;padding:28px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}