/* =============================================================================
   MAT+ DESIGN KIT  (extracted 2026-09-26 from the restored MAT+ site, repo
   D:\MARCOS\BUSINESSES\ict, public/index.html + public/css/style.css, by
   computed-style dump of the live components at 1440 px).

   Marc 2026-09-26: every business takes the MAT+ look. Each brand keeps its
   own logo and ACCENT: set the five --brand-* variables (see README.md) and
   everything below follows. Default values = MAT+ indigo.

   Fonts are self-hosted (OFL): copy fonts/ next to this file (CSP font-src
   'self'). MAT+ itself references Inter by local() only.
   ========================================================================== */
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;
  /* brand hooks - override per business */
  --brand: #6366f1;                 /* solid accent: links, focus, icons */
  --brand-hi: #818cf8;              /* lighter accent: tag text, highlights */
  --brand-rgb: 99, 102, 241;        /* glows and tints */
  --brand-2-rgb: 139, 92, 246;      /* second glow */
  --brand-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  --brand-grad-btn: linear-gradient(180deg, #7c7cf7 0%, #6366f1 52%, #5457d6 100%);
  --brand-ink: #ffffff;             /* text on a brand button */
  --brand-text-grad: linear-gradient(135deg, #a78bfa 0%, #7c6cf0 35%, #22d3ee 100%);

  /* surfaces - deep space navy */
  --k-bg: #030711;
  --k-bg-2: #070b17;
  --k-card: #0c1424;
  --k-card-hover: #111c34;
  --k-elevated: #162040;
  --k-border: rgba(148, 172, 216, 0.06);
  --k-border-2: rgba(148, 172, 216, 0.12);
  --k-border-3: rgba(148, 172, 216, 0.22);
  /* text */
  --k-text: #eef2f7;
  --k-text-2: #8da2c4;
  --k-muted: #7b8da8;
  /* semantic */
  --k-green: #10b981;
  --k-red: #ef4444;
  --k-cyan: #22d3ee;
  /* type */
  --k-font: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --k-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* shape */
  --k-r-sm: 8px; --k-r: 12px; --k-r-lg: 16px; --k-r-xl: 20px;
  --k-shadow-card: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(148,172,216,0.04), 0 2px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.18);
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── base ──────────────────────────────────────────────────────────────── */
.k-body { margin: 0; background: var(--k-bg); color: var(--k-text); font: 400 16px/1.6 var(--k-font); letter-spacing: -0.014em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.k-body *, .k-body *::before, .k-body *::after { box-sizing: border-box; }
.k-body a { color: var(--brand-hi); text-decoration: none; }
.k-body a:hover { color: var(--k-text); }
.k-body :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.18); border-radius: 6px; }
.k-body ::selection { background: rgba(var(--brand-rgb), 0.35); color: #fff; }
.k-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .k-container { padding: 0 16px; } }
.k-mono, .k-num { font-family: var(--k-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── ticker tape (28 px, mono) ─────────────────────────────────────────── */
.k-tape { position: relative; z-index: 10; height: 28px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(2,4,10,0.55)); border-top: 1px solid rgba(var(--brand-rgb), 0.06); border-bottom: 1px solid rgba(var(--brand-rgb), 0.12); }
.k-tape-track { display: flex; width: max-content; white-space: nowrap; animation: k-tape 60s linear infinite; }
.k-tape-item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 20px; font: 500 11.5px/1 var(--k-mono); color: var(--k-text-2); font-variant-numeric: tabular-nums; }
.k-tape-item b { color: var(--k-text); font-weight: 700; }
.k-tape-item .up { color: var(--k-green); }
.k-tape-item .down { color: var(--k-muted); }
@keyframes k-tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .k-tape-track { animation: none; } }

/* ── navbar ────────────────────────────────────────────────────────────── */
.k-nav { position: sticky; top: 0; z-index: 100; background: rgba(3, 7, 17, 0.8); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 1px 0 rgba(136,160,200,0.04), 0 4px 32px rgba(0,0,0,0.2); }
.k-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(16,185,129,0.35), rgba(var(--brand-rgb),0.55) 60%, rgba(var(--brand-2-rgb),0.6)); }
.k-nav .k-container { display: flex; align-items: center; gap: 16px; height: 64px; }
.k-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--k-text) !important; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.k-brand img, .k-brand svg { height: 32px; width: auto; }
.k-nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.k-nav-links::-webkit-scrollbar { display: none; }
.k-nav-links a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 9px; color: var(--k-text-2) !important; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .25s var(--k-ease), background .25s var(--k-ease); }
.k-nav-links a:hover, .k-nav-links a[aria-current] { color: var(--k-text) !important; background: rgba(var(--brand-rgb), 0.08); }
.k-nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--brand-grad); color: var(--brand-ink) !important; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(var(--brand-rgb),0.28); }
.k-nav-cta:hover { filter: brightness(1.08); }
@media (max-width: 760px) { .k-nav .k-container { height: 56px; gap: 8px; } .k-nav-links a { padding: 0 9px; font-size: 13.5px; } .k-nav-links .k-hide-sm { display: none; } }

