:root {
  --bg: #050506;
  --panel: #0d0d11;
  --panel-2: #121219;
  --line: rgba(255, 255, 255, .1);
  --text: #f7f7fa;
  --muted: #a6a6b2;
  --purple: #00a6ff;
  --blue: #008cff;
  --pink: #19d7ff;
  --green: #35edff;
  --gradient: linear-gradient(105deg, #086cff 5%, #00a8ff 48%, #35edff 100%);
  --shadow: 0 32px 100px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  overflow-x: hidden;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input { font: inherit; }
a { color: inherit; }
.section-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.promo {
  position: relative;
  z-index: 20;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 48px;
  color: #cfcfd6;
  background: #17171c;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  text-align: center;
}
.promo span { color: white; font-weight: 600; }
.promo a { color: #a875ff; font-weight: 600; text-decoration: none; }
.promo button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: #73737d;
  font-size: 20px;
  cursor: pointer;
}

.header {
  position: sticky;
  z-index: 15;
  top: 0;
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  background: rgba(5,5,6,.78);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}
.logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: normal;
  text-decoration: none;
}
.logo > span:not(.logo-mark) { color: #a95bff; }
.logo-mark {
  width: 30px;
  height: 30px;
  margin-right: 7px;
  display: inline-grid;
  place-items: center;
  background: var(--gradient);
  border-radius: 9px;
  color: #fff !important;
  font-size: 21px;
  box-shadow: 0 0 28px rgba(131,73,255,.35);
}
.logo small {
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 99px;
  background: linear-gradient(90deg,#ff8c42,#ff4f8b);
  color: white;
  font-size: 8px;
  letter-spacing: .05em;
}
.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
  padding: 8px 13px;
  border: 1px solid rgba(72, 209, 255, .28);
  border-radius: 999px;
  background: rgba(7, 37, 53, .48);
  color: #82e4ff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav a:hover { color: #c8f6ff; transform: translateY(-2px); border-color: #50dcff; box-shadow: 0 0 22px rgba(45, 202, 255, .22); }
.nav .nav-income { border-color: rgba(83,255,187,.3); background: rgba(4,48,37,.48); color: #8fffd1; }
.nav small { margin-left: 4px; color: #777782; }
.profile-link {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d4d4dc;
  font-size: 11px;
  text-decoration: none;
}
.profile-link b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(147,91,255,.55);
  border-radius: 50%;
  background: #151322;
  color: white;
}
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 106px;
  text-align: center;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 55% 43% at 50% 45%, rgba(98,40,188,.23), transparent 68%),
    linear-gradient(#050506, #07070a 80%, #050506);
}
.stars {
  position: absolute;
  z-index: -2;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  opacity: .72;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(153,119,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.3px);
  background-size: 143px 143px, 213px 213px, 91px 91px;
  background-position: 0 0, 37px 29px, 61px 71px;
  mask-image: linear-gradient(to bottom, black 0 75%, transparent);
}
.hero-glow {
  position: absolute;
  z-index: -1;
  top: 110px;
  left: 50%;
  width: 520px;
  height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(128,50,255,.23), transparent 67%);
  filter: blur(18px);
}
.hero-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: var(--gradient);
  box-shadow: 0 18px 55px rgba(115,63,255,.35), inset 0 1px rgba(255,255,255,.35);
  font-size: 38px;
}
.eyebrow {
  color: #9b91b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 920px;
  margin: 15px 0 20px;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
}
.hero h1 span,
.section-copy h2 span,
.center-heading h2 span {
  color: transparent;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero > p {
  max-width: 790px;
  margin: 0;
  color: #b6b6c0;
  font-size: 18px;
  line-height: 1.72;
}
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button-primary {
  background: var(--gradient);
  box-shadow: 0 14px 34px rgba(105,65,255,.28);
}
.button-secondary {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.button-secondary i { font-style: normal; font-size: 11px; }

.hero-dashboard {
  position: relative;
  width: min(880px, 92vw);
  height: 380px;
  margin-top: 72px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px 24px 0 0;
  background: rgba(12,12,18,.84);
  box-shadow: 0 30px 120px rgba(69,26,140,.34), inset 0 1px rgba(255,255,255,.06);
  text-align: left;
  backdrop-filter: blur(18px);
}
.hero-dashboard::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(transparent, #050506);
}
.dash-top {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  color: #aaaab7;
  font-size: 11px;
}
.dash-top b { color: white; }
.dash-top b i { color: #a44cff; font-style: normal; }
.dash-top > span {
  flex: 1;
  max-width: 270px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0b0b10;
}
.dash-top em {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 99px;
  background: rgba(104,61,255,.14);
  color: #b797ff;
  font-style: normal;
}
.dash-body { height: calc(100% - 58px); display: grid; grid-template-columns: 64px 1fr; }
.dash-body aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-right: 1px solid var(--line);
  color: #656572;
}
.dash-body aside i:first-child { color: #ae55ff; }
.dash-body aside i { font-style: normal; }
.dash-content { padding: 28px 34px; }
.dash-content > small { color: #686877; font-size: 9px; letter-spacing: .12em; }
.dash-content h3 { margin: 3px 0 20px; font-size: 22px; }
.dash-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.dash-tools article {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.dash-tools article i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border-radius: 10px;
  background: rgba(139,69,255,.15);
  color: #bd75ff;
  font-style: normal;
}
.dash-tools article b { margin-top: 14px; font-size: 13px; }
.dash-tools article span { margin-top: 3px; color: #777785; font-size: 9px; }

.section { min-height: 620px; display: grid; grid-template-columns: .83fr 1.17fr; gap: 80px; align-items: center; padding-block: 110px; }
.section-copy { max-width: 470px; }
.section-kicker {
  display: block;
  margin-bottom: 17px;
  color: #9262eb;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
}
.section-copy h2,
.center-heading h2 {
  margin: 0;
  font-size: clamp(36px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}
.section-copy p,
.center-heading p {
  margin: 22px 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.video-card {
  position: relative;
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(135,60,255,.25), transparent 27%),
    #0b0b10;
  box-shadow: var(--shadow);
}
.video-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, black, transparent 74%);
}
.video-logo {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: var(--gradient);
  box-shadow: 0 20px 70px rgba(118,55,255,.45);
  font-size: 52px;
  font-weight: 900;
}
.video-card button {
  position: absolute;
  bottom: 26px;
  left: 26px;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: white;
  cursor: pointer;
}
.video-card button i { margin-left: 3px; font-style: normal; }
.video-bottom {
  position: absolute;
  right: 26px;
  bottom: 30px;
  display: flex;
  gap: 25px;
  color: #868691;
  font-size: 11px;
}
.video-bottom b { color: white; }

.practice { grid-template-columns: 1.15fr .85fr; }
.practice-demo {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #0b0b10;
  box-shadow: var(--shadow);
}
.browser-bar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #34343d; }
.browser-bar span {
  margin-left: 13px;
  padding: 7px 18px;
  border-radius: 7px;
  background: #121218;
  color: #696976;
  font-size: 10px;
}
.practice-body { padding: 37px; }
.practice-body > small { color: #9a66f7; font-size: 9px; font-weight: 600; letter-spacing: .14em; }
.practice-body h3 { margin: 8px 0 24px; font-size: 26px; }
.prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 15px 14px 20px;
  border: 1px solid rgba(142,75,255,.36);
  border-radius: 14px;
  background: #101017;
  color: #d8d8df;
  font-size: 13px;
}
.prompt b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gradient);
}
.answer {
  display: flex;
  gap: 13px;
  margin-top: 14px;
  padding: 17px;
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  color: #a9a9b5;
  font-size: 12px;
}
.answer i { color: #b569ff; font-style: normal; }
.practice-progress { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.practice-progress > span { flex: 1; height: 4px; border-radius: 99px; background: #202028; }
.practice-progress > span i { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--gradient); }
.practice-progress b { color: #777783; font-size: 10px; }

.tools-section,
.income-section {
  padding: 115px 0 120px;
  background: #09090c;
  border-block: 1px solid rgba(255,255,255,.055);
}
.center-heading { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.center-heading p { margin-bottom: 0; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tools-grid article {
  min-height: 230px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255,255,255,.048), rgba(255,255,255,.018));
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.tools-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(157,83,255,.38);
  background: linear-gradient(145deg, rgba(130,62,255,.09), rgba(255,255,255,.018));
}
.tools-grid article > i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 35px;
  border: 1px solid rgba(155,84,255,.25);
  border-radius: 14px;
  background: rgba(128,61,255,.1);
  color: #bd72ff;
  font-style: normal;
  font-size: 22px;
}
.tools-grid h3 { margin: 0 0 9px; font-size: 20px; font-weight: 600; letter-spacing: normal; }
.tools-grid p { margin: 0; color: #898995; font-size: 13px; line-height: 1.65; }

.pricing-section { padding-block: 120px; }
.pricing-tabs {
  width: fit-content;
  max-width: 100%;
  display: flex;
  gap: 5px;
  margin: 0 auto 24px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0e0e13;
  overflow-x: auto;
}
.pricing-tabs button {
  min-width: 116px;
  min-height: 46px;
  padding: 7px 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8e8e9a;
  white-space: nowrap;
  cursor: pointer;
}
.pricing-tabs button[aria-selected="true"] { background: #25202e; color: white; box-shadow: inset 0 0 0 1px rgba(167,91,255,.25); }
.pricing-tabs small { display: block; color: #9d65ee; font-size: 8px; }
.price-card {
  display: grid;
  grid-template-columns: 1.03fr .55fr 1.2fr;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(174,98,255,.28);
  border-radius: 24px;
  background: linear-gradient(125deg, #15101c, #0d0d12 45%, #101017);
  box-shadow: 0 32px 100px rgba(62,23,108,.24);
}
.price-main,
.price-credits,
.price-features { padding: 42px; }
.price-main > span,
.price-features > span,
.price-credits > span {
  color: #9b6bea;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .13em;
}
.price-main h3 { margin: 9px 0 7px; font-size: 29px; font-weight: 600; }
.price { display: flex; align-items: baseline; gap: 7px; margin: 12px 0; }
.price b { font-size: 45px; letter-spacing: normal; }
.price small { color: #858590; }
.price-main p { min-height: 60px; margin: 0 0 22px; color: #92929e; font-size: 13px; line-height: 1.6; }
.price-main .button { width: 100%; }
.price-credits {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-inline: 1px solid var(--line);
  background: radial-gradient(circle at 50% 54%, rgba(131,55,255,.18), transparent 56%);
  text-align: center;
}
.price-credits b { margin-top: 18px; font-size: 34px; letter-spacing: normal; }
.price-credits i {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  margin-top: 25px;
  border: 1px solid rgba(169,100,255,.38);
  border-radius: 50%;
  background: rgba(128,54,255,.08);
  color: #b76bff;
  font-size: 48px;
  font-style: normal;
  box-shadow: 0 0 0 18px rgba(132,62,255,.035), 0 0 0 36px rgba(132,62,255,.018);
}
.price-features ul { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.price-features li { display: flex; gap: 10px; color: #babac4; font-size: 12px; }
.price-features li::before {
  content: "✓";
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(83,220,173,.11);
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}
.price-note,
.income-note { margin: 17px auto 0; color: #6f6f7b; font-size: 11px; text-align: center; }

.income-section { background: linear-gradient(180deg,#09090c,#0c0910); }
.income-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.income-grid article {
  min-height: 190px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.income-grid i {
  display: block;
  color: #915ce9;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .12em;
}
.income-grid h3 { min-height: 50px; margin: 30px 0 10px; color: #d4d4dc; font-size: 15px; font-weight: 600; }
.income-grid b { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-size: 22px; letter-spacing: normal; }

.final-cta { padding-block: 120px; }
.final-card {
  position: relative;
  overflow: hidden;
  padding: 85px 25px;
  border: 1px solid rgba(153,82,255,.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% -15%, rgba(155,61,255,.25), transparent 46%),
    linear-gradient(120deg,#0d0c12,#110d17,#0d0c12);
  box-shadow: var(--shadow);
  text-align: center;
}
.final-card::before,
.final-card::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(158,86,255,.08);
  border-radius: 50%;
}
.final-card::before { left: -180px; top: -180px; }
.final-card::after { right: -180px; bottom: -180px; }
.final-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: var(--gradient);
  font-size: 29px;
  box-shadow: 0 15px 45px rgba(117,52,255,.4);
}
.final-card h2 { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.25; letter-spacing: normal; }
.final-card p { max-width: 600px; margin: 17px auto 27px; color: #9d9da8; }

.footer { border-top: 1px solid var(--line); background: #08080a; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr .65fr; gap: 85px; padding-block: 65px; }
.footer-about p { max-width: 380px; margin-top: 24px; color: #777783; font-size: 13px; line-height: 1.7; }
.footer h3 { margin: 0 0 20px; color: #d7d7de; font-size: 14px; }
.footer-grid > div:not(.footer-about) > a {
  display: block;
  width: fit-content;
  margin-top: 10px;
  color: #7f7f8a;
  font-size: 11px;
  text-decoration: none;
}
.footer-grid > div > a:hover { color: #b06aff; }
.footer a.social { display: flex !important; align-items: center; gap: 9px; margin-top: 14px !important; color: #b9b9c2 !important; font-size: 13px !important; }
.social i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #17171e; color: #aa63ff; font-style: normal; font-size: 11px; font-weight: 900; }
.footer-bottom { padding-block: 20px; border-top: 1px solid rgba(255,255,255,.055); color: #5f5f69; font-size: 10px; text-align: center; }

.lead-dialog {
  width: min(440px, calc(100% - 28px));
  padding: 34px;
  border: 1px solid rgba(166,92,255,.4);
  border-radius: 24px;
  background: #101015;
  color: white;
  box-shadow: 0 40px 120px #000;
}
.lead-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 17px; top: 14px; border: 0; background: none; color: #777783; font-size: 25px; cursor: pointer; }
.dialog-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 14px; background: var(--gradient); font-size: 28px; font-weight: 900; }
.lead-dialog > span { color: #9e69ee; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.lead-dialog h2 { margin: 8px 0; font-size: 30px; }
.lead-dialog > p { margin: 0 0 22px; color: #8b8b97; font-size: 12px; }
.lead-dialog form { display: grid; gap: 14px; }
.lead-dialog label { display: grid; gap: 6px; color: #c1c1ca; font-size: 11px; }
.lead-dialog input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #08080b; color: white; }
.lead-dialog input:focus { border-color: #9958f2; }
.form-success { display: grid; gap: 5px; padding: 17px; border-radius: 12px; background: rgba(59,218,169,.08); color: #58dfb4; font-size: 12px; }
.form-success span { color: #8e9f9a; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .header { padding-inline: 20px; }
  .nav { gap: 5px; }
  .nav a { padding-inline: 9px; font-size: 10px; }
  .section { gap: 40px; }
  .hero { min-height: 780px; }
  .dash-tools { grid-template-columns: repeat(2, 1fr); }
  .dash-tools article { min-height: 105px; }
  .price-card { grid-template-columns: 1fr 1fr; }
  .price-features { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .price-features ul { grid-template-columns: repeat(2, 1fr); }
  .price-credits { border-right: 0; }
  .income-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { gap: 40px; }
}

@media (max-width: 820px) {
  .section-shell { width: min(100% - 28px, 620px); }
  .promo { min-height: 42px; padding-inline: 35px; font-size: 10px; }
  .promo button { right: 10px; }
  .header { height: 61px; grid-template-columns: 1fr auto; }
  .profile-link { display: none; }
  .menu-toggle {
    justify-self: end;
    width: 39px;
    height: 39px;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #101014;
  }
  .menu-toggle i { width: 17px; height: 1px; display: block; background: white; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav {
    position: absolute;
    top: 61px;
    left: 14px;
    right: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(12,12,16,.98);
    box-shadow: 0 20px 60px #000;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px; }
  .nav a { border-radius: 10px; text-align: center; font-size: 13px; }
  .hero { min-height: 720px; padding-top: 72px; }
  .hero-icon { width: 62px; height: 62px; border-radius: 18px; font-size: 30px; }
  .hero h1 { font-size: clamp(43px, 13vw, 66px); }
  .hero > p { font-size: 15px; line-height: 1.6; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-dashboard { height: 300px; margin-top: 50px; }
  .dash-top { padding: 0 15px; }
  .dash-top > span,
  .dash-top em { display: none; }
  .dash-body { grid-template-columns: 43px 1fr; }
  .dash-content { padding: 20px 16px; }
  .dash-content h3 { font-size: 18px; }
  .dash-tools { gap: 7px; }
  .dash-tools article { min-height: 91px; padding: 11px; }
  .dash-tools article i { width: 25px; height: 25px; font-size: 11px; }
  .dash-tools article b { font-size: 11px; }
  .dash-tools article span { display: none; }
  .section { min-height: auto; grid-template-columns: 1fr; gap: 45px; padding-block: 85px; }
  .section-copy { max-width: none; text-align: center; }
  .section-copy h2, .center-heading h2 { font-size: 42px; }
  .section-copy p, .center-heading p { font-size: 14px; }
  .overview .section-copy { order: 1; }
  .overview .video-card { order: 2; }
  .practice .section-copy { order: 1; }
  .practice .practice-demo { order: 2; }
  .practice-body { padding: 24px 18px; }
  .practice-body h3 { font-size: 21px; }
  .tools-section, .income-section { padding-block: 85px; }
  .center-heading { margin-bottom: 35px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-grid article { min-height: 190px; }
  .pricing-section { padding-block: 85px; }
  .pricing-tabs { width: 100%; justify-content: flex-start; }
  .pricing-tabs button { min-width: 108px; }
  .price-card { grid-template-columns: 1fr; }
  .price-main, .price-credits, .price-features { padding: 28px; }
  .price-credits { min-height: 250px; border: 0; border-block: 1px solid var(--line); }
  .price-features { grid-column: auto; }
  .price-features ul { grid-template-columns: 1fr; }
  .income-grid { grid-template-columns: 1fr 1fr; }
  .income-grid article { min-height: 160px; }
  .income-grid article:last-child { grid-column: 1 / -1; }
  .income-grid h3 { margin-top: 20px; }
  .final-cta { padding-block: 85px; }
  .final-card { padding: 60px 20px; }
  .final-card h2 { font-size: 42px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button { transition: none; }
}

/* Light pulse from the large HASH symbol in the tariff card */
.price-credits i {
  position: relative;
  overflow: visible;
  animation: tariffHashCore 2.35s ease-in-out infinite;
}

.price-credits i::before,
.price-credits i::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(52, 226, 255, .68);
  border-radius: 50%;
  pointer-events: none;
  animation: tariffHashWave 2.35s ease-out infinite;
}

.price-credits i::after {
  animation-delay: 1.15s;
}

@keyframes tariffHashCore {
  0%, 100% {
    color: #3ae2ff;
    border-color: rgba(44, 216, 255, .42);
    text-shadow: 0 0 8px rgba(43, 224, 255, .42);
    box-shadow: 0 0 0 18px rgba(0,167,255,.035), 0 0 0 36px rgba(0,167,255,.018), 0 0 18px rgba(0,201,255,.16);
  }
  50% {
    color: #b8f8ff;
    border-color: rgba(126, 241, 255, .92);
    text-shadow: 0 0 12px #2ce6ff, 0 0 28px rgba(0,205,255,.9);
    box-shadow: 0 0 0 21px rgba(0,194,255,.12), 0 0 0 43px rgba(0,170,255,.055), 0 0 48px rgba(0,213,255,.62), inset 0 0 25px rgba(0,184,255,.12);
  }
}

/* Five income sources: real video replaces the former placeholder banner. */
.income-video-player {
  width: 100%;
  margin: 0 auto 28px;
}
.income-video-player video {
  width: 100%;
  aspect-ratio: 960 / 402;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(47, 199, 255, .25);
  border-radius: 22px;
  background: #02070b;
  box-shadow: 0 24px 70px rgba(0, 45, 72, .42);
  object-fit: contain;
}

@media (max-width: 820px) {
  .income-video-player {
    margin-bottom: 22px;
  }
  .income-video-player video {
    border-radius: 16px;
  }
}

@keyframes tariffHashWave {
  0% { transform: scale(1); opacity: .7; box-shadow: 0 0 20px rgba(31,218,255,.3); }
  72%, 100% { transform: scale(2.05); opacity: 0; box-shadow: 0 0 38px rgba(31,218,255,0); }
}

@media (prefers-reduced-motion: reduce) {
  .price-credits i,
  .price-credits i::before,
  .price-credits i::after { animation: none; }
}

/* Final calculator layout override: heading above, calculator strictly below */
.income-calculator {
  display: block;
  width: 100%;
  padding: 36px;
}

.income-calculator .calculator-copy {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 30px;
  text-align: left;
}

.income-calculator .calculator-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: 24px;
  align-items: start;
}

.income-calculator .calculator-fields {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 22px;
}

.income-calculator .calculator-fields h4 {
  grid-column: 1 / -1;
}

.income-calculator .calculator-fields label {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.income-calculator .calculator-fields input,
.income-calculator .calculator-fields select {
  grid-column: auto;
  width: 100%;
  min-width: 0;
}

.income-calculator .calculator-result {
  position: sticky;
  top: 86px;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-column: auto;
  gap: 8px;
  padding: 25px;
}

.income-calculator .calculator-result > b {
  font-size: clamp(34px, 3.4vw, 52px);
  white-space: normal;
}

.income-calculator > .button {
  display: flex;
  width: fit-content;
  margin: 25px auto 0;
}

@media (max-width: 1050px) {
  .income-calculator .calculator-layout {
    grid-template-columns: 1fr;
  }

  .income-calculator .calculator-result {
    position: static;
  }
}

@media (max-width: 620px) {
  .income-calculator {
    padding: 24px 17px;
  }

  .income-calculator .calculator-copy {
    margin-bottom: 22px;
  }

  .income-calculator .calculator-fields {
    grid-template-columns: 1fr;
    padding: 17px;
  }

  .income-calculator .calculator-fields h4 {
    grid-column: auto;
  }

  .income-calculator .calculator-result {
    padding: 20px 17px;
  }
}

/* Balanced calculator: inputs in one row, summary below */
.income-calculator .calculator-balanced {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

.income-calculator .calculator-balanced .calculator-fields {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 22px !important;
}

.income-calculator .calculator-balanced .calculator-fields label,
.income-calculator .calculator-balanced .calculator-fields label:first-child {
  display: grid !important;
  grid-column: auto !important;
  grid-template-rows: minmax(34px, auto) 46px !important;
  align-content: end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.income-calculator .calculator-balanced .calculator-fields input,
.income-calculator .calculator-balanced .calculator-fields select {
  height: 46px !important;
}

.income-calculator .calculator-balanced > .calculator-hint {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 20px !important;
  text-align: center !important;
}

.income-calculator .calculator-balanced .calculator-result {
  position: static !important;
  display: block !important;
  width: 100% !important;
  padding: 24px !important;
}

.calculator-total {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding-bottom: 23px;
  text-align: center;
}

.calculator-total > span {
  color: #9299a5;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.calculator-total > b {
  color: #72e9ff;
  font-size: clamp(45px, 5vw, 68px);
  line-height: 1;
}

.calculator-total > strong {
  color: #82ffca;
  font-size: 18px;
}

.calculator-total > small {
  color: #6f7782;
}

.income-calculator .calculator-balanced .calculator-breakdown {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  border: 0 !important;
}

.income-calculator .calculator-balanced .calculator-breakdown div {
  display: grid !important;
  min-height: 112px;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  justify-items: center;
  gap: 10px !important;
  padding: 17px 12px !important;
  border: 1px solid rgba(72,218,255,.13) !important;
  border-radius: 13px;
  background: rgba(0,17,25,.46);
  text-align: center;
}

.income-calculator .calculator-balanced .calculator-breakdown span {
  min-height: 30px;
  display: flex;
  align-items: center;
  color: #8f99a3;
  line-height: 1.3;
}

.income-calculator .calculator-balanced .calculator-breakdown b {
  color: #65e3ff;
  font-size: clamp(24px, 2.2vw, 34px);
}

@media (max-width: 1050px) {
  .income-calculator .calculator-balanced .calculator-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .income-calculator .calculator-balanced .calculator-fields label:first-child {
    grid-column: 1 / -1 !important;
  }

  .income-calculator .calculator-balanced .calculator-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .income-calculator .calculator-balanced .calculator-fields,
  .income-calculator .calculator-balanced .calculator-breakdown {
    grid-template-columns: 1fr !important;
  }

  .income-calculator .calculator-balanced .calculator-fields label:first-child {
    grid-column: auto !important;
  }

  .calculator-total > b {
    font-size: 44px;
  }
}

/* Compact five-field calculator */
.income-calculator .calculator-layout {
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr) !important;
  max-width: 1000px;
  margin-inline: auto;
}

.income-calculator .calculator-fields {
  align-content: start;
}

.income-calculator .calculator-fields label:first-child,
.income-calculator .calculator-hint {
  grid-column: 1 / -1;
}

.income-calculator .calculator-hint {
  margin: 5px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(70, 214, 255, .12);
  border-radius: 10px;
  background: rgba(0, 153, 214, .055);
  color: #788994;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 1050px) {
  .income-calculator .calculator-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .income-calculator .calculator-fields label:first-child,
  .income-calculator .calculator-hint {
    grid-column: auto;
  }
}

/* Corrections v3: card alignment, exclusions, full marketing calculator and visible motion */
.logo-mark {
  animation: hashPulseVisible 2.1s ease-in-out infinite;
}

@keyframes hashPulseVisible {
  0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 16px rgba(31,206,255,.3), inset 0 1px rgba(255,255,255,.35); }
  50% { transform: scale(1.09); filter: brightness(1.55); box-shadow: 0 0 42px rgba(31,218,255,.78), 0 0 75px rgba(0,149,255,.4), inset 0 1px rgba(255,255,255,.65); }
}

.button,
.profile-link,
.pricing-tabs button,
.tool-video,
.income-video,
.nav a {
  position: relative;
  overflow: hidden;
  animation: liveElementGlowVisible 2.8s ease-in-out infinite;
}

.button::after,
.profile-link::after,
.pricing-tabs button::after,
.tool-video::after,
.income-video::after,
.nav a::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -80%;
  bottom: -80%;
  left: -55%;
  width: 32%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(145,240,255,.38), transparent);
  animation: clickableShimmer 3.4s ease-in-out infinite;
}

.button > *,
.profile-link > *,
.income-video > *,
.nav a > * { position: relative; z-index: 1; }

@keyframes liveElementGlowVisible {
  0%, 100% { border-color: rgba(68,209,255,.22); box-shadow: 0 0 8px rgba(44,207,255,.06); }
  50% { border-color: rgba(84,226,255,.66); box-shadow: 0 0 26px rgba(44,207,255,.28); }
}

@keyframes clickableShimmer {
  0%, 25% { left: -55%; opacity: 0; }
  40% { opacity: 1; }
  65%, 100% { left: 125%; opacity: 0; }
}

.dash-tools article {
  display: grid;
  grid-template-rows: 42px minmax(50px, auto) minmax(30px, auto);
  align-content: start;
}
.dash-tools article i { margin: 0; }
.dash-tools article b { display: flex; align-items: end; margin: 8px 0 0; line-height: 1.25; }
.dash-tools article span { display: block; margin-top: 6px; line-height: 1.35; }

.tools-grid article {
  display: grid;
  grid-template-rows: 54px minmax(58px, auto) 1fr;
  align-content: start;
}
.tools-grid article > i { margin: 0; }
.tools-grid h3 { display: flex; align-items: end; margin: 12px 0 9px; line-height: 1.25; }
.tools-grid p { align-self: start; }

.income-grid { align-items: stretch; }
.income-grid article {
  display: grid;
  grid-template-rows: 18px minmax(88px, auto) 1fr;
  align-content: start;
}
.income-grid h3 { display: flex; align-items: end; min-height: 0; margin: 18px 0 12px; line-height: 1.3; }
.income-grid b { align-self: start; }

.price-card {
  grid-template-columns: 1.03fr .55fr 1.2fr;
}
.price-exclusions {
  grid-column: 1 / -1;
  padding: 25px 42px 30px;
  border-top: 1px solid rgba(255,78,99,.18);
  background: rgba(67,8,18,.14);
}
.price-exclusions > span { color: #ff5c70; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.price-exclusions ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 24px; margin: 17px 0 0; padding: 0; list-style: none; }
.price-exclusions li { display: flex; align-items: flex-start; gap: 10px; color: #bc9299; font-size: 14px; line-height: 1.45; }
.price-exclusions li::before {
  content: "×";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255,68,91,.14);
  color: #ff5269;
  font-size: 15px;
  font-weight: 900;
}

.income-calculator {
  display: block;
  padding: 36px;
}
.calculator-copy { max-width: 760px; margin-bottom: 28px; }
.calculator-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); gap: 24px; align-items: start; }
.calculator-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 22px; border: 1px solid rgba(76,211,255,.14); border-radius: 18px; background: rgba(0,10,16,.48); }
.calculator-fields h4 { grid-column: 1 / -1; margin: 10px 0 0; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.08); color: #6ee5ff; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.calculator-fields h4:first-child { margin-top: 0; }
.calculator-fields label { display: grid; grid-template-columns: 1fr; gap: 7px; color: #b8bdc7; font-size: 12px; line-height: 1.35; }
.calculator-fields input,
.calculator-fields select {
  grid-column: auto;
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  outline: none;
  background: #05090d;
  color: #fff;
  font: inherit;
}
.calculator-fields input:focus,
.calculator-fields select:focus { border-color: #41d8ff; box-shadow: 0 0 0 3px rgba(65,216,255,.1); }
.calculator-result { position: sticky; top: 86px; display: grid; gap: 8px; padding: 25px; border: 1px solid rgba(72,218,255,.18); background: linear-gradient(145deg,rgba(0,25,37,.7),rgba(0,0,0,.32)); }
.calculator-result > span { color: #92a1ac; }
.calculator-result > b { color: #72e9ff; font-size: clamp(36px,4vw,56px); line-height: 1.08; }
.calculator-result > strong { color: #82ffca; font-size: 17px; }
.calculator-breakdown { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.calculator-breakdown div { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.calculator-breakdown span { color: #8f99a3; font-size: 11px; line-height: 1.35; text-transform: none; }
.calculator-breakdown b { color: #d9f8ff; font-size: 14px; white-space: nowrap; }
.income-calculator > .button { display: flex; width: fit-content; margin: 25px auto 0; }

@media (max-width: 980px) {
  .calculator-layout { grid-template-columns: 1fr; }
  .calculator-result { position: static; grid-column: auto; }
}

@media (max-width: 820px) {
  .price-exclusions { padding: 22px 18px; }
  .price-exclusions ul,
  .calculator-fields { grid-template-columns: 1fr; }
  .calculator-fields h4 { grid-column: auto; }
  .income-calculator { padding: 25px 18px; }
  .income-grid article { grid-template-rows: 18px auto auto; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark,
  .button,
  .profile-link,
  .pricing-tabs button,
  .tool-video,
  .income-video,
  .nav a,
  .button::after,
  .profile-link::after,
  .pricing-tabs button::after,
  .tool-video::after,
  .income-video::after,
  .nav a::after { animation: none; }
}

/* Neon rain theme based on the CSS pattern supplied by the user. */
.rain-background {
  --rain-color: #09f;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #000;
  background-image:
    radial-gradient(4px 100px at 0 235px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 252px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 150px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 253px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 204px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 134px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 179px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 299px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 215px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 281px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 158px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--rain-color) 100%, #0000 150%),
    radial-gradient(4px 100px at 0 210px, var(--rain-color), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--rain-color), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--rain-color) 100%, #0000 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: rainFall 150s linear infinite;
}

.rain-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(0, 153, 255, .13), transparent 42%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,4,8,.66));
}

.rain-background::after {
  --rain-filter: blur(1em) brightness(6);
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, #0000 0, #0000 2px, hsl(0 0% 4%) 2px);
  background-size: 8px 8px;
  animation: rainHue 10s linear infinite;
}

@keyframes rainHue {
  from { backdrop-filter: var(--rain-filter) hue-rotate(0deg); }
  to { backdrop-filter: var(--rain-filter) hue-rotate(360deg); }
}

@keyframes rainFall {
  0% {
    background-position:
      0 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 350.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

body { background: #000; }
.promo, .header, main, .footer { position: relative; z-index: 1; }
.promo {
  background: rgba(0, 8, 14, .82);
  border-color: rgba(39, 198, 255, .16);
  backdrop-filter: blur(18px);
}
.promo a, .nav a:hover { color: #35dfff; }
.header {
  background: rgba(0, 5, 9, .78);
  border-color: rgba(39, 198, 255, .13);
}
.logo small { background: linear-gradient(90deg, #087dff, #18d7ff); }
.logo > span:not(.logo-mark) { color: #20cfff; }
.profile-link b { border-color: rgba(44, 207, 255, .55); background: rgba(0, 32, 50, .62); }
.hero::before { background: radial-gradient(ellipse 58% 43% at 50% 44%, rgba(0, 134, 224, .17), transparent 68%); }
.stars { display: none; }
.hero-glow {
  background: radial-gradient(circle, rgba(0, 154, 255, .25), transparent 67%);
  filter: blur(24px);
}
.hero-icon,
.video-logo,
.final-icon,
.dialog-icon,
.logo-mark { box-shadow: 0 18px 60px rgba(0, 153, 255, .34), inset 0 1px rgba(255,255,255,.35); }
.eyebrow { color: #65c9ed; }
.button-primary { box-shadow: 0 14px 36px rgba(0, 138, 255, .28); }
.button-secondary {
  border-color: rgba(57, 210, 255, .22);
  background: rgba(0, 25, 39, .52);
}
.hero-dashboard,
.practice-demo,
.video-card {
  border-color: rgba(47, 199, 255, .22);
  background-color: rgba(0, 8, 14, .76);
  box-shadow: 0 30px 100px rgba(0, 45, 72, .48), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(18px);
}
.dash-top em,
.dash-tools article i {
  color: #36dfff;
  background: rgba(0, 161, 255, .13);
}
.dash-body aside i:first-child,
.answer i { color: #36dfff; }
.dash-tools article,
.prompt,
.answer {
  border-color: rgba(46, 196, 255, .15);
  background: rgba(0, 18, 28, .56);
}
.section-kicker,
.price-main > span,
.price-features > span,
.price-credits > span,
.income-grid i { color: #39cfff; }
.video-card {
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 164, 255, .22), transparent 27%),
    rgba(0, 8, 14, .78);
}
.tools-section,
.income-section {
  background: rgba(0, 7, 12, .67);
  border-color: rgba(46, 201, 255, .1);
  backdrop-filter: blur(8px);
}
.tools-grid article,
.income-grid article {
  border-color: rgba(49, 194, 255, .16);
  background: linear-gradient(145deg, rgba(0, 32, 49, .69), rgba(0, 9, 15, .7));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 48px rgba(0,0,0,.22);
}
.tools-grid article:hover {
  border-color: rgba(40, 218, 255, .48);
  background: linear-gradient(145deg, rgba(0, 77, 108, .62), rgba(0, 13, 22, .76));
  box-shadow: 0 20px 55px rgba(0, 102, 153, .15);
}
.tools-grid article > i {
  border-color: rgba(44, 211, 255, .28);
  background: rgba(0, 166, 255, .11);
  color: #41e5ff;
}
.pricing-tabs {
  border-color: rgba(51, 200, 255, .2);
  background: rgba(0, 8, 14, .82);
  backdrop-filter: blur(16px);
}
.pricing-tabs button[aria-selected="true"] {
  color: white;
  background: rgba(0, 129, 184, .3);
  box-shadow: inset 0 0 0 1px rgba(49, 219, 255, .28), 0 8px 24px rgba(0, 107, 164, .14);
}
.pricing-tabs small { color: #44ddff; }
.price-card {
  border-color: rgba(50, 216, 255, .3);
  background: linear-gradient(125deg, rgba(0, 32, 49, .86), rgba(0, 8, 14, .9) 45%, rgba(0, 24, 37, .86));
  box-shadow: 0 32px 100px rgba(0, 50, 79, .34);
  backdrop-filter: blur(18px);
}
.price-credits { background: radial-gradient(circle at 50% 54%, rgba(0, 173, 255, .17), transparent 56%); }
.price-credits i {
  border-color: rgba(44, 216, 255, .42);
  background: rgba(0, 151, 255, .09);
  color: #3ae2ff;
  box-shadow: 0 0 0 18px rgba(0, 167, 255, .035), 0 0 0 36px rgba(0, 167, 255, .018);
}
.final-card {
  border-color: rgba(52, 215, 255, .3);
  background:
    radial-gradient(circle at 50% -15%, rgba(0, 172, 255, .22), transparent 46%),
    linear-gradient(120deg, rgba(0,16,25,.9), rgba(0,34,50,.9), rgba(0,16,25,.9));
  box-shadow: 0 32px 100px rgba(0, 49, 75, .4);
  backdrop-filter: blur(16px);
}
.final-card::before,
.final-card::after { border-color: rgba(54, 211, 255, .11); }
.footer {
  border-color: rgba(44, 203, 255, .12);
  background: rgba(0, 6, 10, .84);
  backdrop-filter: blur(16px);
}
.footer-grid > div > a:hover,
.social i { color: #35dcff; }
.lead-dialog {
  border-color: rgba(48, 214, 255, .42);
  background: rgba(0, 13, 21, .96);
  box-shadow: 0 40px 120px #000, 0 0 80px rgba(0, 144, 211, .15);
}
.lead-dialog > span { color: #43dcff; }
.lead-dialog input:focus { border-color: #36dfff; }

@media (prefers-reduced-motion: reduce) {
  .rain-background,
  .rain-background::after { animation: none; }
  .rain-background::after { backdrop-filter: blur(1em) brightness(4); }
}

/* Mobile performance profile: preserve the neon-rain look without forcing
   phone GPUs to composite 36 animated gradients and full-screen filters. */
@media (max-width: 820px) {
  html,
  body { overflow-x: clip; }

  html { scroll-behavior: auto; }

  .rain-background {
    background-color: #000;
    background-image: radial-gradient(circle at 50% 18%, rgba(0, 142, 255, .15), transparent 55%);
    background-size: 100% 100%;
    animation: none;
  }

  .rain-background::before {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 5, 9, .72)),
      radial-gradient(circle, rgba(0, 175, 255, .22) 0 1px, transparent 1.35px);
    background-size: 100% 100%, 8px 8px;
  }

  .rain-background::after {
    --rain-filter: none;
    inset: -300px 0 0;
    background-image:
      radial-gradient(2px 70px at 18% 28%, rgba(0, 190, 255, .9), transparent 72%),
      radial-gradient(1.5px 55px at 72% 58%, rgba(0, 120, 255, .78), transparent 74%),
      radial-gradient(1px 45px at 43% 82%, rgba(70, 225, 255, .74), transparent 74%);
    background-size: 170px 300px, 230px 300px, 290px 300px;
    opacity: .72;
    animation: mobileRainLayer 5.5s linear infinite;
    backdrop-filter: none;
    will-change: transform;
  }

  .promo,
  .header,
  .hero-dashboard,
  .practice-demo,
  .video-card,
  .tools-section,
  .income-section,
  .pricing-tabs,
  .price-card,
  .final-card,
  .footer {
    backdrop-filter: none;
  }

  .hero-glow {
    filter: none;
    opacity: .72;
  }

  .hero-dashboard,
  .practice-demo,
  .video-card,
  .price-card,
  .final-card {
    box-shadow: 0 18px 50px rgba(0, 35, 55, .26);
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes mobileRainLayer {
  from { transform: translate3d(0, -300px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Mobile composition follows the reference landing's rhythm while keeping
   HASH-AI content, pricing and the lightweight neon-rain implementation. */
@media (max-width: 820px) {
  :root { --mobile-gutter: 24px; }

  body {
    overflow-x: clip;
    font-size: 16px;
  }

  html { scroll-padding-top: 72px; }

  .section-shell {
    width: calc(100% - (var(--mobile-gutter) * 2));
    max-width: 620px;
  }

  .promo {
    position: sticky;
    z-index: 60;
    top: 0;
    height: 48px;
    min-height: 48px;
    padding: 5px 34px 5px 16px;
    gap: 5px;
    background: rgba(9, 13, 18, .96);
    font-size: 11px;
    line-height: 1.25;
    backdrop-filter: none;
  }

  .promo button {
    right: 10px;
    min-width: 30px;
    min-height: 30px;
  }

  .header {
    position: sticky;
    z-index: 55;
    top: 48px;
    height: 64px;
    padding-inline: var(--mobile-gutter);
    background: rgba(2, 8, 13, .96);
    backdrop-filter: none;
  }

  .promo-dismissed .header { top: 0; }

  .logo { font-size: 19px; }
  .logo-mark {
    width: 30px;
    height: 30px;
    margin-right: 6px;
    font-size: 19px;
  }
  .logo small { margin-left: 6px; }

  .menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(8, 18, 25, .94);
  }

  .nav {
    top: 64px;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    padding: 8px;
    border-radius: 16px;
    background: rgba(2, 12, 19, .98);
  }

  .nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  .nav a:active { background: rgba(0, 166, 255, .1); }

  .hero {
    min-height: 100svh;
    justify-content: center;
    padding-block: 64px 72px;
  }

  .hero-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    font-size: 32px;
  }

  .eyebrow {
    margin-top: 28px;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .14em;
  }

  .hero h1 {
    max-width: 590px;
    margin-top: 22px;
    font-size: clamp(40px, 10vw, 44px);
    line-height: .99;
    letter-spacing: normal;
  }

  .hero h1 span {
    display: inline-block;
    font-size: .9em;
    white-space: nowrap;
  }

  .hero > p {
    max-width: 560px;
    margin-top: 25px;
    color: #b5b8bf;
    font-size: 16px;
    line-height: 1.68;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 31px;
  }

  .hero-actions .button {
    min-height: 50px;
    border-radius: 13px;
  }

  .hero-dashboard { display: none; }

  .section {
    gap: 40px;
    padding-block: 76px;
  }

  .section-copy {
    max-width: 560px;
    text-align: left;
  }

  .section-copy h2,
  .center-heading h2 {
    margin-top: 13px;
    font-size: clamp(34px, 9.2vw, 38px);
    line-height: 1.08;
    letter-spacing: normal;
  }

  .section-copy p,
  .center-heading p {
    margin-top: 19px;
    font-size: 16px;
    line-height: 1.65;
  }

  .section-copy .button {
    width: 100%;
    min-height: 50px;
    margin-top: 24px;
  }

  .overview .section-copy { order: 1; }
  .overview .video-card { order: 2; }
  .practice .practice-demo { order: 1; }
  .practice .section-copy { order: 2; }

  .video-card,
  .practice-demo {
    width: 100%;
    min-width: 0;
    border-radius: 20px;
  }

  .video-card { min-height: 310px; }
  .practice-body { padding: 25px 20px; }

  .tools-section,
  .income-section,
  .pricing-section,
  .final-cta {
    padding-block: 76px;
  }

  .center-heading {
    max-width: 600px;
    margin-bottom: 38px;
  }

  .tools-grid { gap: 12px; }
  .tools-grid article {
    min-height: 0;
    padding: 24px;
    border-radius: 18px;
  }
  .tools-grid article > i {
    width: 42px;
    height: 42px;
  }
  .tools-grid h3 {
    margin-top: 22px;
    font-size: 20px;
  }
  .tools-grid p {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.6;
  }

  .pricing-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    overflow: visible;
    border-radius: 18px;
  }

  .pricing-tabs button {
    width: auto;
    min-width: 0;
    min-height: 50px;
    padding: 9px 8px;
    border-radius: 12px;
    white-space: normal;
    line-height: 1.15;
  }

  .pricing-tabs button:last-child { grid-column: 1 / -1; }

  .price-card {
    min-width: 0;
    margin-top: 18px;
    border-radius: 22px;
  }

  .price-main,
  .price-credits,
  .price-features { padding: 28px 24px; }

  .price-main h3 { font-size: 31px; }
  .price-main .price b { font-size: clamp(42px, 13vw, 56px); }
  .price-main .button {
    width: 100%;
    min-height: 50px;
  }
  .price-credits { min-height: 220px; }
  .price-features li {
    padding-block: 11px;
    font-size: 14px;
    line-height: 1.45;
  }
  .price-note {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.55;
  }

  .income-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .income-grid article,
  .income-grid article:last-child {
    min-height: 100px;
    grid-column: auto;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border-radius: 17px;
  }

  .income-grid i {
    grid-column: 1;
    align-self: center;
    font-size: 10px;
  }
  .income-grid h3 {
    grid-column: 2;
    min-height: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
  }
  .income-grid b {
    grid-column: 3;
    font-size: clamp(17px, 5.2vw, 22px);
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }
  .income-note {
    margin-top: 22px;
    font-size: 11px;
    line-height: 1.55;
  }

  .final-card {
    min-height: 0;
    padding: 54px 24px;
    border-radius: 24px;
  }
  .final-card h2 {
    font-size: 38px;
    line-height: 1.08;
  }
  .final-card p {
    margin-block: 18px 28px;
    font-size: 16px;
    line-height: 1.6;
  }
  .final-card .button {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 52px;
  }

  .footer-grid {
    gap: 38px;
    padding-block: 52px 44px;
  }
  .footer-about p {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.7;
  }
  .footer h3 {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .footer-grid > div:not(.footer-about) > a {
    min-height: 32px;
    display: flex;
    align-items: center;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.35;
  }
  .footer a.social {
    width: fit-content;
    min-height: 46px;
    margin-top: 10px !important;
    padding-right: 16px;
    border-radius: 12px;
    background: rgba(0, 145, 255, .09);
  }
  .footer .footer-grid > div > a.social { min-height: 46px; }
  .footer-bottom {
    padding-block: 22px;
    font-size: 11px;
  }

  .lead-dialog {
    width: calc(100% - 32px);
    max-height: calc(100svh - 32px);
    overflow-y: auto;
    padding: 28px 22px;
    border-radius: 20px;
  }
}

@media (max-width: 380px) {
  :root { --mobile-gutter: 20px; }
  .promo { font-size: 10px; }
  .hero h1 { font-size: 40px; }
  .hero > p { font-size: 15px; }
  .income-grid article,
  .income-grid article:last-child {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
  }
  .income-grid b { font-size: 17px; }
}

@media (min-width: 600px) and (max-width: 820px) {
  .hero h1 { font-size: 48px; }
}

/* WebGL neural background ported from the live LidoRub landing. */
.radar-pattern {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
  background:
    radial-gradient(circle at 50% 20%, rgba(15, 38, 62, .42), transparent 55%),
    #020611;
}

.radar-pattern::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(2, 6, 17, .34);
}

.radar-pattern::after {
  content: none;
}

.neural-noise {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .42;
}

@keyframes hashRadarSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes hashRadarPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.82);
    opacity: .22;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neural-noise { opacity: .32; }
}

/* Tighter section rhythm: less empty space without compressing content. */
.section {
  min-height: auto;
  gap: 60px;
  padding-block: 84px;
}

.tools-section,
.income-section,
.pricing-section,
.final-cta {
  padding-block: 86px;
}

.center-heading { margin-bottom: 38px; }
.final-card { padding-block: 64px; }
.footer-grid {
  gap: 65px;
  padding-block: 52px;
}

@media (max-width: 980px) {
  .section {
    gap: 32px;
    padding-block: 64px;
  }

  .tools-section,
  .income-section,
  .pricing-section,
  .final-cta {
    padding-block: 64px;
  }

  .center-heading { margin-bottom: 32px; }
  .final-card { padding-block: 48px; }
  .footer-grid { padding-block: 44px; }
}

@media (max-width: 820px) {
  .hero {
    min-height: auto;
    padding-block: 52px 56px;
  }

  .section {
    gap: 30px;
    padding-block: 54px;
  }

  .tools-section,
  .income-section,
  .pricing-section,
  .final-cta {
    padding-block: 56px;
  }

  .center-heading { margin-bottom: 30px; }
  .final-card { padding-block: 44px; }
  .footer-grid { padding-block: 42px 34px; }
}

/* Readability pass: larger supporting copy without enlarging display headings. */
.nav a { font-size: 15px; }

.button { font-size: 15px; }

.hero > p,
.section-copy p,
.center-heading p,
.final-card p { font-size: 18px; }

.tools-grid p { font-size: 16px; }

.tools-grid h3 { font-size: 22px; }

.income-grid h3 { font-size: 16px; }

.price-main p,
.price-features li { font-size: 15px; }

.footer-about p,
.footer-grid > div:not(.footer-about) > a { font-size: 14px; }

@media (max-width: 820px) {
  .nav a { font-size: 16px; }

  .hero > p,
  .section-copy p,
  .center-heading p,
  .final-card p { font-size: 18px; }

  .tools-grid p,
  .price-features li { font-size: 16px; }

  .button,
  .hero-actions .button,
  .section-copy .button,
  .price-main .button,
  .final-card .button { font-size: 16px; }

  .footer-about p,
  .footer-grid > div:not(.footer-about) > a { font-size: 14px; }
}

/* Desktop hero scale matched to the AI-Seven reference. */
@media (min-width: 821px) {
  .nav a { font-size: 12px; }

  .profile-link { font-size: 14px; }

  .hero h1 {
    max-width: 1120px;
    font-size: clamp(72px, 5.25vw, 90px);
    line-height: 1.02;
  }

  .hero > p {
    max-width: 900px;
    font-size: 24px;
    line-height: 1.62;
  }

  .hero-actions .button {
    min-height: 56px;
    padding-inline: 30px;
    font-size: 18px;
  }
}

/* HASH-AI content and interaction update — 13.08.2026 */
.logo-mark {
  animation: hashPulse 3s ease-in-out infinite;
}

@keyframes hashPulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 18px 60px rgba(0, 153, 255, .28), inset 0 1px rgba(255,255,255,.35); }
  50% { filter: brightness(1.28); box-shadow: 0 18px 72px rgba(36, 214, 255, .58), 0 0 24px rgba(36, 214, 255, .28), inset 0 1px rgba(255,255,255,.55); }
}

.promo a,
.nav a,
.footer a:not(.logo),
.video-card button {
  animation: liveTextGlow 4.5s ease-in-out infinite;
}

@keyframes liveTextGlow {
  0%, 100% { filter: brightness(1); text-shadow: 0 0 0 rgba(55,218,255,0); }
  50% { filter: brightness(1.12); text-shadow: 0 0 13px rgba(55,218,255,.28); }
}

.button,
.profile-link,
.pricing-tabs button,
.tool-video,
.income-video,
.social {
  background-size: 220% 100%;
  animation: liveElementGlow 4.5s ease-in-out infinite;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease, background-position .6s ease;
}

@keyframes liveElementGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(44,207,255,0); }
  50% { box-shadow: 0 0 20px rgba(44,207,255,.13); }
}

.button:hover,
.profile-link:hover,
.pricing-tabs button:hover,
.tool-video:hover,
.income-video:hover,
.social:hover {
  background-position: 100% 0;
  filter: brightness(1.2);
  box-shadow: 0 0 28px rgba(44, 207, 255, .22);
}

.tool-video {
  position: relative;
  cursor: pointer;
}

.tool-video:focus-visible {
  outline: 2px solid #49dcff;
  outline-offset: 3px;
}

.tool-play {
  position: absolute;
  top: 21px;
  right: 20px;
  color: #64dfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: .65;
}

.tool-video:hover .tool-play { opacity: 1; }

.price-credits b { white-space: nowrap; }

.pricing-lead {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px 50px;
  align-items: center;
  margin-top: 34px;
  padding: 32px;
  border: 1px solid rgba(63, 205, 255, .2);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(7, 19, 28, .94), rgba(8, 9, 14, .96));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .28);
  scroll-margin-top: 120px;
}

.pricing-lead h3,
.income-calculator h3 { margin: 8px 0 10px; font-size: clamp(25px, 3vw, 39px); }
.pricing-lead p,
.income-calculator p { margin: 0; color: #9496a2; line-height: 1.6; }
.pricing-lead form { display: grid; gap: 12px; }
.pricing-lead label { display: grid; gap: 7px; color: #d0d3dc; font-size: 12px; font-weight: 700; }
.pricing-lead input {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  outline: none;
  background: #05070a;
  color: #fff;
  font: inherit;
}
.pricing-lead input:focus { border-color: #41d8ff; box-shadow: 0 0 0 3px rgba(65,216,255,.1); }
.pricing-lead .form-success { grid-column: 2; color: #7ceaff; }
.pricing-lead .form-success b,
.pricing-lead .form-success span { display: block; }

.income-video {
  display: flex;
  width: 100%;
  min-height: 170px;
  margin: 0 0 22px;
  padding: 28px;
  border: 1px solid rgba(66, 210, 255, .2);
  border-radius: 22px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  cursor: pointer;
  background: radial-gradient(circle at center, rgba(8,153,217,.14), transparent 55%), #090b10;
  color: #edfaff;
}
.income-video span { display: grid; width: 56px; height: 56px; border-radius: 50%; place-items: center; background: linear-gradient(135deg,#047eff,#41e1ff); box-shadow: 0 0 30px rgba(43,202,255,.28); }
.income-video b { font-size: 16px; }

.income-grid h3 { min-height: 66px; }
.income-grid b { display: block; font-size: clamp(16px, 1.45vw, 22px); line-height: 1.28; }

.income-calculator {
  display: grid;
  grid-template-columns: 1.1fr 1fr .95fr;
  gap: 25px;
  align-items: center;
  margin-top: 28px;
  padding: 34px;
  border: 1px solid rgba(66,210,255,.22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(6,16,24,.96), rgba(11,9,16,.96));
}
.calculator-fields { display: grid; gap: 18px; }
.calculator-fields label { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: #b8bdc7; font-size: 12px; }
.calculator-fields input { grid-column: 1 / -1; width: 100%; accent-color: #28ceff; cursor: pointer; }
.calculator-fields b { color: #67e3ff; }
.calculator-result { display: grid; gap: 6px; padding: 20px; border-radius: 17px; background: rgba(0,0,0,.22); }
.calculator-result span { color: #9299a5; font-size: 11px; text-transform: uppercase; }
.calculator-result b { color: #72e9ff; font-size: clamp(30px, 3vw, 46px); white-space: nowrap; }
.calculator-result small { color: #6f7782; line-height: 1.45; }
.income-calculator > .button { grid-column: 1 / -1; justify-self: center; }

.video-dialog {
  width: min(760px, calc(100% - 28px));
  padding: 18px;
  border: 1px solid rgba(72,216,255,.28);
  border-radius: 22px;
  background: #080b10;
  color: white;
  box-shadow: 0 35px 100px rgba(0,0,0,.72);
}
.video-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(10px); }
.video-dialog-close { position: absolute; z-index: 2; top: 25px; right: 25px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.7); color: #fff; font-size: 24px; }
.video-dialog video,
.video-placeholder { width: 100%; aspect-ratio: 16/9; border-radius: 15px; background: radial-gradient(circle at center, rgba(36,204,255,.13), transparent 52%), #030609; }
.video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.video-placeholder span { display: grid; width: 65px; height: 65px; border-radius: 50%; place-items: center; background: linear-gradient(135deg,#047eff,#3cdfff); box-shadow: 0 0 38px rgba(45,210,255,.35); }
.video-placeholder small { color: #7b8591; }
.video-dialog h2 { margin: 18px 4px 3px; font-size: 25px; }
[hidden] { display: none !important; }

@media (max-width: 980px) {
  .income-calculator { grid-template-columns: 1fr 1fr; }
  .calculator-result { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .pricing-lead,
  .income-calculator { grid-template-columns: 1fr; padding: 24px 18px; }
  .pricing-lead .form-success,
  .calculator-result,
  .income-calculator > .button { grid-column: auto; }
  .hero h1 { font-size: clamp(38px, 11vw, 62px); }
  .tool-play { position: static; display: inline-block; float: right; margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark,
  .button,
  .profile-link,
  .pricing-tabs button,
  .tool-video,
  .income-video,
  .social { animation: none; }
  .promo a,
  .nav a,
  .footer a:not(.logo),
  .video-card button { animation: none; }
}

/* Browser-verified final geometry — keep at the absolute end of the stylesheet */
.income-grid article {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.income-grid article > i {
  flex: 0 0 18px;
}

.income-grid article > h3 {
  display: block;
  flex: 0 0 66px;
  min-height: 66px;
  margin: 18px 0 12px;
  padding: 0;
  line-height: 1.3;
}

.income-grid article > b {
  display: block;
  margin: 0;
  align-self: stretch;
}

.income-calculator {
  display: block !important;
  width: 100% !important;
  padding: 38px !important;
}

.income-calculator > .calculator-copy {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 34px !important;
  text-align: center !important;
}

.income-calculator > .calculator-copy .section-kicker {
  text-align: center !important;
}

.income-calculator > .calculator-copy h3,
.income-calculator > .calculator-copy p {
  width: 100% !important;
  text-align: center !important;
}

.income-calculator > .calculator-layout {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

.income-calculator .calculator-fields {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px !important;
  padding: 22px !important;
}

.income-calculator .calculator-fields h4 {
  grid-column: 1 / -1 !important;
}

.income-calculator .calculator-fields label {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}

.income-calculator .calculator-fields input,
.income-calculator .calculator-fields select {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.income-calculator .calculator-result {
  position: sticky !important;
  top: 86px !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-column: auto !important;
  gap: 8px !important;
  padding: 25px !important;
}

.income-calculator .calculator-result > b {
  font-size: clamp(34px, 3.4vw, 52px) !important;
  white-space: normal !important;
}

.income-calculator > .button {
  display: flex !important;
  width: fit-content !important;
  margin: 26px auto 0 !important;
}

@media (max-width: 1050px) {
  .income-calculator > .calculator-layout {
    grid-template-columns: 1fr !important;
  }

  .income-calculator .calculator-result {
    position: static !important;
  }
}

@media (max-width: 620px) {
  .income-calculator {
    padding: 24px 17px !important;
  }

  .income-calculator > .calculator-copy {
    margin-bottom: 22px !important;
  }

  .income-calculator .calculator-fields {
    grid-template-columns: 1fr !important;
    padding: 17px !important;
  }

  .income-calculator .calculator-fields h4 {
    grid-column: auto !important;
  }

  .income-calculator .calculator-result {
    padding: 20px 17px !important;
  }
}

/* Absolute-final balanced calculator overrides */
.income-calculator > .calculator-layout.calculator-balanced {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.income-calculator > .calculator-layout.calculator-balanced > .calculator-fields {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 22px !important;
}

.income-calculator > .calculator-layout.calculator-balanced > .calculator-hint {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 20px !important;
  text-align: center !important;
}

.income-calculator > .calculator-layout.calculator-balanced > .calculator-result {
  position: static !important;
  display: block !important;
  width: 100% !important;
  grid-column: auto !important;
  padding: 24px !important;
}

.income-calculator > .calculator-layout.calculator-balanced .calculator-breakdown {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 1050px) {
  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields label:first-child {
    grid-column: 1 / -1 !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced .calculator-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields,
  .income-calculator > .calculator-layout.calculator-balanced .calculator-breakdown {
    grid-template-columns: 1fr !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields label:first-child {
    grid-column: auto !important;
  }
}

/* Responsive calculator system: follows its actual container, not one monitor size */
.income-calculator {
  container-name: income-calculator;
  container-type: inline-size;
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(22px, 3.2vw, 40px) !important;
}

.income-calculator > .calculator-copy {
  width: min(100%, 900px) !important;
  margin: 0 auto clamp(24px, 3vw, 36px) !important;
  padding-inline: clamp(0px, 2vw, 20px);
}

.income-calculator > .calculator-copy h3 {
  font-size: clamp(27px, 3.1vw, 42px) !important;
  line-height: 1.16 !important;
  text-wrap: balance;
}

.income-calculator > .calculator-copy p {
  font-size: clamp(13px, 1.25vw, 17px) !important;
}

.income-calculator > .calculator-layout.calculator-balanced {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
}

.income-calculator > .calculator-layout.calculator-balanced > .calculator-fields {
  gap: clamp(10px, 1.2vw, 14px) !important;
  padding: clamp(16px, 2vw, 24px) !important;
}

.income-calculator .calculator-fields label {
  font-size: clamp(11px, 1vw, 13px) !important;
}

.income-calculator .calculator-fields input,
.income-calculator .calculator-fields select {
  min-width: 0 !important;
  padding-inline: clamp(10px, 1vw, 14px) !important;
  font-size: clamp(12px, 1vw, 14px) !important;
}

.income-calculator > .calculator-layout.calculator-balanced > .calculator-result {
  padding: clamp(18px, 2.2vw, 26px) !important;
}

.income-calculator .calculator-total > b {
  font-size: clamp(42px, 5.2vw, 68px) !important;
}

.income-calculator .calculator-total > strong {
  font-size: clamp(15px, 1.5vw, 19px) !important;
  text-align: center;
}

.income-calculator .calculator-total > small {
  text-align: center;
  line-height: 1.45;
}

.income-calculator .calculator-breakdown div {
  min-width: 0;
  padding: clamp(14px, 1.6vw, 19px) clamp(9px, 1vw, 14px) !important;
}

.income-calculator .calculator-breakdown span {
  justify-content: center;
  text-align: center;
  text-wrap: balance;
}

.income-calculator .calculator-breakdown b {
  font-size: clamp(23px, 2.4vw, 35px) !important;
  white-space: nowrap;
}

/* Wide calculator: all controls and all result cards in one row */
@container income-calculator (min-width: 980px) {
  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields label:first-child {
    grid-column: auto !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced .calculator-breakdown {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Laptop and tablet: a balanced 1 + 2 + 2 form and a 2 × 2 result grid */
@container income-calculator (min-width: 540px) and (max-width: 979px) {
  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields label:first-child {
    grid-column: 1 / -1 !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced .calculator-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone and narrow embeds: one clean column */
@container income-calculator (max-width: 539px) {
  .income-calculator {
    padding: 22px 16px !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields,
  .income-calculator > .calculator-layout.calculator-balanced .calculator-breakdown {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .income-calculator > .calculator-layout.calculator-balanced > .calculator-fields label:first-child {
    grid-column: auto !important;
  }

  .income-calculator .calculator-total > b {
    font-size: clamp(38px, 13vw, 50px) !important;
  }

  .income-calculator .calculator-breakdown div {
    min-height: 104px;
  }

  .income-calculator > .button {
    width: 100% !important;
    text-align: center;
  }
}

/* Media-query fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .income-calculator .calculator-fields { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .income-calculator .calculator-fields label:first-child { grid-column: auto !important; }
    .income-calculator .calculator-breakdown { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }

  @media (min-width: 620px) and (max-width: 1099px) {
    .income-calculator .calculator-fields,
    .income-calculator .calculator-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .income-calculator .calculator-fields label:first-child { grid-column: 1 / -1 !important; }
  }

  @media (max-width: 619px) {
    .income-calculator .calculator-fields,
    .income-calculator .calculator-breakdown { grid-template-columns: 1fr !important; }
    .income-calculator .calculator-fields label:first-child { grid-column: auto !important; }
  }
}

/* Public currency controls: calculations stay RUB-based; displayed amounts use live FX. */
.header-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
.currency-switcher {
  display: grid;
  gap: 4px;
}
.currency-switcher label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9ca4af;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.currency-switcher select {
  min-width: 104px;
  padding: 8px 30px 8px 10px;
  border: 1px solid rgba(72, 209, 255, .32);
  border-radius: 10px;
  background: #07131b;
  color: #72e9ff;
  font-weight: 850;
  cursor: pointer;
}
.currency-switcher small {
  color: #697684;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}
.header-tools > .currency-switcher small { display: none; }
.calculator-currency {
  width: fit-content;
  margin: -12px 0 18px auto;
  padding: 10px 12px;
  border: 1px solid rgba(72, 209, 255, .16);
  border-radius: 13px;
  background: rgba(0, 20, 29, .62);
}

@media (max-width: 900px) {
  .header-tools .profile-link span { display: none; }
  .header-tools { gap: 7px; }
  .header-tools > .currency-switcher label > span { display: none; }
  .header-tools > .currency-switcher select { min-width: 88px; padding-inline: 8px; }
}

@media (max-width: 820px) {
  .header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
  }
  .header-tools {
    position: static;
    grid-column: 2;
    grid-row: 1;
  }
  .menu-toggle { grid-column: 3; grid-row: 1; }
}

@media (max-width: 560px) {
  .header-tools .profile-link { display: none; }
  .calculator-currency { margin: 0 0 16px; width: 100%; }
  .calculator-currency label { justify-content: space-between; }
  .calculator-currency select { flex: 1; }
}

/* Platform overview: shared heading above two unlabeled videos and one CTA below. */
.overview.section {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding-block: 100px;
}
.overview-copy {
  max-width: 850px;
}
.overview-copy h2 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: normal;
}
.overview-copy h2 span {
  color: transparent;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
}
.overview-copy p {
  max-width: 820px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.overview-videos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.overview-videos video {
  width: 100%;
  aspect-ratio: 960 / 402;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(47, 199, 255, .25);
  border-radius: 20px;
  background: #02070b;
  box-shadow: 0 24px 70px rgba(0, 45, 72, .42);
  object-fit: contain;
}
.overview-action {
  display: flex;
  justify-content: center;
}
.overview-action .button {
  min-width: 230px;
}

@media (max-width: 820px) {
  .overview.section {
    gap: 26px;
    padding-block: 76px;
  }
  .overview-copy {
    max-width: none;
    text-align: left;
  }
  .overview-copy h2 {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.08;
  }
  .overview-copy p {
    font-size: 15px;
    line-height: 1.65;
  }
  .overview-videos {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .overview-action,
  .overview-action .button {
    width: 100%;
  }
}

/* Mobile pricing: independent vertical flow, no desktop grid inheritance */
@media (max-width: 620px) {
  .pricing-section {
    width: min(100% - 32px, 560px);
    padding-block: 70px;
  }

  .pricing-section .center-heading {
    padding-inline: 4px;
  }

  .pricing-section .center-heading h2 {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.15;
    text-wrap: balance;
  }

  .pricing-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 auto 18px !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-tabs button,
  .pricing-tabs button:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 118px !important;
    min-height: 48px !important;
    grid-column: auto !important;
    padding: 8px 13px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .pricing-tabs button[aria-selected="true"] {
    border: 1px solid rgba(66, 222, 255, .52) !important;
    background: linear-gradient(135deg, rgba(0,116,183,.42), rgba(0,36,56,.78)) !important;
  }

  .price-card {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "main"
      "credits"
      "features"
      "exclusions" !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .price-main {
    grid-area: main !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 25px 20px !important;
  }

  .price-main h3 {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .price-main .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
  }

  .price-main .price b {
    max-width: 100%;
    font-size: clamp(38px, 12vw, 50px) !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .price-main p {
    min-height: 0 !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
  }

  .price-main .button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal;
    text-align: center;
  }

  .price-credits {
    grid-area: credits !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 116px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 3px 14px !important;
    padding: 20px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-block: 1px solid var(--line) !important;
    text-align: left !important;
  }

  .price-credits > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .price-credits > b {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 100%;
    margin: 0 !important;
    font-size: clamp(26px, 8.6vw, 36px) !important;
    line-height: 1.05;
    white-space: nowrap !important;
  }

  .price-credits > i {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    font-size: 32px !important;
  }

  .price-features {
    grid-area: features !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    padding: 25px 20px !important;
    border: 0 !important;
  }

  .price-features ul {
    display: grid !important;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 16px !important;
  }

  .price-features li {
    min-width: 0;
    padding-block: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.055);
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  .price-exclusions {
    grid-area: exclusions !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    padding: 23px 20px !important;
  }

  .price-exclusions ul {
    display: grid !important;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .price-exclusions li {
    min-width: 0;
    font-size: 13px !important;
    overflow-wrap: anywhere;
  }

  .price-note {
    padding-inline: 8px;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 350px) {
  .pricing-section {
    width: min(100% - 24px, 560px);
  }

  .price-main,
  .price-credits,
  .price-features,
  .price-exclusions {
    padding-inline: 16px !important;
  }

  .price-credits {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    gap: 3px 10px !important;
  }

  .price-credits > i {
    width: 52px !important;
    height: 52px !important;
    font-size: 29px !important;
  }
}

.pricing-mobile-select { display: none; }

@media (max-width: 620px) {
  .pricing-tabs { display: none !important; }

  .pricing-mobile-select {
    width: 100%;
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    color: #75dff7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .pricing-mobile-select select {
    width: 100%;
    min-height: 54px;
    padding: 0 44px 0 16px;
    border: 1px solid rgba(58, 219, 255, .42);
    border-radius: 14px;
    outline: none;
    background: linear-gradient(135deg, rgba(0,45,69,.92), rgba(3,11,17,.96));
    color: #fff;
    font: 700 16px/1.2 inherit;
    text-transform: none;
    box-shadow: 0 0 25px rgba(38, 207, 255, .12);
  }

  .pricing-mobile-select select:focus {
    border-color: #66e8ff;
    box-shadow: 0 0 0 3px rgba(63, 218, 255, .12), 0 0 28px rgba(38, 207, 255, .17);
  }

  .price-credits > i {
    overflow: hidden !important;
  }

  .price-credits > i::before,
  .price-credits > i::after {
    display: none;
  }
}

/* Responsive income section: compact cards without mobile dead space */
.income-section {
  container-name: income-section;
  container-type: inline-size;
  padding-block: clamp(70px, 7vw, 112px) !important;
}

.income-section > .section-shell {
  width: min(100% - clamp(32px, 6vw, 64px), 1180px);
}

.income-section .center-heading {
  margin-bottom: clamp(26px, 3.6vw, 46px) !important;
}

.income-section .center-heading h2 {
  text-wrap: balance;
}

.income-section .center-heading p {
  max-width: 780px;
  margin-inline: auto;
  text-wrap: balance;
}

.income-video {
  min-height: clamp(112px, 11vw, 160px) !important;
  margin-bottom: clamp(16px, 2vw, 22px) !important;
  padding: clamp(18px, 2.5vw, 28px) !important;
}

.income-grid {
  width: 100%;
  align-items: stretch;
  gap: clamp(10px, 1.2vw, 14px) !important;
}

.income-grid article,
.income-grid article:last-child {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-column: auto !important;
  box-sizing: border-box;
  overflow: hidden;
}

.income-grid article > h3 {
  text-wrap: balance;
}

.income-grid article > b {
  overflow-wrap: anywhere;
}

.income-note {
  margin-top: clamp(16px, 2vw, 22px) !important;
  line-height: 1.5;
}

.income-calculator {
  margin-top: clamp(22px, 3vw, 30px) !important;
}

/* Wide screens */
@container income-section (min-width: 1050px) {
  .income-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .income-grid article {
    display: grid !important;
    grid-template-rows: 18px minmax(72px, auto) 1fr !important;
    align-content: start !important;
    padding: clamp(20px, 1.8vw, 25px) !important;
  }

  .income-grid article > h3 {
    display: flex !important;
    align-items: end !important;
    min-height: 0 !important;
    margin: 14px 0 12px !important;
  }
}

/* Tablet and compact laptop: 3 + 2 balanced rows */
@container income-section (min-width: 640px) and (max-width: 1049px) {
  .income-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .income-grid article {
    grid-column: span 2 !important;
    display: grid !important;
    grid-template-rows: 18px minmax(52px, auto) auto !important;
    padding: 20px !important;
  }

  .income-grid article:nth-child(4) {
    grid-column: 2 / span 2 !important;
  }

  .income-grid article:nth-child(5) {
    grid-column: 4 / span 2 !important;
  }

  .income-grid article > h3 {
    display: flex !important;
    align-items: end !important;
    min-height: 0 !important;
    margin: 13px 0 10px !important;
  }
}

/* Phone: compact horizontal information rows */
@container income-section (max-width: 639px) {
  .income-section {
    padding-block: 60px !important;
  }

  .income-section > .section-shell {
    width: min(100% - 32px, 560px);
  }

  .income-section .center-heading {
    margin-bottom: 24px !important;
  }

  .income-section .center-heading h2 {
    font-size: clamp(34px, 10vw, 43px) !important;
    line-height: 1.12;
  }

  .income-section .center-heading p {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .income-video {
    min-height: 98px !important;
    margin-bottom: 14px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }

  .income-video span {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
  }

  .income-video b {
    font-size: 13px !important;
    line-height: 1.35;
    text-align: left;
  }

  .income-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .income-grid article,
  .income-grid article:last-child {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-column: auto !important;
    align-items: start !important;
    gap: 5px 12px !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 15px !important;
  }

  .income-grid article > i {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 30px;
    height: 30px;
    display: grid !important;
    place-items: center;
    flex: none !important;
    border: 1px solid rgba(56,218,255,.22);
    border-radius: 9px;
    background: rgba(0,142,210,.08);
  }

  .income-grid article > h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .income-grid article > b {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(20px, 6vw, 25px) !important;
    line-height: 1.25 !important;
  }

  .income-note {
    margin-top: 16px !important;
    padding-inline: 4px;
    font-size: 10px !important;
  }

  .income-calculator {
    margin-top: 20px !important;
  }
}

@container income-section (max-width: 350px) {
  .income-section > .section-shell {
    width: min(100% - 24px, 560px);
  }

  .income-grid article,
  .income-grid article:last-child {
    grid-template-columns: 29px minmax(0, 1fr) !important;
    gap: 5px 9px !important;
    padding: 14px 12px !important;
  }

  .income-grid article > b {
    font-size: 20px !important;
  }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .income-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
  }

  @media (min-width: 700px) and (max-width: 1099px) {
    .income-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .income-grid article:last-child { grid-column: 1 / -1 !important; }
  }

  @media (max-width: 699px) {
    .income-grid { grid-template-columns: 1fr !important; }
  }
}