/* nx-privacy.css — Glass Cards theme (Exec palette applied + unique hero CTA) 
   - Keeps structure & interactions intact
   - Adds :root exec tokens and .nxta-consult-* CTA family
*/

/* ---- Global exec palette tokens (safe to override elsewhere) ---- */
:root {
  /* Exec palette (from #nx-exec-service) */
  --ex-g1: #6a4ee6; /* purple */
  --ex-g2: #af2cee; /* pink-violet */
  --ex-ink: #0b1220;
  --ex-muted: #6b7280;

  /* fallback tokens for older CSS that expects these */
  --nxta-btn-g1: var(--ex-g1);
  --nxta-btn-g2: var(--ex-g2);
}

/* ===== SECTION 01: VARIABLES ===== */
.gm-root {
  /* Light theme but now tied to exec tokens */
  --gm-bg: linear-gradient(180deg,#f9fbff 0%,#f3f8ff 100%);
  --gm-panel: rgba(255,255,255,0.86);
  --gm-muted: var(--ex-muted, #4b5563); /* use exec muted */
  /* Accent tokens now mapped to exec palette so entire page adopts the brand */
  --gm-accent-data: var(--ex-g1, #7b2ff7);    /* Violet (exec) */
  --gm-accent-security: var(--ex-g2, #00c6c3);/* second accent - we map to ex-g2 (pink-violet) */
  --gm-accent-third: #a8f2e2; /* soft aqua (kept) */
  --gm-accent-rights: #c6a4ff; /* light purple (kept) */
  --gm-glass-border: rgba(120,120,150,0.08);
  --gm-shadow: 0 18px 44px rgba(50,50,80,0.06);
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1f2937; /* primary body copy on light background */
  background: var(--gm-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:40px;
}

/* ===== SECTION 02: LAYOUT HELPERS ===== */
.gm-hero, .gm-main { max-width:1280px; margin:0 auto; padding:18px; }
.gm-hero { position:relative; padding:56px 18px 36px; overflow:visible; } /* taller hero */
.gm-hero-inner {
  display:flex;
  gap:40px;
  align-items:flex-start;
  justify-content:flex-start;
  max-width:1180px;
  margin:0 auto;
  z-index:4;
  position:relative;
  padding-left:8px;
}

/* ===== SECTION 03: HERO TYPOGRAPHY & CTAS ===== */
.gm-hero .gm-overline {
  display:inline-block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--gm-accent-data);
  margin-bottom:14px;
}

.gm-title {
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(36px, 6.5vw, 64px);
  margin:0 0 12px;
  font-weight:800;
  line-height:1.02;
  background: linear-gradient(90deg, var(--gm-accent-data) 0%, var(--gm-accent-security) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.6px;
  max-width: 820px;
}

.gm-subhead {
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight:700;
  margin:0 0 18px;
  color: var(--gm-accent-data);
  letter-spacing: -0.2px;
}

.gm-lead {
  margin:0 0 24px;
  color:var(--gm-muted);
  font-size:1.06rem;
  max-width:820px;
  line-height:1.6;
}

.gm-cta-row { display:flex; gap:12px; align-items:center; margin-top:6px; }

/* small generic button base */
.gm-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
}

/* primary generic (not hero) */
.gm-btn-primary {
  background: linear-gradient(90deg,var(--gm-accent-data),var(--gm-accent-security));
  color:#ffffff;
  box-shadow: 0 6px 20px rgba(123,47,247,0.12);
  border:1px solid rgba(255,255,255,0.5);
  padding:12px 22px;
}

/* ghost secondary */
.gm-btn-ghost {
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  color:var(--gm-muted);
  padding:11px 16px;
}

.gm-hero .gm-glass-pill {
  margin-left:18px;
  background: rgba(255,255,255,0.9);
  color:var(--gm-muted);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* ===== SECTION 04: GRID LAYOUT (MAIN) ===== */
.gm-main {
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap:28px;
  align-items:start;
  margin-top:16px;
}
@media (max-width:1080px) { .gm-main { grid-template-columns:1fr; gap:16px; } }

/* ===== SECTION 05: LEFT PANE / PILL LIST ===== */
.gm-side-inner { background:var(--gm-panel); border-radius:14px; padding:18px; border:1px solid var(--gm-glass-border); box-shadow:var(--gm-shadow); }
.gm-side-title { margin:0 0 14px; font-weight:800; color:var(--gm-muted); font-size:1.32rem; }
.gm-pills { display:flex; flex-direction:column; gap:12px; }
.gm-pill {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:999px; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86));
  border:1px solid rgba(255,255,255,0.6);
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s;
}
/* ===== ENHANCED PILL HOVER — Soft Translucent Purple Glow ===== */
.gm-pill:hover,
.gm-pill[aria-pressed="true"] {
  transform: translateX(6px);
  background: linear-gradient(
    90deg,
    rgba(106, 78, 230, 0.18), /* light transparent purple */
    rgba(175, 44, 238, 0.16)
  );
  box-shadow: 0 12px 32px rgba(106, 78, 230, 0.15),
              0 4px 12px rgba(175, 44, 238, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #1e1b3a; /* keep readable dark text */
}

.gm-pill .gm-pill-dot { width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow:0 8px 18px rgba(0,0,0,0.06); }
.gm-pill strong { font-weight:800; color:#183f36; }
.gm-pill small { display:block; color:var(--gm-muted); font-size:.88rem; }

/* legend */
.gm-legend { margin-top:18px; color:var(--gm-muted); font-size:.95rem; }
.gm-legend ul { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:8px; }
.gm-dot { width:12px; height:12px; display:inline-block; margin-right:8px; border-radius:50%; vertical-align:middle; }
.gm-dot-data { background:var(--gm-accent-data); }
.gm-dot-security { background:var(--gm-accent-security); }
.gm-dot-third { background:var(--gm-accent-third); }
.gm-dot-rights { background:var(--gm-accent-rights); }



/* ===== SECTION 06: CENTER STAGE / CARDS ===== */
.gm-stage {
  position:relative;
  min-height:560px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: 18px;
  padding-bottom: 18px;
}
.gm-cards-wrap { width:100%; display:flex; flex-direction:column; gap:28px; align-items:stretch; }

/* card base */
.gm-card {
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.74));
  border-radius:18px;
  padding:22px;
  border:1px solid var(--gm-glass-border);
  box-shadow: 0 18px 44px rgba(50,50,80,0.06);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s, opacity .18s, width .28s;
  overflow:hidden;
  width: 100%;
  max-width: none;
  display:block;
}

/* promoted */
.gm-card.primary {
  padding:26px;
  border-radius:20px;
  box-shadow: 0 40px 110px rgba(6,22,18,0.08);
  transform: translateY(-6px);
}

/* stacked */
.gm-card.stacked {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  padding:14px 16px;
  border-radius:14px;
  opacity: 0.98;
  box-shadow: 0 16px 44px rgba(6,22,18,0.05);
}

@media (max-width:1100px) {
  .gm-card.stacked { width: 96%; margin-left: auto; margin-right: auto; }
  .gm-card, .gm-card.primary { width: 96%; padding-left:18px; padding-right:18px; }
}

/* card inner */
.gm-card .gm-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.gm-card .gm-card-title { font-weight:800; font-size:1.06rem; color:#042b23; margin:0; }
.gm-card .gm-card-pill { padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.82rem; border:1px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.36); color:var(--gm-muted); }
.gm-card .gm-card-excerpt { color:var(--gm-muted); font-size:.98rem; margin:10px 0 12px; min-height:56px; line-height:1.6; }
.gm-card .gm-card-actions { display:flex; gap:8px; align-items:center; margin-top:10px; }

/* expanded */
.gm-card .gm-card-full { max-height:0; overflow:hidden; transition: max-height .36s cubic-bezier(.2,.9,.2,1); }
.gm-card.expanded { z-index:30; }
.gm-card.expanded.primary { width: 100%; max-width: none; }
.gm-card.expanded .gm-card-full { max-height:1200px; margin-top:14px; }

/* subtle glass bevel */
.gm-card::after {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  mix-blend-mode: overlay; border-radius:18px;
}

/* ===== SECTION 07: RIGHT PANE / DETAILS ===== */
.gm-side-right .gm-side-inner { display:flex; flex-direction:column; gap:12px; background:var(--gm-panel); border-radius:14px; padding:18px; border:1px solid var(--gm-glass-border); box-shadow:var(--gm-shadow); }
.gm-details h3 { margin:0 0 6px; font-weight:700; color:#05392f; }
.gm-detail-links { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.gm-detail-links a { color: var(--gm-accent-security); text-decoration:underline; }

/* ===== SECTION 08: MARBLES CANVAS & HINT ===== */
.gm-network-wrap::before { /* kept subtle */ }
.gm-marble-hint { position:absolute; right:18px; top:18px; z-index:12; background:rgba(255,255,255,0.86); padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,0.03); box-shadow: 0 10px 30px rgba(0,0,0,0.04); }

/* Default canvas placement (inside hero, behind bubbles): allow CSS-only positioning.
   If you want edge-to-edge full-bleed, add .gm-hero--fullbleed to the .gm-hero element
   (JS may also move .gm-hero-canvas-wrap to body — using the opt-in class is safer). */
.gm-hero-canvas-wrap { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.gm-marble-canvas { display:block; width:100%; height:100%; pointer-events:none; will-change: transform, opacity; }

/* ===== SECTION 09: REDUCED MOTION & PRINT ===== */
@media (prefers-reduced-motion: reduce) {
  .gm-marble-canvas { display:none !important; }
  .gm-card, .gm-pill { transition:none !important; transform:none !important; }
}

/* print */
@media print {
  .gm-marble-canvas, .gm-hero-canvas-wrap { display:none !important; }
  .gm-cards-wrap { display:none !important; }
  .gm-source { display:block !important; }
}

/* ===== SECTION 10: SMALL SCREENS ===== */
@media (max-width:640px) {
  .gm-hero-inner { flex-direction:column; align-items:flex-start; gap:10px; }
  .gm-hero-canvas-wrap { position:static; }
  .gm-marble-canvas { height:160px; }
  .gm-card, .gm-card.primary, .gm-card.stacked { width: 96%; max-width: none; padding-left:16px; padding-right:16px; }
}

/* ===== SECTION 11: UTILITIES ===== */
.gm-small { font-size:.88rem; color:var(--gm-muted); }

/* ===== SECTION 12: SOFT GLOW + PULSE EFFECTS (BUTTONS/CARDS) ===== */
.gm-btn-primary { position: relative; z-index: 2; }
.gm-btn-primary::before {
  content: "";
  position: absolute; inset: -6px; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(123,47,247,0.14), rgba(0,198,195,0.06) 60%, rgba(0,0,0,0) 100%);
  filter: blur(10px); opacity: 0.95; transition: opacity 0.25s ease, transform 0.25s ease; z-index:-1; pointer-events:none;
}
@keyframes nx-btn-pulse {
  0%   { transform: scale(1); opacity: 0.9; }
  50%  { transform: scale(1.06); opacity: 0.65; }
  100% { transform: scale(1); opacity: 0.9; }
}
.gm-btn-primary[data-animate="true"]::before { animation: nx-btn-pulse 3.8s ease-in-out infinite; }
.gm-btn-primary:hover::before { opacity:1; transform: scale(1.02); }
.gm-btn-primary:hover { transform: translateY(-2px); }

/* Card ambient halo */
.gm-card::before { content: ""; position:absolute; left:50%; top:50%; width:120%; height:120%; transform:translate(-50%,-50%) scale(0.96); border-radius:22px;
  background: radial-gradient(closest-corner, rgba(123,47,247,0.06) 0%, rgba(0,198,195,0.05) 40%, rgba(0,0,0,0) 70%); filter: blur(14px); opacity:.9; z-index:-2; pointer-events:none; transition: opacity .35s, transform .35s;
}
.gm-card.primary::before { background: radial-gradient(closest-corner, rgba(0,198,195,0.08) 0%, rgba(123,47,247,0.06) 50%, rgba(0,0,0,0) 75%); filter: blur(18px); }

/* ===== NEW: nxta-consult CTA family (unique classes, no collisions) =====
   Match the Exec gradient + shadow + shine, scoped to new class names used by PHP:
   - .nxta-consult-hero
   - .nxta-consult-hero-download
   - .nxta-consult-hero-print
*/
.nxta-consult-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-weight: 900;
  border-radius: 14px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  border: none;
  overflow: hidden;
  z-index: 100;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s, opacity .18s;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(90deg, var(--nxta-btn-g1), var(--nxta-btn-g2));
  box-shadow: 0 20px 50px rgba(106,78,230,.25);
}

/* slightly different size for print variant */
.nxta-consult-hero-print { padding: 12px 20px; }

/* ambient bloom */
.nxta-consult-hero::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(106,78,230,0.18), rgba(175,44,238,0.12) 58%, rgba(0,0,0,0) 100%);
  filter: blur(16px);
  opacity: 0.9;
  transition: opacity .3s, transform .3s;
}

/* Sheen streak (same path as other buttons) */
.nxta-consult-hero::after {
  content: "";
  position: absolute;
  top: -12%;
  left: -70%;
  width: 44%;
  height: 124%;
  z-index: 4;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity .22s ease, left .9s ease;
}

.nxta-consult-hero:hover::after,
.nxta-consult-hero:focus::after {
  animation: nx-btn-shine-short 0.92s cubic-bezier(.2,.9,.2,1);
}

/* hover lift & stronger shadow */
.nxta-consult-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 62px rgba(106,78,230,0.28);
}

