/* ============================================
   НОВАЯ СТРАНИЦА — БЛОК 1: One Gate / Every Trade
   Требует переменные из home.css (--blue, --text, --font и т.д.)
   ============================================ */

.ghero {
  --g-bg: #000000;
  --g-card: #131418;
  --g-border: rgba(255, 255, 255, 0.07);
  --g-green: #2ebd85;
  --g-red: #f6465d;
  --blue: #0173e5;
  --blue-hover: #1a84f0;

  position: relative;
  background: var(--g-bg);
  color: #ffffff;
  overflow: hidden;
}

.ghero__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 64px 72px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

/* ================= Левая колонка ================= */

.ghero__content {
  max-width: 560px;
  flex: 1 1 46%;
}

.ghero__title {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* Синий маркер за словом Trade — «закрашивается» после появления */
.ghero__mark {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  z-index: 0;
}

.ghero__mark::before {
  content: '';
  position: absolute;
  inset: 6% -8px 2% -8px;
  z-index: -1;
  background: var(--blue);
  border-radius: 16px;
  transform: rotate(-1.6deg) scaleX(0);
  transform-origin: left center;
  animation: ghMarkIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes ghMarkIn {
  to { transform: rotate(-1.6deg) scaleX(1); }
}

.ghero__subtitle {
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Форма-пилюля ---------- */

.ghero__form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  max-width: 460px;
  padding: 6px 6px 6px 20px;
  background: #141519;
  border: 1px solid var(--g-border);
  border-radius: 999px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ghero__form:focus-within {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.ghero__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  font: 500 15px var(--font);
  color: #fff;
  background: none;
  border: none;
  outline: none;
}

.ghero__input::placeholder {
  color: #6f7482;
}

.ghero__btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 30px;
  font: 600 15px var(--font);
  color: #000;
  background: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ghero__btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

.ghero__btn:active {
  transform: scale(1);
}

/* ---------- Соцсети и загрузка ---------- */

.ghero__extras {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  margin-top: 44px;
}

.ghero__label {
  font-size: 14px;
  color: #9aa0ad;
}

.ghero__icons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background: #141519;
  border: 1px solid var(--g-border);
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.icon-btn:hover {
  background: #1d1f26;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

.icon-btn--square {
  border-radius: 16px;
}

/* ================= Правая колонка ================= */

.ghero__right {
  flex: 1 1 54%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ghero__cards {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  /* низ карточек плавно растворяется в фоне */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

/* ---------- Мини-карточка BTC ---------- */

/* BTC-карточка лежит поверх карточки рынков и наезжает на её край */
.gcoin {
  position: relative;
  z-index: 2;
  flex: 0 0 225px;
  margin-top: 180px;
  margin-right: -18px;
  padding: 22px;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 20px;
  box-shadow: 14px 10px 36px rgba(0, 0, 0, 0.55);
}

.gcoin__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcoin__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #f9a23f, #ef8e19);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.gcoin__icon-img,
.grow__icon-img {
  display: block;
  object-fit: contain;
  background: transparent;
}

.gcoin__spark.is-down .gcoin__spark-line { stroke: var(--g-red); }
.gcoin__spark.is-down .gcoin__spark-area { opacity: 0.12; }
.gcoin__change.is-up { color: var(--g-green); }
.gcoin__change.is-down { color: var(--g-red); }

.gcoin__names {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.gcoin__names b {
  font-size: 16px;
  font-weight: 700;
}

.gcoin__names small {
  font-size: 13px;
  color: #9aa0ad;
}

.gcoin__spark {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 16px;
  overflow: visible;
}

.gcoin__spark-line {
  fill: none;
  stroke: var(--g-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ghSpark 1.4s ease 0.9s forwards;
}

@keyframes ghSpark {
  to { stroke-dashoffset: 0; }
}

.gcoin__spark-area {
  opacity: 0;
  animation: ghFadeIn 0.8s ease 1.7s forwards;
}

@keyframes ghFadeIn {
  to { opacity: 1; }
}

.gcoin__change {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 700;
  color: var(--g-green);
}

.gcoin__price {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
}

.gcoin__price span {
  color: #9aa0ad;
  font-weight: 400;
  margin-right: 6px;
}

/* ---------- Карточка рынков ---------- */

.gmarket {
  position: relative;
  z-index: 1;
  flex: 0 1 430px;
  padding: 26px 12px 12px;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 24px;
}

.gmarket__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
}

.gtabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gtabs::-webkit-scrollbar {
  display: none;
}

.gtabs__btn {
  position: relative;
  padding: 0 0 10px;
  font: 600 15px var(--font);
  color: #9aa0ad;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.gtabs__btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.3s ease;
}

.gtabs__btn:hover {
  color: #fff;
}

.gtabs__btn.is-active {
  color: #fff;
}

.gtabs__btn.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

.gmarket__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  font-size: 14px;
  color: #9aa0ad;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.gmarket__more:hover {
  color: #fff;
}

.gmarket__list {
  margin-top: 8px;
}

.grow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 17px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: background 0.25s ease;
}

.grow:hover {
  background: rgba(255, 255, 255, 0.04);
}

.grow__coin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.grow__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--c1, #444), var(--c2, #222));
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.grow__names {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.grow__names b {
  font-size: 15px;
  font-weight: 700;
}

.grow__names small {
  font-size: 13px;
  color: #9aa0ad;
}

.grow__price {
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  min-width: 80px;
}

.grow__change {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  min-width: 64px;
}

.grow__change.is-up   { color: var(--g-green); }
.grow__change.is-down { color: var(--g-red); }

/* ---------- Партнёры ---------- */

.ghero__partners {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.ghero__partners .ghero__label {
  margin: 0;
}

.ghero__partners-logos {
  display: flex;
  align-items: center;
  gap: 28px;
}

.ghero__partners-logos img {
  display: block;
  height: 34px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.ghero__partners-logos img:hover {
  opacity: 1;
}

.ghero__partners-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
}

/* ================= Появление при загрузке ================= */

.gh-anim {
  opacity: 0;
  transform: translateY(26px);
  animation: ghUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--gd, 0s);
}

@keyframes ghUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-anim {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ghero__mark::before {
    animation: none;
    transform: rotate(-1.6deg) scaleX(1);
  }
  .gcoin__spark-line {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .gcoin__spark-area {
    animation: none;
    opacity: 1;
  }
}

/* ================= Light-тема ================= */

[data-theme="light"] .ghero {
  --g-bg: #ffffff;
  --g-card: #f5f7fb;
  --g-border: rgba(15, 25, 45, 0.08);
  --g-green: #1ea567;
  --g-red: #e0314b;
  color: #0e1219;
}

[data-theme="light"] .ghero__form,
[data-theme="light"] .icon-btn {
  background: #f5f7fb;
}

[data-theme="light"] .icon-btn {
  color: #0e1219;
}

[data-theme="light"] .icon-btn:hover {
  background: #eceff5;
}

[data-theme="light"] .ghero__input {
  color: #0e1219;
}

[data-theme="light"] .ghero__btn {
  color: #fff;
  background: #0e1219;
}

[data-theme="light"] .ghero__btn:hover {
  box-shadow: 0 6px 20px rgba(15, 25, 45, 0.2);
}

[data-theme="light"] .ghero__mark {
  color: #fff;
}

[data-theme="light"] .icon-btn svg [fill="#fff"],
[data-theme="light"] .icon-btn svg path[fill="#fff"] {
  fill: #0e1219;
}

[data-theme="light"] .gtabs__btn:hover,
[data-theme="light"] .gtabs__btn.is-active,
[data-theme="light"] .gmarket__more:hover {
  color: #0e1219;
}

[data-theme="light"] .gtabs__btn::after {
  background: #0e1219;
}

[data-theme="light"] .grow {
  color: #0e1219;
}

[data-theme="light"] .grow:hover {
  background: rgba(15, 25, 45, 0.04);
}

[data-theme="light"] .ghero__partners-divider {
  background: rgba(15, 25, 45, 0.2);
}

/* ================= Адаптив ================= */

@media (max-width: 1280px) {
  .gcoin {
    margin-top: 120px;
  }
}

@media (max-width: 1200px) {
  .ghero__container {
    padding: 80px 40px 56px;
    flex-direction: column;
    gap: 56px;
  }
  .ghero__content {
    max-width: 640px;
    flex: none;
  }
  .ghero__right {
    max-width: none;
    width: 100%;
  }
  .ghero__cards {
    justify-content: flex-start;
  }
  .gcoin {
    margin-top: 0;
  }
  .gmarket {
    flex: 1 1 auto;
    max-width: 520px;
  }
}

@media (max-width: 720px) {
  .ghero__cards {
    flex-direction: column;
    gap: 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gcoin {
    flex: none;
    width: 100%;
    max-width: 340px;
    margin-right: 0;
    box-shadow: none;
  }
  .gmarket {
    width: 100%;
    max-width: none;
  }
  .ghero__extras {
    gap: 40px;
  }
  .ghero__partners {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .ghero__container {
    padding: 64px 20px 48px;
  }
  .ghero__form {
    max-width: none;
  }
  .ghero__btn {
    padding: 0 22px;
  }
  .ghero__extras {
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 36px;
  }
  .icon-btn {
    width: 50px;
    height: 50px;
  }
  .grow__price {
    min-width: 0;
  }
  .ghero__partners-logos {
    gap: 18px;
    flex-wrap: wrap;
  }
  .ghero__partners-logos img {
    height: 26px;
  }
}

/* ============================================
   НОВАЯ СТРАНИЦА — БЛОК 2: Coverage (5 карточек)
   Заменяет прошлую версию блока целиком.
   Требует переменные из home.css (--blue, --font и т.д.)
   ============================================ */

.gassets {
  --g-bg: #000000;
  --g-card: #1b1c21;
  --g-border: rgba(255, 255, 255, 0.06);
  --g-line: #b9d4f4;      /* светло-голубая обводка иллюстраций */
  --g-ill: #0d1420;       /* тёмно-синяя заливка иллюстраций */

  position: relative;
  background: var(--g-bg);
  color: #ffffff;
  padding: 88px 0 96px;
}

.gassets__container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 64px;
}

/* ---------- Заголовок ---------- */

.gassets__head {
  text-align: center;
}

.gassets__title {
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gassets__subtitle {
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 19px);
  color: #b8bdc7;
}

/* ---------- Сетка ---------- */

.gassets__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.gacard--wide  { grid-column: span 3; }
.gacard--small { grid-column: span 2; }

/* ---------- Карточка ---------- */

.gacard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 22px;
  padding: 36px;
  transition: border-color 0.4s ease, transform 0.4s ease;
}

.gacard:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
}

.gacard__title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gacard__desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #9aa0ad;
}

/* ---------- Ссылка Learn More ---------- */

.gacard__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  font-size: 14px;
  font-weight: 500;
  color: #9aa0ad;
  text-decoration: none;
  transition: color 0.3s ease;
  align-self: flex-start;
}

.gacard__more-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #cfd3db;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.gacard__more-arrow svg {
  transition: transform 0.3s ease;
}

.gacard__more:hover {
  color: #fff;
}

.gacard__more:hover .gacard__more-arrow {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.gacard__more:hover .gacard__more-arrow svg {
  transform: translate(1px, -1px);
}

/* ---------- Широкие карточки с иллюстрацией ---------- */

.gacard--wide {
  min-height: 260px;
}

.gacard--wide .gacard__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 58%;
}

.gacard__art {
  position: absolute;
  top: 50%;
  right: 28px;
  width: min(38%, 230px);
  height: auto;
  transform: translateY(-50%);
  overflow: visible;
  filter: drop-shadow(0 14px 30px rgba(1, 115, 229, 0.22));
}

/* ---------- Мини-иллюстрации маленьких карточек ---------- */

.gacard--small {
  padding-right: 150px;
}

.gacard__mini {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 96px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(1, 115, 229, 0.2));
}

/* ---------- Общие стили SVG-иллюстраций ---------- */

.ga-line {
  stroke: var(--g-line);
  stroke-width: 2.5;
}

.ga-fill {
  fill: var(--g-ill);
}

.ga-accent {
  fill: var(--blue);
}

.ga-accent-soft {
  fill: #1e4f8f;
}

.ga-linefill {
  fill: #cfe2fb;
}

.ga-accent-stroke {
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.ga-ghost {
  stroke: rgba(1, 115, 229, 0.5);
  stroke-width: 2.5;
  fill: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ga-grid-level {
  stroke: rgba(1, 115, 229, 0.35);
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}

.ga-link {
  stroke: rgba(1, 115, 229, 0.45);
  stroke-width: 2;
}

.ga-ring {
  stroke: var(--blue);
  stroke-width: 2;
  fill: none;
  opacity: 0;
}

.ga-dot--soft { fill: #bfe0ff; }
.ga-dot--blue { fill: var(--blue); }

/* Части иллюстраций плавно двигаются при ховере карточки */
.ga-art-back,
.ga-art-front,
.ga-art-head,
.ga-art-coins {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Buy Crypto: кредитка отъезжает вверх, телефон вниз, стрелка часов крутится --- */

.gacard--buy:hover .ga-art-back {
  transform: translate(-5px, -7px) rotate(-2deg);
}

.gacard--buy:hover .ga-art-front {
  transform: translate(4px, 5px);
}

.ga-clock-hand {
  transform-box: fill-box;
  transform-origin: 1.4px 1.4px;
}

.gacard--buy:hover .ga-clock-hand {
  animation: gaSpin 1.6s linear infinite;
}

@keyframes gaSpin {
  to { transform: rotate(360deg); }
}

/* --- Earn: робот кивает, монеты выкатываются, антенна пульсирует --- */

.gacard--earn:hover .ga-art-head {
  transform: translateY(-5px);
}

.gacard--earn:hover .ga-art-coins {
  transform: translate(7px, -3px) rotate(4deg);
}

.ga-antenna {
  transform-box: fill-box;
  transform-origin: center;
}

.gacard--earn:hover .ga-antenna {
  animation: gaPulse 1.2s ease-in-out infinite;
}

@keyframes gaPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

/* Глаза моргают один раз при наведении */
.ga-eye {
  transform-box: fill-box;
  transform-origin: center;
}

.gacard--earn:hover .ga-eye {
  animation: gaBlink 0.5s ease 0.15s;
}

@keyframes gaBlink {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.12); }
}

/* --- Grid Trading: линия цены перерисовывается, точки пульсируют --- */

.gacard--grid:hover .ga-grid-price {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: gaDraw 0.9s ease forwards;
}

@keyframes gaDraw {
  to { stroke-dashoffset: 0; }
}

.ga-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.gacard--grid:hover .ga-dot {
  animation: gaDotPulse 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
}

@keyframes gaDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.45); }
}

/* --- Copy Trading: «копия» отъезжает, стрелка сдвигается --- */

.ga-copy-front,
.ga-copy-arrow {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gacard--copy:hover .ga-ghost {
  transform: translate(5px, -6px);
}

.gacard--copy:hover .ga-copy-front {
  transform: translate(-3px, 3px);
}

.gacard--copy:hover .ga-copy-arrow {
  transform: translate(3px, -3px);
}

/* --- Broker: узлы разлетаются, вокруг центра расходится кольцо --- */

.ga-sat {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gacard--broker:hover .ga-sat {
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.12);
}

.ga-ring {
  transform-box: fill-box;
  transform-origin: center;
}

.gacard--broker:hover .ga-ring {
  animation: gaRing 1.6s ease-out infinite;
}

@keyframes gaRing {
  0%   { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0;   transform: scale(1.25); }
}

/* ---------- Появление при скролле ---------- */

.ga-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
          opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--gar, 0s),
          transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--gar, 0s);
}

