/* ============================================================
   PaySonata — FX Solutions Redefined
   Obsidian design system: pure black, hairlines,
   "Frosted aura" palette: #5C7E8F · #A2A2A2 · #D4DDE2 · #FFF
   ============================================================ */

:root {
  --bg: #000000;
  --bg-elev: #0a0c0e;
  --surface: rgba(255, 255, 255, 0.028);
  --surface-hover: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);
  --text: #f4f7f9;
  --muted: #a2a2a2;
  --faint: #6a6f73;
  --accent: #5c7e8f;
  --accent-soft: #909eae;        /* pewter — small accent text, icons, kickers */
  --accent-bright: #d4dde2;
  --accent-ink: #0c161d;
  --glow: rgba(92, 126, 143, 0.38);
  --accent-em: #909eae;          /* pewter — the serif-italic accent words (all sections) */
  /* ONE typeface site-wide (owner request): Space Grotesk everywhere, so the
     only thing that sets accent words apart is their pewter colour, not the
     font. Greek has no Space Grotesk glyphs, so EL text falls back to Manrope
     uniformly (body + accents alike) — still one font per language. */
  --font-sans: "Space Grotesk", "Manrope", "Helvetica Neue", -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Manrope", "Helvetica Neue", -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

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

/* author display rules (grid/flex) would otherwise beat the UA's [hidden] */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  font-synthesis: none; /* never fake bold/italic */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ============ header ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line-soft);
}
.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* spinning circular mark kept only for the decorative .dotring accent */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.brand .so { color: var(--accent-soft); }

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  position: relative;
  transition: color 0.25s;
}
.main-nav a:hover { color: var(--text); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.main-nav a.is-app { color: var(--accent-soft); }
.main-nav a.is-app:hover { color: var(--accent-bright); }

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

/* nav dropdowns (Services / Tools / Company) — click-open, same pattern
   as the language menu (no hover-triggered menus). Panel items follow the
   site's card language: icon tile + title + one-line description. */
.nav-dd { position: relative; }
.nav-dd summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.25s;
}
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary::marker { content: ""; }
.nav-dd summary .car,
.nav-dd summary svg {
  width: 9px;
  height: 9px;
  flex: none;
  color: var(--faint);
  transition: transform 0.3s var(--ease-out), color 0.25s;
}
.nav-dd summary:hover, .nav-dd[open] summary { color: var(--text); }
.nav-dd summary:hover .car { color: var(--accent-soft); }
.nav-dd[open] summary .car { transform: rotate(180deg); color: var(--accent-soft); }
.nav-dd .menu {
  position: absolute;
  top: calc(100% + 20px);
  left: -14px;
  min-width: 270px;
  max-width: 320px;
  padding: 8px;
  background: rgba(8, 11, 12, 0.92);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  z-index: 210;
  animation: dd-in 0.32s var(--ease-out);
}
/* invisible bridge across the gap between the label and the panel so the
   hover area is contiguous (the panel floats 20px below the summary) */
.nav-dd .menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}
/* hairline accent along the panel top — same gradient language as the kickers */
.nav-dd .menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 126, 143, 0.5), transparent);
}
.main-nav .nav-dd .menu a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 11px;
  transition: background 0.25s;
}
.main-nav .nav-dd .menu a::after { display: none; } /* no nav underline inside the panel */
.main-nav .nav-dd .menu a:hover { background: rgba(255, 255, 255, 0.05); }
.nav-dd .menu .ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(92, 126, 143, 0.1);
  border: 1px solid rgba(92, 126, 143, 0.22);
  color: var(--accent-bright);
  transition: background 0.25s, border-color 0.25s;
}
.nav-dd .menu .ic svg { width: 17px; height: 17px; }
/* lottie icon fills its tile with a little breathing room */
.nav-dd .menu .ic[data-lottie] { padding: 6px; }
.nav-dd .menu .ic[data-lottie] svg { width: 100% !important; height: 100% !important; }
.main-nav .nav-dd .menu a:hover .ic {
  background: rgba(92, 126, 143, 0.18);
  border-color: rgba(92, 126, 143, 0.45);
}
.nav-dd .menu .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dd .menu .tt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  transition: color 0.25s;
}
.main-nav .nav-dd .menu a:hover .tt { color: var(--accent-bright); }
.nav-dd .menu .ds {
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.4;
}
.nav-dd .menu .ext { font-size: 10px; color: var(--faint); }

/* language dropdown — globe button, opens an EN / GR menu on click (no hover effects) */
.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.3s;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary::marker { content: ""; }
.lang-dd summary .globe { width: 15px; height: 15px; color: var(--accent-soft); }
.lang-dd summary .car { width: 9px; height: 9px; color: var(--faint); transition: transform 0.3s var(--ease-out); }
.lang-dd[open] summary { border-color: var(--accent); }
.lang-dd[open] summary .car { transform: rotate(180deg); }
.lang-dd .menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  padding: 6px;
  background: rgba(8, 11, 12, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
  z-index: 210;
  animation: dd-in 0.28s var(--ease-out);
}
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-7px); }
}
.lang-dd .menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  transition: background 0.25s, color 0.25s;
}
.lang-dd .menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.lang-dd .menu a .code { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); }
.lang-dd .menu a.active { color: var(--accent-bright); }
.lang-dd .menu a.active .code { color: var(--accent-soft); }

