header { display:flex; align-items:center; padding:1em 2em; }
.logo img { width: clamp(50px, 8vw, 80px); height: clamp(40px, 6vw, 70px); }
.HeaderText h1 { font-size: clamp(18px, 4vw, 28px); margin-left: 1.2em; }
nav { display:flex; gap:1rem; margin-left:auto; }
nav a { text-decoration:none; font-weight:700; }
.menu-btn { display:none; font:inherit; font-weight:700; color:var(--color-blue); background:transparent; border:0; cursor:pointer; margin-left:1rem; }

.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: center;
  padding: 4.5em 2.5em;
  background: linear-gradient(180deg, #fffdf7 0%, #fff8e3 70%, #ffffff 100%);
  color: var(--color-blue);
}
.hero-copy { text-align: left; max-width: 680px; }
.hero .eyebrow {
  margin: 0 0 .8rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a5a00;
}
.hero h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0; line-height: 1.15; }
.hero p { font-size:1.1rem; margin:1rem 0 1.4rem; max-width: 62ch; color: #27476a; }
.hero-actions { display:flex; gap:.75rem; justify-content:flex-start; flex-wrap:wrap; margin-bottom:.25rem; }
.carousel {
  position: relative;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(0, 51, 102, .08);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  background: #fff;
}
.carousel img { margin: 0 auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #fff; display: none; }
.carousel img.active { display: block; animation: fade 1s ease-in; }
@keyframes fade { 0% { opacity: .5; } 100% { opacity: 1; } }
.carousel-controls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: #bbb; cursor: pointer; transition: transform .2s; }
.dot.active { background: var(--color-gold-warm); transform: scale(1.2); }
.about,.featured-app { padding:4em 2em; text-align:center; background:#fff; }
.about p { max-width: 760px; margin: .6rem auto 0; color: #3e4e61; }
.featured-app { scroll-margin-top: 90px; }
.app-grid { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; padding: 1rem 0; }
.app-card {
  flex: 1 1 300px;
  max-width: 410px;
  background: linear-gradient(180deg, #ffffff 0%, #fffcf1 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 51, 102, .08);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
}
.app-image img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  margin-bottom: 1.2rem;
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.app-card-content h4 { margin-top: .2rem; margin-bottom: .6rem; }
.app-card-content p { color: #45576c; line-height: 1.55; margin-top: 0; min-height: 78px; }
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem 1rem;
  padding: 1.25rem 2rem;
  background: #f8fbff;
  border-top: 1px solid rgba(0, 51, 102, .12);
  border-bottom: 1px solid rgba(0, 51, 102, .12);
  text-align: center;
}
.trust-strip p { margin: .2rem 0; color: #1e3c60; font-size: .95rem; }

@media (max-width: 768px) {
  .menu-btn { display:block; }
  nav { display:none; position:fixed; top:0; right:-100%; height:100%; width:240px; flex-direction:column; background:#fff; padding:4.5em 1rem 1rem; box-shadow:-2px 0 8px rgba(0,0,0,.1); z-index:1090; }
  nav a { display:block; padding:.75rem .25rem; }
  nav.open { display:flex; right:0; }
  .hero { grid-template-columns: 1fr; padding: 3.2em 1.25em; }
  .hero-copy { text-align: center; margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .carousel { max-width: 420px; }
  .app-card-content p { min-height: auto; }
  .trust-strip { grid-template-columns: 1fr 1fr; padding: 1rem; }
  .app-grid { flex-direction: column; }
}

@media (max-width: 520px) {
  .trust-strip { grid-template-columns: 1fr; }
}