/* accessible focus ring */
.nxta-consult-hero:focus {
  outline: none;
  box-shadow: 0 10px 30px rgba(106,78,230,0.20), 0 0 0 6px rgba(106,78,230,0.06);
  transform: translateY(-2px);
}

/* Mobile / touch adjustments */
@media (hover: none) and (pointer: coarse) {
  .nxta-consult-hero { padding: 16px 28px; }
  .nxta-consult-hero::after { display:none; }
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .nxta-consult-hero,
  .nxta-consult-hero::after,
  .nxta-consult-hero::before { transition: none !important; animation: none !important; transform: none !important; }
}

/* ===== SECTION 13: CARD SHEEN (OPTIONAL) ===== */
@keyframes nx-card-sheen {
  0%   { transform: rotate(-25deg) translateX(-110%); opacity: 0; }
  30%  { opacity: 0.18; }
  60%  { transform: rotate(-25deg) translateX(110%); opacity: 0.18; }
  100% { transform: rotate(-25deg) translateX(210%); opacity: 0; }
}
.gm-card[data-sheen="true"]::after {
  content:""; position:absolute; top:-10%; left:-40%; width:60%; height:120%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(-25deg); filter: blur(8px); opacity:0; pointer-events:none; z-index:-1; animation: nx-card-sheen 4.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .gm-card[data-sheen="true"]::after { animation:none !important; } }

