:root {
  --home-navy: #092337;
  --home-navy-soft: #12344c;
  --home-paper: #faf9f5;
  --home-ink: #071b30;
  --home-slate: #627588;
  --home-gold: #d8ae4b;
  --home-gold-deep: #b98a28;
  --home-line: #dedbd2;
  --home-serif: Georgia, "Times New Roman", serif;
}

body {
  min-width: 320px;
  color: var(--home-ink);
  background: var(--home-paper);
}

.topbar {
  min-height: 96px;
  padding: 0 48px;
  background: var(--home-navy);
  border: 0;
  box-shadow: none;
}

.topbar .brand-link {
  width: 232px;
  min-height: 86px;
  display: flex;
  align-items: center;
}

.topbar .brand-link .brand {
  display: block;
  width: 208px;
  height: auto;
  max-height: 84px;
  object-fit: contain;
}

.topbar .brand-link.beta-brand-mark { position: relative; }
.topbar .brand-link .beta-brand-badge {
  position: absolute;
  right: -42px;
  top: 28px;
  padding: 5px 10px;
  border: 1px solid #a4b0b4;
  border-radius: 999px;
  background: transparent;
  color: #eef0eb;
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .13em;
}

.topnav {
  gap: 10px;
  margin-left: auto;
}

.topnav a {
  color: #e7e9e4;
  font: 17px/1.2 var(--home-serif);
  font-weight: 400;
}

