/* ================================================================
   MEXC Landing — ONE SCREEN, NO SCROLL (Russian / Yandex Ads)
   Toàn bộ gói trong 100dvh, overflow hidden. Font có Cyrillic.
   ================================================================ */

:root {
  --bg:        #0B0E14;
  --bg-2:      #0C0F16;
  --surface:   #161B26;
  --surface-2: #1B2230;
  --border:    #222B3D;
  --border-hi: #2E3A52;
  --text:      #F1F5F9;
  --muted:     #94A3B8;
  --muted-2:   #64748B;
  /* MEXC blue tone */
  --green:     #1E6BFF;   /* alias giữ nguyên tên biến -> primary blue */
  --green-hi:  #57A5FF;   /* sky blue sáng */
  --green-dim: rgba(30, 107, 255, 0.13);
  --blue:      #1E6BFF;
  --blue-hi:   #57A5FF;
  --up:        #41D6FF;   /* nến tăng (cyan) */
  --down:      #FF6B81;   /* nến giảm (đỏ mềm) */

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                 /* NO SCROLL */
}

a { color: inherit; text-decoration: none; }
[data-in] { will-change: transform, opacity; }

/* ---------- Screen shell ---------- */
.screen {
  position: relative;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* nav / hero / legal */
  padding: clamp(14px, 2vh, 26px) clamp(18px, 3vw, 48px);
  gap: clamp(10px, 1.6vh, 22px);
  overflow: hidden;
}

/* ---------- Ambient background ---------- */
.bg-glow {
  position: absolute; top: -25%; right: -10%;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(30,107,255,.20), transparent 62%);
  filter: blur(20px); z-index: 0; pointer-events: none;
}
.bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 25%, transparent 75%);
}

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: clamp(26px, 3.4vh, 32px); width: auto; display: block; }
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-hi), var(--blue));
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 6px 16px -6px rgba(30,107,255,.7);
}
.brand-mark.sm { width: 24px; height: 24px; font-size: .85rem; border-radius: 7px; }
.brand-text { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 2.4vh, 1.25rem); letter-spacing: .04em; color: #fff; }
.brand-dot { color: var(--green); }

/* ---------- Nav ---------- */
.nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-status {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--muted);
  padding: 6px 14px; border-radius: 999px;
  background: var(--green-dim); border: 1px solid rgba(30,107,255,.25);
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: dot 2s infinite;
}
@keyframes dot {
  0% { box-shadow: 0 0 0 0 rgba(30,107,255,.6); }
  70%{ box-shadow: 0 0 0 7px rgba(30,107,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(30,107,255,0); }
}
.lang {
  font-size: .82rem; font-weight: 700; color: var(--muted);
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
}

/* ---------- Hero (split, vertically centered) ---------- */
.hero {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  min-height: 0;                     /* cho phép co trong grid 1fr */
}

.pitch { min-width: 0; }
.eyebrow {
  font-size: clamp(.7rem, 1.1vh, .8rem); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green-hi);
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  line-height: 1.07; letter-spacing: -.01em;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.title .accent {
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sub {
  font-size: clamp(.95rem, 1.5vh, 1.15rem); color: var(--muted);
  max-width: 540px; margin-bottom: clamp(16px, 2.4vh, 26px);
}

/* perks mini-grid */
.perks {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vh, 14px);
  max-width: 540px;
  margin-bottom: clamp(18px, 2.6vh, 30px);
}
.perks li {
  display: flex; flex-direction: column; gap: 2px;
  padding: clamp(10px, 1.6vh, 16px) 16px;
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .3s ease, transform .3s ease;
}
.perks li:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.perks b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vh, 1.5rem); color: var(--green-hi); line-height: 1;
}
.perks span { font-size: clamp(.78rem, 1.2vh, .9rem); color: var(--muted); }

