/* Rastivex — Midnight Aqua */
:root {
  --hd: 74px;
  --bg: #0e0f0e;
  --bg2: #121412;
  --surf: #171917;
  --surf2: #1d201d;
  --line: #232622;
  --line2: #30342f;
  --ink: #f2f3ee;
  --soft: #c3c6bd;
  --mute: #8c8f88;
  --acc: #c8f135;
  --acc2: #e3f59c;
  --accink: #141a05;
  --warn: #ff8a7a;
  --r: 22px;
  --r-s: 14px;
  --wrap: 1380px;
  --gut: clamp(16px, 4vw, 48px);
  --head: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acc2); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--head); margin: 0; letter-spacing: -.02em; color: var(--ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.ax-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.ax-ico { width: 20px; height: 20px; flex: none; }
.ax-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--acc); color: var(--accink); padding: 8px 14px; border-radius: 10px; }
.ax-skip:focus { left: 12px; }

/* buttons */
.ax-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .25s, background .2s, color .2s, border-color .2s; white-space: nowrap; }
.ax-btn .ax-ico { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ax-btn:active { transform: translateY(0) scale(.98); }
.ax-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* main button: flat lime, tactile edge + light sweep (after Cult UI texture-button, Animata shining-button) */
.ax-btn--fill { background: var(--acc); color: var(--accink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(20, 26, 5, .2), 0 8px 28px -10px rgba(200, 241, 53, .55); }
.ax-btn--fill::after { content: ''; position: absolute; z-index: -1; top: 0; left: -45%; width: 32%; height: 100%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transition: left .75s ease-in-out; pointer-events: none; }
.ax-btn--fill:hover { color: var(--accink); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(20, 26, 5, .2), 0 0 0 4px rgba(200, 241, 53, .12), 0 14px 36px -12px rgba(200, 241, 53, .45); }
.ax-btn--fill:hover::after { left: 125%; }
.ax-btn--fill:hover .ax-ico { transform: translate(2px, -2px) scale(1.15); }
/* second button: soft fill rises from below (after Animata work-button) */
.ax-btn--line { border-color: var(--line2); color: var(--ink); background: rgba(255, 255, 255, .02); }
.ax-btn--line::before { content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: 0; height: 220%; border-radius: 50% 50% 0 0; background: rgba(200, 241, 53, .13); transform: translateY(100%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.ax-btn--line:hover { border-color: rgba(200, 241, 53, .55); color: var(--ink); }
.ax-btn--line:hover::before { transform: translateY(30%); }
/* form button: arrow in a round chip, idle sweep every few seconds (after Animata slide-arrow-button) */
.ax-btn--block { width: 100%; min-height: 54px; font-size: 16px; padding: 0 56px; }
.ax-btn--block .ax-ico { position: absolute; right: 9px; top: 50%; margin-top: -18px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(20, 26, 5, .92); color: var(--acc); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5); }
.ax-btn--block:hover .ax-ico { transform: rotate(45deg); }
.ax-btn--block::after { animation: ax-shine 5s ease-in-out 1.5s infinite; }
@keyframes ax-shine { 0%, 70% { left: -45%; } 100% { left: 125%; } }
.ax-btn--block:hover::after { animation: none; }
@media (max-width: 480px) { .ax-btn--block { padding: 0 52px 0 16px; font-size: 15px; } }

/* header */
.ax-top { position: sticky; top: 0; z-index: 50; background: rgba(14, 15, 14, .42); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.ax-top.is-scrolled { border-color: var(--line); background: rgba(14, 15, 14, .78); }
.ax-top-in { display: flex; align-items: center; gap: 28px; height: var(--hd); }
.ax-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 23px/1 var(--head); letter-spacing: -.03em; }
.ax-logo:hover { color: var(--ink); }
.ax-mark { width: 36px; height: 36px; }
.ax-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ax-nav a { color: var(--soft); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 10px; }
.ax-nav a:hover, .ax-nav a[aria-current="page"] { color: var(--ink); background: var(--surf); }
.ax-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--acc); }
.ax-nav-gap { width: 1px; height: 20px; background: var(--line2); margin: 0 8px; }
.ax-top-act { display: flex; align-items: center; gap: 10px; }
.ax-top-act .ax-btn { min-height: 42px; padding: 0 18px; }
.ax-menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surf); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
/* burger: a long line and a short lime one; hover stretches the short one, open folds both into a cross (spring curve after Origin UI) */
.ax-menu-btn:hover { border-color: rgba(200, 241, 53, .35); }
.ax-mb { width: 24px; height: 24px; overflow: visible; }
.ax-mb path { fill: none; stroke-width: 2.2; stroke-linecap: round; transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s cubic-bezier(.5, .85, .25, 1.1), stroke-dasharray .35s ease, stroke-dashoffset .35s ease, stroke .2s; }
.ax-mb-a { stroke: var(--ink); }
.ax-mb-b { stroke: var(--acc); stroke-dasharray: 9 16; stroke-dashoffset: -7; }
.ax-menu-btn:hover .ax-mb-b { stroke-dasharray: 16 16; stroke-dashoffset: 0; }
.ax-menu-btn[aria-expanded="true"] .ax-mb-a { transform: rotate(45deg) translateY(3px); }
.ax-menu-btn[aria-expanded="true"] .ax-mb-b { stroke: var(--ink); stroke-dasharray: 16 16; stroke-dashoffset: 0; transform: rotate(-45deg) translateY(-3px); }
/* phone menu fills the screen under the header; Log in and Register sit at the bottom, in thumb reach.
   absolute, not fixed: the header's backdrop-filter would trap a fixed child anyway */
