/* =========================================================
   EARNDALA — PREMIUM LANDING PAGE
   landing.css
   ========================================================= */

:root {

  --landing-bg: #040806;
  --landing-bg-2: #07100b;

  --landing-card: rgba(10, 19, 14, .72);
  --landing-card-solid: #0b1510;

  --landing-border: rgba(255,255,255,.075);
  --landing-border-bright: rgba(255,255,255,.12);

  --landing-green: #19eb91;
  --landing-green-bright: #6affbd;
  --landing-green-soft: rgba(25,235,145,.11);

  --landing-gold: #f5c75c;
  --landing-purple: #a779ff;
  --landing-blue: #5ba8ff;
  --landing-red: #ff687d;

  --landing-text: #f5f8f6;
  --landing-text-soft: #cdd6d1;
  --landing-muted: #85918a;
  --landing-muted-2: #59645e;

  --landing-radius: 18px;
  --landing-radius-lg: 26px;
  --landing-radius-xl: 32px;

  --landing-shadow:
    0 28px 80px rgba(0,0,0,.38);
}


/* =========================================================
   BASE
   ========================================================= */

.landing-page {

  margin: 0;

  overflow-x: hidden;

  color: var(--landing-text);

  background:

    radial-gradient(
      circle at 75% 0%,
      rgba(25,235,145,.075),
      transparent 35rem
    ),

    radial-gradient(
      circle at 10% 60%,
      rgba(167,121,255,.045),
      transparent 30rem
    ),

    var(--landing-bg);
}

.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

.landing-page a {
  text-decoration: none;
}

.hidden {
  display: none !important;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.landing-background {

  position: fixed;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.landing-grid {

  position: absolute;

  inset: 0;

  opacity: .035;

  background-image:

    linear-gradient(
      rgba(255,255,255,.18) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.18) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 88%
    );
}

.landing-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(100px);

  opacity: .1;
}

.landing-orb-1 {

  width: 450px;
  height: 450px;

  top: -240px;
  right: -80px;

  background:
    var(--landing-green);
}

.landing-orb-2 {

  width: 430px;
  height: 430px;

  top: 35%;
  left: -310px;

  background:
    var(--landing-purple);
}

.landing-orb-3 {

  width: 300px;
  height: 300px;

  bottom: -170px;
  right: 15%;

  background:
    var(--landing-blue);
}

.floating-d {

  position: absolute;

  color:
    rgba(25,235,145,.08);

  font-size: 18rem;

  line-height: 1;

  font-weight: 900;

  filter: blur(.2px);

  transform:
    rotate(-15deg);
}

.floating-d-2 {

  top: 35%;
  right: -7rem;

  color:
    rgba(167,121,255,.055);

  font-size: 12rem;

  transform:
    rotate(18deg);
}

.floating-d-3 {

  bottom: 10%;
  left: -3rem;

  font-size: 8rem;

  color:
    rgba(245,199,92,.045);
}


/* =========================================================
   LOADER
   ========================================================= */

.landing-loader {

  position: fixed;

  inset: 0;

  z-index: 99999;

  display: grid;

  place-items: center;

  background:
    #030705;

  transition:
    opacity .5s ease,
    visibility .5s ease;
}

.landing-loader-card {

  width: min(320px, 90vw);

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 26px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 22px;

  background:
    rgba(255,255,255,.025);

  box-shadow:
    0 30px 80px rgba(0,0,0,.4);

  backdrop-filter:
    blur(20px);
}

.landing-loader-logo {

  width: 58px;
  height: 58px;

  display: grid;

  place-items: center;

  border-radius: 17px;

  background:
    rgba(25,235,145,.09);

  border:
    1px solid
    rgba(25,235,145,.16);

  margin-bottom: 12px;
}

.landing-loader-logo img {

  width: 36px;
  height: 36px;
}

.landing-loader-brand {

  display: flex;

  flex-direction: column;

  align-items: center;
}

.landing-loader-brand strong {

  font-size: 1.05rem;

  letter-spacing: -.035em;
}

.landing-loader-brand span {

  margin-top: 2px;

  color:
    var(--landing-muted);

  font-size: .62rem;
}

.landing-loader-bar {

  width: 100%;

  height: 3px;

  margin-top: 22px;

  overflow: hidden;

  border-radius: 99px;

  background:
    rgba(255,255,255,.06);
}

.landing-loader-bar span {

  display: block;

  width: 35%;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--landing-green),
      transparent
    );

  animation:
    landingLoaderSlide 1.2s ease-in-out infinite;
}

.landing-loader-status {

  display: flex;

  align-items: center;

  gap: 7px;

  margin-top: 12px;

  color:
    var(--landing-muted);

  font-size: .58rem;
}

.landing-loader-status i {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background:
    var(--landing-green);

  box-shadow:
    0 0 10px var(--landing-green);
}

@keyframes landingLoaderSlide {

  from {
    transform:
      translateX(-140%);
  }

  to {
    transform:
      translateX(420%);
  }

}


/* =========================================================
   NAVBAR
   ========================================================= */

.landing-navbar {

  position: sticky;

  top: 0;

  z-index: 500;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  background:
    rgba(4,8,6,.72);

  backdrop-filter:
    blur(24px);
}

.landing-nav-inner {

  min-height: 75px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;
}

.landing-brand {

  display: flex;

  align-items: center;

  gap: 10px;

  color: inherit;
}

.landing-brand-mark {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(25,235,145,.15),
      rgba(25,235,145,.03)
    );

  border:
    1px solid
    rgba(25,235,145,.18);
}

.landing-brand-mark img {

  width: 28px;

  height: 28px;
}

.landing-brand-copy {

  display: flex;

  flex-direction: column;
}

.landing-brand-copy strong {

  font-size: 1rem;

  letter-spacing: -.04em;
}

