:root { --ink:#153229; --muted:#6b7c75; --green:#08754c; --green-deep:#07583c; --green-pale:#e5f4ea; --yellow:#ffc859; --coral:#ef7c63; --line:#dfebe3; --soft:#f4f7f2; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background:var(--soft); font-family:"DM Sans",Arial,sans-serif; } a,button { -webkit-tap-highlight-color:transparent; } a:focus-visible, button:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; } h1,h2,h3,p { margin:0; } h1,h2 { letter-spacing:-.055em; } em { color:var(--green); font-family:"Fraunces",Georgia,serif; font-style:normal; }.site-shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }.eyebrow { display:inline-flex; align-items:center; gap:6px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.13em; }
.landing-nav { position:relative; z-index:20; height:78px; display:flex; align-items:center; justify-content:space-between; width:min(1220px,calc(100% - 48px)); margin:0 auto; }.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-.7px; }.brand > span:last-child span { color:var(--green); }.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px 10px 10px 2px; background:var(--green); color:#fff; font-size:17px; transform:rotate(-6deg); }.brand-mark i { transform:rotate(6deg); }.desktop-nav { display:flex; align-items:center; gap:30px; margin-left:auto; margin-right:30px; }.desktop-nav a { color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; }.desktop-nav a:hover { color:var(--green); }.nav-cta,.primary-btn,.secondary-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:45px; padding:0 16px; border-radius:12px; font-size:12px; font-weight:700; text-decoration:none; transition:.2s ease; }.nav-cta,.primary-btn { background:var(--green); color:white; }.nav-cta:hover,.primary-btn:hover { background:var(--green-deep); transform:translateY(-2px); }.menu-button { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); font-size:18px; cursor:pointer; }.mobile-menu { display:none; }
.hero { display:grid; grid-template-columns:1fr .85fr; gap:80px; min-height:600px; padding-top:76px; padding-bottom:87px; align-items:center; }.hero-content { max-width:580px; }.hero h1 { margin-top:15px; font-size:clamp(50px,6.5vw,80px); line-height:.98; }.hero-copy { max-width:510px; margin-top:22px; color:var(--muted); font-size:17px; line-height:1.65; }.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:31px; }.primary-btn { min-height:51px; padding:0 19px; font-size:13px; }.secondary-btn { border:1px solid var(--line); background:white; color:var(--ink); }.secondary-btn:hover { border-color:#8ec19e; color:var(--green); transform:translateY(-2px); }.hero-proof { display:flex; align-items:center; gap:11px; margin-top:30px; }.avatar-stack { display:flex; padding-left:8px; }.avatar-stack span { width:27px; height:27px; display:grid; place-items:center; margin-left:-8px; border:2px solid var(--soft); border-radius:50%; background:#e8b2a5; color:#5e332a; font-size:9px; font-weight:700; }.avatar-stack span:nth-child(2) { background:#c9e2d0; color:#245b38; }.avatar-stack span:nth-child(3) { background:#ddd2f7; color:#514077; }.avatar-stack span:last-child { background:var(--yellow); color:#724e08; }.hero-proof p { color:var(--muted); font-size:10px; line-height:1.5; }.hero-proof strong { color:var(--ink); font-size:11px; }
.hero-visual { position:relative; min-height:465px; display:grid; place-items:center; }.app-preview { position:relative; z-index:2; width:320px; padding:18px; border:7px solid white; border-radius:35px; background:#f4f7f2; box-shadow:0 30px 70px rgba(14,52,37,.16); transform:rotate(3deg); }.preview-top { display:flex; align-items:center; justify-content:space-between; }.preview-logo,.preview-bell { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; }.preview-logo { background:var(--green); color:white; font-size:14px; }.preview-bell { border:1px solid var(--line); background:white; color:var(--muted); font-size:12px; }.preview-eyebrow,.preview-section-label { margin-top:19px; color:var(--green); font-size:7px; font-weight:700; letter-spacing:.12em; }.app-preview h2 { margin-top:5px; font-size:26px; line-height:1.05; }.preview-lesson { margin-top:18px; padding:14px; overflow:hidden; border-radius:18px; background:var(--green); color:white; }.preview-lesson-top,.preview-lesson-body,.preview-progress { display:flex; align-items:center; }.preview-lesson-top { justify-content:space-between; font-size:7px; font-weight:700; letter-spacing:.07em; }.preview-lesson-top b { padding:4px 6px; border-radius:8px; background:rgba(255,200,89,.22); color:#ffe5ad; font-size:7px; }.preview-lesson-body { gap:9px; margin-top:13px; }.preview-lesson-body > i { width:35px; height:35px; display:grid; place-items:center; border-radius:12px 12px 12px 3px; background:var(--yellow); color:#7f550a; font-size:15px; }.preview-lesson-body div { display:grid; gap:1px; }.preview-lesson-body small { color:#c9e5d1; font-size:7px; font-weight:700; letter-spacing:.07em; }.preview-lesson-body strong { font-size:15px; }.preview-lesson-body span { color:#d3ead9; font-size:8px; }.preview-progress { gap:8px; margin-top:14px; }.preview-progress span { height:5px; flex:1; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.22); }.preview-progress span::after { display:block; width:25%; height:100%; content:""; border-radius:99px; background:var(--yellow); }.preview-progress b { color:#d7eee0; font-size:8px; }.preview-lesson button { width:100%; height:30px; margin-top:12px; border:0; border-radius:8px; background:white; color:var(--green); font-size:8px; font-weight:700; }.preview-section-label { margin-top:18px; }.preview-week { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:9px; }.preview-week span { width:23px; height:23px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:#8ea196; font-size:9px; }.preview-week span:nth-child(-n+5) { border:0; background:var(--green-pale); color:var(--green); }.preview-week span:nth-child(6) { border-color:#f3d189; background:#fff7e4; color:#d18a18; }.float-tag { position:absolute; z-index:3; display:flex; align-items:center; gap:5px; padding:9px 11px; border:1px solid rgba(222,235,226,.7); border-radius:10px; background:rgba(255,255,255,.92); box-shadow:0 10px 22px rgba(14,52,37,.09); font-size:10px; font-weight:700; }.tag-one { top:43px; left:1%; color:#a5610d; transform:rotate(-5deg); }.tag-one i { color:#e9851b; }.tag-two { right:0; bottom:47px; color:var(--green); transform:rotate(4deg); }.tag-two i { color:#d79b20; }.hero-shape { position:absolute; border-radius:50%; }.shape-one { width:380px; height:380px; background:#e1f1e6; }.shape-two { width:80px; height:80px; right:0; top:58px; border:13px solid #fff2ce; }
.language-strip { padding:83px 0 90px; background:white; }.strip-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-top:9px; }.strip-heading h2,.how-copy h2,.closing-cta h2 { font-size:clamp(33px,4vw,48px); line-height:1.03; }.strip-heading > p { max-width:390px; color:var(--muted); font-size:14px; line-height:1.6; }.language-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }.language-tile { position:relative; display:flex; align-items:center; gap:13px; min-height:132px; padding:18px; overflow:hidden; border:1px solid var(--line); border-radius:19px; background:#f8fbf8; color:var(--ink); text-decoration:none; transition:.2s ease; }.language-tile:hover { border-color:#98c8a7; transform:translateY(-4px); box-shadow:0 15px 26px rgba(15,54,38,.07); }.language-tile > span { width:43px; height:43px; display:grid; flex:0 0 auto; place-items:center; border-radius:14px 14px 14px 3px; background:var(--green-pale); color:var(--green); font-family:"Fraunces",Georgia,serif; font-size:22px; font-weight:700; }.language-tile div { display:grid; gap:2px; }.language-tile small { color:var(--muted); font-size:9px; }.language-tile strong { font-size:18px; letter-spacing:-.04em; }.language-tile > i { position:absolute; right:16px; top:16px; color:var(--muted); font-size:14px; }.language-tile.igbo > span { background:#fff0eb; color:#a96050; }.language-tile.hausa > span { background:#fff4da; color:#a27413; }
.how-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding:95px 0; align-items:center; }.how-copy > p:last-of-type { max-width:365px; margin-top:17px; color:var(--muted); font-size:14px; line-height:1.65; }.inline-link { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--green); font-size:12px; font-weight:700; text-decoration:none; }.inline-link:hover { text-decoration:underline; }.how-cards { display:grid; gap:11px; }.how-cards article { display:flex; align-items:center; gap:16px; padding:17px; border:1px solid var(--line); border-radius:17px; background:white; }.how-icon { width:45px; height:45px; display:grid; flex:0 0 auto; place-items:center; border-radius:15px 15px 15px 3px; background:var(--green-pale); color:var(--green); font-size:19px; }.how-icon.coral { background:#fff0eb; color:var(--coral); }.how-icon.yellow { background:#fff4da; color:#c58c18; }.how-cards article > div { display:grid; gap:2px; }.how-cards small { color:var(--green); font-size:8px; font-weight:700; letter-spacing:.1em; }.how-cards h3 { font-size:15px; }.how-cards p { color:var(--muted); font-size:11px; line-height:1.45; }
.closing-cta { position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:75px; padding:47px clamp(25px,6vw,67px); overflow:hidden; border-radius:28px; background:var(--green-deep); color:white; }.closing-cta > div,.closing-cta > a { position:relative; z-index:1; }.closing-cta .eyebrow { color:#bfe4ca; }.closing-cta h2 { margin-top:10px; }.closing-cta h2 em { color:var(--yellow); }.closing-cta p:last-child { margin-top:11px; color:#cde5d4; font-size:13px; }.primary-btn.light { flex:0 0 auto; background:white; color:var(--green); }.primary-btn.light:hover { background:#f2f8f3; }.cta-orbit { position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; }.cta-orbit.one { width:350px; height:350px; right:-90px; top:-165px; }.cta-orbit.two { width:260px; height:260px; right:80px; bottom:-210px; }.landing-footer { display:flex; align-items:center; justify-content:space-between; min-height:86px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.landing-footer .brand { font-size:17px; }.landing-footer .brand-mark { width:27px; height:27px; font-size:14px; }
@media (max-width:800px) { .desktop-nav,.nav-cta { display:none; }.menu-button { display:grid; place-items:center; }.mobile-menu { position:absolute; top:65px; right:0; left:0; z-index:5; display:grid; gap:4px; padding:12px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 15px 35px rgba(16,49,37,.1); }.mobile-menu[hidden] { display:none; }.mobile-menu a { display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:10px; color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }.mobile-menu a:last-child { background:var(--green); color:white; }.hero { grid-template-columns:1fr; gap:53px; padding-top:58px; text-align:center; }.hero-content { margin:0 auto; }.hero-copy { margin-right:auto; margin-left:auto; }.hero-actions,.hero-proof { justify-content:center; }.hero-visual { min-height:420px; }.language-strip { padding:66px 0; }.strip-heading { display:grid; gap:13px; }.how-section { grid-template-columns:1fr; gap:41px; padding:70px 0; }.closing-cta { margin-bottom:58px; }.landing-footer { min-height:76px; } }
@media (max-width:570px) { .site-shell,.landing-nav { width:calc(100% - 32px); }.hero { min-height:0; padding-top:42px; padding-bottom:63px; }.hero h1 { font-size:51px; }.hero-copy { font-size:14px; }.hero-actions { display:grid; }.primary-btn,.secondary-btn { width:100%; }.hero-visual { min-height:370px; }.app-preview { width:284px; transform:rotate(2deg); }.tag-one { left:0; top:21px; }.tag-two { right:0; bottom:15px; }.shape-one { width:320px; height:320px; }.shape-two { width:58px; height:58px; border-width:10px; }.language-grid { grid-template-columns:1fr; margin-top:24px; }.language-tile { min-height:94px; }.language-strip { padding:57px 0; }.how-section { padding:57px 0; }.how-cards article { align-items:flex-start; }.closing-cta { display:grid; gap:24px; padding:31px 24px; border-radius:23px; }.landing-footer > p { display:none; }.landing-footer { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }