:root { --app-navy: #00142d; --app-orange: #f5820a; --app-muted: #617188; --app-line: #dfe7f0; }
body.app-page { background: #f4f7fb; color: #16283d; }
.app-page .site-header { position: relative; background: var(--app-navy) !important; }
.app-content { min-height: calc(100vh - 180px); padding: 2.5rem 0 3rem; }
.app-hero { display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.25rem; color: #fff; background: radial-gradient(circle at 12% 0%, rgba(245, 130, 10, .28), transparent 45%), var(--app-navy); }
.app-hero-icon { flex: none; width: 96px; height: 96px; border-radius: 1.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.app-kicker { margin: 0 0 .35rem; color: var(--app-orange); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.app-hero h1 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; }
.app-hero p:last-child { margin: 0; max-width: 42rem; color: #d6e2ef; line-height: 1.55; }
.app-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.app-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.4rem; border: 2px solid transparent; border-radius: .75rem; font-size: 1rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.app-button[hidden] { display: none; }
.app-button.disabled { opacity: .5; pointer-events: none; box-shadow: none; }
.app-button-primary { color: #fff; background: var(--app-orange); box-shadow: 0 6px 18px rgba(245, 130, 10, .35); }
.app-button-primary:hover, .app-button-primary:focus-visible { color: #fff; background: #d96800; }
.app-button-outline { color: var(--app-navy); border-color: var(--app-navy); background: #fff; }
.app-button-outline:hover, .app-button-outline:focus-visible { color: #fff; background: var(--app-navy); }
.app-meta { margin: .6rem 0 0; color: var(--app-muted); font-size: .85rem; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.app-card { padding: 1.4rem; border: 1px solid var(--app-line); border-radius: 1rem; background: #fff; box-shadow: 0 8px 24px rgba(0, 20, 45, .05); }
.app-card.is-recommended { border-color: var(--app-orange); box-shadow: 0 8px 24px rgba(245, 130, 10, .18); }
.app-card h2 { margin: .6rem 0 .75rem; color: var(--app-navy); font-size: 1.25rem; font-weight: 800; }
.app-badge { display: inline-block; padding: .25rem .65rem; border-radius: 2rem; color: #8b5515; background: #fff2d6; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.app-badge-blue { color: #17508a; background: #e3f0fb; }
.app-badge-dark { color: #fff; background: var(--app-navy); }
.app-steps { display: grid; gap: .6rem; margin: 0; padding-left: 1.2rem; color: #2b3d54; line-height: 1.5; }
.app-note { margin: 1rem 0 0; padding: .7rem .85rem; border-left: 4px solid var(--app-orange); border-radius: .4rem; color: #6e5b3d; background: #fff7e8; font-size: .85rem; line-height: 1.45; }
.app-card-qr { display: grid; justify-items: center; text-align: center; }
.app-qr { width: 180px; height: 180px; padding: .5rem; border: 1px solid var(--app-line); border-radius: .75rem; background: #fff; }
.app-faq { margin-top: 1.75rem; padding: 1.4rem; border: 1px solid var(--app-line); border-radius: 1rem; background: #fff; }
.app-faq h2 { margin: 0 0 .75rem; color: var(--app-navy); font-size: 1.25rem; font-weight: 800; }
.app-faq details { padding: .75rem 0; border-top: 1px solid var(--app-line); }
.app-faq summary { color: var(--app-navy); font-weight: 700; cursor: pointer; }
.app-faq details p { margin: .5rem 0 0; color: #2b3d54; line-height: 1.5; }
@media (max-width: 760px) {
  .app-hero { flex-direction: column; align-items: flex-start; }
  .app-grid { grid-template-columns: 1fr; }
  .app-actions .app-button { width: 100%; }
}