.landing-brand-copy span {

  margin-top: 1px;

  color:
    var(--landing-muted);

  font-size: .59rem;

  text-transform: uppercase;

  letter-spacing: .08em;
}

.landing-desktop-nav {

  display: flex;

  align-items: center;

  gap: 28px;

  margin-left: auto;

  margin-right: auto;
}

.landing-nav-link {

  color:
    var(--landing-muted);

  font-size: .68rem;

  font-weight: 650;

  transition:
    color .2s ease;
}

.landing-nav-link:hover {

  color:
    var(--landing-text);
}

.landing-nav-actions {

  display: flex;

  align-items: center;

  gap: 7px;
}

.landing-login-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 37px;

  padding:
    0 13px;

  border:
    1px solid
    var(--landing-border);

  border-radius: 10px;

  color:
    var(--landing-text-soft);

  background:
    rgba(255,255,255,.025);

  font-size: .65rem;

  font-weight: 750;

  transition:
    .2s ease;
}

.landing-login-btn:hover {

  background:
    rgba(255,255,255,.055);

  color:
    var(--landing-text);
}

.landing-signup-btn,
.landing-dashboard-btn {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-height: 37px;

  padding:
    0 13px;

  border-radius: 10px;

  color:
    #03140c;

  background:
    linear-gradient(
      135deg,
      var(--landing-green-bright),
      var(--landing-green)
    );

  font-size: .65rem;

  font-weight: 850;

  box-shadow:
    0 8px 25px
    rgba(25,235,145,.12);
}

.landing-signup-btn span,
.landing-dashboard-btn span {

  font-size: .85rem;

  transition:
    transform .2s ease;
}

.landing-signup-btn:hover span,
.landing-dashboard-btn:hover span {

  transform:
    translateX(3px);
}

.landing-menu-btn {

  display: none;

  width: 40px;

  height: 40px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  border:
    1px solid
    var(--landing-border);

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);

  cursor: pointer;
}

.landing-menu-btn span {

  width: 17px;

  height: 1.5px;

  border-radius: 4px;

  background:
    var(--landing-text);
}

.landing-mobile-menu {

  display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.landing-hero {

  position: relative;

  z-index: 1;

  padding:
    70px 0 30px;
}

.landing-hero-grid {

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(400px,.9fr);

  align-items: center;

  gap: 55px;
}

.landing-hero-copy {

  position: relative;

  z-index: 5;
}

.hero-live-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(25,235,145,.14);

  border-radius: 999px;

  color:
    var(--landing-green);

  background:
    rgba(25,235,145,.045);

  font-size: .59rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .06em;
}

.hero-live-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--landing-green);

  box-shadow:
    0 0 10px
    var(--landing-green);
}

.hero-pill-separator {

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background:
    var(--landing-muted-2);
}

.landing-hero-title {

  max-width: 780px;

  margin:
    23px 0 18px;

  font-size:
    clamp(
      3rem,
      7vw,
      6.7rem
    );

  line-height:
    .91;

  letter-spacing:
    -.075em;

  font-weight:
    900;
}

.hero-green-text {

  color:
    var(--landing-green);

  text-shadow:
    0 0 45px
    rgba(25,235,145,.15);
}

.hero-outline-text {

  color:
    transparent;

  -webkit-text-stroke:
    1px rgba(255,255,255,.38);

  text-shadow:
    none;
}

.landing-hero-subtitle {

  max-width: 620px;

  margin: 0 0 26px;

  color:
    var(--landing-muted);

  font-size:
    .88rem;

  line-height:
    1.75;
}

.landing-hero-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}

.landing-primary-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 47px;

  padding:
    0 17px;

  border-radius: 12px;

  color:
    #03140c;

  background:
    linear-gradient(
      135deg,
      var(--landing-green-bright),
      var(--landing-green)
    );

  font-size: .69rem;

  font-weight: 850;

  box-shadow:
    0 12px 35px
    rgba(25,235,145,.12);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.landing-primary-cta:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 17px 40px
    rgba(25,235,145,.18);
}

.landing-primary-cta svg {

  width: 16px;

  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.landing-secondary-cta {

  min-height: 47px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    0 14px;

  border:
    1px solid
    var(--landing-border);

  border-radius: 12px;

  color:
    var(--landing-text-soft);

  background:
    rgba(255,255,255,.025);

  font-size: .67rem;

  font-weight: 750;

  transition:
    .2s ease;
}

.landing-secondary-cta:hover {

  color:
    var(--landing-text);

  border-color:
    rgba(255,255,255,.14);

  background:
    rgba(255,255,255,.05);
}

.play-icon {

  width: 22px;

  height: 22px;

  display: grid;

  place-items: center;

  border-radius: 7px;

  color:
    var(--landing-green);

  background:
    rgba(25,235,145,.08);

  font-size: .48rem;
}

.landing-trust-row {

  display: flex;

  flex-wrap: wrap;

  gap: 17px;

  margin-top: 20px;
}

.trust-item {

  display: flex;

  align-items: center;

  gap: 5px;

  color:
    var(--landing-muted);

  font-size: .58rem;
}

.trust-item span {

  color:
    var(--landing-green);

  font-weight: 900;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.landing-hero-visual {

  position: relative;

  min-height:
    575px;

  display: grid;

  place-items: center;
}

.hero-wallet-card {

  position: absolute;

  top: 35px;

  left: 50%;

  z-index: 5;

  width: 390px;

  padding: 22px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      rgba(17,31,23,.9),
      rgba(7,16,11,.88)
    );

  box-shadow:
    0 35px 80px
    rgba(0,0,0,.4),

    inset 0 1px 0
    rgba(255,255,255,.035);

  transform:
    translateX(-50%)
    rotate(-4deg);

  overflow: hidden;
}

.wallet-glow {

  position: absolute;

  width: 190px;

  height: 190px;

  top: -110px;

  right: -60px;

  border-radius: 50%;

  background:
    var(--landing-green);

  filter:
    blur(60px);

  opacity: .11;
}

.wallet-top {

  position: relative;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 18px;
}

.wallet-label {

  display: block;

  color:
    var(--landing-muted);

  font-size: .55rem;

  font-weight: 800;

  letter-spacing: .1em;
}

.wallet-balance {

  margin-top: 7px;

  font-size: 2.05rem;

  font-weight: 900;

  letter-spacing: -.06em;
}

.wallet-balance span {

  color:
    var(--landing-muted-2);

  font-size:
    1rem;
}

.wallet-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    5px 7px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 7px;

  color:
    var(--landing-muted);

  font-size: .48rem;

  font-weight: 800;

  letter-spacing: .1em;
}

