@font-face {
  font-family:"Plus Jakarta Sans";
  src:url("plus-jakarta-sans.ttf") format("truetype");
  font-style:normal;
  font-weight:200 800;
  font-display:swap
}

:root {
  color-scheme:dark;
  --bg:#07080d;
  --surface:#11131b;
  --white:#f7f8fb;
  --muted:#979ba9;
  --line:rgba(255,255,255,.09);
  --cyan:#0dccf2;
  --pink:#f20dcc;
  --violet:#9b67ff;
  --page-width:1180px
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:84px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}
body:before {
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.12) .65px,transparent .65px);
  background-size:18px 18px;
  content:"";
  opacity:.13;
  pointer-events:none;
  mask-image:linear-gradient(to bottom,#000,transparent 76%)
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px;
  border-radius:8px
}
svg {
  display:block
}
.page-shell {
  overflow:hidden
}

.site-header {
  width:min(var(--page-width),calc(100% - 72px));
  height:82px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.brand {
  display:inline-flex;
  align-items:center;
  flex:0 0 auto
}
.brand img {
  display:block;
  width:154px;
  height:auto
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:38px;
  margin-left:90px
}
.desktop-nav a,.footer-links a {
  color:#b3b6c1;
  font-size:12px;
  font-weight:600;
  transition:color .2s ease
}
.desktop-nav a:hover,.footer-links a:hover {
  color:var(--white)
}
.desktop-nav .nav-github {
  color:var(--white)
}
.nav-github span,.footer-links span {
  margin-left:4px;
  color:var(--cyan)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 21px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.button:hover {
  transform:translateY(-2px)
}
.button svg {
  width:17px;
  height:17px
}
.button-small {
  min-height:40px;
  padding:0 15px;
  font-size:11px;
  border-radius:10px
}
.button-light {
  background:#f2f3f8;
  color:#11131a
}
.button-light:hover {
  background:#fff;
  box-shadow:0 4px 28px rgba(255,255,255,.12)
}
.button-primary {
  color:#071018;
  background:var(--cyan);
  box-shadow:0 7px 30px rgba(13,204,242,.16)
}
.button-primary:hover {
  background:#52e3ff;
  box-shadow:0 10px 35px rgba(13,204,242,.3)
}
.button-quiet {
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.035);
  color:#f2f3f7
}
.button-quiet:hover {
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.075)
}