.ax-drawer { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--hd)); height: calc(100dvh - var(--hd)); display: flex; flex-direction: column; overflow-y: auto; border-top: 1px solid var(--line); background: var(--bg); padding: 12px var(--gut) calc(20px + env(safe-area-inset-bottom)); animation: ax-drawer .28s cubic-bezier(.2, .8, .2, 1); }
.ax-drawer[hidden] { display: none; }
@keyframes ax-drawer { from { opacity: 0; transform: translateY(-8px); } }
.ax-top:has(.ax-menu-btn[aria-expanded="true"]) { background: var(--bg); border-color: var(--line); }
body.ax-locked { overflow: hidden; }
.ax-drawer nav { display: flex; flex-direction: column; }
.ax-drawer nav a { color: var(--ink); text-decoration: none; padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
.ax-drawer nav a[aria-current="page"] { color: var(--acc); }
.ax-drawer-line { height: 10px; }
.ax-drawer-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 20px; }
.ax-drawer-act .ax-btn { min-height: 52px; }

/* language dropdown */
.ax-lang { position: relative; }
.ax-lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surf); color: var(--ink); font: 600 13px/1 var(--body); cursor: pointer; }
.ax-lang-btn:hover { border-color: var(--acc); }
.ax-flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; }
.ax-caret { width: 16px; height: 16px; color: var(--mute); transition: transform .2s; }
.ax-lang-btn[aria-expanded="true"] .ax-caret { transform: rotate(180deg); }
.ax-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--surf); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.ax-lang-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.ax-lang-menu a:hover { background: var(--surf2); }
.ax-tick { margin-left: auto; width: 16px; height: 16px; color: var(--acc); visibility: hidden; }
.ax-lang-menu a[aria-current] .ax-tick { visibility: visible; }

/* hero */
.ax-hero { position: relative; margin-top: calc(-1px - var(--hd)); padding: calc(var(--hd) + 1px + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 104px); background: var(--bg); overflow: hidden; }
/* night sky with falling stars (after Animata shooting-stars), drawn in aqua.js */
.ax-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* dark single-tone 3D coins drifting behind the hero content */
.ax-c3s { position: absolute; inset: 0; pointer-events: none; }
.ax-c3 { position: absolute; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); animation: ax-c3 11s ease-in-out infinite; will-change: transform; }
.ax-c3--btc { width: 210px; left: calc(50% - 60px); top: calc(var(--hd) - 36px); --r: -8deg; }
.ax-c3--eth { width: 180px; left: calc(50% - 150px); bottom: 44px; --r: 10deg; filter: brightness(.85) blur(1px) drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); animation-duration: 13s; animation-delay: -5s; }
.ax-c3--sol { width: 150px; right: 3%; top: calc(var(--hd) + 40px); --r: 14deg; filter: brightness(.92) drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); animation-duration: 9s; animation-delay: -3s; }
@keyframes ax-c3 { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-16px) rotate(calc(var(--r) + 4deg)); } }
.ax-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ax-h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; }
.ax-h1 em { font-style: normal; color: var(--acc); }
.ax-h1--inner { font-size: clamp(34px, 3.8vw, 54px); }
.ax-lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--soft); max-width: 62ch; margin: 22px 0 0; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; }
.ax-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px; border-radius: 999px; background: rgba(23, 25, 23, .8); border: 1px solid var(--line2); font-size: 14px; font-weight: 500; }
.ax-chips .ax-ico { width: 17px; height: 17px; color: var(--acc); }
.ax-micro { display: flex; gap: 8px; align-items: flex-start; margin: 22px 0 0; font-size: 13.5px; color: var(--mute); max-width: 60ch; }
.ax-micro .ax-ico { width: 16px; height: 16px; margin-top: 3px; }
.ax-hero-pic img { border-radius: var(--r); border: 1px solid var(--line2); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.ax-hero--inner { padding-bottom: clamp(48px, 6vw, 80px); }

/* form card */
.ax-formcard { position: relative; background: var(--surf); border: 1px solid var(--line2); border-radius: var(--r); padding: clamp(22px, 2.4vw, 32px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(200, 241, 53, .04) inset; }
/* border beam around the card (after Cult UI border-beam-card) */
@property --ax-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ax-formcard::before, .ax-formcard::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ax-beam), transparent 0 70%, rgba(200, 241, 53, .18) 80%, var(--acc) 91%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ax-beam 7s linear infinite; }
.ax-formcard::after { padding: 2px; filter: blur(6px); opacity: .7; }
@keyframes ax-beam { to { --ax-beam: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ax-formcard::before, .ax-formcard::after { animation: none; --ax-beam: 200deg; } }
.ax-formcard-h { font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.ax-card-note { display: flex; gap: 10px; align-items: flex-start; margin: -6px 0 18px; font-size: 14px; color: var(--soft); }
.ax-card-note .ax-ico { color: var(--acc); width: 18px; height: 18px; margin-top: 2px; }
.ax-form { display: grid; gap: 14px; }
.ax-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ax-field { display: grid; gap: 6px; min-width: 0; }
.ax-lab { font-size: 13px; font-weight: 500; color: var(--soft); }
.ax-form input[type="text"], .ax-form input[type="email"], .ax-form input[type="tel"], .ax-form input[type="password"] { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); color: var(--ink); font: 400 16px var(--body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .2s, box-shadow .25s, background .25s; }
/* leading icon + halo focus (after Cult UI halo-input) */
.ax-box { position: relative; display: block; }
.ax-box input { padding-left: 42px !important; }
.ax-fico { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; color: var(--mute); pointer-events: none; transition: color .2s; z-index: 1; }
.ax-box:focus-within .ax-fico { color: var(--acc); }
.ax-form input:hover { border-color: rgba(200, 204, 195, .3); }
.ax-form input::placeholder { color: #6b6e68; }
.ax-form input:focus { outline: none; border-color: var(--acc); background: var(--bg2); box-shadow: 0 0 0 4px rgba(200, 241, 53, .12); }
.ax-form input.valid:not(:focus) { border-color: rgba(200, 241, 53, .38); }
.ax-form input.error { border-color: var(--warn); }
.ax-form label.error { color: var(--warn); font-size: 12.5px; margin-top: 2px; }
.ax-secret { position: relative; display: block; }
.ax-secret input { padding-right: 48px !important; }
.ax-eye { position: absolute; right: 6px; top: 7px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--mute); display: grid; place-items: center; cursor: pointer; }
.ax-eye:hover { color: var(--acc); }
.ax-eye .ax-ico { width: 18px; height: 18px; }
.ax-eye-off { display: none; }
.ax-eye[aria-pressed="true"] .ax-eye-on { display: none; }
.ax-eye[aria-pressed="true"] .ax-eye-off { display: block; }
/* password strength (after Origin UI input-51) */
.ax-pw { margin-top: -4px; }
.ax-pw-bar { height: 4px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.ax-pw-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .45s cubic-bezier(.2, .8, .2, 1), background .3s; }
.ax-pw[data-level="1"] .ax-pw-bar i { width: 25%; background: #ff6b6b; }
.ax-pw[data-level="2"] .ax-pw-bar i { width: 50%; background: #ffa94d; }
.ax-pw[data-level="3"] .ax-pw-bar i { width: 75%; background: #ffd43b; }
.ax-pw[data-level="4"] .ax-pw-bar i { width: 100%; background: var(--acc); }
.ax-pw-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.ax-pw-list li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mute); transition: color .2s; }
.ax-pw-list .ax-ico { width: 16px; height: 16px; flex: none; }
.ax-pw-ok { display: none; color: var(--acc); }
.ax-pw-no { color: #6b6e68; }
.ax-pw-list li.is-met { color: var(--soft); }
.ax-pw-list li.is-met .ax-pw-ok { display: block; }
.ax-pw-list li.is-met .ax-pw-no { display: none; }
.ax-small { margin: 0; font-size: 12.5px; color: var(--mute); text-align: center; }
.iti { width: 100%; }
.iti__country-list { background: var(--surf); border-color: var(--line2); color: var(--ink); }
.iti__country.iti__highlight { background: var(--surf2); }
.iti__selected-dial-code { color: var(--ink); }
.iti--separate-dial-code .iti__selected-flag { background: rgba(255, 255, 255, .04); border-radius: 12px 0 0 12px; }
.iti__divider { border-color: var(--line2); }
.iti__dial-code { color: var(--mute); }

/* sections */
.ax-sec { padding: clamp(64px, 8vw, 120px) 0; position: relative; }
.ax-sec--raise { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ax-sec--glow { background: var(--bg2); border-top: 1px solid var(--line); }
.ax-h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; font-weight: 600; margin-bottom: 22px; max-width: 22ch; }
.ax-h3 { font-size: 22px; max-width: none; margin-bottom: 12px; }
.ax-head { max-width: 860px; margin-bottom: clamp(32px, 4vw, 56px); }
.ax-head .ax-h2 { margin-bottom: 16px; }
.ax-head--row { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.ax-head--row .ax-intro, .ax-head--row .ax-faq-more { margin: 0 0 6px; }
.ax-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.ax-head--center .ax-h2 { margin-left: auto; margin-right: auto; }
.ax-intro { font-size: 19px; color: var(--soft); }
.ax-sec p { color: var(--soft); }
.ax-center { text-align: center; margin-top: 44px; }

/* night */
.ax-night { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: stretch; }
/* photo takes the height of the text column */
.ax-night-pic { margin: 0; position: relative; min-height: 420px; }
.ax-night-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r); object-fit: cover; object-position: center 35%; border: 1px solid var(--line2); }
.ax-night-text { align-self: center; }
/* closed trades drifting over the photo */
.ax-deals { list-style: none; margin: 0; padding: 0; }
.ax-deal { position: absolute; z-index: 1; display: flex; align-items: center; gap: 11px; min-width: 232px; padding: 11px 14px 11px 11px; border-radius: 14px; background: rgba(23, 25, 23, .86); border: 1px solid var(--line2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ax-drift 7s ease-in-out infinite; }
.ax-deal--1 { top: 7%; right: -28px; }
.ax-deal--2 { bottom: 21%; left: -28px; animation-delay: -2.4s; }
.ax-deal--3 { bottom: 5%; right: -28px; animation-delay: -4.6s; }
.ax-deal-coin { width: 34px; height: 34px; flex: none; border-radius: 50%; }
.ax-deal-txt { display: grid; gap: 3px; margin-right: auto; }
.ax-deal-txt b { font: 600 14px/1.1 var(--head); color: var(--ink); }
.ax-deal-txt small { font-size: 12px; color: var(--mute); }
.ax-deal-end { display: grid; justify-items: end; gap: 5px; }
.ax-deal-pnl { font: 600 15px/1 var(--head); color: var(--acc); }
.ax-deal-done { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 999px; background: rgba(200, 241, 53, .12); color: var(--acc); font: 600 10.5px/1.3 var(--body); letter-spacing: .02em; }
.ax-deal-done .ax-ico { width: 12px; height: 12px; stroke-width: 3; }
@keyframes ax-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ax-night-text { max-width: 720px; }
.ax-aside { font-size: 19px; color: var(--ink) !important; border-left: 2px solid var(--line2); padding-left: 18px; }
.ax-turn { font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--head); letter-spacing: -.02em; color: var(--acc) !important; margin: 26px 0 22px; }

/* modes */
.ax-modes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ax-modes-text p { font-size: 17.5px; }
.ax-modes-text .ax-intro { font-size: 19px; color: var(--ink); margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line2); }
.ax-duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-top: clamp(40px, 5vw, 64px); }
.ax-mode { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.ax-mode .ax-ico { width: 30px; height: 30px; color: var(--acc); margin-bottom: 16px; }
.ax-mode h3 { font-size: 24px; margin-bottom: 10px; }
.ax-mode p { margin: 0; }
.ax-or { align-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line2); color: var(--acc); font: 600 15px var(--head); }

/* phone mockup: autotrading on, positions and closed trades */
.ax-ph-stage { --phw: 300px; position: relative; display: grid; justify-items: start; padding: 26px 0 26px clamp(20px, 5%, 48px); }
/* candle terminal (Spectrum UI Market Chart port), sits behind the phone */
.ax-cd { position: absolute; inset: 74px 0 74px calc(clamp(20px, 5%, 48px) + var(--phw) * .5); display: flex; flex-direction: column; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); overflow: hidden; }
.ax-cd-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px calc(var(--phw) * .5 + 22px); font: 500 12.5px/1 var(--body); color: var(--mute); border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: 8px; }
.ax-cd-head img { width: 22px; height: 22px; border-radius: 50%; }
.ax-cd-head b { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ax-cd-tf { display: none; gap: 2px; padding: 2px; margin-left: 4px; border-radius: 8px; background: var(--surf2); }
.ax-cd-tf i { font-style: normal; font-size: 11px; padding: 4px 7px; border-radius: 6px; }
.ax-cd-tf .is-on { background: var(--line2); color: var(--ink); }
.ax-cd-px { margin-left: auto; font-weight: 600; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ax-cd-chg { font-weight: 600; font-size: 12px; padding: 3px 6px; border-radius: 6px; background: rgba(200, 241, 53, .12); color: var(--acc); font-variant-numeric: tabular-nums; }
.ax-cd-chg.is-down { background: rgba(255, 138, 122, .12); color: var(--warn); }
.ax-cd-plot { position: relative; flex: 1; min-height: 0; margin: 14px 64px 30px 0; color: var(--mute); }
.ax-cd-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ax-cd-svg line { vector-effect: non-scaling-stroke; }
.ax-cd-grid { stroke: currentColor; stroke-opacity: .16; stroke-dasharray: 2 4; }
.ax-cd-sep { stroke: currentColor; stroke-opacity: .12; }
.ax-cd-svg .u line { stroke: var(--acc); stroke-width: 1.3; }
.ax-cd-svg .u rect { fill: var(--acc); }
.ax-cd-svg .d line { stroke: var(--warn); stroke-width: 1.3; }
.ax-cd-svg .d rect { fill: var(--warn); }
.ax-cd-svg rect.v { opacity: .3; }
.ax-cd-last { stroke-opacity: .6; stroke-dasharray: 4 4; }
.ax-cd-last.u { stroke: var(--acc); }
.ax-cd-last.d { stroke: var(--warn); }
.ax-cd-y, .ax-cd-x, .ax-cd-pill { position: absolute; font: 500 10.5px/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-cd-y { left: calc(100% + 10px); transform: translateY(-50%); }
.ax-cd-x { top: calc(100% + 10px); transform: translateX(-50%); }
.ax-cd-pill { left: calc(100% + 4px); transform: translateY(-50%); padding: 4px 6px; border-radius: 4px; font-weight: 600; background: var(--acc); color: var(--accink); }
.ax-cd-pill.d { background: var(--warn); color: #2a0d08; }
/* iPhone 17 Pro frame (Cult UI apple-iphone-17-pro, graphite finish) */
.ax-ph { position: relative; z-index: 1; width: var(--phw); aspect-ratio: 71.5 / 149.6; padding: 3px; border-radius: 50px; background: linear-gradient(145deg, #454549 0%, #3d3d41 15%, #363839 30%, #3a3a3e 50%, #424246 70%, #3b3b3f 85%, #343438 100%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .55), 0 12px 24px -8px rgba(0, 0, 0, .35), 0 40px 80px -30px rgba(0, 0, 0, .8); font-family: var(--body); font-variant-numeric: tabular-nums; }
.ax-ph-bezel { height: 100%; padding: 3px; border-radius: 47px; background: #0a0a0a; }
.ax-ph-shine { position: absolute; inset: 0; border-radius: 50px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 100%); }
.ax-ph-key { position: absolute; width: 3px; background: linear-gradient(180deg, #424246 0%, #3a3a3e 30%, #363839 50%, #3a3a3e 70%, #424246 100%); }
.ax-ph-key--a, .ax-ph-key--b, .ax-ph-key--c { left: -3px; border-radius: 2px 0 0 2px; box-shadow: -1px 0 0 0 rgba(255, 255, 255, .16), -2px 3px 5px -1px rgba(0, 0, 0, .34); }
.ax-ph-key--a { top: 20%; height: 20px; }
.ax-ph-key--b { top: 27%; height: 36px; }
.ax-ph-key--c { top: 36%; height: 36px; }
.ax-ph-key--p { right: -3px; top: 28%; height: 58px; border-radius: 0 2px 2px 0; box-shadow: 1px 0 0 0 rgba(255, 255, 255, .15), 2px 1px 3px -1px rgba(0, 0, 0, .25); }
.ax-ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 44px; background: var(--bg); padding: 0 14px 70px; font-size: 13px; line-height: 1.3; color: var(--ink); }
.ax-ph-status { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 6px 12px 0 18px; font-size: 13px; font-weight: 600; }
.ax-ph-island { position: absolute; left: 50%; top: 11px; width: 96px; height: 28px; margin-left: -48px; border-radius: 14px; background: #000; }
.ax-ph-island i { position: absolute; right: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #2a3a5a 0%, #0f1520 60%, #000 100%); }
.ax-ph-sys { display: inline-flex; align-items: center; gap: 5px; }
.ax-ph-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.ax-ph-sig i { width: 3px; border-radius: 1px; background: var(--ink); }
.ax-ph-sys .ax-ico { width: 14px; height: 14px; stroke-width: 2.4; }
.ax-ph-bat { position: relative; width: 22px; height: 11px; border-radius: 3.5px; border: 1px solid rgba(242, 243, 238, .4); }
.ax-ph-bat::after { content: ''; position: absolute; right: -3px; top: 3px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(242, 243, 238, .4); }
.ax-ph-bat i { position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 2px; background: var(--ink); }
.ax-ph-top { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 12px; }
.ax-ph-brand { display: inline-flex; align-items: center; gap: 7px; font: 600 15px var(--head); letter-spacing: -.02em; }
.ax-ph-brand .ax-mark { width: 26px; height: 26px; }
.ax-ph-bell { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surf2); color: var(--soft); }
.ax-ph-bell .ax-ico { width: 15px; height: 15px; }
.ax-ph-bal { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--surf); border: 1px solid var(--line); }
.ax-ph-bal-txt { display: grid; gap: 3px; }
.ax-ph-bal small { color: var(--mute); font-size: 11px; }
.ax-ph-bal b { font-size: 25px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.ax-ph-gain { font-size: 11px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.ax-ph-bal svg { width: 92px; height: 34px; flex: none; margin-bottom: 2px; }
.ax-ph-auto { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 10px 11px 10px 14px; border-radius: 16px; background: rgba(200, 241, 53, .07); border: 1px solid rgba(200, 241, 53, .28); }
.ax-ph-auto-txt { display: grid; gap: 3px; margin-right: auto; min-width: 0; }
.ax-ph-auto-txt b { font-size: 13.5px; font-weight: 600; }
.ax-ph-auto-txt small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--soft); white-space: nowrap; }
.ax-ph-live { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 rgba(200, 241, 53, .6); animation: axPulse 1.8s ease-out infinite; }
.ax-ph-tgl { position: relative; flex: none; width: 44px; height: 26px; border-radius: 20px; background: var(--acc); }
.ax-ph-tgl i { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accink); }
.ax-ph-cap { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--mute); }
.ax-ph-cap span { font-size: 10.5px; line-height: 16px; min-width: 16px; text-align: center; padding: 0 5px; border-radius: 8px; background: var(--surf2); color: var(--soft); }
.ax-ph-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surf); }
.ax-ph-list li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; }
.ax-ph-list li + li { border-top: 1px solid var(--line); }
.ax-ph-list img, .ax-ph-toast img { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.ax-ph-txt { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.ax-ph-txt b { font-size: 12.5px; font-weight: 600; }
.ax-ph-txt small { font-size: 10.5px; color: var(--mute); white-space: nowrap; }
.ax-ph-end { display: flex; align-items: center; gap: 6px; }
.ax-ph-pnl { font-size: 13px; font-weight: 600; color: var(--acc); }
.ax-ph-pnl.is-down { color: var(--warn); }
.ax-ph-done { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(200, 241, 53, .14); color: var(--acc); font-size: 0; }
.ax-ph-done .ax-ico { width: 11px; height: 11px; stroke-width: 3; }
.ax-ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 26px; background: rgba(23, 25, 23, .92); border-top: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ax-ph-tabs span { display: grid; justify-items: center; gap: 3px; font-size: 10px; font-weight: 500; color: var(--mute); }
.ax-ph-tabs .ax-ico { width: 20px; height: 20px; }
.ax-ph-tabs .is-on { color: var(--acc); }
.ax-ph-home { position: absolute; left: 50%; bottom: 7px; width: 112px; height: 4px; margin-left: -56px; border-radius: 4px; background: rgba(242, 243, 238, .8); }
.ax-ph-toast { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(29, 32, 29, .88); border: 1px solid var(--line2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--body); animation: ax-drift 7s ease-in-out infinite; }
.ax-ph-toast > span:last-child { display: grid; gap: 2px; }
.ax-ph-toast b { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ax-ph-toast small { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.ax-ph-toast--a { top: 14px; right: 18px; }
.ax-ph-toast--b { bottom: 14px; right: 18px; animation-delay: -3.5s; }
.ax-ph-toast-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--acc); color: var(--accink); }
.ax-ph-toast-ico .ax-ico { width: 16px; height: 16px; stroke-width: 2.2; }

/* learn */
.ax-learn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ax-learn-pic { margin: 0; order: -1; }
.ax-learn-pic img { border-radius: var(--r); border: 1px solid var(--line2); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; filter: saturate(.9); transform: scaleX(-1); }
.ax-trio { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.ax-trio li { display: flex; gap: 16px; padding: 28px 28px 0 0; }
.ax-trio li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.ax-trio .ax-ico { width: 26px; height: 26px; color: var(--acc); margin-top: 2px; }
.ax-trio h3 { font-size: 20px; margin-bottom: 6px; }
.ax-trio p { margin: 0; font-size: 16px; }

/* tiles (who, about cards) */
.ax-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ax-tile { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; transition: border-color .2s, transform .2s; }
.ax-tile:hover { border-color: var(--line2); transform: translateY(-2px); }
.ax-tile .ax-ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(200, 241, 53, .1); color: var(--acc); margin-bottom: 20px; }
.ax-tile h3 { font-size: 22px; margin-bottom: 10px; }
.ax-tile p { margin: 0; }
/* #who: one row per reader: their photo, then the question with its icon and the answer */
.ax-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.ax-who li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.ax-who li:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ax-who li:nth-child(even) .ax-who-pic { order: 1; }
.ax-who-pic { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 2; background: var(--surf); }
.ax-who-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ax-who li:hover .ax-who-pic img { transform: scale(1.03); }
.ax-who-txt { max-width: 60ch; }
.ax-who h3 { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font-size: 28px; line-height: 1.2; }
.ax-who h3 .ax-ico { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(200, 241, 53, .1); color: var(--acc); }
.ax-who p { margin: 0; font-size: 17.5px; }
@media (max-width: 1024px) {
  .ax-who li { gap: 32px; }
  .ax-who h3 { font-size: 23px; }
}
@media (max-width: 760px) {
  .ax-who { gap: 36px; }
  .ax-who li { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ax-who li:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .ax-who li:nth-child(even) .ax-who-pic { order: 0; }
  .ax-who h3 { font-size: 21px; gap: 12px; margin-bottom: 10px; }
  .ax-who h3 .ax-ico { width: 38px; height: 38px; padding: 8px; }
  .ax-who p { font-size: 16px; }
}

/* split: heading left, text right */
.ax-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ax-split-h { position: sticky; top: 110px; }
.ax-split-b > p { font-size: 17.5px; }
.ax-quote { margin: 28px 0; padding: 26px 28px; border-radius: var(--r); background: rgba(200, 241, 53, .06); border: 1px solid rgba(200, 241, 53, .22); display: flex; gap: 16px; }
.ax-quote .ax-ico { width: 26px; height: 26px; color: var(--acc); }
.ax-quote p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink) !important; }

/* register: three columns */
.ax-register { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.ax-register > p { font-size: 17px; margin: 0; }
.ax-quote--col { margin: 0; flex-direction: column; }

/* zig-zag with a visual */
.ax-zig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ax-zig--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ax-zig--flip .ax-zig-text { order: 2; }
.ax-zig--flip .ax-zig-vis { order: 1; }

/* control mockup */
.ax-ctrl { background: var(--surf); border: 1px solid var(--line2); border-radius: 24px; padding: 22px; box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .9); }
.ax-ctrl-h { display: flex; justify-content: space-between; align-items: center; font: 600 17px var(--head); margin-bottom: 14px; }
.ax-live { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--body); color: var(--acc); padding: 5px 10px; border-radius: 999px; background: rgba(200, 241, 53, .1); }
.ax-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px rgba(200, 241, 53, .2); animation: axPulse 2s infinite; }
@keyframes axPulse { 50% { box-shadow: 0 0 0 7px rgba(200, 241, 53, 0); } }
.ax-ctrl ul { list-style: none; margin: 0; padding: 0; }
.ax-ctrl li { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--line); }
.ax-ctrl li > .ax-ico { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--bg2); color: var(--acc2); }
.ax-ctrl li div { flex: 1; min-width: 0; }
.ax-ctrl b { display: block; font-weight: 600; font-size: 15px; }
.ax-ctrl small { color: var(--mute); font-size: 13px; }
.ax-toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--line2); position: relative; flex: none; }
.ax-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #d9dcd2; transition: left .2s; }
.ax-toggle.is-on { background: var(--acc); }
.ax-toggle.is-on i { left: 21px; background: var(--accink); }
.ax-ctrl-link { font-size: 13px; font-weight: 600; color: var(--acc); }
.ax-ctrl-f { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute) !important; }
.ax-ctrl-f .ax-ico { width: 16px; height: 16px; }