/* ===== SECTION 14: BUBBLES (DOM) — keep your original shapes & positions =====
   Important: do NOT override per-bubble backgrounds or sizes here — leave them to your per-bubble rules.
   This block enforces stacking order and a safe default for the bubble container.
*/
.gm-hero { position: relative; overflow: visible; }
.gm-hero .gm-bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* above canvas (0) but below content (.gm-hero-inner z-index:4) */
  overflow: visible;
}

/* bubble base (don't destroy the original fill/shadow — keep minimal defaults) */
.gm-hero .gm-bubbles .gm-bubble {
  position:absolute;
  display:block;
  border-radius:50%;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  pointer-events:none;
  filter: blur(0.6px);
}

/* sizes you already use — keep them */
.gm-hero .gm-bubbles .gm-bubble { width:68px; height:68px; }
.gm-hero .gm-bubbles .gm-bubble.xs { width:40px; height:40px; opacity:.75; }
.gm-hero .gm-bubbles .gm-bubble.sm { width:52px; height:52px; opacity:.82; }
.gm-hero .gm-bubbles .gm-bubble.lg { width:92px; height:92px; opacity:.95; }

/* per-bubble defaults (feel free to override in your theme or HTML) */
.gm-bubble--a { left:8%; top:22%; }
.gm-bubble--b { left:28%; top:8%; }
.gm-bubble--c { left:54%; top:18%; }
.gm-bubble--d { left:72%; top:36%; }
.gm-bubble--e { left:42%; top:46%; }