/* buttons — static position, animated sheen + lift on hover */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-out), background 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.btn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  width: 55%;
  height: 140%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::before {
  animation: sheen 0.8s var(--ease-out) forwards;
}
@keyframes sheen {
  0% { left: -80%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-solid {
  background: #fff;
  color: #000;
}
.btn-solid:hover {
  background: var(--accent-bright);
  box-shadow: 0 8px 38px var(--glow);
}
.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}
.btn-ghost::before {
  background: linear-gradient(90deg, transparent, rgba(212, 221, 226, 0.28), transparent);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
  box-shadow: 0 8px 30px rgba(92, 126, 143, 0.15);
}
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-accent:hover { background: var(--accent-bright); box-shadow: 0 8px 38px var(--glow); }
.btn .arr { transition: transform 0.3s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* burger */
.burger {
  display: none;
  background: none;
  border: 0;
  width: 42px; height: 42px;
  cursor: pointer;
  position: relative;
  z-index: 130;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  margin: 5px auto;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* keep the header (and its burger/close icon) above the open menu overlay */
body.menu-open .site-header {
  z-index: 140;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--header-h) + 26px) 40px 40px;
  gap: 6px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
/* accordion groups mirroring the desktop dropdowns (Services / Solutions / Tools / Company) */
.mobile-menu .mm-group {
  border-bottom: 1px solid var(--line-soft);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s;
}
.mobile-menu.open .mm-group { transform: none; opacity: 1; }
.mobile-menu .mm-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  padding: 15px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu .mm-group summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-group summary .car { color: var(--accent-soft); transition: transform 0.3s var(--ease-out); }
.mobile-menu .mm-group[open] summary .car { transform: rotate(180deg); }
.mobile-menu .mm-links { display: flex; flex-direction: column; padding: 2px 0 14px; }
.mobile-menu .mm-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  padding: 9px 0 9px 16px;
  border-left: 1px solid var(--line-soft);
  transition: color 0.25s;
}
.mobile-menu .mm-links a:hover { color: var(--accent-bright); }
.mobile-menu .mm-sep { height: 16px; flex: none; }
.mobile-menu > a {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s, color 0.25s;
}
.mobile-menu.open > a { transform: none; opacity: 1; }
.mobile-menu a:hover { color: var(--accent-soft); }
.mobile-menu > a.is-app { color: var(--accent-soft); font-size: 15px; border-bottom: 0; }
.mobile-menu .lang-dd { align-self: flex-start; margin-top: 20px; }
.mobile-menu .lang-dd summary { font-size: 13px; padding: 10px 17px; }
.mobile-menu .lang-dd .menu { left: 0; right: auto; }
.mobile-menu .lang-dd .menu a { font-size: 15px; font-weight: 600; letter-spacing: 0; border-bottom: 0; padding: 11px 14px; }

/* ============ hero ============ */
.hero {
  position: relative;
  height: 320vh;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* fixed overlay for the hero → helix dot stream (created by globe.js):
   above all section content so the next section never covers the dots
   mid-scroll, below the header and menus */
#handoff-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 55%, rgba(0,0,0,0.75) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 22%, transparent 80%, #000 100%);
}
.hero-copy {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 980px;
  padding: 0 28px;
  pointer-events: none;
}
.hero-copy .btn, .hero-copy a { pointer-events: auto; }
.kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 26px;
}
/* "distant moon" ring: a thin gradient circle behind the kicker, broken
   where the text line passes through it. Static — no animation. */
.kicker::before,
.kicker::after {
  content: "";
  position: absolute;
  left: 24px; top: 50%;   /* bottom arc starts right below the first letter */
  width: 50px; height: 50px;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  border: 2px dotted rgba(212, 221, 226, 0.8);  /* dots — same motif as the logo mark */
}
/* upper and lower arc aligned on the same circle; the upper one fainter */
.kicker::before { clip-path: inset(0 0 calc(50% + 13px) 0); opacity: 0.3; }
.kicker::after  { clip-path: inset(calc(50% + 13px) 0 0 0); }

h1.display {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.6vw, 76px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
/* serif italic accent inside medium-weight headings (lumigent.io pairing) */
h1.display em, .serif-accent {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  letter-spacing: 0;
  color: var(--accent-em);
}
.hero-sub {
  margin: 26px auto 38px;
  max-width: 560px;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--muted);
}
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* second hero message (appears as dots become currencies) */
.hero-copy-2 {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: 12vh;
  text-align: center;
  padding: 0 28px;
  opacity: 0;
  pointer-events: none;
}
.hero-copy-2 h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.hero-copy-2 p { color: var(--muted); margin-top: 10px; font-size: 17px; }
/* the title de-assembles letter by letter (globe.js splits it):
   words stay unbreakable so line wrapping is untouched */