/* $250 */
.ax-start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ax-sum { border-radius: 28px; padding: clamp(28px, 3vw, 44px); background: var(--surf); border: 1px solid rgba(200, 241, 53, .25); container-type: inline-size; }
.ax-sum-n { display: block; font: 700 clamp(84px, 10vw, 148px)/.95 var(--head); letter-spacing: -.05em; color: var(--acc); margin-bottom: 28px; white-space: nowrap; }
/* a local amount ("82 310 Ft") is twice as long as "$250": size it by the card width so it never spills out */
.ax-sum-n--long { font-size: min(16.5cqi, 120px); letter-spacing: -.04em; }
.ax-sum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ax-sum li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; }
.ax-sum .ax-ico { width: 20px; height: 20px; color: var(--acc); }

/* steps */
.ax-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.ax-steps::before { content: ''; position: absolute; top: 28px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--line2) 10%, var(--line2) 90%, transparent); }
.ax-steps li { position: relative; text-align: center; padding: 0 8px; }
.ax-step-ic { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 20px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line2); color: var(--acc); position: relative; }
.ax-step-ic .ax-ico { width: 24px; height: 24px; }
.ax-steps h3 { font-size: 20px; margin-bottom: 8px; }
.ax-steps p { margin: 0; font-size: 15.5px; }

/* after */
.ax-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.ax-col .ax-ico { width: 30px; height: 30px; color: var(--acc); margin-bottom: 16px; }
.ax-col p { margin: 0; }
.ax-banner { margin-top: clamp(40px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line2); }
.ax-banner p { margin: 0; font: 500 19px/1.45 var(--head); color: var(--ink) !important; max-width: 760px; }

/* myths */
.ax-myths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ax-myth { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.ax-myth-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--warn); padding: 6px 10px; border-radius: 999px; background: rgba(255, 138, 122, .1); margin-bottom: 18px; }
.ax-myth-tag .ax-ico { width: 14px; height: 14px; }
.ax-myth h3 { font-size: 22px; line-height: 1.25; margin-bottom: 14px; text-decoration: line-through; text-decoration-color: rgba(255, 138, 122, .6); text-decoration-thickness: 2px; }
.ax-myth p { margin: 0; }

/* plan loop */
.ax-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; max-width: 440px; }
.ax-loop li { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); font: 600 26px/1 var(--head); position: relative; }
.ax-loop li:nth-child(2) { margin-left: 40px; }
.ax-loop li:nth-child(3) { margin-left: 80px; }
.ax-loop .ax-ico { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: rgba(242, 243, 238, .06); color: var(--ink); }

/* faq */
.ax-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ax-faq-side { position: sticky; top: calc(var(--hd, 72px) + 32px); }
.ax-faq-side .ax-h2 { margin-bottom: 20px; }
.ax-faq-card { margin-top: 28px; padding: 24px; border-radius: 20px; background: var(--surf); border: 1px solid var(--line); }
.ax-faq-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(200, 241, 53, .1); color: var(--acc); margin-bottom: 16px; }
.ax-faq-badge .ax-ico { width: 22px; height: 22px; }
.ax-faq-more { margin: 0 0 20px; color: var(--soft) !important; font-size: 16px; }
.ax-faq-more a { color: var(--ink); text-underline-offset: 3px; }
.ax-faq-more a:hover { color: var(--acc); }
.ax-faq-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-acc { background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 6px 28px; interpolate-size: allow-keywords; }
.ax-qa { border-bottom: 1px solid var(--line); }
.ax-qa:last-child { border-bottom: 0; }
.ax-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 18px/1.4 var(--head); color: var(--ink); }
.ax-qa summary::-webkit-details-marker { display: none; }
.ax-qa summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 6px; }
.ax-qa-q { display: flex; align-items: flex-start; gap: 14px; }
.ax-qa-tp { width: 20px; height: 20px; margin-top: 2px; color: var(--acc); opacity: .85; }
.ax-qa-pm { width: 18px; height: 18px; color: var(--mute); transition: transform .25s ease, color .2s; }
.ax-qa-pm path { transform-box: fill-box; transform-origin: center; transition: transform .25s ease, opacity .25s ease; }
.ax-qa summary:hover .ax-qa-pm, .ax-qa[open] .ax-qa-pm { color: var(--acc); }
.ax-qa[open] .ax-qa-pm { transform: rotate(180deg); }
.ax-qa[open] .ax-qa-pm path:last-child { transform: rotate(90deg); opacity: 0; }
.ax-qa::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.ax-qa[open]::details-content { block-size: auto; }
.ax-qa-a p { margin: 0; padding: 0 38px 24px 34px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .ax-qa::details-content, .ax-qa-pm, .ax-qa-pm path { transition: none; } }

