/* ============================================================
   PrivateBank · Luxembourg
   Design System v2 — depth, motion, microinteractions
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink-900: #080b11;
  --ink-800: #0f1520;
  --ink-700: #1a2230;
  --ink-600: #374151;
  --ink-500: #5b6573;
  --bone-50: #fbfaf7;
  --bone-100: #f4f3ee;
  --bone-200: #e9e7df;
  --accent: #9b1c1c;
  --accent-dark: #7f1717;
  --gold: #b8973f;
  --gold-light: #d4b56a;

  --surface: #ffffff;
  --line: rgba(15, 21, 32, 0.08);
  --line-strong: rgba(15, 21, 32, 0.16);

  --grad-gold: linear-gradient(135deg, #d4b56a 0%, #b8973f 100%);
  --grad-accent: linear-gradient(135deg, #c0392b 0%, #7f1717 100%);
  --grad-dark: linear-gradient(165deg, #0f1520 0%, #080b11 100%);
  --grad-sheen: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);

  --sh-1: 0 1px 2px rgba(8,11,17,0.04), 0 1px 3px rgba(8,11,17,0.06);
  --sh-2: 0 2px 4px rgba(8,11,17,0.04), 0 4px 12px rgba(8,11,17,0.06);
  --sh-3: 0 4px 8px rgba(8,11,17,0.05), 0 12px 28px rgba(8,11,17,0.10);
  --sh-4: 0 8px 16px rgba(8,11,17,0.06), 0 24px 56px rgba(8,11,17,0.14);
  --sh-gold: 0 4px 24px rgba(184,151,63,0.20);
  --sh-focus: 0 0 0 3px rgba(184,151,63,0.18);

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 360ms;
  --t-slower: 520ms;

  --radius: 4px;
  --radius-lg: 8px;
  --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bone-50); color: var(--ink-900);
  line-height: 1.65; letter-spacing: -0.003em; overflow-x: hidden;
}
::selection { background: rgba(184,151,63,0.22); }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: 'Cormorant Garamond', Georgia, serif; line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: 'JetBrains Mono', monospace; }
.eyebrow { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
.text-gold { color: var(--gold); } .text-accent { color: var(--accent); } .text-muted { color: var(--ink-600); }

/* ---------- MOTION PRIMITIVES ---------- */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out);
  will-change: opacity, transform, filter; }
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger > * { opacity: 0; transform: translateY(16px); filter: blur(5px);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out); }
.stagger.in > * { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: calc(var(--i, 0) * 70ms); }
.page-enter { animation: pageEnter var(--t-slower) var(--e-out) both; }
@keyframes pageEnter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal,.stagger > * { opacity:1; transform:none; filter:none; }
}

