:root {
  --navy: #0b2545;
  --navy-2: #103b65;
  --blue: #1687d9;
  --cyan: #4bb9ee;
  --ink: #102b47;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  width: 190px;
}

.brand-logo-frame {
  display: block;
  width: 190px;
  height: 84px;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.site-brand > small {
  width: 100%;
  margin: 6px 0 0 27px;
  color: #6e8495;
  font-size: 9.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.auth-aside .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 8px 20px rgba(0, 0, 0, .12));
}

.site-footer .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 8px 20px rgba(0, 0, 0, .16));
}

.auth-aside .site-brand,
.site-footer .site-brand {
  width: 210px;
}

.auth-aside .brand-logo-frame,
.site-footer .brand-logo-frame {
  width: 210px;
  height: 93px;
}

.auth-aside .site-brand > small,
.site-footer .site-brand > small {
  margin-top: 8px;
  color: #77d0ff;
}

.nav-shell {
  height: 104px;
}

.hero {
  padding-top: 72px;
}

.hero-visual {
  min-height: 535px;
}

.photo-frame {
  inset: 8px 0 18px 32px;
  border-radius: 38px 38px 38px 110px;
}

.photo-frame img {
  object-position: center center;
}

.problems-section {
  padding: 94px 0;
  background: #0b2545;
  color: #fff;
}

.problems-section .section-intro h2 {
  color: #fff;
}

.problems-section .section-intro p {
  color: #b9d0e2;
}

.problems-section .eyebrow {
  color: #63c7f4;
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.problems-grid article {
  min-height: 245px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
}

.problems-grid article > span {
  color: #63c7f4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.problems-grid h3 {
  margin: 28px 0 12px;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}

.problems-grid p {
  margin: 0;
  color: #b9d0e2;
  font-size: 13px;
}

.extended-roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: 18px;
}

.extended-roles article {
  padding: 16px;
  border: 1px solid #dce8f3;
  border-radius: 14px;
  background: #f8fbfe;
}

.extended-roles strong,
.extended-roles span {
  display: block;
}

.extended-roles strong {
  color: #153956;
  font-size: 11px;
}

.extended-roles span {
  margin-top: 6px;
  color: #718698;
  font-size: 9px;
  line-height: 1.45;
}

.demo-section {
  padding: 84px 0;
  background: linear-gradient(120deg, #087fe8, #0759b0);
  color: #fff;
}

.demo-shell {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 56px;
  align-items: center;
}

.demo-copy h2 {
  margin: 12px 0 14px;
  color: #fff;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.demo-copy p {
  margin: 0;
  color: #d8efff;
  font-size: 15px;
}

.demo-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.demo-button {
  min-height: 178px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 19px;
  background: rgba(255,255,255,.11);
  color: #fff;
  text-decoration: none;
  transition: transform .2s, background .2s, box-shadow .2s;
}

.demo-button:hover {
  transform: translateY(-5px);
  background: #fff;
  color: #0b2545;
  box-shadow: 0 18px 44px rgba(0,32,75,.2);
}

.demo-button span {
  display: block;
  margin-bottom: 28px;
  color: #8bd8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.demo-button strong,
.demo-button small {
  display: block;
}

.demo-button strong {
  font-size: 15px;
  line-height: 1.25;
}

.demo-button small {
  margin-top: 8px;
  color: #c7e8fb;
  font-size: 11px;
  line-height: 1.35;
}

.demo-button:hover small { color: #60788b; }

.demo-note {
  grid-column: 2;
  margin: -36px 0 0;
  color: #bce4fb;
  font-size: 10px;
}

.legal-links-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 42px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.legal-links-bar span {
  margin-right: auto;
  color: #8fb5d2;
  font-size: 11px;
  font-weight: 700;
}

.legal-links-bar a {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  color: #d8efff;
  font-size: 10px;
  text-decoration: none;
}

.legal-links-bar a:hover {
  border-color: #77d0ff;
  color: #fff;
}

@media (max-width: 800px) {
  .problems-grid { grid-template-columns: 1fr; }
  .problems-grid article { min-height: 0; }
  .demo-shell { grid-template-columns: 1fr; gap: 34px; }
  .demo-note { grid-column: 1; margin: -20px 0 0; }
  .extended-roles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .nav-shell { height: 82px; }
  .site-brand { width: 145px; }
  .brand-logo-frame { width: 145px; height: 64px; }
  .site-brand > small { display: none; }
  .hero { padding-top: 48px; }
  .hero-visual { min-height: 360px; }
  .photo-frame { inset: 0; border-radius: 26px 26px 26px 72px; }
  .problems-section { padding: 72px 0; }
  .demo-section { padding: 68px 0; }
  .demo-actions { grid-template-columns: 1fr; }
  .demo-button { min-height: 0; }
  .demo-button span { margin-bottom: 15px; }
  .extended-roles { grid-template-columns: 1fr; }
  .legal-links-bar { align-items: stretch; }
  .legal-links-bar span { width: 100%; margin: 0 0 4px; }
  .legal-links-bar a { width: 100%; text-align: center; }
}