/* */

/* Base tokens */

/* ============ Premium BG tone variables ============ */
html {
  --toneA: 210, 180, 255; /* lilac */
  --toneB: 198, 245, 234; /* opal mint */
  --toneC: 255, 210, 170; /* sunrise peach */
  --toneD: 160, 205, 255; /* electric sky accent */
  --toneGlow: 255, 255, 255;
  --cx1: 18%; --cy1: 18%;
  --cx2: 78%; --cy2: 26%;
  --cx3: 42%; --cy3: 84%;
  --gscale: 230%;
}


html {
  /* dynamic gradient anchors (percentages) */
  --cx1: 18%; --cy1: 18%;
  --cx2: 78%; --cy2: 26%;
  --cx3: 42%; --cy3: 84%;
  --gscale: 220%; /* background-size scale */

  --bg1: 245, 245, 248;
  --bg2: 232, 234, 240;
  --bg3: 220, 222, 230;
  --ink: 18, 18, 24;
  --muted: 88, 88, 96;

  --cel1: 255, 99, 132;
  --cel2: 255, 205, 86;
  --cel3: 54, 162, 235;
}



* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: rgba(var(--ink), 0.92);
  background: rgb(var(--bg2));
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.wrap {
  width: min(1080px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(12px, 2vw, 24px);
}

.site-head { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.logo { width: 200px; height: 200px; object-fit: contain; }

.hero { flex: 1 0 auto; padding-block: clamp(72px, 12vh, 140px); text-align: left; }
.title { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(40px, 6vw, 74px); line-height: 1.02; margin: 0 0 8px 0; }
.lead { font-size: clamp(16px, 2.2vw, 20px); color: rgba(var(--muted), 0.95); margin: 0 0 28px 0; }

.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* CTA stable + icon */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid currentColor;
  color: rgba(var(--ink), 0.95);
  background: none;
  background-size: 200% 100%;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  transition: background-position 300ms ease, color 180ms ease, border-color 180ms ease;
  box-shadow: none;
  transform: none;
}
.cta .dl-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.cta:hover {
  background: none;
  background-size: 200% 100%;
  background-position: 100% 0;
  color: #fff;
  border-color: rgba(0,0,0,1);
}

.legal-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: clamp(20px, 3vh, 40px); }
.legal-left { color: rgba(var(--muted), 0.88); }

/* Footer links — stable no-shift hover */
.legal-right { display: flex; align-items: center; gap: 24px; }
.foot-link {
  display: inline-flex; align-items: center;
  line-height: 1.2; padding: 6px 12px;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; color: rgba(var(--ink), 0.92);
  transition: color 160ms ease, border-color 160ms ease;
  box-shadow: none; transform: none;
}
.foot-link:hover, .foot-link:focus-visible { border-color: rgba(0,0,0,0.28); background: transparent; color: rgba(var(--ink), 0.95); }

/* Background engine (no water) */







.opal-bg::before,
.opal-bg::after {
  content: ""; position: absolute; inset: 0;
  at 50% 50%,
      rgba(255,255,255,0.10),
      transparent 30% 70%,
      rgba(0,0,0,0.03));
  mix-blend-mode: normal;
  will-change: transform, filter, background-position;
  animation: driftA 32s ease-in-out infinite;
}
.opal-bg::after { filter: blur(18px); animation: driftB 46s ease-in-out infinite; opacity: 0.9; }

50%  { transform: translate3d(3%, 2%, 0)  scale(1.035); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.025); }
}
50%  { transform: translate3d(-2%, 3%, 0) scale(1.025); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.035); }
}

/* Painterly glass/gradient overlay */












25%  { background-position: 46% 52%; }
  50%  { background-position: 52% 48%; }
  75%  { background-position: 49% 53%; }
  100% { background-position: 50% 50%; }
}

  50% { background-position: 100% 50%; transform: rotate(180deg) scale(1.08); }
  100% { background-position: 0% 50%; transform: rotate(360deg) scale(1.05); }
}

/* Overspray mist */











