:root{
  --bg0:#04050a;
  --bg1:#090b12;

  --text:#f2f3f7;
  --muted:rgba(242,243,247,.72);

  --gold:#d6b24c;
  --gold2:#ffdd7a;
  --hot:#ff7a2f;
  --red:#c53b3b;

  --line: rgba(255,255,255,.08);
  --shadow: 0 22px 80px rgba(0,0,0,.65);

  --r: 22px;
  --max: 1380px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1400px 800px at 18% 10%, rgba(214,178,76,.18), transparent 60%),
    radial-gradient(1100px 760px at 85% 18%, rgba(255,90,60,.14), transparent 55%),
    radial-gradient(1200px 900px at 45% 95%, rgba(120,170,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}

/* -------------------------------------------------------
   CINEMATIC BACKGROUND LAYERS (embers + glitter + vignette)
------------------------------------------------------- */
body::before{
  content:"";
  position:fixed; inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(214,178,76,.12), transparent 60%),
    radial-gradient(900px 700px at 15% 40%, rgba(255,122,47,.10), transparent 60%),
    radial-gradient(900px 700px at 90% 55%, rgba(214,178,76,.08), transparent 60%);
  filter: blur(0px);
  opacity:.9;
  z-index:0;
}

body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.0), rgba(0,0,0,.65) 70%, rgba(0,0,0,.88) 100%);
  z-index:0;
}

/* grain + noise */
.bg-grain{
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,.04), transparent 45%),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,.03), transparent 40%);
  mix-blend-mode: overlay;
  opacity:.90;
  z-index:1;
}
.bg-noise{
  position:fixed; inset:-20%;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.18;
  transform: rotate(7deg);
  z-index:1;
}

/* embers layer (you already add <div class="bg-embers"></div>) */
.bg-embers{
  position:fixed; inset:-10%;
  pointer-events:none;
  z-index:2;
  mix-blend-mode: screen;
  opacity:.65;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,221,122,.78), transparent 60%),
    radial-gradient(1px 1px at 16% 62%, rgba(255,221,122,.55), transparent 60%),
    radial-gradient(2px 2px at 24% 36%, rgba(214,178,76,.70), transparent 60%),
    radial-gradient(1px 1px at 33% 15%, rgba(255,122,47,.45), transparent 60%),
    radial-gradient(2px 2px at 42% 52%, rgba(255,221,122,.60), transparent 60%),
    radial-gradient(1px 1px at 51% 22%, rgba(214,178,76,.55), transparent 60%),
    radial-gradient(2px 2px at 63% 18%, rgba(255,221,122,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 60%, rgba(255,122,47,.40), transparent 60%),
    radial-gradient(2px 2px at 84% 28%, rgba(214,178,76,.62), transparent 60%),
    radial-gradient(1px 1px at 92% 78%, rgba(255,221,122,.45), transparent 60%);
  animation: embersFloat 9s linear infinite;
}
@keyframes embersFloat{
  0%{ transform: translateY(0) translateX(0) scale(1); }
  100%{ transform: translateY(-140px) translateX(60px) scale(1.06); }
}

/* extra glitter (micro sparkles) */
.bg-sparkles{
  position:fixed; inset:-10%;
  pointer-events:none;
  z-index:3;
  mix-blend-mode: screen;
  opacity:.28;
  background:
    radial-gradient(1px 1px at 8% 20%, rgba(255,221,122,.9), transparent 70%),
    radial-gradient(1px 1px at 18% 55%, rgba(214,178,76,.8), transparent 70%),
    radial-gradient(1px 1px at 28% 30%, rgba(255,221,122,.9), transparent 70%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,122,47,.7), transparent 70%),
    radial-gradient(1px 1px at 55% 25%, rgba(214,178,76,.85), transparent 70%),
    radial-gradient(1px 1px at 66% 62%, rgba(255,221,122,.85), transparent 70%),
    radial-gradient(1px 1px at 78% 35%, rgba(214,178,76,.8), transparent 70%),
    radial-gradient(1px 1px at 90% 75%, rgba(255,221,122,.75), transparent 70%);
  animation: sparkleShift 6s ease-in-out infinite;
}
@keyframes sparkleShift{
  0%{ transform: translateY(0); opacity:.22; }
  50%{ transform: translateY(-18px); opacity:.34; }
  100%{ transform: translateY(0); opacity:.22; }
}

/* -------------------------------------------------------
   NAV
------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(5,6,10,.86), rgba(5,6,10,.58));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.5px;
}
.badge{
  width:34px;height:34px;border-radius:10px;
  background:
    radial-gradient(14px 12px at 30% 30%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(135deg, rgba(255,215,120,.22), rgba(214,178,76,.08));
  border:1px solid rgba(214,178,76,.28);
  box-shadow: 0 10px 30px rgba(214,178,76,.14);
}
.brand span b{color:var(--gold2)}
.nav-links{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:13px; color:rgba(242,243,247,.90);
}
.nav-links a{
  opacity:.9;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  position:relative;
}
.nav-links a:hover{
  opacity:1;
  border-color: rgba(214,178,76,.22);
  background: rgba(214,178,76,.06);
}
.nav-links a:hover::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:4px; height:3px;
  width:calc(100% - 28px);
  margin:0 14px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.55));
  box-shadow: 0 0 16px rgba(214,178,76,.30);
}

/* -------------------------------------------------------
   HERO + SECTIONS (FULL "IMAGE 3" RAILS)
------------------------------------------------------- */
.hero{ padding:44px 0 18px; position:relative; z-index:10; }
.section{ padding:36px 0 36px; position:relative; z-index:10; }

/* full-width glowing rails like your mockup */
.section::before,
.section::after{
  content:"";
  position:absolute;
  left:50%;
  width:min(1100px, 92vw);
  transform: translateX(-50%);
  height:3px;
  width:calc(100% - 28px);
  margin:0 14px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.55));
  box-shadow: 0 0 30px rgba(214,178,76,.35), 0 0 70px rgba(255,221,122,.12);
  opacity:.90;
  pointer-events:none;
}
.section::before{ top:10px; }
.section::after{ bottom:10px; }

/* section titles centered & glowing */
.section-title{
  text-align:center;
  margin:0 0 18px;
  font-size:14px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(242,243,247,.80);
  position:relative;
}
.section-title::before,
.section-title::after{
  content:"";
  display:block;
  height:3px;
  width:calc(100% - 28px);
  margin:0 14px;
  border-radius:999px;
  margin:10px auto 0;
  width:min(820px, 90vw);
  background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.55));
  box-shadow: 0 0 22px rgba(214,178,76,.26);
  opacity:.65;
}
.section-title::after{ display:none; }

/* -------------------------------------------------------
   LAYOUT GRID
------------------------------------------------------- */
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:stretch;
}
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }
.col-6{grid-column: span 6;}
.col-4{grid-column: span 4;}
.col-12{grid-column: span 12;}

/* -------------------------------------------------------
   CARDS (HOT GOLD BORDER + CORNER FLARES + SHIMMER)
------------------------------------------------------- */
.card, .feature, .mini{
  position:relative;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(18,20,28,.78), rgba(8,10,14,.78));
  box-shadow: var(--shadow);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
}

/* corner flares */
.card::before, .feature::before, .mini::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(220px 160px at 0% 0%, rgba(255,221,122,.30), transparent 60%),
    radial-gradient(240px 170px at 100% 0%, rgba(214,178,76,.24), transparent 60%),
    radial-gradient(240px 170px at 0% 100%, rgba(255,122,47,.14), transparent 65%),
    radial-gradient(240px 170px at 100% 100%, rgba(214,178,76,.18), transparent 65%);
  opacity:.9;
  pointer-events:none;
  filter: blur(10px);
}

/* hot golden ring border */
.card::after, .feature::after, .mini::after{
  content:"";
  position:absolute; inset:0;
  padding:1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(214,178,76,.92),
    rgba(255,221,122,.26),
    rgba(255,122,47,.22),
    rgba(214,178,76,.76)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.82;
  pointer-events:none;
  animation: borderGlow 4.8s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(214,178,76,.18));
}
@keyframes borderGlow{
  0%{ opacity:.60; filter: drop-shadow(0 0 10px rgba(214,178,76,.14)); }
  45%{ opacity:.92; filter: drop-shadow(0 0 22px rgba(214,178,76,.26)); }
  100%{ opacity:.60; filter: drop-shadow(0 0 10px rgba(214,178,76,.14)); }
}

/* shimmering streak across cards */
.card .shine, .feature .shine, .mini .shine{ display:none; }
.card > .card-inner::after,
.feature::after,
.mini::after{
  /* keep border as above; shimmer is separate layer */
}
.card > .card-inner{
  position:relative;
  padding:22px;
}
.card > .card-inner::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.14) 42%, transparent 58%);
  transform: translateX(-80%);
  opacity:.22;
  pointer-events:none;
  animation: shine 6.2s ease-in-out infinite;
}
@keyframes shine{
  0%{ transform: translateX(-80%); }
  35%{ transform: translateX(140%); }
  100%{ transform: translateX(140%); }
}

/* feature/mini padding */
.feature{ padding:18px; border-radius: 20px; box-shadow: 0 16px 52px rgba(0,0,0,.55); }
.feature h4{ margin:0 0 8px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.feature p{ margin:0; color:var(--muted); font-size:12.5px; line-height:1.55; }

.mini{ padding:16px; border-radius: 18px; box-shadow: 0 16px 52px rgba(0,0,0,.55); }
.mini h3{ margin:0 0 6px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,243,247,.92); }
.mini p{ margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); }

/* -------------------------------------------------------
   TYPO + BUTTONS
------------------------------------------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  color:rgba(242,243,247,.78);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
}
.dot{
  width:7px;height:7px;border-radius:99px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(214,178,76,.55);
}
.h1{
  margin:14px 0 10px;
  font-size:44px; line-height:1.02;
  letter-spacing:-.02em;
}
.h1 .gold{
  background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.55));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow: 0 0 22px rgba(214,178,76,.16);
}
.lead{
  margin:0;
  color:rgba(242,243,247,.78);
  font-size:14px;
  line-height:1.6;
  max-width:72ch;
}

.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.pill{
  padding:10px 12px;
  border-radius: 999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(242,243,247,.86);
}
.pill b{color:var(--gold2); font-weight:800}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius: 16px;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn.primary{
  border-color: rgba(214,178,76,.40);
  background: linear-gradient(135deg, rgba(214,178,76,.22), rgba(214,178,76,.06));
  box-shadow: 0 20px 70px rgba(214,178,76,.14);
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 26px 90px rgba(214,178,76,.14); }
.btn:active{transform: translateY(0px)}

/* HERO IMAGE (shield) */
.hero .card-inner{ padding:10px; }
.hero-shield{
  width:106%;
  margin-left:-3%;
  height:auto;
  display:block;
  border-radius: 22px;
  box-shadow:
    0 40px 140px rgba(0,0,0,.85),
    0 0 90px rgba(214,178,76,.25),
    0 0 180px rgba(255,122,47,.10);
  animation: heroFloat 6.5s ease-in-out infinite;
}
@keyframes heroFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0px); }
}

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
.footer{
  padding:24px 0 34px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.16);
  position:relative;
  z-index:10;
}
.footer small{color:rgba(242,243,247,.62)}
.footer a{color:rgba(242,243,247,.82); text-decoration:underline}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .h1{font-size:36px}
}
@media (max-width: 640px){
  .nav-links{display:none}
  .h1{font-size:32px}
}

