/* === V18 CTO HERO + MOBILE REPAIR: exact red-box hero replacement === */
:root{
  --ss-black:#050806;
  --ss-emerald-deep:#061f17;
  --ss-emerald:#0c6b4d;
  --ss-emerald-bright:#00b884;
  --ss-gold:#d6b25e;
  --ss-gold-soft:#f1d58b;
  --ss-cream:#f7f1df;
  --ss-light:#f4f7f1;
  --ss-ink:#071b14;
  --ss-muted:#52665c;
  --ss-line:rgba(214,178,94,.26);
  --ss-shadow:0 26px 90px rgba(4,24,18,.22);
}
html,body{max-width:100%!important;overflow-x:hidden!important;scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,184,132,.16), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(214,178,94,.13), transparent 24%),
    linear-gradient(180deg,#eef8f2 0%,#f8fbf5 44%,#ffffff 100%)!important;
  color:var(--ss-ink)!important;
}
.top,.mobileTop{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(7,27,20,.10)!important;
  border-radius:24px!important;
  box-shadow:0 14px 46px rgba(7,27,20,.10)!important;
  backdrop-filter:blur(18px)!important;
}
.menuBtn{background:#061f17!important;color:var(--ss-gold-soft)!important;border:1px solid rgba(214,178,94,.34)!important;box-shadow:0 12px 28px rgba(6,31,23,.18)!important;}
.brandHero{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  gap:34px!important;
  align-items:center!important;
  width:100%!important;
  min-height:520px!important;
  padding:34px!important;
  margin:22px auto!important;
  overflow:hidden!important;
  border-radius:34px!important;
  border:1px solid rgba(214,178,94,.34)!important;
  background:
    radial-gradient(circle at 18% 20%,rgba(214,178,94,.18),transparent 30%),
    radial-gradient(circle at 76% 36%,rgba(0,184,132,.15),transparent 36%),
    linear-gradient(135deg,#020403 0%,#061510 42%,#0a241b 100%)!important;
  box-shadow:var(--ss-shadow), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.brandHero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 40%,rgba(214,178,94,.06));
  pointer-events:none;
}
.brandHeroBackdrop{position:absolute;inset:auto -8% -36% 34%;height:84%;opacity:.12;background:url('assets/securesociety-full-logo.png') center/contain no-repeat;filter:grayscale(.1);pointer-events:none;}
.brandHeroLogoPanel{position:relative;z-index:1;min-height:410px;border-radius:30px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(0,184,132,.045));border:1px solid rgba(214,178,94,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;padding:0;}
.brandHeroLogo{width:100%!important;height:100%!important;min-height:410px!important;object-fit:cover!important;border-radius:30px!important;display:block!important;filter:contrast(1.03) saturate(1.06);mix-blend-mode:normal;}
.brandHeroContent{position:relative;z-index:2;color:#fff;max-width:560px;align-self:center;}
.heroKicker{display:inline-flex;align-items:center;border:1px solid rgba(214,178,94,.36);background:rgba(214,178,94,.10);color:var(--ss-gold-soft);border-radius:999px;padding:9px 13px;margin-bottom:18px;font-size:12px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;}
.brandHero h2{color:#fff!important;font-size:clamp(36px,4.2vw,62px)!important;line-height:1.02!important;letter-spacing:-2.1px!important;font-weight:950!important;margin:0 0 16px!important;text-wrap:balance;}
.brandHero p{color:rgba(247,241,223,.86)!important;font-size:clamp(16px,1.35vw,20px)!important;line-height:1.58!important;max-width:540px!important;margin:0 0 22px!important;}
.brandHeroActions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.brandHero .goldBtn,.goldBtn{background:linear-gradient(135deg,var(--ss-gold-soft),#c69a35)!important;color:#07100d!important;border:1px solid rgba(255,229,152,.52)!important;box-shadow:0 18px 42px rgba(214,178,94,.20)!important;}
.brandHero .darkBtn{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;}
.brandHeroProof{display:flex;gap:10px;flex-wrap:wrap;}
.brandHeroProof span{border:1px solid rgba(0,184,132,.28);background:rgba(0,184,132,.08);color:#cffff1;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:800;}
/* remove old red-box artifacts */
.hero .chips,.hero .pills,.hero .heroVisual,.hero .heroRight,.hero .logoBox,.hero .premiumLogoBox,.hero .statusGrid,.hero .miniCards{display:none!important;}
.brandHero .brandHeroLogoPanel{display:flex!important;}
.brandHero .brandHeroContent{display:block!important;}
.brandHero .brandHeroProof{display:flex!important;}
/* operational sections stay light and usable */
.phase3-proof-card,.stage4-panel,.ss-action-tile,.ss-live-card,.ss-health-card,.rolePanel,.integrationCard,.warning,.pilot,.featureGrid article,.liveFlow,.playstore-readiness-card,.card,.metric,.feature,.riskPulse,.stage4-panel,.score-intel-panel{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(7,27,20,.10)!important;
  color:var(--ss-ink)!important;
  box-shadow:0 14px 42px rgba(7,27,20,.08)!important;
}
.sectionTitle h2,.stage4-panel h2,.stage4-panel h3,.score-intel-main h3,.roleCard h3,.feature h3{color:var(--ss-ink)!important;}
.sectionTitle p,.stage4-panel p,.roleCard p,.feature p,.metric small,.riskPulse span{color:var(--ss-muted)!important;}
/* result and meter readability */
.meter{background:#fff!important;border:1px solid rgba(7,27,20,.10)!important;border-radius:20px!important;padding:18px!important;box-shadow:0 12px 34px rgba(7,27,20,.07)!important;}
.meterTop span,.meterTop b{color:var(--ss-ink)!important;opacity:1!important;}
.meterBar{background:#edf3ef!important;height:12px!important;border-radius:999px!important;}
.meterBar i{background:linear-gradient(90deg,var(--ss-gold),var(--ss-emerald-bright))!important;border-radius:999px!important;}
.scoreStickyCTA,.mobileStickyCTA{display:none!important;}
@media(max-width:980px){
  .top,.mobileTop{width:calc(100% - 18px)!important;margin:9px auto!important;padding:11px 12px!important;border-radius:20px!important;min-height:68px!important;}
  .brand h1{font-size:19px!important;line-height:1!important}.brand p{font-size:9.5px!important;letter-spacing:.55px!important}.brand img{width:43px!important;height:43px!important}.topActions .ghost{padding:10px 12px!important;font-size:12px!important;}
  main,#home,.page{padding:10px 10px 78px!important;max-width:100%!important;}
  .brandHero{grid-template-columns:1fr!important;min-height:auto!important;padding:16px!important;gap:16px!important;border-radius:24px!important;margin:12px 0!important;}
  .brandHeroLogoPanel{order:1;min-height:190px!important;border-radius:22px!important;}
  .brandHeroLogo{min-height:190px!important;border-radius:22px!important;object-fit:cover!important;object-position:center!important;}
  .brandHeroContent{order:2;max-width:none!important;}
  .heroKicker{font-size:10px!important;padding:7px 10px!important;margin-bottom:12px!important;}
  .brandHero h2{font-size:clamp(30px,10.5vw,42px)!important;line-height:1.04!important;letter-spacing:-1.3px!important;margin-bottom:12px!important;}
  .brandHero p{font-size:15px!important;line-height:1.5!important;margin-bottom:16px!important;}
  .brandHeroActions{gap:10px!important;}
  .brandHeroActions a,.brandHeroActions button{width:100%!important;text-align:center!important;justify-content:center!important;padding:13px 16px!important;}
  .brandHeroProof span{font-size:11px!important;padding:7px 9px!important;}
  .phase3-proof-strip,.stage4-report-shell,.stage4-app-shell,.ss-action-hub,.ss-live-strip,.pilot,.grid4,.grid2,.formRow,.simGrid,.playstore-grid{grid-template-columns:1fr!important;}
  .card,.pilot,.rolePanel,.liveFlow{padding:18px!important;border-radius:22px!important;}
  .sectionTitle h2{font-size:28px!important;line-height:1.1!important;letter-spacing:-.9px!important;}
  .scoreStickyCTA,.mobileStickyCTA{display:block!important;position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;z-index:70!important;background:#061f17!important;color:#fff!important;text-align:center!important;border-radius:18px!important;padding:14px!important;box-shadow:0 18px 40px rgba(6,31,23,.28)!important;}
}
@media(max-width:420px){
  .brandHeroLogoPanel,.brandHeroLogo{min-height:160px!important;}
  .brandHero h2{font-size:31px!important;}
  .brandHero p{font-size:14px!important;}
  .brandHeroProof{gap:7px!important;}
}

.brandHero h2::after,.brandHero .big::after{content:none!important;display:none!important;}
.brandHero .brandHeroLogoPanel img.brandHeroLogo{display:block!important;}