/* final */
.ax-final { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ax-final .ax-h2 { font-size: clamp(32px, 3.6vw, 52px); }
.ax-ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ax-ticks li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ax-ticks .ax-ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(200, 241, 53, .14); color: var(--acc); }

/* about */
.ax-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ax-path li { border-top: 2px solid var(--acc); padding-top: 22px; }
.ax-path li:nth-child(2) { border-color: var(--acc2); }
.ax-path li:nth-child(3) { border-color: var(--line2); }
.ax-path .ax-ico { width: 28px; height: 28px; color: var(--acc); margin-bottom: 14px; }
.ax-path p { margin: 0; }
.ax-pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ax-pairs-p { font-size: 17.5px; margin: 0; }
.ax-honest { border-radius: 26px; padding: clamp(26px, 3.4vw, 48px); background: var(--surf); border: 1px solid var(--line2); }
.ax-honest-h { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.ax-honest-h .ax-h2 { margin: 0; max-width: none; }
.ax-honest-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.ax-honest-cols p { margin: 0; }
.ax-honest-ic { flex: none; width: 56px; height: 56px; padding: 13px; border-radius: 16px; background: rgba(255, 138, 122, .1); color: var(--warn); }

/* contact */
.ax-reach { display: grid; gap: 14px; align-self: center; }
.ax-reach p { display: flex; gap: 14px; align-items: center; margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--surf); border: 1px solid var(--line); }
.ax-reach .ax-ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(200, 241, 53, .1); color: var(--acc); }
.ax-reach small { display: block; color: var(--mute); font-size: 12.5px; }
.ax-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ax-tip { margin-top: 32px; padding: 26px 28px; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); }
.ax-tip p:last-child { margin: 0; }

