:root {
    --btn-duration: 0.45s;
    --btn-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
    --btn-bg: linear-gradient(90deg, #10b989 0%, #8ada36 100%);
    --bg-dark: #000000;
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --accent-green: rgb(0 150 136);
    --accent-green-hover: linear-gradient(90deg, #66fef5 0%, #6dfe84 100%);
    --nav-bg: #1c1c1c;
    --card-bg: #121212;
    --btn-teal: rgb(0 171 148);
    --ease: cubic-bezier(.22, 1, .36, 1); 
}
@font-face {
    font-family: "Archivo Black";
    src: url("font/ArchivoBlack-Regular.woff2") format("woff2");
    font-display: swap;
}
* {
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
}
button {
      border: none;
}
p {
    margin: 0;
  }
        a {
            text-decoration: inherit;
        }
          /* ---------- Navigation ---------- */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4.166665vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.0833335vw;
    z-index: 100;
  }
.logo-wrapper {
        display: flex;
        align-items: center;
        gap: 0.4166668vw;
        cursor: pointer;
}
.logo {
    width: 3vw;
            height: 3vw;
            margin-right: 1vw;
            border-radius: 0.5vw;
            
}
.lgx {
    font-size: 1.2vw;
    font-weight: 700;
    letter-spacing: -0.5px;
            color: rgb(255 255 255);
}

  .nav-center {
    display: flex;
    align-items: center;
    background: var(--nav-bg);
    border-radius: 40px;
    padding: 6px 10px;
    height: 50%;
  }

  .nav-links {
    display: flex;
    gap: 2vw;
    padding: 0 3vw;
  }

  .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: #d1d5db;
    transition: color 0.2s;
  }

  .nav-links a:hover, .nav-links a.active {
    color: var(--text-main);
  }

  .nav-links a .dot {
    color: #ef4444;
    margin-left: 2px;
    font-size: 18px;
    line-height: 0;
  }

  .search-btn {
    color: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
  }

  .search-btn:hover {
    background: rgba(255,255,255,0.1);
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .lang-selector {
    width: 1.6vw;
    cursor: pointer;
  }

  .btn-login {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    background: #f2f2f21f;
    transition: background 0.2s;
    cursor: pointer;
  }

  .btn-login:hover { background: #2a2a2a; }

  .btn-try-free {
    background: linear-gradient(90deg, #10b989 0%, #8ada36 100%);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
  }

  .btn-try-free:hover { background: var(--accent-green-hover); }

  /* Mobile Menu Toggle (Hidden on Desktop) */
  .burger {
      display: none;
      background: #1c1c1c;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.5vw;
      width: 2.5vw;
      height: 2.5vw;
      place-items: center;
      cursor: pointer;
      color: #fff;
  }
  .burger svg { width: 1.2vw; height: 1.2vw; }

  /* Mobile Drawer */
  .mobile-drawer {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 200;
      padding: 5vw;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.3s var(--ease);
  }
  .mobile-drawer.open { transform: none; }
  .md-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5vw; }
  .md-close { background: none; color: #fff; font-size: 6vw; cursor: pointer; }
  .md-search { display: flex; align-items: center; gap: 3vw; background: #121212; padding: 3vw 4vw; border-radius: 3vw; margin-bottom: 5vw; color: #9ca3af; }
  .md-search input { background: none; border: none; color: #fff; font-size: 4vw; outline: none; width: 100%; }
  .md-list { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
  .md-item { display: flex; justify-content: space-between; align-items: center; padding: 4vw 0; font-size: 5vw; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .md-item .md-dot { color: #ef4444; font-size: 6vw; line-height: 0; }
  .md-item svg { width: 4vw; height: 4vw; color: #9ca3af; }
  .md-lang { margin-top: auto; padding: 4vw 0; display: flex; justify-content: space-between; font-size: 4.5vw; font-weight: 600; }
  .md-cta { background: linear-gradient(90deg, #10b989 0%, #8ada36 100%); color: #000; text-align: center; padding: 4.5vw; border-radius: 4vw; font-weight: 700; font-size: 4vw; margin-top: 4vw; }

  .mnp {
      height: 70dvh;
  }
  .btm-footer {
      background-color: #00050a;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .btm-footer-content {
      width: 85vw;
      padding-top: 4vw;
      height: 100%;
      position: relative;
      padding-bottom: 14vw;
  }

  .btm-footer-content-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .btm-footer-content-inner-left {
      flex: 1;
  }

  .cop {
      font-size: 1vw;
      color: #666;
  }
  .btm-footer-content-inner-left {
      display: flex;
      gap: 0.6vw;
      align-items: center;
  }
  .logo-footer {
      width: 2.15585vw;
      height: 2.15585vw;
      margin-right: 1vw;
      border-radius: 0.5vw;
  }
  .logo-text {
      font-size: 1.04167vw;
      font-weight: 700;
      color: rgb(255 255 255);
  }
  .ftb {
      font-size: 12vw;
      margin: 0;
      position: absolute;
      bottom: 0;
      color: #ffffff24;
      font-family: 'Archivo Black', sans-serif;
  }
  .btm-lt {
      width: 100%;
  }
  .lgt {
      font-size: 1.04167vw;
      line-height: 1.43;
      color: #ffffff86;
  }
  .lgt a {
      color: #ffffff86;
      text-decoration: underline;
  }
  .ft-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1vw;
  }
  .foot-nav {
      margin: 0 3.7vw;
      height: 1vw;
      box-sizing: border-box;
      display: flex;
      align-items: center;
  }
  .foot-nav a {
      font-size: 0.9292vw;
      color: #666;
      text-decoration: inherit;
  }
  .cta-section {
    z-index: 1;
    background-image: url(../img/neon-global-finance-horizon.avif);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5.7291667vw;
    padding-bottom: 10.625vw;
    position: relative;
    overflow: hidden;
}
.cta-container {
    max-width: var(--base-size--container);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.78125vw;
    padding-right: 0.78125vw;
}
.cta-content-wrapper {
    z-index: 99;
    grid-column-gap: 1.25vw;
    grid-row-gap: 1.25vw;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 47.5vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
}
.cta-heading-wrapper {
    grid-column-gap: 0.8333333vw;
    grid-row-gap: 0.8333333vw;
    text-align: center;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}
.cta-titel {
    font-size: 3.3854167vw;
    line-height: 1.2em;
    letter-spacing: -.0334em;
    font-weight: 300;
    color: #ffffff;
}
.cta-description-wrapper {
    width: 58%;
    color: #afb0b4;
        font-size: 0.8333333vw;
        line-height: 1.5em;
}
.cta-description {
    color: #afb0b4;
}


 /* ---------- Button shell ---------- */
  .cta-button-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column-gap: 0.625vw;
    grid-row-gap: 0.625vw;
    border-radius: 2.5vw;
    background-image: linear-gradient(350deg, #86839300, #ffffffb3);
    padding: 0.0520833vw;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--btn-duration) var(--btn-ease),
                transform var(--btn-duration) var(--btn-ease);
  }

  .cta-button-primary:hover {
    box-shadow: 0 0.4166667vw 1.6666667vw rgba(0, 171, 148, 0.35);
  }

  .cta-button-primary:active {
    transform: scale(0.98);
  }

  /* Animated gradient sheen on the border */
  .cta-button-primary::before {
    content: "";
    position: absolute;
    inset: -150%;
    background: conic-gradient(from 0deg, transparent 0deg, #ffffff 40deg, transparent 80deg, transparent 360deg);
    animation: spin-sheen 4s linear infinite;
    z-index: -1;
    opacity: 0.6;
  }

  @keyframes spin-sheen {
    to { transform: rotate(360deg); }
  }

  /* ---------- Inner button surface ---------- */
  .button-primary-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625vw;
    padding: 0.7291667vw 1.4583333vw;
    border-radius: 2.4479167vw;
    background: var(--btn-bg);
    overflow: hidden;
    z-index: 1;
  }

  /* subtle background glow on hover */
  .button-primary-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 50% 120%,
      rgba(255, 255, 255, 0.18),
      transparent 70%
    );
    opacity: 0;
    transition: opacity var(--btn-duration) var(--btn-ease);
    pointer-events: none;
  }
  .cta-button-primary:hover {
    background: linear-gradient(90deg, #66fef5 0%, #6dfe84 100%);
  }
  .cta-button-primary:hover .button-primary-inner::after {
    opacity: 1;
  }

  .button-inner-flex {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 1.2em;
  }

  /* ---------- Text slide ---------- */
  .button-text,
  .button-text-absolute {
    font-size: 0.8333333vw;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    transition: transform var(--btn-duration) var(--btn-ease);
    will-change: transform;
  }

  .button-text-absolute {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 100%, 0);
  }

  .cta-button-primary:hover .button-text {
    transform: translate3d(0, -100%, 0);
  }

  .cta-button-primary:hover .button-text-absolute {
    transform: translate3d(0, 0, 0);
  }

  /* ---------- Arrow slide ---------- */
  .primary-icon-wrap {
    position: relative;
    width: 1.0416667vw;
    height: 1.0416667vw;
    overflow: hidden;
  }

  .button-arrow-icon,
  .button-arrow-icon-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: currentColor;
    transform: translate3d(-120%, 0, 0);
    transition: transform var(--btn-duration) var(--btn-ease);
    will-change: transform;
  }

  .button-arrow-icon-absolute {
    transform: translate3d(0, 0, 0);
  }

  .cta-button-primary:hover .button-arrow-icon {
    transform: translate3d(0, 0, 0);
  }

  .cta-button-primary:hover .button-arrow-icon-absolute {
    transform: translate3d(120%, 0, 0);
  }

    /* Learn More Link */
  .learn-more-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent-green);
    font-weight: 600;
    font-size: 0.8333333vw;
    gap: 0.2083333vw;
    transition: opacity 0.2s;
  }
  
  .learn-more-link:hover {
    opacity: 0.8;
  }

  /* ---------- Feature Badges ---------- */
  .features-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625vw;
    justify-content: center;
    padding: 0 1.0416667vw;
    margin-bottom: 2.0833333vw;
  }

  .feature-badge {
    display: flex;
    align-items: center;
    gap: 0.4166667vw;
    background: #f2f2f21f;
    padding: 0.625vw 1.0416667vw;
    border-radius: 1.5625vw;
    font-size: 0.7291667vw;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.05);
  }

  .feature-badge span.emoji {
    font-size: 0.8333333vw;
  }
  /* ---------- Hero Section & Background Chart ---------- */
  .hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 8vw;
    text-align: center;
    z-index: 1;
    overflow: hidden;
  }

  /* The 3D Bar Chart Background */
  .chart-bg {
position: absolute;
    width: 100vw;
    top: -43vw;
    left: 0;
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
  }
  /* ---------- Hero Content ---------- */
  .hero-content {
    max-width: 41.6666667vw;
    padding: 0 1.0416667vw;
    margin-bottom: 4.1666667vw;
  }

  .hero h1 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2.0833333vw;
    letter-spacing: -1px;
  }
  .plat-prev-section {
    height: 64vw;
    text-align: center;
  }
  .plat-prev-tx {
    font-size: 2.6vw;
    margin-bottom: 2vw;
    font-weight: 600;
  }
  .plat-prev {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .plat-hand {
    position: absolute;
    width: 44vw;
    left: 35vw;
  }
  .plat-view {
    position: absolute;
    border-radius: 4vw;
    width: 17.2vw;
    left: 38.6vw;
  }
  .hero-typo-section {
    padding: 2vw 0;
    overflow: hidden;
  }
  .hero-typo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-typo-tx {
    font-size: 6.2vw;
        line-height: 1;
        font-weight: 700;
        text-align: center;
  }
  .hero-typo-sp {
    background: linear-gradient(135deg, #8ada36, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .lic-icons {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    margin-bottom: 40rem;
    display: flex;
  }
  .lic-icon {
            height: 4vw;
  }
  .pmt-section {
    position: relative;
  }
  .pc{
    position: relative;
    width: 8.75vw;
    height: 18.5416667vw;
    flex: 0 0 7.8125vw;
    transition: flex-basis .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), margin .45s cubic-bezier(.2, .8, .2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    }
.pc .bg{
    position: absolute;
    left: 0;
    top: 0;
    height: 13.0208333vw;
    width: 9.1666667vw;
    background-color: #161616;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    border-radius: 1.25vw;
    transform: perspective(12.5vw) rotateY(35deg);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), background .3s;
    border: 1px solid #d9cccc14;
    }
.pc .ct{position:relative;z-index:2;display:flex;align-items:center;gap:0.3125vw;color:#fff;transition:transform .45s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.pc:hover{flex-basis: 15.4166667vw;height: 17.1875vw;margin:0 -2.7083333vw 0 -2.7083333vw;z-index:5;top: -1.875vw;}
.pc:hover .bg{transform:perspective(13.5416667vw) rotateY(0deg);width:100%;background-color:#1b1b1b;height: 15.625vw;}
.pc:hover .ct{transform:scale(1.7)}
.tl{width:1.3541667vw;height:1.3541667vw;border-radius:50%;background:#fff;color:#0b0b0b;font-weight:500;font-size:0.8333333vw;display:flex;align-items:center;justify-content:center;position:relative}
.tl i{position:absolute;right:-0.15625vw;bottom:-0.15625vw;width:0.5729167vw;height:0.5729167vw;border-radius:50%;background:#0b0b0b;border:1px solid #fff;font-size:0.4166667vw;color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal}
.tt{line-height:1.05}.tt b{display:block;font-size:0.78125vw;font-weight:500;letter-spacing:-0.3px}.tt span{font-size:0.5729167vw;font-weight:500;color:#e6e6e6}
.pmt-cards {
  display:flex;justify-content:center;align-items:center;margin:2.2916667vw 0 0;padding:0 1.0416667vw;height:22.0833333vw
}
.pmt-head {
  text-align: center;
    margin: 2vw 0 0;
    letter-spacing: -1px;
    line-height: 1.08;
    font-size: 2.6vw;
    margin-bottom: 2vw;
    font-weight: 600;
}
html { scroll-behavior: smooth; }
 
/* ---------- Navbar polish ---------- */
.navbar { transition: background .35s, backdrop-filter .35s; }
.navbar.scrolled {
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-links { list-style: none; }
.nav-links li { list-style: none; }
.nav-links a { display: flex; align-items: center; height: 2.0833333vw; }
.nav-center.open .nav-links a { color: #7c7e84; }
.nav-center.open .nav-links li.is-open a { color: #fff; }
 
/* ---------- Backdrop behind the mega menu ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }
 
/* ---------- Mega menu shell ---------- */
.mega {
  position: fixed;
  top: 5vw;
  left: 50%;
  width: min(71.875vw, 92vw);
  height: 18.2291667vw;
  z-index: 95;
  background: #202020;
  border-radius: 1.875vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -14px) scale(.985);
  transform-origin: top center;
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.mega.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
.mega-panel {
  position: absolute;
  inset: 1.0416667vw;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  visibility: hidden;
  pointer-events: none;
}
.mega-panel.active { visibility: visible; pointer-events: auto; }
 
/* staggered content inside the active panel */
.mi { opacity: 0; transform: translateY(14px); transition: opacity .2s, transform .2s; }
.mega-panel.active .mi {
  opacity: 1; transform: none;
  transition: opacity .35s ease calc(var(--i, 0) * 55ms + 60ms),
              transform .55s var(--ease) calc(var(--i, 0) * 55ms + 60ms);
}
 
/* ---------- Link columns ---------- */
.mega-col { padding: 0.7291667vw 1.7708333vw; display: flex; flex-direction: column; gap: 1.5625vw; }
.mega-col + .mega-col { border-left: 1px solid rgba(255, 255, 255, .07); }
.mega-label { margin: 0; font-size: 0.7291667vw; color: #9a9ca1; }
.mega-link { display: block; color: #fff; text-decoration: none; }
.mega-link h4 {
  margin: 0 0 0.4166667vw; font-size: 1.25vw; font-weight: 600; letter-spacing: -.4px;
  display: flex; align-items: center; gap: 0.4166667vw; transition: color .25s;
}
.mega-link h4::after {
  content: "\2192"; font-size: 0.9375vw;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s, transform .35s var(--ease);
}
.mega-link:hover h4 {color: #10b989;}
.mega-link:hover h4::after { opacity: 1; transform: none; }
.mega-link p { margin: 0; font-size: 0.7291667vw; line-height: 1.45; color: #9a9ca1; }
 
/* ---------- Promo card ---------- */
.mega-promo {
  position: relative; overflow: hidden; border-radius: 1.4583333vw; padding: 1.5625vw;
  background: radial-gradient(120% 120% at 100% 100%, var(--glow, #7a4a00) 0%, #0b0b0b 55%, #050505 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.mega-promo h3 {
  margin: 0; max-width: 60%;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -1.5px; font-weight: 700;
}
.mega-promo p { margin: 0.7291667vw 0 0; max-width: 17.7083333vw; font-size: 0.7291667vw; line-height: 1.4; color: #c9cacd; }
.mega-btn {
  position: relative; z-index: 2; align-self: flex-start;
  background: #fff; color: #111; text-decoration: none;
  border-radius: 0.625vw; padding: 0.7291667vw 1.0416667vw; font-size: 0.8333333vw; font-weight: 500;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.mega-btn:hover { transform: translateY(-2px); box-shadow: 0 0.5208333vw 1.5625vw rgba(255, 255, 255, .18); }
 
/* coin stack art (swap for your own image if you like) */
.mega-art { position: absolute; right: 3.6458333vw; bottom: -3.125vw; width: 8.8541667vw; height: 13.5416667vw; pointer-events: none; }
.coin {
  --c1: #ffd45a; --c2: #e8920c; --c3: #f5a312;
  width: 8.8541667vw; height: 8.8541667vw; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--c1), var(--c3) 62%, var(--c2));
  box-shadow: 0 1.1458333vw 0 -0.2083333vw var(--c2), 0 2.2916667vw 0 -0.4166667vw var(--c3), 0 3.4375vw 0 -0.625vw var(--c2), 0 4.5833333vw 0 -0.8333333vw var(--c3);
  display: grid; place-items: center;
  font: 700 4.1666667vw/1 'IBM Plex Sans', sans-serif; color: rgba(255, 255, 255, .85);
  transform: rotate(-8deg);
}
.coin.green { --c1: #b8ff7a; --c2: #0e9a63; --c3: #2fd37a; }
.coin.blue  { --c1: #9ec5ff; --c2: #2457c5; --c3: #4f8cff; }
.mega-panel.active .coin { animation: coinFloat 4s ease-in-out infinite; }
@keyframes coinFloat { 50% { transform: translateY(-10px) rotate(-3deg); } }
 
/* ---------- Scroll reveal (Webflow-style) ---------- */
.rv { opacity: 0; }
.rv.in {
  opacity: 1;
  animation: var(--anim, rvUp) 1s var(--ease) var(--d, 0ms) backwards;
}
[data-reveal="zoom"] { --anim: rvZoom; }
@keyframes rvUp   { from { opacity: 0; transform: translate3d(0, 48px, 0); filter: blur(10px); } }
@keyframes rvZoom { from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.92); filter: blur(10px); } }
 
/* word-by-word headline rise */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.wi { display: inline-block; transform: translateY(115%); will-change: transform; }
[data-split].in .wi { transform: none; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
[data-split] .hero-typo-sp { background: none; }
.hero-typo-sp .wi {
  background: linear-gradient(135deg, #8ada36, #10b981);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
/* gentle parallax on the hero chart */
.chart-bg { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- Mega menu changes size per panel ---------- */
.mega {
  width: min(var(--w, 71.875vw), 92vw);
  height: min(var(--h, 18.2291667vw), calc(100vh - 6.25vw));
  transition: opacity .3s var(--ease), transform .45s var(--ease),
              width .5s var(--ease), height .5s var(--ease), visibility 0s .45s;
}
.mega[data-active="trading"] { --w: 71.875vw; --h: 38.125vw; }
.mega[data-active="learn"]   { --w: 71.875vw; --h: 18.2291667vw; }
.mega[data-active="about"]   {--w: 54.1666667vw;--h: 22.7083333vw;}
.mega[data-active="app"]     { --w: 54.1666667vw; --h: 21.875vw; }

.mega-panel[data-panel="trading"] { grid-template-columns: 17.1875vw 1fr 1fr 1fr; }
.mega-panel[data-panel="about"]   {grid-template-columns: 1fr 1fr 14.0625vw;}
.mega-panel[data-panel="app"]     { grid-template-columns: 18.2291667vw 1fr; }

.mega-col { gap: 1.9791667vw; }
.mega-grp { display: flex; flex-direction: column; gap: 1.1458333vw; }
.mega-link h4:last-child { margin-bottom: 0; }
.mega-link h4 .ico { width: 0.9375vw; height: 0.9375vw; flex: none; color: #5cf03c; }

/* ---------- Photo card (Trading) ---------- */
.mega-photo {
  position: relative;
  overflow: hidden;
  border-radius: 1.4583333vw;
  padding: 1.5625vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7291667vw;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85)),
    var(--photo, radial-gradient(90% 60% at 40% 30%, #6b6a4a, #2b3a2b 70%, #111));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mega-photo h3 { margin: 0; font-size: 1.9791667vw; line-height: 1; letter-spacing: -1.2px; font-weight: 700; }
.mega-photo p  { margin: 0; font-size: 0.7291667vw; color: #d6d6d6; }

/* ---------- Green bonus card (About) ---------- */
.mega-promo.bonus {
  background: #00c0c1;
  color: #0a0a0a;
  text-align: center;
  align-items: center;
  padding: 1.25vw;
}
.mega-promo.bonus h3 {max-width: none;font-size: 2.0833333vw;font-weight: 600;letter-spacing: -2px;position: absolute;}
.mega-promo.bonus .mega-btn {background: #0a0a0a;color: #fff;align-self: center;position: absolute;bottom: 1.25vw;}
.bonus-art {position: absolute;width: 11.25vw;height: 11.8229167vw;bottom: 2.3958333vw;}
.bonus-art::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 9.8958333vw; height: 3.6458333vw;
  transform: translateX(-50%); border-radius: 1.25vw;
  background: linear-gradient(#7aff5a, #62ff3d); z-index: 0;
}
.bonus-art .coin {
  --c1: #f4f4f5; --c2: #6b6b70; --c3: #b9b9be;
  position: absolute; left: 2.0833333vw; top: 0.3125vw; width: 6.25vw; height: 6.25vw; font-size: 0; z-index: 1;
  box-shadow: 0 0.7291667vw 0 -0.2083333vw var(--c2), 0 1.4583333vw 0 -0.4166667vw var(--c3), 0 2.1875vw 0 -0.625vw var(--c2), 0 2.9166667vw 0 -0.8333333vw var(--c3);
}
.ribbon {
  position: absolute; left: 50%; top: 2.0833333vw; z-index: 3; white-space: nowrap;
  transform: translateX(-50%) rotate(-76deg);
  background: #7dff4d; color: #0a0a0a; font-weight: 800; font-size: 0.7291667vw; letter-spacing: .5px; padding: 0.2083333vw 0.9375vw;
}

/* ---------- App promo: QR + mascot ---------- */
.qr { position: relative; z-index: 2; width: 6.25vw; height: 6.25vw; padding: 0.5208333vw; border-radius: 0.8333333vw; background: #fff; }
.qr svg { width: 100%; height: 100%; display: block; }
.mascot {position: absolute;right: -4vw;top: 1vw;width: 20.833335vw;height: 20.833335vw;pointer-events: none;}
.mascot .body { position: absolute; inset: 3.125vw 0 0; border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 40% 30%, #7ed957, #3f9a22 60%, #2a6e17); }
.mascot .cap { position: absolute; left: 1.5625vw; right: 1.5625vw; top: 1.0416667vw; height: 3.6458333vw; border-radius: 3.6458333vw 3.6458333vw 0.7291667vw 0.7291667vw; background: #111; }
.mascot .eye { position: absolute; top: 6.7708333vw; width: 1.9791667vw; height: 2.2916667vw; border-radius: 50%; background: #fff; }
.mascot .eye.l { left: 3.2291667vw; } .mascot .eye.r { left: 6.6666667vw; }
.mascot .eye::after { content: ""; position: absolute; right: 0.3125vw; top: 0.625vw; width: 0.9375vw; height: 1.0416667vw; border-radius: 50%; background: #1a1a1a; }
.mascot .smile { position: absolute; left: 4.7916667vw; top: 9.4791667vw; width: 2.6041667vw; height: 1.25vw; border-bottom: 0.2083333vw solid #14541a; border-radius: 0 0 2.6041667vw 2.6041667vw; }
.mega-panel.active .mascot {animation: coinFloat 4s ease-in-out infinite;}

/* "Learn more / Read news" row that floats under the App panel */
.mega-below { position: absolute; top: calc(100% + 2.2916667vw); left: 0; right: 0; display: flex; justify-content: center; gap: 2.0833333vw; }
.mega-below::before { content: ""; position: absolute; left: 0; right: 0; top: -2.2916667vw; height: 2.2916667vw; } /* hover bridge */
.mega-below a { color: #3db83a; font-size: 1.0416667vw; font-weight: 600; transition: color .25s; }
.mega-below a:hover { color: #7dff4d; }

/* ---------- Free knowledge base section ---------- */
.kb-section { padding: 7.2916667vw 1.0416667vw 5.2083333vw; }
.kb-title { text-align: center; margin: 0 0 4.6875vw; font-size: clamp(36px, 4vw, 56px); font-weight: 700; letter-spacing: -1.5px; }
.kb-title .g .wi { color: #5cf03c; }
.kb-wrap {max-width: 48.9583333vw;margin: 0 auto;display: flex;flex-direction: column;gap: 1.0416667vw;}
.kb-card {
  position: relative;
  height: 10.4166667vw;
  overflow: hidden;
  padding: 2.0833333vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 2.2916667vw;
  background: #121212;
  border: 1px solid rgba(255,255,255,.06);
}
.kb-card h3 {margin: 0;font-size: 1.25vw;font-weight: 600;letter-spacing: -.5px;}
.kb-desc {margin: 0 0 0.9375vw;max-width: 23.9583333vw;font-size: 1.25vw;line-height: 1.05;font-weight: 600;letter-spacing: -.8px;color: #7d7d7d;}
.kb-link {display: inline-flex;align-items: center;gap: 0.3125vw;color: #5cf03c;font-size: 0.8333333vw;font-weight: 600;}
.kb-link i { font-style: normal; transition: transform .35s var(--ease); }
.kb-card:hover .kb-link i { transform: translateX(4px); }
.kb-art {position: absolute;right: 2.6041667vw;top: 50%;width: 22.9166667vw;transform: translateY(-50%);transition: transform .6s var(--ease);display: flex;justify-content: flex-end;}
.kb-card:hover .kb-art { transform: translateY(calc(-50% - 8px)) rotate(-2deg); }
.kb-art svg {width: 100%;height: auto;display: block;}
.kb-art img {width: 18.2291667vw;height: auto;display: block;}

.kb-yt {height: 13.0208333vw;}
.kb-yt .yt { position: absolute; right: 0; top: 2.6041667vw; width: 10.4166667vw; height: 7.2916667vw; border-radius: 1.7708333vw; background: #cc0000; display: grid; place-items: center; }
.kb-yt .yt::after { content: ""; border-left: 2.7083333vw solid #e6e6e6; border-top: 1.5625vw solid transparent; border-bottom: 1.5625vw solid transparent; margin-left: 0.625vw; }
.kb-yt img {position: absolute;left: 1.0416667vw;height: 13.5416667vw;width: auto;top: 0;}

.kb-stats {height: 13.0208333vw;}
.kb-stats .rate {position: absolute;left: 0;top: 4.8vw;z-index: 2;font-size: 0.7291667vw;color: #9a9ca1;}
.kb-stats .pct {position: absolute;left: 0;top: 5.8vw;z-index: 2;font-size: 3.3333333vw;font-weight: 600;letter-spacing: -2px;color: #34d17a;}
.kb-stats .ring { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.kb-card.in .ring {stroke-dashoffset: var(--off);}


/* ---------- Page + animated backdrop ---------- */
.auth-page { min-height: 100dvh; overflow-x: hidden; }
.auth-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.auth-bg::before, .auth-bg::after {
  content: ""; position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  filter: blur(5.7291667vw); animation: auDrift 18s ease-in-out infinite alternate;
}
.auth-bg::before { left: -15vw; top: -20vw; background: #10b989; opacity: .32; }
.auth-bg::after  { right: -20vw; bottom: -25vw; background: #8ada36; opacity: .2; animation-delay: -9s; }
.auth-bg i {
  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: 2.9166667vw 2.9166667vw;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
@keyframes auDrift { to { transform: translate3d(8vw, 6vw, 0) scale(1.1); } }

/* ---------- Top bar ---------- */
.auth-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 1.25vw 2.0833333vw; }
.auth-switch { margin: 0; font-size: 0.7291667vw; color: #9a9ca1; }
.auth-switch a { margin-left: 0.4166667vw; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.25); transition: color .25s, border-color .25s; }
.auth-switch a:hover { color: #8ada36; border-color: #8ada36; }

/* ---------- Layout ---------- */
.auth { min-height: 100dvh; max-width: 70.8333333vw; margin: 0 auto; padding: 5.7291667vw 2.0833333vw 3.125vw; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2.0833333vw; box-sizing: border-box; }
.auth-aside h2 { margin: 0 0 1.0416667vw; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -2px; font-weight: 700; }
.auth-aside .lead { margin: 0; max-width: 25vw; font-size: 0.9375vw; line-height: 1.55; color: #afb0b4; }
.auth-pills { display: flex; flex-wrap: wrap; gap: 0.5208333vw; margin-top: 1.4583333vw; max-width: 29.1666667vw; }

/* animated chart visual */
.auth-visual { position: relative; max-width: 27.0833333vw; margin-top: 2.5vw; }
.auth-chart { padding: 0.9375vw; border-radius: 1.25vw; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); -webkit-backdrop-filter: blur(0.5208333vw); backdrop-filter: blur(0.5208333vw); }
.auth-chart svg { display: block; width: 100%; height: auto; }
.au-line { fill: none; stroke: #8ada36; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: auDraw 2.4s var(--ease) .7s forwards; filter: drop-shadow(0 0 0.4166667vw rgba(138,218,54,.55)); }
.au-area { opacity: 0; animation: auFade 1.2s ease 2s forwards; }
@keyframes auDraw { to { stroke-dashoffset: 0; } }
@keyframes auFade { from { opacity: 0; } to { opacity: 1; } }
.au-chip { position: absolute; right: 1.3541667vw; top: 1.25vw; padding: 0.3125vw 0.625vw; border-radius: 999px; background: rgba(92,240,60,.14); color: #5cf03c; font-size: 0.7291667vw; font-weight: 600; }
.au-coin { position: absolute; right: 0; top: -4.375vw; transform: scale(.6); transform-origin: top right; pointer-events: none; }
.au-coin .coin { animation: coinFloat 4s ease-in-out infinite; }

/* ---------- Card ---------- */
.auth-main { width: 100%; }
.auth-card {
  width: 100%; max-width: 25vw; margin: 0 auto; padding: 2.0833333vw; box-sizing: border-box;
  border-radius: 1.6666667vw; background: rgba(18,18,18,.78); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(1.0416667vw); backdrop-filter: blur(1.0416667vw);
  box-shadow: 0 1.5625vw 4.1666667vw rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.au-h { margin: 0 0 0.4166667vw; font-size: 1.6666667vw; font-weight: 700; letter-spacing: -1px; }
.au-sub { margin: 0 0 1.4583333vw; font-size: 0.78125vw; line-height: 1.5; color: #9a9ca1; }
.auth-alert { margin: 0 0 0.9375vw; padding: 0.625vw 0.7291667vw; border-radius: 0.625vw; background: rgba(255,93,93,.1); border: 1px solid rgba(255,93,93,.35); color: #ffb3b3; font-size: 0.7291667vw; }
.auth-alert[hidden] { display: none; }
.auth-note { max-width: 25vw; margin: 1.0416667vw auto 0; text-align: center; font-size: 0.625vw; line-height: 1.5; color: #5f6167; }

/* ---------- Form ---------- */
.auth-form { display: flex; flex-direction: column; gap: 0.9375vw; }
.auth-form.shake { animation: auShake .45s; }
@keyframes auShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

.field label.lb { display: block; margin: 0 0 0.4166667vw; font-size: 0.6770833vw; font-weight: 500; color: #c9cacd; }
.control { position: relative; }
.control > svg.fi { position: absolute; left: 0.8333333vw; top: 50%; width: 0.9375vw; height: 0.9375vw; transform: translateY(-50%); color: #6f7177; pointer-events: none; transition: color .25s; }
.control:focus-within > svg.fi { color: #8ada36; }

.au-input {
  width: 100%; box-sizing: border-box; height: 2.8125vw; padding: 0 0.8333333vw 0 2.3958333vw;
  font: 500 0.78125vw 'IBM Plex Sans', sans-serif; color: #fff; background: #141414;
  border: 1px solid rgba(255,255,255,.09); border-radius: 0.7291667vw; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.au-input::placeholder { color: #5f6167; }
.au-input:hover { border-color: rgba(255,255,255,.16); }
.au-input:focus { border-color: #8ada36; background: #171717; box-shadow: 0 0 0 0.2083333vw rgba(138,218,54,.14); }
.au-input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px #141414 inset; caret-color: #fff; }
.au-input.has-toggle { padding-right: 2.7083333vw; }

.pw-toggle {position: absolute;right: 0.4166667vw;top: 50%;width: 1.9791667vw;height: 1.9791667vw;transform: translateY(-50%);display: grid;place-items: center;border-radius: 0.5208333vw;background: none;color: #8b8d93;cursor: pointer;transition: background .2s, color .2s;}
.pw-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.pw-toggle .off { display: none; }
.pw-toggle[aria-pressed="true"] .on { display: none; }
.pw-toggle[aria-pressed="true"] .off { display: block; }

.field .err { display: none; margin: 0.4166667vw 0 0; font-size: 0.6770833vw; color: #ff7b7b; }
.field.invalid .err { display: block; animation: auFade .25s; }
.field.invalid .au-input { border-color: #ff5d5d; box-shadow: 0 0 0 0.2083333vw rgba(255,93,93,.12); }
.field.valid .au-input { border-color: rgba(138,218,54,.45); }
.hint { margin: 0.4166667vw 0 0; font-size: 0.6770833vw; color: #7f8187; }
.hint b { color: #8ada36; font-weight: 600; }

/* password strength */
.pwmeter { margin-top: 0.5208333vw; }
.pwmeter .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3125vw; }
.pwmeter .bars span { height: 0.2083333vw; border-radius: 0.2083333vw; background: rgba(255,255,255,.08); transition: background .3s; }
.pwmeter .lbl { margin: 0.3125vw 0 0; font-size: 0.625vw; color: #7f8187; min-height: 0.8333333vw; }
.pwmeter[data-score="1"] .bars span:nth-child(-n+1) { background: #ff5d5d; }
.pwmeter[data-score="2"] .bars span:nth-child(-n+2) { background: #ffb020; }
.pwmeter[data-score="3"] .bars span:nth-child(-n+3) { background: #c6e03a; }
.pwmeter[data-score="4"] .bars span:nth-child(-n+4) { background: #5cf03c; }

.au-row { display: flex; justify-content: space-between; align-items: center; gap: 0.625vw; font-size: 0.7291667vw; }
.au-row a { color: #8ada36; font-weight: 500; }
.au-row a:hover { text-decoration: underline; }

/* custom checkbox */
.check {position: relative;display: flex;align-items: center;gap: 0.825vw;cursor: pointer;font-size: 0.7291667vw;line-height: 1.5;color: #b5b6ba;}
.check input {position: absolute;left: 0;top: 0;width: 1.0416667vw;height: 1.0416667vw;margin: 0;opacity: 0;cursor: pointer;}
.check .box {flex: none;width: 1.0416667vw;height: 1.0416667vw;margin-top: 0.0520833vw;display: grid;place-items: center;border-radius: 0.3125vw;background: #141414;border: 1px solid rgba(255,255,255,.2);transition: background .25s, border-color .25s, box-shadow .25s;}
.check .box svg {width: 0.625vw;height: 0.625vw;fill: none;stroke: #fff;stroke-width: 3;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 20;stroke-dashoffset: 20;transition: stroke-dashoffset .3s var(--ease);}
.check input:checked + .box { background: linear-gradient(135deg, #10b989, #8ada36); border-color: transparent; }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .box { box-shadow: 0 0 0 0.2083333vw rgba(138,218,54,.2); }
.check a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; transition: color .25s; }
.check a:hover { color: #8ada36; }
.field.invalid .check .box { border-color: #ff5d5d; }

/* submit (re-uses your .cta-button-primary look) */
.auth-submit { width: 100%; display: flex; margin-top: 0.3125vw; font-family: inherit; }
.auth-submit .button-primary-inner {width: 100%;}
.auth-submit.is-loading { pointer-events: none; opacity: .85; }
.auth-submit.is-loading .button-arrow-icon,
.auth-submit.is-loading .button-arrow-icon-absolute { display: none; }
.auth-submit.is-loading .primary-icon-wrap { border: 2px solid rgba(0,0,0,.25); border-top-color: #000; border-radius: 50%; animation: auSpin .7s linear infinite; }
@keyframes auSpin { to { transform: rotate(360deg); } }

.au-foot { margin-top: 1.1458333vw; text-align: center; font-size: 0.7291667vw; color: #9a9ca1; }
.au-foot a { margin-left: 0.3125vw; color: #fff; font-weight: 600; }
.au-foot a:hover { color: #8ada36; }

/* ---------- intl-tel-input, dark theme ---------- */
.iti { display: block; width: 100%; }
.iti__selected-dial-code { color: #fff; font-size: 0.78125vw; font-weight: 500; }
.iti__arrow { border-top-color: #8b8d93; }
.iti__arrow--up { border-bottom-color: #8b8d93; }
.iti__country-container:hover .iti__selected-country,
.iti__selected-country:focus-visible { background: rgba(255,255,255,.05) !important; }
.iti__selected-country { border-radius: 0.7291667vw 0 0 0.7291667vw; }
.iti__dropdown-content { background: #1b1b1b; border: 1px solid rgba(255,255,255,.1); border-radius: 0.7291667vw; box-shadow: 0 1.0416667vw 2.6041667vw rgba(0,0,0,.6); overflow: hidden; }
.iti__search-input { background: #141414; color: #fff; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0.625vw 0.7291667vw; outline: none; }
.iti__country { padding: 0.46875vw 0.625vw; }
.iti__country.iti__highlight { background: #2a2a2a; }
.iti__dial-code { color: #9a9ca1; }
.iti__country-list { color: #fff; }


/* =====================================================
   APPEND #4 - signed-in app (shell + all pages)
   ===================================================== */
:root { --s1:#0f0f10; --s2:#151516; --s3:#1d1d1f; --bd:rgba(255,255,255,.08); --g:#8ada36; --g2:#10b989; --up:#34d17a; --dn:#ff5d5d; --amber:#ffb020; --mut:#9a9ca1; }
.app-page { background:#050505; min-height:100dvh; }
.app-page::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(60vw 40vw at 85% -10%, rgba(16,185,137,.14), transparent 60%), radial-gradient(50vw 40vw at 0 100%, rgba(138,218,54,.06), transparent 60%); }
.app-page button, .app-page input, .app-page select, .app-page textarea { font-family:inherit; }
.mono { font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.mut { color:var(--mut); } .up { color:var(--up); } .dn { color:var(--dn); } .full { width:100%; } .sb { justify-content:space-between; } .end { justify-content:flex-end; } .wrap { flex-wrap:wrap; }
[hidden] { display:none !important; }

/* ---------- Shell ---------- */
.app { display:grid; grid-template-columns:12.9166667vw minmax(0,1fr); min-height:100dvh; }
.side { position:sticky; top:0; height:100dvh; padding:1.1458333vw 0.8333333vw; display:flex; flex-direction:column; gap:0.7291667vw; border-right:1px solid var(--bd); background:rgba(10,10,10,.85); -webkit-backdrop-filter:blur(0.8333333vw); backdrop-filter:blur(0.8333333vw); z-index:60; overflow-y:auto; }
.side .logo-wrapper { padding:0 0.4166667vw 0.5208333vw; } .side .logo { width:1.875vw; height:1.875vw; margin-right:0; border-radius:0.46875vw; } .side .lgx { font-size:0.8333333vw; }
.side-nav { display:flex; flex-direction:column; gap:0.2083333vw; }
.nav-sec { margin:0.7291667vw 0 0.2083333vw; padding:0 0.625vw; font-size:0.5729167vw; letter-spacing:.08em; text-transform:uppercase; color:#5f6167; }
.nav-i { display:flex; align-items:center; gap:0.625vw; padding:0.5729167vw 0.625vw; border-radius:0.625vw; color:#a7a9ae; font-size:0.7552083vw; font-weight:500; transition:background .2s, color .2s; }
.nav-i svg { width:0.9895833vw; height:0.9895833vw; flex:none; }
.nav-i:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav-i.on { background:linear-gradient(90deg, rgba(138,218,54,.16), rgba(16,185,137,.03)); color:#fff; box-shadow:inset 2px 0 0 var(--g); }
.nav-i.on svg { color:var(--g); }
.side-card { margin-top:auto; padding:0.8333333vw; border-radius:0.9375vw; border:1px solid var(--bd); background:radial-gradient(120% 120% at 100% 100%, #0e5a3a, #0c0c0c 60%); display:flex; flex-direction:column; gap:0.5208333vw; }
.side-card p { margin:0; font-size:0.6770833vw; color:#c9cacd; line-height:1.4; }
.scrim { display:none; }
.main { min-width:0; display:flex; flex-direction:column; }
.chart-area {
  flex: 1;
  position: relative;
  background: #05070e;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
/* Market Selector Pill */
.asset-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ot-panel-alt);
  border: 1px solid var(--ot-border);
  padding: 6px 14px;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  transition: all 0.15s ease;
}
.asset-pill:hover {
  background: #181f2c;
  border-color: rgba(255, 255, 255, 0.15);
}
.asset-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.asset-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.asset-rate {
  color: var(--ot-green);
  font-weight: 700;
  font-size: 11.5px;
}
.asset-price {
  font-size: 11px;
  color: var(--ot-text-mut);
}
/* Floating Chart Tools */
.chart-tools {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
}
.chart-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(20, 25, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ot-border);
  color: var(--ot-text-mut);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.chart-btn:hover, .chart-btn.active {
  color: #fff;
  background: rgba(30, 37, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
}

.assets-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  background: var(--ot-panel);
  border: 1px solid var(--ot-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  z-index: 60;
  display: none;
}
.assets-dropdown-menu.show {
  display: block;
}
/* Floating Zoom & Clock Bar */
.chart-zoom-bar {
  position: absolute;
  bottom: 34vw;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 25, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ot-border);
  border-radius: 8px;
  padding: 3px 6px;
  z-index: 20;
}
.zoom-btn {
  background: transparent;
  border: none;
  color: var(--ot-text-mut);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.zoom-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.zoom-time {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ot-text-mut);
  padding: 0 4px;
}

/* ----------------- Digit Frequency Heatmap (Bottom Center of Chart) ----------------- */
#digitContainer {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 77vw;
  transform: translateX(-50%);
  display: grid;
  grid-auto-rows: 12vw;
  /* background: rgba(13, 17, 26, 0.85); */
  backdrop-filter: blur(12px);
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid var(--ot-border);
  flex-wrap: wrap;
  grid-auto-flow: column;
}

.digit-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
  width: 44px;
  height: 48px;
}
.digit-wrapper:hover {
  transform: translateY(-2px);
}
.digit-wrapper.active-target {
  filter: drop-shadow(0 0 6px var(--ot-green));
}

.digit-svg-ring {
  transform: rotate(-90deg);
  width: 40px;
  height: 40px;
}

.digit-center-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.digit-num {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.digit-pct {
  font-size: 8.5px;
  font-weight: 600;
  margin-top: 1px;
  font-family: var(--font-mono);
}

/* Animated bouncy triangle on active tick digit */
.triangle-marker {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ot-green);
  opacity: 0;
  transition: opacity 0.1s;
}
.digit-wrapper.digit-active .triangle-marker {
  opacity: 1;
  animation: bounceTriangle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bounceTriangle {
  0% { transform: translateY(-4px) scale(0.8); }
  50% { transform: translateY(2px) scale(1.2); }
  100% { transform: translateY(0) scale(1); }
}
.top {position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:0.7291667vw;height:3.75vw;padding:0 1.6666667vw;background:rgba(5,5,5,.72);-webkit-backdrop-filter:blur(0.8333333vw);backdrop-filter:blur(0.8333333vw);border-bottom:1px solid var(--bd);justify-content: space-between;}
.top h1 { margin:0; font-size:1.0416667vw; font-weight:600; letter-spacing:-.4px; } .top .sp { flex:1; }
.ibtn { width:2.1875vw; height:2.1875vw; display:grid; place-items:center; border-radius:0.625vw; background:var(--s2); border:1px solid var(--bd); color:#c9cacd; cursor:pointer; position:relative; transition:background .2s; }
.bell-btn {
      position: relative;
      background: #141922;
      border: 1px solid #ffffff12;
      color: #8b949e;
      width: 8vw;
      height: 8vw;
      border-radius: 2.4vw;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      padding: 0;
}
.badge-dot {
    position: absolute;
    top: -2vw;
    right: -2vw;
    background: #10b989;
    color: #fff;
    font-size: 2.4vw;
    font-weight: 700;
    min-width: 4vw;
    height: 4vw;
    border-radius: 2.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #0d111a;
}
.ibtn:hover { background:var(--s3); } .ibtn svg { width:1.0416667vw; height:1.0416667vw; }
.ibtn .pip { position:absolute; top:0.46875vw; right:0.5208333vw; width:0.4166667vw; height:0.4166667vw; border-radius:50%; background:var(--dn); }
.avatar {position: relative;background: none;border: none;cursor: pointer;display: flex;align-items: center;padding: 0;}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    background-image: url(../img/Teal_Snorkeling_Mascot_Portrait-removebg-preview.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.user-badge {
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:12px;
  height:12px;
  border-radius:50%;
  background: #10b989;
  border:2px solid #0d111a;
}
.dd {position:relative;}
.menu { position:absolute; right:0; top:calc(100% + 0.5208333vw); width:17.1875vw; padding:0.5208333vw; border-radius:0.9375vw; background:#141414; border:1px solid var(--bd); box-shadow:0 1.25vw 3.125vw rgba(0,0,0,.6); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .25s, transform .3s var(--ease), visibility 0s .3s; z-index:80; }

.menu.show {
    opacity: 1;
    visibility: visible;
}
.menu.open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.menu.sm { width:11.9791667vw; }
.menu a, .menu .mi-row { display:flex; align-items:center; gap:0.5208333vw; padding:0.5729167vw 0.625vw; border-radius:0.5208333vw; font-size:0.7291667vw; color:#d6d7da; cursor:pointer; }
.menu a:hover { background:rgba(255,255,255,.05); }
.menu hr { border:0; border-top:1px solid var(--bd); margin:0.3125vw 0; }
.dd .menu.sm { display: none !important; }
.pp [hidden] { display: none !important; }

.pp-scrim {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(0.15625vw); backdrop-filter: blur(0.15625vw);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.pp-scrim.open { opacity: 1; pointer-events: auto; }

.pp {
  --u: 0.0520833vw;
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 410;
  width: calc(420 * var(--u)); height: 100dvh;
  background: #1d1d1f; overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.06);
  border-radius: calc(24 * var(--u)) 0 0 calc(24 * var(--u));
  box-shadow: calc(-20 * var(--u)) 0 calc(60 * var(--u)) rgba(0,0,0,.55);
  transform: translateX(100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
}
.pp.open { transform: none; visibility: visible; transition-delay: 0s; }
html.pp-lock, html.pp-lock body { overflow: hidden; }

/* ---------- screens (each slides in from the right) ---------- */
.pp-view {
  position: absolute; inset: 0; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; background: #1d1d1f;
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u) + env(safe-area-inset-bottom));
  transform: translateX(100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
}
.pp-view::-webkit-scrollbar { display: none; }
.pp-view.is-behind { transform: translateX(-22%); }
.pp-view.is-active { transform: none; visibility: visible; transition-delay: 0s; }
.pp-instant .pp-view { transition: none !important; }

/* stagger: main screen (transition) + sub screens (animation) */
.pp-i { opacity: 0; transform: translateX(calc(28 * var(--u))); }
.pp.open .pp-i {
  opacity: 1; transform: none;
  transition: opacity .4s ease calc(var(--i, 0) * 45ms + 140ms),
              transform .6s var(--ease) calc(var(--i, 0) * 45ms + 140ms);
}
@keyframes ppRise { from { opacity: 0; transform: translateX(calc(24 * var(--u))); } }
.pp-view.is-active .pp-a { animation: ppRise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 140ms); }
.pp-shake { animation: auShake .45s; }

/* ---------- icons ---------- */
svg.pp-s { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header row ---------- */
.pp-hd { display: flex; align-items: center; justify-content: space-between; min-height: calc(40 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.pp-hd.ctr { display: grid; grid-template-columns: 1fr auto 1fr; }
.pp-hd.ctr .pp-hd-r { justify-self: end; }
.pp-hd-t { font-size: calc(16 * var(--u)); font-weight: 600; color: #fff; }
.pp-hd-r { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.pp-top { display: flex; justify-content: flex-end; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.pp-ib {
  position: relative; width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center;
  background: none; color: #fff; border-radius: calc(12 * var(--u)); cursor: pointer; transition: background .2s;
}
.pp-ib:hover { background: rgba(255,255,255,.07); }
.pp-ib .pp-n {
  position: absolute;
  top: calc(2 * var(--u));
  right: calc(2 * var(--u));
  min-width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #10b989;
  color: #00130a;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.pp-h1 { margin: 0 0 calc(14 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: calc(-.5 * var(--u)); color: #fff; }
.pp-h2 { margin: calc(22 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; color: #fff; }
.pp-h2:first-of-type { margin-top: calc(6 * var(--u)); }

/* ---------- main screen ---------- */
.pp-id { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: calc(20 * var(--u)); }
.pp-av { width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-radius: 50%; margin-bottom: calc(14 * var(--u)); background: #1c3a3a url(../img/Teal_Snorkeling_Mascot_Portrait-removebg-preview.png) center/cover no-repeat; border: 2px solid rgba(255,255,255,.12); }
.pp-name { margin: 0 0 calc(6 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: calc(-.4 * var(--u)); color: #fff; }
.pp-uid { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); background: none; color: #d6d7da; font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.pp-uid svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); opacity: .8; }
.pp-uid.copied { color: #5cf03c; }

.pp-card { background: #2a2a2c; border-radius: calc(16 * var(--u)); }
.pp-status { display: block; padding: calc(14 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(22 * var(--u)); color: #fff; }
.pp-status-r { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
.pp-status-r .pp-tri {width: calc(22 * var(--u));height: calc(22 * var(--u));flex: none;color: #10b989;}
.pp-status-r .pp-ch { margin-left: auto; width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #9a9ca1; }
.pp-prog { position: relative; height: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255,255,255,.12); margin: calc(14 * var(--u)) 0 calc(10 * var(--u)); }
.pp-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 3%; border-radius: calc(4 * var(--u)); background: #5b8cff; }
.pp-prog-t { display: flex; justify-content: space-between; align-items: center; font-size: calc(12 * var(--u)); color: #9a9ca1; }
.pp-prog-t u { color: #d6d7da; text-underline-offset: calc(2 * var(--u)); }
.pp-prog-t svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #5b8cff; }

.pp-sec { display: flex; justify-content: space-between; align-items: center; margin: 0 0 calc(10 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a9ca1; }
.pp-sec a { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); text-transform: none; letter-spacing: 0; font-size: calc(13 * var(--u)); font-weight: 500; color: #d6d7da; }
.pp-sec a svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-bottom: calc(22 * var(--u)); cursor: pointer; }
.pp-stat { padding: calc(16 * var(--u)); }
.pp-stat small { display: block; font-size: calc(13 * var(--u)); font-weight: 600; color: #e4e5e8; margin-bottom: calc(8 * var(--u)); }
.pp-stat b { font-size: calc(16 * var(--u)); font-weight: 600; color: #9a9ca1; }
.pp-stat b.up { color: #34d17a; } .pp-stat b.dn { color: #ff5d5d; }

.pp-list { margin-bottom: calc(22 * var(--u)); overflow: hidden; }
.pp-row {
  display: flex; align-items: center; gap: calc(14 * var(--u)); width: 100%; box-sizing: border-box;
  padding: calc(14 * var(--u)) calc(16 * var(--u)); background: none; color: #fff;
  font-size: calc(15 * var(--u)); font-weight: 500; text-align: left; cursor: pointer; transition: background .2s;
}
.pp-row:hover { background: rgba(255,255,255,.04); }
.pp-row + .pp-row { position: relative; }
.pp-row + .pp-row::before { content: ""; position: absolute; left: calc(50 * var(--u)); right: 0; top: 0; border-top: 1px solid rgba(255,255,255,.08); }
.pp-row .pp-ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; color: #c9cacd; }
.pp-row .pp-ch { margin-left: auto; width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #6f7177; }
.pp-row.out, .pp-row.out .pp-ic { color: #ff8f8f; }

/* ---------- notifications ---------- */
.pp-chips { display: flex; gap: calc(8 * var(--u)); overflow-x: auto; margin: 0 calc(-16 * var(--u)) calc(6 * var(--u)); padding: 0 calc(16 * var(--u)) calc(4 * var(--u)); scrollbar-width: none; }
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chip { flex: none; padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: none; color: #fff; font-size: calc(13 * var(--u)); font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.pp-chip:hover { border-color: rgba(255,255,255,.4); }
.pp-chip.on { background: #fff; color: #111; border-color: #fff; }
.pp-day h4 { margin: calc(20 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: #9a9ca1; font-weight: 700; }
.pp-n-item { display: flex; align-items: flex-start; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) 0 calc(14 * var(--u)); }
.pp-n-item > svg.pp-s { color: #c9cacd; margin-top: calc(2 * var(--u)); }
.pp-n-body { flex: 1; min-width: 0; }
.pp-n-body b { display: block; font-size: calc(15 * var(--u)); font-weight: 500; color: #fff; line-height: 1.3; }
.pp-n-body small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: #9a9ca1; }
.pp-n-body a { display: inline-block; margin-top: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: #5cf03c; }
.pp-n-time { display: flex; align-items: center; gap: calc(8 * var(--u)); flex: none; font-size: calc(12 * var(--u)); color: #c9cacd; }
.pp-n-time i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #3ddc57; }
.pp-empty { padding: calc(40 * var(--u)) 0; text-align: center; font-size: calc(13 * var(--u)); color: #9a9ca1; }

/* ---------- rankings ---------- */
.pp-note { padding: calc(16 * var(--u)); margin-bottom: calc(10 * var(--u)); border: 1px solid rgba(255,255,255,.12); border-radius: calc(16 * var(--u)); }
.pp-note b { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; color: #fff; }
.pp-note p { font-size: calc(13 * var(--u)); line-height: 1.5; color: #9a9ca1; }
.pp-rk { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.pp-tile { position: relative; min-height: calc(128 * var(--u)); padding: calc(14 * var(--u)); box-sizing: border-box; border-radius: calc(16 * var(--u)); background: #262628; display: flex; flex-direction: column; justify-content: space-between; transition: transform .35s var(--ease); }
.pp-tile:hover { transform: translateY(calc(-3 * var(--u))); }
.pp-tile.wide { grid-column: span 2; }
.pp-tile span { max-width: 60%; font-size: calc(13 * var(--u)); line-height: 1.3; color: #e4e5e8; }
.pp-tile em { font-style: normal; font-size: calc(14 * var(--u)); color: #9a9ca1; }
.pp-tile svg.pp-3d { position: absolute; right: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(42 * var(--u)); height: calc(42 * var(--u)); }

/* ---------- referral ---------- */
.pp-lead { margin: 0 0 calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: #9a9ca1; }
.pp-step { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); width: 100%; box-sizing: border-box; padding: calc(12 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: #262628; color: #6f7177; text-align: left; }
.pp-step b { display: block; font-size: calc(15 * var(--u)); font-weight: 700; }
.pp-step small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; }
.pp-step.on { background: linear-gradient(90deg, #4dffc3, #5cf03c); color: #00130a; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; }
.pp-step.on:hover { transform: translateY(calc(-2 * var(--u))); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(92,240,60,.25); }
.pp-step.on small { color: rgba(0,19,10,.72); }
.pp-reward { position: relative; margin-top: calc(18 * var(--u)); height: calc(318 * var(--u)); border-radius: calc(20 * var(--u)); overflow: hidden; text-align: center; padding-top: calc(18 * var(--u)); box-sizing: border-box; background: radial-gradient(90% 70% at 50% 40%, #62c63c, #2f6e1c 70%, #1d3d12); }
.pp-reward small { display: block; font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.pp-reward b { display: block; margin-top: calc(4 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; color: #fff; }
.pp-reward svg.pp-cube { display: block; width: calc(220 * var(--u)); margin: calc(8 * var(--u)) auto 0; animation: coinFloat 4s ease-in-out infinite; }
.pp-reward button { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(40,40,40,.78); -webkit-backdrop-filter: blur(calc(6 * var(--u))); backdrop-filter: blur(calc(6 * var(--u))); color: #fff; font-size: calc(15 * var(--u)); font-weight: 700; cursor: pointer; }
.pp-terms { margin-top: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #262628; font-size: calc(12 * var(--u)); line-height: 1.55; color: #b5b6ba; }
.pp-terms b { color: #fff; }
.pp-link { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #262628; border: 1px dashed rgba(255,255,255,.2); font-size: calc(12 * var(--u)); color: #d6d7da; word-break: break-all; cursor: pointer; }
.pp-link.copied { color: #5cf03c; }

/* ---------- settings ---------- */
.pp-set { display: flex; align-items: center; gap: calc(14 * var(--u)); width: 100%; box-sizing: border-box; padding: calc(12 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(8 * var(--u)); border-radius: calc(12 * var(--u)); background: #2a2a2c; color: #fff; text-align: left; cursor: pointer; transition: background .2s, transform .3s var(--ease); }
.pp-set:hover { background: #313134; transform: translateX(calc(3 * var(--u))); }
.pp-set svg.pp-s { color: #e4e5e8; }
.pp-set b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; }
.pp-set small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: #9a9ca1; }
.pp-set .warn { margin-left: auto; color: #ffa726; }
.pp-set.out { margin-top: calc(22 * var(--u)); color: #ff5d6c; }
.pp-set.out svg.pp-s { color: #ff5d6c; }
.pp-set.out b { flex: 1; text-align: center; padding-right: calc(22 * var(--u)); }

/* ---------- forms (personal info + password) ---------- */
.pp-ava-big { position: relative; display: block; width: calc(96 * var(--u)); height: calc(96 * var(--u)); margin: calc(6 * var(--u)) auto calc(22 * var(--u)); border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.12); background: #1c3a3a url(../img/Teal_Snorkeling_Mascot_Portrait-removebg-preview.png) center/cover no-repeat; }
.pp-ava-big::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.28); }
.pp-ava-big svg.pp-s { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; }
.pp-ava-big input { display: none; }
.pp-field { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(14 * var(--u)); margin-bottom: calc(12 * var(--u)); box-sizing: border-box; border-radius: calc(14 * var(--u)); background: #262628; border: 1px solid rgba(255,255,255,.08); transition: border-color .25s, box-shadow .25s; }
.pp-field:focus-within { border-color: #5cf03c; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(92,240,60,.12); }
.pp-field > svg.pp-s { color: #9a9ca1; }
.pp-field .in { position: relative; flex: 1; height: 100%; }
.pp-field input { position: absolute; inset: 0; width: 100%; box-sizing: border-box; padding-top: calc(16 * var(--u)); background: none; border: 0; outline: 0; color: #fff; font-size: calc(15 * var(--u)); font-weight: 500; }
.pp-field label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: calc(15 * var(--u)); color: #9a9ca1; pointer-events: none; transition: top .25s var(--ease), transform .25s var(--ease), font-size .25s var(--ease); }
.pp-field input:focus + label, .pp-field input:not(:placeholder-shown) + label { top: calc(11 * var(--u)); transform: none; font-size: calc(11 * var(--u)); }
.pp-eye { width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; background: none; color: #9a9ca1; cursor: pointer; flex: none; }
.pp-eye:hover { color: #fff; }
.pp-err { display: none; margin: calc(-4 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: #ff7b7b; }
.pp-err.show { display: block; }
.pp-cta { width: 100%; height: calc(48 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(90deg, #4dffc3, #5cf03c); color: #00130a; font-size: calc(15 * var(--u)); font-weight: 700; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.pp-cta:hover { transform: translateY(calc(-2 * var(--u))); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(92,240,60,.25); }
.pp-cta:active { transform: scale(.98); }
.note-i { display:flex; gap:0.625vw; padding:0.5208333vw 0.625vw; border-radius:0.5208333vw; font-size:0.6770833vw; line-height:1.4; color:#c9cacd; } .note-i small { color:var(--mut); display:block; margin-top:0.1041667vw; }
.acct-btn {display:flex;align-items:center;gap: 0.375rem;padding:0.4166667vw 0.7291667vw 0.4166667vw 0.7291667vw;border-radius: 9999px;background-color: rgb(255 255 255 / 0.06);border: 1px solid rgb(255 255 255 / 0.06);color:#fff;cursor:pointer;text-align:left;}

.acct-btn svg {
    color: #4b5563;
}

.acct-btn.open svg {
    transform: rotate(180deg);
}
.acct-btn small { display:block; font-size:0.5729167vw; color:var(--mut); } .acct-btn b { font-size:0.78125vw; font-weight:600; }
.dot { width:0.46875vw; height:0.46875vw; border-radius:50%; background:var(--up); box-shadow:0 0 0 0.2083333vw rgba(52,209,122,.15); flex:none; } .dot.demo { background:var(--amber); box-shadow:0 0 0 0.2083333vw rgba(255,176,32,.15); }
.acc-symbol {
    height: 4.8vw;
    width: 4.8vw;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 700;
}
.acc-symbol.demo{
    box-shadow: 0 0 #0000, 0 0 0 1px #fe9a004d, 0 0 #0000;
    color: #ffb900;
    background-color: #fe9a004d;
}
.acc-symbol.real {
    box-shadow: 0 0 #0000, 0 0 0 1px #00bc7d4d, 0 0 #0000;
    color: #05df72;
    background-color: #00bc7d33;
}
.acc-bal {
  font-weight: 600;
  color: #ffffff;
}
.acc-bal {
        font-size: 3.2vw !important;
        line-height: 1.6;
        text-wrap: nowrap;
        }
.acct-row {width:100%;display:flex;align-items:center;gap:0.625vw;background:none;color:#fff;cursor:pointer;text-align:left;border:1px solid transparent;padding-top: 0.625rem;padding-bottom: 0.625rem;padding-left: 0.75rem;padding-right: 0.75rem;border-radius: 0.75rem;justify-content: space-between;}
.acct-row:hover { background:rgba(255,255,255,.04); } .acct-row.real.on {background: #1f2837;}

.acct-row.demo.on {
    background-color: #fe9a001a;
}

.acc-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.acc-s {
    color: #6b7280;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1rem;
    background-color: rgb(255 255 255 / 0.05);
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
}

.real .acc-s {
    color: #05df72;
    background-color: #00bc7d33;
}

.demo .acc-s {
    background-color: #fe9a0033;
    color: #ffb900;
}

.acc-info {
    text-align: left;
}

.acc-name {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.acct-row .acc-bal {
    color: #4b5563;
}

.acc-d {
    border-radius: 9999px;
    width: 0.5rem;
    height: 0.5rem;
}

.demo.on .acc-d {
    background-color: #ffb900;
}

.real.on .acc-d {
    background-color: #05df72;
}
.acct-row span { flex:1; } .acct-row b { display:block; font-size:0.7291667vw; } .acct-row small { color:var(--mut); font-size:0.625vw; } .acct-row em { font-style:normal; font-weight:600; font-size:0.7291667vw; }
.demo-bar { display:flex; align-items:center; gap:0.625vw; padding:0.46875vw 1.6666667vw; font-size:0.6770833vw; color:#ffd98a; background:linear-gradient(90deg, rgba(255,176,32,.14), rgba(255,176,32,.04)); border-bottom:1px solid rgba(255,176,32,.2); }
.demo-bar button { background:none; color:#fff; text-decoration:underline; cursor:pointer; font-size:0.6770833vw; padding:0; margin-left:0.4166667vw; }
.bnav { display:none; }

/* ---------- Page + primitives ---------- */
.page { padding:1.4583333vw 1.6666667vw 3.6458333vw; max-width:70.8333333vw; width:100%; margin:0 auto; box-sizing:border-box; display:flex; flex-direction:column; gap:1.1458333vw; }
.page > * { animation:pgUp .7s var(--ease) backwards; } .page > *:nth-child(2) { animation-delay:.06s; } .page > *:nth-child(3) { animation-delay:.12s; } .page > *:nth-child(4) { animation-delay:.18s; } .page > *:nth-child(n+5) { animation-delay:.24s; }
@keyframes pgUp { from { opacity:0; transform:translateY(22px); } }
.ph { display:flex; justify-content:space-between; align-items:flex-end; gap:0.8333333vw; flex-wrap:wrap; } .ph h2 { margin:0 0 0.3125vw; font-size:1.5625vw; letter-spacing:-1px; } .ph p { margin:0; }
.card { background:var(--s1); border:1px solid var(--bd); border-radius:1.1458333vw; padding:1.1458333vw; min-width:0; }
.card h3 { margin:0 0 0.2083333vw; font-size:0.8854167vw; font-weight:600; letter-spacing:-.3px; } .card .sub { margin:0 0 0.9375vw; font-size:0.6770833vw; color:var(--mut); }
.grid { display:grid; gap:0.8333333vw; } .g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.row { display:flex; align-items:center; gap:0.625vw; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4166667vw; height:2.3958333vw; padding:0 1.1458333vw; border-radius:0.625vw; font-weight:600; font-size:0.7291667vw; cursor:pointer; border:1px solid transparent; background:var(--s3); color:#fff; transition:transform .25s var(--ease), box-shadow .25s, background .2s, opacity .2s; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); } .btn:active { transform:scale(.98); } .btn[disabled] { opacity:.45; pointer-events:none; }
.dp-btn {
  background: #10b989;
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(0, 230, 118, 0.25);
  display: flex;
  align-items: center;
  gap: 1.4vw;
}
.btn.pri { background:linear-gradient(90deg,#10b989,#8ada36); color:#00130a; } .btn.pri:hover { box-shadow:0 0.5208333vw 1.5625vw rgba(16,185,137,.35); }
.btn.ghost { background:transparent; border-color:var(--bd); } .btn.ghost:hover { background:rgba(255,255,255,.05); }
.btn.danger { background:rgba(255,93,93,.12); color:#ff9b9b; border-color:rgba(255,93,93,.3); }
.btn.sm { height:1.875vw; padding:0 0.7291667vw; font-size:0.6770833vw; border-radius:0.5208333vw; }
.chips { display:flex; flex-wrap:wrap; gap:0.4166667vw; }
.chip { padding:0.4166667vw 0.7291667vw; border-radius:999px; background:var(--s2); border:1px solid var(--bd); font-size:0.6770833vw; color:#c9cacd; cursor:pointer; transition:all .2s; }
.chip:hover { border-color:rgba(255,255,255,.2); } .chip.on { background:rgba(138,218,54,.14); border-color:rgba(138,218,54,.5); color:#d9ffa8; }
.tabs { display:flex; gap:0.3125vw; padding:0.2604167vw; border-radius:0.7291667vw; background:var(--s2); border:1px solid var(--bd); width:max-content; max-width:100%; overflow-x:auto; }
.tabs button { padding:0.46875vw 0.9375vw; border-radius:0.5208333vw; background:none; color:var(--mut); font-weight:600; font-size:0.7291667vw; cursor:pointer; white-space:nowrap; transition:all .2s; }
.tabs button.on { background:var(--s3); color:#fff; box-shadow:0 0.1041667vw 0.5208333vw rgba(0,0,0,.4); }
.bdg { display:inline-flex; align-items:center; gap:0.3125vw; padding:0.2083333vw 0.5208333vw; border-radius:999px; font-size:0.625vw; font-weight:600; background:rgba(255,255,255,.07); color:#c9cacd; white-space:nowrap; }
.bdg.ok { background:rgba(52,209,122,.14); color:#5fe39a; } .bdg.warn { background:rgba(255,176,32,.14); color:#ffc65c; } .bdg.no { background:rgba(255,93,93,.14); color:#ff8f8f; } .bdg.pro { background:linear-gradient(90deg,rgba(16,185,137,.25),rgba(138,218,54,.25)); color:#d9ffa8; }
.tbl { width:100%; border-collapse:collapse; font-size:0.7291667vw; } .tbl th { text-align:left; font-weight:500; font-size:0.625vw; color:var(--mut); padding:0 0.5208333vw 0.625vw; } .tbl td { padding:0.6770833vw 0.5208333vw; border-top:1px solid var(--bd); white-space:nowrap; } .tbl-wrap { overflow-x:auto; }
.empty { padding:1.7708333vw 0.5208333vw; text-align:center; color:var(--mut); font-size:0.7291667vw; }
.bar { height:0.3125vw; border-radius:0.3125vw; background:rgba(255,255,255,.08); overflow:hidden; } .bar i { display:block; height:100%; border-radius:0.3125vw; background:linear-gradient(90deg,#10b989,#8ada36); transition:width .6s var(--ease); }
.sw { position:relative; width:2.3958333vw; height:1.3541667vw; flex:none; border-radius:1.3541667vw; background:#2a2a2d; cursor:pointer; transition:background .25s; border:0; padding:0; }
.sw::after { content:""; position:absolute; left:0.15625vw; top:0.15625vw; width:1.0416667vw; height:1.0416667vw; border-radius:50%; background:#fff; transition:transform .3s var(--ease); } .sw.on { background:linear-gradient(90deg,#10b989,#8ada36); } .sw.on::after { transform:translateX(1.0416667vw); }
.stepper { display:flex; align-items:center; height:2.7083333vw; border-radius:0.7291667vw; background:#141414; border:1px solid var(--bd); overflow:hidden; } .stepper:focus-within { border-color:var(--g); box-shadow:0 0 0 0.2083333vw rgba(138,218,54,.14); }
.stepper button { width:2.5vw; height:100%; background:none; color:#c9cacd; font-size:1.0416667vw; cursor:pointer; } .stepper button:hover { background:rgba(255,255,255,.06); }
.stepper input { flex:1; min-width:0; height:100%; background:none; border:0; outline:none; color:#fff; font-size:0.8333333vw; font-weight:600; text-align:center; } .stepper span { color:var(--mut); font-size:0.625vw; padding-right:0.625vw; }
select.au-input { appearance:none; -webkit-appearance:none; padding-left:0.8333333vw; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9ca1' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 0.7291667vw center; }
.au-input.pl { padding-left:0.8333333vw; } textarea.au-input { height:auto; padding:0.7291667vw 0.8333333vw; }
.frm { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.8333333vw; } .frm .span2 { grid-column:span 2; }
.modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.0416667vw; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(0.3125vw); backdrop-filter:blur(0.3125vw); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; }
.modal.open { opacity:1; visibility:visible; }
.modal .box { width:min(28.125vw,100%); max-height:88vh; overflow:auto; padding:1.4583333vw; border-radius:1.25vw; background:#121212; border:1px solid var(--bd); transform:translateY(16px) scale(.98); transition:transform .4s var(--ease); display:flex; flex-direction:column; gap:0.8333333vw; } .modal.open .box { transform:none; }
.modal .box.wide { width:min(37.5vw,100%); } .mh { margin:0; font-size:1.1458333vw; letter-spacing:-.5px; } .box p { margin:0; line-height:1.5; }
.toasts { position:fixed; right:1.0416667vw; bottom:1.0416667vw; z-index:300; display:flex; flex-direction:column; gap:0.5208333vw; }
.toast { min-width:13.5416667vw; max-width:18.75vw; padding:0.7291667vw 0.8333333vw; border-radius:0.7291667vw; background:#161616; border:1px solid var(--bd); box-shadow:0 0.9375vw 2.6041667vw rgba(0,0,0,.55); font-size:0.7291667vw; line-height:1.4; animation:toastIn .45s var(--ease); } .toast.win { border-color:rgba(52,209,122,.55); } .toast.loss, .toast.err { border-color:rgba(255,93,93,.55); } .toast.out { opacity:0; transform:translateX(1.0416667vw); transition:.3s; }
@keyframes toastIn { from { opacity:0; transform:translateX(1.5625vw); } }
.spark { width:100%; height:2.2916667vw; display:block; } .spark polyline { fill:none; stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round; }

/* ---------- Hub ---------- */
.hero-card { display:flex; justify-content:space-between; align-items:center; gap:1.25vw; padding:1.7708333vw; border-radius:1.4583333vw; border:1px solid var(--bd); background:radial-gradient(90% 140% at 100% 100%, rgba(16,185,137,.35), transparent 60%), linear-gradient(135deg,#101312,#0a0a0a); overflow:hidden; position:relative; }
.hero-card h2 { margin:0.3125vw 0 0.7291667vw; font-size:0.9375vw; font-weight:500; color:#c9cacd; } .hc-bal { font-size:clamp(40px,5vw,60px); font-weight:700; letter-spacing:-2px; margin-bottom:1.1458333vw; }
.hc-r { position:relative; width:11.4583333vw; height:6.7708333vw; flex:none; } .hc-r .coin { width:6.25vw; height:6.25vw; font-size:2.7083333vw; position:absolute; right:0.5208333vw; top:-0.3125vw; animation:coinFloat 4s ease-in-out infinite; }
.stat .l { font-size:0.6770833vw; color:var(--mut); margin-bottom:0.4166667vw; } .stat .v { font-size:1.3541667vw; font-weight:700; letter-spacing:-.8px; }
.banner { display:flex; align-items:center; gap:0.8333333vw; padding:0.8333333vw 1.0416667vw; border-radius:0.9375vw; border:1px solid rgba(255,176,32,.3); background:linear-gradient(90deg,rgba(255,176,32,.12),rgba(255,176,32,.03)); } .banner b { display:block; margin-bottom:0.1041667vw; } .banner p { margin:0; font-size:0.6770833vw; color:#d9c9a0; } .banner .btn { margin-left:auto; }
.mk { display:flex; flex-direction:column; gap:0.7291667vw; padding:0.9375vw; transition:transform .35s var(--ease), border-color .25s, box-shadow .3s; } .mk:hover { transform:translateY(-4px); border-color:rgba(138,218,54,.45); box-shadow:0 0.9375vw 2.0833333vw rgba(0,0,0,.4); }
.mk-ic { width:2.1875vw; height:2.1875vw; border-radius:0.625vw; display:grid; place-items:center; font-weight:700; font-size:0.6770833vw; color:#d9ffa8; background:rgba(138,218,54,.12); border:1px solid rgba(138,218,54,.3); flex:none; } .mk b { font-size:0.78125vw; } .mk small { font-size:0.625vw; }
.mk-px { font-size:1.0416667vw; font-weight:600; } .flash-up { animation:fUp .6s; } .flash-dn { animation:fDn .6s; } @keyframes fUp { from { color:var(--up); } } @keyframes fDn { from { color:var(--dn); } }
.bot { display:flex; flex-direction:column; gap:0.7291667vw; } .bot p { margin:0; font-size:0.6770833vw; color:var(--mut); line-height:1.5; } .bot .meta { display:flex; gap:0.4166667vw; flex-wrap:wrap; } .bot.run { border-color:rgba(138,218,54,.5); box-shadow:0 0 0 1px rgba(138,218,54,.15), 0 0 2.0833333vw rgba(16,185,137,.12); }

/* ---------- Trade ---------- */
.tr { display:grid; grid-template-columns:minmax(0,1fr) 19.7916667vw; gap:0.8333333vw; align-items:start; } .tr-main { display:flex; flex-direction:column; gap:0.8333333vw; min-width:0; }
.chart-h { display:flex; align-items:center; gap:0.9375vw; flex-wrap:wrap; margin-bottom:0.7291667vw; }
.msel { display:flex; align-items:center; gap:0.5208333vw; padding:0.5208333vw 0.7291667vw; border-radius:0.625vw; background:var(--s2); border:1px solid var(--bd); color:#fff; font-weight:600; font-size:0.78125vw; cursor:pointer; }
.mlist { position:absolute; left:0; top:calc(100% + 0.4166667vw); width:17.7083333vw; max-height:19.7916667vw; overflow:auto; padding:0.4166667vw; border-radius:0.8333333vw; background:#141414; border:1px solid var(--bd); box-shadow:0 1.25vw 3.125vw rgba(0,0,0,.6); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .3s var(--ease), visibility 0s .3s; z-index:70; } .mlist.open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mlist button { width:100%; display:flex; justify-content:space-between; align-items:center; padding:0.5208333vw 0.625vw; border-radius:0.5208333vw; background:none; color:#fff; font-size:0.7291667vw; cursor:pointer; } .mlist button:hover, .mlist button.on { background:rgba(255,255,255,.06); } .mlist .gl { padding:0.5208333vw 0.625vw 0.2083333vw; font-size:0.5729167vw; letter-spacing:.08em; text-transform:uppercase; color:#5f6167; }
.px { display:flex; align-items:baseline; gap:0.5208333vw; } .px b { font-size:1.3541667vw; letter-spacing:-.8px; } .live { margin-left:auto; display:flex; align-items:center; gap:0.4166667vw; font-size:0.625vw; color:var(--mut); } .live i { width:0.4166667vw; height:0.4166667vw; border-radius:50%; background:var(--up); animation:pulse 1.4s infinite; } @keyframes pulse { 50% { opacity:.3; } }
#chart { width:100%; height:19.7916667vw; display:block; }
.dstrip { display:grid; grid-template-columns:repeat(10,1fr); gap:0.4166667vw; margin-top:0.8333333vw; } .ds { text-align:center; font-size:0.625vw; color:var(--mut); } .ds i { display:grid; place-items:center; width:100%; max-width:2.3958333vw; aspect-ratio:1; margin:0 auto 0.3125vw; border-radius:50%; font-style:normal; font-weight:700; font-size:0.78125vw; color:#fff; background:var(--s2); border:2px solid transparent; transition:all .3s; } .ds.hi i { border-color:var(--up); } .ds.lo i { border-color:var(--dn); } .ds.cur i { background:#2a2a2e; transform:scale(1.12); box-shadow:0 0 0 0.15625vw rgba(255,255,255,.18); }
.ticket { position:sticky; top:4.7916667vw; display:flex; flex-direction:column; gap:0.9375vw; }
.seg { display:grid; grid-template-columns:repeat(2,1fr); gap:0.3125vw; padding:0.2604167vw; border-radius:0.7291667vw; background:var(--s2); border:1px solid var(--bd); } .seg button { padding:0.5729167vw 0.3125vw; border-radius:0.5208333vw; background:none; color:var(--mut); font-weight:600; font-size:0.6770833vw; cursor:pointer; transition:all .2s; } .seg button.on { background:var(--s3); color:#fff; box-shadow:0 0.1041667vw 0.5208333vw rgba(0,0,0,.4); }
.digits { display:grid; grid-template-columns:repeat(5,1fr); gap:0.4166667vw; } .digits button { height:2.2916667vw; border-radius:0.625vw; background:var(--s2); border:1px solid var(--bd); color:#fff; font-weight:700; cursor:pointer; transition:all .2s; } .digits button.on { background:rgba(138,218,54,.16); border-color:var(--g); color:#d9ffa8; }
.buy-row { display:grid; grid-template-columns:1fr 1fr; gap:0.5208333vw; } .buy { display:flex; flex-direction:column; gap:0.1041667vw; align-items:center; padding:0.7291667vw 0.4166667vw; border-radius:0.7291667vw; color:#fff; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, opacity .2s; } .buy b { font-size:0.8333333vw; } .buy small { font-size:0.625vw; opacity:.85; } .buy:hover { transform:translateY(-2px); } .buy[disabled] { opacity:.35; pointer-events:none; }
.buy.a { background:linear-gradient(135deg,#1fb26a,#128a50); box-shadow:0 0.4166667vw 1.25vw rgba(31,178,106,.25); } .buy.b { background:linear-gradient(135deg,#f0524f,#c63936); box-shadow:0 0.4166667vw 1.25vw rgba(240,82,79,.22); }
.hint2 { font-size:0.625vw; color:var(--mut); text-align:center; }

/* ---------- Signals ---------- */
.sig { position:relative; display:flex; flex-direction:column; gap:0.8333333vw; overflow:hidden; } .sig .body { display:flex; flex-direction:column; gap:0.8333333vw; transition:filter .3s; }
.sig.lock .body { filter:blur(0.3645833vw); user-select:none; pointer-events:none; } .sig .lockbox { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5208333vw; background:rgba(5,5,5,.35); text-align:center; padding:1.0416667vw; }
.ring { --p:70; width:3.0208333vw; height:3.0208333vw; border-radius:50%; flex:none; display:grid; place-items:center; background:conic-gradient(var(--g) calc(var(--p)*1%), #232326 0); } .ring i { width:2.3958333vw; height:2.3958333vw; border-radius:50%; display:grid; place-items:center; background:var(--s1); font:600 0.6770833vw 'IBM Plex Sans',sans-serif; font-style:normal; }
.sig .call { padding:0.7291667vw; border-radius:0.7291667vw; background:var(--s2); border:1px solid var(--bd); } .sig .call b { font-size:0.9895833vw; letter-spacing:-.4px; } .cd { font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- Copy trading ---------- */
.tc { display:flex; flex-direction:column; gap:0.7291667vw; transition:transform .35s var(--ease), border-color .25s; } .tc:hover { transform:translateY(-4px); border-color:rgba(138,218,54,.4); }
.av { width:2.3958333vw; height:2.3958333vw; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#001106; flex:none; } .tc .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.4166667vw; } .tc .stats div { padding:0.5208333vw; border-radius:0.625vw; background:var(--s2); text-align:center; } .tc .stats small { display:block; font-size:0.5729167vw; color:var(--mut); margin-bottom:0.2083333vw; } .tc .stats b { font-size:0.78125vw; }
.risk { display:flex; gap:0.15625vw; } .risk i { flex:1; height:0.2604167vw; border-radius:0.15625vw; background:#26262a; } .risk i.on { background:var(--g); } .risk.hi i.on { background:var(--amber); } .risk.vh i.on { background:var(--dn); }

/* ---------- Classes ---------- */
.feat { display:flex; justify-content:space-between; align-items:center; gap:1.25vw; padding:1.5625vw; border-radius:1.3541667vw; border:1px solid var(--bd); background:radial-gradient(90% 140% at 0 0, rgba(138,218,54,.25), transparent 55%), linear-gradient(135deg,#0f1511,#0a0a0a); } .feat h3 { font-size:1.3541667vw; letter-spacing:-.8px; margin:0.4166667vw 0; } .feat p { margin:0 0 0.9375vw; color:#b9bbbf; max-width:27.0833333vw; line-height:1.5; }
.cls { padding:0; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .35s var(--ease), border-color .25s; } .cls:hover { transform:translateY(-4px); border-color:rgba(138,218,54,.4); }
.cls .th { height:6.7708333vw; display:grid; place-items:center; font-size:2.3958333vw; position:relative; } .cls .th .bdg { position:absolute; left:0.7291667vw; top:0.7291667vw; background:rgba(0,0,0,.45); } .cls .in { padding:0.9375vw; display:flex; flex-direction:column; gap:0.625vw; } .cls h4 { margin:0; font-size:0.8333333vw; letter-spacing:-.3px; }
.lesson { display:flex; align-items:center; gap:0.625vw; padding:0.625vw; border-radius:0.625vw; background:var(--s2); font-size:0.7291667vw; } .lesson i { width:1.3541667vw; height:1.3541667vw; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:0.625vw; font-weight:700; background:#26262a; } .lesson.done i { background:var(--g); color:#001106; }

/* ---------- Tools / plans ---------- */
.plan { display:flex; flex-direction:column; gap:0.8333333vw; position:relative; } .plan.best { border-color:rgba(138,218,54,.6); background:radial-gradient(100% 70% at 50% 0, rgba(16,185,137,.2), transparent 70%), var(--s1); } .plan .price { font-size:2.1875vw; font-weight:700; letter-spacing:-1.5px; } .plan .price small { font-size:0.7291667vw; color:var(--mut); font-weight:500; letter-spacing:0; }
.plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5208333vw; font-size:0.7291667vw; color:#c9cacd; } .plan li::before { content:"\2713"; color:var(--g); font-weight:700; margin-right:0.5208333vw; }
.tool { display:flex; flex-direction:column; gap:0.625vw; } .tool .ti { width:2.3958333vw; height:2.3958333vw; border-radius:0.7291667vw; display:grid; place-items:center; font-size:1.1458333vw; background:rgba(138,218,54,.1); border:1px solid rgba(138,218,54,.25); } .tool p { margin:0; font-size:0.6770833vw; color:var(--mut); line-height:1.5; }
.mockbars { display:flex; align-items:flex-end; gap:0.4166667vw; height:7.2916667vw; } .mockbars i { flex:1; border-radius:0.3125vw 0.3125vw 0 0; background:linear-gradient(180deg,#8ada36,#10b989); animation:grow .8s var(--ease) backwards; } @keyframes grow { from { height:4px !important; } }

/* ---------- Profile ---------- */
.prof-h { display:flex; align-items:center; gap:1.1458333vw; flex-wrap:wrap; } .prof-h .avatar { width:4.375vw; height:4.375vw; font-size:1.5625vw; cursor:default; } .prof-h h2 { margin:0 0 0.3125vw; font-size:1.3541667vw; letter-spacing:-.8px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:0.8333333vw; padding:0.8333333vw 0; border-top:1px solid var(--bd); } .set-row:first-of-type { border-top:0; } .set-row b { display:block; font-size:0.78125vw; } .set-row small { color:var(--mut); font-size:0.6770833vw; }

/* ---------- Deposit / Withdraw ---------- */
.pay { display:grid; grid-template-columns:18.75vw minmax(0,1fr); gap:0.8333333vw; align-items:start; }
.pm { display:flex; align-items:center; gap:0.7291667vw; width:100%; padding:0.7291667vw; border-radius:0.8333333vw; background:var(--s2); border:1px solid var(--bd); color:#fff; text-align:left; cursor:pointer; transition:all .25s var(--ease); } .pm:hover { border-color:rgba(255,255,255,.2); transform:translateX(3px); } .pm.on { border-color:var(--g); background:rgba(138,218,54,.07); }
.pm .pi { width:2.2916667vw; height:2.2916667vw; border-radius:0.625vw; display:grid; place-items:center; font-weight:800; font-size:0.7291667vw; background:#fff; color:#111; flex:none; } .pm b { display:block; font-size:0.78125vw; } .pm small { color:var(--mut); font-size:0.625vw; }
.sum { display:flex; flex-direction:column; gap:0.625vw; padding:0.8333333vw; border-radius:0.8333333vw; background:var(--s2); border:1px solid var(--bd); font-size:0.7291667vw; } .sum div { display:flex; justify-content:space-between; } .sum div:last-child { padding-top:0.625vw; border-top:1px solid var(--bd); font-weight:700; font-size:0.8333333vw; }
.addr { display:flex; align-items:center; gap:0.5208333vw; padding:0.7291667vw; border-radius:0.7291667vw; background:#141414; border:1px dashed rgba(255,255,255,.2); word-break:break-all; font-size:0.6770833vw; } .qrbox { width:7.2916667vw; height:7.2916667vw; border-radius:0.8333333vw; background:#fff; padding:0.5208333vw; flex:none; } .qrbox svg { width:100%; height:100%; }
.lockwrap { position:relative; } .lockwrap > .lk { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.625vw; text-align:center; padding:1.25vw; background:rgba(5,5,5,.78); -webkit-backdrop-filter:blur(0.2604167vw); backdrop-filter:blur(0.2604167vw); border-radius:1.1458333vw; }
.steps-l { display:flex; flex-direction:column; gap:0.7291667vw; } .steps-l div { display:flex; align-items:center; gap:0.625vw; color:var(--mut); font-size:0.7291667vw; transition:color .3s; } .steps-l i { width:1.3541667vw; height:1.3541667vw; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:0.6770833vw; border:2px solid #333; transition:all .3s; } .steps-l .go { color:#fff; } .steps-l .go i { border-color:var(--g); border-top-color:transparent; animation:auSpin .8s linear infinite; } .steps-l .ok { color:#fff; } .steps-l .ok i { background:var(--g); border-color:var(--g); color:#001106; animation:none; }

/* ---------- KYC ---------- */
.kyc { display:grid; grid-template-columns:15.625vw minmax(0,1fr); gap:0.8333333vw; align-items:start; }
.kst { display:flex; flex-direction:column; gap:0.3125vw; } .kst div { display:flex; align-items:center; gap:0.7291667vw; padding:0.7291667vw; border-radius:0.7291667vw; color:var(--mut); font-size:0.7291667vw; font-weight:500; } .kst i { width:1.6666667vw; height:1.6666667vw; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:0.6770833vw; background:#222; flex:none; } .kst .on { background:var(--s2); color:#fff; } .kst .on i { background:linear-gradient(135deg,#10b989,#8ada36); color:#001106; } .kst .done i { background:var(--up); color:#001106; } .kst .done { color:#fff; }
.dtypes { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5208333vw; } .dt { padding:0.8333333vw 0.5208333vw; border-radius:0.7291667vw; background:var(--s2); border:1px solid var(--bd); text-align:center; font-size:0.6770833vw; font-weight:600; cursor:pointer; color:#c9cacd; transition:all .2s; } .dt span { display:block; font-size:1.25vw; margin-bottom:0.3125vw; } .dt.on { border-color:var(--g); background:rgba(138,218,54,.08); color:#fff; }
.drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4166667vw; min-height:7.8125vw; padding:1.0416667vw; border-radius:0.9375vw; border:2px dashed rgba(255,255,255,.16); background:rgba(255,255,255,.02); text-align:center; cursor:pointer; transition:all .25s; font-size:0.7291667vw; color:var(--mut); } .drop:hover, .drop.over { border-color:var(--g); background:rgba(138,218,54,.05); color:#fff; } .drop b { color:#fff; } .drop.has { border-style:solid; border-color:rgba(52,209,122,.5); background:rgba(52,209,122,.05); color:#fff; }
.tl-i { display:flex; gap:0.7291667vw; } .tl-i i { width:0.625vw; height:0.625vw; border-radius:50%; background:var(--g); margin-top:0.2604167vw; flex:none; box-shadow:0 0 0 0.2604167vw rgba(138,218,54,.15); }

.faq-section { padding: 3.125vw 1.0416667vw 7.2916667vw; }
.faq-wrap {
  max-width: 48.9583333vw; margin: 0 auto;
  display: grid; grid-template-columns: 16.6666667vw minmax(0, 1fr); align-items: start;
}
.faq-aside { padding-right: 1.5625vw; }
.faq-title { margin: 0 0 1.0416667vw; font-size: 2.4vw; line-height: 1.1; font-weight: 700; letter-spacing: -1px; }
.faq-desc { margin: 0 0 1.5625vw; font-size: 0.8333333vw; line-height: 1.5; color: #9a9ca1; }
.faq-contact {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9375vw 1.25vw; border-radius: 0.7291667vw;
  background: linear-gradient(90deg, #10b989 0%, #8ada36 100%); color: #000;
  font-size: 0.8333333vw; font-weight: 600;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.faq-contact:hover { transform: translateY(-2px); box-shadow: 0 0.4166667vw 1.6666667vw rgba(16,185,137,.35); }
 
.faq-list { border-top: 1px solid rgba(255,255,255,.18); }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.18); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.0416667vw;
  padding: 1.3541667vw 0.4166667vw; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 1.0416667vw; font-weight: 600; line-height: 1.3; letter-spacing: -.2px;
  color: #9a9ca1; transition: color .25s;
}
.faq-q:hover, .faq-item.open .faq-q { color: #fff; }
 
/* plus -> minus icon */
.faq-ico { position: relative; flex: none; width: 1.0416667vw; height: 1.0416667vw; }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px;
  background: currentColor; border-radius: 2px; transition: transform .4s var(--ease);
}
.faq-ico::after { transform: rotate(90deg); }
.faq-item.open .faq-ico::after { transform: rotate(0deg); }
 
/* smooth height animation */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 2.6041667vw 1.3541667vw 0.4166667vw; font-size: 0.8333333vw; line-height: 1.6; color: #afb0b4; }

/* =====================================================
   MOBILE APP OVERHAUL - Single media query (max-width: 768px)
   Reference viewport: 360px = 100vw
   ===================================================== */
@media (max-width: 768px) {

  /* ---------- Base ---------- */
  html, body { overflow-x: hidden; }
  .hide-m { display: none !important; }
  .mega, .nav-backdrop { display: none; }

  /* ---------- Navbar ---------- */
  .navbar { height: 16.6666667vw; padding: 0 4.4444444vw; }
  .navbar.scrolled { background: rgba(0,0,0,.8); }
  .logo-wrapper { gap: 0; }

.top .logo-wrapper {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1vw;
}

.top .logo-wrapper img {
    width: 6.2vw;
    height: 6.2vw;
    border-radius: 1.6vw;
}

.top .logo-wrapper .lgx {
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
    font-size: 3vw;
    width: 8vw;
    overflow: hidden;
    text-wrap: nowrap;
}
  .logo { width: 8.3333333vw; height: 8.3333333vw; margin-right: 2.5vw; border-radius: 2vw; }
  .lgx { font-size: 4.1666667vw; letter-spacing: -0.1388889vw; }
  .nav-center, .btn-login, .lang-selector { display: none; }
  .nav-right { gap: 2.2222222vw; }
  .btn-try-free { height: 9.7222222vw; padding: 0 4.4444444vw; border-radius: 2.7777778vw; font-size: 3.8888889vw; display: flex; align-items: center; }

  /* burger + drawer (only visible if you add the markup) */
  .burger { display: grid; width: 9.7222222vw; height: 9.7222222vw; border-radius: 2.7777778vw; background: #1c1c1c; }
  .burger svg { width: 5.5555556vw; height: 5.5555556vw; }
  .mobile-drawer { padding: 4.4444444vw; background: #202020; }
  .md-header { margin-bottom: 5.5555556vw; }
  .md-close { font-size: 6.6666667vw; }
  .md-search { padding: 3.3333333vw 4.4444444vw; border-radius: 4.4444444vw; margin-bottom: 4.4444444vw; background: #2a2a2a; }
  .md-search input { font-size: 4.1666667vw; }
  .md-item { padding: 3.8888889vw 0; font-size: 4.7222222vw; border-bottom: 0; }
  .md-item .md-dot { font-size: 7.2222222vw; }
  .md-item svg { width: 4.4444444vw; height: 4.4444444vw; }
  .md-lang { padding: 4.4444444vw 0; font-size: 4.4444444vw; }
  .md-cta { padding: 4.4444444vw; border-radius: 8.3333333vw; font-size: 4.4444444vw; margin-top: 4.4444444vw; }

  /* ---------- Hero ---------- */
  .hero { min-height: 0; justify-content: flex-start; padding: 102vw 5.5555556vw 6vw; }
  .chart-bg {
    display: block; width: 100vw; max-width: none; left: 0; top: 6vw; opacity: .85;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 92%);
  }

    .asset-pill {
      /* max-width: 140px; */
      padding: 4px 8px;
      gap: 6px;
      border-radius: 8px;
  }
  .asset-name span:first-child {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .asset-price {
    display: none;
  }
  .hero-content { max-width: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
  .hero-content > br { display: none; }
  .hero h1 { font-size: 8.4vw; line-height: 1.14; letter-spacing: -0.3333333vw; margin: 0 0 6.6666667vw; }

  /* ---------- CTA buttons (hero + bottom) ---------- */
  .cta-button-primary { width: auto; max-width: none; margin: 0 auto; padding: 0.3333333vw; border-radius: 8.3333333vw; }
  .button-primary-inner { padding: 3.8888889vw 8.3333333vw; border-radius: 8vw; gap: 2.2222222vw; }
  .button-text, .button-text-absolute { font-size: 4.2vw; }
  .primary-icon-wrap { width: 5vw; height: 5vw; }
  .learn-more-link { font-size: 4.1666667vw; gap: 0.8333333vw; margin-top: 5vw; }

  /* ---------- Feature badges: 2 equal columns ---------- */
  .features-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5vw;
    width: 100%; padding: 0; margin: 8.3333333vw 0 0; justify-content: stretch;
  }
  .feature-badge {
    flex-direction: column; justify-content: center; gap: 1.1111111vw;
    min-height: 16.6666667vw; padding: 3.3333333vw 2.2222222vw;
    border: 0; border-radius: 3.3333333vw; background: #1c1c1c;
    font-size: 3.6111111vw; font-weight: 600; line-height: 1.2; text-align: center;
  }
  .feature-badge span.emoji { font-size: 4.4444444vw; line-height: 1; }

  /* ---------- Discover ---------- */
  .mnp { height: 0; }
  .hero-typo-section { padding: 30vw 4vw 0; }
  .hero-typo-tx { margin: 0; font-size: 12vw; line-height: 1.08; letter-spacing: -0.4vw; text-wrap: balance; }
  .hero-typo-sp { display: inline; }
  .lic-icons { gap: 4vw; margin: 16vw 0 0; padding: 0 5vw; }
  .lic-icon { height: 11.5vw; }

  /* ---------- Platform preview (hand + video, same proportions as desktop) ---------- */
  .plat-prev-section { height: auto; padding: 26vw 0 0; overflow: hidden; }
  .plat-prev-tx { margin: 0 0 8vw; padding: 0 2vw; font-size: 7.6vw; letter-spacing: -0.3vw; }
  .plat-prev {
    width: 100%; height: 128vw;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
    mask-image: linear-gradient(180deg, #000 80%, transparent);
  }
  .plat-view { top: 0; left: 27vw; width: 46vw; border-radius: 10.7vw; }
  .plat-hand { top: 0; left: 17.4vw; width: 117.7vw; max-width: none; }

  /* ---------- Payment methods: cascading stack ---------- */
  .pmt-section { padding: 20vw 0 8vw; overflow: hidden; }
  .pmt-head { margin: 0 0 7vw; padding: 0 4vw; font-size: 8.2vw; line-height: 1.12; letter-spacing: -0.3vw; }
  .pmt-cards { flex-direction: column; justify-content: flex-start; align-items: center; height: auto; margin: 0; padding: 0; }
  .pc { flex: none; height: 38vw; top: auto; }
  .pc:hover { flex-basis: auto; height: 38vw; top: auto; }
  .pc:nth-child(1) { width: 50vw; margin: 0; }
  .pc:nth-child(2) { width: 58vw; margin: -29vw 0 0; }
  .pc:nth-child(3) { width: 66vw; margin: -27vw 0 0; }
  .pc:nth-child(4) { width: 74vw; margin: -24vw 0 0; }
  .pc:nth-child(5) { width: 82vw; margin: -20vw 0 0; }
  .pc:nth-child(6) { width: 90vw; margin: -16vw 0 0; }
  .pc .bg, .pc:hover .bg {
    inset: 0; width: 100%; height: 100%; transform: none; border-radius: 5.5555556vw;
    background-color: #151515; background-size: 42%; background-position: 50% 2.2vw;
    border: 0.2777778vw solid rgba(255,255,255,.07);
    box-shadow: 0 -2.2222222vw 5vw rgba(0,0,0,.65);
  }
  .pc:nth-child(6) .bg { background-size: 46%; background-position: 50% 50%; }

  /* ---------- Free knowledge base ---------- */
  .kb-section { padding: 20vw 5.5555556vw 16vw; }
  .kb-title { margin: 0 0 8vw; font-size: 8.6vw; letter-spacing: -0.3vw; }
  .kb-wrap { max-width: none; width: 100%; gap: 4.4444444vw; }
  .kb-card { height: auto; padding: 6.6666667vw 6.6666667vw 0; border-radius: 6.6666667vw; justify-content: flex-start; }
  .kb-card h3 { margin: 0 0 3vw; font-size: 5.2vw; }
  .kb-desc { max-width: 100%; margin: 0 0 3.3333333vw; font-size: 4.4444444vw; line-height: 1.25; letter-spacing: -0.2vw; color: #8b8e94; }
  .kb-link { gap: 1vw; font-size: 4vw; }
  .kb-art { position: relative; right: auto; top: auto; transform: none; width: 100%; height: auto; margin-top: 5vw; padding-bottom: 6.6666667vw; justify-content: center; align-items: center; }
  .kb-card:hover .kb-art { transform: none; }
  .kb-art img { width: 46vw; }
  .kb-yt { height: 54vw; padding-bottom: 0; align-items: flex-end; }
  .kb-yt img { position: static; left: auto; top: auto; height: 100%; width: auto; }
  .kb-stats { flex-direction: column; height: auto; }
  .kb-stats .rate { position: static; font-size: 3.6vw; text-align: center; }
  .kb-stats .pct { position: static; font-size: 11vw; letter-spacing: -0.6vw; text-align: center; margin: 0 0 3vw; }
  .kb-stats svg { width: 100%; }

  /* ---------- CTA section ---------- */
  .cta-section { padding: 24vw 5.5555556vw 34vw; background-size: cover; background-position: 50% 100%; }
  .cta-container { padding: 0; }
  .cta-content-wrapper { max-width: 100%; gap: 6vw; }
  .cta-heading-wrapper { gap: 4.4444444vw; align-items: center; }
  .cta-titel { margin: 0; font-size: 9vw; letter-spacing: -0.3vw; }
  .cta-description-wrapper { width: 88%; margin: 0 auto; font-size: 3.8888889vw; line-height: 1.5; text-align: center; }
  .cta-description { margin: 0; }
  .cta-button-wrap { display: flex; justify-content: center; width: 100%; }

  /* ---------- Footer ---------- */
  .btm-footer { padding-top: 10vw; overflow: hidden; }
  .btm-footer-content { width: 100%; padding: 0 5.5555556vw 14vw; box-sizing: border-box; }
  .btm-footer-content-inner-left { margin-bottom: 8.3333333vw; gap: 2.7777778vw; }
  .logo-footer { width: 8.3333333vw; height: 8.3333333vw; margin-right: 0; border-radius: 2vw; }
  .logo-text { font-size: 4.4444444vw; }
  .ft-nav { gap: 4.4444444vw; }
  .foot-nav { margin: 0; height: auto; }
  .foot-nav a { font-size: 4.1666667vw; color: #9ca3af; }
  .cop { font-size: 3.3333333vw; margin: 8.3333333vw 0 2.2222222vw; }
  .lgt { font-size: 3.3333333vw; line-height: 1.5; color: #666; }
  .lgt a { color: #666; }
  .ftb { position: static; margin: 12vw 0 0; font-size: 16vw; line-height: .9; letter-spacing: -0.4vw; text-align: left; }

  /* ---------- Auth page ---------- */
  .auth {grid-template-columns: 1fr;max-width: 100%;padding: 18.666667vw 5.5555556vw 10vw;gap: 10vw;}
  .auth-aside .lead {max-width: 100%;font-size: 3vw;}
  .auth-visual, .auth-pills { display: none; }
  .auth-card { max-width: 100%; padding: 6.6666667vw 5.5555556vw; border-radius: 6.6666667vw; }
  .auth-note { max-width: 100%; font-size: 3vw; }
  .auth-top { padding: 4.4444444vw 5.5555556vw; }
  .auth-switch { display: none; }
  .au-h { font-size: 7.2222222vw; margin-bottom: 2.7777778vw; }
  .au-sub {font-size: 3.166667vw;margin-bottom: 6.6666667vw;}
  .field label.lb { font-size: 3.8888889vw; margin-bottom: 2.2222222vw; }
  .au-input {height: 13.8888889vw;border-radius: 3.3333333vw;font-size: 3.444444vw;padding: 0 4.4444444vw 0 11.1111111vw;}

.pw-toggle {
    right: 6.416667vw;
    width: 3.979167vw;
    height: 3.979167vw;
}
  .control > svg.fi { left: 4.1666667vw; width: 4.4444444vw; height: 4.4444444vw; }
  .auth-submit .button-primary-inner {width: 100%;}
  .au-row, .check, .au-foot, .hint, .field .err {font-size: 2.888889vw;}
  .check .box {width: 4.555556vw;height: 4.555556vw;border-radius: 1.3888889vw;margin-top: 0.5555556vw;}

.check .box svg {
    width: 2.625vw;
    height: 2.625vw;
}
  .au-foot { margin-top: 6.6666667vw; }
  .iti__selected-dial-code { font-size: 4.4444444vw; }

  /* ---------- App shell & pages ---------- */
  .app { grid-template-columns: 1fr; }
  .side { transform: translateX(-100%); position: fixed; left: 0; top: 0; width: 75vw; height: 100vh; z-index: 120; background: #0a0a0a; transition: transform .35s var(--ease); }
  .side.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .scrim.open { opacity: 1; pointer-events: auto; }
  .burger-app { display: grid; width: 10vw; height: 10vw; background: var(--s2); border-radius: 2.7777778vw; margin-right: 3.3333333vw; cursor: pointer; place-items: center; color: #fff; }
  .burger-app svg { width: 5.5555556vw; height: 5.5555556vw; }
  .top {height: 16.6666667vw;padding: 0 2.444444vw;gap: 1vw;}
  .top h1 { font-size: 4.4444444vw; }

.acct-btn {
    width: 38vw;
    padding: 2vw !important;
}
.acc-symbol {
    height: 4.8vw;
    width: 4.8vw;
    font-size: 9px;
}
.dp-btn {
  padding: 2.4vw 1.4vw;
  font-size: 2.8vw;
  gap: 1vw;
}
  .ibtn {width: 9vw;height: 9vw;border-radius: 2.7777778vw;}
  .avatar {}
  .ibtn svg { width: 5.5555556vw; height: 5.5555556vw; }
  .menu {position: fixed;right: 15.444444vw;top: 16.6666667vw;width: 14rem;max-width: none;padding: 2.7777778vw;border-radius: 4.4444444vw;right: 20%;}
  .demo-bar { padding: 2.7777778vw 4.4444444vw; font-size: 3.3333333vw; }
  .page { padding: 5.5555556vw 4.4444444vw 25vw; max-width: 100%; gap: 5.5555556vw; }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: rgba(10,10,10,.95); backdrop-filter: blur(5vw); -webkit-backdrop-filter: blur(5vw); border-top: 0.2777778vw solid var(--bd); padding: 2.2222222vw 0 calc(2.2222222vw + env(safe-area-inset-bottom)); z-index: 90; }
  .bnav a, .bnav button { font-size: 2.7777778vw; gap: 1.1111111vw; padding: 1.1111111vw 0; display: flex; flex-direction: column; align-items: center; color: var(--mut); background: none; }
  .bnav a.on, .bnav button.on {color: #10b989;}
  .bnav svg { width: 6.6666667vw; height: 6.6666667vw; }

  .g2, .g3, .g4, .frm, .tr, .pay, .kyc, .dtypes { grid-template-columns: 1fr; }
  .frm .span2 { grid-column: auto; }
  .ticket { position: static; margin-top: 5.5555556vw; }
  .feat { flex-direction: column; align-items: flex-start; padding: 6.6666667vw; }
  .feat h3 { font-size: 6.6666667vw; }
  .ph h2 { font-size: 6.6666667vw; }
  .hero-card { padding: 6.6666667vw; }
  .hc-r { display: none; }

  .modal .box, .modal .box.wide { width: 90vw; padding: 6.6666667vw; border-radius: 5.5555556vw; }

  html.md-lock, html.md-lock body { overflow: hidden; }

  /* ---------- Burger (in navbar) ---------- */
  .burger {
    display: grid; place-items: center;
    width: 9.7222222vw; height: 9.7222222vw; padding: 0;
    border-radius: 2.7777778vw; background: #1c1c1c;
    border: 0.2777778vw solid rgba(255,255,255,.08); color: #fff;
  }
  .burger svg { width: 5.5555556vw; height: 5.5555556vw; }

  /* ---------- Drawer shell ---------- */
  .mobile-drawer {
    display: block; padding: 0; overflow: hidden;
    height: 100dvh; background: #202020;
    transition: transform .4s var(--ease);
  }

  /* each screen (main + 4 sub panels) slides in from the right */
  .md-view {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 4.4444444vw 4.4444444vw 0; box-sizing: border-box;
    background: #202020; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s .4s;
  }
  .md-view.md-main { transform: translateX(-22%); }
  .md-view.is-active {
    transform: none; visibility: visible;
    transition-delay: 0s;
  }
  .md-view:not(.md-main) { padding-bottom: 14vw; }

  /* ---------- Header ---------- */
  .md-header {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 11.1111111vw; margin-bottom: 5vw; flex: none;
  }
  .md-head-l { display: flex; align-items: center; gap: 2.2222222vw; }
  .md-title { font-size: 5vw; font-weight: 600; letter-spacing: -0.1388889vw; }
  .md-back, .md-close {
    display: grid; place-items: center; padding: 0;
    width: 9.7222222vw; height: 9.7222222vw; background: none; color: #fff; cursor: pointer;
  }
  .md-back { margin-left: -2.2222222vw; }
  .md-back svg, .md-close svg { width: 6.6666667vw; height: 6.6666667vw; }

  /* ---------- Main list ---------- */
  .md-search { cursor: text; flex: none; }
  .md-list { display: flex; flex-direction: column; overflow: visible; flex: 1; }
  .md-item {
    width: 100%; box-sizing: border-box; background: none; border: 0;
    font-family: inherit; text-align: left; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
  }
  .md-item .md-dot { margin-left: 0.5555556vw; }
  .md-lang-row { cursor: default; }
  .md-lang-val {
    display: inline-flex; align-items: center; gap: 2.2222222vw;
    font-size: 3.3333333vw; font-weight: 500; color: #9a9ca1;
  }
  .md-lang-val img { width: 6.6666667vw; height: 6.6666667vw; border-radius: 50%; object-fit: cover; }
  .md-login { color: #5cf03c; }
  .md-login svg { width: 5.5555556vw; height: 5.5555556vw; color: #5cf03c; }

  /* sticky bottom CTA */
  .md-foot {
    position: sticky; bottom: 0; flex: none; margin: 0 -4.4444444vw;
    padding: 4.4444444vw 4.4444444vw calc(4.4444444vw + env(safe-area-inset-bottom));
    background: #202020; border-top: 0.2777778vw solid rgba(255,255,255,.08);
  }
  .md-foot .md-cta { display: block; margin: 0; }

  /* ---------- Sub panels ---------- */
  .md-label { margin: 5.5555556vw 0 1.6666667vw; font-size: 3.3333333vw; color: #9a9ca1; }
  .md-sub {
    display: block; padding: 2.7777778vw 0;
    font-size: 4.7222222vw; font-weight: 600; letter-spacing: -0.1388889vw; color: #fff;
  }
  .md-sub small {
    display: block; margin-top: 1.1111111vw;
    font-size: 3.3333333vw; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #9a9ca1;
  }

  /* promo cards */
  .md-promo {
    position: relative; overflow: hidden; flex: none;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2.2222222vw;
    padding: 5.5555556vw; border-radius: 5.5555556vw; margin-bottom: 1.6666667vw;
  }
  .md-promo h3 { margin: 0; font-size: 6.1111111vw; line-height: 1.05; letter-spacing: -0.3333333vw; font-weight: 700; position: relative; z-index: 2; }
  .md-promo p { margin: 0; font-size: 3.3333333vw; line-height: 1.4; color: #d6d6d6; position: relative; z-index: 2; }
  .md-btn {
    position: relative; z-index: 2; margin-top: 2.2222222vw;
    padding: 3.3333333vw 5vw; border-radius: 3.3333333vw;
    background: #fff; color: #111; font-size: 3.8888889vw; font-weight: 600;
  }
  .md-btn.dark { background: #0a0a0a; color: #fff; }

  .md-promo.photo {
    min-height: 56vw;
    justify-content: flex-end;
    background-color: #111;
    background-image: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.88)), var(--photo);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .md-promo.app  { background: radial-gradient(120% 120% at 100% 100%, #0bcaa9 0%, #0b0b0b 60%, #050505 100%); min-height: 40vw; }
  .md-promo.app img {position: absolute;right: -8.222222vw;top: 6vw;width: 50vw;height: auto;z-index: 1;}
  .md-promo.demo { background: radial-gradient(120% 120% at 100% 100%, #8a5200 0%, #0b0b0b 60%, #050505 100%); min-height: 40vw; }
  .md-promo.bonus { background: #62ff3d; color: #0a0a0a; min-height: 38vw; }
  .md-promo.bonus h3 { max-width: 55%; }
  .md-promo.bonus img { position: absolute; right: 2.7777778vw; bottom: 0; width: 31vw; height: auto; z-index: 1; }
  .md-promo.app h3, .md-promo.demo h3 { max-width: 75%; }
  .faq-section { padding: 8vw 5.5555556vw 16vw; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-aside { display: contents; }               /* lets title / list / button be ordered freely */
  .faq-title { order: 1; margin: 0 0 8vw; text-align: center; font-size: 8.6vw; letter-spacing: -0.3vw; }
  .faq-desc { display: none; }
  .faq-list { order: 2; }
  .faq-contact { order: 3; justify-self: center; margin-top: 8vw; padding: 4vw 8vw; border-radius: 3.3333333vw; font-size: 4vw; }
 
  .faq-q { padding: 4.4444444vw 0; gap: 3.3333333vw; font-size: 4.4444444vw; line-height: 1.25; letter-spacing: -0.1vw; }
  .faq-ico { width: 5vw; height: 5vw; }
  .faq-item, .faq-list { border-color: rgba(255,255,255,.18); }
  .faq-a p { padding: 0 8vw 4.4444444vw 0; font-size: 3.8888889vw; line-height: 1.55; }
  .pp { --u: 0.2777778vw; width: 100vw; }
}