/* CTA */
.cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.trust {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(.82rem, 1.2vh, .95rem); color: var(--muted); font-weight: 500;
}
.trust svg { color: var(--green); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700;
  padding: clamp(12px, 1.7vh, 16px) clamp(22px, 2.2vw, 30px);
  font-size: clamp(.95rem, 1.4vh, 1.05rem);
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn-primary {
  background: var(--green); color: #fff;
  box-shadow: 0 12px 30px -12px rgba(30,107,255,.65);
}
.btn-primary:hover { background: var(--green-hi); transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(30,107,255,.8); }
.btn-primary:active { transform: translateY(0) scale(.97); box-shadow: 0 8px 20px -10px rgba(30,107,255,.7); }
.btn.block { width: 100%; padding: clamp(11px, 1.6vh, 14px); }

.pulse { position: relative; }
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 1px solid var(--green); animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing { 0%{opacity:.7;transform:scale(1);} 100%{opacity:0;transform:scale(1.16);} }

/* ---------- Crypto chart card ---------- */
.chart { position: relative; min-width: 0; }
.chart-glow {
  position: absolute; inset: -12%; z-index: 0;
  background: radial-gradient(circle at 70% 35%, rgba(30,107,255,.24), transparent 60%);
  filter: blur(28px);
}
.chart-card {
  position: relative; z-index: 1;
  background: linear-gradient(165deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border-hi); border-radius: 22px;
  padding: clamp(16px, 2.4vh, 26px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.chart-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.pair { display: flex; align-items: center; gap: 10px; }
.pair-name { display: flex; flex-direction: column; line-height: 1.2; }
.pair-name b { font-family: var(--font-display); font-weight: 600; font-size: clamp(.95rem, 1.5vh, 1.1rem); }
.pair-sub { font-size: .75rem; color: var(--muted-2); }
.price { text-align: right; line-height: 1.25; }
.price > b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.9vh, 1.4rem); }
.price .cents { color: var(--muted); font-weight: 600; }
.chg { display: block; font-size: clamp(.78rem, 1.2vh, .9rem); font-weight: 700; margin-top: 2px; }
.chg.up { color: var(--up); }

.chart-body { width: 100%; }
.chart-body svg {
  width: 100%; height: auto; aspect-ratio: 400 / 150; display: block;
  filter: drop-shadow(0 0 10px rgba(30,107,255,.18));
}
.candles .u line { stroke: var(--up); stroke-width: 1.5; }
.candles .u rect { fill: var(--up); }
.candles .d line { stroke: var(--down); stroke-width: 1.5; }
.candles .d rect { fill: var(--down); }

/* live price dot */
.live-dot { fill: var(--blue-hi); }
.live-dot { animation: livePing 1.8s ease-out infinite; transform-origin: 388px 38px; transform-box: fill-box; }
@keyframes livePing {
  0%   { filter: drop-shadow(0 0 0 rgba(87,165,255,.9)); }
  50%  { filter: drop-shadow(0 0 7px rgba(87,165,255,.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(87,165,255,.0)); }
}

/* token badge (логотип-буква) */
.token-badge {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: #fff;
}
.token-badge.tb-btc { background: linear-gradient(135deg, #FFB14E, #F7931A); }
.token-badge.tb-eth { background: linear-gradient(135deg, #8FA2FF, #5B73E8); }
.token-badge.tb-sol { background: linear-gradient(135deg, #59F2C8, #8A5BFF); }
.token-badge.tb-ton { background: linear-gradient(135deg, #45B6FF, #0098EA); }

/* watchlist */
.watch { list-style: none; margin-top: clamp(10px, 1.8vh, 18px); display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px); }
.watch li {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: clamp(8px, 1.3vh, 12px) 12px;
  background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 13px;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.watch li:hover { border-color: var(--border-hi); background: rgba(255,255,255,.05); transform: translateX(3px); }
.watch .token-badge { width: 30px; height: 30px; font-size: .85rem; }
.w-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.w-name b { font-weight: 700; font-size: .95rem; }
.w-name span { font-size: .72rem; color: var(--muted-2); }
.spark { width: 64px; height: 24px; }
.spark polyline { fill: none; stroke: var(--up); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spark.down polyline { stroke: var(--down); }
.w-price { text-align: right; line-height: 1.25; }
.w-price b { display: block; font-weight: 700; font-size: .92rem; }
.w-price .up   { font-size: .76rem; font-weight: 700; color: var(--up); }
.w-price .down { font-size: .76rem; font-weight: 700; color: var(--down); }

/* ---------- Legal strip ---------- */
.legal { position: relative; z-index: 1; }
.legal p {
  font-size: clamp(.66rem, 1.05vh, .76rem); line-height: 1.55;
  color: var(--muted-2); text-align: center; max-width: 1000px; margin: 0 auto;
}
.legal strong { color: var(--muted); }

/* ================================================================
   RESPONSIVE — luôn giữ ONE-SCREEN, không scroll.
   Quyết định theo CHIỀU CAO viewport: màn càng thấp -> rụng bớt
   phần phụ để nội dung cốt lõi luôn vừa 100dvh.
   ================================================================ */

/* ---- Tablet & mobile: 1 cột, canh giữa theo chiều dọc ---- */
@media (max-width: 880px) {
  .screen { gap: clamp(10px, 1.5vh, 16px); }
  .hero {
    grid-template-columns: 1fr;
    gap: clamp(14px, 2vh, 22px);
    align-content: center; justify-items: stretch;
  }
  .pitch { text-align: center; }
  .sub { max-width: 560px; margin-inline: auto; }
  .perks { max-width: 560px; margin-inline: auto; }
  .cta { justify-content: center; }

  .chart { order: 3; width: 100%; max-width: 560px; margin-inline: auto; }
  .chart-card { padding: 14px; }
  .watch { display: none; }            /* watchlist tốn chiều cao -> ẩn mặc định */
}

/* ---- Điện thoại dọc (≤560px) ---- */
@media (max-width: 560px) {
  .nav-status { display: none; }
  .title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .sub   { font-size: 1rem; }
  .perks { gap: 8px; }
  .perks li { padding: 11px 13px; }
  .perks b { font-size: 1.3rem; }
  .cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta .btn { width: 100%; min-height: 50px; }   /* touch target lớn */
  .trust { justify-content: center; }
}

/* ---- Chiều cao KHÔNG đủ cho chart: ẩn chart, giữ chữ ---- */
@media (max-width: 880px) and (max-height: 760px) {
  .chart { display: none; }
}

/* ---- Màn dọc đủ cao: hiện chart + 2 dòng watchlist ---- */
@media (max-width: 880px) and (min-height: 880px) {
  .watch { display: flex; }
  .watch li:nth-child(3) { display: none; }
}

/* ---- Màn rất thấp / landscape mobile: nén tối đa, 2 cột ---- */
@media (max-height: 560px) {
  .hero { grid-template-columns: 1.25fr .75fr; align-items: center; gap: 20px; }
  .pitch { text-align: left; }
  .eyebrow, .sub, .trust { display: none; }
  .perks { grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
  .perks li { padding: 8px 11px; }
  .perks span { display: none; }
  .cta { flex-direction: row; justify-content: flex-start; }
  .cta .btn { width: auto; }
  .chart { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-in] { opacity: 1 !important; transform: none !important; }
}