/* =============================================================
   styles-glass.css  —  Glassmorphism skin for home-glass.html
   -------------------------------------------------------------
   Linked INSTEAD of styles.css by home-glass.html. It pulls in
   the full base stylesheet unchanged, then re-skins every
   surface component as frosted glass.

   SCOPE: glassmorphism treatment ONLY. The homepage's existing
   colours are retained as-is — same paper / warm / dark section
   grounds, same text colours, same brand accents. Nothing here
   changes a hue; it only makes panels, cards, the nav, chips,
   buttons and the footer translucent + blurred, with hairline
   borders and an inner highlight.

   EXCEPTION (2026-09-11): the hero no longer uses the
   home-hero.png photo. It uses the sitewide default animated
   gradient hero (the same teal/coral/green-glow-on-dark
   background every other page already uses) instead — still
   zero new colours, just swapping which existing background
   this one page shows.

   2026-09-11 — PREMIUM GLASSMORPHISM PASS: reorganised around a
   small set of design tokens (§1) and a 4-level glass hierarchy
   so the whole page reads as one coherent system rather than a
   pile of ad-hoc panels:
     L1  normal background/content            — untouched
     L2  subtle glass cards                    — service cards, value cards
     L3  strong glass panels                    — stats card, tech panel, testimonial
     L4  ambient decorative glass shapes        — hero / tech / why / testimonial / CTA
   Ambient shapes are purely decorative (`pointer-events:none`),
   sit behind real content via explicit z-index (never fixed to
   the viewport — always positioned relative to their own
   section), and use `filter: blur()` on the shape itself rather
   than `backdrop-filter`, so they render identically with or
   without backdrop-filter support.

   Colour source of truth: the `:root` tokens in this file's own
   @import (styles.css) — the same brand palette (--blue #00B8D6,
   --green #42F481, --ink #12181D, --paper #FBFAF8, etc.). No new
   colours are introduced anywhere below; every glass fill is an
   existing token or white/black at reduced opacity.

   Everything is scoped to body.home-glass. The @import version
   must match the site's current ?v= token.
   ============================================================= */

@import url("styles.css?v=20260916w");

/* -------------------------------------------------------------
   1. GLASS DESIGN TOKENS
   Three families — light (paper grounds), warm (paper-warm
   ground), dark (hero / tech / ink grounds) — plus shared blur,
   radius, shadow and easing values. Every rule below should pull
   from here rather than hardcoding a new rgba.
   ----------------------------------------------------------- */
.home-glass{
  --glass-light-bg:            rgba(255, 255, 255, 0.62);
  --glass-light-bg-hover:      rgba(255, 255, 255, 0.75);
  --glass-light-border:        rgba(255, 255, 255, 0.70);
  --glass-light-border-hover:  rgba(255, 255, 255, 0.85);

  --glass-warm-bg:             rgba(255, 255, 255, 0.50);
  --glass-warm-bg-hover:       rgba(255, 255, 255, 0.62);
  --glass-warm-border:         rgba(255, 255, 255, 0.70);

  --glass-dark-bg:             rgba(10, 25, 30, 0.58);
  --glass-dark-bg-strong:      rgba(10, 25, 30, 0.72);
  --glass-dark-border:         rgba(255, 255, 255, 0.14);
  --glass-dark-border-hover:   rgba(255, 255, 255, 0.24);

  --glass-blur-sm: 12px;
  --glass-blur-md: 18px;
  --glass-blur-lg: 24px;

  --glass-radius:    20px;
  --glass-radius-sm: 14px;

  --glass-shadow-sm: 0 12px 35px rgba(18, 24, 29, 0.06);
  --glass-shadow-md: 0 20px 50px -22px rgba(18, 24, 29, 0.16);
  --glass-shadow-lg: 0 34px 70px -28px rgba(6, 16, 20, 0.45);

  --glass-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.50);
  --glass-highlight-dark: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --glass-ease: 300ms cubic-bezier(.16, .84, .44, 1);
}