/* ===== IMAGE-3 STYLE: SECTION FRAMES ===== */
.section .wrap{
  position:relative;
}
.section .wrap::before{
  content:"";
  position:absolute;
  inset:-18px -14px;
  border-radius: 26px;
  background: radial-gradient(900px 420px at 50% 10%, rgba(214,178,76,.10), transparent 60%);
  border: 1px solid rgba(214,178,76,.22);
  box-shadow:
    0 0 28px rgba(214,178,76,.18),
    0 0 90px rgba(255,221,122,.08);
  pointer-events:none;
  z-index:-1;
}

/* stronger “hot corners” like the mockup */
.section .wrap::after{
  content:"";
  position:absolute;
  inset:-18px -14px;
  border-radius: 26px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(240px 180px at 0% 0%, rgba(255,221,122,.22), transparent 65%),
    radial-gradient(240px 180px at 100% 0%, rgba(214,178,76,.18), transparent 65%),
    radial-gradient(260px 200px at 0% 100%, rgba(255,122,47,.12), transparent 70%),
    radial-gradient(260px 200px at 100% 100%, rgba(214,178,76,.12), transparent 70%);
  filter: blur(10px);
  opacity:.9;
}

/* ===== FIX: Clip glowing dividers inside cards ===== */
.apps .card,
.apps .app,
.apps .app-card,
.apps .tile,
.apps .item{
  overflow: hidden;
}

/* ===== FIX: Apps cards - keep divider lines inside border ===== */
/* Works even if the long lines are ::before/::after or internal dividers */

#apps a,
#apps .card,
#apps .tile,
#apps .item,
#apps .row,
#apps li{
  overflow: hidden;            /* CLIPS the glowing line */
  border-radius: 18px;         /* ensures the clip matches rounded corners */
}

/* Inset any pseudo-element lines that are spanning full width */
#apps a::before, #apps a::after,
#apps .card::before, #apps .card::after,
#apps .tile::before, #apps .tile::after,
#apps .item::before, #apps .item::after,
#apps .row::before, #apps .row::after,
#apps li::before, #apps li::after{
  left: 14px !important;
  right: 14px !important;
  inset-inline: 14px !important;
  max-width: calc(100% - 28px) !important;
  border-radius: 999px;
}

/* ===== FIX: Apps cards - keep divider lines inside border ===== */
#apps .card,
#apps .app,
#apps .app-card,
#apps a,
#apps li{
  overflow: hidden;
  border-radius: 18px;
}

/* If the long gold lines are pseudo-elements, inset them */
#apps .card::before, #apps .card::after,
#apps .app::before,  #apps .app::after,
#apps .app-card::before, #apps .app-card::after,
#apps a::before, #apps a::after,
#apps li::before, #apps li::after{
  left: 14px !important;
  right: 14px !important;
  inset-inline: 14px !important;
  max-width: calc(100% - 28px) !important;
  border-radius: 999px !important;
}

/* ===== FIX v2: #apps .card pseudo-elements must stay inside border ===== */
#apps .card{
  position: relative;   /* ensures pseudo-elements anchor to this card */
  overflow: hidden;     /* clips glow/lines inside rounded corners */
  border-radius: 18px;
}

/* Force the gold lines (from .card::before/.card::after) to inset */
#apps .card::before,
#apps .card::after{
  inset: 0 !important;                  /* reset weird offsets */
  left: 14px !important;
  right: 14px !important;
  width: auto !important;               /* prevents 100vw / full-bleed */
  max-width: calc(100% - 28px) !important;
  border-radius: 999px !important;
  transform: none !important;           /* cancels translateX hacks */
}

/* ===== FIX: #apps mini cards - keep gold lines inside border ===== */
#apps .mini{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* mini uses the same pseudo lines as card/feature; inset them inside */
#apps .mini::before,
#apps .mini::after{
  inset: 0 !important;                  /* reset any full-bleed inset */
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  border-radius: 999px !important;
  transform: none !important;           /* cancel translate hacks */
}

/* ===== FIX: #apps mini cards - keep gold lines inside border ===== */
#apps .mini{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* mini uses the same pseudo lines as card/feature; inset them inside */
#apps .mini::before,
#apps .mini::after{
  inset: 0 !important;                  /* reset any full-bleed inset */
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  border-radius: 999px !important;
  transform: none !important;           /* cancel translate hacks */
}

/* ===== HERO LAYOUT FIX: shield cannot push minis ===== */
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: start;
}

.hero-main{ min-width: 0; }

.hero .card,
.hero .card-inner{
  min-width: 0;
  max-width: 100%;
}

.side-stack{
  width: 100%;
  max-width: 420px;
  min-width: 280px;
}

.side-stack .mini{
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .side-stack{ max-width: 100%; min-width: 0; }
}

/* tighten hero bottom spacing */
.hero{
  padding-bottom: 40px;
}

.hero .card{
  transition: transform .4s ease;
}

.hero .card:hover{
  transform: translateY(-4px);
}

.hero-main{
  max-width: 820px;
}

/* ===== HERO POLISH: Shield sizing, centering, brighter frame ===== */
.hero .hero-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* Make the hero card feel like image-2: framed + hot edges */
.hero .card{
  border: 1px solid rgba(214,178,76,.38);
  box-shadow:
    0 0 0 1px rgba(255,221,122,.16) inset,
    0 0 28px rgba(214,178,76,.22),
    0 0 120px rgba(255,221,122,.10);
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(214,178,76,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.35));
}

/* Add a bright inner “rim” and corner heat */
.hero .card::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius: 20px;
  border: 1px solid rgba(255,221,122,.22);
  box-shadow:
    0 0 18px rgba(214,178,76,.16),
    0 0 70px rgba(255,221,122,.10);
  pointer-events:none;
  z-index:1;
}
.hero .card::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 28px;
  background:
    radial-gradient(240px 180px at 0% 0%, rgba(255,221,122,.22), transparent 65%),
    radial-gradient(240px 180px at 100% 0%, rgba(214,178,76,.18), transparent 65%),
    radial-gradient(260px 200px at 0% 100%, rgba(255,122,47,.12), transparent 70%),
    radial-gradient(260px 200px at 100% 100%, rgba(214,178,76,.12), transparent 70%);
  filter: blur(12px);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}

/* Center the shield image inside the card and control size */
.hero .card-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

/* The shield itself: centered + not oversized */
.hero-shield{
  display:block;
  width: min(760px, 100%);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 10px rgba(214,178,76,.18))
    drop-shadow(0 0 34px rgba(255,221,122,.10));
}

@media (max-width: 900px){
  .hero .card-inner{ padding: 14px; }
  .hero-shield{ width: 100%; }
}

/* ===== SECTION TITLES: brighter gold + divider glow like image-2 ===== */
.section-title{
  color: rgba(255,221,122,.95);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow:
    0 0 14px rgba(214,178,76,.22),
    0 0 40px rgba(255,221,122,.10);
}

/* stronger lines */
.section-title::before,
.section-title::after{
  height: 3px;
  opacity: .98;
  box-shadow:
    0 0 30px rgba(214,178,76,.35),
    0 0 90px rgba(255,221,122,.12);
}

/* Make titles look more “heroic” on wide screens */
@media (min-width: 900px){
  .section-title{
    font-size: 12px;  /* keeps the premium thin label feel */
  }
}

/* ===== IMAGE-2 UPGRADE: TITLES (center + glowing divider lines) ===== */
.section-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  margin: 6px auto 16px;
  padding: 12px 0;

  /* brighter + more “royal” */
  color: rgba(255, 221, 122, .98);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;

  /* make it read like image-2 */
  font-size: 18px;
  text-shadow:
    0 0 10px rgba(214,178,76,.25),
    0 0 30px rgba(255,221,122,.14),
    0 0 80px rgba(255,170,70,.10);
}

.section-title::before,
.section-title::after{
  content:"";
  flex: 1;
  height: 3px;
  border-radius: 999px;

  /* hot line */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,221,122,.95),
    rgba(214,178,76,.85),
    rgba(255,221,122,.95),
    transparent
  );

  box-shadow:
    0 0 18px rgba(214,178,76,.26),
    0 0 60px rgba(255,221,122,.12);
  opacity: .95;
}

/* keep titles tidy on small screens */
@media (max-width: 720px){
  .section-title{
    font-size: 14px;
    letter-spacing: .14em;
    gap: 12px;
  }
  .section-title::before,
  .section-title::after{
    height: 2px;
  }
}

/* ===== IMAGE-2 UPGRADE: HOTTER CARDS (subtle but brighter) ===== */
.card, .feature, .mini{
  border-color: rgba(214,178,76,.40) !important;
  box-shadow:
    0 0 0 1px rgba(255,221,122,.18) inset,
    0 0 22px rgba(214,178,76,.22),
    0 0 90px rgba(255,221,122,.10) !important;
}

/* Inner rim */
.card::before, .feature::before, .mini::before{
  border-color: rgba(255,221,122,.22) !important;
  box-shadow:
    0 0 16px rgba(214,178,76,.18),
    0 0 60px rgba(255,221,122,.10) !important;
  opacity: .95 !important;
}

/* ===== IMAGE-2 UPGRADE: HERO SHIELD (center + forged frame) ===== */
.hero .hero-main{
  align-items: center !important;
}

.hero .card-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

.hero-shield{
  width: min(860px, 100%) !important;
  margin: 0 auto !important;
  filter:
    drop-shadow(0 0 14px rgba(214,178,76,.22))
    drop-shadow(0 0 55px rgba(255,221,122,.14)) !important;
}

/* hotter hero frame */
.hero .card{
  border-color: rgba(214,178,76,.48) !important;
  box-shadow:
    0 0 0 1px rgba(255,221,122,.22) inset,
    0 0 30px rgba(214,178,76,.26),
    0 0 140px rgba(255,221,122,.12) !important;
}

/* ===== IMAGE-2 LOOK: BIG CENTER TITLES + GLOW LINES ===== */
.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;

  text-align:center;
  margin: 22px auto 18px;
  padding: 14px 0;

  font-weight: 900;
  text-transform: none;       /* Image-2 is more like headings, not tiny labels */
  letter-spacing: .02em;
  font-size: 28px;

  color: rgba(255,221,122,.98);
  text-shadow:
    0 0 10px rgba(214,178,76,.25),
    0 0 30px rgba(255,221,122,.14),
    0 0 90px rgba(255,170,70,.10);
}

.section-title::before,
.section-title::after{
  content:"";
  flex: 1;
  height: 3px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,221,122,.95),
    rgba(214,178,76,.85),
    rgba(255,221,122,.95),
    transparent
  );

  box-shadow:
    0 0 18px rgba(214,178,76,.26),
    0 0 70px rgba(255,221,122,.12);
  opacity: .95;
}

@media (max-width: 720px){
  .section-title{
    font-size: 20px;
    gap: 12px;
    margin: 18px auto 14px;
    padding: 10px 0;
  }
  .section-title::before,
  .section-title::after{
    height: 2px;
  }
}

/* ===== IMAGE-2 LOOK: HOT GOLD FRAMES (sections only) ===== */
.section .card,
.section .feature,
.section .mini{
  border: 1px solid rgba(214,178,76,.42) !important;
  box-shadow:
    0 0 0 1px rgba(255,221,122,.18) inset,
    0 0 22px rgba(214,178,76,.22),
    0 0 120px rgba(255,221,122,.10) !important;
}