.wallet-chip span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--landing-green);

  box-shadow:
    0 0 7px
    var(--landing-green);
}

.wallet-chart {

  position: relative;

  height: 130px;

  margin-top: 20px;

  overflow: hidden;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}

.chart-line {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.chart-line span {

  width: 5px;

  height: var(--chart-height, 35px);

  border-radius: 4px;

  background:
    linear-gradient(
      to top,
      rgba(25,235,145,.1),
      var(--landing-green)
    );

  box-shadow:
    0 0 8px
    rgba(25,235,145,.15);
}

.chart-line span:nth-child(1) {
  --chart-height: 30px;
}
.chart-line span:nth-child(2) {
  --chart-height: 44px;
}
.chart-line span:nth-child(3) {
  --chart-height: 38px;
}
.chart-line span:nth-child(4) {
  --chart-height: 60px;
}
.chart-line span:nth-child(5) {
  --chart-height: 52px;
}
.chart-line span:nth-child(6) {
  --chart-height: 70px;
}
.chart-line span:nth-child(7) {
  --chart-height: 65px;
}
.chart-line span:nth-child(8) {
  --chart-height: 85px;
}
.chart-line span:nth-child(9) {
  --chart-height: 72px;
}
.chart-line span:nth-child(10) {
  --chart-height: 98px;
}
.chart-line span:nth-child(11) {
  --chart-height: 113px;
}

.chart-area {

  position: absolute;

  inset:
    auto 0 0;

  height: 65%;

  background:
    linear-gradient(
      to top,
      rgba(25,235,145,.12),
      transparent
    );
}

.wallet-bottom {

  display: grid;

  grid-template-columns:
    1fr auto auto;

  align-items: center;

  gap: 12px;

  margin-top: 14px;

  color:
    var(--landing-muted);

  font-size: .54rem;
}

.wallet-bottom strong {

  color:
    var(--landing-text);

  font-size: .67rem;
}

.wallet-positive {

  color:
    var(--landing-green);

  font-weight: 850;
}


/* HERO TASK CARDS */

.hero-task-card {

  position: absolute;

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 9px;

  width: 230px;

  padding: 11px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius: 14px;

  background:
    rgba(10,18,13,.88);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(20px);

  animation:
    heroFloat 5s
    ease-in-out
    infinite;
}

.hero-task-card-1 {

  top: 180px;

  right: -5px;

  transform:
    rotate(3deg);
}

.hero-task-card-2 {

  bottom: 125px;

  left: -15px;

  transform:
    rotate(-4deg);

  animation-delay:
    -1.7s;
}

.hero-task-icon {

  width: 31px;

  height: 31px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 9px;

  font-size: .65rem;

  font-weight: 900;
}

.hero-task-icon.green {

  color:
    var(--landing-green);

  background:
    var(--landing-green-soft);
}

.hero-task-icon.gold {

  color:
    var(--landing-gold);

  background:
    rgba(245,199,92,.1);
}

.hero-task-copy {

  min-width: 0;

  display: flex;

  flex-direction: column;
}

.hero-task-copy strong {

  font-size: .6rem;
}

.hero-task-copy span {

  margin-top: 2px;

  color:
    var(--landing-muted);

  font-size: .51rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.hero-task-card b {

  margin-left:
    auto;

  color:
    var(--landing-green);

  font-size: .68rem;
}

@keyframes heroFloat {

  0%,100% {
    transform:
      translateY(0)
      rotate(3deg);
  }

  50% {
    transform:
      translateY(-9px)
      rotate(3deg);
  }
}


/* RINGS */

.hero-ring {

  position: absolute;

  width: 450px;

  height: 450px;

  border:
    1px solid
    rgba(25,235,145,.07);

  border-radius: 50%;
}

.hero-ring-2 {

  width: 560px;
  height: 560px;

  border-color:
    rgba(25,235,145,.035);
}


/* PHONE */

.hero-phone {

  position: absolute;

  z-index: 7;

  bottom: 15px;

  left: 50%;

  transform:
    translateX(-50%);
}

.phone-frame {

  width: 245px;

  height: 500px;

  padding: 8px;

  border-radius: 36px;

  border:
    5px solid
    #111713;

  background:
    #030704;

  box-shadow:

    0 45px 80px
    rgba(0,0,0,.5),

    inset 0 0 0 1px
    rgba(255,255,255,.07);
}

.phone-speaker {

  position: absolute;

  left: 50%;

  top: 15px;

  width: 62px;

  height: 16px;

  transform:
    translateX(-50%);

  border-radius:
    99px;

  background:
    #050806;

  z-index: 10;
}

.phone-screen {

  position: relative;

  height: 100%;

  overflow: hidden;

  border-radius: 27px;

  padding: 22px 12px 12px;

  background:

    linear-gradient(
      180deg,
      #0b1710,
      #07100b
    );
}

.phone-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.phone-brand-mini {

  color:
    var(--landing-green);

  font-size: .58rem;

  font-weight: 900;
}

.phone-avatar {

  width: 24px;

  height: 24px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  background:
    rgba(25,235,145,.12);

  color:
    var(--landing-green);

  font-size: .55rem;

  font-weight: 900;
}

.phone-greeting {

  margin-top: 18px;

  display: flex;

  flex-direction: column;
}

.phone-greeting span {

  color:
    var(--landing-muted);

  font-size: .48rem;
}

.phone-greeting strong {

  margin-top: 3px;

  font-size: .8rem;

  letter-spacing: -.02em;
}

.phone-mini-balance {

  margin-top: 12px;

  padding: 11px;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      rgba(25,235,145,.11),
      rgba(25,235,145,.035)
    );

  border:
    1px solid
    rgba(25,235,145,.1);
}

.phone-mini-balance span {

  display: block;

  color:
    var(--landing-muted);

  font-size: .43rem;
}

.phone-mini-balance strong {

  display: block;

  margin-top: 4px;

  font-size: 1rem;
}

.phone-mini-balance small {

  display: block;

  margin-top: 3px;

  color:
    var(--landing-green);

  font-size: .43rem;
}

.phone-section-title {

  margin-top: 13px;

  margin-bottom: 7px;

  color:
    var(--landing-muted);

  font-size: .46rem;

  font-weight: 750;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}

.phone-task {

  display: grid;

  grid-template-columns:
    27px minmax(0,1fr) auto;

  align-items: center;

  gap: 7px;

  padding: 7px;

  margin-bottom: 6px;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius: 9px;

  background:
    rgba(255,255,255,.022);
}

.phone-task-icon {

  width: 27px;

  height: 27px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  background:
    rgba(25,235,145,.08);

  color:
    var(--landing-green);

  font-size: .55rem;
}

.phone-task-icon.purple {

  color:
    var(--landing-purple);

  background:
    rgba(167,121,255,.09);
}

.phone-task-icon.gold {

  color:
    var(--landing-gold);

  background:
    rgba(245,199,92,.08);
}

.phone-task div:nth-child(2) {

  min-width: 0;

  display: flex;

  flex-direction: column;
}

.phone-task strong {

  font-size: .5rem;
}

.phone-task span {

  margin-top: 2px;

  color:
    var(--landing-muted);

  font-size: .42rem;
}

.phone-task b {

  color:
    var(--landing-green);

  font-size: .52rem;
}

.phone-bottom-nav {

  position: absolute;

  left: 10px;
  right: 10px;
  bottom: 10px;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  padding: 6px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 11px;

  background:
    rgba(5,10,7,.9);

  backdrop-filter:
    blur(10px);
}

.phone-bottom-nav span {

  padding: 5px 0;

  text-align: center;

  color:
    var(--landing-muted-2);

  font-size: .42rem;
}

.phone-bottom-nav .active {

  color:
    var(--landing-green);
}


/* =========================================================
   HERO METRICS
   ========================================================= */

.hero-metrics {

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  margin-top: 45px;

  border:
    1px solid
    var(--landing-border);

  border-radius: 15px;

  background:
    rgba(255,255,255,.018);

  overflow: hidden;
}

.hero-metric {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 60px;

  border-right:
    1px solid
    rgba(255,255,255,.05);
}

.hero-metric:last-child {

  border-right: 0;
}

.hero-metric strong {

  color:
    var(--landing-green);

  font-size: .82rem;
}

.hero-metric span {

  color:
    var(--landing-muted);

  font-size: .56rem;
}


/* =========================================================
   MARQUEE
   ========================================================= */

.landing-marquee {

  position: relative;

  z-index: 1;

  overflow: hidden;

  border-top:
    1px solid
    rgba(255,255,255,.04);

  border-bottom:
    1px solid
    rgba(255,255,255,.04);

  background:
    rgba(255,255,255,.018);
}

.landing-marquee-track {

  width: max-content;

  display: flex;

  align-items: center;

  gap: 25px;

  padding:
    14px 0;

  color:
    var(--landing-muted-2);

  font-size: .6rem;

  font-weight: 850;

  letter-spacing:
    .13em;

  animation:
    marqueeMove 35s
    linear infinite;
}

.landing-marquee-track i {

  color:
    var(--landing-green);

  font-style: normal;
}

@keyframes marqueeMove {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }

}


