/* FuturePNP v4 — Fintech / financial-data aesthetic
   Dark slate base · electric cyan accent · mono numerals · grid backgrounds
*/

:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F4F6FA;
  --bg-grid:   #EEF1F6;

  --slate-950: #06080F;
  --slate-900: #0B0F1A;
  --slate-800: #121828;
  --slate-700: #1C2438;
  --slate-600: #2A3450;

  --ink:      #0B0F1A;
  --ink-2:    #1C2438;
  --ink-3:    #4B5572;
  --ink-4:    #828CA8;
  --line:     #DDE2EC;
  --line-2:   #ECEFF5;

  --cyan:     #0EA5C9;       /* electric data-cyan */
  --cyan-glow:#33D6F2;
  --green:    #00B873;       /* tape green */
  --red:      #E5484D;
  --amber:    #F2A100;

  --sans:  'Inter', -apple-system, system-ui, sans-serif;
  --display:'Inter', sans-serif; /* tight tracking for fintech */
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1280px;
  --gut: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }

/* TOPBAR (dark, terminal-style) */
.topbar {
  background: var(--slate-950); color: #94A3BE;
  font-size: 12px; font-family: var(--mono); letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.topbar .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px var(--gut); max-width: 1440px; margin: 0 auto;
}
.topbar .left { display: flex; gap: 28px; align-items: center; }
.topbar .clock { display: flex; gap: 8px; align-items: center; }
.topbar .clock .city { color: #94A3BE; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.topbar .clock .t { color: #fff; font-weight: 500; }
.topbar .clock .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 6px rgba(0,184,115,0.7); animation: pulse 2.5s ease-in-out infinite; }
.topbar .right { display: flex; gap: 18px; align-items: center; flex-shrink: 0; white-space: nowrap; }
.topbar .lang { display: inline-flex; gap: 0; align-items: center; flex-shrink: 0; white-space: nowrap; }
.topbar .lang button { background: none; border: none; cursor: pointer; padding: 0; font: inherit; color: #94A3BE; font-family: var(--mono); }
.topbar .lang button.on { color: var(--cyan-glow); }
.topbar .lang .sep { color: #4B5572; margin: 0 6px; }

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

/* HEADER */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
}
.site-header .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--gut); max-width: 1440px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--cyan) 220%);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--mono); font-weight: 600; font-size: 15px;
  letter-spacing: 0;
  position: relative;
  box-shadow: 0 0 0 1px rgba(14,165,201,0.15), 0 4px 12px rgba(11,15,26,0.08);
}
.brand .mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background: radial-gradient(circle at 30% 20%, rgba(51,214,242,0.35) 0%, transparent 60%);
  pointer-events: none;
}
.brand .name { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.brand .name span { color: var(--cyan); font-weight: 500; }
.brand .sub {
  font-size: 10.5px; color: var(--ink-3); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-left: 1px solid var(--line); padding-left: 12px; margin-left: 4px;
  font-family: var(--mono);
}
nav.primary { display: flex; gap: 28px; align-items: center; }
nav.primary a {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  padding: 8px 0; position: relative;
  transition: color 0.15s;
}
nav.primary a:hover { color: var(--cyan); }
nav.primary a.active { color: var(--ink); }
nav.primary a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -19px;
  height: 2px; background: var(--cyan); box-shadow: 0 0 8px rgba(14,165,201,0.4);
}

.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: var(--slate-900); color: #fff !important;
  font-size: 13px; font-weight: 500; border-radius: 6px;
  transition: all 0.15s;
  border: 1px solid var(--slate-700);
  cursor: pointer; font-family: inherit;
  position: relative; overflow: hidden;
}
.cta-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(14,165,201,0.15) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform 0.4s;
}
.cta-btn:hover { background: var(--slate-800); border-color: var(--cyan); }
.cta-btn:hover::before { transform: translateX(100%); }
.cta-btn .arrow { transition: transform 0.2s; }
.cta-btn:hover .arrow { transform: translateX(2px); color: var(--cyan-glow); }

.cta-btn.ghost {
  background: transparent; color: var(--ink) !important;
  border: 1px solid var(--line);
}
.cta-btn.ghost:hover { border-color: var(--cyan); background: var(--bg-soft); }
.cta-btn.ghost::before { display: none; }

/* TYPE */
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; background: var(--cyan);
  box-shadow: 0 0 8px rgba(14,165,201,0.6);
}
.eyebrow .num { color: var(--ink-3); }

.h-display {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: 1.04; letter-spacing: -0.035em; color: var(--ink);
}
.h-display em {
  font-style: normal;
  background: linear-gradient(180deg, var(--ink) 60%, var(--cyan) 140%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h-section {
  font-family: var(--display); font-weight: 600;
  font-size: 42px; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink); margin: 0;
}
.h-section em {
  font-style: normal; color: var(--cyan);
}
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); font-weight: 400; max-width: 56ch; }

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

/* FOOTER */
.site-footer {
  background: var(--slate-950); color: #94A3BE;
  padding: 64px 0 24px;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.site-footer .container-wide { position: relative; z-index: 1; }
.site-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-footer .brand .mark { box-shadow: 0 0 0 1px rgba(14,165,201,0.3), 0 0 24px rgba(14,165,201,0.15); }
.site-footer .brand .name { color: #fff; }
.site-footer .brand .sub { color: #94A3BE; border-color: rgba(255,255,255,0.15); }
.site-footer h5 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan-glow); font-weight: 500; margin: 0 0 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 6px 0; font-size: 13.5px; }
.site-footer li a:hover { color: var(--cyan-glow); }
.site-footer .desc { font-size: 13.5px; line-height: 1.65; color: #94A3BE; max-width: 32ch; margin-top: 16px; }
.site-footer .bot { display: flex; justify-content: space-between; padding-top: 24px; font-size: 11.5px; color: #4B5572; font-family: var(--mono); }
.site-footer .bot .legal { display: flex; gap: 24px; }