.ga-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ховер-подъём не конфликтует с reveal-transform */
.gacard.ga-reveal.is-visible:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .ga-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gacard,
  .ga-art-back,
  .ga-art-front,
  .ga-art-head,
  .ga-art-coins {
    transition: none;
  }
  .gacard--buy:hover .ga-clock-hand,
  .gacard--earn:hover .ga-antenna,
  .gacard--earn:hover .ga-eye,
  .gacard--grid:hover .ga-grid-price,
  .gacard--grid:hover .ga-dot,
  .gacard--broker:hover .ga-ring {
    animation: none;
  }
  .ga-ghost,
  .ga-copy-front,
  .ga-copy-arrow,
  .ga-sat {
    transition: none;
  }
}

/* ================= Light-тема ================= */

[data-theme="light"] .gassets {
  --g-bg: #ffffff;
  --g-card: #f5f7fb;
  --g-border: rgba(15, 25, 45, 0.08);
  --g-line: #1e5fae;
  --g-ill: #ffffff;
  color: #0e1219;
}

[data-theme="light"] .ga-linefill {
  fill: #b9cfec;
}

[data-theme="light"] .ga-accent-soft {
  fill: #5a97dd;
}

[data-theme="light"] .ga-dot--soft {
  fill: #7db4ec;
}