/* =========================================================
   GENERIC SECTIONS
   ========================================================= */

.landing-section {

  position: relative;

  z-index: 1;

  padding:
    105px 0;
}

.landing-section-heading {

  max-width: 700px;

  margin:
    0 auto 44px;

  text-align: center;
}

.landing-section-heading.align-left {

  margin-left: 0;

  text-align:
    left;
}

.section-kicker {

  color:
    var(--landing-green);

  font-size: .57rem;

  font-weight: 900;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}

.landing-section-heading h2 {

  margin:
    11px 0 12px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.8rem
    );

  line-height:
    .98;

  letter-spacing:
    -.065em;
}

.landing-section-heading h2 span {

  color:
    var(--landing-green);
}

.landing-section-heading p {

  max-width: 610px;

  margin:
    0 auto;

  color:
    var(--landing-muted);

  font-size: .77rem;

  line-height:
    1.75;
}

.landing-section-heading.align-left p {

  margin-left: 0;
}


/* =========================================================
   HOW
   ========================================================= */

.how-section {

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      transparent
    );
}

.how-grid {

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 11px;
}

.how-card {

  position: relative;

  min-height: 270px;

  padding: 23px;

  overflow: hidden;

  border:
    1px solid
    var(--landing-border);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.034),
      rgba(255,255,255,.012)
    );

  transition:
    transform .24s ease,
    border-color .24s ease;
}

.how-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(255,255,255,.12);
}

.how-card.featured {

  border-color:
    rgba(25,235,145,.17);

  background:
    linear-gradient(
      145deg,
      rgba(25,235,145,.065),
      rgba(255,255,255,.012)
    );
}

.how-card-number {

  color:
    rgba(255,255,255,.09);

  font-size:
    3.7rem;

  font-weight:
    900;

  letter-spacing:
    -.07em;

  line-height:
    .8;
}