/* =====================  HERO BACKGROUND  ===================== */
/* Remove the home-hero.png photo and restore the sitewide default
   animated gradient hero (same one About/BPM/etc. use) — drifting
   teal / coral / green glows over a dark diagonal base. Higher
   specificity than `.page-home .hero-bg`/`.hero-wash` (which are
   photo-specific) so this wins outright. */
body.home-glass .hero-bg{
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 184, 214, .55), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(237, 97, 77, .45), transparent 45%),
    radial-gradient(circle at 70% 15%, rgba(66, 244, 129, .28), transparent 40%),
    linear-gradient(160deg, #0c1216 0%, #101a20 45%, #241611 100%);
  background-size: 160% 160%;
  background-position: 0% 0%;
  animation: drift 22s ease-in-out infinite alternate;
}
body.home-glass .hero-grain{ opacity: .35; }
/* the base default wash (a light bottom-heavy fade) instead of the
   photo-specific opaque left-to-right scrim — lets the glow blobs
   show through behind the copy */
body.home-glass .hero-wash{
  background: linear-gradient(0deg, rgba(12, 16, 17, .75) 0%, rgba(12, 16, 17, .15) 45%, rgba(30, 15, 10, .25) 100%);
}
@media (max-width: 900px){
  body.home-glass .hero-bg{ background-position: 0% 0%; }
  body.home-glass .hero-wash{
    background: linear-gradient(0deg, rgba(12, 16, 17, .75) 0%, rgba(12, 16, 17, .15) 45%, rgba(30, 15, 10, .25) 100%);
  }
}

/* L4 — hero ambient glass shapes: one large faint panel top-right, one
   soft green-tinted blur bottom-left. `.hero-content` is already z-index:2
   in the base stylesheet, so text stays crisp above these regardless. */
.home-glass .hero::before,
.home-glass .hero::after{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
}
.home-glass .hero::before{
  top: -10%; right: -8%;
  width: min(46%, 560px); aspect-ratio: 1.3;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08);
  transform: rotate(-6deg);
}
.home-glass .hero::after{
  bottom: -18%; left: 6%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 244, 129, .16), rgba(66, 244, 129, 0) 70%);
  filter: blur(40px);
}

/* =====================  NAV  ===================== */

/* scrolled nav bar — frost instead of near-opaque wash */
.home-glass header.site-nav.solid,
.home-glass header.site-nav.on-light{
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%);
}