.hero-copy-2 .tw { display: inline-block; white-space: pre; }
.hero-copy-2 .tc { display: inline-block; will-change: transform, opacity; }

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.scroll-hint .wheel {
  width: 22px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
}
.scroll-hint .wheel::after {
  content: "";
  position: absolute;
  bottom: 7px; left: 50%;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--accent-soft);
  animation: wheel 1.8s var(--ease-out) infinite;
}
/* dot travels upward — matches the direction the page moves on scroll */
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ============ ticker ============ */
.ticker {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
  overflow: hidden;
  padding: 18px 0;
  position: relative;
}
.ticker::before, .ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-elev), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg-elev), transparent); }
.ticker-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.tick {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tick .pair { font-weight: 700; letter-spacing: 0.04em; }
.tick .px { color: var(--muted); }
.tick .up { color: #5fd49a; }
.tick .dn { color: #e8716d; }

/* ============ sections ============ */
section.block { position: relative; padding: 130px 0; }
.section-head { max-width: 760px; margin-bottom: 70px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2.title {
  font-family: var(--font-display);
  font-size: clamp(35px, 5.4vw, 70px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.06;
}
h2.title em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  letter-spacing: 0;
  color: var(--accent-em);
}
.section-head p { color: var(--muted); margin-top: 18px; font-size: 18px; }

/* parallax drift — main.js writes --par so other transforms can compose */
[data-parallax] { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

/* glow orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  opacity: 0.5;
}
.orb-teal { background: rgba(92, 126, 143, 0.16); }
.orb-deep { background: rgba(34, 84, 110, 0.18); }

/* ============ platform / dashboard mock ============ */
/* tighter top: the helix landing zone reaches the viewport while the
   hero's dot stream is still alive, so the hand-off never goes dark */
.platform { overflow: clip; padding-top: 96px; }
/* the orb wash stays dark through the particle hand-off (main.js fades it
   in after the section has fully arrived) — keeps the seam pure black */
.platform .orb { opacity: 0; }
.platform-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.dash {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, #0c1113 0%, #07090a 100%);
  padding: 26px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,255,255,0.02) inset;
  /* parallax (--par, main.js) + springy 3D tilt (--rx/--ry, fx.js) */
  transform: perspective(1100px) translate3d(0, var(--par, 0px), 0)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
/* slow-orbiting highlight on the ticket border */
@property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.dash::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: conic-gradient(from var(--ga, 0deg),
    transparent 0turn, transparent 0.6turn,
    rgba(143, 179, 198, 0.45) 0.72turn,
    rgba(212, 221, 226, 0.75) 0.78turn,
    rgba(143, 179, 198, 0.45) 0.84turn,
    transparent 0.96turn);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: ga-spin 8s linear infinite;
  pointer-events: none;
}
@keyframes ga-spin { to { --ga: 360deg; } }
/* cursor-tracking glare (fx.js drives --gx/--gy/--glare) */
.dash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(212, 221, 226, 0.07), transparent 62%);
  opacity: var(--glare, 0);
  transition: opacity 0.4s;
  pointer-events: none;
}
.pair-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-bright);
  background: rgba(92, 126, 143, 0.12);
  border: 1px solid rgba(92, 126, 143, 0.3);
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.dash-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.dash-top .t { font-weight: 700; font-size: 15px; }
.dash-top .dots { display: flex; gap: 6px; }
.dash-top .dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.dash-top .dots i:first-child { background: var(--accent); }
.rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.rate-row .cur { display: flex; align-items: center; gap: 12px; }
.rate-row .sym {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 17px;
  background: rgba(92, 126, 143, 0.12);
  color: var(--accent-bright);
  border: 1px solid rgba(92, 126, 143, 0.25);
}
.rate-row .lbl { font-size: 12px; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.rate-row .amt { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-row .chg { font-size: 13px; font-weight: 700; }
.chg.up { color: #5fd49a; }
.chg.dn { color: #e8716d; }
.dash-meta {
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font-size: 12.5px;
  padding-top: 14px;
}
.dash-meta b { color: var(--accent-soft); font-weight: 700; }

/* ---- interactive converter ---- */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5fd49a;
}
.live-badge i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5fd49a;
  box-shadow: 0 0 10px #5fd49a;
  animation: pulse 2.2s infinite;
}
.conv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 20px;
  transition: border-color 0.3s, background 0.3s;
}
.conv-row:focus-within {
  border-color: rgba(92, 126, 143, 0.45);
  background: rgba(92, 126, 143, 0.04);
}
.conv-cur { display: flex; align-items: center; gap: 12px; flex: none; }
.conv-meta { display: flex; flex-direction: column; gap: 3px; }
.conv-meta .lbl { font-size: 11.5px; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.conv-ccy { display: inline-flex; align-items: baseline; gap: 7px; font-size: 16px; font-weight: 700; }
.conv-ccy .sym {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
.conv-input, .conv-output {
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.conv-output { color: var(--accent-bright); transition: text-shadow 0.4s; }
.conv-output.flash { text-shadow: 0 0 24px rgba(212, 221, 226, 0.6); }
.conv-ccy .sym { transition: transform 0.45s var(--ease-out); }
.dash.swapping .conv-ccy .sym { transform: rotateY(180deg); }

.rate-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 2px;
}
.rate-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.swap-btn {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--accent-bright);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.swap-btn svg { width: 19px; height: 19px; }
.swap-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(92, 126, 143, 0.3);
  background: rgba(92, 126, 143, 0.08);
}
.swap-btn.spun { transform: rotate(180deg); }
.rate-chip {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.rate-chip b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.rate-chip.bump b { color: var(--accent-bright); }
.rate-chip .chg { font-size: 12.5px; font-weight: 700; }

/* static deal amount (replaces the editable input) */
.conv-amount {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}

/* demo supplier line (the Chinese beneficiary the payment routes to) */
.conv-supplier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.conv-supplier .lbl {
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
}
.conv-supplier .sup-tx { text-align: right; min-width: 0; }
.conv-supplier .sup-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.conv-supplier .sup-loc { display: block; font-size: 12px; color: var(--accent-soft); margin-top: 1px; }

/* EUR/USD chart header — pair label + live % so the chart is unmistakable */
.spark-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.spark-head .spark-pair {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.spark-head .spark-sub { color: var(--faint); font-weight: 600; letter-spacing: 0.04em; }
.spark-head .chg { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spark {
  display: block;
  width: 100%;
  height: 58px;
  margin-top: 6px;
}

/* bottom row: note on the left, Convert action on the right */
.dash-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.dash-note { color: var(--faint); font-size: 12.5px; }
.dash-note b { color: var(--accent-soft); font-weight: 700; }
#conv-convert { padding: 11px 24px; font-size: 14px; }
#conv-convert.busy { opacity: 0.7; pointer-events: none; }

/* deal execution trail — Quote → Convert → Supplier paid */
.deal-trail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.deal-trail .step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  transition: color 0.4s;
}
.deal-trail .step i {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.deal-trail .step.lit { color: var(--accent-bright); }
.deal-trail .step.lit i {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  box-shadow: 0 0 12px rgba(144, 158, 174, 0.8);
}
.deal-trail .step:last-child.lit { color: #5fd49a; }
.deal-trail .step:last-child.lit i {
  background: #5fd49a;
  border-color: #5fd49a;
  box-shadow: 0 0 12px rgba(95, 212, 154, 0.7);
}
.deal-trail .bar {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  overflow: hidden;
}
.deal-trail .bar b {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-bright));
  transition: width 0.5s var(--ease-out);
}

/* floating cards */
.float-card {
  position: absolute;
  border: 1px solid var(--line);
  background: rgba(10, 14, 15, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  will-change: transform;
}
.float-card .fc-k { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.float-card .fc-v { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.float-card .fc-v small { font-size: 13px; color: var(--accent-soft); font-weight: 700; }
/* supplier-payment chip: a confirmation toast that pops up in flow just
   below the card (so it can never overlap the disclaimer that follows)
   once Convert plays through to "Supplier paid" */
.fc-1 {
  position: static;
  margin: 14px 0 0;
  width: fit-content;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.fc-1.show { opacity: 1; transform: none; }
.fc-2 { bottom: -52px; left: -26px; }
.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #5fd49a;
}
.fc-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5fd49a;
  box-shadow: 0 0 10px #5fd49a;
  animation: pulse 2.2s infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.platform-points { position: relative; display: flex; flex-direction: column; gap: 0; }
/* desktop: the glyph Earth sits above, the 01/02 points below it —
   only when the Earth canvas is actually present (homepages) */
@media (min-width: 1025px) {
  .platform-points:has(.dna-wrap) { padding-top: clamp(300px, 38vh, 440px); }
}
/* stacked layout: reserve space so the glyph Earth sits above the 01/02 text
   instead of drawing behind it (the Earth anchors to the top of a tall box) */
@media (max-width: 1024px) {
  .platform-points:has(.dna-wrap) { padding-top: clamp(230px, 60vw, 340px); }
}

/* DNA helix backdrop — sits behind the platform points text. Extends
   upward so the helix top meets the dot stream arriving from the hero. */
.dna-wrap {
  position: absolute;
  inset: -120px -48px -80px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  /* light top fade only — the helix top is the dot stream's landing zone
     and must stay visible while it assembles */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 86%, transparent);
}
#dna-canvas { width: 100%; height: 100%; display: block; }
.p-point { position: relative; z-index: 1; }
.p-point {
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.p-point:first-child { border-top: 1px solid var(--line-soft); }
.p-point .n {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  color: var(--accent-em);
  font-size: 20px;
  line-height: 1.45;
  min-width: 34px;
}
.p-point h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.p-point p { color: var(--muted); font-size: 15.5px; margin-top: 5px; }

/* ============ features ============ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* capabilities: screen "locks" and the cards ride a horizontal carousel;
   once the last card is in view the section unpins to the next one */
.features-pin { padding: 0; height: 280vh; }
.features-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.features-pin .section-head { margin-bottom: 54px; }
.features-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 0 max(28px, calc((100vw - 1200px) / 2 + 28px));
  will-change: transform;
}
.features-track .feature { width: min(400px, 78vw); flex: none; }
@media (max-width: 1024px) {
  /* same pinned scrub as desktop, tuned spacing for touch widths */
  .features-pin .section-head { margin-bottom: 40px; }
  .features-track { padding: 0 20px; }
}
@media (max-width: 640px) {
  .features-pin .section-head { margin-bottom: 30px; }
  .features-track .feature { width: min(400px, 82vw); padding: 26px 20px; }
}
.feature {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 34px 28px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s, background 0.45s;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(92, 126, 143, 0.09), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.feature:hover { transform: translateY(-6px); border-color: rgba(92, 126, 143, 0.35); background: var(--surface-hover); }
.feature:hover::before { opacity: 1; }
.feature .ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(92, 126, 143, 0.1);
  border: 1px solid rgba(92, 126, 143, 0.22);
  color: var(--accent-bright);
  margin-bottom: 22px;
}
.feature .ico svg { width: 24px; height: 24px; }
/* Lottie icon hosts: the animation fills the tile with a little air */
.feature .ico[data-lottie] { padding: 7px; }
.feature .ico[data-lottie] svg { width: 100%; height: 100%; display: block; }
.feature h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 9px; }
.feature p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.feature .go {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-bright);
}
.feature .go .arr { transition: transform 0.3s var(--ease-out); }
.feature .go:hover .arr { transform: translateX(5px); }

/* ============ stats band ============ */
.stats-band {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 56px 20px;
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.stat:first-child { border-left: 0; }
.stat .v {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat .v em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  letter-spacing: 0;
  color: var(--accent-em);
}
.stat .k { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* ============ market insights (powered by FXPulse) ============ */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.insight-card {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 20px 20px 14px;
  background: var(--surface);
  transition: transform 0.45s var(--ease-out), border-color 0.45s;
}
.insight-card:hover { transform: translateY(-4px); border-color: rgba(92, 126, 143, 0.35); }
.ins-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ins-top .pair { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.ins-top .chg { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ins-rate {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.ins-spark { display: block; width: 100%; height: 54px; margin-top: 10px; }
.fxpulse-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-bright);
  transition: color 0.3s;
}
.fxpulse-cta img { border-radius: 4px; }
.fxpulse-cta .arr { transition: transform 0.3s var(--ease-out); }
.fxpulse-cta:hover { color: #fb923c; }
.fxpulse-cta:hover .arr { transform: translateX(5px); }

/* ============ apps strip ============ */
.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.app-card {
  position: relative;
  display: block;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 40px 36px;
  background: linear-gradient(150deg, rgba(92,126,143,0.06), transparent 45%), var(--surface);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), border-color 0.45s;
}
.app-card:hover { transform: translateY(-6px); border-color: rgba(92, 126, 143, 0.4); }
.app-card .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  border: 1px solid rgba(92, 126, 143, 0.35);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.app-card h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 10px; }
.app-card p { color: var(--muted); font-size: 15.5px; max-width: 400px; }
.app-card .go {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-bright);
}
.app-card .go .arr { transition: transform 0.3s var(--ease-out); }
.app-card:hover .go .arr { transform: translateX(5px); }

/* ============ CTA ============ */
.cta {
  position: relative;
  text-align: center;
  padding: 170px 0;
  overflow: clip;
}
.cta .ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 760px; height: 760px;
  border-radius: 50%;
  border: 1px dashed rgba(92, 126, 143, 0.18);
  animation: spin-slow 80s linear infinite reverse;
  pointer-events: none;
}
.cta .ring.r2 { width: 560px; height: 560px; animation-duration: 60s; animation-direction: normal; border-color: rgba(255,255,255,0.07); }

/* reusable ring pair — the CTA's dashed circles, for breaking up long black
   stretches elsewhere; position with inline left/top (% of the section) */
.bg-rings { position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none; }
.bg-rings i {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: block;
  width: 760px; height: 760px;
  border-radius: 50%;
  border: 1px dashed rgba(92, 126, 143, 0.14);
  animation: spin-slow 90s linear infinite reverse;
}
.bg-rings i + i { width: 560px; height: 560px; animation-duration: 65s; animation-direction: normal; border-color: rgba(255, 255, 255, 0.05); }
@media (max-width: 640px) {
  .bg-rings i { width: 480px; height: 480px; }
  .bg-rings i + i { width: 340px; height: 340px; }
}
.cta h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.cta h2 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  letter-spacing: 0;
  color: var(--accent-em);
}
.cta p { color: var(--muted); margin: 22px auto 40px; max-width: 460px; }

/* ============ footer ============ */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
  padding: 80px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-tagline {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
}
.footer-brand p { color: var(--muted); font-size: 14.5px; margin-top: 12px; max-width: 300px; }
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.socials a:hover { color: var(--accent-bright); border-color: var(--accent); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }
.f-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 20px;
}
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.f-col a { color: var(--muted); font-size: 15px; transition: color 0.25s; }
.f-col a:hover { color: var(--accent-bright); }
/* FXPulse (fxpulse.ai) — orange brand */
.fxpulse-link { display: inline-flex; align-items: center; gap: 8px; }
.fxpulse-link img { border-radius: 4px; }
.fxpulse-link:hover { color: #fb923c !important; }
.f-col .contact-line { color: var(--muted); font-size: 14.5px; }
.f-col .contact-line b { color: var(--text); font-weight: 500; }
.legal {
  padding-top: 36px;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.7;
}
.legal .row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
}
.legal .legal-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legal .legal-links .sep { color: var(--faint); }
.legal .legal-links a { color: var(--muted); transition: color 0.25s; }
.legal .legal-links a:hover { color: var(--accent-bright); }
.legal .made-by a { color: var(--text); font-weight: 600; transition: color 0.25s; }
.legal .made-by a:hover { color: var(--accent-bright); }

/* ============ brand wordmark (traced-vector SVG, static, no animation) ============ */
.brand-wordmark { display: block; width: auto; }
.site-header .brand-wordmark { height: 23px; }
.site-footer .brand-wordmark { height: 20px; opacity: 0.92; }
@media (max-width: 640px) { .site-header .brand-wordmark { height: 20px; } }

/* ============ in-house tools (BIC Search / Payment Converter) ============ */
.tool-hero {
  position: relative;
  padding: calc(var(--header-h) + 70px) 0 90px;
  overflow: clip;
  min-height: 70vh;
}
.tool-stage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.tool-head { max-width: 760px; margin-bottom: 44px; }
.tool-h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-top: 16px;
}
.tool-h1 em { font-family: var(--font-display); font-style: normal; font-weight: 350; color: var(--accent-em); }
.tool-lede { color: var(--muted); font-size: 18px; max-width: 540px; margin-top: 18px; }

.tool-tabs {
  display: inline-flex;
  padding: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  margin: 30px 0 22px;
}
.tool-tab {
  border: 0;
  background: none;
  color: var(--faint);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.tool-tab.on { background: var(--surface-hover); color: var(--text); }
.tool-tab:not(.on):hover { color: var(--muted); }

.tool-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.tool-input-row { display: flex; gap: 12px; }
.tool-input-row input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  letter-spacing: 0.04em;
  padding: 15px 18px;
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.tool-input-row input:focus {
  border-color: var(--accent);
  background: rgba(92, 126, 143, 0.05);
  box-shadow: 0 0 0 4px rgba(92, 126, 143, 0.1);
}
.tool-input-row .btn { flex: none; }
.tool-input-row .btn.busy { opacity: 0.6; pointer-events: none; }
.tool-hint { margin-top: 12px; font-size: 13px; color: var(--faint); min-height: 18px; }
.tool-hint.ok { color: #5fd49a; }
.tool-hint.err { color: #e8716d; }

.tool-result { margin-top: 26px; }
.tool-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, #0c1113 0%, #07090a 100%);
  padding: 26px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  animation: dd-in 0.4s var(--ease-out);
}
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.rc-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); display: block; margin-bottom: 6px; }
.rc-name { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool-field {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-soft);
}
.tool-field:first-child, .rc-grid .tool-field:nth-child(2) { grid-column: auto; }
.tool-field .k { display: block; font-size: 11.5px; color: var(--faint); letter-spacing: 0.06em; margin-bottom: 5px; }
.tool-field .v { font-size: 16px; font-weight: 600; color: var(--text); word-break: break-word; }
.tool-err { border-color: rgba(232, 113, 109, 0.3); }
.tool-err .eh { color: #e8716d; font-weight: 700; margin-bottom: 8px; }
.tool-err p { color: var(--muted); font-size: 14.5px; }
.tool-empty { text-align: center; border-style: dashed; border-color: var(--line-soft); background: none; }
.tool-empty p { color: var(--muted); }
.tool-empty span { color: var(--faint); font-size: 13.5px; display: block; margin-top: 6px; }
.tool-skel span { display: block; height: 14px; border-radius: 6px; background: var(--surface-hover); margin-bottom: 12px; animation: pulse 1.4s infinite; }
.tool-skel span:nth-child(1) { width: 45%; } .tool-skel span:nth-child(2) { width: 80%; } .tool-skel span:nth-child(3) { width: 60%; margin-bottom: 0; }

.tool-visual { position: relative; height: 460px; }
#bic-globe, #vd-globe { width: 100%; height: 100%; display: block; }

/* converter */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.cv-tabs { display: inline-flex; padding: 5px; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: 13px; margin-bottom: 18px; }
.cv-tab { border: 0; background: none; color: var(--faint); font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: background 0.3s, color 0.3s; }
.cv-tab.on { background: var(--surface-hover); color: var(--text); }
.cv-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  min-height: 240px;
  padding: 30px;
  border: 1.5px dashed var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--accent-soft);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.cv-drop:hover, .cv-drop:focus, .cv-drop.drag { border-color: var(--accent); background: rgba(92, 126, 143, 0.06); outline: none; }
.cv-drop.has-file { border-style: solid; border-color: rgba(95, 212, 154, 0.4); }
.cv-drop-label { color: var(--text); font-weight: 600; font-size: 15.5px; }
.cv-drop-sub { color: var(--faint); font-size: 12.5px; }
.cv-textarea {
  width: 100%; min-height: 240px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 16px;
  outline: none;
  resize: vertical;
}
.cv-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(92, 126, 143, 0.1); }
#cv-run { margin-top: 18px; }
#cv-run:disabled { opacity: 0.45; pointer-events: none; }
.cv-mt {
  background: #05070a;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 18px;
  margin-top: 18px;
  color: var(--accent-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.cv-warn { margin-top: 14px; } .cv-warn p { color: #d9b25f; font-size: 13px; }
.cv-errlist .eh { color: #e8716d; font-weight: 700; margin-bottom: 8px; }
.cv-errlist p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.cv-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.cv-actions .btn { padding: 11px 20px; font-size: 14px; }

@media (max-width: 1024px) {
  .tool-stage { grid-template-columns: 1fr; gap: 30px; }
  .tool-visual { height: 320px; order: -1; }
  .tool-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============ inner pages ============ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 110px) 0 80px;
  overflow: clip;
}
.page-hero .kicker { margin-bottom: 20px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.page-hero h1 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 350;
  letter-spacing: 0;
  color: var(--accent-em);
}
.page-hero .lede { color: var(--muted); font-size: 19px; max-width: 680px; margin-top: 24px; }
.page-hero .dotring {
  position: absolute;
  top: -160px;
  right: -160px;
  width: 480px;
  opacity: 0.16;
  animation: spin-slow 70s linear infinite;
  pointer-events: none;
}

.prose { max-width: 760px; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 52px 0 16px;
}
.prose h2 em { font-family: var(--font-display); font-style: normal; font-weight: 350; letter-spacing: 0; color: var(--accent-em); }
.prose h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 30px 0 10px; }
.prose p { color: var(--muted); margin-bottom: 16px; }
.prose b, .prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { color: var(--muted); padding-left: 24px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.prose li::marker { color: var(--accent-soft); }
.prose a { color: var(--accent-bright); border-bottom: 1px solid rgba(92,126,143,0.35); }

.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0 10px; }

/* FAQ accordion */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:first-child { border-top: 1px solid var(--line-soft); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  padding: 28px 6px;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: color 0.25s;
}
.faq-q:hover { color: var(--accent-bright); }
.faq-q .ix {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s;
}
.faq-q .ix::before, .faq-q .ix::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.faq-q .ix::before { width: 12px; height: 1.5px; }
.faq-q .ix::after { width: 1.5px; height: 12px; }
.faq-item.open .faq-q { color: var(--accent-bright); }
.faq-item.open .faq-q .ix { transform: rotate(135deg); border-color: var(--accent); background: rgba(92,126,143,0.1); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-out);
}
.faq-a-inner { padding: 0 6px 30px; color: var(--muted); max-width: 700px; }
.faq-a-inner p { margin-bottom: 12px; }
.faq-a-inner ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.faq-a-inner li::marker { color: var(--accent-soft); }

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}
.contact-info p { color: var(--muted); margin-bottom: 18px; }
.contact-card {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  padding: 22px 24px;
  margin-bottom: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.contact-card:hover { border-color: rgba(92,126,143,0.35); transform: translateY(-3px); }
.contact-card .ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(92,126,143,0.1);
  border: 1px solid rgba(92,126,143,0.22);
  color: var(--accent-bright);
}
.contact-card .ico svg { width: 20px; height: 20px; }
.contact-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.contact-card p, .contact-card a.val { color: var(--muted); font-size: 14.5px; margin: 0; }
.contact-card a.val:hover { color: var(--accent-bright); }

.form-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, #0b0f11, #060808);
  padding: 38px;
}
.form-card h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.field input, .field textarea {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  background: rgba(92, 126, 143, 0.05);
  box-shadow: 0 0 0 4px rgba(92, 126, 143, 0.1);
}
.form-note { color: var(--faint); font-size: 12.5px; margin-top: 14px; }
.form-note a { color: var(--accent-bright); }
/* selects styled like the inputs, with a custom caret */
.field select {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  padding: 14px 40px 14px 16px;
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236a6f73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.field select:focus {
  border-color: var(--accent);
  background-color: rgba(92, 126, 143, 0.05);
  box-shadow: 0 0 0 4px rgba(92, 126, 143, 0.1);
}
.field select:invalid { color: var(--faint); }
.field select option { background: #0b0f11; color: var(--text); }
/* honeypot: visually removed, still in the DOM for bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #e8716d; font-size: 13.5px; margin-top: 14px; }
.form-error a { color: var(--accent-bright); }
#form-submit { margin-top: 8px; }
#form-submit.busy { opacity: 0.6; pointer-events: none; }
.form-success { text-align: center; padding: 30px 10px; }
.form-success .fs-ico {
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: #5fd49a;
  background: rgba(95, 212, 154, 0.1);
  border: 1px solid rgba(95, 212, 154, 0.35);
}
.form-success h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; }
.form-success p { color: var(--muted); font-size: 15px; max-width: 380px; margin: 0 auto; }

/* ============ cookie notice (essential only) ============ */
.cookie-note {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 300;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(8, 11, 12, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.cookie-note.in { opacity: 1; transform: none; }
.cookie-note .ck-top { display: flex; align-items: flex-start; gap: 10px; }
.cookie-note .ck-ico { color: var(--accent-soft); flex: none; margin-top: 2px; }
.cookie-note .ck-ico svg { width: 18px; height: 18px; display: block; }
.cookie-note p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.cookie-note .ck-row { display: flex; align-items: center; gap: 16px; }
.cookie-note .ck-row a { font-size: 12.5px; font-weight: 500; color: var(--accent-bright); }
.cookie-note .ck-ok {
  margin-left: auto;
  background: var(--accent-bright);
  color: var(--accent-ink);
  border: 0;
  border-radius: 9px;
  padding: 8px 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s;
}
.cookie-note .ck-ok:hover { background: var(--accent-bright); }

/* ============ Greek typography compensation ============
   Manrope covers Greek natively (same font + weight as English),
   but Greek words run longer, so headings are scaled down to match
   the English visual size. */
html[lang="el"] .hero-copy-2 h2 { font-size: clamp(22px, 3vw, 36px); }
html[lang="el"] h2.title { font-size: clamp(28px, 4.2vw, 54px); }
html[lang="el"] .cta h2 { font-size: clamp(32px, 4.8vw, 62px); }
html[lang="el"] .page-hero h1 { font-size: clamp(31px, 4.4vw, 56px); }
html[lang="el"] .prose h2 { font-size: 25px; }
/* Accent words are now Manrope italic (pewter) in both languages —
   no Greek-specific override needed. */

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* directional variants */
.reveal.reveal-left { transform: translate3d(-72px, 0, 0); }
.reveal.reveal-right { transform: translate3d(72px, 0, 0); }
.reveal.in { opacity: 1; transform: none; }

/* scrubbed entrance (platform section) — opacity/transform are driven
   1:1 by scroll in main.js, continuing the hero hand-off; no transition
   here on purpose so it tracks the scroll exactly like the hero copy */
[data-enter] { opacity: 0; will-change: transform, opacity; }

/* responsive */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-actions .btn-ghost { display: none; }
  .burger { display: block; }
  .platform-stage { grid-template-columns: 1fr; gap: 80px; }
  /* stacked layout: the Earth stops bleeding upward over the text above it
     (the toast chip is already in flow at every width) */
  .dna-wrap { inset: -40px -32px -60px; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .insight-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line-soft); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section.block { padding: 90px 0; }
  .header-actions .btn { padding: 10px 18px; font-size: 14px; }
  .lang-dd summary { padding: 8px 12px; }
  .hero-vignette {
    background:
      radial-gradient(ellipse 90% 42% at 50% 47%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.3) 55%, transparent 75%),
      radial-gradient(ellipse 80% 60% at 50% 42%, transparent 55%, rgba(0,0,0,0.8) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.45), transparent 22%, transparent 80%, #000 100%);
  }
  .features-grid, .apps-grid, .offer-grid, .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .platform-stage { gap: 64px; }
  .dash { padding: 22px 18px; }
  .fc-2 { bottom: -46px; left: -8px; }
  .deal-trail { gap: 8px; }
  .deal-trail .step { font-size: 10px; letter-spacing: 0.06em; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-card { padding: 26px 20px; }
  .hero { height: 280vh; }
  /* 65% wide, anchored left — keeps the Sona bubble (bottom-right) clear */
  .cookie-note { left: 12px; right: auto; width: 65%; bottom: 12px; max-width: none; }
}

@media (max-width: 520px) {
  /* logo + language pill + burger don't fit alongside the CTA on phones —
     without this the burger lands off-screen and the menu can't open.
     "Open an Account" stays available inside the menu itself. */
  .header-actions .btn-solid { display: none; }
}

/* value date calculator */
.tool-stage.vd-stage { align-items: start; }
@media (min-width: 1025px) {
  .vd-stage .tool-visual { position: sticky; top: calc(var(--header-h) + 30px); }
}
.vd-form { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.vd-form .tool-tabs { flex-wrap: wrap; }
.vd-field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 8px; }
.vd-field select, .vd-field input[type="date"], .vd-form .vd-field input[type="text"] {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; font-family: inherit;
  outline: none; transition: border-color 0.2s;
  color-scheme: dark;
}
.vd-field select:focus, .vd-field input[type="date"]:focus, .vd-form .vd-field input[type="text"]:focus { border-color: var(--accent); }
.vd-field .tool-hint { margin-top: 8px; min-height: 0; }
.vd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.vd-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.vd-big { font-size: 20px !important; color: var(--accent-bright) !important; }
.vd-skips-h { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); }
.vd-skips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vd-skips li { font-size: 13.5px; color: var(--muted); padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft); }
.vd-skips li b { color: var(--text); font-weight: 600; }
.vd-note { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--faint); }
.tool-card .tool-field + .tool-field { margin-top: 10px; }