/* inner rim + corner heat */
.section .card::before,
.section .feature::before,
.section .mini::before{
  border-color: rgba(255,221,122,.22) !important;
  box-shadow:
    0 0 16px rgba(214,178,76,.18),
    0 0 70px rgba(255,221,122,.10) !important;
  opacity: .95 !important;
}

.section .card::after,
.section .feature::after,
.section .mini::after{
  opacity: .95 !important;
  filter: blur(12px) !important;
}

/* ===== IMAGE-2 LOOK: WARM AMBER ATMOSPHERE ===== */
.section{
  background: radial-gradient(900px 420px at 50% 0%,
    rgba(214,178,76,.08),
    transparent 65%);
}

/* ===== FIX: Section titles ALWAYS centered (mobile + desktop) ===== */
.section-title{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;

  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ensure the title text is centered */
.section-title{
  place-content: center;
}

/* symmetric lines */
.section-title::before,
.section-title::after{
  justify-self: stretch;
  max-width: 420px;
}

/* keep the middle text from shifting */
.section-title{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== FIX v3: Mobile titles always centered (no drifting) ===== */
@media (max-width: 720px){
  /* kill the left/right flex lines on mobile (they cause drift) */
  .section-title::before,
  .section-title::after{
    display: none !important;
    content: none !important;
  }

  .section-title{
    position: relative;
    display: block !important;
    width: 100% !important;
    text-align: center !important;

    margin: 18px auto 14px !important;
    padding: 10px 0 !important;

    /* keep your bright gold look */
    font-size: 18px !important;
    font-weight: 900 !important;
    color: rgba(255,221,122,.98) !important;
  }

  /* draw ONE centered glowing line behind the title */
  .section-title{
    background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.55));
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 50% 52%;
  }

  /* give the text a “label plate” so the line doesn’t cut through it */
  .section-title{
    /* creates the dark pad behind text */
  }
  .section-title{
    /* use a text background via box-shadow trick */
    box-shadow: 0 0 0 8px rgba(0,0,0,.55) inset;
    border-radius: 999px;
  }
}

@media (max-width: 720px){
  .section-title{
    max-width: 92vw;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== MOBILE: let text breathe (no skinny tall pillars) ===== */
@media (max-width: 720px){

  /* force all section grids to single column */
  .section .grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* neutralize any col-* sizing */
  [class*="col-"]{
    grid-column: auto !important;
    width: 100% !important;
  }

  /* widen + relax text */
  .section .card,
  .section .feature,
  .section .mini{
    padding: 16px 16px !important;
  }

  .section p{
    line-height: 1.55 !important;
  }

  .section h4{
    letter-spacing: .10em !important;
  }

  /* keep long headings from forcing narrow columns */
  .feature h4,
  .mini h3{
    line-height: 1.2 !important;
    word-break: normal;
    hyphens: auto;
  }
}

/* ===== MOBILE: 2-col for smaller cards (optional nicer density) ===== */
@media (max-width: 720px){

  /* services cards can be 2 across */
  #services .grid{
    grid-template-columns: 1fr 1fr !important;
  }

  /* apps cards can be 2 across */
  #apps .grid{
    grid-template-columns: 1fr 1fr !important;
  }

  /* but if very small phone, go back to 1 column */
}
@media (max-width: 420px){
  #services .grid, #apps .grid{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   KINGDOM CINEMATIC "MOLTEN GOLD" PACK (MODE B)
   Goal: Image-2 style — hot gold, neon bars, ember contrast.
   Append-only overrides. Safe to remove by deleting this block.
   ========================================================= */

/* --- Global contrast + gold palette --- */
:root{
  --goldA: rgba(255,221,122,.98);
  --goldB: rgba(255,200,80,.92);
  --goldC: rgba(255,170,55,.70);
  --goldEdge: rgba(214,178,76,.55);
  --goldRim: rgba(255,221,122,.22);
  --ember: rgba(255,140,60,.10);
  --ember2: rgba(255,90,30,.07);
  --deep: rgba(0,0,0,.86);
  --deep2: rgba(0,0,0,.62);
}

/* darker blacks for more cinematic contrast */
body{
  background: radial-gradient(1400px 900px at 50% 0%,
    rgba(80,45,10,.22),
    rgba(0,0,0,.88) 55%,
    rgba(0,0,0,.94) 100%) !important;
  color: rgba(255,255,255,.88);
}

/* turn up ember layers (if present) without changing hero card) */
.bg-embers{
  opacity: .78 !important;
  filter: saturate(1.12) contrast(1.08) blur(.2px);
}
.bg-sparkles{
  opacity: .55 !important;
  filter: saturate(1.15) contrast(1.1);
}
.bg-noise{
  opacity: .22 !important;
}

/* --- SECTION WRAPS: warm glow field like image-2 --- */
.section{
  position: relative;
  background: radial-gradient(1100px 520px at 50% 0%,
    rgba(255,200,80,.09),
    transparent 62%) !important;
}
.section::before,
.section::after{
  opacity: .92 !important;
  filter: blur(0.2px);
}

/* --- TITLES: neon bar + floating gold text (Image-2 vibe) --- */
.section-title{
  position: relative;
  display: block !important;
  text-align: center !important;

  margin: 26px auto 18px !important;
  padding: 14px 18px !important;
  width: min(980px, 92vw);

  font-weight: 900 !important;
  font-size: 30px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;

  color: var(--goldA) !important;
  text-shadow:
    0 0 10px rgba(255,221,122,.25),
    0 0 30px rgba(255,200,80,.16),
    0 0 120px rgba(255,170,70,.10) !important;

  border-radius: 999px;
}

/* remove old before/after lines (we replace with bar) */
.section-title::before,
.section-title::after{
  display:none !important;
  content:none !important;
}

/* the glowing bar */
.section-title{
  background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.55));
  background-size: 100% 100%, 100% 3px;
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;

  box-shadow:
    0 0 0 1px rgba(255,221,122,.10) inset,
    0 0 22px rgba(214,178,76,.18),
    0 0 90px rgba(255,200,80,.10);
}

/* mobile title size */
@media (max-width: 720px){
  .section-title{
    width: min(92vw, 540px);
    font-size: 20px !important;
    padding: 10px 14px !important;
    margin: 18px auto 14px !important;
    background-size: 100% 100%, 100% 2px;
  }
}

/* --- CARDS: molten gold frame (outer bloom + inner rim + hot corners) --- */
/* Sections only — avoids surprising hero changes */
.section .card,
.section .feature,
.section .mini{
  position: relative;
  border: 1px solid var(--goldEdge) !important;
  background:
    radial-gradient(900px 500px at 50% 0%,
      rgba(255,200,80,.09),
      rgba(0,0,0,.55) 55%,
      rgba(0,0,0,.62) 100%) !important;

  box-shadow:
    0 0 0 1px rgba(255,221,122,.16) inset,
    0 0 26px rgba(214,178,76,.22),
    0 0 120px rgba(255,200,80,.10),
    0 0 220px rgba(255,140,60,.06) !important;

  backdrop-filter: blur(2px);
}

/* inner rim */
.section .card::before,
.section .feature::before,
.section .mini::before{
  border-color: rgba(255,221,122,.22) !important;
  box-shadow:
    0 0 18px rgba(214,178,76,.18),
    0 0 80px rgba(255,200,80,.10) !important;
  opacity: .98 !important;
}

/* hot corners aura */
.section .card::after,
.section .feature::after,
.section .mini::after{
  opacity: .96 !important;
  filter: blur(13px) !important;
}

/* headings inside cards: hotter gold */
.section h4,
.section .mini h3{
  color: rgba(255,235,150,.96) !important;
  text-shadow:
    0 0 10px rgba(214,178,76,.18),
    0 0 40px rgba(255,200,80,.10);
}

/* body copy: slightly brighter + softer */
.section p{
  color: rgba(255,255,255,.86) !important;
}

/* --- BUTTONS: cinematic gold glow --- */
.btn.primary{
  border-color: rgba(255,221,122,.42) !important;
  box-shadow:
    0 0 0 1px rgba(255,221,122,.18) inset,
    0 0 18px rgba(214,178,76,.22),
    0 0 80px rgba(255,200,80,.12) !important;
}
.btn{
  box-shadow:
    0 0 0 1px rgba(255,221,122,.10) inset,
    0 0 12px rgba(214,178,76,.14) !important;
}

/* --- NAV: a little more molten without changing layout --- */
.nav{
  background: linear-gradient(180deg,
    rgba(0,0,0,.78),
    rgba(0,0,0,.48)) !important;
  border-bottom: 1px solid rgba(255,221,122,.10);
  box-shadow: 0 0 80px rgba(255,200,80,.06);
}
.nav .brand span{
  text-shadow: 0 0 20px rgba(255,200,80,.10);
}

/* --- MOBILE: keep text breathing rules you liked --- */
@media (max-width: 720px){
  .section .card,
  .section .feature,
  .section .mini{
    padding: 16px 16px !important;
  }
  .section p{
    line-height: 1.55 !important;
  }
}

/* =========================================================
   BACKGROUND UPGRADE: Match Image-2 (ember nebula, deep blacks)
   Goal: remove grey wash + let embers show through.
   ========================================================= */

/* 1) Deep cinematic base */
html, body{
  background: #050506 !important;
}

/* Nebula field + vignette */
body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,140,60,.16), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(255,200,80,.10), transparent 62%),
    radial-gradient(1100px 800px at 50% 85%, rgba(120,35,18,.20), transparent 65%),
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.88) 70%),
    #050506 !important;
}

/* hard vignette like image-2 */
body::before{
  content:"";
  position: fixed;
  inset: -2px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(900px 700px at 50% 35%,
    rgba(0,0,0,.10),
    rgba(0,0,0,.78) 60%,
    rgba(0,0,0,.92) 100%);
}

/* warm edge glow + tiny ember haze */
body::after{
  content:"";
  position: fixed;
  inset: -2px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(255,180,60,.10), transparent 70%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,120,40,.08), transparent 70%),
    radial-gradient(900px 600px at 50% 100%, rgba(255,200,80,.08), transparent 72%);
  mix-blend-mode: screen;
  opacity: .9;
}

/* 2) Turn up embers/sparkles to look like image-2 */
.bg-embers{
  opacity: .88 !important;
  filter: saturate(1.25) contrast(1.12) !important;
  mix-blend-mode: screen;
}
.bg-sparkles{
  opacity: .65 !important;
  filter: saturate(1.25) contrast(1.12) !important;
  mix-blend-mode: screen;
}
.bg-grain{
  opacity: .18 !important;
}
.bg-noise{
  opacity: .16 !important;
}

/* 3) Remove the grey “sheet” effect so background shows through */
.hero,
.hero .wrap,
.section,
.section .wrap{
  background: transparent !important;
}

/* If any layout container is painting a flat layer, kill it */
.wrap{
  background: transparent !important;
}

/* Keep cards readable while letting background shine */
.section .card,
.section .feature,
.section .mini{
  background:
    radial-gradient(900px 500px at 50% 0%,
      rgba(255,200,80,.08),
      rgba(0,0,0,.55) 58%,
      rgba(0,0,0,.62) 100%) !important;
}

/* =========================================================
   FIX: Fiery background not showing (layer stacking + overlays)
   ========================================================= */

/* If previous packs created body overlays, they can block bg-* layers */
body::before,
body::after{
  display: none !important;
}