/* ---------- BUTTONS ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  border: 1px solid transparent; font-family: inherit; overflow: hidden; isolation: isolate;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-base) var(--e-out),
    background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.btn::after { content:''; position:absolute; inset:0; z-index:-1;
  background: var(--grad-sheen); background-size: 220% 100%; background-position: 120% 0; opacity: 0;
  transition: background-position var(--t-slower) var(--e-out), opacity var(--t-base); }
.btn:hover::after { opacity: 1; background-position: -20% 0; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 80ms; }
.btn-primary { background: var(--ink-900); color: var(--bone-50); box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--ink-800); box-shadow: var(--sh-3); }
.btn-accent { background: var(--grad-accent); color: #fff; box-shadow: 0 2px 12px rgba(155,28,28,0.28); }
.btn-accent:hover { box-shadow: 0 6px 22px rgba(155,28,28,0.36); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink-900); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-900); background: var(--ink-900); color: var(--bone-50); box-shadow: var(--sh-2); }
.btn-outline-light { border-color: rgba(244,243,238,0.28); color: var(--bone-50); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold-light); box-shadow: var(--sh-gold); }
.btn-sm { padding: 9px 18px; font-size: 11px; }
.ripple { position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,0.35); pointer-events:none; z-index:-1;
  animation: ripple var(--t-slower) var(--e-out) forwards; }
.btn-ghost .ripple, .btn-primary .ripple { background: rgba(255,255,255,0.18); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- HEADER ---------- */
.site-header {
  background: rgba(8,11,17,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  color: var(--bone-50); border-bottom: 1px solid rgba(244,243,238,0.07);
  position: sticky; top: 0; z-index: 100;
  transition: background var(--t-base) var(--e-out), border-color var(--t-base);
}
.site-header.scrolled { background: rgba(8,11,17,0.92); border-bottom-color: rgba(184,151,63,0.18); }
.site-header.admin-bar { border-bottom: 1px solid rgba(155,28,28,0.4); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.logo { display: flex; align-items: center; gap: 14px; transition: opacity var(--t-base); }
.logo:hover { opacity: 0.82; }
.logo-mark { width: 44px; height: 44px; background: url('../assets/mark.png') center/contain no-repeat;
  flex-shrink: 0; transition: transform var(--t-slow) var(--e-spring), filter var(--t-base);
  filter: drop-shadow(0 2px 6px rgba(184,151,63,0.25)); }
.logo:hover .logo-mark { transform: scale(1.06) rotate(-2deg); }
.logo-text { font-family: 'Cormorant Garamond', serif; font-size: 21px; }
.logo-sub { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,243,238,0.5); }
.nav-desktop { display: flex; align-items: center; gap: 30px; }
.nav-desktop a { position: relative; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(244,243,238,0.78); padding: 6px 0;
  transition: color var(--t-base) var(--e-out); }
.nav-desktop a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--e-out); }
.nav-desktop a:hover { color: var(--gold-light); }
.nav-desktop a:hover::after, .nav-desktop a.active::after { transform: scaleX(1); }
.nav-desktop a.active { color: var(--gold-light); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.hamburger { width: 42px; height: 42px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border: 1px solid rgba(244,243,238,0.22); background: none; cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base); }
.hamburger span { width: 18px; height: 1.5px; background: var(--bone-50); display: block;
  transition: transform var(--t-base) var(--e-out); }
.hamburger:hover { border-color: var(--gold); background: rgba(184,151,63,0.08); }
.hamburger:hover span:nth-child(1) { transform: translateY(1px); }
.hamburger:hover span:nth-child(3) { transform: translateY(-1px); }

.slide-overlay { position: fixed; inset: 0; background: rgba(8,11,17,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--e-out); z-index: 200; }
.slide-overlay.open { opacity: 1; pointer-events: auto; }
.slide-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%;
  background: var(--grad-dark); color: var(--bone-50); transform: translateX(100%);
  transition: transform var(--t-slow) var(--e-out); z-index: 201; overflow-y: auto;
  box-shadow: -24px 0 56px rgba(8,11,17,0.4); }
.slide-menu.open { transform: translateX(0); }
.slide-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 24px; border-bottom: 1px solid rgba(244,243,238,0.08); }
.slide-head .eyebrow { color: rgba(244,243,238,0.5); }
.slide-close { width: 42px; height: 42px; border: 1px solid rgba(244,243,238,0.22);
  background: none; color: var(--bone-50); font-size: 20px; cursor: pointer;
  transition: transform var(--t-base) var(--e-spring), border-color var(--t-base); }
.slide-close:hover { border-color: var(--gold); transform: rotate(90deg); }
.slide-nav { padding: 20px 24px; }
.slide-nav a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(244,243,238,0.06);
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244,243,238,0.85);
  transition: color var(--t-base) var(--e-out), padding-left var(--t-base) var(--e-out); }
