/* ==========================================================================
   GhazTech Design System — Layout
   Background-layer system, glassmorphism, section grids, container queries.
   ========================================================================== */

/* ---- Background Layer System (mandatory on every page) ----
   Layer 1: ambient light — fluid gradients blending vivid blue / cream / orange
   Layer 2: nature texture — procedural micro-grain overlay at 2%–4% opacity
   Both layers are fixed, sit behind all content, and are GPU-composited via
   transform only (parallax.js updates translate3d, never top/left). */

.bg-ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  background-image: radial-gradient(
      52% 42% at 14% 8%,
      rgba(255, 154, 61, 0.32) 0%,
      rgba(255, 154, 61, 0) 60%
    ),
    radial-gradient(
      60% 50% at 88% 12%,
      rgba(79, 127, 230, 0.36) 0%,
      rgba(79, 127, 230, 0) 65%
    ),
    radial-gradient(
      65% 55% at 78% 92%,
      rgba(255, 190, 122, 0.34) 0%,
      rgba(255, 190, 122, 0) 62%
    ),
    radial-gradient(
      50% 45% at 8% 88%,
      rgba(89, 137, 235, 0.32) 0%,
      rgba(89, 137, 235, 0) 60%
    ),
    linear-gradient(180deg, var(--color-cream-50) 0%, var(--color-cream-100) 100%);
  background-repeat: no-repeat;
  animation: ambientDrift 26s var(--ease-soft) infinite alternate;
  will-change: background-position;
}

@keyframes ambientDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0;
  }
  100% {
    background-position: 4% 6%, 96% 4%, 94% 94%, 4% 96%, 0 0;
  }
}

.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
}

.bg-texture {
  position: fixed;
  inset: -4% -4%;
  z-index: var(--z-texture);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0.035;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.bg-mist {
  position: fixed;
  inset: 0;
  z-index: var(--z-texture);
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: radial-gradient(
      ellipse 60% 30% at 30% 20%,
      #ffffff 0%,
      transparent 70%
    ),
    radial-gradient(ellipse 50% 25% at 75% 60%, #ffffff 0%, transparent 70%),
    radial-gradient(ellipse 55% 30% at 40% 90%, #ffffff 0%, transparent 70%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass-strong,
  #mainNav {
    background: var(--color-cream-50) !important;
  }
}

/* ---- Glassmorphism surface utilities ---- */
.glass {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}

.glass-strong {
  background: var(--surface-card-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(150%);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(150%);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}

/* ---- Section framing ---- */
.section {
  position: relative;
  padding-block: var(--space-3xl);
}

.section-dark {
  position: relative;
  background: linear-gradient(160deg, var(--color-blue-900) 0%, var(--brand-primary-strong) 100%);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #fff;
}
.section-dark p {
  color: var(--text-on-dark-sub);
}

.divider-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
  border: none;
  margin: 0;
}

/* ---- Page header (inner pages) ---- */
.page-header {
  padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-2xl);
  position: relative;
}

/* ---- Container query zone: feature/service cards adapt at the card level,
   not only the viewport, so they behave consistently inside narrower grid
   tracks (e.g. sidebars) as well as full-width grids. ---- */
.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

@container card-grid (max-width: 340px) {
  .feature-card {
    padding: var(--space-md);
  }
  .feature-card h3 {
    font-size: 1.15rem;
  }
}

/* ---- Dashboard mockup pane layout ---- */
.dashboard-mock {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transform-style: preserve-3d;
  transition: transform var(--duration-base) var(--ease-premium);
  will-change: transform;
}

.dashboard-mock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-sm);
}
.dashboard-mock__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-soft);
}

.dashboard-mock__grid {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-sm);
}

.dashboard-mock__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.4);
}
.dashboard-mock__sidebar span {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
}
.dashboard-mock__sidebar span.active {
  background: var(--brand-accent);
}

.dashboard-mock__main {
  display: grid;
  gap: var(--space-sm);
}

.dashboard-mock__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}
.dashboard-mock__kpi {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
}
.dashboard-mock__kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--brand-primary-strong);
}
.dashboard-mock__kpi small {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-mock__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 84px;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
}
.dashboard-mock__chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--brand-accent), var(--brand-accent-strong));
  transform-origin: bottom;
}

.dashboard-mock__donut {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(
    var(--brand-primary) 0% 62%,
    var(--brand-accent) 62% 88%,
    var(--border-soft) 88% 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-mock__donut span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-cream-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--brand-primary-strong);
}
.dashboard-mock__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
}

/* ---- Trust metrics strip ---- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.trust-strip__item {
  flex: 1 1 200px;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  border-right: 1px solid var(--border-soft);
}
.trust-strip__item:last-child {
  border-right: none;
}

@media (max-width: 991px) {
  .page-header {
    padding-block: calc(var(--nav-height-scrolled) + var(--space-lg)) var(--space-xl);
  }
  .dashboard-mock__grid {
    grid-template-columns: 1fr;
  }
  .dashboard-mock__sidebar {
    flex-direction: row;
    justify-content: space-between;
  }
  .dashboard-mock__sidebar span {
    flex: 1;
  }
}