.how-card-icon {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  margin-top: 30px;

  border-radius: 12px;

  background:
    var(--landing-green-soft);

  color:
    var(--landing-green);

  font-size: .9rem;

  font-weight: 900;
}

.how-card h3 {

  margin:
    14px 0 8px;

  font-size: .92rem;

  letter-spacing:
    -.025em;
}

.how-card p {

  margin: 0;

  color:
    var(--landing-muted);

  font-size: .64rem;

  line-height:
    1.65;
}

.how-card-bottom {

  position: absolute;

  left: 23px;
  right: 23px;
  bottom: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 12px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  color:
    var(--landing-muted-2);

  font-size: .53rem;
}

.how-card-bottom span:last-child {

  color:
    var(--landing-green);

  font-size:
    .85rem;
}


/* =========================================================
   EARN
   ========================================================= */

.earn-section {

  background:
    rgba(255,255,255,.01);

  border-top:
    1px solid
    rgba(255,255,255,.045);

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}

.earn-layout {

  display: grid;

  grid-template-columns:
    minmax(0,1.45fr)
    minmax(250px,.55fr);

  gap: 12px;
}

.earn-main-card {

  padding: 23px;

  border:
    1px solid
    var(--landing-border);

  border-radius: 21px;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

  box-shadow:
    var(--landing-shadow);
}

.earn-main-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 15px;
}

.earn-card-label {

  color:
    var(--landing-muted-2);

  font-size: .53rem;

  font-weight: 850;

  letter-spacing:
    .14em;
}

.earn-main-top h3 {

  margin:
    6px 0 0;

  font-size:
    1.05rem;

  letter-spacing:
    -.035em;
}

.earn-live {

  display: flex;

  align-items: center;

  gap: 5px;

  padding:
    5px 7px;

  border-radius: 7px;

  background:
    var(--landing-green-soft);

  color:
    var(--landing-green);

  font-size: .49rem;

  font-weight: 850;

  text-transform:
    uppercase;
}

.earn-live span {

  width: 5px;

  height: 5px;

  border-radius:
    50%;

  background:
    var(--landing-green);

  box-shadow:
    0 0 8px
    var(--landing-green);
}

.task-preview-list {

  display: flex;

  flex-direction: column;

  gap: 5px;
}

.task-preview-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding:
    10px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius: 11px;

  background:
    rgba(255,255,255,.018);

  transition:
    background .2s ease,
    border-color .2s ease;
}

.task-preview-item:hover {

  border-color:
    rgba(25,235,145,.11);

  background:
    rgba(25,235,145,.03);
}

.task-preview-left {

  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;
}

.task-preview-icon {

  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 9px;

  color:
    var(--landing-green);

  background:
    var(--landing-green-soft);

  font-weight:
    900;

  font-size: .65rem;
}

.task-preview-icon.purple {

  color:
    var(--landing-purple);

  background:
    rgba(167,121,255,.09);
}

.task-preview-icon.gold {

  color:
    var(--landing-gold);

  background:
    rgba(245,199,92,.08);
}

.task-preview-icon.blue {

  color:
    var(--landing-blue);

  background:
    rgba(91,168,255,.08);
}

.task-preview-left > div:last-child {

  min-width: 0;

  display: flex;

  flex-direction: column;
}

.task-preview-left strong {

  font-size: .63rem;

  white-space:
    nowrap;

  overflow: hidden;

  text-overflow:
    ellipsis;
}

.task-preview-left span {

  margin-top: 3px;

  color:
    var(--landing-muted);

  font-size: .51rem;
}

.task-preview-left span i {

  display: inline-block;

  width: 3px;

  height: 3px;

  margin:
    0 4px;

  border-radius:
    50%;

  background:
    var(--landing-muted-2);
}

.task-preview-reward {

  color:
    var(--landing-green);

  font-size:
    .7rem;

  font-weight:
    850;
}

.earn-browse-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 12px;

  padding:
    11px;

  border:
    1px dashed
    rgba(25,235,145,.14);

  border-radius:
    10px;

  color:
    var(--landing-green);

  font-size: .57rem;

  font-weight: 750;
}

.earn-browse-link span {

  font-size:
    .85rem;
}

.earn-side-stack {

  display: flex;

  flex-direction: column;

  gap: 8px;
}

.earn-stat-card {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  flex: 1;

  padding: 15px;

  border:
    1px solid
    var(--landing-border);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.024);
}

.earn-stat-icon {

  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius:
    9px;

  background:
    var(--landing-green-soft);

  color:
    var(--landing-green);

  font-size:
    .65rem;

  font-weight:
    900;
}

.earn-stat-icon.purple {

  color:
    var(--landing-purple);

  background:
    rgba(167,121,255,.09);
}

.earn-stat-icon.gold {

  color:
    var(--landing-gold);

  background:
    rgba(245,199,92,.08);
}

.earn-stat-card strong {

  display:
    block;

  font-size:
    .64rem;
}

.earn-stat-card span {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--landing-muted);

  font-size:
    .52rem;

  line-height:
    1.5;
}


/* =========================================================
   FEATURES BENTO
   ========================================================= */

.feature-bento {

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 9px;
}

.feature-bento-card {

  min-height: 210px;

  padding: 20px;

  border:
    1px solid
    var(--landing-border);

  border-radius: 18px;

  background:
    rgba(255,255,255,.024);

  transition:
    transform .23s ease,
    border-color .23s ease;
}

.feature-bento-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(255,255,255,.12);
}

.feature-bento-card.large {

  grid-column:
    span 2;

  min-height:
    275px;
}

