* { margin: 0; padding: 0; box-sizing: border-box; }

@keyframes hard-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes reveal-in {
  0% { opacity: 0; translate: 0 28px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes glitch-in {
  0% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  10% { transform: translate(-6px,3px); clip-path: inset(0 40% 0 0); }
  20% { transform: translate(5px,-2px); clip-path: inset(0 0 0 55%); }
  30% { transform: translate(-3px,0); clip-path: inset(30% 0 40% 0); }
  40% { transform: translate(4px,2px); clip-path: inset(0 0 0 0); }
  50%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
}
@keyframes tag-drop {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

body {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-weight: 300;
}

::selection { background: #0d0d0d; color: #DBFE87; }

.page {
  width: 100%;
  background: #0d0d0d;
  color: #F0EDE6;
  overflow-x: hidden;
}

.lime { color: #DBFE87; }

[data-reveal] {
  animation: reveal-in 0.5s steps(3, end) both;
}
.hero-title {
  animation: glitch-in 0.7s steps(1, end) 1;
}
.num-tag {
  animation: tag-drop 0.5s ease both;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

.tag {
  position: absolute;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 4px 10px;
}

/* NAV */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 3px solid #F0EDE6;
}
.logo {
  text-decoration: none;
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: #6050DC;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F0EDE6;
}
.nav-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover {
  color: #DBFE87;
}
.nav-cta {
  color: #0d0d0d !important;
  background: #DBFE87;
  padding: 9px 16px;
}
.nav-cta:hover {
  background: #F0EDE6 !important;
}

/* HERO */
.hero {
  background: #6050DC;
  padding: 100px 32px 80px;
  position: relative;
  border-bottom: 3px solid #0d0d0d;
}
.tag--hero {
  top: 24px; right: 32px;
  color: #0d0d0d;
  background: #DBFE87;
}
.hero-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(56px, 11vw, 170px);
  line-height: 0.9;
  letter-spacing: -1px;
  color: #F0EDE6;
  max-width: 1100px;
  text-wrap: pretty;
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-lede {
  font-weight: 400;
  font-size: 18px;
  max-width: 380px;
  color: #F0EDE6;
  margin: 0;
  line-height: 1.55;
  border-left: 3px solid #DBFE87;
  padding-left: 16px;
}
.store-wrap {
  position: relative;
}
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 3px solid #0d0d0d;
}
.store-btn {
  text-decoration: none;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.store-btn-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
}
.store-btn-name {
  font-size: 15px;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.5px;
}
.store-btn--lime {
  color: #0d0d0d;
  background: #DBFE87;
  border-right: 3px solid #0d0d0d;
}
.store-btn--lime:hover {
  background: #F0EDE6;
}
.store-btn--dark {
  color: #F0EDE6;
  background: #0d0d0d;
}
.store-btn--dark:hover {
  background: #1a1a1a;
}
.coming-soon {
  position: absolute;
  top: -12px;
  right: -12px;
  transform: rotate(4deg);
  background: #0d0d0d;
  color: #DBFE87;
  font-family: 'Anton', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  border: 2px solid #DBFE87;
  white-space: nowrap;
}

/* INSTINCT */
.instinct {
  background: #0d0d0d;
  padding: 90px 32px 100px;
  position: relative;
  border-bottom: 3px solid #F0EDE6;
}
.tag--instinct {
  top: 24px; left: 32px;
  color: #0d0d0d;
  background: #8987EC;
}
.instinct-body {
  max-width: 1200px;
  margin: 70px auto 0;
}
.instinct-heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 5.5vw, 72px);
  letter-spacing: -1px;
  margin: 0 0 32px 0;
  color: #6050DC;
  text-wrap: pretty;
}
.instinct-lede {
  font-weight: 300;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.65;
  max-width: 56ch;
  color: #F0EDE6;
}

/* HOW IT WORKS */
.how {
  background: #F0EDE6;
  color: #0d0d0d;
  padding: 90px 32px 100px;
  position: relative;
  border-bottom: 3px solid #0d0d0d;
}
.tag--how {
  top: 24px; right: 32px;
  color: #F0EDE6;
  background: #0d0d0d;
}
.how-heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 5.5vw, 72px);
  letter-spacing: -1px;
  margin: 70px 0 50px 0;
  color: #6050DC;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 3px solid #0d0d0d;
  border-left: 3px solid #0d0d0d;
}
.how-card {
  padding: 36px 32px;
  border-right: 3px solid #0d0d0d;
  border-bottom: 3px solid #0d0d0d;
}
.how-num {
  font-family: 'Anton', sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  color: #6050DC;
}
.how-card-title {
  margin-top: 20px;
  font-family: 'Anton', sans-serif;
  font-size: 19px;
  letter-spacing: 0.3px;
  line-height: 1.25;
}
.how-card-desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #4a4a44;
  max-width: 34ch;
}

/* FEATURES */
.features {
  background: #0d0d0d;
  padding: 90px 32px 100px;
  position: relative;
  border-bottom: 3px solid #F0EDE6;
}
.tag--features {
  top: 24px; left: 32px;
  color: #0d0d0d;
  background: #DBFE87;
}
.features-heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 5.5vw, 72px);
  letter-spacing: -1px;
  margin: 70px 0 50px 0;
  color: #6050DC;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 3px solid #F0EDE6;
  border-left: 3px solid #F0EDE6;
}
.feature-card {
  text-decoration: none;
  padding: 32px;
  border-right: 3px solid #F0EDE6;
  border-bottom: 3px solid #F0EDE6;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.25s, background 0.25s;
}
.feature-label {
  font-size: 11px;
  letter-spacing: 2px;
}
.feature-label--lime {
  color: #DBFE87;
}
.feature-desc {
  font-size: 15px;
  line-height: 1.5;
}
.feature-visual {
  position: relative;
  height: 150px;
}

.feature-card--purple {
  color: #F0EDE6;
  background: #6050DC;
}
.feature-card--purple:hover {
  transform: translate(4px, -4px);
}
.feature-card--lime {
  color: #0d0d0d;
  background: #DBFE87;
}
.feature-card--lime:hover {
  transform: translate(-4px, -4px);
}
.feature-card--dark {
  color: #F0EDE6;
  background: #0d0d0d;
}
.feature-card--dark:hover {
  transform: translate(4px, 4px);
  background: #1a1a1a;
}
.feature-card--purple2 {
  color: #F0EDE6;
  background: #6050DC;
}
.feature-card--purple2:hover {
  transform: translate(-4px, 4px);
}

