.connect-page {
  background:
    radial-gradient(1000px 500px at 0% -10%, rgba(255, 165, 0, 0.10), transparent 45%),
    radial-gradient(900px 520px at 100% 0%, rgba(0, 51, 102, 0.08), transparent 45%),
    var(--color-cream);
  color: var(--color-ink);
}

.connect-header {
  width: min(var(--container), calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0;
}

.connect-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-blue);
  text-decoration: none;
}

.connect-brand img { height: 44px; width: auto; }
.connect-brand h1 { margin: 0; font-size: 1.15rem; letter-spacing: .2px; }

.connect-main {
  width: min(var(--container), calc(100% - 2rem));
  margin: 1.5rem auto 4rem;
}

.connect-shell {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1.25rem;
  align-items: start;
}

.panel {
  background: var(--color-card);
  border: 1px solid rgba(0, 51, 102, 0.10);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 1.4rem;
}

.pill {
  display: inline-flex;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 165, 0, 0.4);
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-blue-deep);
  font-size: .8rem;
  font-weight: 600;
}

.hero h2 { margin: .8rem 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.hero p { color: var(--color-muted); margin: 0 0 1rem; }

.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.app-card {
  border: 1px solid rgba(0, 51, 102, 0.13);
  border-radius: 14px;
  padding: .95rem;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.10), #fff 35%);
}
.app-card h4 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .55rem;
  color: var(--color-blue-deep);
}
.app-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.app-card p { margin: 0 0 .75rem; color: var(--color-muted); }
.store-row {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: center;
}
.store-badge { height: 40px; width: auto; display: block; }

.links-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.links-row a { color: var(--color-blue); font-weight: 700; text-decoration: none; }

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
.info-card h3 { margin: 0 0 .35rem; }
.muted { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { border: 1px solid rgba(0, 51, 102, 0.15); border-radius: 999px; padding: .34rem .58rem; font-size: .78rem; }
.contact-list { margin: 0; }
.contact-list a { color: var(--color-blue); }
.social-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .65rem; }

.qr-card { position: sticky; top: 5.5rem; }
.qr-wrap {
  border: 1px dashed rgba(0, 51, 102, 0.2);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
}
.qr-wrap img { width: min(100%, 190px); height: auto; border-radius: 12px; }
.btn {
  display: inline-block;
  border-radius: 999px;
  padding: .6rem .95rem;
  background: var(--color-orange);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.connect-footer {
  width: min(var(--container), calc(100% - 2rem));
  margin: 1.5rem auto 2rem;
  color: var(--color-muted);
  text-align: left;
}

@media (max-width: 900px) {
  .connect-shell,
  .apps-grid,
  .info-grid { grid-template-columns: 1fr; }
  .qr-card { position: static; }
  .connect-main { margin-top: 1rem; }
}