[data-theme="light"] .gassets__subtitle,
[data-theme="light"] .gacard__desc {
  color: #5b6474;
}

[data-theme="light"] .gacard:hover {
  border-color: rgba(15, 25, 45, 0.16);
}

[data-theme="light"] .gacard__more {
  color: #5b6474;
}

[data-theme="light"] .gacard__more:hover {
  color: #0e1219;
}

[data-theme="light"] .gacard__more-arrow {
  border-color: rgba(15, 25, 45, 0.3);
  color: #454c59;
}

/* ================= Адаптив ================= */

@media (max-width: 1200px) {
  .gassets__container {
    padding: 0 40px;
  }
  .gassets__grid {
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .gassets {
    padding: 64px 0 72px;
  }
  .gassets__grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  .gacard--wide  { grid-column: span 2; }
  .gacard--small { grid-column: span 1; }
}

@media (max-width: 720px) {
  .gacard--small { grid-column: span 2; }
}

@media (max-width: 600px) {
  .gassets {
    padding: 48px 0 56px;
  }
  .gassets__container {
    padding: 0 20px;
  }
  .gacard {
    padding: 26px;
  }
  .gacard--small {
    padding-right: 116px;
  }
  .gacard__mini {
    top: 24px;
    right: 22px;
    width: 78px;
  }
  .gacard--wide {
    min-height: 0;
  }
  /* Иллюстрация — в поток над текстом */
  .gacard__art {
    position: static;
    width: 64%;
    max-width: 220px;
    margin: 0 auto 20px;
    transform: none;
  }
  .gacard--wide .gacard__body {
    max-width: none;
  }
}

/* ============================================
   НОВАЯ СТРАНИЦА — БЛОК 3: Trade Anytime, Anywhere
   Требует переменные из home.css (--blue, --font).
   ============================================ */

.gtrade {
  position: relative;
  background: #0173e5;
  color: #ffffff;
  overflow: hidden;
}

.gtrade__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 88px 64px 0;
  text-align: center;
}

