/* ============================================================
   UNBANX — GLOBAL STYLESHEET (Light Edition)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --red-900: #7f1d1d;
  --red-800: #991b1b;
  --red-700: #b91c1c;
  --red-600: #dc2626;
  --red-500: #ef4444;
  --red-400: #f87171;
  --red-300: #fca5a5;
  --red-100: #fee2e2;
  --red-50:  #fff5f5;

  --neutral-900: #1a1a2e;
  --neutral-800: #2d2d3a;
  --neutral-700: #4a4a5a;
  --neutral-600: #6b6b7b;
  --neutral-500: #8e8e9e;
  --neutral-400: #aeaebb;
  --neutral-300: #d1d1db;
  --neutral-200: #e8e8f0;
  --neutral-150: #f0f0f6;
  --neutral-100: #f5f5fa;
  --neutral-50:  #fafafd;
  --white:       #ffffff;

  --gradient-hero:    linear-gradient(135deg, #7f1d1d 0%, #991b1b 35%, #b91c1c 65%, #dc2626 100%);
  --bg-page:          #ffffff;
  --bg-section-alt:   #fdf7f7;
  --bg-section-mid:   #fef2f2;

  --gradient-card:    linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  --gradient-cta:     linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:    0 1px 4px rgba(180,30,30,0.08);
  --shadow-md:    0 4px 20px rgba(180,30,30,0.10);
  --shadow-lg:    0 12px 48px rgba(180,30,30,0.14);
  --shadow-card:  0 2px 16px rgba(0,0,0,0.06);
  --shadow-red:   0 8px 32px rgba(185,28,28,0.30);

  --transition:      0.28s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.5s  cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--neutral-700);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button,input,select,textarea { font-family:inherit; }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; color:var(--neutral-900); }
h2 { font-size:clamp(1.7rem,3.5vw,2.8rem); font-weight:700; color:var(--neutral-900); }
h3 { font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; color:var(--neutral-900); }
h4 { font-size:1.1rem; font-weight:600; color:var(--neutral-800); }
p  { font-size:1rem; font-weight:300; color:var(--neutral-600); }

/* White headings on dark backgrounds */
.hero h1,.hero h2,.hero h3,
.cta-band h1,.cta-band h2,
.page-hero h1 { color:var(--white); }

.section-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-700);
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.20);
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.1rem;
}
.hero .section-label,
.cta-band .section-label,
.page-hero .section-label {
  color: var(--red-300);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* ---------- Layout ---------- */
.container { width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }
.section    { padding:96px 0; }
.section--sm { padding:64px 0; }
.section--tinted { background:var(--bg-section-alt); }
.section--mid    { background:var(--bg-section-mid); }

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

.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-16 { gap:16px; }
.gap-24 { gap:24px; }
.text-center { text-align:center; }

.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-40 { margin-top:40px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.mb-40 { margin-bottom:40px; }
.mb-56 { margin-bottom:56px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--gradient-cta);
  color: var(--white);
  box-shadow: var(--shadow-red);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(220,38,38,0.45);
}
.btn--outline {
  background: transparent;
  color: var(--red-700);
  border: 1.5px solid var(--red-600);
}
.btn--outline:hover {
  background: rgba(220,38,38,0.06);
  border-color: var(--red-700);
}
.hero .btn--outline,
.cta-band .btn--outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.40);
}
.hero .btn--outline:hover,
.cta-band .btn--outline:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.65);
}
.btn--ghost {
  background: rgba(220,38,38,0.07);
  color: var(--red-700);
  border: 1px solid rgba(220,38,38,0.18);
}
.btn--ghost:hover { background:rgba(220,38,38,0.12); }
.btn--lg   { padding:17px 40px; font-size:1rem; }
.btn--full { width:100%; justify-content:center; }

/* CTA band white button */
.cta-band .btn--primary {
  background: var(--white);
  color: var(--red-700);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.cta-band .btn--primary:hover {
  background: var(--red-50);
  box-shadow: 0 14px 44px rgba(0,0,0,0.22);
}
/* Transparent nav button before scroll */
.site-header:not(.scrolled) .btn--primary {
  background: rgba(255,255,255,0.18);
  box-shadow: none;
  border: 1.5px solid rgba(255,255,255,0.40);
  color: var(--white);
}
.site-header:not(.scrolled) .btn--primary:hover {
  background: rgba(255,255,255,0.28);
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color: rgba(220,38,38,0.22);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.card--dark {
  background: var(--neutral-50);
  border-color: var(--neutral-200);
}
.card--dark h4 { color:var(--neutral-900); }
.card--dark p  { color:var(--neutral-600); }

/* ---------- Icon Box ---------- */
.icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--red-50);
  border: 1px solid rgba(220,38,38,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.icon-box svg {
  width:24px; height:24px;
  stroke:var(--red-700);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Divider ---------- */
.divider {
  width:48px; height:3px;
  background:var(--gradient-cta);
  border-radius:100px;
  margin:16px 0 24px;
}

/* ---------- Badge ---------- */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.78rem; font-weight:500;
  padding:5px 12px; border-radius:100px;
}
.badge--green {
  background:rgba(16,185,129,0.10);
  color:#065f46;
  border:1px solid rgba(16,185,129,0.25);
}
.badge--red {
  background:rgba(220,38,38,0.08);
  color:var(--red-800);
  border:1px solid rgba(220,38,38,0.20);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 0;
  background: transparent;
  transition: background var(--transition-slow), box-shadow var(--transition-slow);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--neutral-200), 0 4px 24px rgba(0,0,0,0.06);
}

.header-inner {
  display:flex; align-items:center; justify-content:space-between; height:72px;
}

.logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.45rem; font-weight:800;
  color:var(--white);
  letter-spacing:-0.03em;
  transition:color var(--transition);
}
.site-header.scrolled .logo { color:var(--neutral-900); }

