/* Schools Page Styles - school.css */
:root{ --ink:#0b1b2b; --ink-70:rgba(11,27,43,.7); --blue-500:#2C3B68; --blue-700:#27345D; --white:#ffffff; }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:#ffffff; overflow-x:hidden }
.container{ width:min(1120px,92%); margin:0 auto }

/* Header Banner */
.header{ position:relative; overflow:hidden; background:
	radial-gradient(1000px 500px at 90% -10%, rgba(44,59,104,.12), transparent),
	conic-gradient(from 210deg at 20% 10%, rgba(44,59,104,.10), #ffffff 35%, rgba(44,59,104,.06) 55%, #ffffff 75%, rgba(44,59,104,.1));
	padding:54px 0 42px; }
.header .wrap{ display:grid; place-items:center; gap:10px; text-align:center }
.header h1{ margin:0; font-size: clamp(26px, 5vw, 44px); background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 8px 28px rgba(44,59,104,.18) }
.header p{ margin:0; color:var(--ink-70) }
.banner-art{ position:absolute; inset:0; pointer-events:none }
.banner-art .ring{ position:absolute; border:1px dashed rgba(44,59,104,.35); border-radius:50% }
.banner-art .ring.r1{ width:420px; height:420px; top:-120px; left:-100px; animation: spin 22s linear infinite }
.banner-art .ring.r2{ width:300px; height:300px; bottom:-140px; right:-80px; animation: spinReverse 28s linear infinite }
.banner-art .orb{ position:absolute; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle at 40% 40%, rgba(37,99,235,.25), rgba(37,99,235,0)); filter: blur(14px); top:10%; right:18% }

@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes spinReverse{ to{ transform: rotate(-360deg) } }

/* Collaboration Grid */
.schools{ padding: 42px 0 28px; background:#ffffff }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr } }

.card{ position:relative; background:
	linear-gradient(#ffffff, #ffffff) padding-box,
	linear-gradient(135deg, rgba(37,99,235,.35), rgba(14,165,233,.25)) border-box;
	border:1px solid transparent; border-radius:18px; padding:16px; display:grid; place-items:center; text-align:center; gap:8px;
	box-shadow: 0 10px 24px rgba(11,27,43,.08); transition: transform .22s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease; overflow:hidden }
.card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 44px rgba(11,27,43,.18); filter:saturate(1.03) }
.logo{ width:92px; height:92px; border-radius:16px; background:#eef3ff; border:1px solid #e6eef8; display:grid; place-items:center; overflow:hidden; box-shadow: 0 8px 20px rgba(44,59,104,.12) }
.logo img{ width:100%; height:100%; object-fit:cover; display:block; transform: translateY(10px); opacity:0; animation: rise .6s ease forwards }
@keyframes rise{ to{ transform: translateY(0); opacity:1 } }
.card h3{ margin:4px 0 0; font-size:18px }
.card .loc{ margin:0 0 6px; color:var(--ink-70); font-size:13px }

/* CTA Section */
.cta{ background: radial-gradient(800px 400px at 20% 10%, rgba(30,144,255,.12), transparent), #ffffff; padding: 40px 0 80px }
.cta .box{ position:relative; overflow:hidden; background: linear-gradient(135deg, #0f172a, #1e3a8a 40%, #0ea5e9 100%); color:#fff; border-radius:24px; padding:28px; display:grid; place-items:center; text-align:center; gap:10px; box-shadow: 0 22px 50px rgba(2,6,23,.45) }
.cta h2{ margin:0; font-size: clamp(22px, 3.6vw, 36px) }
.cta p{ margin:0 0 6px; opacity:.95 }
.actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none }
.btn.primary{ background:#ffffff; color:#0f172a; box-shadow: 0 12px 28px rgba(255,255,255,.35) }
.btn.primary:hover{ transform: translateY(-2px) }
.btn.ghost{ border:2px solid #fff; color:#fff }
.btn.ghost:hover{ background: rgba(255,255,255,.12) }