/* ---------- Заголовок ---------- */

.gtrade__title {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gtrade__subtitle {
  max-width: 640px;
  margin: 16px auto 0;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}

/* ---------- Картинка с блюром снизу ---------- */

.gtrade__media {
  position: relative;
  width: min(56%, 480px);
  margin: 72px auto 0;
  line-height: 0;
}

.gtrade__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* лёгкое приближение при наведении */
.gtrade__media:hover .gtrade__img {
  transform: scale(1.025);
}

/* Слой размытия: блюрит нижнюю часть картинки,
   сила растёт к нижнему краю за счёт маски */
.gtrade__blur {
  position: absolute;
  inset: 52% 0 0 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 65%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 65%);
}

/* Поверх блюра — растворение в синий фон */
.gtrade__fade {
  position: absolute;
  inset: 62% 0 0 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--blue) 92%);
}

/* Фолбэк без backdrop-filter — просто более плотное растворение */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gtrade__fade {
    inset: 50% 0 0 0;
    background: linear-gradient(180deg, transparent 0%, var(--blue) 80%);
  }
}

/* ---------- Появление: подъезжает и слегка масштабируется ---------- */

.gtrade__media.ga-reveal {
  transform: translateY(48px) scale(0.93);
}

.gtrade__media.ga-reveal.is-visible {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .gtrade__media.ga-reveal {
    transform: none;
  }
  .gtrade__img,
  .gtrade__media:hover .gtrade__img {
    transition: none;
    transform: none;
  }
}