.logo-mark {
  width:36px; height:36px;
  background:var(--gradient-cta);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(220,38,38,0.40);
}
.logo-mark svg {
  width:20px; height:20px;
  stroke:var(--white); fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.logo-text span { color:var(--red-300); }
.site-header.scrolled .logo-text span { color:var(--red-600); }

.nav-menu { display:flex; align-items:center; gap:4px; }
.nav-link {
  font-family:var(--font-body);
  font-size:0.9rem; font-weight:400;
  color:rgba(255,255,255,0.82);
  padding:8px 14px; border-radius:var(--radius-sm);
  transition:color var(--transition), background var(--transition);
  white-space:nowrap;
}
.nav-link:hover { color:var(--white); background:rgba(255,255,255,0.10); }
.nav-link.active { color:var(--white); font-weight:500; }

.site-header.scrolled .nav-link { color:var(--neutral-600); }
.site-header.scrolled .nav-link:hover { color:var(--neutral-900); background:var(--neutral-100); }
.site-header.scrolled .nav-link.active { color:var(--red-700); }

.nav-actions { display:flex; align-items:center; gap:12px; }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; border:none; background:none;
}
.hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--white); border-radius:2px;
  transition:all var(--transition);
}
.site-header.scrolled .hamburger span { background:var(--neutral-700); }

.mobile-menu {
  display:none; position:fixed;
  top:72px; left:0; right:0;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--neutral-200);
  padding:20px 24px 28px;
  z-index:99;
  flex-direction:column; gap:4px;
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
}
.mobile-menu.open { display:flex; }
.mobile-menu .nav-link { font-size:1rem; padding:12px 16px; color:var(--neutral-700); }
.mobile-menu .nav-link:hover { color:var(--red-700); background:var(--red-50); }
.mobile-menu .nav-link.active { color:var(--red-700); }
.mobile-menu .btn { margin-top:8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--neutral-900);
  padding: 72px 0 32px;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-footer .logo { color:var(--white); }
.site-footer .logo-text span { color:var(--red-400); }
.footer-brand p {
  font-size:0.9rem; color:rgba(255,255,255,0.45);
  max-width:280px; margin-top:14px; line-height:1.7;
}
.footer-col h5 {
  font-family:var(--font-display);
  font-size:0.78rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.40); margin-bottom:18px;
}
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:0.9rem; color:rgba(255,255,255,0.55); transition:color var(--transition); }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:28px; flex-wrap:wrap; gap:16px;
}
.footer-bottom p { font-size:0.83rem; color:rgba(255,255,255,0.28); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { font-size:0.83rem; color:rgba(255,255,255,0.30); transition:color var(--transition); }
.footer-legal a:hover { color:rgba(255,255,255,0.65); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  /*
    Базовий фон: майже чорний → темно-бордо → насичений
    Зверху накладаються кольорові орби
  */
  background:
    /* яскраво-рожевий акцент зверху-праворуч */
    radial-gradient(ellipse 55% 45% at 82% 8%,  rgba(248,113,113,0.38) 0%, transparent 55%),
    /* золотаво-помаранчевий теплий відтінок знизу-ліворуч */
    radial-gradient(ellipse 50% 40% at 8%  88%,  rgba(251,146,60,0.18)  0%, transparent 55%),
    /* насичений середній орб */
    radial-gradient(ellipse 70% 55% at 45% 55%,  rgba(185,28,28,0.55)   0%, transparent 65%),
    /* базовий темний шар */
    linear-gradient(150deg, #1a0404 0%, #4a0a0a 35%, #7f1d1d 65%, #991b1b 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 72px;
}

/* ---- Floating orbs keyframes ---- */
@keyframes float-slow {
  0%,100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-28px) scale(1.04); }
}
@keyframes float-mid {
  0%,100% { transform: translateY(0px) translateX(0px); }
  33%      { transform: translateY(-18px) translateX(10px); }
  66%      { transform: translateY(10px) translateX(-8px); }
}
@keyframes float-fast {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}
@keyframes pulse-ring {
  0%,100% { opacity: 0.12; transform: scale(1); }
  50%      { opacity: 0.22; transform: scale(1.06); }
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Орб 1 — великий, яскраво-рожевий, праворуч-зверху */
.hero-bg::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -12%;
  width: 60vw;
  height: 60vw;
  max-width: 680px;
  max-height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(248,113,113,0.45) 0%,
    rgba(220,38,38,0.25)   35%,
    rgba(185,28,28,0.08)   60%,
    transparent            80%);
  animation: float-slow 9s ease-in-out infinite;
  will-change: transform;
}

/* Орб 2 — середній, теплий, знизу-ліворуч */
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -18%;
  left: -10%;
  width: 45vw;
  height: 45vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(239,68,68,0.35)   0%,
    rgba(127,29,29,0.20)   45%,
    transparent            72%);
  animation: float-mid 13s ease-in-out infinite;
  will-change: transform;
}

/* Контурні кільця */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Кільце 1 — велике, чітке, правий бік */
.hero-ring--1 {
  width: 54vw; height: 54vw;
  max-width: 580px; max-height: 580px;
  top: 3%; right: -10%;
  border: 1.5px solid rgba(248,113,113,0.22);
  animation: pulse-ring 7s ease-in-out infinite;
}

/* Кільце 2 — менше, центр-право */
.hero-ring--2 {
  width: 30vw; height: 30vw;
  max-width: 320px; max-height: 320px;
  top: 22%; right: 6%;
  border: 1px solid rgba(239,68,68,0.28);
  animation: pulse-ring 5s ease-in-out infinite 2s;
}

/* Кільце 3 — маленьке, знизу-ліво */
.hero-ring--3 {
  width: 22vw; height: 22vw;
  max-width: 240px; max-height: 240px;
  bottom: 10%; left: -3%;
  border: 1px solid rgba(255,255,255,0.12);
  animation: float-fast 8s ease-in-out infinite 1s;
}

/* Мікро-орб у центрі кільця 1 — «зірка» акцент */
.hero-ring--1::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252,165,165,0.20) 0%, transparent 70%);
}

