/* Liquid theme: deeper black, a live WebGL ink background (js/liquid.js), frosted glass surfaces,
   hairline borders sized for high-density screens, liquid buttons and fluid reveals.
   Loaded last on every page. Remove the theme-liquid.css <link> lines (and the liquid.js import
   in js/site.js) to return to the neon theme. */
:root {
  --bg: #010201;
  --bg-2: #050705;
  --surface: rgba(255, 255, 255, .022);
  --surface-2: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --text: #f1f3f0;
  --text-2: #a4aaa3;
  --muted: #6d736c;
  --hair: 1px;
  --liquid: cubic-bezier(.22, 1, .36, 1);
  --glass: rgba(6, 9, 6, .52);
}
@media (min-resolution: 2dppx) { :root { --hair: .5px; } }

html { background: var(--bg); }
body {
  background: transparent;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
  -moz-osx-font-smoothing: grayscale;
}

/* The ink canvas sits behind everything; the CSS ambient light becomes a fallback only. */
.liquid-bg {
  position: fixed; inset: 0; z-index: -2; width: 100vw !important; height: 100vh !important; max-width: none;
  pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  image-rendering: auto;
}
.liquid-bg.on { opacity: 1; }
.has-liquid body::before, .has-liquid body::after { opacity: 0; animation: none; }
html:not(.has-liquid) body { background: var(--bg); }

/* Fine film grain: keeps deep blacks rich and band-free. */
.has-liquid body > main::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header: deeper glass */
.site-header.scrolled { background: rgba(2, 3, 2, .6); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-bottom: var(--hair) solid var(--line-2); }

/* Headline: slow flowing gradient, like light moving through liquid */
.grad-text {
  background-image: linear-gradient(100deg, #ffffff 0%, #c8ff8a 22%, #3dff7a 45%, #eaff00 62%, #c8ff8a 80%, #ffffff 100%);
  background-size: 250% 100%;
  animation: liquid-flow 9s ease-in-out infinite alternate;
}
@keyframes liquid-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
h1, h2 { text-wrap: balance; }

/* Glass surfaces with a hairline sheen on the top edge */
.card, .float, .answer-band, .cta-band, .plan, .quote-card, .stat {
  border-width: var(--hair);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008) 60%), var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .9);
  transition: transform .7s var(--liquid), border-color .5s ease, box-shadow .7s var(--liquid);
}
.card.hoverable:hover { transform: translateY(-6px); border-color: rgba(61, 255, 122, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 var(--hair) rgba(61, 255, 122, .2), 0 20px 60px -30px rgba(61, 255, 122, .35); }
.card.glow::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 255, 122, .11), rgba(234, 255, 0, .03) 30%, transparent 55%); }
.float { background: rgba(4, 7, 4, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -24px rgba(0, 0, 0, .9); }
.cta-band { background: radial-gradient(70% 120% at 50% 0%, rgba(61, 255, 122, .14), transparent 70%), radial-gradient(50% 80% at 100% 100%, rgba(234, 255, 0, .07), transparent 70%), rgba(3, 5, 3, .6); }

/* Icon tiles: a slowly morphing liquid blob behind each icon */
.icon-tile { position: relative; isolation: isolate; overflow: hidden; }
.icon-tile::after {
  content: ""; position: absolute; inset: 18%; z-index: -1; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: radial-gradient(circle at 30% 30%, rgba(234, 255, 0, .35), rgba(61, 255, 122, .25) 50%, transparent 75%);
  filter: blur(6px); animation: blob 9s ease-in-out infinite;
}
@keyframes blob {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 63% 37% 41% 59% / 55% 62% 38% 45%; transform: rotate(120deg) scale(1.12); }
  66% { border-radius: 37% 63% 52% 48% / 38% 46% 54% 62%; transform: rotate(240deg) scale(.94); }
}

/* Buttons: magnetic, with a liquid fill poured from the pointer (positions set by liquid.js) */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate .6s var(--liquid), transform .5s var(--liquid), box-shadow .5s ease, background-position .8s ease, border-color .4s ease, color .3s ease;
}
.btn::before {
  content: ""; position: absolute; left: var(--bx, 50%); top: var(--by, 50%); z-index: -1;
  width: 260%; aspect-ratio: 1; border-radius: 45% 55% 52% 48% / 50% 46% 54% 50%;
  transform: translate(-50%, -50%) scale(0); transition: transform .8s var(--liquid);
  background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 45%, transparent 70%);
  pointer-events: none;
}
.btn-ghost::before { background: radial-gradient(circle, rgba(61, 255, 122, .22), rgba(61, 255, 122, .06) 45%, transparent 70%); }
.btn:hover::before { transform: translate(-50%, -50%) scale(1); animation: blob-spin 6s linear infinite; }
@keyframes blob-spin { to { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }
.btn-ghost { border-width: var(--hair); background: rgba(255, 255, 255, .025); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-primary { background-size: 220% 100%; animation: liquid-flow 7s ease-in-out infinite alternate; }

/* Ripple drop */
.liquid-drop {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(234, 255, 0, .28), rgba(61, 255, 122, .14) 35%, transparent 65%);
  transform: scale(0); opacity: 1; animation: drop .9s var(--liquid) forwards;
}
.card.hoverable, .examples button, .shot-tab { position: relative; overflow: hidden; }
@keyframes drop { to { transform: scale(1); opacity: 0; } }

/* Fluid reveals: rise out of a soft blur, like surfacing through water */
.js [data-reveal] { filter: blur(10px); transform: translateY(34px) scale(.985); transition: opacity 1.2s var(--liquid), transform 1.2s var(--liquid), filter 1.2s var(--liquid); transition-delay: var(--d, 0s); }
.js [data-reveal].in { filter: none; transform: none; }

/* Hairlines everywhere */
.eyebrow, .tag, .input, .field select, .field textarea, .menu-btn, .shot-tab, .sol-nav a { border-width: var(--hair); }
.eyebrow { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 255, 255, .02); }
.eyebrow::before { animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--blue); } 50% { opacity: .5; box-shadow: 0 0 2px var(--blue); } }

.sol-nav { background: rgba(1, 2, 1, .55); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }

/* Scrollbar */
html { scrollbar-color: rgba(61, 255, 122, .25) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: rgba(61, 255, 122, .25) padding-box; }

@media (max-width: 760px) {
  .card, .float, .answer-band, .cta-band, .plan, .quote-card, .stat { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .js [data-reveal] { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grad-text, .btn-primary, .icon-tile::after, .eyebrow::before, .btn:hover::before { animation: none; }
  .btn { translate: none; }
  .js [data-reveal] { filter: none; transform: none; }
}