.slide-nav a:hover { color: var(--gold-light); padding-left: 10px; }
.slide-menu.open .slide-nav a { animation: slideIn var(--t-slow) var(--e-out) both; }
.slide-menu.open .slide-nav a:nth-child(1){animation-delay:.05s}
.slide-menu.open .slide-nav a:nth-child(2){animation-delay:.09s}
.slide-menu.open .slide-nav a:nth-child(3){animation-delay:.13s}
.slide-menu.open .slide-nav a:nth-child(4){animation-delay:.17s}
.slide-menu.open .slide-nav a:nth-child(5){animation-delay:.21s}
.slide-menu.open .slide-nav a:nth-child(6){animation-delay:.25s}
.slide-menu.open .slide-nav a:nth-child(7){animation-delay:.29s}
.slide-menu.open .slide-nav a:nth-child(8){animation-delay:.33s}
@keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.slide-actions { padding: 24px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- HERO ---------- */
.hero { background: var(--grad-dark); color: var(--bone-50); position: relative; overflow: hidden; }
.hero-dots { position: absolute; inset: 0; opacity: 0.05;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 42px 42px; }
.hero::before, .hero::after { content:''; position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.hero::before { width:520px; height:520px; top:-180px; right:-120px;
  background: radial-gradient(circle, rgba(184,151,63,0.18), transparent 70%); animation: float1 18s var(--e-in-out) infinite; }
.hero::after { width:460px; height:460px; bottom:-200px; left:-140px;
  background: radial-gradient(circle, rgba(155,28,28,0.16), transparent 70%); animation: float2 22s var(--e-in-out) infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }
.hero-inner { position: relative; padding: 150px 0; }
.hero h1 { font-size: clamp(48px, 9vw, 116px); letter-spacing: -0.025em; }
.hero h1 span { display: block; opacity: 0; transform: translateY(28px); filter: blur(10px);
  animation: heroWord var(--t-slower) var(--e-out) forwards; }
.hero h1 span:nth-child(1){animation-delay:.1s}
.hero h1 span:nth-child(2){animation-delay:.22s}
.hero h1 span:nth-child(3){animation-delay:.34s}
@keyframes heroWord { to{opacity:1;transform:translateY(0);filter:blur(0)} }
.red-underline { position: relative; display: inline-block; }
.red-underline::after { content:''; position:absolute; left:0; bottom:-12px; height:4px; width:0;
  background: var(--grad-accent); animation: underline var(--t-slower) var(--e-out) .55s forwards; }
@keyframes underline { to { width: 96px; } }
.hero p { font-size: clamp(16px, 1.5vw, 21px); color: rgba(244,243,238,0.78);
  max-width: 640px; margin: 58px 0 42px; font-weight: 300;
  opacity: 0; animation: fadeUp var(--t-slower) var(--e-out) .6s forwards; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap;
  opacity: 0; animation: fadeUp var(--t-slower) var(--e-out) .72s forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ---------- SECTIONS ---------- */
.section { padding: 104px 0; }
.section-dark { background: var(--grad-dark); color: var(--bone-50); position: relative; overflow: hidden; }
.section-bone { background: var(--bone-100); }
.section h2 { font-size: clamp(32px, 4vw, 54px); margin-bottom: 24px; }
.section-head { margin-bottom: 60px; }
.lead { color: var(--ink-600); max-width: 680px; font-size: 17px; }
.section-dark .lead { color: rgba(244,243,238,0.78); }
.page-hero { background: var(--grad-dark); color: var(--bone-50); padding: 104px 0; position: relative; overflow: hidden; }
.page-hero::before { content:''; position:absolute; width:480px; height:480px; top:-200px; right:-100px;
  border-radius:50%; filter:blur(90px);
  background: radial-gradient(circle, rgba(184,151,63,0.14), transparent 70%); animation: float1 20s var(--e-in-out) infinite; }
.page-hero h1 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 24px; position: relative; }
.page-hero p { color: rgba(244,243,238,0.78); max-width: 720px; font-size: 18px; margin-top: 40px; position: relative; }
.back-link { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,243,238,0.55); display: inline-flex; gap: 6px; margin-bottom: 24px;
  transition: color var(--t-base), gap var(--t-base) var(--e-out); }
.back-link:hover { color: var(--gold-light); gap: 12px; }

.metrics { background: var(--bone-100); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 56px 0; }
.metric-v { font-family: 'Cormorant Garamond', serif; font-size: 44px;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric-l { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-600); margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out); }
.card-pad { padding: 40px; }
.card-link { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.card-link::before { content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--e-out); }
.card-link:hover { transform: translateY(-6px); box-shadow: var(--sh-4); border-color: rgba(184,151,63,0.3); }
.card-link:hover::before { transform: scaleX(1); }
.card-link:hover h3 { color: var(--accent); }
.card-link .arrow { display: inline-block; transition: transform var(--t-base) var(--e-out); }
.card-link:hover .arrow { transform: translateX(6px); }
.card h3 { font-size: 28px; margin-bottom: 16px; transition: color var(--t-base) var(--e-out); }
.card-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-500); }
.list-clean { list-style: none; }
.list-clean li { padding: 16px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 12px; font-size: 14px;
  transition: padding-left var(--t-base) var(--e-out); }