/* Зупиняємо анімацію для людей з prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before,
  .hero-bg::after,
  .hero-ring { animation: none; }
}

.hero-content {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr minmax(0, 420px);
  gap:60px; align-items:center;
  padding:80px 0 100px;
  width:100%;
}
.hero-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.hero-eyebrow-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--red-300);
  box-shadow:0 0 12px rgba(252,165,165,0.6);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.45; transform:scale(0.75); }
}
.hero-eyebrow span {
  font-size:0.82rem; font-weight:400;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
.hero-title { margin-bottom:24px; }
.hero-title em { font-style:normal; color:var(--red-300); }
.hero-subtitle {
  font-size:1.08rem;
  color:rgba(255,255,255,0.72);
  max-width:520px; margin-bottom:40px;
  font-weight:300; line-height:1.78;
}
.hero-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.hero-trust {
  display:flex; align-items:center; gap:28px;
  margin-top:52px; padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.14);
  flex-wrap:wrap;
}
.trust-stat strong {
  display:block;
  font-family:var(--font-display); font-size:1.5rem;
  font-weight:800; color:var(--white); letter-spacing:-0.03em;
}
.trust-stat span { font-size:0.8rem; color:rgba(255,255,255,0.55); font-weight:400; }
.trust-divider { width:1px; height:40px; background:rgba(255,255,255,0.18); }

.hero-video-block {
  margin-top:40px; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.15);
}
.video-placeholder {
  aspect-ratio:16/9;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg,rgba(127,29,29,0.55),rgba(180,30,30,0.30));
}
.play-button {
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 10px rgba(255,255,255,0.14),0 8px 32px rgba(0,0,0,0.20);
  cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition);
}
.play-button:hover {
  transform:scale(1.08);
  box-shadow:0 0 0 16px rgba(255,255,255,0.10),0 12px 40px rgba(0,0,0,0.25);
}
.play-button svg { width:22px; height:22px; fill:var(--red-700); margin-left:3px; }
.video-placeholder p { font-size:0.85rem; color:rgba(255,255,255,0.65); }

/* ============================================================
   REGISTRATION FORM
   ============================================================ */
.reg-form-card {
  background:var(--white);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-xl);
  padding:40px 36px;
  box-shadow:0 20px 60px rgba(127,29,29,0.18),0 4px 16px rgba(0,0,0,0.08);
  position:relative; overflow:hidden;
}
.reg-form-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:4px;
  background:var(--gradient-cta);
}
.reg-form-card h3 { font-size:1.35rem; margin-bottom:6px; color:var(--neutral-900); }
.reg-form-card .form-subtitle { font-size:0.88rem; color:var(--neutral-500); margin-bottom:28px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:0.8rem; font-weight:500;
  color:var(--neutral-700); margin-bottom:7px; letter-spacing:0.02em;
}
.form-control {
  width:100%;
  background:var(--neutral-50);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-sm);
  color:var(--neutral-900);
  font-size:0.9rem; padding:12px 16px;
  transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
  outline:none; -webkit-appearance:none;
}
.form-control::placeholder { color:var(--neutral-400); }
.form-control:focus {
  border-color:var(--red-600);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(220,38,38,0.10);
}
select.form-control {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238e8e9e'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:40px;
}
select.form-control option { background:var(--white); color:var(--neutral-900); }
.form-notice { font-size:0.75rem; color:var(--neutral-500); margin-top:10px; line-height:1.55; }
.form-notice a { color:var(--red-700); text-decoration:underline; }
.error-message { display:none; font-size:0.75rem; color:var(--red-600); margin-top:4px; }
.form-group.has-error .error-message { display:block; }
.form-group.has-error .form-control {
  border-color:var(--red-500);
  box-shadow:0 0 0 3px rgba(220,38,38,0.10);
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background:var(--white);
  border-top:1px solid var(--neutral-200);
  border-bottom:1px solid var(--neutral-200);
  padding:28px 0;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.trust-bar-inner {
  display:flex; align-items:center;
  gap:24px;
  /* Desktop: spread; Mobile: horizontal scroll */
  justify-content:space-between;
  flex-wrap:nowrap;
}
.trust-item { display:flex; align-items:center; gap:12px; }
.trust-item-icon {
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:var(--red-50); border:1px solid rgba(220,38,38,0.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.trust-item-icon svg {
  width:18px; height:18px;
  stroke:var(--red-700); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.trust-item-text strong {
  display:block; font-size:0.87rem; font-weight:600;
  color:var(--neutral-800); font-family:var(--font-display);
}
.trust-item-text span { font-size:0.77rem; color:var(--neutral-500); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section { background:var(--bg-section-alt); }
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; position:relative; margin-top:60px;
}
.steps-grid::before {
  content:''; position:absolute;
  top:36px;
  left:calc(12.5% + 20px); right:calc(12.5% + 20px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,38,38,0.28) 20%,rgba(220,38,38,0.28) 80%,transparent);
}
.step-item { text-align:center; padding:0 20px; }
.step-number {
  width:72px; height:72px; border-radius:50%;
  background:var(--white);
  border:2px solid rgba(220,38,38,0.28);
  box-shadow:0 4px 16px rgba(220,38,38,0.10);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px;
  font-family:var(--font-display); font-size:1.3rem;
  font-weight:800; color:var(--red-700);
  position:relative; z-index:1;
}
.step-item h4 { margin-bottom:10px; font-size:1rem; }
.step-item p  { font-size:0.87rem; color:var(--neutral-500); line-height:1.65; }

/* ============================================================
   FEATURES
   ============================================================ */
.features-section { background:var(--white); position:relative; overflow:hidden; }
.features-section::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle,rgba(254,226,226,0.40) 0%,transparent 65%);
  pointer-events:none;
}
.features-header { max-width:560px; }
.feature-card { padding:32px 28px; }
.feature-card h4 { margin-bottom:10px; }
.feature-card p  { font-size:0.88rem; color:var(--neutral-500); line-height:1.65; }

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits-section { background:var(--bg-section-alt); }
.benefits-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.benefits-list { margin-top:36px; display:flex; flex-direction:column; gap:20px; }
.benefit-item { display:flex; gap:16px; align-items:flex-start; }
.benefit-check {
  width:24px; height:24px; border-radius:50%;
  background:var(--red-50); border:1px solid rgba(220,38,38,0.25);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}
.benefit-check svg {
  width:12px; height:12px;
  stroke:var(--red-700); fill:none;
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
.benefit-item-text h4 { font-size:0.97rem; margin-bottom:4px; }
.benefit-item-text p  { font-size:0.85rem; color:var(--neutral-500); }
.benefits-visual { border-radius:var(--radius-xl); overflow:hidden; }
.benefits-visual-inner {
  background:var(--white);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-xl);
  padding:36px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--shadow-md);
}
.stat-row {
  background:var(--neutral-50);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-md);
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.stat-row-label { font-size:0.85rem; color:var(--neutral-600); }
.stat-row-value { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--neutral-900); }
.stat-row-change { font-size:0.78rem; font-weight:600; color:#059669; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background:var(--gradient-hero);
  position:relative; overflow:hidden; padding:80px 0;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 65%);
  pointer-events:none;
}
.cta-band-inner {
  position:relative; z-index:1;
  text-align:center; max-width:640px; margin:0 auto;
}
.cta-band-inner p { font-size:1.05rem; color:rgba(255,255,255,0.72); margin:16px 0 36px; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background:var(--gradient-hero);
  position:relative; overflow:hidden;
  padding:140px 0 80px; text-align:center;
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.07) 0%,transparent 60%);
  pointer-events:none;
}
.page-hero-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.page-hero h1 { font-size:clamp(2rem,4vw,3rem); color:var(--white); }
.page-hero p  { font-size:1.05rem; color:rgba(255,255,255,0.72); margin-top:16px; line-height:1.7; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-story { background:var(--white); }
.about-story-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-story-text p { color:var(--neutral-600); margin-bottom:18px; line-height:1.8; font-size:0.97rem; }
.values-section { background:var(--bg-section-alt); }
.team-section   { background:var(--white); }
.team-card { text-align:center; }
.team-avatar {
  width:88px; height:88px; border-radius:50%;
  background:var(--red-50); border:2px solid rgba(220,38,38,0.20);
  margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--red-700);
  box-shadow:0 4px 16px rgba(220,38,38,0.10);
}
.team-card h4  { margin-bottom:4px; }
.team-card .role { font-size:0.82rem; color:var(--neutral-500); }