/* ── hero ──────────────────────────────────────────────────────────────── */
.k-hero { position: relative; overflow: hidden; padding: 128px 0 96px; text-align: center; background:
  radial-gradient(80% 50% at 50% 0%, rgba(var(--brand-rgb), 0.12), transparent 60%),
  radial-gradient(60% 40% at 80% 20%, rgba(16, 185, 129, 0.06), transparent 50%),
  radial-gradient(50% 50% at 20% 30%, rgba(34, 211, 238, 0.04), transparent 50%), var(--k-bg); }
.k-hero > .k-container { position: relative; z-index: 2; }
.k-hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--brand-rgb), 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--brand-rgb), 0.024) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
.k-hero-orb { position: absolute; z-index: 0; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; filter: blur(80px); background: radial-gradient(circle, rgba(var(--brand-rgb), 0.15), transparent 70%); }
.k-hero-orb.two { background: radial-gradient(circle, rgba(var(--brand-2-rgb), 0.12), transparent 70%); }
.k-hero-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image:
  radial-gradient(1.5px 1.5px at 8% 15%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 22% 35%, rgba(255,255,255,.45), transparent),
  radial-gradient(1.5px 1.5px at 38% 20%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 52% 10%, rgba(255,255,255,.5), transparent),
  radial-gradient(2px 2px at 67% 42%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 82% 25%, rgba(255,255,255,.5), transparent),
  radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 15% 72%, rgba(255,255,255,.35), transparent),
  radial-gradient(1.5px 1.5px at 60% 68%, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 95% 78%, rgba(255,255,255,.45), transparent); }
.k-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(148,172,216,0.14); border-radius: 999px; box-shadow: 0 0 0 1px rgba(148,172,216,0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 11.5px/1.6 var(--k-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-hi); }
.k-tag span { background: linear-gradient(135deg, var(--brand-hi), var(--k-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-h1 { margin: 24px auto 0; max-width: 16ch; font: 900 clamp(40px, 6.4vw, 76.8px)/1.02 var(--k-font); letter-spacing: -0.05em; text-wrap: balance; background: linear-gradient(140deg, #fff 0%, #e8ecf8 30%, #c4ccf0 60%, var(--brand-hi) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 16px rgba(var(--brand-rgb), 0.12)); }
.k-h1 .k-hl { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-lede { margin: 22px auto 0; max-width: 670px; color: var(--k-text-2); font-size: 17.9px; line-height: 1.62; text-wrap: pretty; }
.k-lede strong { color: var(--k-text); font-weight: 700; }
.k-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.k-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 26px; color: var(--k-muted); font-size: 13.1px; font-weight: 500; }
.k-checks span { display: inline-flex; align-items: center; gap: 7px; }
.k-checks svg { color: var(--k-green); flex: none; }
.k-seals { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 30px; padding: 14px 28px; border: 1px solid rgba(148,172,216,0.08); border-radius: 16px; background: rgba(12,20,36,0.35); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 4px 28px rgba(0,0,0,0.15); color: var(--k-text-2); font-size: 12.5px; font-weight: 500; }
.k-seals span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 640px) { .k-hero { padding: 72px 0 56px; } .k-lede { font-size: 16px; } .k-seals { padding: 12px 16px; } }

/* ── buttons ───────────────────────────────────────────────────────────── */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 14px; border: 1px solid transparent; font: 700 15.5px/1 var(--k-font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--k-ease), box-shadow .25s var(--k-ease), filter .25s var(--k-ease), background .25s var(--k-ease), border-color .25s var(--k-ease); }
.k-btn-primary { background: var(--brand-grad-btn); color: var(--brand-ink) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.25), 0 6px 16px -4px rgba(var(--brand-rgb),0.55), 0 14px 36px -10px rgba(var(--brand-rgb),0.45); }
.k-btn-secondary { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color: rgba(148,172,216,0.22); color: rgba(226,232,240,0.92) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.18), 0 8px 24px -8px rgba(0,0,0,0.3); }
.k-btn-ghost { background: rgba(var(--brand-rgb),0.1); border-color: rgba(var(--brand-rgb),0.35); color: var(--k-text) !important; border-radius: 999px; }
.k-btn-lg { min-height: 56px; padding: 0 40px; font-size: 17px; }
.k-btn-sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; border-radius: 999px; }
@media (hover: hover) { .k-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); } .k-btn-secondary:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),0.35); background: var(--k-elevated); } }
@media (prefers-reduced-motion: reduce) { .k-btn { transition: none; } .k-btn:hover { transform: none !important; } }

