/* ===== Blog Page Styles (bright hero + smooth reveals) ===== */

/* ===== Base ===== */
:root{
  /* Updated orange palette */
  --orange:#ffa500;
  --orange2:#ffa500;

  /* Blog hero tokens */
  --b-o1: var(--orange);
  --b-o2: var(--orange2);
  --b-ink:#0f172a;
  --b-muted:#475569;

  /* Light hero gradient */
  --b-top:#fff6ef;
  --b-bot:#ffffff;

  /* Light overlay (for dark text on images) */
  --b-ov-top: rgba(255,255,255,.88);
  --b-ov-mid: rgba(255,255,255,.78);
  --b-ov-bot: rgba(255,255,255,.68);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a; background:#0d0f15; line-height:1.6;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(100% - 48px, 1180px); margin-inline:auto }

/* NOTE: Header and Footer styles come from css/style.css.
   We intentionally do not override .site-header or .site-footer here. */

/* ===== Blog — Hero (shorter, bright, eye-catching) ===== */
.bl-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height: clamp(46vh, 56vh, 62vh);
  display:grid; place-items:center;
  color: var(--b-ink);
  /* Light background gradient + soft orange glows under the image */
  background:
    radial-gradient(900px 380px at 18% 8%, rgba(255,165,0,.16), transparent 60%),
    radial-gradient(900px 380px at 85% 92%, rgba(255,165,0,.10), transparent 60%),
    linear-gradient(180deg, var(--b-top), var(--b-bot));
}
.bl-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero);
  background-size: cover;
  background-position: var(--pos, center 40%);
  filter: saturate(108%) contrast(108%) brightness(1.02);
  transform: scale(1.02);
  animation: blKB 20s ease-in-out infinite alternate;
}
.bl-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Lightening overlay for dark text readability */
  background:
    linear-gradient(180deg, var(--b-ov-top) 0%, var(--b-ov-mid) 60%, var(--b-ov-bot) 100%);
}
@keyframes blKB{
  0%{ transform: scale(1.02) translate3d(-1%, -1%, 0) }
  100%{ transform: scale(1.06) translate3d(1%, .5%, 0) }
}

.blh-inner{
  position:relative; z-index:1;
  width:min(100% - 48px, 1180px);
  display:grid; gap:12px; justify-items:start; text-align:left;
  padding-block: clamp(36px, 10vh, 72px);
}

