@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ============================================================
   XENA DEFENCE — Design System  ·  navy · grey · red  ·  Manrope
   ============================================================ */

:root {
  /* Core palette (brand) */
  --bg-0: #0A0F14;          /* page background */
  --bg-1: #0d131a;          /* panels */
  --bg-2: #121a22;          /* raised cards */
  --bg-3: #1a232d;          /* hover / inputs */
  --line: #26303a;          /* borders/grid */
  --line-soft: #1a222b;

  --txt-0: #FFFFFF;         /* primary text */
  --txt-1: #D1D3D4;         /* light grey */
  --txt-2: #A6A8AB;         /* mid grey (muted) */
  --txt-3: #4B4F54;         /* dark grey */

  --accent: #C0392B;        /* red accent */
  --accent-dim: #7a2c22;
  --amber: #C9A227;         /* watch (gold) */
  --red: #C0392B;           /* negative / risk */
  --blue: #8FA3B8;          /* links / info (steel) */
  --violet: #C0C3C6;        /* premium (silver) */

  --up: #4CAF82;            /* positive (retained for market up/down) */
  --down: #C0392B;

  --mono: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius: 8px;
  --radius-sm: 5px;
  --maxw: 1360px;
}

.mono, .ticker, .kpi .val, table.data td.num, table.data th.num, .g-label,
.delta, .badge, .panel-title, .eyebrow { font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--txt-1);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 15% -8%, rgba(192,57,43,0.10), transparent 46%),
    radial-gradient(circle at 88% 0%, rgba(166,168,171,0.06), transparent 46%);
  background-attachment: fixed;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -0.02em; color: var(--txt-0); }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }

.mono { font-family: var(--mono); }
.muted { color: var(--txt-2); }
.sec { color: var(--txt-1); }
.up { color: var(--up); }
.down { color: var(--down); }
.center { text-align: center; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Top ticker ---------- */
.ticker {
  background: #05080e;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12.5px;
}
.ticker-track {
  display: inline-block;
  padding: 7px 0;
  animation: scroll-left 48s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { margin: 0 18px; color: var(--txt-2); }
.ticker b { color: var(--txt-0); font-weight: 700; }
.ticker .tk-px { color: var(--txt-1); }
.ticker .up { color: var(--up); font-weight: 600; }
.ticker .down { color: var(--down); font-weight: 600; }
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Nav ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,11,18,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 26px;
  padding: 12px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; color: var(--txt-0); }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 27px; height: 27px; border-radius: 6px;
  background: linear-gradient(140deg, #A6A8AB, #4B4F54);
  display: grid; place-items: center; color: #C0392B; font-weight: 800; font-family: var(--sans); font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.brand .logo-img { width: 30px; height: 27px; object-fit: contain; display: block; }
.brand small { color: var(--txt-2); font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .16em; display:block; }
footer.site .brand .logo-img { width: 26px; height: 24px; }
.nav-links { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  color: var(--txt-1); font-size: 13.5px; padding: 6px 10px; border-radius: var(--radius-sm);
}
.nav-links a:hover { color: var(--txt-0); background: var(--bg-2); text-decoration: none; }
.nav-links a.active { color: var(--accent); background: var(--bg-2); }
.nav-cta {
  background: var(--accent); color: #04140f !important; font-weight: 700;
  padding: 7px 14px !important; border-radius: var(--radius-sm);
}
.nav-cta:hover { text-decoration: none; filter: brightness(1.08); }

/* ---------- Tier toggle ---------- */
.tier-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 20px; padding: 3px; background: var(--bg-1); gap: 2px;
}
.tier-toggle button {
  border: 0; background: transparent; color: var(--txt-2); font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; padding: 5px 12px; border-radius: 16px; cursor: pointer;
}
.tier-toggle button.on { background: var(--bg-3); color: var(--txt-0); }
.tier-toggle button.on.prem { background: var(--violet); color: #10071f; }

/* ---------- Layout helpers ---------- */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.span2 { grid-column: span 2; }
@media (max-width: 960px) { .g2,.g3,.g4 { grid-template-columns: 1fr; } .span2{grid-column:auto;} }

section.block { padding: 44px 0; border-bottom: 1px solid var(--line-soft); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }

/* ---------- Cards / panels ---------- */
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
}
.card.pad-lg { padding: 24px; }
.card h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-title { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--txt-2); text-transform: uppercase; margin-bottom: 12px; }

