/* ==========================================================================
   Direction 02 — Glass & Gradient
   Bright near-white canvas, animated mesh-gradient hero, frosted glass cards,
   generous radii and soft layered shadows. Modern-product energy.
   ========================================================================== */
:root {
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-900: #14224d;
  --accent: #22d3ee;
  --accent-2: #a78bfa;

  --bg: #fbfcff;
  --surface: #f2f6fe;
  --surface-2: #e8effd;
  --border: #dfe7f7;

  --text: #10192f;
  --text-dim: #5d6b85;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;

  --shadow-sm: 0 2px 8px rgba(37, 99, 235, .07);
  --shadow: 0 14px 40px rgba(37, 99, 235, .12);
  --shadow-lg: 0 34px 80px rgba(37, 99, 235, .2);

  --font-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.3rem, 1.2rem + 4.2vw, 4.3rem);
  --lh-display: 1.08;
  --tracking-display: -0.03em;

  --section-py: clamp(4rem, 2.5rem + 6vw, 8rem);
}

/* --- animated mesh gradient hero --------------------------------------- */
.hero {
  background: var(--bg);
  isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem);
}
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); opacity: .55;
}
.hero::before {
  width: 46rem; height: 34rem; top: -14rem; right: -10rem;
  background: radial-gradient(circle, #22d3ee 0%, #2563eb 45%, transparent 70%);
  animation: drift 22s var(--ease) infinite alternate;
}
.hero::after {
  width: 34rem; height: 30rem; bottom: -14rem; left: -8rem;
  background: radial-gradient(circle, #a78bfa 0%, #2563eb 50%, transparent 72%);
  animation: drift 28s var(--ease) infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4rem, 3rem, 0) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

.hero h1 {
  background: linear-gradient(100deg, #10192f 25%, #2563eb 62%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-media .ph {
  border-radius: var(--radius-lg);
  border-style: solid;
  background-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

/* --- frosted glass surfaces -------------------------------------------- */
.site-header {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(20px) saturate(160%);
}
.site-header.is-stuck { background: rgba(255, 255, 255, .86); }

.card, .tile, .quote, .p-card, .project, .filters, .cfg-spec, .cfg-stage {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
}
.card::before { height: 100%; opacity: .07; background: linear-gradient(140deg, var(--brand), var(--accent)); transform: scale(1); transition: opacity .4s var(--ease); }
.card:hover::before { opacity: .16; }
.card-icon {
  border-radius: 14px;
  background: linear-gradient(140deg, var(--brand), var(--accent));
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .3);
}
.eyebrow { color: var(--brand); }

.tile { text-align: center; }
.tile .card-icon { margin-inline: auto; }

.btn { border-radius: 999px; }
.btn--primary {
  background: linear-gradient(120deg, var(--brand), var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .3);
}
.btn--primary:hover { background: linear-gradient(120deg, var(--brand-600), var(--accent)); }
.btn--accent { --btn-fg: #0b2b3d; }
.chip, .icon-btn, .select { border-radius: 999px; }

.section--tint { background: linear-gradient(180deg, rgba(232, 239, 253, .8), rgba(251, 252, 255, 0)); }
.section--brand { background: linear-gradient(140deg, #14224d, #1e40af 55%, #0e7490); }
.teaser { background: linear-gradient(130deg, #1e40af, #2563eb 45%, #22d3ee); }
.cta-band { background: linear-gradient(110deg, #2563eb, #22d3ee 60%, #a78bfa); color: #fff; }
.cta-band .btn { --btn-bg: #fff; --btn-fg: #1e40af; --btn-bd: #fff; }
.site-footer { background: #14224d; }

.p-media { background: linear-gradient(150deg, rgba(37, 99, 235, .1), rgba(34, 211, 238, .12)); }
.p-badge--stock { background: rgba(16, 185, 129, .16); color: #046c4e; }
.stage-viz {
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 211, 238, .22), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(167, 139, 250, .22), transparent 60%),
    rgba(255, 255, 255, .6);
}
.opt[aria-pressed="true"] { background: linear-gradient(140deg, rgba(37, 99, 235, .1), rgba(34, 211, 238, .12)); }
.cfg-tabs { background: rgba(255, 255, 255, .6); border-radius: 999px; }
.cfg-tab { border-radius: 999px; }
.progress > i { background: linear-gradient(90deg, var(--brand), var(--accent), var(--accent-2)); }