/* Make the ember/spark layers actually sit behind content but ABOVE body bg */
.bg-grain, .bg-noise, .bg-embers, .bg-sparkles{
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* stacking order: far back -> closer */
.bg-grain{ z-index: -6 !important; opacity: .16 !important; }
.bg-noise{ z-index: -5 !important; opacity: .14 !important; }
.bg-embers{ z-index: -4 !important; opacity: .92 !important; mix-blend-mode: screen !important; }
.bg-sparkles{ z-index: -3 !important; opacity: .72 !important; mix-blend-mode: screen !important; }

/* Ensure site content is above the background layers */
body > *:not(.bg-grain):not(.bg-noise):not(.bg-embers):not(.bg-sparkles){
  position: relative;
  z-index: 1;
}

/* Deep cinematic base (behind ember layers) */
html, body{
  background: #040405 !important;
}
body{
  background:
    radial-gradient(1200px 700px at 20% 12%, rgba(255,140,60,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 16%, rgba(255,200,80,.14), transparent 62%),
    radial-gradient(1100px 800px at 50% 90%, rgba(120,35,18,.26), transparent 65%),
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.92) 72%),
    #040405 !important;
}

/* Kill any hero “plate” background so the embers show through */
.hero, .hero .wrap, .hero-grid, .hero-main{
  background: transparent !important;
}

/* Add extra fiery bloom behind hero like Image-2 */
.hero{
  position: relative;
}
.hero::before{
  content:"";
  position: absolute;
  inset: -40px -20px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(520px 360px at 18% 10%, rgba(255,160,70,.20), transparent 70%),
    radial-gradient(520px 360px at 82% 12%, rgba(255,210,90,.14), transparent 72%),
    radial-gradient(760px 520px at 50% 30%, rgba(255,120,50,.10), transparent 75%);
  mix-blend-mode: screen;
  opacity: .95;
  filter: blur(0.2px);
}

/* =========================================================
   FIX: Hero grey plate is covering ember background
   Keep the hero frame, remove the flat fill.
   ========================================================= */

.hero .card{
  background: transparent !important;
  backdrop-filter: none !important;
}

.hero .card-inner{
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep a subtle dark vignette ONLY behind the shield (optional, looks cinematic) */
.hero .card::before{
  opacity: .85 !important;
}
.hero .card::after{
  opacity: .95 !important;
}

/* Ensure the image itself doesn’t get a “sheet” look */
.hero .hero-shield{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px; /* keeps it premium */
}

/* =========================================================
   FIX: bg-* layers invisible due to negative z-index behind body
   Move bg layers to positive stack + raise site content above.
   ========================================================= */

body{
  position: relative; /* establish stacking context */
}

/* Background layers: must be ABOVE body background */
.bg-grain, .bg-noise, .bg-embers, .bg-sparkles{
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* order them */
.bg-grain{ z-index: 0 !important; opacity: .14 !important; }
.bg-noise{ z-index: 1 !important; opacity: .12 !important; }
.bg-embers{ z-index: 2 !important; opacity: .95 !important; mix-blend-mode: screen !important; }
.bg-sparkles{ z-index: 3 !important; opacity: .75 !important; mix-blend-mode: screen !important; }

/* All real site content above the layers */
.nav, .hero, .section, footer, main, header{
  position: relative;
  z-index: 10;
}

/* catch-all: any body child that isn't bg layer goes above */
body > *:not(.bg-grain):not(.bg-noise):not(.bg-embers):not(.bg-sparkles){
  position: relative;
  z-index: 10;
}

/* =========================================================
   HARD FIX: Force embers visible on iOS/app view
   ========================================================= */

/* Ensure html/body don't create weird stacking issues */
html, body{
  position: relative;
  overflow-x: hidden;
}

/* Put ember layers ABOVE all base backgrounds */
.bg-grain, .bg-noise, .bg-embers, .bg-sparkles{
  position: fixed !important;
  inset: -10% !important;
  pointer-events: none !important;
  transform: translateZ(0); /* iOS paint */
  will-change: transform, opacity;
}

/* Force strong, visible stacking */
.bg-grain{ z-index: 2 !important; opacity: .14 !important; }
.bg-noise{ z-index: 3 !important; opacity: .12 !important; }
.bg-embers{ z-index: 5 !important; opacity: .92 !important; }
.bg-sparkles{ z-index: 6 !important; opacity: .55 !important; }

/* Everything else must sit above the ember layers */
.nav, .hero, .section, footer{
  position: relative;
  z-index: 20 !important;
}
body > *:not(.bg-grain):not(.bg-noise):not(.bg-embers):not(.bg-sparkles){
  position: relative;
  z-index: 20 !important;
}

/* Kill any big opaque background plates that hide the effect */
.hero, .hero .wrap, .hero-grid, .hero-main,
.section, .section .wrap, .wrap{
  background: transparent !important;
}

/* DEBUG: if you see this, the layers are working */
.bg-embers, .bg-sparkles{
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: saturate(1.6) contrast(1.4);
}

/* =========================================================
   TRUE CINEMATIC FIRE BACKGROUND (Image-2 style)
   ========================================================= */

html, body{
  background: #000000 !important;
}

/* Big molten fire clouds */
body{
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(255,120,30,.35), transparent 65%),
    radial-gradient(1000px 600px at 80% 10%, rgba(255,200,80,.28), transparent 65%),
    radial-gradient(900px 600px at 50% 90%, rgba(160,30,10,.40), transparent 70%),
    radial-gradient(1400px 900px at 50% 50%, rgba(0,0,0,.0), rgba(0,0,0,.92) 75%),
    #000000 !important;
}

/* Strong cinematic vignette */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background: radial-gradient(circle at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.85) 85%);
}

/* Slight fiery shimmer pulse */
@keyframes firePulse{
  0%{ filter: brightness(1) saturate(1); }
  50%{ filter: brightness(1.08) saturate(1.15); }
  100%{ filter: brightness(1) saturate(1); }
}
body{
  animation: firePulse 8s ease-in-out infinite;
}

/* =========================================================
   DEBUG: EMBERS MUST BE VISIBLE (top-most overlay)
   If you cannot see this, CSS is not updating / not loading.
   ========================================================= */

.bg-embers{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;

  /* bright orange wash + big embers */
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(255,120,30,.35), transparent 65%),
    radial-gradient(900px 600px at 80% 30%, rgba(255,200,80,.25), transparent 65%),
    radial-gradient(10px 10px at 12% 18%, rgba(255,221,122,1), transparent 60%),
    radial-gradient(8px 8px at 16% 62%, rgba(255,160,70,1), transparent 60%),
    radial-gradient(10px 10px at 24% 36%, rgba(214,178,76,1), transparent 60%),
    radial-gradient(8px 8px at 33% 15%, rgba(255,122,47,1), transparent 60%),
    radial-gradient(10px 10px at 42% 52%, rgba(255,221,122,1), transparent 60%),
    radial-gradient(8px 8px at 72% 60%, rgba(255,122,47,1), transparent 60%),
    radial-gradient(10px 10px at 84% 28%, rgba(214,178,76,1), transparent 60%),
    radial-gradient(8px 8px at 92% 78%, rgba(255,221,122,1), transparent 60%);

  /* strong movement */
  animation: embersDebug 3s linear infinite !important;
}

@keyframes embersDebug{
  0%{ transform: translateY(0) translateX(0); }
  100%{ transform: translateY(-80px) translateX(40px); }
}

/* =========================================================
   GLOBAL FIRE THROUGH WHOLE PAGE
   - body carries the fire/embers
   - sections/wraps are transparent
   - cards keep the readable glass
   ========================================================= */

html, body{
  background-color:#000 !important;
}

/* IMPORTANT: do NOT paint big slabs over the background */
.hero,
.section,
.section::before,
.section::after,
.section .wrap,
.section .wrap::before,
.section .wrap::after{
  background: transparent !important;
}

/* Keep text readable by using glass on content containers */
.card,
.feature,
.mini{
  background: rgba(10,10,10,.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Add a subtle inner glow so cards still feel “gold framed” */
.card, .feature, .mini{
  box-shadow:
    0 0 0 1px rgba(214,178,76,.22),
    0 0 26px rgba(214,178,76,.12),
    0 0 70px rgba(255,221,122,.06);
}

/* Make sure background layers sit behind content */
.bg-grain, .bg-noise, .bg-embers, .bg-sparkles{
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}
.bg-grain{ z-index:-6 !important; }
.bg-noise{ z-index:-5 !important; }
.bg-embers{ z-index:-4 !important; }
.bg-sparkles{ z-index:-3 !important; }

/* Ensure site content is above the background */
body > *:not(.bg-grain):not(.bg-noise):not(.bg-embers):not(.bg-sparkles){
  position: relative;
  z-index: 1;
}

/* =========================================================
   FULL BACKGROUND RESET
   ========================================================= */

/* Remove ALL body gradients / animations */
html, body{
  background: #000000 !important;
  animation: none !important;
}

/* Kill any background overlays */
.bg-grain,
.bg-noise,
.bg-embers,
.bg-sparkles{
  display: none !important;
}

/* Remove section background paints */
.hero,
.section,
.section::before,
.section::after,
.section .wrap,
.section .wrap::before,
.section .wrap::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove pseudo element overlays */
body::before,
body::after{
  display: none !important;
}

/* =========================================================
   FIRE EMBERS BACKGROUND (PNG VERSION)
   ========================================================= */

html, body{
  background-color: #000 !important;
}

/* Full page fire image */
body{
  background-image: url("/images/backgrounds/fire-embers-bg.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Dark cinematic overlay for readability */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center,
      rgba(0,0,0,.15) 40%,
      rgba(0,0,0,.75) 85%);
  z-index: 0;
}

/* Make sure content sits above overlay */
body > *{
  position: relative;
  z-index: 1;
}

/* ===== BACKGROUND RESET (force PNG) ===== */
.bg-grain, .bg-noise, .bg-embers, .bg-sparkles{
  display:none !important;
}

html, body{
  background: #000 url("/images/backgrounds/fire-embers-bg.png") center/cover no-repeat fixed !important;
}

/* ===== BACKGROUND RESET (kill body overlay masks) ===== */
body::before,
body::after{
  display:none !important;
}

/* ===== HARD FORCE: Use PNG background everywhere ===== */
html, body{
  background: #000 url("/images/backgrounds/fire-embers-bg.png") center/cover no-repeat fixed !important;
}

/* kill old background DIV overlays */
.bg-grain, .bg-noise, .bg-embers, .bg-sparkles{
  display:none !important;
}

/* kill global overlay masks that can hide the PNG */
body::before, body::after{
  display:none !important;
}

/* make sure nothing paints a solid bg over the body */
.hero, .section, .nav{
  background: transparent !important;
}

/* ===== SOLID CARDS + FIERY STEEL FRAME (keep hero card untouched) ===== */

/* Apply to your content cards (minis + section tiles), but NOT the hero image card */
:root{
  --cardSolid: rgba(0,0,0,.86);
  --cardSolid2: rgba(12,10,8,.92);
  --frameA: rgba(255,221,122,.85);
  --frameB: rgba(255,140,40,.55);
  --frameC: rgba(214,178,76,.70);
}

/* main card targets (adjust/add selectors if you have other card classnames) */
.mini,
.section .tile,
.section .card,
.section .panel,
.section .box,
.section .item,
.section .col,
.section .grid > div{
  position: relative;
  background: linear-gradient(180deg, var(--cardSolid2), var(--cardSolid)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,221,122,.22) !important;
  box-shadow:
    0 0 0 1px rgba(214,178,76,.18) inset,
    0 0 18px rgba(214,178,76,.18),
    0 0 42px rgba(255,140,40,.10) !important;
}

/* fiery steel border glow */
.mini::before,
.section .tile::before,
.section .card::before,
.section .panel::before,
.section .box::before,
.section .item::before,
.section .col::before,
.section .grid > div::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--frameA), var(--frameB), var(--frameC));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  filter: saturate(1.2) contrast(1.05);
  opacity:.9;
}