.list-clean li:last-child { border-bottom: none; }
.list-clean li:hover { padding-left: 8px; }
.list-clean .dash { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 18px; }
.dl-rows > div { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line); transition: background var(--t-base); }
.dl-rows > div:last-child { border-bottom: none; }
.dl-rows > div:hover { background: var(--bone-50); }
.dl-rows dt { font-size: 14px; color: var(--ink-600); }
.dl-rows dd { font-family: 'Cormorant Garamond', serif; font-size: 18px;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

.form-row { margin-bottom: 20px; }
.form-label { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 8px; }
.form-input { width: 100%; padding: 13px 16px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink-900); font-family: inherit; font-size: 15px;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), background var(--t-base); }
.form-input::placeholder { color: var(--ink-500); opacity: 0.6; }
.form-input:hover { border-color: var(--ink-500); }
.form-input:focus { outline: none; border-color: var(--gold); box-shadow: var(--sh-focus); background: #fff; }
textarea.form-input { resize: vertical; }
select.form-input { cursor: pointer; }

.auth { min-height: 100vh; display: flex; }
.auth-panel { width: 50%; background: var(--grad-dark); color: var(--bone-50); position: relative; overflow: hidden; }
.auth-panel::before { content:''; position:absolute; width:420px; height:420px; top:20%; left:-120px;
  border-radius:50%; filter:blur(90px);
  background: radial-gradient(circle, rgba(184,151,63,0.16), transparent 70%); animation: float1 20s var(--e-in-out) infinite; }
.auth-panel-inner { position: relative; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.auth-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px; background: var(--bone-50); }
.auth-form { width: 100%; max-width: 420px; animation: pageEnter var(--t-slower) var(--e-out) both; }
.auth-form h1 { font-size: 42px; margin-bottom: 8px; }

.portal { min-height: 100vh; background: var(--bone-100); }
.portal-body { display: flex; gap: 32px; padding: 36px 0; }
.sidebar { width: 256px; flex-shrink: 0; }
.sidebar-nav { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-1); }
.sidebar-nav a { position: relative; display: block; padding: 15px 22px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-600);
  transition: color var(--t-base) var(--e-out), background var(--t-base), padding-left var(--t-base) var(--e-out); }
.sidebar-nav a::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background: var(--grad-accent); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-base) var(--e-out); }
.sidebar-nav a:hover { background: var(--bone-50); color: var(--ink-900); padding-left: 28px; }
.sidebar-nav a.active { background: var(--bone-50); color: var(--ink-900); font-weight: 600; }
.sidebar-nav a.active::before, .sidebar-nav a:hover::before { transform: scaleY(1); }
.portal-main { flex: 1; min-width: 0; }
.help-box { margin-top: 24px; padding: 22px; background: var(--grad-dark);
  color: rgba(244,243,238,0.8); border-radius: var(--radius-lg); box-shadow: var(--sh-2); }
.help-box .eyebrow { color: var(--gold-light); margin-bottom: 8px; display: block; }
.page-title { margin-bottom: 36px; }
.page-title .eyebrow { color: var(--accent); display: block; margin-bottom: 8px; }
.page-title h1 { font-size: clamp(28px, 4vw, 42px); }
.page-title p { color: var(--ink-600); margin-top: 8px; }