/* You previously used radial-gradient fills per-bubble — keep them.
   Example safe fills below (if your theme already supplies them you can remove these defaults) */
.gm-bubble--a { background: radial-gradient(circle at 30% 35%, rgba(0,198,195,0.12), rgba(255,255,255,0.02)); }
.gm-bubble--b { background: radial-gradient(circle at 30% 35%, rgba(123,47,247,0.12), rgba(255,255,255,0.02)); }
.gm-bubble--c { background: radial-gradient(circle at 35% 30%, rgba(0,198,195,0.10), rgba(255,255,255,0.02)); }
.gm-bubble--d { background: radial-gradient(circle at 30% 35%, rgba(123,47,247,0.09), rgba(255,255,255,0.02)); }
.gm-bubble--e { background: radial-gradient(circle at 35% 30%, rgba(0,198,195,0.08), rgba(255,255,255,0.02)); }

/* bubble float animations (non-destructive) */
@keyframes gm-bubble-float-a { 0%{transform:translateY(0) scale(1);} 50%{transform:translateY(-12px) scale(1.03);} 100%{transform:translateY(0) scale(1);} }
@keyframes gm-bubble-float-b { 0%{transform:translateY(0) scale(1);} 50%{transform:translateY(-18px) scale(1.06);} 100%{transform:translateY(0) scale(1);} }
@keyframes gm-bubble-float-c { 0%{transform:translateY(0) scale(1);} 50%{transform:translateY(-10px) scale(1.02);} 100%{transform:translateY(0) scale(1);} }
@keyframes gm-bubble-float-d { 0%{transform:translateY(0) scale(1);} 50%{transform:translateY(-16px) scale(1.05);} 100%{transform:translateY(0) scale(1);} }
@keyframes gm-bubble-float-e { 0%{transform:translateY(0) scale(1);} 50%{transform:translateY(-8px) scale(1.01);} 100%{transform:translateY(0) scale(1);} }