/* add a subtle warm “sheen” like heated metal */
.mini::after,
.section .tile::after,
.section .card::after,
.section .panel::after,
.section .box::after,
.section .item::after,
.section .col::after,
.section .grid > div::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(1200px 260px at 15% 5%, rgba(255,190,90,.16), transparent 55%),
    radial-gradient(900px 240px at 85% 0%, rgba(255,140,40,.10), transparent 60%);
  opacity:.9;
}

/* ensure text sits above overlays */
.mini > *,
.section .tile > *,
.section .card > *,
.section .panel > *,
.section .box > *,
.section .item > *,
.section .col > *,
.section .grid > div > *{
  position: relative;
  z-index: 1;
}

/* IMPORTANT: keep hero image card transparent / unchanged */
.hero .card,
.hero .card-inner{
  background: transparent !important;
  border-color: rgba(255,221,122,.18) !important; /* keep your existing hero frame vibe */
  box-shadow: inherit !important;
}
.hero .card::before,
.hero .card::after,
.hero .card-inner::before,
.hero .card-inner::after{
  content:none !important;
}

/* ===== FORCE ALL CONTENT CARDS DARK SOLID ===== */

:root{
  --cardDark: #0b0b0b;
  --cardDark2: #111111;
}

/* Target all section cards */
.mini,
.section .card,
.section .tile,
.section .panel,
.section .box,
.section .item,
.section .grid > div{
  background: linear-gradient(180deg, var(--cardDark2), var(--cardDark)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,215,120,.35) !important;
  box-shadow:
    0 0 0 1px rgba(214,178,76,.25) inset,
    0 0 20px rgba(255,140,40,.15) !important;
}

/* REMOVE warm sheen overlays */
.mini::after,
.section .card::after,
.section .tile::after,
.section .panel::after,
.section .box::after,
.section .item::after,
.section .grid > div::after{
  display:none !important;
}

/* KEEP text above everything */
.mini > *,
.section .card > *,
.section .tile > *,
.section .panel > *,
.section .box > *,
.section .item > *,
.section .grid > div > *{
  position:relative;
  z-index:2;
}

/* DO NOT TOUCH HERO */
.hero .card,
.hero .card-inner{
  background: transparent !important;
}

/* ===== ULTRA DEEP BLACK CARDS ===== */

:root{
  --cardUltra: #050505;
  --cardUltra2: #000000;
}

/* ALL section cards */
.mini,
.section .card,
.section .tile,
.section .panel,
.section .box,
.section .item,
.section .grid > div{
  background: linear-gradient(180deg, var(--cardUltra2), var(--cardUltra)) !important;
  border: 1px solid rgba(255,215,120,.55) !important;

  box-shadow:
    0 0 0 1px rgba(214,178,76,.35) inset,
    0 0 25px rgba(255,160,40,.18),
    0 0 60px rgba(255,120,20,.08) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Kill ANY inner glow layers */
.mini::after,
.section .card::after,
.section .tile::after,
.section .panel::after,
.section .box::after,
.section .item::after,
.section .grid > div::after{
  display:none !important;
}

/* Slightly sharpen text contrast */
.mini,
.section .card,
.section .tile,
.section .panel,
.section .box,
.section .item,
.section .grid > div{
  color:#f4f4f4 !important;
}

/* Keep hero untouched */
.hero .card,
.hero .card-inner{
  background: transparent !important;
}

/* ===== HARD FORCE ALL CARDS DARK BLACK ===== */

/* Target the real card structure */
.card,
.card-inner,
.section .card,
.section .card-inner {
  background: #000000 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;

  border: 1px solid rgba(255,215,120,.55) !important;

  box-shadow:
    0 0 0 1px rgba(214,178,76,.35) inset,
    0 0 25px rgba(255,160,40,.20),
    0 0 60px rgba(255,120,20,.08) !important;
}

/* Remove ANY gradient overlays */
.card::before,
.card::after,
.card-inner::before,
.card-inner::after {
  display: none !important;
}

/* Make sure text is bright */
.card,
.card-inner {
  color: #f5f5f5 !important;
}

/* DO NOT affect hero shield */
.hero .card,
.hero .card-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: inherit !important;
}

/* ===== DEEP BLACK CARDS + FIERY STEEL BORDER (FINAL OVERRIDE) ===== */

/* 1) Kill any opacity/filters on common section/wrap containers */
.section,
.section .wrap,
.wrap,
.container,
.grid,
.row{
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2) Card base */
.card{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fiery/steel border ring + glow */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  padding: 2px;                 /* border thickness */
  background:
    linear-gradient(180deg,
      rgba(255,226,150,.95),
      rgba(214,178,76,.70),
      rgba(255,120,20,.45)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  box-shadow:
    0 0 18px rgba(255,170,60,.35),
    0 0 55px rgba(255,120,20,.18);
  pointer-events:none;
}

/* 3) The actual inside panel where text sits = DEEP BLACK */
.card-inner{
  background: rgba(0,0,0,.99) !important;   /* deep black but not “flat” */
  background-image: none !important;
  opacity: 1 !important;

  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65) inset,
    0 12px 40px rgba(0,0,0,.55) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* remove any old overlays on cards */
.card::after,
.card-inner::before,
.card-inner::after{
  display:none !important;
}

/* 4) Text clarity */
.card-inner,
.card-inner p{
  color: rgba(245,245,245,.92) !important;
}
.card-inner h3,
.card-inner .kicker,
.card-inner .title{
  color: rgba(255,226,150,.95) !important;
}

/* 5) Do NOT affect hero image “frame” if it’s using card classes */
.hero .card::before{
  display:none !important;
}
.hero .card-inner{
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== FIX: .feature PANELS = DEEP BLACK + FIERY STEEL BORDER ===== */

/* Don’t affect hero */
.hero .feature,
.hero .feature::before,
.hero .feature::after{
  all: unset !important;
}

/* Make feature boxes true “cards” */
.section .feature{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;

  /* deep black panel */
  background: rgba(0,0,0,.99) !important;
  opacity: 1 !important;

  /* fiery/steel border + glow */
  border: 1px solid rgba(255,215,120,.45) !important;
  box-shadow:
    0 0 0 1px rgba(255,215,120,.10) inset,
    0 0 18px rgba(255,140,40,.22),
    0 0 55px rgba(255,110,20,.12),
    0 16px 52px rgba(0,0,0,.55) !important;
}

/* Add a black “plate” behind content so embers NEVER bleed through */
.section .feature::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78) !important;
  pointer-events:none;
  z-index:0;
}

/* Content above plate */
.section .feature > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Text clarity */
.section .feature,
.section .feature p{
  color: rgba(245,245,245,.92) !important;
}

/* Your feature headings are h4 in your CSS */
.section .feature h4{
  color: rgba(255,226,150,.95) !important;
}

/* Kill the old muted variable impact */
.section .feature p{
  color: rgba(245,245,245,.86) !important;
}

/* ===== TAKEOVER: FEATURE CARDS MUST BE DEEP BLACK (NO GLASS) ===== */

/* target the real “inside cards” */
body .section .feature{
  position: relative !important;
  isolation: isolate !important;          /* prevents blend/opacity weirdness */
  overflow: hidden !important;
  border-radius: 20px !important;

  /* kill any old glass/bg image tricks */
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* DEEP BLACK PLATE (this is what stops ember bleed) */
body .section .feature::after{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.99) !important;  /* <- deep black */
  z-index: 0 !important;
  pointer-events: none !important;
}

/* FIERY / STEEL BORDER RING + GLOW */
body .section .feature::before{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  padding: 2px !important;

  background:
    linear-gradient(180deg,
      rgba(255,226,150,.95),
      rgba(214,178,76,.70),
      rgba(255,120,20,.45)
    ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  box-shadow:
    0 0 18px rgba(255,170,60,.35),
    0 0 55px rgba(255,120,20,.18) !important;

  z-index: 2 !important;
  pointer-events: none !important;
}

/* ensure ALL content is above the black plate */
body .section .feature > *{
  position: relative !important;
  z-index: 1 !important;
}

/* text contrast inside feature cards */
body .section .feature,
body .section .feature p{
  color: rgba(245,245,245,.92) !important;
}
body .section .feature h4{
  color: rgba(255,226,150,.95) !important;
}

/* ===== FINAL: DARKEN ONLY THE FEATURE CARDS UNDER SECTION TITLES ===== */
/* Targets the remaining cards under: Our services, Apps, Podcasts, Kingdom Businesses */

#services .feature,
#apps .feature,
#podcasts .feature,
#businesses .feature,
#kingdom-businesses .feature,
.section#services .feature,
.section#apps .feature,
.section#podcasts .feature,
.section#businesses .feature,
.section#kingdom-businesses .feature{
  position: relative !important;
  isolation: isolate !important;     /* stops blend/overlay bleed */
  z-index: 5 !important;             /* sit ABOVE section ember overlays */
  overflow: hidden !important;
  border-radius: 20px !important;

  /* remove any glass tricks */
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Deep black plate INSIDE the card (this is the real “stop bleed” layer) */
#services .feature::after,
#apps .feature::after,
#podcasts .feature::after,
#businesses .feature::after,
#kingdom-businesses .feature::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.985) !important;  /* almost pure black */
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Fiery/steel border ring + glow */
#services .feature::before,
#apps .feature::before,
#podcasts .feature::before,
#businesses .feature::before,
#kingdom-businesses .feature::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius: 20px !important;
  padding: 2px !important;

  background:
    linear-gradient(180deg,
      rgba(255,226,150,.95),
      rgba(214,178,76,.70),
      rgba(255,120,20,.45)
    ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  box-shadow:
    0 0 18px rgba(255,170,60,.35),
    0 0 55px rgba(255,120,20,.18) !important;

  z-index: 2 !important;
  pointer-events:none !important;
}

/* Put all content above the black plate */
#services .feature > *,
#apps .feature > *,
#podcasts .feature > *,
#businesses .feature > *,
#kingdom-businesses .feature > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Text contrast */
#services .feature, #services .feature p,
#apps .feature, #apps .feature p,
#podcasts .feature, #podcasts .feature p,
#businesses .feature, #businesses .feature p,
#kingdom-businesses .feature, #kingdom-businesses .feature p{
  color: rgba(245,245,245,.92) !important;
}

/* Feature headings are h4 in your CSS */
#services .feature h4,
#apps .feature h4,
#podcasts .feature h4,
#businesses .feature h4,
#kingdom-businesses .feature h4{
  color: rgba(255,226,150,.95) !important;
}

/* ===== TRUE DARK FEATURE CARDS (STACK FIX) ===== */

/* Step 1: lift feature cards above ember overlay */
#services .feature,
#apps .feature,
#podcasts .feature,
#businesses .feature{
  position: relative !important;
  z-index: 20 !important;          /* higher than section overlay */
  isolation: isolate !important;   /* creates own stacking context */
  overflow: hidden !important;
  border-radius: 20px !important;
}

/* Step 2: real deep black plate INSIDE card */
#services .feature::after,
#apps .feature::after,
#podcasts .feature::after,
#businesses .feature::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.99) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Step 3: keep content above plate */
#services .feature > *,
#apps .feature > *,
#podcasts .feature > *,
#businesses .feature > *{
  position: relative !important;
  z-index: 1 !important;
}