/* ---------- KPI ---------- */
.kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent); opacity:.8; }
.kpi.warn::before { background: var(--amber); }
.kpi.risk::before { background: var(--red); }
.kpi .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--txt-2); text-transform: uppercase; }
.kpi .val { font-size: 1.9rem; font-weight: 700; font-family: var(--mono); margin: 4px 0 2px; letter-spacing:-.01em;}
.kpi .delta { font-family: var(--mono); font-size: 12.5px; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-2); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
table.data tr:hover td { background: var(--bg-2); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); }

/* ---------- Badges / chips ---------- */
.badge { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--txt-1); }
.badge.free { border-color: var(--accent-dim); color: var(--accent); }
.badge.prem { border-color: var(--violet); color: var(--violet); }
.badge.live { border-color: var(--accent-dim); color: var(--accent); }
.badge.live::before { content:"● "; }
.chip { display:inline-block; font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:14px; color:var(--txt-1); background:var(--bg-1); cursor:pointer; }
.chip:hover, .chip.on { border-color: var(--accent-dim); color: var(--accent); }

/* ---------- Buttons ---------- */
.btn { display:inline-block; font-weight:600; font-size:14px; padding:11px 20px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid transparent; }
.btn-primary { background: var(--accent); color:#04140f; }
.btn-primary:hover { filter:brightness(1.08); text-decoration:none; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--txt-0); }
.btn-ghost:hover { background: var(--bg-2); text-decoration:none; }
.btn-prem { background: var(--violet); color:#10071f; }
.btn-prem:hover { filter:brightness(1.08); text-decoration:none; }

/* ---------- Premium lock overlay ---------- */
.locked { position: relative; }
.locked .lock-veil {
  position:absolute; inset:0; background: rgba(7,11,18,.72); backdrop-filter: blur(3px);
  border-radius: var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px;
  border:1px dashed var(--violet);
}
.lock-veil .ico { font-size: 22px; }
body.premium .lock-veil { display:none; }
body.premium .locked { }

/* ---------- Hero ---------- */
.hero { padding: 60px 0 30px; }
.hero h1 { font-size: 2.9rem; max-width: 15ch; }
.hero .lead { font-size: 1.15rem; color: var(--txt-1); max-width: 60ch; margin: 14px 0 26px; }
@media (max-width:700px){ .hero h1{font-size:2.1rem;} }

/* ---------- Tiles ---------- */
.tile {
  display:block; background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--accent-dim); transform: translateY(-2px); text-decoration:none; }
.tile .tnum { font-family:var(--mono); color: var(--txt-2); font-size:11px; letter-spacing:.14em; }
.tile h3 { color: var(--txt-0); margin:.4em 0 .3em; }
.tile p { color: var(--txt-1); font-size: 13.5px; margin:0; }
.tile .go { color: var(--accent); font-family:var(--mono); font-size:12px; margin-top:12px; display:inline-block; }

/* ---------- Charts ---------- */
.chart-box { position: relative; height: 260px; }
.chart-box.sm { height: 180px; }
.chart-box.lg { height: 340px; }

/* ---------- News list ---------- */
.news-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.news-item .when { font-family:var(--mono); font-size:11px; color:var(--txt-2); min-width:74px; }
.news-item h4 { margin:0 0 3px; font-size:15px; }
.news-item p { margin:0; color:var(--txt-1); font-size:13px; }
.news-item .src { font-family:var(--mono); font-size:11px; color:var(--txt-2); }

/* ---------- Footer ---------- */
footer.site { border-top:1px solid var(--line); padding: 40px 0 60px; color: var(--txt-2); font-size: 13px; margin-top: 20px; }
.foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
footer.site h5 { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--txt-1); text-transform:uppercase; margin:0 0 10px; }
footer.site a { color: var(--txt-2); display:block; padding:3px 0; }
footer.site a:hover { color: var(--txt-0); }
.disclaimer { border-top:1px solid var(--line-soft); margin-top:26px; padding-top:16px; color:var(--txt-2); font-size:11.5px; }

/* ---------- Utility ---------- */
.flex { display:flex; }
.between { justify-content:space-between; }
.items-center { align-items:center; }
.gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;}
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;} .mt32{margin-top:32px;}
.mb0{margin-bottom:0;} .mb8{margin-bottom:8px;} .mb16{margin-bottom:16px;} .mb24{margin-bottom:24px;}
.small { font-size: 12.5px; }
.pill-row { display:flex; flex-wrap:wrap; gap:8px; }
hr.soft { border:0; border-top:1px solid var(--line-soft); margin: 22px 0; }