/* ============================================================
   GPO — Global Payment Operator
   PREMIUM Fintech Design System 2026
   $100M visual identity — Stripe / Revolut / Linear tier
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Palette */
  --navy-900: #050D1A;
  --navy-800: #0A1628;
  --navy-700: #0D2137;
  --navy-600: #132D4A;
  --navy-500: #1B3A5C;
  --navy-400: #243F5C;

  --cyan-500: #00D4AA;
  --cyan-400: #00E8BC;
  --cyan-300: #33FFD4;
  --cyan-600: #00B894;

  --white: #FFFFFF;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-04: rgba(255, 255, 255, 0.04);

  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #A8B8CB;
  --slate-500: #7B8DA3;

  --red-500: #ff7b7b;
  --red-bg: rgba(255, 100, 100, 0.10);
  --red-border: rgba(255, 100, 100, 0.08);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tracking-tight: -0.025em;
  --tracking-tighter: -0.04em;
  --tracking-hero: -0.05em;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-reveal: 1000ms;

  /* Layout */
  --container-max: 1240px;
  --container-padding: 24px;
  --header-height: 72px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 30px rgba(0, 212, 170, 0.15);

  /* Glass */
  --glass-bg: rgba(15, 32, 53, 0.82);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: 24px;

  /* Cyan utilities (used 60+ times across components) */
  --cyan-bg-subtle: rgba(0, 212, 170, 0.10);
  --cyan-border-light: rgba(0, 212, 170, 0.10);
  --cyan-hover-border: rgba(0, 212, 170, 0.12);
  --cyan-hover-glow: rgba(0, 212, 170, 0.25);

  /* Blog tag category tokens */
  --tag-tech-bg: rgba(99, 102, 241, 0.12);
  --tag-tech-color: #818CF8;
  --tag-banks-bg: rgba(251, 191, 36, 0.12);
  --tag-banks-color: #FBBF24;
  --tag-compliance-bg: rgba(244, 114, 182, 0.12);
  --tag-compliance-color: #F472B6;
  --tag-analytics-bg: rgba(96, 165, 250, 0.12);
  --tag-analytics-color: #60A5FA;

  /* Decorative orb tokens */
  --orb-blue: rgba(0, 100, 200, 0.05);
  --orb-purple: rgba(100, 0, 200, 0.04);

  /* Mobile spacing system */
  --section-py: 120px;
  --header-mb: 72px;
  --card-py: 32px;
  --card-px: 28px;
  --card-gap: 24px;
  --cta-py: 140px;
}

/* ---------- UTILITY CLASSES ---------- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.7;
  color: var(--white-90);
  background: var(--navy-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: pageEntrance 0.8s var(--ease-out-expo) both;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

::selection {
  background: rgba(0, 212, 170, 0.3);
  color: var(--white);
}

/* ---------- NOISE OVERLAY ---------- */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ---------- GRADIENT TEXT ---------- */
.text-gradient {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-300), var(--cyan-500));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- CONTAINER ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
              transform var(--duration-reveal) var(--ease-out-expo);
  animation-fill-mode: both;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HEADER — Glassmorphism sticky
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(5, 13, 26, 0.6);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
  transition: all var(--duration-base) ease;
}

.header.scrolled {
  background: rgba(5, 13, 26, 0.92);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4),
              0 1px 0 rgba(0, 212, 170, 0.05);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  transition: all var(--duration-fast) ease;
}

.logo:hover { opacity: 0.85; }

.logo__icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--navy-800);
  letter-spacing: 0;
  box-shadow: 0 0 20px var(--cyan-hover-glow);
}

.logo__text {
  letter-spacing: var(--tracking-tighter);
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--white-50);
  transition: color var(--duration-base) ease;
  position: relative;
  letter-spacing: 0.01em;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--cyan-500), transparent);
  transition: width var(--duration-base) var(--ease-out-expo);
}

.nav__link:hover {
  color: var(--white);
}

.nav__link:hover::after {
  width: 100%;
}

/* Header right */
.header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  gap: 4px;
}

.lang-switch__btn {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) ease;
  color: var(--white-30);
}

.lang-switch__btn.active {
  color: var(--cyan-500);
  background: var(--cyan-bg-subtle);
}

.lang-switch__btn:hover:not(:disabled) {
  color: var(--white-70);
}

.lang-switch__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------- BUTTONS (Premium) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 12px 28px;
  min-height: 44px;
  transition: all var(--duration-base) var(--ease-out-expo);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}

.btn__arrow {
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: btnPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(0, 212, 170, 0); }
}

.btn--primary {
  background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400));
  color: var(--navy-800);
  box-shadow: 0 0 24px rgba(0, 212, 170, 0.2),
              0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 212, 170, 0.35),
              0 8px 24px rgba(0, 0, 0, 0.3);
  filter: brightness(1.08);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--white-70);
  border: 1px solid var(--white-15);
}

.btn--ghost:hover {
  border-color: var(--cyan-500);
  color: var(--cyan-400);
  background: var(--cyan-bg-subtle);
  box-shadow: 0 0 24px rgba(0, 212, 170, 0.08);
}

.btn--large {
  padding: 16px 36px;
  font-size: 15px;
}

.btn--xl {
  padding: 18px 44px;
  font-size: 16px;
  border-radius: var(--radius-lg);
}

.btn--header {
  padding: 8px 20px;
  font-size: 13px;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  height: 20px;
  justify-content: center;
}

.burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--duration-base) var(--ease-out-expo);
  transform-origin: center;
}

.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 13, 26, 0.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 32px var(--container-padding) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: all var(--duration-base) var(--ease-out-expo);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu__link {
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--white-70);
  border-bottom: 1px solid var(--white-04);
  transition: all var(--duration-fast) ease;
  letter-spacing: 0.01em;
}

.mobile-menu__link:hover {
  color: var(--cyan-400);
  padding-left: 8px;
}

.mobile-menu .btn {
  margin-top: 28px;
  width: 100%;
  padding: 18px;
  font-size: 16px;
}

/* ============================================================
   HERO — with 3D Canvas Centerpiece
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--navy-900);
  overflow: hidden;
}

/* Parallax depth layers */
.hero__parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.hero__parallax-layer--1 {
  background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(0, 212, 170, 0.06), transparent);
}

.hero__parallax-layer--2 {
  background: radial-gradient(ellipse 60% 50% at 70% 60%, rgba(0, 100, 200, 0.04), transparent);
}

.hero__parallax-layer--3 {
  background: radial-gradient(ellipse 40% 40% at 50% 30%, rgba(0, 212, 170, 0.03), transparent);
}

/* Floating particles */
.hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan-500);
  opacity: 0;
  animation: particleFloat linear infinite;
}

.particle--1 { left: 10%; animation-duration: 12s; animation-delay: 0s; }
.particle--2 { left: 25%; animation-duration: 16s; animation-delay: 2s; }
.particle--3 { left: 40%; animation-duration: 14s; animation-delay: 4s; }
.particle--4 { left: 55%; animation-duration: 18s; animation-delay: 1s; }
.particle--5 { left: 70%; animation-duration: 13s; animation-delay: 3s; }
.particle--6 { left: 85%; animation-duration: 15s; animation-delay: 5s; }
.particle--7 { left: 35%; animation-duration: 17s; animation-delay: 7s; }
.particle--8 { left: 65%; animation-duration: 11s; animation-delay: 6s; }

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
    transform: translateY(80vh) scale(1);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-10vh) scale(0.5);
    opacity: 0;
  }
}

/* ---- DATA STREAMS BACKGROUND ---- */
.hero-data-streams {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.data-stream {
  position: absolute;
  top: -100%;
  width: 1px;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.04) 60%, transparent);
  animation: dataStreamDrift linear infinite;
}

.data-stream--1  { left: 5%;  animation-duration: 18s; animation-delay: 0s; }
.data-stream--2  { left: 11%; animation-duration: 22s; animation-delay: -3s; }
.data-stream--3  { left: 18%; animation-duration: 20s; animation-delay: -8s; }
.data-stream--4  { left: 24%; animation-duration: 25s; animation-delay: -1s; }
.data-stream--5  { left: 31%; animation-duration: 19s; animation-delay: -12s; }
.data-stream--6  { left: 38%; animation-duration: 23s; animation-delay: -5s; }
.data-stream--7  { left: 44%; animation-duration: 21s; animation-delay: -15s; }
.data-stream--8  { left: 50%; animation-duration: 17s; animation-delay: -7s; }
.data-stream--9  { left: 56%; animation-duration: 24s; animation-delay: -10s; }
.data-stream--10 { left: 62%; animation-duration: 20s; animation-delay: -2s; }
.data-stream--11 { left: 68%; animation-duration: 22s; animation-delay: -14s; }
.data-stream--12 { left: 74%; animation-duration: 19s; animation-delay: -6s; }
.data-stream--13 { left: 80%; animation-duration: 26s; animation-delay: -9s; }
.data-stream--14 { left: 85%; animation-duration: 21s; animation-delay: -4s; }
.data-stream--15 { left: 90%; animation-duration: 18s; animation-delay: -11s; }
.data-stream--16 { left: 15%; animation-duration: 23s; animation-delay: -16s; opacity: 0.6; }
.data-stream--17 { left: 42%; animation-duration: 20s; animation-delay: -13s; opacity: 0.6; }
.data-stream--18 { left: 72%; animation-duration: 25s; animation-delay: -7s; opacity: 0.6; }

@keyframes dataStreamDrift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(500%); }
}

/* ---- HERO 3D CANVAS & VIDEO ---- */
.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Hero video (replaces SVG globe) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-out;
}

.hero-video.is-ready {
  opacity: 0.7;
}

/* Shared grid drift animation (used by banks-hero, coming-soon grids) */
@keyframes gridDrift {
  0% { transform: translate(0, 0) perspective(500px) rotateX(2deg); }
  100% { transform: translate(80px, 80px) perspective(500px) rotateX(2deg); }
}

/* Hero text content — on top of corridor map */
.hero__content-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: var(--header-height);
  padding-bottom: 60px;
}

.hero__content {
  max-width: 680px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-hover-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-400);
  margin-bottom: 32px;
  animation: fadeSlideUp 0.8s var(--ease-out-expo) both;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  letter-spacing: 0.02em;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-500);
  box-shadow: 0 0 10px var(--cyan-500);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero__title {
  margin-bottom: 28px;
  animation: fadeSlideUp 0.8s 0.15s var(--ease-out-expo) both;
}

.hero__title-line {
  display: block;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-hero);
  color: var(--white);
}

.hero__title-gradient {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-300), #00FFE0, var(--cyan-500));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroGradient 8s ease-in-out infinite;
}

@keyframes heroGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero__subtitle {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--slate-400);
  max-width: 520px;
  margin-bottom: 40px;
  animation: fadeSlideUp 0.8s 0.3s var(--ease-out-expo) both;
  letter-spacing: 0.01em;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.8s 0.45s var(--ease-out-expo) both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   METRICS STRIP
   ============================================================ */