/* ============================================================
   OVERVIEW PAGE
   ============================================================ */
.overview-section { background:var(--white); }
.plan-card {
  border-radius:var(--radius-lg);
  border:1px solid var(--neutral-200);
  background:var(--white);
  overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.plan-card:hover { transform:translateY(-4px); border-color:rgba(220,38,38,0.22); box-shadow:var(--shadow-md); }
.plan-card--featured { border-color:var(--red-600); box-shadow:0 8px 40px rgba(220,38,38,0.14); }
.plan-header { padding:28px 28px 20px; background:var(--neutral-50); border-bottom:1px solid var(--neutral-200); }
.plan-header--featured { background:var(--red-50); border-bottom-color:rgba(220,38,38,0.15); }
.plan-badge {
  display:inline-block; font-size:0.72rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--red-700); background:rgba(220,38,38,0.08);
  border:1px solid rgba(220,38,38,0.20);
  padding:3px 10px; border-radius:100px; margin-bottom:12px;
}
.plan-header h3 { font-size:1.25rem; margin-bottom:4px; color:var(--neutral-900); }
.plan-header .plan-desc { font-size:0.85rem; color:var(--neutral-500); }
.plan-body { padding:24px 28px 28px; }
.plan-feature {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--neutral-100);
  font-size:0.88rem; color:var(--neutral-600);
}
.plan-feature:last-child { border-bottom:none; }
.plan-feature svg {
  width:15px; height:15px; stroke:var(--red-600); fill:none;
  stroke-width:2.2; flex-shrink:0; margin-top:2px;
}

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.reviews-section { background:var(--bg-section-alt); }
.review-card { padding:32px 28px; }
.review-stars { display:flex; gap:3px; margin-bottom:16px; }
.review-stars svg { width:16px; height:16px; fill:#f59e0b; stroke:none; }
.review-text {
  font-size:0.92rem; color:var(--neutral-600);
  line-height:1.75; margin-bottom:20px; font-style:italic;
}
.reviewer { display:flex; align-items:center; gap:12px; }
.reviewer-avatar {
  width:42px; height:42px; border-radius:50%;
  background:var(--red-50); border:1.5px solid rgba(220,38,38,0.20);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:0.95rem;
  font-weight:700; color:var(--red-700); flex-shrink:0;
}
.reviewer-name { font-size:0.87rem; font-weight:600; color:var(--neutral-900); }
.reviewer-meta { font-size:0.77rem; color:var(--neutral-500); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { background:var(--white); }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; align-items:start; }
.contact-info p { font-size:0.92rem; color:var(--neutral-500); line-height:1.75; margin-bottom:32px; }
.contact-detail { display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-detail-icon {
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:var(--red-50); border:1px solid rgba(220,38,38,0.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-detail-icon svg {
  width:18px; height:18px; stroke:var(--red-700); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.contact-detail-text strong { display:block; font-size:0.85rem; font-weight:600; color:var(--neutral-800); margin-bottom:2px; }
.contact-detail-text span   { font-size:0.85rem; color:var(--neutral-500); }
textarea.form-control { resize:vertical; min-height:120px; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-section { background:var(--white); }
.legal-content { max-width:800px; margin:0 auto; }
.legal-content h2 {
  font-size:1.4rem; margin:48px 0 16px; color:var(--neutral-900);
  padding-top:8px; border-top:1px solid var(--neutral-200);
}
.legal-content h2:first-child { margin-top:0; border-top:none; }
.legal-content p { font-size:0.95rem; color:var(--neutral-600); line-height:1.85; margin-bottom:16px; }
.legal-content ul { margin:0 0 16px 24px; list-style:disc; }
.legal-content ul li { font-size:0.95rem; color:var(--neutral-600); line-height:1.8; margin-bottom:8px; }
.legal-updated {
  font-size:0.83rem; color:var(--neutral-400);
  margin-bottom:48px; padding-bottom:32px;
  border-bottom:1px solid var(--neutral-200);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header { max-width:600px; }
.section-header--center { max-width:600px; margin-left:auto; margin-right:auto; }
.section-header p { font-size:1rem; color:var(--neutral-500); margin-top:14px; line-height:1.75; font-weight:300; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }



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

/* Root-level overflow lock */
html,
body { overflow-x: hidden; }

/* Safe defaults for all media */
img, video, iframe { max-width: 100%; }

/* Tables always scroll inside their wrapper */
.comparison-table-wrap,
.fee-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.comparison-table,
.fee-table-wrap table { min-width: 540px; }

/* ── 1100px ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-content {
    grid-template-columns: 1fr minmax(0, 340px);
    gap: 32px;
    padding: 64px 0 80px;
  }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .steps-grid::before { display: none; }
  .split-grid { gap: 40px; }
  .split-visual     { display: none; }
  .dashboard-mockup { display: none; }
  .comparison-table th,
  .comparison-table td { padding: 12px 12px; font-size: 0.83rem; }
}

/* ── 900px ───────────────────────────────────────────── */
@media (max-width: 900px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }

  .section     { padding: 68px 0; }
  .section--sm { padding: 44px 0; }

  /* Hero stacks vertically */
  .hero-content {
    grid-template-columns: 1fr;
    padding: 48px 0 60px;
    gap: 36px;
  }
  .hero-subtitle { max-width: 100%; }
  .reg-form-card { max-width: 520px; margin: 0 auto; }

  /* Generic grids */
  .grid-2 { grid-template-columns: 1fr; gap: 18px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Named grids */
  .about-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .benefits-grid    { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid     { grid-template-columns: 1fr; gap: 28px; }
  .faq-grid         { grid-template-columns: 1fr; }
  .split-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Reset order on all breakpoints — content always first on mobile */
  .split-grid > * { order: unset !important; width: 100%; }
  .split-visual   { display: none; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-grid .footer-col:last-child { grid-column: auto; }

  /* Trust bar → horizontal scroll strip */
  .trust-bar { padding: 0; }
  .trust-bar .container { padding: 0; }
  .trust-bar-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 18px 16px;
  }
  .trust-bar-inner::-webkit-scrollbar { display: none; }
  .trust-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding-right: 20px;
    border-right: 1px solid var(--neutral-200);
    margin-right: 20px;
    white-space: nowrap;
  }
  .trust-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }

  /* Proof banner */
  .proof-sep { display: none; }
  .proof-banner-inner { flex-wrap: wrap; justify-content: center; gap: 20px; }
}

/* ── 600px ───────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Typography */
  h1 { font-size: 1.8rem; line-height: 1.18; letter-spacing: -0.02em; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.05rem; }
  h4 { font-size: 0.95rem; }

  /* Spacing */
  .section     { padding: 52px 0; }
  .section--sm { padding: 32px 0; }
  .mb-56       { margin-bottom: 28px; }
  .container   { padding: 0 16px; }

  /* Nav */
  .nav-menu, .nav-actions { display: none; }
  .hamburger              { display: flex; }

  /* Page hero */
  .page-hero    { padding: 96px 0 48px; }
  .page-hero h1 { font-size: 1.6rem; }
  .page-hero p  { font-size: 0.9rem; }

  /* Hero */
  .hero-content  { padding: 32px 0 48px; gap: 24px; }
  .hero-subtitle { font-size: 0.9rem; margin-bottom: 20px; }

  /* Hero buttons */
  .hero-actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Hero trust stats */
  .hero-trust        { gap: 12px; margin-top: 20px; padding-top: 18px; flex-wrap: wrap; }
  .trust-divider     { display: none; }
  .trust-stat strong { font-size: 1.1rem; }
  .trust-stat span   { font-size: 0.7rem; }

  /* Hero video — stays inside column */
  .hero-video-block { margin-top: 20px; }
  .play-button      { width: 48px; height: 48px; }
  .play-button svg  { width: 17px; height: 17px; }

  /* Registration form */
  .reg-form-card           { padding: 22px 16px; border-radius: 16px; max-width: 100%; }
  .reg-form-card h3        { font-size: 1.05rem; }
  .reg-form-card .form-subtitle { font-size: 0.83rem; margin-bottom: 16px; }
  .form-row                { grid-template-columns: 1fr; gap: 0; }
  .form-group              { margin-bottom: 11px; }
  .form-control            { padding: 10px 12px; font-size: 0.87rem; }

  /* Trust bar stays as horizontal scroll (set at 900px) */
  .trust-item-text strong { font-size: 0.82rem; }
  .trust-item-text span   { font-size: 0.71rem; }

  /* All grids → single column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 14px; }
  .steps-grid { grid-template-columns: 1fr; gap: 22px; }

  /* Cards */
  .card         { padding: 20px 16px; border-radius: 14px; }
  .feature-card { padding: 20px 16px; }

  /* Review cards → horizontal scroll */
  .reviews-section .grid-3,
  .testimonial-section .grid-3 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 12px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .reviews-section .grid-3 > *,
  .testimonial-section .grid-3 > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
    max-width: 320px;
  }
  /* Hide scrollbar but keep scrollable */
  .reviews-section .grid-3::-webkit-scrollbar,
  .testimonial-section .grid-3::-webkit-scrollbar { display: none; }

  /* Steps */
  .step-number { width: 50px; height: 50px; font-size: 0.95rem; margin-bottom: 12px; }
  .step-item p { font-size: 0.84rem; }

  /* Section label */
  .section-label { font-size: 0.65rem; padding: 0.22rem 0.7rem; }

  /* Benefits visual */
  .benefits-visual-inner { padding: 18px 14px; gap: 10px; }
  .stat-row              { padding: 11px 13px; }
  .stat-row-value        { font-size: 0.88rem; }

  /* flex-between row → column */
  .flex-between { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* FAQ */
  .faq-group-title { font-size: 0.68rem; }
  .faq-question    { font-size: 0.86rem; padding: 13px 0; }
  .faq-answer p    { font-size: 0.83rem; line-height: 1.65; }
  .faq-grid .faq-col + .faq-col {
    border-top: 1px solid var(--neutral-200);
    padding-top: 8px;
  }

  /* Comparison / fee table */
  .comparison-table th,
  .comparison-table td { padding: 9px 9px; font-size: 0.73rem; white-space: nowrap; }

  /* Proof banner */
  .proof-banner       { padding: 24px 0; }
  .proof-banner-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; justify-items: center; }
  .proof-item strong  { font-size: 1.25rem; }
  .proof-item span    { font-size: 0.7rem; }

  /* CTA band */
  .cta-band         { padding: 48px 0; }
  .cta-band-inner p { font-size: 0.9rem; margin: 10px 0 22px; }
  .cta-band-inner .flex-center {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .cta-band-inner .flex-center .btn { width: 100%; justify-content: center; }

  /* Security & dashboard split — full width, force visibility */
  .split-visual   { display: none !important; }
  .split-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .split-content {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    order: 1 !important;
  }

  /* Force reveal visible for split-content on mobile
     (IntersectionObserver may miss it when sibling is display:none) */
  .split-grid .split-content.reveal,
  .split-grid .split-content.reveal.reveal-delay-2 {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  /* Security layers — full display */
  .security-layers  { margin-top: 16px; display: flex; flex-direction: column; gap: 0; }
  .security-layer   {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--neutral-200);
  }
  .security-layer:last-child { border-bottom: none; }
  .layer-number     { font-size: 0.64rem; padding: 3px 7px; flex-shrink: 0; margin-top: 2px; }
  .layer-content h4 { font-size: 0.88rem; margin-bottom: 4px; }
  .layer-content p  { font-size: 0.81rem; line-height: 1.6; }

  /* Dashboard features — also force visible */
  .split-grid .dashboard-feature { display: flex; }

  /* Plan cards */
  .plan-header  { padding: 18px 16px 14px; }
  .plan-body    { padding: 14px 16px 18px; }
  .plan-feature { font-size: 0.82rem; padding: 7px 0; gap: 8px; }

  /* Team */
  .team-avatar { width: 64px; height: 64px; font-size: 1.1rem; }

  /* Audience */
  .audience-icon    { width: 42px; height: 42px; }
  .audience-list li { font-size: 0.81rem; }

  /* Dashboard features */
  .dashboard-feature { gap: 12px; padding: 13px 0; }
  .df-icon           { width: 34px; height: 34px; flex-shrink: 0; }
  .df-icon svg       { width: 14px; height: 14px; }

  /* Contact */
  .contact-detail { margin-bottom: 14px; }

  /* Legal */
  .legal-content h2    { font-size: 1.05rem; margin: 28px 0 10px; }
  .legal-content p,
  .legal-content ul li { font-size: 0.86rem; }

  /* Strategy alloc bars */
  .alloc-label { width: 70px; font-size: 0.71rem; }
  .alloc-pct   { font-size: 0.71rem; width: 22px; }
  .strategy-meta { padding-top: 12px; }

  /* Risk notice */
  .risk-notice   { flex-direction: column; gap: 8px; padding: 12px 14px; }
  .risk-notice p { font-size: 0.79rem; }

  /* Footer */
  .footer-grid    { grid-template-columns: 1fr; gap: 22px; padding-bottom: 24px; }
  .footer-grid .footer-col:last-child { grid-column: auto; }
  .footer-bottom  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom p { font-size: 0.76rem; line-height: 1.6; }
  .site-footer    { padding: 44px 0 24px; }
}

/* ── 400px ───────────────────────────────────────────── */
@media (max-width: 400px) {
  .container    { padding: 0 12px; }
  h1            { font-size: 1.55rem; }
  h2            { font-size: 1.25rem; }
  .section      { padding: 44px 0; }
  .page-hero    { padding: 88px 0 40px; }
  .page-hero h1 { font-size: 1.38rem; }
  .hero-content { padding: 28px 0 40px; }
  .btn          { padding: 11px 18px; font-size: 0.84rem; }
  .btn--lg      { padding: 13px 22px; }
  .reg-form-card { padding: 18px 12px; }
  .card          { padding: 16px 12px; }
  .logo          { font-size: 1.2rem; }
  .logo-mark     { width: 28px; height: 28px; border-radius: 7px; }
  .logo-mark svg { width: 15px; height: 15px; }
  .proof-banner-inner { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .proof-item strong  { font-size: 1.15rem; }
  .trust-item-icon     { width: 30px; height: 30px; }
  .trust-item-icon svg { width: 13px; height: 13px; }
  .step-number   { width: 46px; height: 46px; font-size: 0.9rem; }
  .icon-box      { width: 42px; height: 42px; }
  .icon-box svg  { width: 19px; height: 19px; }
  .faq-question  { font-size: 0.83rem; }
  .faq-answer p  { font-size: 0.8rem; }
  .cta-band      { padding: 40px 0; }
  /* Review cards even smaller on tiny phones */
  .reviews-section .grid-3 > *,
  .testimonial-section .grid-3 > * {
    flex: 0 0 90%;
  }
}

/* ============================================================
   SECURITY SPLIT SECTION
   ============================================================ */
.security-split  { background: var(--bg-section-alt); }
.dashboard-preview-section { background: var(--white); }

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  width: 100%;
}
/* Children must never overflow their cell */
.split-grid > * { min-width: 0; width: 100%; }

.split-grid--reverse { direction: ltr; }
.split-grid--reverse .split-visual  { order: 2; }
.split-grid--reverse .split-content { order: 1; }

/* Security illustration */
.security-illustration {
  position: relative;
  width: min(380px, 100%);
  height: min(380px, 100vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(220,38,38,0.15);
}
.sec-ring--outer { width: 380px; height: 380px; }
.sec-ring--mid   { width: 270px; height: 270px; }
.sec-ring--inner { width: 160px; height: 160px; border-color: rgba(220,38,38,0.25); }
.sec-core {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--gradient-cta);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(220,38,38,0.30);
  position: relative; z-index: 2;
}
.sec-core svg { width: 36px; height: 36px; stroke: var(--white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sec-badge {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 0.78rem; font-weight: 600; color: var(--neutral-800);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.sec-badge svg { flex-shrink: 0; stroke: var(--red-700); }
.sec-badge--1 { top: 14%;  right: -8px; }
.sec-badge--2 { bottom: 28%; left: -16px; }
.sec-badge--3 { bottom: 8%; right: 4px; }

/* Security layer list */
.security-layers { margin-top: 32px; display: flex; flex-direction: column; gap: 0; }
.security-layer {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.security-layer:last-child { border-bottom: none; }
.layer-number {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 800;
  color: var(--red-700);
  background: var(--red-50);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: 6px;
  padding: 4px 9px;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.layer-content h4 { font-size: 0.97rem; margin-bottom: 6px; }
.layer-content p  { font-size: 0.85rem; color: var(--neutral-500); line-height: 1.65; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.comparison-section { background: var(--bg-section-alt); }
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-card);
}
.comparison-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.9rem;
}
.comparison-table thead tr {
  background: var(--neutral-50);
  border-bottom: 2px solid var(--neutral-200);
}
.comparison-table th {
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--neutral-500);
  text-align: left;
}
.comparison-table .col-unbanx {
  background: var(--red-50);
  border-left: 2px solid rgba(220,38,38,0.20);
  border-right: 2px solid rgba(220,38,38,0.20);
}
.comparison-table thead .col-unbanx {
  color: var(--red-700);
  background: rgba(220,38,38,0.08);
}
.comparison-table tbody tr {
  border-bottom: 1px solid var(--neutral-100);
  transition: background var(--transition);
}
.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--neutral-50); }
.comparison-table td {
  padding: 14px 20px;
  color: var(--neutral-600);
}
.comparison-table td:first-child { font-weight: 500; color: var(--neutral-800); }

.cmp-yes     { color: #059669; font-weight: 600; }
.cmp-partial { color: #d97706; font-weight: 500; }
.cmp-no      { color: var(--neutral-400); font-weight: 400; }

/* ============================================================
   AUDIENCE SECTION
   ============================================================ */
.audience-section { background: var(--white); }
.audience-card {}
.audience-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--red-50);
  border: 1px solid rgba(220,38,38,0.18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.audience-icon svg { width: 26px; height: 26px; stroke: var(--red-700); }
.audience-icon--featured { background: var(--gradient-cta); border-color: transparent; }
.audience-icon--featured svg { stroke: var(--white); }
.audience-card--featured {
  border-color: var(--red-600);
  box-shadow: 0 8px 40px rgba(220,38,38,0.12);
}

.audience-list { margin-top: 0; display: flex; flex-direction: column; gap: 8px; }
.audience-list li {
  font-size: 0.85rem; color: var(--neutral-600);
  padding-left: 18px; position: relative; line-height: 1.5;
}
.audience-list li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red-500);
}

/* ============================================================
   DASHBOARD MOCKUP
   ============================================================ */
.dashboard-features { margin-top: 32px; display: flex; flex-direction: column; gap: 0; }
.dashboard-feature {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.dashboard-feature:last-child { border-bottom: none; }
.df-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--red-50);
  border: 1px solid rgba(220,38,38,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.df-icon svg { width: 18px; height: 18px; stroke: var(--red-700); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dashboard-mockup { position: relative; }
.mockup-window {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 64px rgba(0,0,0,0.10);
  overflow: hidden;
}
.mockup-titlebar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
}
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--neutral-300);
}
.mockup-url {
  font-size: 0.75rem; color: var(--neutral-400);
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 100px;
  padding: 3px 12px;
}
.mockup-body { padding: 24px; }
.mockup-header-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px;
}
.mockup-label { font-size: 0.75rem; color: var(--neutral-500); margin-bottom: 4px; }
.mockup-big-value {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 800;
  color: var(--neutral-900); letter-spacing: -0.03em; line-height: 1;
}
.mockup-change { font-size: 0.78rem; color: var(--neutral-500); margin-top: 4px; }
.mockup-badge-group { display: flex; gap: 6px; padding-top: 4px; }
.mockup-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(5,150,105,0.10);
  color: #059669;
  border: 1px solid rgba(5,150,105,0.22);
}
.mockup-badge::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: #059669; display: inline-block;
}

/* Mini chart */
.mockup-chart {
  display: flex; align-items: flex-end; gap: 5px;
  height: 72px; margin-bottom: 20px;
  padding: 0 2px;
}
.mchart-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: var(--red-100);
  transition: background var(--transition);
}
.mchart-bar--active { background: var(--gradient-cta); }

