body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  color: #111827;
  background: #ffffff;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}

/* header */
.site-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  border-bottom:1px solid rgba(17,24,39,0.04);
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#2b6ef4,#2aa17b);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:20px;
}
.logo-mark.small{width:36px;height:36px}
.brand-name{font-weight:700;font-size:18px}

/* nav */
.main-nav{display:flex;gap:18px;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 6px;border-radius:6px}
.nav-link.active{color:var(--blue);}

/* buttons */
.btn{font-weight:700;border-radius:999px;padding:8px 16px;border:1px solid transparent;cursor:pointer;background:transparent}
.btn-ghost{background:transparent;border:1px solid rgba(11,99,214,0.12);padding:8px 12px}
.btn-primary{background:linear-gradient(90deg,#2b6ef4,#22a36a);color:#fff;padding:8px 14px}
.btn-outline{background:transparent;border:2px solid rgba(11,99,214,0.12);padding:10px 18px;border-radius:12px}
.btn-cta{background:linear-gradient(90deg,#2b6ef4,#22a36a);color:white;padding:12px 26px;border-radius:999px;text-decoration:none;display:inline-block}


.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
}

.nav a {
  margin: 0 1rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
}

.nav a.active {
  color: #1E40AF;
}

.btn {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
}

.btn.login {
  background: transparent;
  color: #1E40AF;
}

.btn.signup {
  background: #1E40AF;
  color: #ffffff;
}

.about-hero {
  background: #F9FAFB;
  text-align: center;
  padding: 4rem 2rem;
}

.about-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.gradient {
  background: linear-gradient(90deg,#1D4ED8,#22C55E);
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

.about-hero p {
  font-size: 1.1rem;
  color: #374151;
  max-width: 700px;
  margin: 0 auto;
}

.mission {
  text-align: center;
  padding: 3rem 2rem;
}

.mission h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.mission p {
  max-width: 700px;
  margin: 0 auto;
  color: #374151;
}

.core-values {
  background: #F9FAFB;
  text-align: center;
  padding: 3rem 2rem;
}

.core-values h2 {
  font-size: 2rem;
  font-weight: 700;
}

.core-values .subtitle {
  color: #6B7280;
  margin-bottom: 2rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 2rem;
}

.card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  text-align: left;
}

.card .icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card p {
  color: #374151;
}

/* FOOTER */
.site-footer{background:linear-gradient(180deg,#0f63d6,#0b4aa8);color:white;padding:42px 0 12px;margin-top:36px}
.footer-grid{display:grid;grid-template-columns:1fr 220px 220px;gap:32px;align-items:start}
.footer-left .brand-tag{color:rgba(255,255,255,0.9);font-size:14px;margin-top:6px}
.contact-list{list-style:none;padding:12px 0 0;margin:0;color:rgba(255,255,255,0.85)}
.footer-center h5, .footer-right h5{margin:0 0 8px;font-weight:700}
.footer-center ul, .footer-right ul{list-style:none;padding:0;margin:0}
.footer-center a, .footer-right a{color:rgba(255,255,255,0.95);text-decoration:none;display:block;margin:6px 0}
.footer-bottom{padding:18px 0 28px;text-align:center;color:rgba(255,255,255,0.9)}
.footer-bottom hr{border:none;height:1px;background:rgba(255,255,255,0.08);margin-bottom:12px}
.heart{color:#ff6170}

.story{
    text-align: center;
   justify-content: space-between;
   align-items: center;
   
   
    
   
}