/* Step 4: force text brightness */
#services .feature,
#services .feature p,
#apps .feature,
#apps .feature p,
#podcasts .feature,
#podcasts .feature p,
#businesses .feature,
#businesses .feature p{
  color: rgba(245,245,245,.95) !important;
}

/* headings inside feature cards */
#services .feature h4,
#apps .feature h4,
#podcasts .feature h4,
#businesses .feature h4{
  color: rgba(255,226,150,.98) !important;
}

/* ===== KILL GLASS OVERLAY ONLY IN THESE SECTIONS ===== */
/* The ember background stays on the page, but we stop the section overlay tint. */

#services::before, #services::after,
#apps::before, #apps::after,
#podcasts::before, #podcasts::after,
#businesses::before, #businesses::after{
  display: none !important;
  opacity: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

/* ===== REBUILD THE FEATURE CARDS AS SOLID BLACK ===== */

#services .feature,
#apps .feature,
#podcasts .feature,
#businesses .feature{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 20px !important;

  /* kill glass tricks */
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* solid black plate */
#services .feature::after,
#apps .feature::after,
#podcasts .feature::after,
#businesses .feature::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.99) !important;
  z-index: 0 !important;
  pointer-events:none !important;
}

/* fiery steel border ring */
#services .feature::before,
#apps .feature::before,
#podcasts .feature::before,
#businesses .feature::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius: 20px !important;
  padding: 2px !important;

  background:
    linear-gradient(180deg,
      rgba(255,226,150,.95),
      rgba(214,178,76,.70),
      rgba(255,120,20,.45)
    ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;

  box-shadow:
    0 0 18px rgba(255,170,60,.35),
    0 0 55px rgba(255,120,20,.18) !important;

  z-index: 2 !important;
  pointer-events:none !important;
}

/* content above plate */
#services .feature > *,
#apps .feature > *,
#podcasts .feature > *,
#businesses .feature > *{
  position: relative !important;
  z-index: 1 !important;
}

/* text */
#services .feature, #services .feature p,
#apps .feature, #apps .feature p,
#podcasts .feature, #podcasts .feature p,
#businesses .feature, #businesses .feature p{
  color: rgba(245,245,245,.95) !important;
}
#services .feature h4,
#apps .feature h4,
#podcasts .feature h4,
#businesses .feature h4{
  color: rgba(255,226,150,.98) !important;
}

/* ===== HOME HUB GRID ===== */

.hub-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:20px;
}

.hub-card{
  grid-column: span 12;
  position:relative;
  min-height:220px;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(214,178,76,.25);
  background:#0f0f0f;
  box-shadow: 0 0 30px rgba(214,178,76,.15);
  transition: all .3s ease;
}

@media(min-width:900px){
  .hub-card{ grid-column: span 6; }
}

.hub-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.9), rgba(0,0,0,.6));
}

.hub-content{
  position:relative;
  height:100%;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.hub-content h2{
  margin:0;
  font-size:22px;
  color:#f7f2e6;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.hub-btn{
  align-self:flex-start;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(214,178,76,.7);
  color:#ffd97a;
  font-size:14px;
}

.hub-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 30px rgba(214,178,76,.25),
    0 0 80px rgba(255,221,122,.15);
}

/* ===== HOME HUB GRID ===== */

.hub-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:20px;
}

.hub-card{
  grid-column: span 12;
  position:relative;
  min-height:220px;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(214,178,76,.25);
  background:#0f0f0f;
  box-shadow: 0 0 30px rgba(214,178,76,.15);
  transition: all .3s ease;
}

@media(min-width:900px){
  .hub-card{ grid-column: span 6; }
}

.hub-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.9), rgba(0,0,0,.6));
}

.hub-content{
  position:relative;
  height:100%;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.hub-content h2{
  margin:0;
  font-size:28px;
  color:#f5f2ea;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.hub-btn{
  align-self:flex-start;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(214,178,76,.7);
  color:#ffd97a;
  font-size:14px;
}

.hub-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 30px rgba(214,178,76,.25),
    0 0 80px rgba(255,221,122,.15);
}

/* === FORCE HUB TITLE SIZE TO MATCH CTA STYLE === */
.hub-content h2{
  font-size: 20px !important;
  font-weight: 600 !important;
}

.section-title{
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* === REFINE HUB TITLES SMALLER === */
.hub-content h2{
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;
}

.section-title{
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;
}

/* === SOFTEN CARD DARKNESS === */
.hub-card{
  background: rgba(10,10,12,.88) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hub-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.88),
    rgba(0,0,0,.45)
  ) !important;
}

/* === HOME HUB: LIGHTER GLASS CARDS (FORCE) === */
.hub-card,
.section .hub-grid .hub-card{
  background: rgba(10,10,12,.78) !important;
}

#home-hub .hub-overlay,
.section .hub-grid .hub-overlay{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.72),
    rgba(0,0,0,.32)
  ) !important;
}

/* === HERO MINI CARDS: LIGHTER GLASS (MATCH HUB) === */
.hero .mini{
  background: rgba(10,10,12,.78) !important;
  border: 1px solid rgba(214,178,76,.28) !important;
  box-shadow: 0 0 24px rgba(214,178,76,.12) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero .mini p{
  color: rgba(242,243,247,.78) !important;
}

/* === NAV: BIGGER ON DESKTOP (+4px) === */
.nav .nav-links a{
  font-size: 18px; /* was ~14px */
}

/* Brand slightly bigger too */
.nav .brand span{
  font-size: 20px;
}

/* === CANONICAL NAV + MENU SYSTEM === */
:root{ --navH: 64px; }

body{ padding-top: var(--navH); }

.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483640;
  overflow: visible !important;
}

body.nav-home-match::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--navH) + 14px);
  z-index: 2147483639;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,6,10,.98), rgba(5,6,10,.90) 70%, rgba(5,6,10,0) 100%);
}

body.nav-home-match .nav{
  background: linear-gradient(180deg, rgba(5,6,10,.92), rgba(5,6,10,.72));
}

body.businesses-page .klivestreams-hero{
  margin-top: 44px;
}

.nav .wrap,
.nav .nav-inner{
  overflow: visible !important;
}

.nav .nav-inner{
  position: relative;
  z-index: 2147483641;
}

.nav .nav-links a{
  font-size: 18px;
}

.nav .brand span{
  font-size: 20px;
}

.nav-menu-btn{
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(214,178,76,.70);
  background: rgba(0,0,0,.28);
  color: #ffd97a;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  z-index: 100001;
}

.nav-menu{
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100000;
  transition: opacity .22s ease, visibility .22s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav-menu[aria-hidden="false"]{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.menu-panel{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(58,38,14,.98), rgba(30,20,10,.99));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: 1px solid rgba(246,198,91,.22);
  box-shadow: -12px 0 32px rgba(0,0,0,.22);
  overflow-y: auto;
  transform: none;
  pointer-events: auto;
  z-index: 100001;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

.menu-panel,
.menu-panel *{
  pointer-events: auto;
}

.menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid rgba(246,198,91,.10);
}

.menu-title{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f5f1ea;
}

.menu-close{
  position: relative;
  z-index: 2;
  background: rgba(246,198,91,.10);
  border: 1px solid rgba(246,198,91,.22);
  color: #f6c65b;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.menu-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 2px 2px;
}

.menu-list a{
  display: block;
  position: relative;
  z-index: 100002;
  padding: 14px 16px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid rgba(246,198,91,.18);
  background: rgba(78,52,20,.94);
  text-decoration: none;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-shadow: none;
}

.nav-links a{
  display: block;
  position: relative;
  z-index: 100002;
  background: rgba(78,52,20,.94);
  border: 1px solid rgba(246,198,91,.18);
  color: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing: .3px;
  touch-action: manipulation;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-shadow: none;
}

.menu-list a:hover{
  background: rgba(102,68,26,.98);
  border-color: rgba(246,198,91,.26);
  color: #fff;
}

.menu-list a:active,
.menu-list a:hover,
.nav-links a:active,
.nav-links a:hover{
  background: rgba(102,68,26,.98);
  border-color: rgba(246,198,91,.30);
  color: #fff;
  text-shadow: none;
}

.nav-links a[aria-current="page"],
.menu-list a[aria-current="page"]{
  color: #fff4d6 !important;
  font-weight: 700;
  background: rgba(128,88,34,.98) !important;
  border: 1px solid rgba(246,198,91,.42) !important;
  box-shadow: none;
  text-shadow: none !important;
}

html.menu-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.22);
  pointer-events: none;
  z-index: 99999;
}

html.menu-open .nav-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.menu-open .nav-menu .menu-panel{
  transform: none;
}

html.menu-open .nav,
html.menu-open .nav-menu,
html.menu-open .nav-menu *{
  pointer-events: auto;
}

@media (max-width: 860px){
  .nav .nav-links{ display:none !important; }
  .nav-menu-btn{ display:inline-flex; }
}

@media (min-width: 861px){
  .nav-menu-btn,
  .nav-menu{
    display: none !important;
  }
}

/* ===== IMAGE SECTIONS (HOME) ===== */
.image-section {
  width: 100%;
  padding: 60px 0;
  display: flex;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    rgba(255,215,120,0.05),
    rgba(0,0,0,0.95)
  );
}

.image-section img {
  width: min(1200px, 92vw);
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow:
    0 0 40px rgba(214,178,76,0.25),
    0 0 90px rgba(214,178,76,0.12);
}

/* ===== CARD BG IMAGE (HUB CARDS) ===== */
/* The hub cards must be position:relative so the absolute bg can fill them */
.hub-card, .hub-item, .hub, .card, .tile, .panel {
  position: relative;
  overflow: hidden;
}

/* readable overlay on top of the image */
.hub-card::after, .hub-item::after, .hub::after, .card::after, .tile::after, .panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: radial-gradient(1200px 500px at 20% 20%, rgba(0,0,0,.20), rgba(0,0,0,.78));
  pointer-events:none;
}

/* keep actual content above the background */
.hub-card > *, .hub-item > *, .hub > *, .card > *, .tile > *, .panel > *{
  position: relative;
  z-index: 1;
}

/* Ensure the card has some height so the bg has space */
.hub-card, .hub-item, .hub, .card, .tile, .panel{
  min-height: 140px;
}

/* Actual rule: parent of the h2 (the card container) */
h2{
  /* no-op */
}
h2{
  /* no-op */
}
/* ===== HOME HUB: BACKGROUND IMAGES ON CARDS (FINAL, CLEAN) ===== */

.hub-card{
  display: block;
  position: relative;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 6 hub cards in visual order */
.hub-card:nth-of-type(1){ background-image: url("/assets/sections/about_us.png") !important; }
.hub-card:nth-of-type(2){ background-image: url("/assets/sections/our_services.png") !important; }
.hub-card:nth-of-type(3){ background-image: url("/assets/sections/apps.png") !important; }
.hub-card:nth-of-type(4){ background-image: url("/assets/sections/podcasts.png") !important; }
.hub-card:nth-of-type(5){ background-image: url("/assets/sections/kingdom_businesses.png") !important; }
.hub-card:nth-of-type(6){ background-image: url("/assets/sections/software.png") !important; }

/* overlay above image */
.hub-card .hub-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(0,0,0,.75), rgba(0,0,0,.45));
}

/* content above overlay */
.hub-card .hub-content{
  position: relative;
  z-index: 2;
}