.hero {
  position:relative;
  width:min(var(--page-width),calc(100% - 72px));
  min-height:692px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  padding:30px 0 54px
}
.hero:before {
  position:absolute;
  top:62px;
  left:-175px;
  width:630px;
  height:630px;
  border:1px solid rgba(255,255,255,.035);
  border-radius:50%;
  content:"";
  pointer-events:none
}
.hero-copy {
  position:relative;
  z-index:2;
  padding:5px 0 0 14px
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 22px;
  color:#c1c4ce;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase
}
.eyebrow-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(13,204,242,.8)
}
h1,h2,h3,p {
  margin-top:0
}
.hero h1 {
  max-width:650px;
  margin:0;
  font-size:clamp(46px,5.3vw,68px);
  line-height:1.07;
  letter-spacing:-.065em;
  font-weight:750
}
.hero h1 span,.section-intro h2 span {
  color:transparent;
  background:linear-gradient(98deg,#d9faff 5%,#42dffa 42%,#d68bff 92%);
  -webkit-background-clip:text;
  background-clip:text
}
.hero-lede {
  max-width:470px;
  margin:22px 0 27px;
  color:#a4a7b2;
  font-size:14px;
  line-height:1.85;
  letter-spacing:-.015em
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:11px
}
.hero-note {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:27px;
  color:#767b89;
  font-size:10px
}
.note-mark {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:1px solid rgba(13,204,242,.3);
  border-radius:50%;
  color:var(--cyan);
  font-size:11px
}

.hero-art {
  position:relative;
  min-width:0;
  height:620px;
  display:grid;
  place-items:center;
  isolation:isolate
}
.hero-art:before {
  position:absolute;
  z-index:-1;
  width:530px;
  height:530px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:50%;
  content:""
}
.hero-art:after {
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:50%;
  content:""
}
.art-glow {
  position:absolute;
  z-index:-2;
  border-radius:50%;
  filter:blur(72px);
  opacity:.19
}
.art-glow-cyan {
  top:124px;
  left:31px;
  width:300px;
  height:360px;
  background:var(--cyan)
}
.art-glow-pink {
  top:178px;
  right:18px;
  width:310px;
  height:340px;
  background:var(--pink);
  opacity:.14
}

.phone {
  position:relative;
  z-index:1;
  width:292px;
  height:594px;
  padding:8px;
  border:1px solid #454853;
  border-radius:39px;
  background:linear-gradient(145deg,#373943,#0c0d12 25%,#16171e 75%,#363843);
  box-shadow:0 45px 90px rgba(0,0,0,.56),0 0 0 5px rgba(255,255,255,.025),inset 0 0 0 1px rgba(255,255,255,.1);
  transform:rotate(2deg)
}
.phone:before {
  position:absolute;
  z-index:5;
  top:10px;
  left:50%;
  width:86px;
  height:20px;
  border-radius:20px;
  background:#07080c;
  content:"";
  transform:translateX(-50%)
}
.phone-side {
  position:absolute;
  width:3px;
  border-radius:4px;
  background:#5b5e68
}
.phone-side-left {
  top:100px;
  left:-4px;
  height:49px;
  box-shadow:0 64px #5b5e68
}
.phone-side-right {
  top:129px;
  right:-4px;
  height:75px
}
.phone-screen {
  height:100%;
  position:relative;
  overflow:hidden;
  padding:16px 15px 10px;
  border-radius:32px;
  background:#090a10
}
.phone-status {
  display:flex;
  justify-content:space-between;
  padding:0 4px;
  color:#f4f5f8;
  font:700 9px/1 "Plus Jakarta Sans",sans-serif
}
.status-icons {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:10px
}
.status-icons i {
  width:2px;
  border-radius:2px;
  background:#f4f5f8
}
.status-icons i:first-child {
  height:4px
}
.status-icons i:nth-child(2) {
  height:7px
}
.status-icons b {
  width:10px;
  height:6px;
  margin-left:2px;
  border:1px solid #f4f5f8;
  border-radius:2px
}
.app-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px
}
.app-wordmark {
  font-size:12px;
  font-weight:800;
  letter-spacing:.055em
}
.app-wordmark span {
  color:var(--cyan)
}
.app-avatar {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(242,13,204,.5);
  border-radius:50%;
  background:linear-gradient(145deg,#5d2d6c,#231329);
  color:#ffcefa;
  font-size:10px;
  font-weight:700
}
.app-greeting {
  margin-top:22px
}
.app-greeting small {
  color:#7f8493;
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em
}
.app-greeting h2 {
  margin:7px 0 3px;
  font-size:21px;
  letter-spacing:-.055em
}
.app-greeting h2 span {
  color:var(--cyan);
  font-size:14px
}
.app-greeting p {
  margin:0;
  color:#818593;
  font-size:9px
}
.nearby-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:22px 0 10px
}
.nearby-label strong {
  font-size:11px
}
.nearby-label a {
  color:#9298a7;
  font-size:7px
}
.nearby-label a span {
  color:var(--cyan)
}

.party-preview {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:#14151d
}
.party-art {
  position:relative;
  height:224px;
  overflow:hidden;
  padding:14px;
  background:radial-gradient(ellipse at 75% 46%,rgba(255,164,63,.92) 0,rgba(241,72,116,.63) 18%,transparent 48%),radial-gradient(ellipse at 22% 74%,rgba(13,204,242,.65),transparent 48%),linear-gradient(155deg,#30205d 0%,#431f64 37%,#101a3e 100%)
}
.party-art:before {
  position:absolute;
  width:180px;
  height:180px;
  top:33px;
  left:69px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  box-shadow:0 0 0 14px rgba(255,255,255,.06),0 0 0 30px rgba(255,255,255,.045),0 0 55px rgba(255,170,91,.35);
  content:""
}
.party-art:after {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,8,18,.05),rgba(6,8,20,.4));
  content:""
}
.party-label,.party-date {
  position:absolute;
  z-index:2;
  left:14px;
  color:white;
  font-size:6px;
  font-weight:800;
  letter-spacing:.14em
}
.party-label {
  top:15px
}
.party-date {
  bottom:13px
}
.party-title {
  position:absolute;
  z-index:1;
  top:60px;
  left:23px;
  color:white;
  font-size:38px;
  font-weight:800;
  line-height:.78;
  letter-spacing:-.08em;
  transform:rotate(-7deg);
  text-shadow:0 3px 22px rgba(0,0,0,.25)
}
.party-title em {
  color:#c5faff;
  font-size:43px;
  font-style:normal
}
.party-star {
  position:absolute;
  z-index:1;
  color:#ffe179;
  text-shadow:0 0 20px rgba(255,209,95,.9)
}
.party-star-one {
  top:46px;
  right:35px;
  font-size:31px
}
.party-star-two {
  right:48px;
  bottom:43px;
  font-size:20px;
  color:#ffb0f2
}
.party-art-lines {
  position:absolute;
  z-index:1;
  right:-6px;
  bottom:-30px;
  width:140px;
  height:120px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50% 50% 0 0;
  box-shadow:0 -9px rgba(255,255,255,.04),0 -18px rgba(255,255,255,.035),0 -28px rgba(255,255,255,.03);
  transform:rotate(-25deg)
}
.party-details {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 12px
}
.party-details strong,.party-details small {
  display:block
}
.party-details strong {
  font-size:9px
}
.party-details small {
  margin-top:4px;
  color:#8d92a0;
  font-size:7px
}
.save-button {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  color:#fa85df;
  font-size:17px
}
.friends-going {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:13px;
  color:#a1a5b1;
  font-size:7px
}
.avatar-stack {
  display:flex;
  padding-left:2px
}
.avatar-stack i,.avatar-stack b,.mini-avatars i {
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  margin-left:-3px;
  border:1px solid #090a10;
  border-radius:50%;
  color:#fff;
  font-size:6px;
  font-style:normal;
  font-weight:700
}
.avatar-stack i:first-child {
  background:linear-gradient(145deg,#ffba8e,#8b435f)
}
.avatar-stack i:nth-child(2) {
  background:linear-gradient(145deg,#a6f2ea,#376a6a)
}
.avatar-stack i:nth-child(3) {
  background:linear-gradient(145deg,#c7a8ff,#59416b)
}
.avatar-stack b {
  background:#21232d;
  font-size:5px
}
.going-dot {
  width:4px;
  height:4px;
  margin-left:auto;
  border-radius:50%;
  background:#7deabb;
  box-shadow:0 0 8px #7deabb
}
.phone-tabbar {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  justify-content:space-around;
  padding:9px 4px 11px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(9,10,16,.95)
}
.phone-tabbar>span {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:#666b79;
  font-size:14px;
  line-height:1
}
.phone-tabbar small {
  font-size:5px
}
.phone-tabbar .tab-active {
  color:var(--cyan)
}

.float-card {
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(24,26,36,.83);
  box-shadow:0 20px 55px rgba(0,0,0,.32);
  backdrop-filter:blur(14px)
}
.float-card strong,.float-card small {
  display:block;
  white-space:nowrap
}
.float-card strong {
  font-size:9px
}
.float-card small {
  margin-top:4px;
  color:#989ca8;
  font-size:7px
}
.float-card-top {
  top:99px;
  right:-19px;
  transform:rotate(-3deg)
}
.float-card-bottom {
  bottom:78px;
  left:-45px;
  transform:rotate(2deg)
}
.float-icon {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:9px;
  font-size:14px
}
.float-icon-cyan {
  color:var(--cyan);
  background:rgba(13,204,242,.12)
}
.float-icon-pink {
  color:#ff81df;
  background:rgba(242,13,204,.13)
}
.mini-avatars {
  display:flex;
  margin-left:5px
}
.mini-avatars i {
  width:17px;
  height:17px
}
.mini-avatars i:first-child {
  background:#715177
}
.mini-avatars i:nth-child(2) {
  background:#5c8f91
}
.mini-avatars i:nth-child(3) {
  background:#806349
}
.art-caption {
  position:absolute;
  right:24px;
  bottom:5px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#797d8a;
  font-size:8px
}
.art-caption i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 10px var(--pink)
}

.ticker {
  overflow:hidden;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.065);
  border-bottom:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.015)
}
.ticker-track {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:28px;
  min-width:760px;
  color:#b6bac7;
  font-size:9px;
  font-weight:750;
  letter-spacing:.18em
}
.ticker-track i {
  color:var(--cyan);
  font-size:13px;
  font-style:normal
}
.section-wrap {
  width:min(var(--page-width),calc(100% - 72px));
  margin:auto
}
.experience {
  padding:112px 14px 116px
}
.section-intro {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:auto 1fr;
  align-items:end;
  column-gap:80px;
  margin-bottom:39px
}
.section-intro .eyebrow {
  grid-column:1/-1;
  margin-bottom:17px
}
.section-intro h2 {
  margin:0;
  font-size:clamp(36px,4.2vw,49px);
  line-height:1.12;
  letter-spacing:-.06em
}
.section-intro>p:last-child {
  max-width:385px;
  margin:0 0 4px;
  color:#999daa;
  font-size:12px;
  line-height:1.85
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px
}
.feature-card {
  position:relative;
  min-height:330px;
  overflow:hidden;
  padding:24px 23px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:19px;
  background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.016) 56%)
}
.feature-card:after {
  position:absolute;
  right:-95px;
  bottom:-130px;
  width:240px;
  height:230px;
  border-radius:50%;
  background:var(--feature-glow,rgba(13,204,242,.12));
  filter:blur(58px);
  content:"";
  pointer-events:none
}
.feature-card-discover {
  --feature-glow:rgba(13,204,242,.16)
}
.feature-card-friends {
  --feature-glow:rgba(242,13,204,.16)
}
.feature-card-moments {
  --feature-glow:rgba(155,103,255,.2)
}
.feature-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-bottom:23px;
  border-radius:12px
}
.feature-icon svg {
  width:21px;
  height:21px
}
.icon-cyan {
  color:var(--cyan);
  background:rgba(13,204,242,.11)
}
.icon-pink {
  color:#f374db;
  background:rgba(242,13,204,.11)
}
.icon-purple {
  color:#ad8aff;
  background:rgba(155,103,255,.14)
}
.feature-index {
  color:#787d8b;
  font-size:8px;
  font-weight:750;
  letter-spacing:.12em
}
.feature-card h3 {
  margin:9px 0;
  font-size:16px;
  letter-spacing:-.04em
}
.feature-card>p {
  max-width:285px;
  margin:0;
  color:#9297a5;
  font-size:10px;
  line-height:1.75
}

