/* S1077 (owner 2026-10-04): "add more depth onto the effects ... better glassmorphism".
   A material layer over the existing homepage. It changes surfaces, light and depth only: no copy, no layout boxes (no
   width/height/margin/padding), so nothing moves (CLS stays 0).
   Web glassmorphism = an approximation built from backdrop-filter, translucent fills, edge highlights and tinted shadows
   (there is no official web "liquid glass"). Three levels:
     1 sheet  - big product panels (Quinn console, terminal, comparison table, video card, mining panel, pricing compare)
     2 card   - feature, membership, institutional, testimonial, pricing and infrastructure cards
     3 tile   - small stat and metric tiles
   Glass needs light behind it, so the page gets a soft ambient field (indigo + navy from the palette, warm cream glow).
   The site's light theme pins card surfaces with !important (e.g. html[data-theme="light"] .qmemb .qm-card, (0,3,1));
   these surface declarations are !important too and win on specificity ((0,4,1)+), measured on the live cascade.
   Fallbacks: prefers-reduced-transparency -> opaque; prefers-reduced-motion -> no drift / tilt / lift motion;
   < 768px -> no backdrop blur (scroll performance), higher-opacity fills. */

@property --dg-glint { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --dg-tint: 79 70 229;            /* --accent #4F46E5 */
  --dg-navy: 30 58 95;             /* --accent-2 #1E3A5F */
  --dg-warm: 96 70 40;             /* shadow tint: warm brown, never pure black on cream */
  --dg-glow-warm: 222 178 120;     /* ambient apricot from the cream family */
  --dg-fill-1: rgb(255 253 248 / .50);
  --dg-fill-2: rgb(255 253 248 / .40);
  --dg-fill-3: rgb(255 255 255 / .55);   /* tiles carry no blur: a little more fill */
  --dg-fill-band: rgb(242 235 220 / .55);
  --dg-sheen: linear-gradient(160deg, rgb(255 255 255 / .78) 0%, rgb(255 255 255 / .20) 34%, rgb(255 255 255 / 0) 58%);
  --dg-edge: rgb(255 255 255 / .95);
  --dg-base: rgb(var(--dg-warm) / .10);   /* the bottom edge: a glass slab has thickness */
  --dg-edge-soft: rgb(255 255 255 / .35);
  --dg-rim: rgb(120 98 66 / .20);
  --dg-blur-1: 16px; --dg-blur-2: 14px; --dg-blur-3: 0px;   /* v1.1: the backdrop is smooth gradients - small radii look the same and cost far less */
  --dg-sat: 160%;
  --dg-shadow-1: 0 1px 2px rgb(var(--dg-warm) / .07), 0 22px 44px -20px rgb(var(--dg-warm) / .32),
                 0 60px 120px -56px rgb(var(--dg-tint) / .40);
  --dg-shadow-2: 0 1px 2px rgb(var(--dg-warm) / .07), 0 18px 36px -18px rgb(var(--dg-warm) / .28),
                 0 48px 90px -50px rgb(var(--dg-tint) / .32);
  --dg-shadow-3: 0 1px 2px rgb(var(--dg-warm) / .06), 0 12px 24px -14px rgb(var(--dg-warm) / .24);
  --dg-shadow-up: 0 2px 3px rgb(var(--dg-warm) / .08), 0 30px 56px -24px rgb(var(--dg-warm) / .36),
                  0 80px 140px -60px rgb(var(--dg-tint) / .50);
  --dg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="dark"] {
  --dg-fill-1: rgb(26 22 19 / .58);
  --dg-fill-2: rgb(26 22 19 / .52);
  --dg-fill-3: rgb(34 29 25 / .50);
  --dg-fill-band: rgb(20 17 14 / .55);
  --dg-sheen: linear-gradient(160deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / .03) 40%, rgb(255 255 255 / 0) 65%);
  --dg-edge: rgb(255 255 255 / .14);
  --dg-edge-soft: rgb(255 255 255 / .06);
  --dg-base: rgb(0 0 0 / .35);
  --dg-rim: rgb(255 255 255 / .09);
  --dg-shadow-1: 0 1px 1px rgb(0 0 0 / .30), 0 18px 36px -18px rgb(0 0 0 / .60), 0 48px 96px -52px rgb(var(--dg-tint) / .34);
  --dg-shadow-2: 0 1px 1px rgb(0 0 0 / .28), 0 14px 28px -16px rgb(0 0 0 / .55), 0 34px 68px -40px rgb(var(--dg-tint) / .26);
  --dg-shadow-3: 0 1px 1px rgb(0 0 0 / .25), 0 10px 20px -12px rgb(0 0 0 / .50);
  --dg-shadow-up: 0 2px 2px rgb(0 0 0 / .30), 0 26px 48px -20px rgb(0 0 0 / .70), 0 64px 120px -56px rgb(var(--dg-tint) / .46);
}

/* ---- the light behind the glass: one fixed, non-interactive layer (no scroll listener, no layout) ---- */
.dg-ambient {
  position: fixed; inset: -12vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 32vmax at 14% 18%, rgb(var(--dg-tint) / .16), transparent 70%),
    radial-gradient(34vmax 30vmax at 86% 30%, rgb(var(--dg-navy) / .12), transparent 70%),
    radial-gradient(40vmax 34vmax at 72% 88%, rgb(var(--dg-tint) / .13), transparent 72%),
    radial-gradient(36vmax 32vmax at 20% 82%, rgb(var(--dg-glow-warm) / .26), transparent 70%) !important;
}
html[data-theme="dark"] .dg-ambient {
  background:
    radial-gradient(38vmax 32vmax at 14% 18%, rgb(var(--dg-tint) / .22), transparent 70%),
    radial-gradient(34vmax 30vmax at 86% 30%, rgb(var(--dg-navy) / .30), transparent 70%),
    radial-gradient(40vmax 34vmax at 72% 88%, rgb(var(--dg-tint) / .16), transparent 72%),
    radial-gradient(36vmax 32vmax at 20% 82%, rgb(var(--dg-glow-warm) / .06), transparent 70%) !important;
}
.dg-grain {   /* film grain: fixed + pointer-events none only (never on a scrolling box) */
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme="dark"] .dg-grain { mix-blend-mode: screen; opacity: .035; }
/* v1.1: the light field is STATIC. Drifting it made every blurred card above it re-blur on every frame (measured: slow
   frames 5% -> 15-18% while scrolling). Depth comes from the layers, not from motion behind them. */
@keyframes dg-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.8%, 0) scale(1.05); }
}

/* ---- let the ambient light through the page's opaque bands (colour of each band kept, as a tint) ---- */
html[data-theme] body section.trusted-by, html[data-theme] body section.voices, html[data-theme] body section.infra-strip,
html[data-theme] body section.video-section { background-color: transparent !important; }
html[data-theme] body section.trust-strip, html[data-theme] body section.dataflow-section,
html[data-theme] body section.inst-band, html[data-theme] body section.pro-terminal-section,
html[data-theme] body section.security { background-color: var(--dg-fill-band) !important; }
html[data-theme] body section.cta, html[data-theme] body section.playbook { background-color: rgb(255 253 248 / .55) !important; }
html[data-theme="dark"] body section.cta, html[data-theme="dark"] body section.playbook { background-color: rgb(20 17 14 / .55) !important; }

/* bug fix: the bento section mixed var(--paper, #11141C) - an undefined variable, so 30 % near-black - into the middle
   of the light page (the grey band behind the cards). Light: a soft indigo pool instead. Dark: the intended dark tint. */
html[data-theme] .qt-bento-section {
  background: radial-gradient(70% 55% at 50% 38%, rgb(var(--dg-tint) / .08), transparent 70%),
              radial-gradient(50% 40% at 50% 92%, rgb(var(--dg-navy) / .06), transparent 70%) !important;
}
html[data-theme="dark"] .qt-bento-section {
  background: radial-gradient(70% 55% at 50% 38%, rgb(var(--dg-tint) / .14), transparent 70%),
              linear-gradient(180deg, transparent 0%, rgb(17 20 28 / .30) 50%, transparent 100%) !important;
}
html[data-theme] .qt-bento-grid { perspective: 1400px; }