.metrics-strip {
  position: relative;
  padding: 0;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-top: 1px solid var(--white-04);
  border-bottom: 1px solid var(--white-04);
  overflow: hidden;
}

.metrics-strip__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(0, 212, 170, 0.06), transparent);
  pointer-events: none;
}

.metrics-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.metric {
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all var(--duration-base) ease;
}

.metric::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg, transparent, var(--white-08), transparent);
}

.metric:last-child::after { display: none; }

.metric:hover {
  background: var(--cyan-bg-subtle);
}

.metric__value {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  color: var(--cyan-400);
  margin-bottom: 6px;
  line-height: 1.1;
}

.metric__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.metric__bar {
  width: 60px;
  height: 2px;
  background: var(--white-08);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
}

.metric__bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-400));
  border-radius: 2px;
  transition: width 1.5s var(--ease-out-expo) 0.3s;
}

.metric.visible .metric__bar-fill {
  width: var(--fill-width);
}

/* ============================================================
   SECTIONS COMMON
   ============================================================ */
.section {
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

.section__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.5;
}

.section__glow--left {
  left: -200px;
  top: 20%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.08), transparent);
}

.section__glow--right {
  right: -200px;
  top: 10%;
  background: radial-gradient(circle, var(--cyan-bg-subtle), transparent);
}

.section__glow--center {
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 212, 170, 0.06), transparent);
}

.section--values {
  background: linear-gradient(175deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

.section--banks {
  background: linear-gradient(175deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.section--how {
  background: linear-gradient(175deg, var(--navy-800) 0%, var(--navy-700) 50%, var(--navy-800) 100%);
}

.section--geo {
  background: linear-gradient(175deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.section--trust {
  background: linear-gradient(175deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

/* Section divider clip-path */
.section--values::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--navy-900);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
}

.section__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin-bottom: 16px;
}

.section__title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.section__subtitle {
  font-size: 17px;
  color: var(--slate-400);
  max-width: 580px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.section__header {
  margin-bottom: var(--header-mb);
}

.section__header--center {
  text-align: center;
}

.section__header--center .section__subtitle {
  margin-inline: auto;
}

/* ============================================================
   VALUE PROPOSITION CARDS — Animated border glow
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.value-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: var(--glass-border);
  transition: all var(--duration-base) var(--ease-out-expo);
  contain: layout style;
}

/* Animated rotating border gradient */
.value-card__border-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0%,
    rgba(0, 212, 170, 0.4) 10%,
    transparent 20%,
    transparent 80%,
    rgba(0, 212, 170, 0.2) 90%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
  animation: borderRotate 6s linear infinite;
}

.value-card:hover .value-card__border-glow {
  opacity: 1;
}

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderRotate {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

.value-card__inner {
  background: rgba(13, 28, 48, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: calc(var(--radius-lg) - 1px);
  padding: 36px 28px;
  height: 100%;
  position: relative;
  z-index: 1;
  transition: all var(--duration-base) ease;
  box-shadow: var(--shadow-md);
}

.value-card:hover {
  transform: translateY(-6px);
}

.value-card:hover .value-card__inner {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
              0 0 40px rgba(0, 212, 170, 0.05);
}

.value-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--cyan-400);
  transition: all var(--duration-base) ease;
}

.value-card:hover .value-card__icon {
  background: var(--cyan-hover-border);
  border-color: var(--cyan-hover-glow);
  box-shadow: 0 0 30px var(--cyan-hover-border);
  transform: scale(1.05);
}

.value-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.value-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: 20px;
}

.value-card__tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   AUDIENCE CARDS (Banks + Business)
   ============================================================ */
.audience-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}

.audience-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 3px;
  background: var(--glass-border);
}

/* Animated border */
.audience-card__animated-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0%,
    var(--cyan-500) 8%,
    rgba(0, 212, 170, 0.6) 15%,
    transparent 25%,
    transparent 75%,
    rgba(0, 212, 170, 0.3) 88%,
    transparent 100%
  );
  animation: borderRotate 5s linear infinite;
  opacity: 0.7;
}

.audience-card__animated-border--subtle {
  opacity: 0.3;
  animation-duration: 8s;
}

.audience-card__inner {
  background: rgba(13, 28, 48, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: calc(var(--radius-xl) - 2px);
  padding: 48px 40px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.audience-card__badge {
  display: inline-block;
  padding: 4px 14px;
  background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400));
  color: var(--navy-800);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}

.audience-card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin-bottom: 16px;
}

.audience-card__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: 16px;
}

.audience-card__text {
  font-size: 16px;
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: 28px;
}

.audience-card__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.audience-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--white-70);
  line-height: 1.5;
}

.audience-card__feature svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   HOW IT WORKS — Connected steps
   ============================================================ */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Connector line between steps */
.steps__connector {
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 0;
}

.steps__connector-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    var(--white-08) 10%,
    var(--white-08) 90%,
    transparent
  );
}

.steps__connector-glow {
  position: absolute;
  top: -1px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--cyan-500), transparent);
  border-radius: 4px;
  filter: blur(2px);
  animation: connectorGlow 4s ease-in-out infinite;
}

@keyframes connectorGlow {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 60px); opacity: 0; }
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.step__number-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
}

.step__number {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-900);
  border: 2px solid var(--cyan-hover-glow);
  font-size: 18px;
  font-weight: 800;
  color: var(--cyan-400);
  position: relative;
  z-index: 1;
  transition: all var(--duration-base) ease;
  letter-spacing: var(--tracking-tight);
}

.step__number-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--cyan-border-light);
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
}

.step:hover .step__number {
  border-color: var(--cyan-500);
  box-shadow: 0 0 30px rgba(0, 212, 170, 0.2);
  background: var(--cyan-bg-subtle);
}

.step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: var(--tracking-tight);
}

.step__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
  max-width: 220px;
  margin: 0 auto;
}

/* ============================================================
   GEOGRAPHY — Abstract globe
   ============================================================ */
.geo-globe {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-globe__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--cyan-hover-border);
}

.geo-globe__ring--1 {
  width: 100%;
  height: 100%;
  animation: geoRingSpin 18s linear infinite;
}

.geo-globe__ring--2 {
  width: 75%;
  height: 75%;
  border-style: dashed;
  border-color: var(--cyan-bg-subtle);
  animation: geoRingSpin 25s linear infinite reverse;
}

.geo-globe__ring--3 {
  width: 50%;
  height: 50%;
  border-color: var(--cyan-hover-border);
  animation: geoRingSpin 12s linear infinite;
}

@keyframes geoRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.geo-globe__center {
  text-align: center;
  position: relative;
  z-index: 2;
}

.geo-globe__center-text {
  font-size: 48px;
  font-weight: 800;
  color: var(--cyan-400);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  text-shadow: 0 0 40px rgba(0, 212, 170, 0.3);
}

.geo-globe__center-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Radiating lines */
.geo-globe__line {
  position: absolute;
  width: 1px;
  height: 50%;
  top: 0;
  left: 50%;
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(0, 212, 170, 0.3), transparent);
}

.geo-globe__line--1 { transform: rotate(0deg); }
.geo-globe__line--2 { transform: rotate(60deg); }
.geo-globe__line--3 { transform: rotate(120deg); }
.geo-globe__line--4 { transform: rotate(180deg); }
.geo-globe__line--5 { transform: rotate(240deg); }
.geo-globe__line--6 { transform: rotate(300deg); }

/* Country grid */
.geo__countries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.geo__country {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(15, 32, 53, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: all var(--duration-base) var(--ease-out-expo);
}

.geo__country:hover {
  background: rgba(13, 33, 55, 0.7);
  border-color: var(--cyan-border-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.geo__country-flag {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
}

.geo__country-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.geo__country-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--white-90);
  display: block;
}

.geo__country-time {
  font-size: 12px;
  color: var(--slate-500);
  display: block;
  letter-spacing: 0.02em;
}

/* ============================================================
   TRUST
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.trust-item {
  text-align: center;
  padding: 40px 24px;
  background: rgba(15, 32, 53, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.trust-item:hover {
  background: rgba(15, 32, 53, 0.85);
  border-color: var(--cyan-border-light);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.trust-item__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--cyan-400);
  transition: all var(--duration-base) ease;
}

.trust-item:hover .trust-item__icon-wrap {
  background: var(--cyan-hover-border);
  border-color: var(--cyan-hover-glow);
  box-shadow: 0 0 30px var(--cyan-hover-border);
}

.trust-item__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: var(--tracking-tight);
}

.trust-item__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   CTA
   ============================================================ */
.cta-section {
  position: relative;
  padding: var(--cta-py) 0;
  overflow: hidden;
  background: linear-gradient(175deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

.cta-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-section__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.cta-section__orb--1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 212, 170, 0.08);
  top: -150px;
  right: -100px;
  animation: ctaOrb 10s ease-in-out infinite alternate;
}

.cta-section__orb--2 {
  width: 400px;
  height: 400px;
  background: rgba(0, 100, 200, 0.06);
  bottom: -150px;
  left: -100px;
  animation: ctaOrb 12s ease-in-out infinite alternate-reverse;
}

@keyframes ctaOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.1); }
}

.cta-section__inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

.cta-section__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin-bottom: 20px;
}

.cta-section__title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-section__text {
  font-size: 17px;
  color: var(--slate-400);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.cta-section__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--navy-900);
  border-top: 1px solid var(--white-04);
  padding: 80px 0 40px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.footer__brand-text {
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.7;
  margin-top: 16px;
  max-width: 280px;
}

.footer__heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--white-50);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__link {
  font-size: 14px;
  color: var(--slate-500);
  padding: 6px 0;
  transition: all var(--duration-fast) ease;
  position: relative;
  display: inline-block;
  width: fit-content;
}

.footer__link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cyan-500);
  transition: width var(--duration-base) var(--ease-out-expo);
}

.footer__link:hover {
  color: var(--cyan-400);
}

.footer__link:hover::after {
  width: 100%;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--white-04);
  font-size: 13px;
  color: var(--slate-500);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* 1440px */
@media (max-width: 1440px) {
  :root {
    --container-max: 1120px;
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: flex; }
  .btn--header { display: none; }

  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps__connector { display: none; }
  .audience-grid { grid-template-columns: 1fr; }

  .hero__title-line {
    font-size: clamp(40px, 6vw, 64px);
  }

  :root {
    --section-py: 80px;
    --header-mb: 56px;
    --cta-py: 80px;
  }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

/* 768px */
@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --header-height: 64px;
    --section-py: 64px;
    --header-mb: 36px;
    --card-py: 24px;
    --card-px: 20px;
    --card-gap: 14px;
    --cta-py: 56px;
  }

  .metrics-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .metric::after { display: none; }
  .metric { padding: 28px 20px; border-bottom: 1px solid var(--white-04); }

  .hero__title-line {
    font-size: clamp(36px, 8vw, 52px);
  }

  .hero__content {
    max-width: 100%;
  }

  .steps { grid-template-columns: 1fr; gap: 32px; }

  .audience-card__inner { padding: 32px 24px; }
  .geo-globe { width: 200px; height: 200px; }

  .section__title {
    font-size: clamp(28px, 5vw, 40px);
  }

  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Disable content-visibility on mobile — prevents section scroll isolation on touch devices */
  .section {
    content-visibility: visible;
    contain-intrinsic-size: auto none;
  }
}

