/* =========================================================
   VIP Trading – homepage
   Built from VIP_Trading_Homepage_WORK.psd (1920 px artboard).

   Sizing: on desktop every size is written as
       calc(N * var(--px))      where N = pixels in the PSD
   and the root font-size follows the viewport width, so the whole
   page scales proportionally and is pixel-exact at 1920 px.
   Below 1200 px a separate fluid mobile/tablet layout is used.
   ========================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --bg: #07121f;
  --blue: #2194ff;
  --white: #fff;
  --line: #273443;
  --muted: #a3acb7;
  --px: 0.0625rem;            /* 1 design pixel */
  --header-h: calc(125 * var(--px));
}

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

html {
  font-size: calc(100vw / 120); /* 16px at 1920 */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: calc(25 * var(--px));
  line-height: 1.5;
  letter-spacing: -.014em;       /* matches the static Inter metrics used in the PSD */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

.page {
  position: relative;
  overflow: hidden;
  background: var(--bg) url("../img/hero-map.jpg") top center / calc(1920 * var(--px)) auto no-repeat;
}

.container {
  width: calc(1440 * var(--px));
  margin-inline: auto;
}

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

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(1, 5, 12, .3);
  transition: height .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.logo { margin-top: calc(38 * var(--px)); transition: margin .3s ease; }
.logo img { width: calc(322 * var(--px)); transition: width .3s ease; }

.nav {
  display: flex;
  gap: calc(65.25 * var(--px));
  margin-top: calc(59.5 * var(--px));
  margin-right: calc(4 * var(--px));
  transition: margin .3s ease;
}
.nav__link {
  position: relative;
  font-size: calc(25 * var(--px));
  line-height: 1;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav__link::after {            /* glowing underline of the active item */
  content: "";
  position: absolute;
  left: calc(-24 * var(--px));
  right: calc(-24 * var(--px));
  top: calc(100% + 2 * var(--px));
  height: calc(20 * var(--px));
  background:
    radial-gradient(ellipse 42% 12% at 50% 50%, #7fd0ff 0%, rgba(127, 208, 255, 0) 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(33, 148, 255, .75) 0%, rgba(33, 148, 255, 0) 100%);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.nav__link:hover { color: #9fd2ff; }
.nav__link.is-active::after,
.nav__link:hover::after { opacity: 1; transform: none; }
.nav__link:hover:not(.is-active)::after { opacity: .5; }

.header.is-scrolled {
  height: calc(88 * var(--px));
  background: rgba(7, 18, 31, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.header.is-scrolled .logo { margin-top: calc(20 * var(--px)); }
.header.is-scrolled .logo img { width: calc(260 * var(--px)); }
.header.is-scrolled .nav { margin-top: calc(31 * var(--px)); }

.burger { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(287 * var(--px));
  height: calc(65 * var(--px));
  padding-inline: calc(20 * var(--px));
  border-radius: 999px;
  background: linear-gradient(180deg, #2194ff 0%, #1c7ae0 38%, #1657b0 72%, #103c80 100%);
  box-shadow: 0 calc(10 * var(--px)) calc(30 * var(--px)) rgba(8, 40, 100, .35);
  color: rgba(255, 255, 255, .86);
  font-size: calc(18 * var(--px));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, color .2s ease;
}
.btn:hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 calc(14 * var(--px)) calc(36 * var(--px)) rgba(33, 148, 255, .35);
}
.btn:active { transform: none; filter: brightness(.96); }

/* ---------- Shared ---------- */
.panel {
  position: relative;
  border: calc(2 * var(--px)) solid var(--line);
  border-radius: calc(30 * var(--px));
  background: linear-gradient(90deg, #152432 0%, #0f1b29 46%, #08131f 100%);
}
.panel--flat { background: #0d1a27; }

.title {
  font-size: calc(50 * var(--px));
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: calc(60 * var(--px));
}
.text {
  font-size: calc(25 * var(--px));
  line-height: calc(37.5 * var(--px));
}
.text p + p { margin-top: calc(20 * var(--px)); }
.text--tight { line-height: calc(30 * var(--px)); }

.label {
  color: var(--blue);
  font-size: calc(18 * var(--px));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

section[id] { scroll-margin-top: calc(120 * var(--px)); }

/* ---------- Hero ---------- */
.hero {
  height: calc(1120 * var(--px));
  padding-top: calc(377.5 * var(--px));
}
.hero__title {
  font-size: calc(50 * var(--px));
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: calc(60 * var(--px));
}
.hero__text {
  max-width: calc(449 * var(--px));
  margin-top: calc(31 * var(--px));
  font-size: calc(25 * var(--px));
  line-height: calc(37.5 * var(--px));
}
.hero .btn { margin-top: calc(65 * var(--px)); }

/* ---------- Brands slider ---------- */
.slider {
  height: calc(335 * var(--px));
  padding: calc(39 * var(--px)) calc(46 * var(--px)) 0;
}
.slider__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(56 * var(--px)), #000 calc(100% - 56 * var(--px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(56 * var(--px)), #000 calc(100% - 56 * var(--px)), transparent 100%);
  touch-action: pan-y;
}
.slider__track {
  display: flex;
  gap: calc(14.4 * var(--px));
  will-change: transform;
}
.slider__item {
  flex: 0 0 auto;
  width: calc(212 * var(--px));
  border-radius: calc(7 * var(--px));
  overflow: hidden;
  user-select: none;
}
.slider__item img { width: 100%; transition: transform .5s ease, filter .3s ease; }
.slider__item:hover img { transform: scale(1.04); filter: brightness(1.1); }

.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: calc(50 * var(--px));
  height: calc(50 * var(--px));
  margin-top: calc(-25 * var(--px));
  border: calc(1.5 * var(--px)) solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(5, 15, 30, .82);
  display: grid;
  place-items: center;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.slider__arrow svg {
  width: 48%;
  height: 48%;
  fill: none;
  stroke: rgba(255, 255, 255, .6);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.slider__arrow--prev { left: calc(10 * var(--px)); }
.slider__arrow--next { right: calc(8 * var(--px)); }
.slider__arrow:hover { border-color: var(--blue); background: rgba(12, 40, 80, .9); transform: scale(1.06); }
.slider__arrow:hover svg { stroke: #fff; }

.brands__text {
  max-width: calc(1010 * var(--px));
  margin: calc(53 * var(--px)) auto 0;
  text-align: center;
  font-size: calc(25 * var(--px));
  line-height: calc(37.7 * var(--px));
}
.brands__text p + p { margin-top: calc(20 * var(--px)); }

/* ---------- Milestones ---------- */
.milestones { margin-top: calc(68 * var(--px)); }
.milestones__panel {
  display: grid;
  grid-template-columns: calc(604 * var(--px)) 1fr;
  column-gap: calc(12 * var(--px));
  min-height: calc(562 * var(--px));
  padding: calc(35.5 * var(--px)) calc(16 * var(--px)) calc(37 * var(--px)) calc(36 * var(--px));
}
.milestones__copy .text { margin-top: calc(30 * var(--px)); padding-left: calc(2 * var(--px)); }
.milestones__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(92 * var(--px));
}
.stats {
  display: grid;
  grid-template-columns: calc(146 * var(--px)) calc(146 * var(--px)) calc(242 * var(--px)) calc(156 * var(--px));
  align-items: start;
  min-height: calc(231 * var(--px));
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stat__icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: calc(68 * var(--px));
}
.stat__icon img {
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  filter: invert(1);
  opacity: .8;
}
.stat__value {
  margin-top: calc(21 * var(--px));
  color: var(--blue);
  font-size: calc(60 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.stat__label {
  margin-top: calc(16.5 * var(--px));
  font-size: calc(18 * var(--px));
  font-weight: 600;
  line-height: calc(21.7 * var(--px));
  letter-spacing: .01em;
  text-transform: uppercase;
}
.milestones__side .btn { margin-top: calc(77 * var(--px)); margin-left: calc(9 * var(--px)); }

/* ---------- Retail partners ---------- */
.partners { margin-top: calc(96 * var(--px)); }
.partners .label { margin-left: calc(-1 * var(--px)); }
.partners__logos {
  position: relative;
  height: calc(135 * var(--px));
  margin-top: calc(34 * var(--px));
}
.partners__logos li {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
}
.partners__logos img {
  width: calc(var(--w) * var(--px));
  height: auto;
  filter: grayscale(1) brightness(1.55);
  opacity: .6;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.partners__logos li:hover img { filter: none; opacity: 1; transform: scale(1.05); }

/* ---------- Digital vouchers ---------- */
.vouchers { margin-top: calc(201 * var(--px)); }
.vouchers__panel {
  min-height: calc(614 * var(--px));
  padding: calc(41.5 * var(--px)) 0 calc(53 * var(--px));
}
.vouchers__img {
  position: absolute;
  left: calc(-135.6 * var(--px));
  top: calc(-130 * var(--px));
  width: calc(888 * var(--px));
  max-width: none;
  pointer-events: none;
}
.vouchers__copy {
  width: calc(690 * var(--px));
  margin-left: calc(696 * var(--px));
}
.vouchers__copy .text { margin-top: calc(34.5 * var(--px)); }
.vouchers__copy .btn {
  display: flex;
  margin: calc(46 * var(--px)) auto 0;
}

/* ---------- Footer ---------- */
.footer {
  padding: calc(177 * var(--px)) 0 calc(28 * var(--px));
  color: #e9edf2;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  font-size: max(12px, calc(14 * var(--px)));
  line-height: max(20px, calc(24 * var(--px)));
}
.footer .container { padding-inline: calc(5 * var(--px)) calc(3 * var(--px)); }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: calc(23 * var(--px));
  border-bottom: 1px solid #1a2532;
}
.footer__logo { margin-top: calc(13 * var(--px)); }
.footer__logo img { width: calc(230 * var(--px)); }
.footer__cols { display: flex; gap: calc(52 * var(--px)); }
.footer__col:first-child { margin-right: calc(11 * var(--px)); }
.footer__col h3 {
  margin-bottom: calc(4 * var(--px));
  color: var(--muted);
  font-size: inherit;
  font-weight: 400;
}
.footer__col a:hover, .footer__links a:hover { color: var(--blue); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(30 * var(--px));
  color: var(--muted);
}
.footer__links { display: flex; gap: calc(16 * var(--px)); }
.footer a { transition: color .2s ease; }

/* ---------- Scroll reveal (only when JS is on) ---------- */
.js .reveal { opacity: 0; transform: translateY(calc(28 * var(--px))); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Tablet & mobile  (< 1200 px) – fluid layout, 1 design px = 1 css px
   ========================================================= */
@media (max-width: 1199.98px) {
  html { font-size: 16px; }
  :root { --header-h: 72px; --gutter: clamp(20px, 5vw, 56px); }

  body { font-size: 17px; }
  .container { width: auto; padding-inline: var(--gutter); }
  section[id] { scroll-margin-top: 84px; }

  .page {
    background-size: max(175vw, 760px) auto;
    background-position: left max(-58vw, -330px) top 0;
  }
  .page::before {              /* soften the map behind the text */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: max(106vw, 461px);
    background: linear-gradient(180deg, rgba(7, 18, 31, .25) 0%, rgba(7, 18, 31, .1) 35%, rgba(7, 18, 31, .78) 66%, var(--bg) 88%);
    pointer-events: none;
  }
  .page > * { position: relative; }

  /* header */
  .header, .header.is-scrolled { height: var(--header-h); }
  .header__inner { align-items: center; }
  .logo, .header.is-scrolled .logo { margin-top: 0; }
  .logo img, .header.is-scrolled .logo img { width: clamp(170px, 30vw, 230px); }

  .burger {
    display: grid;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 12px 8px;
    align-content: center;
  }
  .burger span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s ease, opacity .25s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav, .header.is-scrolled .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(7, 18, 31, .97);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open, .header.is-scrolled .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 15px 0; font-size: 19px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .nav__link:last-child { border-bottom: 0; }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--blue); }

  /* type */
  .hero__title, .title { font-size: clamp(30px, 5.6vw, 46px); line-height: 1.2; }
  .text, .hero__text, .brands__text { font-size: clamp(16px, 2.3vw, 21px); line-height: 1.55; }
  .text--tight { line-height: 1.4; }
  .text p + p, .brands__text p + p { margin-top: .9em; }
  .btn { width: auto; min-width: 230px; height: 56px; padding-inline: 34px; font-size: 15px; }
  .label { font-size: 15px; }
  .panel { border-width: 1.5px; border-radius: 22px; }

  /* hero */
  .hero { height: auto; padding: calc(var(--header-h) + clamp(150px, 42vw, 430px)) 0 56px; }
  .hero__text { max-width: 34em; margin-top: 20px; }
  .hero .btn { margin-top: 32px; }

  /* slider */
  .slider { height: auto; padding: 22px 0; }
  .slider__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  }
  .slider__track { gap: 12px; }
  .slider__item { width: clamp(130px, 22vw, 190px); border-radius: 6px; }
  .slider__arrow { width: 40px; height: 40px; margin-top: -20px; }
  .slider__arrow--prev { left: -14px; }
  .slider__arrow--next { right: -14px; }
  .brands__text { margin-top: 36px; }

  /* milestones */
  .milestones { margin-top: 56px; }
  .milestones__panel { display: block; min-height: 0; padding: 30px clamp(20px, 4vw, 40px) 36px; }
  .milestones__copy .text { margin-top: 18px; padding: 0; }
  .milestones__side { padding-top: 40px; }
  .stats { display: flex; gap: 28px clamp(24px, 6vw, 70px); min-height: 0; flex-wrap: wrap; justify-content: center; }
  .stat__icon { height: 56px; }
  .stat__icon img { width: calc(var(--w) * .8px); height: calc(var(--h) * .8px); }
  .stat__value { margin-top: 14px; font-size: clamp(40px, 7vw, 56px); }
  .stat__label { margin-top: 10px; font-size: 14px; line-height: 1.25; }
  .milestones__side .btn { margin: 40px 0 0; }

  /* partners */
  .partners { margin-top: 64px; }
  .partners .label { margin: 0; text-align: center; }
  .partners__logos { height: auto; margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px clamp(26px, 5vw, 48px); }
  .partners__logos li { position: static; }
  .partners__logos img { width: calc(var(--w) * .72px); }

  /* vouchers */
  .vouchers { margin-top: clamp(110px, 20vw, 170px); }
  .vouchers__panel { min-height: 0; padding: 0 clamp(20px, 4vw, 40px) 36px; }
  .vouchers__img {
    position: static;
    width: min(112%, 560px);
    margin: clamp(-150px, -17vw, -80px) auto -20px;
    transform: translateX(-2%);
  }
  .vouchers__copy { width: auto; margin: 0; }
  .vouchers__copy .text { margin-top: 18px; }
  .vouchers__copy .btn { display: inline-flex; margin: 30px 0 0; }

  /* footer */
  .footer { padding: 72px 0 24px; font-size: 14px; line-height: 22px; }
  .footer .container { padding-inline: var(--gutter); }
  .footer__top { flex-direction: column; gap: 32px; padding-bottom: 28px; }
  .footer__logo { margin: 0; }
  .footer__logo img { width: 200px; }
  .footer__cols { flex-wrap: wrap; gap: 26px 48px; }
  .footer__col:first-child { margin: 0; }
  .footer__col h3 { margin-bottom: 2px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding-top: 22px; }
  .footer__links { flex-wrap: wrap; gap: 8px 20px; }

  .js .reveal { transform: translateY(20px); }
}

@media (max-width: 599.98px) {
  .page {
    background-size: 215vw auto;
    background-position: left -92vw top 0;
  }
  .page::before { height: 131vw; }
  .hero { padding-top: calc(var(--header-h) + 62vw); }
  .btn { width: 100%; max-width: 340px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 16px; width: 100%; }
  .milestones__side .btn, .vouchers__copy .btn { display: flex; margin-inline: auto; }
  .partners__logos img { width: calc(var(--w) * .6px); }
  .footer__cols { flex-direction: column; gap: 22px; }
}