/* ==========================================================================
   B-Digital Mark homepage -- "glass" restyle (default homepage on this branch).
   Active only when the page is requested with ?glass=1, which adds
   body.bdm-glass and loads this file. Every rule is scoped under
   body.bdm-glass, so the default homepage is byte-for-byte unchanged.

   Idea: share the blog's living smoke backdrop and glass system.
   Markup, copy and section structure are untouched; only presentation.
   ========================================================================== */

body.bdm-glass {
  --g-glass: rgba(12, 19, 42, 0.52);
  --g-glass-strong: rgba(8, 13, 30, 0.74);
  --g-line: rgba(200, 220, 255, 0.16);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --g-shadow: 0 1px 2px rgba(2, 5, 14, 0.35), 0 12px 30px -12px rgba(2, 5, 14, 0.5), 0 32px 80px -32px rgba(2, 5, 14, 0.55);
  --g-blur: blur(16px) saturate(140%);
  --g-scrim: rgba(6, 10, 24, 0.36);
  --g-radius: 24px;
  background: transparent !important;
}

/* ---- Backdrop (canvas + grain are injected by homepage-glass.js) ---- */
.bdm-glass-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 90% at 20% 10%, #14306e 0%, #0a0f1f 55%, #050810 100%);
}
.bdm-glass-grain {
  position: fixed;
  inset: -50%;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Retire the old atmosphere: HUD lines, grids, scan, old smoke, stars ---- */
body.bdm-glass #bdm-starfield,
body.bdm-glass #bdm-ink-field,
body.bdm-glass #particle-canvas,
body.bdm-glass #ambient-glow,
body.bdm-glass #hero > .hero-grid,
body.bdm-glass #hero > .hero-glow,
body.bdm-glass #hero > .hero-glow2,
body.bdm-glass #hero > .hero-scan,
body.bdm-glass #hero > .corner,
body.bdm-glass #hero .hero-line,
body.bdm-glass #hero .hero-line-v,
body.bdm-glass #hero .orb,
body.bdm-glass .bdm-hero-glass-veil,
body.bdm-glass .cta-grid,
body.bdm-glass .cta-glow,
body.bdm-glass .grow-strip-bg,
body.bdm-glass .depth-strip,
body.bdm-glass .platforms-section::before,
body.bdm-glass .expertise-section::before,
body.bdm-glass #grow-strip::before,
body.bdm-glass #grow-strip::after { display: none !important; }

/* ---- Sections: transparent over the smoke with one even scrim for reading ---- */
body.bdm-glass main,
body.bdm-glass .wp-site-blocks,
body.bdm-glass #hero { background: transparent !important; }

body.bdm-glass #grow-strip,
body.bdm-glass #expertise,
body.bdm-glass #platforms,
body.bdm-glass .grow-strip,
body.bdm-glass .expertise-section,
body.bdm-glass .platforms-section,
body.bdm-glass #results,
body.bdm-glass #availability,
body.bdm-glass #why,
body.bdm-glass #process,
body.bdm-glass #more,
body.bdm-glass #cta { background: var(--g-scrim) !important; background-image: none !important; }

/* Compound keeps its own markup and motion; only its solid base lets the smoke through. */
body.bdm-glass .bdmc-section {
  background:
    radial-gradient(circle at 50% 56%, rgba(46, 139, 255, 0.07), transparent 32%),
    radial-gradient(circle at 48% 48%, rgba(255, 140, 0, 0.085), transparent 36%),
    var(--g-scrim) !important;
}

/* ---- Floating glass navigation ---- */
body.bdm-glass nav {
  left: clamp(0.75rem, 2vw, 1.5rem) !important;
  right: clamp(0.75rem, 2vw, 1.5rem) !important;
  top: 0.85rem;
  padding: 0.7rem 0.8rem 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 20px;
}
body.admin-bar.bdm-glass nav { top: 46px; }
body.bdm-glass nav.stuck {
  padding: 0.55rem 0.8rem 0.55rem 1.2rem;
  background: var(--g-glass-strong);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-hi), var(--g-shadow);
}
body.bdm-glass .nav-links { gap: 0.2rem; }
body.bdm-glass .nav-links a:not(.nav-cta) {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 1rem;
  border-radius: 999px;
  transition: color 0.25s ease, background-color 0.25s ease;
}
body.bdm-glass .nav-links a:not(.nav-cta):hover { color: var(--white); background: rgba(255, 255, 255, 0.07); }
body.bdm-glass .nav-links a.is-active:not(.nav-cta) {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ---- Buttons: soft-rounded, lit orange primary, glass ghost ---- */
body.bdm-glass .btn-primary,
body.bdm-glass .nav-cta {
  border-radius: 14px;
  clip-path: none;
  background: linear-gradient(180deg, #ffa21f, var(--amber));
  color: #080808;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px -10px rgba(255, 140, 0, 0.7);
}
body.bdm-glass .nav-cta { margin-left: 0.6rem; border-radius: 12px; }
body.bdm-glass .btn-primary:hover,
body.bdm-glass .nav-cta:hover {
  background: linear-gradient(180deg, #ffb13d, var(--amber2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 34px -10px rgba(255, 140, 0, 0.85);
}
body.bdm-glass .btn-ghost {
  border-radius: 14px;
  clip-path: none;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--g-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--g-hi);
}
body.bdm-glass .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }

/* ---- Hero: type sits on the smoke; supporting bits become glass ---- */
body.bdm-glass .hero-desc { text-shadow: 0 2px 18px rgba(5, 8, 16, 0.7); }
body.bdm-glass .hero-status,
body.bdm-glass .hero-pill {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-glass);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi);
}
body.bdm-glass .hero-metrics {
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  background: linear-gradient(160deg, rgba(20, 30, 62, 0.62), rgba(8, 13, 30, 0.7));
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi), var(--g-shadow);
}
body.bdm-glass .hero-metrics::before,
body.bdm-glass .hero-metrics::after { display: none; }