/* 480px */
@media (max-width: 480px) {
  .value-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .metrics-strip__grid { grid-template-columns: 1fr; }
  .geo__countries { grid-template-columns: 1fr; }

  .hero__title-line {
    font-size: clamp(32px, 10vw, 44px);
  }

  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__actions .btn { width: 100%; max-width: 320px; }

  .audience-card__inner { padding: 28px 20px; }
}

/* ============================================================
   SMOOTH PAGE ENTRANCE
   ============================================================ */
@keyframes pageEntrance {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   INNER PAGES — Shared styles
   All page-specific styles for banks, business, about,
   contacts, b2c, faq, technology
   ============================================================ */

/* ---------- REVEAL DELAY UTILITIES ---------- */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* ---------- SECTION BACKGROUNDS (inner pages) ---------- */
.section--dark {
  background: linear-gradient(175deg, var(--navy-800) 0%, var(--navy-700) 50%, var(--navy-800) 100%);
}

.section--darker {
  background: linear-gradient(175deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--navy-900) 100%);
}

/* ---------- NAV ACTIVE STATE ---------- */
.nav__link--active {
  color: var(--white);
}

.nav__link--active::after {
  width: 100%;
  background: linear-gradient(90deg, var(--cyan-500), transparent);
}

/* ============================================================
   PAGE HERO — Shared inner-page hero
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 80px) 0 80px;
  background: var(--navy-900);
  overflow: hidden;
}

.page-hero--compact {
  min-height: 40vh;
  padding: calc(var(--header-height) + 60px) 0 60px;
}

.page-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  animation: pageGridDrift 20s linear infinite;
}

@keyframes pageGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

.page-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.page-hero__orb--1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 212, 170, 0.07);
  top: -100px;
  right: -150px;
  animation: heroOrb1 12s ease-in-out infinite alternate;
}

.page-hero__orb--2 {
  width: 400px;
  height: 400px;
  background: rgba(0, 100, 200, 0.05);
  bottom: -150px;
  left: -100px;
  animation: heroOrb2 14s ease-in-out infinite alternate-reverse;
}

@keyframes heroOrb1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, 20px) scale(1.15); }
}

@keyframes heroOrb2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -15px) scale(1.1); }
}

.page-hero__content {
  max-width: 720px;
}

.page-hero__title {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
  animation: fadeSlideUp 0.8s 0.1s var(--ease-out-expo) both;
}

.page-hero__title span {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero__subtitle {
  font-size: 18px;
  color: var(--slate-400);
  line-height: 1.7;
  max-width: 600px;
  animation: fadeSlideUp 0.8s 0.25s var(--ease-out-expo) both;
}

/* fadeSlideUp already defined above — removed duplicate */

/* CTA glow (used on inner pages) */
.cta-section__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.08), transparent);
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(80px);
  pointer-events: none;
}

.cta-section__glow--2 {
  top: auto;
  bottom: -200px;
  background: radial-gradient(circle, rgba(0, 100, 200, 0.06), transparent);
}

.cta-section--banks {
  background: linear-gradient(175deg, var(--navy-700) 0%, var(--navy-900) 100%);
}

/* ============================================================
   BANKS PAGE — Hero
   ============================================================ */
.banks-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 60px) 0 60px;
  background: var(--navy-900);
  overflow: hidden;
}

.banks-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  animation: gridDrift 20s linear infinite;
}

.banks-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.banks-hero__orb--1 {
  width: 600px;
  height: 600px;
  background: rgba(0, 212, 170, 0.08);
  top: -150px;
  right: -200px;
  animation: heroOrb1 12s ease-in-out infinite alternate;
}

.banks-hero__orb--2 {
  width: 450px;
  height: 450px;
  background: rgba(0, 100, 200, 0.06);
  bottom: -150px;
  left: -100px;
  animation: heroOrb2 14s ease-in-out infinite alternate-reverse;
}

.banks-hero__orb--3 {
  width: 300px;
  height: 300px;
  background: rgba(0, 212, 170, 0.05);
  top: 40%;
  left: 30%;
  animation: heroOrb1 16s ease-in-out infinite alternate-reverse;
}

/* Decorative vertical lines */
.banks-hero__lines {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
  z-index: 0;
}

.banks-hero__vline {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 212, 170, 0.04) 30%, rgba(0, 212, 170, 0.04) 70%, transparent);
}

/* Banks hero content */
.banks-hero__content {
  max-width: 720px;
  animation: fadeSlideUp 0.8s var(--ease-out-expo) both;
}

.banks-hero__title {
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 24px;
}

.banks-hero__title span {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.banks-hero__subtitle {
  font-size: 18px;
  color: var(--slate-400);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 36px;
}

.banks-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Banks hero metrics strip */
.banks-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeSlideUp 0.8s 0.3s var(--ease-out-expo) both;
}

.banks-hero__metric {
  background: rgba(13, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 28px 24px;
  text-align: center;
  transition: background var(--duration-base) ease;
}

.banks-hero__metric:hover {
  background: rgba(13, 28, 48, 0.95);
}

.banks-hero__metric-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cyan-400);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}

.banks-hero__metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

/* ============================================================
   PAIN CARDS — Used on banks.html + business.html
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pain-card {
  position: relative;
  background: rgba(15, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.pain-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-border-light);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              0 0 40px rgba(0, 212, 170, 0.04);
}

.pain-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--red-bg);
  border: 1px solid rgba(255, 100, 100, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--red-500);
  transition: all var(--duration-base) ease;
}

.pain-card:hover .pain-card__icon {
  background: var(--red-bg);
  border-color: rgba(255, 100, 100, 0.2);
}

.pain-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 12px;
  background: rgba(255, 100, 100, 0.12);
  border: 1px solid rgba(255, 100, 100, 0.22);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--red-500);
  letter-spacing: 0.03em;
}

.pain-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.pain-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   PACKAGE CARDS — banks.html "Full package"
   ============================================================ */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.package-card {
  position: relative;
  background: rgba(15, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.package-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-border-light);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              0 0 40px rgba(0, 212, 170, 0.04);
}

.package-card__number {
  font-size: 13px;
  font-weight: 800;
  color: var(--cyan-500);
  opacity: 0.75;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.package-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--cyan-400);
  transition: all var(--duration-base) ease;
}

.package-card:hover .package-card__icon {
  background: var(--cyan-hover-border);
  border-color: var(--cyan-hover-glow);
  box-shadow: 0 0 24px var(--cyan-bg-subtle);
}

.package-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.package-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: 16px;
}

.package-card__tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   CASE CARDS — banks.html results
   ============================================================ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.case-card {
  background: rgba(13, 28, 48, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.case-card:hover {
  border-color: var(--cyan-hover-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
              0 0 40px rgba(0, 212, 170, 0.04);
}

.case-card__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.case-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-400);
  flex-shrink: 0;
}

.case-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.case-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.case-card__desc {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Case card metrics */
.case-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.case-card__metric {
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-hover-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.case-card__metric-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.case-card__metric-before {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-400);
  text-decoration: line-through;
  opacity: 0.8;
}

.case-card__metric-after {
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan-300);
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
}

.case-card__metric-label {
  font-size: 12px;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

.case-card__metric-change {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  background: var(--cyan-hover-border);
  border: 1px solid var(--cyan-hover-border);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-300);
  letter-spacing: 0.03em;
}

/* Case card stats (alternative layout) */
.case-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.case-card__stat {
  text-align: center;
  padding: 16px 12px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-hover-border);
  border-radius: var(--radius-md);
}

.case-card__stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan-300);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
}

.case-card__stat-label {
  font-size: 11px;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

/* Case card highlights */
.case-card__highlights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.case-card__highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white-70);
}

/* Case card timeline */
.case-card__timeline {
  padding-top: 16px;
  border-top: 1px solid var(--white-04);
  font-size: 13px;
  color: var(--slate-400);
}

.case-card__timeline strong {
  color: var(--cyan-400);
  font-weight: 700;
}

/* ============================================================
   TIMELINE — banks.html integration steps
   ============================================================ */
.timeline {
  position: relative;
  padding-left: 60px;
}

.timeline__track {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(0, 212, 170, 0.3),
    rgba(0, 212, 170, 0.08) 80%,
    transparent
  );
}

.timeline__step {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 48px;
}

.timeline__step:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  left: -60px;
  top: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__dot-inner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 2px solid var(--cyan-hover-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--cyan-400);
  transition: all var(--duration-base) ease;
}

.timeline__step:hover .timeline__dot-inner {
  border-color: var(--cyan-500);
  box-shadow: 0 0 24px rgba(0, 212, 170, 0.2);
  background: var(--cyan-bg-subtle);
}

.timeline__card {
  background: rgba(15, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  flex: 1;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.timeline__step:hover .timeline__card {
  border-color: var(--cyan-hover-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.timeline__time {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.timeline__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: var(--tracking-tight);
}

.timeline__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   FINANCIAL MODEL CARDS — banks.html
   ============================================================ */
.finmodel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.finmodel-card {
  background: rgba(15, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.finmodel-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.finmodel-card--accent {
  border-color: var(--cyan-hover-glow);
  background: var(--cyan-bg-subtle);
}

.finmodel-card--accent:hover {
  border-color: var(--cyan-hover-glow);
}

.finmodel-card__phase {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin-bottom: 4px;
}

.finmodel-card__period {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 20px;
}

.finmodel-card__divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-500), transparent);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.finmodel-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--white-04);
}

.finmodel-card__row:last-of-type {
  border-bottom: none;
}

.finmodel-card__label {
  font-size: 13px;
  color: var(--slate-400);
}

.finmodel-card__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.finmodel-card__note {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cyan-400);
  opacity: 0.85;
}

.finmodel-footnote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-hover-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--slate-400);
  line-height: 1.6;
}

.finmodel-footnote svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   BUSINESS PAGE — Solution cards
   ============================================================ */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.solution-card {
  background: rgba(15, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: var(--shadow-md);
}

.solution-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-border-light);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              0 0 40px rgba(0, 212, 170, 0.04);
}

.solution-card__number {
  font-size: 36px;
  font-weight: 800;
  color: var(--cyan-500);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: var(--tracking-tight);
}

.solution-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.solution-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   BUSINESS PAGE — Corridor cards
   ============================================================ */
