body{margin:0;background:#F4F8F9;}
[hidden]{display:none !important}
a{color:#0E7490}a:hover{color:#155E75}
.rv *{box-sizing:border-box}
.rv{font-family:'Instrument Sans',system-ui,sans-serif;color:#0B1F26;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.rv h1,.rv h2,.rv h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-0.02em;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0}
.navlinks{display:flex;gap:28px}
.navlinks a{color:#B9D3D9;text-decoration:none;font-size:15px}
.navlinks a:hover{color:#FFFFFF}

/* hero */
.hero{position:relative;background:#0B1F26;color:#EAF4F6;overflow:hidden;padding-bottom:120px}
.herogrid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-top:56px}
.waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wave{fill:none;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.2s cubic-bezier(.6,.1,.2,1) forwards, drift 14s ease-in-out 3.2s infinite alternate}
.wave.w2{animation-delay:.35s,3.55s}
.wave.w3{animation-delay:.7s,3.9s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-18px)}}
.glow{animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.rise{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}.d5{animation-delay:.8s}
@keyframes rise{to{opacity:1;transform:none}}
.headline{font-size:clamp(44px,6.2vw,84px);line-height:.98;font-weight:800}
.headline em{font-style:normal;color:#5FD3E6}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .2s ease, background .2s ease}
.cta:hover{transform:translateY(-2px)}
.cta.primary{background:#5FD3E6;color:#0B1F26}
.cta.primary:hover{background:#8FE3F0;color:#0B1F26}
.cta.ghost{border:1px solid #2C4E57;color:#EAF4F6}
.cta.ghost:hover{background:#12313A;color:#FFFFFF}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid #24464F;font-size:13px;font-weight:600;letter-spacing:.04em;color:#D7ECF0}
.dot{width:8px;height:8px;border-radius:50%}

/* exam card mock */
.stage{position:relative;height:540px}
.examcard{position:absolute;left:4%;right:6%;top:30px;background:#FFFFFF;color:#0B1F26;border-radius:22px;padding:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(-.4deg)}}
.opt{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1.5px solid #DCE7EA;border-radius:12px;font-size:15px}
.optkey{width:30px;height:30px;border-radius:8px;background:#EEF4F6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#155E75;flex-shrink:0}
.opt.sel{border-color:#0E7490;background:#E6F5F8;animation:selpop 4s ease-in-out infinite}
.opt.sel .optkey{background:#0E7490;color:#FFFFFF}
@keyframes selpop{0%,18%{border-color:#DCE7EA;background:#FFFFFF}25%,100%{border-color:#0E7490;background:#E6F5F8}}
.bar{height:6px;border-radius:6px;background:#E3EDF0;overflow:hidden}
.barfill{height:100%;width:62%;background:#0E7490;border-radius:6px;animation:fill 4s ease-in-out infinite}
@keyframes fill{0%{width:55%}100%{width:62%}}
.saved{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#0E7490;background:#E6F5F8;padding:5px 10px;border-radius:999px}
.saved .dot{background:#0E7490;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}
.scorecard{position:absolute;z-index:2;right:0;bottom:24px;width:230px;background:#12313A;border:1px solid #24464F;border-radius:18px;padding:18px 20px;color:#EAF4F6;box-shadow:0 30px 60px -25px rgba(0,0,0,.7);animation:float 7s ease-in-out -3.5s infinite}
.ring{transform:rotate(-90deg);transform-origin:50% 50%}
.ringfill{stroke-dasharray:226;stroke-dashoffset:226;animation:ring 2.2s cubic-bezier(.2,.7,.2,1) 1.2s forwards}
@keyframes ring{to{stroke-dashoffset:34}}
.tick{position:absolute;left:-6px;top:330px;z-index:2;background:#5FD3E6;color:#0B1F26;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;animation:tickpop 4s ease-in-out infinite}
@keyframes tickpop{0%,22%{opacity:0;transform:translateY(10px) scale(.9)}30%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

/* marquee */
.marquee{background:#0E7490;color:#E6F7FA;overflow:hidden;padding:18px 0;border-top:1px solid #155E75}
.track{display:flex;gap:48px;width:max-content;animation:scroll 38s linear infinite;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;white-space:nowrap}
.track span{display:inline-flex;align-items:center;gap:48px}
.track span::after{content:'';width:8px;height:8px;border-radius:50%;background:#8FE3F0}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
.section{padding:120px 0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0E7490}
.h2{font-size:clamp(34px,4.4vw,56px);line-height:1.04;font-weight:800}
.lede{font-size:19px;line-height:1.6;color:#3E5A62;max-width:620px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.feat{background:#FFFFFF;border:1px solid #DCE7EA;border-radius:22px;padding:30px;transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;position:relative;overflow:hidden}
.feat:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(14,116,144,.45)}
.feat h3{font-size:22px;margin:22px 0 10px;font-weight:700}
.feat p{margin:0;color:#3E5A62;line-height:1.6;font-size:15.5px}
.ico{width:52px;height:52px;border-radius:14px;background:#E6F5F8;display:flex;align-items:center;justify-content:center;color:#0E7490}
.feat.wide{grid-column:span 3;display:flex;align-items:center;gap:28px}
.feat.wide h3{margin-top:0}
.feat.big{grid-column:span 2;background:#0B1F26;color:#EAF4F6;border-color:#0B1F26}
.feat.big p{color:#B9D3D9}
.feat.big .ico{background:#12313A;color:#5FD3E6}
.spin{animation:spin 12s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.hand{transform-origin:12px 13px;animation:spin 4s linear infinite}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:64px;position:relative}
.steprail{position:absolute;left:30px;right:30px;top:30px;height:2px;background:#DCE7EA;overflow:hidden}
.steprail i{display:block;height:100%;width:30%;background:#0E7490;animation:rail 3.6s ease-in-out infinite}
@keyframes rail{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.stepnum{position:relative;width:60px;height:60px;border-radius:50%;background:#0B1F26;color:#5FD3E6;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;box-shadow:0 0 0 8px #F4F8F9}
.step h3{font-size:24px;margin:26px 0 10px;font-weight:700}
.step p{margin:0;color:#3E5A62;line-height:1.6}

/* demo */
.demo{background:#FFFFFF;border-top:1px solid #DCE7EA;border-bottom:1px solid #DCE7EA}
.demogrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.qcard{background:#F4F8F9;border:1px solid #DCE7EA;border-radius:24px;padding:32px}
.qbtn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 16px;border-radius:14px;border:1.5px solid #DCE7EA;background:#FFFFFF;cursor:pointer;font-size:16px;transition:transform .15s ease, border-color .2s ease, background .2s ease}
.qbtn:hover{transform:translateX(4px)}
.qbtn:focus-visible{outline:3px solid #5FD3E6;outline-offset:2px}
.verdict{margin-top:20px;padding:16px 18px;border-radius:14px;font-size:15px;line-height:1.5;animation:rise .45s cubic-bezier(.2,.7,.2,1) forwards;opacity:0;transform:translateY(10px)}
.linkbtn{all:unset;cursor:pointer;font-weight:600;color:#0E7490;min-height:44px;display:inline-flex;align-items:center}
.linkbtn:hover{color:#155E75;text-decoration:underline}

/* levels */
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px}
.level{border-radius:22px;padding:28px 24px 30px;color:#FFFFFF;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.level:hover{transform:translateY(-8px) rotate(-.6deg)}
.level .code{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:46px;letter-spacing:-0.03em}
.level p{margin:0;line-height:1.5;font-size:15px;opacity:.92}
.level svg.bgwave{position:absolute;right:-30px;top:-10px;opacity:.18}

/* offline */
.offline{background:#0B1F26;color:#EAF4F6;position:relative;overflow:hidden}
.offgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sig rect{animation:sig 2.4s ease-in-out infinite}
.sig rect:nth-child(2){animation-delay:.2s}.sig rect:nth-child(3){animation-delay:.4s}.sig rect:nth-child(4){animation-delay:.6s}
@keyframes sig{0%,100%{opacity:1}50%{opacity:.25}}
.toggle{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid #2C4E57;font-weight:600;color:#EAF4F6}
.toggle:hover{background:#12313A}
.toggle:focus-visible{outline:3px solid #5FD3E6;outline-offset:2px}
.knob{width:40px;height:22px;border-radius:999px;position:relative;transition:background .25s}
.knob i{position:absolute;top:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:left .25s cubic-bezier(.2,.7,.2,1)}
.device{background:#FFFFFF;color:#0B1F26;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.banner{padding:12px 18px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;animation:slide .35s ease forwards}
@keyframes slide{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.chk{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #1E3E47}
.chk:last-child{border-bottom:0}

/* admin */
.admingrid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.upload{background:#FFFFFF;border:1.5px dashed #9CC6CF;border-radius:24px;padding:32px;position:relative;overflow:hidden}
.paper{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#F4F8F9;border-radius:14px;margin-top:12px}
.paperbar{flex:1;height:6px;background:#DCE7EA;border-radius:6px;overflow:hidden}
.paperbar i{display:block;height:100%;background:#0E7490;border-radius:6px;animation:load 3s ease-in-out infinite}
.paperbar.b2 i{animation-delay:.6s}.paperbar.b3 i{animation-delay:1.2s}
@keyframes load{0%{width:0}70%,100%{width:100%}}

/* final cta */
.final{background:#0E7490;color:#FFFFFF;position:relative;overflow:hidden;text-align:center}
.final .h2{color:#FFFFFF}
.cta.light{background:#FFFFFF;color:#0B1F26}
.cta.light:hover{background:#E6F5F8;color:#0B1F26}
.foot{background:#071419;color:#8FB0B8;padding:48px 0;font-size:14px}
.foot a{color:#B9D3D9;text-decoration:none}
.foot a:hover{color:#FFFFFF}

/* exam day photo section */
.examday{position:relative;overflow:hidden;background:#0B1F26;color:#FFFFFF;min-height:640px;display:flex;align-items:center}
/* Drift via object-position, not transform: an animated transform on this
   full-bleed <img> left it unpainted in some Chromium builds (e.g. Electron). */
.examday-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;animation:drift-photo 20s ease-in-out infinite alternate}
@keyframes drift-photo{from{object-position:40% 30%}to{object-position:75% 70%}}
.examday-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,31,38,.94) 0%,rgba(11,31,38,.82) 38%,rgba(11,31,38,.25) 72%,rgba(11,31,38,.15) 100%)}
.examday-inner{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-top:120px;padding-bottom:120px}
.examday-copy{max-width:600px}
.examday-title{margin-top:16px;color:#FFFFFF}
.examday-title em{font-style:normal;color:#5FD3E6}
.examday-lede{font-size:19px;line-height:1.6;color:#D3E7EC;margin:22px 0 0;max-width:540px}
.examday-chip{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;background:rgba(11,31,38,.72);border:1px solid rgba(143,227,240,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:float 7s ease-in-out infinite;flex-shrink:0}
.examday-credit{position:absolute;right:16px;bottom:10px;margin:0;font-size:11px;color:rgba(255,255,255,.6)}
/* hero background photo: students behind the headline, under a teal wash */
.herobg{position:absolute;inset:0;overflow:hidden}
.herobg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.herobg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,31,38,.93) 0%,rgba(11,31,38,.82) 42%,rgba(11,31,38,.55) 70%,rgba(11,31,38,.7) 100%),linear-gradient(0deg,rgba(11,31,38,.9) 0%,rgba(11,31,38,0) 30%)}
.herocredit{position:absolute;right:16px;bottom:12px;margin:0;z-index:1;font-size:11px;color:rgba(255,255,255,.6)}

@media (max-width:980px){
.examday-shade{background:linear-gradient(0deg,rgba(11,31,38,.96) 0%,rgba(11,31,38,.85) 55%,rgba(11,31,38,.35) 100%)}
.examday-inner{flex-direction:column;align-items:flex-start;padding-top:260px;padding-bottom:80px}
.examday-chip{display:none}
.herobg::after{background:linear-gradient(180deg,rgba(11,31,38,.78) 0%,rgba(11,31,38,.9) 45%,rgba(11,31,38,.96) 100%)}
.examday-photo{object-position:72% 70%}
}

@media (max-width:980px){
.herogrid,.demogrid,.offgrid,.admingrid{grid-template-columns:1fr}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat.wide{grid-column:span 2}
.navlinks{display:none}
.stage{height:520px}
}
@media (max-width:640px){
.fgrid,.lgrid,.steps{grid-template-columns:1fr}
.feat.big,.feat.wide{grid-column:span 1}
.feat.wide{flex-direction:column;align-items:flex-start;gap:0}
.feat.wide h3{margin-top:22px}
.tick{display:none}
.scorecard{bottom:0}
.stage{height:500px}
.examcard{left:0;right:0}
.scorecard{width:200px}
.steprail{display:none}
.section{padding:80px 0}
.navcta{display:none}
}
@media (prefers-reduced-motion:reduce){
.rv *,.rv *::before,.rv *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
.wave{stroke-dashoffset:0}
}

/* runtime states (set by landing.js) */
.qkey{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;background:#EEF4F6;color:#155E75}
.qmark{font-weight:700}
.qbtn.is-right{border-color:#059669;background:#ECFDF5}
.qbtn.is-right .qkey{background:#059669;color:#FFFFFF}
.qbtn.is-right .qmark{color:#047857}
.qbtn.is-wrong{border-color:#DC2626;background:#FEF2F2}
.qbtn.is-wrong .qkey{background:#DC2626;color:#FFFFFF}
.qbtn.is-wrong .qmark{color:#B91C1C}
.knob{background:#24464F}.knob i{left:3px}
.is-offline .knob{background:#F59E0B}.is-offline .knob i{left:21px}
.sig rect{fill:#0E7490}.is-offline .sig rect{fill:#CBD5D9;animation:none}
.status{color:#0E7490}.is-offline .status{color:#B45309}
.submit{background:#0E7490;color:#FFFFFF}.is-offline .submit{background:#E3EDF0;color:#8AA2A8}