/* ==========================================================================
   LoanCryptoBank — Homepage "Portfolios" (главная страница)
   Дизайн-токены синхронизированы с ЖИВЫМ сайтом loancryptobank.com:
   /wp-content/themes/loancryptbank/style.css (проверено чтением файла,
   не предположение) — навy #0B2867, gold #F9BA15, Montserrat, pill-кнопки,
   uppercase nav-ссылки, белые карточки с крупным radius (как section2 wrapper).
   Этот файл — ДОПОЛНИТЕЛЬНЫЙ слой поверх старого assets/style.css,
   переопределяет только то, что нужно для "нарядной" главной.
   ========================================================================== */

:root {
  --lcb-navy: #0B2867;
  --lcb-navy-deep: #081d4d;
  --lcb-navy-mid: #122f74;
  --lcb-blue-accent: #224A9D;
  --lcb-blue-soft: #ecf2ff;
  --lcb-blue-line: #9aaedc;
  --lcb-gold: #F9BA15;
  --lcb-gold-hover: #e9af17;
  --lcb-white: #FDFDFD;
  --lcb-ink: #0B2867;
  --lcb-ink-soft: #55647f;
  --lcb-success: #1a9e6b;
  --lcb-success-soft: #e6f7f0;
  --lcb-warning: #b7791f;
  --lcb-warning-soft: #fdf3e0;
  --lcb-font: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --radius-card: 20px;
  --radius-pill: 30px;
  --shadow-card: 0 18px 44px rgba(11, 40, 103, 0.10);
  --shadow-card-lg: 0 28px 64px rgba(11, 40, 103, 0.16);
}

body.homepage {
  font-family: var(--lcb-font);
  background: #ffffff;
  color: var(--lcb-ink);
  margin: 0;
}
body.homepage * { box-sizing: border-box; }
body.homepage img, body.homepage svg { display: block; max-width: 100%; }
.homepage a { text-decoration: none; color: inherit; }

.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Top header (matches live site pattern) ---------- */
.hp-header {
  background: var(--lcb-navy);
  padding: 0;
}
.hp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.hp-logo { display: flex; align-items: center; gap: 12px; }
.hp-logo img { height: 54px; }
.hp-nav { display: flex; align-items: center; gap: 6px; }
.hp-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lcb-white);
  padding: 12px 16px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.hp-nav a:hover { color: var(--lcb-gold); }
.hp-nav a.active { color: var(--lcb-gold); background: rgba(255,255,255,0.06); }
.hp-tools { display: flex; align-items: center; gap: 18px; }
.hp-lang {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--lcb-white); text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.hp-btn-login.hp-btn-login {
  border: 2px solid var(--lcb-white);
  color: var(--lcb-white);
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hp-btn-login.hp-btn-login:hover { background: var(--lcb-white); color: var(--lcb-navy); }

/* ---------- HERO ---------- */
/* top padding fixed 2026-08-13: site header is position:fixed (~100px tall on
   desktop, logo 80px + 10px/10px padding; see style.css "header .flex-box").
   Since main.content is not offset for the fixed header, .hp-hero starts at
   the very top of the viewport, so .hp-eyebrow badge was overlapping the
   bottom of the fixed logo. Padding increased from 76px to clear the fixed
   header height with margin, on all breakpoints (see media query below for
   the ~78px mobile header). */
.hp-hero {
  background: linear-gradient(160deg, var(--lcb-navy) 0%, var(--lcb-navy-deep) 60%, #0a1f52 100%);
  color: var(--lcb-white);
  padding: 132px 0 0;
  position: relative;
  overflow: hidden;
}
.hp-hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -160px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,186,21,0.16) 0%, rgba(249,186,21,0) 70%);
}
.hp-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-bottom: 96px;
}
.hp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249,186,21,0.14);
  color: var(--lcb-gold);
  border: 1px solid rgba(249,186,21,0.35);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hp-hero h1 {
  font-family: var(--lcb-font);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.hp-hero h1 .hl { color: var(--lcb-gold); }
.hp-hero .lead {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
  margin: 0 0 32px;
  font-weight: 400;
}
.hp-hero-ctas { display: flex; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; }
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hp-btn-gold.hp-btn-gold {
  background: var(--lcb-gold);
  border-color: var(--lcb-gold);
  color: var(--lcb-navy);
  box-shadow: 0 12px 28px rgba(249,186,21,0.30);
}
.hp-btn-gold.hp-btn-gold:hover { background: var(--lcb-gold-hover); border-color: var(--lcb-gold-hover); }
.hp-btn-outline.hp-btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--lcb-white);
}
.hp-btn-outline.hp-btn-outline:hover { background: rgba(255,255,255,0.08); }

