/* mundasync.com - one static page, no scripts. Continuitech brand kit (Branding/BRAND_GUIDE.md). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/outfit-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/outfit-latin-700-normal.woff2') format('woff2');
}

:root {
  --midnight: #0D1B2A;
  --blue: #4A5FBD;
  --purple: #6C2DC7;
  --magenta: #D63384;
  --coral: #FF6B6B;
  --slate-100: #F0F4F8;
  --slate-300: #CBD5E1;
  --slate-500: #64748B;
  --slate-800: #1E293B;
  --gradient: linear-gradient(135deg, var(--blue) 0%, var(--purple) 30%, var(--magenta) 65%, var(--coral) 100%);
  --heading: 'Outfit', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 1rem/1.65 var(--body); color: var(--slate-800); background: #FFFFFF; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: #FFFFFF; color: var(--midnight); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 12px; top: 12px; }

/* Header */
.top { background: var(--midnight); color: #FFFFFF; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand span { font: 700 1.35rem/1 var(--heading); letter-spacing: 0.01em; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; color: var(--slate-300); font-size: 0.95rem; }
.nav a:hover { color: #FFFFFF; }
.nav .btn { color: #FFFFFF; }
@media (max-width: 640px) { .nav .text-link { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 10px;
  font: 600 1rem/1.2 var(--body); text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--gradient); color: #FFFFFF; box-shadow: 0 6px 20px rgba(214, 51, 132, 0.25); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.45); color: #FFFFFF; }
.btn-ghost:hover { border-color: #FFFFFF; }
.btn-small { min-height: 38px; padding: 8px 16px; font-size: 0.95rem; }

/* Hero */
.hero { background: var(--midnight); color: #FFFFFF; padding: 56px 0 80px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.eyebrow { margin: 0 0 14px; font: 600 0.8rem/1.2 var(--heading); letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); }
.hero h1 { margin: 0; font: 700 clamp(2.3rem, 6vw, 3.6rem)/1.08 var(--heading); }
.hero h1 .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 22px 0 0; font-size: 1.15rem; color: var(--slate-300); max-width: 34em; }
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* The hero's picture: a day's records moving from the phone to the portal */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.flow li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.flow .dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.flow .dot svg { width: 22px; height: 22px; stroke: #FFFFFF; }
.flow strong { display: block; font-weight: 600; }
.flow small { display: block; color: var(--slate-300); font-size: 0.88rem; }
.flow .state { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid currentColor; }
.state-wait { color: #F7B267; }
.state-done { color: #7EE0A8; }
.flow li.synced { background: rgba(108, 45, 199, 0.28); border-color: rgba(214, 51, 132, 0.55); }

/* Sections */
section.band { padding: 80px 0; }
.band-light { background: var(--slate-100); }
h2 { margin: 0; font: 700 clamp(1.7rem, 4vw, 2.3rem)/1.2 var(--heading); color: var(--midnight); }
.section-lede { margin: 12px 0 0; color: var(--slate-500); max-width: 40em; font-size: 1.05rem; }

.features { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.features li { background: #FFFFFF; border-radius: 14px; padding: 24px; box-shadow: 0 1px 3px rgba(13, 27, 42, 0.08); }
.features svg { width: 30px; height: 30px; stroke: var(--purple); margin-bottom: 14px; }
.features h3 { margin: 0; font: 600 1.15rem/1.3 var(--heading); color: var(--slate-800); }
.features p { margin: 8px 0 0; color: var(--slate-500); font-size: 0.95rem; }

.steps { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; }
.steps li::before {
  content: '0' counter(step);
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 16px;
  background: var(--midnight); color: var(--coral); font: 700 1.4rem/1 var(--heading);
}
.steps h3 { margin: 0; font: 600 1.25rem/1.3 var(--heading); color: var(--slate-800); }
.steps p { margin: 8px 0 0; color: var(--slate-500); }

.name { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
@media (max-width: 640px) { .name { grid-template-columns: 1fr; } }
.name .word { font: 700 clamp(2rem, 6vw, 3rem)/1 var(--heading); background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name p { margin: 0; font-size: 1.1rem; color: var(--slate-800); max-width: 36em; }

.cta { background: var(--midnight); color: #FFFFFF; text-align: center; }
.cta h2 { color: #FFFFFF; }
.cta p { margin: 14px auto 0; color: var(--slate-300); max-width: 34em; }
.cta .actions { justify-content: center; }

/* Footer */
footer { background: #091421; color: var(--slate-300); padding: 40px 0; font-size: 0.92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
footer img { height: 56px; width: auto; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer a { color: var(--slate-300); }
footer a:hover { color: #FFFFFF; }
footer .legal { flex-basis: 100%; margin: 0; color: var(--slate-500); }

/* 404 */
.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; background: var(--midnight); color: #FFFFFF; padding: 40px 20px; }
.lost h1 { margin: 0; font: 700 2.4rem/1.2 var(--heading); }
.lost p { color: var(--slate-300); }

@media print {
  .top, .hero, .cta, footer { background: #FFFFFF !important; color: #000000; }
  .nav, .actions { display: none; }
  .hero h1 .grad, .name .word { color: #000000; background: none; }
}