.blh-kicker{
  display:inline-block; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(90deg, #ff9c54, #ffdfc6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:14px; margin-bottom:6px;
  opacity:0; transform: translateY(-8px); animation: blIn .5s ease .05s forwards;
}

.blh-title{ margin:0 0 8px; font-weight:900; line-height:1.04; font-size: clamp(30px, 5vw, 56px) }
.blh-title .w{
  display:inline-block; margin-right:.35ch;
  background-image: linear-gradient(90deg, #111, #444, #111);
  background-size:200% 100%; background-position:0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px);
  animation: blWord .6s cubic-bezier(.2,.7,.2,1) forwards, blShine 6s ease-in-out 1.2s infinite alternate;
  animation-delay: calc(var(--i,0) * 70ms + 80ms), 0s;
}
.blh-title .w:last-child{ margin-right:0 }
.blh-title::after{
  content:""; display:block; height:4px; width:0; margin-top:10px;
  background: linear-gradient(90deg, var(--b-o1), var(--b-o2));
  border-radius:999px; box-shadow:0 10px 28px rgba(255,165,0,.28);
  animation: blLine .8s ease .4s forwards;
}

.blh-sub{
  margin:6px 0 10px; color:var(--b-muted); max-width: 860px;
  opacity:0; transform: translateY(10px); animation: blIn .5s ease .14s forwards;
}

.bl-search{
  position:relative; display:flex; align-items:center; gap:8px; width:min(100%, 720px);
  background: rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 10px 10px 14px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  opacity:0; transform: translateY(10px); animation: blIn .5s ease .22s forwards;
}
.bl-search input{ flex:1; background:transparent; border:0; outline:none; color:#0f172a; font:inherit }
.bl-search input::placeholder{ color:#64748b }
.bl-search button{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; border:0; cursor:pointer;
  color:#111; background: linear-gradient(90deg, var(--b-o1), var(--b-o2));
  box-shadow:0 10px 24px rgba(255,165,0,.25); transition:.2s
}
.bl-search button:hover{ transform: translateY(-1px) }

.bl-tags{ list-style:none; padding:0; margin:12px 0 0; display:flex; gap:10px; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px;
  border-radius:999px; font-weight:900; color:#0f172a; background:#fff;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 26px rgba(0,0,0,.10);
  transition:.18s ease
}
.chip:hover{ transform: translateY(-2px) }
.chip.is-active{
  color:#111; background: linear-gradient(90deg, var(--b-o1), var(--b-o2));
  border-color: transparent; box-shadow:0 14px 30px rgba(255,165,0,.28)
}

/* Subtle orbs (light) */
.bl-orb{ position:absolute; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,165,0,.26), rgba(255,165,0,.12) 60%, transparent 70%);
  filter: blur(6px); animation: blDrift 12s ease-in-out infinite alternate
}
.orb-a{ width:220px; height:220px; left:-70px; top:20% }
.orb-b{ width:280px; height:280px; right:-90px; bottom:12%; animation-delay:.8s }
@keyframes blDrift{ 0%{ transform: translate(0,0) } 100%{ transform: translate(14px,-10px) } }

@keyframes blIn{ to{ opacity:1; transform:none } }
@keyframes blWord{ to{ opacity:1; transform:none; filter:none } }
@keyframes blShine{ to{ background-position: 100% 0 } }
@keyframes blLine{ to{ width: 160px } }

@media (max-width:640px){
  .bl-hero{ min-height: 48vh }
}

/* ===== Post Grid ===== */
:root{ --b-bg1:#ffffff; --b-bg2:#fff8f2; --b-ink:#0f172a; --b-muted:#475569 }
.bl-list{ background: linear-gradient(180deg, var(--b-bg1), var(--b-bg2)); color: var(--b-ink); padding: clamp(56px, 9vh, 84px) 0 }
.bl-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:1000px){ .bl-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .bl-grid{ grid-template-columns:1fr } }

.bl-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  opacity:0; transform: translateY(16px) scale(.98);
  animation: blCardIn .55s cubic-bezier(.22,.9,.35,1) calc(var(--i,0)*120ms + 100ms) forwards
}
@keyframes blCardIn{ to{ opacity:1; transform:none } }
.bl-card__link{ display:block; color:inherit; text-decoration:none }
.bl-media{ position:relative; aspect-ratio:16/9; background:#f5f7fb; overflow:hidden }
.bl-media img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform 6s ease, filter .35s ease }
.bl-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); opacity:.0; transition: opacity .35s ease }
.bl-tag{
  position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; color:#111;
  background: linear-gradient(90deg, #ffdaba, #fff0e2); box-shadow:0 8px 18px rgba(0,0,0,.20);
  transform: translateY(6px); opacity:0; transition:.35s ease
}
.bl-body{ padding:14px 16px 16px }
.bl-name{ margin:0 0 6px; font-weight:900; font-size:18px; color:#0f172a }
.bl-excerpt{ margin:0 0 10px; color:var(--b-muted); font-weight:700 }
.bl-meta{ display:flex; gap:8px; align-items:center; color:#64748b; font-weight:800; font-size:13px }
.bl-meta .dot{ color:#9aa0a6 }

@media (hover:hover) and (pointer:fine){
  .bl-card:hover .bl-media img{ transform: scale(1.08); filter: saturate(110%) contrast(104%) }
  .bl-card:hover .bl-media::after{ opacity:1 }
  .bl-card:hover .bl-tag{ transform: translateY(0); opacity:1 }
  .bl-card:hover{ transform: translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,.12) }
}

/* ===== Blog Page Styles (hero, posts, editor’s picks, newsletter) ===== */

/* ===== Theme tokens ===== */
:root{
  --orange:#ffa500;
  --orange2:#ffa500;

  /* Blog hero tokens */
  --b-ink:#0f172a;
  --b-muted:#475569;
  --b-top:#fff6ef;
  --b-bot:#ffffff;

  /* Sections bg */
  --b-bg1:#ffffff; --b-bg2:#fff8f2;
  --bp-bg1:#ffffff; --bp-bg2:#fff8f2;
  --nl-bg1:#ffffff; --nl-bg2:#fff8f2;
}

/* A11y helper (safe if not present in global) */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* ===== Blog — Hero (shorter, bright, eye-catching) ===== */
.bl-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height: clamp(46vh, 56vh, 62vh);
  display:grid; place-items:center;
  color: var(--b-ink);
  background:
    radial-gradient(900px 380px at 18% 8%, rgba(255,165,0,.16), transparent 60%),
    radial-gradient(900px 380px at 85% 92%, rgba(255,165,0,.10), transparent 60%),
    linear-gradient(180deg, var(--b-top), var(--b-bot));
}
.bl-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero);
  background-size: cover;
  background-position: var(--pos, center 40%);
  filter: saturate(108%) contrast(108%) brightness(1.02);
  transform: scale(1.02);
  animation: blKB 20s ease-in-out infinite alternate;
}
.bl-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Light overlay so dark text is readable on any hero image */
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.68) 100%);
}
@keyframes blKB{
  0%{ transform: scale(1.02) translate3d(-1%, -1%, 0) }
  100%{ transform: scale(1.06) translate3d(1%, .5%, 0) }
}