.corridor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.corridor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(15, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--duration-base) var(--ease-out-expo);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

.corridor-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.corridor-card--primary {
  border-color: var(--cyan-border-light);
  background: var(--cyan-bg-subtle);
}

.corridor-card__flag {
  width: 28px;
  height: 21px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}

.corridor-card__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.corridor-card__info {
  flex: 1;
  min-width: 0;
}

.corridor-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}

.corridor-card__currency {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0.05em;
}

.corridor-card__time {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan-400);
  white-space: nowrap;
  padding: 4px 10px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-full);
}

/* ============================================================
   BUSINESS PAGE — Pricing breakdown
   ============================================================ */
.pricing-breakdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.pricing-item {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  min-width: 200px;
  flex: 1;
  max-width: 280px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.pricing-item:hover {
  border-color: var(--cyan-hover-border);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.pricing-item--result {
  border-color: var(--cyan-hover-border);
  background: rgba(0, 212, 170, 0.04);
}

.pricing-item__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pricing-item__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 8px;
}

.pricing-item--result .pricing-item__value {
  color: var(--cyan-400);
}

.pricing-item__note {
  font-size: 12px;
  color: var(--slate-400);
  line-height: 1.5;
}

.pricing-item__plus,
.pricing-item__equals {
  font-size: 28px;
  font-weight: 300;
  color: var(--white-30);
  flex-shrink: 0;
}

/* Pricing features */
.pricing-features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white-70);
}

/* ============================================================
   PRICING COMPARISON — Business page transparency section
   ============================================================ */
.pricing-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto 40px;
}

.pricing-comparison__card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-comparison__card:hover {
  transform: translateY(-4px);
}

.pricing-comparison__card--other {
  opacity: 0.85;
}

.pricing-comparison__card--gpo {
  border-color: var(--cyan-border-light);
  box-shadow: var(--shadow-md), 0 0 24px var(--cyan-hover-glow);
}

.pricing-comparison__card--gpo:hover {
  box-shadow: var(--shadow-md), 0 0 32px var(--cyan-hover-glow);
}

.pricing-comparison__card-header {
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--glass-border);
}

.pricing-comparison__card--other .pricing-comparison__card-header {
  color: var(--white-70);
}

.pricing-comparison__card--gpo .pricing-comparison__card-header {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-border-light);
}

.pricing-comparison__rows {
  padding: 8px 0;
}

.pricing-comparison__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  transition: background 0.2s ease;
}

.pricing-comparison__row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pricing-comparison__param {
  font-size: 14px;
  color: var(--white-70);
}

.pricing-comparison__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  text-align: right;
}

.pricing-comparison__value small {
  font-weight: 400;
  font-size: 12px;
  color: var(--white-50);
  display: block;
  margin-top: 2px;
}

.pricing-comparison__row--total {
  border-top: 1px solid var(--glass-border);
  margin-top: 4px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.pricing-comparison__row--total .pricing-comparison__param,
.pricing-comparison__row--total .pricing-comparison__value {
  font-size: 16px;
  font-weight: 700;
}

.pricing-comparison__card--gpo .pricing-comparison__row--total {
  border-top-color: var(--cyan-border-light);
}

.pricing-comparison__card--gpo .pricing-comparison__row--total .pricing-comparison__value {
  color: var(--cyan-400);
}

.pricing-comparison__savings {
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  border-radius: 12px;
  padding: 24px 32px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.pricing-comparison__savings-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--cyan-400);
  margin-bottom: 8px;
}

.pricing-comparison__savings-note {
  font-size: 15px;
  color: var(--white-70);
  margin: 0;
}

/* ============================================================
   ABOUT PAGE — Mission section
   ============================================================ */
.about-mission {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.about-mission__block {
  padding: 36px 0;
}

.about-mission__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 20px;
}

.about-mission__text {
  font-size: 15px;
  color: var(--slate-400);
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-mission__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   ABOUT PAGE — Team cards
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.team-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  text-align: center;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              0 0 40px rgba(0, 212, 170, 0.04);
}

.team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.15), rgba(0, 100, 200, 0.1));
  border: 2px solid var(--cyan-hover-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) ease;
}

.team-card:hover .team-card__avatar {
  border-color: var(--cyan-500);
  box-shadow: 0 0 30px rgba(0, 212, 170, 0.15);
}

.team-card__initials {
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan-400);
  letter-spacing: var(--tracking-tight);
}

.team-card__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: var(--tracking-tight);
}

.team-card__role {
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-400);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.team-card__bio {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE — Timeline
   ============================================================ */
.about-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-timeline__item {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.about-timeline__item:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.about-timeline__year {
  font-size: 32px;
  font-weight: 800;
  color: var(--cyan-400);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 12px;
}

.about-timeline__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: var(--tracking-tight);
}

.about-timeline__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE — Affiliations
   ============================================================ */
.affiliations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.affiliation-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.affiliation-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              0 0 40px rgba(0, 212, 170, 0.04);
}

.affiliation-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all var(--duration-base) ease;
}

.affiliation-card:hover .affiliation-card__icon {
  background: var(--cyan-hover-border);
  border-color: var(--cyan-hover-glow);
  box-shadow: 0 0 24px var(--cyan-bg-subtle);
}

.affiliation-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.affiliation-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   CONTACTS PAGE — Form & info layout
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-form-wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--white-70);
  letter-spacing: 0.02em;
}

.form-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(5, 13, 26, 0.6);
  border: 1px solid var(--white-08);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: 16px;
  font-family: var(--font);
  transition: all var(--duration-base) ease;
  outline: 2px solid transparent;
}

.form-input::placeholder {
  color: var(--slate-500);
}

.form-input:focus {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px var(--cyan-bg-subtle),
              0 0 20px rgba(0, 212, 170, 0.05);
  background: rgba(5, 13, 26, 0.8);
}

.form-select {
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.form-select option {
  background: var(--navy-800);
  color: var(--white);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form__submit {
  width: 100%;
  margin-top: 8px;
}

.contact-form__note {
  font-size: 12px;
  color: var(--slate-500);
  text-align: center;
  margin-top: 4px;
}

/* Contact info sidebar */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info__card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--duration-base) ease;
}

.contact-info__card:hover {
  border-color: var(--cyan-border-light);
}

.contact-info__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.contact-info__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: var(--tracking-tight);
}

.contact-info__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.5;
}

.contact-info__detail {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 4px;
}

.contact-info__link {
  font-size: 14px;
  color: var(--cyan-400);
  transition: color var(--duration-fast) ease;
}

.contact-info__link:hover {
  color: var(--cyan-300);
}

/* Contact trust badges */
.contact-trust {
  background: rgba(15, 28, 48, 0.78);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white-70);
}

/* ============================================================
   INVESTORS PAGE — Premium investor pitch
   ============================================================ */

/* Hero metrics strip */
.inv-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeSlideUp 0.8s 0.3s var(--ease-out-expo) both;
}

.inv-metric {
  background: rgba(13, 28, 48, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 28px 24px;
  text-align: center;
  transition: background var(--duration-base) ease;
}

.inv-metric:hover {
  background: rgba(13, 28, 48, 0.95);
}

.inv-metric__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cyan-400);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}

.inv-metric__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

/* Market stat cards — large number emphasis */
.inv-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.inv-stat-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) ease, border-color var(--duration-base) ease;
}

.inv-stat-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-hover-border);
  box-shadow: var(--shadow-md), 0 0 40px var(--cyan-hover-glow);
}

.inv-stat-card__number {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 8px;
}

.inv-stat-card__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--white-90);
  margin-bottom: 8px;
}

.inv-stat-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* Advantage cards — large icon + bold layout */
.inv-advantage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.inv-advantage-card {
  position: relative;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--glass-border);
  transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) ease;
}

.inv-advantage-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 40px var(--cyan-hover-glow);
}

.inv-advantage-card__inner {
  background: rgba(13, 28, 48, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: calc(var(--radius-lg) - 1px);
  padding: 36px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  height: 100%;
}

.inv-advantage-card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-400);
}

.inv-advantage-card__icon svg {
  width: 24px;
  height: 24px;
}

.inv-advantage-card__content {
  flex: 1;
  min-width: 0;
}

.inv-advantage-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 8px;
}

.inv-advantage-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* Risk checklist — horizontal layout with check icons */
.inv-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.inv-risk-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-out-expo);
}

.inv-risk-item:hover {
  border-color: var(--cyan-hover-border);
  transform: translateY(-2px);
}

.inv-risk-item__check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.12);
  border: 1.5px solid var(--cyan-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-400);
}

.inv-risk-item__check svg {
  width: 16px;
  height: 16px;
}

.inv-risk-item__content {
  flex: 1;
}

.inv-risk-item__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--white-90);
  margin-bottom: 4px;
}

.inv-risk-item__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.6;
}

/* Roadmap timeline */
.inv-timeline {
  position: relative;
  display: flex;
  gap: 0;
}

.inv-timeline::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-400) 50%, var(--white-15));
}

.inv-timeline__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 12px;
}

.inv-timeline__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 3px solid var(--cyan-500);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.inv-timeline__item--active .inv-timeline__dot {
  background: var(--cyan-500);
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.4);
}

.inv-timeline__item--active .inv-timeline__dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(0, 212, 170, 0.2);
  animation: timelinePulse 2s ease-in-out infinite;
}

@keyframes timelinePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0; }
}

.inv-timeline__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.inv-timeline__card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  width: 100%;
  transition: border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-out-expo);
}

.inv-timeline__card:hover {
  border-color: var(--cyan-hover-border);
  transform: translateY(-4px);
}

.inv-timeline__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.3;
}

.inv-timeline__text {
  font-size: 13px;
  color: var(--slate-400);
  line-height: 1.6;
}

/* Cooperation cards — prominent with CTA */
.inv-coop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.inv-coop-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out-expo), border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}

.inv-coop-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-hover-border);
  box-shadow: var(--shadow-md), 0 0 40px var(--cyan-hover-glow);
}

.inv-coop-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-400);
  margin-bottom: 20px;
}

.inv-coop-card__icon svg {
  width: 24px;
  height: 24px;
}

.inv-coop-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.inv-coop-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}

.inv-coop-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan-400);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--duration-fast) ease;
}

.inv-coop-card__link:hover {
  gap: 10px;
}

.inv-coop-card__link svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   B2C PAGE — Coming soon
   ============================================================ */
.coming-soon {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 60px) 0 60px;
  background: var(--navy-900);
  overflow: hidden;
}

.coming-soon__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  animation: gridDrift 20s linear infinite;
}

.coming-soon__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.coming-soon__orb--1 {
  width: 500px;
  height: 500px;
  background: var(--cyan-bg-subtle);
  top: -100px;
  right: -150px;
  animation: heroOrb1 12s ease-in-out infinite alternate;
}