/* legal */
.ax-doc-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ax-doc { max-width: 780px; }
.ax-doc section + section { margin-top: 36px; }
.ax-doc h2 { font-size: 24px; margin-bottom: 12px; }
.ax-date { color: var(--mute) !important; font-size: 14px; }
.ax-docnav { position: sticky; top: 110px; display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); }
.ax-docnav a { padding: 11px 14px; border-radius: 10px; color: var(--soft); text-decoration: none; }
.ax-docnav a:hover { background: var(--surf2); color: var(--ink); }
.ax-docnav a[aria-current="page"] { background: rgba(200, 241, 53, .1); color: var(--acc); }

/* footer */
.ax-foot { border-top: 1px solid var(--line); padding: 64px 0 36px; background: #04080a; }
.ax-foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.ax-foot-about { color: var(--mute); font-size: 15px; margin: 18px 0 0; max-width: 46ch; }
.ax-fhead { font: 600 13px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: 14px; }
.ax-fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ax-fcol a { color: var(--soft); text-decoration: none; font-size: 15px; word-break: break-word; }
.ax-fcol a:hover { color: var(--acc); }
.ax-risk { display: flex; gap: 14px; margin-top: 44px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); }
.ax-risk .ax-ico { color: var(--warn); margin-top: 2px; }
.ax-risk p { margin: 0; font-size: 14px; color: var(--mute); }
.ax-copy, .ax-draft { margin: 24px 0 0; font-size: 13px; color: var(--mute); }
.ax-draft { margin-top: 6px; color: #6d8689; }

/* modal */
.ax-modal { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: min(480px, calc(100vw - 24px)); width: 100%; max-height: calc(100dvh - 24px); }
.ax-modal::backdrop { background: rgba(4, 5, 4, .74); backdrop-filter: blur(5px); }
.ax-modal[open] { animation: axIn .22s ease-out; }
@keyframes axIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ax-modal-in { position: relative; background: var(--surf); border: 1px solid var(--line2); border-radius: var(--r); padding: 30px; }
.ax-modal-x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ax-modal-t { font-size: 26px; margin: 0 40px 6px 0; }
.ax-modal-s { color: var(--mute); font-size: 14.5px; margin-bottom: 20px; }
.ax-switch { margin: 0; text-align: center; font-size: 14px; color: var(--mute); }
.ax-login-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(242, 243, 238, .05); color: var(--soft); font-size: 14px; }

/* misc */
.ax-up { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--line2); color: var(--acc); }
.ax-up[hidden] { display: none; }
.preloader { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(14, 15, 14, .8); }
.ax-loader { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--acc); animation: axSpin .8s linear infinite; }
@keyframes axSpin { to { transform: rotate(360deg); } }
.ax-swipe { position: relative; }