.blh-inner{
  position:relative; z-index:1;
  width:min(100% - 48px, 1180px);
  display:grid; gap:12px; justify-items:start; text-align:left;
  padding-block: clamp(36px, 10vh, 72px);
}

.blh-kicker{
  display:inline-block; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(90deg, #ff9c54, #ffdfc6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:14px; margin-bottom:6px;
  opacity:0; transform: translateY(-8px); animation: blIn .5s ease .05s forwards;
}

.blh-title{ margin:0 0 8px; font-weight:900; line-height:1.04; font-size: clamp(30px, 5vw, 56px) }
.blh-title .w{
  display:inline-block; margin-right:.35ch;
  background-image: linear-gradient(90deg, #111, #444, #111);
  background-size:200% 100%; background-position:0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px);
  animation: blWord .6s cubic-bezier(.2,.7,.2,1) forwards, blShine 6s ease-in-out 1.2s infinite alternate;
  animation-delay: calc(var(--i,0) * 70ms + 80ms), 0s;
}
.blh-title .w:last-child{ margin-right:0 }
.blh-title::after{
  content:""; display:block; height:4px; width:0; margin-top:10px;
  background: linear-gradient(90deg, var(--orange), var(--orange2));
  border-radius:999px; box-shadow:0 10px 28px rgba(255,165,0,.28);
  animation: blLine .8s ease .4s forwards;
}

.blh-sub{
  margin:6px 0 10px; color:var(--b-muted); max-width: 860px;
  opacity:0; transform: translateY(10px); animation: blIn .5s ease .14s forwards;
}

.bl-search{
  position:relative; display:flex; align-items:center; gap:8px; width:min(100%, 720px);
  background: rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 10px 10px 14px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  opacity:0; transform: translateY(10px); animation: blIn .5s ease .22s forwards;
}
.bl-search input{ flex:1; background:transparent; border:0; outline:none; color:#0f172a; font:inherit }
.bl-search input::placeholder{ color:#64748b }
.bl-search button{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; border:0; cursor:pointer;
  color:#111; background: linear-gradient(90deg, var(--orange), var(--orange2));
  box-shadow:0 10px 24px rgba(255,165,0,.25); transition:.2s
}
.bl-search button:hover{ transform: translateY(-1px) }

.bl-tags{ list-style:none; padding:0; margin:12px 0 0; display:flex; gap:10px; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px;
  border-radius:999px; font-weight:900; color:#0f172a; background:#fff;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 26px rgba(0,0,0,.10);
  transition:.18s ease
}
.chip:hover{ transform: translateY(-2px) }
.chip.is-active{
  color:#111; background: linear-gradient(90deg, var(--orange), var(--orange2));
  border-color: transparent; box-shadow:0 14px 30px rgba(255,165,0,.28)
}

/* Subtle orbs */
.bl-orb{ position:absolute; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,165,0,.26), rgba(255,165,0,.12) 60%, transparent 70%);
  filter: blur(6px); animation: blDrift 12s ease-in-out infinite alternate
}
.orb-a{ width:220px; height:220px; left:-70px; top:20% }
.orb-b{ width:280px; height:280px; right:-90px; bottom:12%; animation-delay:.8s }
@keyframes blDrift{ 0%{ transform: translate(0,0) } 100%{ transform: translate(14px,-10px) } }

@keyframes blIn{ to{ opacity:1; transform:none } }
@keyframes blWord{ to{ opacity:1; transform:none; filter:none } }
@keyframes blShine{ to{ background-position: 100% 0 } }
@keyframes blLine{ to{ width: 160px } }

@media (max-width:640px){
  .bl-hero{ min-height: 48vh }
}

/* ===== Post Grid ===== */
.bl-list{ background: linear-gradient(180deg, var(--b-bg1), var(--b-bg2)); color: var(--b-ink); padding: clamp(56px, 9vh, 84px) 0 }
.bl-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:1000px){ .bl-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .bl-grid{ grid-template-columns:1fr } }

.bl-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  opacity:0; transform: translateY(16px) scale(.98);
  animation: blCardIn .55s cubic-bezier(.22,.9,.35,1) calc(var(--i,0)*120ms + 100ms) forwards
}
@keyframes blCardIn{ to{ opacity:1; transform:none } }
.bl-card__link{ display:block; color:inherit; text-decoration:none }

.bl-media{ position:relative; aspect-ratio:16/9; background:#f5f7fb; overflow:hidden }
.bl-media img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform 6s ease, filter .35s ease }
.bl-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); opacity:.0; transition: opacity .35s ease }
.bl-tag{
  position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; color:#111;
  background: linear-gradient(90deg, #ffdaba, #fff0e2); box-shadow:0 8px 18px rgba(0,0,0,.20);
  transform: translateY(6px); opacity:0; transition:.35s ease
}
.bl-body{ padding:14px 16px 16px }
.bl-name{ margin:0 0 6px; font-weight:900; font-size:18px; color:#0f172a }
.bl-excerpt{ margin:0 0 10px; color:var(--b-muted); font-weight:700 }
.bl-meta{ display:flex; gap:8px; align-items:center; color:#64748b; font-weight:800; font-size:13px }
.bl-meta .dot{ color:#9aa0a6 }

@media (hover:hover) and (pointer:fine){
  .bl-card:hover .bl-media img{ transform: scale(1.08); filter: saturate(110%) contrast(104%) }
  .bl-card:hover .bl-media::after{ opacity:1 }
  .bl-card:hover .bl-tag{ transform: translateY(0); opacity:1 }
  .bl-card:hover{ transform: translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,.12) }
}

/* ===== Editor's Picks (uses <img>, no CSS var) ===== */
.bl-picks{ background: linear-gradient(180deg, var(--bp-bg1), var(--bp-bg2)); color: #0f172a; padding: clamp(56px, 9vh, 84px) 0 }
.blp-head{ text-align:center; margin-bottom:12px }
.blp-title{ margin:0 0 6px; font-weight:900; font-size:clamp(26px, 4.2vw, 40px); position:relative; display:inline-block }
.blp-title::after{ content:""; display:block; height:4px; width:140px; margin:10px auto 0; background: linear-gradient(90deg, var(--orange), var(--orange2)); border-radius:999px; box-shadow:0 8px 22px rgba(255,165,0,.25) }
.blp-lead{ margin:0; color:#475569 }
.blp-grid{ display:grid; gap:18px; align-items:stretch; grid-template-columns: 1.1fr .9fr }
@media (max-width:1000px){ .blp-grid{ grid-template-columns:1fr } }
.blp-side{ display:grid; gap:18px }

.blp-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  opacity:0; transform: translateY(16px) scale(.98);
  animation: blpIn .55s cubic-bezier(.22,.9,.35,1) calc(var(--i,0)*120ms + 100ms) forwards
}
@keyframes blpIn{ to{ opacity:1; transform:none } }
.blp-card--main .blp-name{ font-size:20px }
.blp-card--main .blp-excerpt{ max-width: 90% }
.blp-link{ display:block; color:inherit; text-decoration:none }

/* Media wrapper; aspect ratios are set inline in HTML, but provide fallbacks */
.blp-media{ position:relative; overflow:hidden; background:#f5f7fb; border-radius:14px }
.blp-card--main .blp-media{ aspect-ratio:16/9 }
.blp-side .blp-media{ aspect-ratio:4/3 }
.blp-media img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform 6s ease, filter .35s ease }
.blp-media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); opacity:.0; transition: opacity .35s ease }
.blp-tag{
  position:absolute; left:12px; bottom:12px; z-index:2; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; color:#111;
  background: linear-gradient(90deg, #ffdaba, #fff0e2); box-shadow:0 8px 18px rgba(0,0,0,.20);
  transform: translateY(6px); opacity:0; transition:.35s ease
}
.blp-body{ padding:14px 16px 16px }
.blp-name{ margin:0 0 6px; font-weight:900; font-size:18px; color:#0f172a }
.blp-excerpt{ margin:0 0 10px; color:#475569; font-weight:700 }
.blp-meta{ display:flex; gap:8px; align-items:center; color:#64748b; font-weight:800; font-size:13px }
.blp-meta .dot{ color:#9aa0a6 }

@media (hover:hover) and (pointer:fine){
  .blp-card:hover .blp-media img{ transform: scale(1.08); filter: saturate(110%) contrast(104%) }
  .blp-card:hover .blp-media::after{ opacity:1 }
  .blp-card:hover .blp-tag{ transform: translateY(0); opacity:1 }
  .blp-card:hover{ transform: translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,.12) }
}

/* ===== Newsletter ===== */
.bl-news{ position:relative; isolation:isolate; overflow:hidden; background: linear-gradient(180deg, var(--nl-bg1), var(--nl-bg2)); color:#0f172a; padding: clamp(56px, 9vh, 84px) 0 }
.bln-inner{ position:relative; z-index:1 }
.bln-head{ text-align:center; margin-bottom:14px }
.bln-title{ margin:0 0 6px; font-weight:900; font-size: clamp(26px, 4.2vw, 40px); position:relative; display:inline-block }
.bln-title::after{ content:""; display:block; height:4px; width:140px; margin:10px auto 0; background: linear-gradient(90deg, var(--orange), var(--orange2)); border-radius:999px; box-shadow:0 8px 22px rgba(255,165,0,.25) }
.bln-lead{ margin:0; color:#475569 }
.bln-wrap{ margin-top:16px; display:grid; gap:16px; align-items:center; grid-template-columns: 1.1fr .9fr }
@media (max-width:960px){ .bln-wrap{ grid-template-columns:1fr } }

.nl{
  background: rgba(255,255,255,.66); border:1px solid #e5e7eb;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius:18px; padding:16px; box-shadow:0 14px 34px rgba(0,0,0,.08);
  opacity:0; transform: translateY(14px) scale(.98); animation: nlIn .55s cubic-bezier(.22,.9,.35,1) .08s forwards
}
@keyframes nlIn{ to{ opacity:1; transform:none } }

.nl-row{ display:grid; grid-template-columns: 1fr auto; gap:10px }
#nlEmail{ width:100%; border-radius:12px; border:1px solid #e5e7eb; padding:12px 14px; background:#fff; color:#0f172a; font:inherit; outline:none; transition:border-color .2s ease, box-shadow .2s ease }
#nlEmail:focus{ border-color: rgba(255,165,0,.55); box-shadow:0 0 0 4px rgba(255,165,0,.18) }
.nl-btn{
  display:inline-grid; place-items:center; padding:12px 18px; border-radius:12px; border:0; cursor:pointer; font-weight:900; color:#111;
  background: linear-gradient(90deg, var(--orange), var(--orange2)); box-shadow:0 14px 34px rgba(255,165,0,.28); transition:.18s ease
}
.nl-btn:hover{ transform: translateY(-2px) scale(1.03); filter:saturate(112%) }

.nl-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; color:#64748b; font-weight:800; font-size:13px }
.nl-meta .badge{ display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #e5e7eb; color:#0f172a; box-shadow:0 8px 18px rgba(0,0,0,.06) }
.nl-meta .dot{ color:#a3aab5 }
.nl-status{ min-height:18px; margin:8px 2px 0; color:#475569; font-weight:800 }

.bln-points{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.bln-points li{
  padding:10px 12px; border-radius:12px; font-weight:900; color:#0f172a; background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 10px 26px rgba(0,0,0,.06); opacity:0; transform: translateY(12px);
  animation: nlPoint .55s cubic-bezier(.22,.9,.35,1) .16s forwards
}
@keyframes nlPoint{ to{ opacity:1; transform:none } }

.bln-orb{ position:absolute; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,165,0,.30), rgba(255,165,0,.12) 60%, transparent 70%);
  filter: blur(6px); animation: nlDrift 12s ease-in-out infinite alternate
}
.orb-1{ width:220px; height:220px; left:-70px; top:22% }
.orb-2{ width:280px; height:280px; right:-90px; bottom:12%; animation-delay:.8s }
@keyframes nlDrift{ 0%{ transform: translate(0,0) } 100%{ transform: translate(12px,-10px) } }

/* ===== Reveal hooks (match HTML data-anim / data-anim-item) ===== */
[data-anim]{
  opacity:0; transform: translateY(12px);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
[data-anim="fade-down"]{ transform: translateY(-12px) }
[data-anim="left"]{ transform: translateX(-16px) }
[data-anim="right"]{ transform: translateX(16px) }
[data-anim].is-in{ opacity:1; transform:none }

[data-anim-item]{
  opacity:0; transform: translateY(14px);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 100ms + var(--d, 0ms));
}
[data-anim-item].is-in{ opacity:1; transform:none }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .blh-title .w,
  .blh-kicker, .blh-sub, .bl-search, .chip,
  .bl-card, .blp-card, .nl, .bln-points li,
  [data-anim], [data-anim-item],
  .bl-hero::before{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}