/* Services dropdown — already a light frosted panel; push it glassier */
.home-glass .nav-dropdown-panel{
  background: rgba(252, 251, 249, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  box-shadow:
    0 30px 64px -26px rgba(18, 24, 29, 0.32),
    var(--glass-highlight);
}

/* Mobile drawer — base makes this deliberately opaque ink; frost it instead
   (same --ink colour, just translucent + blurred) so the menu is glass too */
@media (max-width: 900px){
  .home-glass .nav-links{
    background: rgba(18, 24, 29, 0.82);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}

/* =====================  HERO STAT / TRUST CARD  (L3 — strong glass) === */
/* straddles the dark hero and the paper below → dark-tint glass so the
   hero's drifting glow blobs blur through its upper half */
.home-glass .trust-row{
  position: relative;
  background: linear-gradient(180deg, var(--glass-dark-bg) 0%, var(--glass-dark-bg-strong) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%);
  border: 1px solid var(--glass-dark-border);
  box-shadow:
    0 44px 90px -34px rgba(0, 0, 0, 0.55),
    0 8px 24px -14px rgba(0, 0, 0, 0.45),
    var(--glass-highlight);
}
/* thin top highlight edge — the classic "light catching a glass rim" cue */
.home-glass .trust-row::before{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
}
.home-glass .trust-ic{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* =====================  SERVICE CARDS (L2 — subtle glass)  ============= */
/* Softer, rounder glass card: bigger radius, lighter frosted fill, a
   delicate hairline border and a diffused ambient glow instead of a hard
   drop shadow — everything *inside* the card (icon/heading/copy/arrow) is
   untouched. */
.home-glass .service-item{
  border-radius: 24px;
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(180%);
  /* the translucent white --glass-light-border reads as invisible on the
     paper background here, so these cards get a very mild solid gray
     hairline instead (same --gray-200 the non-glass cards already use) */
  border: 1px solid var(--gray-200);
  box-shadow:
    0 30px 60px -28px rgba(0, 184, 214, 0.18),
    0 12px 30px -18px rgba(18, 24, 29, 0.10),
    var(--glass-highlight);
  transition: transform var(--glass-ease), background var(--glass-ease),
              border-color var(--glass-ease), box-shadow var(--glass-ease);
}
.home-glass .service-item:hover{
  transform: translateY(-3px);
  background: var(--glass-light-bg-hover);
  border-color: rgba(0, 184, 214, 0.45);
  box-shadow:
    0 36px 72px -26px rgba(0, 184, 214, 0.26),
    0 14px 34px -18px rgba(18, 24, 29, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* tiny accent glow on the icon — restrained, not a neon effect */
.home-glass .service-item:hover .icon-plain{
  filter: drop-shadow(0 0 6px rgba(0, 184, 214, .35));
}
.home-glass .service-item .si-arrow{
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
}
/* Fix: this glass rule above ties in specificity with the base
   `.service-item:hover .si-arrow` fill, and — coming later in the
   cascade — was winning and leaving the arrow translucent while its
   icon still flipped to white (from the base hover rule), making it
   invisible on hover. Restore the original solid blue-dark hover fill
   explicitly, at higher specificity, so the arrow stays visible. */
.home-glass .service-item:hover .si-arrow{
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

/* =====================  TECHNOLOGY SECTION (L3 + L4, dark)  =========== */
/* Strongest environmental glass on the page: 2 large, very-low-opacity
   panels floating in the section behind everything (L4), and the banner
   itself as a darker glass panel (L3). Teal background is untouched. */
.home-glass #tech::before,
.home-glass #tech::after{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .07);
}
.home-glass #tech::before{
  top: -14%; left: -6%;
  width: min(46%, 560px); aspect-ratio: 1.5;
  transform: rotate(-8deg);
}
.home-glass #tech::after{
  bottom: -16%; right: 3%;
  width: min(30%, 360px); aspect-ratio: 1;
  transform: rotate(10deg);
}

.home-glass .tech-banner{
  padding: 40px 42px;
  border-radius: var(--glass-radius);
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(150%);
  border: 1px solid var(--glass-dark-border);
  box-shadow:
    0 30px 64px -30px rgba(0, 0, 0, 0.5),
    var(--glass-highlight-dark);
}
.home-glass .tech-pill{
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--glass-highlight-dark);
  transition: background var(--glass-ease);
}
.home-glass .tech-pill:hover{
  background: rgba(255, 255, 255, 0.13);
}
/* green accent line — appears on hover only, echoes the brand green
   already used for the eyebrow dot elsewhere on the page */
.home-glass .tech-pill::before{
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
  opacity: 0;
  transition: opacity var(--glass-ease);
}
.home-glass .tech-pill:hover::before{ opacity: 1; }

@media (max-width: 980px){
  .home-glass .tech-banner{ padding: 30px 24px; }
}

/* =====================  WHY VIBRANT / VALUES (warm)  ================== */
.home-glass .why{ position: relative; overflow: hidden; }
/* L4 — one soft layered glow, upper-right, well clear of the copy */
.home-glass .why::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -16%; right: -8%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 68%);
  filter: blur(50px);
}
.home-glass .why-inner{ position: relative; z-index: 1; }