/* ── sections, headings ────────────────────────────────────────────────── */
.k-section { position: relative; padding: 88px 0; }
.k-section.tight { padding: 56px 0; }
.k-section.alt { background: linear-gradient(180deg, rgba(12,20,36,0.35), transparent); border-top: 1px solid var(--k-border); }
.k-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.k-head.left { margin-left: 0; text-align: left; }
.k-h2 { margin: 0; font: 800 clamp(26px, 3.2vw, 40px)/1.15 var(--k-font); letter-spacing: -0.03em; color: var(--k-text); text-wrap: balance; }
.k-h2 .k-hl { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-h2-sub { margin: 12px auto 0; max-width: 620px; color: var(--k-text-2); font-size: 15.5px; line-height: 1.6; }
.k-head.left .k-h2-sub { margin-left: 0; }
.k-h3 { margin: 0; font: 700 17px/1.3 var(--k-font); letter-spacing: -0.015em; color: var(--k-text); }
.k-eyebrow { font: 700 11px/1.4 var(--k-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-hi); }
.k-note { color: var(--k-muted); font-size: 12.5px; line-height: 1.6; }

/* ── cards, grids, badges, stats ───────────────────────────────────────── */
.k-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .k-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k-card { position: relative; background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-r-lg); padding: 22px; box-shadow: var(--k-shadow-card); transition: border-color .25s var(--k-ease), background .25s var(--k-ease), transform .25s var(--k-ease); }
.k-card.glow { background: linear-gradient(180deg, rgba(var(--brand-rgb),0.07), var(--k-card) 60%); border-color: rgba(var(--brand-rgb),0.25); }
.k-card.top-line::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px; background: var(--brand-grad); }
a.k-card { display: block; color: inherit !important; }
@media (hover: hover) { a.k-card:hover, .k-card.hover:hover { border-color: rgba(var(--brand-rgb),0.3); background: var(--k-card-hover); transform: translateY(-2px); } }
.k-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 100px; border: 1px solid rgba(var(--brand-rgb),0.35); background: rgba(var(--brand-rgb),0.14); color: var(--brand-hi); font: 800 10.9px/1.6 var(--k-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.k-badge.green { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); color: #34d399; }
.k-badge.muted { border-color: var(--k-border-2); background: rgba(148,172,216,.06); color: var(--k-text-2); }
.k-rec { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, #10b981, rgb(var(--brand-rgb))); color: #fff; font: 800 10.2px/1.6 var(--k-font); letter-spacing: .09em; text-transform: uppercase; }
.k-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--brand-rgb),0.1); border: 1px solid rgba(var(--brand-rgb),0.22); color: var(--brand-hi); }
.k-icon.green { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #34d399; }
.k-icon.cyan { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.22); color: var(--k-cyan); }
.k-stat .v { display: block; font: 900 clamp(26px, 3vw, 34px)/1.1 var(--k-font); letter-spacing: -0.03em; color: var(--k-text); font-variant-numeric: tabular-nums; }
.k-stat .v.grad { background: var(--brand-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-stat .l { display: block; margin-top: 6px; color: var(--k-muted); font-size: 12.5px; font-weight: 500; }
.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--k-text); font-size: 13.6px; line-height: 1.6; }
.k-list li::before { content: "\2713"; color: var(--k-green); font-weight: 700; }

/* ── footer ────────────────────────────────────────────────────────────── */
.k-footer { position: relative; padding: 72px 0 40px; color: var(--k-muted); font-size: 14px; background: var(--k-bg); }
.k-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb),0.2), rgba(34,211,238,0.15), transparent); }
.k-footer a { color: var(--k-text-2); }
.k-footer a:hover { color: var(--k-text); }
.k-foot-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .k-foot-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 56px; } }
.k-foot-title { margin: 0 0 12px; color: var(--k-text); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.k-foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.k-foot-fine { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--k-border); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 12.5px; }