/* Base additions to complement Tailwind (do not override Tailwind colors/layout) */
html,body{min-height:100%;height:auto;overflow-y:auto;overscroll-behavior:auto}
body{background:#000;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-mesh .conic{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;transform:translate(-50%,-50%);border-radius:9999px;opacity:.12;
  background-image:conic-gradient(from 0deg, rgba(168,85,247,.5), rgba(14,165,233,.5), rgba(52,211,153,.45), rgba(168,85,247,.5));
  animation:spin 120s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bg-mesh .mesh1{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(14,165,233,.14), transparent),
    radial-gradient(100% 70% at 100% 30%, rgba(168,85,247,.14), transparent),
    radial-gradient(80% 80% at 0% 100%, rgba(52,211,153,.10), transparent)}
.bg-mesh .bokeh{position:absolute;inset:0}
.bg-mesh .bokeh span{position:absolute;width:6px;height:6px;border-radius:9999px;background:rgba(255,255,255,.08);animation:float 14s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0);opacity:.18}50%{transform:translateY(-30%);opacity:.5}100%{transform:translateY(0);opacity:.18}}
.bg-mesh .vignette{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0), rgba(0,0,0,.5))}

.glass{border:1px solid rgba(255,255,255,.1); background: rgba(17,17,17,.55); border-radius:16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); backdrop-filter: blur(12px) saturate(150%)}
/* Partner logo size consistency */
.partner-icon{width:20px;height:20px;display:block}
/* Sticky header backdrop */
.header-blur{backdrop-filter: blur(18px)}
/* Simple reveal animation (desktop focus) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1;transform:none}
/* FAQ accordion smooth */
.faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .28s cubic-bezier(.22,1,.36,1), opacity .28s ease}
.faq.open .faq-a{max-height:360px;opacity:1}


/* === Interactive background enhancements (subtle, desktop-friendly) === */
.bg-mesh .blob{position:absolute; border-radius:9999px; filter:blur(80px); opacity:.16;
  background:
    radial-gradient(circle at 30% 30%, rgba(168,85,247,.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(14,165,233,.30), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(52,211,153,.22), transparent 70%);
  will-change: transform, opacity;
}
.bg-mesh .blob.b1{left:-20vmax; top:-10vmax; width:60vmax; height:60vmax; animation:drift1 42s ease-in-out infinite;}
.bg-mesh .blob.b2{right:-22vmax; bottom:-16vmax; width:68vmax; height:68vmax; animation:drift2 48s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4vmax,-3vmax,0)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3vmax,4vmax,0)}}

/* Pointer‑reactive cursor glow */
.cursor-glow{position:fixed; left:0; top:0; width:280px; height:280px; border-radius:9999px; pointer-events:none;
  background: radial-gradient(closest-side, rgba(99,102,241,.18), rgba(168,85,247,.12), rgba(14,165,233,.08), transparent 70%);
  filter: blur(28px); mix-blend-mode:screen; z-index:1; opacity:.55;
  transform: translate3d(-1000px,-1000px,0); transition: opacity .25s ease;
}
@media (max-width: 900px){ .cursor-glow{ display:none }}

/* Slight parallax on blobs driven by CSS vars --mx/--my (set in JS) */
.bg-mesh .blob{transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * -10px), 0);}

/* Subtle grain for depth */
.bg-mesh::after{content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.06; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 1px, transparent 1px, transparent 2px);
  mix-blend-mode: overlay;
}

/* ---- Sonda v5 background (darker, minimal, tasteful) ---- */
.bg-mesh .conic{ opacity:.10 } /* dimmer swirl */
.bg-mesh .mesh1{
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(14,165,233,.10), transparent),
    radial-gradient(100% 70% at 100% 30%, rgba(168,85,247,.10), transparent),
    radial-gradient(80% 80% at 0% 100%, rgba(52,211,153,.08), transparent);
}
.bg-mesh .blob{ opacity:.12 } /* softer blobs from v3 */
.cursor-glow{
  opacity:.35; /* subtler cursor highlight */
  background: radial-gradient(closest-side, rgba(99,102,241,.14), rgba(168,85,247,.10), rgba(14,165,233,.06), transparent 70%);
}
/* Darker vignette to let content pop while keeping background classy */
.bg-mesh .vignette{ background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0), rgba(0,0,0,.72)) }