.home-glass .why .pull-quote{
  padding: 28px 30px 30px 34px;   /* keeps the 3px green rule on the left */
  border-radius: 18px;
  background: var(--glass-warm-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(155%);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(155%);
  border: 1px solid var(--glass-warm-border);
  border-left: 3px solid var(--green);
  box-shadow:
    0 20px 44px -28px rgba(18, 24, 29, 0.18),
    var(--glass-highlight);
}
.home-glass .value-item{
  padding: 22px 22px;
  border-radius: 16px;
  background: var(--glass-warm-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
  border: 1px solid var(--glass-warm-border);
  box-shadow:
    0 16px 38px -26px rgba(18, 24, 29, 0.18),
    var(--glass-highlight);
  transition: transform var(--glass-ease), background var(--glass-ease), box-shadow var(--glass-ease);
}
.home-glass .value-item:hover{
  transform: translateY(-3px);
  background: var(--glass-warm-bg-hover);
  box-shadow:
    0 22px 46px -24px rgba(18, 24, 29, 0.22),
    var(--glass-highlight);
}
.home-glass .value-item .icon{
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition: box-shadow var(--glass-ease);
}
.home-glass .value-item:hover .icon{
  box-shadow: 0 0 0 4px rgba(0, 184, 214, .12);
}

/* =====================  TESTIMONIALS (paper)  ========================= */
.home-glass #testimonials{ position: relative; overflow: hidden; }
/* L4 — one oversized, near-invisible quotation mark bleeding in behind
   the spotlight card, in the brand green already used for the real
   quote mark on `.ts-quote` */
.home-glass #testimonials::before{
  content: "\201C";
  position: absolute; z-index: 0; pointer-events: none;
  top: -40px; right: 6%;
  font-family: var(--font-display); font-weight: 700;
  font-size: 260px; line-height: 1;
  color: rgba(66, 244, 129, 0.08);
}
.home-glass #testimonials .ts-layout{ position: relative; z-index: 1; }

.home-glass .testimonial-spotlight{
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(165%);
  border: 1px solid var(--glass-light-border);
  box-shadow:
    0 34px 66px -38px rgba(18, 24, 29, 0.24),
    var(--glass-highlight);
}
.home-glass .ts-arrow{
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--glass-ease);
}
.home-glass .ts-arrow:hover{
  background: rgba(255, 255, 255, 0.68);
}
/* frosted rim around the avatar — gradient fill (colour) untouched */
.home-glass .ts-avatar{
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 20px -10px rgba(18, 24, 29, 0.35);
}

/* =====================  CLOSING CTA BAND (dark)  ======================= */
/* the boxed panel was removed on request — the copy sits directly on the
   band (--ink + the existing green ::before glow). Glassmorphism here is
   deliberately restrained (per spec: "do not turn the entire CTA into
   glass") — two edge-less frosted-light blooms (L4) plus the two CTAs
   reading as proper glass pills. */
.home-glass .cta-band::after{
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 36%;
  width: min(70%, 640px); height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 72%);
  filter: blur(40px);
}
.home-glass .cta-band .wrap{ position: relative; }
.home-glass .cta-band .wrap::before{
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  bottom: -25%; left: -6%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%);
  filter: blur(30px);
}
.home-glass .cta-band h2,
.home-glass .cta-band p,
.home-glass .cta-band .actions{
  z-index: 1;
}

/* "Get a Quote" already carries the sitewide green-gradient glass pill
   (see BUTTONS below); "Contact Us" gets a proper visible frosted-glass
   fill here so the pair reads as a matched set on the dark band */
.home-glass .cta-band .btn.btn-ghost{
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.home-glass .cta-band .btn.btn-ghost:hover{
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
}

/* =====================  FOOTER (dark)  ================================= */
/* stays understated per spec — a glass divider + one very faint highlight
   behind the content, not a card */
.home-glass footer{
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 24, 29, 0.82) 0%, rgba(18, 24, 29, 0) 200px),
    radial-gradient(120% 160% at 15% 0%, rgba(18, 74, 88, 0.82) 0%, rgba(11, 59, 69, 0.82) 45%, rgba(8, 31, 38, 0.86) 100%);
  background-color: rgba(18, 24, 29, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.home-glass footer::before{   /* glass divider, replaces the flat border-top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32) 20%, rgba(255, 255, 255, .32) 80%, transparent);
}
.home-glass footer::after{   /* very subtle translucent highlight behind the content */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -8%; left: 8%;
  width: min(50%, 480px); height: 220px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 75%);
  filter: blur(40px);
}
.home-glass footer .wrap{ position: relative; z-index: 1; }