50%  { transform: translate3d(3%, 2%, 0)  scale(1.04); opacity: 0.22; }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.02); opacity: 0.16; }
}

/* Smoky gradient text effect for title */
/* LIGHT MODE — monochromatic smoky gradient */
.title.smoke{
  /* Gradient removed by request — solid text inherits color in both themes */
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: inherit !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
} 
50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* */
/* */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .opal-bg::before, .opal-bg::after, .painterly-bg, .opal-overspray, .title.smoke{
  /* Gradient removed by request — solid text inherits color in both themes */
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: inherit !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}
}

/* Responsive polish */
@media (max-width: 1200px) { .title { font-size: clamp(36px, 5.2vw, 64px); } }
@media (max-width: 900px)  { .title { font-size: clamp(32px, 6vw, 56px); letter-spacing: -0.01em; } .lead { font-size: clamp(15px, 2.4vw, 18px); } .legal-row { padding-bottom: 24px; } }
@media (max-width: 640px)  { .title { font-size: clamp(28px, 7vw, 44px); } .cta { padding: 11px 18px; } }


/* v16 overrides */
.title { margin: 0 0 8px 0; }
.lead  { margin: 0 0 28px 0; }


/* v19 overrides */
.title { margin: 0 0 8px 0; }


/* v20 overrides */
.hero h1, h1.title {
  margin-bottom: 48px !important;
}

/* v21 overrides */
.title{margin: 0 0 8px 0;}

/* v22 spacing override */
.title{margin: 0 0 8px 0;}

/* v23 spacing override */
.title{margin:0 0 14px 0 !important;}





/* --- spacing override v30 --- */
.hero .title { margin-bottom: 20px !important; }
.hero .lead { margin-top: 0 !important; }


/* Slightly richer base painterly feel (still subtle, smoky) */













/* ===== Premium Background Refinement ===== */

/* Base gradient layers */








/* Painterly wash */












/* Soft atmospheric overspray */












/* */


/* ===== Cursor Helper (desktop-only) ===== */
@media (hover: hover) and (pointer: fine) {
  #cursorHelper {
    position: fixed;
    left: 0; top: 0;
    width: 30px; height: 30px;
    border: 2px solid rgba(var(--toneD), 0.85);
    border-radius: 999px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease;
    filter: blur(0.2px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
  }
  /* subtle magnetic scale on CTA when inside proximity */
  .cta.magnetized {
    transform: scale(1.02);
    transition: transform 140ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cursorHelper { transition: none; }
  .cta.magnetized { transition: none; }
}

/* ===== Mesh Orb Canvas ===== */
:root {
  --orb-cx: 68%;
  --orb-cy: 48%;
  --orb-rx: 36vmax;
  --orb-ry: 24vmax;
  --orb-rot: -10deg;
}


#meshOrb { 
  position: fixed; inset: 0; z-index: -2; pointer-events: none; 
  mix-blend-mode: normal; 
}



  html { color-scheme: dark; }
}

/* Theme-specific blending for mesh canvas */

#meshOrb { 
  position: fixed; inset: 0; z-index: -2; pointer-events: none; 
  mix-blend-mode: normal; 
}







}





 }



 }

html.no-mesh #meshOrb { display: none !important; }

 }


/* */
:root {
  --btn-dark-bg: #ffffff; /* */
  --btn-dark-fg: #000000; /* */
  --btn-light-bg: #000000; /* light mode hover fill */
  --btn-light-fg: #ffffff; /* light mode hover fg */
}
/* Hover only; default remains unchanged */
/* Light mode */
html:not(.dark) .compendium-button:hover,
:root:not([data-theme="dark"]) .compendium-button:hover {
  background: var(--btn-light-bg) !important;
  color: var(--btn-light-fg) !important;
  border-color: var(--btn-light-bg) !important;
}
html:not(.dark) .compendium-button:hover svg,
:root:not([data-theme="dark"]) .compendium-button:hover svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Keyboard focus parity (optional) */
.compendium-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* */
#bg-viz-dimmer, #overlay { background: rgba(255,255,255,0.05) !important; }
/* Keep overlay under content, over visualizer */
#bg-viz-container { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#bg-viz-dimmer, #overlay { position: fixed; inset: 0; z-index: -1; pointer-events: none; }