/* Asset rows in mockup */
.mockup-asset-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--neutral-100);
  font-size: 0.83rem;
}
.mockup-asset-row:last-child { border-bottom: none; }
.mockup-asset-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mockup-asset-name { flex: 1; color: var(--neutral-700); font-weight: 500; }
.mockup-asset-alloc { color: var(--neutral-400); width: 36px; text-align: right; }
.mockup-asset-val { color: var(--neutral-900); font-weight: 600; font-family: var(--font-display); width: 64px; text-align: right; }

/* ============================================================
   SOCIAL PROOF BANNER
   ============================================================ */
.proof-banner {
  background: var(--gradient-hero);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}
.proof-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.proof-banner-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.proof-item { text-align: center; }
.proof-item strong {
  display: block;
  font-family: var(--font-display); font-size: 1.7rem;
  font-weight: 800; color: var(--white);
  letter-spacing: -0.03em; line-height: 1;
}
.proof-item span {
  display: block;
  font-size: 0.8rem; color: rgba(255,255,255,0.60);
  margin-top: 5px; font-weight: 300;
}
.proof-sep {
  width: 1px; height: 44px;
  background: rgba(255,255,255,0.16);
  flex-shrink: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-section { background: var(--bg-section-alt); }
.testimonial-card { padding: 32px 28px; }
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-stars svg { width: 16px; height: 16px; fill: #f59e0b; stroke: none; }
.testimonial-text {
  font-size: 0.92rem; color: var(--neutral-600);
  line-height: 1.75; margin-bottom: 20px; font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--red-50); border: 1.5px solid rgba(220,38,38,0.20);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 700; color: var(--red-700); flex-shrink: 0;
}
.testimonial-name { font-size: 0.87rem; font-weight: 600; color: var(--neutral-900); }
.testimonial-meta { font-size: 0.77rem; color: var(--neutral-500); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--white); }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.faq-col { display: flex; flex-direction: column; }
.faq-group {}
.faq-group-title {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red-700);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red-100);
}