/* ---- light pools: colour behind each card grid, so the frost is visible (indigo + warm apricot, both from the palette) ---- */
html[data-theme] body section.istats {
  background-image: radial-gradient(34% 70% at 18% 45%, rgb(var(--dg-tint) / .12), transparent 70%),
                    radial-gradient(30% 65% at 82% 55%, rgb(var(--dg-glow-warm) / .30), transparent 70%) !important;
}
html[data-theme] body section.qmemb-section {
  background-image: radial-gradient(30% 22% at 22% 30%, rgb(var(--dg-tint) / .12), transparent 70%),
                    radial-gradient(28% 20% at 80% 46%, rgb(var(--dg-glow-warm) / .28), transparent 70%),
                    radial-gradient(34% 22% at 40% 78%, rgb(var(--dg-navy) / .10), transparent 70%) !important;
}
html[data-theme] body section.product {
  background-image: radial-gradient(40% 35% at 70% 55%, rgb(var(--dg-tint) / .12), transparent 70%),
                    radial-gradient(30% 30% at 20% 70%, rgb(var(--dg-glow-warm) / .24), transparent 70%) !important;
}
html[data-theme] body section.pricing {
  background-image: radial-gradient(40% 30% at 30% 55%, rgb(var(--dg-tint) / .12), transparent 70%),
                    radial-gradient(34% 28% at 78% 45%, rgb(var(--dg-glow-warm) / .28), transparent 70%) !important;
}
html[data-theme] body :is(section.pro-terminal-section, section.trusted-by, section.voices, section.video-section) {
  background-image: radial-gradient(40% 50% at 30% 50%, rgb(var(--dg-tint) / .10), transparent 70%),
                    radial-gradient(34% 45% at 75% 45%, rgb(var(--dg-glow-warm) / .24), transparent 70%) !important;
}
html[data-theme="dark"] body :is(section.istats, section.qmemb-section, section.product, section.pricing,
                                 section.pro-terminal-section, section.trusted-by, section.voices, section.video-section) {
  background-image: radial-gradient(40% 40% at 25% 45%, rgb(var(--dg-tint) / .16), transparent 70%),
                    radial-gradient(34% 36% at 78% 55%, rgb(var(--dg-navy) / .26), transparent 70%) !important;
}

/* ---- the material: shared by all three levels ---- */
html[data-theme] :is(.ws, .pro-terminal, .pricing-compare, .video-card, .qt-mining-panel, .qvstrip-inner, .dg-sheet,
                     .qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel,
                     .price-card:not(.recommended),
                     .istat, .trust-stat, .qt-stat, .metric, .qt-mining-table) {
  -webkit-backdrop-filter: blur(var(--dg-blur, 20px)) saturate(var(--dg-sat)) !important;
  backdrop-filter: blur(var(--dg-blur, 20px)) saturate(var(--dg-sat)) !important;
  border-color: var(--dg-rim) !important;
}

/* level 1 - sheets */
html[data-theme] :is(.pro-terminal, .pricing-compare, .video-card, .qt-mining-panel, .dg-sheet) {
  --dg-blur: var(--dg-blur-1);
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, -10%), rgb(255 255 255 / calc(var(--dg-glint) * .45)), transparent 45%),
              var(--dg-sheen), var(--dg-fill-1) !important;
  box-shadow: inset 0 1px 0 var(--dg-edge), inset 0 -1px 0 var(--dg-base), inset 0 0 0 1px var(--dg-edge-soft), var(--dg-shadow-1) !important;
}
/* sheets that already paint their own background image keep it: depth and edge only */
html[data-theme] :is(.ws, .qvstrip-inner) {
  --dg-blur: var(--dg-blur-1);
  box-shadow: inset 0 1px 0 var(--dg-edge), inset 0 -1px 0 var(--dg-base), inset 0 0 0 1px var(--dg-edge-soft), var(--dg-shadow-1) !important;
}

/* level 2 - cards */
html[data-theme] :is(.qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel,
                     .price-card:not(.recommended):not(.featured)) {
  --dg-blur: var(--dg-blur-2);
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, -10%), rgb(255 255 255 / calc(var(--dg-glint) * .55)), transparent 45%),
              var(--dg-sheen), var(--dg-fill-2) !important;
  box-shadow: inset 0 1px 0 var(--dg-edge), inset 0 -1px 0 var(--dg-base), inset 0 0 0 1px var(--dg-edge-soft), var(--dg-shadow-2) !important;
}
html[data-theme] .price-card.featured {
  --dg-blur: var(--dg-blur-2);
  box-shadow: inset 0 1px 0 var(--dg-edge), 0 0 0 1px rgb(var(--dg-tint) / .55), var(--dg-shadow-1) !important;
}

/* level 3 - tiles */
html[data-theme] :is(.istat, .trust-stat, .qt-stat, .metric, .qt-mining-table) {
  --dg-blur: var(--dg-blur-3);
  background: var(--dg-sheen), var(--dg-fill-3) !important;
  box-shadow: inset 0 1px 0 var(--dg-edge), var(--dg-shadow-3) !important;
}

/* the AI-chat comparison (S1051, moved in S1076): a glass sheet over the bento pool */
html[data-theme] #vs-ai-chat .aicmp-table, html[data-theme] #vs-ai-chat table {
  -webkit-backdrop-filter: blur(var(--dg-blur-1)) saturate(var(--dg-sat)) !important;
  backdrop-filter: blur(var(--dg-blur-1)) saturate(var(--dg-sat)) !important;
  box-shadow: inset 0 1px 0 var(--dg-edge), var(--dg-shadow-1) !important;
}

/* ---- depth on interaction: lift (translate, so it composes with the magnetic transform), glint fades in ---- */
html[data-theme] :is(.qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel, .price-card,
                     .istat, .trust-stat, .qt-stat, .video-card) {
  /* keeps the transitions other layers rely on: the magnetic transform and the scroll-reveal opacity/transform */
  transition: translate 420ms var(--dg-ease), rotate 520ms var(--dg-ease), box-shadow 320ms var(--dg-ease),
              border-color 240ms ease, --dg-glint 320ms ease, transform 600ms var(--dg-ease), opacity 800ms var(--dg-ease);
}
html[data-theme] :is(.qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel,
                     .price-card:not(.recommended), .video-card):hover {
  translate: 0 -4px;
  --dg-glint: 1;
  border-color: rgb(var(--dg-tint) / .30) !important;
  box-shadow: inset 0 1px 0 var(--dg-edge), inset 0 -1px 0 var(--dg-base), inset 0 0 0 1px var(--dg-edge-soft), var(--dg-shadow-up) !important;
}
html[data-theme] .price-card.recommended:hover { translate: 0 -4px; }
html[data-theme] :is(.istat, .trust-stat, .qt-stat):hover { translate: 0 -2px; }
/* the bento cards' magnetic hover painted an indigo glow; the depth shadow replaces it */
html[data-theme] .qt-bento-card.qt-magnetic:hover {
  box-shadow: inset 0 1px 0 var(--dg-edge), inset 0 -1px 0 var(--dg-base), inset 0 0 0 1px var(--dg-edge-soft), var(--dg-shadow-up) !important;
}
/* tilt: set by homepage-depth-glass.js as --rx / --ry (degrees), on showcase cards only */
html[data-theme] :is(.qt-bento-card, .price-card)[data-dg-tilt] { rotate: var(--ax, 0) var(--ay, 1) 0 var(--ra, 0deg); }
html[data-theme] :is(.qt-bento-card, .price-card, .qm-card):focus-visible { outline: 2px solid rgb(var(--dg-tint) / .7); outline-offset: 3px; }

/* ---- fallbacks ---- */
@media (max-width: 767px) {   /* phones: blur on dozens of cards costs scroll frames; keep the look, drop the blur */
  html[data-theme] :is(.ws, .pro-terminal, .pricing-compare, .video-card, .qt-mining-panel, .qvstrip-inner, .dg-sheet,
                       .qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel, .price-card,
                       .istat, .trust-stat, .qt-stat, .metric, .qt-mining-table, #vs-ai-chat table) {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  :root { --dg-fill-1: rgb(255 253 248 / .86); --dg-fill-2: rgb(255 253 248 / .84); --dg-fill-3: rgb(255 255 255 / .82); }
  html[data-theme="dark"] { --dg-fill-1: rgb(26 22 19 / .88); --dg-fill-2: rgb(26 22 19 / .86); --dg-fill-3: rgb(34 29 25 / .84); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] :is(.qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel, .price-card,
                       .istat, .trust-stat, .qt-stat, .video-card) { transition: none; }
  html[data-theme] :is(.qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel, .price-card,
                       .istat, .trust-stat, .qt-stat, .video-card):hover { translate: none; rotate: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --dg-fill-1: rgb(255 253 248); --dg-fill-2: rgb(255 253 248); --dg-fill-3: rgb(255 255 255); --dg-fill-band: rgb(242 235 220); }
  html[data-theme="dark"] { --dg-fill-1: rgb(26 22 19); --dg-fill-2: rgb(26 22 19); --dg-fill-3: rgb(34 29 25); --dg-fill-band: rgb(20 17 14); }
  html[data-theme] :is(.ws, .pro-terminal, .pricing-compare, .video-card, .qt-mining-panel, .qvstrip-inner, .dg-sheet,
                       .qt-bento-card, .qm-card, .inst-card, .voice, .trusted-card, .infra-col, .pro-panel, .price-card,
                       .istat, .trust-stat, .qt-stat, .metric, .qt-mining-table, #vs-ai-chat table) {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .dg-ambient, .dg-grain { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --dg-fill-1: rgb(255 253 248 / .94); --dg-fill-2: rgb(255 253 248 / .92); --dg-fill-3: rgb(255 255 255 / .92); }
}