/* ==========================================================================
   nova-marketing.css — shared theme for the IGC family marketing pages
   ( / , /pricing , /docs , /about , /stream ).

   COLOUR MODEL
   - The 9 public theme tokens (--pub-*) come from the active Theme Library
     file (theme-public-<name>.css), swapped in Admin → Themes.
   - The :root block below derives a marketing palette (--mk-*) from those 9
     via color-mix(), so every theme gets a coherent set automatically.
   - A theme file MAY override any --mk-* with an exact value —
     theme-public-igc.css does, so the "IGC" theme reproduces the original
     dark "glow" design pixel-for-pixel while every other theme adapts.

   Nothing here is a fixed colour. Page-specific rules live in each page's
   <head> <style>. Served at /cms-assets/css/nova-marketing.css.
   ========================================================================== */

:root {
  /* text */
  --mk-text:        var(--pub-ink-muted);
  --mk-text-dim:    color-mix(in srgb, var(--pub-ink-muted) 80%, var(--pub-bg));
  --mk-text-faint:  color-mix(in srgb, var(--pub-ink-muted) 55%, var(--pub-bg));
  --mk-text-bright: color-mix(in srgb, var(--pub-ink) 60%, var(--pub-ink-muted));
  --mk-accent-soft: color-mix(in srgb, var(--pub-accent) 58%, var(--pub-ink));

  /* surfaces (translucent glass) */
  --mk-panel:       color-mix(in srgb, var(--pub-surface) 45%, transparent);
  --mk-panel-2:     color-mix(in srgb, var(--pub-surface) 62%, transparent);
  --mk-panel-soft:  color-mix(in srgb, var(--pub-surface) 30%, transparent);

  /* lines */
  --mk-line:        color-mix(in srgb, var(--pub-border) 55%, transparent);
  --mk-line-faint:  color-mix(in srgb, var(--pub-border) 30%, transparent);
  --mk-line-accent: color-mix(in srgb, var(--pub-accent) 22%, transparent);

  /* accent fills + glows */
  --mk-fill:        color-mix(in srgb, var(--pub-accent) 10%, transparent);
  --mk-glow:        color-mix(in srgb, var(--pub-accent) 14%, transparent);
  --mk-glow-strong: color-mix(in srgb, var(--pub-accent) 42%, transparent);
  --mk-glow-2:      color-mix(in srgb, var(--pub-accent-2) 16%, transparent);
  --mk-shadow:      color-mix(in srgb, var(--pub-ink) 12%, transparent);

  /* ambient background orbs */
  --mk-orb-1:       color-mix(in srgb, var(--pub-accent) 12%, transparent);
  --mk-orb-2:       color-mix(in srgb, var(--pub-accent-2) 11%, transparent);
  --mk-orb-3:       color-mix(in srgb, var(--pub-accent) 6%, var(--pub-accent-2));

  /* the big display-heading gradient */
  --mk-head-grad:   linear-gradient(135deg,
                      var(--pub-ink) 20%,
                      color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)) 60%,
                      var(--pub-accent-2));
  /* button gradient */
  --mk-btn-grad:    linear-gradient(135deg,
                      var(--pub-accent-hover),
                      color-mix(in srgb, var(--pub-accent-2) 75%, var(--pub-ink)));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--pub-bg);   /* the ambient orbs live on .bg-glow below */
  color: var(--pub-ink);
  line-height: 1.5;
  overflow-x: hidden;
}

/* <div class="bg-glow"> — the big ambient background glow. A real fixed
   full-viewport element (not the body background) because the compiled page
   wrapper paints an opaque background over <body>. Pinned to the viewport so
   content scrolls past it; slow opacity pulse. z-index 0 puts it above the
   wrapper's own background and below .container (z-index 2). */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* tune size/strength here: the % after `transparent` = radius,
     --mk-glow-strong (~42% accent) is the bright centre, --mk-glow (~14%) the sides */
  background:
    radial-gradient(circle at 50% 26%, var(--mk-glow-strong) 0%, transparent 70%),
    radial-gradient(circle at 16% 82%, var(--mk-glow) 0%, transparent 40%),
    radial-gradient(circle at 84% 76%, var(--mk-glow) 0%, transparent 40%);
  animation: pulseGlow 12s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* glassmorphism with glow */
.glass {
  background: var(--mk-panel);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--mk-line-accent);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 40px var(--mk-glow);
}

.btn-glow {
  background: var(--mk-btn-grad);
  color: #fff;
  border: none;
  padding: 0.85rem 2.4rem;
  border-radius: 60px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
  box-shadow: 0 0 24px var(--mk-glow-strong), 0 0 60px var(--mk-glow-2);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--pub-accent), var(--pub-accent-2), var(--pub-accent));
  background-size: 300% 300%;
  z-index: -1;
  filter: blur(8px);
  animation: borderGlow 4s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-glow:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 40px var(--mk-glow-strong), 0 0 80px var(--mk-glow-2);
}