.faq-item {
  border-bottom: 1px solid var(--neutral-200);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none; border: none; cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.93rem; font-weight: 500;
  color: var(--neutral-800);
  transition: color var(--transition);
}
.faq-question:hover { color: var(--red-700); }
.faq-question[aria-expanded="true"] { color: var(--red-700); }

.faq-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--red-50);
  border: 1px solid rgba(220,38,38,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.faq-icon svg { width: 12px; height: 12px; stroke: var(--red-700); transition: transform var(--transition); }
.faq-question[aria-expanded="true"] .faq-icon { background: var(--red-600); border-color: var(--red-600); }
.faq-question[aria-expanded="true"] .faq-icon svg { stroke: var(--white); transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), padding 0.38s;
  padding-bottom: 0;
}
.faq-answer.open {
  max-height: 400px;
  padding-bottom: 18px;
}
.faq-answer p {
  font-size: 0.88rem;
  color: var(--neutral-500);
  line-height: 1.75;
}



/* ============================================================
   ASSET TILES  (overview page)
   ============================================================ */
.asset-tile {
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.asset-ticker {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.asset-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--neutral-500);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.asset-desc {
  font-size: 0.82rem;
  color: var(--neutral-500);
  line-height: 1.6;
}
.asset-tile--more {
  border-style: dashed;
}

/* ============================================================
   PORTFOLIO STRATEGY CARDS  (overview page)
   ============================================================ */
.strategy-card {}
.strategy-card--featured {
  border-color: var(--red-600);
  box-shadow: 0 8px 40px rgba(220,38,38,0.12);
}
.strategy-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}
.strategy-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.strategy-icon svg { width: 22px; height: 22px; }
.strategy-icon--conservative {
  background: rgba(5,150,105,0.10);
  border: 1px solid rgba(5,150,105,0.22);
}
.strategy-icon--conservative svg { stroke: #059669; }
.strategy-icon--balanced {
  background: var(--red-50);
  border: 1px solid rgba(220,38,38,0.20);
}
.strategy-icon--balanced svg { stroke: var(--red-700); }
.strategy-icon--growth {
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
}
.strategy-icon--growth svg { stroke: #d97706; }

.strategy-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.strategy-label--featured { color: var(--red-700); }

/* Allocation bars */
.strategy-alloc {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.alloc-row {
  display: flex; align-items: center; gap: 10px;
}
.alloc-label {
  font-size: 0.78rem; color: var(--neutral-600);
  width: 100px; flex-shrink: 0;
}
.alloc-bar-wrap {
  flex: 1;
  height: 6px; background: var(--neutral-100);
  border-radius: 100px; overflow: hidden;
}
.alloc-bar {
  height: 100%; border-radius: 100px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.alloc-bar--btc    { background: #f59e0b; }
.alloc-bar--eth    { background: #6366f1; }
.alloc-bar--stable { background: #10b981; }
.alloc-bar--other  { background: var(--red-400); }
.alloc-bar--growth { background: #f97316; }
.alloc-pct {
  font-size: 0.78rem; font-weight: 600;
  color: var(--neutral-700); width: 28px; text-align: right; flex-shrink: 0;
}

/* Strategy meta row */
.strategy-meta {
  display: flex; gap: 0;
  border-top: 1px solid var(--neutral-200);
  margin-top: 20px; padding-top: 16px;
}
.meta-item {
  flex: 1; text-align: center;
  border-right: 1px solid var(--neutral-200);
}
.meta-item:last-child { border-right: none; }
.meta-item span { display: block; font-size: 0.72rem; color: var(--neutral-400); margin-bottom: 3px; }
.meta-item strong { font-size: 0.85rem; font-weight: 600; color: var(--neutral-800); }

/* Risk notice */
.risk-notice {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  max-width: 820px; margin-left: auto; margin-right: auto;
}
.risk-notice-icon {
  flex-shrink: 0; margin-top: 1px;
  color: #d97706;
}
.risk-notice p {
  font-size: 0.82rem;
  color: var(--neutral-600);
  line-height: 1.65;
}

/* ============================================================
   FEE TABLE  (overview page)
   ============================================================ */
.fee-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-card);
}



/* ============================================================
   ABOUT PAGE — NEW COMPONENTS
   ============================================================ */
.about-stats {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--neutral-200);
  flex-wrap: wrap;
}
.about-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.03em;
  line-height: 1;
}
.about-stat span {
  display: block;
  font-size: 0.8rem;
  color: var(--neutral-500);
  margin-top: 4px;
}

.commitments-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
}
.commitment-list { margin-top: 20px; display: flex; flex-direction: column; gap: 0; }
.commitment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--neutral-100);
  font-size: 0.88rem;
  color: var(--neutral-700);
  gap: 12px;
}
.commitment-row:last-child { border-bottom: none; }

/* ============================================================
   REVIEWS PAGE — RATING SUMMARY BAR
   ============================================================ */
.rating-summary-bar {
  background: var(--white);
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
  padding: 32px 0;
}
.rating-summary-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.rating-summary-item { text-align: center; }
.rating-big {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--neutral-900);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.rating-label {
  font-size: 0.8rem;
  color: var(--neutral-500);
  margin-top: 6px;
}

/* ============================================================
   CONTACT PAGE — RESPONSE TIMES CARD
   ============================================================ */
.response-times-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-top: 28px;
}
.response-times-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--neutral-800);
  margin-bottom: 14px;
}
.response-times-list { display: flex; flex-direction: column; gap: 10px; }
.response-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  gap: 12px;
}
.response-time-row span   { color: var(--neutral-500); }
.response-time-row strong { color: var(--neutral-800); font-weight: 600; text-align: right; }
.video-placeholder {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.video-placeholder video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


.video-sound-toggle {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: 0.2s;
}

.video-sound-toggle:hover {
  background: rgba(0,0,0,0.8);
}