/* Página principal (zordem.com.br/): mesma lógica da /zordem, em branco, um cartão por aplicativo. */
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: #fff; color: #0a0a0a; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }

.zordem-page { position: relative; min-height: 100vh; background: radial-gradient(ellipse 60% 40% at 50% -5%, rgba(0, 0, 0, 0.05) 0%, transparent 70%), #fff; }
.zordem-shell { width: min(calc(100% - 32px), 460px); margin: 0 auto; padding: 40px 0 56px; min-height: 100vh; display: flex; flex-direction: column; }

.hero { text-align: center; margin-bottom: 34px; }
.logo-frame { width: 112px; height: 112px; margin: 0 auto; border-radius: 999px; overflow: hidden; background: #000; box-shadow: 0 0 40px rgba(0, 0, 0, 0.12), 0 0 80px rgba(0, 0, 0, 0.05); }
.logo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.hero-divider { width: 50px; height: 1px; margin: 18px auto 16px; background: linear-gradient(90deg, transparent, #0a0a0a, transparent); }
.hero-subtitle { margin: 0; color: #0a0a0a; font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; }

.stack { display: grid; gap: 16px; margin-bottom: 16px; }

.glass-card { padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px var(--c); background: linear-gradient(135deg, #fff 0%, #fff 50%, var(--soft) 100%); }
.glass-card h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.15; color: #0a0a0a; }
.glass-card p { margin: 10px 0 0; color: rgba(0, 0, 0, 0.55); font-size: 14px; line-height: 1.5; }

.cta-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 14px 18px; border-radius: 8px; font-size: 14px; font-weight: 700; color: #fff; background: var(--g); box-shadow: 0 0 15px var(--soft); transition: opacity 180ms ease, transform 180ms ease; }
.cta-button:hover, .cta-button:focus-visible { opacity: 0.92; transform: translateY(-1px); }

.c-carrossel { --c: #a8d400; --soft: rgba(209, 254, 23, 0.16); --g: linear-gradient(90deg, #d1fe17, #e4ff14); }
.c-carrossel .cta-button { color: #131517; }
.c-viral { --c: #1f6feb; --soft: rgba(31, 111, 235, 0.08); --g: linear-gradient(90deg, #1f6feb, #5cc8ff); }
.c-apps { --c: #00bc7c; --soft: rgba(0, 188, 124, 0.09); --g: linear-gradient(90deg, #14d48f, #009a66); }
.c-clinicas { --c: #1668e3; --soft: rgba(22, 104, 227, 0.08); --g: linear-gradient(90deg, #6fb1ff, #1668e3); }
.c-anuncios { --c: #f97316; --soft: rgba(249, 115, 22, 0.09); --g: linear-gradient(90deg, #ffab40, #f97316, #c2410c); }
.c-sites { --c: #7c3aed; --soft: rgba(124, 58, 237, 0.08); --g: linear-gradient(90deg, #c084fc, #7c3aed, #5b21b6); }
.c-billion { --c: #0a0a0a; --soft: rgba(0, 0, 0, 0.06); --g: linear-gradient(90deg, #333, #000); }

.zordem-footer { margin-top: auto; padding-top: 56px; padding-bottom: 20px; text-align: center; }
.footer-divider { height: 1px; margin-bottom: 16px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent); }
.zordem-footer p { margin: 0; color: rgba(0, 0, 0, 0.35); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

.reveal { animation: fade-up 560ms ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .zordem-shell { width: min(calc(100% - 24px), 460px); padding: 28px 0 44px; }
  .logo-frame { width: 96px; height: 96px; }
  .glass-card { padding: 20px; }
}
.glass-card[hidden] { display: none !important; }