/* MkanaCloud homepage design tokens + shared primitives.
 * Light default; `html.dark` switches tokens. Used by index.html and sections/*.js.
 */
:root {
  --mc-bg: #f7f8fc;
  --mc-bg-alt: #eef1f8;
  --mc-surface: #ffffff;
  --mc-surface-2: #f3f5fb;
  --mc-border: rgba(15, 23, 42, 0.09);
  --mc-border-strong: rgba(15, 23, 42, 0.16);
  --mc-text: #0b1530;
  --mc-text-muted: #4a5675;
  --mc-text-faint: #6b7794;
  --mc-primary: #4f46e5;      /* indigo-600 */
  --mc-primary-2: #6366f1;    /* indigo-500 */
  --mc-accent: #7c3aed;       /* violet-600 */
  --mc-cyan: #0891b2;         /* network accent (cyan-600 for contrast on light) */
  --mc-cyan-2: #22d3ee;
  --mc-success: #059669;
  --mc-warning: #d97706;
  --mc-danger: #dc2626;
  --mc-navy: #0b1226;
  --mc-navy-2: #111a36;
  --mc-glow: rgba(99, 102, 241, 0.35);
  --mc-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -8px rgba(15, 23, 42, .12);
  --mc-shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 24px 48px -16px rgba(30, 27, 75, .25);
  --mc-radius: 16px;
  --mc-radius-lg: 24px;
  --mc-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #0891b2 100%);
  --mc-grad-text: linear-gradient(100deg, #4f46e5 0%, #7c3aed 45%, #0891b2 100%);
}
html.dark {
  --mc-bg: #070c1c;
  --mc-bg-alt: #0b1226;
  --mc-surface: #0f1830;
  --mc-surface-2: #131e3a;
  --mc-border: rgba(148, 163, 184, 0.12);
  --mc-border-strong: rgba(148, 163, 184, 0.24);
  --mc-text: #e8ecf8;
  --mc-text-muted: #a3aeca;
  --mc-text-faint: #7d89a8;
  --mc-primary: #818cf8;
  --mc-primary-2: #6366f1;
  --mc-accent: #a78bfa;
  --mc-cyan: #22d3ee;
  --mc-cyan-2: #67e8f9;
  --mc-success: #34d399;
  --mc-warning: #fbbf24;
  --mc-danger: #f87171;
  --mc-glow: rgba(99, 102, 241, 0.45);
  --mc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --mc-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .7);
  --mc-grad-text: linear-gradient(100deg, #a5b4fc 0%, #c4b5fd 45%, #67e8f9 100%);
}

/* ---------- Layout primitives ---------- */
.mc-section { position: relative; padding: 4.5rem 0; overflow-x: clip; }
@media (min-width: 768px) { .mc-section { padding: 6rem 0; } }
@media (min-width: 1280px) { .mc-section { padding: 7rem 0; } }
.mc-section--alt { background: var(--mc-bg-alt); }
.mc-container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .mc-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .mc-container { padding: 0 2rem; } }

.mc-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mc-primary);
}
.mc-eyebrow::before {
  content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--mc-grad);
}
.mc-h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.12; font-weight: 800;
  letter-spacing: -0.025em; color: var(--mc-text); margin-top: .75rem;
  text-wrap: balance;
}
.mc-lead {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.65; color: var(--mc-text-muted);
  margin-top: 1rem; max-width: 42rem; text-wrap: pretty;
}
.mc-grad-text {
  background: var(--mc-grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.mc-muted { color: var(--mc-text-muted); }
.mc-illustrative {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mc-text-faint); border: 1px dashed var(--mc-border-strong);
  border-radius: 999px; padding: .1rem .5rem;
}

/* ---------- Cards ---------- */
.mc-card {
  background: var(--mc-surface); border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius); box-shadow: var(--mc-shadow);
}
.mc-card--hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mc-card--hover:hover { transform: translateY(-3px); box-shadow: var(--mc-shadow-lg); border-color: var(--mc-border-strong); }
.mc-card--glass {
  background: rgba(255, 255, 255, .82);
  background: color-mix(in srgb, var(--mc-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--mc-border); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow-lg);
}
.mc-card--dark {
  background: linear-gradient(180deg, #111a36 0%, #0b1226 100%); color: #e8ecf8;
  border: 1px solid rgba(148, 163, 184, .14); border-radius: var(--mc-radius-lg);
}
.mc-icon-tile {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  background: rgba(79, 70, 229, .1);
  background: color-mix(in srgb, var(--mc-primary) 12%, transparent); color: var(--mc-primary);
  flex-shrink: 0;
}
.mc-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--mc-text);
  background: var(--mc-surface); border: 1px solid var(--mc-border);
}

/* ---------- Buttons ---------- */
.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: 0 1.25rem; border-radius: .85rem; font-weight: 700; font-size: .95rem;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.mc-btn:focus-visible { outline: 3px solid rgba(34, 211, 238, .7); outline-offset: 2px; }
.mc-btn--primary { color: #fff; background: var(--mc-grad); box-shadow: 0 10px 24px -10px var(--mc-glow); }
.mc-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px var(--mc-glow); }
.mc-btn--ghost { color: var(--mc-text); background: var(--mc-surface); border: 1px solid var(--mc-border-strong); }
.mc-btn--ghost:hover { border-color: var(--mc-primary); color: var(--mc-primary); }

/* ---------- Decorative backgrounds ---------- */
.mc-grid-bg {
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, .12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, .12) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.mc-orb { position: absolute; border-radius: 999px; filter: blur(60px); opacity: .55; pointer-events: none; }

/* ---------- Keyframes ---------- */
@keyframes mc-signal-ring {
  0% { transform: scale(.35); opacity: .75; }
  80% { opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes mc-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
@keyframes mc-glow {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes mc-dash { to { stroke-dashoffset: -40; } }
@keyframes mc-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@keyframes mc-fade-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes mc-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.mc-anim-ring { transform-origin: center; transform-box: fill-box; animation: mc-signal-ring 3.2s cubic-bezier(.2,.6,.3,1) infinite; }
.mc-anim-float { animation: mc-float 6s ease-in-out infinite; }
.mc-anim-glow { animation: mc-glow 3s ease-in-out infinite; }
.mc-anim-dash { stroke-dasharray: 6 14; animation: mc-dash 1.6s linear infinite; }
.mc-anim-pulse { transform-origin: center; transform-box: fill-box; animation: mc-pulse-dot 2s ease-in-out infinite; }
/* Pause animations inside an offscreen container: toggle .mc-paused from JS (MC.inView). */
.mc-paused, .mc-paused * { animation-play-state: paused !important; }

/* Reveal on scroll ([data-mc-reveal] handled by home.js) */
[data-mc-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-mc-reveal].mc-revealed { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mc-anim-ring { animation: none !important; opacity: 0; }
  .mc-anim-float, .mc-anim-glow, .mc-anim-dash, .mc-anim-pulse { animation: none !important; }
  [data-mc-reveal] { opacity: 1 !important; transform: none !important; }
}
html.mc-reduced [data-mc-reveal] { opacity: 1; transform: none; }

/* Custom elements are block-level; prevent 320px overflow */
mc-infra-strip, mc-network-flow, mc-router-showcase, mc-packages-vouchers, mc-captive-portal,
mc-billing-flow, mc-use-cases, mc-agents-flow, mc-dashboard-preview, mc-security { display: block; max-width: 100%; overflow-x: clip; }