/* =====================================================================
   madebyhmns.com — site layout. Uses the launcher's tokens and components
   (tokens.css, base.css, components.css); only page structure lives here.
   ===================================================================== */

html { scroll-behavior: smooth; }
body { user-select: auto; }
a { color: inherit; text-decoration: none; }
a.btn { display: inline-flex; }
.btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: default; }

/* ---- Top navigation --------------------------------------------------- */
.site-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--page-gutter);
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.85), rgba(7, 8, 11, 0.55));
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border-subtle); }
.site-nav__links { display: flex; align-items: center; gap: var(--space-6); font-size: var(--text-md); color: var(--text-secondary); }
.site-nav__links a:not(.btn):hover { color: var(--text-primary); }

/* ---- Hero ------------------------------------------------------------- */
.hero { max-width: 820px; margin: 0 auto; padding: 120px var(--page-gutter) 90px; text-align: center; display: grid; justify-items: center; gap: var(--space-5); }
.hero__mark { width: 128px; height: auto; color: var(--text-primary); filter: drop-shadow(0 0 40px rgba(170, 190, 255, 0.28)); margin-bottom: var(--space-4); }
.hero__eyebrow { margin: 0; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-secondary); }
.hero__title { margin: 0; font: var(--weight-semibold) clamp(40px, 6.4vw, 72px)/1.04 var(--font-display); letter-spacing: -0.025em;
  background: linear-gradient(180deg, #ffffff, #b9bfcc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { margin: 0; max-width: 620px; font-size: var(--text-lg); line-height: 1.55; color: var(--text-secondary); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); scroll-margin-top: 120px; }
.hero__actions .btn { height: 46px; padding: 0 var(--space-6); font-size: var(--text-md); }
.hero__note { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Apps & sections (components come from components.css) ----------- */
#apps { scroll-margin-top: 80px; }
.app-card { min-height: 176px; }
.app-card .btn { text-decoration: none; }

/* ---- How it works ------------------------------------------------------ */
.how { padding-top: var(--space-10); scroll-margin-top: 80px; }
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--grid-gap); }
.how__step { padding: var(--space-6); border-radius: var(--radius-lg); }
.how__num { font: var(--text-sm) var(--font-mono); color: var(--text-faint); }
.how__step h3 { margin: var(--space-3) 0 var(--space-2); font: var(--weight-semibold) var(--text-lg) var(--font-display); }
.how__step p { margin: 0; color: var(--text-secondary); }

/* ---- Footer ------------------------------------------------------------ */
.site-foot { display: flex; align-items: center; gap: var(--space-4); max-width: var(--page-max); margin: 80px auto 0;
  padding: var(--space-8) var(--page-gutter) var(--space-10); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-sm); }
.site-foot__mark { width: 26px; height: auto; color: var(--text-secondary); }
.site-foot__tag { margin-left: auto; letter-spacing: 0.28em; text-transform: uppercase; font-size: var(--text-xs); font-weight: var(--weight-semibold); }

@media (max-width: 760px) {
  .site-nav__links a:not(.btn) { display: none; }
  .hero { padding-top: 72px; padding-bottom: 56px; }
  .hero__mark { width: 96px; }
  .site-foot { flex-wrap: wrap; }
  .site-foot__tag { margin-left: 0; width: 100%; }
}