/* kdSay Labs Site — compact */

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#121212;color:#ECEFF1;line-height:1.6;
  padding-bottom:100px;
}
a{color:#FFC107;text-decoration:none}
a:hover{text-decoration:underline}

.container {
  max-width: 1200px; /* match your section max-width */
  margin: 0 auto;    /* center it */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;   /* same side padding as sections */
}

.site-header {
  background: #969696;
  color: #000;
}

.logo {
  height: 80px;
}

.instant-chat-btn {
  background-color: #004BA0;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}
.instant-chat-btn:hover {
  background-color: #1976D2;
}


/* Buttons */
.nav-button,.cta-button{
  background:#FFC107;color:#000;padding:8px 14px;border-radius:22px;
  font-weight:600;font-size:.95rem;transition:background .25s ease
}
.nav-button:hover,.cta-button:hover{background:#FFB300;color:#fff}

/* Sections */
section{padding:10px;max-width:1000px;margin:auto}
section h2{font-size:1.9rem;color:#FFC107;margin-bottom:10px}
section ul,section ol{margin-left:20px;margin-top:10px}
section li{margin-bottom:8px}

section {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

/* Hero */
.hero{
  background:url('/assets/hero.jpg') center/cover no-repeat;
  color:#fff;text-align:center;padding:12px 20px
}
.hero h2{font-size:2rem;margin-bottom:10px}
.hero p{font-size:1rem;margin-bottom:14px}

/* Problem */
.problem{
  background:#121212;color:#f0f0f0;padding:40px 20px;max-width:100%;text-align:center
}

/* Mission */
.mission {
  background: url('/assets/2-ppl-dark.jpg') center/cover no-repeat;
  padding: 40px 0;
}
.mission .content {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}
.mission p{
  max-width:800px;margin:auto;background:rgba(18,18,18,.6);
  padding:20px;border-radius:10px
}

/* How it works */
.how-it-works{text-align:center}
.how-it-works ol{display:inline-block;text-align:left}

/* Features: text black, no bullets */
.features{
  background:url('/assets/phonecheck.jpg') right center/cover no-repeat
}
.features .features-list{
  list-style:none;margin:10px 0 0 0;padding:0;color:#000;
    font-weight:bold;
}

/* Founder */
.founder{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.founder-photo{max-width:160px;border-radius:50%;flex-shrink:0;margin:20px 0}
.founder p{max-width:600px}
@media (min-width:768px){
  .founder{flex-direction:row;align-items:center;text-align:left}
  .founder p{margin:0}
}

/* Footer */
.site-footer{
  text-align:center;padding:16px;background:#969696;color:#000;
  position:fixed;bottom:0;width:100%
}
.site-footer a{color:#004BA0;text-decoration:none}  /* dark blue */
.site-footer a:hover{color:#000}

/* Install buttons + iOS overlay */
.install-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0 8px}
.ios-overlay{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.6);z-index:9999;padding:16px}
.ios-overlay.is-visible{display:grid}
.ios-overlay img{
  max-width:92vw;max-height:86vh;border-radius:12px;border:2px solid #1E88E5;
  box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff
}

/* Mobile tightening */
@media (max-width:600px){
  .site-header{padding:10px 14px;gap:8px}
  .site-header .logo{height:48px}
  .site-title, 
  .instant-chat-btn {
    display:none;
  }
  section{padding:8px 12px}
  section h2{font-size:1.35rem}
  .hero{padding:18px 14px}              /* fixed px */
  .hero h2{font-size:1.4rem;line-height:1.2}
  .hero p{font-size:.95rem}
  .nav-button,.cta-button{
    padding:6px 10px;font-size:.85rem;border-radius:16px  /* smaller buttons on phones */
  }
  .site-footer{position:static}         /* avoid covering content on small screens */
}

/* Safe areas */
@supports (padding:max(0px)){
  .site-header,.site-footer{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
}