/* ==========================================================================
   Futuristic layer — glass, neon-green glow, HUD details, motion.
   Loaded last. Everything here is additive; delete this file + bi-futuristic.js to revert.
   Motion is disabled under prefers-reduced-motion.
   ========================================================================== */

@property --bm-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --neo: #2de2c0;                      /* cool secondary accent next to the green */
  --neo-soft: rgba(45, 226, 192, .16);
  --glass: rgba(255, 255, 255, .62);
  --glass-line: rgba(11, 13, 18, .10);
}
:root[data-theme="dark"] {
  --bg: #070b12;
  --bg-mist: #0a1019;
  --panel: #0e1621;
  --panel-2: #121c29;
  --glass: rgba(16, 26, 38, .62);
  --glass-line: rgba(255, 255, 255, .10);
  --accent-glow: rgba(113, 191, 68, .55);
  --accent-glow-soft: rgba(113, 191, 68, .20);
}

/* ----- Ambient backdrop: faint grid + vignette behind everything ----- */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 85%);
}
body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  right: -20vw; bottom: -25vw; border-radius: 50%;
  background: radial-gradient(circle, var(--neo-soft), transparent 65%); filter: blur(30px); opacity: .7;
}
.bg-white { background: transparent; }
.bg-gray { background: color-mix(in srgb, var(--bg-mist) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bm-hero, .page-hero { background: transparent; }

/* ----- Scroll progress + header hairline ----- */
.bm-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--neo)); box-shadow: 0 0 12px var(--accent-glow); pointer-events: none; }
.admin-bar .bm-progress { top: 32px; }
.bi-header { background: var(--glass); border-bottom-color: transparent; }
.bi-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), var(--neo-soft), transparent); opacity: .8; }

/* ----- Hero: aurora blobs, network canvas, shimmering headline ----- */
.bm-hero { overflow: hidden; }
.bm-hero::before { z-index: 0; }
.bm-hero::after { z-index: 0; background: radial-gradient(circle, var(--accent-glow-soft), transparent 62%); animation: bm-drift 18s ease-in-out infinite alternate; }
.bm-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .9; }
.page-hero .bm-net { opacity: .55; }
.bm-hero .container, .page-hero .container { z-index: 2; }
.hero-overlay { z-index: 1; }

.hero h1 .green, .page-hero .section-title .green {
  background: linear-gradient(100deg, var(--accent-text) 0%, var(--neo) 45%, var(--accent) 75%, var(--accent-text) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: bm-shimmer 7s linear infinite;
  text-shadow: none; filter: drop-shadow(0 0 18px var(--accent-glow-soft));
}
.bm-rot { display: inline-block; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.bm-rot.is-out { opacity: 0; transform: translateY(.25em); filter: blur(6px); }

.hero-badge { position: relative; overflow: hidden; }
.hero-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--accent-glow-soft) 50%, transparent 70%); transform: translateX(-100%); animation: bm-sweep 5s ease-in-out infinite; }
.hero-badge .dot { animation: bm-pulse 2s ease-in-out infinite; }

/* ----- Engine card: glass + HUD brackets + scanline + live chip ----- */
.bm-engine { background: var(--glass); border-color: var(--glass-line); position: relative; overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 60px -20px var(--accent-glow); }
.bm-engine::before {
  content: ''; position: absolute; inset: 8px; pointer-events: none; opacity: .9;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1.5px 14px no-repeat;
}
.bm-engine::after { content: ''; position: absolute; left: 0; right: 0; height: 90px; top: -90px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--accent-glow-soft), transparent); animation: bm-scan 6s linear infinite; }
.bm-engine__head span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--neo); box-shadow: 0 0 10px var(--neo); animation: bm-pulse 1.6s ease-in-out infinite; vertical-align: 1px; }
.bm-engine__list li { transition: padding .25s ease, background .25s ease; }
.bm-engine__list li:hover { padding-left: 8px; background: linear-gradient(90deg, var(--accent-tint), transparent); }