/* ================= Адаптив ================= */

@media (max-width: 992px) {
  .gtrade__container {
    padding: 64px 40px 0;
  }
  .gtrade__media {
    width: min(64%, 440px);
    margin-top: 56px;
  }
}

@media (max-width: 600px) {
  .gtrade__container {
    padding: 48px 20px 0;
  }
  .gtrade__media {
    width: 84%;
    margin-top: 40px;
  }
  .gtrade__blur {
    inset: 58% 0 0 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}


/* ============================================
   НОВАЯ СТРАНИЦА — БЛОК 4: Safeguard Every Trade
   Требует переменные из home.css (--blue, --font).
   ============================================ */

.gsafe {
  --g-bg: #000000;
  --g-card: #17181d;
  --g-border: rgba(255, 255, 255, 0.06);

  position: relative;
  background: var(--g-bg);
  color: #ffffff;
  padding: 88px 0 96px;
}

.gsafe__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 64px;
}

/* ---------- Заголовок ---------- */

.gsafe__head {
  text-align: center;
}

.gsafe__title {
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gsafe__subtitle {
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 19px);
  color: #b8bdc7;
}

/* ---------- Сетка ---------- */

.gsafe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

/* ---------- Карточка ---------- */

.gscard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 16px;
  padding: 30px;
  transition: border-color 0.4s ease, transform 0.4s ease;
}