/* ---- Glass panels: cards, tiles, terminals, steps ---- */
body.bdm-glass .proof-card,
body.bdm-glass .bdm-availability-card,
body.bdm-glass .term-window,
body.bdm-glass .platform-pill,
body.bdm-glass .why-pt,
body.bdm-glass .more-item,
body.bdm-glass .process-step,
body.bdm-glass .stat-box {
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  background: linear-gradient(160deg, rgba(20, 30, 62, 0.6), rgba(8, 13, 30, 0.7));
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi), var(--g-shadow);
  transition: border-color 0.4s ease, box-shadow 0.5s ease, background-color 0.3s ease;
}
body.bdm-glass .platform-pill { border-radius: 999px; }
body.bdm-glass .proof-card:hover,
body.bdm-glass .bdm-availability-card:hover,
body.bdm-glass .more-item:hover,
body.bdm-glass .process-step:hover,
body.bdm-glass .stat-box:hover {
  border-color: rgba(255, 170, 70, 0.5);
  background: linear-gradient(160deg, rgba(26, 38, 76, 0.7), rgba(10, 16, 36, 0.76));
}

/* Containers that drew 1px dividers with a coloured background: switch to gaps. */
body.bdm-glass .stats-row,
body.bdm-glass .more-grid,
body.bdm-glass .process-track {
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  background: transparent;
  border: 0;
}

/* ---- Headings read on the smoke ---- */
body.bdm-glass .s-title,
body.bdm-glass .grow-strip-headline,
body.bdm-glass .cta-title { text-shadow: 0 2px 30px rgba(5, 8, 16, 0.6); }

/* ---- Closing CTA: a glass-gradient panel like the blog's ---- */
body.bdm-glass #cta { padding-block: clamp(3rem, 7vw, 6rem); }
body.bdm-glass .cta-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1100px;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(190, 215, 255, 0.28);
  border-radius: 32px;
  background: linear-gradient(115deg, #132766 0%, #1c3c97 50%, #2a68d6 100%);
  box-shadow: var(--g-hi), 0 40px 100px -30px rgba(20, 60, 160, 0.7), var(--g-shadow);
}
body.bdm-glass .cta-inner::before,
body.bdm-glass .cta-inner::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(56px);
}
/* Small warm glow that follows the pointer over the panel (see homepage-glass.js). */
body.bdm-glass .cta-inner::before {
  left: 16%;
  top: 95%;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  filter: blur(38px);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
  opacity: 0.8;
  background: radial-gradient(circle, rgba(255, 150, 20, 0.9), rgba(255, 90, 0, 0.35) 55%, transparent 74%);
}
body.bdm-glass .cta-inner::after {
  right: -8%;
  top: -60%;
  width: 40%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(88, 201, 255, 0.7), transparent 70%);
}
body.bdm-glass .cta-sub { color: rgba(240, 237, 232, 0.9); }
body.bdm-glass .cta-inner .btn-ghost { background: rgba(5, 8, 16, 0.26); border-color: rgba(240, 237, 232, 0.45); }

