@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #10243e;
  --primary-2: #173b61;
  --secondary: #1e567c;
  --accent: #f2a619;
  --accent-dark: #bd7100;
  --text: #172231;
  --muted: #627083;
  --background: #ffffff;
  --surface: #f3f6f8;
  --border: #dce3e9;
  --success: #128c56;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(7, 26, 45, .11);
  --shadow-soft: 0 14px 38px rgba(7, 26, 45, .075);
  --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--text); background: var(--background); font-family: "Outfit", "Noto Sans Sinhala", system-ui, sans-serif; line-height: 1.65; overflow-x: hidden; }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: -100px; left: 20px; padding: 12px 18px; color: white; background: var(--primary); border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; backdrop-filter: blur(12px); }
.site-header.scrolled { border-color: var(--border); box-shadow: 0 8px 24px rgba(16,36,62,.07); }
.nav-wrap { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { min-width: 295px; display: flex; align-items: center; gap: 13px; line-height: 1.25; }
.brand-logo { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; background: white; border: 1px solid #ead8a8; border-radius: 8px; box-shadow: 0 5px 14px rgba(105,0,34,.13); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Noto Sans Sinhala", sans-serif; font-size: .84rem; }
.brand small { margin-top: 3px; color: var(--muted); font-family: "Noto Sans Sinhala", sans-serif; font-size: .66rem; }
.primary-nav { display: flex; align-items: center; gap: 4px; padding: 5px; background: #eef2f5; border: 1px solid var(--border); border-radius: 12px; box-shadow: inset 0 1px 0 white; font-size: .77rem; font-weight: 700; }
.primary-nav a { position: relative; padding: 10px 11px; color: #35465a; border-radius: 8px; transition: color .18s, background-color .18s, box-shadow .18s, transform .18s; }
.primary-nav a::after { display: none; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: white; background: var(--secondary); transform: translateY(-1px); }
.primary-nav a.active { color: var(--primary); background: var(--accent); box-shadow: 0 5px 13px rgba(189,113,0,.22); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); background: white; border-radius: 8px; padding: 11px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--primary); transition: transform .2s, opacity .2s; }

.hero { color: white; background: var(--primary); overflow: hidden; }
.hero-grid { min-height: 620px; display: grid; grid-template-columns: 1.14fr .86fr; align-items: center; gap: 70px; padding-block: 76px; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.night-launch-badge { width: fit-content; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 12px; color: #ffe1a4; background: rgba(242,166,25,.10); border: 1px solid rgba(242,166,25,.42); border-radius: 100px; font-size: .72rem; font-weight: 700; }
.night-launch-badge span { padding: 2px 6px; color: var(--primary); background: var(--accent); border-radius: 100px; font-size: .58rem; letter-spacing: .08em; }
.eyebrow, .kicker { color: var(--accent-dark); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero .eyebrow { color: #e9c273; }
.eyebrow span { display: inline-block; margin-right: 10px; padding: 5px 9px; color: var(--primary); background: var(--accent); border-radius: 4px; letter-spacing: .08em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin: 22px 0 18px; font-size: clamp(3rem, 5.7vw, 5.25rem); line-height: .98; letter-spacing: -.045em; }
h1 span { display: block; color: var(--accent); }
.hero-institution { margin-bottom: 25px; color: #c9d3df; font-family: "Noto Sans Sinhala", sans-serif; font-size: 1.02rem; line-height: 1.75; }
.hero-institution strong { color: white; font-weight: 600; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }
.hero-facts span { padding: 7px 12px; color: #eaf0f6; border: 1px solid rgba(255,255,255,.24); border-radius: 100px; font-size: .78rem; font-weight: 600; }
.button-row { display: flex; flex-wrap: wrap; gap: 11px; }
.btn { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border: 1px solid transparent; border-radius: 9px; font-size: .89rem; font-weight: 700; transition: transform .18s, background-color .18s, border-color .18s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--primary); background: var(--accent); }
.btn-primary:hover { background: #ffc14b; }
.btn-outline { color: white; border-color: rgba(255,255,255,.5); }
.btn-outline:hover { background: rgba(255,255,255,.08); }
.btn-whatsapp { color: white; background: var(--success); }
.btn-whatsapp:hover { background: #0d7548; }
.btn-light { color: var(--primary); background: white; }
.btn-outline-light { color: white; border-color: rgba(255,255,255,.45); }

.hero-visual-column { min-width: 0; }
.hero-logo-strip { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(4, 78px); justify-content: center; gap: 14px; margin: 0 auto -28px; transform: translateY(-55px); }
.hero-logo-strip span { width: 78px; height: 78px; display: grid; place-items: center; overflow: hidden; padding: 7px; background: #fff; border: 1px solid rgba(242,166,25,.5); border-radius: 13px; box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(16,36,62,.06); }
.hero-logo-strip img { width: 100%; height: 100%; object-fit: contain; }
.tech-visual { position: relative; min-width: 0; min-height: 500px; display: grid; place-items: center; }
.course-map { position: absolute; top: 15px; left: 50%; width: 500px; height: 470px; filter: drop-shadow(0 28px 45px rgba(0,0,0,.22)); transform: translateX(-50%); }
.map-orbit { position: absolute; z-index: 0; border: 1px solid rgba(98,216,255,.11); border-radius: 50%; }
.orbit-one { inset: 53px 68px; animation: mapSpin 28s linear infinite; }
.orbit-one::before, .orbit-one::after { content: ""; position: absolute; width: 8px; height: 8px; background: #62d8ff; border-radius: 50%; box-shadow: 0 0 16px #62d8ff; }
.orbit-one::before { top: 16px; left: 70px; }
.orbit-one::after { right: 38px; bottom: 24px; }
.orbit-two { inset: 105px 122px; border-color: rgba(242,166,25,.16); animation: mapSpinReverse 19s linear infinite; }
.map-links { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-links path { fill: none; stroke: url(#course-line); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 10; animation: dataFlow 2.2s linear infinite; }
.map-links path:nth-of-type(2n) { animation-duration: 2.8s; animation-direction: reverse; }
.map-links path:nth-of-type(3n) { animation-duration: 1.9s; }
.map-core { position: absolute; z-index: 3; top: 135px; left: 145px; width: 210px; height: 190px; overflow: hidden; padding: 14px; background: linear-gradient(145deg, rgba(27,76,113,.98), rgba(8,28,47,.98)); border: 1px solid rgba(255,255,255,.24); border-radius: 20px; box-shadow: inset 0 0 30px rgba(98,216,255,.06), 0 22px 45px rgba(0,0,0,.3); animation: coreFloat 5s ease-in-out infinite; }
.map-core::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(242,166,25,.15); border-radius: 15px; pointer-events: none; }
.core-topline { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #7f9aae; font-size: .44rem; font-weight: 800; letter-spacing: .11em; }
.core-topline span { color: var(--accent); }
.core-topline i { width: 5px; height: 5px; background: #39dc82; border-radius: 50%; box-shadow: 0 0 9px #39dc82; animation: statusPulse 1.5s ease-in-out infinite; }
.core-topline small { margin-left: auto; font-size: inherit; }
.core-board { position: relative; height: 103px; background-color: #102f4b; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.cpu-core { position: absolute; top: 16px; left: 54px; width: 74px; height: 68px; display: grid; place-content: center; text-align: center; background: #091d30; border: 1px solid var(--accent); border-radius: 7px; box-shadow: 0 0 20px rgba(242,166,25,.12); }
.cpu-core::before { content: ""; position: absolute; inset: -5px; border: 1px dashed rgba(242,166,25,.28); border-radius: 9px; }
.cpu-core small, .cpu-core strong, .cpu-core span { display: block; }
.cpu-core small { color: #6f8ba0; font-size: .38rem; letter-spacing: .12em; }
.cpu-core strong { color: white; font-size: 1rem; line-height: 1.15; }
.cpu-core span { color: var(--accent); font-size: .38rem; }
.ram-slots { position: absolute; top: 14px; left: 13px; display: flex; gap: 3px; }
.ram-slots i { width: 6px; height: 61px; background: linear-gradient(#41ba7a 20%, #183d31 20% 32%, #41ba7a 32% 50%, #183d31 50% 62%, #41ba7a 62% 80%, #183d31 80%); border-radius: 2px; }
.ram-slots span, .core-ports span { position: absolute; color: #6d889d; font-size: .38rem; font-weight: 800; letter-spacing: .08em; }
.ram-slots span { top: 65px; left: 3px; }
.core-ports { position: absolute; top: 19px; right: 11px; display: grid; gap: 5px; }
.core-ports b { width: 25px; height: 15px; display: block; background: #071522; border: 1px solid #527087; border-radius: 2px; }
.core-ports b::after { content: ""; width: 11px; height: 5px; display: block; margin: 4px auto; background: #d09a39; }
.core-ports span { top: 59px; left: 4px; }
.core-stack { position: relative; display: flex; gap: 5px; margin-top: 9px; }
.core-stack span { flex: 1; padding: 5px 3px; color: #a9c1d3; text-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; font-size: .38rem; font-weight: 700; }
.core-scan { position: absolute; z-index: 4; top: -20%; bottom: -20%; width: 35%; background: linear-gradient(90deg, transparent, rgba(98,216,255,.09), transparent); transform: skewX(-15deg); animation: coreScan 4.8s ease-in-out infinite; pointer-events: none; }
.course-node { position: absolute; z-index: 4; width: 112px; min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 9px; color: white; background: rgba(13,42,65,.92); border: 1px solid rgba(255,255,255,.18); border-radius: 11px; box-shadow: 0 12px 25px rgba(0,0,0,.22); backdrop-filter: blur(8px); animation: nodeFloat 4s ease-in-out infinite; }
.course-node::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit; animation: nodePulse 3s ease-in-out infinite; }
.node-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--primary); background: var(--accent); border-radius: 8px; font-size: .47rem; font-weight: 900; letter-spacing: -.02em; }
.course-node strong, .course-node small { display: block; white-space: nowrap; line-height: 1.2; }
.course-node strong { font-size: .56rem; }
.course-node small { margin-top: 3px; color: #8fa8bb; font-size: .38rem; }
.cloud-icon { color: white; background: #1473e6; border-radius: 14px 14px 7px 7px; }
.shield-icon { color: white; background: #8157d9; clip-path: polygon(50% 0, 92% 18%, 84% 74%, 50% 100%, 16% 74%, 8% 18%); border-radius: 0; }
.camera-icon { position: relative; color: #10243e; background: #62d8ff; }
.camera-icon::after { content: ""; position: absolute; right: -5px; width: 7px; height: 11px; background: #62d8ff; clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%); }
.ai-icon { color: white; background: linear-gradient(135deg, #d24ce2, #5e64ef); }
.node-hardware { top: 25px; left: 10px; }
.node-cloud { top: 25px; right: 10px; animation-delay: -.8s; }
.node-network { top: 185px; left: 0; animation-delay: -1.5s; }
.node-security { top: 185px; right: 0; animation-delay: -2.2s; }
.node-repair { bottom: 18px; left: 25px; animation-delay: -2.8s; }
.node-cctv { right: 25px; bottom: 18px; animation-delay: -3.4s; }
.node-ai { bottom: 21px; left: 194px; animation-delay: -1.1s; }
.map-practical { position: absolute; z-index: 5; top: 314px; left: 181px; width: 138px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; color: #10243e; background: var(--accent); border-radius: 100px; box-shadow: 0 7px 18px rgba(0,0,0,.24); }
.map-practical strong { font-size: .72rem; }
.map-practical span { font-size: .48rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
@keyframes dataFlow { to { stroke-dashoffset: -26; } }
@keyframes mapSpin { to { transform: rotate(360deg); } }
@keyframes mapSpinReverse { to { transform: rotate(-360deg); } }
@keyframes coreFloat { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
@keyframes nodeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nodePulse { 0%, 100% { border-color: transparent; box-shadow: 0 0 0 0 rgba(98,216,255,0); } 50% { border-color: rgba(98,216,255,.18); box-shadow: 0 0 0 5px rgba(98,216,255,.025); } }
@keyframes statusPulse { 50% { opacity: .38; } }
@keyframes coreScan { 0%, 18% { left: -45%; } 65%, 100% { left: 115%; } }
.hero-strip { position: relative; background: linear-gradient(90deg, #081a2d, #102f4c 55%, #0a2137); border-top: 1px solid rgba(242,166,25,.28); box-shadow: inset 0 12px 30px rgba(0,0,0,.18); }
.hero-strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, rgba(242,166,25,.08), transparent 48%); }
.priority-grid { position: relative; min-height: 118px; display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); align-items: stretch; gap: 12px; padding-block: 14px; }
.priority-grid div { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 14px 22px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--accent); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.13); }
.priority-grid div:first-child { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.12); }
.priority-grid small, .priority-grid strong { display: block; }
.priority-grid small { color: #f5c667; font-size: .67rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.priority-grid strong { margin-top: 4px; color: white; font-size: 1rem; line-height: 1.3; text-shadow: 0 1px 10px rgba(0,0,0,.25); }

.night-class { position: relative; padding: 110px 0; overflow: hidden; color: white; background: linear-gradient(145deg, #06121f 0%, #071a2c 48%, #061523 100%); }
.night-class::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 8%, rgba(45,121,174,.30), transparent 27%), radial-gradient(circle at 12% 45%, rgba(242,166,25,.075), transparent 25%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: auto, auto, 42px 42px, 42px 42px; }
.night-shell { position: relative; z-index: 2; }
.night-orbit { position: absolute; border: 1px solid rgba(242,166,25,.09); border-radius: 50%; pointer-events: none; }
.night-orbit-one { top: -240px; right: -140px; width: 700px; height: 700px; }
.night-orbit-two { top: -130px; right: -30px; width: 480px; height: 480px; }
.night-intro-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 80px; }
.night-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.night-badges span { padding: 6px 10px; color: #d9e6f0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 5px; font-size: .66rem; font-weight: 800; letter-spacing: .11em; }
.night-badges span:first-child { color: #171b1e; background: var(--accent); border-color: var(--accent); }
.night-promo { margin-bottom: 8px; color: var(--accent); font-family: "Noto Sans Sinhala", sans-serif; font-size: 1rem; font-weight: 700; }
.night-copy h2 { max-width: 780px; margin-bottom: 15px; font-family: "Noto Sans Sinhala", "Outfit", sans-serif; font-size: clamp(2.2rem, 4.7vw, 4.35rem); line-height: 1.18; letter-spacing: -.035em; }
.night-copy h2 em { color: var(--accent); font-family: "Outfit", sans-serif; font-style: normal; }
.night-copy > h3 { margin-bottom: 18px; color: #dbe8f2; font-size: 1.22rem; }
.night-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 23px; }
.night-highlights span { padding: 6px 10px; color: #b9c9d8; border-left: 2px solid var(--accent); background: rgba(255,255,255,.045); font-size: .72rem; font-weight: 700; }
.night-copy > p { max-width: 760px; color: #9eb1c3; font-family: "Noto Sans Sinhala", sans-serif; font-size: .9rem; }
.night-copy .night-lead { color: white; font-size: 1.04rem; font-weight: 600; }
.night-actions { margin-top: 29px; }
.btn-night { color: #101b24; background: var(--accent); }
.btn-night:hover { background: #ffc14b; }
.night-date-card { position: relative; padding: 35px; text-align: center; background: #102a42; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.night-date-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(242,166,25,.18); border-radius: 11px; pointer-events: none; }
.date-card-label { position: relative; color: #c3d2df; font-family: "Noto Sans Sinhala", sans-serif; font-size: .8rem; }
.calendar-date { position: relative; width: 156px; height: 154px; display: grid; grid-template-rows: 48px 1fr 27px; align-items: center; margin: 28px auto 22px; overflow: visible; color: #10243e; background: #fff; border-radius: 18px; box-shadow: 0 15px 30px rgba(0,0,0,.3), inset 0 -1px 0 rgba(16,36,62,.08); text-decoration: none; }
.calendar-date::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 48px; background: #ef2027; border-radius: 18px 18px 0 0; }
.calendar-date small, .calendar-date strong, .calendar-date span { position: relative; z-index: 1; display: block; line-height: 1; }
.calendar-date small { align-self: end; padding-bottom: 12px; color: #fff; font-size: .83rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.calendar-date strong { align-self: center; margin-top: 7px; font-size: 4rem; font-weight: 800; letter-spacing: -.05em; }
.calendar-date span { align-self: start; color: #627083; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.calendar-ring { position: absolute; z-index: 2; top: -16px; width: 9px; height: 35px; background: #173b61; border: 2px solid rgba(255,255,255,.18); border-radius: 8px; box-shadow: 0 3px 3px rgba(0,0,0,.28); }
.calendar-ring::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 15px; height: 6px; background: rgba(16,36,62,.18); border-radius: 50%; transform: translateX(-50%); }
.calendar-ring-left { left: 28px; }
.calendar-ring-right { right: 28px; }
.night-date-card h3 { position: relative; margin-bottom: 6px; font-size: 1.35rem; }
.night-date-card > p { position: relative; color: #9cb0c2; font-family: "Noto Sans Sinhala", sans-serif; font-size: .76rem; }
.night-time { position: relative; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.night-time small, .night-time strong, .night-time span { display: block; }
.night-time small { color: var(--accent); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; }
.night-time strong { margin: 4px 0; font-size: 1.18rem; }
.night-time span { color: #9cb0c2; font-family: "Noto Sans Sinhala", sans-serif; font-size: .7rem; }
.night-summary { margin-top: 75px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border: 1px solid rgba(255,255,255,.13); border-radius: 20px; box-shadow: 0 25px 65px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); }
.night-summary div { position: relative; overflow: hidden; min-height: 108px; padding: 25px 25px 22px 67px; background: linear-gradient(135deg, rgba(18,54,82,.95), rgba(9,32,51,.95)); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.night-summary div::before { content: "01"; position: absolute; top: 25px; left: 20px; width: 31px; height: 31px; display: grid; place-items: center; color: #16283b; background: linear-gradient(135deg, #ffc34e, var(--accent)); border-radius: 9px; font-size: .57rem; font-weight: 900; box-shadow: 0 8px 18px rgba(242,166,25,.18); }
.night-summary div::after { content: ""; position: absolute; right: -30px; bottom: -45px; width: 115px; height: 115px; background: radial-gradient(circle, rgba(98,216,255,.10), transparent 68%); border-radius: 50%; }
.night-summary div:nth-child(2)::before { content: "02"; }
.night-summary div:nth-child(3)::before { content: "03"; }
.night-summary div:nth-child(4)::before { content: "04"; }
.night-summary div:nth-child(5)::before { content: "05"; }
.night-summary div:nth-child(6)::before { content: "06"; }
.night-summary div:nth-child(7)::before { content: "07"; }
.night-summary div:nth-child(8)::before { content: "08"; }
.night-summary div:nth-child(9)::before { content: "09"; }
.night-summary div:hover { z-index: 1; border-color: rgba(242,166,25,.45); transform: translateY(-3px); box-shadow: 0 15px 28px rgba(0,0,0,.22); }
.night-summary small, .night-summary strong { display: block; }
.night-summary small { color: #7f9bb0; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.night-summary strong { position: relative; z-index: 1; margin-top: 5px; color: #f8fbfd; font-size: 1rem; line-height: 1.35; }
.night-schedule-panel { position: relative; overflow: hidden; margin-top: 28px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 45px; align-items: center; padding: 44px; background: linear-gradient(135deg, rgba(17,54,83,.98), rgba(8,31,50,.98)); border: 1px solid rgba(98,216,255,.16); border-radius: 19px; box-shadow: 0 25px 60px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04); }
.night-schedule-panel::before { content: ""; position: absolute; top: -100px; left: -75px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(242,166,25,.12), transparent 68%); border-radius: 50%; }
.night-schedule-panel::after { content: "WEEKLY"; position: absolute; right: 22px; bottom: -30px; color: rgba(255,255,255,.022); font-size: 6.5rem; font-weight: 900; letter-spacing: -.04em; pointer-events: none; }
.night-schedule-panel > * { position: relative; z-index: 1; }
.night-subheading > span { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.night-subheading h3 { margin: 7px 0 9px; font-family: "Noto Sans Sinhala", "Outfit", sans-serif; font-size: 1.55rem; }
.night-subheading p { margin: 0; color: #8ea3b6; font-family: "Noto Sans Sinhala", sans-serif; font-size: .82rem; }
.night-subheading.centered { margin-bottom: 32px; text-align: center; }
.schedule-days { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.schedule-days article { position: relative; overflow: hidden; padding: 27px 24px; color: #10243e; background: linear-gradient(145deg, #ffc24a, #f2a619 72%); border: 1px solid rgba(255,255,255,.35); border-radius: 13px; box-shadow: 0 15px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .2s ease, box-shadow .2s ease; }
.schedule-days article::after { content: ""; position: absolute; top: -55px; right: -45px; width: 130px; height: 130px; background: rgba(255,255,255,.14); border-radius: 50%; }
.schedule-days article:hover { transform: translateY(-4px); box-shadow: 0 20px 35px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.45); }
.schedule-days small, .schedule-days strong, .schedule-days span { display: block; }
.schedule-days small { opacity: .64; font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.schedule-days strong { margin: 4px 0 7px; font-size: 1.52rem; }
.schedule-days span { font-size: .76rem; font-weight: 700; }
.night-details-grid { margin-top: 28px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.night-course-card, .night-registration-card { padding: 35px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.11); border-radius: 13px; }
.night-course-card dl { margin: 26px 0 0; }
.night-course-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
.night-course-card dt { color: #8ea3b6; font-family: "Noto Sans Sinhala", sans-serif; font-size: .73rem; }
.night-course-card dd { margin: 0; text-align: right; font-size: .85rem; font-weight: 700; }
.night-course-card .night-fee dd { color: var(--accent); font-size: 1.15rem; }
.night-installment { margin-top: 13px; padding: 20px; background: #102a42; border-radius: 8px; }
.night-installment small, .night-installment strong { display: block; }
.night-installment small { color: #7d96aa; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.night-installment strong { margin: 3px 0 6px; font-size: 1.15rem; }
.night-installment i { color: var(--accent); font-style: normal; }
.night-installment p, .night-payment { margin: 0; color: #91a7b9; font-family: "Noto Sans Sinhala", sans-serif; font-size: .72rem; }
.night-payment { margin-top: 16px; padding-left: 13px; border-left: 2px solid var(--accent); }
.night-steps { margin: 25px 0 0; padding: 0; list-style: none; }
.night-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 15px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.1); }
.night-steps li > span { width: 34px; height: 34px; display: grid; place-items: center; color: #19293a; background: var(--accent); border-radius: 50%; font-size: .66rem; font-weight: 800; }
.night-steps small, .night-steps strong { display: block; }
.night-steps small { color: #688196; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.night-steps strong { margin: 2px 0 3px; font-family: "Noto Sans Sinhala", sans-serif; font-size: .8rem; }
.night-steps p { margin: 0; color: #859caf; font-family: "Noto Sans Sinhala", sans-serif; font-size: .7rem; }
.night-curriculum { position: relative; margin-top: 95px; padding: 45px 34px 34px; background: linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.17); }
.night-curriculum::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242,166,25,.85), transparent); }
.night-curriculum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; counter-reset: curriculum-card; }
.night-curriculum-grid article { position: relative; overflow: hidden; min-height: 235px; padding: 31px 27px; background: linear-gradient(145deg, rgba(17,54,83,.98), rgba(8,31,49,.98)); border: 1px solid rgba(255,255,255,.11); border-radius: 14px; box-shadow: 0 16px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.035); counter-increment: curriculum-card; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.night-curriculum-grid article::before { content: "0" counter(curriculum-card); position: absolute; top: -12px; right: 10px; color: rgba(255,255,255,.035); font-size: 6.6rem; font-weight: 900; line-height: 1; }
.night-curriculum-grid article::after { content: ""; position: absolute; top: 0; left: 0; width: 68px; height: 3px; background: linear-gradient(90deg, var(--accent), #ffd878); }
.night-curriculum-grid article:hover { border-color: rgba(242,166,25,.38); transform: translateY(-5px); box-shadow: 0 24px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); }
.night-curriculum-grid .night-curriculum-wide { grid-column: span 3; }
.night-curriculum-grid h4 { position: relative; z-index: 1; max-width: 82%; margin: 0 0 22px; color: #f8fbfd; font-size: 1.02rem; }
.night-curriculum-grid h4::before { content: ""; width: 32px; height: 3px; display: block; margin-bottom: 15px; background: var(--accent); border-radius: 10px; box-shadow: 0 0 14px rgba(242,166,25,.35); }
.night-curriculum-grid ol { margin: 0; padding-left: 28px; }
.night-curriculum-grid li { position: relative; z-index: 1; padding: 9px 0 9px 5px; color: #a8bccb; border-top: 1px solid rgba(255,255,255,.075); font-size: .75rem; line-height: 1.55; }
.night-curriculum-grid li::marker { color: var(--accent); font-weight: 700; }
.night-curriculum-wide ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 25px; }
.night-certificate { margin-top: 40px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; padding: 32px; color: #182738; background: var(--accent); border-radius: 13px; }
.certificate-mark { width: 55px; height: 55px; display: grid; place-items: center; background: #13273b; color: var(--accent); border-radius: 50%; font-size: 1.4rem; font-weight: 800; }
.night-certificate small { font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .65; }
.night-certificate h3 { margin: 4px 0; font-family: "Noto Sans Sinhala", sans-serif; font-size: 1.15rem; }
.night-certificate p { max-width: 660px; margin: 0; font-family: "Noto Sans Sinhala", sans-serif; font-size: .76rem; }
.night-contact { min-width: 210px; padding-left: 25px; border-left: 1px solid rgba(15,30,45,.22); }
.night-contact > span, .night-contact > strong { display: block; }
.night-contact > span { font-family: "Noto Sans Sinhala", sans-serif; font-size: .7rem; }
.night-contact > strong { margin-bottom: 9px; font-size: 1.15rem; }
.night-contact .btn { min-height: 38px; padding: 7px 12px; font-size: .72rem; }
.night-contact .btn-night { color: white; background: #13273b; }

.section { padding: 100px 0; }
.section-tint { background: radial-gradient(circle at 50% 0, rgba(242,166,25,.065), transparent 28%), linear-gradient(180deg, #f7f9fb, #eef3f6); }
.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2 { margin: 9px 0 12px; color: var(--primary); font-family: "Noto Sans Sinhala", "Outfit", sans-serif; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.25; letter-spacing: -.025em; }
.section-heading p { margin-bottom: 0; color: var(--muted); font-family: "Noto Sans Sinhala", "Outfit", sans-serif; }
.section-heading.light h2, .section-heading.light p { color: white; }
.section-heading.light p { opacity: .72; }

.gallery-section { position: relative; overflow: hidden; background: #f4f7f9; }
.gallery-section::before { content: ""; position: absolute; top: -220px; right: -150px; width: 520px; height: 520px; pointer-events: none; background: radial-gradient(circle, rgba(242,166,25,.13), transparent 67%); border-radius: 50%; }
.gallery-section .container { position: relative; }
.gallery-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.gallery-heading-row .section-heading { margin-bottom: 36px; }
.gallery-count { min-width: 170px; display: flex; align-items: center; gap: 15px; margin-bottom: 36px; padding: 12px 16px; color: white; background: var(--primary); border-radius: 11px; box-shadow: 0 14px 30px rgba(16,36,62,.15); }
.gallery-count strong { color: var(--accent); font-size: 2rem; line-height: 1; }
.gallery-count > span { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); font-size: .68rem; font-weight: 700; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
.gallery-count > span span { color: inherit; font: inherit; letter-spacing: inherit; }
.album-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; gap: 20px; }
.album-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; color: var(--text); background: white; border: 1px solid #d7e0e7; border-radius: 7px; cursor: pointer; text-align: left; box-shadow: 0 8px 24px rgba(16,36,62,.055); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.album-card:hover, .album-card:focus-visible { border-color: rgba(30,86,124,.55); transform: translateY(-5px); box-shadow: 0 20px 42px rgba(16,36,62,.13); }
.album-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(242,166,25,.2), 0 20px 42px rgba(16,36,62,.13); }
.album-mosaic { height: 245px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; padding: 7px; background: #e9eff3; border-radius: 5px; }
.album-mosaic > * { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; object-fit: cover; background: #cbd6df; border-radius: 3px; }
.album-mosaic > *:first-child { grid-column: span 2; grid-row: span 2; }
.album-card-copy { flex: 1; display: flex; flex-direction: column; padding: 17px 7px 5px; }
.album-card-copy small { margin-bottom: 6px; color: var(--accent-dark); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.album-card-copy strong { color: #101d2d; font-size: 1.12rem; line-height: 1.22; }
.album-card-copy > span:not(.album-card-meta) { margin-top: 9px; color: #556579; font-size: .76rem; line-height: 1.62; }
.album-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; color: var(--primary); font-size: .68rem; }
.album-card-meta b { text-transform: uppercase; letter-spacing: .06em; }
.album-card-meta i { color: var(--secondary); font-style: normal; font-weight: 700; }
.album-panel[hidden] { display: none; }
.album-panel { scroll-margin-top: 105px; margin-top: 28px; padding: 28px; background: white; border: 1px solid #d7e0e7; border-radius: 12px; box-shadow: 0 18px 45px rgba(16,36,62,.08); }
.album-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.album-panel-heading span { color: var(--accent-dark); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.album-panel-heading h3 { margin: 3px 0 0; color: var(--primary); font-size: 1.65rem; line-height: 1.2; }
.album-panel-heading p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.album-panel-heading p span { margin-right: 4px; color: var(--primary); font-size: inherit; letter-spacing: 0; }
.album-panel-actions { display: flex; align-items: center; gap: 14px; }
.album-close { padding: 7px 10px; color: var(--primary); background: #eef2f5; border: 1px solid #d5dee5; border-radius: 6px; cursor: pointer; font-size: .7rem; font-weight: 700; }
.album-close:hover { background: #e2e8ed; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.photo-item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; background: #dfe6eb; border-radius: 12px; box-shadow: 0 10px 25px rgba(16,36,62,.10); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.photo-item span { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 8px 10px; color: white; background: rgba(7,21,35,.78); border-radius: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; opacity: 0; transform: translateY(5px); transition: opacity .22s ease, transform .22s ease; backdrop-filter: blur(7px); }
.photo-item:hover img, .photo-item:focus-visible img { transform: scale(1.035); filter: brightness(.88); }
.photo-item:hover span, .photo-item:focus-visible span { opacity: 1; transform: none; }
.need-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.need-grid article { position: relative; overflow: hidden; min-height: 164px; padding: 25px; background: linear-gradient(145deg, #fff, #f9fbfc); border: 1px solid #d7e0e7; border-radius: 15px; box-shadow: 0 12px 30px rgba(16,36,62,.045), inset 0 1px 0 white; transition: border-color .22s, transform .22s, box-shadow .22s; }
.need-grid article::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--accent), #ffd47c); transform: scaleX(.22); transform-origin: left; transition: transform .25s ease; }
.need-grid article::after { content: "↗"; position: absolute; right: 18px; bottom: 13px; color: rgba(16,36,62,.10); font-size: 1.4rem; font-weight: 700; transition: color .22s, transform .22s; }
.need-grid article:hover { border-color: rgba(242,166,25,.65); transform: translateY(-5px); box-shadow: 0 20px 42px rgba(16,36,62,.11); }
.need-grid article:hover::before { transform: scaleX(1); }
.need-grid article:hover::after { color: var(--accent-dark); transform: translate(2px,-2px); }
.need-grid article:last-child { grid-column: span 2; }
.need-grid .need-icon { position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: var(--primary); background: linear-gradient(145deg, #fff9eb, #ffd77e); border: 1px solid #f5c35d; border-radius: 14px; box-shadow: 0 10px 24px rgba(189,113,0,.16), inset 0 1px 0 rgba(255,255,255,.8); transition: color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease; }
.need-grid .need-icon::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(242,166,25,.16); border-radius: 18px; }
.need-grid .need-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.need-grid article:hover .need-icon { color: white; background: linear-gradient(145deg, #f5b536, #d98200); transform: translateY(-2px) rotate(-2deg); box-shadow: 0 13px 27px rgba(189,113,0,.28), 0 0 0 6px rgba(242,166,25,.08); }
.need-grid p { position: relative; z-index: 1; margin: 17px 0 0; padding-right: 18px; font-family: "Noto Sans Sinhala", sans-serif; font-size: .94rem; font-weight: 650; line-height: 1.65; }
.eligibility-card { position: relative; overflow: hidden; margin-top: 62px; display: grid; grid-template-columns: 230px 1fr; align-items: center; gap: 45px; padding: 45px; color: white; background: linear-gradient(135deg, #10243e, #173f65 65%, #102b48); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: 0 26px 60px rgba(16,36,62,.20); }
.eligibility-card::before { content: ""; position: absolute; top: -130px; right: -80px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(242,166,25,.16), transparent 66%); border-radius: 50%; }
.eligibility-card::after { content: "ELIGIBILITY"; position: absolute; right: 28px; bottom: -25px; color: rgba(255,255,255,.027); font-size: 5rem; font-weight: 900; pointer-events: none; }
.eligibility-card > * { position: relative; z-index: 1; }
.age-block { min-height: 155px; display: grid; place-content: center; text-align: center; background: linear-gradient(145deg, rgba(242,166,25,.12), rgba(255,255,255,.025)); border: 1px solid rgba(242,166,25,.5); border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 35px rgba(0,0,0,.16); }
.age-block small, .age-block strong { display: block; }
.age-block small { color: var(--accent); font-family: "Noto Sans Sinhala", sans-serif; }
.age-block strong { margin-top: 4px; color: white; font-size: 2.65rem; line-height: 1.2; text-shadow: 0 5px 20px rgba(0,0,0,.28); }
.eligibility-card .kicker { color: var(--accent); }
.eligibility-card h3 { margin: 8px 0; font-family: "Noto Sans Sinhala", sans-serif; font-size: 1.55rem; }
.eligibility-card p { margin: 0; color: #cad5e0; font-family: "Noto Sans Sinhala", sans-serif; }

.split-heading { max-width: none; display: grid; grid-template-columns: 1.5fr .5fr; align-items: end; gap: 60px; }
.split-heading h2 { max-width: 820px; }
.split-heading p { padding-left: 22px; border-left: 3px solid var(--accent); }
.batch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.batch-card { position: relative; overflow: hidden; padding: 30px; background: linear-gradient(145deg, #fff, #f7fafc); border: 1px solid #d5e0e7; border-radius: 16px; box-shadow: 0 14px 34px rgba(16,36,62,.065); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.batch-card:hover { border-color: rgba(242,166,25,.55); transform: translateY(-5px); box-shadow: 0 22px 45px rgba(16,36,62,.12); }
.batch-card::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background: var(--accent); transition: width .25s; }
.batch-card:hover::after { width: 100%; }
.batch-number { position: absolute; top: 11px; right: 18px; color: #e9eff3; font-size: 4.9rem; font-weight: 900; line-height: 1; }
.batch-card h3 { position: relative; margin: 0 0 22px; color: var(--secondary); font-family: "Noto Sans Sinhala", sans-serif; font-size: .9rem; }
.batch-date-row { position: relative; display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 15px; }
.batch-calendar { position: relative; width: 78px; height: 84px; display: grid; grid-template-rows: 26px 1fr 16px; align-items: center; color: var(--primary); background: #fff; border: 1px solid #d9e2e9; border-radius: 10px; box-shadow: 0 9px 20px rgba(16,36,62,.14); text-align: center; text-decoration: none; }
.batch-calendar::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; height: 26px; background: #ef2027; border-radius: 9px 9px 0 0; }
.batch-calendar::after { content: ""; position: absolute; z-index: 2; top: -8px; left: 16px; width: 5px; height: 18px; background: #173b61; border-radius: 5px; box-shadow: 41px 0 #173b61; }
.batch-calendar small, .batch-calendar strong, .batch-calendar span { position: relative; z-index: 1; display: block; line-height: 1; }
.batch-calendar small { align-self: end; padding-bottom: 7px; color: #fff; font-size: .52rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.batch-calendar strong { align-self: center; margin-top: 3px; font-size: 2.15rem; line-height: .9; }
.batch-calendar span { align-self: start; color: var(--muted); font-size: .46rem; font-weight: 800; letter-spacing: .12em; }
.batch-card .date { position: relative; margin-bottom: 7px; color: var(--primary); font-family: "Noto Sans Sinhala", sans-serif; font-size: .9rem; font-weight: 700; line-height: 1.55; }
.batch-card .time { position: relative; margin: 0; color: var(--muted); font-family: "Noto Sans Sinhala", sans-serif; font-size: .82rem; }

.registration-section { color: white; background: var(--primary-2); }
.registration-section .kicker { color: var(--accent); }
.steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; list-style: none; counter-reset: steps; }
.steps li { position: relative; overflow: hidden; display: flex; gap: 18px; padding: 27px 23px; background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.17); border-top: 3px solid var(--accent); border-radius: 14px; box-shadow: 0 15px 30px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.steps li::after { content: ""; position: absolute; right: -35px; bottom: -55px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(242,166,25,.10), transparent 68%); border-radius: 50%; }
.steps li:hover { border-color: rgba(242,166,25,.68); transform: translateY(-4px); box-shadow: 0 20px 38px rgba(0,0,0,.15), 0 0 0 1px rgba(242,166,25,.12); }
.steps li + li { border-left: 1px solid rgba(255,255,255,.14); }
.steps li > .step-icon { position: relative; z-index: 1; flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; color: #17283a; background: linear-gradient(145deg, #ffc144, var(--accent)); border: 1px solid #ffd77d; border-radius: 14px; box-shadow: 0 9px 22px rgba(242,166,25,.25), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .22s ease, box-shadow .22s ease; }
.steps li:hover > .step-icon { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(242,166,25,.36), inset 0 1px 0 rgba(255,255,255,.6); }
.step-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.steps li > div { position: relative; z-index: 1; }
.steps small { color: #8299ae; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.steps h3 { margin: 3px 0 9px; font-family: "Noto Sans Sinhala", sans-serif; font-size: 1rem; }
.steps p { margin: 0; color: #becbd8; font-family: "Noto Sans Sinhala", sans-serif; font-size: .8rem; }
.steps strong { color: white; }

.details-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 85px; align-items: start; }
.details-list { margin: 0; border-top: 1px solid var(--border); }
.details-list div { display: grid; grid-template-columns: 145px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.details-list dt { color: var(--muted); font-size: .82rem; }
.details-list dd { margin: 0; color: var(--primary); font-weight: 700; }
.fee-panel { overflow: hidden; color: white; background: linear-gradient(145deg, #10243e, #173f64); border: 1px solid rgba(255,255,255,.11); border-radius: 19px; box-shadow: 0 25px 60px rgba(16,36,62,.2); }
.fee-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 25px 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fee-row span { color: #c4d0dc; font-family: "Noto Sans Sinhala", sans-serif; font-size: .84rem; }
.fee-row strong { white-space: nowrap; font-size: 1.38rem; }
.fee-row.primary { color: var(--primary); background: var(--accent); }
.fee-row.primary span { color: #5c430f; }
.fee-row.primary strong { font-size: 1.8rem; }
.installment { padding: 27px 30px 31px; }
.installment small { display: block; color: #91a4b6; font-family: "Noto Sans Sinhala", sans-serif; }
.installment strong { display: block; margin: 4px 0 8px; font-size: 1.34rem; }
.installment i { color: var(--accent); font-style: normal; }
.installment p { margin: 0; color: #becbd8; font-family: "Noto Sans Sinhala", sans-serif; font-size: .8rem; }
.payment-bar { margin-top: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 30px 34px; background: linear-gradient(145deg, #fff, #f3f7f9); border: 1px solid #d7e1e7; border-radius: 16px; box-shadow: 0 16px 38px rgba(16,36,62,.075); }
.payment-copy .kicker { display: block; margin-bottom: 5px; font-size: .61rem; }
.payment-bar h3 { margin: 0 0 4px; color: var(--primary); font-family: "Noto Sans Sinhala", sans-serif; font-size: 1rem; }
.payment-bar p { margin: 0; color: var(--muted); font-family: "Noto Sans Sinhala", sans-serif; font-size: .78rem; }
.payment-brands { display: flex; align-items: center; gap: 12px; }
.payment-brand { width: 118px; height: 70px; display: grid; place-items: center; padding: 13px 17px; background: white; border: 1px solid rgba(16,36,62,.12); border-radius: 13px; box-shadow: 0 10px 28px rgba(16,36,62,.08), inset 0 1px 0 white; }
.payment-brand img { width: 100%; max-height: 42px; object-fit: contain; }
.payment-brand:first-child img { width: 72px; }

.curriculum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module-card { position: relative; overflow: hidden; min-height: 270px; padding: 32px 28px; background: linear-gradient(145deg, #fff, #f7fafc); border: 1px solid #d8e2e8; border-radius: 16px; box-shadow: 0 14px 34px rgba(16,36,62,.055); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.module-card::after { content: ""; position: absolute; top: 0; left: 0; width: 68px; height: 4px; background: linear-gradient(90deg, var(--accent), #ffd374); }
.module-card:hover { border-color: rgba(242,166,25,.55); transform: translateY(-5px); box-shadow: 0 23px 45px rgba(16,36,62,.11); }
.module-card.wide { grid-column: span 3; min-height: auto; }
.module-no { position: absolute; top: -13px; right: 10px; color: #f1f4f6; font-size: 6.5rem; font-weight: 800; line-height: 1; }
.module-card h3 { position: relative; max-width: 240px; margin: 5px 0 22px; color: var(--primary); font-size: 1.1rem; line-height: 1.25; }
.module-card h3::before { content: ""; display: block; width: 30px; height: 3px; margin-bottom: 15px; background: var(--accent); }
.module-card ul { position: relative; margin: 0; padding: 0; list-style: none; }
.module-card li { position: relative; padding: 9px 0 9px 16px; color: #566578; border-top: 1px solid #edf0f2; font-size: .79rem; line-height: 1.5; }
.module-card li::before { content: ""; position: absolute; top: 16px; left: 0; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.module-card.wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; }

.practical-section { color: white; background: #0e2b45; }
.practical-grid { display: grid; grid-template-columns: 320px 1fr; align-items: center; gap: 70px; }
.practical-number { width: 310px; height: 310px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: inset 0 0 0 24px rgba(255,255,255,.025), inset 0 0 0 25px rgba(255,255,255,.08); }
.practical-number strong, .practical-number span { display: block; }
.practical-number strong { color: var(--accent); font-size: 4.4rem; line-height: 1; }
.practical-number span { font-size: 1.15rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.skill-tags span { padding: 9px 13px; color: #dce7ef; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; font-size: .77rem; }

.outcomes-section { background: white; }
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.outcome-grid article { display: flex; gap: 22px; padding: 37px; background: linear-gradient(145deg, #f8fafb, #eef3f6); border: 1px solid #d7e1e7; border-radius: 16px; box-shadow: 0 14px 34px rgba(16,36,62,.06); transition: transform .22s ease, box-shadow .22s ease; }
.outcome-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(16,36,62,.11); }
.outcome-icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; color: var(--primary); background: var(--accent); border-radius: 10px; font-size: 1.4rem; font-weight: 800; }
.outcome-grid h3 { margin: 0 0 10px; color: var(--primary); font-family: "Noto Sans Sinhala", sans-serif; font-size: 1.08rem; }
.outcome-grid p { margin: 0; color: var(--muted); font-family: "Noto Sans Sinhala", sans-serif; font-size: .84rem; }

.location-section { padding-top: 0; }
.location-card { overflow: hidden; display: grid; grid-template-columns: .78fr 1.22fr; min-height: 365px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.location-copy { padding: 50px; }
.location-copy h2 { margin: 10px 0 14px; color: var(--primary); font-family: "Noto Sans Sinhala", sans-serif; font-size: 1.8rem; line-height: 1.35; }
.location-copy p { color: var(--muted); font-family: "Noto Sans Sinhala", sans-serif; }
.text-link { color: var(--secondary); font-family: "Noto Sans Sinhala", sans-serif; font-size: .82rem; font-weight: 700; }
.text-link span { color: var(--accent-dark); }
.map-placeholder { position: relative; min-height: 365px; overflow: hidden; background: var(--primary-2); }
.map-placeholder iframe { width: 100%; height: 100%; min-height: 365px; display: block; border: 0; }

.final-cta { padding: 75px 0; color: white; background: var(--secondary); }
.final-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.final-cta .kicker { color: #ffd277; }
.final-cta h2 { margin: 9px 0 5px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
.final-cta p { margin-bottom: 0; color: #d5e2eb; font-family: "Noto Sans Sinhala", "Outfit", sans-serif; }
.final-cta .cta-facts { margin: 0 0 8px; color: white; font-family: "Outfit", sans-serif; font-size: .9rem; font-weight: 700; }
.cta-facts i { margin: 0 7px; color: var(--accent); font-style: normal; }
.site-footer { position: relative; overflow: hidden; padding: 78px 0 100px; color: #9fb0c1; background: #071523; }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 0, rgba(41,111,160,.24), transparent 28%), radial-gradient(circle at 92% 72%, rgba(242,166,25,.09), transparent 24%); }
.footer-accent { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, transparent 5%, var(--accent) 35%, #ffd77e 50%, var(--accent) 65%, transparent 95%); }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.45fr .65fr .9fr; gap: 80px; padding-bottom: 54px; }
.footer-brand-lockup { width: fit-content; display: flex; align-items: center; gap: 15px; }
.footer-brand-lockup img { width: 62px; height: 62px; padding: 3px; object-fit: contain; background: white; border: 1px solid rgba(242,166,25,.48); border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.footer-brand-lockup strong, .footer-brand-lockup small { display: block; font-family: "Noto Sans Sinhala", sans-serif; }
.footer-brand-lockup strong { color: white; font-size: .95rem; }
.footer-brand-lockup small { margin-top: 4px; color: #8194a7; font-size: .7rem; }
.footer-brand > p { max-width: 460px; margin: 24px 0 20px; color: #8194a7; font-size: .88rem; line-height: 1.8; }
.footer-course-pill { width: fit-content; display: flex; align-items: center; gap: 10px; padding: 8px 13px 8px 8px; color: #cbd6df; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; font-size: .72rem; }
.footer-course-pill span { padding: 4px 7px; color: #15283a; background: var(--accent); border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.footer-nav h2, .footer-contact h2 { margin: 0 0 21px; color: white; font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-nav a { width: fit-content; display: block; margin-top: 11px; color: #9fb0c1; font-size: .81rem; transition: color .18s, transform .18s; }
.footer-nav a:hover { color: var(--accent); transform: translateX(3px); }
.footer-contact > p { max-width: 330px; margin-bottom: 18px; color: #8194a7; font-size: .8rem; }
.footer-phone { display: block; width: fit-content; }
.footer-phone small, .footer-phone strong { display: block; }
.footer-phone small { color: var(--accent); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-phone strong { margin-top: 3px; color: white; font-size: 1.35rem; }
.footer-actions { display: flex; gap: 8px; margin-top: 20px; }
.footer-actions a { min-width: 96px; padding: 9px 13px; color: white; text-align: center; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: .72rem; font-weight: 700; transition: transform .18s, border-color .18s, background .18s; }
.footer-actions a:last-child { background: var(--success); border-color: var(--success); }
.footer-actions a:hover { transform: translateY(-2px); border-color: var(--accent); }
.footer-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p { margin: 0; color: #6f8295; font-size: .72rem; }
.developer-credit strong { color: #e3eaf0; font-weight: 700; }
.mobile-actions { display: none; }

/* Premium finish: shared rhythm, depth and interaction language */
body { background: #fbfcfd; }
.site-header { background: rgba(252,253,254,.94); border-bottom-color: rgba(16,36,62,.11); box-shadow: 0 8px 28px rgba(7,26,45,.055); }
.site-header::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent 4%, rgba(242,166,25,.78) 35%, rgba(242,166,25,.26) 72%, transparent 96%); }
.site-header.scrolled { background: rgba(255,255,255,.98); box-shadow: 0 14px 38px rgba(7,26,45,.11); }
.nav-wrap { min-height: 88px; }
.brand { position: relative; padding-right: 25px; }
.brand::after { content: ""; position: absolute; top: 8px; right: 0; bottom: 8px; width: 1px; background: linear-gradient(transparent, rgba(16,36,62,.18), transparent); }
.brand-logo { border-color: rgba(242,166,25,.62); box-shadow: 0 8px 24px rgba(16,36,62,.14), inset 0 0 0 2px rgba(255,255,255,.8); }
.primary-nav { gap: 3px; padding: 5px; background: linear-gradient(180deg, rgba(247,249,251,.98), rgba(235,240,244,.92)); border-color: rgba(16,36,62,.13); border-radius: 8px; box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(7,26,45,.07); }
.primary-nav a { padding: 11px 13px; border: 1px solid transparent; border-radius: 6px; letter-spacing: .01em; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--primary); background: rgba(255,255,255,.94); border-color: rgba(16,36,62,.10); box-shadow: 0 5px 14px rgba(7,26,45,.08); }
.primary-nav a.active { color: white; background: linear-gradient(145deg, #173b61, #10243e); border-color: rgba(16,36,62,.35); box-shadow: 0 7px 17px rgba(16,36,62,.22), inset 0 -2px 0 rgba(242,166,25,.72); }
.primary-nav .nav-night.active { color: #35465a; background: transparent; border-color: transparent; box-shadow: none; transform: none; }

.hero { position: relative; background: radial-gradient(circle at 74% 12%, rgba(36,105,153,.44), transparent 25%), radial-gradient(circle at 5% 84%, rgba(242,166,25,.11), transparent 28%), linear-gradient(140deg, #08192b 0%, #102a45 50%, #0d2238 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero-grid, .hero-strip { position: relative; z-index: 1; }
.hero-grid { min-height: 660px; padding-block: 94px 76px; }
.night-launch-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.11); }
h1 { text-wrap: balance; text-shadow: 0 8px 32px rgba(0,0,0,.16); }
.hero-facts span { background: rgba(255,255,255,.035); backdrop-filter: blur(8px); }
.btn { min-height: 50px; padding: 12px 21px; border-radius: 999px; box-shadow: 0 8px 24px rgba(7,26,45,.10); }
.btn-primary { box-shadow: 0 12px 28px rgba(242,166,25,.24); }
.hero-strip { border-top: 1px solid rgba(255,255,255,.08); background: rgba(5,17,29,.36); backdrop-filter: blur(12px); }
.priority-grid div { border-color: rgba(255,255,255,.10); }

.section { padding: 112px 0; }
.section-heading { margin-bottom: 48px; }
.section-heading h2 { text-wrap: balance; }
.kicker, .eyebrow { letter-spacing: .18em; }
.need-grid, .batch-grid, .curriculum-grid { gap: 20px; }
.need-grid article, .batch-card, .module-card, .outcome-grid article { border-color: rgba(16,36,62,.10); border-radius: 20px; box-shadow: var(--shadow-soft); }
.need-grid article, .batch-card, .module-card { background: linear-gradient(145deg, #fff 0%, #f8fafc 100%); }
.eligibility-card, .fee-panel, .payment-bar, .location-card { border-radius: var(--radius); }
.registration-section { position: relative; background: radial-gradient(circle at 90% 0, rgba(242,166,25,.11), transparent 28%), linear-gradient(135deg, #112d49, #173f65 58%, #102b47); }
.registration-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 52px 52px; }
.registration-section .container { position: relative; }
.steps { gap: 16px; }
.steps li { min-height: 205px; border-radius: 18px; }
.practical-section { background: radial-gradient(circle at 18% 50%, rgba(242,166,25,.12), transparent 27%), linear-gradient(135deg, #081b2d, #123a5a); }
.practical-number { box-shadow: inset 0 0 0 24px rgba(255,255,255,.025), inset 0 0 0 25px rgba(255,255,255,.08), 0 25px 60px rgba(0,0,0,.18); }
.location-card { background: white; }
.final-cta { position: relative; overflow: hidden; padding: 86px 0; background: radial-gradient(circle at 82% 18%, rgba(242,166,25,.20), transparent 23%), linear-gradient(125deg, #173e62, #0c2943); }
.final-cta::before { content: ""; position: absolute; top: -210px; right: -100px; width: 540px; height: 540px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012); }
.final-cta-inner { position: relative; z-index: 1; }

.inquiry-chat { position: fixed; z-index: 120; right: 22px; bottom: 22px; display: flex; align-items: flex-end; flex-direction: column; gap: 12px; }
.inquiry-panel { width: min(390px, calc(100vw - 32px)); max-height: min(700px, calc(100vh - 110px)); overflow: hidden auto; background: white; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 25px 70px rgba(6, 24, 42, .24); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transform-origin: bottom right; pointer-events: none; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
.inquiry-chat.open .inquiry-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.inquiry-header { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 18px; color: white; background: var(--primary); }
.inquiry-avatar { width: 44px; height: 44px; display: grid; place-items: center; background: var(--success); border-radius: 50%; font-size: .72rem; font-weight: 800; }
.inquiry-header small, .inquiry-header h2, .inquiry-header span { display: block; }
.inquiry-header small { color: #aebdcc; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.inquiry-header h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.inquiry-header span { color: #c7d3de; font-size: .68rem; }
.inquiry-header span i { width: 7px; height: 7px; display: inline-block; margin-right: 5px; background: #42d47d; border-radius: 50%; }
.inquiry-close { width: 36px; height: 36px; padding: 0; color: white; background: transparent; border: 0; border-radius: 50%; font-size: 1.65rem; line-height: 1; cursor: pointer; }
.inquiry-close:hover { background: rgba(255,255,255,.1); }
.inquiry-intro { padding: 16px 18px 0; background: #eef4f1; }
.inquiry-intro p { width: fit-content; max-width: 92%; margin: 0; padding: 10px 12px; color: #294238; background: white; border-radius: 4px 12px 12px 12px; box-shadow: 0 3px 12px rgba(12,55,37,.06); font-size: .8rem; }
.inquiry-form { padding: 16px 18px 18px; background: #eef4f1; }
.inquiry-form label { display: block; margin: 0 0 5px; color: #344b41; font-size: .72rem; font-weight: 700; }
.inquiry-form label:not(:first-child) { margin-top: 11px; }
.inquiry-form label span { color: #b53636; }
.inquiry-form label small { color: #718279; font-size: .64rem; font-weight: 500; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { width: 100%; display: block; padding: 10px 11px; color: var(--text); background: white; border: 1px solid #cbd8d1; border-radius: 8px; font: inherit; font-size: .8rem; line-height: 1.35; }
.inquiry-form textarea { resize: vertical; min-height: 78px; }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { border-color: var(--success); outline: 3px solid rgba(18,140,86,.14); }
.inquiry-submit { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 10px 16px; color: white; background: var(--success); border: 0; border-radius: 9px; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.inquiry-submit:hover { background: #0d7548; }
.inquiry-submit span { font-size: .67rem; }
.inquiry-note { margin: 8px 0 0; color: #687c72; text-align: center; font-size: .64rem; }
.inquiry-toggle { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 8px 16px 8px 9px; color: white; background: var(--primary); border: 0; border-radius: 100px; box-shadow: 0 12px 32px rgba(6,24,42,.25); cursor: pointer; }
.inquiry-toggle-icon { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--success); border-radius: 50%; font-size: 1.25rem; font-weight: 800; }
.inquiry-toggle-copy { min-width: 94px; text-align: left; }
.inquiry-toggle-copy strong, .inquiry-toggle-copy small { display: block; line-height: 1.25; }
.inquiry-toggle-copy strong { font-size: .78rem; }
.inquiry-toggle-copy small { margin-top: 2px; color: #aebdcc; font-size: .65rem; }
.inquiry-chat.open .inquiry-toggle-icon { font-size: 0; }
.inquiry-chat.open .inquiry-toggle-icon::after { content: "×"; font-size: 1.55rem; font-weight: 500; }

.reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal-ready .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .primary-nav { gap: 2px; font-size: .7rem; }
  .primary-nav a { padding-inline: 8px; }
  .hero-grid { grid-template-columns: 1fr .72fr; gap: 30px; }
  .tech-visual { transform: scale(.86); }
  .need-grid { grid-template-columns: repeat(3, 1fr); }
  .need-grid article:last-child { grid-column: auto; }
  .batch-grid { grid-template-columns: 1fr 1fr; }
  .curriculum-grid { grid-template-columns: 1fr 1fr; }
  .module-card.wide { grid-column: span 2; }
  .final-cta-inner { grid-template-columns: 1fr; }
  .night-intro-grid { gap: 45px; }
  .night-curriculum-grid { grid-template-columns: 1fr 1fr; }
  .night-curriculum-grid .night-curriculum-wide { grid-column: span 2; }
}

@media (max-width: 1040px) {
  html { scroll-padding-top: 72px; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .nav-wrap { min-height: 74px; }
  .nav-toggle { display: block; z-index: 2; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav { position: fixed; top: 74px; right: 0; bottom: 0; left: 0; display: block; padding: 18px 25px 100px; background: white; border: 0; border-radius: 0; box-shadow: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; overflow-y: auto; }
  .primary-nav.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .primary-nav a { display: block; margin-bottom: 5px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; }
  .primary-nav a::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding-block: 70px 40px; }
  .hero-logo-strip { transform: translateY(-20px); }
  .tech-visual { min-height: 360px; transform: scale(.9); }
  .priority-grid { grid-template-columns: 1fr 1fr; padding: 13px 0; }
  .priority-grid div, .priority-grid div:first-child { min-height: 78px; padding: 12px 16px; border-left: 1px solid rgba(255,255,255,.12); }
  .priority-grid div:nth-child(odd) { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
  .section { padding: 78px 0; }
  .need-grid { grid-template-columns: 1fr 1fr; }
  .eligibility-card { grid-template-columns: 190px 1fr; gap: 30px; padding: 30px; }
  .split-heading { grid-template-columns: 1fr; gap: 0; }
  .split-heading p { max-width: 480px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .details-layout { grid-template-columns: 1fr; gap: 45px; }
  .payment-bar { grid-template-columns: 1fr auto; }
  .practical-grid { grid-template-columns: 230px 1fr; gap: 40px; }
  .practical-number { width: 230px; height: 230px; }
  .practical-number strong { font-size: 3.3rem; }
  .outcome-grid { grid-template-columns: 1fr; }
  .album-card-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .location-card { grid-template-columns: 1fr; }
  .map-placeholder { min-height: 300px; }
  .night-class { padding: 85px 0; }
  .night-intro-grid { grid-template-columns: 1fr; }
  .night-date-card { max-width: 500px; width: 100%; margin-inline: auto; }
  .night-summary { grid-template-columns: 1fr 1fr; }
  .night-summary div:last-child { grid-column: span 2; }
  .night-schedule-panel, .night-details-grid { grid-template-columns: 1fr; }
  .night-certificate { grid-template-columns: auto 1fr; }
  .night-contact { grid-column: span 2; padding: 20px 0 0; border-top: 1px solid rgba(15,30,45,.22); border-left: 0; }
  .footer-grid { grid-template-columns: 1.15fr .85fr; gap: 48px 70px; }
  .footer-brand { grid-column: span 2; }
  .footer-brand > p { max-width: 560px; }
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .brand { min-width: 0; }
  .brand-logo { width: 44px; height: 44px; flex-basis: 44px; }
  .brand strong { font-size: .72rem; }
  .brand small { max-width: 220px; font-size: .57rem; }
  .hero-grid { min-height: auto; padding-top: 54px; }
  h1 { font-size: clamp(2.75rem, 13vw, 4.2rem); }
  .hero-institution { font-size: .88rem; }
  .button-row .btn { width: 100%; }
  .hero-logo-strip { grid-template-columns: repeat(4, 60px); gap: 8px; margin-bottom: -20px; }
  .hero-logo-strip span { width: 60px; height: 60px; padding: 5px; border-radius: 10px; }
  .tech-visual { min-height: 325px; margin: -10px 0; transform: scale(.70); }
  .priority-grid { grid-template-columns: 1fr; }
  .priority-grid { gap: 9px; padding-block: 13px; }
  .priority-grid div, .priority-grid div:first-child, .priority-grid div:nth-child(odd) { min-height: 76px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--accent); }
  .section { padding: 65px 0; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2 { font-size: 2rem; }
  .need-grid { grid-template-columns: 1fr; }
  .need-grid article { min-height: auto; }
  .eligibility-card { grid-template-columns: 1fr; gap: 24px; padding: 23px; }
  .age-block { min-height: 120px; }
  .batch-grid, .steps, .curriculum-grid { grid-template-columns: 1fr; }
  .steps li, .steps li + li, .steps li:nth-child(3) { border: 1px solid rgba(255,255,255,.14); }
  .details-list div { grid-template-columns: 110px 1fr; }
  .fee-row { align-items: flex-start; flex-direction: column; gap: 5px; padding: 22px; }
  .installment { padding: 23px; }
  .payment-bar { grid-template-columns: 1fr; gap: 24px; padding: 25px 22px; }
  .payment-brands { width: 100%; }
  .payment-brand { width: auto; flex: 1; }
  .module-card.wide { grid-column: auto; }
  .module-card.wide ul { grid-template-columns: 1fr; }
  .practical-grid { grid-template-columns: 1fr; }
  .practical-number { width: 210px; height: 210px; margin: auto; }
  .outcome-grid article { padding: 25px; }
  .gallery-heading-row { align-items: flex-start; flex-direction: column; gap: 0; }
  .gallery-heading-row .section-heading { margin-bottom: 22px; }
  .gallery-count { margin-bottom: 25px; }
  .album-card-grid { grid-template-columns: 1fr; gap: 16px; }
  .album-mosaic { height: 225px; }
  .album-panel { padding: 18px 12px; }
  .album-panel-heading { align-items: flex-start; flex-direction: column; gap: 7px; padding-inline: 3px; }
  .album-panel-heading h3 { font-size: 1.35rem; }
  .album-panel-actions { width: 100%; justify-content: space-between; }
  .photo-grid { grid-template-columns: 1fr; gap: 11px; }
  .photo-item span { opacity: 1; transform: none; }
  .location-copy { padding: 32px 24px; }
  .final-cta { padding: 65px 0; }
  .final-cta h2 { font-size: 2.45rem; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .site-footer { padding-bottom: 105px; }
  .footer-grid { grid-template-columns: 1fr; gap: 42px; padding-bottom: 42px; }
  .footer-brand { grid-column: auto; }
  .footer-brand-lockup { align-items: flex-start; }
  .footer-brand-lockup img { width: 54px; height: 54px; flex: 0 0 54px; }
  .footer-brand-lockup strong { font-size: .84rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; }
  .footer-actions a { min-width: 112px; }
  .mobile-actions { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(9,25,42,.96); box-shadow: 0 -8px 25px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
  .mobile-actions a { min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; background: var(--secondary); border-radius: 7px; font-size: .85rem; font-weight: 700; }
  .mobile-actions a:last-child { background: var(--success); }
  .mobile-actions span { font-size: .72rem; font-weight: 800; }
  .inquiry-chat { right: 12px; bottom: 75px; }
  .inquiry-panel { width: calc(100vw - 24px); max-height: calc(100vh - 160px); }
  .inquiry-toggle-copy { display: none; }
  .inquiry-toggle { min-height: 54px; padding: 7px; }
  .night-class { padding: 68px 0; }
  .night-copy h2 { font-size: 2.25rem; }
  .night-launch-badge { align-items: flex-start; border-radius: 8px; line-height: 1.45; }
  .night-summary { grid-template-columns: 1fr; gap: 9px; padding: 9px; }
  .night-summary div { min-height: 94px; padding: 21px 18px 19px 62px; }
  .night-summary div::before { top: 21px; left: 17px; }
  .night-summary div:last-child { grid-column: auto; }
  .night-schedule-panel, .night-course-card, .night-registration-card { padding: 25px 20px; }
  .schedule-days { grid-template-columns: 1fr; }
  .night-course-card dl > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .night-course-card dd { text-align: left; }
  .night-curriculum { margin-top: 65px; padding: 35px 14px 14px; border-radius: 17px; }
  .night-curriculum-grid { grid-template-columns: 1fr; }
  .night-curriculum-grid .night-curriculum-wide { grid-column: auto; }
  .night-curriculum-wide ol { grid-template-columns: 1fr; }
  .night-certificate { grid-template-columns: 1fr; padding: 25px 20px; }
  .night-contact { grid-column: auto; }
}

@media (max-width: 380px) {
  .brand small { max-width: 175px; }
  .hero-facts span { font-size: .7rem; }
  .tech-visual { margin: -20px -28px; transform: scale(.69); }
  .outcome-grid article { flex-direction: column; }
  .details-list div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}