.coming-soon__orb--2 {
  width: 400px;
  height: 400px;
  background: var(--orb-blue);
  bottom: -150px;
  left: -100px;
  animation: heroOrb2 14s ease-in-out infinite alternate-reverse;
}

.coming-soon__orb--3 {
  width: 300px;
  height: 300px;
  background: var(--orb-purple);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: heroOrb1 16s ease-in-out infinite alternate-reverse;
}

.coming-soon__content {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.coming-soon__badge {
  display: inline-block;
  padding: 6px 18px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-hover-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan-400);
  letter-spacing: 0.1em;
  margin-bottom: 28px;
  animation: fadeSlideUp 0.6s var(--ease-out-expo) both;
}

.coming-soon__icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  animation: fadeSlideUp 0.6s 0.1s var(--ease-out-expo) both;
}

.coming-soon__title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: 16px;
  animation: fadeSlideUp 0.6s 0.2s var(--ease-out-expo) both;
}

.coming-soon__text {
  font-size: 17px;
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: 36px;
  animation: fadeSlideUp 0.6s 0.3s var(--ease-out-expo) both;
}

.coming-soon__form {
  display: flex;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto 36px;
  animation: fadeSlideUp 0.6s 0.4s var(--ease-out-expo) both;
}

.coming-soon__input {
  flex: 1;
  padding: 14px 18px;
  background: rgba(5, 13, 26, 0.7);
  border: 1px solid var(--white-08);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: 15px;
  font-family: var(--font);
  outline: 2px solid transparent;
  transition: all var(--duration-base) ease;
}

.coming-soon__input::placeholder {
  color: var(--slate-500);
}

.coming-soon__input:focus {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px var(--cyan-bg-subtle);
}

.coming-soon__btn {
  flex-shrink: 0;
}

.coming-soon__features {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  animation: fadeSlideUp 0.6s 0.5s var(--ease-out-expo) both;
}

.coming-soon__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white-70);
}

.coming-soon__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-400);
  transition: color var(--duration-fast) ease;
  animation: fadeSlideUp 0.6s 0.6s var(--ease-out-expo) both;
}

.coming-soon__back:hover {
  color: var(--cyan-400);
}

/* ============================================================
   FAQ PAGE — Accordion
   ============================================================ */
.faq-section {
  margin-bottom: 64px;
}

.faq-section:last-child {
  margin-bottom: 0;
}

.faq-section__header {
  margin-bottom: 28px;
}

.faq-section__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion__item {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-base) ease;
}

.accordion__item:hover {
  border-color: var(--cyan-border-light);
}

.accordion__item--open {
  border-color: var(--cyan-border-light);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: all var(--duration-fast) ease;
}

.accordion__trigger:hover {
  background: rgba(0, 212, 170, 0.02);
}

.accordion__question {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
}

.accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  transition: all var(--duration-base) ease;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--cyan-400);
  border-radius: 1px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.accordion__icon::before {
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.accordion__item--open .accordion__icon {
  background: var(--cyan-hover-border);
  border-color: var(--cyan-hover-glow);
}

.accordion__item--open .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion__content p {
  padding: 0 24px 24px;
  font-size: 15px;
  color: var(--slate-400);
  line-height: 1.8;
}

/* ============================================================
   TECHNOLOGY PAGE — Cascade routing visualization
   ============================================================ */
.tech-cascade {
  margin-bottom: 48px;
}

.tech-cascade__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 48px 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.tech-cascade__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  background: rgba(0, 212, 170, 0.04);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-lg);
  min-width: 120px;
  text-align: center;
  transition: all var(--duration-base) ease;
}

.tech-cascade__node:hover {
  border-color: var(--cyan-hover-glow);
  box-shadow: 0 0 30px rgba(0, 212, 170, 0.08);
}

.tech-cascade__node--ai {
  border-color: var(--cyan-hover-border);
  background: var(--cyan-bg-subtle);
}

.tech-cascade__node--start,
.tech-cascade__node--end {
  background: rgba(15, 28, 48, 0.90);
  border-color: var(--glass-border);
}

.tech-cascade__node-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cyan-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-400);
}

.tech-cascade__node span {
  font-size: 13px;
  font-weight: 600;
  color: var(--white-70);
  letter-spacing: 0.02em;
}

.tech-cascade__arrow {
  flex-shrink: 0;
  opacity: 0.5;
}

.tech-cascade__routes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tech-cascade__route {
  padding: 10px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-400);
  text-align: center;
  transition: all var(--duration-base) ease;
}

.tech-cascade__route--active {
  border-color: var(--cyan-hover-glow);
  background: var(--cyan-bg-subtle);
  color: var(--cyan-400);
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.06);
}

/* Tech factors strip */
.tech-factors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tech-factor {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 28px 20px;
  text-align: center;
  transition: background var(--duration-base) ease;
}

.tech-factor:hover {
  background: rgba(15, 28, 48, 0.95);
}

.tech-factor__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--cyan-400);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}

.tech-factor__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

/* ============================================================
   TECHNOLOGY PAGE — Infrastructure grid
   ============================================================ */
.infra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.infra-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.infra-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.infra-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.infra-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: var(--tracking-tight);
}

.infra-card__badge {
  padding: 4px 12px;
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-400);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.infra-card__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   TECHNOLOGY PAGE — Monitoring grid
   ============================================================ */
.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.monitoring-item {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.monitoring-item:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-hover-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.monitoring-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--cyan-bg-subtle);
  border: 1px solid var(--cyan-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all var(--duration-base) ease;
}

.monitoring-item:hover .monitoring-item__icon {
  background: var(--cyan-hover-border);
  border-color: var(--cyan-hover-glow);
  box-shadow: 0 0 24px var(--cyan-bg-subtle);
}

.monitoring-item__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: var(--tracking-tight);
}

.monitoring-item__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   TECHNOLOGY PAGE — Architecture layers
   ============================================================ */
.arch-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arch-layer {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.arch-layer:hover {
  border-color: var(--cyan-hover-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  transform: translateX(4px);
}

.arch-layer__number {
  font-size: 28px;
  font-weight: 800;
  color: var(--cyan-500);
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
  min-width: 44px;
}

.arch-layer__content {
  flex: 1;
}

.arch-layer__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: var(--tracking-tight);
}

.arch-layer__text {
  font-size: 14px;
  color: var(--slate-400);
  line-height: 1.7;
}

/* ============================================================
   BLOG — Listing page + Article page
   ============================================================ */

/* ---------- Blog Filter Buttons ---------- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  justify-content: center;
}

.blog-filter {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--white-70);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
  white-space: nowrap;
}

.blog-filter:hover {
  border-color: var(--cyan-border-light);
  color: var(--white-90);
  background: var(--cyan-bg-subtle);
}

.blog-filter.active {
  background: var(--cyan-500);
  color: var(--navy-900);
  border-color: var(--cyan-500);
  font-weight: 600;
}

/* ---------- Blog Card Grid ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ---------- Blog Card ---------- */
.blog-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out-expo),
              box-shadow var(--duration-base) var(--ease-out-expo);
  contain: layout style;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.blog-card.hidden {
  display: none;
}

.blog-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.blog-card__thumb {
  margin: -28px -28px 20px -28px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.blog-card__thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.blog-card:hover .blog-card__thumb img {
  transform: scale(1.03);
}

.blog-card:hover .blog-card__inner {
  border-color: var(--cyan-border-light);
}

.blog-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.blog-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.blog-card__tag--payments {
  background: var(--cyan-hover-border);
  color: var(--cyan-400);
}

.blog-card__tag--tech {
  background: var(--tag-tech-bg);
  color: var(--tag-tech-color);
}

.blog-card__tag--banks {
  background: var(--tag-banks-bg);
  color: var(--tag-banks-color);
}

.blog-card__tag--compliance {
  background: var(--tag-compliance-bg);
  color: var(--tag-compliance-color);
}

.blog-card__tag--analytics {
  background: var(--tag-analytics-bg);
  color: var(--tag-analytics-color);
}

.blog-card__read-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--white-30);
}

.blog-card__title {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 12px;
  color: var(--white);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.blog-card__title a:hover {
  color: var(--cyan-400);
}

.blog-card__excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: var(--white-50);
  margin-bottom: 24px;
  flex-grow: 1;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--white-08);
  gap: 12px;
}

.blog-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-card__author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-card__author-info {
  display: flex;
  flex-direction: column;
}

.blog-card__author-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white-90);
  line-height: 1.3;
}

.blog-card__author-role {
  font-size: 11px;
  color: var(--white-30);
  line-height: 1.3;
}

.blog-card__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--cyan-400);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast);
}

.blog-card__link:hover {
  color: var(--cyan-300);
}

/* ---------- Article Page — Container ---------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
}

.article-container {
  max-width: 780px;
}

/* ---------- Article Page — Header ---------- */
.article-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--white-08);
}

.article-header__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.article-header__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
  margin-bottom: 20px;
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.article-header__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-header__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.article-header__author-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--white-90);
}

.article-header__author-role {
  font-size: 12px;
  color: var(--white-30);
}

.article-header__date,
.article-header__read-time {
  font-size: 13px;
  color: var(--white-30);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Article Page — Prose Typography ---------- */
.article-prose {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}

.article-prose h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin-top: 56px;
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.article-prose h3 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--white-90);
  margin-top: 40px;
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.article-prose p {
  margin-bottom: 24px;
}

.article-prose a {
  color: var(--cyan-400);
  text-decoration: underline;
  text-decoration-color: var(--cyan-hover-glow);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast);
}

.article-prose a:hover {
  text-decoration-color: var(--cyan-400);
}

.article-prose strong {
  color: var(--white);
  font-weight: 600;
}

.article-prose blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--cyan-500);
  background: var(--glass-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--white-70);
}

.article-prose blockquote p:last-child {
  margin-bottom: 0;
}

.article-prose ul,
.article-prose ol {
  margin: 24px 0;
  padding-left: 24px;
}

.article-prose ul li {
  position: relative;
  padding-left: 8px;
  margin-bottom: 12px;
  list-style: none;
}

.article-prose ul li::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-500);
}

.article-prose ol {
  counter-reset: ol-counter;
}

.article-prose ol li {
  counter-increment: ol-counter;
  list-style: none;
  padding-left: 8px;
  margin-bottom: 12px;
  position: relative;
}

.article-prose ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: -24px;
  color: var(--cyan-400);
  font-weight: 600;
  font-size: 14px;
}

.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 32px 0;
}

.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-prose table th,
.article-prose table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--white-08);
}

.article-prose table th {
  background: var(--cyan-bg-subtle);
  color: var(--white-90);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.article-prose table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.article-prose table td {
  color: var(--white-70);
}

.article-prose pre {
  margin: 32px 0;
  padding: 24px;
  background: var(--navy-900);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7;
}

.article-prose code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  background: var(--white-08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--cyan-400);
}

.article-prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--white-70);
}