.gscard:hover {
  border-color: rgba(1, 115, 229, 0.3);
  transform: translateY(-4px);
}

.gscard.ga-reveal.is-visible:hover {
  transform: translateY(-4px);
}

.gscard__title {
  margin-top: 22px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gscard__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #9aa0ad;
}

/* Стрелка-ссылка */
.gscard__arrow {
  display: inline-flex;
  margin-top: auto;
  padding-top: 26px;
  color: #cfd3db;
  align-self: flex-start;
  transition: color 0.3s ease;
}

.gscard__arrow svg {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gscard__arrow:hover {
  color: var(--blue);
}

.gscard:hover .gscard__arrow svg {
  transform: translateX(5px);
}

/* ---------- Иконки ---------- */

.gs-ico {
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.gscard:hover .gs-ico {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 20px rgba(1, 115, 229, 0.5));
}

/* Галочка на щите перерисовывается */
.gs-shield-check {
  stroke-dasharray: 22;
  stroke-dashoffset: 0;
}

.gscard:hover .gs-ico--shield .gs-shield-check {
  animation: gsCheck 0.7s ease 0.1s backwards;
}

@keyframes gsCheck {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

/* Диск сейфа прокручивается */
.gs-dial {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gscard:hover .gs-ico--safe .gs-dial {
  transform: rotate(135deg);
}

/* Меридиан глобуса «вращается» */
.gs-meridian {
  transform-box: fill-box;
  transform-origin: center;
}

.gscard:hover .gs-ico--globe .gs-meridian {
  animation: gsSpinY 1.6s ease-in-out infinite;
}

@keyframes gsSpinY {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.25); }
}

/* ---------- Широкая карточка с картой ---------- */

.gscard--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  padding: 36px;
}

.gscard--wide .gscard__body {
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
}

.gscard--wide .gscard__arrow {
  padding-top: 20px;
}