.btn-outline-glow {
  background: transparent;
  border: 1.5px solid var(--mk-line-accent);
  color: var(--pub-ink);
  padding: 0.85rem 2rem;
  border-radius: 60px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.25s;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 0 20px var(--mk-glow);
  text-decoration: none;
}

.btn-outline-glow:hover {
  border-color: var(--pub-accent);
  background: var(--mk-fill);
  box-shadow: 0 0 40px var(--mk-glow);
  transform: translateY(-2px);
}

/* badge with glow */
.badge-glow {
  display: inline-block;
  background: var(--mk-fill);
  color: var(--mk-accent-soft);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  padding: 0.4rem 1.2rem;
  border-radius: 100px;
  border: 1px solid var(--mk-line-accent);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 20px var(--mk-glow);
  margin-bottom: 1.2rem;
}

.badge-glow i {
  margin-right: 6px;
  color: var(--pub-accent);
}

/* navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--mk-line);
}

.logo {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, var(--mk-accent-soft), var(--pub-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

.logo i {
  font-size: 2rem;
  color: var(--pub-accent);
  -webkit-text-fill-color: var(--pub-accent);
  filter: drop-shadow(0 0 12px var(--mk-glow-strong));
}

.nav-links {
  display: flex;
  gap: 2.8rem;
  font-weight: 500;
  color: var(--mk-text);
}

.nav-links a {
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--pub-accent-hover), var(--pub-accent-2));
  transition: 0.3s;
  box-shadow: 0 0 16px var(--pub-accent-hover);
}

.nav-links a:hover {
  color: var(--pub-ink);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}
.nav-links a.active {
  color: var(--pub-ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* shared call-to-action band */
.cta-section {
  background:
    radial-gradient(circle at 30% 40%, var(--mk-fill), transparent 80%),
    var(--mk-panel-2);
  backdrop-filter: blur(16px);
  border-radius: 60px;
  padding: 4rem 3.5rem;
  margin: 4rem 0;
  border: 1px solid var(--mk-line-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 80px var(--mk-glow);
}

.cta-section h2 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--pub-ink), var(--mk-accent-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-section p {
  color: var(--mk-text);
  max-width: 450px;
  margin-top: 0.5rem;
}

.cta-section .btn-glow {
  background: var(--pub-ink);
  color: var(--pub-bg);
}
.cta-section .btn-glow::after { opacity: 0.25; }
.cta-section .btn-glow i {
  color: var(--pub-accent);
}
.cta-section .btn-glow:hover {
  box-shadow: 0 0 60px var(--mk-glow-strong);
}

/* footer */
.footer {
  padding: 2.5rem 0 3rem 0;
  border-top: 1px solid var(--mk-line-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: var(--mk-text-dim);
}

.footer-links {
  display: flex;
  gap: 2.5rem;
}

.footer-links a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: 0.2s;
}
.footer-links a:hover {
  color: var(--mk-text-bright);
}
/* Same look as the header menu (.nav-links): accent underline slides in on
   hover. Unlike the header, it wraps instead of hiding on small screens. */
.footer-links {
  flex-wrap: wrap;
  row-gap: 0.75rem;
}
.footer-links a {
  position: relative;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--pub-accent-hover), var(--pub-accent-2));
  transition: 0.3s;
  box-shadow: 0 0 16px var(--pub-accent-hover);
}
.footer-links a:hover {
  color: var(--pub-ink);
}
.footer-links a:hover::after {
  width: 100%;
}

.footer-social i {
  font-size: 1.4rem;
  margin-left: 1.2rem;
  color: var(--mk-text-faint);
  transition: 0.2s;
  cursor: pointer;
}
.footer-social i:hover {
  color: var(--mk-accent-soft);
  filter: drop-shadow(0 0 16px var(--mk-glow));
}

/* cursor-follow glow — the JS (mk-cursor-glow.js) sets --mx/--my per card */
.mk-cursor-glow { position: relative; overflow: hidden; }
.mk-cursor-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%),
              var(--mk-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 0;
}
.mk-cursor-glow:hover::before { opacity: 1; }
.mk-cursor-glow > * { position: relative; z-index: 1; }

/* shared responsive rules (page-specific breakpoint tweaks stay inline) */
@media (max-width: 1000px) {
  .container { padding: 0 24px; }
  .cta-section { flex-direction: column; text-align: center; gap: 1.5rem; }
}

@media (max-width: 700px) {
  .navbar { flex-wrap: wrap; gap: 1rem; }
  .nav-links { display: none; }
  .cta-section { flex-direction: column; text-align: center; gap: 1.5rem; }
}