.gm-bubble--a { animation: gm-bubble-float-a 8.2s ease-in-out infinite; }
.gm-bubble--b { animation: gm-bubble-float-b 9.1s ease-in-out infinite; }
.gm-bubble--c { animation: gm-bubble-float-c 7.0s ease-in-out infinite; }
.gm-bubble--d { animation: gm-bubble-float-d 8.6s ease-in-out infinite; }
.gm-bubble--e { animation: gm-bubble-float-e 7.8s ease-in-out infinite; }

/* small screens: optional hide */
@media (max-width: 880px) { .gm-hero .gm-bubbles { display:none; } }

/* ===== SECTION 15: FULL-BLEED CANVAS (OPT-IN) =====
   To make the canvas edge-to-edge but keep bubble DOMs safe, add class .gm-hero--fullbleed to the .gm-hero element.
   This avoids accidentally changing bubble rules when you only want full-bleed canvas.
*/
.gm-hero--fullbleed .gm-hero-canvas-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0; /* keep behind hero content */
  overflow: visible;
}
.gm-hero--fullbleed .gm-marble-canvas {
  width: 100%;
  height: 100%;
  display:block;
  pointer-events:none;
  opacity:0.92;
}

/* ===== SECTION 16: HERO DOWNLOAD / PRINT (legacy gm-btn-hero rules kept intact) ===== */
/* (No changes — kept so existing code that uses gm-btn-hero still works) */
.gm-hero .gm-btn-hero-download,
.gm-hero .gm-btn-hero-print {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-weight: 800;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  border: none;
  overflow: hidden;
  z-index: 100;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s, opacity .18s;
  -webkit-font-smoothing: antialiased;
}
.gm-hero .gm-btn-hero-download { background: linear-gradient(90deg, #7b2ff7 0%, #6d3df0 42%, #00c6c3 100%) !important; box-shadow: 0 18px 50px rgba(123,47,247,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
.gm-hero .gm-btn-hero-print { background: linear-gradient(90deg, #7b2ff7 0%, #6d3df0 42%, #00c6c3 100%) !important; box-shadow: 0 14px 38px rgba(123,47,247,0.14), inset 0 1px 0 rgba(255,255,255,0.06) !important; padding: 12px 20px; }
.gm-hero .gm-btn-hero-download > *, .gm-hero .gm-btn-hero-print > * { position: relative; z-index: 6; }
.gm-hero .gm-btn-hero-download::before, .gm-hero .gm-btn-hero-print::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; z-index: 2; pointer-events: none; background: radial-gradient(closest-side, rgba(123,47,247,0.12), rgba(0,198,195,0.04) 58%, rgba(0,0,0,0) 100%); filter: blur(16px); opacity: 0.96; transition: opacity .3s, transform .3s; }
.gm-hero .gm-btn-hero-download::after, .gm-hero .gm-btn-hero-print::after { content: ""; position: absolute; top: -12%; left: -70%; width: 44%; height: 124%; z-index: 4; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%); opacity: 0; transition: opacity .22s ease; }
.gm-hero .gm-btn-hero-download:hover::after, .gm-hero .gm-btn-hero-download:focus::after, .gm-hero .gm-btn-hero-print:hover::after, .gm-hero .gm-btn-hero-print:focus::after { animation: nx-btn-shine-short 0.92s cubic-bezier(.2,.9,.2,1); }
.gm-hero .gm-btn-hero-download:hover, .gm-hero .gm-btn-hero-print:hover { transform: translateY(-3px) !important; box-shadow: 0 26px 62px rgba(106,78,230,0.20) !important; }
.gm-hero .gm-btn-hero-download:focus, .gm-hero .gm-btn-hero-print:focus { outline: none; box-shadow: 0 10px 30px rgba(123,47,247,0.22), 0 0 0 6px rgba(123,47,247,0.06); transform: translateY(-2px); }
@media (hover: none) and (pointer: coarse) {
  .gm-hero .gm-btn-hero-download, .gm-hero .gm-btn-hero-print { padding: 16px 28px; }
  .gm-hero .gm-btn-hero-download::after, .gm-hero .gm-btn-hero-print::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-hero .gm-btn-hero-download, .gm-hero .gm-btn-hero-print, .gm-hero .gm-btn-hero-download::after, .gm-hero .gm-btn-hero-print::after, .gm-hero .gm-btn-hero-download::before, .gm-hero .gm-btn-hero-print::before { transition: none !important; animation: none !important; transform: none !important; }
}

/* ===== SECTION 17: MICROINTERACTIONS & ACCESSIBILITY ===== */
.nx-fade-in { opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; will-change: transform, opacity; }
.nx-fade-in.is-visible { opacity: 1; transform: translateY(0); }

@keyframes gm-card-breathe {
  0% { box-shadow: 0 8px 32px rgba(123,47,247,0.06); transform: translateY(0); }
  50% { box-shadow: 0 12px 48px rgba(0,198,195,0.08); transform: translateY(-2px); }
  100% { box-shadow: 0 8px 32px rgba(123,47,247,0.06); transform: translateY(0); }
}
.gm-card[data-breathe="true"] { animation: gm-card-breathe 6.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gm-card[data-breathe="true"] { animation:none !important; } .nx-fade-in { transition:none !important; } }

/* friendly focus outlines */
.gm-card a:focus, .gm-card button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(123,47,247,0.08), 0 6px 20px rgba(0,198,195,0.06);
  border-radius: 10px;
}

/* ===== SECTION 18: OPTIONAL HELPERS / FALLBACKS ===== */
/* OPTION: remove DOM bubble layer — if you prefer only canvas marbles, uncomment next line */
/* .gm-hero .gm-bubbles { display:none !important; visibility:hidden !important; pointer-events:none !important; } */

/* Keep file end tidy */
/* Force hero CTA labels & icons to remain white on hover/focus/active */
.gm-hero .gm-btn-hero-download,
.gm-hero .gm-btn-hero-download:hover,
.gm-hero .gm-btn-hero-download:focus,
.gm-hero .gm-btn-hero-print,
.gm-hero .gm-btn-hero-print:hover,
.gm-hero .gm-btn-hero-print:focus,
.nxta-consult-hero,
.nxta-consult-hero:hover,
.nxta-consult-hero:focus,
.nxta-consult-hero-print,
.nxta-consult-hero-print:hover,
.nxta-consult-hero-print:focus {
  color: #ffffff !important;
}

/* make sure inner text spans keep color */
.gm-hero .gm-btn-hero-download > * ,
.gm-hero .gm-btn-hero-print > * ,
.nxta-consult-hero > * ,
.nxta-consult-hero-print > * {
  color: inherit !important;
}

/* SVG/icon support: use currentColor so icons follow text color */
.gm-hero .gm-btn-hero-download svg,
.gm-hero .gm-btn-hero-download svg * ,
.gm-hero .gm-btn-hero-print svg,
.gm-hero .gm-btn-hero-print svg * ,
.nxta-consult-hero svg,
.nxta-consult-hero svg * ,
.nxta-consult-hero-print svg,
.nxta-consult-hero-print svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* ==========================================================
   Open Section button — Exec Gradient + Hover Glow
   ========================================================== */
.gm-card .open-section,
.gm-card a.open-section,
.gm-card button.open-section {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(90deg, var(--ex-g1, #6a4ee6), var(--ex-g2, #af2cee));
  box-shadow: 0 16px 44px rgba(106,78,230,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  cursor: pointer;
}

/* Hover lift + glow */
.gm-card .open-section:hover,
.gm-card a.open-section:hover,
.gm-card button.open-section:hover,
.gm-card .open-section:focus,
.gm-card a.open-section:focus,
.gm-card button.open-section:focus {
  transform: translateY(-3px);
  box-shadow: 0 26px 72px rgba(106,78,230,0.26), 0 6px 18px rgba(175,44,238,0.12);
  outline: none;
  filter: saturate(1.02);
}

/* Ensure icon colors remain white if any exist */
.gm-card .open-section svg,
.gm-card .open-section svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* =========================
   Reset button (legend) — compact CTA variant
   Paste at end of nx-privacy.css
   ========================= */

#gm-reset.open-section,
.gm-side-inner #gm-reset.open-section {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff !important;
  background: linear-gradient(90deg, var(--ex-g1, #6a4ee6), var(--ex-g2, #af2cee));
  box-shadow: 0 10px 30px rgba(106,78,230,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* hover/focus */
#gm-reset.open-section:hover,
#gm-reset.open-section:focus {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(106,78,230,0.22);
  outline: none;
}

/* If you instead used the hero class swap, this ensures the 'print' variant has correct sizing */
.nxta-consult-hero-print#gm-reset,
.nxta-consult-hero-print#gm-reset.open-section {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}

/* Small screens: don't lift too high */
@media (max-width: 640px) {
  #gm-reset.open-section { transform: none !important; }
}
/* ==========================================
   Fix: Contact links (email / tel) in sidebar
   ========================================== */
.gm-side-right .gm-contact a[href^="mailto"],
.gm-side-right .gm-contact a[href^="tel"] {
  color: var(--gm-text, #222831) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease, opacity .2s ease;
}

/* Hover/focus state — soft darkening, not red */
.gm-side-right .gm-contact a[href^="mailto"]:hover,
.gm-side-right .gm-contact a[href^="tel"]:hover,
.gm-side-right .gm-contact a[href^="mailto"]:focus,
.gm-side-right .gm-contact a[href^="tel"]:focus {
  color: var(--gm-text-strong, #0f172a) !important;
  opacity: 0.8;
}
/* ========================================================
   Card ambient halo + glassy fog + sheen streak
   Paste at the end of nx-privacy.css
   ======================================================== */

/* tweakable controls */
:root {
  --nx-card-halo-color-1: rgba(123,47,247,0.08); /* purple */
  --nx-card-halo-color-2: rgba(0,198,195,0.06);  /* teal */
  --nx-card-halo-size: 140%;                      /* how large halo is */
  --nx-card-halo-blur: 30px;                      /* blur for halo */
  --nx-card-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.76));
  --nx-card-sheen-color: rgba(255,255,255,0.48);
  --nx-card-sheen-opacity: 0.9;
  --nx-card-sheen-duration: 0.92s;
}

/* Base glass look (slightly stronger backing + soft backdrop) */
.gm-card {
  background: var(--nx-card-glass-bg);
  backdrop-filter: blur(6px) saturate(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);
  border: 1px solid rgba(255,255,255,0.6);
  position: relative; /* allow pseudo elements */
  overflow: visible;
}

/* Ambient halo (soft smoky fog behind card) */
.gm-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0.98);
  width: var(--nx-card-halo-size);
  height: var(--nx-card-halo-size);
  pointer-events: none;
  z-index: -2;
  border-radius: 22px;
  background: radial-gradient(closest-corner,
                var(--nx-card-halo-color-1) 0%,
                rgba(123,47,247,0.04) 12%,
                var(--nx-card-halo-color-2) 40%,
                rgba(0,0,0,0) 70%);
  filter: blur(var(--nx-card-halo-blur));
  opacity: 0.96;
  transition: transform .36s ease, opacity .28s ease;
}

/* Slight secondary inner glow to lift edge */
.gm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: 0.8;
  transition: opacity .28s ease, transform .28s ease;
}

/* Sheen streak that glides on hover/focus */
.gm-card[data-sheen="true"]::after { /* keep existing sheen behavior for cards that enabled it */
  /* no-op — handled elsewhere */
}

/* add shiny streak pseudo for all cards (light, non-intrusive) */
.gm-card .gm-card-sheen {
  pointer-events: none;
  position: absolute;
  top: -14%;
  left: -40%;
  width: 44%;
  height: 128%;
  transform: skewX(-20deg) translateX(0);
  z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--nx-card-sheen-color) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity .28s ease, left .92s cubic-bezier(.2,.9,.2,1);
  mix-blend-mode: overlay;
  filter: blur(0.8px);
}

/* on hover/focus of the card, show sheen and slightly lift halo */
.gm-card:hover::before,
.gm-card:focus-within::before {
  transform: translate(-50%,-50%) scale(1.02);
  opacity: 1;
}
.gm-card:hover .gm-card-sheen,
.gm-card:focus-within .gm-card-sheen {
  opacity: var(--nx-card-sheen-opacity);
  left: 140%;
  transition: opacity .22s ease, left var(--nx-card-sheen-duration) cubic-bezier(.2,.9,.2,1);
}

/* stronger lift for promoted cards */
.gm-card.primary:hover::before { transform: translate(-50%,-50%) scale(1.04); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gm-card::before, .gm-card .gm-card-sheen, .gm-card::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .gm-card .gm-card-sheen { opacity: 0; }
}

/* Avoid printing halos / sheen */
@media print {
  .gm-card::before, .gm-card .gm-card-sheen, .gm-card::after { display: none !important; }
}

/* Helper: inject a .gm-card-sheen node via CSS for cards that don't have one created in HTML.
   If you prefer JS insertion, you can add <span class="gm-card-sheen"></span> inside each card. */
.gm-card > .gm-card-excerpt::after {
  /* nothing — reserved for content; use JS if you want real DOM sheen element */
}