/* Base */
:root{
  --teal:#009688;          /* primary */
  --orange:#FF9800;        /* CTA */
  --ink:#212121;           /* text */
  --bg:#F9FAFB;            /* light bg */
}
*{box-sizing:border-box}
body{margin:0;font-family:"Open Sans",system-ui; color:var(--ink);}
h1,h2,h3{font-family:"Montserrat",ui-sans-serif; margin:0 0 10px;}
a{text-decoration:none;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;font-weight:700;border:2px solid transparent;}
.btn-sm{padding:8px 14px;font-size:.9rem}
.btn-accent{background:var(--orange);color:#fff;}
.btn-light{background:#fff;color:#212121;}
.btn-outline{background:transparent;border-color:var(--teal);color:var(--teal);}
.center{text-align:center}
.muted{color:#555}

/* Top banner */
.top-banner{background:var(--orange);color:#fff;}
.banner-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;}

/* Hero slider */
.hero-slider{position:relative;height:88vh;min-height:520px;overflow:hidden;}
.slides{height:100%;display:flex;transition:transform .5s ease;}
.slide{min-width:100%;height:100%;background: #000; background-image: var(--bg); background-size:cover;background-position:center;position:relative;}
.slide{background-image: var(--bg);}
.slide{}
.slide::before{content:"";position:absolute;inset:0;background:var(--overlay, rgba(0,0,0,.45));}
.slide{background-image: var(--bg, var(--bg));}
.slide{}
.slide{background-image: var(--bg), linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.0));}
.slide{background: center/cover no-repeat var(--bg);}
.slide-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;}
.slide-copy{color:#fff;max-width:700px;}
.slide-copy h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;}
.slide-copy p{font-size:1.1rem;margin-bottom:18px;}

/* Slider controls */
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:26px;display:grid;place-items:center;}
.nav:hover{background:rgba(255,255,255,.28);}
.prev{left:14px;} .next{right:14px;}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center;}
.dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer}
.dots button.active{background:#fff}

/* Outcomes */
.outcomes{background:var(--bg);}
.outcomes-flex{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:36px 0;font-weight:700;}

/* Finders */
.finder{padding:44px 0;}
.finder h2{margin-bottom:6px;}
.finder-bar{display:flex;gap:10px;margin:14px 0 10px;}
.finder-bar input{flex:1;padding:12px 14px;border:1px solid #DDD;border-radius:10px;font-size:1rem;}
.finder-results{margin-top:6px;color:#444;}
.finder .note{color:#666;margin-top:10px;}

/* Teachers */
.teacher-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px;}
.t-card{display:flex;gap:12px;align-items:center;border:1px solid #EEE;border-radius:12px;padding:12px;}
.t-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#E0F7F5;color:#0b3a38;font-weight:800;}
.t-name{font-weight:800;}
.t-tag{color:#666;margin-bottom:6px;}

/* FAQ */
.faq{background:var(--bg);padding:36px 0;}
.q{background:#fff;border:1px solid #EEE;border-radius:12px;padding:12px;margin:8px 0;}
.q summary{cursor:pointer;font-weight:700;}

/* Footer */
.footer{background:#212121;color:#fff;padding:20px;text-align:center;}
.footer a{color:#fff;}

/* Responsive */
@media(max-width:900px){
  .teacher-cards{grid-template-columns:1fr;}
  .outcomes-flex{justify-content:center;}
}


/* --- One-pager layout from index.html (migrated 2025-10-12) --- */
:root { --maxw: 1100px; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.45; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px; }
.hero { display: grid; gap: 24px; align-items: center; grid-template-columns: 1.2fr 1fr; }
.hero h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 8px; }
.hero p.lead { font-size: clamp(16px, 2.2vw, 20px); color: #cbd5e1; margin: 0 0 16px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn, .btn-outline { padding: 12px 18px; border-radius: 10px; text-decoration: none; font-weight: 600; display: inline-block; }
.btn { background:#111; color:#fff; }
.btn-outline { border:2px solid #111; color:#111; background:#fff; }
.section { padding: 48px 0; }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.card { border: 1px solid #e7e7e7; border-radius: 14px; padding: 18px; background:#fff; }
.title { font-size: 24px; margin-bottom: 8px; }
.muted { color:#666; }
.center { text-align:center; }
.img-resp { width: 100%; height: auto; border-radius: 12px; }
.flex { display:flex; gap:22px; align-items:center; }
.stack { display:flex; flex-direction:column; gap:10px; }
.strip { display:flex; gap:10px; }
footer { padding: 32px 0 48px; color:#666; font-size:14px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}



/* --- Visual enhancement (palette, buttons, cards, hero) — appended 2025-10-12 --- */
:root {
  --bg: #0f172a;        /* deep navy */
  --bg-2: #111827;      /* darker slate for gradients */
  --surface: #ffffff;   /* white surfaces */
  --text: #0b1220;      /* primary text */
  --muted: #64748b;     /* secondary text */
  --brand: #2563eb;     /* primary brand */
  --brand-2: #10b981;   /* secondary accent */
  --highlight: #fde047; /* subtle highlight */
}

/* Base colors */
html, body {
  color: var(--text);
  background: #f8fafc;
}
.muted { color: var(--muted); }

/* HERO with gradient background */
header.section {
  background: linear-gradient(120deg, var(--bg) 0%, var(--bg-2) 60%, #0b1220 100%);
  color: #e5e7eb;
}
header.section .title, 
header.section h1, 
header.section p,
header.section a { color: #e5e7eb; }
header.section .btn-outline { border-color: #e5e7eb; color:#e5e7eb; }

/* Buttons */
.btn {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35); background:#1d4ed8; }
.btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }

.btn-outline {
  border: 2px solid var(--brand);
  color: var(--brand);
  background: transparent;
  transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn-outline:hover { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }

/* Cards + hover lift */
.card {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08); }

/* Images: rounded + border + shadow */
.img-resp {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.10);
}

/* Section separators */
.section + .section::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 0 auto;
  max-width: var(--maxw);
}

/* Typography refinements */
h1, h2.title { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2.title { font-weight: 700; }

/* Footer styling */
footer.wrap.center {
  background: var(--bg);
  color: #e5e7eb;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px 16px 0 0;
}
footer a { color: #c7d2fe; }
footer a:hover { color:#fff; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .wrap { padding: 18px; }
  .btn, .btn-outline { width: auto; }
}
/* --- Social icons (Undugu) --- */
.social-links{display:flex;gap:12px;justify-content:center;align-items:center}
.social-link{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #e5e7eb;background:#ffffff;opacity:.95;transition:transform .15s ease, opacity .15s ease}
.social-link svg{width:24px;height:24px;display:block;fill:currentColor}
/* Brand colors */
.social-link.x{color:#000000}
.social-link.instagram{color:#E4405F}
.social-link.youtube{color:#FF0000}
.social-link.facebook{color:#1877F2}
.social-link.tiktok{color:#FF0050}