/* =================================================================
   LIQUID-GLASS.CSS  —  authentic "Apple Liquid Glass" material (static)
   -----------------------------------------------------------------
   Additive layer, loaded AFTER style.css. No moving shine/shimmer.
   The glass look = heavy frost + bright specular rim + inner bevel
   (gives the glass real "thickness") + soft float shadow + a real
   SVG refraction layer (#lg-refract, injected by liquid-glass.js) that
   bends the background seen through the glass. The refraction sits on a
   ::after overlay so where `backdrop-filter: url()` is unsupported
   (Safari/Firefox) it simply degrades to clean frosted glass.
   Visual-only overrides; never sets a resting transform (keeps
   .nex-reveal intact). Remove this file + liquid-glass.js + tags to revert.
   ================================================================= */

:root {
  --lg-frost:  blur(16px) saturate(180%) brightness(1.06);
  /* specular rim-light (bright top edge) + inner bevel + float */
  --lg-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 -10px 22px -14px rgba(15, 26, 58, 0.22),
    0 14px 40px -16px rgba(15, 26, 58, 0.28);
  --lg-spiral-a: rgba(147, 197, 253, 0.55);
  --lg-spiral-b: rgba(30, 58, 138, 0.62);
}

/* refraction overlay shared by glass surfaces — bends the backdrop.
   Safe: if url() backdrop-filter is unsupported the rule is ignored. */
.process-step::after, .ins-card::after, .apart-ind-chip::after,
.related-card::after, .tile::after, .catalog-card::after,
.problem-card::after, .svc-offering::after, .why-box::after,
.hp-principle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: url('#lg-refract');
  backdrop-filter: url('#lg-refract');
}

/* =================================================================
   1. NAV / MENU — intentionally NOT glassed (kept original).
   ================================================================= */

/* =================================================================
   2. BUTTONS — glassy, with specular rim + bevel (no sweep)
   ================================================================= */
.btn {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px -12px rgba(8, 22, 80, 0.55),
    0 10px 26px -12px rgba(18, 68, 238, 0.45) !important;
}
.btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -10px 18px -12px rgba(8, 22, 80, 0.5),
    0 16px 38px -12px rgba(18, 68, 238, 0.55) !important;
}
.btn-ghost {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(244,247,251,0.26)) !important;
  -webkit-backdrop-filter: var(--lg-frost) !important;
  backdrop-filter: var(--lg-frost) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--lg-shadow) !important;
}

/* =================================================================
   3. GLASS CARDS / CHIPS  (light surfaces) — static liquid glass
   ================================================================= */
.process-step, .ins-card, .apart-ind-chip,
.related-card, .tile, .catalog-card, .problem-card, .svc-offering, .why-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.52), rgba(244,247,251,0.30)) !important;
  -webkit-backdrop-filter: var(--lg-frost) !important;
  backdrop-filter: var(--lg-frost) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--lg-shadow) !important;
}
.process-step:hover, .process-step.is-tapped,
.ins-card:hover, .apart-ind-chip:hover,
.related-card:hover, .tile:hover, .catalog-card:hover,
.problem-card:hover, .svc-offering:hover, .why-box:hover {
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 -10px 22px -14px rgba(30, 58, 138, 0.20),
    0 22px 54px -18px rgba(30, 58, 138, 0.38) !important;
}
.process-step > *, .ins-card > *, .apart-ind-chip > *,
.related-card > *, .tile > *, .catalog-card > *,
.problem-card > *, .svc-offering > *, .why-box > * { position: relative; z-index: 1; }
/* preserve the accent edges these two carry */
.svc-offering { border-top: 3px solid var(--accent) !important; }
.why-box { border-left: 3px solid var(--accent) !important; }

/* glassy chip icon */
.apart-ind-chip .chip-ico {
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* 3b. DARK glass — principle cards on the navy section (white text) */
.hp-principle {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-left: 3px solid var(--accent-2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -10px 22px -14px rgba(0,0,0,0.35),
    0 16px 40px -18px rgba(0,0,0,0.5) !important;
}
.hp-principle:hover { border-color: rgba(255,255,255,0.30) !important; border-left-color: var(--accent-3) !important; }
.hp-principle > * { position: relative; z-index: 1; }

/* =================================================================
   4. FROST-IN  — glass sharpens as it scrolls in (filter axis only,
   so it composes with .nex-reveal). Class added by JS → no-JS = no blur.
   ================================================================= */
.lg-frost { filter: blur(7px); transition: filter 0.6s ease; }

/* =================================================================
   5. ABSTRACT GLASS SPIRAL  (home hero, decorative, CSS-3D)
   ================================================================= */
.lg-spiral {
  position: absolute;
  top: 50%; left: -90px; right: auto;
  width: 420px; height: 620px;
  transform: translateY(calc(-50% + var(--lg-parallax, 0px)));
  perspective: 1200px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 30px 60px rgba(10, 18, 48, 0.55));
}
.lg-spiral__stack {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: lgSpin 26s linear infinite;
}
.lg-disc {
  position: absolute;
  left: 50%; top: 50%;
  width: 240px; height: 66px;
  margin: -33px 0 0 -120px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--lg-spiral-a), var(--lg-spiral-b));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 3px 8px rgba(255,255,255,0.55), inset 0 -6px 14px rgba(8,18,52,0.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transform:
    rotateY(calc(var(--i) * 30deg))
    translateY(calc(var(--i) * 30px - 195px))
    translateZ(58px)
    rotateX(74deg);
}
@keyframes lgSpin { to { transform: rotateY(360deg); } }
@media (max-width: 980px) { .lg-spiral { display: none; } }

/* =================================================================
   6. Safety — reduced motion + no-backdrop-filter fallbacks
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .lg-spiral__stack { animation: none; }
  .lg-frost { filter: none; transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-ghost { background: var(--bg-tint) !important; }
  .process-step, .ins-card, .apart-ind-chip,
  .related-card, .tile, .catalog-card, .problem-card, .svc-offering, .why-box { background: rgba(255,255,255,0.94) !important; }
  .hp-principle { background: rgba(255,255,255,0.08) !important; }
}