/* Theme variables */
:root {
	/* Dark default */
	--bg: #0f1320;
	--bg-alt: #13182a;
	--surface: #161c2f;
	--text: #e6eaf2;
	--muted: #a7b0c3;
	--primary: #3f71f3;
	--primary-600: #2f61e3;
	--accent: #00b8a1;
	--danger: #ff6b6b;
	--ring: #2a344f;
	--card: #101528;
	--shadow: 0 10px 30px rgba(0,0,0,0.3);
	--link: #8fb2ff;
	--link-hover: #b7ccff;
	--input-bg: #0e1430;
	--input-border: var(--ring);
	--input-text: var(--text);
}

/* Light theme (day) – blue & white */
[data-theme="light"] {
	--bg: #f5f8ff;
	--bg-alt: #f9fbff; /* slightly tinted for section separation */
	--surface: #ffffff;
	--text: #0d1b3a;
	--muted: #5b6c8f;
	--primary: #2463eb; /* strong blue */
	--primary-600: #1f4fd1;
	--accent: #0891b2;
	--danger: #dc2626;
	--ring: #dbe3ff;
	--card: #ffffff;
	--shadow: 0 12px 28px rgba(31, 65, 114, 0.12);
	--link: #1e40af;
	--link-hover: #1d4ed8;
	--input-bg: #f8faff;
	--input-border: #c7d2fe;
	--input-text: #0d1b3a;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		/* default to light if user prefers light and no manual choice */
		--bg: #f5f8ff;
		--bg-alt: #f9fbff; /* slightly tinted for section separation */
		--surface: #ffffff;
		--text: #0d1b3a;
		--muted: #5b6c8f;
		--primary: #2463eb;
		--primary-600: #1f4fd1;
		--accent: #0891b2;
		--danger: #dc2626;
		--ring: #dbe3ff;
		--card: #ffffff;
		--shadow: 0 12px 28px rgba(31, 65, 114, 0.12);
	}
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 500px at 10% -10%, color-mix(in oklab, var(--primary) 25%, transparent), transparent),
		linear-gradient(180deg, color-mix(in oklab, var(--bg) 80%, transparent), var(--bg));
}

/* Media safety: prevent oversized media from causing horizontal scroll */
img, svg, video { max-width: 100%; height: auto; }
/* Avoid accidental horizontal scrollbars on tiny screens */
html, body { overflow-x: hidden; }

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--primary) 40%, transparent); outline-offset: 2px; }
.section-head h2 { letter-spacing: 0.2px; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.container { width: min(1100px, 92%); margin: 0 auto; }
.section { padding: 64px 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--ring); }
.section-head { text-align: center; margin-bottom: 28px; }
.section-head h2 { margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 34px); }
.section-head p { margin: 0 auto; color: var(--muted); max-width: 760px; }
/* News filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.chip { appearance: none; border: 1px solid var(--ring); background: color-mix(in oklab, var(--surface) 90%, transparent); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.chip:hover { background: color-mix(in oklab, var(--primary) 8%, var(--surface)); }
.chip.is-active { background: color-mix(in oklab, var(--primary) 18%, var(--surface)); border-color: color-mix(in oklab, var(--primary) 28%, var(--ring)); color: #fff; }
/* Slightly lighter subtitle in Coaching System for hierarchy */
#system .section-head p { opacity: 0.9; }
/* Live badge dot */
.badge.live { display: inline-flex; align-items: center; gap: 6px; }
.badge.live .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.15); animation: ping 1.6s ease-in-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 1;} 70% { transform: scale(1.8); opacity: 0;} 100% { transform: scale(1); opacity: 0;} }