.feature-visual--map {
  border: 2px solid #F0EDE6;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(240,237,230,.3) 22px, rgba(240,237,230,.3) 23px),
    repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(240,237,230,.3) 22px, rgba(240,237,230,.3) 23px);
  overflow: hidden;
}
.map-pin {
  position: absolute;
  width: 10px;
  height: 10px;
}
.map-pin--lime { top: 34%; left: 28%; background: #DBFE87; }
.map-pin--dark { top: 60%; left: 62%; background: #0d0d0d; }
.map-pin--cream { top: 22%; left: 70%; background: #F0EDE6; }

.feature-visual--geo {
  border: 2px solid #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.geo-ring {
  position: absolute;
  border-radius: 0;
}
.geo-ring--outer { width: 140px; height: 140px; border: 2px solid rgba(13,13,13,.35); }
.geo-ring--mid { width: 92px; height: 92px; border: 2px solid rgba(13,13,13,.6); }
.geo-ring--inner { width: 46px; height: 46px; border: 2px solid #6050DC; }
.geo-dot {
  width: 12px;
  height: 12px;
  background: #6050DC;
  animation: hard-blink 1.4s steps(1, end) infinite;
}

.feature-visual--magazine {
  display: flex;
  gap: 8px;
  height: 150px;
}
.magazine-tile {
  flex: 1;
  border: 2px solid #F0EDE6;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}
.magazine-tile span {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F0EDE6;
}
.magazine-tile--article {
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(96,80,220,.35) 8px, rgba(96,80,220,.35) 9px);
}
.magazine-tile--video {
  background: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(219,254,135,.25) 8px, rgba(219,254,135,.25) 9px);
}

.feature-visual--now {
  border: 2px solid #F0EDE6;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.now-time {
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.75;
}
.now-heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(18px, 4vw, 24px);
  line-height: 1.1;
}
.now-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.now-tag {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 9px;
}
.now-tag--lime {
  background: #DBFE87;
  color: #0d0d0d;
}
.now-tag--outline {
  border: 1px solid #F0EDE6;
}

.feature-card--categories {
  grid-column: 1 / -1;
  padding: 36px 32px;
  border-right: 3px solid #F0EDE6;
  border-bottom: 3px solid #F0EDE6;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.categories-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.categories-note {
  font-size: 11px;
  letter-spacing: 2px;
  color: #8f8f88;
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 2px solid #F0EDE6;
}
.category-cell {
  padding: 22px 18px;
  border-right: 2px solid #F0EDE6;
  border-bottom: 2px solid #F0EDE6;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.category-cell--last {
  border-right: none;
}
.category-swatch {
  width: 100%;
  height: 8px;
}
.category-name {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* SCREENSHOTS */
.screenshots {
  background: #DBFE87;
  padding: 90px 32px 100px;
  position: relative;
  border-bottom: 3px solid #0d0d0d;
}
.tag--screenshots {
  top: 24px; left: 32px;
  color: #F0EDE6;
  background: #0d0d0d;
}
.screenshots-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 70px 0 40px;
  flex-wrap: wrap;
  gap: 12px;
}
.screenshots-heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 5.5vw, 72px);
  letter-spacing: -1px;
  margin: 0;
  color: #6050DC;
}
.screenshots-hint {
  font-size: 12px;
  letter-spacing: 2px;
  color: #0d0d0d;
}
.screenshots-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.phone {
  flex: 0 0 auto;
  width: 260px;
  margin: 0 28px 0 0;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.phone:hover {
  transform: translateY(-6px);
}
.phone-frame {
  border: 3px solid #0d0d0d;
  background: #0d0d0d;
  padding: 8px;
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
}
.phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #8f8f88;
}
.phone-caption {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0d0d0d;
}
.phone-screen {
  flex: 1;
  margin-top: 6px;
  border: 1px solid #333;
  position: relative;
}
.phone-screen--map {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 20px, #262626 20px, #262626 21px),
    repeating-linear-gradient(90deg, transparent, transparent 20px, #262626 20px, #262626 21px);
}
.phone-pin {
  position: absolute;
  width: 9px;
  height: 9px;
}
.phone-pin--lime { top: 30%; left: 24%; background: #DBFE87; }
.phone-pin--brown { top: 55%; left: 64%; background: #8B5E3C; }
.phone-pin--purple { top: 70%; left: 36%; background: #4A3F8A; }
.phone-card-overlay {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  background: #0d0d0d;
  border: 1px solid #333;
  padding: 8px 10px;
  font-size: 10px;
  color: #F0EDE6;
}
.phone-screen--now {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.now-screen-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #6050DC;
}
.now-screen-heading {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  line-height: 1.1;
  color: #F0EDE6;
}
.now-screen-divider {
  height: 6px;
  background: #4A3F8A;
}
.now-screen-meta {
  font-size: 11px;
  color: #8f8f88;
  line-height: 1.5;
}
.now-screen-cta {
  margin-top: auto;
  padding: 12px;
  background: #DBFE87;
  color: #0d0d0d;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
.phone-screen--list {
  display: flex;
  flex-direction: column;
}
.list-row {
  padding: 12px;
  border-bottom: 1px solid #333;
  display: flex;
  gap: 10px;
  align-items: center;
}
.list-row--last {
  border-bottom: none;
}
.list-swatch {
  width: 6px;
  height: 26px;
}
.list-name {
  font-size: 12px;
  color: #F0EDE6;
}
.list-cat {
  font-size: 9px;
  color: #8f8f88;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* CTA */
.cta {
  background: #6050DC;
  padding: 90px 32px 100px;
  text-align: center;
  border-bottom: 3px solid #0d0d0d;
}
.cta-heading {
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 7vw, 84px);
  line-height: 1;
  letter-spacing: -1px;
  color: #F0EDE6;
}
.cta .store-wrap {
  display: inline-block;
  margin-top: 44px;
}
.store-buttons--inline {
  display: inline-flex;
}
.store-btn--cta {
  padding: 18px 32px;
  font-family: 'Anton', sans-serif;
  font-size: 15px;
}
.coming-soon--cta {
  top: -14px;
  right: -14px;
  font-size: 12px;
  padding: 7px 14px;
}

/* FOOTER */
.footer {
  background: #0d0d0d;
  color: #F0EDE6;
  padding: 50px 32px 32px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  border-bottom: 1px solid #333;
  padding-bottom: 32px;
}
.footer-logo {
  font-size: 24px;
}
.footer-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: 1px;
}
.footer-links a {
  color: #F0EDE6;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-links a:hover {
  color: #DBFE87;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #888;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 640px) {
  .hero-bottom {
    align-items: flex-start;
  }
}