/* iso 20022 checker */
.ck-sum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ck-chip { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ck-chip.fail { color: #e8716d; border-color: rgba(232, 113, 109, 0.35); }
.ck-chip.warn { color: #e8b46d; border-color: rgba(232, 180, 109, 0.35); }
.ck-chip.ok { color: #5fd49a; border-color: rgba(95, 212, 154, 0.3); }
.ck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-height: 480px; overflow-y: auto; }
.ck-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); padding: 9px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft); }
.ck-item .ck-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.ck-item.fail .ck-dot { background: #e8716d; }
.ck-item.warn .ck-dot { background: #e8b46d; }
.ck-item.ok .ck-dot { background: #5fd49a; }
.ck-item.fail { border-color: rgba(232, 113, 109, 0.22); }

/* purpose code lookup */
.pc-list { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; max-height: 520px; overflow-y: auto; }
.pc-row { display: flex; gap: 14px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pc-row:hover { border-color: var(--accent); background: var(--surface-hover); }
.pc-row.copied { border-color: #5fd49a; }
.pc-row code { flex: 0 0 52px; font-weight: 700; color: var(--accent-bright); font-size: 13.5px; letter-spacing: 0.04em; }
.pc-row b { display: block; font-size: 14px; color: var(--text); font-weight: 600; }
.pc-row span { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }

/* address builder */
.adr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.adr-grid .vd-field input[type="text"] {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line);
  color: var(--text); font-size: 14.5px; font-family: inherit; outline: none; transition: border-color 0.2s;
}
.adr-grid .vd-field input[type="text"]:focus { border-color: var(--accent); }
.code-out { margin-top: 16px; padding: 18px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-soft); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.6; color: var(--accent-bright); white-space: pre; overflow-x: auto; min-height: 60px; }

@media (max-width: 720px) {
  .vd-row2, .adr-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  [data-enter] { opacity: 1 !important; transform: none !important; }
}

/* ============ "Sona" chat widget ============ */
.ps-chat { position: fixed; right: 24px; bottom: 24px; z-index: 400; font-family: var(--font-sans); display: flex; align-items: center; gap: 12px; }

/* "Ask Sona" — bare typewriter text beside the bubble; clicking opens the chat */
.ps-chat-label {
  border: none;
  background: none;
  color: var(--accent-bright);
  font-family: var(--font-sans);
  font-size: 14.5px;
  letter-spacing: -0.01em;
  padding: 8px 2px;
  cursor: pointer;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  transition: opacity 0.45s, color 0.3s;
}
.ps-chat-label:hover { color: #fff; }
.ps-chat-label.ps-label-wait { opacity: 0; pointer-events: none; }
.ps-open .ps-chat-label { opacity: 0; pointer-events: none; }
/* blinking caret while the label types itself out */
.ps-chat-label.ps-label-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--accent-bright);
  animation: ps-caret 0.75s steps(1) infinite;
}
@keyframes ps-caret { 50% { opacity: 0; } }

.ps-chat-launcher {
  position: relative;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 30% 20%, rgba(92, 126, 143, 0.3), rgba(10, 12, 14, 0.95) 60%);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 26px var(--glow);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s;
}
/* attention ring — a soft radar ping while the chat is closed */
.ps-chat-launcher::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  pointer-events: none;
  animation: ps-ping 2.8s ease-out infinite;
}
.ps-open .ps-chat-launcher::after { animation: none; }
@keyframes ps-ping {
  0% { box-shadow: 0 0 0 0 rgba(92, 126, 143, 0.5); }
  65% { box-shadow: 0 0 0 20px rgba(92, 126, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 126, 143, 0); }
}
.ps-chat-launcher:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 34px var(--glow); }
/* the astronaut: bobs while home; flies out up-left when the chat opens,
   and flies back in when it closes */