.skip-link { position: absolute; left: -999px; top: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; color: #000; padding: 8px; border-radius: 6px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; 
	/* Glassy translucent header with higher visibility */
	background: rgba(36,99,235,0.85); /* fallback */
	background: color-mix(in srgb, var(--primary) 55%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
					backdrop-filter: blur(10px) saturate(140%);
	border-bottom: 1px solid color-mix(in srgb, #ffffff 45%, var(--primary));
	box-shadow: 0 8px 24px rgba(0,0,0,0.16), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.site-header.compact { 
	background: rgba(36,99,235,0.92); /* fallback */
	background: color-mix(in srgb, var(--primary) 72%, transparent);
	border-bottom: 1px solid color-mix(in srgb, #ffffff 55%, var(--primary));
	box-shadow: 0 10px 28px rgba(0,0,0,0.18), inset 0 -1px 0 rgba(255,255,255,0.1);
}
.site-header.compact .header-inner { padding: 4px 0; }
.site-header.compact .brand-logo { height: 84px; }
.header-inner { display: flex; align-items: center; gap: 14px; padding: 8px 0; transition: padding .2s ease; }
.brand-logo { transition: height .2s ease; }
.header-inner .brand { order: 0; }
.header-inner #themeToggle { order: 2; margin-left: 8px; }
.header-inner #navToggle { order: 3; }
.header-inner .primary-nav { order: 1; margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; font-weight: 700; }
.brand-stack { display: grid; gap: 2px; }
.brand-text { line-height: 1.05; font-size: 18px; }
.brand-sub { font-weight: 600; font-size: 14px; opacity: 0.9; letter-spacing: 0.3px; }
.brand .brand-mark { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.brand-logo { height: 92px; width: auto; max-width: 420px; object-fit: contain; display: block; }
/* Boost visibility on blue header */
.site-header .brand-logo { padding: 2px; background: #ffffff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
/* Footer logo slightly smaller for balance */
.site-footer .brand-logo { height: 68px; padding: 4px; background: #ffffff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
/* Let parent context decide the mini size; removed fixed 32px to avoid being too small */
.brand.mini { font-weight: 700; }
.primary-nav ul { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; align-items: center; }
.primary-nav a, .nav-link { color: #ffffff; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-weight: 600; letter-spacing: 0.2px; position: relative; display: inline-flex; align-items: center; line-height: 1; }
.site-header .primary-nav a, .site-header .nav-link { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.primary-nav a:not(.cta):hover, .nav-link:not(.cta):hover { background: rgba(0,0,0,0.12); background: color-mix(in oklab, #000 10%, var(--primary)); }
.primary-nav .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: #fff; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform .2s ease, opacity .2s ease; }
.primary-nav .nav-link:hover::after, .primary-nav .nav-link.active::after { opacity: .95; transform: scaleX(1); }
.primary-nav .courses-toggle::after { display: none; }
.primary-nav .nav-link.cta,
.primary-nav .nav-link.cta:hover,
.primary-nav .nav-link.cta:focus,
.primary-nav .nav-link.cta:active {
	background: var(--primary-600) !important;
	color: #ffffff !important;
	border: 1px solid color-mix(in oklab, #000 25%, var(--primary-600)) !important;
	box-shadow: 0 8px 20px color-mix(in oklab, var(--primary-600) 35%, transparent) !important;
	transition: none !important;
}
.primary-nav .nav-link.cta::after { display: none; }
.courses-toggle .caret { display: inline-block; transition: transform .18s ease; margin-left: 4px; }
.has-dropdown[aria-expanded="true"] .courses-toggle .caret { transform: rotate(180deg); }
.has-dropdown { position: relative; }
/* Hover bridge (keeps menu open when moving cursor down) without affecting vertical alignment */
.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.has-dropdown .dropdown { position: absolute; top: 100%; left: 0; 
	/* Fallback solid/alpha blue for wide browser support */
	background: rgba(36, 99, 235, 0.95);
	/* Progressive enhancement: color-mix in sRGB (broader support than oklab) */
	background: color-mix(in srgb, var(--primary) 92%, transparent);
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 10px; padding: 6px; list-style: none; min-width: 220px; 
	box-shadow: 0 10px 28px rgba(0,0,0,0.18); display: grid; gap: 2px; 
	transform-origin: top; transform: translateY(-8px) scaleY(0.95); opacity: 0; pointer-events: none; 
	transition: transform .18s ease, opacity .18s ease; }
.has-dropdown[aria-expanded="true"] .dropdown, .has-dropdown .dropdown.open { transform: translateY(0) scaleY(1); opacity: 1; pointer-events: auto; }
.has-dropdown:hover .dropdown { transform: translateY(0) scaleY(1); opacity: 1; pointer-events: auto; }
.dropdown-link { display: block; padding: 8px 10px; border-radius: 8px; color: #ffffff; text-decoration: none; }
.dropdown-link:hover {
	/* Fallback: subtle white overlay on blue */
	background: rgba(255,255,255,0.16);
	/* Progressive enhancement */
	background: color-mix(in srgb, #ffffff 18%, var(--primary));
}
.header-ctas { display: none; }
#navToggle { display: none; }
.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; }

/* Buttons */
.btn {
	--btn-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 40px; padding: 10px 16px; border-radius: var(--btn-radius);
	background: color-mix(in oklab, var(--primary) 10%, var(--bg));
	color: var(--text);
	border: 1px solid var(--ring);
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, transform .16s ease;
	box-shadow: none;
	text-decoration: none;
	line-height: 1;
	vertical-align: middle;
	white-space: nowrap;
}
.btn:hover { background: color-mix(in oklab, var(--primary) 14%, var(--bg)); box-shadow: 0 8px 18px rgba(0,0,0,0.12); transform: translateY(-1px); }
.btn:active { background: color-mix(in oklab, var(--primary) 12%, var(--bg)); box-shadow: 0 4px 12px rgba(0,0,0,0.10); transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 18%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* Variants */
.btn.primary {
	background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 98%, #000 0%), color-mix(in oklab, var(--primary) 92%, #000 0%));
	border-color: color-mix(in oklab, #000 10%, var(--primary));
	color: #fff;
	box-shadow: 0 8px 24px color-mix(in oklab, var(--primary) 28%, transparent);
}
.btn.primary:hover { filter: brightness(1.04); box-shadow: 0 12px 28px color-mix(in oklab, var(--primary) 34%, transparent); transform: translateY(-1px); }
.btn.primary:active { background: color-mix(in oklab, #000 4%, var(--primary)); box-shadow: 0 6px 18px color-mix(in oklab, var(--primary) 24%, transparent); }

.btn.outline {
	background: transparent;
	border: 1px solid var(--primary);
	color: var(--primary);
}
.btn.outline:hover { background: color-mix(in oklab, var(--primary) 12%, var(--bg)); border-color: color-mix(in oklab, var(--primary) 35%, var(--ring)); }

.btn.ghost {
	background: transparent;
	border: 1px solid var(--ring);
	color: var(--text);
}
.btn.ghost:hover { background: color-mix(in oklab, var(--primary) 10%, var(--bg)); box-shadow: 0 6px 16px rgba(0,0,0,0.10); }

/* Sizes */
.btn.sm { min-height: 34px; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.btn.lg { min-height: 46px; padding: 12px 18px; border-radius: 14px; font-size: 16px; }

/* Arrow indicator for modern affordance */
.btn.with-arrow::after {
	content: "→";
	margin-left: 8px;
	font-weight: 700;
	transition: transform .16s ease, opacity .16s ease;
}
.btn.with-arrow:hover::after { transform: translateX(2px); }
.btn.with-arrow:active::after { transform: translateX(1px); }

/* Icon buttons */
.icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; min-width: 36px; padding: 8px; gap: 6px;
	background: color-mix(in oklab, var(--primary) 8%, var(--bg));
	border: 1px solid var(--ring);
	color: var(--text);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, transform .16s ease;
}
.icon-btn:hover { background: color-mix(in oklab, var(--primary) 10%, var(--bg)); box-shadow: 0 6px 16px rgba(0,0,0,0.10); transform: translateY(-1px); }
.icon-btn:active { background: color-mix(in oklab, var(--primary) 9%, var(--bg)); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(0); }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 18%, transparent); }
.icon-btn svg { width: 18px; height: 18px; display: block; }

.site-header #themeToggle { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Button icons */
.btn .ic { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.btn .ic svg { width: 16px; height: 16px; display: block; }

/* Improve default button visibility in light theme */
[data-theme="light"] .btn:not(.primary):not(.outline):not(.ghost) {
	background: color-mix(in oklab, var(--primary) 16%, var(--bg));
	border-color: color-mix(in oklab, var(--primary) 35%, var(--ring));
	color: var(--input-text);
}

/* Hero */
.hero { padding: 80px 0; background:
	radial-gradient(600px 500px at 90% 10%, color-mix(in oklab, var(--primary) 20%, transparent), transparent),
	linear-gradient(180deg, transparent, color-mix(in oklab, #000 12%, transparent));
}
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
	/* Luminance-aware overlay for readability over photos */
	background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.15));
	pointer-events: none;
}
.hero .hero-bg { position: absolute; inset: 0; z-index: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	transition: opacity .6s ease;
}
.hero .hero-ui { position: absolute; right: 16px; top: 16px; z-index: 2; }
.hero .hero-ui { display: flex; gap: 8px; }
.hero .hero-arrow { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--ring);
	background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; display: inline-grid; place-items: center;
	box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.hero .hero-arrow:hover { background: rgba(255,255,255,0.24); }
.hero .hero-arrow:active { background: rgba(255,255,255,0.2); }
.hero .container.hero-inner { position: relative; z-index: 1; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(36px, 4.4vw, 60px); margin: 0 0 14px; letter-spacing: 0.3px; color: #fff; 
	text-shadow: 0 3px 18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}
.hero p { color: #f3f6ff; opacity: 0.98; margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 20px); 
	text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hero .hero-copy { position: relative; }
.hero .hero-copy::before { content: ""; position: absolute; inset: -12px -12px -14px -12px; z-index: 0;
	background: linear-gradient(180deg, rgba(15,18,30,0.42), rgba(15,18,30,0.22));
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.35);
	backdrop-filter: blur(6px) saturate(120%);
}
.hero .hero-copy > * { position: relative; z-index: 1; }
.hero .btn-row .btn { backdrop-filter: saturate(130%) blur(3px); }
.hero .btn-row .btn.primary { background: color-mix(in srgb, var(--primary) 98%, black 0%); box-shadow: 0 12px 32px rgba(0,0,0,.35); border-color: color-mix(in srgb, #000 22%, var(--primary)); }
.hero .btn-row .btn:not(.primary) { background: rgba(255,255,255,0.26); color: #fff; border-color: rgba(255,255,255,0.5); }
.hero .btn-row .btn:not(.primary):hover { background: rgba(255,255,255,0.22); }
.hero .btn-row .btn.primary:hover { filter: brightness(1.05); }
.hero-art { display: grid; place-items: center; }
.orbit { position: relative; width: 320px; height: 320px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.15); }
.orbit .planet { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90px; height: 90px;
	/* Earth-like color and shading */
	background:
		radial-gradient(96px 86px at 28% 28%, rgba(255,255,255,0.55), transparent 40%), /* specular highlight */
		radial-gradient(120px 90px at 68% 78%, rgba(0,0,0,0.38), transparent 52%), /* night terminator */
		radial-gradient(circle at 30% 30%, #7fb3ff, #2f55b6); /* ocean base */
	border-radius: 50%; box-shadow: 0 10px 40px rgba(91,140,255,0.5), 0 0 0 4px rgba(135,206,250,0.08); /* glow */
	position: relative; overflow: hidden;
}
/* Atmosphere halo + animated cloud wisps */
.orbit .planet::before { content: ""; position: absolute; inset: -6px; border-radius: 50%;
	background:
		radial-gradient(circle, rgba(135,206,250,0.22), rgba(135,206,250,0) 62%), /* halo */
		/* cloud streaks */
		repeating-conic-gradient(from 0deg, rgba(255,255,255,0.12) 0 1deg, transparent 1deg 6deg),
		repeating-linear-gradient(transparent 0 10px, rgba(255,255,255,0.08) 10px 11px);
	-webkit-mask: radial-gradient(circle at 50% 50%, black 62%, transparent 64%);
					mask: radial-gradient(circle at 50% 50%, black 62%, transparent 64%);
	animation: spin-clouds 48s linear infinite;
	filter: blur(0.5px);
	pointer-events: none;
}
@keyframes spin-clouds { to { transform: rotate(360deg); } }
/* Animated meridians/parallels to suggest a globe */
.orbit .planet::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
	background:
		/* Landmasses (stylized) */
		conic-gradient(from 30deg at 58% 52%, 
			transparent 0 10deg, rgba(63,190,120,0.55) 10deg 24deg, transparent 24deg 38deg,
			rgba(63,190,120,0.6) 38deg 56deg, transparent 56deg 78deg,
			rgba(63,190,120,0.5) 78deg 92deg, transparent 92deg 120deg,
			rgba(63,190,120,0.55) 120deg 140deg, transparent 140deg 160deg,
			rgba(63,190,120,0.45) 160deg 176deg, transparent 176deg 210deg,
			rgba(63,190,120,0.5) 210deg 230deg, transparent 230deg 360deg
		),
		/* Meridians (longitudes) */
		repeating-conic-gradient(from 0deg, rgba(255,255,255,0.08) 0 2deg, transparent 2deg 18deg),
		/* Parallels (latitudes) */
		repeating-linear-gradient(transparent 0 12px, rgba(255,255,255,0.06) 12px 13px);
	mask: radial-gradient(circle at 50% 50%, black 62%, transparent 64%); /* fade at edges */
	animation: spin-meridians 18s linear infinite;
	mix-blend-mode: overlay;
}
@keyframes spin-meridians { to { transform: rotate(360deg); } }
.orbit .sat { position: absolute; width: 20px; height: 20px; background: #00d1b2; border-radius: 50%; top: -10px; left: 50%; transform-origin: -140px 150px; animation: spin 10s linear infinite; box-shadow: 0 0 20px rgba(0,209,178,0.7); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Page hero (inner banner) */
.page-hero { padding: 38px 0 24px; background:
	radial-gradient(600px 200px at 20% -10%, color-mix(in oklab, var(--primary) 16%, transparent), transparent),
	linear-gradient(180deg, color-mix(in oklab, var(--bg) 85%, transparent), var(--bg));
	border-bottom: 1px solid var(--ring);
}
.page-hero h1 { margin: 8px 0 6px; font-size: clamp(28px, 3vw, 40px); letter-spacing: .2px; }
.page-hero .muted { max-width: 820px; }
.breadcrumb { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.breadcrumb a { color: var(--link); text-decoration: none; }
.breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; }

/* Tabs and cards */
.tabs { display: inline-flex; gap: 8px; background: rgba(36,99,235,0.08); background: color-mix(in oklab, var(--primary) 8%, var(--bg)); padding: 6px; border-radius: 12px; border: 1px solid var(--ring); }
.tab-btn { background: transparent; border: 0; color: var(--text); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.tab-btn[aria-selected="true"] { background: var(--primary); color: white; }
.tab-btn[aria-selected="true"] { box-shadow: 0 6px 14px color-mix(in oklab, var(--primary) 24%, transparent); }
.tab-panels { margin-top: 16px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Programs section: refined alignment */
#programs .tabs { justify-content: center; }
#programs .section-head .tabs { margin-top: 10px; }
#programs .tab-btn { min-width: 110px; font-weight: 700; text-align: center; }
#programs .section-head { padding-bottom: 8px; border-bottom: 1px solid var(--ring); margin-bottom: 18px; }
#programs { padding-top: 8px; scroll-margin-top: 120px; }
#programs .card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
#programs .card { 
	display: grid; grid-template-rows: auto auto 1fr auto; min-height: 220px; padding: 16px;
	/* Glassmorphism surface */
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, transparent), color-mix(in oklab, var(--surface) 30%, transparent)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 24%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)) border-box;
	border: 1px solid transparent;
	border-radius: 14px;
	backdrop-filter: blur(8px) saturate(120%);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	box-shadow: 0 10px 24px rgba(0,0,0,0.16);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative; overflow: hidden;
}
#programs .card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.22); }
#programs .card h3 { margin: 0 0 6px; font-weight: 800; letter-spacing: .2px; }
#programs .card .meta { margin: 0; color: var(--muted); }
#programs .card h3 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#programs .card .meta { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#programs .card { min-height: 240px; }
#programs .card h3 { margin: 0 0 6px; }
#programs .card .meta { margin: 0 0 4px; }
#programs .card .card-actions { margin-top: 10px; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
#programs .card .badge { margin-right: auto; }
#programs .card .card-actions .btn { min-width: 96px; }
#programs .card .badge { background: color-mix(in oklab, var(--primary) 10%, var(--bg)); border-color: color-mix(in oklab, var(--primary) 20%, var(--ring)); }
#programs .card .btn.sm { backdrop-filter: saturate(120%) blur(2px); }

/* Make Enquire / Apply buttons more premium */
#programs .card .card-actions .btn {
	position: relative; overflow: hidden;
	border: 1px solid transparent;
	border-radius: 12px;
	/* Stronger glass: translucent fill + blur + gradient border */
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--surface) 30%, transparent), color-mix(in oklab, var(--surface) 14%, transparent)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 22%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)) border-box;
	backdrop-filter: blur(12px) saturate(170%);
	-webkit-backdrop-filter: blur(12px) saturate(170%);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 6px 16px rgba(0,0,0,0.10);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
#programs .card .card-actions .btn::after {
	/* Gloss highlight */
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%;
	background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.06));
	opacity: .6; pointer-events: none; transition: opacity .16s ease;
}
#programs .card .card-actions .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.16); }
#programs .card .card-actions .btn:hover::after { opacity: .75; }
#programs .card .card-actions .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 22%, transparent); }

/* Apply button as standout primary */
#programs .card .card-actions .btn.primary {
	/* Tinted glass primary */
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--primary) 26%, transparent), color-mix(in oklab, var(--primary) 18%, transparent)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 38%, transparent), color-mix(in oklab, var(--accent) 16%, transparent)) border-box;
	color: #fff;
	border: 1px solid transparent;
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 12px 30px color-mix(in oklab, var(--primary) 38%, transparent);
}
#programs .card .card-actions .btn.primary:hover { filter: brightness(1.06); box-shadow: 0 16px 36px color-mix(in oklab, var(--primary) 42%, transparent); }
#programs .card .card-actions .btn.primary:active { filter: brightness(0.98); }
#programs .card .card-actions .btn.primary::after { content: "→"; margin-left: 8px; font-weight: 700; }

/* Background image layer for JEE cards */
#programs .card.has-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--card-bg);
	background-size: cover; background-position: center;
	opacity: 0.18; transform: scale(1.01);
	transition: opacity .28s ease, transform .28s ease;
	z-index: 0;
}
#programs .card.has-bg::after {
	content: ""; position: absolute; inset: 0;
	/* Light base panel so black text is readable even before hover */
	background: linear-gradient(180deg,
		rgba(255,255,255,0.00) 0%,
		rgba(255,255,255,0.18) 40%,
		rgba(255,255,255,0.50) 100%
	);
	opacity: 1;
	pointer-events: none;
	z-index: 1;
}
#programs .card.has-bg:hover::before { opacity: 0.7; transform: scale(1.08); }
#programs .card.has-bg:hover::after {
	/* Lighten bottom area so black text is highly legible */
	opacity: 1;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.00) 0%,
		rgba(255,255,255,0.22) 40%,
		rgba(255,255,255,0.60) 100%
	);
}
#programs .card.has-bg:hover h3 { color: #111; text-shadow: none; }
#programs .card.has-bg:hover .meta { color: rgba(17,17,17,0.92); text-shadow: none; }
#programs .card.has-bg:hover .badge { background: rgba(255,255,255,0.85); color: #111; border-color: rgba(0,0,0,0.30); }
#programs .card.has-bg:hover .btn { color: #111; border-color: rgba(0,0,0,0.28); background: rgba(255,255,255,0.88); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
#programs .card.has-bg:hover .btn.primary { background: #ffffff; color: #111; border-color: rgba(0,0,0,0.35); box-shadow: 0 12px 30px rgba(0,0,0,0.20); }