/* ---------- Article Page — Table of Contents (sidebar) ---------- */
.article-toc {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  align-self: start;
}

.article-toc__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white-30);
  margin-bottom: 16px;
}

.article-toc__list {
  list-style: none;
  padding: 0;
}

.article-toc__item {
  margin-bottom: 0;
}

.article-toc__link {
  display: block;
  padding: 6px 0 6px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--white-50);
  text-decoration: none;
  border-left: 2px solid var(--white-08);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.article-toc__link:hover,
.article-toc__link.active {
  color: var(--cyan-400);
  border-left-color: var(--cyan-500);
}

/* ---------- Article Page — CTA Block ---------- */
.article-cta {
  margin-top: 56px;
  padding: 36px;
  background: var(--glass-bg);
  border: 1px solid var(--cyan-border-light);
  border-radius: var(--radius-xl);
  text-align: center;
}

.article-cta__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.article-cta__text {
  font-size: 15px;
  color: var(--white-50);
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Article Page — Related Articles ---------- */
.related-articles {
  margin-top: 80px;
}

.related-articles__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 32px;
}

.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Article Page — Navigation (prev/next) ---------- */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--white-08);
}

.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}

.article-nav__item:hover {
  border-color: var(--cyan-border-light);
  transform: translateY(-2px);
}

.article-nav__item--next {
  text-align: right;
}

.article-nav__label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-30);
}

.article-nav__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--white-90);
  line-height: 1.4;
}

/* ============================================================
   INNER PAGES — Responsive overrides
   ============================================================ */

/* 1024px */
@media (max-width: 1024px) {
  .banks-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  .pain-grid { grid-template-columns: 1fr; }
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: 1fr; }
  .finmodel-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-grid { grid-template-columns: 1fr; }
  .corridor-grid { grid-template-columns: repeat(3, 1fr); }
  .about-mission { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 400px; }
  .about-timeline { grid-template-columns: 1fr; }
  .affiliations-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .monitoring-grid { grid-template-columns: 1fr; }
  .infra-grid { grid-template-columns: 1fr; }
  .tech-factors { grid-template-columns: repeat(2, 1fr); }

  /* Investors */
  .inv-metrics { grid-template-columns: repeat(2, 1fr); }
  .inv-stat-grid { grid-template-columns: 1fr; max-width: 480px; }
  .inv-advantage-grid { grid-template-columns: 1fr; }
  .inv-risk-grid { grid-template-columns: 1fr; }
  .inv-timeline { flex-direction: column; gap: 16px; }
  .inv-timeline::before { display: none; }
  .inv-timeline__item { flex-direction: row; text-align: left; gap: 16px; align-items: flex-start; }
  .inv-timeline__dot { margin-bottom: 0; margin-top: 4px; }
  .inv-timeline__label { text-align: left; }
  .inv-coop-grid { grid-template-columns: 1fr; max-width: 480px; }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { display: none; }
  .related-articles__grid { grid-template-columns: repeat(2, 1fr); }

  /* Touch targets */
  .lang-switch__btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 768px */
@media (max-width: 768px) {
  .page-hero { min-height: auto; padding: calc(var(--header-height) + 48px) 0 48px; }
  .page-hero--compact { padding: calc(var(--header-height) + 40px) 0 40px; }
  .page-hero__title { font-size: clamp(28px, 6vw, 48px); }

  .banks-hero { min-height: auto; padding: calc(var(--header-height) + 48px) 0 48px; }
  .banks-hero__title { font-size: clamp(28px, 6vw, 48px); }
  .banks-hero__actions { margin-bottom: 40px; }
  .banks-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  .inv-metrics { grid-template-columns: repeat(2, 1fr); }
  .inv-stat-card__number { font-size: 36px; }
  .inv-advantage-card__inner { padding: 28px 20px; gap: 16px; }
  .inv-risk-item { padding: 20px 18px; }
  .inv-coop-card { padding: 28px 20px; }

  .corridor-grid { grid-template-columns: repeat(2, 1fr); }
  .package-grid { grid-template-columns: 1fr; }
  .finmodel-grid { grid-template-columns: 1fr; }

  .pricing-breakdown { flex-direction: column; align-items: stretch; }
  .pricing-item { max-width: 100%; }
  .pricing-item__plus,
  .pricing-item__equals { text-align: center; }

  .pricing-comparison { grid-template-columns: 1fr; gap: 24px; }
  .pricing-comparison__savings { padding: 20px 24px; }
  .pricing-comparison__savings-amount { font-size: 18px; }

  .tech-cascade__flow { flex-direction: column; gap: 16px; }
  .tech-cascade__arrow { transform: rotate(90deg); }
  .tech-cascade__routes { flex-direction: row; flex-wrap: wrap; justify-content: center; }

  .contact-form-wrap { padding: 28px 20px; }
  .contact-form__row { grid-template-columns: 1fr; }

  .timeline { padding-left: 48px; }
  .timeline__dot { left: -48px; }

  .case-card__stats { grid-template-columns: 1fr; }

  /* Blog — compact horizontal cards on mobile */
  .blog-grid { grid-template-columns: 1fr; gap: 12px; }

  .blog-card__inner {
    flex-direction: row;
    padding: 12px;
    gap: 14px;
  }

  .blog-card__thumb {
    margin: 0;
    flex-shrink: 0;
    width: 110px;
    border-radius: var(--radius-md);
    align-self: stretch;
  }

  .blog-card__thumb img {
    height: 100%;
    min-height: 110px;
    border-radius: var(--radius-md);
  }

  .blog-card__title { font-size: 15px; margin-bottom: 6px; }
  .blog-card__excerpt { font-size: 13px; margin-bottom: 8px; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-card__top { margin-bottom: 8px; gap: 8px; }
  .blog-card__tag { font-size: 10px; padding: 2px 8px; }
  .blog-card__read-time { font-size: 11px; }
  .blog-card__footer { padding-top: 8px; }
  .blog-card__author-avatar { display: none; }
  .blog-card__author-role { display: none; }
  .blog-card__author-name { font-size: 12px; }
  .blog-card__link { font-size: 12px; }

  /* Blog filters — horizontal scroll */
  .blog-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filter { padding: 10px 16px; font-size: 13px; min-height: 44px; white-space: nowrap; flex-shrink: 0; }

  /* Article pages — compact */
  .article-header { margin-bottom: 32px; padding-bottom: 24px; }
  .article-prose { font-size: 16px; line-height: 1.75; }
  .article-prose h2 { font-size: clamp(20px, 5vw, 26px); margin-top: 36px; margin-bottom: 16px; }
  .article-prose h3 { margin-top: 24px; margin-bottom: 12px; }
  .article-prose p { margin-bottom: 14px; }
  .article-prose blockquote { padding: 16px 18px; margin: 20px -10px; }
  .article-prose ul, .article-prose ol { margin-bottom: 16px; }
  .article-nav { grid-template-columns: 1fr; gap: 12px; }
  .article-nav__item { padding: 16px; }
  .related-articles__grid { grid-template-columns: 1fr; }

  /* Blog article tables — full-width scroll with edge-to-edge bleed */
  .table-responsive {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding: 0 var(--container-padding);
  }
  .article-prose table { font-size: 13px; }
  .article-prose table th,
  .article-prose table td { padding: 10px 12px; }
  .article-prose table th:first-child,
  .article-prose table td:first-child { white-space: normal; min-width: 100px; }

  .article-cta { padding: 28px 20px; }
}

/* 480px */
@media (max-width: 480px) {
  .banks-hero__metrics { grid-template-columns: 1fr; }
  .banks-hero__actions { flex-direction: column; }
  .banks-hero__actions .btn { width: 100%; }

  .corridor-grid { grid-template-columns: 1fr; }
  .tech-factors { grid-template-columns: 1fr; }
  .inv-metrics { grid-template-columns: 1fr; }
  .inv-stat-card__number { font-size: 32px; }
  .inv-stat-card { padding: 28px 20px; }
  .inv-advantage-card__inner { flex-direction: column; gap: 12px; padding: 24px 18px; }
  .inv-risk-item { flex-direction: column; gap: 10px; padding: 20px 16px; }
  .inv-risk-grid { gap: 12px; }
  .inv-coop-card { padding: 24px 18px; }
  .inv-coop-card__icon { width: 52px; height: 52px; }

  .coming-soon__form { flex-direction: column; }
  .coming-soon__features { flex-direction: column; align-items: center; }

  .pricing-features { flex-direction: column; align-items: flex-start; }

  .timeline { padding-left: 40px; }
  .timeline__dot { left: -40px; width: 36px; height: 36px; }
  .timeline__dot-inner { width: 28px; height: 28px; font-size: 12px; }
  .timeline__card { padding: 20px; }

  /* Blog — even more compact on small phones */
  .blog-card__inner { padding: 10px; gap: 12px; }
  .blog-card__thumb { width: 90px; }
  .blog-card__thumb img { min-height: 90px; }
  .blog-card__excerpt { display: none; }
  .blog-card__title { font-size: 14px; }
  .blog-card__footer { display: none; }
  .blog-filters { margin-bottom: 24px; }
  .article-header__title { margin-bottom: 12px; font-size: clamp(22px, 6vw, 32px); }
  .article-header__meta { flex-wrap: wrap; gap: 8px; }
  .article-prose { font-size: 15px; }
  .article-prose h2 { margin-top: 28px; margin-bottom: 12px; font-size: 20px; }
  .article-prose p { margin-bottom: 12px; }
  .article-prose table { font-size: 12px; }
  .article-prose table th,
  .article-prose table td { padding: 8px 10px; }
  .article-cta { padding: 24px 16px; }
  .article-cta__title { font-size: 18px; }
}

/* ============================================================
   AUDIENCE CARD VARIANTS — Used in technology.html
   ============================================================ */
/* Empty .audience-card--banks and .audience-card--business removed (dead code) */

.audience-card__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.08), transparent);
  filter: blur(60px);
  pointer-events: none;
  top: -40px;
  right: -40px;
  z-index: 0;
}

