/*
Theme Name: 22Start Landing
Author: Muteba & Associates
Description: Accessible multilingual landing page for the 22Start app ecosystem. Requires the 22Start App Directory plugin.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: twentytwo-landing
*/
:root{--ink:#14213d;--muted:#596579;--blue:#245ae8;--line:#dce4f1;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;color:var(--ink);background:#f5f8ff}
*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input,select{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d48600;outline-offset:4px}.skip{position:absolute;left:16px;top:-80px;z-index:100;background:#fff;padding:12px}.skip:focus{top:10px}.wrap{width:min(1200px,calc(100% - 40px));margin:auto}.topbar{background:#fff;border-bottom:1px solid var(--line)}.nav{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:800;text-decoration:none;color:#224ed1}.brand img{height:42px;width:auto}.nav-right{display:flex;align-items:center;gap:16px}.language{display:flex;align-items:center;gap:8px;flex-wrap:wrap}select,input{border:1px solid #bdcbe1;border-radius:10px;background:#fff;padding:10px 14px;color:var(--ink)}button,.button{display:inline-block;border:1px solid #becbe3;border-radius:10px;padding:10px 18px;cursor:pointer;text-decoration:none;font-weight:650;background:white;color:var(--blue)}.hero{background:radial-gradient(ellipse at 80% 0,#2545a6 0,transparent 55%),linear-gradient(130deg,#142d70,#161a42);color:#fff;padding:85px 0 90px;text-align:center}.hero-inner{max-width:900px;margin:auto}.eyebrow{display:inline-block;padding:7px 18px;border:1px solid #637fb3;border-radius:30px;color:#d7e6ff;background:#ffffff0c;font-size:14px}.hero h1{font-size:clamp(36px,5.5vw,68px);line-height:1.12;letter-spacing:-2px;margin:24px 0}.hero h1 span{color:#a9c9ff}.lead{font-size:clamp(18px,2.1vw,24px);color:#d6e3ff;max-width:820px;margin:20px auto}.hero-points{color:#c4d5f7;font-size:16px;padding:0;list-style:none;margin:24px auto;max-width:780px}.hero-points li{margin:10px 0}.hero .button{padding:14px 28px;margin-top:12px;color:#173575}.section-heading{text-align:center;max-width:850px;margin:0 auto 34px}.section-heading h2{font-size:clamp(28px,3.5vw,42px);line-height:1.2;letter-spacing:-1px;margin:0 0 14px}.section-heading p{color:var(--muted);font-size:18px}.why{padding:55px 0 25px}.directory{padding:30px 0 70px}.search-box{max-width:680px;margin:0 auto 30px}.search-box label{font-weight:650;display:block;margin-bottom:8px}.search-box input{width:100%;border-radius:16px;padding:16px 20px;font-size:18px}.result-count{color:var(--muted);font-size:14px;margin:10px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.app-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;box-shadow:0 6px 24px #142d7006;transition:transform .15s,box-shadow .15s}.app-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #142d7014}.app-card[hidden]{display:none}.app-card.featured{border-color:#71cbb0;background:#f3fffa}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.app-icon{width:56px;height:56px;display:grid;place-items:center;background:linear-gradient(135deg,#3979ef,#6243d9);border-radius:15px;color:white;font-weight:800;font-size:21px}.app-card:nth-child(3n+2) .app-icon{background:linear-gradient(135deg,#138f9c,#206ed2)}.app-card:nth-child(3n) .app-icon{background:linear-gradient(135deg,#a248b8,#dd646d)}.badge{font-size:12px;color:#07664b;background:#d9f7e9;padding:4px 10px;border-radius:20px}.app-card h3{font-size:23px;line-height:1.25;margin:0 0 14px;overflow-wrap:anywhere}.app-card p{font-size:15px;color:var(--muted);margin:0 0 24px;flex-grow:1}.app-card a{color:#2454cc;font-weight:650;text-decoration:none}.app-card a:hover{text-decoration:underline}.empty{text-align:center;padding:30px}.cta{margin:0 auto 65px;background:linear-gradient(120deg,#285ce3,#5744cd);border-radius:24px;color:#fff;text-align:center;padding:45px 25px}.cta h2{font-size:32px;line-height:1.25;margin:0 0 15px}.cta p{color:#e0e8ff}.footer{background:white;border-top:1px solid var(--line);text-align:center;padding:40px 20px;color:var(--muted)}.footer nav{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:15px 0}.footer a{text-underline-offset:4px}.page-content{min-height:50vh;padding:50px 0}.page-content h1{font-size:38px}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{flex-wrap:wrap;padding:16px 0}.nav-right{flex-wrap:wrap}.hero{padding:60px 0}.hero h1{letter-spacing:-1px}}@media(max-width:580px){.grid{grid-template-columns:1fr}.nav-right{width:100%;justify-content:space-between}.language{gap:5px}.language select{max-width:145px}.wrap{width:calc(100% - 32px)}.app-card{padding:24px}.hero{padding:45px 0}.hero-points{font-size:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}