/* Ensure content is above background layers */
#programs .card.has-bg > * { position: relative; z-index: 2; }

/* Base readability on image cards (even before hover) */
#programs .card.has-bg h3 { color: #111; text-shadow: none; }
#programs .card.has-bg .meta { color: rgba(17,17,17,0.88); text-shadow: none; }
#programs .card.has-bg .badge { background: rgba(255,255,255,0.85); color: #111; border-color: rgba(0,0,0,0.30); }
#programs .card.has-bg .btn {
	color: #111; border-color: rgba(0,0,0,0.28);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55)) padding-box,
		linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.40)) border-box;
	backdrop-filter: blur(12px) saturate(170%);
	-webkit-backdrop-filter: blur(12px) saturate(170%);
}
#programs .card.has-bg .btn.primary {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)) padding-box,
		linear-gradient(135deg, rgba(0,0,0,0.20), rgba(0,0,0,0.06)) border-box;
	color: #111; border-color: rgba(0,0,0,0.35);
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card {
	position: relative;
	border-radius: 14px;
	padding: 16px;
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--surface) 85%, transparent), var(--surface)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, transparent), color-mix(in oklab, var(--accent) 10%, transparent)) border-box;
	border: 1px solid transparent;
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); }
.card:focus-visible, .card:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 20%, transparent); }
.card h3, .card h4 { margin-top: 0; letter-spacing: .2px; }
.card .meta { color: var(--muted); font-size: 14px; line-height: 1.5; }
.card .card-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }

/* Features */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* Make feature cards consistent and well-aligned */
.feature { background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 18px; text-align: center; display: grid; gap: 8px; align-content: start; transition: transform .18s ease, box-shadow .18s ease; }
.feat-ic { font-size: 24px; display: inline-grid; place-items: center; margin-bottom: 4px; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in oklab, var(--primary) 12%, var(--bg)); border: 1px solid var(--ring); }
.feature h3 { margin: 0; font-weight: 700; }
.feature p { margin: 0; line-height: 1.55; }
/* Premium hover */
.feature:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
/* Coaching System grid: force a neat 4-column layout on large screens */
#system { padding-top: 36px; padding-bottom: 16px; border-top: 1px solid var(--ring); scroll-margin-top: 120px; }
#system .section-head { text-align: center; margin-bottom: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--ring); }
#system .feature-grid { grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 18px; margin-top: 24px; }
#system .feature {
	position: relative;
	min-height: 220px;
	text-align: left;
	padding: 20px;
	gap: 10px;
	/* Premium card surface with subtle gradient and decorative border */
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--primary) 8%, var(--surface)), var(--surface)) padding-box,
		linear-gradient(135deg,
			color-mix(in oklab, var(--primary) 28%, transparent),
			color-mix(in oklab, var(--accent) 22%, transparent)
		) border-box;
	border: 1px solid transparent;
	box-shadow: 0 10px 24px rgba(0,0,0,0.18);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#system .feature:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0,0,0,0.22);
	filter: saturate(105%);
}
#system .feature.bg-concept {
	overflow: hidden;
}
#system .feature.bg-concept::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("./cochinng system/Screenshot 2025-10-16 212647.png") center/contain no-repeat;
	opacity: 0.18;
	filter: saturate(110%) contrast(105%);
	z-index: 0;
}
#system .feature.bg-concept::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.28));
	z-index: 1;
}
#system .feature.bg-concept > * { position: relative; z-index: 2; }
#system .feature.bg-concept h3 { color: #ffffff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
#system .feature.bg-concept p { color: #f1f5ff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }

/* Practice & DPPs */
#system .feature.bg-practice { overflow: hidden; }
#system .feature.bg-practice::before {
	content: ""; position: absolute; inset: 0;
	background: url("./cochinng system/Practice & DPPs.jpeg") center/contain no-repeat;
	opacity: 0.2; filter: saturate(110%) contrast(105%);
	z-index: 0;
}
#system .feature.bg-practice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.26)); z-index: 1; }
#system .feature.bg-practice > * { position: relative; z-index: 2; }
#system .feature.bg-practice h3 { color: #ffffff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
#system .feature.bg-practice p { color: #f1f5ff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }

/* Testing & Analysis */
#system .feature.bg-testing { overflow: hidden; }
#system .feature.bg-testing::before {
	content: ""; position: absolute; inset: 0;
	background: url("./cochinng system/Testing & Analysis.jpeg") center/contain no-repeat;
	opacity: 0.2; filter: saturate(110%) contrast(105%);
	z-index: 0;
}
#system .feature.bg-testing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.26)); z-index: 1; }
#system .feature.bg-testing > * { position: relative; z-index: 2; }
#system .feature.bg-testing h3 { color: #ffffff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
#system .feature.bg-testing p { color: #f1f5ff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }

/* Mentoring */
#system .feature.bg-mentoring { overflow: hidden; }
#system .feature.bg-mentoring::before {
	content: ""; position: absolute; inset: 0;
	background: url("./cochinng system/Mentoring.jpeg") center/contain no-repeat;
	opacity: 0.22; filter: saturate(112%) contrast(108%);
	z-index: 0;
}
#system .feature.bg-mentoring::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.28)); z-index: 1; }
#system .feature.bg-mentoring > * { position: relative; z-index: 2; }
#system .feature.bg-mentoring h3 { color: #ffffff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
#system .feature.bg-mentoring p { color: #f1f5ff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }

/* Smooth transitions and reveal-on-hover for background-image feature cards */
#system .feature[class*="bg-"]::before,
#system .feature[class*="bg-"]::after {
	transition: opacity .25s ease, transform .25s ease, filter .25s ease, background .25s ease;
}
#system .feature[class*="bg-"]:hover::before {
	opacity: 0.55; /* show more of the real image */
	transform: scale(1.03); /* subtle zoom */
	filter: saturate(120%) contrast(110%) brightness(1.02);
}
#system .feature[class*="bg-"]:hover::after {
	/* lighten overlay so image is more visible while keeping text readable */
	background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.12));
}
#system .feature[class*="bg-"]:hover h3,
#system .feature[class*="bg-"]:hover p {
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
#system .feat-ic {
	margin-bottom: 8px;
	width: 44px;
	height: 44px;
	font-size: 24px;
	border-radius: 12px;
	display: inline-grid;
	place-items: center;
	background:
		radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,0.18), transparent),
		color-mix(in oklab, var(--primary) 18%, var(--bg));
	border: 1px solid color-mix(in oklab, var(--primary) 32%, var(--ring));
	box-shadow: 0 6px 16px rgba(0,0,0,0.16), inset 0 -2px 6px rgba(0,0,0,0.12);
}
#system .feature h3 { margin: 0; letter-spacing: 0.2px; }
#system .feature p { margin: 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.stat { background: color-mix(in oklab, var(--primary) 6%, var(--bg-alt)); border: 1px solid var(--ring); border-radius: 12px; padding: 12px; text-align: center; }
.stat .num { font-weight: 800; font-size: 28px; color: var(--accent); }
.stat .suffix { font-weight: 800; color: var(--accent); margin-left: 2px; font-size: 18px; vertical-align: baseline; }
.stat .lbl { color: var(--muted); display: block; }

/* Carousel */
.carousel { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.carousel-track { overflow: hidden; position: relative; }
.carousel-track .row { display: flex; transition: transform 0.3s ease-out; gap: 0; }
.carousel .prev, .carousel .next { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ring); background: rgba(36,99,235,0.12); background: color-mix(in oklab, var(--primary) 8%, var(--bg)); }
.carousel .prev:focus-visible, .carousel .next:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 20%, transparent); }
.carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; background: #2a3350; border: 1px solid var(--ring); }
.carousel-dots button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 20%, transparent); }
@media (prefers-reduced-motion: reduce) {
	.carousel-track .row { transition: none; }
	.carousel .row .card.topper:hover { transform: none; box-shadow: 0 10px 20px rgba(0,0,0,0.16); }
}

/* Respect reduced motion: disable decorative animations site-wide */
@media (prefers-reduced-motion: reduce) {
	.badge.live .dot,
	.news-dashboard .feed-badge .dot,
	.admissions .badge.warn,
	.admissions .seats-flag,
	.orbit .planet::before,
	.orbit .planet::after,
	#branches .orbit .planet,
	#branches .planet.big { animation: none !important; }
}
.carousel-dots button[aria-selected="true"] { background: var(--primary); }

/* Topper cards styling in Results & Stories */
.carousel .row .card.topper .percentile {
	margin-top: 6px;
	font-size: 28px;
	font-weight: 800;
	color: var(--accent);
}
.carousel .row .card.topper { text-align: center; padding: 14px; }
.carousel .row .card.topper h4 { margin: 6px 0 4px; font-size: 18px; }
.carousel .row .card.topper .avatar { width: 100%; /* dynamic aspect ratio set after image load */ aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--primary) 8%, var(--bg)); margin-bottom: 10px; display: grid; place-items: center; border: 1px solid var(--ring); }
.carousel .row .card.topper .avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel .row .card.topper .avatar { position: relative; }
.carousel .row .card.topper .avatar .initials { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 42px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.carousel .row .card.topper .avatar .initials.hide { display: none; }
.carousel .row .card.topper {
	position: relative;
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, var(--surface)), var(--surface)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 24%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)) border-box;
	border: 1px solid transparent;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.16);
	transition: transform .18s ease, box-shadow .18s ease;
}
.carousel .row .card.topper:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
.carousel .row .card.topper .avatar { position: relative; }
.carousel .row .card.topper .avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.15)); pointer-events: none; }
.carousel .row .card.topper .badge-medal {
	position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 30% 30%, #ffe27a, #f59e0b);
	color: #7c2d12; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.2);
}

/* Branch locator */
.branch-search { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(160px, 220px) 120px 96px; gap: 12px; margin-bottom: 12px; align-items: center; max-width: 880px; margin-inline: auto; }
.branch-results { display: grid; grid-template-columns: 1fr; gap: 14px; justify-content: start; margin-inline: 0; width: 100%; }
@media (max-width: 900px) {
	.branch-results { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.branch-results { grid-template-columns: 1fr; }
}
.branch .row { display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Blog filter chips: horizontal scroll on small screens */
@media (max-width: 520px) {
	#blog .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; white-space: nowrap; gap: 8px; padding-bottom: 2px; scroll-snap-type: x proximity; }
	#blog .filter-bar::-webkit-scrollbar { display: none; }
	#blog .filter-bar .chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Tighten hero spacing on phones */
@media (max-width: 520px) {
	.hero { padding: 56px 0; }
}

/* Tiny devices: slightly smaller header logo */
@media (max-width: 360px) {
	.brand-logo { height: 64px; }
}
.branch-search.card { padding: 12px; }
.branch.card { border-left: 4px solid color-mix(in oklab, var(--primary) 50%, transparent); }
.map-embed { width: 100%; height: 360px; border: 0; border-radius: 12px; }
/* Branch map container */
.branch-map { height: 300px; border: 1px solid var(--ring); border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 700px) {
	.branch-map { height: 280px; }
}
.card.branch.highlight { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 18%, transparent); }
/* Optional custom control styling */
.leaflet-control.locate-control a {
	background: color-mix(in oklab, var(--primary) 14%, var(--bg));
	border: 1px solid var(--ring);
	color: var(--text);
}
/* Normalize control heights for cleaner alignment */
.branch-search input,
.branch-search select,
.branch-search .btn { height: 40px; }
/* Make branch cards a bit more compact */
.card.branch { padding: 12px; display: grid; gap: 6px; align-content: start; }
.card.branch h4 { margin: 0 0 2px; font-size: 16px; line-height: 1.25; }
.card.branch .meta { font-size: 13px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.card.branch .meta + .meta { margin-top: -2px; }
.card.branch .row { margin-top: 6px; }
.branch .btn { 
	--btn-radius: 999px;
	min-height: 38px; padding: 10px 14px; border-radius: var(--btn-radius); font-size: 14px; font-weight: 600; letter-spacing: .2px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
	transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
	backdrop-filter: saturate(140%);
	max-width: 100%;
}
.branch .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,0.12); }
.branch .btn:active { transform: translateY(0); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }

/* Modern variants inside branch cards */
.branch .btn.primary {
	background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, #ffffff), var(--primary));
	border-color: color-mix(in oklab, #000 18%, var(--primary));
	color: #fff;
}
.branch .btn.primary:hover { filter: brightness(1.04); }
.branch .btn.primary:active { filter: brightness(0.98); }

/* Call button (detect tel links) */
.branch .btn[href^="tel"] {
	background: transparent;
	border-color: color-mix(in oklab, var(--accent) 50%, var(--ring));
	color: color-mix(in oklab, var(--accent) 90%, #fff);
}
.branch .btn[href^="tel"]:hover {
	background: color-mix(in oklab, var(--accent) 12%, var(--bg));
}

/* Locate button */
.branch .btn[data-action="locate-branch"] {
	background: color-mix(in oklab, var(--primary) 8%, var(--bg));
	border-color: color-mix(in oklab, var(--primary) 35%, var(--ring));
	color: var(--text);
}
.branch .btn[data-action="locate-branch"]:hover {
	background: color-mix(in oklab, var(--primary) 12%, var(--bg));
}
/* Anchor alignment for sticky header (bring section higher when anchored) */
#branches { scroll-margin-top: 64px; }
/* Reduce top padding for branches to bring content higher */
#branches.section { padding-top: 24px; }
/* Slightly tighten spacing under the section heading */
#branches .section-head { margin-bottom: 12px; }
/* Place the orbit behind the entire branches section so it shows through glass */
#branches { position: relative; }
#branches { overflow: hidden; }
#branches .container { position: relative; z-index: 1; }
#branches .orbit-layer { position: absolute; inset: -60px 0 -60px 0; z-index: 0; pointer-events: none; }
#branches .orbit { position: absolute; left: 50%; transform: translateX(-50%) rotateX(58deg); border-radius: 50%; opacity: 0.22; border: 1px dashed color-mix(in oklab, var(--primary) 35%, var(--ring)); filter: saturate(120%); }
#branches .orbit-1 { top: -40px; width: 560px; height: 560px; }
#branches .orbit-2 { top: 10px; width: 420px; height: 420px; opacity: 0.20; }
#branches .orbit-3 { top: 60px; width: 300px; height: 300px; opacity: 0.18; }
#branches .orbit .planet { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 6px 12px rgba(0,0,0,0.25); transform-origin: center center; }
#branches .orbit-1 .planet { --r: 280px; animation: revolve-1 36s linear infinite; background: radial-gradient(circle at 30% 30%, #ffffff, #cbd5ff); }
#branches .orbit-2 .planet { --r: 210px; animation: revolve-2 24s linear infinite; width: 12px; height: 12px; background: radial-gradient(circle at 35% 35%, #ffd166, #f59e0b); }
#branches .orbit-3 .planet { --r: 150px; animation: revolve-3 18s linear infinite; width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #7fffd4, #22d3ee); }
@keyframes revolve-1 { from { transform: rotate(0) translateX(var(--r)) rotate(0);} to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg);} }
@keyframes revolve-2 { from { transform: rotate(0) translateX(var(--r)) rotate(0);} to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg);} }
@keyframes revolve-3 { from { transform: rotate(0) translateX(var(--r)) rotate(0);} to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg);} }

/* Big planets: earth-like and gas giant */
#branches .planet.big { position: absolute; display: block; border-radius: 50%; filter: saturate(115%); box-shadow: 0 14px 30px rgba(0,0,0,0.28), inset 0 -10px 24px rgba(0,0,0,0.25); opacity: 0.9; }
#branches .planet.big.earth {
	width: clamp(110px, 12vw, 160px); height: clamp(110px, 12vw, 160px);
	left: 8%; top: 240px;
	background:
		/* land masses */
		radial-gradient(40% 28% at 28% 38%, #2ecc71 0 55%, transparent 56%),
		radial-gradient(30% 22% at 58% 50%, #27ae60 0 60%, transparent 61%),
		radial-gradient(22% 18% at 76% 34%, #16a34a 0 58%, transparent 59%),
		radial-gradient(18% 16% at 40% 66%, #1faa59 0 60%, transparent 61%),
		/* ocean */
		radial-gradient(circle at 50% 50%, #1e90ff 0 70%, #1b6fd6 72%);
	animation: planetSpin 120s linear infinite;
}
#branches .planet.big.earth::after {
	content: ""; position: absolute; inset: -6%; border-radius: 50%;
	background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 40%);
	filter: blur(1px); pointer-events: none;
}
#branches .planet.big.giant {
	width: clamp(130px, 14vw, 190px); height: clamp(130px, 14vw, 190px);
	right: 6%; top: 120px;
	background:
		/* gas bands */
		repeating-linear-gradient( 12deg,
			#f59e0b 0 10%, #f97316 10% 16%, #fb923c 16% 24%, #f59e0b 24% 34%, #fbbf24 34% 44% );
	border: 1px solid rgba(255,255,255,0.12);
	animation: planetSpin 180s linear infinite;
}
#branches .planet.big.giant::after {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotateX(70deg) rotateZ(-10deg);
	width: 180%; height: 36%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0.08) 60%, rgba(255,255,255,0) 70%);
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 66%);
					mask-image: radial-gradient(closest-side, #000 55%, transparent 66%);
	opacity: 0.3; pointer-events: none;
}
@keyframes planetSpin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

@media (max-width: 860px) {
	#branches .planet.big.earth { left: 4%; top: 280px; opacity: 0.8; }
	#branches .planet.big.giant { right: 3%; top: 140px; opacity: 0.8; }
}
#branches::before {
	content: ""; position: absolute; inset: -80px 0 -40px 0; pointer-events: none; z-index: 0;
	background: radial-gradient(800px 420px at -10% -10%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 60%);
}
#branches::after {
	content: ""; position: absolute; pointer-events: none; z-index: 0;
	width: clamp(700px, 80vw, 1100px); height: clamp(700px, 80vw, 1100px);
	left: 50%; top: -140px; transform: translateX(-50%) rotate(0deg);
	background:
		repeating-radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--primary) 28%, transparent) 0 2px, transparent 2px 46px),
		radial-gradient(24px 24px at 82% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), /* planet 1 */
		radial-gradient(16px 16px at 36% 16%, color-mix(in oklab, #ffd166 90%, transparent), transparent 70%), /* planet 2 */
		radial-gradient(12px 12px at 14% 72%, color-mix(in oklab, #7fffd4 90%, transparent), transparent 70%); /* planet 3 */
	opacity: 0.24;
	filter: saturate(120%) drop-shadow(0 10px 18px rgba(0,0,0,0.22));
	-webkit-mask-image: radial-gradient(farthest-side, #000 70%, transparent 100%);
					mask-image: radial-gradient(farthest-side, #000 70%, transparent 100%);
	animation: orbitSpinSection 80s linear infinite;
}
@keyframes orbitSpinSection { from { transform: translateX(-50%) rotate(0deg);} to { transform: translateX(-50%) rotate(360deg);} }

/* Aside title for map */
.aside-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: none; }

/* Branches: two-column layout (equal width columns) */
.branches-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.branches-aside { position: sticky; top: 56px; height: fit-content; }
/* Subtle column separation */
.branches-aside { border-left: 1px solid color-mix(in oklab, var(--primary) 14%, var(--ring)); padding-left: 12px; margin-left: 2px; }
@media (max-width: 1024px) {
	.branches-layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.branches-layout { display: block; }
	.branches-aside { position: static; margin-top: 12px; }
}

/* Box wrapper for branches section */
.branches-box { 
	position: relative;
	overflow: hidden;
	padding: 14px; 
	/* Glassmorphism wrapper */
	/* Fallback for browsers without color-mix */
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	/* Enhanced when color-mix is supported */
	background:
		linear-gradient(180deg, color-mix(in oklab, #fff 6%, var(--card)), color-mix(in oklab, #000 2%, var(--card))) padding-box,
		linear-gradient(135deg, color-mix(in oklab, #fff 14%, transparent), color-mix(in oklab, var(--primary) 10%, transparent)) border-box;
	border: 1px solid transparent;
	-webkit-backdrop-filter: blur(14px) saturate(160%);
					backdrop-filter: blur(14px) saturate(160%);
	box-shadow: 0 16px 40px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
}
.branches-box::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(240px 180px at 10% 8%, rgba(255,255,255,0.18), transparent 60%),
							linear-gradient(180deg, rgba(255,255,255,0.06), transparent 55%);
	pointer-events: none;
	z-index: 0;
}

/* Orbit visual behind content */
/* Disable inner orbit (we moved it to the section background) */
.branches-box::after { content: none !important; }

@keyframes orbitSpin {
	from { transform: rotateX(58deg) rotateZ(0deg); }
	to   { transform: rotateX(58deg) rotateZ(360deg); }
}

/* Ensure content appears above background ornaments */
.branches-box > * { position: relative; z-index: 1; }
.branches-box .branches-layout { gap: 14px; }
.branches-box .aside-title { margin-bottom: 10px; }

/* Glassy branch cards inside the box */
.branches-box .card.branch {
	/* Fallback */
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	/* Enhanced */
	background:
		linear-gradient(180deg, color-mix(in oklab, #fff 6%, var(--surface)), color-mix(in oklab, #000 4%, var(--surface))) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 10%, transparent), color-mix(in oklab, var(--accent) 8%, transparent)) border-box;
	border: 1px solid transparent;
	-webkit-backdrop-filter: blur(8px) saturate(140%);
					backdrop-filter: blur(8px) saturate(140%);
	box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.branches-box .card.branch:hover { box-shadow: 0 14px 30px rgba(0,0,0,0.28); }

/* Glassy map container border and subtle backdrop feel */
.branches-box .branch-map {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	background: linear-gradient(180deg, color-mix(in oklab, #fff 6%, var(--surface)), color-mix(in oklab, #000 3%, var(--surface)));
	border: 1px solid color-mix(in oklab, #fff 16%, var(--ring));
	box-shadow: 0 10px 26px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Brand-styled map pin */
.map-pin { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--pin, #2463eb); border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.map-pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; border: 8px solid transparent; border-top-color: var(--pin, #2463eb); transform: translateX(-50%); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); }
.map-pin > span { position: absolute; inset: 4px; border-radius: 50%; background: rgba(255,255,255,0.9); }

/* Leaflet controls glass styling */
.leaflet-control-zoom a, .leaflet-control.locate-control a { 
	background: rgba(255,255,255,0.1); border: 1px solid var(--ring); color: var(--text);
	-webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%);
}
.leaflet-control-zoom a:hover, .leaflet-control.locate-control a:hover { background: rgba(255,255,255,0.16); }

/* Subtle glass chip for headings (Map, Centers) */
.branches-box .aside-title {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 10px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	background: color-mix(in oklab, #fff 6%, var(--surface));
	border: 1px solid color-mix(in oklab, #fff 10%, var(--ring));
}
.branches-box .aside-title { margin-bottom: 10px; }
.branches-box .branches-layout { gap: 14px; }

/* Responsive tweaks to keep controls inline until smaller widths */
@media (max-width: 900px) {
	.branch-search { grid-template-columns: minmax(280px, 1fr) minmax(150px, 200px) 112px 90px; }
}
@media (max-width: 700px) {
	.branch-search { grid-template-columns: 1fr; }
	.branch-search .btn { width: 100%; }
}
.badge { display: inline-block; padding: 2px 8px; background: rgba(36,99,235,0.12); background: color-mix(in oklab, var(--primary) 12%, var(--bg)); border: 1px solid var(--ring); border-radius: 999px; color: var(--muted); font-size: 12px; }
.map-placeholder { height: 360px; background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--primary) 12%, var(--bg)), color-mix(in oklab, var(--primary) 12%, var(--bg)) 10px, color-mix(in oklab, var(--primary) 2%, var(--bg)) 10px, color-mix(in oklab, var(--primary) 2%, var(--bg)) 20px); border: 1px solid var(--ring); border-radius: 12px; }

/* Admissions with banner background */
.admissions {
	position: relative;
	background:
		linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.45)),
		url("poster/banner2.png") center center/cover no-repeat;
	background-color: var(--bg-alt);
	min-height: 380px;
	border-top: 1px solid var(--ring);
	border-bottom: 1px solid var(--ring);
}
.admissions .admissions-inner h2,
.admissions .admissions-inner p { color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* Admissions content enhancements */
.admissions .ad-head { display: grid; gap: 8px; }
.admissions .badge-row { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.admissions .badge.hot { background: rgba(34,197,94,0.18); color: #E7FFE7; border-color: rgba(34,197,94,0.45); }
.admissions .badge.warn { background: rgba(244,63,94,0.22); color: #FFE9ED; border-color: rgba(244,63,94,0.45); animation: pulseGlow 1.8s ease-in-out infinite; }
/* Trust points list */
.admissions .ad-points { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 14px; padding: 0; margin: 6px 0 0; list-style: none; }
.admissions .ad-points li { position: relative; padding-left: 24px; color: #fff; opacity: 0.95; text-shadow: 0 2px 6px rgba(0,0,0,0.30); }
.admissions .ad-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in oklab, var(--primary) 70%, #fff); box-shadow: 0 0 0 3px rgba(255,255,255,0.22) inset; mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23fff%22><path d=%22M9.55 17.54 4.4 12.4l1.42-1.41 3.73 3.73 8.63-8.63 1.41 1.41-10.04 10.04z%22/></svg>') center/contain no-repeat; }

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0.45); }
	50% { box-shadow: 0 0 0 6px rgba(244,63,94,0.18); }
}

.admissions-inner { display: grid; gap: 14px; align-items: center; grid-template-columns: 1fr auto; }
.admissions .btn-row { justify-content: start; }
.admissions .btn-row .btn { backdrop-filter: saturate(125%) blur(3px); border-color: rgba(255,255,255,0.55); color: #fff; }
.admissions .btn-row .btn.primary { background: color-mix(in srgb, var(--primary) 94%, #000 0%); box-shadow: 0 12px 32px rgba(0,0,0,0.32); border-color: color-mix(in srgb, #000 22%, var(--primary)); }
.admissions .btn-row .btn:not(.primary) { background: rgba(255,255,255,0.22); }
.admissions .btn-row .btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.admissions .btn-row .btn:not(.primary):hover { background: rgba(255,255,255,0.28); }
.admissions .btn-row .btn:active { transform: translateY(0); }
/* Call button variant */
.admissions .btn-row .btn.call { background: rgba(16,185,129,0.28); border-color: rgba(16,185,129,0.55); }
.admissions .btn-row .btn.call:hover { background: rgba(16,185,129,0.35); }

/* Helper link */
.admissions .ad-help { margin-top: 4px; color: #fff; opacity: 0.9; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.admissions .link-btn { appearance: none; background: transparent; border: none; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 2px; }
.admissions .link-btn:hover { text-decoration-thickness: 2px; filter: brightness(1.05); }

/* On small screens, prefer showing full banner without crop */
@media (max-width: 600px) {
	.admissions {
		background:
			linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.45)),
			url("poster/banner2.png") center center/contain no-repeat;
		min-height: 240px;
	}
	.admissions-inner { grid-template-columns: 1fr; }
	.admissions .btn-row { justify-content: center; }
	.admissions .ad-points { grid-template-columns: 1fr; }
}

/* Mobile-first tweaks */
@media (max-width: 520px) {
	/* Make program tabs horizontally scrollable with snap */
	.tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
	.tabs::-webkit-scrollbar { display: none; }
	.tab-btn { flex: 0 0 auto; min-width: max-content; scroll-snap-align: start; }
	/* Reduce ticker height to save space */
	.ticker-viewport { height: 180px; }
}

/* Glass card for readability over banner */
.admissions .admissions-inner { position: relative; padding: 16px 18px; background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,0.18); backdrop-filter: blur(4px) saturate(120%); }

/* Top-right ribbon flag for seats */
.admissions .seats-flag {
	position: absolute;
	top: -12px;
	right: 14px;
	z-index: 3;
	background: linear-gradient(135deg, #ef4444, #f43f5e 60%, #fb7185);
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.8);
	box-shadow: 0 12px 28px rgba(0,0,0,0.28);
	transform: rotate(3deg);
	filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
	animation: seatsPulse 2.2s ease-in-out infinite;
}

@keyframes seatsPulse {
	0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); transform: rotate(3deg) scale(1); }
	50% { box-shadow: 0 16px 36px rgba(0,0,0,0.34); transform: rotate(3deg) scale(1.03); }
}

@media (max-width: 600px) {
	.admissions .seats-flag { top: -8px; right: 10px; padding: 6px 10px; font-size: 11px; transform: none; animation: seatsPulse 2.4s ease-in-out infinite; }
}
.admissions-inner { display: grid; gap: 14px; align-items: center; grid-template-columns: 1fr auto; }

/* Blog */
.blog-grid .card { display: grid; grid-template-rows: auto auto 1fr auto; }
/* Clamp text for professional look */
.blog-grid .card h4 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; font-weight: 800; letter-spacing: .2px; }
.blog-grid .card h4 a { color: inherit; text-decoration: none; }
.blog-grid .card h4 a:hover { text-decoration: underline; }
.blog-grid .card .muted { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Empty state card */
.card.empty { text-align: center; align-content: center; min-height: 160px; }
/* Banner-type exam flag on news cards */
.blog-grid .card { position: relative; }
#blog .blog-grid .card { padding-top: 28px; }
.blog-grid .card .card-flag {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,0.22);
	pointer-events: none;
}
/* Per-tag colors aligned to ticker dots */
.blog-grid .card .card-flag.tag-jee { background: #0ea5e9; }
.blog-grid .card .card-flag.tag-neet { background: #22c55e; }
.blog-grid .card .card-flag.tag-cuet { background: #eab308; color: #111; }
.blog-grid .card .card-flag.tag-ugc-net { background: #6366f1; }
.blog-grid .card .card-flag.tag-csir { background: #f43f5e; }
.blog-grid .card .card-flag.tag-ncet { background: #10b981; }
.blog-grid .card .card-flag.tag-aiapget { background: #2dd4bf; }
.blog-grid .card .card-flag.tag-aissee { background: #3b82f6; }
.blog-grid .card .card-flag.tag-others { background: #94a3b8; }

/* Blog card actions layout */
.blog-grid .card .card-actions { justify-content: space-between; }
.blog-grid .card .card-actions .btn { min-width: 96px; }
.blog-grid .card .card-actions a.btn:first-child { margin-right: auto; }
/* Modern look for Read (outline) and CTA (primary) buttons within news cards */
.blog-grid .card .btn.sm.outline {
	backdrop-filter: saturate(120%) blur(2px);
	background: color-mix(in oklab, var(--primary) 6%, var(--bg));
	border-color: color-mix(in oklab, var(--primary) 30%, var(--ring));
}
.blog-grid .card .btn.sm.outline:hover {
	background: color-mix(in oklab, var(--primary) 10%, var(--bg));
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
	transform: translateY(-1px);
}
.blog-grid .card .btn.primary {
	background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 96%, #000 0%), color-mix(in oklab, var(--primary) 88%, #000 0%));
	border-color: color-mix(in oklab, #000 18%, var(--primary));
}
.blog-grid .card .btn.primary:hover {
	filter: brightness(1.05);
	box-shadow: 0 12px 30px color-mix(in oklab, var(--primary) 38%, transparent);
	transform: translateY(-1px);
}
/* Blog section spacing and alignment */
#blog { scroll-margin-top: 64px; }
#blog.section { padding-top: 36px; }
#blog .section-head { margin-bottom: 16px; }
#blog .section-head { text-align: center; }
#blog .section-head h2 { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#blog .filter-bar { justify-content: center; margin-top: 8px; }
#blog .news-dashboard { margin-top: 8px; }
#blog .card-grid.blog-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Reduce bottom padding on Admissions to bring Blog up visually */
#admissions.section { padding-bottom: 28px; }

/* News dashboard ticker */
.news-dashboard { margin: 8px auto 16px; max-width: 100%; }
.news-dashboard .dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.news-dashboard .dash-head .dash-meta { display: flex; gap: 10px; align-items: center; color: var(--muted); margin-left: auto; margin-right: 10px; }
.news-dashboard .dash-head h3 { margin: 0; font-size: 16px; letter-spacing: .02em; }
.news-dashboard .dash-controls { display: flex; gap: 8px; align-items: center; }
.news-dashboard .feed-badge {
	appearance: none; border: 0; background: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 999px;
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--primary) 26%, transparent), color-mix(in oklab, var(--primary) 12%, transparent)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, var(--primary) 40%, transparent), color-mix(in oklab, var(--accent) 16%, transparent)) border-box;
	border: 1px solid transparent;
	color: #fff; font-weight: 800; letter-spacing: .02em;
	box-shadow: 0 10px 24px color-mix(in oklab, var(--primary) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
	text-transform: none;
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.news-dashboard .feed-badge .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
	animation: ping 1.6s ease-in-out infinite;
}
.news-dashboard .feed-badge:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in oklab, var(--primary) 28%, transparent); filter: brightness(1.02); }
.news-dashboard .feed-badge:active { transform: translateY(0); box-shadow: 0 8px 18px color-mix(in oklab, var(--primary) 20%, transparent); }
.news-dashboard .feed-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 22%, transparent); }
/* Paused state */
.news-dashboard .feed-badge[aria-pressed="true"] {
	filter: saturate(90%) brightness(0.98);
	background:
		linear-gradient(180deg, color-mix(in oklab, #64748b 22%, transparent), color-mix(in oklab, #64748b 10%, transparent)) padding-box,
		linear-gradient(135deg, color-mix(in oklab, #94a3b8 30%, transparent), color-mix(in oklab, #64748b 12%, transparent)) border-box;
}
.news-dashboard .feed-badge[aria-pressed="true"] .dot { background: #eab308; box-shadow: 0 0 0 4px rgba(234,179,8,0.18); }
.ticker-viewport { position: relative; height: 220px; overflow: hidden; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); contain: paint; isolation: isolate; -webkit-transform: translateZ(0); transform: translateZ(0); }
/* Disable gradient fades if flagged to avoid GPU flicker on some systems */
.ticker-viewport.no-fade::before,
.ticker-viewport.no-fade::after { display: none; }
.ticker-viewport::before, .ticker-viewport::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }
.ticker-viewport::before { top: 0; background: linear-gradient(180deg, var(--surface), transparent); }
.ticker-viewport::after { bottom: 0; background: linear-gradient(0deg, var(--surface), transparent); }
.ticker-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; display: grid; gap: 0; padding: 6px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }
.ticker-item { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px dashed var(--ring); }
.ticker-item:hover { background: color-mix(in oklab, var(--primary) 6%, var(--surface)); }
.ticker-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.ticker-item .badge { margin: 0; }
.ticker-item a { color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-item a:hover { text-decoration: underline; }
.ticker-item .date { color: var(--muted); font-size: 12px; }
.news-dashboard .icon-btn[aria-pressed="true"] { background: color-mix(in oklab, var(--danger) 18%, var(--bg)); border-color: color-mix(in oklab, var(--danger) 35%, var(--ring)); }
.news-dashboard .icon-btn.spin { animation: rotate 0.8s linear infinite; }
@keyframes rotate { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

/* Exam tag color themes */
.badge.tag-jee { background: rgba(14,165,233,0.18); border-color: rgba(14,165,233,0.45); color: #e0f2fe; }
.badge.tag-neet { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.45); color: #e7ffe7; }
.badge.tag-cuet { background: rgba(234,179,8,0.18); border-color: rgba(234,179,8,0.45); color: #fffbe6; }
.badge.tag-ugc-net { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.45); color: #eef2ff; }
.badge.tag-csir { background: rgba(244,63,94,0.18); border-color: rgba(244,63,94,0.45); color: #ffe9ed; }
.badge.tag-ncet { background: rgba(16,185,129,0.18); border-color: rgba(16,185,129,0.45); color: #e6fff5; }
.badge.tag-aiapget { background: rgba(45,212,191,0.18); border-color: rgba(45,212,191,0.45); color: #eafffb; }
.badge.tag-aissee { background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.45); color: #eaf2ff; }
.badge.tag-others { background: rgba(148,163,184,0.18); border-color: rgba(148,163,184,0.45); color: #eaeef5; }

/* Ticker dot colors align with tags */
.ticker-item .dot.tag-jee { background: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.20); }
.ticker-item .dot.tag-neet { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.20); }
.ticker-item .dot.tag-cuet { background: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,0.20); }
.ticker-item .dot.tag-ugc-net { background: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.20); }
.ticker-item .dot.tag-csir { background: #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,0.20); }
.ticker-item .dot.tag-ncet { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.20); }
.ticker-item .dot.tag-aiapget { background: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,0.20); }
.ticker-item .dot.tag-aissee { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.20); }
.ticker-item .dot.tag-others { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.20); }

/* Skeleton loading for blog grid */
.blog-grid.skeleton .card { position: relative; overflow: hidden; }
.blog-grid.skeleton .card > * { opacity: 0; }
.blog-grid.skeleton .card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0));
	animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

/* Accordion */
.accordion { display: grid; gap: 10px; }
.accordion .item { border: 1px solid var(--ring); border-radius: 12px; background: var(--surface); }
.accordion .head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; }
.accordion .body { padding: 0 14px 12px; display: none; color: var(--muted); }
.accordion .item.open .body { display: block; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.contact-card h2 { margin: 0 0 6px; }
.contact-list { list-style: none; padding: 0; margin: 0; color: var(--muted); display: grid; gap: 8px; }
.contact-list li { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 8px; }
/* Ensure first inline icon aligns even without a specific class */
.contact-list li > span:first-child { width: 22px; height: 22px; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.contact-list a { color: var(--text); }
.contact-meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Results section: bring heading higher */
#results { padding-top: 36px; }
/* Ensure anchored Contact section isn't hidden by sticky header */
#contact { scroll-margin-top: 64px; }

/* Enquiry form: modern layout and inputs */
#contact form.card .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}

#contact form.card .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#contact form.card .field.full {
	grid-column: 1 / -1;
}

#contact form.card .input-wrap {
	position: relative;
	display: block;
}

#contact form.card .input-wrap .fi {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
	pointer-events: none;
	font-size: 0.95rem;
}

#contact form.card .input-wrap input,
#contact form.card .input-wrap textarea {
	padding-left: 38px;
}

#contact form.card .input-wrap:focus-within .fi {
	opacity: 1;
}

#contact form.card .form-actions {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 680px) {
	#contact form.card .form-grid {
		grid-template-columns: 1fr;
	}
}

/* Footer */
.site-footer { 
	background: rgba(36,99,235,0.85); /* fallback */
	background: color-mix(in srgb, var(--primary) 55%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
					backdrop-filter: blur(10px) saturate(140%);
	border-top: 1px solid color-mix(in srgb, #ffffff 40%, var(--primary));
	padding: 28px 0; color: #fff; 
	box-shadow: 0 -8px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.08);
}
.site-footer .brand, .site-footer h4, .site-footer a, .site-footer .muted, .site-footer .tiny { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.site-footer .icon-btn, .site-footer .btn { background: color-mix(in srgb, #ffffff 16%, var(--primary)); border-color: color-mix(in srgb, #000 18%, var(--primary)); color: #fff; }
.site-footer .icon-btn:hover, .site-footer .btn:hover { filter: brightness(1.08); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items: start; }
.social-row { display: flex; gap: 8px; margin-top: 8px; }
.muted { color: var(--muted); }
.tiny { color: var(--muted); padding-top: 10px; font-size: 12px; }

/* Modals */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal-card { position: relative; width: min(680px, 92%); background: var(--card); border: 1px solid var(--ring); border-radius: 14px; box-shadow: var(--shadow); }
.modal-card.large { width: min(960px, 96%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ring); }
.modal-body { padding: 14px; display: grid; gap: 10px; }
.modal-body label { display: grid; gap: 6px; color: var(--muted); }
.modal-body input, .modal-body select, .modal-body textarea,
form input, form select, form textarea {
	background: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-text); padding: 10px; border-radius: 10px; width: 100%;
}
form input:focus, form select:focus, form textarea:focus { outline: 2px solid color-mix(in oklab, var(--primary) 30%, transparent); outline-offset: 2px; }

/* Toasts */
.toast-region { position: fixed; bottom: 16px; right: 16px; display: grid; gap: 8px; z-index: 120; }
.toast { background: var(--surface); border: 1px solid var(--ring); color: var(--text); padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow); }

/* Utils */
.header-inner, .admissions-inner, .contact-grid, .branch-search { --radius: 12px; }
label input, label select, label textarea { margin-top: 4px; }
ul { margin: 0; padding: 0 0 0 16px; }

/* Back to top */
.back-to-top { position: fixed; right: 16px; bottom: 16px; z-index: 120; border: 1px solid var(--ring); border-radius: 999px; width: 42px; height: 42px; display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 14%, var(--bg)); color: var(--text); box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, filter .2s ease; }
.back-to-top:hover { filter: brightness(1.05); }
.back-to-top.show { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 960px) {
	.hero-inner { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	/* Coaching System: 2 columns on tablets */
	#system .feature-grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
	#system .feature { text-align: left; }
}

/* About page refinements (scoped) */
.page-about main .container { width: min(1000px, 90%); }
.page-about main .section { padding: 56px 0; }
.page-about .section-head { margin-bottom: 22px; }
.page-about .section-head p { max-width: 760px; margin: 0 auto; }
.page-about .feature-grid, .page-about .card-grid { gap: 18px; }
.page-about .feature, .page-about .card { text-align: left; }
.page-about .feature h3, .page-about .card h3 { margin: 0 0 6px; }
.page-about .feature p, .page-about .card p { line-height: 1.55; }
.page-about .card, .page-about .feature { display: grid; align-content: start; min-height: 100%; }
.page-about .btn-row { justify-content: center; }
@media (max-width: 1024px) and (min-width: 801px) {
    .primary-nav ul { gap: 10px; }
    .primary-nav a, .nav-link { padding: 8px 10px; }
    .brand-logo { max-width: 360px; }
}
@media (max-width: 800px) {
	#navToggle { display: inline-grid; place-items: center; }
	.primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--primary); border-bottom: 1px solid color-mix(in oklab, #000 12%, var(--primary)); display: none; transform: translateY(-8px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
	.primary-nav.open { display: block; transform: translateY(0); opacity: 1; }
	.primary-nav ul { flex-direction: column; padding: 10px; }
		/* Show dropdown inline inside mobile menu */
	.has-dropdown { position: static; }
		/* Disable hover bridge on mobile */
	.has-dropdown::after { display: none; }
		.has-dropdown .dropdown { position: static; transform: none; opacity: 1; pointer-events: auto; border: 0; 
			background: color-mix(in srgb, var(--primary) 24%, transparent); box-shadow: none; padding: 4px 0 0 12px; min-width: 0; 
			-webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
		}
	.dropdown-link { color: #fff; }
	/* Ensure large, readable logo on tablets/phones */
	.brand-logo { height: 80px; max-width: 340px; }
	.header-ctas { display: none; }
	.branch-search { grid-template-columns: 1fr; }
	.stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; }
	.brand-logo { height: 72px; max-width: 300px; }
	/* Coaching System: single column on phones */
	#system .feature-grid { grid-template-columns: 1fr; }
	#system .feature { text-align: left; }
}
@media (max-width: 420px) {
	.brand .brand-text { display: none; }
	.brand .brand-sub { display: none; }
}

/* Desktop refinements */
@media (min-width: 961px) {
  /* Coaching System background visuals: show full image on desktop */
  #system .feature.bg-concept::before,
  #system .feature.bg-practice::before,
  #system .feature.bg-testing::before,
  #system .feature.bg-mentoring::before { background-size: contain; }
}