/* AlphaQuant landing: single dark theme, brand teal + free-only gold accent */

/* Local Orbitron files (no external font CDN). Six real weights are
   registered so that whatever font-weight a heading/label/caption
   already uses maps to an actual Orbitron face instead of a
   browser-synthesized fake bold. Applied to the .aq-data-number
   utility class plus a set of component-level selectors further
   down (terminal widget, feature strip, equity/disclosure cards,
   "how it works" steps) -- not the whole page. */
@font-face{
  font-family: "Orbitron";
  src: url("fonts/Orbitron-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Orbitron";
  src: url("fonts/Orbitron-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Orbitron";
  src: url("fonts/Orbitron-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Orbitron";
  src: url("fonts/Orbitron-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Orbitron";
  src: url("fonts/Orbitron-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Orbitron";
  src: url("fonts/Orbitron-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Goldman";
  src: url("fonts/Goldman-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Goldman";
  src: url("fonts/Goldman-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --navy: #0a0f1c;
  --navy-raised: #121a29;
  --navy-panel: #16202f;
  --line: #223046;
  --ink: #eef2f7;
  --ink-soft: #9fb0c4;
  --ink-faint: #6d7d92;
  --teal: #2fd6b3;
  --teal-deep: #17a08a;
  --teal-tint: #12332e;
  --gold: #e3ac3f;
  --gold-deep: #b9852a;
  --loss: #d9776a; /* semantic only: negative/sell figures in the terminal widget, not a brand accent */
  --radius: 10px;
  --radius-pill: 100px;
  --max: 1160px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: "Sora", "IBM Plex Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0; }

.mono{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.icon{
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

/* ---------- header ---------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 15, 28, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand img{ height: 28px; width: auto; }

.main-nav{
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  color: var(--ink-soft);
}

.main-nav a{
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.main-nav a:hover{ color: var(--teal); }
.main-nav a:hover::after{ transform: scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .main-nav a::after{ transition: none; }
}

.header-right{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* language switcher */

.lang-switch{
  position: relative;
}

.lang-trigger{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  cursor: pointer;
}

.lang-trigger:hover{ border-color: #3a4b64; }
.lang-trigger .icon{ font-size: 15px; color: var(--ink-soft); }
.lang-trigger .icon.caret{ font-size: 9px; color: var(--ink-faint); transition: transform 0.2s ease; }
.lang-switch[data-open="true"] .caret{ transform: rotate(180deg); }

.lang-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 168px;
  max-height: 60vh;
  background: var(--navy-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.lang-switch[data-open="true"] .lang-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.lang-item + .lang-item{ border-top: 1px solid var(--line); }
.lang-item:hover{ background: rgba(255,255,255,0.03); color: var(--ink); }
.lang-item.active{ color: var(--ink); font-weight: 600; }
.lang-item.active::after{ content: "✓"; color: var(--teal); font-weight: 700; }
.lang-item .code{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); }
.lang-name{ display: flex; align-items: center; gap: 8px; }
.lang-flag{
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
  display: inline-block;
}
.lang-trigger .lang-flag{ width: 16px; height: 12px; }

/* ---------- buttons ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:active{ transform: scale(0.98); }

.btn-gold{
  background: var(--gold);
  color: #241a06;
}
.btn-gold:hover{ background: #eebb55; box-shadow: 0 8px 24px rgba(227,172,63,0.28); }

.btn-ghost{
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}
.btn-ghost:hover{
  background: var(--teal-tint);
  border-color: var(--teal);
  box-shadow: 0 6px 18px rgba(47,214,179,0.18);
}

/* ---------- hero ---------- */

.hero{
  padding: 72px 0 88px;
  position: relative;
  overflow: hidden;
}

.hero::before{
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 520px;
  background: radial-gradient(closest-side, rgba(47,214,179,0.14), transparent 70%);
  pointer-events: none;
}

.hero-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}

.hero h1{
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.14;
  color: #fff;
  max-width: 15ch;
}

.hero-sub{
  margin-top: 20px;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 46ch;
  line-height: 1.65;
}

.hero-ctas{
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-note{
  font-size: 13px;
  color: var(--ink-faint);
}

/* hero chart visual */

.hero-visual{
  position: relative;
  background: var(--navy-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 20px;
}

.hero-visual-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}

.hero-visual-head .label{
  font-size: 13px;
  color: var(--ink-soft);
}

.hero-visual-head .value{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 22px;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.hero-chart{ width: 100%; height: auto; display: block; }

.hero-visual-foot{
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-faint);
}

.hero-visual-foot strong{ color: var(--ink-soft); font-weight: 500; }
.hero-visual-caption{
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ---------- trust bar ---------- */

.trust{
  padding: 52px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trust-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.trust-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.trust-item .icon{
  font-size: 22px;
  color: var(--teal);
  flex: none;
  margin-top: 2px;
}

.trust-item h3{
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 600;
}

.trust-item p{
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- risk section ---------- */

.risk{
  padding: 88px 0;
}

.risk-panel{
  background: var(--teal-tint);
  border: 1px solid #1d4a41;
  border-radius: 16px;
  padding: 44px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
}

.risk-panel .icon{
  font-size: 30px;
  color: var(--teal);
}

.risk-panel h2{
  font-size: 25px;
  color: #fff;
  margin-bottom: 12px;
}

.risk-panel p{
  font-size: 15.5px;
  color: #c3e3da;
  line-height: 1.7;
  max-width: 62ch;
}

.risk-panel p + p{ margin-top: 12px; }

/* ---------- how it works ---------- */

.how{ padding: 88px 0; }

.section-head{
  max-width: 52ch;
  margin-bottom: 48px;
}

.section-head h2{
  font-size: clamp(26px, 3vw, 34px);
  color: #fff;
}

.section-head p{
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.step{
  background: var(--navy-panel);
  padding: 32px 28px;
}

.step .icon{
  font-size: 26px;
  color: var(--teal);
  margin-bottom: 20px;
}

.step h3{
  font-size: 17px;
  color: #fff;
  margin-bottom: 8px;
}

.step p{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- stats + testimonials ---------- */

.proof{ padding: 88px 0; }

.stats-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 56px;
}

.stat{
  background: var(--navy-panel);
  padding: 28px 24px;
}

.stat .num{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 30px;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.stat .lbl{
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.stats-caption{
  font-size: 12px;
  color: var(--ink-faint);
  margin: -40px 0 40px;
}

.testimonials{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Rolling testimonial carousel: the track holds every reviewer plus a
   duplicated copy of the same set appended after it, so the JS can
   step forward one card at a time and, on reaching the start of the
   duplicate set (visually identical to card 1), snap back to the
   real card 1 with the transition briefly disabled -- an endless
   loop using only 2x the cards, no matter how many are visible at
   once (3 on desktop, 1 on mobile). */
.aq-testimonial-carousel{
  overflow: hidden;
}
.testimonials.aq-testimonial-track{
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease;
}
.aq-testimonial-track .testimonial{
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
}

.testimonial{
  background: var(--navy-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.testimonial blockquote{
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}

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

.avatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #04231d;
  flex: none;
}

.who-name{ font-size: 13.5px; font-weight: 600; color: var(--ink); }
.who-loc{ font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 5px; }

/* ---------- closing cta ---------- */

.closing{
  padding: 96px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.closing h2{
  font-size: clamp(28px, 3.6vw, 40px);
  color: #fff;
  max-width: 20ch;
  margin: 0 auto;
}

.closing p{
  margin-top: 16px;
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.closing .hero-ctas{ justify-content: center; margin-top: 30px; }

/* ---------- footer ---------- */

.site-footer{
  border-top: 1px solid var(--line);
  padding: 44px 0;
}

.footer-grid{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand img{ height: 22px; margin-bottom: 12px; }

.footer-brand p{
  font-size: 12.5px;
  color: var(--ink-faint);
  max-width: 40ch;
  line-height: 1.6;
}

.footer-links{
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-col h4{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col a, .footer-col span{
  display: block;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.footer-col a:hover{ color: var(--ink); }

.footer-bottom{
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity: 0;
    transform: translateY(16px);
    animation: reveal-in 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .reveal-1{ animation-delay: 0.05s; }
  .reveal-2{ animation-delay: 0.14s; }
  .reveal-3{ animation-delay: 0.22s; }
}

@keyframes reveal-in{
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr; gap: 22px; }
  .steps{ grid-template-columns: 1fr; }
  .stats-row{ grid-template-columns: repeat(2, 1fr); }
  .testimonials{ grid-template-columns: 1fr; }
  .aq-testimonial-track .testimonial{ flex: 0 0 100%; }
  .stats-caption{ margin-top: -24px; }
  .main-nav{ display: none; }
  .risk-panel{ grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 560px){
  .stats-row{ grid-template-columns: 1fr; }
  .footer-grid{ flex-direction: column; }
}

/* ALPHAQUANT ADDITION START =============================
   Fixed Telegram / WhatsApp contact bar.
   Namespaced under aq- so nothing here can collide with
   the existing design system above. Only two rules touch
   pre-existing selectors (body / .site-footer) and both
   only add clearance so the new fixed bar never overlaps
   existing content - no colors, fonts, or spacing on any
   existing component are changed.
   ========================================================= */

/* Reserve space at the bottom of the page so the fixed
   contact bar never covers the footer's last line. This is a
   fallback for before JS measures the bar's real (now taller,
   two-row) height and sets an exact inline value -- see
   aqInitContactBarReveal in alphaquant.js. */
body{
  padding-bottom: 92px;
}

.aq-contact-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--navy-panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.aq-contact-bar.aq-visible{ transform: translateY(0); }

.aq-contact-bar-label{
  margin: 0;
  padding: 6px 12px 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-faint);
}

.aq-contact-bar-row{
  display: flex;
}

.aq-contact-link{
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease;
}

.aq-contact-link + .aq-contact-link{
  border-left: 1px solid var(--line);
}

.aq-contact-link:hover,
.aq-contact-link:focus-visible{
  background: rgba(255,255,255,0.04);
}

.aq-contact-icon{
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--teal);
  animation: aq-icon-pulse 4s ease-in-out infinite;
}
.aq-whatsapp .aq-contact-icon{ animation-delay: 2s; }

/* Slow, small scale pulse with a soft glow bloom behind the icon
   (drop-shadow follows currentColor, so it automatically matches each
   icon's own Telegram-blue/WhatsApp-green) -- no blinking or
   bouncing, keeps the calm/trustworthy tone the rest of the site uses. */
@keyframes aq-icon-pulse{
  0%, 100%{ transform: scale(1); opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  50%{ transform: scale(1.08); opacity: 0.85; filter: drop-shadow(0 0 6px currentColor); }
}

@media (max-width: 480px){
  .aq-contact-bar-label{ font-size: 10.5px; }
  .aq-contact-link{
    font-size: 13.5px;
    padding: 15px 8px;
    gap: 7px;
  }
  .aq-contact-icon{
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce){
  .aq-contact-link{ transition: none; }
  .aq-contact-bar{ transition: none; }
  .aq-contact-icon{ animation: none; }
}
/* ALPHAQUANT ADDITION END ================================= */

/* MOBILE CONVERSION START =================================
   Footer legal links, company info placeholder, and a
   short risk-disclaimer line. Built entirely from existing
   tokens (--ink-faint, --line, existing font stack) so nothing
   here introduces a new color, font, or spacing scale.
   The section/hero/steps/stats/testimonial classes used by
   the new mobile ad-landing pages are NOT redefined here --
   they already collapse to a single column under the
   existing max-width:900px / 640px / 560px / 480px media
   queries above, so the same markup that powers the desktop
   site works as the mobile-vertical layout without changes.
   ========================================================= */

.aq-footer-legal{
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-top: 16px;
  font-size: 12px;
}

.aq-footer-legal a{
  color: var(--ink-faint);
  padding: 0 14px;
}

.aq-footer-legal a:first-child{
  padding-left: 0;
}

.aq-footer-legal a:not(:first-child){
  border-left: 1px solid var(--line);
}

.aq-footer-legal a:hover{
  color: var(--ink);
}

.aq-footer-company{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding: 20px 22px;
  background: var(--navy-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.aq-footer-company-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.aq-footer-company-row .icon{
  width: 17px;
  height: 17px;
  color: var(--teal);
  flex: none;
  margin-top: 1px;
}
.aq-footer-company-name{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--teal);
}
.aq-footer-company-row a{
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aq-footer-company-row a:hover{ color: var(--ink); }

.aq-risk-disclaimer{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.7;
  max-width: 60ch;
}

.aq-third-party-notice{
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.6;
}

@media (max-width: 560px){
  .aq-footer-legal a{
    padding: 0 10px;
  }
  .aq-footer-legal a:first-child{
    padding-left: 0;
  }
}

/* Minimal reading layout for the legal stub pages
   (privacy policy / terms / risk disclosure / cookie policy).
   Reuses existing h1/h2/p type rules from above -- only
   adds spacing, nothing new to the palette or type scale. */
.aq-legal-content{
  padding: 56px 0 96px;
}

.aq-legal-content h1{
  font-size: clamp(26px, 3.4vw, 36px);
  color: #fff;
  margin-bottom: 10px;
}

.aq-legal-content .aq-legal-updated{
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 40px;
}

.aq-legal-content h2{
  font-size: 18px;
  color: #fff;
  margin-top: 36px;
  margin-bottom: 10px;
}

.aq-legal-content p,
.aq-legal-content li{
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 68ch;
}

.aq-legal-content ul{
  margin: 0 0 12px;
  padding-left: 20px;
}

.aq-legal-content li{
  margin-bottom: 6px;
}

.aq-legal-placeholder{
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--gold);
  background: var(--gold-soft);
  padding: 1px 7px;
  border-radius: 4px;
}

.aq-legal-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.aq-legal-back:hover{ color: var(--ink); }
/* MOBILE CONVERSION END ===================================== */

/* DESIGN ENRICHMENT START =====================================
   Trust badge strip, market/platform tags, star ratings on
   testimonials, icons on stat cards, and an FAQ accordion.
   Everything here is built from existing tokens (--teal,
   --gold, --ink-*, --line, --navy-panel) and the existing
   type scale -- no new colors, fonts, or radii introduced.
   ============================================================= */

.aq-badge-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.aq-badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 13px;
  background: var(--navy-panel);
}

.aq-badge .icon{
  color: var(--teal);
  width: 14px;
  height: 14px;
}

.aq-markets-strip{
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 18px;
}

.aq-markets-strip span{
  padding: 0 11px;
}

.aq-markets-strip span:first-child{
  padding-left: 0;
}

.aq-markets-strip span:not(:first-child){
  border-left: 1px solid var(--line);
}

.aq-stars{
  display: flex;
  gap: 2px;
  color: var(--gold);
  margin-bottom: 12px;
}

.aq-stars .icon{
  width: 13px;
  height: 13px;
}

.stat .icon{
  width: 22px;
  height: 22px;
  color: var(--teal);
  margin-bottom: 12px;
}

/* FAQ accordion -- native <details>/<summary>, no JS required */
.faq{ padding: 88px 0; }

.faq-list{
  border-top: 1px solid var(--line);
}

.faq-item{
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.faq-item summary{
  cursor: pointer;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-item summary::after{
  content: "+";
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--teal);
  font-size: 20px;
  line-height: 1;
  flex: none;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after{
  transform: rotate(45deg);
}

.faq-item p{
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 65ch;
}

@media (prefers-reduced-motion: reduce){
  .faq-item summary::after{ transition: none; }
}

@media (max-width: 560px){
  .aq-badge{ font-size: 11px; padding: 5px 11px; }
}
/* DESIGN ENRICHMENT END ======================================= */

/* MULTI-ANGLE ADDITION START ==================================
   Support for stacking multiple hero "hook" sections on one
   page (the /en/lp/ combined page). A hairline divider between
   consecutive hero sections replaces the need for numbered
   section markers, and .aq-hero-solo gives the final, visual-
   free hook section a centered single-column layout. Both
   reuse existing tokens only. */

.hero + .hero{
  border-top: 1px solid var(--line);
}

.aq-hero-solo .container{
  max-width: 640px;
  text-align: center;
}

.aq-hero-solo h1,
.aq-hero-solo .hero-sub{
  margin-left: auto;
  margin-right: auto;
}

.aq-hero-solo .hero-ctas{
  justify-content: center;
}

.aq-hero-solo .aq-badge-strip{
  justify-content: center;
}
/* MULTI-ANGLE ADDITION END ===================================== */

/* BACKGROUND ENRICHMENT START ===================================
   Decorative ticker strip + a faint hero grid texture, modeled
   on the "ambient trading terminal" background used by reference
   sites (scrolling instrument strip, subtle backdrop grid). Built
   entirely from existing tokens. The strip lists supported
   instruments only -- no simulated prices -- so it never reads
   as a live feed it isn't.
   ================================================================ */

.aq-ticker{
  display: flex;
  align-items: stretch;
  background: var(--navy-panel);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.aq-ticker-label{
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.aq-ticker-label .icon{
  width: 12px;
  height: 12px;
  color: var(--teal);
}

.aq-ticker-viewport{
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.aq-ticker-track{
  display: flex;
  width: max-content;
  animation: aq-ticker-scroll 32s linear infinite;
}

.aq-ticker-track span{
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.aq-ticker-track span::before{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 10px;
  opacity: 0.7;
}

@keyframes aq-ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .aq-ticker-track{ animation: none; }
  .aq-ticker-viewport{ overflow-x: auto; }
}

@media (max-width: 560px){
  .aq-ticker-label span:last-child{ display: none; }
}

/* Faint backdrop grid behind the first hero section only,
   layered under the existing radial glow (::before). */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(47,214,179,0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(47,214,179,0.05) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

.hero .hero-grid,
.aq-hero-solo .container{
  position: relative;
  z-index: 1;
}
/* BACKGROUND ENRICHMENT END ======================================= */

/* LP-PAGE REVISION START ==========================================
   Everything below is scoped to the /en/lp/ combined page only
   (CTA-to-contact-bar flash, readable in-hero stat cards, a
   disclosure list, an animated illustrative terminal widget, and
   a photo-left testimonial layout). No rule here touches the base
   .testimonial / .stats-row behaviour used elsewhere -- new work
   lives in new classes, or is scoped under .hero-visual so the
   full-width proof section elsewhere is unaffected.
   =================================================================== */

/* 1. CTA click -> flash the fixed contact bar */
@keyframes aq-contact-flash{
  0%, 100%{ box-shadow: 0 -8px 24px rgba(0,0,0,0.35); border-top-color: var(--line); }
  50%{ box-shadow: 0 -8px 34px rgba(47,214,179,0.5); border-top-color: var(--teal); }
}
.aq-contact-bar.aq-flash{
  animation: aq-contact-flash 0.6s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce){
  .aq-contact-bar.aq-flash{ animation: none; border-top-color: var(--teal); }
}

/* 2. Readable stat cards when nested inside a hero-visual card
      (used by PAGE2's two-year record and PAGE3's comparison) */
.hero-visual .stats-row{
  gap: 1px;
  background: var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.hero-visual .stats-row .stat{
  background: var(--navy-raised);
  padding: 22px 18px;
}
.hero-visual .stats-row .icon{
  width: 26px;
  height: 26px;
}
.hero-visual .stats-row .num{
  font-size: 27px;
}
.hero-visual .stats-row .lbl{
  font-size: 13px;
  line-height: 1.45;
  margin-top: 6px;
}

/* 3. Disclosure list (PAGE3) */
.aq-disclosure-list{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.aq-disclosure-list li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink);
}
.aq-disclosure-list .icon{
  width: 19px;
  height: 19px;
  color: var(--teal);
  flex: none;
}

/* 4. Illustrative animated terminal (PAGE4) */
.aq-terminal{
  background: var(--navy-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}
.aq-terminal-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.aq-terminal-dots{ display: flex; gap: 6px; }
.aq-terminal-dots span{ width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.aq-terminal-logo{
  height: 14px;
  width: auto;
  flex: none;
}
.aq-terminal-title{
  flex: 1;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.aq-terminal-status{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.aq-terminal-status .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: aq-pulse 1.6s ease-in-out infinite;
}
@keyframes aq-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.3; } }

.aq-terminal-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.aq-terminal-card{ background: var(--navy-raised); padding: 13px 12px; }
.aq-terminal-card .lbl{
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aq-terminal-card .state{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
  color: var(--teal);
}

.aq-terminal-log{
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.aq-terminal-log-head,
.aq-terminal-row{
  display: grid;
  grid-template-columns: 64px 46px 1fr 44px 64px;
  gap: 10px;
  padding: 8px 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  min-width: 380px;
}
.aq-terminal-log-head{
  color: var(--ink-faint);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}
.aq-terminal-row{
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  animation: aq-row-in 0.4s ease;
}
.aq-terminal-row .buy{ color: var(--teal); }
.aq-terminal-row .sell{ color: var(--loss); }
.aq-terminal-log-body{ min-height: 88px; }

@keyframes aq-row-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

.aq-terminal-foot{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.aq-terminal-foot .stat{ background: var(--navy-raised); padding: 15px 12px; text-align: center; }
.aq-terminal-foot .stat .num{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 19px;
  color: var(--teal);
}
.aq-terminal-foot .stat .lbl{
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.aq-terminal-caption{
  padding: 10px 16px;
  font-size: 11px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

/* Extra "hooking" motion reserved for the top spotlight terminal only
   (marked .aq-terminal-hook), so it reads as more alive/attention-
   grabbing than the calmer proof-section terminal on PAGE4 further
   down -- same component, two different energy levels. */
.aq-terminal-row.is-fresh{
  animation: aq-row-in 0.4s ease, aq-row-flash 1.2s ease;
}
@keyframes aq-row-flash{
  0%{ background: rgba(47,214,179,0.2); }
  100%{ background: transparent; }
}
.aq-terminal-count{ display: inline-block; }
.aq-terminal-count.is-updated{
  animation: aq-count-pop 0.55s ease;
}
@keyframes aq-count-pop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.18); color: var(--gold); }
  100%{ transform: scale(1); }
}
.aq-terminal-hook .aq-terminal-status .dot{
  width: 8px;
  height: 8px;
  animation: aq-pulse-live 1.1s ease-in-out infinite;
}
@keyframes aq-pulse-live{
  0%, 100%{ opacity: 1; box-shadow: 0 0 0 0 rgba(212,163,79,0.5); }
  50%{ opacity: 0.55; box-shadow: 0 0 0 4px rgba(212,163,79,0); }
}

@media (prefers-reduced-motion: reduce){
  .aq-terminal-status .dot{ animation: none; }
  .aq-terminal-row{ animation: none; }
  .aq-terminal-row.is-fresh{ animation: none; }
  .aq-terminal-count.is-updated{ animation: none; }
}

@media (max-width: 640px){
  .aq-terminal-cards{ grid-template-columns: repeat(2, 1fr); }
  .aq-terminal-foot{ grid-template-columns: repeat(2, 1fr); }
}

/* 5. Photo-left testimonial layout (PAGE8) */
.aq-testimonial-side{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
}
.aq-testimonial-side .avatar{
  width: 56px;
  height: 56px;
  font-size: 19px;
  flex: none;
}
.aq-testimonial-side .testimonial-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 480px){
  .aq-testimonial-side{ gap: 14px; }
  .aq-testimonial-side .avatar{ width: 46px; height: 46px; font-size: 16px; }
}

/* Small illustrative caption under the testimonials -- present but quiet,
   so the section reads as real reviews first and a disclaimer second. */
.aq-testimonial-caption{
  margin-top: 24px;
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}

/* Chart legend (PAGE2 backtest vs. live-verified) */
.aq-chart-legend{
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-faint);
}
.aq-chart-legend span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.aq-legend-swatch{
  width: 16px;
  height: 0;
  border-top: 2px solid var(--ink-faint);
  display: inline-block;
}
.aq-legend-swatch.aq-legend-dash{
  border-top-style: dashed;
}
.aq-legend-swatch.aq-legend-solid{
  border-top-color: var(--teal);
  border-top-style: solid;
}

/* Fix: header logo distorting on narrow screens. The button/nav were
   allowed to squeeze the brand link; once squeezed below the logo's
   natural rendered width, the global img{max-width:100%} rule clipped
   width while height stayed fixed, stretching the mark. Locking the
   brand link to its content size prevents that. */
.brand{
  flex: none;
}

/* Header CTA: full label on wider screens, a short one where space
   is tight, so the button never forces the header (or, indirectly,
   the fixed contact bar) wider than the viewport. */
.aq-cta-short{ display: none; }

@media (max-width: 480px){
  .aq-cta-full{ display: none; }
  .aq-cta-short{ display: inline; }
  .header-right .btn{ padding: 11px 18px; font-size: 14px; }
}

/* Language switcher: hide the language-code letters on narrow screens
   (globe icon + caret is enough) so it doesn't compete with the header
   CTA for space and push the header wider than the viewport. */
@media (max-width: 400px){
  .lang-trigger .lang-code{ display: none; }
  .lang-trigger{ padding: 6px 8px; }
  .header-right{ gap: 6px; }
  .header-right .btn{ padding: 8px 12px; font-size: 12.5px; }
  .site-header .container{ padding: 0 14px; gap: 10px; }
}
/* LP-PAGE REVISION END ============================================= */

/* HEADLINE IMPACT + GLOW START ====================================
   1) Slightly bigger, tighter hero type, with the second clause of
      each two-line headline picked out in brand teal -- reads as
      emphasis, not decoration, since it's always the "payoff" half
      of the line ("Markets change. We don't.").
   2) A stronger, slow-breathing version of the existing radial glow
      behind the hero. Same teal token, same single accent -- just
      turned up, with a gentle pulse instead of a static wash. */

.hero h1{
  font-size: clamp(36px, 4.8vw, 58px);
  letter-spacing: -0.02em;
}

.hero h1 .aq-accent{
  color: var(--teal);
}

.hero::before{
  height: 640px;
  background: radial-gradient(closest-side, rgba(47,214,179,0.24), transparent 72%);
  animation: aq-glow-breathe 9s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes aq-glow-breathe{
  0%, 100%{ opacity: 0.85; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none; opacity: 0.9; }
}
/* HEADLINE IMPACT + GLOW END ======================================== */

/* SPOTLIGHT HERO START ==============================================
   Top-of-page section, added above the existing PAGE1-4 stack.
   Reuses .hero / .aq-terminal / .aq-badge-strip, adds one small new
   pattern: an inline reassurance checklist under the dual CTAs. */
.aq-reassure-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.aq-reassure-list li{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.aq-reassure-list .icon{
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex: none;
}
.aq-spotlight .hero-ctas{
  flex-wrap: wrap;
}

/* Full-width 4-up feature strip under the headline/dashboard columns. */
.aq-feature-strip{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--navy-panel);
  overflow: hidden;
}
.aq-feature-strip-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}
.aq-feature-strip-item:last-child{ border-right: none; }
.aq-feature-strip-icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(47,214,179,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.aq-feature-strip-icon .icon{
  width: 20px;
  height: 20px;
  color: var(--teal);
}
.aq-feature-strip-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aq-feature-strip-text .title{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.4;
}
.aq-feature-strip-text .sub{
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (max-width: 860px){
  .aq-feature-strip{ grid-template-columns: repeat(2, 1fr); }
  .aq-feature-strip-item:nth-child(2n){ border-right: none; }
  .aq-feature-strip-item:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px){
  .aq-feature-strip{ grid-template-columns: 1fr; }
  .aq-feature-strip-item{ border-right: none !important; border-bottom: 1px solid var(--line); }
  .aq-feature-strip-item:last-child{ border-bottom: none; }
}

/* Inline star-rating row under the reassurance checklist. Reuses the
   existing .aq-stars token from the testimonials section. The rating
   itself is a design placeholder (no review system exists yet), so it
   always carries a small "swap before launch" note -- same pattern as
   the "Illustrative example" labels on the equity chart and terminal. */
.aq-rating-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.aq-rating-row .aq-stars{ margin-bottom: 0; }
.aq-rating-score{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.aq-rating-note{
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* Real photo iPhone mockup (assets/phone-mockup.jpg) for the PAGE4
   terminal. The terminal is layered on top as an absolutely-positioned
   panel sized to the image's screen cutout (measured once from the
   source photo: screen sits at 5.7%/2.2% from the top-left corner of
   the cropped phone image, 88.6% x 89.8% of its box) -- this fully
   covers the flat white "screen" baked into the photo, so the JPG's
   lack of alpha transparency doesn't matter. Scoped overrides reflow
   the same terminal markup (cards / log rows / footer) to fit the
   phone's screen width regardless of viewport size, since this sits
   inside a hero column that stays fairly wide on desktop and can't
   rely on the existing @media breakpoints (those key off viewport
   width, not this element's width). */
.aq-phone-mockup{
  position: relative;
  width: min(280px, 100%);
  margin: 0 auto;
}
.aq-phone-mockup-img{
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.aq-phone-mockup-screen{
  position: absolute;
  left: 5%;
  top: 1.9%;
  width: 90%;
  height: 96.1%;
  overflow: hidden;
  border-radius: 11% / 5%;
  background: var(--navy-panel);
  display: flex;
  flex-direction: column;
}

/* Real phone status bar (time + signal/wifi/battery) at the very top
   of the screen, so this reads as an actual phone screenshot rather
   than our desktop terminal widget dropped into a phone frame. */
.aq-phone-status-bar{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.aq-phone-status-icons{ display: flex; align-items: center; gap: 4px; color: var(--ink); }
.aq-phone-status-icons .icon{ width: 13px; height: 13px; }

/* Body wrapper centers the terminal card vertically in the remaining
   screen height without stretching it -- see the note further down
   on why stretching created a visible dead gap. */
.aq-phone-screen-body{
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 2px 0 6px;
}
.aq-phone-mockup-screen .aq-terminal{
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* App-header styling: drop the macOS-style window dots (a desktop CLI
   convention that doesn't belong in a phone screenshot) and the
   redundant plain-text title, keep the real logo, and turn the
   "Simulated" status into a pill badge like a native app's status
   chip instead of plain terminal text. */
.aq-phone-mockup-screen .aq-terminal-bar{ padding: 6px 14px 10px; border-bottom: none; }
.aq-phone-mockup-screen .aq-terminal-dots{ display: none; }
.aq-phone-mockup-screen .aq-terminal-title{ display: none; }
.aq-phone-mockup-screen .aq-terminal-logo{ height: 15px; }
.aq-phone-mockup-screen .aq-terminal-status{
  font-size: 8px;
  margin-left: auto;
  background: rgba(212,163,79,0.16);
  padding: 3px 9px;
  border-radius: 100px;
}

/* Status/risk cards as individually-rounded tiles instead of a flat
   1px-line grid -- reads as native app cards, not a CLI table. */
.aq-phone-mockup-screen .aq-terminal-cards{
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: transparent;
  padding: 0 14px;
}
.aq-phone-mockup-screen .aq-terminal-card{
  background: var(--navy-raised);
  border-radius: 12px;
  padding: 9px 10px;
}
.aq-phone-mockup-screen .aq-terminal-card .lbl{ font-size: 8px; }
.aq-phone-mockup-screen .aq-terminal-card .state{ font-size: 9.5px; }

/* Trade rows as rounded list cards: type badge + symbol on the left,
   profit pushed right and bolded, time shrunk to a small trailing
   label -- same 5 cells the JS already generates, just reflowed with
   `order` so no markup or script change is needed. */
.aq-phone-mockup-screen .aq-terminal-log{ overflow-x: hidden; border-top: none; padding: 10px 14px 0; }
.aq-phone-mockup-screen .aq-terminal-log-head{ display: none; }
.aq-phone-mockup-screen .aq-terminal-row{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy-raised);
  border-radius: 12px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border-bottom: none;
  min-width: 0;
  width: 100%;
}
.aq-phone-mockup-screen .aq-terminal-row > span:nth-child(1){
  order: 3;
  font-size: 8px;
  color: var(--ink-faint);
  margin-left: 6px;
}
.aq-phone-mockup-screen .aq-terminal-row > span:nth-child(2){
  order: 1;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
}
.aq-phone-mockup-screen .aq-terminal-row > span:nth-child(3){
  order: 2;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
}
.aq-phone-mockup-screen .aq-terminal-row > span:nth-child(5){
  order: 4;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
}
.aq-phone-mockup-screen .aq-terminal-row > span:nth-child(4){ display: none; }

.aq-phone-mockup-screen .aq-terminal-foot{
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: transparent;
  padding: 10px 14px 6px;
  border-top: none;
}
.aq-phone-mockup-screen .aq-terminal-foot .stat{
  background: var(--navy-raised);
  border-radius: 12px;
  padding: 10px 8px;
}
.aq-phone-mockup-screen .aq-terminal-foot .stat .num{ font-size: 13px; }
.aq-phone-mockup-screen .aq-terminal-foot .stat .lbl{ font-size: 8.5px; }
.aq-phone-mockup-screen .aq-terminal-caption{ font-size: 8px; padding: 4px 14px 2px; border-top: none; }
.aq-phone-caption{
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 16px;
}
/* SPOTLIGHT HERO END ================================================ */

/* Telegram/WhatsApp brand-word emphasis in the fixed contact bar. */
.aq-brand-word{ font-weight: 700; }
.aq-telegram .aq-brand-word{ color: #95D5F7; }
.aq-whatsapp .aq-brand-word{ color: #92E9B3; }
.aq-telegram .aq-contact-icon{ color: #95D5F7; }
.aq-whatsapp .aq-contact-icon{ color: #92E9B3; }

/* Legal-page modal: footer Privacy/Terms/Risk/Cookie links open the
   real English legal page inside an iframe instead of navigating
   away, so visitors on any language never leave the current page. */
.aq-legal-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.aq-legal-modal[data-open="true"]{ display: block; }
.aq-legal-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5,11,22,0.72);
}
.aq-legal-modal-panel{
  position: relative;
  max-width: 720px;
  width: calc(100% - 32px);
  height: calc(100% - 64px);
  margin: 32px auto;
  background: var(--navy-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.aq-legal-modal-close{
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  background: var(--navy-raised);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.aq-legal-modal-frame{
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}
@media (max-width: 640px){
  .aq-legal-modal-panel{ height: calc(100% - 32px); margin: 16px auto; }
}

/* Orbitron on the number itself -- swaps the font-family alone,
   existing color/size/alignment/spacing on the element are left
   exactly as they are. */
.aq-data-number{
  font-family: "Orbitron", "IBM Plex Mono", ui-monospace, monospace;
}

/* Orbitron across the feature strip, equity/disclosure cards, and
   "how it works" steps -- every weight already set on headings/
   labels/captions in these components carries over unchanged, so
   this only swaps font-family, not the type hierarchy. The terminal
   widget itself uses Goldman instead, see below. */
.aq-feature-strip,
.hero-visual,
.steps{
  font-family: "Orbitron", "IBM Plex Sans", sans-serif;
}
/* A handful of elements inside .hero-visual set their own
   IBM-Plex-Mono font-family and would otherwise block the inherited
   Orbitron above -- these overrides are written one class more
   specific than each original rule so they win regardless of source
   order, without touching the original rule (still used elsewhere). */
.hero-visual .hero-visual-head .value,
.hero-visual .hero-visual-foot strong{
  font-family: "Orbitron", "IBM Plex Mono", ui-monospace, monospace;
}
.steps .step h3{
  font-family: "Orbitron", "IBM Plex Sans", sans-serif;
}

/* Goldman across the trading terminal widget (both the top spotlight
   instance and the phone-mockup one) -- same override pattern as
   above, just a different local font. */
.aq-terminal{
  font-family: "Goldman", "IBM Plex Sans", sans-serif;
}
.aq-terminal .aq-terminal-title,
.aq-terminal .aq-terminal-status,
.aq-terminal .aq-terminal-log-head,
.aq-terminal .aq-terminal-row,
.aq-terminal .aq-terminal-card .state,
.aq-terminal .aq-terminal-foot .stat .num{
  font-family: "Goldman", "IBM Plex Mono", ui-monospace, monospace;
}