.ps-chat-launcher img {
  width: 48px; height: auto;
  animation: ps-return 0.5s var(--ease-out), ps-bob 4.5s ease-in-out 0.5s infinite;
}
.ps-open .ps-chat-launcher img { animation: ps-fly-out 0.45s var(--ease-out) forwards; }
.ps-open .ps-chat-launcher { border-color: var(--accent); }

@keyframes ps-bob {
  0%, 100% { transform: translateY(2px) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}
@keyframes ps-fly-out {
  to { opacity: 0; transform: translate(-34px, -58px) scale(0.3) rotate(-14deg); }
}
@keyframes ps-return {
  from { opacity: 0; transform: translate(-34px, -58px) scale(0.3) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}

/* "energy core" pulsing inside the empty bubble while Sona is away */
.ps-orb {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 35% 35%, rgba(212, 221, 226, 0.95), rgba(92, 126, 143, 0.55) 55%, rgba(92, 126, 143, 0) 78%);
  filter: blur(4px);
}
.ps-orb1 { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.ps-orb2 { width: 46px; height: 46px; margin: -23px 0 0 -23px; filter: blur(7px); }
.ps-orb3 { width: 22px; height: 22px; margin: -11px 0 0 -11px; filter: blur(2px); }
.ps-open .ps-orb1 { animation: ps-energy 2.2s ease-in-out 0.3s infinite; }
.ps-open .ps-orb2 { animation: ps-energy 2.2s ease-in-out -0.7s infinite; }
.ps-open .ps-orb3 { animation: ps-energy 1.6s ease-in-out -1.1s infinite; }
@keyframes ps-energy {
  0%, 100% { opacity: 0.35; transform: scale(0.7) translate(0, 0); }
  35% { opacity: 0.95; transform: scale(1.12) translate(2px, -2px); }
  70% { opacity: 0.6; transform: scale(0.9) translate(-2px, 1px); }
}

.ps-chat-panel {
  position: fixed;
  right: 24px; bottom: 116px;
  width: 376px;
  max-width: calc(100vw - 32px);
  height: min(600px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: rgba(8, 10, 12, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  animation: ps-in 0.35s var(--ease-out);
}
@keyframes ps-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.ps-chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(92, 126, 143, 0.12), transparent);
}
/* Sona arrives in the header from the direction of the bubble (bottom-right) */
.ps-chat-avatar {
  width: 46px; height: auto;
  animation: ps-arrive 0.55s var(--ease-out), ps-bob 4.5s ease-in-out 0.55s infinite;
}
@keyframes ps-arrive {
  from { opacity: 0.3; transform: translate(300px, 520px) scale(1.35) rotate(10deg); }
  to { opacity: 1; transform: none; }
}
.ps-chat-head-txt { flex: 1; min-width: 0; }
.ps-chat-name { font-weight: 600; letter-spacing: -0.01em; font-size: 17px; }
.ps-chat-sub { color: var(--muted); font-size: 12.5px; }
.ps-chat-close {
  background: none; border: none; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px;
  transition: color 0.25s;
}
.ps-chat-close:hover { color: var(--text); }

.ps-chat-body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }

.ps-msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.ps-msg p + p { margin-top: 8px; }
.ps-msg-assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; color: var(--text); }
.ps-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }

.ps-typing { display: flex; gap: 5px; padding: 13px 15px; }
.ps-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ps-dot 1.2s ease-in-out infinite; }
.ps-typing span:nth-child(2) { animation-delay: 0.15s; }
.ps-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ps-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ps-chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 14px 4px; }
.ps-chat-chips.ps-hidden { display: none; }
.ps-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent-bright);
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.ps-chip:hover { background: var(--surface-hover); border-color: var(--accent); transform: translateY(-1px); }

.ps-chat-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.ps-chat-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.25s;
}
.ps-chat-input:focus { border-color: var(--accent); }
.ps-chat-input::placeholder { color: var(--faint); }
.ps-chat-send {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.25s, transform 0.25s;
}
.ps-chat-send:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ps-chat-send:disabled { opacity: 0.45; cursor: default; transform: none; }

.ps-chat-note { padding: 7px 16px 11px; color: var(--faint); font-size: 10.5px; line-height: 1.45; border-top: 1px solid transparent; }

@media (max-width: 480px) {
  .ps-chat { right: 16px; bottom: 16px; }
  .ps-chat-panel { right: 16px; left: 16px; width: auto; bottom: 106px; height: min(560px, calc(100vh - 120px)); }
}

.ps-msg .ps-chat-link { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); transition: color 0.2s; }
.ps-msg-assistant .ps-chat-link:hover { color: #fff; }
.ps-msg-user .ps-chat-link { color: var(--accent-ink); }

/* Sona "thinking" clip — swaps in for the header avatar while answering */
.ps-avatar-video { width: 50px; height: 57px; object-fit: cover; border-radius: 14px; background: #000; }
.ps-chat-avatar.ps-settled { animation: ps-bob 4.5s ease-in-out infinite; }