/* ============================================================
   glass.css — Remidiy "liquid glass" theme
   Loaded LAST so it overrides. A cycling greenery photo sits at
   the very back; a frosted-glass layer (heavy backdrop blur +
   dark tint + top sheen) frosts it; page surfaces become
   translucent panels that layer over the frost.
   Self-contained + additive so it's easy to roll back (remove
   this <link>, the two .bg-* divs, and the picker in js/ui.js).
   ============================================================ */

/* ----- Reveal the photo: drop the opaque base layer ----- */
html { background: transparent; }
body::before { display: none; }          /* was the flat dark ambient bg */

/* ----- Back layer: the cycling greenery photo ----- */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: -3;
  /* No hard-coded photo: js/ui.js sets a random one discovered from img/bg/.
     This dark-green gradient only shows if the directory listing is
     unavailable (e.g. autoindex off, or opened from file://). */
  background-color: #11150f;
  background-image: linear-gradient(160deg, #1a241a 0%, #0e120e 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* slight overscan gives the parallax room to drift without exposing edges */
  transform: scale(1.08);
  will-change: transform;
  animation: bg-in 1.1s var(--ease) both;
}
@keyframes bg-in { from { opacity: 0; } to { opacity: 1; } }

/* ----- Liquid glass: frost + darken the photo behind everything ----- */
.bg-glass {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(32px) saturate(1.45) brightness(.80);
          backdrop-filter: blur(32px) saturate(1.45) brightness(.80);
  background:
    radial-gradient(130% 90% at 50% -15%, rgba(255, 255, 255, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(13, 16, 13, 0.46), rgba(11, 13, 11, 0.66));
}
@media (prefers-reduced-motion: reduce) { .bg-photo { animation: none; } }

/* ----- Surfaces become translucent glass panels over the frost ----- */
/* (the SVG hammer/board/circles keep their opaque --bg fills — untouched) */
.nav {
  background: rgba(18, 21, 18, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
          backdrop-filter: blur(22px) saturate(1.3);
}

.hero-card {
  background: rgba(22, 25, 22, 0.46);
  border-color: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 70px -40px rgba(0, 0, 0, 0.85);
}
.dict-header {
  background: linear-gradient(180deg, rgba(42, 46, 42, 0.5), rgba(24, 27, 24, 0.32));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.service-card,
.card,
.steps,
.promise-grid,
.form,
.contact-row {
  background: rgba(22, 25, 22, 0.5);
  border-color: rgba(255, 255, 255, 0.09);
}
.service-card:hover,
.card:hover,
.contact-row:hover { background: rgba(34, 38, 34, 0.6); }

/* divider-grid containers keep visible seams */
.why-list { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.09); }
.why-item { background: rgba(22, 25, 22, 0.5); }
.why-item:hover { background: rgba(34, 38, 34, 0.6); }

/* small tiles / chips */
.icon-tile,
.why-icon,
.contact-row .ic,
.btn-mute {
  background: rgba(50, 55, 50, 0.5);
  border-color: rgba(255, 255, 255, 0.10);
}

/* form fields */
.form input,
.form select,
.form textarea {
  background: rgba(16, 18, 16, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
}
.form input:focus,
.form select:focus,
.form textarea:focus { background: rgba(16, 18, 16, 0.7); }

/* footer + manifesto bands */
.footer { background: rgba(16, 18, 16, 0.6); }
.manifesto {
  background:
    radial-gradient(ellipse 900px 380px at 50% 50%, rgba(141, 181, 128, 0.10), transparent 70%),
    rgba(18, 21, 18, 0.5);
}

/* ghost button reads better over imagery */
.btn-ghost { background: rgba(20, 22, 20, 0.35); }

/* ----- Top-nav links: draw-on accent underline (reuses the site's link motif) ----- */
.nav-links a {
  position: relative;
  background: transparent;              /* drop the flat bg-swap from the base theme */
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;             /* sit under the text, inside the link padding */
  bottom: 5px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text-0);
  background: transparent;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* ============================================================
   Unified card glass-lift — shared by the pricing cards, the
   Audit/Build/Manage steps, the service cards, and the "why us"
   rows so every card hovers the same way.
   Tuned for a smooth, quick feel: only background + box-shadow
   transition (both cheap to animate); the backdrop tint snaps on
   rather than animating, so there's no per-frame blur recompute —
   that was what made the original feel laggy. All effects are
   inset, so cards clipped by a grid's overflow stay clean.
   ============================================================ */
.promise-card,
.step,
.service-card,
.why-item {
  transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.promise-card:hover,
.step:hover,
.service-card:hover,
.why-item:hover {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: saturate(1.5) brightness(1.14);   /* no blur → cheap, snaps on */
          backdrop-filter: saturate(1.5) brightness(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),             /* top sheen */
    inset 0 0 0 1px rgba(141, 181, 128, 0.22),           /* accent ring */
    inset 0 -55px 70px -50px rgba(141, 181, 128, 0.16);  /* accent glow rising from base */
}
/* Service cards previously jumped (translate + drop-shadow) and had a cursor
   spotlight; drop both so they behave exactly like the other cards. */
.service-card:hover { transform: none; }
.service-card::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
  .promise-card,
  .step,
  .service-card,
  .why-item { transition: background 0.16s var(--ease); }
}