/* Komuniti — brand stylesheet (per Brand Guide v1.0) */
:root{
  --blue:#0C447C; --midblue:#185FA5; --lightblue:#378ADD; --sky:#E6F1FB;
  --yellow:#F5C400; --paleyellow:#FFF3B0;
  --offwhite:#F7F7F5; --lightgrey:#E0E0E0; --midgrey:#888888; --darkgrey:#444444; --black:#222222;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--offwhite); color:var(--darkgrey);
  font-family:'Helvetica Neue', Inter, Arial, sans-serif; line-height:1.7;
}
h1,h2,h3{ color:var(--blue); line-height:1.2; margin:0 0 12px; }
h1{ font-size:34px; font-weight:700; }
h2{ font-size:24px; font-weight:700; }
h3{ font-size:18px; font-weight:600; }
a{ color:var(--lightblue); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* Header */
header.site{ background:var(--blue); padding:16px 0; }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-size:22px; font-weight:700; color:#fff; letter-spacing:-1px; display:flex; align-items:center; gap:8px; text-decoration:none; }
.logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--yellow); display:inline-block; }
.logo .u{ color:var(--yellow); }
nav.links{ display:flex; gap:24px; align-items:center; }
nav.links a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:15px; }
nav.links a.cta{
  background:var(--yellow); color:var(--blue); padding:8px 16px; border-radius:8px;
  font-weight:600; opacity:1;
}

/* Hero */
.hero{ background:var(--blue); color:#fff; padding:64px 0; text-align:center; }
.hero h1{ color:#fff; font-size:38px; max-width:680px; margin:0 auto 16px; }
.hero p{ color:rgba(255,255,255,.7); max-width:560px; margin:0 auto 28px; font-size:17px; }
.btn{ display:inline-block; padding:12px 24px; border-radius:8px; font-weight:600; text-decoration:none; cursor:pointer; border:none; font-size:15px; }
.btn-yellow{ background:var(--yellow); color:var(--blue); }
.btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); }
.btn-blue{ background:var(--blue); color:#fff; }
.hero .ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Values */
.values{ padding:56px 0; }
.values .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card{ background:var(--sky); border-radius:14px; padding:20px; text-align:center; }
.value-card .icon{ width:40px; height:40px; border-radius:50%; background:#fff; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:var(--blue); font-weight:700; }
.value-card h3{ font-size:16px; margin-bottom:6px; }
.value-card p{ font-size:14px; margin:0; color:var(--darkgrey); }

/* Section generic */
section{ padding:56px 0; }
section.alt{ background:#fff; }
.section-head{ text-align:center; max-width:560px; margin:0 auto 32px; }
.section-head p{ color:var(--midgrey); }

/* Demo embed wrapper */
.demo-wrap{ display:flex; justify-content:center; }

/* EOI form */
.eoi-card{ background:#fff; border:0.5px solid var(--lightgrey); border-radius:14px; padding:32px; max-width:520px; margin:0 auto; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:600; color:var(--black); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:11px 14px; border:1px solid var(--lightgrey); border-radius:8px;
  font-size:15px; font-family:inherit; color:var(--black);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--lightblue); }
.checkbox-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:20px; font-size:13px; color:var(--midgrey); }
.checkbox-row input{ margin-top:3px; }
#eoi-msg{ margin-top:16px; font-size:14px; }
#eoi-msg.success{ color:#0C447C; font-weight:600; }
#eoi-msg.error{ color:#B3261E; font-weight:600; }

/* Footer */
footer.site{ background:#fff; border-top:1px solid var(--lightgrey); padding:32px 0; text-align:center; }
footer.site .logo{ color:var(--blue); justify-content:center; margin-bottom:8px; }
footer.site .logo .dot{ background:var(--yellow); }
footer.site .tagline{ font-size:13px; color:var(--midgrey); margin-bottom:12px; }
footer.site .foot-links{ font-size:13px; color:var(--midgrey); }
footer.site .foot-links a{ color:var(--midgrey); text-decoration:none; margin:0 8px; }

/* Terms page */
.legal{ max-width:680px; margin:0 auto; padding:56px 24px; }
.legal h1{ margin-bottom:4px; }
.legal .updated{ color:var(--midgrey); font-size:13px; margin-bottom:32px; }
.legal h2{ font-size:18px; margin-top:32px; }
.legal p, .legal li{ font-size:15px; }
.legal .note{ background:var(--sky); border-radius:10px; padding:16px 20px; font-size:14px; color:var(--blue); margin-bottom:24px; }

@media (max-width: 760px){
  nav.links a:not(.cta){ display:none; }
  .values .grid{ grid-template-columns:repeat(2,1fr); }
  .hero h1{ font-size:28px; }
}