.balance-hero { background: var(--grad-dark); color: var(--bone-50); padding: 44px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: end;
  border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: var(--sh-3); }
.balance-hero::before { content:''; position:absolute; width:360px; height:360px; top:-160px; right:-80px;
  border-radius:50%; filter:blur(80px);
  background: radial-gradient(circle, rgba(184,151,63,0.16), transparent 70%); }
.balance-hero .big { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 6vw, 72px); position: relative; }
.balance-side { border-left: 1px solid rgba(244,243,238,0.12); padding-left: 32px; position: relative; }
.balance-side > div { margin-bottom: 18px; }
.stat-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
a.stat-card:hover { border-color: rgba(184,151,63,0.3); }
.stat-card.accent { border-left: 3px solid var(--accent); }
.stat-card.green { border-left: 3px solid #0ea271; }
.stat-card.amber { border-left: 3px solid #d99412; }
.stat-l { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-600); }
.stat-v { font-family: 'Cormorant Garamond', serif; font-size: 30px; margin-top: 8px; }

.table-wrap { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-1); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 15px 18px; text-align: left; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-600);
  border-bottom: 1px solid var(--line-strong); background: var(--bone-100); }
td { padding: 16px 18px; border-bottom: 1px solid var(--line); }
tbody tr { transition: background var(--t-fast) var(--e-out); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bone-50); }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--bone-100); }
.t-right { text-align: right; }
.pos { color: #047857; } .neg { color: #b91c1c; }

.badge { display: inline-flex; align-items: center; padding: 4px 11px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid; border-radius: 999px; }
.badge-pending  { background: #fffaeb; color: #92400e; border-color: #fcd97a; }
.badge-approved,.badge-verified,.badge-active,.badge-completed { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.badge-rejected,.badge-suspended { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.badge-info { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }

.alert { border: 1px solid; border-left-width: 3px; padding: 14px 18px;
  font-size: 14px; margin-bottom: 24px; border-radius: var(--radius);
  animation: alertIn var(--t-slow) var(--e-out) both; }
@keyframes alertIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.alert-info { background: #f8fafc; color: #334155; border-color: #cbd5e1; border-left-color: #64748b; }
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; border-left-color: #0ea271; }
.alert-warn { background: #fffaeb; color: #92400e; border-color: #fcd97a; border-left-color: #d99412; }

.site-footer { background: var(--grad-dark); color: rgba(244,243,238,0.7); margin-top: 96px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding: 72px 0; }
.footer-grid h4 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-50); margin-bottom: 16px; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 8px; font-size: 14px; }
.footer-grid a { transition: color var(--t-base), padding-left var(--t-base) var(--e-out); }
.footer-grid a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-grid address { font-style: normal; font-size: 14px; line-height: 1.7; }
.footer-bottom { border-top: 1px solid rgba(244,243,238,0.08); padding: 26px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; }

.skeleton { background: linear-gradient(90deg, var(--bone-100) 25%, var(--bone-200) 37%, var(--bone-100) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius); }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--grad-gold); z-index: 300; transition: width 80ms linear; }

.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap-3{gap:12px}
.spacer{height:32px}.text-center{text-align:center}

@media (max-width: 980px) {
  .nav-desktop { display: none; }
  .grid-2,.grid-3,.grid-4,.metrics-grid,.footer-grid,.balance-hero { grid-template-columns: 1fr; gap: 24px; }
  .auth-panel { display: none; }
  .auth-form-wrap { width: 100%; }
  .portal-body { flex-direction: column; }
  .sidebar { width: 100%; }
  .hide-mobile { display: none; }
  .balance-side { border-left: none; padding-left: 0; border-top: 1px solid rgba(244,243,238,0.12); padding-top: 24px; }
}
@media (max-width: 560px) {
  .hero-inner,.section { padding: 72px 0; }
  .header-cta .btn { display: none; }
  .card-pad { padding: 28px; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bone-100); }
::-webkit-scrollbar-thumb { background: #cbc8bd; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }