/* ============================================================
   NeoBlok — Marketing site styles (UI kit)
   Premium, calm, confident. Built entirely on design tokens.
   ============================================================ */

.mk { background: var(--n-0); color: var(--text-body); }
.mk-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.mk-section { padding: 96px 0; }
.mk-eyebrow { display:inline-flex; align-items:center; gap:8px; font:var(--fw-semibold) var(--text-xs)/1 var(--font-sans); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand-600); }
.mk-h2 { font:var(--type-h2); color:var(--text-strong); max-width:18ch; }
.mk-sub { margin-top:16px; font:var(--type-lead); color:var(--text-muted); max-width:56ch; }
.mk-center { text-align:center; }
.mk-center .mk-h2, .mk-center .mk-sub { margin-left:auto; margin-right:auto; }
.mk-arrow { display:inline-flex; align-items:center; gap:6px; color:var(--brand-600); font:var(--type-ui-sm); transition:gap var(--dur-fast) var(--ease-out); }
.mk-arrow:hover { gap:10px; }
.mk-arrow svg { width:15px; height:15px; }

/* ---- Top nav ---------------------------------------------------- */
.mk-nav { position:sticky; top:0; z-index:60; height:64px; display:flex; align-items:center; background:color-mix(in srgb, var(--n-0) 80%, transparent); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent; transition:border-color var(--dur-base), background var(--dur-base); }
.mk-nav.is-scrolled { border-bottom-color:var(--border-subtle); background:color-mix(in srgb, var(--n-0) 92%, transparent); }
.mk-nav__inner { display:flex; align-items:center; gap:40px; width:100%; }
.mk-nav__links { display:flex; align-items:center; gap:4px; }
.mk-nav__link { padding:8px 12px; border-radius:var(--r-sm); font:var(--type-ui-sm); color:var(--text-body); transition:var(--transition-colors); cursor:pointer; }
.mk-nav__link:hover { background:var(--surface-sunken); color:var(--text-strong); }
.mk-nav__spacer { flex:1; }
.mk-nav__actions { display:flex; align-items:center; gap:8px; }

