/* Next5 visual refresh: floating navigation, atmospheric color, softer surfaces. */
:root {
  --header-height: 88px;
  --green: #c7ff87;
  --muted: #a3b1a8;
  --line: #ffffff16;
}
html { scroll-padding-top: calc(var(--header-height) + 26px); }
body {
  padding-top: var(--header-height);
  background:
    radial-gradient(ellipse 60% 600px at 88% 260px, #26715a21, transparent 80%),
    radial-gradient(ellipse 40% 500px at 0% 550px, #415c1821, transparent 85%),
    radial-gradient(ellipse 40% 620px at 15% 1250px, #30484918, transparent 90%),
    #0b100e;
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: #0b100edb;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  border-bottom: 1px solid #ffffff0b;
  transition: background .25s, box-shadow .25s;
}
.site-header.is-scrolled { background: #0d1611ed; box-shadow: 0 10px 32px #0004; border-color: #ffffff16; }
.header { height: 88px; border: 0; }
.header .brand { font-size: 31px; letter-spacing: -1.7px; font-style: italic; }
.brand-icon { width: 36px; height: 36px; border-radius: 12px; transform: rotate(-8deg); box-shadow: 0 3px 22px #b8f87619; font-style: normal; margin-right: 12px; }
.header nav {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid #ffffff12;
  border-radius: 100px;
  background: #ffffff05;
}
.header nav a {
  min-height: 39px;
  padding: 10px 19px;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #a9b5ad;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  transition: background .25s, color .25s, box-shadow .25s;
}
.header nav a:hover { color: #f4ffe9; background: #ffffff08; }
.header nav a.is-active { color: #182310; background: var(--green); border-color: #d7ffb4; box-shadow: 0 3px 15px #c7ff8717; font-weight: 650; }
.nav-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .35; }
.is-active .nav-dot { opacity: 1; }
.hero { min-height: 718px; position: relative; padding: 30px 0 18px; }
.hero-copy { padding-bottom: 0; }
.hero-eyebrow { display: inline-flex; background: #c7ff8709; border: 1px solid #c7ff8727; padding: 10px 13px; border-radius: 100px; font-size: 9px; letter-spacing: 1.7px; color: #c8d6b9; }
h1 { font-size: clamp(56px, 5.6vw, 78px); font-weight: 680; line-height: 1.22; letter-spacing: -3.5px; margin: 28px 0 22px; }
h1 .accent { position: relative; display: inline-block; color: #c7ff87; }
h1 .accent::after { content: ''; position: absolute; height: 9px; border-top: 2px solid #c7ff8799; border-radius: 50%; left: 0; right: 25%; bottom: -8px; transform: rotate(-4deg); }
.headline-arrow { font-size: .78em; transform: translate(6px, -4px); color: #a6e9c0; }
.hero-desc { color: #b0bdb4; line-height: 1.9; margin: 26px 0 28px; font-size: 15px; }
.hero-downloads { gap: 12px; margin: 0 0 26px; scroll-margin-top: 12px; }
.download-button { border-radius: 15px; min-width: 181px; padding: 14px 16px; box-shadow: 0 6px 24px #c7ff8715; transition: transform .25s, box-shadow .25s, background .25s; }
.download-button:first-child { background: linear-gradient(120deg, #d7ffa8, #b9f475); border-color: #dcffb5; }
.download-button:nth-child(2) { background: #ffffff06; border-color: #a7c4ae45; box-shadow: 0 8px 22px #0002; }
.download-button:hover { transform: translateY(-4px); box-shadow: 0 12px 35px #c7ff8725; }
.download-button:nth-child(2):hover { background: #c7ff8712; }
.hero-points { gap: 8px; margin: 0 0 29px; flex-wrap: wrap; }
.hero-points > span { padding: 7px 10px; border: 1px solid #ffffff0d; border-radius: 100px; color: #aebca6; font-size: 9px; background: #ffffff03; }
.hero-points i { display: none; }
.hero-copy > .text-link { color: #d1d9c9; }
.showcase-glow { position: absolute; inset: 5% -2% 1%; z-index: -3; border-radius: 50%; background: radial-gradient(ellipse at 45% 45%, #a1ed5730, #51cbb119 44%, transparent 70%); filter: blur(24px); }
.ghost-five { color: #c7ff8708; text-shadow: 0 0 100px #92e65e0d; }
.orbit { border-color: #c7ff8729; }
.orbit-two { border-color: #81cbb51f; }
.spark { position: absolute; color: #c7ff87; font-family: serif; pointer-events: none; }
.spark-one { font-size: 30px; right: 34px; top: 50px; transform: rotate(12deg); }
.spark-two { font-size: 19px; left: 15px; top: 72px; color: #9bdbc4; }
.phone { box-shadow: 0 28px 55px #0009, 0 0 35px #b4f28f07; }
.floating-result { border-radius: 19px; background: linear-gradient(125deg,#283c27f5,#162c25f5); border-color: #c7ff8761; backdrop-filter: blur(16px); box-shadow: 0 20px 45px #0005, inset 0 1px 0 #ffffff17; }
.result-check { background: #ceff96; box-shadow: 0 0 20px #c7ff871c; }
.showcase-caption { color: #b1c2a7; }
.activity { position: relative; padding-top: 72px; border-top: 1px solid #ffffff10; }
.activity::before { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 160px; background: linear-gradient(90deg, #c7ff8780, transparent); }
.section-heading h2 { font-weight: 600; letter-spacing: -.8px; }
.section-heading h2 span { color: #a9c6b3; }
.demo-badge { background: #c7ff8707; border-color: #c7ff8735; }
.activity-story { border-radius: 25px; border-color: #98ba7c33; background: radial-gradient(ellipse at 0 0, #c6f47c20, transparent 65%),linear-gradient(155deg,#223023,#11231e); box-shadow: inset 0 1px 0 #ffffff0c; }
.activity-story h3 { line-height: 1.65; }
.story-top > span:last-child { display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 50%; width: 36px; height: 36px; font-size: 22px; }
.feed-panel { border-radius: 25px; border-color: #b9dcc528; background: linear-gradient(125deg,#19231df0,#111a16); box-shadow: 0 20px 65px #0002, inset 0 1px 0 #ffffff08; }
select { border-radius: 100px; padding: 9px 12px; background: #ffffff04; border-color: #ffffff1a; }
.feed-columns { background: #ffffff02; color: #a5b59b; }
.feed-row { transition: background .2s; }
.feed-row:hover { background: #c7ff8705; }
.avatar { border: 1px solid #ffffff0b; }
.reward { color: #d0ff9d; }
.how { padding-top: 85px; }
.steps { gap: 18px; border: 0; padding: 0; }
.steps article, .steps article:first-child, .steps article:last-child { padding: 27px; border: 1px solid #ffffff12; background: linear-gradient(145deg,#ffffff05,transparent); border-radius: 23px; transition: transform .25s, border-color .25s; }
.steps article:nth-child(2) { background: linear-gradient(145deg,#93cfa70b,transparent); }
.steps article:nth-child(3) { background: linear-gradient(145deg,#c5d09a0b,transparent); }
.steps article:hover { transform: translateY(-5px); border-color: #c7ff8755; }
.step-number { width: 40px; height: 40px; border: 1px solid #c7ff8733; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: #c7ff8707; }
.product-note { margin: 24px 0 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
@keyframes gentle-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes gentle-glow { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@media(prefers-reduced-motion:no-preference) {
  .phone-main { animation: gentle-float 7s ease-in-out infinite; }
  .phone-left { animation: gentle-float 8s ease-in-out -3s infinite; }
  .phone-right { animation: gentle-float 9s ease-in-out -5s infinite; }
  .floating-result { animation: gentle-float 6s ease-in-out -2s infinite; }
  .showcase-glow { animation: gentle-glow 8s ease-in-out infinite; }
  .showcase:hover .phone { animation-play-state: paused; }
}
@media(max-width:1150px) {
  .hero { min-height: 660px; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 15px; }
  h1 { font-size: 61px; }
  .hero-downloads { gap: 9px; }
  .download-button { min-width: 0; padding: 13px 11px; gap: 8px; }
  .download-button b { font-size: 13px; }
  .header nav a { padding: 10px 15px; }
}
@media(max-width:850px) {
  :root { --header-height: 82px; }
  .header { height: 82px; }
  .header .brand { font-size: 27px; }
  .header nav a { font-size: 11px; padding: 9px 11px; min-height: 36px; }
  .hero { grid-template-columns: minmax(0,1fr); padding-top: 0; }
  .hero-copy { padding-top: 46px; }
  h1 { font-size: 67px; }
  .hero-desc { margin: 25px 0; }
  .hero-downloads { justify-content: center; margin-bottom: 24px; }
  .download-button { min-width: 180px; padding: 14px; }
  .hero-points { justify-content: center; margin-bottom: 0; }
  .showcase { margin-top: 12px; }
  .activity { padding-top: 55px; }
  .steps article, .steps article:first-child, .steps article:last-child { padding: 22px; }
}
@media(max-width:600px) {
  :root { --header-height: 126px; }
  .header { display: grid; grid-template-columns: 1fr auto; gap: 11px; height: auto; padding-top: 14px; padding-bottom: 12px; }
  .header .brand { font-size: 25px; }
  .header .brand-icon { width: 30px; height: 30px; border-radius: 10px; margin-right: 10px; }
  .header nav { grid-row: 2; grid-column: 1 / -1; width: 100%; justify-content: stretch; gap: 3px; padding: 4px; }
  .header nav a { flex: 1; justify-content: center; font-size: 11px; padding: 9px 5px; min-height: 35px; }
  .hero-copy { padding-top: 34px; }
  .hero-eyebrow { padding: 8px 10px; font-size: 7px; }
  h1 { font-size: 56px; letter-spacing: -2.8px; margin: 23px 0 20px; }
  h1 .accent::after { bottom: -6px; }
  .hero-desc { font-size: 12px; margin: 22px 0; }
  .hero-downloads { gap: 10px; width: 100%; max-width: 390px; margin: 0 auto 22px; }
  .download-button { min-width: 0; flex: 1; padding: 12px 11px; border-radius: 13px; }
  .download-button b { font-size: 12px; }
  .download-button small { font-size: 8px; }
  .hero-points { gap: 5px; }
  .hero-points > span { font-size: 8px; padding: 6px 8px; }
  .showcase { margin-top: 18px; }
  .spark-one { right: 25px; top: 15px; font-size: 23px; }
  .spark-two { left: 25px; top: 35px; font-size: 16px; }
  .floating-result { border-radius: 14px; }
  .feed-panel { border-radius: 20px; }
  select { padding: 8px 5px; font-size: 9px; }
  .how { padding-top: 55px; }
}
@media(max-width:500px) {
  .hero { min-height: auto; }
  .steps { gap: 12px; }
  .steps article, .steps article:first-child, .steps article:last-child { padding: 24px 19px 24px 76px; border: 1px solid #ffffff12; border-radius: 19px; }
  .step-number { position: absolute; left: 18px; top: 25px; width: 38px; height: 38px; }
  .steps h3 { margin: 0 0 8px; }
}
@media(max-width:360px) {
  h1 { font-size: 49px; }
  .hero-points > span { font-size: 7px; padding: 5px 6px; }
  .download-button { padding: 11px 9px; gap: 6px; }
  .download-button b { font-size: 11px; }
  .download-button svg { width: 20px; }
}

.feed-title { color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .5px; }

.feed-window.manual-scroll { overflow-y: auto; }