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

:root {
  /* ── Band palette: emerald interaction + graphite surfaces ── */
  --blue: #1FDC92;
  --accent-text: #087A56;
  --accent-ink: #06110D;
  --surface-dark: #08111B;
  --surface-mid: #111C29;
  --surface-gradient:
    radial-gradient(circle at 82% 10%, rgba(31, 220, 146, 0.15), transparent 34%),
    linear-gradient(145deg, var(--surface-dark) 0%, var(--surface-mid) 58%, #0A211B 100%);

  /* Darker — mix with black */
  --blue-dark:    color-mix(in srgb, var(--blue) 88%, #000);
  --blue-darker:  color-mix(in srgb, var(--blue) 72%, #000);

  /* Lighter — mix with white */
  --blue-light:   color-mix(in srgb, var(--blue) 68%, #fff);
  --blue-bg:      color-mix(in srgb, var(--blue)  7%, #fff);

  /* Semi-transparent */
  --blue-a16: color-mix(in srgb, var(--blue) 16%, transparent);
  --blue-a18: color-mix(in srgb, var(--blue) 18%, transparent);
  --blue-a20: color-mix(in srgb, var(--blue) 20%, transparent);
  --blue-a30: color-mix(in srgb, var(--blue) 30%, transparent);

  /* ── Other tokens ─────────────────────────────────────── */
  --text-dark: #0D0D1A;
  --text-mid:  #6B7280;
  --white:     #ffffff;
  --header-h:  76px;
  --banner-h:  180px;
  --font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

/* SVG inline attrs overridden by CSS so --blue drives them */
.logo__icon rect     { fill:   var(--blue); }
.hero__plus line     { stroke: var(--blue); }
.nav__dot            { background: var(--blue); }
.features__tag path  { stroke: var(--blue); }
.stats__tag path     { stroke: var(--blue); }
.hiw__tag path        { stroke: var(--blue); }
.mission__tag path    { stroke: var(--blue); }
.career__tag path     { stroke: var(--blue); }
.benefit__tag path    { stroke: var(--blue); }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ─── HEADER ───────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  /* Promotes the header to its own GPU compositor layer. Without this,
     position:fixed + the backdrop-filter blur below gets re-sampled
     continuously as content scrolls under it, which is what causes the
     header to visibly judder/jump on mobile while scrolling. */
  transform: translateZ(0);
  will-change: transform;
}

/* Blur + gradient on pseudo-element — sits behind all header children */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.32) 55%,
    rgba(255, 255, 255, 0)    100%
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, black 55%, transparent 100%);
  mask-image:         linear-gradient(to bottom, black 30%, black 55%, transparent 100%);
}

.header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  /* pushes whichever item is last (auth buttons on desktop, the burger
     on mobile once nav/auth drop out of flow) flush to the right edge */
  justify-content: space-between;
  gap: 40px;
}

/* ── Logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__icon { width: 32px; height: 32px; }
/* Cetera Advisors LLC wordmark */
.logo__img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 190px;
}
.logo__text {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.3px;
}

/* ── Nav container — rounded pill border ── */
.nav {
  /* was flex:1 (stretch to fill remaining width) — that left a big
     empty strip of pill background after "Contacts" once the auth
     buttons moved into their own .header__auth group. Sized to its
     own content instead; .header__inner's space-between now handles
     pushing .header__auth to the right edge. */
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--blue-a16);
  border-radius: 100px;
  padding: 4px;
  background: rgb(255 255 255);
}

/* ── Nav links ── */
.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-mid);
  border-radius: 100px;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}

/* dot — hidden by default */
.nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s, transform 0.18s;
}

/* Active state */
.nav__link--active {
  background: var(--white);
  color: var(--text-dark);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.nav__link--active .nav__dot {
  opacity: 1;
  transform: scale(1);
}

/* Hover state (not active) */
.nav__link:not(.nav__link--active):hover {
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.65);
}
.nav__link:not(.nav__link--active):hover .nav__dot {
  opacity: 1;
  transform: scale(1);
}

/* ── Get Template button ── */
.btn-template {
  flex-shrink: 0;
  padding: 11px 26px;
  background: var(--blue);
  color: var(--accent-ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 100px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-template:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--blue-a30);
}

/* ── Header auth pair (Log In + Register) ── */
.header__auth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.btn-login {
  padding: 11px 22px;
  border: 1.5px solid var(--blue-a30);
  color: var(--blue);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
}
.btn-login:hover {
  background: var(--blue);
  color: var(--accent-ink);
}
/* Login/Register inside the nav — mobile burger menu only */
.nav__link--auth { display: none; }

/* ─── HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 60vh;
  min-height: 500px;
  padding-top: 200px;
}

/* Background crosses */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Repeating tile at its native 197×193 size instead of one image
     stretched over the whole hero — crosses read much smaller (several
     tiles now fit across the section instead of one stretched tile).
     Explicit background-size would shrink the SVG's stroke-width along
     with it into sub-pixel/invisible territory, so this deliberately
     leaves size unset (auto = intrinsic) — same approach as
     .journey__crosses elsewhere on the site. */
  background-image: url('src/assets/BG_stipe.svg');
  background-repeat: repeat;
  opacity: 0.6;
}
.hero__bg-img {
  display: none;
}

/* ── Content 3-column grid ── */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
  height: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 40px;
}

/* ── LEFT ── */
.hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.hero__title {
  font-family: 'Poppins', var(--font);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-dark);
}
.hero__title-sub {
  display: block;
  margin-top: 6px;
  font-family: 'Poppins', var(--font);
  font-size: 52px;
  font-weight: 400;
  color: #B0B8CC;
  letter-spacing: -0.5px;
}
.hero__brand-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.hero__brand-line--continuation {
  padding-left: calc(1em + 10px);
}
.hero__dash {
  display: inline-block;
  margin-right: 10px;
  color: #CDD2DC;
}

/* Get Started button */
.btn-start {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1.5px solid #D1D5DB;
  border-radius: 100px;
  overflow: hidden;
  background: var(--white);
  transition: box-shadow 0.25s, transform 0.18s;
}
.btn-start:hover {
  box-shadow: 0 6px 24px var(--blue-a18);
  transform: translateY(-2px);
}
.btn-start__label {
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
}
.btn-start__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--blue);
  border-radius: 50%;
  margin: 2px;
  flex-shrink: 0;
}
.btn-start__arrow svg {
  width: 18px;
  height: 18px;
}
.btn-start__arrow svg * { stroke: var(--accent-ink); }

/* ── PHONE — absolute, floats in the center of hero ── */
.hero__phone-wrap {
  position: absolute;
  left: 55%;
  top: 70%;
  /* centering offset; JS animates #phone, not this wrap */
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
}

.hero__phone {
  width: 480px;
  display: block;
  filter:
    drop-shadow(0 40px 80px var(--blue-a20))
    drop-shadow(0 8px 28px rgba(0, 0, 0, 0.13));
  transform-origin: center center;
  will-change: transform;
}

/* ── RIGHT ── */
.hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
}

/* Reveal: title/CTA, phone and description/social-proof rise in staggered
   on page load — plays once (see [data-reveal-once] in main.js), not on
   every scroll in/out. Kept as an animation (not transition) for the same
   reason as .mf-card above: the phone's own scroll/mouse-parallax
   transform (set on #phone by main.js, not this wrapper) stays independent
   and unaffected. .hero__phone-wrap already carries a permanent
   translate(-50%,-50%) centering offset (see above) — a plain translateY
   reveal would silently overwrite it, so its hidden/shown states and
   keyframes bake that offset back in instead of just translateY. */
.hero__left,
.hero__right {
  opacity: 0;
  transform: translateY(28px);
}
.hero__phone-wrap {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 28px));
}
.hero__content.in-view .hero__left,
.hero__content.in-view .hero__right {
  opacity: 1;
  transform: translateY(0);
  animation: hero-rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
.hero__content.in-view .hero__phone-wrap {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: hero-rise-phone 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rise-phone {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 28px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.hero__content.in-view .hero__left       { animation-delay: 0.05s; }
.hero__content.in-view .hero__phone-wrap { animation-delay: 0.16s; }
.hero__content.in-view .hero__right      { animation-delay: 0.27s; }

.hero__plus svg {
  width: 30px;
  height: 30px;
}

.hero__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 270px;
}

.hero__social-proof {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hero__avatars {
  display: flex;
}
.hero__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--white);
  object-fit: cover;
  margin-left: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.hero__avatar:first-child { margin-left: 0; }

.hero__stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero__stats-num {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.hero__stats-text {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.5;
}

/* ─── PARTNERS SECTION ────────────────────────────────────── */
.partners {
  padding: 100px 40px 80px;
}

.partners__card {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--surface-gradient);
  border-radius: 28px;
  overflow: hidden;
  height: 60vh;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

/* ── Marquee — large text clipped at top ── */
.partners__marquee-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 0;
  /* fade edges left → opaque → opaque → right */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgb(0,0,0)    37.5%,
    rgb(0,0,0)    62.5%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgb(0,0,0)    37.5%,
    rgb(0,0,0)    62.5%,
    rgba(0,0,0,0) 100%
  );
}

.partners__marquee {
  display: flex;
  width: max-content;
  animation: partners-scroll 100s linear infinite;
  margin-top: 24px;
}

.partners__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
  white-space: nowrap;
  flex-shrink: 0;
}

.partners__marquee-track > span {
  font-size: clamp(70px, 9vw, 115px);
  font-weight: 800;
  color: rgb(255 255 255 / 83%);
  letter-spacing: 6px;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.pmdot {
  color: rgba(255, 255, 255, 0.28) !important;
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Divider ── */
.partners__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 48px;
  flex-shrink: 0;
}

/* ── Content: text + logos ── */
.partners__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 48px;
}

.partners__desc {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 1.55;
  letter-spacing: -0.2px;
}

/* ── Logo row ── */
.partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}

.plogo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: color 0.2s;
}
.plogo:hover {
  color: rgba(255, 255, 255, 0.9);
}
.plogo svg {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Real brand marks (index.html) — flattened to a white silhouette so
   each logo's own colors don't clash with the blue card, same trick
   as the app-store icon in the Features "Get the app" card. */
.plogo img {
  height: 32px;
  width: 110px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.plogo:hover img {
  opacity: 1;
}

.plogo--bold span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ─── ABOUT SECTION ───────────────────────────────────────── */
.about {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 40px;
}

/* Grid background — 128×88 tile, lines break before intersections */
.about__bg {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cline x1='25' y1='0' x2='75' y2='0' stroke='black' stroke-opacity='0.10' stroke-width='1'/%3E%3Cline x1='0' y1='25' x2='0' y2='75' stroke='black' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

/* Center text */
.about__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.about__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 400;
  line-height: 1.18;
  color: var(--blue);
  letter-spacing: -0.5px;
}

.about__subtitle {
  display: flex;
  align-items: center;
  gap: 20px;
}

.about__line {
  flex-shrink: 0;
  width: 64px;
  height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
}

.about__subtitle p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ── Floating image cards ── */
.about__card {
  position: absolute;
  z-index: 3;
  border-radius: 80px;
  overflow: hidden;
}

.about__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Top-left — pig, lavender */
.about__card--tl {
  background: #EAEBFF;
  top: 14%;
  left: 11%;
  width: 165px;
  height: 105px;
}

/* Top-right — clock, sky blue */
.about__card--tr {
  background: #E2F1FF;
  top: 22%;
  right: 7%;
  width: 158px;
  height: 105px;
}

/* Bottom-left — coins, light */
.about__card--bl {
  background: #F0F0F5;
  bottom: 20%;
  left: 18%;
  width: 150px;
  height: 102px;
}

/* Bottom-right — boxes, pink */
.about__card--br {
  background: #F4EEFF;
  bottom: 8%;
  right: 9%;
  width: 177px;
  height: 108px;
}

/* ─── FEATURES SECTION ────────────────────────────────────── */
.features {
  padding: 110px 40px 60px;
}

.features__head {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.features__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}

.features__tag svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.features__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--text-dark);
}

.features__title-accent {
  color: var(--blue);
}

/* ── Feature cards grid ── */
.features__grid {
  max-width: 1200px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.fcard {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  background: var(--surface-gradient);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 24px 60px rgba(3, 7, 10, 0.12);
}
.fcard--goals {
  background: var(--surface-gradient);
}

/* Crosses decoration — reuses hero BG tile (BG_stipe.svg) */
.fcard__crosses {
  position: absolute;
  width: 390px;
  height: 310px;
  background: url('src/assets/BG_stipe.svg');
  opacity: 0.06;
  filter: brightness(0) invert(1);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image:         radial-gradient(closest-side, #000 45%, transparent);
}
.fcard__crosses--br { right: -50px; bottom: -40px; }
.fcard__crosses--tr { right: -50px; top:    -40px; }

.fcard__title {
  font-family: 'Poppins', var(--font);
  font-size: 25px;
  font-weight: 600;
  color: #F7FAFC;
  letter-spacing: -0.3px;
}
.fcard__desc {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #9AA6B5;
  max-width: 380px;
}

/* ── Left card: card mockup + orbiting icon bubbles ── */
.fcard__visual--orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 470;
  margin-bottom: 28px;
}

.orbit__card {
  position: absolute;
  left: 50%;
  top: 50%;
  /* horizontal until revealed; .in-view spins it to its resting tilt */
  transform: translate(-50%, -52%) rotate(0deg);
  width: min(62%, 360px);
  z-index: 2;
  filter: drop-shadow(0 24px 44px var(--blue-a20));
}
.fcard--expense.in-view .orbit__card {
  transform: translate(-50%, -52%) rotate(-8deg);
  transition: transform 1.1s cubic-bezier(0.34, 1.3, 0.4, 1);
}
/* Hover straightens the card back; snappier than the reveal spin */
.fcard--expense.in-view .orbit__card:hover {
  transform: translate(-50%, -52%) rotate(0deg);
  transition: transform 0.45s ease;
}

.orbit__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.orbit__lines path {
  stroke: var(--blue-a30);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* Transitions live only on .in-view → removing the class resets instantly,
   so the whole staggered sequence replays on every viewport entry */
.fcard--expense.in-view .orbit__lines path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s ease;
}
.fcard--expense.in-view .orbit__lines path:nth-child(1) { transition-delay: 0.15s; }
.fcard--expense.in-view .orbit__lines path:nth-child(2) { transition-delay: 0.32s; }
.fcard--expense.in-view .orbit__lines path:nth-child(3) { transition-delay: 0.49s; }
.fcard--expense.in-view .orbit__lines path:nth-child(4) { transition-delay: 0.66s; }
.fcard--expense.in-view .orbit__lines path:nth-child(5) { transition-delay: 0.83s; }
.fcard--expense.in-view .orbit__lines path:nth-child(6) { transition-delay: 1.00s; }

.orbit__bubble {
  position: absolute;
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 6px 18px var(--blue-a16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
}
.orbit__bubble svg { width: 22px; height: 22px; }

/* Positions mirror the line endpoints in the 560×470 viewBox */
.orbit__bubble--plane { left: 50%;   top: 13.2%; }
.orbit__bubble--cart  { left: 17%;   top: 20.2%; }
.orbit__bubble--ccard { left: 82.5%; top: 21.3%; }
.orbit__bubble--chart { left: 14%;   top: 75.5%; }
.orbit__bubble--globe { left: 50%;   top: 86.2%; }
.orbit__bubble--lock  { left: 83.6%; top: 74%;   }

.fcard--expense.in-view .orbit__bubble {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.75s ease, transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.fcard--expense.in-view .orbit__bubble--plane { transition-delay: 0.65s; }
.fcard--expense.in-view .orbit__bubble--cart  { transition-delay: 0.82s; }
.fcard--expense.in-view .orbit__bubble--ccard { transition-delay: 0.99s; }
.fcard--expense.in-view .orbit__bubble--chart { transition-delay: 1.16s; }
.fcard--expense.in-view .orbit__bubble--globe { transition-delay: 1.33s; }
.fcard--expense.in-view .orbit__bubble--lock  { transition-delay: 1.50s; }

/* ── Right card: stacked savings-goal cards ── */
.fcard__visual--goals {
  margin-top: auto;
  margin-bottom: 40px;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.goal {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 12px 32px var(--blue-a16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Cascade: each card narrower than the one above */
.goal--1 { position: relative; z-index: 3; }
.goal--2 { width: 86%; margin-top: -30px; z-index: 2; }
.goal--3 {
  width: 72%;
  height: 96px;
  margin-top: -46px;
  z-index: 1;
  padding: 0;
  background: color-mix(in srgb, var(--blue) 30%, #fff);
  box-shadow: none;
}

.goal__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 42%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
}
.goal__icon svg { width: 26px; height: 26px; }

.goal__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.goal__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
}
.goal__date {
  font-size: 12px;
  color: var(--text-mid);
}

.goal__nums {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.goal__sum {
  font-size: 20px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: -0.3px;
}
.goal__delta {
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--blue) 40%, var(--text-mid));
}

/* Goal cards ride up on reveal. Reveal is an animation (not transition)
   so the .goal hover transition stays snappy in both directions;
   removing .in-view still resets instantly for a full replay */
.fcard--goals .goal {
  opacity: 0;
  transform: translateY(46px);
}
.fcard--goals.in-view .goal {
  opacity: 1;
  transform: translateY(0);
  animation: goal-rise 1.05s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
.fcard--goals.in-view .goal--1 { animation-delay: 0.10s; }
.fcard--goals.in-view .goal--2 { animation-delay: 0.30s; }
.fcard--goals.in-view .goal--3 { animation-delay: 0.50s; }

@keyframes goal-rise {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover: slight lift + stronger blue glow */
.fcard--goals.in-view .goal:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px var(--blue-a30);
}
.fcard--goals.in-view .goal--3:hover {
  box-shadow: 0 14px 34px var(--blue-a20);
}

/* ── Features row 2 ── */
.features__grid--row2 {
  grid-template-columns: 1.6fr 1fr;
  margin-top: 24px;
}

/* Card 3: Financial Analytics — text left, phone + report right */
.fcard--analytics {
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  min-height: 460px;
}
.fcard__crosses--bl { left: -50px; bottom: -40px; }

.fcard__text--analytics {
  flex: 0 0 38%;
  align-self: flex-start;
  padding-top: 16px;
}
.fcard__text--analytics .fcard__desc { max-width: 250px; }

.fcard__visual--analytics {
  position: relative;
  flex: 1;
}

.analytics__phone {
  position: absolute;
  right: 5%;
  top: 50%;
  height: 96%;
  z-index: 2;
  filter: drop-shadow(0 20px 36px var(--blue-a20));
  opacity: 0;
  transform: translateY(calc(-50% + 40px)) rotate(8deg);
  transition: transform 0.45s ease;
}
/* Reveal is an animation so the hover transition stays snappy */
.fcard--analytics.in-view .analytics__phone {
  opacity: 1;
  transform: translateY(-50%) rotate(8deg);
  animation: phone-rise 1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s backwards;
}
@keyframes phone-rise {
  from { opacity: 0; transform: translateY(calc(-50% + 40px)) rotate(8deg); }
  to   { opacity: 1; transform: translateY(-50%) rotate(8deg); }
}
/* Hover: swings ~10° to the left */
.fcard--analytics.in-view .analytics__phone:hover {
  transform: translateY(-50%) rotate(-2deg);
}

/* Report Expense card — dark Band styling, chart PNG whitened by filter */
.analytics__report {
  position: absolute;
  left: 20%;
  bottom: 5%;
  width: 74%;
  z-index: 3;
  padding: 20px 22px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(165deg, #1a212b 0%, #090d12 100%);
  box-shadow: 0 24px 50px rgba(3, 8, 13, 0.5), 0 0 36px rgba(31, 220, 146, 0.12);
  opacity: 0;
  transform: translateY(60px) rotate(-10deg);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.fcard--analytics.in-view .analytics__report {
  opacity: 1;
  transform: translateY(0) rotate(-10deg);
  animation: report-rise 1.05s cubic-bezier(0.22, 0.9, 0.3, 1) 0.4s backwards;
}
@keyframes report-rise {
  from { opacity: 0; transform: translateY(60px) rotate(-10deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-10deg); }
}
/* Hover: swings ~10° to the right + stronger glow */
.fcard--analytics.in-view .analytics__report:hover {
  transform: translateY(0) rotate(0deg);
  box-shadow: 0 30px 62px rgba(3, 8, 13, 0.55), 0 10px 32px rgba(31, 220, 146, 0.18);
}

.analytics__report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.analytics__report-title {
  font-family: 'Poppins', var(--font);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.2px;
}
.analytics__report-toggle {
  display: flex;
  gap: 6px;
}
.rtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  border-radius: 100px;
  background: #27313d;
  color: #aeb9c8;
}
.rtoggle--active {
  background: #1fdc92;
  color: #07110d;
}
.rtoggle svg { width: 14px; height: 14px; }

.analytics__chart {
  display: block;
  width: 100%;
  margin-top: 14px;
  /* whatever color the source PNG is → white */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Card 4: Get the app — Band gradient surface, white mark */
.fcard--app {
  background: var(--surface-gradient);
}

/* Crosses whitened for the blue card */
.fcard__crosses--light {
  filter: brightness(0) invert(1);
  opacity: 0.06;
}

.app__mark {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 88px;
  z-index: 2;
  /* whatever color the source PNG is → white */
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: scale(0.55);
}
.fcard--app.in-view .app__mark {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.34, 1.4, 0.5, 1);
  transition-delay: 0.2s;
}

.app__bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  opacity: 0;
  transform: translateY(24px);
}
.fcard--app.in-view .app__bottom {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: 0.45s;
}

.app__title {
  font-family: 'Poppins', var(--font);
  font-size: 34px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.3px;
}

.app__btn {
  display: inline-block;
  padding: 12px 26px;
  background: var(--white);
  color: var(--blue);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.app__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: var(--blue-bg);
}

/* ── More additional features — 3+2 wrap grid ── */
.more-features {
  margin-top: 90px;
  text-align: center;
}

.more-features__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: -0.3px;
  margin-bottom: 44px;
}

.more-features__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  /* independent per-line centering: 3 cards fill row 1,
     the remaining 2 center themselves on row 2 */
  justify-content: center;
  gap: 24px;
}

.mf-card {
  flex: 0 1 330px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 13px;
  border-radius: 20px;
  text-align: left;
  /* the ONLY place global --blue is used in this block — icon accents below are a fixed palette */
  background: color-mix(in srgb, var(--blue) 5%, #fff);
  opacity: 0;
  transform: translateY(32px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mf-card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}
.mf-card__icon svg { width: 24px; height: 24px; }

/* Fixed accent palette — deliberately NOT derived from var(--blue) */
.mf-card__icon--blue   { background: #E1E7FF; color: #4C6FFF; }
.mf-card__icon--indigo { background: #E3E6FF; color: #5B4FE9; }
.mf-card__icon--cyan   { background: #DFF4FF; color: #0EA5E9; }
.mf-card__icon--pink   { background: #FCE3F0; color: #E23F8E; }
.mf-card__icon--green  { background: #DFF6E4; color: #22A559; }

.mf-card__title {
  font-family: 'Poppins', var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.mf-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mid);
}

/* Reveal: cards ride up staggered; kept as an animation (not transition)
   so the hover transition above stays snappy and replays each viewport entry */
.more-features.in-view .mf-card {
  opacity: 1;
  transform: translateY(0);
  animation: mf-rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes mf-rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.more-features.in-view .mf-card:nth-child(1) { animation-delay: 0.05s; }
.more-features.in-view .mf-card:nth-child(2) { animation-delay: 0.13s; }
.more-features.in-view .mf-card:nth-child(3) { animation-delay: 0.21s; }
.more-features.in-view .mf-card:nth-child(4) { animation-delay: 0.29s; }
.more-features.in-view .mf-card:nth-child(5) { animation-delay: 0.37s; }

.more-features.in-view .mf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px var(--blue-a16);
}

/* ─── TRADING / INVESTING SCROLL SECTION ─────────────────────
   Big ghost words sit behind the phone and slide further out
   to either side as the section scrolls through the viewport
   (driven by main.js, same rAF+lerp pattern as the hero phone). */
.trade-scroll {
  position: relative;
  min-height: 640px;
  padding: 120px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.trade-scroll__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.trade-scroll__word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Poppins', var(--font);
  font-size: clamp(64px, 11vw, 160px);
  font-weight: 800;
  letter-spacing: 4px;
  color: color-mix(in srgb, var(--blue) 14%, #fff);
  white-space: nowrap;
  user-select: none;
}

/* ── CSS phone chrome around the raw mobile-app screenshot ── */
.tw-phone {
  position: relative;
  z-index: 2;
  width: min(80vw, 300px);
  padding: 14px 14px 20px;
  border-radius: 50px;
  background: linear-gradient(155deg, #2c2c34 0%, #101014 100%);
  box-shadow: 0 44px 80px rgba(15, 15, 30, 0.32), 0 12px 30px rgba(15, 15, 30, 0.22);
}
.tw-phone__screen {
  display: block;
  width: 100%;
  border-radius: 36px;
}
.tw-phone__notch {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 24px;
  background: #101014;
  border-radius: 0 0 16px 16px;
}
.tw-phone__btn {
  position: absolute;
  background: #17171c;
}
.tw-phone__btn--power {
  right: -3px;
  top: 128px;
  width: 3px;
  height: 64px;
  border-radius: 0 3px 3px 0;
}
.tw-phone__btn--vol1 {
  left: -3px;
  top: 106px;
  width: 3px;
  height: 36px;
  border-radius: 3px 0 0 3px;
}
.tw-phone__btn--vol2 {
  left: -3px;
  top: 152px;
  width: 3px;
  height: 36px;
  border-radius: 3px 0 0 3px;
}

/* ─── PRICING SECTION ─────────────────────────────────────── */
.pricing {
  padding: 40px 40px 130px;
}

.pricing__head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}

.pricing__subtitle {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.65;
}

.pricing__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}
/* 6-tier layout (Account Types page) — wraps to 2 rows of 3, needs a bit
   more width and less padding per card to stay comfortable */
.pricing__grid--six {
  max-width: 1200px;
  gap: 20px;
}
.pricing__grid--six .pricing-card { padding: 30px 26px; gap: 22px; }

.pricing-card {
  background: var(--white);
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pricing-card--featured {
  position: relative;
  border-color: var(--blue);
  box-shadow: 0 8px 40px var(--blue-a18);
}

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-card__plan {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.pricing-card__price-num {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--text-dark);
}
.pricing-card__price-per {
  font-size: 14px;
  color: var(--text-mid);
  white-space: nowrap;
}

.pricing-card__desc {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-card__feature {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  color: var(--text-dark);
}

/* Circle badge; the check itself is ::after drawn via mask,
   so its color comes from var(--blue) — no hex in the data-URI */
.pricing-card__feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-bg);
  border: 1.5px solid var(--blue-a30);
}
.pricing-card__feature::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.pricing-card__btn {
  display: block;
  text-align: center;
  padding: 13px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.pricing-card__btn--outline {
  background: var(--white);
  border: 1.5px solid #D1D5DB;
  color: var(--text-dark);
}
.pricing-card__btn--outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.pricing-card__btn--filled {
  background: var(--blue);
  border: 1.5px solid var(--blue);
  color: var(--accent-ink);
}
.pricing-card__btn--filled:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  box-shadow: 0 6px 20px var(--blue-a30);
  transform: translateY(-1px);
}

/* ─── BENEFIT — STACKING CARDS SECTION ────────────────────────
   Each card sits in a sticky wrapper (top: 90px, height: 100vh) so they
   all pin at the same spot and the next one slides over the previous.
   JS (main.js) writes the scroll progress of the NEXT card into --stack-p
   (0→1, smoothstep) on the PREVIOUS card; everything visual below derives
   from that one variable. The last card gets no --stack-p updates. */
.benefit {
  padding: 100px 0 40px;
}

.benefit__head {
  max-width: 700px;
  margin: 0 auto 56px;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.benefit__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.benefit__tag svg { width: 17px; height: 17px; }

.benefit__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.benefit__title-accent { color: var(--blue); }

.benefit__sticky {
  position: sticky;
  top: 90px;
  height: 100vh;
  padding: 0 40px;
}

/* The final card does not need a full viewport of trailing scroll space. */
.benefit__sticky:last-child {
  height: auto;
}

.bcard {
  --stack-p: 0;
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 560px;
  padding: 48px;
  border-radius: 32px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--blue) 4%, #fff) 0%,
    color-mix(in srgb, var(--blue) 10%, #fff) 100%
  );
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  will-change: transform, filter;
  filter: blur(calc(var(--stack-p) * 6px));
  transform: translateY(calc(var(--stack-p) * -14px)) scale(calc(1 - var(--stack-p) * 0.06));
  opacity: calc(1 - var(--stack-p) * 0.15);
}
/* White veil that fades in as the card is covered */
.bcard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--white);
  opacity: calc(var(--stack-p) * 0.75);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bcard {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .bcard::after { display: none; }
}

/* ── Visual square (left) ── */
.bcard__visual {
  align-self: stretch;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(160deg, color-mix(in srgb, var(--blue) 62%, #fff) 0%, color-mix(in srgb, var(--blue) 28%, #fff) 100%);
  background-size: 54px 54px, 54px 54px, cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  min-height: 420px;
}

/* ── Text column (right) ── */
.bcard__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 520px;
}
.bcard__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue);
}
.bcard__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.bcard__heading {
  font-family: 'Poppins', var(--font);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-dark);
  letter-spacing: -0.3px;
}
.bcard__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
}
.bcard__checks {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bcard__check {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: var(--text-dark);
}
.bcard__check-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, #fff);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bcard__check-ic svg { width: 14px; height: 14px; }

/* ── Mini visual 1: Activity gauge card ── */
.activity-card {
  width: min(100%, 300px);
  background: var(--white);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 24px 50px rgba(15, 25, 70, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.activity-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.activity-card__title {
  font-family: 'Poppins', var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
}
.activity-card__period {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 100px;
  font-size: 11px;
  color: var(--text-mid);
}
.activity-card__period svg { width: 10px; height: 10px; }

.activity-card__gauge { position: relative; }
.activity-card__gauge svg { display: block; width: 100%; }
.activity-card__pct {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: 'Poppins', var(--font);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
}

.activity-card__legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.activity-card__leg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}
.activity-card__leg > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dark);
}
.activity-card__leg i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.activity-card__leg b {
  font-weight: 600;
  color: var(--text-dark);
}

.activity-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  background: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
}

/* ── Mini visual 2: bar chart card ── */
.chart-card {
  width: min(100%, 340px);
  background: var(--white);
  border-radius: 20px;
  padding: 22px 18px 14px;
  box-shadow: 0 24px 50px rgba(15, 25, 70, 0.18);
}
.chart-card__title {
  display: block;
  font-family: 'Poppins', var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.chart-card__chart { display: block; width: 100%; }

/* ── Mini visual 3: fingerprint ── */
.secure-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.secure-visual__ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--blue) 0%, var(--blue-dark) 100%);
  box-shadow: 0 24px 50px rgba(15, 25, 70, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.secure-visual__inner {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.secure-visual__inner svg { width: 58px; height: 58px; }

/* ── Platform page: 2 standalone .bcard's, reused design without the
   sticky-stack scroll effect (--stack-p stays at its default 0, so the
   card just renders in its resting/static appearance). Reveals once,
   same fade+rise pattern as everywhere else on the site. ── */
.platform-benefit__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
/* 30% shorter than the index.html Benefit cards (560px/420px base) —
   scoped to this page only, the sticky-stack cards elsewhere are untouched */
.platform-benefit__grid .bcard         { min-height: 392px; }
.platform-benefit__grid .bcard__visual { min-height: 294px; }
.platform-benefit__grid .bcard {
  opacity: 0;
  transform: translateY(32px);
}
.platform-benefit__grid.in-view .bcard {
  opacity: 1;
  animation: bcard-rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes bcard-rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.platform-benefit__grid.in-view .bcard:nth-child(2) { animation-delay: 0.12s; }

/* Mirrored card: visual on the right, text on the left */
.bcard--reverse { grid-template-columns: 1.1fr 0.9fr; }
.bcard--reverse .bcard__visual { order: 2; }
.bcard--reverse .bcard__text   { order: 1; }

/* ── Benefit responsive (dedicated 800px point per the spec) ── */
@media (max-width: 800px) {
  .benefit { padding: 70px 0 30px; }
  .benefit__head { margin-bottom: 36px; }
  .benefit__sticky {
    top: 70px;
    height: 100svh;
    padding: 0 16px;
  }
  .bcard {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
    min-height: 0;
    max-height: calc(100svh - 90px);
  }
  .bcard__visual { min-height: 0; padding: 22px; }
  .bcard__heading { font-size: 22px; }
  .bcard__desc { font-size: 14px; }
  .bcard__check { font-size: 14px; }
  .bcard__checks { margin-top: 4px; gap: 10px; }
  .bcard__check-ic { width: 26px; height: 26px; }
  .activity-card { padding: 16px; gap: 10px; }
  .chart-card { padding: 16px 12px 10px; }
  .secure-visual__ring  { width: 130px; height: 130px; }
  .secure-visual__inner { width: 92px; height: 92px; }
  .secure-visual__inner svg { width: 44px; height: 44px; }
  .platform-benefit__grid { padding: 0 16px; gap: 22px; }
}

/* ─── STATISTICS SECTION ──────────────────────────────────── */
.stats {
  padding: 100px 40px;
}

.stats__head {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.stats__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.stats__tag svg { width: 17px; height: 17px; }

.stats__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.stats__title-accent { color: var(--blue); }

.stats__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.stat-pill {
  min-height: 144px;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Content pills: icon → number → description in one row */
.stat-pill--soft,
.stat-pill--featured {
  flex-direction: row;
  gap: 14px;
  text-align: left;
}

.stat-pill--outline {
  background: transparent;
  border: 1.5px solid #E7E9F0;
  flex-direction: row;
  gap: 5%;
}
.stat-pill--soft {
  background: color-mix(in srgb, var(--blue) 4%, #fff);
}
.stat-pill--featured {
  background: var(--surface-gradient);
  color: var(--white);
}

.stat-pill__cross {
  display: flex;
  color: var(--blue-a30);
  /* 5× the original 22px, but capped by pill width so 3 always fit */
  width: min(110px, 30%);
}
.stat-pill__cross svg { width: 100%; height: auto; }

.stat-pill__plus svg {
  width: 32px;
  height: 32px;
  color: var(--blue-a30);
}

.stat-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* matches the 64px digit size */
  width: 64px;
  height: 64px;
  color: inherit;
}
.stat-pill__icon svg { width: 100%; height: 100%; }
/* inline stroke-width 2.2 is drawn for a 30px box — too heavy at 64px */
.stat-pill__icon path { stroke-width: 1.6; }

.stat-pill__num {
  font-family: 'Poppins', var(--font);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--blue);
}
.stat-pill--featured .stat-pill__num { color: var(--white); }

.stat-pill__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 220px;
}
.stat-pill--soft .stat-pill__desc,
.stat-pill--featured .stat-pill__desc {
  flex: 0 1 auto;
  min-width: 0;
}
.stat-pill--featured .stat-pill__desc { color: rgba(255, 255, 255, 0.85); }

/* Reveal: pills rise staggered, replays each viewport entry */
.stats__grid.in-view .stat-pill {
  opacity: 1;
  transform: translateY(0);
  animation: stat-rise 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes stat-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stats__grid.in-view .stat-pill:nth-child(1) { animation-delay: 0.03s; }
.stats__grid.in-view .stat-pill:nth-child(2) { animation-delay: 0.10s; }
.stats__grid.in-view .stat-pill:nth-child(3) { animation-delay: 0.17s; }
.stats__grid.in-view .stat-pill:nth-child(4) { animation-delay: 0.24s; }
.stats__grid.in-view .stat-pill:nth-child(5) { animation-delay: 0.31s; }
.stats__grid.in-view .stat-pill:nth-child(6) { animation-delay: 0.38s; }

.stats__grid.in-view .stat-pill:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px var(--blue-a16);
}

/* ─── PLATFORM PREVIEW (Platform page) ──────────────────────
   Same graphite Band surface as the CTA banner; screenshot
   floats top-right, bleeding slightly outside the card corner. */
.platform-preview {
  padding: 20px 40px 100px;
}
.platform-preview__card {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 380px;
  border-radius: 40px;
  padding: 64px 60px;
  background: var(--surface-gradient);
  border: 1.5px solid var(--blue-a30);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s ease;
}
.platform-preview__card.in-view {
  opacity: 1;
  transform: translateY(0);
  animation: cta-rise 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
.platform-preview__text {
  position: relative;
  z-index: 1;
  max-width: 440px;
}
.platform-preview__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--white);
  margin-bottom: 18px;
}
.platform-preview__desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 400px;
}
.platform-preview__img {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 400px;
  max-width: 44%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(10, 20, 60, 0.35);
}

/* ─── APP CTA BANNER ──────────────────────────────────────── */
.cta-app {
  padding: 20px 40px 100px;
}

.cta-app__card {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 620px;
  border-radius: 40px;
  background: var(--surface-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s ease;
}
.cta-app__card.in-view {
  opacity: 1;
  transform: translateY(0);
  animation: cta-rise 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes cta-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cta-app__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

.cta-app__text {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 60px 24px;
}

.cta-app__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  letter-spacing: -0.3px;
}
.cta-app__desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 420px;
}

.cta-app__stores {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
/* ── Decorative tilted mockup cards ── */
.cta-app__mock {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.cta-app__mock--left  { left: 4%; top: 14%; }
.cta-app__mock--right { right: 4%; top: 40%; }

.mockcard {
  width: 260px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(220,228,255,0.88));
  box-shadow: 0 30px 60px rgba(10, 20, 60, 0.3);
  transform: rotate(-9deg);
  color: var(--text-dark);
}
.mockcard--right {
  transform: rotate(8deg);
}

.mockcard__cols {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.mockcard__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mockcard__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockcard__icon svg { width: 15px; height: 15px; }
.mockcard__icon--in  { background: #E1E7FF; color: #4C6FFF; }
.mockcard__icon--out { background: #FCE3F0; color: #E23F8E; }

.mockcard__label {
  font-size: 12px;
  color: var(--text-mid);
}
.mockcard__num {
  font-family: 'Poppins', var(--font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.mockcard__num--sm { font-size: 16px; }

.mockcard__chart {
  width: 100%;
  height: 56px;
  color: #4C6FFF;
}

.mockcard__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.mockcard__bar {
  width: 100%;
  height: 8px;
  border-radius: 100px;
  background: #E5E9F5;
  overflow: hidden;
  margin-bottom: 10px;
}
.mockcard__bar-fill {
  display: block;
  width: 62%;
  height: 100%;
  background: var(--blue);
  border-radius: 100px;
}
.mockcard__between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.mockcard__sub {
  font-size: 12px;
  color: var(--text-mid);
}
.mockcard__divider {
  height: 1px;
  background: #E5E9F5;
  margin-bottom: 14px;
}
.mockcard__tx {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.mockcard__tx--fade { opacity: 0.4; margin-bottom: 0; }
.mockcard__tx-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.mockcard__tx-icon--paypal    { background: #2563EB; }
.mockcard__tx-icon--starbucks { background: #16A34A; }
.mockcard__tx-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockcard__tx-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.mockcard__tx-mail {
  font-size: 11px;
  color: var(--text-mid);
}
.mockcard__tx-amt {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── HOW IT WORKS SECTION ────────────────────────────────── */
.how-it-works {
  padding: 100px 40px;
  background: var(--blue-bg);
  border-radius: 48px;
  max-width: 1320px;
  margin: 0 auto 100px;
}

.hiw__head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hiw__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.hiw__tag svg { width: 17px; height: 17px; }

.hiw__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-dark);
}
.hiw__title-accent { color: var(--blue); }

.hiw__body {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Phone with swappable screens (frame PNG has a transparent screen hole) ── */
.hiw-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 862 / 1772;
}
.hiw-phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.hiw-phone__screen {
  position: absolute;
  top: 2%;
  bottom: 2%;
  left: 4.4%;
  right: 4.6%;
  border-radius: 7% / 3.5%;
  overflow: hidden;
  background: #050b13;
}

.hiw-screen {
  position: absolute;
  inset: 0;
  padding: 13% 9% 6%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s ease;
}
.hiw-screen.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.hiw-status {
  position: absolute;
  top: 4%;
  left: 9%;
  right: 9%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
}

.hiw-screen--1 {
  overflow: hidden;
  padding: 13% 5.5% 7%;
  background:
    radial-gradient(circle at 50% 18%, rgba(25, 43, 73, 0.28), transparent 38%),
    linear-gradient(180deg, #0f1726 0%, #04070e 100%);
  color: #eef0f5;
}
.hiw-screen--1::before {
  content: '';
  position: absolute;
  inset: auto -35% -18% -35%;
  height: 45%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.35), transparent 70%);
  pointer-events: none;
}
.hiw-screen--1 > * { z-index: 1; }
.hiw-screen--1 .hiw-status { color: #f3f4f7; }

.hiw-login__card {
  width: 100%;
  margin-top: 26%;
  padding: 13px 12px 14px;
  border-radius: 12px;
  background: #15171d;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.hiw-login__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 5px 15px;
  color: #e6e8ed;
  font-size: 13px;
  font-weight: 600;
}
.hiw-login__heading svg {
  width: 18px;
  height: 18px;
  color: #90949d;
}
.hiw-login__panel {
  padding: 11px 9px 10px;
  border-radius: 11px;
  background: #1e2129;
  margin-bottom: 12px;
}
.hiw-login__field {
  margin-bottom: 11px;
}
.hiw-login__label {
  display: block;
  margin: 0 0 5px;
  color: #b7bac2;
  font-size: 8.5px;
  font-weight: 600;
}
.hiw-login__label b {
  color: #ff5d67;
  font-weight: 700;
}
.hiw-login__input {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  background: #e5ecfa;
  color: #10141c;
  font-size: 11px;
  line-height: 1.2;
}
.hiw-login__input--placeholder {
  color: #747b89;
}
.hiw-login__input--password svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #fff;
}
.hiw-login__recovery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #afb2ba;
  font-size: 8.5px;
}
.hiw-login__recovery strong,
.hiw-login__registration strong {
  color: #25e18e;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hiw-login__btn {
  width: 100%;
  min-height: 31px;
  border: 0;
  border-radius: 6px;
  background: #e7e7e9;
  color: #101116;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.hiw-login__registration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  color: #afb2ba;
  font-size: 8.5px;
}
.hiw-login__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  color: #8f929a;
  font-size: 8px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hiw-screen--2,
.hiw-screen--3 {
  overflow: hidden;
  padding: 13% 5.5% 4.5%;
  background:
    radial-gradient(circle at 82% 8%, rgba(31, 220, 146, 0.09), transparent 26%),
    linear-gradient(160deg, #0d1926 0%, #07111c 54%, #050b13 100%);
  color: #f4f7fb;
}
.hiw-screen--2 > *,
.hiw-screen--3 > * { position: relative; z-index: 1; }
.hiw-screen--2 .hiw-status,
.hiw-screen--3 .hiw-status { color: #f4f7fb; }

.hiw-app__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 29px;
  margin: 7px 0 10px;
}
.hiw-app__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
}
.hiw-app__brand > span {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #20df95;
  color: #07110d;
  font-size: 12px;
  font-weight: 800;
}
.hiw-app__wallet {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 7px;
  border: 1px solid rgba(154, 166, 181, 0.22);
  border-radius: 10px;
  color: #e8edf4;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.hiw-app__wallet svg { width: 12px; height: 12px; color: #a7b5c8; }
.hiw-app__live {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #42eaa7;
  font-size: 9px;
  font-weight: 600;
}
.hiw-app__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #20df95;
  box-shadow: 0 0 10px rgba(32, 223, 149, 0.8);
}
.hiw-app__heading { margin-bottom: 9px; }
.hiw-app__heading h3 {
  margin: 0;
  color: #f7f9fc;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}
.hiw-app__heading p {
  margin: 3px 0 0;
  color: #8997aa;
  font-size: 8.5px;
}

.hiw-funding__balance,
.hiw-positions__summary,
.hiw-positions__chart,
.hiw-funding__method,
.hiw-position__row {
  border: 1px solid rgba(142, 160, 181, 0.16);
  background: linear-gradient(145deg, rgba(24, 37, 51, 0.96), rgba(10, 21, 32, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.hiw-funding__balance {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 11px;
  margin-bottom: 8px;
}
.hiw-funding__balance > span { color: #91a0b4; font-size: 8px; }
.hiw-funding__balance strong { color: #40e7a4; font-size: 17px; line-height: 1.1; }
.hiw-funding__balance small { color: #8997aa; font-size: 7px; font-weight: 500; }
.hiw-funding__methods { display: grid; gap: 5px; }
.hiw-funding__method {
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: 29px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  color: #eef3f8;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.hiw-funding__icon {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(31, 220, 146, 0.12);
  color: #36e8a3;
}
.hiw-funding__icon svg { width: 16px; height: 16px; }
.hiw-funding__method > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hiw-funding__method b { font-size: 9px; font-weight: 600; }
.hiw-funding__method small { color: #8290a3; font-size: 7px; }
.hiw-funding__method i { color: #7f8da0; font-size: 15px; font-style: normal; }
.hiw-funding__continue {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  border: 0;
  border-radius: 9px;
  background: #20df95;
  color: #06110d;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.hiw-funding__continue span { font-size: 14px; line-height: 1; }

.hiw-positions__summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 11px 11px 0 0;
  border-bottom: 0;
}
.hiw-positions__summary > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a9b5c5;
  font-size: 8px;
}
.hiw-positions__summary > span small { color: #718095; font-size: 7px; font-weight: 500; }
.hiw-positions__summary strong { color: #3be6a2; font-size: 19px; line-height: 1.1; }
.hiw-positions__summary em { color: #36e8a3; font-size: 8px; font-style: normal; font-weight: 600; }
.hiw-positions__summary em small { color: #7f8da0; font-weight: 400; }
.hiw-positions__chart {
  padding: 0 9px 7px;
  border-top: 0;
  border-radius: 0 0 11px 11px;
  margin-bottom: 8px;
}
.hiw-positions__chart svg { display: block; width: 100%; height: 68px; overflow: visible; }
.hiw-positions__area { fill: url(#hiwChartFill); }
.hiw-positions__line { fill: none; stroke: #3de9a5; stroke-width: 2.2; stroke-linecap: round; }
.hiw-positions__chart > div { display: flex; justify-content: space-between; color: #68778a; font-size: 6.5px; }
.hiw-positions__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1px 6px;
  font-size: 8px;
}
.hiw-positions__head b { color: #e9eef4; }
.hiw-positions__head span { color: #36e8a3; }
.hiw-position__row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 9px;
  margin-bottom: 5px;
}
.hiw-position__asset {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.hiw-position__asset--btc { background: #f7931a; }
.hiw-position__asset--eth { background: #627eea; }
.hiw-position__asset--sol { background: linear-gradient(135deg, #8b5cf6, #19e49a); }
.hiw-position__row > span:nth-child(2),
.hiw-position__row > strong { display: flex; flex-direction: column; gap: 2px; }
.hiw-position__row b { color: #eef3f8; font-size: 8.5px; }
.hiw-position__row small { color: #7e8da1; font-size: 6.5px; font-weight: 400; }
.hiw-position__row > strong { color: #3ee7a4; font-size: 8px; text-align: right; }
.hiw-position__row > strong small { color: #3ee7a4; }
.hiw-app__nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid rgba(151, 165, 184, 0.12);
  color: #77869a;
  font-size: 7px;
}
.hiw-app__nav .is-active { color: #36e8a3; }

/* ── Steps list ── */
.hiw-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.hiw-steps::before {
  content: '';
  position: absolute;
  /* runs through the center of the 90px number circles */
  left: 45px;
  top: 45px;
  bottom: 45px;
  width: 1px;
  background: var(--blue-a18);
}

.hiw-step {
  position: relative;
  display: flex;
  gap: 22px;
  cursor: pointer;
}
.hiw-step__num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
  font-weight: 700;
  background: var(--white);
  border: 1.5px solid var(--blue-a18);
  color: #B0B8CC;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.hiw-step__text h3 {
  font-family: 'Poppins', var(--font);
  font-size: 18px;
  font-weight: 600;
  color: #B0B8CC;
  transition: color 0.25s;
}
.hiw-step__text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
  margin-top: 6px;
  max-width: 380px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s, max-height 0.35s;
}

.hiw-step.is-active .hiw-step__num {
  background: #1fdc92;
  border-color: #1fdc92;
  color: #07110d;
  box-shadow: 0 14px 30px rgba(31, 220, 146, 0.22);
}
.hiw-step.is-active .hiw-step__text h3 { color: var(--text-dark); }
.hiw-step.is-active .hiw-step__text p {
  opacity: 1;
  max-height: 120px;
}

/* ─── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px 40px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

.site-footer__brand .logo { margin-bottom: 20px; }
.site-footer__brand .logo__img {
  height: 42px;
  max-width: 226px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-footer__col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.site-footer__col a {
  font-size: 14px;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s;
  width: fit-content;
}
.site-footer__col a:hover { color: var(--blue); }

.site-footer__license {
  margin-top: 28px;
}
.site-footer__license a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--blue-a18);
  border-radius: 12px;
  background: var(--blue-bg);
  color: var(--text-dark);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.4;
  transition: border-color 0.2s, transform 0.2s;
}
.site-footer__license a:hover {
  border-color: var(--blue-a30);
  transform: translateY(-1px);
}
.site-footer__license-label {
  color: var(--blue);
  font-weight: 700;
}
.site-footer__license-details {
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}

.site-footer__divider {
  height: 1px;
  background: #E5E7EB;
  margin: 28px 0;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__copy {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
}
.site-footer__contact {
  flex-shrink: 0;
  padding: 11px 26px;
  border: 1.5px solid var(--blue-a30);
  border-radius: 100px;
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.site-footer__contact:hover {
  background: var(--blue);
  color: var(--accent-ink);
}

/* ─── ABOUT PAGE: JOURNEY HERO + CAROUSEL ────────────────────── */
.journey {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 90px) 0 100px;
}

.journey__crosses {
  position: absolute;
  width: 340px;
  height: 300px;
  background: url('src/assets/BG_stipe.svg');
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
}
.journey__crosses--tl { left: 4%; top: 6%; }
.journey__crosses--br { right: 6%; top: 40%; }

.journey__head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.journey__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.journey__title-accent { color: var(--blue); }

.journey__plus svg { width: 26px; height: 26px; }

.journey__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 520px;
}

/* Reveal: title/plus/desc rise in staggered on page load (already in
   view at load time, so this fires immediately, no scroll needed). */
.journey__head > * {
  opacity: 0;
  transform: translateY(24px);
}
.journey__head.in-view > * {
  opacity: 1;
  transform: translateY(0);
  animation: hero-rise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
.journey__head.in-view > *:nth-child(1) { animation-delay: 0.05s; }
.journey__head.in-view > *:nth-child(2) { animation-delay: 0.14s; }
.journey__head.in-view > *:nth-child(3) { animation-delay: 0.23s; }

/* ── Endless leftward-scrolling media strip ── */
.journey-carousel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.journey-carousel__track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: journey-scroll 46s linear infinite;
}

.journey-item {
  position: relative;
  flex-shrink: 0;
  height: 272px; /* base size, 20% smaller than the original 340px */
  border-radius: 20px;
  overflow: hidden;
  background: var(--blue-bg);
}
/* Varied smaller sizes for an organic, uneven rhythm along the strip */
.journey-item--sm { height: 218px; }
.journey-item--xs { height: 169px; }
.journey-item img,
.journey-item video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
}

@keyframes journey-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── BRAND MARQUEE (About) ───────────────────────────────────
   Same endless-scroll technique as .journey-carousel above: one
   track, content duplicated once, animate 0 → -50% for a seamless
   loop. Logos keep their own brand colors (no white-silhouette
   filter here, unlike .plogo on the home page). */
.brand-marquee {
  padding: 20px 24px 100px;
  text-align: center;
}
.brand-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brand-marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: brand-marquee-scroll 46s linear infinite;
}
.brand-marquee__track img {
  height: 36px;
  width: 130px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.brand-marquee__track img:hover {
  opacity: 1;
  transform: scale(1.06);
}
@keyframes brand-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── ABOUT PAGE: MISSION SECTION ────────────────────────────── */
.mission {
  padding: 40px 40px 120px;
}

.mission__head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mission__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.mission__tag svg { width: 17px; height: 17px; }

.mission__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--blue);
}

.mission__card {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--blue-bg) 0%, color-mix(in srgb, var(--blue) 10%, #fff) 100%);
}

.mission__media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 430 / 420;
}
.mission__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mission__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
}

.mission__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mission__item {
  display: flex;
  gap: 14px;
}
.mission__check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mission__check svg { width: 13px; height: 13px; }
.mission__check svg * { stroke: var(--accent-ink); }

.mission__item-text h3 {
  font-family: 'Poppins', var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
}
.mission__item-text p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* ─── ABOUT PAGE: CAREER SECTION ──────────────────────────────── */
.career {
  padding: 20px 40px 120px;
}

.career__head {
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.career__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.career__tag svg { width: 17px; height: 17px; }

.career__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.career__title-accent { color: var(--blue); }

.career__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 40px;
  padding: 5px;
  border-radius: 100px;
  background: var(--blue-bg);
}
.career__tab {
  padding: 9px 22px;
  border: none;
  border-radius: 100px;
  background: none;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.career__tab:hover { color: var(--text-dark); }
.career__tab.is-active {
  background: var(--blue);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 4px 14px var(--blue-a30);
}

.career__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.career-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  transition: border-color 0.2s;
}
/* display:none would restart a CSS animation every time a filtered-out
   item reappears — kept static instead so switching tabs feels instant */
.career-item.is-hidden { display: none; }

.career-item__title {
  font-family: 'Poppins', var(--font);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.career-item__meta {
  display: flex;
  gap: 56px;
}
.career-item__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.career-item__label {
  font-size: 12px;
  color: #B0B8CC;
}
.career-item__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.career-item__btn {
  flex-shrink: 0;
  padding: 10px 24px;
  border: 1.5px solid var(--blue);
  border-radius: 100px;
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.career-item__btn:hover {
  background: var(--blue);
  color: var(--accent-ink);
}

/* ─── FOOTER — NEW BRAND additions ───────────────────────────── */
.site-footer__tagline {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 300px;
}

.site-footer__risk {
  margin-top: 48px;
  padding: 20px 24px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 4%, #fff);
}
.site-footer__risk h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.site-footer__risk p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-mid);
}
.site-footer__risk a {
  color: var(--blue);
  text-decoration: none;
}
.site-footer__risk a:hover { text-decoration: underline; }

/* ─── INNER PAGE HERO (Platform / Accounts / Markets / Contacts) ── */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 80px) 24px 56px;
  text-align: center;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.page-hero__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--text-dark);
}
.page-hero__title-accent { color: var(--blue); }
.page-hero__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 560px;
}

/* Reveal: title/desc/CTA rise in staggered on page load (already in
   view at load time, so this fires immediately, no scroll needed). */
.page-hero__inner > * {
  opacity: 0;
  transform: translateY(24px);
}
.page-hero__inner.in-view > * {
  opacity: 1;
  transform: translateY(0);
  animation: hero-rise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
.page-hero__inner.in-view > *:nth-child(1) { animation-delay: 0.05s; }
.page-hero__inner.in-view > *:nth-child(2) { animation-delay: 0.14s; }
.page-hero__inner.in-view > *:nth-child(3) { animation-delay: 0.23s; }

/* ─── LEGAL PAGES (Privacy / Terms / AML / Risk Disclosure) ────── */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 70px) 24px 90px;
}
.legal h1 {
  font-family: 'Poppins', var(--font);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.legal__updated {
  font-size: 13px;
  color: var(--text-mid);
  margin: 12px 0 40px;
}
.legal h2 {
  font-family: 'Poppins', var(--font);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 36px 0 12px;
}
.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mid);
}
.legal p { margin-bottom: 12px; }
.legal ul {
  padding-left: 22px;
  margin: 10px 0 16px;
}
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text-dark); font-weight: 600; }
.legal a { color: var(--blue); }

/* ─── CONTACTS PAGE ──────────────────────────────────────────── */
.contacts-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 110px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: start;
}
.contacts-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Reused .mf-card outside its usual `.more-features > .more-features__grid`
   habitat, so two of its assumptions no longer hold:
   1) flex-basis:330px sizes WIDTH in that flex-wrap row layout — in this
      vertical column it sizes HEIGHT instead, forcing every card to 330px tall.
   2) opacity:0 is normally revealed by an ancestor `.more-features.in-view`,
      which doesn't exist here, so the cards would stay invisible forever. */
.contacts-cards .mf-card {
  flex: 0 1 auto;
  opacity: 1;
  transform: none;
}
.contact-form-card {
  padding: 36px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--blue) 5%, #fff);
}
.contact-form-card h3 {
  font-family: 'Poppins', var(--font);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 20px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  background: var(--white);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--blue); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-mid); }
.contact-form button {
  align-self: flex-start;
  padding: 13px 30px;
  border: none;
  border-radius: 100px;
  background: var(--blue);
  color: var(--accent-ink);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.contact-form button:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--blue-a30);
}
.contact-form button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}
.contact-form__status {
  margin: 2px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(31, 220, 146, 0.3);
  border-radius: 14px;
  background: rgba(31, 220, 146, 0.1);
  color: #087A56;
  font-size: 13.5px;
  line-height: 1.55;
}
.contact-form__status[hidden] { display: none; }
.contact-form__status.is-visible {
  animation: contactStatusIn 0.35s ease both;
}
@keyframes contactStatusIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── TRUST & SECURITY (Home) ─────────────────────────────────
   Deliberately no regulator names/license claims — generic protocol
   badges only (encryption, segregated funds, 2FA, monitoring). */
.trust {
  padding: 20px 40px 100px;
}

/* ─── OUR VALUES (About) ────────────────────────────────────── */
.values {
  padding: 20px 40px 100px;
}

/* ─── FAQ ACCORDION (Contacts / Account Types) ──────────────────
   Answers collapse via CSS grid-template-rows 0fr↔1fr — animatable,
   no JS height measuring needed. Padding lives on the inner div
   (not the animated grid track) so the collapsed state is truly 0. */
.faq {
  padding: 20px 24px 110px;
}
.faq__head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.faq__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--blue-a18);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.faq__tag svg { width: 17px; height: 17px; }
.faq__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.faq__title-accent { color: var(--blue); }

.faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item.is-open { border-color: var(--blue-a30); }

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border: none;
  background: none;
  text-align: left;
  font-family: 'Poppins', var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-bg);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.faq-item__icon svg { width: 13px; height: 13px; }
.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--blue);
  color: var(--accent-ink);
}

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  padding: 0 24px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-mid);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }

/* ─── MARKETS PAGE: POPULAR INSTRUMENTS TABLE ────────────────── */
.instruments {
  padding: 20px 24px 110px;
}
.instruments__table {
  max-width: 900px;
  margin: 0 auto;
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  overflow: hidden;
}
.instruments__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #EEF0F4;
}
.instruments__row:last-child { border-bottom: none; }
.instruments__row--head {
  background: color-mix(in srgb, var(--blue) 4%, #fff);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mid);
}
.instruments__name {
  font-family: 'Poppins', var(--font);
  font-weight: 600;
  color: var(--text-dark);
}
.instruments__cat {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
}
.instruments__spread { color: var(--text-mid); font-size: 14px; }
.instruments__btn {
  justify-self: end;
  padding: 8px 18px;
  border: 1.5px solid var(--blue-a30);
  border-radius: 100px;
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.instruments__btn:hover { background: var(--blue); color: var(--accent-ink); }

/* ─── MARKETS PAGE: MARKET GROUP + LIVE PRICE WIDGETS ─────────
   Semantic green/red for gain/loss are fixed, non-brand colors —
   same reasoning as the mf-card icon palette: functional meaning,
   not decorative, so they deliberately don't derive from --blue. */
.market-group {
  padding: 60px 24px;
}
.market-group__inner {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
}
.market-group__inner.in-view {
  opacity: 1;
  transform: translateY(0);
  animation: market-rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes market-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.market-group__tag {
  display: inline-flex;
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* fixed per-group accent — mirrors the six-asset-class icon colors above */
.market-group--forex       .market-group__tag { background: #E1E7FF; color: #4C6FFF; }
.market-group--crypto      .market-group__tag { background: #DFF6E4; color: #22A559; }
.market-group--indices     .market-group__tag { background: #E3E6FF; color: #5B4FE9; }
.market-group--commodities .market-group__tag { background: #DFF4FF; color: #0EA5E9; }
.market-group--stocks      .market-group__tag { background: #FCE3F0; color: #E23F8E; }

.market-group__title {
  font-family: 'Poppins', var(--font);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--text-dark);
  margin-top: 18px;
}
.market-group__title-accent { color: var(--blue); }
.market-group__desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 460px;
}
.market-group__points {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.market-group__point {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-dark);
}
.market-group__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.market-group__check svg { width: 11px; height: 11px; }
.market-group__check svg * { stroke: var(--accent-ink); }

.market-group__cta {
  margin-top: 28px;
  display: inline-flex;
  padding: 13px 30px;
  border-radius: 100px;
  background: var(--blue);
  color: var(--accent-ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.market-group__cta:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--blue-a30);
}

/* ── Price board widget ── */
.price-board {
  border-radius: 24px;
  padding: 26px 26px 14px;
  background: var(--white);
  border: 1px solid #EEF0F6;
  box-shadow: 0 24px 60px rgba(15, 25, 70, 0.1);
}
.price-board__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid #EEF0F6;
}
.price-board__label {
  font-family: 'Poppins', var(--font);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}
.price-board__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #22A559;
}
.price-board__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22A559;
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 165, 89, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 165, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 165, 89, 0); }
}

.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 90px auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-radius: 14px;
  /* each quote gets its own raised card — the "volume" + a touch of
     brand blue the widget was missing when rows were flat list items */
  background: color-mix(in srgb, var(--blue) 4%, #fff);
  box-shadow: 0 1px 2px rgba(15, 25, 70, 0.04), 0 8px 16px rgba(15, 25, 70, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 25, 70, 0.06), 0 14px 26px var(--blue-a16);
}
.price-row__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.price-row__symbol {
  font-family: 'Poppins', var(--font);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-dark);
}
.price-row__name {
  font-size: 12px;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-row__spark {
  display: block;
  width: 100%;
  height: 28px;
}
.price-row__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.price-row__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.price-row__chg {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.price-row__chg--up   { color: #16803C; background: #DCFCE7; }
.price-row__chg--down { color: #B91C1C; background: #FEE2E2; }

@media (prefers-reduced-motion: reduce) {
  .market-group__inner { opacity: 1 !important; transform: none !important; animation: none !important; }
  .price-board__dot { animation: none; }
}

.market-group__disclaimer {
  max-width: 700px;
  margin: -20px auto 40px;
  padding: 0 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-mid);
}
.market-group__disclaimer a { color: var(--blue); }

/* ─── MARKETS PAGE: ECONOMIC CALENDAR ────────────────────────── */
.calendar {
  padding: 20px 24px 40px;
}
.calendar__table {
  max-width: 980px;
  margin: 0 auto;
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  overflow: hidden;
}
.calendar__row {
  display: grid;
  grid-template-columns: 64px 76px 1.6fr 78px 84px 84px;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid #EEF0F4;
  transition: background 0.2s;
}
.calendar__row:last-child { border-bottom: none; }
.calendar__row--head {
  background: color-mix(in srgb, var(--blue) 4%, #fff);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-mid);
}
.calendar__row:not(.calendar__row--head):hover {
  background: color-mix(in srgb, var(--blue) 3%, #fff);
}

.calendar__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-dark);
}
.calendar__currency {
  display: inline-flex;
  justify-self: start;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}
.calendar__event {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.calendar__impact {
  display: flex;
  gap: 3px;
}
.calendar__impact i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E5E7EB;
}
/* Impact dots: fixed semantic colors (red/amber/gray) — signal urgency,
   not brand identity, same reasoning as the price-row gain/loss colors */
.calendar__impact[data-impact="low"] i:nth-child(1) { background: #9CA3AF; }
.calendar__impact[data-impact="medium"] i:nth-child(1),
.calendar__impact[data-impact="medium"] i:nth-child(2) { background: #F59E0B; }
.calendar__impact[data-impact="high"] i { background: #EF4444; }

.calendar__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-dark);
  justify-self: end;
}
.calendar__value--prev { color: var(--text-mid); font-weight: 500; }

/* ─── SHARED GRID-PAPER BACKDROP ──────────────────────────────
   Same subtle tile as .about__bg on the homepage About section,
   applied via ::before to a curated set of otherwise-plain sections
   for consistent depth. Being ::before, it paints first and sits
   behind each section's real children automatically — no HTML
   changes needed, and safe with nested position:absolute widgets
   inside (they resolve to their own nearer ancestor, not this outer
   one).
   Originally also applied to .features/.stats/.faq/.pricing/.career/
   .calendar/.how-it-works — removed per user request (kept only on
   Trust & Security, Mission and the Contacts body). */
.trust,
.mission,
.contacts-body {
  position: relative;
  /* establishes its own stacking context, so the negative z-index
     pattern below stacks predictably within it (see
     feedback_negative_zindex_stacking memory for why this matters) */
  z-index: 0;
}
.trust::before,
.mission::before,
.contacts-body::before {
  content: '';
  position: absolute;
  inset: 0;
  /* negative, not 0 — static (non-positioned) content siblings paint
     BEFORE z-index:0 positioned ones per CSS stacking order, which
     would put this pattern on top of the real content instead of
     behind it. Negative z-index paints earlier than either. */
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cline x1='25' y1='0' x2='75' y2='0' stroke='black' stroke-opacity='0.10' stroke-width='1'/%3E%3Cline x1='0' y1='25' x2='0' y2='75' stroke='black' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

/* ─── BURGER BUTTON ───────────────────────────────────────── */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.22s;
}
.nav__burger--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger--active span:nth-child(2) { opacity: 0; }
.nav__burger--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */

/* ── 1200px: small desktop / large tablet landscape ── */
@media (max-width: 1200px) {
  .header__inner { gap: 24px; }
  .header .logo__img { height: 30px; }
  .hero__title     { font-size: 52px; }
  .hero__title-sub { font-size: 42px; }
  .hero__phone     { width: 380px; }
  .hero__content   { padding: 0 40px; }
}

/* ── 1024px: tablet landscape ── */
@media (max-width: 1024px) {
  .hero__title       { font-size: 44px; letter-spacing: -0.5px; }
  .hero__title-sub   { font-size: 34px; }
  .hero__phone       { width: 300px; }
  .hero__phone-wrap  { left: 53%; }

  .nav__link { padding: 7px 12px; font-size: 13px; }

  .about__card--tl { left: 3%; }
  .about__card--tr { right: 2%; }
  .about__card--bl { left: 4%; }
  .about__card--br { right: 2%; }

  .features__grid { gap: 16px; }
  .fcard          { padding: 34px; }
  .fcard__title   { font-size: 22px; }
  .orbit__bubble  { width: 56px; height: 56px; }
  .orbit__bubble svg { width: 20px; height: 20px; }
  .goal           { padding: 16px 18px; gap: 12px; }
  .goal__icon     { width: 48px; height: 48px; }
  .goal__icon svg { width: 22px; height: 22px; }
  .goal__name     { font-size: 15px; }
  .goal__sum      { font-size: 18px; }
  .fcard--analytics { min-height: 400px; }
  .fcard__text--analytics { flex-basis: 42%; }
  .app__mark  { width: 70px; }
  .app__title { font-size: 28px; }

  .pricing__grid { gap: 16px; }
  .pricing-card  { padding: 30px 24px; }
  .pricing-card__price-num { font-size: 40px; }
}

/* ── 768px: tablet portrait / mobile ── */
@media (max-width: 768px) {

  /* Header — burger becomes a filled emerald circle */
  .nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--blue);
  }
  .nav__burger span { background: var(--accent-ink); }
  .btn-template { display: none; }
  .header__auth { display: none; }
  /* Log In / Register appear as items inside the burger dropdown */
  .nav__link--auth { display: flex; }

  /* ── Mobile nav dropdown — redesigned ──────────────────────
     Clean white card (matches the rest of the site's light aesthetic —
     the flat brand-blue fill tried earlier washed out the gray link
     text). Grid instead of flex: every regular link spans the full
     width (one per row), while the two auth links — deliberately left
     un-spanned — fall into the next row and land side by side as a
     real Log In / Register button pair, all without touching the HTML. */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border-radius: 24px;
    border: 1px solid rgba(15, 25, 70, 0.06);
    background: var(--white);
    padding: 12px;
    box-shadow: 0 24px 48px rgba(15, 25, 70, 0.16), 0 4px 14px rgba(15, 25, 70, 0.08);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    z-index: 99;
    max-height: calc(100dvh - var(--header-h) - 24px);
    overflow-y: auto;
  }
  .nav--open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Regular links each take a full row */
  .nav__link {
    grid-column: 1 / -1;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15.5px;
    color: var(--text-dark);
  }
  .nav__link:not(.nav__link--active):hover {
    background: var(--blue-bg);
  }
  .nav__link--active {
    background: var(--blue);
    color: var(--accent-ink);
  }
  .nav__link--active .nav__dot { background: var(--accent-ink); }

  /* Auth pair — real buttons, side by side, grouped with breathing
     room instead of a fragile cross-column divider line */
  .nav__link--auth {
    grid-column: auto;
    justify-content: center;
    padding: 13px 12px;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 600;
  }
  .nav__link--auth .nav__dot { display: none; }
  .nav__link:not(.nav__link--auth) + .nav__link--auth {
    margin-top: 10px;
  }
  .nav__link--auth[href*="login"] {
    /* box-shadow, not border — a real border adds to the auto-height of a
       box with no explicit height set, making this pill ~3px taller than
       Register (which has no border) and knocking the two out of alignment */
    box-shadow: inset 0 0 0 1.5px var(--blue-a30);
    color: var(--blue);
  }
  .nav__link--auth[href*="login"]:hover { background: var(--blue-bg); }
  .nav__link--auth[href*="register"] {
    background: var(--blue);
    color: var(--accent-ink);
  }
  .nav__link--auth[href*="register"]:hover { background: var(--blue-dark); }

  /* Hero — single column; phone bleeds down into Partners below.
     Hero stays position:relative (positioned) while Partners is static,
     so the absolutely-positioned phone paints above it automatically. */
  .hero {
    height: auto;
    min-height: 100svh;
    padding-top: var(--header-h);
    padding-bottom: 0;
  }
  .hero__content {
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: 0 28px;
    gap: 40px;
  }
  .hero__left         { align-items: center; gap: 32px; }
  .hero__right        { align-items: center; gap: 24px; }
  .hero__social-proof { align-items: center; }
  .hero__phone-wrap {
    left: 50%;
    top: auto;
    bottom: -300px;
    transform: translateX(-50%);
  }
  .hero__phone      { width: 260px; }
  .hero__title      { font-size: 38px; }
  .hero__title-sub  { font-size: 30px; }

  /* Partners */
  .partners { padding: 0 20px 60px; }
  .partners__card {
    height: auto;
    min-height: 320px;
    border-radius: 20px;
  }
  .partners__marquee-wrap { flex: none; height: 130px; }
  .partners__marquee      { margin-top: 0; }
  .partners__marquee-track > span { font-size: 70px; }
  .partners__logos { gap: 20px; }

  /* About */
  .about         { padding: 80px 28px; min-height: 0; }
  .about__card   { display: none; }
  .about__content { max-width: 100%; }
  .about__title  { font-size: clamp(28px, 6vw, 42px); }
  /* Lines beside text don't make sense in single-column — hide them */
  .about__line   { display: none; }
  .about__subtitle { gap: 0; }
  .about__subtitle p { text-align: center; }

  /* Features */
  .features       { padding: 70px 28px 40px; }
  .features__head { gap: 20px; }
  .features__tag  { font-size: 13px; padding: 8px 16px; }
  .features__title { font-size: clamp(30px, 7vw, 44px); }
  .features__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-top: 44px;
    gap: 20px;
  }
  .fcard { padding: 32px 26px; }
  .fcard__visual--goals { padding-top: 36px; margin-bottom: 32px; }

  /* Row 2 — stack: text on top, visual below */
  .features__grid--row2 { margin-top: 20px; }
  .fcard--analytics {
    flex-direction: column;
    gap: 28px;
    min-height: 0;
  }
  .fcard__text--analytics { flex: none; padding-top: 0; }
  .fcard__visual--analytics { min-height: 340px; }
  .analytics__phone  { right: 0; height: 100%; }
  .analytics__report { width: 82%; left: -2%; bottom: 2%; }
  .fcard--app { min-height: 340px; }

  /* More additional features — single column */
  .more-features       { margin-top: 56px; }
  .more-features__title { font-size: clamp(24px, 6vw, 32px); margin-bottom: 32px; }
  .more-features__grid  { max-width: 460px; gap: 16px; }
  .mf-card              { flex-basis: 100%; padding: 24px 22px; }

  /* Trading / Investing scroll section */
  .trade-scroll        { padding: 80px 20px; min-height: 520px; }
  .trade-scroll__word  { letter-spacing: 2px; }
  .tw-phone__notch     { width: 40%; height: 20px; }

  /* Pricing — single column, featured plan first */
  .pricing       { padding: 20px 28px 90px; }
  .pricing__head { margin-bottom: 40px; }
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 28px;
  }
  .pricing-card            { padding: 32px 28px; }
  .pricing-card--featured  { order: -1; }

  /* Statistics */
  .stats        { padding: 60px 20px; }
  .stats__head  { margin-bottom: 36px; gap: 16px; }
  .stats__grid  { grid-template-columns: 1fr; gap: 0; }
  .stat-pill    { min-height: 112px; padding: 20px; }
  .stat-pill__num  { font-size: 48px; }
  .stat-pill__icon { width: 48px; height: 48px; }
  .stat-pill__desc { max-width: 260px; }

  /* App CTA banner — drop the decorative side mockups, keep text centered */
  .cta-app        { padding: 20px 20px 60px; }
  .cta-app__card  { min-height: 0; border-radius: 28px; }
  .cta-app__mock  { display: none; }
  .cta-app__text  { padding: 48px 24px; gap: 18px; }
  .cta-app__title { font-size: clamp(24px, 7vw, 32px); }

  /* Platform preview — screenshot drops into normal flow below the text instead of floating in the corner */
  .platform-preview       { padding: 20px 20px 60px; }
  .platform-preview__card { min-height: 0; border-radius: 28px; padding: 40px 24px; text-align: center; }
  .platform-preview__img  { position: static; display: block; width: 100%; max-width: 320px; margin: 28px auto 0; }
  .platform-preview__text { max-width: none; margin: 0 auto; }
  .platform-preview__title { font-size: clamp(24px, 7vw, 32px); }

  /* How It Works */
  .how-it-works { padding: 60px 24px; border-radius: 28px; margin: 0 16px 60px; max-width: none; }
  .hiw__head    { margin-bottom: 40px; }
  .hiw__body    { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  .hiw-phone    { max-width: 260px; }
  .hiw-steps    { width: 100%; max-width: 420px; }

  /* Footer */
  .site-footer      { padding: 56px 20px 28px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Inner pages */
  .page-hero { padding: calc(var(--header-h) + 44px) 20px 36px; }
  .contacts-body {
    grid-template-columns: 1fr;
    padding-bottom: 70px;
  }
  .contact-form-card { padding: 26px 22px; }
  .legal { padding: calc(var(--header-h) + 40px) 20px 60px; }

  /* About page — journey hero + carousel */
  .journey          { padding: calc(var(--header-h) + 50px) 0 70px; }
  .journey__head    { margin-bottom: 44px; gap: 14px; }
  .journey__crosses { width: 240px; height: 210px; }
  .journey-item     { height: 192px; border-radius: 16px; }
  .journey-item--sm { height: 154px; }
  .journey-item--xs { height: 119px; }
  .journey-carousel__track { gap: 16px; }
  .brand-marquee       { padding: 20px 20px 70px; }
  .brand-marquee__track { gap: 40px; }
  .brand-marquee__track img { height: 28px; width: 100px; }

  /* About page — mission section */
  .mission        { padding: 20px 24px 80px; }
  .mission__head  { margin-bottom: 40px; gap: 18px; }
  .mission__card  {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
    border-radius: 26px;
  }
  .mission__media { aspect-ratio: 16 / 10; }

  /* About page — career section */
  .career        { padding: 10px 24px 80px; }
  .career__head  { margin-bottom: 28px; }
  .career__tabs  { gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
  .career-item   {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
  }
  .career-item__meta { flex-wrap: wrap; gap: 20px 40px; }
  .career-item__btn  { align-self: flex-start; }

  /* Trust & Security */
  .trust { padding: 10px 24px 70px; }

  /* FAQ */
  .faq            { padding: 10px 20px 80px; }
  .faq__head      { margin-bottom: 32px; }
  .faq-item__q    { padding: 17px 20px; font-size: 15px; }
  .faq-item__a p  { padding: 0 20px 17px; font-size: 14px; }

  /* Popular instruments table — collapse to stacked cards */
  .instruments        { padding: 10px 16px 80px; }
  .instruments__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name   cat"
      "spread btn";
    row-gap: 10px;
    padding: 16px 18px;
  }
  .instruments__row--head { display: none; }
  .instruments__name    { grid-area: name; }
  .instruments__cat     { grid-area: cat; justify-self: end; }
  .instruments__spread  { grid-area: spread; }
  .instruments__btn     { grid-area: btn; }

  /* Market groups — stack info above the price widget */
  .market-group        { padding: 40px 20px; }
  .market-group__inner { grid-template-columns: 1fr; gap: 32px; }
  .market-group__desc  { max-width: none; }
  .price-board         { padding: 22px 20px 12px; }
  .market-group__disclaimer { margin-top: 0; }

  /* Economic calendar — collapse to stacked cards */
  .calendar      { padding: 10px 16px 60px; }
  .calendar__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "time     currency"
      "event    event"
      "impact   impact"
      "forecast previous";
    row-gap: 8px;
    padding: 16px 18px;
  }
  .calendar__row--head { display: none; }
  .calendar__time      { grid-area: time; }
  .calendar__currency  { grid-area: currency; justify-self: end; }
  .calendar__event     { grid-area: event; }
  .calendar__impact    { grid-area: impact; }
  .calendar__value:not(.calendar__value--prev) { grid-area: forecast; justify-self: start; }
  .calendar__value--prev { grid-area: previous; }
}

/* ── 480px: mobile portrait ── */
@media (max-width: 480px) {
  .header__inner { padding: 0 20px; gap: 16px; }
  .logo__text    { font-size: 18px; }
  .logo__img     { height: 27px; }
  .site-footer__brand .logo__img { height: 34px; }

  .hero__content   { padding: 0 20px; gap: 32px; }
  .hero__title     { font-size: 32px; }
  .hero__title-sub { font-size: 26px; }
  .hero__brand-line--continuation { padding-left: calc(1em + 7px); }
  .btn-start__label { font-size: 14px; padding: 11px 20px; }
  .btn-start__arrow { width: 40px; height: 40px; }
  .hero__phone-wrap { bottom: -450px; }
  .hero__phone      { width: 264px; }

  .partners { padding: 0 12px 48px; }
  .partners__card { border-radius: 16px; min-height: 280px; }
  .partners__marquee-wrap { height: 110px; }
  .partners__marquee-track > span { font-size: clamp(48px, 13vw, 70px); }
  .partners__content { padding: 0 20px; gap: 16px; }
  .partners__desc { font-size: 14px; }

  .about { padding: 60px 20px; }
  .about__title { font-size: 28px; }

  .features        { padding: 56px 20px 32px; }
  .features__title { font-size: 30px; }
  .fcard           { padding: 26px 18px; border-radius: 20px; }
  .fcard__title    { font-size: 19px; }
  .fcard__desc     { font-size: 14px; }
  .orbit__card     { width: 68%; }
  .orbit__bubble   { width: 46px; height: 46px; }
  .orbit__bubble svg { width: 17px; height: 17px; }
  .fcard__visual--goals { margin-bottom: 24px; }
  .goal            { padding: 13px 14px; gap: 10px; border-radius: 16px; }
  .goal--2         { margin-top: -24px; }
  .goal--3         { height: 78px; margin-top: -40px; }
  .goal__icon      { width: 42px; height: 42px; border-radius: 12px; }
  .goal__icon svg  { width: 19px; height: 19px; }
  .goal__name      { font-size: 14px; }
  .goal__date      { font-size: 11px; }
  .goal__sum       { font-size: 16px; }
  .goal__delta     { font-size: 12px; }
  .more-features { margin-top: 40px; }
  .more-features__title { margin-bottom: 24px; }
  .mf-card        { padding: 20px 18px; gap: 14px; }
  .mf-card__icon  { width: 44px; height: 44px; border-radius: 12px; }
  .mf-card__icon svg { width: 20px; height: 20px; }
  .mf-card__title { font-size: 16px; }
  .mf-card__desc  { font-size: 13px; }

  .trade-scroll       { padding: 60px 16px; min-height: 440px; }
  .trade-scroll__word { letter-spacing: 1px; }
  .tw-phone           { padding: 12px 12px 16px; border-radius: 42px; }
  .tw-phone__screen   { border-radius: 30px; }

  .fcard__visual--analytics { min-height: 250px; }
  .analytics__report { width: 90%; padding: 14px 16px 10px; border-radius: 16px; }
  .analytics__report-title { font-size: 15px; }
  .rtoggle { width: 30px; height: 22px; }
  .rtoggle svg { width: 12px; height: 12px; }
  .fcard--app { min-height: 280px; }
  .app__mark  { width: 55px; top: 24px; right: 24px; }
  .app__title { font-size: 25px; }
  .app__btn   { padding: 11px 22px; font-size: 14px; }

  .pricing        { padding: 10px 20px 70px; }
  .pricing__title { font-size: 28px; }
  .pricing-card   { padding: 28px 22px; }
  .pricing-card__price-num { font-size: 40px; }

  .stats           { padding: 44px 16px; }
  .stat-pill       { min-height: 96px; padding: 18px; gap: 12px; }
  .stat-pill__num  { font-size: 44px; }
  .stat-pill__icon { width: 44px; height: 44px; }
  .stat-pill__desc { font-size: 13px; }

  .cta-app__card  { border-radius: 22px; }
  .cta-app__text  { padding: 40px 18px; gap: 16px; }
  .cta-app__desc  { font-size: 14px; }
  .cta-app__stores { flex-direction: column; width: 100%; }
  .how-it-works { padding: 48px 18px; border-radius: 22px; margin: 0 12px 48px; }
  .hiw-phone    { max-width: 220px; }
  .hiw-step__num { width: 60px; height: 60px; font-size: 26px; }
  .hiw-steps::before { left: 30px; top: 30px; bottom: 30px; }
  .hiw-step__text h3 { font-size: 16px; }
  .hiw-step__text p  { font-size: 13px; }

  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom { align-items: stretch; }
  .site-footer__license a { width: 100%; }
  .site-footer__contact { width: 100%; text-align: center; }

  .journey       { padding: calc(var(--header-h) + 36px) 0 56px; }
  .journey__head { margin-bottom: 32px; padding: 0 20px; }
  .journey__crosses { display: none; }
  .journey-item  { height: 144px; border-radius: 14px; }
  .journey-item--sm { height: 115px; }
  .journey-item--xs { height: 89px; }
  .journey-carousel__track { gap: 12px; }
  .brand-marquee        { padding: 16px 16px 56px; }
  .brand-marquee__track { gap: 28px; }
  .brand-marquee__track img { height: 24px; width: 84px; }

  .mission        { padding: 10px 16px 60px; }
  .mission__card  { padding: 20px; border-radius: 20px; gap: 22px; }
  .mission__title { font-size: 26px; }
  .mission__desc  { font-size: 14px; }
  .mission__item-text h3 { font-size: 15px; }
  .mission__item-text p  { font-size: 13px; }

  .career         { padding: 10px 16px 60px; }
  .career__title  { font-size: 26px; }
  .career__tabs   { gap: 14px 20px; }
  .career__tab    { font-size: 14px; }
  .career-item    { padding: 20px; border-radius: 16px; }
  .career-item__title { font-size: 17px; margin-bottom: 12px; }
  .career-item__meta  { gap: 16px 28px; }
  .career-item__btn   { width: 100%; text-align: center; }

  .trust { padding: 10px 16px 56px; }

  .faq__title    { font-size: 26px; }
  .faq-item__q   { padding: 15px 16px; font-size: 14px; gap: 12px; }
  .faq-item__icon { width: 24px; height: 24px; }
  .faq-item__a p { padding: 0 16px 15px; font-size: 13px; }

  .instruments__row { padding: 14px 14px; }
  .instruments__name { font-size: 14px; }
  .instruments__cat  { font-size: 11px; padding: 3px 10px; }
  .instruments__spread { font-size: 13px; }
  .instruments__btn  { padding: 7px 14px; font-size: 12px; }

  .market-group__title { font-size: 24px; }
  .price-board          { padding: 18px 16px 10px; }
  .price-row            { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px 6px; }
  .price-row__spark     { display: none; }
  .price-row__symbol    { font-size: 13.5px; }
  .price-row__name      { font-size: 11px; }
  .price-row__num       { font-size: 14px; }
  .price-row__chg       { font-size: 11px; padding: 2px 7px; }

  .calendar__row  { padding: 13px 14px; }
  .calendar__event { font-size: 13px; }
  .calendar__time, .calendar__value { font-size: 12.5px; }
  .calendar__currency { font-size: 11px; padding: 3px 9px; }
}

/* ─── BOTTOM VIEWPORT BLUR ────────────────────────────────────
   Fixed to the bottom of the SCREEN (not the page) on every page,
   so whatever content scrolls past underneath gets progressively
   blurred, like frosted glass. A single backdrop-filter + mask can
   only grade the blur's opacity, not its strength, so — same idea
   as a proper "progressive blur" — 8 stacked layers are used
   instead: each doubles the blur amount (0.03125px → 4px) and its
   mask band is shifted 12.5% further down than the last. Layers
   overlap in pairs as they hand off, so by the very bottom edge
   only the strongest (4px) blur remains active. Purely decorative:
   aria-hidden, pointer-events:none, no JS. */
.bottom-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 40;
  pointer-events: none;
}
.bottom-blur span {
  position: absolute;
  inset: 0;
}
.bottom-blur span:nth-child(1) {
  backdrop-filter: blur(0.03125px);
  -webkit-backdrop-filter: blur(0.03125px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
}
.bottom-blur span:nth-child(2) {
  backdrop-filter: blur(0.0625px);
  -webkit-backdrop-filter: blur(0.0625px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
}
.bottom-blur span:nth-child(3) {
  backdrop-filter: blur(0.125px);
  -webkit-backdrop-filter: blur(0.125px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
}
.bottom-blur span:nth-child(4) {
  backdrop-filter: blur(0.25px);
  -webkit-backdrop-filter: blur(0.25px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
}
.bottom-blur span:nth-child(5) {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
}
.bottom-blur span:nth-child(6) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
}
.bottom-blur span:nth-child(7) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%);
}
.bottom-blur span:nth-child(8) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%);
}

@media (max-width: 480px) {
  .bottom-blur { height: 90px; }
}

/* ─── PAGE TRANSITION OVERLAY ──────────────────────────────────
   Static multi-page site (no client-side router), so a real "page
   transition" is faked with a full-screen frosted-glass cover:
   covers the whole screen at once (no rising/lowering band), and
   the blur radius itself grows from 0 instead. Almost no background
   tint (barely-there white, 0.08 alpha) — a solid/heavier white
   wash was what made the effect feel harsh, not the blur itself.
   Covering by default (correct first paint, CSS is render-blocking)
   — un-blurs right after this page paints (see main.js), and blurs
   back in for ~0.45s before an internal link actually navigates
   away. External links/anchors/new-tab clicks are left alone in
   main.js so real navigations and CTAs aren't delayed. */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;
  pointer-events: auto;
}
.page-transition.is-hidden {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
}

/* Bright emerald is reserved for fills and small highlights. These
   foreground accents use a deeper emerald so text stays readable on white. */
.btn-login,
.about__title,
.features__tag,
.features__title-accent,
.orbit__bubble,
.goal__sum,
.app__btn,
.pricing-card__btn--outline:hover,
.benefit__tag,
.benefit__title-accent,
.bcard__label,
.bcard__check-ic,
.secure-visual__inner,
.stats__tag,
.stats__title-accent,
.stat-pill__num,
.hiw__tag,
.hiw__title-accent,
.site-footer__col a:hover,
.site-footer__license-label,
.site-footer__contact,
.journey__title-accent,
.mission__tag,
.mission__title,
.career__tag,
.career__title-accent,
.career-item__btn,
.site-footer__risk a,
.page-hero__title-accent,
.legal a,
.faq__tag,
.faq__title-accent,
.faq-item__icon,
.instruments__cat,
.instruments__btn,
.market-group__title-accent,
.market-group__disclaimer a,
.calendar__currency,
.nav__link--auth[href*="login"] {
  color: var(--accent-text);
}