.topnav a:not(.topnav-login):not(.topnav-register) { padding: 12px 13px; }
.topnav a:hover { color: #fff7de; }

.topnav .topnav-login,
.topnav .topnav-register {
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 5px;
  font-family: var(--home-serif);
  font-weight: 600;
  box-shadow: none;
}

.topnav .topnav-login {
  border: 1px solid #aeb9bc;
  background: transparent;
  color: #f3f2ec;
}

.topnav .topnav-register {
  border: 1px solid var(--home-gold);
  background: var(--home-gold);
  color: var(--home-navy);
}

main { background: var(--home-paper); }
.hero {
  width: min(1380px, calc(100% - 96px));
  min-height: calc(100vh - 96px);
  margin: 0 auto;
  padding: 74px 0 62px;
  align-items: start;
  gap: clamp(50px, 8vw, 140px);
}

.auth-column { width: min(100%, 610px); padding-top: 16px; }
.eyebrow { color: var(--home-gold-deep); font-weight: 700; letter-spacing: .18em; }
.hero h1,
.auth-panel h2,
.info-modal-card h2 { color: var(--home-ink); font-family: var(--home-serif); font-weight: 400; }
.hero h1 { max-width: 610px; margin-top: 13px; font-size: clamp(50px, 5.6vw, 82px); line-height: .99; }
.lead { max-width: 550px; color: var(--home-slate); font: 25px/1.48 var(--home-serif); }

.auth-card {
  margin-top: 39px;
  border: 1px solid var(--home-line);
  border-top: 3px solid var(--home-gold);
  border-radius: 6px;
  background: #fffefa;
  box-shadow: 0 14px 36px rgba(7, 27, 48, .08);
}

.auth-tabs { border-bottom: 1px solid var(--home-line); background: #f4f2eb; }
.auth-tab {
  color: #526576;
  font-family: var(--home-serif);
  font-size: 19px;
  font-weight: 600;
}
.auth-tab.is-active { color: var(--home-ink); background: #fffefa; box-shadow: inset 0 3px 0 var(--home-gold); }
.auth-panel { padding: 30px 34px 34px; }
.auth-panel h2 { font-size: 35px; }
.panel-lead,
.privacy-note { color: var(--home-slate); }
.auth-panel label { color: var(--home-ink); font: 600 16px/1.3 var(--home-serif); }
.auth-panel input {
  border: 1px solid #b8c1c1;
  border-radius: 4px;
  background: #fffefa;
  color: var(--home-ink);
  font-size: 17px;
}
.auth-panel input:focus { border-color: var(--home-gold-deep); box-shadow: 0 0 0 3px rgba(216, 174, 75, .2); }
.password-toggle,
.link-button { color: #516b80; font-family: var(--home-serif); }
.primary-button {
  border: 1px solid var(--home-gold);
  border-radius: 4px;
  background: var(--home-navy);
  color: #fffdf6;
  font: 600 18px/1.1 var(--home-serif);
  box-shadow: none;
}
.primary-button:hover { background: var(--home-navy-soft); }
.form-status { color: #176b4a; }

.preview-column { margin-top: 4px; width: min(100%, 590px); }
.workspace-preview { border: 1px solid #b9b8b0; border-top: 3px solid var(--home-gold); border-radius: 6px; background: #fdfcf8; box-shadow: 0 18px 44px rgba(7, 27, 48, .13); }
.preview-chrome { background: var(--home-navy); color: #e9ebe7; font-family: var(--home-serif); }
.preview-chrome strong { color: #f2c865; }
.window-dots i { background: #8fa0ab; }
.preview-body { background: #fdfcf8; }
.preview-sidebar { background: #102e43; border-right: 1px solid #345064; }
.preview-mark { color: #f5c75f; font-family: var(--home-serif); }
.preview-side-label { color: #9eb0b8; }
.preview-side-item { color: #e6e8e2; }
.preview-side-item.is-active { background: rgba(216, 174, 75, .19); color: #fff5d3; }
.preview-content { background: #fdfcf8; }
.preview-content .eyebrow { color: var(--home-gold-deep); }
.preview-content h2 { color: var(--home-ink); font-family: var(--home-serif); }
.preview-stats > div,
.preview-client { border-color: #dcdad2; background: #fffefa; }
.preview-stats strong,
.preview-client strong { color: var(--home-ink); font-family: var(--home-serif); }
.preview-stats span,
.preview-client small,
.preview-footnote { color: var(--home-slate); }
.preview-client .avatar { background: #e8e4d8; color: var(--home-navy); }
.preview-client b { color: #17734e; }
.preview-caption { color: #6c7c86; font-family: var(--home-serif); }

.info-grid { width: min(1380px, calc(100% - 96px)); margin: 0 auto; }
.info-grid-note { color: #74828c; font-family: var(--home-serif); }
.info-modal-card { border: 1px solid var(--home-line); border-top: 3px solid var(--home-gold); border-radius: 6px; background: #fffefa; }
.info-modal-card p { color: var(--home-slate); font-family: var(--home-serif); }
.modal-action { background: var(--home-navy); border-radius: 4px; font-family: var(--home-serif); }

footer {
  display: flex;
  justify-content: flex-end;
  gap: 17px;
  min-height: 60px;
  padding: 19px 48px;
  border-top: 1px solid #dddcd6;
  background: #f4f3ef;
  color: #556674;
  font: 14px/1.2 var(--home-serif);
}
footer span { margin-right: auto; }
footer a { color: #435d70; }
footer a:hover { color: var(--home-gold-deep); }

.site-cookie-notice,
.cookie-banner { border-color: #c9c7bf; background: #fffefa; color: var(--home-ink); }
.site-cookie-notice button,
.cookie-banner button { border-radius: 4px; background: var(--home-navy); color: #fffefa; }

@media (max-width: 960px) {
  .topbar { min-height: 80px; padding: 0 24px; }
  .topbar .brand-link { width: 185px; min-height: 72px; }
  .topbar .brand-link .brand { width: 170px; max-height: 68px; }
  .topbar .brand-link .beta-brand-badge { right: -29px; top: 21px; padding: 4px 7px; font-size: 9px; }
  .hero, .info-grid { width: min(100% - 48px, 680px); }
  .hero { min-height: 0; padding: 47px 0 50px; grid-template-columns: 1fr; gap: 46px; }
  .auth-column, .preview-column { width: 100%; }
  .preview-column { margin: 0; }
}

@media (max-width: 680px) {
  .topbar { min-height: 70px; padding: 0 16px; }
  .topbar .brand-link { width: 158px; min-height: 62px; }
  .topbar .brand-link .brand { width: 150px; max-height: 58px; }
  .topbar .brand-link .beta-brand-badge { right: -19px; top: 17px; font-size: 8px; letter-spacing: .09em; }
  .mobile-menu-toggle { color: #f4f2ea; }
  .mobile-menu-toggle span { background: #f4f2ea; }
  .topnav { background: var(--home-navy); border-top: 1px solid #345064; }
  .topnav a { color: #f4f2ea; font-family: var(--home-serif); }
  .topnav .topnav-login,
  .topnav .topnav-register { margin: 6px 0; text-align: center; }
  .hero, .info-grid { width: calc(100% - 32px); }
  .hero { padding: 37px 0 38px; gap: 36px; }
  .hero h1 { font-size: clamp(44px, 14vw, 60px); }
  .lead { font-size: 21px; }
  .auth-card { margin-top: 28px; }
  .auth-panel { padding: 25px 20px 28px; }
  .auth-panel h2 { font-size: 30px; }
  .auth-tab { font-size: 16px; }
  .preview-column { display: block; }
  .workspace-preview { overflow: hidden; }
  .preview-sidebar { width: 104px; padding: 22px 11px; }
  .preview-side-item { font-size: 12px; }
  .preview-content { padding: 23px 17px; }
  .preview-content h2 { font-size: 28px; }
  .preview-stats { grid-template-columns: 1fr; }
  footer { flex-wrap: wrap; justify-content: center; gap: 11px 16px; padding: 18px 16px; text-align: center; }
  footer span { width: 100%; margin-right: 0; text-align: center; }
}