/* === Overrides to fully disable headline gradients === */
.hero-title, .hero-title span, .hero-title .solid, .hero-title .sheen {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.sheen { display: none !important; }


/* Centralized overlay opacity controls */
:root{
  --viz-dim-op-light: 0;    /* light mode dim off */
  --viz-dim-op-dark: 0.20;  /* */
}


/* Final kill-switch for headline gradients/sheens */
.hero-title, .hero-title span, .hero-title .solid, .hero-title .sheen {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.sheen { display: none !important; }

/* Ensure visualizer-only background and proper stacking */
html, body { background: transparent !important; }
#bg { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; }
#bg iframe { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; pointer-events: none !important; z-index: 0 !important; }
header, main, footer, .wrap, .hero { position: relative !important; z-index: 1 !important; }

/* */
a.cta:hover { background-color: #000 !important; color: #fff !important; }


/* Light-only hardening */
:root{color-scheme:light only}
html,body{background:#fff}
body,h1,h2,h3,h4,h5,h6,p,li,a,small,figcaption,footer,header,nav{color:#111}


/* === CTA spec from Mike (light-only) === */
.cta-row{display:flex;align-items:center;gap:24px}
.cta-divider{width:1px;height:40px;background:rgba(0,0,0,.15);display:inline-block}

/* Primary: 2px outline pill */
.btn-outline-2{
  display:inline-flex;align-items:center;gap:12px;
  height:56px;padding:0 28px;border-radius:9999px;
  border:2px solid #111;background:transparent;color:#111;
  font-weight:800;font-size:18px;line-height:1;letter-spacing:.1px;
}
.btn-outline-2 svg{width:20px;height:20px;stroke:#111;stroke-width:2.25}
.btn-outline-2:hover{background:rgba(17,17,17,.04)}
.btn-outline-2:active{transform:translateY(1px)}
.btn-outline-2:focus{outline:2px solid #111;outline-offset:3px}

/* Icons: 3px outline circles */
.icon-btn-3{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:9999px;border:3px solid #111;background:#fff;color:#111}
.icon-btn-3 svg{width:22px;height:22px;stroke:#111;stroke-width:2.5}
.icon-btn-3:hover{background:#111;color:#fff}
.icon-btn-3:hover svg{stroke:#fff}
.icon-btn-3:active{transform:translateY(1px)}
.icon-btn-3:focus{outline:2px solid #111;outline-offset:3px}



/* Accessibility */
a:focus-visible, button:focus-visible{outline:2px solid #111;outline-offset:3px}



/* === Refinements per spec === */

/* Primary pill (Compendium): 2px stroke */
.btn-outline-2 {
  border:2px solid #111;
  height:56px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  border-radius:9999px;
  background:transparent;
  color:#111;
  font-weight:800;
  font-size:18px;
  line-height:1;
  letter-spacing:.1px;
  vertical-align:middle;
}
.btn-outline-2 svg {
  width:20px;
  height:20px;
  stroke:#111;
  stroke-width:2.25;
  margin-top:1px; /* slight baseline alignment */
}

/* Icon-only buttons: 3px stroke */
.icon-btn-3 {
  width:56px;
  height:56px;
  border:3px solid #111;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  vertical-align:middle;
}
.icon-btn-3 svg {
  width:22px;
  height:22px;
  stroke:#111;
  stroke-width:2.75; /* ensure consistent weight */
}
.icon-btn-3.download svg {
  width:22px;
  height:22px;
  stroke-width:2.75; /* match others */
}

/* Divider aligned to row */
.cta-divider {
  width:1px;
  height:40px;
  background:rgba(0,0,0,0.2);
  margin:0 20px;
  align-self:center;
}

/* Row alignment */
.cta-row {
  display:flex;
  align-items:center;
  gap:20px;
}

/* Tooltip refinement */
.tooltip {
  position:absolute;
  transform:translateY(10px);
  background:#000;
  color:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}
.icon-btn .tooltip::after {
  content: "";
  position: absolute;
  top: -14px;                       /* pushes arrow closer to tooltip edge */
  left: 50%;
  transform: translateX(-50%);
  border-width: 14px;               /* much larger triangle */
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}

/* Hero CTA spacing: tighten vertical gap */
.hero .cta-row {
  margin-top:24px;
}


/* === BEGIN: Refinements batch === */

/* ===== CTA Refinements (locked to comps) ===== */

/* Layout */
.cta-row { display:flex; align-items:center; gap:24px; margin-top:16px; }
.cta-icons { display:flex; align-items:center; gap:16px; }
.cta-divider, .cta-row > .divider, .cta-divider[role="separator"] {
  width:1px; height:56px; background:rgba(0,0,0,.15); display:inline-block;
}

/* Primary pill: 2px outline */
.btn-outline-2 {
  display:inline-flex; align-items:center; gap:12px;
  height:56px; padding:0 28px;
  border-radius:9999px; border:2px solid #111;
  background:transparent; color:#111;
  font-weight:800; font-size:18px; line-height:1; letter-spacing:.1px;
}
.btn-outline-2 svg {
  width:22px; height:22px;
  stroke:#111; stroke-width:2.5;
  vector-effect: non-scaling-stroke; display:block;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn-outline-2:hover { background:rgba(17,17,17,.04); }
.btn-outline-2:active { transform:translateY(1px); }
.btn-outline-2:focus { outline:2px solid #111; outline-offset:3px; }

/* Icon-only buttons: 3px outline circles */
.icon-btn-3 {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:9999px;
  border:3px solid #111; background:#fff; color:#111;
}
.icon-btn-3 svg {
  width:22px; height:22px;
  stroke:#111; stroke-width:2.5;
  vector-effect: non-scaling-stroke; display:block;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn-3:hover { background:#111; color:#fff; }
.icon-btn-3:hover svg { stroke:#fff; }
.icon-btn-3:active { transform:translateY(1px); }
.icon-btn-3:focus { outline:2px solid #111; outline-offset:3px; }

/* Normalize any legacy button classes to prevent fills */
.button, .btn, .primary, .primary-btn { background:transparent !important; color:#111 !important; }

/* Tooltip refinement */
.tooltip {
  position:absolute;
  transform: translateY(10px);
  background:#000; color:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-weight:600; font-size:14px; line-height:1;
  white-space:nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.tooltip::after {
  content:""; position:absolute; top:-6px; left:24px;
  border:6px solid transparent; border-bottom-color:#000;
}

/* Accessibility */
a:focus-visible, button:focus-visible { outline:2px solid #111; outline-offset:3px; }

/* Hero spacing nudge */
.hero .cta-row { margin-top: 12px; }

/* Fallback targeting if classes were not added in markup */
.actions .button:not(.icon-btn-3):not(.btn-outline-2) { border:2px solid #111; border-radius:9999px; height:56px; padding:0 28px; }
.actions .button.icon { width:56px; height:56px; border:3px solid #111; border-radius:9999px; }
.actions .divider { width:1px; height:56px; background:rgba(0,0,0,.15); }

/* === END: Refinements batch === */

.cta-divider{display:none !important;}



.icon-btn-3 + .tooltip { 
  position:absolute; left:50%; transform:translate(-50%, 10px);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
}
.icon-btn-3:hover + .tooltip,
.icon-btn-3:focus + .tooltip,
.icon-btn-3:focus-visible + .tooltip {
  opacity:1; visibility:visible; transform:translate(-50%, 14px);
}



/* Tooltip base */
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}
.icon-btn-3:hover + .tooltip,
.icon-btn-3:focus + .tooltip,
.icon-btn-3:focus-visible + .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(12px);
}



/* === Tooltip + Icon refinements (2025-08-19) === */
.cta-icons {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

/* Base icon button circle */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 3px solid #111;
  background: #fff;
  color: #111;
  text-decoration: none;
  line-height: 1;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: #111;
  stroke-width: 2.5;
}

.icon-btn:hover {
  background: #111;
  color: #fff;
}
.icon-btn:hover svg { stroke: #fff; }

.icon-btn:active { transform: translateY(1px); }
.icon-btn:focus { outline: 2px solid #111; outline-offset: 3px; }

/* Tooltip bubble: hidden by default, appears below icon */
.icon-btn .tooltip {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}

.icon-btn:hover .tooltip,
.icon-btn:focus .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(12px);
}

/* Tooltip caret */
.icon-btn .tooltip::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}


/* === Tooltip spacing + pointer alignment (final) === */
.icon-btn .tooltip { padding: 8px 14px; }
.icon-btn .tooltip::after { top: -7px; left: 50%; transform: translateX(-50%); }


/* === Vertical spacing adjustment between logo and headline === */
.logo, header img, .site-logo {
  margin-bottom: 20px !important; /* tighten gap */
}
.hero-title {
  margin-top: 10px !important;
}

/* === Tooltip visibility override (2025-11-30) === */
.icon-btn .tooltip {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(10px);
  background: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 20;
}
.icon-btn .tooltip::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}
.icon-btn:hover .tooltip,
.icon-btn:focus .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(14px);
}
/* === Page reveal + idle-state for hero UI (2025-12-03) === */

/* Base UI elements start hidden and slide in once page is ready */
.site-head,
.hero,
.site-footer {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 380ms ease-out,
    transform 380ms ease-out;
}

/* Staggered reveal when the page is ready */
body.page-ready .site-head {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 160ms;
}

body.page-ready .hero {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

body.page-ready .site-footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 440ms;
}

/* Idle “sleep” mode: hide all UI to feature only the visualizer */
html.ui-sleep .site-head,
html.ui-sleep .hero,
html.ui-sleep .site-footer {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}



#cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: visible;
    z-index: 9999;
}

.cursor-trail {
    position: absolute;
    width: 120px;
    height: auto;
    opacity: 0.45;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: fadeOut 0.7s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* --- Cursor Trails System --- */
#cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: visible;
    z-index: 9999999 !important;
}

.cursor-trail {
    position: absolute;
    width: 150px;
    height: auto;
    opacity: 0.5;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: fadeOut 0.7s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}





/* ABOUT PAGE ADDITIONS */

.white-bg {
    background: #ffffff !important;
}

.about-hero .hero-title {
    margin-bottom: 1.5rem;
}

.about-hero .hero-body {
    max-width: 680px;
    margin-bottom: 3rem;
}

.about-spacer {
    height: 3rem;
}

.acknowledgements {
    max-width: 1200px;
    margin: 0 auto 6rem auto;
}

.ack-header {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ack-list {
    font-size: 0.85rem;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.ack-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ack-cols ul {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 900px) {
    .ack-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ack-cols {
        grid-template-columns: 1fr;
    }
}


/* === Text Selection Inversion (Black Highlight / White Text) === */
::selection {
  background: #000;
  color: #fff;
}
::-moz-selection {
  background: #000;
  color: #fff;
}

/* === F8O Suite: Mobile-only dropdown (corrected) === */

.suite-trigger {
  display: none;
  background: transparent;
  border: 2px solid rgba(0,0,0,0.28);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  color: rgba(var(--ink), 0.92);
}

/* Dropdown container */
.suite-dropdown {
  display: none;
  margin: 10px auto 0;
  width: min(92vw, 360px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
}

.suite-dropdown a {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  color: rgba(var(--ink), 0.95);
  font-weight: 500;
}

.suite-dropdown a + a {
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Mobile rules */
@media (max-width: 640px) {
  .suite-item { display: none; }
  .suite-trigger { display: inline-flex; align-items: center; gap: 6px; }
  .suite-dropdown { display: block; }
}


/* === Visualizer Timeline Bar === */
#viz-timer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}

#viz-timer-fill {
  height: 100%;
  width: 100%;
  background: #000;
  transform-origin: left;
  transform: scaleX(0);
}