html, body { height: 100%; }
body { margin: 0; color: #242F31; background: #f7f7f7; font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
a{text-decoration: none !important;}

.active-white .site-header { background: #00000066; border-bottom-color: #00000033; }
.active-white .nav-link { color: #ffffff; }
.active-white .nav-link:hover { color: #dddddd; }
.active-white .branding { color: #ffffff; }

#hero { position: relative; min-height: clamp(520px, 80vh, 960px); padding-top: clamp(120px, 4vh, 340px); padding-bottom: clamp(50px, 3vh, 80px); display: flex; align-items: center; transition: background-color 0.4s ease; width: 100%; }
.demo-intro { text-align: center; padding: 48px 0; }
.demo-intro h1 { font-size: 42px; margin: 0 0 12px; }
.demo-intro p { max-width: 680px; margin: 0 auto 20px; }
.cta-row { display: inline-flex; gap: 14px; }
.btn-primary, .btn-secondary { display: inline-block; padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.btn-primary { background: #00A6DD; color: #fff; }
.btn-secondary { background: #fff; color: #242F31; border: 1px solid #e0e0e0; }
.btn-primary:hover { background: #0195c7; }
.btn-secondary:hover { background: #f3f3f3; }

@media (max-width: 900px) {
  .features, .cards { grid-template-columns: 1fr; }
  .demo-intro h1 { font-size: 34px; }
}

@media (max-width: 480px) {
  #hero {
    padding-top: clamp(225px, 4vh, 340px);
    padding-bottom: clamp(100px, 3vh, 110px);
  }
}