.feature-bento-top {

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.feature-bento-top > span {

  color:
    var(--landing-muted-2);

  font-size:
    .55rem;

  font-weight:
    850;
}

.feature-bento-icon {

  width: 37px;

  height: 37px;

  display: grid;

  place-items: center;

  border-radius:
    10px;

  font-size:
    .72rem;

  font-weight:
    900;
}

.feature-bento-icon.green {

  color:
    var(--landing-green);

  background:
    var(--landing-green-soft);
}

.feature-bento-icon.gold {

  color:
    var(--landing-gold);

  background:
    rgba(245,199,92,.08);
}

.feature-bento-icon.purple {

  color:
    var(--landing-purple);

  background:
    rgba(167,121,255,.09);
}

.feature-bento-icon.blue {

  color:
    var(--landing-blue);

  background:
    rgba(91,168,255,.09);
}

.feature-bento-icon.red {

  color:
    var(--landing-red);

  background:
    rgba(255,104,125,.08);
}

.feature-bento-card h3 {

  margin:
    18px 0 7px;

  font-size:
    .88rem;

  letter-spacing:
    -.025em;
}

.feature-bento-card p {

  margin:
    0;

  max-width:
    400px;

  color:
    var(--landing-muted);

  font-size:
    .62rem;

  line-height:
    1.65;
}

.feature-device-preview {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  margin-top:
    24px;

  padding:
    10px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    13px;

  background:
    rgba(0,0,0,.12);
}

.mini-device {

  width:
    56px;

  height:
    82px;

  padding:
    4px;

  border:
    2px solid
    #171f19;

  border-radius:
    10px;

  background:
    #030704;
}

.mini-device-top {

  width:
    22px;

  height:
    3px;

  margin:
    2px auto 4px;

  border-radius:
    99px;

  background:
    #101711;
}

.mini-device-screen {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    4px;
}

.mini-device-screen div {

  height:
    11px;

  border-radius:
    4px;

  background:
    linear-gradient(
      90deg,
      rgba(25,235,145,.22),
      rgba(25,235,145,.04)
    );
}

.feature-device-copy {

  display:
    flex;

  flex-direction:
    column;
}

.feature-device-copy strong {

  font-size:
    .58rem;
}

.feature-device-copy span {

  margin-top:
    3px;

  color:
    var(--landing-muted);

  font-size:
    .51rem;
}


/* =========================================================
   ADVERTISER
   ========================================================= */

.advertiser-section {

  padding-top:
    80px;
}

.advertiser-card {

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(330px,.9fr);

  gap:
    35px;

  padding:
    34px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(25,235,145,.13);

  border-radius:
    26px;

  background:

    radial-gradient(
      circle at 90% 10%,
      rgba(25,235,145,.1),
      transparent 22rem
    ),

    linear-gradient(
      145deg,
      rgba(25,235,145,.05),
      rgba(255,255,255,.015)
    );
}

.advertiser-glow {

  position:
    absolute;

  width:
    280px;

  height:
    280px;

  top:
    -170px;

  right:
    18%;

  border-radius:
    50%;

  background:
    var(--landing-green);

  filter:
    blur(90px);

  opacity:
    .07;
}

.advertiser-copy {

  position:
    relative;

  z-index:
    2;
}

.advertiser-copy h2 {

  max-width:
    650px;

  margin:
    12px 0 11px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.55rem
    );

  letter-spacing:
    -.065em;

  line-height:
    .97;
}

.advertiser-copy h2 span {

  color:
    var(--landing-green);
}

.advertiser-copy p {

  max-width:
    570px;

  margin:
    0;

  color:
    var(--landing-muted);

  font-size:
    .72rem;

  line-height:
    1.7;
}

.advertiser-points {

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    8px;

  margin:
    20px 0;
}

.advertiser-points div {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--landing-text-soft);

  font-size:
    .57rem;
}

.advertiser-points span {

  color:
    var(--landing-green);

  font-weight:
    900;
}

.advertiser-btn {

  display:
    inline-flex;
}

.advertiser-btn span {

  font-size:
    .9rem;
}


/* AD DASHBOARD */

.advertiser-dashboard {

  position:
    relative;

  z-index:
    2;

  align-self:
    center;

  padding:
    19px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    18px;

  background:
    rgba(6,12,9,.72);

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.36);

  backdrop-filter:
    blur(20px);
}

.ad-panel-top {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    12px;

  padding-bottom:
    14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}

.ad-panel-top span {

  display:
    block;

  color:
    var(--landing-muted-2);

  font-size:
    .48rem;

  letter-spacing:
    .1em;

  font-weight:
    850;
}

.ad-panel-top strong {

  display:
    block;

  margin-top:
    5px;

  font-size:
    .69rem;
}

.ad-status {

  padding:
    5px 7px;

  border-radius:
    6px;

  color:
    var(--landing-green);

  background:
    rgba(25,235,145,.08);

  font-size:
    .45rem;

  font-weight:
    850;
}

.campaign-progress-block {

  padding:
    17px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}

.campaign-progress-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  color:
    var(--landing-muted);

  font-size:
    .54rem;
}

.campaign-progress-top strong {

  color:
    var(--landing-text);

  font-size:
    .58rem;
}

.campaign-progress {

  height:
    7px;

  margin-top:
    9px;

  border-radius:
    99px;

  overflow:
    hidden;

  background:
    rgba(255,255,255,.05);
}

.campaign-progress span {

  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--landing-green),
      var(--landing-green-bright)
    );
}

.campaign-mini-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    8px;

  padding:
    15px 0;
}

.campaign-mini-grid div {

  display:
    flex;

  flex-direction:
    column;

  padding:
    9px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.018);
}

.campaign-mini-grid span {

  color:
    var(--landing-muted);

  font-size:
    .45rem;
}

.campaign-mini-grid strong {

  margin-top:
    4px;

  font-size:
    .62rem;
}

.campaign-mini-grid strong.green {

  color:
    var(--landing-green);
}

.campaign-users {

  display:
    flex;

  align-items:
    center;

  padding-top:
    3px;
}

.campaign-user {

  width:
    25px;

  height:
    25px;

  display:
    grid;

  place-items:
    center;

  margin-right:
    -4px;

  border:
    2px solid
    #08100b;

  border-radius:
    50%;

  color:
    #03140c;

  background:
    var(--landing-green);

  font-size:
    .45rem;

  font-weight:
    900;
}

.campaign-user.purple {

  background:
    var(--landing-purple);
}

.campaign-user.gold {

  background:
    var(--landing-gold);
}

.campaign-user.blue {

  background:
    var(--landing-blue);
}

.campaign-users > span {

  margin-left:
    10px;

  color:
    var(--landing-muted);

  font-size:
    .51rem;
}


/* =========================================================
   SECURITY
   ========================================================= */

.security-section {

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.01),
      rgba(255,255,255,.02)
    );
}

.security-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    9px;
}

.security-card {

  position:
    relative;

  min-height:
    240px;

  padding:
    21px;

  border:
    1px solid
    var(--landing-border);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.022);

  overflow:
    hidden;
}

.security-card-icon {

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    30px;

  border-radius:
    11px;

  background:
    var(--landing-green-soft);

  font-size:
    .85rem;
}

.security-card > div:nth-child(2) span {

  color:
    var(--landing-muted-2);

  font-size:
    .48rem;

  font-weight:
    850;

  letter-spacing:
    .1em;
}

.security-card h3 {

  margin:
    6px 0 8px;

  font-size:
    .82rem;
}

.security-card p {

  max-width:
    310px;

  margin:
    0;

  color:
    var(--landing-muted);

  font-size:
    .6rem;

  line-height:
    1.65;
}

.security-card-line {

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--landing-green),
      transparent
    );

  opacity:
    .25;
}

.security-note {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    14px;

  padding:
    12px;

  color:
    var(--landing-muted);

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.018);

  font-size:
    .56rem;

  text-align:
    center;
}

.security-note span {

  color:
    var(--landing-green);

  font-size:
    .7rem;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.landing-final-cta {

  position:
    relative;

  padding:
    100px 0;

  overflow:
    hidden;
}

.landing-final-glow {

  position:
    absolute;

  width:
    500px;

  height:
    500px;

  left:
    50%;

  top:
    50%;

  transform:
    translate(-50%,-50%);

  border-radius:
    50%;

  background:
    var(--landing-green);

  filter:
    blur(120px);

  opacity:
    .065;
}

.final-cta-card {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding:
    60px 25px;

  border:
    1px solid
    rgba(25,235,145,.12);

  border-radius:
    26px;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(25,235,145,.08),
      transparent 25rem
    ),

    rgba(255,255,255,.018);

  text-align:
    center;

  overflow:
    hidden;
}

.final-cta-top-line {

  position:
    absolute;

  top:
    0;

  left:
    20%;

  right:
    20%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--landing-green),
      transparent
    );
}

.final-cta-card h2 {

  max-width:
    700px;

  margin:
    12px auto;

  font-size:
    clamp(
      2.2rem,
      5vw,
      4.7rem
    );

  line-height:
    .94;

  letter-spacing:
    -.065em;
}

.final-cta-card h2 span {

  color:
    var(--landing-green);
}

.final-cta-card p {

  max-width:
    520px;

  margin:
    0 auto;

  color:
    var(--landing-muted);

  font-size:
    .72rem;

  line-height:
    1.7;
}

.final-cta-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    8px;

  margin-top:
    20px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.landing-footer {

  position:
    relative;

  z-index:
    1;

  padding:
    65px 0 22px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  background:
    rgba(0,0,0,.12);
}

.footer-main {

  display:
    grid;

  grid-template-columns:
    1.7fr
    repeat(3,.7fr);

  gap:
    35px;

  padding-bottom:
    40px;
}

.footer-brand-block p {

  max-width:
    360px;

  margin:
    14px 0;

  color:
    var(--landing-muted);

  font-size:
    .63rem;

  line-height:
    1.7;
}

.footer-country {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    6px 8px;

  border:
    1px solid
    rgba(25,235,145,.08);

  border-radius:
    8px;

  color:
    var(--landing-muted);

  background:
    rgba(25,235,145,.03);

  font-size:
    .52rem;
}

.footer-column {

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}

.footer-column > span {

  margin-bottom:
    4px;

  color:
    var(--landing-muted-2);

  font-size:
    .5rem;

  font-weight:
    850;

  letter-spacing:
    .13em;
}

.footer-column a {

  color:
    var(--landing-muted);

  font-size:
    .58rem;

  transition:
    color .2s ease;
}

.footer-column a:hover {

  color:
    var(--landing-green);
}

.footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    17px;

  border-top:
    1px solid
    rgba(255,255,255,.045);

  color:
    var(--landing-muted-2);

  font-size:
    .52rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

  .landing-hero-grid {

    grid-template-columns:
      minmax(0,1fr)
      minmax(320px,.82fr);

    gap:
      25px;
  }

  .landing-hero-title {

    font-size:
      clamp(
        2.8rem,
        6.2vw,
        5.4rem
      );
  }

  .hero-wallet-card {

    width:
      340px;
  }

  .hero-task-card {

    width:
      205px;
  }

}