/* ===== HUB CARD: IMAGE INSIDE BLACK BOX ===== */
.hub-thumb{
  display:block;
  width: 100%;
  height: 110px;
  object-fit: contain;
  border-radius: 14px;
  background: #050505;
  border: 1px solid rgba(214,178,76,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,221,122,.10),
    0 0 20px rgba(214,178,76,.10);
  margin: 0 0 12px 0;
  opacity: .95;
}

/* Keep hub content above overlay and give room for thumbnail */
#home-hub .hub-card{ position: relative; overflow: hidden; }
#home-hub .hub-overlay{ pointer-events:none; }
#home-hub .hub-content{ position: relative; z-index: 2; }

/* ===== ABOUT SECTION ===== */

#about .about-hero-image {
  width: 100%;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 45px rgba(214,178,76,.45);
}

#about .about-hero-image img {
  width: 100%;
  display: block;
}

#about .about-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

#about .about-content h2 {
  font-size: 2.6rem;
  margin-bottom: 20px;
  color: #d6b24c;
}

#about .about-content p {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 22px;
  color: #e5e5e5;
}

/* ===== RESPONSIVE IMAGE FIX ===== */

.about-hero-image {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.about-hero-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .about-hero-image img {
    width: 100%;
    height: auto;
  }
}

/* Optional cinematic scaling */
.about-hero-image img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

/* ===== PAGE LAYOUT (REUSABLE) ===== */
.page-top { padding-top: 120px; }

.page-hero{
  width:100%;
  max-width:100%;
  overflow:hidden;
  border-radius:18px;
  box-shadow: 0 0 45px rgba(214,178,76,.45);
  margin-bottom: 34px;
}
.page-hero img{
  width:100%;
  height:auto;
  display:block;
  object-fit: contain;
}

/* Make hero a nice "banner" on larger screens without being too tall */
@media (min-width: 900px){
  .page-hero img{
    max-height: 70vh;
  }
}

.page-content{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.page-content h1{
  color:#d6b24c;
  font-size: 2.6rem;
  margin-bottom: 14px;
}
.page-content p{
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 18px;
  color:#e5e5e5;
}

/* ===== SERVICES GRID ===== */
.service-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .service-grid{ grid-template-columns: 1fr; }
}

.service-card{
  border-radius: 16px;
  padding: 18px 18px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(214,178,76,.35);
  box-shadow: 0 0 22px rgba(214,178,76,.12);
  text-align: left;
}
.service-card h3{
  margin: 0 0 8px 0;
  color:#d6b24c;
  font-size: 1.15rem;
}
.service-card p{
  margin: 0;
  color:#e5e5e5;
  opacity:.95;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ===== KB BLACK CARDS (ABOUT + SERVICES LOOK) ===== */
.kb-card{
  border-radius: 18px;
  padding: 18px 18px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(214,178,76,.35);
  box-shadow: 0 0 22px rgba(214,178,76,.12);
  text-align: left;
  margin: 0 0 16px 0;
}

.kb-card h3{
  margin: 0 0 10px 0;
  color:#d6b24c;
  font-size: 1.2rem;
  letter-spacing: .2px;
}

.kb-card p{
  margin: 0;
  color:#e5e5e5;
  opacity:.95;
  font-size: 1.05rem;
  line-height: 1.7;
}

.kb-list{
  margin: 0;
  padding-left: 18px;
  color:#e5e5e5;
  opacity:.95;
  font-size: 1.05rem;
  line-height: 1.8;
}

.kb-list li{ margin: 6px 0; }

.about-cards{ max-width: 980px; margin: 0 auto; }

/* ===== APPS PAGE ===== */
.kb-app-card { margin-bottom: 18px; }

.kb-app-head .kb-sub{
  margin-top: 6px;
  margin-bottom: 0;
  color:#e5e5e5;
  opacity:.95;
  line-height: 1.7;
}

.kb-badge{
  display:inline-block;
  margin-left:10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1;
  color:#111;
  background: rgba(214,178,76,.95);
  border: 1px solid rgba(255,221,122,.65);
  box-shadow: 0 0 18px rgba(214,178,76,.18);
  vertical-align: middle;
}

.kb-video{
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(214,178,76,.25);
  background: rgba(0,0,0,.55);
}

.kb-video video{
  width: 100%;
  height: auto;
  display: block;
}

.kb-video-note{
  padding: 10px 12px;
  font-size: .95rem;
  opacity: .9;
}

.kb-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== SOFTWARE PAGE 2-COL LAYOUT ===== */
.kb-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 820px){
  .kb-2col{ grid-template-columns: 1fr; }
}

/* ===== CONTACT PAGE ===== */
.kb-contact-hero{
  padding: 28px;
  background:
    radial-gradient(900px 420px at 14% 0%, rgba(214,178,76,.24), transparent 60%),
    linear-gradient(180deg, rgba(14,12,10,.96), rgba(6,6,8,.94));
  border: 1px solid rgba(214,178,76,.28);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.42), 0 0 34px rgba(214,178,76,.14);
  margin-bottom: 22px;
}
.kb-contact-hero-inner{
  display:flex;
  gap:20px;
  align-items:stretch;
  justify-content:space-between;
}
.kb-contact-hero-title{
  flex: 1;
  min-width: 240px;
}
.kb-contact-hero-title h1{
  color:#d6b24c;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.05;
}
.kb-contact-hero-title p{
  color:#ece7db;
  opacity:.96;
  line-height:1.75;
  max-width: 62ch;
}

.kb-mini-card{
  min-width: 240px;
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(16,12,7,.88));
  border: 1px solid rgba(214,178,76,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.28);
}
.kb-mini-title{ color:#f0ca66; font-weight:700; margin-bottom:6px; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; }
.kb-mini-value{ color:#f5f1e8; font-weight:700; font-size:1.08rem; }
.kb-mini-sub{ color:#e5e5e5; opacity:.9; font-size:.95rem; margin-top:4px; }

.kb-card{
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(8,8,10,.9), rgba(14,12,9,.82));
  border: 1px solid rgba(214,178,76,.26);
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
  text-align: left;
  margin: 0 0 18px 0;
}
.kb-card h3{
  margin: 0 0 12px 0;
  color:#e0b84f;
  font-size: 1.24rem;
  letter-spacing: .02em;
}

.kb-contact-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(214,178,76,.14);
}
.kb-contact-row:last-child{ border-bottom:none; }
.kb-contact-label{
  width: 96px;
  flex: 0 0 96px;
  color:#d6b24c;
  font-weight: 700;
  letter-spacing:.02em;
}
.kb-contact-value{ color:#f0ede6; line-height:1.65; }
.kb-contact-muted{ color:#d7d0c3; opacity:.82; }
.kb-contact-value a{
  color: #f3d478;
  text-decoration: none;
}
.kb-contact-value a:hover{
  color: #ffdd7a;
  text-decoration: underline;
}
.kb-contact-socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.kb-contact-socials a{
  display:inline-flex;
  align-items:center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(214,178,76,.08);
  border: 1px solid rgba(214,178,76,.24);
}
.kb-contact-actions,
.kb-form-actions{
  margin-top: 18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.kb-contact-actions .pill,
.kb-form-actions .pill,
.kb-map-link{
  min-height: 46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,221,122,.5);
  background: linear-gradient(180deg, rgba(214,178,76,.22), rgba(120,76,18,.24));
  color: #fff3cc;
  box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 22px rgba(214,178,76,.16);
}
.kb-contact-actions .pill:hover,
.kb-form-actions .pill:hover,
.kb-map-link:hover{
  background: linear-gradient(180deg, rgba(255,221,122,.28), rgba(143,88,23,.34));
  color:#fff8df;
  text-decoration:none;
  transform: translateY(-1px);
}

.kb-form{
  display:grid;
  gap:8px;
}
.kb-form label{
  display:block;
  color:#d6b24c;
  font-weight:700;
  margin: 10px 0 4px;
}
.kb-form input, .kb-form select, .kb-form textarea{
  width:100%;
  border-radius: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(214,178,76,.22);
  background: rgba(0,0,0,.45);
  color:#f3efe7;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.kb-form input:focus, .kb-form select:focus, .kb-form textarea:focus{
  border-color: rgba(255,221,122,.52);
  box-shadow: 0 0 0 3px rgba(214,178,76,.12);
  background: rgba(0,0,0,.58);
}
.kb-form input::placeholder, .kb-form textarea::placeholder{ color: rgba(229,229,229,.65); }

.kb-map-card{
  padding: 20px;
}
.kb-map-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 16px;
}
.kb-map{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(214,178,76,.28);
  background: rgba(0,0,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.kb-map iframe{
  width:100%;
  height: 380px;
  border:0;
  display:block;
}

@media (max-width: 820px){
  .kb-contact-hero{
    padding: 22px;
  }
  .kb-contact-hero-inner{
    flex-direction: column;
  }
  .kb-2col{
    gap: 14px;
  }
  .kb-contact-row{
    flex-direction: column;
    gap:6px;
  }
  .kb-contact-label{
    width: auto;
    flex-basis: auto;
  }
  .kb-contact-actions,
  .kb-form-actions,
  .kb-map-head{
    flex-direction: column;
  }
  .kb-contact-actions .pill,
  .kb-form-actions .pill,
  .kb-map-link{
    width: 100%;
  }
  .kb-map iframe{
    height: 320px;
  }
}

.nav-links a[aria-current="page"],
.menu-list a[aria-current="page"]{
  color:#ffffff !important;
  font-weight:700;
  background:
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.82)),
    radial-gradient(circle at 30% 20%, rgba(246,198,91,.14), transparent 55%) !important;
  border: 1px solid rgba(246,198,91,.55) !important;
  box-shadow:
    0 0 0 1px rgba(246,198,91,.12) inset,
    0 0 14px rgba(246,198,91,.16);
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.nav-links a[aria-current="page"]:hover,
.nav-links a[aria-current="page"]:active,
.menu-list a[aria-current="page"]:hover,
.menu-list a[aria-current="page"]:active{
  color:#ffffff !important;
  background:
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.82)),
    radial-gradient(circle at 30% 20%, rgba(246,198,91,.14), transparent 55%) !important;
  border: 1px solid rgba(246,198,91,.55) !important;
  box-shadow:
    0 0 0 1px rgba(246,198,91,.12) inset,
    0 0 14px rgba(246,198,91,.16);
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

.nav-links a[aria-current="page"]::after,
.menu-list a[aria-current="page"]::after{
  width:100%;
  opacity:1;
}

/* Shared fixed stack for site floating controls */
.floating-stack{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.kingdom-tech-float{
  position: static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,215,0,.28);
  background:linear-gradient(180deg, rgba(18,18,18,.92), rgba(8,8,8,.96));
  box-shadow:0 16px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#f7e3a1;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
  isolation:isolate;
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transform:none;
}

.kingdom-tech-float:hover{
  transform:translateY(-2px);
  color:#fff4c2;
  border-color:rgba(255,215,0,.5);
  box-shadow:0 20px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(255,215,0,.08);
}

.kingdom-tech-float:focus-visible{
  outline:2px solid rgba(255,215,0,.72);
  outline-offset:3px;
}

@media (max-width:700px){
  .floating-stack{
    right: 20px;
    bottom: 20px;
  }
  .kingdom-tech-float{
    min-height:42px;
    padding:0 14px;
    font-size:.92rem;
  }
}

body > .kingdom-tech-float{
  position:fixed !important;
  right:20px !important;
  bottom:20px !important;
  z-index:99999 !important;
}

body > .floating-stack{
  position:fixed !important;
  right:20px !important;
  bottom:20px !important;
  z-index:99999 !important;
}

.floating-stack > .kingdom-tech-float,
.floating-stack > .kb-bot-root{
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  transform: none !important;
}

body > .nav-menu{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100vh !important;
  z-index:100000 !important;
  pointer-events:none !important;
}

html.menu-open body > .nav-menu{
  display:block !important;
  pointer-events:auto !important;
}

/* ===== GOOGLE PLAY BUTTON (APPS PAGE) ===== */
.store-btn{
  display:inline-block;
  margin-top:12px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(214,178,76,.95);
  color:#d6b24c;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 18px rgba(214,178,76,.18);
}
.store-btn:active{ transform: translateY(1px); }
.store-btn:hover{
  background: rgba(214,178,76,.14);
  box-shadow: 0 0 28px rgba(214,178,76,.35);
}

/* ===============================
   KINGDOM LIVESTREAMS SPECTACLE
================================ */

.klivestreams-hero {
  position: relative;
  width: 100%;
  min-height: 95vh;
  background: url("/assets/businesses/kingdom_livestreams.png") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  overflow: hidden;
}

.klivestreams-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.95)),
    radial-gradient(circle at center, rgba(212,175,55,0.15), transparent 60%);
  z-index: 1;
}