/* ---- v6 footer brand & CTA polish ---- */
.footer-brand{ position:relative; display:inline-flex; align-items:center; gap:12px; isolation:isolate }
.footer-brand::after{
  content:""; position:absolute; inset:-10px -12px; z-index:-1;
  background: radial-gradient(80% 60% at 30% 40%, rgba(168,85,247,.18), transparent 60%),
              radial-gradient(70% 70% at 80% 60%, rgba(14,165,233,.16), transparent 65%);
  opacity:.0; filter: blur(20px); transition: opacity .25s ease;
}
.footer-brand:hover::after{ opacity:.55 }
.footer-brand .logo-tile{
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 12px 36px rgba(168,85,247,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.footer-brand:hover .logo-tile{ transform: translateY(-1px) scale(1.03); filter: saturate(1.1) }
.footer-brand .brand-text{
  background-image: linear-gradient(90deg, #fff, rgba(255,255,255,.85));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 8px rgba(168,85,247,.14), 0 0 16px rgba(14,165,233,.12);
}

/* CTA: Start now */
.btn-start-now{ position:relative; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 36px rgba(168,85,247,.25), 0 6px 20px rgba(14,165,233,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, opacity .18s ease;
  filter: saturate(1.06);
}
.btn-start-now:hover{ transform: translateY(-1px) scale(1.015); filter: saturate(1.12) }
.btn-start-now::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  width: 45%; transform: skewX(-20deg) translateX(-130%);
  transition: transform .8s ease;
}
.btn-start-now:hover::before{ transform: skewX(-20deg) translateX(240%) }

/* ---- v6.2 footer bottom-left brand brightness ---- */
footer .footer-brand{ position:relative; isolation:isolate }
footer .footer-brand::after{
  content:""; position:absolute; inset:-12px -14px; z-index:-1;
  background:
    radial-gradient(80% 60% at 30% 40%, rgba(168,85,247,.28), transparent 60%),
    radial-gradient(70% 70% at 80% 60%, rgba(14,165,233,.24), transparent 65%);
  filter: blur(22px);
  opacity:.55; transition: opacity .2s ease;
}
footer .footer-brand:hover::after{ opacity:.72 }
footer .footer-brand .logo-tile{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 16px 42px rgba(168,85,247,.30),
    0 10px 30px rgba(14,165,233,.22);
  filter: saturate(1.12) brightness(1.06);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
footer .footer-brand:hover .logo-tile{
  transform: translateY(-1px) scale(1.03);
  filter: saturate(1.18) brightness(1.10);
}
footer .footer-brand .brand-text{
  background-image: linear-gradient(90deg, #fff, rgba(255,255,255,.9));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(168,85,247,.18), 0 0 18px rgba(14,165,233,.14);
}

/* ---- v6.4: scroll & layout fixes + legal polish ---- */
html, body{
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}
body{ overflow-x: hidden; }

/* Background layer stays behind and never intercepts pointer */
.bg-mesh{ position: fixed; inset: 0; z-index: 0; pointer-events: none; }
header, main, footer, .content-layer{ position: relative; z-index: 1; }

/* Legal page aesthetics */
.legal-prose{ line-height: 1.75; color: rgba(255,255,255,.78) }
.legal-prose h2{ margin-top: 2.25rem; margin-bottom: .75rem; font-size: 1.25rem; font-weight: 700; color: #fff }
.legal-prose p{ margin: .75rem 0 }
.legal-prose ul{ margin: .5rem 0 1rem 1.25rem; list-style: disc; }
.legal-prose li{ margin: .35rem 0 }
.legal-divider{ height:1px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); border-radius:1px; }
.callout{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: .875rem; padding: 1rem; }
.callout strong{ color:#fff }

/* Sticky sidebar for "On this page" */
.toc{ position: sticky; top: 6.5rem; }
.toc h3{ font-weight: 600; color:#fff }
.toc a{ display:block; padding:.4rem .25rem; color: rgba(255,255,255,.75); border-radius: .5rem; text-decoration: none }
.toc a:hover{ color:#fff; background: rgba(255,255,255,.06) }
.toc a.active{ color:#fff; background: linear-gradient(90deg, rgba(168,85,247,.16), rgba(14,165,233,.16)); }

/* Minor footer spacing on legal pages */
.page-legal footer{ margin-top: 2rem }

/* v6.5 scroll hardening */
body{overflow-x:hidden}
.bg-mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;touch-action:none}
.cursor-glow{pointer-events:none}

/* v6.5.2 scroll overrides */
html { min-height: 100% !important; height: auto !important; overflow-y: auto !important; }
body { min-height: 100% !important; height: auto !important; overflow-y: auto !important; }
.bg-mesh{ position: fixed; inset:0; z-index:-1; pointer-events:none; touch-action:none; }
header, main, footer{ position: relative; z-index: 1; }