:root {
  --premium-ink: #070b15;
  --premium-navy: #101d35;
  --premium-blue: #294b91;
  --premium-blue-light: #6b83b8;
  --premium-silver: #b8c4d7;
  --premium-line: #8191b433;
  --primary: #294b91;
  --ring: #7085b4;
}

html, body, button, input, select { font-family: Manrope, Inter, system-ui, sans-serif; }
body { background: radial-gradient(ellipse at 75% 9%, #172b51 0, transparent 38%), linear-gradient(150deg, #060a13, #0b1427 54%, #060b17); }
.app-shell { max-width: 1240px; }
.site-header { height: 60px; }
.brand-plus, .hero-copy h1 span, .access h1 span, .deposit h1 span, .title-dot { color: var(--premium-silver); }
.eyebrow-line, .step-line { background: var(--premium-blue-light); }
.button.primary, .hero-login-card .hero-submit { background: linear-gradient(110deg, #253f78, #3559a4); border: 1px solid #5671aa; box-shadow: 0 9px 22px #122d6460; color: #fff; }
.button.primary:hover, .hero-login-card .hero-submit:hover { background: linear-gradient(110deg, #304e8f, #4065b1); }
.button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--premium-blue-light); }
.text-link, .hero-register-link { color: #bac9e7; }
.text-link:hover, .hero-register-link:hover { color: #fff; }
.header-actions #header-account, .header-actions #header-owner, .header-actions .header-contact { color: #cbd5e7; }
.header-actions .header-contact { border-color: var(--premium-line); }
.account-summary, .account-popover, .site-menu { border-color: var(--premium-line); background: #101a2df5; }
.account-popover { width: min(395px, calc(100vw - 28px)); }
.account-status-title strong, .account-summary #summary-tier, .account-level>strong { color: #e5c977; }
.status-modes { margin: 0 0 13px; padding: 9px 11px; border: 1px solid var(--premium-line); border-radius: 8px; color: #b9c8e3; font-size: 11px; line-height: 1.5; }
.account-popover #status-upgrade, .account-level #account-upgrade { background: #a48541; color: #0e1220; border: 1px solid #ccb16c; box-shadow: none; }
.account-popover #status-upgrade:hover, .account-level #account-upgrade:hover { background: #c2a158; }
.profile-logout, #account-logout { color: #b9c6dc; }

.landing { padding-top: 0; }
.hero-grid { min-height: 405px; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 8px; align-items: center; }
.hero-copy { transform: none; padding: 17px 0 12px; }
.hero-copy h1 { margin: 13px 0 10px; font-size: clamp(39px, 4vw, 55px); line-height: 1.08; }
.hero-copy h1 span { color: #b6c6e2; }
.hero-lead { font-size: 13px; line-height: 1.52; max-width: 490px; }
.hero-actions { margin-top: 16px; max-width: 390px; }
.hero-login-card { border-color: var(--premium-line); border-radius: 15px; background: linear-gradient(145deg, #15243bcc, #0a1427e6); }
.hero-card-kicker { color: #9caccb; }
.hero-login-card [data-slot="card-header"] { padding: 15px 18px 6px; }
.hero-login-card [data-slot="card-title"] { font-size: 18px; }
.hero-login-card [data-slot="card-content"] { padding: 12px 18px; }
.hero-login-card .hero-submit { height: 42px; width: 100%; justify-content: space-between; padding-inline: 15px; }
.hero-login-card [data-slot="card-footer"] { justify-content: center; padding: 8px 18px 12px; border: 0; }
.hero-register-link { cursor: pointer; }
.hero-visual { position: relative; height: 405px; min-height: 0; overflow: visible; isolation: isolate; }
.hero-visual::after { z-index: -2; }
.hero-chart-art { position: absolute; inset: 10% -9% 0 -10%; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 78% 63% at 53% 58%, #000 34%, transparent 100%); mask-image: radial-gradient(ellipse 78% 63% at 53% 58%, #000 34%, transparent 100%); }
.hero-candles { position: absolute; left: -5%; bottom: 0; width: 115%; height: 80%; object-fit: cover; opacity: .55; filter: grayscale(1) brightness(.84) contrast(1.15); animation: candles-in 1.3s ease-out both; }
.hero-growth { position: absolute; inset: 8% 0 0; width: 100%; height: 82%; overflow: visible; }
.hero-growth path { fill: none; stroke: #5878b7; stroke-linecap: round; stroke-width: 2.4; stroke-dasharray: 1300; stroke-dashoffset: 1300; filter: drop-shadow(0 0 7px #3d61b2); animation: draw-hero 2.8s ease-out forwards; }
.hero-growth path + path { stroke: #8ba0ca; stroke-width: 1.3; opacity: .66; animation-delay: .3s; }
.hero-person { position: relative; z-index: 2; height: 94%; max-height: 420px; max-width: 92%; filter: drop-shadow(9px 0 23px #1f3b7566); }
.hero-balance { position: absolute; right: 1%; top: 7%; z-index: 3; display: grid; gap: 3px; min-width: 176px; padding: 11px 14px; border: 1px solid #8093ba55; border-radius: 12px; background: #0b162dd8; box-shadow: 0 12px 28px #0008; backdrop-filter: blur(10px); animation: balance-in .8s .25s both; }
.hero-balance span { color: #9caecc; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.hero-balance strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.hero-balance small { color: #aebedb; font-size: 11px; }
.hero-balance b { color: #d4dce9; font-variant-numeric: tabular-nums; }
@keyframes candles-in { from { opacity: 0; transform: translateY(17px); } to { opacity: .55; transform: translateY(0); } }
@keyframes draw-hero { to { stroke-dashoffset: 0; } }
@keyframes balance-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.public-levels { margin: 1px auto 35px; max-width: none; }
.public-levels .eyebrow { font-size: 9px; }
.public-levels h2 { margin: 5px 0 2px; font-size: 21px; }
.public-levels>p { margin: 0; font-size: 11px; }
.public-levels .level-cards { margin: 10px 0 0; gap: 7px; }
.public-levels .level-card { padding: 10px 11px; border-radius: 10px; border-top-width: 2px; background: #101d32; }
.public-levels .level-price { margin: 6px 0 1px; font-size: 17px; }
.public-levels .level-card h3 { font-size: 12px; }
.public-levels .level-signals, .public-levels .level-extra { font-size: 10px; line-height: 1.25; }

.level-track { display: flex; align-items: center; gap: 0; min-width: 0; margin: 0 0 17px; padding: 12px 15px; border: 1px solid var(--premium-line); border-radius: 12px; background: #111e33; }
.track-step { display: flex; align-items: center; flex: 1; min-width: 0; gap: 8px; color: #75849c; font-size: 11px; font-weight: 800; }
.track-step:not(:last-child)::after { content: ''; flex: 1; min-width: 7px; height: 1px; margin: 0 9px; background: #354661; }
.track-dot { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border: 1px solid #52627e; border-radius: 50%; font-size: 10px; }
.track-step.completed { color: #acbbd1; }
.track-step.completed .track-dot { background: #293f6c; border-color: #5772ab; color: white; }
.track-step.current { color: #e5c977; }
.track-step.current .track-dot { background: #a48541; border-color: #c6a962; color: #0b1220; box-shadow: 0 0 0 3px #c6a96221; }
.track-step.current strong::after { content: ' · ВАШ'; font-size: 8px; }
.account-page .level-track { margin-bottom: 20px; }
.upload-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.help-with-text { display: inline-flex; width: auto; height: auto; gap: 7px; align-items: center; border: 0; padding: 4px; border-radius: 7px; background: transparent; color: #b8c7e2; font-size: 11px; line-height: 1.3; }
.help-with-text span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1px solid #6980ad; border-radius: 50%; font-size: 11px; }
.help-with-text:hover, .help-with-text:focus-visible { color: white; background: #243a65; }
.mode-choice .mode-card { border-color: var(--premium-line); }
.mode-choice .mode-card.selected { border-color: #6580b8; background: linear-gradient(145deg, #1e365e, #142641); box-shadow: 0 0 0 1px #5674b44d; }
.mode-choice:nth-child(2) .mode-card { border-top: 2px solid #6178a5; }
.mode-choice:nth-child(3) .mode-card { border-top: 2px solid #a9b8d2; }
.mode-card .mode-icon img { filter: grayscale(1) brightness(1.7); }
.mode-info { color: #b7c5df; border-color: #5e7296; background: #182b48; }
.power-track i { background: linear-gradient(90deg, #34579a, #9aaecd); }
.mode-dialog ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding-left: 19px; }
.mode-dialog li { padding: 0; font-size: 12px; }

@media (max-width: 900px) {
  .hero-grid { min-height: 380px; }
  .hero-visual { height: 380px; }
}
@media (max-width: 760px) {
  .site-header { height: 60px; }
  .landing { padding-top: 15px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { font-size: clamp(34px, 8.8vw, 49px); margin: 8px 0; }
  .hero-lead { font-size: 12px; }
  .hero-actions { margin-top: 13px; }
  .hero-visual { display: flex; height: 265px; min-height: 265px; margin: 0; overflow: hidden; }
  .hero-chart-art { inset: 2% -5% 0; }
  .hero-candles { height: 82%; }
  .hero-person { height: 99%; max-height: 265px; }
  .hero-balance { top: 11%; right: 0; min-width: 130px; padding: 8px 10px; }
  .hero-balance strong { font-size: 16px; }
  .hero-balance span { font-size: 7px; }
  .hero-balance small { font-size: 9px; }
  .public-levels { margin: 6px auto 26px; }
  .public-levels .level-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 7px; }
  .public-levels .level-card { min-width: 148px; scroll-snap-align: start; }
  .level-track { overflow-x: auto; white-space: nowrap; }
  .track-step { min-width: 105px; }
  .mode-dialog ul { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .hero-balance { right: -5px; top: 5%; }
  .hero-login-card [data-slot="card-header"] { padding: 13px 15px 5px; }
  .hero-login-card [data-slot="card-content"] { padding: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-candles, .hero-growth path, .hero-balance { animation: none; stroke-dashoffset: 0; }
  .hero-candles { opacity: .55; }
  .hero-balance { opacity: 1; }
}