.gsafe__map {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1s ease 0.35s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.ga-reveal.is-visible .gsafe__map {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Статистика ---------- */

.gsafe__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 24px;
  margin-top: 80px;
  list-style: none;
  padding: 0;
}

.gstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.gstat__value {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gstat__label {
  font-size: 14px;
  color: #9aa0ad;
}

/* ---------- prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .gscard,
  .gs-ico,
  .gs-dial,
  .gsafe__map {
    transition: none;
  }
  .gsafe__map {
    opacity: 1;
    transform: none;
  }
  .gscard:hover .gs-ico--shield .gs-shield-check,
  .gscard:hover .gs-ico--globe .gs-meridian {
    animation: none;
  }
}

/* ================= Light-тема ================= */

[data-theme="light"] .gsafe {
  --g-bg: #ffffff;
  --g-card: #f5f7fb;
  --g-border: rgba(15, 25, 45, 0.08);
  color: #0e1219;
}

[data-theme="light"] .gsafe__subtitle,
[data-theme="light"] .gscard__desc,
[data-theme="light"] .gstat__label {
  color: #5b6474;
}

[data-theme="light"] .gscard__arrow {
  color: #454c59;
}

/* ================= Адаптив ================= */

@media (max-width: 1200px) {
  .gsafe__container {
    padding: 0 40px;
  }
}

@media (max-width: 992px) {
  .gsafe {
    padding: 64px 0 72px;
  }
  .gsafe__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  .gscard--wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .gscard--wide .gscard__body {
    flex: none;
    max-width: 560px;
  }
  .gsafe__stats {
    margin-top: 56px;
    justify-content: flex-start;
  }
  .gstat {
    flex: 1 1 calc(33% - 24px);
  }
}

@media (max-width: 600px) {
  .gsafe {
    padding: 48px 0 56px;
  }
  .gsafe__container {
    padding: 0 20px;
  }
  .gscard {
    padding: 24px;
  }
  .gsafe__stats {
    margin-top: 44px;
    gap: 28px 16px;
  }
  .gstat {
    flex: 1 1 calc(50% - 16px);
  }
  .gstat__value {
    font-size: 26px;
  }
  .gstat__label {
    font-size: 13px;
  }
}

/* ============================================
   НОВАЯ СТРАНИЦА — БЛОК 5: FAQs
   Требует переменные из home.css (--blue, --font).
   ============================================ */

.gfaq {
  --g-bg: #000000;
  --g-border: rgba(255, 255, 255, 0.08);

  position: relative;
  background: var(--g-bg);
  color: #ffffff;
  padding: 88px 0 96px;
}

.gfaq__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 64px;
}

.gfaq__title {
  text-align: center;
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gfaq__list {
  margin-top: 40px;
}

/* ---------- Пункт ---------- */

.gfaq__item {
  border-bottom: 1px solid var(--g-border);
}

.gfaq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 28px 4px;
  font: 700 16px/1.4 var(--font);
  letter-spacing: -0.01em;
  text-align: left;
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.gfaq__q:hover {
  color: var(--blue-hover, #1a84f0);
}

/* Шеврон */
.gfaq__chevron {
  flex: 0 0 auto;
  color: #9aa0ad;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.gfaq__q:hover .gfaq__chevron {
  color: var(--blue-hover, #1a84f0);
}

.gfaq__item.is-open .gfaq__chevron {
  transform: rotate(180deg);
  color: var(--blue);
}

/* ---------- Ответ: плавное раскрытие ---------- */

.gfaq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gfaq__a-inner {
  overflow: hidden;
  min-height: 0;
}

.gfaq__a-inner p {
  margin: 0;
  padding: 0 4px 28px;
  max-width: 860px;
  font-size: 15px;
  line-height: 1.65;
  color: #9aa0ad;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gfaq__item.is-open .gfaq__a {
  grid-template-rows: 1fr;
}

.gfaq__item.is-open .gfaq__a-inner p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .gfaq__a,
  .gfaq__a-inner p,
  .gfaq__chevron {
    transition: none;
  }
}

/* ================= Light-тема ================= */

[data-theme="light"] .gfaq {
  --g-bg: #ffffff;
  --g-border: rgba(15, 25, 45, 0.1);
  color: #0e1219;
}

[data-theme="light"] .gfaq__q {
  color: #0e1219;
}

[data-theme="light"] .gfaq__q:hover {
  color: var(--blue);
}

[data-theme="light"] .gfaq__a-inner p {
  color: #5b6474;
}

/* ================= Адаптив ================= */

@media (max-width: 992px) {
  .gfaq {
    padding: 64px 0 72px;
  }
  .gfaq__container {
    padding: 0 40px;
  }
}

@media (max-width: 600px) {
  .gfaq {
    padding: 48px 0 56px;
  }
  .gfaq__container {
    padding: 0 20px;
  }
  .gfaq__list {
    margin-top: 28px;
  }
  .gfaq__q {
    padding: 22px 2px;
    font-size: 15px;
    gap: 16px;
  }
  .gfaq__a-inner p {
    font-size: 14px;
    padding-bottom: 22px;
  }
}

/* ============================================
   НОВАЯ СТРАНИЦА — БЛОК 6 (последний): CTA
   Требует переменные из home.css (--blue, --blue-hover, --font).
   ============================================ */

.gcta {
  --g-bg: #000000;
  --g-card: #1b1c21;
  --g-border: rgba(255, 255, 255, 0.06);

  position: relative;
  background: var(--g-bg);
  color: #ffffff;
  padding: 24px 0 96px;
}

.gcta__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Карточка ---------- */

.gcta__card {
  position: relative;
  overflow: hidden;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 22px;
  padding: 96px 72px;
  transition: border-color 0.4s ease;
}

.gcta__card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.gcta__content {
  position: relative;
  z-index: 1;
  max-width: 62%;
}

.gcta__title {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.gcta__subtitle {
  margin-top: 18px;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  color: #9aa0ad;
}

/* ---------- Кнопка ---------- */

.gcta__btn {
  display: inline-block;
  margin-top: 44px;
  padding: 15px 26px;
  font: 600 15px var(--font);
  color: #fff;
  text-decoration: none;
  background: #0173e5;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.gcta__btn:hover {
  background: var(--blue-hover, #1a84f0);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(1, 115, 229, 0.4);
}

.gcta__btn:active {
  transform: translateY(0);
}

/* ---------- Картинка ---------- */

/* Прижата к правой части, обрезается краями карточки.
   Появляется чуть позже карточки — выезжает справа */
.gcta__img {
  position: absolute;
  right: 72px;
  top: 50%;
  height: 130%;
  width: auto;
  transform: translateY(-50%) translateX(48px);
  opacity: 0;
  transition:
          opacity 0.9s ease 0.3s,
          transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  pointer-events: none;
}

.ga-reveal.is-visible .gcta__img {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .gcta__img {
    opacity: 1;
    transform: translateY(-50%);
    transition: none;
  }
}

/* ================= Light-тема ================= */

[data-theme="light"] .gcta {
  --g-bg: #ffffff;
  --g-card: #f5f7fb;
  --g-border: rgba(15, 25, 45, 0.08);
  color: #0e1219;
}

[data-theme="light"] .gcta__subtitle {
  color: #5b6474;
}

[data-theme="light"] .gcta__card:hover {
  border-color: rgba(15, 25, 45, 0.16);
}

/* ================= Адаптив ================= */

@media (max-width: 1200px) {
  .gcta__card {
    padding: 72px 56px;
  }
  .gcta__img {
    right: 40px;
    height: 115%;
  }
}

@media (max-width: 992px) {
  .gcta {
    padding: 16px 0 72px;
  }
  .gcta__container {
    padding: 0 32px;
  }
  .gcta__card {
    padding: 56px 40px;
  }
  .gcta__content {
    max-width: 100%;
  }
  /* Картинка уходит в полупрозрачный фон справа */
  .gcta__img {
    right: -60px;
    height: 110%;
    opacity: 0.3;
  }
  .ga-reveal.is-visible .gcta__img {
    opacity: 0.3;
  }
}

@media (max-width: 600px) {
  .gcta {
    padding: 8px 0 56px;
  }
  .gcta__container {
    padding: 0 20px;
  }
  .gcta__card {
    padding: 40px 24px;
  }
  .gcta__btn {
    display: block;
    text-align: center;
    margin-top: 32px;
  }
  .gcta__img {
    right: -100px;
    opacity: 0.2;
  }
  .ga-reveal.is-visible .gcta__img {
    opacity: 0.2;
  }
}