/* ============================================================
   MissionPilot home - page-specific styles (after design-system.css)
   ============================================================ */

/* Hero */
.hero { position: relative; text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 80% at 50% -10%, rgba(108,79,203,0.10), transparent 60%); }
.hero .mark-lg { width: 72px; height: 72px; margin: 0 auto var(--space-6); }
.hero h1 { font-size: var(--step-4); letter-spacing: -0.015em; max-width: 18ch; margin: 0 auto; }
.hero .lead { margin: var(--space-6) auto 0; max-width: 52ch; }
.hero-actions { margin-top: var(--space-8); display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.hero .microline { margin-top: var(--space-6); font-size: var(--step--1); color: var(--color-muted); }

/* Mission pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-16); }
.pillar { text-align: left; }
.pillar .icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line-strong); box-shadow: 0 10px 24px -18px rgba(34,51,92,0.4); }
.pillar .icon svg { width: 24px; height: 24px; }
.pillar h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.pillar p { color: var(--color-ink-body); }

/* Apps grid */
.apps-head { max-width: 30ch; margin-bottom: var(--space-16); }
.apps-head h2 { font-size: var(--step-3); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-8); }
.app-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: 0 1px 2px rgba(34,51,92,0.05), 0 20px 40px -28px rgba(34,51,92,0.3); transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.25s ease; transition-delay: calc(var(--i, 0) * 90ms); position: relative; overflow: hidden; }
/* gradient accent bar that sweeps in on hover */
.app-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-thread); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.app-card--live:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--knot-purple) 30%, var(--color-line)); box-shadow: 0 1px 2px rgba(34,51,92,0.05), 0 30px 55px -24px rgba(34,51,92,0.45); }
.app-card--live:hover::before { transform: scaleX(1); }
.app-card__top { display: flex; align-items: center; gap: var(--space-4); }
.app-card__logo { width: 60px; height: 60px; border-radius: 16px; flex: none; padding: 3px; background: var(--gradient-thread); box-shadow: 0 10px 24px -12px rgba(194,65,127,0.5); object-fit: cover; }
.app-card__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--color-ink); line-height: 1.1; }
.app-card__tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-top: 0.2rem; }
.app-card__tagline { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--color-ink); line-height: 1.25; margin-top: var(--space-2); }
.app-card__value { color: var(--color-ink-body); flex: 1; }
.app-card__link { font-weight: 600; color: var(--color-accent); display: inline-flex; align-items: center; gap: 0.35rem; margin-top: var(--space-2); }
.app-card__link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.app-card--live:hover .app-card__link svg { transform: translateX(4px); }
.app-card--soon { border-style: dashed; border-color: var(--color-line-strong); background: color-mix(in srgb, var(--color-surface) 55%, transparent); box-shadow: none; }
.app-card--soon .app-card__logo { padding: 0; background: var(--color-surface-sunk); display: grid; place-items: center; color: var(--color-faint); box-shadow: none; position: relative; }
.app-card--soon .app-card__logo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--gradient-thread); opacity: 0.5; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.app-card--soon .app-card__logo svg { width: 28px; height: 28px; color: var(--knot-purple); }
.app-card--soon .app-card__logo--img { padding: 6px; background: var(--color-surface-sunk); object-fit: contain; }
.app-card--soon .app-card__logo--img::after { display: none; }
.badge-soon { align-self: flex-start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-ink); background: color-mix(in srgb, var(--knot-magenta) 12%, transparent); border-radius: 999px; padding: 0.25rem 0.7rem; }
@media (prefers-reduced-motion: reduce) {
  .app-card, .app-card::before, .app-card__link svg { transition: none; }
}

/* Closing */
.closing { text-align: center; }
.closing h2 { font-size: var(--step-3); max-width: 20ch; margin: 0 auto; }
.closing .signoff { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--color-ink); max-width: 26ch; margin: var(--space-8) auto 0; }
.closing .actions { margin-top: var(--space-12); display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: var(--space-12); }
  .app-grid { grid-template-columns: 1fr; }
}