/* buttons (marketing-local, token-driven) */
.mk-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:var(--r-sm); font:var(--type-ui-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:var(--transition-colors), transform var(--dur-fast) var(--ease-out); }
.mk-btn svg { width:16px; height:16px; }
.mk-btn:active { transform:translateY(.5px); }
.mk-btn--primary { background:var(--brand-600); color:#fff; box-shadow:var(--shadow-xs); }
.mk-btn--primary:hover { background:var(--brand-700); }
.mk-btn--ghost { color:var(--text-body); }
.mk-btn--ghost:hover { background:var(--surface-sunken); color:var(--text-strong); }
.mk-btn--secondary { background:var(--surface); color:var(--text-strong); border-color:var(--border); box-shadow:var(--shadow-xs); }
.mk-btn--secondary:hover { border-color:var(--border-strong); background:var(--surface-hover); }
.mk-btn--lg { height:46px; padding:0 22px; font-size:var(--text-base); }
.mk-btn--ondark { background:#fff; color:var(--n-900); }
.mk-btn--ondark:hover { background:var(--n-100); }
.mk-btn--onghost { color:#fff; border-color:rgba(255,255,255,.22); }
.mk-btn--onghost:hover { background:rgba(255,255,255,.08); }

/* ---- Hero ------------------------------------------------------- */
.mk-hero { position:relative; padding:72px 0 88px; overflow:hidden; }
.mk-hero__bg { position:absolute; inset:0; z-index:0; background:
  radial-gradient(60% 50% at 78% 8%, color-mix(in srgb, var(--brand-200) 38%, transparent), transparent 70%),
  radial-gradient(50% 50% at 12% 0%, color-mix(in srgb, var(--app-link-soft) 70%, transparent), transparent 70%); }
.mk-hero__grid { position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%); }
.mk-hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.mk-hero h1 { font:var(--fw-semibold) var(--text-5xl)/1.02 var(--font-display); letter-spacing:var(--tracking-tighter); color:var(--text-strong); }
.mk-hero h1 em { font-style:normal; color:var(--brand-600); }
.mk-hero__lead { margin-top:22px; font:var(--type-lead); font-size:var(--text-lg); color:var(--text-muted); max-width:46ch; }
.mk-hero__cta { margin-top:32px; display:flex; gap:12px; }
.mk-trust { margin-top:40px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.mk-trust__item { display:inline-flex; align-items:center; gap:8px; font:var(--type-ui-sm); color:var(--text-muted); }
.mk-trust__item svg { width:16px; height:16px; color:var(--brand-500); }

/* hero stage — the suite */
.mk-stage { position:relative; aspect-ratio:1/0.92; }
.mk-stage__grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mk-tile { aspect-ratio:1; border-radius:20px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); }
.mk-tile .nb-appicon { transform:scale(1); }
.mk-stage__card { position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xl); padding:14px; }
.mk-stage__card--pulse { width:208px; left:-34px; top:38%; }
.mk-stage__card--chat { width:226px; right:-30px; top:8%; }

/* ---- Logo cloud ------------------------------------------------- */
.mk-cloud { padding:48px 0 8px; }
.mk-cloud__label { text-align:center; font:var(--type-caption); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-subtle); }
.mk-cloud__row { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.mk-cloud__logo { font:var(--fw-bold) var(--text-lg)/1 var(--font-sans); letter-spacing:-0.02em; color:var(--n-400); display:inline-flex; align-items:center; gap:8px; }
.mk-cloud__logo svg { width:18px; height:18px; }

/* ---- Ecosystem / catalog --------------------------------------- */
.mk-cat { margin-top:56px; }
.mk-cat__head { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.mk-cat__name { font:var(--type-h4); color:var(--text-strong); }
.mk-cat__count { font:var(--type-caption); color:var(--text-subtle); }
.mk-cat__rule { flex:1; height:1px; background:var(--border-subtle); }
.mk-appgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mk-appcard { display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); cursor:pointer; transition:var(--transition-colors), transform var(--dur-base) var(--ease-out); position:relative; }
.mk-appcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.mk-appcard__top { display:flex; align-items:center; gap:12px; }
.mk-appcard__name { font:var(--type-h4); font-size:var(--text-lg); color:var(--text-strong); }
.mk-appcard__tag { font:var(--type-ui-sm); color:var(--text-muted); line-height:1.4; flex:1; }
.mk-appcard__link { font:var(--type-ui-sm); color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.mk-appcard__link svg { width:14px; height:14px; }

/* ---- Value props ------------------------------------------------ */
.mk-values { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.mk-vlist { display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.mk-vitem { display:flex; gap:16px; }
.mk-vitem__ic { flex:none; width:40px; height:40px; border-radius:var(--r-md); background:var(--brand-50); color:var(--brand-600); display:inline-flex; align-items:center; justify-content:center; }
.mk-vitem__ic svg { width:20px; height:20px; }
.mk-vitem__t { font:var(--type-h4); font-size:var(--text-md); color:var(--text-strong); }
.mk-vitem__d { margin-top:3px; font:var(--type-ui-sm); color:var(--text-muted); line-height:1.5; }

/* product spotlight */
.mk-spot { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:32px; }
.mk-spot--rev .mk-spot__media { order:-1; }
.mk-spot__badge { display:inline-flex; align-items:center; gap:8px; padding:5px 10px 5px 6px; border-radius:var(--r-full); background:var(--surface); border:1px solid var(--border); font:var(--type-ui-sm); color:var(--text-strong); box-shadow:var(--shadow-xs); }
.mk-spot__media { background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:20px; min-height:300px; }

/* ---- Security (dark) -------------------------------------------- */
.mk-dark { background:var(--ink); color:var(--n-200); position:relative; overflow:hidden; }
.mk-dark__glow { position:absolute; inset:0; background:radial-gradient(50% 60% at 50% -10%, rgba(91,92,242,.28), transparent 70%); }
.mk-dark .mk-h2 { color:#fff; }
.mk-dark .mk-eyebrow { color:var(--brand-300); }
.mk-dark .mk-sub { color:var(--n-400); }
.mk-secgrid { position:relative; margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mk-seccard { padding:24px; border-radius:var(--r-lg); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.mk-seccard__ic { width:38px; height:38px; border-radius:var(--r-md); background:rgba(255,255,255,.06); color:var(--brand-300); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.mk-seccard__ic svg { width:19px; height:19px; }
.mk-seccard__t { font:var(--type-h4); font-size:var(--text-md); color:#fff; }
.mk-seccard__d { margin-top:6px; font:var(--type-ui-sm); color:var(--n-400); line-height:1.5; }

/* ---- Testimonials ----------------------------------------------- */
.mk-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.mk-quote { padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:18px; }
.mk-quote__txt { font:var(--type-body); font-size:var(--text-md); color:var(--text-strong); line-height:1.55; }
.mk-quote__who { display:flex; align-items:center; gap:12px; }
.mk-quote__nm { font:var(--type-ui-sm); color:var(--text-strong); }
.mk-quote__co { font:var(--type-caption); color:var(--text-muted); }

/* ---- Pricing ---------------------------------------------------- */
.mk-prices { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; align-items:start; }
.mk-price { padding:28px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:8px; }
.mk-price--feat { border-color:var(--brand-300); box-shadow:var(--shadow-lg); position:relative; }
.mk-price--feat::before { content:"Le plus choisi"; position:absolute; top:-11px; left:28px; background:var(--brand-600); color:#fff; font:var(--fw-semibold) var(--text-2xs)/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:var(--r-full); }
.mk-price__name { font:var(--type-h4); font-size:var(--text-md); color:var(--text-strong); }
.mk-price__amt { display:flex; align-items:baseline; gap:6px; margin:6px 0 2px; }
.mk-price__num { font:var(--fw-semibold) var(--text-4xl)/1 var(--font-display); color:var(--text-strong); letter-spacing:var(--tracking-tight); }
.mk-price__per { font:var(--type-ui-sm); color:var(--text-muted); }
.mk-price__desc { font:var(--type-ui-sm); color:var(--text-muted); min-height:38px; }
.mk-price__feats { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.mk-price__feats li { display:flex; gap:10px; font:var(--type-ui-sm); color:var(--text-body); }
.mk-price__feats svg { width:17px; height:17px; color:var(--success-500); flex:none; margin-top:1px; }
.mk-price .mk-btn { margin-top:22px; width:100%; }

/* ---- FAQ -------------------------------------------------------- */
.mk-faq { max-width:760px; margin:40px auto 0; }
.mk-faqitem { border-bottom:1px solid var(--border-subtle); }
.mk-faqq { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; background:none; border:none; cursor:pointer; text-align:left; font:var(--type-h4); font-size:var(--text-md); color:var(--text-strong); }
.mk-faqq svg { width:18px; height:18px; color:var(--text-subtle); transition:transform var(--dur-base) var(--ease-out); flex:none; }
.mk-faqitem.is-open .mk-faqq svg { transform:rotate(45deg); }
.mk-faqa { max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-out); }
.mk-faqa__in { padding:0 0 22px; font:var(--type-body); font-size:var(--text-base); color:var(--text-muted); line-height:1.6; max-width:64ch; }

/* ---- CTA band --------------------------------------------------- */
.mk-ctaband { position:relative; overflow:hidden; background:var(--ink); border-radius:var(--r-2xl); padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.mk-ctaband__glow { position:absolute; inset:0; background:radial-gradient(60% 120% at 85% 50%, rgba(91,92,242,.32), transparent 65%); }
.mk-ctaband__t { position:relative; font:var(--type-h2); font-size:var(--text-3xl); color:#fff; max-width:20ch; letter-spacing:var(--tracking-tight); }
.mk-ctaband__s { position:relative; margin-top:10px; font:var(--type-lead); font-size:var(--text-md); color:var(--n-400); }
.mk-ctaband__actions { position:relative; display:flex; gap:12px; flex:none; }

/* ---- Footer ----------------------------------------------------- */
.mk-footer { background:var(--ink-elevated); color:var(--n-400); padding:64px 0 32px; }
.mk-footer__top { display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:32px; }
.mk-footer__brand p { margin-top:16px; font:var(--type-ui-sm); color:var(--n-500); max-width:30ch; line-height:1.6; }
.mk-footer__social { margin-top:20px; display:flex; gap:8px; }
.mk-footer__social a { width:34px; height:34px; border-radius:var(--r-sm); background:rgba(255,255,255,.05); display:inline-flex; align-items:center; justify-content:center; color:var(--n-400); transition:var(--transition-colors); }
.mk-footer__social a:hover { background:rgba(255,255,255,.1); color:#fff; }
.mk-footer__social svg { width:17px; height:17px; }
.mk-footer__col h4 { font:var(--type-ui-sm); color:#fff; margin-bottom:14px; }
.mk-footer__col a { display:block; padding:5px 0; font:var(--type-ui-sm); color:var(--n-400); transition:color var(--dur-fast); cursor:pointer; }
.mk-footer__col a:hover { color:#fff; }
.mk-footer__bottom { margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:16px; font:var(--type-caption); color:var(--n-500); }
.mk-footer__legal { display:flex; gap:20px; }
.mk-footer__legal a { color:var(--n-500); cursor:pointer; }
.mk-footer__legal a:hover { color:var(--n-300); }

/* mini mock visuals (token-built) */
.mk-mini { font-family:var(--font-sans); }
.mk-mini__bar { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border-subtle); margin-bottom:10px; }
.mk-mini__msg { display:flex; gap:9px; padding:7px 0; }
.mk-mini__msg .av { width:26px; height:26px; border-radius:999px; flex:none; }
.mk-mini__txt b { display:block; font:var(--type-ui-sm); color:var(--text-strong); }
.mk-mini__txt span { font:var(--type-caption); color:var(--text-muted); }
.mk-bars { display:flex; align-items:flex-end; gap:7px; height:84px; margin-top:10px; }
.mk-bars span { flex:1; border-radius:3px 3px 0 0; background:var(--app-pulse); opacity:.85; }

@media (max-width: 900px) {
  .mk-hero__inner, .mk-values, .mk-spot, .mk-footer__top { grid-template-columns:1fr; }
  .mk-appgrid, .mk-secgrid, .mk-quotes, .mk-prices { grid-template-columns:1fr 1fr; }
  .mk-stage { display:none; }
}