/* =====================  BUTTONS  ======================================= */
/* Primary CTA — same brand green, a diagonal gradient between the two
   greens already in the palette (--green / --green-dark) instead of a flat
   fill, with a soft glassy top highlight. No new colours. */
.home-glass .btn.btn-primary{
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 24px -12px rgba(66, 244, 129, 0.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease, color .3s ease;
}
.home-glass .btn.btn-primary:hover{
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 30px -10px rgba(66, 244, 129, 0.55);
}

/* Secondary CTA — a real (if faint) frosted-glass pill everywhere, not
   just border + blur; brightens a touch further on hover */
.home-glass .btn.btn-ghost{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.home-glass .btn.btn-ghost:hover{
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
}

/* =====================  RESPONSIVE — tame the ambient shapes  ========= */
/* Tablet: dial back the decorative L4 shapes so they don't compete with
   tighter layouts; keep every card/panel as-is. */
@media (max-width: 1024px){
  .home-glass .hero::before,
  .home-glass .hero::after,
  .home-glass #tech::before,
  .home-glass #tech::after,
  .home-glass .why::before,
  .home-glass #testimonials::before,
  .home-glass .cta-band .wrap::before,
  .home-glass footer::after{
    opacity: .6;
  }
}
/* Mobile: drop most ambient shapes entirely (performance + zero risk of
   overlapping text), keep one very faint accent on the technology
   section, and shrink blur radii on the remaining glass panels. */
@media (max-width: 640px){
  .home-glass .hero::before,
  .home-glass .hero::after,
  .home-glass #tech::after,
  .home-glass .why::before,
  .home-glass #testimonials::before,
  .home-glass .cta-band .wrap::before,
  .home-glass footer::after{
    display: none;
  }
  .home-glass #tech::before{ opacity: .3; }

  .home-glass .trust-row,
  .home-glass .service-item,
  .home-glass .tech-banner,
  .home-glass .why .pull-quote,
  .home-glass .value-item,
  .home-glass .testimonial-spotlight,
  .home-glass footer{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* =====================  NO-BACKDROP-FILTER FALLBACK  ================== */
/* Progressive enhancement: every glass panel gets a solid-enough fallback
   background so text stays readable where backdrop-filter isn't
   supported. Ambient L4 shapes need no fallback — they use `filter:blur`
   on the shape itself, which works independently of backdrop-filter. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .home-glass header.site-nav.solid,
  .home-glass header.site-nav.on-light{ background: rgba(251, 250, 248, 0.92); }
  .home-glass .nav-dropdown-panel{ background: rgba(252, 251, 249, 0.97); }
  @media (max-width: 900px){
    .home-glass .nav-links{ background: rgba(18, 24, 29, 0.96); }
  }
  .home-glass .trust-row{ background: linear-gradient(180deg, #18222a 0%, #0f171c 100%); }
  .home-glass .service-item{ background: rgba(255, 255, 255, 0.9); }
  .home-glass .service-item:hover{ background: #fff; }
  .home-glass .tech-banner{ background: rgba(255, 255, 255, 0.09); }
  .home-glass .tech-pill{ background: rgba(255, 255, 255, 0.1); }
  .home-glass .why .pull-quote{ background: rgba(255, 255, 255, 0.9); }
  .home-glass .value-item{ background: rgba(255, 255, 255, 0.86); }
  .home-glass .value-item .icon{ background: #fff; }
  .home-glass .testimonial-spotlight{ background: rgba(255, 255, 255, 0.92); }
  .home-glass .ts-arrow{ background: #fff; }
  .home-glass .cta-band::after{ display: none; }   /* the blur filter is the whole effect */
  .home-glass .cta-band .btn.btn-ghost{ background: rgba(255, 255, 255, 0.16); }
  .home-glass .btn.btn-ghost{ background: rgba(255, 255, 255, 0.14); }
  .home-glass footer{
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(18, 24, 29, 0) 200px),
      radial-gradient(120% 160% at 15% 0%, #124a58 0%, #0B3B45 45%, #081f26 100%);
    background-color: var(--ink);
  }
}