/* === CEO VALIDATED PREMIUM CONSUMER TRUST THEME ===
   Direction: logo-aligned gold + emerald, Blinkit/Zepto usability principles,
   but not a copy. Warmer, lighter, mobile-first, no feature deletion.
*/
:root{
  --ss-ivory:#F8F7EF;
  --ss-mint:#EAFBF4;
  --ss-card:#FFFFFF;
  --ss-ink:#10211B;
  --ss-muted:#5F706A;
  --ss-emerald:#00B884;
  --ss-emerald2:#53E6C2;
  --ss-gold:#C99A2E;
  --ss-gold2:#F3D36B;
  --ss-dark:#07110F;
  --ss-line:rgba(16,33,27,.10);
  --ss-shadow:0 18px 46px rgba(7,17,15,.10);
}
body{
  background:
    radial-gradient(circle at 18% 0%,rgba(0,184,132,.16),transparent 32%),
    linear-gradient(180deg,var(--ss-mint) 0%,var(--ss-ivory) 42%,#FFFFFF 100%)!important;
  color:var(--ss-ink)!important;
  font-family:Inter,Arial,sans-serif!important;
}
.mobileTop{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid var(--ss-line)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 8px 30px rgba(7,17,15,.08)!important;
}
.brand h1{
  font-family:Inter,Arial,sans-serif!important;
  color:var(--ss-ink)!important;
  font-weight:950!important;
}
.brand p{
  color:var(--ss-emerald)!important;
  letter-spacing:1.6px!important;
}
.brand img{
  background:linear-gradient(145deg,#07110F,#10231C)!important;
  border:1px solid rgba(201,154,46,.35)!important;
  box-shadow:0 10px 28px rgba(7,17,15,.16)!important;
}
.menuBtn{
  background:linear-gradient(135deg,#10211B,#1D3A30)!important;
  border:1px solid rgba(201,154,46,.30)!important;
  color:var(--ss-gold2)!important;
}
.drawer{
  background:#FFFFFF!important;
  border:1px solid var(--ss-line)!important;
  box-shadow:0 24px 60px rgba(7,17,15,.16)!important;
}
.drawer a{color:var(--ss-ink)!important}
.drawer a:hover{background:var(--ss-mint)!important;color:var(--ss-emerald)!important}

.hero{
  background:
    radial-gradient(circle at 20% 5%,rgba(0,184,132,.18),transparent 32%),
    linear-gradient(135deg,#FFFFFF 0%,#F4FFF9 55%,#FFF7DF 100%)!important;
  border:1px solid rgba(0,184,132,.16)!important;
  box-shadow:var(--ss-shadow)!important;
  color:var(--ss-ink)!important;
}
.chips span{
  background:#FFFFFF!important;
  border:1px solid rgba(0,184,132,.18)!important;
  color:var(--ss-ink)!important;
  box-shadow:0 8px 24px rgba(7,17,15,.06)!important;
}
.chips span:nth-child(2),
.chips span:nth-child(3){
  border-color:rgba(201,154,46,.26)!important;
  color:#7A5B13!important;
  background:#FFF8E3!important;
}
.hero h2{
  font-family:Inter,Arial,sans-serif!important;
  color:var(--ss-ink)!important;
  font-weight:950!important;
}
.hero h2:after{
  color:var(--ss-emerald)!important;
}
.hero p{
  color:var(--ss-muted)!important;
}
.goldBtn{
  background:linear-gradient(135deg,var(--ss-emerald),var(--ss-emerald2))!important;
  color:#06100D!important;
  box-shadow:0 14px 35px rgba(0,184,132,.22)!important;
}
.darkBtn{
  background:#FFFFFF!important;
  border:1px solid rgba(16,33,27,.12)!important;
  color:var(--ss-ink)!important;
  box-shadow:0 12px 28px rgba(7,17,15,.07)!important;
}
.trustMicro span,
.pilotBadges span{
  background:#FFFFFF!important;
  border:1px solid rgba(0,184,132,.14)!important;
  color:var(--ss-ink)!important;
}
.heroVisual>img{
  background:linear-gradient(145deg,#07110F,#10231C)!important;
  border:1px solid rgba(201,154,46,.35)!important;
}
.statusGrid div{
  background:#FFFFFF!important;
  border:1px solid rgba(0,184,132,.14)!important;
  box-shadow:0 10px 24px rgba(7,17,15,.06)!important;
}
.statusGrid b{color:var(--ss-ink)!important}
.statusGrid span{color:var(--ss-emerald)!important}

.warning,.rolePanel,.features,.pilot,.integrationSection,.liveFlow{
  background:#FFFFFF!important;
  border:1px solid var(--ss-line)!important;
  box-shadow:var(--ss-shadow)!important;
  color:var(--ss-ink)!important;
}
.warning h3,.sectionTitle h2,.pilot h2{
  color:var(--ss-ink)!important;
  font-family:Inter,Arial,sans-serif!important;
  font-weight:950!important;
}
.warning p,.sectionTitle p,.pilot p{color:var(--ss-muted)!important}
.sectionTitle span,.pilot span{color:var(--ss-emerald)!important}

.roleCard,.featureGrid article,.integrationCard,.scenarioCard{
  background:linear-gradient(180deg,#FFFFFF,#FAFFFC)!important;
  border:1px solid rgba(16,33,27,.10)!important;
  color:var(--ss-ink)!important;
  box-shadow:0 12px 30px rgba(7,17,15,.07)!important;
}
.roleCard h3,.featureGrid b,.integrationCard b,.scenarioCard b{
  color:var(--ss-ink)!important;
}
.roleCard p,.roleCard li,.featureGrid p,.integrationCard p,.scenarioCard p{
  color:var(--ss-muted)!important;
}
.roleTabs button{
  background:#FFFFFF!important;
  border:1px solid rgba(16,33,27,.12)!important;
  color:var(--ss-ink)!important;
}
.roleTabs button.active{
  background:linear-gradient(135deg,var(--ss-emerald),var(--ss-emerald2))!important;
  color:#06100D!important;
}
.flowItem,.advancedPilotNote{
  background:#EAFBF4!important;
  border:1px solid rgba(0,184,132,.18)!important;
  color:#0B5F49!important;
}
.pilot{
  background:
    radial-gradient(circle at 10% 0%,rgba(0,184,132,.14),transparent 34%),
    #FFFFFF!important;
}
.pilotForm{
  background:#F9FFFC!important;
  border:1px solid rgba(16,33,27,.10)!important;
}
.pilotForm input,.pilotForm select{
  background:#FFFFFF!important;
  color:var(--ss-ink)!important;
  border:1px solid rgba(16,33,27,.14)!important;
}
.pilotForm input::placeholder{color:#84938F!important}
.appFooter{
  background:#FFFFFF!important;
  border:1px solid var(--ss-line)!important;
  box-shadow:var(--ss-shadow)!important;
}
.appFooter a{color:var(--ss-ink)!important}
.mainStickyBar a{
  background:linear-gradient(135deg,var(--ss-emerald),var(--ss-emerald2))!important;
  color:#06100D!important;
}
.mainStickyBar a:last-child{
  background:#FFFFFF!important;
  color:var(--ss-ink)!important;
  border:1px solid rgba(16,33,27,.12)!important;
}
@media(max-width:900px){
  body{
    background:
      radial-gradient(circle at 50% -8%,rgba(0,184,132,.22),transparent 34%),
      linear-gradient(180deg,#F0FFF8 0%,#F8F7EF 50%,#FFFFFF 100%)!important;
  }
  .hero{
    border-radius:30px!important;
  }
  .chips{
    grid-template-columns:1fr 1fr!important;
  }
  .featureGrid article:before{
    display:inline-flex;
    width:38px;height:38px;
    align-items:center;justify-content:center;
    border-radius:13px;
    background:#EAFBF4;
    color:var(--ss-emerald);
    font-weight:950;
    margin-bottom:10px;
  }
  .featureGrid article:nth-child(1):before{content:"✓"}
  .featureGrid article:nth-child(2):before{content:"QR"}
  .featureGrid article:nth-child(3):before{content:"🔔"}
  .featureGrid article:nth-child(4):before{content:"SOS"}
  .featureGrid article:nth-child(5):before{content:"👶"}
  .featureGrid article:nth-child(6):before{content:"G"}
  .featureGrid article:nth-child(7):before{content:"Y"}
  .featureGrid article:nth-child(8):before{content:"?"}
  .featureGrid article:nth-child(9):before{content:"V"}
  .featureGrid article:nth-child(10):before{content:"B"}
  .featureGrid article:nth-child(11):before{content:"P"}
  .featureGrid article:nth-child(12):before{content:"M"}
}