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

:root {
  --green-900: #0A2E1F;
  --green-800: #0D3D2B;
  --green-700: #0F4D35;
  --green-600: #0F6E4A;
  --green-500: #1A7A54;
  --green-400: #22A06B;
  --green-300: #3DC485;
  --green-200: #8FE3BC;
  --green-100: #C8F4E1;
  --green-50:  #E8FAF2;

  --ink-950: #0B0D0C;
  --ink-900: #111311;
  --ink-800: #1C201C;
  --ink-700: #2A302A;
  --ink-400: #6B7570;
  --ink-300: #9BA69E;
  --ink-200: #C8D1CC;
  --ink-100: #E4EAE6;
  --ink-50:  #F2F6F3;

  --white: #FFFFFF;
  --card-bg: #F7F9F7;
  --red-500: #D94F3D;
  --red-100: #FDECEA;
  --amber-500: #D97B13;
  --amber-100: #FEF3E2;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);

  --transition: 0.18s ease;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 24px;
  background: var(--ink-900);
  color: var(--white);
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition: background var(--transition), transform var(--transition);
  border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--ink-800); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 24px;
  background: transparent;
  color: var(--ink-900);
  font-size: 15px; font-weight: 500;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--ink-200);
  transition: all var(--transition);
  cursor: pointer;
}
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-300); }

.btn-green {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 24px;
  background: var(--green-500);
  color: var(--white);
  font-size: 15px; font-weight: 500;
  border-radius: var(--radius-md);
  border: none; cursor: pointer;
  transition: all var(--transition);
}
.btn-green:hover { background: var(--green-600); transform: translateY(-1px); }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 13px; font-weight: 500;
  color: var(--ink-700); letter-spacing: 0.02em;
}
.form-input {
  width: 100%; padding: 13px 16px;
  background: var(--ink-50);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px; color: var(--ink-900);
  transition: all var(--transition);
  outline: none;
}
.form-input::placeholder { color: var(--ink-300); }
.form-input:focus {
  border-color: var(--green-400);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(26, 122, 84, 0.1);
}
.form-input.has-icon { padding-left: 44px; }

.input-wrapper { position: relative; }
.input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-300); pointer-events: none;
  display: flex; align-items: center;
}
.input-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-400); cursor: pointer;
  display: flex; align-items: center;
  background: none; border: none; padding: 0;
}

.divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-300); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 4px 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--ink-100);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500;
}
.badge-green { background: var(--green-50); color: var(--green-600); }
.badge-red   { background: var(--red-100); color: var(--red-500); }
.badge-amber { background: var(--amber-100); color: var(--amber-500); }

.mono { font-family: var(--font-mono); }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-400);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.wealth-glow {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 60% 40%, rgba(26,122,84,0.12) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease both; }
.fade-up-2 { animation: fadeUp 0.4s 0.08s ease both; }
.fade-up-3 { animation: fadeUp 0.4s 0.16s ease both; }
.fade-up-4 { animation: fadeUp 0.4s 0.24s ease both; }

/* Google Translate widget custom styling */
#google_translate_element .goog-te-gadget-simple {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
}
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* ── Desktop layout wrapper ── */
@media (min-width: 768px) {
  .mobile-shell {
    max-width: 390px; margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 80px rgba(0,0,0,0.12);
  }
}