.hp-trust-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.hp-trust-row .item { display: flex; align-items: center; gap: 8px; }
.hp-trust-row .ico { color: var(--lcb-gold); font-weight: 800; }

/* Hero visual: portfolio preview mock card */
.hp-hero-visual {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-card);
  padding: 26px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card-lg);
}
.hp-hv-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: #8fa0c9; font-weight: 700; margin-bottom: 16px;
}
.hp-hv-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.hp-hv-row:last-of-type { border-bottom: none; }
.hp-hv-pair { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
/* Composition tag next to each hero-widget row name (2026-08-13, owner:
   "здесь не видно из чего портфель состоит. Типа Btc-usdt и т.д."). Kept
   deliberately compact (small, muted, no pill/background) since this is a
   narrow sidebar-style widget, not the full-size portfolio card. */
.hp-hv-name-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hp-hv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-hv-pair-tag { font-size: 11px; font-weight: 500; color: #8fa0c9; letter-spacing: .01em; }
.hp-hv-coin {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--lcb-navy);
  background: var(--lcb-gold);
  font-family: Arial, Helvetica, sans-serif; /* fix: 2026-08-13 B/D legibility at small size */
  flex: 0 0 auto; /* fix: 2026-08-13, hero widget expanded from 2 to 5 rows — keeps the circle from being squeezed by flexbox now that longer labels (e.g. "St" for Stable Growth) sit next to it */
}
.hp-hv-coin[data-multi="1"] { font-size: 10.5px; } /* two-letter initials (e.g. "St") need a smaller size to fit the same 28px circle without overflow */
.hp-hv-up { color: #6fd5a8; font-weight: 700; font-size: 14px; }
.hp-hv-foot {
  font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 14px; display: flex; gap: 6px; align-items: center;
}
.hp-hv-note {
  margin-top: 18px;
  background: rgba(249,186,21,0.10);
  border: 1px solid rgba(249,186,21,0.28);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.hp-hv-note .ico { flex-shrink: 0; font-size: 15px; }

/* Stats strip: separate wrap that overlaps hero bottom / next section top,
   kept OUTSIDE .hp-hero so it is never clipped by hero's overflow:hidden. */
.hp-stats-wrap {
  margin-top: -56px;
  position: relative;
  z-index: 3;
}
.hp-stats-strip {
  background: var(--lcb-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-lg);
  padding: 34px 10px 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  min-height: 128px;
}
.hp-stat { padding: 10px 20px; position: relative; }
.hp-stat:not(:last-child)::after {
  content: "";
  position: absolute; right: 0; top: 12px; bottom: 12px;
  width: 1px; background: #e7ebf5;
}
.hp-stat .num {
  font-size: 26px; font-weight: 800; color: var(--lcb-navy); letter-spacing: -0.01em;
}
.hp-stat .num.badge-todo {
  display: inline-block;
  font-size: 11px; font-weight: 800; color: var(--lcb-warning);
  letter-spacing: .03em; text-transform: uppercase;
  background: var(--lcb-warning-soft);
  padding: 5px 12px; border-radius: 999px;
}
.hp-stat .lbl { font-size: 12.5px; color: var(--lcb-ink-soft); margin-top: 8px; }

/* ---------- Section shell ---------- */
.hp-section { padding: 68px 0 76px; }
.hp-section.tight { padding-top: 76px; }
.hp-section-title { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.hp-kicker {
  color: var(--lcb-blue-accent);
  font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 12px;
}
.hp-section-title h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--lcb-navy);
}
.hp-section-title p { color: var(--lcb-ink-soft); font-size: 15.5px; margin: 0; }

/* ---------- Portfolios (strategy) cards ---------- */
/* 2026-08-13: expanded from 2 to 5 portfolio cards (owner-approved).
   3-column grid so 5 cards lay out as 3 + 2 on desktop; falls back to 1
   column on mobile via the existing @media rule below. */
.hp-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .hp-portfolio-grid { grid-template-columns: 1fr 1fr; }
}
.hp-pcard {
  background: var(--lcb-white);
  border: 1px solid #e7ebf5;
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); }
.hp-pcard-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.hp-pcard-name { font-size: 21px; font-weight: 800; color: var(--lcb-navy); margin: 0 0 8px; }
.hp-pcard-pair { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--lcb-ink-soft); font-weight: 600; }
.hp-chip { background: var(--lcb-blue-soft); border-radius: 999px; padding: 4px 12px; color: var(--lcb-blue-accent); }
.hp-badge-risk {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 7px 14px; border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
.hp-pcard.balanced .hp-badge-risk { background: var(--lcb-success-soft); color: var(--lcb-success); }
.hp-pcard.aggressive .hp-badge-risk { background: var(--lcb-warning-soft); color: var(--lcb-warning); }
/* Added 2026-08-13 for the 3 new USDC-entry cards + Stable Growth (5-card
   expansion). "stable" reuses the existing low-risk/info blue accent. */
.hp-pcard.stable .hp-badge-risk { background: var(--lcb-blue-soft); color: var(--lcb-blue-accent); }
/* USDC-entry variants of the existing gold/silver cards keep the same risk
   color as their USDT sibling (same underlying mechanics, different entry
   currency only) — aliased here for clarity rather than duplicating rules. */
.hp-pcard.balanced-usdc .hp-badge-risk { background: var(--lcb-success-soft); color: var(--lcb-success); }
.hp-pcard.aggressive-usdc .hp-badge-risk { background: var(--lcb-warning-soft); color: var(--lcb-warning); }
.hp-pcard-desc { font-size: 14.5px; color: var(--lcb-ink-soft); line-height: 1.55; margin: 14px 0 22px; }
.hp-pcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.hp-stat-box { background: #f4f6fb; border-radius: 14px; padding: 15px 16px; }
.hp-stat-box .label { font-size: 11.5px; color: var(--lcb-ink-soft); margin-bottom: 4px; }
.hp-stat-box .value { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--lcb-navy); }
.hp-stat-box .value.pos { color: var(--lcb-success); }
/* Added 2026-08-13: crypto-equivalent min-entry threshold (e.g. "/ 0.1 BTC")
   shown as a smaller secondary line under the stablecoin min-entry value,
   only for the 4 crypto-pair cards (owner request: show both the stablecoin
   threshold AND the crypto threshold). Deliberately smaller/lighter than
   .value so the card doesn't look cluttered; Stable Growth has no such line
   since it has no crypto leg. */
.hp-stat-box .value-sub { font-size: 13px; font-weight: 700; color: var(--lcb-ink-soft); margin-top: 2px; }
.hp-illustrative {
  font-size: 10.5px; color: var(--lcb-warning); opacity: .9; margin-bottom: 18px;
  display: flex; gap: 5px; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.hp-illustrative::before { content: "⚠"; }
/* 2026-08-13 (owner: "кнопка у Stable Grow поменьше. Сделай все 5 кнопок одинаковых по
форме и размеру") — Stable Growth's button text is one line ("INVEST IN
STABLE GROWTH") while the other 4 cards wrap to two lines ("INVEST IN
DIGITAL GOLD/SILVER GROWTH"), so without an explicit min-height the
single-line button was visibly shorter than its 4 siblings even though all
are width:100%. Fixed height (not just min-height) forces all 5 buttons to
an identical box regardless of text length; line-height left as-is so
two-line labels still center correctly inside the fixed box. */
.hp-pcard .hp-btn { width: 100%; height: 58px; line-height: 1.15; }
.hp-pcard.balanced .hp-btn-gold.hp-btn-gold,
.hp-pcard.balanced-usdc .hp-btn-gold.hp-btn-gold,
.hp-pcard.aggressive .hp-btn-gold.hp-btn-gold,
.hp-pcard.aggressive-usdc .hp-btn-gold.hp-btn-gold,
.hp-pcard.stable .hp-btn-gold.hp-btn-gold { background: var(--lcb-navy); border-color: var(--lcb-navy); color: #fff; box-shadow: 0 10px 24px rgba(11,40,103,0.22); }
.hp-pcard.balanced .hp-btn-gold.hp-btn-gold:hover,
.hp-pcard.balanced-usdc .hp-btn-gold.hp-btn-gold:hover,
.hp-pcard.aggressive .hp-btn-gold.hp-btn-gold:hover,
.hp-pcard.aggressive-usdc .hp-btn-gold.hp-btn-gold:hover,
.hp-pcard.stable .hp-btn-gold.hp-btn-gold:hover { background: var(--lcb-navy-mid); border-color: var(--lcb-navy-mid); }

.hp-portfolios-footnote {
  text-align: center; font-size: 13.5px; font-weight: 600; color: var(--lcb-warning); margin-top: 26px;
}

/* ---------- How it works ---------- */
.hp-how-bg { background: #f5f7fc; }
.hp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hp-step {
  background: var(--lcb-white);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: var(--shadow-card);
  text-align: left;
}
.hp-step-num {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--lcb-navy); color: var(--lcb-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; margin-bottom: 16px;
}
.hp-step h3 { font-size: 15.5px; margin: 0 0 8px; color: var(--lcb-navy); font-weight: 700; }
.hp-step p { font-size: 13.5px; color: var(--lcb-ink-soft); margin: 0; line-height: 1.5; }

/* ---------- Trust / security band ---------- */
.hp-trust-band {
  background: var(--lcb-navy);
  border-radius: var(--radius-card);
  padding: 46px 50px;
  color: var(--lcb-white);
}
.hp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.hp-trust-item { text-align: center; }
.hp-trust-item .ico-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(249,186,21,0.14); border: 1px solid rgba(249,186,21,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--lcb-gold); margin: 0 auto 14px;
}
.hp-trust-item h4 { font-size: 14.5px; margin: 0 0 6px; font-weight: 700; }
.hp-trust-item p { font-size: 12.5px; color: rgba(255,255,255,0.78); margin: 0; line-height: 1.5; }
.hp-trust-item .todo-tag {
  display: inline-block; margin-top: 8px; font-size: 9.5px; font-weight: 800;
  color: var(--lcb-navy); background: var(--lcb-gold); padding: 3px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .02em;
}

/* ---------- Final CTA ---------- */
.hp-final-cta {
  background: linear-gradient(135deg, var(--lcb-navy) 0%, #071740 100%);
  border-radius: var(--radius-card);
  padding: 64px 50px;
  text-align: center;
  color: var(--lcb-white);
  position: relative;
  overflow: hidden;
}
.hp-final-cta::after {
  content: "";
  position: absolute; bottom: -140px; left: -100px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,186,21,0.12) 0%, rgba(249,186,21,0) 70%);
}
.hp-final-cta h2 { font-size: 30px; margin: 0 0 14px; position: relative; z-index: 2; }
.hp-final-cta p { color: rgba(255,255,255,0.82); margin: 0 0 30px; font-size: 15.5px; position: relative; z-index: 2; }
.hp-final-cta .hp-hero-ctas { justify-content: center; position: relative; z-index: 2; margin-bottom: 0; }

/* ---------- Footer ---------- */
.hp-footer { background: var(--lcb-navy); color: rgba(255,255,255,0.78); padding: 56px 0 28px; margin-top: 40px; }
.hp-footer-top { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #1c3a80; padding-top: 40px; flex-wrap: wrap; gap: 20px; }
.hp-footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.hp-footer-logo img { height: 46px; }
.hp-footer-logo span { color: var(--lcb-white); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.hp-footer-nav { display: flex; gap: 32px; flex-wrap: wrap; }
.hp-footer-nav a { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--lcb-white); }
.hp-footer-nav a:hover { color: var(--lcb-gold); }
.hp-footer-contact { font-size: 14px; color: var(--lcb-white); text-align: right; }
.hp-footer-copy { text-align: center; font-size: 12px; color: rgba(255,255,255,0.7); padding-top: 30px; }

/* ---------- Designer notes ---------- */
.hp-dz-note {
  background: #fff8db;
  border: 1px dashed #c9a227;
  color: #6b5300;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 14px 0;
}
.hp-dz-note b { color: #4a3900; }

@media (max-width: 980px) {
  .hp-hero-inner { grid-template-columns: 1fr; }
  .hp-portfolio-grid { grid-template-columns: 1fr; }
  .hp-steps-grid { grid-template-columns: 1fr 1fr; }
  .hp-trust-grid { grid-template-columns: 1fr 1fr; }
  .hp-stats-strip { grid-template-columns: 1fr 1fr; }
  .hp-nav { display: none; }
}

/* fixed header logo shrinks to 58px (+10px/10px padding = ~78px) at <=991px
   per style.css "header .flex-box .logo-blk a.logo-img" media rule; keep the
   eyebrow badge clear of it with a smaller but still safe top padding. */
@media (max-width: 991px) {
  .hp-hero { padding-top: 108px; }
}