.mini-event {
  position:absolute;
  right:15px;
  bottom:18px;
  left:15px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:rgba(13,15,22,.88);
  box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.mini-event>span {
  display:grid;
  place-content:center;
  width:34px;
  height:35px;
  border-radius:8px;
  background:rgba(13,204,242,.12);
  color:var(--cyan);
  font-size:12px;
  font-weight:800;
  line-height:1.05;
  text-align:center
}
.mini-event>span small {
  font-size:6px
}
.mini-event strong,.mini-event small {
  display:block
}
.mini-event strong {
  font-size:8px
}
.mini-event div small {
  margin-top:3px;
  color:#878c9a;
  font-size:7px
}
.mini-event>b {
  margin-left:auto;
  color:var(--cyan);
  font-size:13px
}
.friend-orbit {
  position:absolute;
  right:18px;
  bottom:-34px;
  width:230px;
  height:142px
}
.orbit-ring {
  position:absolute;
  left:25px;
  bottom:-67px;
  width:150px;
  height:150px;
  border:1px solid rgba(242,13,204,.24);
  border-radius:50%
}
.orbit-ring-two {
  left:4px;
  bottom:-88px;
  width:192px;
  height:192px;
  border-color:rgba(255,255,255,.08)
}
.friend {
  position:absolute;
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:2px solid #151620;
  border-radius:50%;
  color:white;
  font-size:10px;
  font-style:normal;
  font-weight:800;
  box-shadow:0 5px 17px rgba(0,0,0,.4)
}
.f-one {
  top:6px;
  left:80px;
  background:linear-gradient(145deg,#ffba8e,#8b435f)
}
.f-two {
  top:37px;
  left:142px;
  background:linear-gradient(145deg,#a6f2ea,#376a6a)
}
.f-three {
  top:56px;
  left:69px;
  background:linear-gradient(145deg,#c7a8ff,#59416b)
}
.f-four {
  top:86px;
  left:129px;
  background:linear-gradient(145deg,#ff9bc4,#793f6d)
}
.orbit-heart {
  position:absolute;
  top:46px;
  left:102px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(242,13,204,.24);
  border-radius:50%;
  background:rgba(242,13,204,.1);
  color:#ff7bdf;
  font-size:19px
}
.moment-stack {
  position:absolute;
  right:5px;
  bottom:0;
  width:200px;
  height:115px;
  transform:rotate(-4deg)
}
.moment-chip {
  position:absolute;
  display:flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  background:#1b1d29;
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  white-space:nowrap
}
.chip-one {
  z-index:3;
  top:7px;
  left:55px;
  padding:9px 13px;
  color:#d6c7ff;
  font-size:8px
}
.chip-two {
  z-index:2;
  top:43px;
  left:22px;
  padding:10px 13px;
  color:#e4e4ec;
  font-size:8px;
  transform:rotate(3deg)
}
.chip-three {
  z-index:1;
  top:77px;
  left:57px;
  padding:8px 13px;
  color:#ffb7ed;
  font-size:8px;
  transform:rotate(2deg)
}

.download-section {
  padding:0 14px 103px
}
.download-panel {
  position:relative;
  min-height:285px;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:53px 61px;
  border-radius:24px;
  background:linear-gradient(112deg,#cbf7ff 0%,#9cecf8 38%,#c9a8ff 100%);
  color:#10111a
}
.download-panel:before {
  position:absolute;
  top:-320px;
  right:91px;
  width:630px;
  height:630px;
  border:1px solid rgba(18,17,38,.11);
  border-radius:50%;
  box-shadow:0 0 0 37px rgba(18,17,38,.035),0 0 0 75px rgba(18,17,38,.025);
  content:""
}
.download-panel:after {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.16));
  content:"";
  pointer-events:none
}
.download-content {
  position:relative;
  z-index:2;
  max-width:620px
}
.eyebrow-dark {
  margin-bottom:14px;
  color:rgba(15,16,25,.62)
}
.eyebrow-dark .eyebrow-dot {
  background:#151723;
  box-shadow:0 0 0 4px rgba(21,23,35,.1)
}
.download-content h2 {
  margin:0;
  font-size:clamp(39px,4.7vw,58px);
  line-height:1.02;
  letter-spacing:-.07em
}
.download-content h2 span {
  color:#4e35ae
}
.download-content>p:not(.eyebrow) {
  max-width:420px;
  margin:13px 0 20px;
  color:rgba(15,16,25,.7);
  font-size:11px;
  line-height:1.8
}
.download-actions {
  display:flex;
  align-items:center;
  gap:14px
}
.button-dark {
  min-height:46px;
  color:#f5f5fa;
  background:#10111a
}
.button-dark:hover {
  background:#272936;
  box-shadow:0 10px 28px rgba(16,17,26,.2)
}
.download-hint {
  color:rgba(15,16,25,.6);
  font-size:9px;
  font-weight:600
}
.download-sticker {
  position:absolute;
  z-index:3;
  top:50%;
  right:112px;
  display:grid;
  place-items:center;
  width:130px;
  height:130px;
  border:1px solid rgba(17,17,28,.2);
  border-radius:50%;
  color:#171824;
  transform:translateY(-50%) rotate(11deg)
}
.download-sticker:before,.download-sticker:after {
  position:absolute;
  width:98px;
  height:98px;
  border:1px solid rgba(17,17,28,.15);
  border-radius:50%;
  content:""
}
.download-sticker:after {
  width:77px;
  height:77px;
  border-color:rgba(17,17,28,.23)
}
.download-sticker>span {
  position:relative;
  z-index:2;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.06em;
  text-align:center
}
.download-sticker b {
  color:#503bb2;
  font-size:9px
}
.download-sticker i {
  position:absolute;
  z-index:2;
  top:-10px;
  right:-7px;
  color:white;
  font-size:30px;
  font-style:normal;
  text-shadow:0 2px 6px rgba(70,51,160,.4)
}
.download-decoration {
  position:absolute;
  z-index:1;
  border:1px solid rgba(17,17,28,.13);
  border-radius:50%
}
.decoration-one {
  right:15px;
  bottom:-185px;
  width:400px;
  height:400px
}
.decoration-two {
  top:-95px;
  right:-128px;
  width:340px;
  height:340px
}

.site-footer {
  width:min(var(--page-width),calc(100% - 72px));
  min-height:88px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr 1.2fr;
  align-items:center;
  gap:14px;
  border-top:1px solid rgba(255,255,255,.08)
}
.footer-brand img {
  width:126px
}
.footer-copy,.footer-credit {
  color:#787d8a;
  font-size:9px
}
.footer-links {
  display:flex;
  justify-content:center;
  gap:22px
}
.footer-links a {
  font-size:9px
}
.footer-credit {
  text-align:right
}
.footer-credit b {
  margin-left:4px;
  color:var(--pink);
  font-size:13px
}

@media(max-width:1000px) {
  :root {
  --page-width:860px
}
.desktop-nav {
  margin-left:20px;
  gap:24px
}
.hero {
  min-height:630px
}
.hero-copy {
  padding-left:0
}
.hero h1 {
  font-size:clamp(43px,6vw,58px)
}
.hero-art {
  transform:scale(.91);
  transform-origin:center;
  margin:-28px -24px
}
.float-card-top {
  right:-4px
}
.float-card-bottom {
  left:-15px
}
.experience {
  padding-top:88px;
  padding-bottom:88px
}
.section-intro {
  column-gap:35px
}
.feature-card {
  padding:21px 18px
}
.feature-card h3 {
  font-size:14px
}
.download-sticker {
  right:70px
}
.site-footer {
  grid-template-columns:1fr 1fr;
  padding:18px 0
}
.footer-links {
  justify-content:flex-end
}
.footer-credit {
  text-align:left
}

}

@media(max-width:700px) {
  html {
  scroll-padding-top:24px
}
.site-header,.hero,.section-wrap,.site-footer {
  width:min(100% - 40px,520px)
}
.site-header {
  height:70px
}
.brand img {
  width:126px
}
.desktop-nav {
  display:none
}
.header-cta {
  min-height:37px;
  padding:0 12px;
  font-size:9px
}
.hero {
  min-height:auto;
  grid-template-columns:1fr;
  gap:0;
  padding:68px 0 38px
}
.hero-copy {
  padding:0
}
.eyebrow {
  margin-bottom:17px;
  font-size:8px
}
.hero h1 {
  font-size:clamp(43px,12vw,59px);
  line-height:1.05
}
.hero-lede {
  max-width:470px;
  margin:17px 0 21px;
  font-size:12px;
  line-height:1.75
}
.hero-actions {
  gap:8px
}
.button {
  min-height:47px;
  gap:8px;
  padding:0 14px;
  font-size:10px;
  border-radius:11px
}
.button svg {
  width:15px;
  height:15px
}
.button-small {
  min-height:37px;
  padding:0 11px;
  font-size:9px
}
.hero-note {
  margin-top:19px;
  font-size:8px
}
.hero-art {
  height:560px;
  margin:18px -20px -12px;
  transform:scale(.86);
  transform-origin:center top
}
.phone {
  width:275px;
  height:558px
}
.phone-screen {
  padding-right:13px;
  padding-left:13px
}
.party-art {
  height:204px
}
.app-greeting {
  margin-top:19px
}
.nearby-label {
  margin-top:17px
}
.float-card-top {
  top:82px;
  right:-2px
}
.float-card-bottom {
  bottom:75px;
  left:0
}
.art-caption {
  right:36px;
  bottom:0
}
.ticker {
  padding:14px 0
}
.ticker-track {
  justify-content:flex-start;
  gap:22px;
  font-size:8px
}
.experience {
  padding:76px 0
}
.section-intro {
  display:block;
  margin-bottom:25px
}
.section-intro .eyebrow {
  margin-bottom:15px
}
.section-intro h2 {
  font-size:38px
}
.section-intro>p:last-child {
  margin-top:14px;
  font-size:11px
}
.feature-grid {
  grid-template-columns:1fr;
  gap:10px
}
.feature-card {
  min-height:290px;
  padding:21px
}
.feature-card h3 {
  font-size:16px
}
.feature-card>p {
  font-size:10px
}
.mini-event {
  bottom:15px;
  left:13px;
  right:13px
}
.friend-orbit {
  right:25px;
  bottom:-46px
}
.moment-stack {
  right:18px
}
.download-section {
  padding:0 0 68px
}
.download-panel {
  min-height:355px;
  align-items:flex-start;
  padding:35px 25px;
  border-radius:20px
}
.download-content {
  max-width:100%
}
.download-content h2 {
  font-size:44px
}
.download-content>p:not(.eyebrow) {
  max-width:300px;
  font-size:10px
}
.download-actions {
  align-items:flex-start;
  flex-direction:column;
  gap:8px
}
.download-hint {
  font-size:8px
}
.download-sticker {
  top:auto;
  right:25px;
  bottom:-28px;
  width:112px;
  height:112px;
  transform:rotate(11deg)
}
.download-sticker:before {
  width:84px;
  height:84px
}
.download-sticker:after {
  width:65px;
  height:65px
}
.download-sticker>span {
  font-size:9px
}
.download-sticker b {
  font-size:8px
}
.download-sticker i {
  font-size:26px
}
.decoration-one {
  right:-115px;
  bottom:-200px
}
.decoration-two {
  right:-185px
}
.site-footer {
  grid-template-columns:1fr 1fr;
  gap:14px 6px;
  min-height:100px;
  padding:18px 0
}
.footer-brand img {
  width:112px
}
.footer-copy {
  text-align:right;
  font-size:8px
}
.footer-links {
  justify-content:flex-start;
  gap:17px
}
.footer-credit {
  text-align:right;
  font-size:8px
}

}

@media(max-width:390px) {
  .site-header,.hero,.section-wrap,.site-footer {
  width:calc(100% - 32px)
}
.hero h1 {
  font-size:41px
}
.hero-art {
  margin-right:-44px;
  margin-left:-44px;
  transform:scale(.8)
}
.hero-actions .button {
  padding:0 11px;
  font-size:9px
}
.download-panel {
  padding-right:18px;
  padding-left:18px
}
.download-content h2 {
  font-size:39px
}
.download-sticker {
  right:18px
}

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  scroll-behavior:auto!important;
  transition-duration:.01ms!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important
}

}