/* ---- Footer ---- */
body.bdm-glass footer {
  background: linear-gradient(180deg, rgba(13, 20, 38, 0.6), var(--bdm-bg-deep));
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-line);
}

@media (max-width: 900px) {
  body.bdm-glass nav { padding: 0.5rem 0.7rem 0.5rem 0.9rem; }
}

/* ==========================================================================
   Compound and expertise wheel: visual properties only.
   No transform, opacity, size, position, will-change or contain is touched, so
   the pinned scroll narrative and the wheel geometry/behaviour are unchanged.
   ========================================================================== */

/* Compound: drop the perspective line grid; cards stay near-opaque because they overlap mid-scroll. */
body.bdm-glass .bdmc-grid-bg { display: none; }
body.bdm-glass .bdmc-card {
  border-radius: 22px;
  border-color: var(--g-line);
  background:
    radial-gradient(circle at var(--bdm-spot-x) var(--bdm-spot-y), color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 48%),
    linear-gradient(148deg, rgba(255, 255, 255, 0.09), rgba(15, 24, 52, 0.9) 40%, rgba(8, 13, 30, 0.97) 78%);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}

/* Wheel: drop the spoke texture; chamber, centre and nodes share the glass look. */
body.bdm-glass .wheel-ring::before { display: none; }
body.bdm-glass .wheel-ring::after { border-color: var(--g-line); }
body.bdm-glass .wheel-center {
  background: radial-gradient(circle, rgba(12, 19, 42, 0.86) 0%, rgba(12, 19, 42, 0.6) 62%, rgba(9, 13, 26, 0.2) 86%, transparent 100%);
  border-color: rgba(255, 170, 70, 0.28);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
body.bdm-glass .wi {
  border-radius: 20px;
  border-color: var(--g-line);
  background: linear-gradient(160deg, rgba(24, 36, 74, 0.7), rgba(10, 16, 36, 0.78));
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
body.bdm-glass .wi:hover,
body.bdm-glass .wi.active {
  border-color: var(--amber);
  background: linear-gradient(160deg, rgba(30, 44, 88, 0.82), rgba(12, 19, 42, 0.88));
}

/* ==========================================================================
   Round 2 (preview): Services wheel, Compound type, Why section.
   Still visual-only: no transform/opacity/geometry of animated or pinned
   elements is changed. Layout changes apply to the Services section and the
   Why terminals only, and only on wide screens.
   ========================================================================== */

/* ---- Services: heading and CTA on the left, wheel on the right ---- */
@media (min-width: 1100px) {
  body.bdm-glass .expertise-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 640px;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    max-width: 1360px;
  }
  body.bdm-glass .expertise-inner > .s-label { grid-column: 1; margin-top: clamp(2rem, 9vh, 6rem); }
  body.bdm-glass .expertise-inner > .expertise-title,
  body.bdm-glass .expertise-inner > .expertise-intro { grid-column: 1; }
  body.bdm-glass .expertise-inner > .expertise-intro { font-size: 1.05rem; color: var(--bdm-muted); max-width: 30rem; }
  body.bdm-glass .expertise-inner > .wheel-container { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  body.bdm-glass .expertise-inner > .expertise-cta { grid-column: 1; grid-row: 4; justify-content: flex-start; margin-top: 0.5rem; }
}

/* Wheel: readable labels, richer glass nodes, a luminous chamber and centre. */
body.bdm-glass .wi {
  border-color: rgba(190, 215, 255, 0.24);
  background: linear-gradient(160deg, rgba(34, 50, 98, 0.78), rgba(12, 19, 44, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 30px -12px rgba(2, 5, 14, 0.7);
}
body.bdm-glass .wi svg { width: 26px; height: 26px; color: rgba(240, 237, 232, 0.88); }
body.bdm-glass .wi span { font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(240, 237, 232, 0.8); }
body.bdm-glass .wi:hover svg,
body.bdm-glass .wi.active svg,
body.bdm-glass .wi:hover span,
body.bdm-glass .wi.active span { color: var(--amber); }
body.bdm-glass .wheel-ring::after {
  border-color: rgba(190, 215, 255, 0.16);
  background:
    radial-gradient(circle at 28% 30%, rgba(88, 201, 255, 0.1), transparent 55%),
    radial-gradient(circle at 74% 68%, rgba(255, 140, 0, 0.1), transparent 58%),
    radial-gradient(circle, rgba(16, 26, 56, 0.74) 0%, rgba(10, 16, 36, 0.5) 62%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    -30px 8px 90px -30px rgba(88, 201, 255, 0.3),
    30px -8px 90px -30px rgba(255, 140, 0, 0.32),
    0 50px 110px -30px rgba(0, 0, 0, 0.55);
}
body.bdm-glass .wheel-center {
  border-color: rgba(255, 180, 90, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -22px 46px rgba(46, 139, 255, 0.14),
    0 0 80px rgba(255, 140, 0, 0.2),
    0 18px 46px -14px rgba(0, 0, 0, 0.5);
}
body.bdm-glass .wheel-center-title {
  background: linear-gradient(180deg, #ffd08a, var(--amber) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
body.bdm-glass .wheel-center-desc { color: rgba(240, 237, 232, 0.8); font-size: 0.78rem; }

/* ---- Compound: larger, clearer card type and stage labels ---- */
body.bdm-glass .bdmc-card-title { font-size: clamp(34px, 3.2vw, 42px); }
body.bdm-glass .bdmc-card-copy { font-size: 14px; color: rgba(240, 237, 232, 0.82); }
body.bdm-glass .bdmc-card-tag { font-size: 11px; color: rgba(240, 237, 232, 0.62); }
body.bdm-glass .bdmc-card-index { font-size: 12px; border-radius: 999px; padding: 3px 10px; }
body.bdm-glass .bdmc-label { font-size: 11px; color: rgba(240, 237, 232, 0.62); }
body.bdm-glass .bdmc-heading { text-shadow: 0 2px 34px rgba(5, 8, 16, 0.65); }
body.bdm-glass .bdmc-intro { color: rgba(240, 237, 232, 0.82); }

/* ---- Why: modern terminal windows and numbered glass cards ---- */
body.bdm-glass .term-window {
  border-radius: 20px;
  border-color: rgba(190, 215, 255, 0.2);
  background: linear-gradient(160deg, rgba(26, 38, 78, 0.8), rgba(9, 14, 32, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px -24px rgba(2, 5, 14, 0.8);
}
body.bdm-glass .term-bar {
  padding: 0.7rem 1.1rem;
  border-bottom-color: rgba(190, 215, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
body.bdm-glass .term-dot { width: 9px; height: 9px; }
body.bdm-glass .term-body { padding: 1.15rem 1.4rem 1.3rem; }
body.bdm-glass .term-line { font-size: 0.82rem; line-height: 2.05; color: rgba(240, 237, 232, 0.7); }
body.bdm-glass .why-visual { height: 760px; }
body.bdm-glass .tw1 { width: 380px; top: 0; left: 0; }
body.bdm-glass .tw2 { width: 340px; top: 205px; left: 90px; }
body.bdm-glass .tw3 { width: 360px; top: 400px; left: 30px; }
body.bdm-glass .tw4 { width: 310px; top: 595px; left: 120px; }

body.bdm-glass .why-pts { gap: 0.9rem; }
body.bdm-glass .why-pt {
  padding: 1.5rem 1.75rem;
  gap: 1.5rem;
  align-items: center;
}
body.bdm-glass .why-pt-num {
  min-width: 56px;
  font-size: 2.8rem;
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(255, 170, 70, 0.85);
  opacity: 0.9;
  transition: color 0.3s ease, opacity 0.3s ease;
}
body.bdm-glass .why-pt:hover .why-pt-num { color: var(--amber); opacity: 1; text-shadow: none; }
body.bdm-glass .why-pt-title { font-size: 1.65rem; }
body.bdm-glass .why-pt-body { font-size: 0.95rem; color: rgba(240, 237, 232, 0.74); }

/* Small screens: the wheel nodes shrink, so keep their labels at the original small size. */
@media (max-width: 900px) {
  body.bdm-glass .wi span { font-size: 0.46rem; letter-spacing: 0.1em; }
  body.bdm-glass .wi svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   Round 3 (preview): slogan depth, hero controls, wheel smoke, static
   Compound presentation, pointer-following CTA glow.
   ========================================================================== */

/* ---- Hero slogan: real depth, and no clipped-shadow rectangles ----
   The headline lines are overflow:hidden reveal masks. Any blurred shadow was
   cut off at the mask edge, which showed up as faint boxes while the smoke
   changed behind. Masks are opened up and depth is built from hard extrusion
   steps (nothing blurred is clipped), plus one soft contact shadow. */
body.bdm-glass .hero-title,
body.bdm-glass .hero-title .line { overflow: visible; }
body.bdm-glass .hero-title .line { padding-bottom: 0.12em; }
/* Flat 2D slogan in Fraunces (option 7 in /blog-lab/slogan-fonts.html), loaded for the preview only. */
body.bdm-glass .hero-title .line {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: none;
}
body.bdm-glass .hero-title { font-size: clamp(2.9rem, min(7vw, 9vh), 5.4rem); }
body.bdm-glass .hero-title em { text-shadow: 0 0 34px rgba(255, 140, 0, 0.32); }
@keyframes amberShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

/* Status pill and chips */
body.bdm-glass .hero-status {
  gap: 0.8rem;
  margin-bottom: 1.75rem;
  padding: 0.72rem 1.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #ffb347;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.18), rgba(46, 139, 255, 0.14));
  border-color: rgba(255, 170, 70, 0.38);
  box-shadow: var(--g-hi), 0 12px 34px -14px rgba(255, 140, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
body.bdm-glass .hero-status-dot { width: 9px; height: 9px; flex: 0 0 auto; }
body.bdm-glass .hero-pill {
  padding: 0.55rem 1.05rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(240, 237, 232, 0.92);
}

/* Buttons: taller, a lit bevel, a sheen that sweeps on hover */
body.bdm-glass .btn-primary,
body.bdm-glass .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0 2.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
body.bdm-glass .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffb23d 0%, #ff8c00 55%, #f27a00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(150, 60, 0, 0.4),
    0 2px 0 #c25f00,
    0 16px 32px -10px rgba(255, 140, 0, 0.8);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
body.bdm-glass .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
body.bdm-glass .btn-primary:hover {
  background: linear-gradient(180deg, #ffc15c 0%, #ff9a1a 55%, #ff8300 100%);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(150, 60, 0, 0.4),
    0 5px 0 #c25f00,
    0 24px 40px -10px rgba(255, 140, 0, 0.9);
}
body.bdm-glass .btn-primary:hover::after { transform: translateX(120%); }
body.bdm-glass .btn-primary:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(120, 50, 0, 0.5), 0 8px 18px -8px rgba(255, 140, 0, 0.7); }
body.bdm-glass .btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border-color: rgba(220, 235, 255, 0.28);
  box-shadow: var(--g-hi), 0 2px 0 rgba(2, 5, 14, 0.5), 0 14px 28px -12px rgba(2, 5, 14, 0.7);
  text-shadow: 0 2px 8px rgba(2, 5, 14, 0.5);
}
body.bdm-glass .btn-ghost:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }

/* ---- Services wheel: smoke rising out of the ring into the page ---- */
body.bdm-glass .wheel-ring { isolation: isolate; }
body.bdm-glass .wheel-ring::before {
  display: block;
  inset: -36%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(34% 30% at 76% 20%, rgba(255, 150, 30, 0.6), transparent 70%),
    radial-gradient(30% 34% at 16% 68%, rgba(70, 150, 255, 0.55), transparent 70%),
    radial-gradient(26% 24% at 62% 92%, rgba(255, 110, 10, 0.45), transparent 70%),
    radial-gradient(24% 26% at 28% 8%, rgba(120, 200, 255, 0.4), transparent 70%);
  filter: blur(36px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: wSpin 90s linear infinite;
}

/* ---- Compound: a calm, static presentation (rising steps) ----
   The pinned scroll animation is not loaded in the preview; the four layers
   read as a staircase that climbs to Growth. Content is unchanged. */
@media (min-width: 769px) {
  body.bdm-glass .bdmc-section { height: auto; min-height: 0; padding: clamp(5rem, 9vw, 8rem) 0; }
  body.bdm-glass .bdmc-pin {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4rem);
    padding: 0 clamp(1rem, 4vw, 3rem);
    overflow: visible;
  }
  body.bdm-glass .bdmc-stage { width: min(1240px, 100%); height: auto; perspective: none; transform-style: flat; contain: none; }
  body.bdm-glass .bdmc-flow,
  body.bdm-glass .bdmc-core,
  body.bdm-glass .bdmc-labels { display: none; }
  body.bdm-glass .bdmc-arc {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.5rem);
    align-items: end;
    transform-style: flat;
    pointer-events: auto;
  }
  body.bdm-glass .bdmc-card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 17rem;
    padding: 1.9rem 1.7rem 1.7rem;
    margin-bottom: calc(var(--step, 0) * 2.6rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease, box-shadow 0.5s ease;
  }
  body.bdm-glass .bdmc-card--site { --step: 0; }
  body.bdm-glass .bdmc-card--ads { --step: 1; }
  body.bdm-glass .bdmc-card--seo { --step: 2; }
  body.bdm-glass .bdmc-card--growth {
    --step: 3;
    min-height: 20rem;
    border-color: color-mix(in srgb, var(--card-accent) 60%, rgba(255, 255, 255, 0.2));
    box-shadow: 0 0 60px -10px color-mix(in srgb, var(--card-accent) 45%, transparent), 0 30px 80px -30px rgba(2, 5, 14, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  body.bdm-glass .bdmc-card:hover { transform: translateY(-6px); }
  body.bdm-glass .bdmc-card:hover .bdmc-card-glow { opacity: 1; }
  /* The step number becomes a large outlined figure, like the blog cards. */
  body.bdm-glass .bdmc-card-index {
    position: absolute;
    top: 1.1rem;
    right: 1.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 4.6rem;
    line-height: 0.8;
    letter-spacing: 0.03em;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--card-accent) 70%, rgba(255, 255, 255, 0.3));
  }
  body.bdm-glass .bdmc-card-title { font-size: clamp(40px, 3.6vw, 52px); }
  body.bdm-glass .bdmc-card-copy { font-size: 15px; line-height: 1.6; }

  body.bdm-glass .bdmc-final { opacity: 1; transform: none; }
  body.bdm-glass .bdmc-final-line {
    display: inline-block;
    padding: 0.85rem 1.7rem;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background: var(--g-glass);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-hi), 0 12px 30px -14px rgba(255, 140, 0, 0.45);
  }

  /* Scroll reveal (only when JS has marked the page; otherwise cards just show). */
  body.bdm-glass.bdm-glass-js .bdmc-card {
    opacity: 0;
    transform: translateY(36px);
    transition-delay: calc(var(--i, 0) * 0.12s);
    transition-property: opacity, transform, border-color, box-shadow;
    transition-duration: 0.9s, 0.9s, 0.4s, 0.5s;
  }
  body.bdm-glass.bdm-glass-js .bdmc-card.is-in { opacity: 1; transform: none; }
  body.bdm-glass.bdm-glass-js .bdmc-card.is-in:hover {
    transform: translateY(-6px);
    transition-delay: 0s;
    transition-duration: 0.4s, 0.4s, 0.4s, 0.5s;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body.bdm-glass .bdmc-arc { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  body.bdm-glass .bdmc-card { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.bdm-glass .btn-primary::after { display: none; }
  body.bdm-glass .wheel-ring::before { animation: none; }
}


/* ---- Wheel smoke: keep it inside the section and fade it out softly ----
   The section clips its overflow, so smoke reaching past the padding was cut off
   in a straight line above and below the ring. The plume is now smaller, the
   section has room for it, and a radial mask fades every edge to nothing. */
body.bdm-glass #expertise { padding-top: 9.5rem; padding-bottom: 9.5rem; }
body.bdm-glass .wheel-ring::before {
  inset: -16%;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}

/* ==========================================================================
   Header links: landing offset and the mobile menu
   ========================================================================== */

/* The floating header is taller than the original bar, so anchored sections
   (#expertise, #results, #why, #process, #hero) need a little more room. */
body.bdm-glass section,
body.bdm-glass #hero { scroll-margin-top: 96px; }

body.bdm-glass .bdm-menu-btn { display: none; }

@media (max-width: 900px) {
  body.bdm-glass nav { flex-wrap: wrap; }
  body.bdm-glass .bdm-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    margin-left: auto;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--g-line);
    border-radius: 12px;
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  body.bdm-glass .bdm-menu-btn__bars {
    position: relative;
    width: 1.4rem;
    height: 0.65rem;
    border-block: 2px solid currentColor;
  }
  body.bdm-glass .bdm-menu-btn__bars::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    margin-top: -1px;
    background: var(--amber);
  }
  body.bdm-glass nav.is-open {
    background: var(--g-glass-strong);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-line);
    box-shadow: var(--g-hi), var(--g-shadow);
  }
  body.bdm-glass nav.is-open .nav-links {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.7rem 0.2rem 0.5rem;
  }
  body.bdm-glass nav.is-open .nav-links a:not(.nav-cta) {
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 14px;
  }
  body.bdm-glass nav.is-open .nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0.4rem 0 0.2rem;
  }
}