@media (max-width: 900px) {

  .landing-desktop-nav,
  .landing-nav-actions {

    display:
      none;
  }

  .landing-menu-btn {

    display:
      flex;
  }

  .landing-mobile-menu {

    display:
      block;

    max-height:
      0;

    overflow:
      hidden;

    transition:
      max-height .3s ease;
  }

  .landing-mobile-menu.open {

    max-height:
      500px;
  }

  .landing-mobile-menu-inner {

    display:
      flex;

    flex-direction:
      column;

    gap:
      2px;

    padding:
      10px 18px 18px;

    border-top:
      1px solid
      rgba(255,255,255,.05);
  }

  .landing-mobile-menu-inner > a {

    padding:
      11px;

    border-radius:
      9px;

    color:
      var(--landing-muted);

    font-size:
      .68rem;

    font-weight:
      700;
  }

  .landing-mobile-menu-inner > a:hover {

    background:
      rgba(255,255,255,.03);

    color:
      var(--landing-text);
  }

  .landing-mobile-divider {

    height:
      1px;

    margin:
      7px 0;

    background:
      rgba(255,255,255,.055);
  }

  .landing-mobile-menu-inner .mobile-login {

    color:
      var(--landing-text-soft);

    background:
      rgba(255,255,255,.025);
  }

  .landing-mobile-menu-inner .mobile-signup {

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    color:
      #03140c;

    background:
      var(--landing-green);

  }

  .landing-hero {

    padding-top:
      40px;
  }

  .landing-hero-grid {

    grid-template-columns:
      1fr;

    gap:
      20px;
  }

  .landing-hero-copy {

    text-align:
      center;
  }

  .hero-live-pill {

    justify-content:
      center;
  }

  .landing-hero-title {

    max-width:
      800px;

    margin-left:
      auto;

    margin-right:
      auto;
  }

  .landing-hero-subtitle {

    margin-left:
      auto;

    margin-right:
      auto;
  }

  .landing-hero-actions {

    justify-content:
      center;
  }

  .landing-trust-row {

    justify-content:
      center;
  }

  .landing-hero-visual {

    min-height:
      610px;

    margin-top:
      10px;
  }

  .how-grid {

    grid-template-columns:
      1fr;

  }

  .earn-layout {

    grid-template-columns:
      1fr;
  }

  .feature-bento {

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .feature-bento-card.large {

    grid-column:
      span 2;
  }

  .advertiser-card {

    grid-template-columns:
      1fr;
  }

  .security-grid {

    grid-template-columns:
      1fr;
  }

  .footer-main {

    grid-template-columns:
      1.3fr
      repeat(3,1fr);
  }

}


@media (max-width: 650px) {

  .landing-nav-inner {

    min-height:
      64px;
  }

  .landing-brand-mark {

    width:
      38px;

    height:
      38px;
  }

  .landing-brand-mark img {

    width:
      25px;

    height:
      25px;
  }

  .landing-brand-copy strong {

    font-size:
      .92rem;
  }

  .landing-hero {

    padding:
      30px 0 20px;
  }

  .landing-hero-title {

    margin-top:
      18px;

    font-size:
      clamp(
        2.65rem,
        15vw,
        4.2rem
      );

    line-height:
      .92;
  }

  .landing-hero-subtitle {

    font-size:
      .73rem;
  }

  .landing-primary-cta,
  .landing-secondary-cta {

    width:
      100%;
  }

  .landing-trust-row {

    gap:
      9px;
  }

  .trust-item {

    font-size:
      .51rem;
  }

  .landing-hero-visual {

    min-height:
      490px;
  }

  .hero-wallet-card {

    top:
      12px;

    width:
      290px;

    padding:
      17px;

    border-radius:
      18px;
  }

  .wallet-balance {

    font-size:
      1.65rem;
  }

  .wallet-chart {

    height:
      100px;
  }

  .hero-task-card {

    width:
      175px;

    padding:
      9px;

    border-radius:
      11px;
  }

  .hero-task-card-1 {

    right:
      -4px;

    top:
      156px;
  }

  .hero-task-card-2 {

    left:
      0;

    bottom:
      75px;
  }

  .hero-task-copy strong {

    font-size:
      .54rem;
  }

  .hero-task-copy span {

    font-size:
      .45rem;
  }

  .hero-task-card b {

    font-size:
      .59rem;
  }

  .hero-phone {

    bottom:
      0;
  }

  .phone-frame {

    width:
      205px;

    height:
      410px;

    border-radius:
      30px;
  }

  .phone-screen {

    border-radius:
      22px;
  }

  .hero-ring {

    width:
      300px;

    height:
      300px;
  }

  .hero-ring-2 {

    width:
      390px;

    height:
      390px;
  }

  .hero-metrics {

    grid-template-columns:
      repeat(2,1fr);

    margin-top:
      28px;
  }

  .hero-metric {

    border-bottom:
      1px solid
      rgba(255,255,255,.05);
  }

  .hero-metric:nth-child(2) {

    border-right:
      0;
  }

  .hero-metric:nth-child(3),
  .hero-metric:nth-child(4) {

    border-bottom:
      0;
  }

  .landing-section {

    padding:
      75px 0;
  }

  .landing-section-heading {

    margin-bottom:
      30px;
  }

  .landing-section-heading h2 {

    font-size:
      2.15rem;
  }

  .landing-section-heading p {

    font-size:
      .67rem;
  }

  .how-card {

    min-height:
      255px;
  }

  .feature-bento {

    grid-template-columns:
      1fr;
  }

  .feature-bento-card.large {

    grid-column:
      span 1;
  }

  .advertiser-card {

    padding:
      22px;
  }

  .advertiser-copy h2 {

    font-size:
      2.15rem;
  }

  .advertiser-points {

    grid-template-columns:
      1fr;
  }

  .advertiser-dashboard {

    padding:
      14px;
  }

  .final-cta-card {

    padding:
      45px 15px;
  }

  .final-cta-card h2 {

    font-size:
      2.35rem;
  }

  .final-cta-actions {

    width:
      100%;
  }

  .final-cta-actions .landing-primary-cta,
  .final-cta-actions .landing-secondary-cta {

    width:
      100%;
  }

  .footer-main {

    grid-template-columns:
      repeat(2,1fr);

    gap:
      25px;

  }

  .footer-brand-block {

    grid-column:
      span 2;
  }

  .footer-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;
  }

}


@media (prefers-reduced-motion: reduce) {

  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}