/* ============================================================
   JS-ORIGINATED STYLES (moved from main.js to CSS)
   ============================================================ */

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-300));
  z-index: 10001;
  width: 0;
  pointer-events: none;
  animation: scrollProgress linear;
  animation-timeline: scroll(root block);
}
@keyframes scrollProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* ---------- VIDEO PAUSE BUTTON ---------- */
.hero-video-pause {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  color: var(--white-70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s ease;
}
.hero-video-pause:hover {
  background: rgba(15, 32, 53, 0.95);
  color: var(--white-90);
}
.hero .hero-video.is-ready ~ * > .hero-video-pause,
.hero:has(.hero-video.is-ready) > .hero-video-pause {
  opacity: 1;
}
.hero-video-pause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---------- RIPPLE EFFECT ---------- */
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: ripple-expand 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- MOBILE MENU STAGGER ---------- */
.mobile-menu__link,
.mobile-menu .btn {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
}
.mobile-menu.open .mobile-menu__link,
.mobile-menu.open .btn {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- FORM VALIDATION VISUAL ---------- */
.form-input.is-valid {
  border-color: var(--cyan-500) !important;
  box-shadow: 0 0 0 2px var(--cyan-hover-border);
}
.form-input.is-invalid {
  border-color: #ff4d6a !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 106, 0.12);
}
.form-input.is-invalid:focus {
  border-color: #ff4d6a !important;
}
.form-error {
  font-size: 12px;
  color: #ff4d6a;
  margin-top: 4px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}
.form-error.visible {
  opacity: 1;
  max-height: 40px;
}
.contact-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.contact-form__submit.is-sent {
  background: var(--cyan-500, #00D4AA);
}

/* ============================================================
   ACCESSIBILITY — Screen Reader Only
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   ACCESSIBILITY — Skip Link
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--cyan-500);
  color: var(--navy-900);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

/* ============================================================
   ACCESSIBILITY — Focus-Visible Styles
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
}

/* ============================================================
   ACCESSIBILITY — Prefers Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-3d-canvas, .page-hero__orb, .banks-hero__orb, .noise-overlay,
  .geo-globe__ring, .btn__pulse,
  .hero-data-streams {
    animation: none !important;
  }
  .data-stream {
    animation: none !important;
  }
  .hero-video {
    display: block;
    opacity: 0 !important;
  }
}

/* ============================================================
   PREMIUM MOBILE EXPERIENCE
   Equally powerful on mobile — not a degraded version.
   Tested at: 375px, 390px, 412px, 768px
   ============================================================ */

/* ---------- TOUCH RIPPLE EFFECT (CSS-only) ---------- */
.btn {
  -webkit-tap-highlight-color: transparent;
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.btn--primary:active::after {
  opacity: 1;
  transition: opacity 0.05s ease;
}

/* ---------- MOBILE MENU — Full-screen premium overlay ---------- */
@media (max-width: 1024px) {
  .mobile-menu {
    background: rgba(5, 13, 26, 0.98);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    padding: 40px var(--container-padding) 40px;
    gap: 0;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu.open {
    animation: mobileMenuSlideIn 0.45s var(--ease-out-expo) both;
  }

  @keyframes mobileMenuSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-menu__link {
    font-size: 20px;
    font-weight: 600;
    padding: 18px 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: all 0.3s var(--ease-out-expo);
  }

  .mobile-menu__link:active {
    color: var(--cyan-400);
    background: rgba(0, 212, 170, 0.04);
    margin: 0 calc(-1 * var(--container-padding));
    padding-left: calc(var(--container-padding) + 12px);
    padding-right: var(--container-padding);
  }

  /* Active page indicator in mobile menu */
  .mobile-menu__link[aria-current="page"],
  .mobile-menu__link.active {
    color: var(--cyan-400);
    position: relative;
  }

  .mobile-menu__link[aria-current="page"]::before,
  .mobile-menu__link.active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--cyan-500);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.4);
  }

  .mobile-menu .btn {
    margin-top: auto;
    min-height: 56px;
    font-size: 17px;
    font-weight: 700;
  }

  /* Burger touch target — min 44px */
  .burger {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-right: -10px;
  }

  .burger span {
    width: 22px;
  }
}

/* ---------- 768px — TABLET + MOBILE ---------- */
@media (max-width: 768px) {

  /* -- Global mobile typography enforcement -- */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Prevent horizontal overflow */
  .container {
    overflow-x: hidden;
  }

  /* -- HERO (index.html) -- */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero__content-wrap {
    padding-bottom: 40px;
  }

  /* Hero video — already full-width via absolute positioning */
  .hero-video {
    border-radius: 0;
  }

  .hero__badge {
    font-size: 12px;
    padding: 7px 16px;
    margin-bottom: 24px;
  }

  .hero__subtitle {
    font-size: 16px;
    line-height: 1.7;
  }

  .hero__actions {
    gap: 12px;
  }

  .hero__actions .btn {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    justify-content: center;
  }

  /* Reduce particles on mobile for performance */
  .particle--5,
  .particle--6,
  .particle--7,
  .particle--8 {
    display: none;
  }

  .particle {
    width: 2px;
    height: 2px;
  }

  /* Simplify hero orbs for mobile performance */
  .hero__parallax-layer--3 {
    display: none;
  }

  /* -- METRICS STRIP -- */
  .metrics-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .metric {
    padding: 24px 16px;
    border: none;
    border-bottom: 1px solid var(--white-04);
  }

  .metric:nth-child(odd) {
    border-right: 1px solid var(--white-04);
  }

  .metric__value {
    font-size: 28px;
  }

  .metric__label {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* -- SECTION HEADERS -- */
  .section__title {
    font-size: clamp(26px, 6vw, 36px);
    margin-bottom: 16px;
  }

  .section__subtitle {
    font-size: 15px;
    line-height: 1.7;
  }

  .section__eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
  }

  /* -- VALUE CARDS -- */
  .value-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
  }

  .value-card__inner {
    padding: var(--card-py) var(--card-px);
  }

  .value-card__title {
    font-size: 17px;
  }

  .value-card__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- AUDIENCE CARDS -- */
  .audience-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
  }

  .audience-card__inner {
    padding: var(--card-py) var(--card-px);
  }

  .audience-card__title {
    font-size: clamp(22px, 5vw, 28px);
  }

  .audience-card__text {
    font-size: 15px;
  }

  .audience-card__feature {
    font-size: 14px;
    min-height: 44px;
    align-items: center;
  }

  .audience-card .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  /* -- STEPS -- */
  .steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .step {
    text-align: left;
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .step__number-wrap {
    margin: 0;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
  }

  .step__number {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }

  .step__text {
    max-width: 100%;
    margin: 0;
    font-size: 15px;
  }

  .step__title {
    font-size: 17px;
  }

  /* -- GEO -- */
  .geo-globe {
    width: 180px;
    height: 180px;
    margin-bottom: 40px;
  }

  .geo-globe__center-text {
    font-size: 36px;
  }

  .geo__countries {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .geo__country {
    padding: 12px 14px;
    min-height: 52px;
  }

  .geo__country-flag {
    width: 22px;
    height: 16px;
  }

  .geo__country-name {
    font-size: 13px;
  }

  .geo__country-time {
    font-size: 11px;
  }

  /* -- TRUST -- */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .trust-item {
    padding: 28px 20px;
  }

  .trust-item__title {
    font-size: 15px;
  }

  .trust-item__text {
    font-size: 13px;
    line-height: 1.6;
  }

  /* -- CTA SECTION -- */

  .cta-section__title {
    font-size: clamp(26px, 6vw, 40px);
  }

  .cta-section__text {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cta-section__actions .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  /* -- FOOTER -- */
  .footer {
    padding: 60px 0 32px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .footer__brand-text {
    max-width: 100%;
  }

  .footer__heading {
    margin-bottom: 14px;
  }

  .footer__link {
    padding: 8px 0;
    font-size: 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 12px;
  }

  /* -- BANKS HERO -- */
  .banks-hero {
    min-height: auto;
    padding: calc(var(--header-height) + 40px) 0 40px;
  }

  .banks-hero__title {
    font-size: clamp(28px, 7vw, 44px);
  }

  .banks-hero__subtitle {
    font-size: 16px;
  }

  .banks-hero__actions {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
  }

  .banks-hero__actions .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .banks-hero__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .banks-hero__metric {
    padding: 20px 16px;
  }

  .banks-hero__metric-value {
    font-size: 24px;
  }

  /* Hide decorative vertical lines on mobile */
  .banks-hero__lines {
    display: none;
  }

  /* Reduce orb sizes for performance */
  .banks-hero__orb--1 { width: 300px; height: 300px; }
  .banks-hero__orb--2 { width: 250px; height: 250px; }
  .banks-hero__orb--3 { display: none; }

  .page-hero__orb--1 { width: 300px; height: 300px; }
  .page-hero__orb--2 { width: 250px; height: 250px; }

  /* -- PAIN CARDS -- */
  .pain-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pain-card {
    padding: var(--card-py) var(--card-px);
  }

  .pain-card__title {
    font-size: 17px;
    padding-right: 60px;
  }

  .pain-card__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- PACKAGE CARDS -- */
  .package-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .package-card {
    padding: var(--card-py) var(--card-px);
  }

  .package-card__title {
    font-size: 17px;
  }

  .package-card__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- CASE CARDS -- */
  .cases-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
  }

  .case-card {
    padding: var(--card-py) var(--card-px);
  }

  .case-card__title {
    font-size: 18px;
  }

  .case-card__desc {
    font-size: 15px;
  }

  .case-card__metric-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .case-card__metric-after {
    font-size: 18px;
  }

  .case-card__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* -- TIMELINE (banks.html) -- */
  .timeline {
    padding-left: 44px;
  }

  .timeline__track {
    left: 20px;
  }

  .timeline__dot {
    left: -44px;
    width: 40px;
    height: 40px;
  }

  .timeline__dot-inner {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .timeline__card {
    padding: 20px 18px;
  }

  .timeline__title {
    font-size: 16px;
  }

  .timeline__text {
    font-size: 14px;
    line-height: 1.7;
  }

  .timeline__step {
    padding-bottom: 24px;
  }

  /* -- FINMODEL CARDS -- */
  .finmodel-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
  }

  .finmodel-card {
    padding: var(--card-py) var(--card-px);
  }

  .finmodel-card__period {
    font-size: 20px;
  }

  .finmodel-card__row {
    padding: 10px 0;
  }

  .finmodel-card__label {
    font-size: 14px;
  }

  .finmodel-card__value {
    font-size: 15px;
  }

  .finmodel-footnote {
    font-size: 14px;
    padding: 18px 20px;
  }

  /* -- SOLUTION CARDS (business.html) -- */
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .solution-card {
    padding: var(--card-py) var(--card-px);
  }

  .solution-card__number {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .solution-card__title {
    font-size: 17px;
  }

  .solution-card__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- CORRIDOR GRID (business.html) -- */
  .corridor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .corridor-card {
    padding: 16px 14px;
    gap: 10px;
  }

  .corridor-card__flag {
    width: 24px;
    height: 18px;
  }

  .corridor-card__name {
    font-size: 14px;
  }

  .corridor-card__time {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* -- PRICING (business.html) -- */
  .pricing-breakdown {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .pricing-item {
    max-width: 100%;
    min-width: 0;
    padding: 24px 20px;
  }

  .pricing-item__value {
    font-size: 22px;
  }

  .pricing-item__note {
    font-size: 13px;
  }

  .pricing-item__plus,
  .pricing-item__equals {
    text-align: center;
    font-size: 24px;
  }

  .pricing-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .pricing-feature {
    font-size: 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* -- ABOUT PAGE -- */
  .about-mission {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-mission__block {
    padding: 24px 0;
    border-bottom: 1px solid var(--white-08);
  }

  .about-mission__block:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .about-mission__title {
    font-size: clamp(22px, 5vw, 28px);
  }

  .about-mission__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- TEAM -- */
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: var(--card-gap);
  }

  .team-card {
    padding: var(--card-py) var(--card-px);
  }

  .team-card__name {
    font-size: 18px;
  }

  .team-card__bio {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- ABOUT TIMELINE -- */
  .about-timeline {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
  }

  .about-timeline__item {
    padding: var(--card-py) var(--card-px);
  }

  .about-timeline__year {
    font-size: 28px;
  }

  .about-timeline__title {
    font-size: 17px;
  }

  .about-timeline__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- AFFILIATIONS -- */
  .affiliations-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .affiliation-card {
    padding: var(--card-py) var(--card-px);
  }

  .affiliation-card__title {
    font-size: 17px;
  }

  .affiliation-card__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- CONTACTS -- */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-form-wrap {
    padding: 28px 20px;
    border-radius: var(--radius-lg);
  }

  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 16px 18px;
    min-height: 52px;
  }

  .form-textarea {
    min-height: 120px;
  }

  .form-label {
    font-size: 14px;
  }

  .contact-form__submit {
    min-height: 56px;
    font-size: 16px;
  }

  .contact-info__card {
    padding: 22px 20px;
  }

  .contact-info__title {
    font-size: 16px;
  }

  .contact-info__text {
    font-size: 15px;
  }

  .contact-trust__item {
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* -- FAQ -- */
  .faq-section {
    margin-bottom: 32px;
  }

  .faq-section__title {
    font-size: 22px;
  }

  .accordion__trigger {
    padding: 18px 20px;
    min-height: 56px;
    gap: 12px;
  }

  .accordion__question {
    font-size: 15px;
    line-height: 1.4;
  }

  .accordion__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .accordion__content p {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- TECHNOLOGY PAGE -- */
  .tech-cascade__flow {
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px;
  }

  .tech-cascade__arrow {
    transform: rotate(90deg);
  }

  .tech-cascade__routes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .tech-cascade__route {
    padding: 10px 16px;
    font-size: 13px;
  }

  .tech-cascade__node {
    min-width: 100px;
    padding: 16px 18px;
  }

  .tech-factors {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-factor {
    padding: 22px 16px;
  }

  .tech-factor__value {
    font-size: 24px;
  }

  /* -- INFRA GRID -- */
  .infra-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .infra-card {
    padding: 20px 16px;
  }

  .infra-card__header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .infra-card__title {
    font-size: 17px;
  }

  .infra-card__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- MONITORING GRID -- */
  .monitoring-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .monitoring-item {
    padding: 20px 16px;
  }

  .monitoring-item__title {
    font-size: 17px;
  }

  .monitoring-item__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- ARCH LAYERS -- */
  .arch-layer {
    padding: 20px 16px;
    gap: 14px;
  }

  .arch-layer__number {
    font-size: 24px;
    min-width: 36px;
  }

  .arch-layer__title {
    font-size: 17px;
  }

  .arch-layer__text {
    font-size: 15px;
    line-height: 1.7;
  }

  /* -- COMING SOON (b2c) -- */
  .coming-soon {
    padding: calc(var(--header-height) + 40px) 0 40px;
  }

  .coming-soon__title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .coming-soon__text {
    font-size: 16px;
  }

  .coming-soon__form {
    flex-direction: column;
    max-width: 100%;
  }

  .coming-soon__input {
    font-size: 16px; /* Prevents iOS zoom */
    min-height: 52px;
  }

  .coming-soon__btn {
    width: 100%;
    min-height: 52px;
  }

  .coming-soon__features {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .coming-soon__feature {
    font-size: 14px;
  }

  /* -- PAGE HERO (inner pages) -- */
  .page-hero {
    min-height: auto;
    padding: calc(var(--header-height) + 40px) 0 40px;
  }

  .page-hero--compact {
    padding: calc(var(--header-height) + 32px) 0 32px;
  }

  .page-hero__title {
    font-size: clamp(28px, 7vw, 44px);
  }

  .page-hero__subtitle {
    font-size: 16px;
    line-height: 1.7;
  }

  /* -- Reduce backdrop-filter complexity for performance -- */
  .pain-card,
  .package-card,
  .solution-card,
  .corridor-card,
  .infra-card,
  .monitoring-item,
  .arch-layer,
  .about-timeline__item,
  .affiliation-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Simpler section glows on mobile */
  .section__glow {
    width: 300px;
    height: 300px;
    filter: blur(80px);
    opacity: 0.4;
  }

  /* Disable hover transforms on touch (no sticky hover) */
  @media (hover: none) {
    .value-card:hover,
    .pain-card:hover,
    .package-card:hover,
    .solution-card:hover,
    .corridor-card:hover,
    .trust-item:hover,
    .case-card:hover,
    .finmodel-card:hover,
    .infra-card:hover,
    .monitoring-item:hover,
    .arch-layer:hover,
    .about-timeline__item:hover,
    .affiliation-card:hover,
    .team-card:hover,
    .geo__country:hover,
    .pricing-item:hover {
      transform: none;
    }

    .btn--primary:hover { transform: none; }
    .btn--primary:active { transform: scale(0.98); }
  }
}

/* ---------- 480px — SMALL PHONES ---------- */
@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
    --section-py: 48px;
    --header-mb: 28px;
    --card-py: 22px;
    --card-px: 18px;
    --card-gap: 12px;
    --cta-py: 48px;
  }

  /* Hero title — still impactful at min 36px */
  .hero__title-line {
    font-size: clamp(36px, 10vw, 44px);
  }

  .hero__subtitle {
    font-size: 15px;
  }

  /* Reduce data streams on small screens */
  .data-stream--9,
  .data-stream--10,
  .data-stream--11,
  .data-stream--12,
  .data-stream--13,
  .data-stream--14,
  .data-stream--15,
  .data-stream--16,
  .data-stream--17,
  .data-stream--18 {
    display: none;
  }

  /* Full-width buttons stacked */
  .hero__actions {
    flex-direction: column;
    gap: 10px;
  }

  .hero__actions .btn {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
  }

  /* Metrics 1-column on small phones */
  .metrics-strip__grid {
    grid-template-columns: 1fr;
  }

  .metric {
    padding: 20px 12px;
  }

  .metric__value {
    font-size: 24px;
  }

  .metric__label {
    font-size: 10px;
  }

  /* Section titles */
  .section__title {
    font-size: clamp(24px, 7vw, 32px);
  }

  .section__subtitle {
    font-size: 14px;
  }

  /* Page hero */
  .page-hero__title {
    font-size: clamp(26px, 8vw, 36px);
  }

  .banks-hero__title {
    font-size: clamp(26px, 8vw, 36px);
  }

  /* Corridor grid — 1 col on very small */
  .corridor-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .corridor-card {
    padding: 14px 16px;
  }

  /* Countries grid */
  .geo__countries {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Trust grid - single column */
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .trust-item {
    padding: 24px 20px;
    text-align: left;
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .trust-item__icon-wrap {
    margin: 0;
    flex-shrink: 0;
  }

  /* Banks hero metrics — still 2x2 */
  .banks-hero__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .banks-hero__metric {
    padding: 18px 12px;
  }

  .banks-hero__metric-value {
    font-size: 22px;
  }

  .banks-hero__metric-label {
    font-size: 11px;
  }

  /* CTA */
  .cta-section {
    padding: var(--cta-py) 0;
  }

  .cta-section__title {
    font-size: clamp(24px, 7vw, 36px);
  }

  /* Tech factors — single column on small phones (bug fix: was overriding 1fr back to 2fr) */
  .tech-factors {
    grid-template-columns: 1fr;
  }

  .tech-factor__value {
    font-size: 22px;
  }

  /* Coming soon */
  .coming-soon__title {
    font-size: clamp(26px, 8vw, 36px);
  }

  /* Finmodel — ensure readability */
  .finmodel-card__label {
    font-size: 13px;
  }

  .finmodel-card__value {
    font-size: 14px;
  }

  /* FAQ */
  .accordion__trigger {
    padding: 16px;
  }

  .accordion__question {
    font-size: 14px;
  }

  .accordion__content p {
    padding: 0 16px 18px;
    font-size: 14px;
  }

}

/* ---------- 375px — iPhone SE / small ---------- */
@media (max-width: 375px) {
  :root {
    --container-padding: 14px;
    --section-py: 40px;
    --header-mb: 24px;
    --card-py: 20px;
    --card-px: 16px;
    --card-gap: 10px;
    --cta-py: 40px;
  }

  .hero__title-line {
    font-size: 36px;
  }

  .banks-hero__title {
    font-size: 28px;
  }

  .page-hero__title {
    font-size: 26px;
  }

  .section__title {
    font-size: 24px;
  }

  .cta-section__title {
    font-size: 24px;
  }

  /* Ensure no text clips */
  .corridor-card__name {
    font-size: 13px;
  }

  .case-card__metric-after {
    font-size: 16px;
  }
}

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --section-py: 40px;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + 20px) 0 40px;
  }

  .hero__content-wrap {
    min-height: auto;
    padding-top: calc(var(--header-height) + 20px);
  }

  .banks-hero {
    min-height: auto;
  }

  .coming-soon {
    min-height: auto;
  }

  .section__title {
    font-size: clamp(24px, 5vw, 32px);
  }

  .section__subtitle {
    font-size: clamp(14px, 2.5vw, 16px);
  }

  .page-hero {
    min-height: auto;
    padding: 80px 0 40px;
  }

  .page-hero__title {
    font-size: clamp(28px, 5vw, 36px);
  }

  .article-header {
    padding: 80px 0 32px;
  }
}

/* ---------- TABLET LANDSCAPE ---------- */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  :root {
    --section-py: 60px;
  }

  .hero {
    min-height: auto;
  }

  .banks-hero {
    min-height: auto;
  }
}

/* ---------- BACKDROP-FILTER FALLBACK ---------- */
@supports not (backdrop-filter: blur(1px)) {
  .header,
  .value-card,
  .audience-card__inner,
  .package-card,
  .mobile-menu {
    background: rgba(10, 22, 40, 0.95);
  }
}

/* Duplicate scroll-behavior removed — already set on html (line 93) */

/* ---------- SAFE AREA INSETS (notch devices) ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer__bottom {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .mobile-menu {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  .hero__content-wrap {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

/* ---------- MOBILE MENU OVERSCROLL ---------- */
.mobile-menu.open {
  overscroll-behavior: contain;
}

/* ---------- FORM PRIVACY NOTE ---------- */
.form-privacy {
  font-size: 13px;
  color: var(--white-50);
  margin-top: 12px;
  text-align: center;
}
.form-privacy__link {
  color: var(--cyan-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: default;
}