.klivestreams-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
  color: #fff;
}

.klivestreams-title {
  font-size: 3.5rem;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #d4af37, #ffcc55, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  margin-bottom: 25px;
  text-shadow: 0 0 30px rgba(212,175,55,0.4);
}

.klivestreams-lead {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: #f0f0f0;
}

.klivestreams-body {
  font-size: 1.1rem;
  margin-bottom: 25px;
  color: #cccccc;
}

.klivestreams-list {
  list-style: none;
  padding: 0;
  margin-bottom: 35px;
}

.klivestreams-list li {
  margin: 10px 0;
  font-size: 1.1rem;
  color: #d4af37;
  font-weight: 600;
}

.klivestreams-closing {
  font-size: 1.2rem;
  color: #ffffff;
}

.klivestreams-closing span {
  display: block;
  font-size: 1.6rem;
  margin-top: 10px;
  font-weight: 700;
  background: linear-gradient(90deg, #ffcc55, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===============================
   KLS OVERRIDES: IMAGE ON TOP, TEXT BELOW (BRIGHT POSTER)
================================ */

/* section becomes a clean spotlight block */
.klivestreams-hero{
  width: 100%;
  min-height: auto;
  padding: 0;
  background: transparent !important;
}

/* the poster image itself (NO dark overlay) */
.klivestreams-banner{
  width: 100%;
  height: min(78vh, 720px);
  background: url("/assets/businesses/kingdom_livestreams.png") center top / cover no-repeat;
  border-bottom: 2px solid rgba(212,175,55,.25);
}

/* copy area below the image */
.klivestreams-copy{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 18px 64px;
  text-align: center;
}

/* kill the old overlay if it exists anywhere */
.klivestreams-overlay{ display:none !important; }

/* slightly tighten title spacing since it’s below now */
.klivestreams-title{
  margin-top: 0;
}

/* improve readability on dark page without dimming image */
.klivestreams-lead{ color:#f2f2f2; }
.klivestreams-body{ color:#cfcfcf; }

/* ===============================
   KLS MOBILE RESPONSIVE FIX
================================ */

@media (max-width: 640px){

  /* give the page some breathing room */
  .klivestreams-copy{
    padding: 22px 14px 44px;
    max-width: 680px;
  }

  /* show full poster on mobile (no crop) */
  .klivestreams-banner{
    height: 56vh;               /* smaller hero on phones */
    min-height: 320px;
    max-height: 520px;
    background-size: contain;   /* IMPORTANT: fit the full poster */
    background-position: center top;
    background-color: #000;     /* letterbox bars look premium */
  }

  /* responsive typography */
  .klivestreams-title{
    font-size: 1.9rem;
    letter-spacing: 1px;
    margin-bottom: 14px;
  }

  .klivestreams-lead{
    font-size: 1.02rem;
    line-height: 1.45;
    margin-bottom: 12px;
  }

  .klivestreams-body{
    font-size: 0.98rem;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  .klivestreams-list li{
    font-size: 1.0rem;
    margin: 8px 0;
  }

  .klivestreams-closing{
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .klivestreams-closing span{
    font-size: 1.25rem;
    margin-top: 8px;
  }
}

/* tablets: keep it bold but not huge */
@media (min-width: 641px) and (max-width: 980px){
  .klivestreams-banner{
    height: 62vh;
    max-height: 640px;
  }
  .klivestreams-title{
    font-size: 2.6rem;
  }
}

/* ===============================
   KLS RESPONSIVE LAYOUT:
   Desktop = side-by-side
   Mobile  = image top, text below
================================ */

/* desktop/tablet: side-by-side */
@media (min-width: 901px){
  .klivestreams-hero{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 !important;
  }

  .klivestreams-banner{
    width: 54%;
    max-height: none;
    height: auto;
    object-fit: cover; /* looks cinematic on desktop */
    border-bottom: none;
    border-right: 2px solid rgba(212,175,55,.25);
    background: #000;
  }

  .klivestreams-copy{
    width: 46%;
    margin: 0;
    max-width: none;
    border-left: none;
    border-right: none;
    padding: 38px 26px 46px;
  }
}

/* mobile: STACKED (image top, words below) */
@media (max-width: 900px){
  .klivestreams-hero{
    display: block;
    max-width: 100%;
    margin: 0;
  }

  .klivestreams-banner{
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain; /* show full poster on phones */
    border-right: none;
    border-bottom: 2px solid rgba(212,175,55,.25);
    background: #000;
  }

  .klivestreams-copy{
    width: auto;
    max-width: 980px;
    margin: 0 auto;
  }
}

/* KLS: ensure IMG actually displays */
.klivestreams-banner{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  background:transparent !important;
}

/* ===============================
   KLS FORCE: SHOW POSTER IMAGE
================================ */
.klivestreams-banner{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 260px;          /* prevents collapsing */
  aspect-ratio: 3 / 2;        /* keeps space even before load */
  object-fit: contain !important;
  background: #000;           /* premium letterbox */
}

@media (min-width: 901px){
  .klivestreams-hero{
    display: flex;
    align-items: stretch;
  }
  .klivestreams-banner{
    width: 54% !important;
    aspect-ratio: auto;
    object-fit: cover !important; /* cinematic crop on desktop */
    min-height: 520px;
  }
}

@media (max-width: 900px){
  .klivestreams-hero{ display:block !important; }
  .klivestreams-banner{
    width: 100% !important;
    object-fit: contain !important; /* full poster on phone */
    min-height: 320px;
  }
}

/* ===============================
   KLS GAP FIX (remove ghost box spacing)
================================ */

/* remove any leftover background */
.klivestreams-hero{
  background: none !important;
  background-image: none !important;
}

/* IMG should not reserve fake space */
.klivestreams-banner{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* tighten spacing between image and text */
.klivestreams-copy{
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* mobile: stacked, no extra gaps */
@media (max-width: 900px){
  .klivestreams-hero{ display:block !important; }
  .klivestreams-banner{ margin-bottom: 0 !important; }
  .klivestreams-copy{ padding-top: 16px !important; }
}

/* desktop: keep side-by-side */
@media (min-width: 901px){
  .klivestreams-hero{
    display:flex !important;
    align-items: stretch !important;
  }
  .klivestreams-banner{
    width: 54% !important;
    object-fit: cover !important;
  }
  .klivestreams-copy{
    width: 46% !important;
    padding-top: 28px !important;
  }
}

/* ===============================
   KLS PHONE UPDATE (LIVE)
   - Phone: image top, text below
   - Desktop: side-by-side
================================ */

/* PHONE */
@media (max-width: 700px){
  .klivestreams-hero{
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .klivestreams-banner{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .klivestreams-copy{
    width: auto !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 18px 14px 44px !important;
    text-align: center !important;
  }

  .klivestreams-title{
    font-size: 1.9rem !important;
    letter-spacing: 1px !important;
    margin: 10px 0 12px !important;
  }

  .klivestreams-lead,
  .klivestreams-body{
    font-size: 1.0rem !important;
    line-height: 1.45 !important;
  }

  .klivestreams-list li{
    font-size: 1.0rem !important;
    margin: 8px 0 !important;
  }

  .klivestreams-closing span{
    font-size: 1.25rem !important;
  }
}

/* ===== SOFTWARE PAGE VIDEO ===== */
.software-video-wrapper{
  margin: 26px 0 10px;
  display: flex;
  justify-content: center;
}

.software-video{
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  border-radius: 18px;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255,221,122,.25),
    0 22px 70px rgba(0,0,0,.65);
}

/* ===== HEADER LOGO IMAGE ===== */
.badge{
  width:60px;
  height:60px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ===== Kingdom Chatbot ===== */
.kb-bot-root {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  top: auto;
  z-index: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  pointer-events: auto;
  transform: none;
}

body > .kb-bot-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  top: auto;
  z-index: 9999;
}

.kb-bot-fab{
  position: static;
  height: 52px; min-width: 84px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,76,.8);
  background: radial-gradient(circle at 30% 30%, rgba(255,221,122,.25), rgba(0,0,0,.95));
  color: #f7e7b0;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 24px rgba(214,178,76,.20);
  cursor: pointer;
  font-weight: 700;
  margin: 0;
  transform: none;
}

.kb-bot-panel{
  position: absolute;
  right: 0;
  bottom: 62px;
  width: min(92vw, 380px);
  height: min(70vh, 520px);
  display: none;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(214,178,76,.65);
  background: rgba(0,0,0,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 28px rgba(214,178,76,.18);
}

.kb-bot-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 14px;
  background: linear-gradient(90deg, rgba(214,178,76,.22), rgba(0,0,0,.92));
  border-bottom: 1px solid rgba(214,178,76,.25);
}

.kb-bot-title{ display:flex; gap:10px; align-items:center; }
.kb-bot-badge{
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(214,178,76,.7);
  background: radial-gradient(circle at 35% 35%, rgba(255,221,122,.28), rgba(0,0,0,.85));
  box-shadow: 0 0 16px rgba(214,178,76,.18);
}
.kb-bot-name{ color:#f7e7b0; font-weight: 800; line-height: 1.1; }
.kb-bot-sub{ color: rgba(247,231,176,.75); font-size: 12px; margin-top: 1px; }

.kb-bot-close{
  border: 1px solid rgba(214,178,76,.35);
  background: rgba(0,0,0,.35);
  color: #f7e7b0;
  border-radius: 10px;
  height: 34px;
  width: 38px;
  cursor: pointer;
}

.kb-bot-body{
  flex: 1;
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-bot-bubble{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.kb-bot-bubble.assistant{
  align-self: flex-start;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(214,178,76,.18);
}

.kb-bot-bubble.user{
  align-self: flex-end;
  color: rgba(0,0,0,.95);
  background: rgba(214,178,76,.95);
  border: 1px solid rgba(255,221,122,.25);
}

.kb-bot-footer{
  padding: 10px;
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(214,178,76,.18);
  background: rgba(0,0,0,.75);
}

.kb-bot-input{
  flex: 1;
  resize: none;
  border-radius: 14px;
  border: 1px solid rgba(214,178,76,.28);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  outline: none;
}

.kb-bot-send{
  width: 84px;
  border-radius: 14px;
  border: 1px solid rgba(214,178,76,.55);
  background: radial-gradient(circle at 30% 30%, rgba(255,221,122,.25), rgba(0,0,0,.92));
  color: #f7e7b0;
  font-weight: 800;
  cursor: pointer;
}