/* ----- Stat cards: glow numbers ----- */
.bm-stat { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bm-stat strong, .stat-number { text-shadow: 0 0 28px var(--accent-glow-soft); }
.stats-grid { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ----- Cards: cursor spotlight + rotating gradient border on hover ----- */
.bm-practice, .card, .case-card, .service-card-lg, .agency-card, .bm-stat, .image-card, .team-card { --mx: 50%; --my: 50%; position: relative; }
.bm-practice, .card, .case-card, .service-card-lg { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bm-practice::before, .card::before, .case-card::before, .service-card-lg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--accent-glow-soft), transparent 60%);
}
.bm-practice::after, .card::after, .case-card::after, .service-card-lg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: conic-gradient(from var(--bm-ang), transparent 0 55%, var(--accent) 75%, var(--neo) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bm-spin 4s linear infinite;
}
.bm-practice:hover::before, .card:hover::before, .case-card:hover::before, .service-card-lg:hover::before,
.bm-practice:hover::after, .card:hover::after, .case-card:hover::after, .service-card-lg:hover::after { opacity: 1; }
.bm-practice > *:not(.bm-practice__ghost), .card > *, .case-card > *, .service-card-lg > * { position: relative; z-index: 1; }
.bm-practice__ghost { z-index: 0 !important; }
.bm-practice__icon { box-shadow: 0 0 24px -6px var(--accent-glow); transition: box-shadow .3s ease, transform .3s ease; }
.bm-practice:hover .bm-practice__icon { box-shadow: 0 0 30px -2px var(--accent-glow); transform: scale(1.06); }

/* ----- Section labels, buttons, reveals ----- */
.section-label { text-shadow: 0 0 18px var(--accent-glow-soft); }
.section-title { text-wrap: balance; }
.btn-green, .nav-cta { position: relative; overflow: hidden; }
.btn-green::after, .nav-cta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition: left .6s ease; }
.btn-green:hover::after, .nav-cta:hover::after { left: 130%; }
.btn-green { box-shadow: 0 10px 30px -6px var(--accent-glow), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset; }
.reveal { filter: blur(8px); }
.reveal.visible { filter: none; }
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }

/* ----- Dark footer + CTA get a glow edge ----- */
.cta-box { box-shadow: var(--shadow), 0 0 80px -30px var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.bi-footer { background: linear-gradient(180deg, #070b12, #05080d); position: relative; }
.bi-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-glow), var(--neo-soft), transparent); }

/* ----- Keyframes ----- */
@keyframes bm-shimmer { to { background-position: -220% 0; } }
@keyframes bm-sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes bm-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-glow-soft); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes bm-scan { to { transform: translateY(520px); } }
@keyframes bm-spin { to { --bm-ang: 360deg; } }
@keyframes bm-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vw, 0) scale(1.12); } }

/* ----- Light theme: calmer glow ----- */
:root:not([data-theme="dark"]) .bm-net { opacity: .55; }
:root:not([data-theme="dark"]) .hero h1 .green { filter: none; }
:root:not([data-theme="dark"]) body::after { opacity: .35; }

/* ----- Small screens / reduced motion ----- */
@media (max-width: 767px) {
  .bm-engine::after { display: none; }
  .bm-practice, .card, .case-card, .service-card-lg { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-hero::after, .hero h1 .green, .page-hero .section-title .green, .hero-badge::after, .hero-badge .dot,
  .bm-engine::after, .bm-engine__head span::before, .bm-practice::after, .card::after, .case-card::after, .service-card-lg::after { animation: none !important; }
  .reveal { filter: none; }
  .bm-rot { transition: none; }
}

/* Keep the skyline subtle behind stacked content */
@media (max-width: 1023px) { :root[data-theme="dark"] .bm-hero .hero-bg { opacity: .28; } }
:root[data-theme="dark"] .bm-hero .hero-bg { opacity: .5; }

/* Footer: two columns on tablets so addresses don't wrap word-by-word */
@media (min-width: 768px) and (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; } }