:root {
  --navy: #071b3a;
  --navy-2: #0a2d5c;
  --blue: #0879f9;
  --blue-2: #12a8f4;
  --orange: #ff8a18;
  --coral: #ff5d5d;
  --ink: #10213d;
  --muted: #68758a;
  --line: #e7edf6;
  --soft: #f4f8fd;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(19, 53, 98, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Plus Jakarta Sans", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1180px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: 84px; display: flex; align-items: center; transition: .3s ease; }
.site-header.scrolled { height: 72px; background: rgba(255,255,255,.94); box-shadow: 0 10px 35px rgba(16,33,61,.08); backdrop-filter: blur(18px); }
.site-header .navbar { width: 100%; padding: 0; }
.site-header .navbar > .container { display: flex; align-items: center; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; }
.brand img { display: block; object-fit: contain; }
.brand .brand-main { width: 184px; height: auto; }
.brand-divider { width: 1px; height: 40px; background: #dce5f0; }
.brand .brand-partner { width: 51px; height: 58px; }
.nav-panel { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; align-items: center; gap: 27px; list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; color: #32415a; font-size: 14px; font-weight: 600; transition: .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); opacity: 0; transform: translateX(-50%) scale(0); transition: .25s; }
.nav-links a.active::after { opacity: 1; transform: translateX(-50%) scale(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-login { padding: 11px 16px; color: var(--navy); font-size: 14px; font-weight: 700; }
.btn-login:hover { color: var(--blue); }
.btn-primary-msu, .btn-secondary-msu, .btn-white, .btn-outline-white { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; font-size: 14px; font-weight: 700; transition: transform .25s, box-shadow .25s, background .25s; }
.btn-primary-msu { color: #fff; background: linear-gradient(135deg, var(--blue), #0b5ee8); box-shadow: 0 14px 30px rgba(8,121,249,.25); }
.btn-primary-msu:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px rgba(8,121,249,.32); }
.btn-primary-msu svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm-msu { min-height: 42px; padding: 0 18px; border-radius: 10px; }
.btn-secondary-msu { color: var(--navy); background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(17,42,78,.07); }
.btn-secondary-msu:hover { color: var(--blue); transform: translateY(-2px); border-color: #bddbff; }
.play-icon { display: inline-grid; width: 25px; height: 25px; place-items: center; color: var(--blue); background: #e9f4ff; border-radius: 50%; font-size: 14px; padding-left: 2px; }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; margin-left: auto; border: 0; border-radius: 10px; background: #edf5ff; }
.nav-toggle span { display: block; width: 100%; height: 2px; margin: 5px 0; background: var(--navy); transition: .25s; }

.hero-section { position: relative; min-height: 800px; padding: 145px 0 0; overflow: hidden; background: radial-gradient(circle at 78% 35%, rgba(25,166,255,.12), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #fff 78%); }
.hero-section::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(7,75,142,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7,75,142,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.hero-container { position: relative; z-index: 2; padding-bottom: 90px; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-orb-one { width: 360px; height: 360px; right: -190px; top: 90px; background: rgba(8,121,249,.07); }
.hero-orb-two { width: 180px; height: 180px; left: -110px; top: 240px; border: 36px solid rgba(255,138,24,.07); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; color: #315272; background: #fff; border: 1px solid #e6eef8; border-radius: 999px; box-shadow: 0 8px 25px rgba(14,54,94,.06); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.eyebrow-icon { display: inline-grid; width: 24px; height: 24px; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; font-size: 14px; }
.hero-copy h1 { max-width: 600px; margin: 24px 0 22px; color: var(--navy); font-size: clamp(42px, 5vw, 66px); font-weight: 800; line-height: 1.08; letter-spacing: -.055em; }
.hero-copy h1 span { color: var(--blue); position: relative; }
.hero-copy h1 span::after { content: ""; position: absolute; left: 1px; right: 0; bottom: -6px; height: 8px; opacity: .75; background: url("data:image/svg+xml,%3Csvg width='300' height='12' viewBox='0 0 300 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8c77-8 190-6 296-3' fill='none' stroke='%23ff8a18' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-lead { max-width: 590px; margin: 0 0 30px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 33px; }
.proof-avatars { display: flex; padding-left: 7px; }
.proof-avatars span { display: grid; width: 35px; height: 35px; margin-left: -7px; place-items: center; color: #fff; background: #255b92; border: 3px solid #fff; border-radius: 50%; font-size: 14px; font-weight: 800; }
.proof-avatars span:nth-child(2) { background: #0da5c8; }.proof-avatars span:nth-child(3) { background: #ff8a18; }.proof-avatars span:nth-child(4) { color: var(--blue); background: #e5f2ff; }
.hero-proof strong, .hero-proof small { display: block; }
.hero-proof strong { color: var(--ink); font-size: 14px; }.hero-proof small { margin-top: 3px; color: #8994a5; font-size: 14px; }

.score-visual { position: relative; max-width: 560px; margin-left: auto; padding: 36px 18px 25px; }
.dashboard-preview { position: relative; z-index: 2; overflow: hidden; background: #fff; border: 1px solid rgba(207,220,237,.85); border-radius: 22px; box-shadow: 0 35px 80px rgba(18,57,104,.19); transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.preview-topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 23px; color: #fff; background: linear-gradient(112deg, #071b3a, #0b417b); }
.preview-brand { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.mini-mark { display: grid; width: 27px; height: 27px; place-items: center; background: linear-gradient(135deg, var(--blue), var(--orange)); border-radius: 8px; }
.preview-user { display: flex; align-items: center; gap: 8px; }.preview-user::before { content: "Hi, Ahmad"; color: #cad9e9; font-size: 14px; }.preview-user span { width: 23px; height: 23px; background: #d9ecff; border: 3px solid rgba(255,255,255,.35); border-radius: 50%; }.preview-user i { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 5px #fff, 0 -5px #fff; }
.preview-body { padding: 25px; }
.preview-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }.preview-title small, .preview-title strong { display: block; }.preview-title small { margin-bottom: 4px; color: #8b98aa; font-size: 14px; }.preview-title strong { color: var(--navy); font-size: 17px; }.status-badge { padding: 6px 10px; color: #15915d; background: #e9faf2; border-radius: 999px; font-size: 14px; font-weight: 800; }
.score-grid { display: grid; grid-template-columns: 170px 1fr; gap: 24px; }
.score-main { padding: 17px; background: linear-gradient(145deg, #f2f8ff, #f9fbff); border: 1px solid #e9f0f8; border-radius: 17px; }
.score-ring { display: grid; width: 112px; height: 112px; margin: 0 auto 17px; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) 0 82%, #dce9f7 82% 100%); position: relative; }
.score-ring::before { content: ""; position: absolute; width: 86px; height: 86px; background: #f7fbff; border-radius: 50%; }
.score-ring div { position: relative; z-index: 2; text-align: center; }.score-ring strong,.score-ring small { display: block; }.score-ring strong { color: var(--navy); font-size: 27px; line-height: 1; }.score-ring small { margin-top: 5px; color: #8996a8; font-size: 14px; }
.target-note { display: flex; align-items: center; gap: 8px; padding: 10px; background: #fff; border-radius: 11px; box-shadow: 0 8px 20px rgba(29,63,103,.07); }.target-note > span { display: grid; width: 25px; height: 25px; place-items: center; color: #14a56b; background: #e9faf2; border-radius: 8px; font-weight: 800; }.target-note small,.target-note strong { display: block; }.target-note small { color: #94a0af; font-size: 14px; }.target-note strong { margin-top: 2px; color: var(--navy); font-size: 14px; }
.skill-list { display: flex; flex-direction: column; justify-content: center; gap: 24px; }.skill-meta { display: flex; justify-content: space-between; margin-bottom: 8px; color: #68788c; font-size: 14px; }.skill-meta strong { color: var(--navy); font-size: 14px; }.skill-track { height: 7px; overflow: hidden; background: #e9f0f8; border-radius: 9px; }.skill-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-2)); border-radius: inherit; }.skill-row:nth-child(2) .skill-track i { background: linear-gradient(90deg, #22b4c9, #52d4c4); }.skill-row:nth-child(3) .skill-track i { background: linear-gradient(90deg, var(--orange), #ffc35b); }
.preview-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding-top: 19px; border-top: 1px solid #eef2f7; }.preview-footer > span { color: #758398; font-size: 14px; }.preview-footer > span i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #1fbc79; border-radius: 50%; }.preview-footer button { padding: 9px 13px; color: #fff; background: var(--blue); border: 0; border-radius: 8px; font-size: 14px; font-weight: 700; }
.floating-pill { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 11px 15px; color: #263b57; background: rgba(255,255,255,.96); border: 1px solid #e8eff7; border-radius: 11px; box-shadow: 0 16px 40px rgba(23,55,95,.14); font-size: 14px; font-weight: 700; animation: float 4s ease-in-out infinite; }.floating-pill span { display: grid; width: 20px; height: 20px; place-items: center; color: #fff; background: #18b776; border-radius: 6px; }.pill-one { top: 3px; right: 48px; }.pill-two { left: -12px; bottom: 68px; animation-delay: -2s; }.pill-two span { background: var(--orange); }
.dots-pattern { position: absolute; right: -20px; bottom: -5px; width: 100px; height: 100px; opacity: .6; background-image: radial-gradient(#4a9cf2 1.5px, transparent 1.5px); background-size: 12px 12px; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.trust-strip { position: relative; z-index: 3; border-top: 1px solid #e8eff8; border-bottom: 1px solid #e8eff8; background: rgba(255,255,255,.88); }.trust-strip .container { display: grid; grid-template-columns: repeat(4,1fr); }.trust-item { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 20px 25px; border-right: 1px solid #e8eff8; }.trust-item:first-child { border-left: 1px solid #e8eff8; }.trust-icon { display: grid; flex: 0 0 34px; height: 34px; place-items: center; color: var(--blue); background: #edf6ff; border-radius: 9px; font-weight: 800; }.trust-item strong,.trust-item small { display:block; }.trust-item strong { margin-bottom: 3px; color: var(--navy); font-size: 14px; }.trust-item small { color: #8793a5; font-size: 14px; line-height: 1.5; }

.section-padding { padding: 110px 0; }.section-heading { max-width: 700px; margin: 0 auto 52px; text-align: center; }.section-kicker { display: inline-block; margin-bottom: 14px; color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .16em; }.section-heading h2, .certificate-copy h2 { margin: 0 0 18px; color: var(--navy); font-size: clamp(32px,4vw,46px); font-weight: 800; line-height: 1.2; letter-spacing: -.04em; }.section-heading h2 span, .certificate-copy h2 span { color: var(--blue); }.section-heading > p, .certificate-copy > p { max-width: 610px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.85; }
.feature-section { background: #fff; }.feature-card { position: relative; height: 100%; min-height: 286px; padding: 30px 27px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: .3s; }.feature-card:hover { transform: translateY(-8px); border-color: #cfe3fc; box-shadow: var(--shadow); }.feature-icon { display: grid; width: 52px; height: 52px; margin-bottom: 25px; place-items: center; background: #e9f4ff; border-radius: 14px; }.feature-icon svg { width: 25px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.feature-icon.cyan { background: #e8fbfc; }.feature-icon.cyan svg { stroke: #10a9bf; }.feature-icon.orange { background: #fff3e5; }.feature-icon.orange svg { stroke: var(--orange); }.feature-icon.coral { background: #fff0ef; }.feature-icon.coral svg { stroke: var(--coral); }.feature-card h3 { position: relative; z-index: 2; margin: 0 0 12px; color: var(--navy); font-size: 16px; font-weight: 800; }.feature-card p { position: relative; z-index: 2; margin: 0; color: #748196; font-size: 14px; line-height: 1.8; }.feature-number { position: absolute; right: 20px; bottom: -17px; color: #f1f5f9; font-size: 72px; font-weight: 800; line-height: 1; }

.program-section { position: relative; overflow: hidden; background: var(--navy); }.program-section::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 10% 10%, rgba(8,121,249,.24), transparent 25%), radial-gradient(circle at 90% 85%, rgba(255,138,24,.12), transparent 23%); }.section-heading.light { position: relative; }.section-heading.light .section-kicker { color: #55b6ff; }.section-heading.light h2 { color: #fff; }.section-heading.light h2 span { color: #48b5ff; }.section-heading.light p { color: #a9bad0; }.program-grid { position: relative; }.program-card { height: 100%; padding: 34px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.15); border-radius: 21px; box-shadow: 0 20px 55px rgba(0,0,0,.16); transition: .3s; }.program-card:hover { transform: translateY(-6px); }.program-card.featured { border-top: 4px solid var(--blue); }.program-top { display: flex; gap: 19px; }.program-logo { display: grid; flex: 0 0 58px; height: 58px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), #28b7ff); border-radius: 16px; box-shadow: 0 12px 25px rgba(8,121,249,.22); }.program-logo span { font-size: 25px; font-weight: 800; }.program-logo.orange { background: linear-gradient(135deg, var(--orange), #ffbc45); box-shadow: 0 12px 25px rgba(255,138,24,.22); }.program-tag { display: inline-block; margin-bottom: 7px; padding: 5px 8px; color: #0872d8; background: #eaf5ff; border-radius: 5px; font-size: 14px; font-weight: 800; letter-spacing: .08em; }.orange-tag { color: #d96c00; background: #fff3e6; }.program-top h3 { margin: 0 0 7px; color: var(--navy); font-size: 23px; font-weight: 800; }.program-top p { margin: 0; color: #748196; font-size: 14px; line-height: 1.7; }.program-skills { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 28px 0; }.program-skills span { display: flex; align-items: center; gap: 7px; padding: 11px; color: #55657b; background: #f5f8fc; border-radius: 9px; font-size: 14px; font-weight: 700; }.program-skills i { color: var(--blue); font-size: 14px; font-style: normal; }.program-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 23px; border-top: 1px solid #e9eef5; }.program-bottom small,.program-bottom strong { display:block; }.program-bottom small { margin-bottom: 3px; color: #929eae; font-size: 14px; }.program-bottom strong { color: var(--navy); font-size: 14px; }.program-bottom a { color: var(--blue); font-size: 14px; font-weight: 800; }.program-bottom a span { margin-left: 4px; }

.steps-section { background: #f7faff; }.section-heading.text-start > p { margin-left: 0; }.text-link { display: inline-flex; gap: 12px; margin-top: 26px; color: var(--blue); font-size: 14px; font-weight: 800; }.steps-list { position: relative; }.steps-list::before { content:""; position:absolute; top:42px; bottom:42px; left:46px; width:1px; background:#dce8f5; }.step-item { position: relative; display: grid; grid-template-columns: 34px 60px 1fr; align-items: center; gap: 17px; min-height: 104px; padding: 17px 24px 17px 0; margin-bottom: 12px; background: #fff; border: 1px solid #e6edf6; border-radius: 16px; box-shadow: 0 10px 30px rgba(30,65,108,.055); }.step-no { position: relative; z-index: 2; align-self: stretch; display: grid; place-items: center; color: #91a2b7; background: #f8fbff; border-right: 1px solid #edf2f8; border-radius: 16px 0 0 16px; font-size: 14px; font-weight: 800; writing-mode: vertical-rl; }.step-icon { position: relative; z-index: 3; display: grid; width: 48px; height: 48px; place-items:center; color: var(--blue); background: #eaf5ff; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #dce9f7; font-size: 15px; font-weight: 800; }.step-item h3 { margin: 0 0 7px; color: var(--navy); font-size: 14px; font-weight: 800; }.step-item p { margin: 0; color: #758297; font-size: 14px; line-height: 1.7; }

.certificate-section { overflow: hidden; }.certificate-showcase { position: relative; min-height: 410px; }.certificate-showcase::before { content:""; position:absolute; width:430px; height:330px; left:50%; top:47%; transform:translate(-50%,-50%); background: linear-gradient(135deg, #e9f5ff, #f8fbff); border-radius: 45% 55% 62% 38% / 44% 42% 58% 56%; }.certificate-card { position:absolute; width:390px; padding:10px; background:#fff; border:1px solid #e6edf5; border-radius:13px; box-shadow:0 22px 50px rgba(27,58,98,.15); }.certificate-card img { display:block; width:100%; border-radius:6px; }.cert-back { top:30px; left:62px; transform:rotate(-7deg); opacity:.78; }.cert-front { top:92px; left:105px; transform:rotate(3deg); }.verified-badge { position:absolute; z-index:4; left:35px; bottom:37px; display:flex; align-items:center; gap:11px; padding:13px 16px; background:#fff; border:1px solid #e5edf6; border-radius:12px; box-shadow:0 16px 35px rgba(20,52,93,.15); }.verified-badge > span { display:grid; width:31px; height:31px; place-items:center; color:#fff; background:#18b776; border-radius:50%; }.verified-badge strong,.verified-badge small { display:block; }.verified-badge strong { color:var(--navy); font-size: 14px; }.verified-badge small { margin-top:3px; color:#8a97a8; font-size: 14px; }.certificate-copy { padding-left:35px; }.certificate-copy > p { margin-left:0; }.check-list { list-style:none; margin:27px 0 31px; padding:0; }.check-list li { display:flex; align-items:center; gap:11px; margin-bottom:14px; color:#526077; font-size: 14px; font-weight:600; }.check-list span { display:grid; flex:0 0 22px; height:22px; place-items:center; color:#1889ee; background:#e9f5ff; border-radius:50%; font-size: 14px; }

.faq-section { background:#f7faff; }.faq-wrap { max-width:820px; margin:0 auto; }.faq-wrap details { margin-bottom:12px; background:#fff; border:1px solid #e4ebf4; border-radius:13px; box-shadow:0 8px 26px rgba(22,55,97,.04); }.faq-wrap summary { position:relative; display:flex; align-items:center; justify-content:space-between; padding:21px 24px; color:var(--navy); cursor:pointer; list-style:none; font-size: 14px; font-weight:800; }.faq-wrap summary::-webkit-details-marker { display:none; }.faq-wrap summary span { position:relative; width:25px; height:25px; background:#edf6ff; border-radius:50%; }.faq-wrap summary span::before,.faq-wrap summary span::after { content:""; position:absolute; left:7px; right:7px; top:12px; height:1.5px; background:var(--blue); }.faq-wrap summary span::after { transform:rotate(90deg); transition:.2s; }.faq-wrap details[open] summary span::after { transform:rotate(0); }.faq-wrap details p { margin:0; padding:0 24px 22px; color:#748196; font-size: 14px; line-height:1.8; }

.cta-section { padding:90px 0; }.cta-card { position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; min-height:265px; padding:55px 62px; overflow:hidden; color:#fff; background:linear-gradient(120deg,#076ee6,#0b91fa); border-radius:25px; box-shadow:0 28px 60px rgba(8,121,249,.24); }.cta-card::before { content:""; position:absolute; width:300px; height:300px; right:35%; bottom:-235px; border:45px solid rgba(255,255,255,.09); border-radius:50%; }.cta-pattern { position:absolute; inset:0; opacity:.15; background-image:radial-gradient(#fff 1.2px,transparent 1.2px); background-size:18px 18px; mask-image:linear-gradient(90deg,transparent 0,transparent 58%,#000 100%); }.cta-copy,.cta-actions { position:relative; z-index:2; }.cta-label { display:inline-block; margin-bottom:13px; font-size: 14px; font-weight:800; letter-spacing:.15em; }.cta-copy h2 { margin:0 0 12px; color:#fff; font-size:34px; font-weight:800; letter-spacing:-.04em; }.cta-copy p { margin:0; color:#d8edff; font-size: 14px; }.cta-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:11px; }.btn-white { min-width:150px; color:var(--blue); background:#fff; }.btn-white:hover { color:var(--blue); transform:translateY(-2px); }.btn-outline-white { min-width:150px; color:#fff; border:1px solid rgba(255,255,255,.6); }.btn-outline-white:hover { color:#fff; background:rgba(255,255,255,.12); transform:translateY(-2px); }

.site-footer { padding:75px 0 0; color:#a8b6c9; background:#06162f; }.footer-main { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:55px; padding-bottom:55px; }.footer-brand img { width:180px; padding:8px; background:#fff; border-radius:8px; }.footer-brand p { max-width:310px; margin:22px 0 0; font-size: 14px; line-height:1.8; }.footer-main h3 { margin:4px 0 20px; color:#fff; font-size: 14px; font-weight:800; }.footer-links,.footer-contact { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }.footer-links a,.footer-contact a,.footer-contact p { margin:0; color:#a8b6c9; font-size: 14px; transition:.2s; }.footer-links a:hover,.footer-contact a:hover { color:#fff; }.footer-contact span { display:inline-grid; width:22px; height:22px; margin-right:7px; place-items:center; color:#66b9ff; background:rgba(31,145,240,.12); border-radius:6px; font-size: 14px; font-weight:800; }.footer-bottom { display:flex; align-items:center; justify-content:space-between; min-height:70px; border-top:1px solid rgba(255,255,255,.08); }.footer-bottom p { margin:0; font-size: 14px; }.footer-bottom span { color:var(--orange); }
.wa-float { position:fixed; z-index:999; right:22px; bottom:22px; display:grid; width:50px; height:50px; place-items:center; color:#fff; background:#20bd67; border:4px solid #fff; border-radius:50%; box-shadow:0 12px 30px rgba(20,120,67,.28); font-size: 14px; font-weight:800; transition:.2s; }.wa-float:hover { color:#fff; transform:translateY(-3px); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:translateY(0); }.reveal-1 { transition-delay:.08s; }.reveal-2 { transition-delay:.16s; }.reveal-3 { transition-delay:.24s; }.reveal-delay { transition-delay:.12s; }

@media (max-width: 1199px) {
  .nav-links { gap:18px; }.nav-panel { gap:22px; }.nav-links a { font-size: 14px; }.hero-copy h1 { font-size:52px; }.score-visual { padding-left:0; }.certificate-card { width:350px; }.cert-front { left:85px; }.cert-back { left:45px; }
}
@media (max-width: 991px) {
  .site-header,.site-header.scrolled { height:72px; background:rgba(255,255,255,.97); box-shadow:0 8px 30px rgba(16,33,61,.08); }.brand img { width:165px; }.nav-toggle { display:block; }.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.nav-toggle.open span:nth-child(2) { opacity:0; }.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }.nav-panel { position:absolute; top:62px; left:18px; right:18px; display:none; padding:22px; background:#fff; border:1px solid #e5ecf5; border-radius:16px; box-shadow:0 22px 50px rgba(16,43,77,.14); }.nav-panel.open { display:block; }.nav-links { display:block; }.nav-links li { border-bottom:1px solid #eef2f7; }.nav-links a { display:block; padding:13px 3px; }.nav-links a::after { display:none; }.nav-actions { margin-top:16px; }.nav-actions a { flex:1; }.hero-section { padding-top:125px; }.hero-copy { text-align:center; }.hero-copy h1,.hero-lead { margin-left:auto; margin-right:auto; }.hero-actions,.hero-proof { justify-content:center; }.score-visual { margin:35px auto 0; }.trust-strip .container { grid-template-columns:repeat(2,1fr); }.trust-item:nth-child(3) { border-left:1px solid #e8eff8; }.footer-main { grid-template-columns:2fr 1fr 1fr; }.footer-contact { grid-column:1/-1; }.certificate-copy { padding-left:0; }.certificate-showcase { max-width:560px; margin:0 auto; }.cta-card { align-items:flex-start; flex-direction:column; }.cta-actions { justify-content:flex-start; }
}
@media (max-width: 767px) {
  .hero-section { min-height:auto; }.hero-copy h1 { font-size:43px; }.hero-lead { font-size:14px; }.score-grid { grid-template-columns:1fr; }.score-main { display:flex; align-items:center; gap:18px; }.score-ring { flex:0 0 105px; margin:0; }.dashboard-preview { transform:none; }.pill-two { left:-3px; bottom:50px; }.pill-one { right:5px; }.trust-strip .container { grid-template-columns:1fr 1fr; }.trust-item { min-height:84px; padding:16px 12px; }.trust-item strong { font-size: 14px; }.section-padding { padding:82px 0; }.feature-card { min-height:250px; }.steps-section .section-heading { text-align:center!important; }.section-heading.text-start > p { margin-left:auto; }.text-link { display:flex; justify-content:center; margin-bottom:35px; }.certificate-showcase { min-height:340px; }.certificate-card { width:300px; }.cert-back { left:30px; }.cert-front { left:65px; }.verified-badge { left:10px; bottom:18px; }.cta-card { padding:42px 30px; }.cta-copy h2 { font-size:28px; }.footer-main { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; }.footer-contact { grid-column:1/-1; }.program-skills { grid-template-columns:1fr; }
}
@media (max-width: 575px) {
  .site-header .container { padding-left:18px; padding-right:18px; }.hero-container { padding-bottom:65px; }.hero-copy h1 { font-size:37px; }.hero-actions { flex-direction:column; }.hero-actions a { width:100%; }.hero-proof { align-items:flex-start; text-align:left; }.score-visual { padding:30px 0 15px; }.preview-body { padding:19px; }.score-main { display:block; }.score-ring { margin:0 auto 15px; }.floating-pill { display:none; }.preview-user::before { display:none; }.trust-strip .container { grid-template-columns:1fr; }.trust-item,.trust-item:nth-child(3) { border-left:1px solid #e8eff8; }.section-heading h2,.certificate-copy h2 { font-size:31px; }.program-card { padding:25px 21px; }.program-top { align-items:flex-start; }.program-logo { flex-basis:48px; height:48px; }.program-top h3 { font-size:19px; }.program-bottom { align-items:flex-start; gap:20px; }.step-item { grid-template-columns:27px 45px 1fr; gap:11px; padding-right:13px; }.step-icon { width:40px; height:40px; }.steps-list::before { left:32px; }.certificate-showcase { min-height:280px; margin-top:15px; }.certificate-showcase::before { width:320px; height:240px; }.certificate-card { width:245px; padding:7px; }.cert-back { top:20px; left:18px; }.cert-front { top:67px; left:51px; }.verified-badge { padding:9px 11px; }.cta-section { padding:65px 0; }.cta-card { border-radius:19px; }.cta-actions { width:100%; flex-direction:column; }.cta-actions a { width:100%; }.footer-main { grid-template-columns:1fr; gap:32px; }.footer-brand,.footer-contact { grid-column:auto; }.footer-bottom { align-items:flex-start; flex-direction:column; justify-content:center; gap:8px; }
}
/* Readability refresh: keep supporting text comfortably legible on every screen. */
.nav-links a,
.btn-login,
.btn-primary-msu,
.btn-secondary-msu,
.btn-white,
.btn-outline-white { font-size: 14px; }
.eyebrow { font-size: 14px; }
.hero-lead { font-size: 17px; }
.hero-proof strong { font-size: 14px; }
.hero-proof small { font-size: 14px; }
.preview-brand { font-size: 14px; }
.preview-user::before { font-size: 14px; }
.preview-title small { font-size: 14px; }
.preview-title strong { font-size: 18px; }
.status-badge { font-size: 14px; }
.score-ring small { font-size: 14px; }
.target-note small { font-size: 14px; }
.target-note strong { font-size: 14px; }
.skill-meta { font-size: 14px; }
.skill-meta strong { font-size: 14px; }
.preview-footer > span,
.preview-footer button,
.floating-pill { font-size: 14px; }
.trust-item strong { font-size: 14px; }
.trust-item small { font-size: 14px; }
.section-kicker { font-size: 14px; }
.section-heading > p,
.certificate-copy > p { font-size: 15px; }
.feature-card h3 { font-size: 18px; }
.feature-card p { font-size: 14px; }
.program-tag { font-size: 14px; }
.program-top p { font-size: 14px; }
.program-skills span,
.program-skills i { font-size: 14px; }
.program-bottom small { font-size: 14px; }
.program-bottom strong { font-size: 16px; }
.program-bottom a { font-size: 14px; }
.text-link { font-size: 14px; }
.step-no { font-size: 14px; }
.step-item h3 { font-size: 16px; }
.step-item p { font-size: 14px; }
.verified-badge strong { font-size: 14px; }
.verified-badge small { font-size: 14px; }
.check-list li { font-size: 14px; }
.faq-wrap summary { font-size: 14px; }
.faq-wrap details p { font-size: 14px; }
.cta-label { font-size: 14px; }
.cta-copy p { font-size: 14px; }
.footer-brand p { font-size: 14px; }
.footer-main h3 { font-size: 14px; }
.footer-links a,
.footer-contact a,
.footer-contact p { font-size: 14px; }
.footer-bottom p { font-size: 14px; }

/* Additional programs */
.program-logo.teal {
  background: linear-gradient(135deg, #0d9c9a, #25c7b5);
  box-shadow: 0 12px 25px rgba(13, 156, 154, .22);
}
.program-logo.purple {
  background: linear-gradient(135deg, #6549d8, #9a6df5);
  box-shadow: 0 12px 25px rgba(101, 73, 216, .22);
}
.teal-tag {
  color: #087c78;
  background: #e6f9f6;
}
.purple-tag {
  color: #6244c5;
  background: #f0ecff;
}
.program-skills.four-skills {
  grid-template-columns: repeat(4, 1fr);
}
.alcpt-card .program-skills i,
.alcpt-card .program-bottom a {
  color: #0d918d;
}
.ielts-card .program-skills i,
.ielts-card .program-bottom a {
  color: #6549d8;
}

@media (max-width: 1199px) {
  .nav-links a { font-size: 14px; }
}

@media (max-width: 991px) {
  .brand .brand-main { width: 158px; }
  .brand .brand-partner { width: 43px; height: 49px; }
  .brand-divider { height: 34px; }
  .nav-links a { font-size: 15px; }
  .program-skills.four-skills { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .hero-lead { font-size: 16px; }
  .trust-item strong { font-size: 14px; }
}

@media (max-width: 575px) {
  .site-header .container { padding-right: 14px; padding-left: 14px; }
  .brand { gap: 7px; }
  .brand .brand-main { width: 132px; }
  .brand .brand-partner { width: 37px; height: 43px; }
  .brand-divider { height: 29px; }
  .section-heading > p,
  .certificate-copy > p { font-size: 14px; }
  .program-top h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.floating-pill { animation:none; } }