:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f6f8fb;
  --color-ink: #0f1a2b;
  --color-ink-soft: #49566a;
  --color-ink-faint: #7f8a9c;
  --color-line: #e4e9f1;
  --color-brand: #14324f;
  --color-brand-soft: #d9e4f0;
  --color-cta: #0f1a2b;
  --color-cta-alt: #2aa876;
  --color-success: #16a86b;
  --color-danger: #d14343;
  --color-btc: #f7931a;
  --color-btc-soft: rgba(247, 147, 26, 0.16);
  --color-gold: #d4af37;
  --color-gold-soft: rgba(212, 175, 55, 0.2);
  --color-nasdaq: #0891b2;
  --color-nasdaq-soft: rgba(8, 145, 178, 0.18);
  --color-portfolio: #2aa876;
  --color-portfolio-soft: rgba(42, 168, 118, 0.18);
  --shadow-card: 0 1px 2px rgba(15, 26, 43, 0.04), 0 8px 24px rgba(15, 26, 43, 0.06);
  --radius-md: 10px;
  --radius-lg: 16px;
  --container: 1160px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; color: var(--color-ink); }
p { margin: 0 0 1em; color: var(--color-ink-soft); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-brand);
}
.site-header__brand img { width: 36px; height: 36px; object-fit: contain; }
.site-header__nav {
  display: none;
  gap: 28px;
  margin-left: auto;
}
.site-header__nav a {
  font-size: 14px;
  color: var(--color-ink-soft);
  transition: color 0.15s ease;
}
.site-header__nav a:hover { color: var(--color-ink); }
.site-header__actions {
  display: none;
  gap: 10px;
  align-items: center;
}
.site-header__burger {
  margin-left: auto;
  background: none;
  border: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}
.site-header__drawer {
  display: none;
  border-top: 1px solid var(--color-line);
  padding: 16px 20px 24px;
  flex-direction: column;
  gap: 14px;
  background: #fff;
}
.site-header__drawer a { font-size: 15px; padding: 6px 0; color: var(--color-ink); }
.site-header__drawer--open { display: flex; }

@media (min-width: 768px) {
  .site-header__nav, .site-header__actions { display: inline-flex; }
  .site-header__burger { display: none; }
  .site-header__drawer { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(42, 168, 118, 0.10), transparent 70%),
    linear-gradient(180deg, #f9fbfe 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-line);
}
.hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><g stroke='%230f1a2b' stroke-width='1' fill='none' opacity='0.18'><path d='M0 140 L30 140 M30 110 L30 170 M30 125 L60 125 M60 95 L60 155 M60 110 L90 110 M90 85 L90 135 M90 100 L120 100 M120 70 L120 125 M120 90 L150 90 M150 65 L150 120 M150 80 L180 80 M180 55 L180 100 M180 75 L210 75 M210 55 L210 90 M210 65 L240 65 M240 50 L240 80 M240 60 L270 60 M270 40 L270 75 M270 55 L300 55 M300 42 L300 68 M300 50 L330 50 M330 35 L330 65 M330 45 L360 45 M360 28 L360 60 M360 40 L390 40 M390 22 L390 55 M390 35 L420 35 M420 18 L420 50 M420 30 L450 30 M450 15 L450 45 M450 25 L480 25 M480 10 L480 40 M480 20 L510 20 M510 8 L510 35 M510 18 L540 18 M540 5 L540 32 M540 15 L570 15 M570 2 L570 30 M570 12 L600 12'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero__inner { position: relative; text-align: center; }
.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.02em;
  color: var(--color-brand);
  margin-bottom: 12px;
}
.hero__sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--color-ink-soft);
}

/* ---------- Sections ---------- */
.section {
  padding: 64px 0;
}
.section--muted { background: var(--color-bg-soft); }
.section__head {
  text-align: center;
  margin-bottom: 40px;
}
.section__head h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--color-brand);
}
.section__head p {
  margin: 8px auto 0;
  max-width: 540px;
  color: var(--color-ink-faint);
  font-size: 15px;
}

/* ---------- Strategy cards ---------- */
.strategy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .strategy-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-top: 3px solid var(--accent, var(--color-brand));
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 26, 43, 0.06), 0 14px 36px rgba(15, 26, 43, 0.10);
  border-color: var(--color-brand-soft);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__name {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-ink);
}
.card__name::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: baseline;
}
.card__hint {
  font-size: 12px;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card__chart {
  height: 140px;
  position: relative;
}
.card__chart--skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #eef2f7, #f6f8fb, #eef2f7);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.card__metrics {
  display: flex;
  gap: 16px;
  padding-top: 6px;
  border-top: 1px solid var(--color-line);
}
.card__metric { display: flex; flex-direction: column; gap: 2px; }
.card__metric strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card__metric--return strong { color: var(--color-success); }
.card__metric--mdd strong { color: var(--color-danger); }
.card__metric span {
  font-size: 11px;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Portfolio ---------- */
.portfolio { padding: 24px; }
.portfolio__chart { height: 320px; position: relative; }
.portfolio__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
.portfolio__metrics .card__metric { padding: 0 12px; }
.portfolio__metrics .card__metric + .card__metric { border-left: 1px solid var(--color-line); }

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 3px;
  background: #fff;
  gap: 2px;
}
.lang-toggle__btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  border-radius: 999px;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle__btn--active {
  background: var(--color-brand);
  color: #fff;
}
.lang-toggle__btn:hover:not(.lang-toggle__btn--active) { color: var(--color-ink); }
.lang-toggle--drawer { align-self: flex-start; }

/* ---------- Modal ---------- */
.modal {
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(15, 26, 43, 0.3);
  background: #fff;
  color: var(--color-ink);
  width: min(960px, 100% - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(15, 26, 43, 0.55);
  backdrop-filter: blur(4px);
}
.modal__inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow: auto;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-line);
  gap: 12px;
}
.modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.modal__title::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent, var(--color-brand));
}
.modal__close {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover { background: #eef2f7; }
.modal__body {
  padding: 20px 22px 24px;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
.modal__chart { height: 280px; }
.modal__chart--small { height: 160px; }
.modal__charts h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: 8px;
  font-weight: 600;
}
.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.metrics-table th, .metrics-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-line);
}
.metrics-table th {
  font-weight: 500;
  color: var(--color-ink-faint);
  width: 50%;
}
.metrics-table td {
  font-weight: 600;
  text-align: right;
}
.metrics-table tr:last-child th, .metrics-table tr:last-child td { border-bottom: 0; }

@media (min-width: 860px) {
  .modal__body { grid-template-columns: minmax(0, 1fr) 280px; }
  .modal__aside { border-left: 1px solid var(--color-line); padding-left: 22px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: #0f1a2b;
  color: #b5c0d0;
  padding: 36px 0 28px;
  font-size: 14px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: #e4e9f1; }
.site-footer a:hover { color: #fff; }
.site-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }