/* ============================================================
   BE MUSIX — Dark, Animated Distribution Landing
   Inspired by bemusix.com sleek dark aesthetic + animated bg.
============================================================ */

:root{
  /* Space palette */
  --space-0:  #050816;
  --space-1:  #070a16;
  --space-2:  #0b1024;
  --surface:  #0f152b;
  --surface-2:#141b34;
  --surface-3:#1a2240;

  --rule:    rgba(255,255,255,0.06);
  --rule-2:  rgba(255,255,255,0.12);
  --rule-3:  rgba(255,255,255,0.22);

  --text:    #f1f4fa;
  --text-2:  #b9c1d4;
  --muted:   #7f8aa3;
  --muted-2: #5b6580;

  /* Signature accents */
  --brand:    #6d8bff;
  --brand-2:  #9b7bff;
  --mint:     #2ee5b3;
  --coral:    #ff6584;
  --gold:     #ffd166;

  --glow-blue:  0 0 24px rgba(109,139,255,0.45);
  --glow-purple:0 0 28px rgba(155,123,255,0.40);

  --shadow-card: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lift: 0 22px 60px rgba(0,0,0,0.55);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shell:  1240px;
  --gutter: 24px;

  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   RESET / BASE
============================================================ */
*,*::before,*::after{ box-sizing:border-box; min-width:0; }
html,body{ max-width:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  font-size:16px; line-height:1.6;
  color:var(--text);
  background:var(--space-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  position:relative;
  min-height:100vh;
}
img,svg,picture,video,iframe{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:transparent; border:0; }
::selection{ background: rgba(109,139,255,0.40); color:#fff; }

.skip-link{
  position:fixed; top:8px; left:8px; z-index:10000;
  padding:10px 16px; background:var(--brand); color:#0a0e1d;
  border-radius:10px; font-weight:700; font-size:.9rem;
  transform:translateY(-200%); transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }

.shell{
  width:min(100%, var(--shell));
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}
.section{
  padding-block: clamp(64px, 9vw, 120px);
  position:relative; z-index:1;
}

.grad{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, var(--coral) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}

/* ============================================================
   ANIMATED BACKGROUND — aurora blobs + stars + grid
============================================================ */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(ellipse at top, rgba(109,139,255,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(155,123,255,0.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--space-0), var(--space-1) 40%, var(--space-2));
}
.blob{
  position:absolute;
  width: 56vw; height: 56vw; max-width: 760px; max-height: 760px;
  border-radius:50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
  mix-blend-mode: screen;
}
.b1{ top:-12%; left:-14%; background: radial-gradient(circle, #6d8bff 0%, transparent 70%); animation: blobDrift1 22s ease-in-out infinite; }
.b2{ top:8%;  right:-18%; background: radial-gradient(circle, #9b7bff 0%, transparent 70%); animation: blobDrift2 28s ease-in-out infinite; }
.b3{ bottom:-20%; left:14%; background: radial-gradient(circle, #2ee5b3 0%, transparent 70%); opacity:.42; animation: blobDrift3 32s ease-in-out infinite; }
.b4{ bottom:-6%; right:-8%; background: radial-gradient(circle, #ff6584 0%, transparent 70%); opacity:.38; animation: blobDrift4 26s ease-in-out infinite; }

@keyframes blobDrift1{
  0%,100% { transform: translate3d(0,0,0)        scale(1); }
  50%     { transform: translate3d(60px, 80px,0) scale(1.10); }
}
@keyframes blobDrift2{
  0%,100% { transform: translate3d(0,0,0)         scale(1); }
  50%     { transform: translate3d(-80px,40px,0)  scale(1.08); }
}
@keyframes blobDrift3{
  0%,100% { transform: translate3d(0,0,0)         scale(1); }
  50%     { transform: translate3d(-40px,-80px,0) scale(.92); }
}
@keyframes blobDrift4{
  0%,100% { transform: translate3d(0,0,0)        scale(1); }
  50%     { transform: translate3d(60px,-40px,0) scale(1.06); }
}

/* Twinkling star field — CSS only */
.stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.star-layer{
  position:absolute; inset:0;
  background-repeat: repeat;
  will-change: opacity, transform;
}
.s1{
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 24% 72%, #cdd6ff, transparent 60%),
    radial-gradient(1.2px 1.2px at 41% 33%, #fff, transparent 60%),
    radial-gradient(1px 1px at 58% 84%, #fff, transparent 60%),
    radial-gradient(1px 1px at 67% 22%, #d4dcff, transparent 60%),
    radial-gradient(1.4px 1.4px at 81% 58%, #fff, transparent 60%),
    radial-gradient(1px 1px at 92% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 6% 88%, #cdd6ff, transparent 60%);
  background-size: 100% 100%;
  animation: twinkle1 5s ease-in-out infinite alternate;
}
.s2{
  background-image:
    radial-gradient(1px 1px at 19% 51%, #b8c6ff, transparent 60%),
    radial-gradient(1.2px 1.2px at 33% 8%, #fff, transparent 60%),
    radial-gradient(1px 1px at 49% 64%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 71% 39%, #c9bbff, transparent 60%),
    radial-gradient(1px 1px at 88% 78%, #fff, transparent 60%),
    radial-gradient(1px 1px at 14% 33%, #fff, transparent 60%);
  background-size: 100% 100%;
  animation: twinkle2 7s ease-in-out infinite alternate;
}
.s3{
  background-image:
    radial-gradient(1.6px 1.6px at 28% 28%, #fff, transparent 60%),
    radial-gradient(2px   2px   at 62% 71%, #fff, transparent 65%),
    radial-gradient(1.4px 1.4px at 78% 15%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 8% 62%, #fff, transparent 60%);
  background-size: 100% 100%;
  animation: twinkle3 4.2s ease-in-out infinite alternate;
}
@keyframes twinkle1{ 0%{opacity:.55} 100%{opacity:.85} }
@keyframes twinkle2{ 0%{opacity:.35} 100%{opacity:.7}  }
@keyframes twinkle3{ 0%{opacity:.20} 100%{opacity:.55} }

/* Subtle grid overlay with vignette mask */
.grid-fade{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  opacity:.5;
}

/* Honor [hidden] attribute everywhere */
[hidden]{ display: none !important; }

/* ============================================================
   HEADER — bmh (fixed bar + dropdown + drawer)
   Adapted to dark blue/purple palette
============================================================ */
.bmh *{ box-sizing: border-box; min-width: 0; }
.bmh a{ text-decoration: none; color: inherit; }
.bmh button{ font: inherit; color: inherit; }

/* Push main content below the fixed header */
body{ padding-top: 96px; }
@media (max-width: 992px){ body{ padding-top: 80px; } }

.bmh-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  font-family: var(--body);
}
.bmh-header__shell{
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: 14px 18px;
}
.bmh-header__bar{
  position: relative;
  display: flex; align-items: center;
  gap: 14px;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--rule-2);
  background:
    linear-gradient(180deg, rgba(20,27,52,0.78), rgba(15,21,43,0.82));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 14px 36px -16px rgba(0,0,0,0.55);
  overflow: visible;
}
.bmh-header__bar::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 24px 24px;
  opacity: .5;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}
.bmh-header__bar::after{
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(109,139,255,0.45), transparent 30%, transparent 70%, rgba(155,123,255,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .85;
}
.bmh-header.is-scrolled .bmh-header__bar{
  border-color: var(--rule-3);
  background:
    linear-gradient(180deg, rgba(11,16,36,0.94), rgba(8,11,27,0.96));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 22px 50px -18px rgba(0,0,0,0.7);
}

/* Logo */
.bmh-logo{
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 2;
  flex-shrink: 0;
  border-radius: 12px;
  padding: 4px 8px 4px 4px;
  transition: background .18s ease;
}
.bmh-logo:hover{ background: rgba(255,255,255,0.04); }
.bmh-logo img{
  height: 40px; width: auto;
  display: block;
  transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}
.bmh-logo:hover img{
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 18px rgba(109,139,255,0.45));
}

/* Desktop nav */
.bmh-nav{
  position: relative; z-index: 2;
  display: flex; align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.bmh-nav__link,
.bmh-nav__trigger{
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: .9rem; font-weight: 600;
  letter-spacing: .005em;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.bmh-nav__link:hover,
.bmh-nav__trigger:hover{
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.bmh-nav__link.active,
.bmh-nav__trigger.active{
  color: var(--text);
  background: rgba(109,139,255,0.10);
  border-color: rgba(109,139,255,0.30);
}
.bmh-nav__link.active::before,
.bmh-nav__trigger.active::before{
  content: "";
  position: absolute;
  left: 14px; bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}
.bmh-nav__trigger i{
  font-size: .7rem;
  color: var(--muted-2);
  transition: transform .18s ease, color .18s ease;
}
.bmh-nav__trigger:hover i,
.bmh-nav__trigger.active i{ color: var(--text); }
.bmh-dropdown:hover .bmh-nav__trigger i,
.bmh-dropdown:focus-within .bmh-nav__trigger i,
.bmh-dropdown.is-open .bmh-nav__trigger i{ transform: rotate(180deg); }

/* Dropdown */
.bmh-dropdown{ position: relative; }
.bmh-dropdown__menu{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--rule-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(109,139,255,0.10);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 999;
}
.bmh-dropdown__menu::before{
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--surface-2);
  border-left: 1px solid var(--rule-2);
  border-top: 1px solid var(--rule-2);
}
.bmh-dropdown:hover .bmh-dropdown__menu,
.bmh-dropdown:focus-within .bmh-dropdown__menu,
.bmh-dropdown.is-open .bmh-dropdown__menu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.bmh-dropdown__item{
  display: flex; align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: .88rem; font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.bmh-dropdown__item i{
  width: 26px; height: 26px;
  flex: 0 0 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(109,139,255,0.18), rgba(155,123,255,0.18));
  border: 1px solid rgba(109,139,255,0.30);
  color: var(--brand);
  font-size: .76rem;
}
.bmh-dropdown__item:hover{
  color: #fff;
  background: rgba(109,139,255,0.08);
  border-color: rgba(109,139,255,0.28);
  transform: translateX(2px);
}
.bmh-dropdown__item.active{
  color: var(--brand);
  background: rgba(109,139,255,0.10);
  border-color: rgba(109,139,255,0.32);
}

/* Header actions */
.bmh-actions{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.bmh-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 11px;
  font-size: .88rem; font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--rule-2);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.bmh-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(109,139,255,0.30); }
.bmh-btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: var(--rule-3);
}
.bmh-btn--primary{
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 60%, #b35bff 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 18px rgba(109,139,255,0.30),
    0 10px 26px rgba(109,139,255,0.40);
}
.bmh-btn--primary i{ color: #ffffff; }
.bmh-btn--primary:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7e9aff 0%, #ad8bff 60%, #c879ff 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.30) inset,
    0 0 24px rgba(155,123,255,0.45),
    0 16px 36px rgba(109,139,255,0.55);
}

/* Mobile toggle */
.bmh-toggle{
  display: none;
  position: relative; z-index: 2;
  width: 44px; height: 44px;
  border-radius: 11px;
  border: 1px solid var(--rule-2);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bmh-toggle:hover{
  background: rgba(109,139,255,0.10);
  border-color: rgba(109,139,255,0.40);
  color: var(--brand);
}
.bmh-toggle i{ font-size: 1.05rem; }

/* Mobile overlay + drawer */
.bmh-overlay{
  position: fixed; inset: 0;
  background: rgba(2,4,16,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 20000;
}
.bmh-overlay.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }

.bmh-drawer{
  position: fixed;
  top: 0; right: 0;
  width: min(88vw, 360px);
  height: 100dvh;
  padding: calc(14px + env(safe-area-inset-top,0)) 14px calc(14px + env(safe-area-inset-bottom,0));
  background:
    radial-gradient(420px 200px at 90% 0%, rgba(109,139,255,0.14), transparent 60%),
    radial-gradient(420px 220px at 10% 0%, rgba(155,123,255,0.10), transparent 60%),
    var(--space-1);
  border-left: 1px solid var(--rule-2);
  box-shadow: -20px 0 60px rgba(0,0,0,0.6);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  z-index: 20001;
  display: flex; flex-direction: column;
  gap: 12px;
  font-family: var(--body);
}
.bmh-drawer.is-open{ transform: translateX(0); }

.bmh-drawer__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid var(--rule);
}
.bmh-drawer__logo{ display: flex; align-items: center; }
.bmh-drawer__logo img{ height: 34px; width: auto; }
.bmh-drawer__close{
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--rule-2);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bmh-drawer__close:hover{
  background: rgba(109,139,255,0.10);
  border-color: rgba(109,139,255,0.40);
  color: var(--brand);
}
.bmh-drawer__close i{ font-size: 1rem; }

.bmh-mobile-links{
  display: grid; gap: 6px;
  margin-top: 4px;
  overflow: auto;
  padding-right: 2px;
}
.bmh-mobile-link,
.bmh-mobile-subtrigger{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text);
  font-size: .94rem; font-weight: 600;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.04);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.bmh-mobile-link:hover{
  background: rgba(109,139,255,0.07);
  border-color: rgba(109,139,255,0.22);
}
.bmh-mobile-link.active{
  color: var(--brand);
  border-color: rgba(109,139,255,0.40);
  background: rgba(109,139,255,0.10);
}
.bmh-mobile-link.active::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
  margin-right: -2px;
}
.bmh-mobile-link small{
  color: var(--muted);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bmh-mobile-link.active small{ color: var(--brand); }

.bmh-mobile-subtrigger{ cursor: pointer; }
.bmh-mobile-subtrigger i{
  font-size: .78rem;
  color: var(--muted);
  transition: transform .18s ease, color .18s ease;
}
.bmh-mobile-subtrigger:hover{
  background: rgba(255,255,255,0.06);
  border-color: var(--rule-2);
}
.bmh-mobile-subtrigger:hover i{ color: var(--text); }

.bmh-mobile-submenu{
  display: grid; gap: 6px;
  margin-top: 6px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid rgba(109,139,255,0.30);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .22s ease, opacity .18s ease;
}
.bmh-mobile-submenu a{
  display: flex; align-items: center; gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: .88rem; font-weight: 500;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.02);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.bmh-mobile-submenu a:hover{
  color: #fff;
  border-color: rgba(109,139,255,0.25);
  background: rgba(109,139,255,0.07);
}
.bmh-mobile-submenu a.active{
  color: var(--brand);
  border-color: rgba(109,139,255,0.40);
  background: rgba(109,139,255,0.10);
}
.bmh-mobile-submenu a i{
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(109,139,255,0.18), rgba(155,123,255,0.18));
  border: 1px solid rgba(109,139,255,0.30);
  color: var(--brand);
  font-size: .72rem;
  flex: 0 0 24px;
}
.bmh-mobile-group.is-open .bmh-mobile-submenu{
  max-height: 480px;
  opacity: 1;
}
.bmh-mobile-group.is-open .bmh-mobile-subtrigger i{
  transform: rotate(180deg);
  color: var(--brand);
}

.bmh-drawer__footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: grid; gap: 10px;
}
.bmh-drawer__footer .bmh-btn{
  width: 100%;
  min-height: 46px;
  justify-content: center;
}

/* Header responsive */
@media (max-width: 1080px){
  .bmh-nav{ gap: 2px; }
  .bmh-nav__link,
  .bmh-nav__trigger{ padding: 9px 11px; font-size: .86rem; }
  .bmh-actions .bmh-btn{ padding: 10px 13px; }
}
@media (max-width: 992px){
  .bmh-nav,
  .bmh-actions{ display: none; }
  .bmh-toggle{ display: grid; place-items: center; }
  .bmh-logo img{ height: 38px; }
  .bmh-header__shell{ padding: 12px 14px; }
  .bmh-header__bar{ min-height: 56px; padding: 8px 10px; border-radius: 16px; }
}
@media (max-width: 420px){
  .bmh-drawer{ width: 92vw; }
  .bmh-logo img{ height: 34px; }
}

/* ============================================================
   BUTTONS
============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  border: 1px solid var(--rule-2);
  background: var(--surface-2);
  color: var(--text);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height: 48px;
  position:relative;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(109,139,255,0.30); }
.btn i{ font-size: .85em; transition: transform .15s ease; }
.btn:hover i.fa-arrow-right{ transform: translateX(3px); }

.btn.primary{
  background: linear-gradient(135deg, #ffffff 0%, #e6ebff 100%);
  color: var(--space-0);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.30) inset;
}
.btn.primary:hover{
  box-shadow: 0 18px 40px rgba(109,139,255,0.30), 0 0 0 1px rgba(255,255,255,0.40) inset;
}
.btn.ghost{
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-color: var(--rule-2);
  backdrop-filter: blur(8px);
}
.btn.ghost:hover{ background: rgba(255,255,255,0.08); border-color: var(--rule-3); }
.btn.big{ padding: 18px 28px; font-size: 1rem; }

/* ============================================================
   HERO
============================================================ */
.hero{
  padding-block: clamp(56px, 8vw, 110px) clamp(40px, 6vw, 80px);
  position:relative;
  text-align:center;
}
.hero-content{
  display:flex; flex-direction:column; align-items:center;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-2);
  backdrop-filter: blur(8px);
  font-size: .82rem; font-weight: 500;
  color: var(--text-2);
  margin-bottom: 26px;
}
.hero-tag .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(46,229,179,0.20), 0 0 12px var(--mint);
  animation: heroDot 1.8s ease infinite;
}
@keyframes heroDot{ 0%,100%{opacity:1} 50%{opacity:.5} }

.hero-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  max-width: 19ch;
  text-wrap: balance;
}

.hero-sub{
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 0 30px;
  line-height: 1.55;
}
.hero-sub strong{ color: var(--text); font-weight: 700; }

.hero-cta{
  display:flex; flex-wrap:wrap; gap: 12px;
  justify-content:center;
  margin-bottom: 26px;
}
.hero-mini{
  display:flex; flex-wrap:wrap; gap: 10px 24px;
  justify-content:center;
  list-style:none; padding:0; margin: 0 0 56px;
  font-size: .86rem;
  color: var(--muted);
}
.hero-mini li{ display:inline-flex; align-items:center; gap: 7px; }
.hero-mini i{ color: var(--mint); font-size: .8em; }

/* Hero ORB */
.hero-orb{
  position: relative;
  width: min(340px, 80vw); height: min(340px, 80vw);
  margin: 0 auto 50px;
  display:grid; place-items:center;
}
.orb-core{
  width: 28%; height: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, var(--brand) 35%, var(--brand-2) 65%, transparent 90%);
  box-shadow:
    0 0 60px rgba(109,139,255,0.55),
    0 0 120px rgba(155,123,255,0.35),
    inset 0 0 30px rgba(255,255,255,0.45);
  position:relative;
  animation: orbBreath 4s ease-in-out infinite;
}
@keyframes orbBreath{
  0%,100%{ transform: scale(1);   filter: brightness(1); }
  50%   { transform: scale(1.06); filter: brightness(1.12); }
}
.orb-ring{
  position:absolute; top:50%; left:50%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  transform: translate(-50%,-50%);
  pointer-events:none;
}
.orb-ring.r1{ width: 55%;  height: 55%;  border-color: rgba(109,139,255,0.30); animation: orbSpin 18s linear infinite; }
.orb-ring.r2{ width: 78%;  height: 78%;  border-color: rgba(155,123,255,0.22); animation: orbSpin 28s linear infinite reverse; border-style: dashed; }
.orb-ring.r3{ width: 100%; height: 100%; border-color: rgba(255,101,132,0.18); animation: orbSpin 40s linear infinite; }
.orb-ring::before{
  content:""; position:absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  top: -4px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 16px var(--brand);
}
.orb-ring.r2::before{ background: var(--brand-2); box-shadow: 0 0 16px var(--brand-2); }
.orb-ring.r3::before{ background: var(--coral); box-shadow: 0 0 16px var(--coral); }

/* Equalizer wave bars at bottom of orb */
.orb-wave{
  position:absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  display:flex; align-items:flex-end; gap: 4px;
  width: 84%; height: 70px;
}
.orb-wave span{
  flex: 1;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border-radius: 2px 2px 0 0;
  animation: waveBeat 1.2s ease-in-out infinite;
  opacity: .85;
  box-shadow: 0 0 8px rgba(109,139,255,0.35);
}
.orb-wave span:nth-child(1) { animation-delay: -.05s }
.orb-wave span:nth-child(2) { animation-delay: -.10s }
.orb-wave span:nth-child(3) { animation-delay: -.15s }
.orb-wave span:nth-child(4) { animation-delay: -.20s }
.orb-wave span:nth-child(5) { animation-delay: -.25s }
.orb-wave span:nth-child(6) { animation-delay: -.30s }
.orb-wave span:nth-child(7) { animation-delay: -.35s }
.orb-wave span:nth-child(8) { animation-delay: -.40s }
.orb-wave span:nth-child(9) { animation-delay: -.45s }
.orb-wave span:nth-child(10){ animation-delay: -.50s }
.orb-wave span:nth-child(11){ animation-delay: -.55s }
.orb-wave span:nth-child(12){ animation-delay: -.60s }
.orb-wave span:nth-child(13){ animation-delay: -.65s }
.orb-wave span:nth-child(14){ animation-delay: -.70s }
.orb-wave span:nth-child(15){ animation-delay: -.75s }
.orb-wave span:nth-child(16){ animation-delay: -.80s }
.orb-wave span:nth-child(17){ animation-delay: -.85s }
.orb-wave span:nth-child(18){ animation-delay: -.90s }
.orb-wave span:nth-child(19){ animation-delay: -.95s }
.orb-wave span:nth-child(20){ animation-delay: -1s   }
@keyframes waveBeat{
  0%,100%{ height: 12%; }
  50%   { height: 92%; }
}

.hero-stat-row{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  width: min(100%, 880px);
}
.hstat{
  padding: 18px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hstat:hover{ transform: translateY(-2px); border-color: var(--rule-2); background: rgba(255,255,255,0.05); }
.hstat-num{
  display:block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #b8c4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hstat-label{
  display:block;
  margin-top: 6px;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ============================================================
   LOGOS MARQUEE
============================================================ */
.logos{
  padding-block: 28px;
  border-block: 1px solid var(--rule);
  background: rgba(255,255,255,0.015);
}
.logos-title{
  text-align:center;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  font-weight: 600;
}
.marquee{
  overflow:hidden;
  position:relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display:flex; gap: 60px;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
  will-change: transform;
}
@keyframes marqueeScroll{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
.marquee-logo{
  display:grid; place-items:center;
  height: 44px;
  flex: 0 0 auto;
}
.marquee-logo img{
  height: 32px; width: auto; object-fit: contain;
  filter: grayscale(1) brightness(1.4) contrast(.92);
  opacity: .55;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.marquee-logo:hover img{ opacity: 1; filter: none; transform: scale(1.06); }

/* ============================================================
   SECTION HEAD (shared)
============================================================ */
.sec-head{
  max-width: 70ch;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.sec-head.center{
  text-align:center;
  margin-inline:auto;
}
.kicker{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(109,139,255,0.10);
  border: 1px solid rgba(109,139,255,0.30);
  color: var(--brand);
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 16px;
}
.sec-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.sec-sub{
  margin: 0;
  color: var(--text-2);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  max-width: 66ch;
}
.sec-head.center .sec-sub{ margin-inline: auto; }

/* ============================================================
   PILLARS (services)
============================================================ */
.pillars{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pillar-card{
  position: relative;
  padding: 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--rule-2);
  backdrop-filter: blur(8px);
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.pillar-card:hover{
  transform: translateY(-4px);
  border-color: rgba(109,139,255,0.40);
  box-shadow: 0 22px 60px rgba(109,139,255,0.18);
}
.pillar-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(450px 200px at 50% -10%, rgba(109,139,255,0.20), transparent 60%);
  pointer-events:none;
  opacity: 0; transition: opacity .35s ease;
}
.pillar-card:hover .pillar-glow{ opacity: 1; }
.pillar-icon{
  width: 56px; height: 56px; border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 12px 30px rgba(109,139,255,0.40);
  margin-bottom: 22px;
}
.pillar-kicker{
  display:inline-block;
  font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 10px;
}
.pillar-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--text);
}
.pillar-copy{
  margin: 0 0 20px;
  color: var(--text-2);
  font-size: .96rem; line-height: 1.55;
}
.pillar-list{
  list-style: none; padding: 0; margin: 0 0 22px;
  display:flex; flex-direction:column; gap: 8px;
}
.pillar-list li{
  display:flex; align-items:center; gap: 10px;
  font-size: .9rem;
  color: var(--text-2);
}
.pillar-list i{
  width: 22px; height: 22px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(46,229,179,0.12);
  color: var(--mint);
  font-size: .66rem;
  border: 1px solid rgba(46,229,179,0.25);
  flex: 0 0 22px;
}
.pillar-cta{
  margin-top: auto;
  display:inline-flex; align-items:center; gap: 10px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 8px;
  transition: gap .15s ease, color .15s ease, border-color .15s ease;
  width: fit-content;
}
.pillar-cta:hover{ gap: 14px; color: var(--brand); border-color: var(--brand); }

/* ============================================================
   BENEFITS GRID
============================================================ */
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.benefit-card{
  position:relative;
  padding: 22px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
  overflow:hidden;
}
.benefit-card::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity:0; transition: opacity .25s ease;
}
.benefit-card:hover{
  transform: translateY(-3px);
  border-color: rgba(109,139,255,0.30);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 16px 40px rgba(109,139,255,0.15);
}
.benefit-card:hover::before{ opacity: 1; }
.benefit-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px; margin-bottom: 14px;
}
.benefit-icon{
  width: 44px; height: 44px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.25);
  color: var(--brand);
  font-size: 1rem;
}
.benefit-tag{
  font-size: .64rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.benefit-card h3{
  font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text);
}
.benefit-card p{
  margin: 0;
  color: var(--text-2);
  font-size: .88rem; line-height: 1.5;
}

/* ============================================================
   WORKFLOW STEPS
============================================================ */
.steps{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
  position:relative;
}
.steps::before{
  content:""; position:absolute;
  top: 44px; left: 7%; right: 7%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-2), var(--rule-2), var(--rule-2), transparent);
  z-index: 0;
}
.step-card{
  position:relative; z-index:1;
  padding: 24px 20px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule-2);
  backdrop-filter: blur(6px);
  text-align:center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.step-card:hover{
  transform: translateY(-3px);
  border-color: rgba(109,139,255,0.40);
  box-shadow: 0 16px 40px rgba(109,139,255,0.18);
}
.step-num{
  width: 52px; height: 52px; border-radius: 50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-family: var(--display);
  font-weight: 700; font-size: 1rem;
  margin: 0 auto 14px;
  box-shadow:
    0 0 0 6px var(--space-1),
    0 0 0 7px rgba(109,139,255,0.30),
    0 14px 30px rgba(109,139,255,0.45);
}
.step-icon{
  width: 36px; height: 36px; border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--rule);
  color: var(--text-2);
  font-size: .9rem;
  margin: 0 auto 14px;
}
.step-card h3{
  font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.step-card p{
  margin: 0;
  color: var(--text-2);
  font-size: .86rem; line-height: 1.5;
}

/* ============================================================
   TOOLKIT
============================================================ */
.tools-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.tool-card{
  padding: 26px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.tool-card:hover{
  transform: translateY(-3px);
  border-color: rgba(155,123,255,0.40);
  background: rgba(255,255,255,0.05);
}
.tool-icon{
  width: 48px; height: 48px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(109,139,255,0.20), rgba(155,123,255,0.20));
  border: 1px solid rgba(155,123,255,0.30);
  color: var(--brand-2);
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.tool-card h3{
  font-family: var(--display); font-weight: 600;
  font-size: 1.1rem; line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.tool-card p{
  margin: 0;
  color: var(--text-2);
  font-size: .9rem; line-height: 1.55;
}

/* ============================================================
   GENRES
============================================================ */
.genre-cloud{
  display:flex; flex-wrap:wrap; gap: 10px;
  justify-content:center;
  max-width: 900px; margin-inline: auto;
}
.genre-chip{
  display:inline-flex; align-items:center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-2);
  font-size: .94rem;
  font-weight: 600;
  color: var(--text-2);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.genre-chip:hover{
  transform: translateY(-2px) rotate(-1.5deg);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 24px rgba(109,139,255,0.35);
}
.genre-chip:nth-child(5n+2){ background: rgba(109,139,255,0.10); border-color: rgba(109,139,255,0.30); color: var(--brand); }
.genre-chip:nth-child(7n+4){ background: rgba(46,229,179,0.10); border-color: rgba(46,229,179,0.30); color: var(--mint); }
.genre-chip:nth-child(9n+5){ background: rgba(255,101,132,0.10); border-color: rgba(255,101,132,0.30); color: var(--coral); }

/* ============================================================
   VOICES (testimonials)
============================================================ */
.voices{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.voice-card{
  padding: 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--rule-2);
  backdrop-filter: blur(6px);
  margin: 0;
  position:relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.voice-card:hover{
  transform: translateY(-3px);
  border-color: rgba(109,139,255,0.35);
  box-shadow: 0 18px 50px rgba(109,139,255,0.18);
}
.voice-stars{
  display:flex; gap: 3px;
  color: var(--gold);
  font-size: .9rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 6px rgba(255,209,102,0.40));
}
.voice-card blockquote{
  margin: 0 0 20px;
  font-size: 1rem; line-height: 1.6;
  color: var(--text);
  font-weight: 400;
}
.voice-card blockquote::before{
  content:"\201C";
  color: var(--brand);
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  display:block;
  line-height: 0;
  margin-bottom: 18px;
}
.voice-card figcaption{
  display:flex; flex-direction:column; gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.voice-name{
  font-weight: 700;
  color: var(--text);
  font-size: .96rem;
}
.voice-role{
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .04em;
}

/* ============================================================
   FAQ
============================================================ */
.faq-shell{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 64px);
  align-items:flex-start;
}
.faq-left .btn{ margin-top: 18px; }
.faq-right{ display:grid; gap: 10px; }
.qa{
  border-radius: var(--r-md);
  border: 1px solid var(--rule-2);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  overflow:hidden;
  transition: border-color .25s ease, background .25s ease;
}
.qa[open]{ border-color: rgba(109,139,255,0.35); background: rgba(109,139,255,0.06); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  padding: 18px 22px;
  cursor:pointer; list-style:none; user-select:none;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa-q{
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
}
.qa-icon{
  width: 32px; height: 32px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--rule-2);
  color: var(--text);
  font-size: .78rem;
  flex: 0 0 32px;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.qa[open] .qa-icon{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: rotate(45deg);
}
.qa-body{
  padding: 0 22px 20px;
  border-top: 1px solid var(--rule);
}
.qa[open] .qa-body{ padding-top: 16px; }
.qa-body p{
  margin: 0;
  color: var(--text-2);
  font-size: .94rem; line-height: 1.6;
  max-width: 66ch;
}

/* ============================================================
   FINAL CTA
============================================================ */
.cta-section{ padding-bottom: clamp(80px, 10vw, 140px); }
.cta-card{
  position: relative;
  padding: clamp(36px, 6vw, 80px) clamp(28px, 5vw, 60px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(109,139,255,0.10), rgba(155,123,255,0.06)), rgba(255,255,255,0.02);
  border: 1px solid rgba(109,139,255,0.30);
  text-align:center;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.cta-glow{
  position:absolute; inset: -40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(109,139,255,0.40), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(155,123,255,0.30), transparent 50%);
  filter: blur(80px);
  z-index:0; pointer-events:none;
  animation: ctaGlow 12s ease-in-out infinite alternate;
}
@keyframes ctaGlow{
  0%   { transform: translate(0,0); }
  100% { transform: translate(20px, -20px); }
}
.cta-title, .cta-sub, .cta-actions{ position:relative; z-index:1; }
.cta-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 16px;
  text-wrap: balance;
}
.cta-sub{
  margin: 0 auto 28px;
  color: var(--text-2);
  font-size: 1.05rem; line-height: 1.6;
  max-width: 56ch;
}
.cta-actions{
  display:flex; flex-wrap:wrap; gap: 12px;
  justify-content:center;
}

/* ============================================================
   FOOTER — bemusix.com clone (4-col + bottom bar)
============================================================ */
.site-footer{
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule-2);
  background: rgba(5,8,22,0.85);
  backdrop-filter: blur(6px);
  padding-block: 64px 22px;
  color: var(--text-2);
}

.sf-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}

/* Column 01: Brand */
.sf-brand .sf-logo{
  display: inline-flex; align-items: center;
  margin-bottom: 18px;
}
.sf-brand .sf-logo img{ height: 50px; width: auto; }
.sf-tagline{
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.6;
  max-width: 38ch;
}
.sf-tags{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
}
.sf-tags span{
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(109,139,255,0.10);
  border: 1px solid rgba(109,139,255,0.25);
  font-size: .74rem;
  font-weight: 600;
  color: var(--brand);
}
.sf-social{ display: flex; gap: 10px; }
.sf-social a{
  width: 38px; height: 38px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .95rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sf-social a:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* All columns */
.sf-col h4{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  font-family: var(--display);
}
.sf-col > a{
  display: block;
  padding-block: 6px;
  font-size: .92rem;
  color: var(--text-2);
  transition: color .15s ease, padding-left .15s ease;
}
.sf-col > a:hover{ color: var(--brand); padding-left: 4px; }

/* Contact column */
.sf-contact .sf-addr{
  display: flex; flex-direction: column;
  margin-bottom: 16px;
  font-size: .9rem;
  line-height: 1.55;
}
.sf-contact .sf-addr strong{
  color: var(--text);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 4px;
}
.sf-contact .sf-addr span{ color: var(--text-2); }
.sf-contact-list{
  list-style: none;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
  font-size: .9rem;
}
.sf-contact-list li{ display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.sf-contact-list li i{
  width: 16px;
  color: var(--brand);
  font-size: .9em;
  flex: 0 0 16px;
}
.sf-contact-list li a{
  color: var(--text-2);
  transition: color .15s ease;
}
.sf-contact-list li a:hover{ color: var(--brand); }

/* Bottom bar */
.sf-bottom{
  padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: .84rem;
  color: var(--muted);
}
.sf-copy{ color: var(--muted); }
.sf-legal{ display: flex; gap: 22px; flex-wrap: wrap; }
.sf-legal a{
  color: var(--text-2);
  transition: color .15s ease;
}
.sf-legal a:hover{ color: var(--brand); }

/* ============================================================
   FLOATING SUPPORT
============================================================ */
.float-support{
  position: fixed;
  bottom: calc(18px + var(--safe-bottom));
  right: 18px;
  z-index: 95;
  display:inline-flex; align-items:center; gap: 12px;
  padding: 12px 20px 12px 14px;
  background: linear-gradient(135deg, #25D366, #128c47);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-lift), 0 0 0 4px rgba(37,211,102,0.18);
  border: 1px solid rgba(255,255,255,0.20);
  transition: transform .15s ease, box-shadow .15s ease;
  font-weight: 700; font-size: .9rem;
}
.float-support i{ font-size: 1.25rem; }
.float-support:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift), 0 0 0 6px rgba(37,211,102,0.25); }

/* ============================================================
   REVEAL ON SCROLL
============================================================ */
[data-reveal]{
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-reveal].in{ opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE — TABLET
============================================================ */
@media (max-width: 1100px){
  .pillars{ grid-template-columns: 1fr; }
  .benefits-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tools-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .voices{ grid-template-columns: 1fr; }
  .faq-shell{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps::before{ display: none; }

  .sf-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */
@media (max-width: 720px){
  :root{ --gutter: 16px; }

  .hero{ padding-top: 40px; }
  .hero-title{ font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .hero-sub{ font-size: .98rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; width: 100%; }
  .hero-cta .btn{ justify-content:center; }
  .hero-stat-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-mini{ font-size: .8rem; gap: 8px 14px; }
  .hero-orb{ width: 240px; height: 240px; margin-bottom: 40px; }

  .benefits-grid{ grid-template-columns: 1fr; }
  .tools-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }

  .sf-grid{ grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .sf-bottom{ flex-direction: column; align-items: flex-start; }

  .float-support .float-label{ display:none; }
  .float-support{ padding: 12px; border-radius: 50%; }

  .section{ padding-block: clamp(48px, 11vw, 72px); }

  .cta-actions{ flex-direction:column; }
  .cta-actions .btn{ justify-content:center; }

  /* Reduce blob intensity on mobile to save GPU */
  .blob{ filter: blur(70px); opacity: .45; }
  .blob.b3, .blob.b4{ display:none; }
}

@media (max-width: 420px){
  .hero-title{ font-size: clamp(2rem, 11vw, 2.8rem); }
  .pillar-card{ padding: 24px 20px; }
  .voice-card{ padding: 22px; }
}

/* ============================================================
   MOTION PREFERENCES
============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
  .blob, .star-layer{ display:none; }
}

/* Focus rings */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   BLOG PAGE — bp-* namespace
============================================================ */
.scroll-progress-wrap{
  position: fixed; inset: 0 0 auto 0; height: 3px;
  z-index: 99999;
  background: rgba(255,255,255,0.04);
}
.scroll-progress{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--coral));
  box-shadow: 0 0 14px rgba(109,139,255,0.55);
  transition: width .12s linear;
}

.bp-reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.bp-reveal.in{ opacity: 1; transform: none; }

.bp-hero{
  padding-block: clamp(70px, 9vw, 110px) clamp(40px, 5vw, 70px);
  text-align: center; position: relative;
}
.bp-hero .hero-tag{ margin-bottom: 22px; }

.bp-stage{
  position: relative; margin: 32px auto 0;
  max-width: 980px;
  border-radius: 24px;
  border: 1px solid var(--rule-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--surface);
  padding: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(109,139,255,0.08);
}
.bp-stage-inner{
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--space-2));
  border: 1px solid var(--rule);
  overflow: hidden; position: relative;
}
.bp-window{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,0.02);
}
.bp-dots{ display: flex; gap: 6px; flex: 0 0 auto; }
.bp-dots span{ width: 10px; height: 10px; border-radius: 50%; }
.bp-dots span:nth-child(1){ background: #ff6058; }
.bp-dots span:nth-child(2){ background: #ffbd2e; }
.bp-dots span:nth-child(3){ background: #28ca41; }
.bp-url{
  margin-left: 8px; flex: 1 1 0; min-width: 0;
  font-size: .78rem; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--rule);
  padding: 5px 10px; border-radius: 8px;
  font-family: ui-monospace, monospace;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-url i{ color: var(--brand); font-size: .74rem; flex: 0 0 auto; }

.bp-stage-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px; padding: 22px;
  text-align: left;
}
.bp-stage-left h3{
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 8px;
  color: var(--text);
}
.bp-stage-left > p{ color: var(--muted); margin: 0 0 18px; font-size: .92rem; }

.bp-search{ display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }
.bp-search-input{
  position: relative;
  display: flex; align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  height: 44px;
  padding: 0 12px 0 36px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bp-search-input:focus-within{
  border-color: rgba(109,139,255,0.55);
  box-shadow: 0 0 0 3px rgba(109,139,255,0.18);
}
.bp-search-input > i{
  position: absolute; left: 12px;
  color: var(--brand);
  font-size: .84rem; pointer-events: none;
}
.bp-search-input input{
  flex: 1; border: 0; background: transparent;
  color: var(--text); outline: none;
  min-width: 0; height: 100%; font-size: .9rem;
}
.bp-search-input input::placeholder{ color: var(--muted-2); }
.bp-submit{ height: 44px; border-radius: 10px; padding: 0 14px; font-size: .84rem; min-height: 44px; }

.bp-chip-row{ grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bp-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.35);
  color: var(--brand);
  font-size: .76rem; font-weight: 600;
}
.bp-chip i{ font-size: .74rem; }
.bp-chip a{
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--muted); font-size: .6rem;
  margin-left: 2px;
}
.bp-chip a:hover{ background: rgba(255,255,255,0.18); color: #fff; }
.bp-chip-reset{
  background: var(--surface-2);
  border-color: var(--rule-2);
  color: var(--text);
}

.bp-feat-list{ display: grid; gap: 8px; margin: 0 0 18px; padding-left: 0; list-style: none; }
.bp-feat-list li{
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; color: var(--text-2);
}
.bp-feat-list li i{
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(109,139,255,0.14);
  color: var(--brand);
  font-size: .62rem;
  border: 1px solid rgba(109,139,255,0.32);
  flex: 0 0 22px;
}
.bp-mini-meta{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.bp-meta-cell{
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-3);
  border: 1px solid var(--rule-2);
  min-width: 0;
}
.bp-meta-cell .num{
  display: block;
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--brand);
}
.bp-meta-cell .lbl{
  display: block;
  font-size: .7rem; color: var(--muted);
  margin-top: 2px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}

.bp-stage-right{
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.bp-stage-right h4{
  font-size: .78rem; color: var(--muted);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bp-live{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mint);
  background: rgba(46,229,179,0.10);
  border: 1px solid rgba(46,229,179,0.30);
  padding: 3px 8px; border-radius: 999px;
  font-size: .66rem;
}
.bp-live i{ font-size: .5rem; animation: heroDot 2s ease infinite; }
.bp-row{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--rule);
  font-size: .84rem; min-width: 0;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
}
.bp-row:hover{ transform: translateX(2px); border-color: rgba(109,139,255,0.30); }
.bp-row-ic{
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  font-size: .78rem;
  flex: 0 0 36px;
  overflow: hidden;
}
.bp-row-ic img{ width: 100%; height: 100%; object-fit: cover; }
.bp-row-text{ flex: 1; min-width: 0; }
.bp-row-text b{
  display: block; font-size: .85rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.bp-row-text small{
  display: block; font-size: .7rem;
  color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-row-tag{
  font-size: .66rem; font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand);
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.30);
  padding: 3px 7px; border-radius: 6px;
  text-transform: uppercase; flex: 0 0 auto;
}

.bp-logo-strip{
  background: rgba(0,0,0,0.30);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  position: relative; overflow: hidden;
}
.bp-logo-strip::before, .bp-logo-strip::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.bp-logo-strip::before{ left: 0; background: linear-gradient(90deg, rgba(0,0,0,0.6), transparent); }
.bp-logo-strip::after{ right: 0; background: linear-gradient(-90deg, rgba(0,0,0,0.6), transparent); }
.bp-logo-track{
  display: flex; align-items: center; gap: 62px;
  width: max-content;
  animation: marqueeScroll 50s linear infinite;
  will-change: transform;
}
.bp-logo-track img{
  height: 36px;
  opacity: .55;
  filter: grayscale(1) brightness(1.4) contrast(.95);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.bp-logo-track img:hover{
  opacity: 1; filter: none;
  transform: translateY(-2px) scale(1.05);
}

.bp-stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bp-stat{
  border-radius: 24px;
  padding: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.bp-stat:hover{ transform: translateY(-3px); border-color: rgba(109,139,255,0.35); }
.bp-stat-ic{
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.25);
  color: var(--brand);
  font-size: 1.1rem;
  margin: 0 auto 14px;
}
.bp-stat-num{
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 900; letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #b9c4ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bp-stat-lbl{
  display: block; margin-top: 8px;
  font-size: .85rem; color: var(--muted);
  font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}

.bp-topic-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.bp-topic{
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.bp-topic::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.bp-topic:hover{
  transform: translateY(-3px);
  border-color: rgba(109,139,255,0.35);
  box-shadow: 0 22px 60px rgba(109,139,255,0.18);
}
.bp-topic:hover::before{ opacity: 1; }
.bp-topic-ic{
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.15rem;
  margin-bottom: 14px;
  border: 1px solid var(--rule-2);
}
.bp-topic h3{ margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.bp-topic p{ margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.bp-tone-green  .bp-topic-ic{ background: rgba(46,229,179,0.12);  color: var(--mint);    border-color: rgba(46,229,179,0.30); }
.bp-tone-blue   .bp-topic-ic{ background: rgba(109,139,255,0.14); color: var(--brand);   border-color: rgba(109,139,255,0.32); }
.bp-tone-purple .bp-topic-ic{ background: rgba(155,123,255,0.14); color: var(--brand-2); border-color: rgba(155,123,255,0.32); }
.bp-tone-orange .bp-topic-ic{ background: rgba(255,209,102,0.12); color: var(--gold);    border-color: rgba(255,209,102,0.30); }
.bp-tone-pink   .bp-topic-ic{ background: rgba(255,101,132,0.14); color: var(--coral);   border-color: rgba(255,101,132,0.32); }

.bp-filter-sticky{
  position: sticky; top: 96px; z-index: 30;
  background: rgba(7,10,22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0; margin-bottom: 24px;
}
@media (max-width: 992px){ .bp-filter-sticky{ top: 76px; } }
.bp-filter-shell{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bp-cat-track{
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  flex: 1; min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,139,255,0.4) transparent;
}
.bp-cat-track::-webkit-scrollbar{ height: 4px; }
.bp-cat-track::-webkit-scrollbar-thumb{ background: rgba(109,139,255,0.4); border-radius: 4px; }
.bp-cat-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .86rem; font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
}
.bp-cat-btn small{
  font-family: ui-monospace, monospace;
  font-size: .66rem;
  background: rgba(255,255,255,0.05);
  padding: 2px 7px; border-radius: 6px;
  color: var(--muted);
  font-weight: 700;
}
.bp-cat-btn:hover{ background: var(--surface-3); color: #fff; border-color: var(--rule-3); }
.bp-cat-btn.active{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(109,139,255,0.35);
}
.bp-cat-btn.active small{ background: rgba(255,255,255,0.20); color: #fff; }

.bp-toolbar{
  display: flex; gap: 6px;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
}
.bp-tbar-btn{
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: transparent; border: 0;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.bp-tbar-btn:hover{ background: var(--surface-3); color: #fff; }
.bp-tbar-btn.active{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 6px 16px rgba(109,139,255,0.35);
}

.bp-notice{
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(109,139,255,0.10), rgba(109,139,255,0.02));
  border: 1px solid rgba(109,139,255,0.30);
  margin-bottom: 18px;
}
.bp-notice i{ color: var(--brand); font-size: 1.05rem; }
.bp-notice b{ display: block; color: #fff; font-size: .92rem; font-weight: 800; }
.bp-notice span{ color: var(--text-2); font-size: .84rem; }

.bp-sec-row{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 24px; flex-wrap: wrap;
}
.bp-summary{ display: flex; flex-wrap: wrap; gap: 8px; }
.bp-summary-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .78rem; font-weight: 600;
}
.bp-summary-chip i{ color: var(--brand); font-size: .74rem; }

.bp-empty{
  text-align: center;
  padding: 48px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
}
.bp-empty-ic{
  width: 64px; height: 64px;
  border-radius: 18px;
  display: grid; place-items: center;
  margin: 0 auto 12px;
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.30);
  color: var(--brand);
  font-size: 1.5rem;
}
.bp-empty h3{ font-weight: 800; margin: 6px 0; font-size: 1.2rem; color: var(--text); }
.bp-empty p{ color: var(--muted); font-size: .92rem; margin-bottom: 16px; }
.bp-empty-actions{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.bp-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bp-grid.compact{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bp-grid.compact .bp-card-body{ padding: 16px; }
.bp-grid.compact .bp-card-title{ font-size: 1rem; -webkit-line-clamp: 3; }
.bp-grid.compact .bp-card-image{ aspect-ratio: 4/3; }

.bp-col{ display: flex; }
.bp-card{
  display: flex; flex-direction: column;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.bp-card::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0; transition: opacity .25s ease;
  z-index: 3;
}
.bp-card:hover{
  transform: translateY(-3px);
  border-color: rgba(109,139,255,0.35);
  box-shadow: 0 22px 60px rgba(109,139,255,0.18);
}
.bp-card:hover::before{ opacity: 1; }
.bp-card-image{
  position: relative; aspect-ratio: 16/10;
  overflow: hidden; display: block;
  background: var(--surface-3);
}
.bp-card-image img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.bp-card:hover .bp-card-image img{ transform: scale(1.06); }
.bp-card-cat{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(7,10,22,0.78);
  border: 1px solid rgba(109,139,255,0.45);
  color: var(--brand);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.bp-card-cat i{ color: var(--brand); font-size: .66rem; }
.bp-card-shade{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7,10,22,0.78) 100%);
  pointer-events: none;
}
.bp-card-body{ padding: 20px; display: flex; flex-direction: column; flex: 1; }
.bp-card-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: var(--muted); font-size: .78rem;
  margin-bottom: 10px;
}
.bp-card-meta i{ color: var(--brand); font-size: .74rem; }
.bp-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
.bp-card-meta span{ display: inline-flex; align-items: center; gap: 5px; }
.bp-card-title{
  color: var(--text);
  font-size: 1.12rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.32;
  margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-card-title a{ color: inherit; transition: color .2s ease; }
.bp-card-title a:hover{ color: var(--brand); }
.bp-card-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bp-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  color: var(--text-2);
  font-size: .72rem; font-weight: 600;
}
.bp-tag i{ color: var(--brand); font-size: .6rem; }
.bp-card-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.bp-read{
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--brand);
  font-weight: 700; font-size: .86rem;
}
.bp-read i{ font-size: .76rem; transition: transform .2s ease; }
.bp-read:hover i{ transform: translateX(3px); }
.bp-mini-cta{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.28);
  color: var(--brand);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.bp-mini-cta i{ font-size: .66rem; }

.bp-pager{
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 30px 0;
  flex-wrap: wrap;
}
.bp-pg{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-weight: 700; font-size: .84rem;
  transition: all .15s ease;
}
.bp-pg:hover{
  background: var(--surface-3); color: #fff;
  border-color: var(--rule-3);
  transform: translateY(-1px);
}
.bp-pg[aria-disabled="true"]{ opacity: .45; pointer-events: none; }
.bp-pg i{ font-size: .7rem; color: var(--brand); }
.bp-pg-now{
  padding: 9px 14px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-family: ui-monospace, monospace;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(109,139,255,0.30);
}

.bp-compare{
  border-radius: 24px;
  background: radial-gradient(800px 200px at 50% -10%, rgba(109,139,255,0.10), transparent 60%),
              linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
}
.bp-compare-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.bp-compare-head h3{
  margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--text);
}
.bp-compare-head p{ margin: 6px 0 0; color: var(--text-2); font-size: .94rem; max-width: 48ch; }
.bp-compare-tag{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(109,139,255,0.12);
  border: 1px solid rgba(109,139,255,0.32);
  color: var(--brand);
  font-weight: 800; font-size: .8rem;
}
.bp-compare-list{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px; list-style: none;
  padding: 0; margin: 0;
}
.bp-compare-list li{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  transition: background .15s ease;
  min-width: 0;
}
.bp-compare-list li:hover{ background: rgba(255,255,255,0.03); }
.bp-check{
  width: 24px; height: 24px; min-width: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-size: .66rem;
  box-shadow: 0 0 0 4px rgba(109,139,255,0.12);
  flex: 0 0 24px;
}
.bp-compare-list b{ font-size: .92rem; font-weight: 700; display: block; line-height: 1.2; color: var(--text); }
.bp-compare-list small{ display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

.bp-cta-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.bp-cta-box{
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  transition: transform .2s ease, border-color .2s ease;
}
.bp-cta-box:hover{ transform: translateY(-2px); border-color: rgba(109,139,255,0.35); }
.bp-cta-box h4{ margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.005em; color: var(--text); }
.bp-cta-box p{ margin: 0 0 12px; color: var(--text-2); font-size: .88rem; line-height: 1.55; }

.bp-newsletter{
  margin-top: 32px;
  padding: 32px;
  border-radius: 24px;
  background:
    radial-gradient(800px 280px at 0% 0%, rgba(109,139,255,0.14), transparent 70%),
    radial-gradient(800px 280px at 100% 100%, rgba(155,123,255,0.10), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 24px; align-items: center;
  position: relative; overflow: hidden;
}
.bp-newsletter::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
}
.bp-newsletter h3{
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  line-height: 1.18;
  color: var(--text);
}
.bp-newsletter p{ margin: 0; color: var(--text-2); font-size: .96rem; line-height: 1.6; }
.bp-nl-feats{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bp-nl-feats span{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .74rem; font-weight: 600;
}
.bp-nl-feats span i{ color: var(--brand); font-size: .7rem; }
.bp-nl-form{ display: flex; gap: 8px; flex-wrap: wrap; }
.bp-nl-form input{
  flex: 1; min-width: 180px;
  height: 48px; padding: 0 14px;
  border-radius: 12px;
  background: var(--surface-3);
  border: 1px solid var(--rule-2);
  color: var(--text);
  outline: none;
  font-size: .94rem;
}
.bp-nl-form input::placeholder{ color: var(--muted-2); }
.bp-nl-form input:focus{ border-color: rgba(109,139,255,0.55); box-shadow: 0 0 0 3px rgba(109,139,255,0.18); }
.bp-nl-form .btn{ height: 48px; }
.bp-nl-note{
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: .74rem; margin-top: 8px;
  grid-column: 1/-1;
}
.bp-nl-note i{ color: var(--brand); }

.bp-faq{
  margin-top: 32px;
  padding: 30px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
}
.bp-faq-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bp-faq-head i{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(109,139,255,0.12);
  color: var(--brand);
  font-size: 1.1rem;
  border: 1px solid rgba(109,139,255,0.25);
}
.bp-faq-head h3{
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.012em;
  color: var(--text);
  margin: 0;
}
.bp-faq-item{
  border-radius: 16px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--rule-2);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.bp-faq-item.open{
  border-color: rgba(109,139,255,0.45);
  background: rgba(109,139,255,0.06);
}
.bp-faq-btn{
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  width: 100%; padding: 16px 18px;
  cursor: pointer;
  background: transparent; border: 0;
  color: var(--text);
  font-weight: 700; font-size: .95rem;
  text-align: left;
}
.bp-faq-btn span:first-child{ flex: 1; }
.bp-faq-chev{
  width: 30px; height: 30px;
  border-radius: 9px;
  flex: 0 0 30px;
  display: grid; place-items: center;
  background: rgba(109,139,255,0.14);
  color: var(--brand);
  font-size: .78rem;
  border: 1px solid rgba(109,139,255,0.30);
  transition: all .25s ease;
}
.bp-faq-item.open .bp-faq-chev{
  background: var(--brand); color: #fff;
  border-color: transparent;
  transform: rotate(45deg);
}
.bp-faq-panel{
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  color: var(--text-2);
  font-size: .9rem; line-height: 1.7;
}
.bp-faq-item.open .bp-faq-panel{ max-height: 500px; padding: 0 18px 16px; }

.bp-fab-wrap{
  position: fixed;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0));
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
}
.bp-fab{
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 14px 30px rgba(37,211,102,0.40);
  display: grid; place-items: center;
  transition: transform .2s ease;
  position: relative;
}
.bp-fab:hover{ transform: scale(1.06); }
.bp-fab::before{
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,211,102,0.40), transparent 70%);
  animation: fabPulse 2.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes fabPulse{ 0%,100%{ transform: scale(1); opacity: .6 } 50%{ transform: scale(1.18); opacity: .95 } }
.bp-bubble{
  position: absolute; right: 0; bottom: 74px;
  width: 300px; padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .86rem; line-height: 1.55;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.bp-bubble.active{ opacity: 1; visibility: visible; transform: translateY(0); }
.bp-bubble p{ color: var(--text); font-weight: 600; margin: 0 0 10px; }
.bp-bubble-actions{ display: flex; flex-direction: column; gap: 6px; }
.bp-sbtn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  font-weight: 700; font-size: .84rem;
}
.bp-sbtn-wa{ background: rgba(37,211,102,0.14); border: 1px solid rgba(37,211,102,0.32); color: #86efac; }
.bp-sbtn-mail{ background: rgba(109,139,255,0.14); border: 1px solid rgba(109,139,255,0.30); color: var(--brand); }

.bp-back-top{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  display: none; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 12px 24px rgba(109,139,255,0.40);
  transition: transform .2s ease;
}
.bp-back-top.show{ display: grid; }
.bp-back-top:hover{ transform: translateY(-3px); }

.bp-mobile-cta{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(180deg, rgba(7,10,22,0), rgba(7,10,22,0.92) 30%);
  backdrop-filter: blur(10px);
}
.bp-mobile-cta .inner{
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
}
.bp-mobile-cta .txt{
  color: var(--text); font-weight: 800; font-size: .86rem;
  display: flex; flex-direction: column; line-height: 1.2;
}
.bp-mobile-cta .txt span{ color: var(--muted); font-size: .7rem; font-weight: 600; margin-top: 2px; }

@media (max-width: 1100px){
  .bp-stage-grid{ grid-template-columns: 1fr; gap: 18px; }
  .bp-topic-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bp-grid.compact{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bp-compare-list{ grid-template-columns: 1fr; }
  .bp-cta-grid{ grid-template-columns: 1fr; gap: 14px; }
  .bp-newsletter{ grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px){
  .bp-stats-row{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .bp-filter-shell{ flex-direction: column; align-items: stretch; }
  .bp-toolbar{ justify-content: center; }
  .bp-grid, .bp-grid.compact{ grid-template-columns: 1fr; gap: 14px; }
  .bp-topic-grid{ grid-template-columns: 1fr; }
  .bp-mobile-cta{ display: block; }
  .bp-fab-wrap{ bottom: calc(78px + env(safe-area-inset-bottom, 0)); }
  .bp-search{ grid-template-columns: 1fr; }
  .bp-submit{ width: 100%; }
}
@media (max-width: 640px){
  .bp-stage{ padding: 10px; }
  .bp-stage-grid{ padding: 16px; gap: 14px; }
  .bp-mini-meta{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .bp-stat{ padding: 18px 14px; }
  .bp-compare, .bp-faq, .bp-newsletter{ padding: 20px; }
  .bp-compare-head{ flex-direction: column; align-items: flex-start; }
  .bp-pager{ gap: 6px; }
  .bp-pg{ padding: 8px 12px; font-size: .78rem; }
  input, select, textarea{ font-size: 16px !important; }
  .bp-cta-box{ padding: 18px; }
}
@media print{
  .scroll-progress-wrap, .bp-fab-wrap, .bp-mobile-cta, .bp-filter-sticky, .bp-logo-strip{ display: none !important; }
}

/* ============================================================
   BLOG DETAIL PAGE — bd-* namespace
============================================================ */
.bd-section{ padding-block: clamp(40px, 6vw, 80px); position: relative; }

/* HERO */
.bd-hero{
  padding-block: clamp(60px, 8vw, 100px) clamp(20px, 3vw, 40px);
  text-align: center;
}
.bd-crumb{
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; font-size: .82rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.bd-crumb a{
  color: var(--text-2);
  transition: color .15s ease;
}
.bd-crumb a:hover{ color: var(--brand); }
.bd-crumb span{ color: var(--rule-3); }

.bd-category{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(109,139,255,0.10);
  border: 1px solid rgba(109,139,255,0.32);
  color: var(--brand);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px;
}
.bd-category i{ font-size: .74rem; }

.bd-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 auto 16px;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--text);
}
.bd-excerpt{
  margin: 0 auto 22px;
  max-width: 56ch;
  color: var(--text-2);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
}

.bd-meta{
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 28px); flex-wrap: wrap;
  padding: 14px 0 0;
}
.bd-author{
  display: inline-flex; align-items: center; gap: 10px;
}
.bd-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: .96rem;
  box-shadow: 0 10px 24px rgba(109,139,255,0.40);
}
.bd-avatar--lg{ width: 64px; height: 64px; font-size: 1.4rem; flex: 0 0 64px; }
.bd-author-text{ display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.bd-author-name{ font-weight: 700; color: var(--text); font-size: .92rem; }
.bd-author-role{
  font-size: .72rem; color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 600;
}

.bd-meta-stats{
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text-2);
  font-size: .85rem;
}
.bd-meta-stats span{ display: inline-flex; align-items: center; gap: 6px; }
.bd-meta-stats i{ color: var(--brand); font-size: .82rem; }
.bd-dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

/* COVER IMAGE */
.bd-cover-wrap{ padding-block: clamp(20px, 3vw, 36px); }
.bd-cover{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--rule-2);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  aspect-ratio: 16/8;
}
.bd-cover img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bd-cover-shade{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7,10,22,0.55) 100%);
}

/* ARTICLE BODY */
.bd-article{ padding-block: clamp(40px, 5vw, 70px); }
.bd-article-grid{
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  max-width: 900px;
  margin-inline: auto;
}
.bd-share-rail{
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: center;
}
.bd-share-label{
  font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.bd-share-btn{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bd-share-btn:hover{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}
.bd-share-btn.is-copied{
  background: var(--mint);
  color: #052; border-color: transparent;
}

.bd-body{ min-width: 0; }
.bd-body > * + *{ margin-top: 1.1em; }

.bd-h2{
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 1.6em 0 0.6em;
  color: var(--text);
  position: relative;
  padding-left: 18px;
}
.bd-h2::before{
  content: "";
  position: absolute;
  left: 0; top: .35em; bottom: .35em;
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.bd-h3{
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 1.4em 0 0.5em;
  color: var(--text);
}
.bd-p{
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 70ch;
}
.bd-list{
  list-style: none;
  padding-left: 0;
  margin-block: 1.1em;
  max-width: 70ch;
}
.bd-list li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.5em;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-2);
}
.bd-list li::before{
  content: "";
  position: absolute;
  left: 6px; top: 0.7em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(109,139,255,0.55);
}
.bd-list--num{ counter-reset: bditem; }
.bd-list--num li{ padding-left: 40px; }
.bd-list--num li::before{
  counter-increment: bditem;
  content: counter(bditem);
  left: 0; top: 0.2em;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(109,139,255,0.40);
  display: grid; place-items: center;
  color: #fff;
  font-size: .8rem; font-weight: 800;
  font-family: ui-monospace, monospace;
}

.bd-quote{
  margin: 1.8em 0;
  padding: 22px 24px 22px 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(109,139,255,0.10), rgba(155,123,255,0.08));
  border: 1px solid rgba(109,139,255,0.30);
  position: relative;
  max-width: 70ch;
}
.bd-quote i{
  position: absolute;
  left: 22px; top: 22px;
  color: var(--brand);
  font-size: 1.3rem;
}
.bd-quote p{
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--text);
}

.bd-note{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  margin: 1.5em 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(46,229,179,0.08), rgba(46,229,179,0.02));
  border: 1px solid rgba(46,229,179,0.30);
  max-width: 70ch;
}
.bd-note i{
  color: var(--mint);
  font-size: 1rem;
  padding-top: 3px;
}
.bd-note p{
  margin: 0;
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.6;
}

/* Tags + Share inline */
.bd-tags-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 2.6em;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.bd-tags-label{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.bd-tags-label i{ color: var(--brand); }
.bd-tag{
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-2);
  color: var(--text-2);
  font-size: .8rem; font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bd-tag:hover{
  background: rgba(109,139,255,0.10);
  border-color: rgba(109,139,255,0.32);
  color: var(--brand);
  transform: translateY(-1px);
}

.bd-share-inline{
  margin-top: 2em;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.bd-share-inline .bd-share-label{
  display: block;
  writing-mode: horizontal-tb;
  transform: none;
  text-align: left;
  margin-bottom: 12px;
}
.bd-share-inline-row{ display: flex; gap: 8px; flex-wrap: wrap; }

/* Author box */
.bd-author-box{
  margin-top: 2.6em;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
}
.bd-author-info p{
  color: var(--text-2);
  font-size: .94rem;
  line-height: 1.6;
  margin: 6px 0 10px;
}
.bd-author-link{
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--brand);
  font-weight: 700; font-size: .9rem;
}
.bd-author-link i{ font-size: .76rem; transition: transform .15s ease; }
.bd-author-link:hover i{ transform: translateX(3px); }

/* Prev / next */
.bd-prevnext{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bd-pn{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bd-pn:hover{
  transform: translateY(-3px);
  border-color: rgba(109,139,255,0.40);
  box-shadow: 0 18px 40px rgba(109,139,255,0.20);
}
.bd-pn--next{ text-align: right; justify-content: flex-end; }
.bd-pn--next div{ text-align: right; }
.bd-pn-arrow{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 1rem;
  flex: 0 0 44px;
  box-shadow: 0 10px 22px rgba(109,139,255,0.40);
  transition: transform .2s ease;
}
.bd-pn:hover .bd-pn-arrow{ transform: scale(1.06); }
.bd-pn-label{
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.bd-pn-title{
  display: block;
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* Final CTA */
.bd-final-cta{
  position: relative;
  padding: clamp(36px, 5vw, 68px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(109,139,255,0.10), rgba(155,123,255,0.06)), rgba(255,255,255,0.02);
  border: 1px solid rgba(109,139,255,0.32);
  text-align: center;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.bd-final-glow{
  position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(109,139,255,0.40), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(155,123,255,0.30), transparent 50%);
  filter: blur(80px);
  z-index: 0; pointer-events: none;
  animation: ctaGlow 12s ease-in-out infinite alternate;
}
.bd-final-cta h2{
  position: relative; z-index: 1;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--text);
}
.bd-final-cta p{
  position: relative; z-index: 1;
  margin: 0 auto 26px;
  max-width: 56ch;
  color: var(--text-2);
  font-size: 1rem; line-height: 1.6;
}
.bd-final-actions{
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}

/* 404 inline panel */
.bd-404{
  max-width: 600px; margin-inline: auto;
  text-align: center;
  padding: 48px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
}
.bd-404-num{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.bd-404 h1{
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.bd-404 p{
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
}
.bd-404-id code{
  font-family: ui-monospace, monospace;
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  color: var(--brand);
  font-size: .9em;
}

/* Blog detail — responsive */
@media (max-width: 900px){
  .bd-article-grid{ grid-template-columns: 1fr; gap: 24px; }
  .bd-share-rail{
    position: static;
    flex-direction: row; flex-wrap: wrap;
    justify-content: flex-start;
  }
  .bd-share-rail .bd-share-label{
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0 4px 0 0;
    align-self: center;
  }
  .bd-prevnext{ grid-template-columns: 1fr; }
  .bd-pn--next{ justify-content: space-between; text-align: left; }
  .bd-pn--next div{ text-align: left; }
}
@media (max-width: 640px){
  .bd-cover{ aspect-ratio: 16/10; border-radius: 18px; }
  .bd-h2{ padding-left: 14px; }
  .bd-quote{ padding: 18px 18px 18px 50px; }
  .bd-quote i{ left: 18px; top: 18px; }
  .bd-author-box{ grid-template-columns: 1fr; text-align: center; }
  .bd-author-box .bd-avatar--lg{ margin-inline: auto; }
  .bd-final-actions{ flex-direction: column; }
  .bd-final-actions .btn{ justify-content: center; }
  .bd-meta-stats{ font-size: .8rem; }
}

@media print{
  .bd-share-rail, .bd-share-inline, .bd-final-cta, .bd-prevnext{ display: none !important; }
  .bd-article-grid{ grid-template-columns: 1fr; }
}