/* responsive */
@media (max-width: 1240px) {
  .ax-nav { display: none; }
  .ax-menu-btn { display: inline-flex; }
  .ax-top-act { margin-left: auto; }
}
@media (max-width: 1024px) {
  .ax-learn-pic { order: 0; }
  .ax-hero-grid, .ax-night, .ax-modes, .ax-learn, .ax-split, .ax-zig, .ax-zig--flip, .ax-start, .ax-final, .ax-contact, .ax-doc-grid, .ax-head--row { grid-template-columns: minmax(0, 1fr); }
  .ax-zig--flip .ax-zig-text, .ax-zig--flip .ax-zig-vis { order: 0; }
  .ax-night-pic { order: 2; }
  .ax-c3--btc { width: 104px; left: auto; right: -20px; top: calc(var(--hd) + 8px); }
  .ax-c3--eth { width: 70px; left: auto; right: 8px; top: calc(33.5% + 44px); bottom: auto; }
  .ax-c3--sol { display: none; }
  .ax-split-h, .ax-docnav { position: static; }
  .ax-night-pic { height: 460px; min-height: 0; }
  .ax-deal--1 { right: 14px; }
  .ax-deal--2 { left: 14px; bottom: auto; top: 56%; }
  .ax-deal--3 { right: 14px; }
  .ax-steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .ax-steps::before { display: none; }
  .ax-foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ax-foot-brand { grid-column: 1 / -1; }
  .ax-path, .ax-register, .ax-faq, .ax-pairs, .ax-honest-cols { grid-template-columns: 1fr; }
  .ax-faq { gap: 28px; }
  .ax-faq-side { display: contents; }
  .ax-faq-side .ax-h2 { margin-bottom: 0; }
  .ax-faq-card { order: 3; margin-top: 0; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .ax-hide-sm, .ax-top-cta { display: none; }
  :root { --hd: 64px; }
  .ax-top-in { gap: 12px; }
  .ax-lang-code { display: none; }
  .ax-duo { grid-template-columns: 1fr; }
  .ax-or { justify-self: center; margin: -6px 0; }
  .ax-trio { grid-template-columns: 1fr; border-top: 0; }
  .ax-trio li, .ax-trio li + li { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .ax-cols { grid-template-columns: 1fr; }
  .ax-banner { flex-direction: column; align-items: flex-start; }
  .ax-steps { grid-template-columns: 1fr; text-align: left; }
  .ax-steps li { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; text-align: left; padding: 0; }
  .ax-step-ic { margin: 0; grid-row: span 2; }
  .ax-loop li:nth-child(2) { margin-left: 20px; }
  .ax-loop li:nth-child(3) { margin-left: 40px; }
  .ax-honest-h { flex-direction: column; align-items: flex-start; }
  .ax-foot-grid { grid-template-columns: 1fr 1fr; }
  .ax-modal-in { padding: 24px 18px; }
  /* card rows turn into swipe sliders */
  .ax-swipe { margin: 0 calc(var(--gut) * -1); }
  .ax-tiles, .ax-myths { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ax-tiles::-webkit-scrollbar, .ax-myths::-webkit-scrollbar { display: none; }
  .ax-tile, .ax-myth { flex: 0 0 84%; scroll-snap-align: center; }
  .ax-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .ax-dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: var(--line2); transition: width .2s, background .2s; }
  .ax-dots button[aria-current="true"] { width: 22px; background: var(--acc); }
}
@media (min-width: 761px) { .ax-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 480px) {
  .ax-deal { min-width: 0; gap: 9px; padding: 8px 11px 8px 8px; }
  .ax-deal-coin { width: 30px; height: 30px; }
  .ax-deal-txt b { font-size: 13px; }
  .ax-deal-txt small { font-size: 11px; }
  .ax-deal-pnl { font-size: 14px; }
  .ax-deal--1 { right: 10px; }
  .ax-deal--2 { left: 10px; }
  .ax-deal--3 { right: 10px; }
}
@media (max-width: 1024px) {
  /* single column: the chart runs across the top, the phone rises out of it */
  .ax-ph-stage { justify-items: center; padding: 176px 0 40px; }
  .ax-cd { inset: 0 0 auto; height: 330px; }
  .ax-cd-head { padding-left: 16px; }
  .ax-cd-tf { display: inline-flex; }
  .ax-ph-toast--a { top: 132px; right: auto; left: max(0px, calc(50% - 270px)); }
  .ax-ph-toast--b { bottom: 0; right: max(0px, calc(50% - 270px)); }
}
@media (max-width: 640px) {
  .ax-ph-stage { --phw: min(300px, 84vw); padding-top: 160px; }
  .ax-cd { height: 300px; margin: 0 -6px; }
  .ax-cd-tf { display: none; }
  .ax-ph-toast { padding: 8px 11px 8px 8px; gap: 9px; }
  .ax-ph-toast b { font-size: 12.5px; }
  .ax-ph-toast small { font-size: 11px; }
  .ax-ph-toast img, .ax-ph-toast-ico { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
  .ax-formcard { padding: 20px 18px; }
  .ax-formcard-h { font-size: 21px; margin-bottom: 14px; }
  .ax-form { gap: 11px; }
  .ax-pair { gap: 10px; }
  .ax-field { gap: 5px; }
  .ax-lab { font-size: 12.5px; }
  .ax-form input[type="text"], .ax-form input[type="email"], .ax-form input[type="tel"], .ax-form input[type="password"] { height: 46px; }
  .ax-fico { top: 14px; }
  .ax-eye { top: 5px; }
  .ax-pair .ax-box input { padding-left: 38px !important; }
  .ax-pair .ax-fico { left: 12px; }
  .ax-field:has(input[name="password"]:placeholder-shown:not(:focus)) + .ax-pw { display: none; }
  .ax-pw-list { gap: 5px 10px; }
  .ax-pw-list li { font-size: 12px; }
  .ax-small { font-size: 12px; }
}
@media (max-width: 640px) {
  .ax-acc { padding: 2px 18px; border-radius: 16px; }
  .ax-qa summary { padding: 18px 0; font-size: 16.5px; gap: 14px; }
  .ax-qa-q { gap: 12px; }
  .ax-qa-a p { padding: 0 0 20px 32px; }
}