:root{
  --navy:#0A1F4E; --navy-2:#0D2A66; --blue:#1E6BFF; --blue-2:#155AE0; --blue-soft:#E8F0FF; --sky:#EAF3FF;
  /* --text-3 was #7C879F, which is only 3.6:1 on white and 3.4:1 on the cream
     note background — below the 4.5:1 WCAG AA minimum. #626D87 keeps the same
     blue-grey but reaches 5.1:1 on white and 4.9:1 on cream. */
  --text:#0F1B3D; --text-2:#4A5678; --text-3:#626D87; --border:#E4EAF5; --card:#fff; --bg:#F5F8FD;
  --green:#22B45A; --green-soft:#E3F6EA; --orange:#FF8A1F; --orange-soft:#FFF1E0; --pink:#F0457A; --pink-soft:#FDE7EF;
  --purple:#7C5CFC; --purple-soft:#EFEAFF; --teal:#14B8A6; --teal-soft:#DDF6F2; --yellow:#FFB020;
  --r:16px; --shadow:0 6px 24px -10px rgba(15,40,100,.18); --shadow-h:0 18px 40px -14px rgba(15,40,100,.28);
  /* System font stack — whatever the visitor's OS already uses (Segoe UI on Windows,
     San Francisco on Mac, Roboto on Android). Nothing to download. */
  --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --head:var(--sys); --body:var(--sys); --script:'Caveat',cursive;
  --wrap:1480px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--head);line-height:1.25;letter-spacing:-.01em}
/* Menu and footer labels look like headings but are not part of the page
   outline; as <h4> they put three headings before the <h1> on every page
   and broke the h2 -> h3 -> h4 order a screen reader navigates by. */
.m-h,.f-h{margin:0;font-weight:700}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
svg.lucide{width:18px;height:18px;stroke-width:2}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ================= HEADER ================= */
.hdr{position:sticky;top:0;z-index:100;background:var(--navy);transition:box-shadow .25s, background .25s}
.hdr.scrolled{background:rgba(10,31,78,.96);backdrop-filter:blur(10px);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.hdr .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand svg{width:48px;height:48px}
.b-mark{width:44px;height:auto;flex:none}
.b-txt{display:flex;flex-direction:column;justify-content:center}
.b-word{width:116px;height:auto;display:block}
.brand b{display:block;font:800 27px/1 var(--head);letter-spacing:.5px;color:#fff}
.brand small{display:block;font-size:12.5px;color:#C9D6F2;margin-top:3px;letter-spacing:.2px}
.nav{display:flex;align-items:stretch;gap:0;height:100%;margin-left:20px}
.nav>li{list-style:none;position:static;display:flex}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:4px;padding:0 10px;font-size:14px;font-weight:600;color:#E6ECFA;position:relative;white-space:nowrap}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{color:#fff}
.nav>li>button svg{width:14px;height:14px;transition:transform .2s}
.nav>li.open>button svg{transform:rotate(180deg)}
.nav .active::after{content:"";position:absolute;left:11px;right:11px;bottom:10px;height:3px;border-radius:3px;background:#3F8CFF}
.search{flex:1 1 180px;min-width:0;max-width:300px;margin-left:auto;display:flex;align-items:center;height:38px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:0 6px 0 16px;transition:.2s}
.search:focus-within{background:rgba(255,255,255,.16);border-color:#5B9BFF}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:14.5px var(--body)}
.search input::placeholder{color:#AFC0E6}
.search button{width:30px;height:30px;display:grid;place-items:center;color:#DCE6FA}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:10px;font:600 15px var(--body);white-space:nowrap;transition:transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 22px -10px rgba(30,107,255,.9)}
.btn-primary:hover{background:var(--blue-2);transform:translateY(-1px)}
.btn-line{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn-line:hover{background:#fff;color:var(--navy)}
.btn-outline{border:1.5px solid var(--blue);color:var(--blue);background:#fff}
.btn-outline:hover{background:var(--blue-soft)}
.hdr .btn{height:38px;padding:0 18px;font-size:14px}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;color:#fff;place-items:center}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;pointer-events:none}
.mega-panel{position:absolute;top:-6px;left:calc(50% - 360px);width:752px;background:#fff;border-radius:16px;box-shadow:0 30px 60px -20px rgba(10,31,78,.35);
  display:grid;grid-template-columns:1fr 1fr 1.2fr;opacity:0;transform:translateY(8px);transition:opacity .18s, transform .18s;pointer-events:none}
.mega.show .mega-panel{opacity:1;transform:none;pointer-events:auto}
.mcol{padding:18px 16px 16px;border-right:1px solid var(--border)}
.mcol:last-child{border:0}
.mcol.hl{background:linear-gradient(180deg,#F5F9FF,#fff)}
.mcol .m-h{display:flex;align-items:center;gap:10px;font:700 15.5px var(--head);margin-bottom:12px}
.mcol .m-h small{font:400 11.5px var(--body);color:var(--text-3)}
.ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.ic svg{width:18px;height:18px}
.mlink{display:flex;gap:12px;align-items:flex-start;padding:8px;border-radius:10px;transition:background .15s}
.mlink:hover{background:var(--bg)}
.mlink b{display:block;font-size:14.5px;font-weight:600}
/* :not(.ic) throughout — these descendant rules are more specific than .ic, so
   without it they turn the icon badge into a block and the svg drops to its
   top-left corner instead of staying centred. */
.mlink span:not(.ic){display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.mlink .ic{width:32px;height:32px;border-radius:9px}
.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px;margin-top:4px}
.disc b{font-size:14px;font-weight:700;display:block;margin:4px 0 8px}
.disc a{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);padding:4px 0}
.disc a:hover{color:var(--blue)}
.disc a svg{width:12px;height:12px;color:var(--blue)}
.dd{position:absolute;top:calc(100% - 6px);min-width:220px;background:#fff;border-radius:14px;box-shadow:0 24px 50px -18px rgba(10,31,78,.35);padding:8px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}
.nav>li.open .dd{opacity:1;transform:none;pointer-events:auto}
.dd a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--text)}
.dd a:hover{background:var(--bg);color:var(--blue)}
.dd a svg{width:16px;height:16px;color:var(--blue)}
.nav>li.rel{position:relative}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 500px at 70% 0%,#DCEBFF 0%,transparent 60%),
  radial-gradient(800px 380px at 10% 110%,#EAF6FF 0%,transparent 60%),
  linear-gradient(180deg,#EEF5FF 0%,#F6FAFF 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px;min-height:350px;position:relative}
.cloud{position:absolute;border-radius:50%;background:#fff;filter:blur(18px);opacity:.75}
.hero-copy{padding:26px 0 46px;position:relative;z-index:2}
.script{font:700 30px/1.02 var(--script);color:var(--navy);transform:rotate(-7deg);transform-origin:left;display:inline-block;margin:6px 0 18px 4px}
.script em{font-style:normal;display:block;padding-left:18px}
.script::after{content:"";display:block;height:3px;width:170px;margin:4px 0 0 60px;border-radius:3px;background:linear-gradient(90deg,var(--yellow),transparent)}
.hero h1{font:700 clamp(30px,3.1vw,42px)/1.12 var(--head);letter-spacing:-.5px}
.hero h1 .l2{display:block;color:var(--navy)}
.hero h1 .l2 span{color:var(--blue)}
.hero p.lead{font-size:16px;line-height:1.6;color:var(--text-2);margin:18px 0 26px;max-width:460px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-ctas .btn{height:46px;border-radius:24px;padding:0 22px}
.btn-video{border:1.5px solid var(--blue);color:var(--blue);background:#fff}
.btn-video:hover{background:var(--blue-soft)}
.btn-video .play{width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff}
.btn-video .play svg{width:10px;height:10px;fill:#fff}
.hero-art{position:relative;min-height:350px}
.hero-photo{position:absolute;right:170px;bottom:0;width:min(760px,100%);aspect-ratio:1120/384;background:url(hero-students.jpg) center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%),linear-gradient(0deg,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);
  mask-composite:intersect}
.lga{position:absolute;right:40px;top:24px;font:700 38px/1 var(--script);color:var(--navy);transform:rotate(-12deg);text-align:left;z-index:3}
.lga span{display:block}.lga span:nth-child(2){padding-left:22px}.lga span:nth-child(3){padding-left:44px}
.plane{position:absolute;right:30px;top:28px;width:150px;height:110px;z-index:3;overflow:visible}
.plane .trail{stroke:var(--blue);stroke-width:2;fill:none;stroke-dasharray:6 7;animation:dash 20s linear infinite}
.plane .p{animation:fly 4s ease-in-out infinite}
@keyframes dash{to{stroke-dashoffset:-400}}
@keyframes fly{50%{transform:translate(4px,-6px) rotate(-3deg)}}
.trust{position:absolute;right:0;bottom:24px;width:160px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:14px;box-shadow:var(--shadow);padding:6px 12px;z-index:3}
.trust div{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.trust div:last-child{border:0}
.trust .ic{width:32px;height:32px;border-radius:50%}
.trust small{font-size:11.5px;color:var(--text-2);display:block}
.trust b{font-size:14px;font-weight:700}

/* ================= SECTIONS ================= */
main section{position:relative}
.block{background:linear-gradient(180deg,#F3F7FE,#F7FAFF);border:1px solid var(--border);border-radius:20px;padding:20px 22px 22px}
.block-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.block-head .big{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none}
.block-head .big svg{width:26px;height:26px}
.block-head h2{font:700 20px var(--head)}
.block-head p{font-size:14.5px;color:var(--text-2);margin-top:3px}
.view{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.view svg{width:14px;height:14px;transition:transform .15s}
.view:hover svg{transform:translateX(3px)}
.row1{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1.1fr) minmax(0,.55fr);gap:18px;padding:18px 0}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* The For Students tiles sit in the narrow middle column of the home row, which
   is only ~450px wide on a large screen. Three columns left ~145px per tile, so
   titles broke over three lines and the descriptions over five. Two columns give
   each tile ~225px and the text reads normally. */
.cards3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;transition:transform .2s, box-shadow .2s, border-color .2s;min-width:0}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:#CFDDF7}
.inst .ic{width:44px;height:44px;border-radius:12px;margin-bottom:14px}
.inst .ic svg{width:24px;height:24px}
.inst h3{font:700 17px var(--head)}
.inst p{font-size:14px;color:var(--text-2);line-height:1.55;margin:8px 0 14px;min-height:40px}
.pill-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--blue);border:1px solid #CFDDF7;border-radius:8px;padding:5px 10px;transition:.15s}
.pill-link svg{width:12px;height:12px}
.card:hover .pill-link{background:var(--blue);color:#fff;border-color:var(--blue)}
.stu{display:flex;gap:12px;align-items:flex-start;padding:14px 12px}
.stu .ic{width:38px;height:38px;border-radius:50%}
.stu b{display:block;font-size:14.5px;font-weight:600}
.stu span:not(.ic){display:block;font-size:13px;color:var(--text-3);margin-top:4px;line-height:1.45}
.quick a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:14.5px;font-weight:500;transition:.15s}
.quick a:hover{border-color:var(--blue);color:var(--blue);transform:translateX(3px)}
.quick a:last-child{margin:0}
.quick .ic{width:28px;height:28px;border-radius:8px}
.quick .ic svg{width:15px;height:15px}
.quick a>svg{margin-left:auto;width:15px;height:15px;color:var(--text-3)}

.row2{display:grid;grid-template-columns:minmax(0,344px) minmax(0,1fr);gap:18px;padding-bottom:18px}
.find{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,#0E3A8C 0%,#0A2463 55%,#081A48 100%);color:#fff;display:flex;align-items:stretch;min-height:152px}
.find::before{content:"";position:absolute;inset:0;background:radial-gradient(260px 160px at 20% 30%,rgba(63,140,255,.45),transparent 70%)}
.find img{position:relative;width:140px;object-fit:cover;object-position:top;align-self:flex-end}
.find .t{position:relative;padding:18px 18px 18px 6px}
.find h3{font:700 19px/1.2 var(--head)}
.find p{font-size:13px;color:#C9D6F2;margin:8px 0 12px;line-height:1.5}
.find .btn{height:32px;border-radius:18px;background:#fff;color:var(--blue);font-size:13.5px;padding:0 16px}
.find .btn:hover{background:var(--blue-soft)}
.disco{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px 16px}
.disco h2{font:700 17px var(--head);margin-bottom:12px}
.cards7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.dcard{padding:14px 12px 12px}
.dcard .ic{width:44px;height:44px;border-radius:50%;margin-bottom:12px}
.dcard .ic svg{width:22px;height:22px}
.dcard b{display:block;font-size:14.5px;font-weight:600}
.dcard span:not(.ic){display:block;font-size:12.5px;color:var(--text-3);margin-top:4px}
.dcard .go{margin-top:10px;color:var(--blue);display:block}
.dcard .go svg{width:14px;height:14px;transition:transform .15s}
.dcard:hover .go svg{transform:translateX(4px)}

.method{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(6,minmax(0,1fr)) auto;align-items:center;background:linear-gradient(90deg,#E4F7F1,#EAF7F3);border:1px solid #CDEDE3;border-radius:16px;padding:12px 16px;margin-bottom:28px;gap:0}
.method>div{display:flex;align-items:center;gap:10px;padding:4px 12px;border-right:1px solid #CDEDE3;min-width:0}
.method>div:first-child{padding-left:0}
.method>div:nth-last-child(2){border:0}
.method .ic{width:30px;height:30px;border-radius:9px;background:#fff;color:#12946C}
.method .ic svg{width:16px;height:16px}
.method .lead .ic{width:48px;height:48px;border-radius:50%;background:#CFF0E3}
.method .lead .ic svg{width:26px;height:26px}
.method b{display:block;font-size:14px;font-weight:600}
.method .lead b{font:700 16px var(--head)}
.method span:not(.ic){display:block;font-size:11.5px;color:#4F7A6A;margin-top:2px}
.method .btn{height:34px;font-size:13.5px;border-radius:9px;background:#fff;border:1.5px solid #12946C;color:#0F7A5A;padding:0 14px}
.method .btn:hover{background:#12946C;color:#fff}

/* ================= FOOTER ================= */
.band{background:linear-gradient(90deg,#0A1F4E,#0D2A66 60%,#0A1F4E);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at 50% 0,rgba(63,140,255,.25),transparent 70%)}
.band .wrap{position:relative;display:flex;align-items:center;gap:40px;min-height:88px;padding-top:12px;padding-bottom:12px}
.stats{display:flex;gap:56px;margin:0 auto}
.stats div{display:flex;align-items:center;gap:14px}
.stats .ic{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
.stats .ic svg{width:24px;height:24px}
.stats b{display:block;font:700 22px var(--head)}
.stats span{font-size:14.5px;color:#C9D6F2}
.band .cta{display:flex;align-items:center;gap:22px}
.band .cta p{font-size:15px;color:#E6ECFA}
.band .btn{border-radius:24px}
.foot{background:#081A42;color:#AFC0E6;font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-top:36px;padding-bottom:28px}
.foot .f-h{color:#fff;font:600 15px var(--head);margin-bottom:12px}
.foot a{display:block;padding:4px 0;color:#AFC0E6}
.foot a:hover{color:#fff}
/* WCAG 2.5.8 wants a 24x24 target for a link that is not inline in a sentence.
   Measured across nine screen sizes, the footer, top bar and city lists came
   out 20-22px tall — padding and a floor rather than bigger text, so nothing
   in the layout moves more than a couple of pixels. */
.foot a, .foot .flink{padding:5px 0;min-height:24px}
.topbar a, .tb-mail, .fcities a, .copy a{display:inline-flex;align-items:center;min-height:24px}
.crumbs a, .fd-pop a{display:inline-flex;align-items:center;min-height:24px}
.view, .rv-more, .check{min-height:24px}
.check{display:flex;align-items:flex-start}
.search input{min-height:24px}
.foot .copy{border-top:1px solid rgba(255,255,255,.08)}
.foot .copy .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:18px;grid-template-columns:none;flex-wrap:wrap}
.social{display:flex;gap:8px;margin-top:14px}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;padding:0}
.social a:hover{background:var(--blue)}
.social svg{width:16px;height:16px}

/* ================= VIDEO MODAL ================= */
.modal{position:fixed;inset:0;z-index:200;background:rgba(6,16,40,.7);backdrop-filter:blur(4px);display:none;place-items:center;padding:20px}
.modal.show{display:grid;animation:fade .2s}
.modal-box{width:min(880px,100%);aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;position:relative;animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
.modal-box .x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;z-index:2}
.modal-box .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#AFC0E6;font-size:15px;background:linear-gradient(135deg,#0D2A66,#081A42)}
@keyframes fade{from{opacity:0}} @keyframes pop{from{opacity:0;transform:scale(.96)}}

/* ================= ANIMATION ================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.hero-copy>*{animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}
.hero-photo{animation:rise 1s .1s cubic-bezier(.2,.8,.2,1) both}
.trust{animation:up .8s .35s cubic-bezier(.2,.8,.2,1) both}
.lga{animation:up .8s .25s both}
@keyframes up{from{opacity:0;transform:translateY(20px)}}
@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.98)}}
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.stagger>*{opacity:1;transform:none}}

/* ================= MOBILE NAV ================= */
.drawer{position:fixed;inset:0;z-index:150;pointer-events:none;visibility:hidden;overflow:hidden;transition:visibility 0s .25s}
.drawer.open{visibility:visible;transition:none}
.drawer .bg{position:absolute;inset:0;background:rgba(6,16,40,.5);opacity:0;transition:.2s}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88%);background:#fff;transform:translateX(100%);transition:transform .25s;overflow:auto;padding:16px}
.drawer.open{pointer-events:auto}.drawer.open .bg{opacity:1}.drawer.open .panel{transform:none}
.drawer details{border-bottom:1px solid var(--border)}
.drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-weight:600;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer details a{display:block;padding:8px 12px;font-size:15px;color:var(--text-2)}
.drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

/* ================= RESPONSIVE ================= */
@media (max-width:1480px){ .nav>li>a,.nav>li>button{padding:0 8px;font-size:14.5px} .nav{margin-left:8px} }
@media (max-width:1400px){ .cards7{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1280px){
  .row1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .row1 .inst-block{grid-column:1/-1}
  .method{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:10px}.method>div{border:0}.method .lead{grid-column:1/-1}.method .btn{grid-column:auto}
  .trust{display:none} .hero-photo{right:0} .lga{right:10px}
}
@media (max-width:1240px){ .hdr .search{display:none} }
@media (max-width:1100px){
  .nav,.search,.hdr .btn-line,.mega{display:none} .menu-btn{display:grid;margin-left:auto}
  .hero .wrap{grid-template-columns:1fr} .hero-art{min-height:260px} .hero-photo{position:relative;right:auto;width:100%;margin-top:-10px} .lga,.plane{display:none}
  .row2{grid-template-columns:1fr} .stats{gap:28px} .band .wrap{flex-wrap:wrap;justify-content:center;text-align:center}
  .foot .wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .wrap{padding:0 16px} .hdr .btn-primary{display:none}
  .row1{grid-template-columns:1fr} .cards4{grid-template-columns:repeat(2,minmax(0,1fr))} .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards7{grid-template-columns:repeat(2,minmax(0,1fr))} .method{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{flex-direction:column;gap:14px;align-items:flex-start} .band .cta{flex-direction:column}
  .foot .wrap{grid-template-columns:1fr}
  .brand svg{width:40px;height:40px} .brand b{font-size:22px} .b-mark{width:42px} .b-word{width:110px}
  .find img{width:110px}
}

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.phero{position:relative;overflow:hidden;background:radial-gradient(900px 360px at 80% -40%,#DCEBFF,transparent 70%),linear-gradient(180deg,#EEF5FF,#F6FAFF);border-bottom:1px solid var(--border)}
.phero .wrap{padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:center}
.phero.center .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
.crumbs{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--text-3);margin-bottom:10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--blue)}
.crumbs svg{width:12px;height:12px}
/* --blue on --blue-soft is 3.98:1, just under AA. --blue-2 is the darker brand
   blue already in the palette and reaches 5.1:1 on the same background. */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--blue-2);background:var(--blue-soft);padding:5px 12px;border-radius:20px;margin-bottom:12px}
.eyebrow svg{width:14px;height:14px}
.phero h1{font:700 clamp(28px,3vw,40px)/1.15 var(--head);letter-spacing:-.4px}
.phero h1 span{color:var(--blue)}
.phero p.lead{font-size:16px;line-height:1.65;color:var(--text-2);margin:14px 0 22px;max-width:620px}
.phero.center p.lead{margin-left:auto;margin-right:auto}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.phero.center .ctas{justify-content:center}
.phero .ctas .btn{height:46px;border-radius:24px}
.phero-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-h);padding:20px}
.sec{padding:44px 0}
.sec.alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 28px}
.sec-head h2{font:700 clamp(22px,2.2vw,30px)/1.2 var(--head)}
.sec-head p{font-size:15.5px;color:var(--text-2);margin-top:8px;line-height:1.6}
.sec-head.left{text-align:left;margin-left:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{padding:20px}
.feat .ic{width:46px;height:46px;border-radius:12px;margin-bottom:14px}
.feat .ic svg{width:22px;height:22px}
.feat h3{font:700 17px var(--head)}
.feat p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-top:6px}
.ticks{list-style:none;display:grid;gap:8px;margin-top:10px}
.ticks li{display:flex;gap:8px;font-size:14.5px;color:var(--text-2);line-height:1.5}
.ticks li svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:7px 12px;border-radius:20px;background:#fff;border:1px solid var(--border);color:var(--text-2)}
.chip svg{width:14px;height:14px;color:var(--blue)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step{position:relative;padding:20px}
.step::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:700 15px var(--head);margin-bottom:12px}
.step h3{font:700 16px var(--head)}
.step p{font-size:14px;color:var(--text-2);margin-top:6px;line-height:1.55}
.cta-band{border-radius:22px;background:linear-gradient(120deg,#0E3A8C,#0A2463 60%,#081A48);color:#fff;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 85% 20%,rgba(63,140,255,.4),transparent 70%)}
.cta-band>*{position:relative}
.cta-band h2{font:700 24px var(--head)}
.cta-band p{color:#C9D6F2;font-size:15px;margin-top:6px}
.cta-band .btn-w{background:#fff;color:var(--blue)}
.cta-band .btn-w:hover{background:var(--blue-soft)}
/* accordion */
.acc details{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-weight:600;font-size:15px}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:18px;height:18px;color:var(--blue);transition:transform .2s;flex:none}
.acc details[open] summary svg{transform:rotate(45deg)}
.acc .a{padding:0 16px 14px;font-size:15px;color:var(--text-2);line-height:1.65}
/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form .full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:13.5px;font-weight:600;color:var(--text-2)}
.f label em{color:#E03E55;font-style:normal}
.f input,.f select,.f textarea{height:44px;border:1px solid #D5DCEA;border-radius:10px;padding:0 14px;font:15px var(--body);color:var(--text);background:#fff;outline:0;transition:.15s;width:100%}
.f textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.12)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:#E03E55;box-shadow:0 0 0 4px rgba(224,62,85,.08)}
.f .err{font-size:13px;color:#C42A40;min-height:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-2);line-height:1.5}
.check input{width:17px;height:17px;accent-color:var(--blue);margin-top:1px;flex:none}
.done{display:none;text-align:center;padding:24px}
.done .ic{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green);margin:0 auto 12px}
.done .ic svg{width:32px;height:32px}
.done h3{font:700 20px var(--head)}
.done p{font-size:15px;color:var(--text-2);margin-top:6px}
form.sent>*{display:none}form.sent .done{display:block}
/* tabs & segmented */
.tabs2{display:inline-flex;background:#EEF2FA;border-radius:12px;padding:4px;gap:4px;margin-bottom:18px}
.tabs2 button{height:38px;padding:0 16px;border-radius:9px;font-weight:600;font-size:15px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.tabs2 button svg{width:16px;height:16px}
.tabs2 button.on{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(15,40,100,.1)}
/* listing */
.listing{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;align-items:start}
.filters{position:sticky;top:84px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}
.filters .filters-h{font:700 16px var(--head);display:flex;justify-content:space-between;align-items:center}
.filters .filters-h button{font:600 13.5px var(--body);color:var(--blue)}
.filters .grp{border-top:1px solid var(--border);padding-top:12px;margin-top:12px}
.filters .grp b{display:block;font-size:14px;margin-bottom:8px}
.filters label.c{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--text-2);padding:4px 0;cursor:pointer}
.filters input[type=checkbox],.filters input[type=radio]{accent-color:var(--blue);width:16px;height:16px}
.filters input[type=range]{width:100%;accent-color:var(--blue)}
.lbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.lbar .sbox{flex:1 1 280px;display:flex;align-items:center;gap:8px;height:44px;background:#fff;border:1px solid #D5DCEA;border-radius:12px;padding:0 14px}
.lbar .sbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.12)}
.lbar .sbox input{flex:1;min-width:0;border:0;outline:0;font:15px var(--body);background:transparent}
.lbar .sbox svg{color:var(--text-3)}
.lbar select{height:44px;border:1px solid #D5DCEA;border-radius:12px;padding:0 12px;font:15px var(--body);background:#fff;color:var(--text)}
.count{font-size:14.5px;color:var(--text-2)}
.inst-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.icard{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px}
.icard .logo{width:84px;height:84px;border-radius:14px;display:grid;place-items:center;font:700 24px var(--head);color:#fff}
.icard h3{font:700 16.5px var(--head);display:flex;align-items:center;gap:6px}
.icard h3 .v{width:16px;height:16px;color:var(--blue)}
.icard .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--text-3);margin-top:4px}
.icard .meta span{display:inline-flex;align-items:center;gap:4px}
.icard .meta svg{width:13px;height:13px}
.icard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:12px;background:var(--bg);color:var(--text-2);border:1px solid var(--border)}
.tag.b{background:var(--blue-soft);color:var(--blue);border-color:#CFDDF7}
.tag.g{background:var(--green-soft);color:#15803D;border-color:#BFE8CD}
.icard .foot2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.score{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#15803D}
.score b{background:#15803D;color:#fff;padding:2px 7px;border-radius:7px;font-size:13.5px}
.fee{font-size:14.5px;font-weight:700}
.fee small{font-weight:500;color:var(--text-3)}
.mini{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:9px;font-size:13.5px;font-weight:600;border:1px solid #CFDDF7;color:var(--blue);background:#fff;transition:.15s}
.mini:hover,.mini.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.mini svg{width:14px;height:14px}
.pager2{display:flex;justify-content:center;gap:6px;margin-top:18px}
.pager2 button{min-width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;font-weight:600;font-size:14.5px}
.pager2 button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pager2 button:disabled{opacity:.4}
.cmpbar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,120%);transition:transform .25s;z-index:90;background:var(--navy);color:#fff;border-radius:16px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);padding:10px 12px 10px 18px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px)}
.cmpbar.show{transform:translate(-50%,0)}
.cmpbar .items{display:flex;gap:6px;flex-wrap:wrap}
.cmpbar .items span{font-size:13.5px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:12px;white-space:nowrap}
.empty2{grid-column:1/-1;text-align:center;padding:40px;color:var(--text-3);background:#fff;border:1px dashed #D5DCEA;border-radius:16px}
.empty2 b{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
/* tables */
.tbl-wrap{overflow-x:auto;background:#fff;border:1px solid var(--border);border-radius:16px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.tbl th{background:#F7FAFF;text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-2);padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid #F0F3F9;vertical-align:middle}
.tbl tr:last-child td{border:0}
.tbl tbody tr:hover{background:#FAFCFF}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.rank{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:700 15px var(--head);background:var(--bg)}
.rank.r1{background:#FFF4D6;color:#B7791F}.rank.r2{background:#EEF1F6;color:#5B6785}.rank.r3{background:#FCE9DC;color:#B45F2A}
.bar{height:8px;border-radius:5px;background:#EDF1F8;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--blue),#5B9BFF);width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.in .bar i,.bar.in i{width:var(--w)}
/* compare */
.cmp th:first-child,.cmp td:first-child{position:sticky;left:0;background:#fff;font-weight:600;color:var(--text-2);z-index:1}
.cmp thead th:first-child{background:#F7FAFF}
.cmp td{min-width:200px}
.best{color:#15803D;font-weight:700}
/* quiz */
.quiz{max-width:760px;margin:0 auto}
.qprog{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;color:var(--text-2);margin-bottom:8px}
.qbar{height:8px;border-radius:5px;background:#E3EAF7;overflow:hidden;margin-bottom:18px}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#5B9BFF);transition:width .35s}
.qcard{padding:24px}
.qcard h3{font:600 18px/1.45 var(--head)}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid #D5DCEA;border-radius:12px;font-size:15px;text-align:left;background:#fff;transition:.15s;width:100%}
.opt:hover{border-color:var(--blue);background:#F7FAFF}
.opt .k{width:28px;height:28px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-weight:700;font-size:13.5px;flex:none}
.opt.sel{border-color:var(--blue);background:var(--blue-soft)}
.opt.sel .k{background:var(--blue);color:#fff}
.opt.right{border-color:var(--green);background:var(--green-soft)}
.opt.wrong{border-color:#E03E55;background:#FDE8EB}
.qnav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.result{text-align:center;padding:28px}
.ring{width:150px;height:150px;margin:0 auto 12px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 30px var(--head)}
.timer{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.timer svg{width:16px;height:16px}
/* chat */
.chat{display:flex;flex-direction:column;height:560px;padding:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,#F5F9FF,#fff)}
.chat-head .ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#7C5CFC,#1E6BFF);color:#fff}
.chat-head b{display:block;font:700 16px var(--head)}
.chat-head small{font-size:13.5px;color:#15803D}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#FAFCFF}
.msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.55;animation:up .25s both}
.msg.bot{background:#fff;border:1px solid var(--border);border-top-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:4px}
.typing{display:inline-flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:bl 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.3;transform:translateY(-3px)}}
.sugg{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px 0;background:#FAFCFF}
.sugg button{font-size:14px;padding:6px 12px;border-radius:16px;border:1px solid #CFDDF7;color:var(--blue);background:#fff}
.sugg button:hover{background:var(--blue-soft)}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:#fff}
.chat-in input{flex:1;height:44px;border:1px solid #D5DCEA;border-radius:12px;padding:0 14px;font:15px var(--body);outline:0}
.chat-in input:focus{border-color:var(--blue)}
.chat-in button{width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center}
/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:22px}
.rng{margin-bottom:18px}
.rng .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:15px;font-weight:600}
.rng .top output{background:var(--blue-soft);color:var(--blue);padding:4px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.rng input{width:100%;accent-color:var(--blue)}
.emi-out{text-align:center;background:linear-gradient(160deg,#F5F9FF,#fff)}
.emi-out .big{font:700 34px var(--head);color:var(--blue);margin:6px 0 14px}
.split{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:14px 0 8px}
.split i{display:block;transition:width .4s}
.kv{display:flex;justify-content:space-between;font-size:15px;padding:8px 0;border-bottom:1px dashed var(--border)}
.kv:last-child{border:0}
.kv b{font-variant-numeric:tabular-nums}
/* profile */
.pro-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pro-head .logo{width:96px;height:96px;border-radius:22px;display:grid;place-items:center;font:700 30px var(--head);color:#fff;flex:none}
.pro-head h1{font:700 28px var(--head)}
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.kpi-row div{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.kpi-row small{font-size:12.5px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kpi-row b{display:block;font:700 20px var(--head);margin-top:2px}
.sbar{display:grid;grid-template-columns:130px minmax(0,1fr) 42px;align-items:center;gap:10px;font-size:14.5px;padding:6px 0}
.sbar b{text-align:right;font-variant-numeric:tabular-nums}
/* blog */
.post{padding:0;overflow:hidden}
.post .img{height:160px;display:grid;place-items:center;color:#fff}
.post .img svg{width:44px;height:44px;opacity:.9}
.post .b{padding:16px}
.post .b small{font-size:13px;color:var(--text-3);font-weight:600}
.post h3{font:700 17px/1.35 var(--head);margin:6px 0}
.post p{font-size:14.5px;color:var(--text-2);line-height:1.6}
.jobs .job{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;flex-wrap:wrap}
.jobs .job h3{font:700 17px var(--head)}
.jobs .job .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--text-3);margin-top:4px}
.legal{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px}
.legal h2{font:700 18px var(--head);margin:22px 0 8px}
.legal p,.legal li{font-size:15px;line-height:1.75;color:var(--text-2)}
.legal ul{padding-left:20px}
.note-s{font-size:13.5px;color:var(--text-3);background:#FFF8EA;border:1px solid #FFE1A8;border-radius:10px;padding:8px 12px;display:flex;gap:8px;align-items:flex-start}
.note-s svg{width:14px;height:14px;color:#B45F00;flex:none;margin-top:2px}
.login-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center;padding:40px 0}
.auth{padding:26px}
.auth h2{font:700 22px var(--head)}
.pw{position:relative}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;color:var(--text-3)}
.stepper2{display:flex;gap:8px;margin-bottom:18px}
.stepper2 span{flex:1;height:6px;border-radius:4px;background:#E3EAF7;transition:.3s}
.stepper2 span.on{background:var(--blue)}
.fs{display:none}.fs.on{display:grid;animation:up .3s both}
.opt-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt-cards label{display:flex;gap:10px;align-items:center;padding:14px;border:1.5px solid #D5DCEA;border-radius:12px;cursor:pointer;font-weight:600;font-size:15px}
.opt-cards input{position:absolute;opacity:0}
.opt-cards label:has(input:checked){border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.opt-cards .ic{width:36px;height:36px;border-radius:10px}
.nf{text-align:center;padding:80px 0}
.nf b{font:800 96px var(--head);color:var(--blue);display:block;line-height:1}
.toast2{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:15px;z-index:300;transition:.25s;display:flex;gap:8px;align-items:center}
.toast2.show{opacity:1;transform:translate(-50%,0)}
.toast2 svg{color:#6DD43C;width:18px;height:18px}
@media (max-width:1100px){
  .phero .wrap,.login-wrap,.calc{grid-template-columns:1fr} .grid4,.steps{grid-template-columns:repeat(2,minmax(0,1fr))} .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listing{grid-template-columns:1fr} .filters{position:static} .inst-list{grid-template-columns:1fr} .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .grid2,.grid3,.grid4,.steps,.form,.opt-cards{grid-template-columns:1fr} .sec{padding:32px 0} .legal{padding:20px} .cta-band{padding:24px}
  .icard{grid-template-columns:64px minmax(0,1fr)} .icard .logo{width:64px;height:64px;font-size:19px} .chat{height:520px} .msg{max-width:90%}
}
/* ---- additions ---- */
.card.static:hover{transform:none;box-shadow:none;border-color:var(--border)}
fieldset.fs{border:0;min-width:0;padding:0;margin:0}
.fs .full{grid-column:1/-1}
.form-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;grid-column:1/-1}
.form .done,.done.full{grid-column:1/-1}
.mock{display:grid;gap:10px}
.mock .k4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mock .k{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff}
.mock .k small{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.mock .k b{font:700 20px var(--head)}
.mock .k .d{font-size:12.5px;font-weight:700;color:#15803D}
.mock .chart{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
.mock .chart .t{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:10px}
.mock .cols{display:flex;align-items:flex-end;gap:8px;height:110px}
.mock .cols i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5B9BFF,var(--blue));height:0;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.in .mock .cols i,.mock.in .cols i{height:var(--h)}
.mock .cols i:nth-child(even){background:linear-gradient(180deg,#7EE0A1,var(--green))}
.dash-tag{position:absolute;right:-8px;top:-12px;background:var(--green);color:#fff;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:12px;box-shadow:var(--shadow)}
.phero-card{position:relative}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat-row .card{text-align:center;padding:20px}
.stat-row b{display:block;font:800 30px var(--head);color:var(--blue)}
.stat-row span{font-size:14.5px;color:var(--text-2)}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.article{max-width:780px;margin:0 auto}
.article .meta2{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--text-3);margin-top:10px}
.article .body{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px}
.article .body h2{font:700 20px var(--head);margin:24px 0 8px}
.article .body h2:first-child{margin-top:0}
.article .body p,.article .body li{font-size:16px;line-height:1.8;color:var(--text-2)}
.article .body ul,.article .body ol{padding-left:22px;margin:8px 0}
.article .body p+p{margin-top:12px}
.ev{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px}
.ev .date{border-radius:14px;background:var(--blue-soft);color:var(--blue);text-align:center;padding:10px 0;font-weight:700}
.ev .date b{display:block;font:800 26px/1 var(--head)}
.ev .date small{font-size:12.5px;text-transform:uppercase;letter-spacing:.6px}
.ev h3{font:700 17px var(--head)}
.ev p{font-size:14.5px;color:var(--text-2);margin-top:4px}
.team .card{text-align:center;padding:22px}
.team .av{width:72px;height:72px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font:700 24px var(--head);color:#fff}
.val .ic{margin-bottom:12px}
.info-list{display:grid;gap:12px}
.info-list a,.info-list div{display:flex;gap:12px;align-items:center;font-size:15px}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.cat-tabs button{height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--border);background:#fff;font-size:14.5px;font-weight:600;color:var(--text-2)}
.cat-tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.help-search{display:flex;align-items:center;gap:10px;height:52px;background:#fff;border:1px solid #D5DCEA;border-radius:26px;padding:0 20px;max-width:620px;width:100%;box-shadow:var(--shadow)}
.help-search input{flex:1;border:0;outline:0;font:16px var(--body);background:transparent;min-width:0}
.pickers{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pickers select,#picker select{height:44px;border:1px solid #D5DCEA;border-radius:12px;padding:0 12px;font:15px var(--body);background:#fff;min-width:0;max-width:100%}
@media (max-width:1100px){ .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))} .split2{grid-template-columns:1fr} }
@media (max-width:760px){ .ev{grid-template-columns:64px minmax(0,1fr)} .ev .btn{grid-column:1/-1} .article .body{padding:20px} .qnav .btn{padding:0 14px} }
.split2.wl{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.split2.wr{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start}
@media (max-width:1100px){ .split2.wl,.split2.wr{grid-template-columns:1fr} }
[hidden]{display:none!important}
/* ================= PAN-INDIA ================= */
.topbar{background:#071737;color:#AFC0E6;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:36px}
.topbar a{color:#C9D6F2;white-space:nowrap}.topbar a:hover{color:#fff}
.topbar .sp{flex:1}
.topbar svg{width:14px;height:14px}
.tb-note{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.tb-note svg{color:#6DD43C}
.tb-mail{display:inline-flex;align-items:center;gap:6px}
.city-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:14px;white-space:nowrap}
.city-btn:hover{background:rgba(255,255,255,.16)}
.city-btn svg:first-child{color:#FFB020}
.city-btn.m{width:100%;height:42px;border-radius:10px;background:var(--blue-soft);border-color:#CFDDF7;color:var(--blue);margin-bottom:6px;justify-content:flex-start;padding:0 14px;font-size:15px}
.cmodal{position:fixed;inset:0;z-index:250;background:rgba(7,23,55,.55);backdrop-filter:blur(4px);display:grid;place-items:start center;padding:6vh 16px 16px;animation:fade .2s both}
.cm-box{background:#fff;border-radius:20px;width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 40px 80px -20px rgba(0,0,0,.45);animation:pop .22s both;overflow:hidden}
.cm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 12px}
.cm-head b{display:block;font:700 20px var(--head)}.cm-head small{font-size:14.5px;color:var(--text-3)}
.cm-head button{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg)}
.cm-search{display:flex;align-items:center;gap:10px;margin:0 22px 14px;height:46px;border:1px solid #D5DCEA;border-radius:12px;padding:0 14px}
.cm-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.12)}
.cm-search svg{color:var(--text-3)}
.cm-search input{flex:1;border:0;outline:0;font:16px var(--body);min-width:0}
.cm-pop{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0 22px 12px}
.cm-pop:empty{display:none}
.cm-pop a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid var(--border);border-radius:12px;font-size:14px;font-weight:600;text-align:center}
.cm-pop a:hover{border-color:var(--blue);color:var(--blue);background:#F7FAFF}
.cini{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:700 15px var(--head);color:var(--blue);background:linear-gradient(135deg,#E8F0FF,#DDEBFF);flex:none;text-transform:uppercase}
.cini.big{width:56px;height:56px;border-radius:16px;font-size:20px}
.cm-list{overflow-y:auto;padding:4px 22px 12px;border-top:1px solid var(--border)}
.cm-st{padding:10px 0;border-bottom:1px dashed var(--border)}
.cm-st b{display:block;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.cm-st div{display:flex;flex-wrap:wrap;gap:6px}
.cm-st a{font-size:14.5px;padding:5px 11px;border-radius:14px;background:var(--bg);border:1px solid var(--border)}
.cm-st a:hover,.cm-st a.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.cm-all{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-top:1px solid var(--border);font-weight:600;font-size:15px;color:var(--blue)}
/* finder */
.finder-wrap{position:relative;z-index:3;margin-top:-26px;margin-bottom:6px}
.finder{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 50px -24px rgba(15,40,100,.35);padding:16px 18px;display:grid;gap:12px}
.fd-title{display:flex;align-items:center;gap:12px}
.fd-title b{display:block;font:700 17px var(--head)}.fd-title small{font-size:13.5px;color:var(--text-3)}
.fd-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.seg2{display:inline-flex;background:#EEF2FA;border-radius:12px;padding:4px;gap:4px;flex:none}
.seg2 input{position:absolute;opacity:0;pointer-events:none}
.seg2 span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:9px;font-weight:600;font-size:15px;color:var(--text-2);cursor:pointer}
.seg2 span svg{width:16px;height:16px}
.seg2 input:checked+span{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(15,40,100,.1)}
.seg2 input:focus-visible+span{outline:2px solid var(--blue)}
.fd-f{display:flex;align-items:center;gap:8px;height:46px;border:1px solid #D5DCEA;border-radius:12px;padding:0 12px;flex:0 1 240px;min-width:0;background:#fff}
.fd-f.grow{flex:1 1 240px}
.fd-f:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.12)}
.fd-f svg{color:var(--text-3);flex:none}
.fd-f select,.fd-f input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:15px var(--body);color:var(--text);height:100%}
.finder .btn{height:46px;border-radius:12px;padding:0 22px}
.fd-pop{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--text-3);align-items:center}
.fd-pop a{color:var(--text-2);font-weight:600}.fd-pop a:hover{color:var(--blue)}
.fd-pop .more{color:var(--blue)}
/* city tiles */
.ctiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ctile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;padding:14px}
.ctile b{display:block;font:700 16px var(--head)}.ctile small{font-size:13px;color:var(--text-3)}
.ctile em{grid-column:1/-1;font-style:normal;font-size:13px;color:var(--text-2);margin-top:6px;padding-top:8px;border-top:1px dashed var(--border)}
.ctile .go2{position:absolute;right:10px;top:10px;width:15px;height:15px;color:var(--text-3);transition:.2s}
.ctile:hover .go2{color:var(--blue);transform:translate(2px,-2px)}
.state-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.state-chips .chip:hover{border-color:var(--blue);color:var(--blue)}
/* how it works */
.how-col{padding:24px;display:flex;flex-direction:column;gap:16px}
.how-h{display:flex;gap:12px;align-items:center}.how-h b{display:block;font:700 18px var(--head)}.how-h small{font-size:14px;color:var(--text-3)}
.how-col ol{list-style:none;counter-reset:h;display:grid;gap:12px}
.how-col li{counter-increment:h;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px}
.how-col li::before{content:counter(h);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font:700 14.5px var(--head)}
.how-col li b{font-size:15px}.how-col li span{font-size:14.5px;color:var(--text-2)}
.how-col .btn{align-self:flex-start;margin-top:auto}
/* city page */
.city-card{display:grid;gap:14px}
.cc-top{display:flex;gap:12px;align-items:center}.cc-top b{display:block;font:700 20px var(--head)}.cc-top small{color:var(--text-3);font-size:14.5px}
.cc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cc-stats div{border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.cc-stats b{display:block;font:700 22px var(--head);color:var(--blue)}.cc-stats span{font-size:13.5px;color:var(--text-2)}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;max-width:none}
.st-grid{columns:3 300px;column-gap:16px}
.st-block{break-inside:avoid;margin-bottom:16px;padding:18px}
.st-block h3{font:700 17px var(--head);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.st-block h3 small{font:500 13.5px var(--body);color:var(--text-3)}
.st-cities{display:grid;gap:2px}
.st-cities a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;font-size:15px;font-weight:500}
.st-cities a svg{width:14px;height:14px;color:var(--blue)}
.st-cities a span{margin-left:auto;font-size:13px;color:var(--text-3)}
.st-cities a:hover{background:var(--bg);color:var(--blue)}
.faq-g{margin-bottom:10px}
.faq-gh{display:flex;align-items:center;gap:10px;font:700 17px var(--head);margin:22px 0 12px}
.cat-tabs button{display:inline-flex;align-items:center;gap:6px}.cat-tabs button svg{width:15px;height:15px}
.fcities{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;padding-bottom:18px}
.fcities .f-h{color:#fff;font:700 15px var(--head);margin-bottom:10px}
.fcities div{display:flex;flex-wrap:wrap;gap:6px 14px}
.fcities a{font-size:14px;color:#AFC0E6}.fcities a:hover{color:#fff}
.fc-q{width:100%;height:34px;border:1px solid #D5DCEA;border-radius:9px;padding:0 10px;font:14.5px var(--body);margin-bottom:6px;outline:0}
.fc-q:focus{border-color:var(--blue)}
#fCity{max-height:230px;overflow-y:auto;padding-right:4px}
@media (max-width:1280px){ .ctiles{grid-template-columns:repeat(4,minmax(0,1fr))} .tb-note{display:none} }
@media (max-width:1100px){ .topbar a:not(.tb-mail){display:none} .cm-pop{grid-template-columns:repeat(4,minmax(0,1fr))} .finder-wrap{margin-top:16px} }
@media (max-width:760px){ .ctiles{grid-template-columns:repeat(2,minmax(0,1fr))} .tb-mail{display:none!important} .cm-pop{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fd-f,.fd-f.grow{flex:1 1 100%} .seg2{width:100%}.seg2 label{flex:1}.seg2 span{justify-content:center;width:100%} .finder .btn{width:100%} .cmodal{padding-top:16px} }
.pager2{flex-wrap:wrap}.pager2 .gap{align-self:center;color:var(--text-3);padding:0 2px}
.cm-head,.cm-search,.cm-pop,.cm-all{flex:none}
.finder-wrap{margin-top:18px}
.foot .wrap.fcities{display:block}
.cmpbar:not(.show){visibility:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--blue);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s}.skip:focus{top:12px}
/* ================= STUDENT ACCOUNTS ================= */
.av-s{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font:700 12.5px var(--head)}
.auth-sub{font-size:15px;color:var(--text-2);margin:4px 0 16px}
.gform{display:grid;gap:12px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gmsg{font-size:14.5px;color:#C42A40;min-height:0}.gmsg:empty{display:none}
.gform .btn{height:46px}
.auth-alt{font-size:15px;color:var(--text-2);margin-top:16px;text-align:center}
.auth-alt button,.auth-forgot{color:var(--blue);font-weight:600}
.auth-forgot{font-size:14.5px;text-align:center;display:block;width:100%;margin-top:4px}
/* the "check your email" and reset panes */
.auth-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--green-soft);color:#15803D}
.auth-ico svg{width:28px;height:28px}
.auth-ico.ok{background:var(--green-soft);color:#15803D}
[data-gpane="sent"]{text-align:center}
[data-gpane="sent"] .auth-sub{max-width:420px;margin-left:auto;margin-right:auto}
.auth-note{display:flex;gap:9px;align-items:flex-start;text-align:left;max-width:420px;margin:16px auto 0;padding:12px 14px;
  border-radius:12px;background:var(--bg);border:1px solid var(--border);font-size:13.5px;line-height:1.55;color:var(--text-2)}
.auth-note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--blue)}
.linkish{color:var(--blue-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.linkish:disabled{color:var(--text-3);text-decoration:none;cursor:default}
/* a success message reuses .gmsg, which is red by default */
.gmsg.good{color:#15803D}
/* Underlined, not colour-only: inside a block of text a link must be
   distinguishable without relying on colour (WCAG 1.4.1). */
.check a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.perks{display:grid;gap:14px}
.perks>div{display:flex;gap:12px;align-items:flex-start}
.perks b{display:block;font:700 16px var(--head)}.perks small{font-size:14.5px;color:var(--text-2);line-height:1.5}
.btn-danger{border:1.5px solid #E03E55;color:#C42A40;background:#fff}.btn-danger:hover{background:#FDE8EB}
.dash-sec{padding:26px 0 48px;background:linear-gradient(180deg,#EEF5FF,var(--bg) 280px)}
.dash{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.dash-side{position:sticky;top:84px;display:grid;gap:14px}
.dash-me{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px}
.dash-me .av{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),#7C5CFC);color:#fff;display:grid;place-items:center;font:700 17px var(--head);flex:none}
.dash-me b{display:block;font:700 17px var(--head)}.dash-me small{font-size:13px;color:var(--text-3);letter-spacing:.4px}
.dash-nav{display:grid;gap:4px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:8px}
.dash-nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--text-2);text-align:left}
.dash-nav button:hover{background:var(--bg)}
.dash-nav button.on{background:var(--blue-soft);color:var(--blue)}
.dash-nav svg{width:18px;height:18px}
.dash-main{min-width:0;scroll-margin-top:90px}
.dash-h{margin-bottom:16px}
.dash-h h1{font:700 26px var(--head);display:flex;align-items:center;gap:10px}
.dash-h p{font-size:15px;color:var(--text-2);margin-top:4px}
.dstack{display:grid;gap:14px}
.dgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.dgrid3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dcard2{padding:20px}
.dcard2 h3{font:700 17px var(--head)}
.dcard2 p{font-size:15px;color:var(--text-2);line-height:1.6;margin-top:6px}
.score-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:center}
.score-card .btn{margin-top:12px}
.gauge{position:relative;width:220px;max-width:100%}
.gauge svg{width:100%;display:block}
.g-arc{transition:stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1)}
.g-num{position:absolute;left:0;right:0;bottom:0;text-align:center}
.g-num b{display:block;font:800 36px/1 var(--head)}.g-num span{display:block;font-size:14.5px;font-weight:700;margin-top:4px}.g-num small{font-size:12.5px;color:var(--text-3)}
.nsteps{list-style:none;display:grid;gap:10px;margin-top:12px}
.nsteps li{display:flex;align-items:center;gap:10px;font-size:15px}
.nsteps .dot{width:24px;height:24px;border-radius:50%;border:2px solid #CFDDF7;display:grid;place-items:center;flex:none}
.nsteps li.is-done .dot{background:var(--green);border-color:var(--green);color:#fff}.nsteps .dot svg{width:14px;height:14px}
.nsteps li.is-done a{color:var(--text-3);text-decoration:line-through}
.nsteps a:hover{color:var(--blue)}
.dtile{display:grid;gap:4px;padding:16px}
.dtile b{font:800 26px var(--head)}.dtile span:last-child{font-size:14px;color:var(--text-2)}
.rec{display:grid;gap:6px;justify-items:start;border:1px solid var(--border);border-radius:14px;padding:14px}
.rec b{font:700 16px var(--head)}.rec small{font-size:13.5px;color:var(--text-2)}
.bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.bands span{border-left:4px solid var(--c);background:var(--bg);border-radius:8px;padding:8px 10px;font-size:13.5px;color:var(--text-2)}
.bands b{display:block;color:var(--c);font-size:15px}
.factor{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 40px 60px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--border)}
.factor:last-child{border:0}
.factor b{font-size:15px}.factor small{display:block;font-size:13.5px;color:var(--text-3)}
.factor .fv{text-align:right;font-variant-numeric:tabular-nums}
.bad-t{color:#C42A40!important;font-weight:600}
.muted{font-size:15px;color:var(--text-3);margin-top:8px}
.lvl{display:grid;gap:10px;align-content:start}
.lvl.rec-l{border-color:#BFE8CD;box-shadow:0 0 0 3px var(--green-soft)}
.lvl .tag{justify-self:start}
.path-h{display:flex;align-items:center;gap:12px}
.path-h small{font-size:13.5px;color:var(--text-3)}
.match{margin-left:auto;font:800 24px var(--head);color:var(--blue)}
.path-g{margin-top:14px}.path-g b{font-size:14.5px}
.cert-card{display:flex;gap:14px;align-items:center;padding:16px}
.cert-card>div{min-width:0}   /* same latent squeeze as .crs2-c, before a long certificate name finds it */
.cert-card h3{font:700 16px var(--head)}.cert-card small{font-size:13.5px;color:var(--text-3)}.cert-card .btn{margin-left:auto;flex:none}
.ok-s{background:var(--green-soft);border-color:#BFE8CD;color:#15803D}.ok-s svg{color:#15803D}.ok-s a{font-weight:700;text-decoration:underline}
.tbl .sub{display:block;font-size:13px;color:var(--text-3)}
.lvl-pick{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto 14px;max-width:620px;text-align:left}
.lvl-pick span{display:grid}.lvl-pick b{font-size:15px}.lvl-pick small{font-weight:500;font-size:13.5px;color:var(--text-3)}
.cert{max-width:900px;margin:0 auto;background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow-h);border:1px solid var(--border)}
.cert-in{border:2px solid #CFDDF7;border-radius:12px;padding:44px 40px;text-align:center;background:radial-gradient(600px 240px at 50% 0,#F2F7FF,#fff)}
.cert-top{display:flex;align-items:center;justify-content:center;gap:12px}.cert-top svg{width:56px;height:56px}.cert-top>img{width:64px;height:auto}.cert-top .cw{width:170px;height:auto;display:block}
.cert-top b{display:block;font:800 26px var(--head);color:var(--navy);text-align:left}.cert-top small{font-size:13.5px;color:var(--text-3)}
.cert-k{font:700 14.5px var(--body);letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-top:26px}
.cert-t{font-size:16px;color:var(--text-2);margin-top:14px;line-height:1.7}
.cert h1{font:600 46px/1.15 var(--script);color:var(--navy);margin-top:8px}
.cert-f{display:flex;justify-content:space-between;align-items:center;margin-top:34px;gap:16px;text-align:left}
.cert-f small{display:block;font-size:12.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}.cert-f b{font-size:15px}
.cert-f div:last-child{text-align:right}
.seal{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#FFB020,#F7810F);color:#fff;display:grid;place-items:center;flex:none}.seal svg{width:34px;height:34px}
.cert-act{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
@media print{ .topbar,.hdr,footer,.cert-act,.skip,.cmpbar,.toast2{display:none!important} body{background:#fff} .sec{padding:0} .cert{box-shadow:none;border:0} }
@media (max-width:1100px){ .dash{grid-template-columns:1fr} .dash-side{position:static} .dash-nav{display:flex;overflow-x:auto;scrollbar-width:none} .dash-nav button{white-space:nowrap;flex:none} .dgrid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .g2,.dgrid,.lvl-pick{grid-template-columns:1fr} .score-card{grid-template-columns:1fr;justify-items:center;text-align:center} .factor{grid-template-columns:minmax(0,1fr) 40px;row-gap:6px} .factor .bar{grid-column:1/-1;grid-row:2} .factor>:last-child{display:none} .cert-in{padding:28px 18px} .cert h1{font-size:34px} .cert-f{flex-direction:column;text-align:center} .cert-f div:last-child{text-align:center} .cert-card{flex-wrap:wrap} }
.dgrid{align-items:start}.nsteps{align-content:start}.score-card{min-height:0}
/* certificate share */
.cert-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.cert-layout .cert{max-width:none}
.cert-back{margin-top:14px;font-size:15px}.cert-back a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600}.cert-back svg{width:16px;height:16px}
.share-panel{display:grid;gap:14px;position:sticky;top:84px}
.sp-card{padding:18px;display:grid;gap:10px}
.li-card{background:linear-gradient(160deg,#EAF3FF,#fff)}
.li-h{display:flex;gap:12px;align-items:flex-start}.li-h b{display:block;font:700 16px var(--head)}.li-h small{font-size:14px;color:var(--text-2);line-height:1.5}
.li-logo{width:40px;height:40px;border-radius:10px;background:#0A66C2;color:#fff;display:grid;place-items:center;flex:none}
.btn-li{background:#0A66C2;color:#fff;height:46px}.btn-li:hover{background:#004182;transform:translateY(-1px)}
.sp-t{font:700 16px var(--head)}
.soc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.soc a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid var(--border);border-radius:12px;font-size:13.5px;font-weight:600;color:var(--text-2);transition:.15s;text-align:center}
.soc a span{width:36px;height:36px;border-radius:50%;background:var(--sc);color:#fff;display:grid;place-items:center}
.soc a span svg{width:18px;height:18px}
.soc a:hover{border-color:var(--sc);color:var(--text);transform:translateY(-2px);box-shadow:var(--shadow)}
.sp-native{height:42px}
.sp-l{font-size:13px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.sp-ta{width:100%;border:1px solid #D5DCEA;border-radius:10px;padding:10px 12px;font:14.5px/1.5 var(--body);resize:vertical;color:var(--text)}
.sp-ta:focus,.sp-link input:focus{outline:0;border-color:var(--blue)}
.sp-b{height:38px}
.sp-link{display:flex;border:1px solid #D5DCEA;border-radius:10px;overflow:hidden}
.sp-link input{flex:1;min-width:0;border:0;padding:0 12px;height:40px;font:14px var(--body);color:var(--text-2);background:var(--bg)}
.sp-link button{width:44px;display:grid;place-items:center;color:var(--blue);border-left:1px solid #D5DCEA;background:#fff}
.sp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sp-row .btn{height:40px;padding:0 10px;font-size:14.5px}
.sp-n{font-size:13.5px;color:var(--text-3)}
.vstat{max-width:900px;margin:0 auto 16px;display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:12px;font-size:15px;border:1px solid}
.vstat svg{width:20px;height:20px;flex:none}
.vstat.ok{background:var(--green-soft);border-color:#BFE8CD;color:#15803D}
.vstat.bad{background:#FDE8EB;border-color:#F6C3CB;color:#C42A40}
.vstat.link{background:var(--blue-soft);border-color:#CFDDF7;color:#1A4FB8}
@media (max-width:1100px){ .cert-layout{grid-template-columns:1fr} .share-panel{position:static;grid-template-columns:repeat(2,minmax(0,1fr))} .li-card{grid-column:1/-1} }
@media (max-width:760px){ .share-panel{grid-template-columns:1fr} }
@media print{ .share-panel,.cert-back,.vstat{display:none!important} .cert-layout{display:block} }
/* ================= ERP SHOWCASE (CSS-only animation, pauses off-screen) ================= */
.scrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center;padding:26px 0}
.scrow.flip .show-art{order:2}
.show-txt h3{font:700 clamp(22px,2.2vw,28px)/1.2 var(--head);margin:4px 0 10px}
.show-txt p{font-size:16px;line-height:1.7;color:var(--text-2)}
.show-art{display:flex;justify-content:center;position:relative;min-width:0}
.show-art::before{content:"";position:absolute;inset:8% 6%;border-radius:40px;background:radial-gradient(closest-side,#DCEBFF,transparent);z-index:0}
.show-art>*{position:relative;z-index:1}
.st1,.st2,.st3,.st4,.st5{opacity:0}
.scrow.in .st1{animation:st1 11s infinite}.scrow.in .st2{animation:st2 11s infinite}.scrow.in .st3{animation:st3 11s infinite}.scrow.in .st4{animation:st4 11s infinite}.scrow.in .st5{animation:st5 11s infinite}
@keyframes st1{0%,4%{opacity:0;transform:translateY(10px)}9%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st2{0%,20%{opacity:0;transform:translateY(10px)}25%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st3{0%,32%{opacity:0;transform:translateY(10px)}36%,44%{opacity:1;transform:none}48%,100%{opacity:0}}
@keyframes st4{0%,46%{opacity:0;transform:translateY(10px)}51%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st5{0%,58%{opacity:0;transform:translateY(10px)}63%,92%{opacity:1;transform:none}100%{opacity:0}}
.phone{width:280px;max-width:100%;border-radius:36px;border:9px solid #0F1B3D;background:#fff;box-shadow:0 30px 60px -25px rgba(10,31,78,.45);overflow:hidden;position:relative}
.ph-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:18px;background:#0F1B3D;border-radius:0 0 12px 12px;z-index:2}
.wa-top{display:flex;align-items:center;gap:8px;background:#075E54;color:#fff;padding:26px 12px 10px}
.wa-top svg{width:18px;height:18px}.wa-top div{flex:1;min-width:0}.wa-top b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-top small{font-size:11.5px;opacity:.8}
.wa-av{width:30px;height:30px;border-radius:50%;background:#fff;color:#075E54;display:grid;place-items:center;font:700 14.5px var(--head);flex:none}
.wa-body{background:#ECE5DD;padding:10px;display:flex;flex-direction:column;gap:7px;height:380px}
.wa-day{align-self:center;font-size:11.5px;background:#E1F2FB;color:#4A5678;padding:3px 10px;border-radius:8px}
.bub{max-width:86%;font-size:13.5px;line-height:1.45;padding:7px 9px 16px;border-radius:9px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08);color:#111}
.bub b{display:block}
.bub.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.bub.out{background:#DCF8C6;align-self:flex-end;border-top-right-radius:2px}
.bub time{position:absolute;right:8px;bottom:3px;font-size:9.5px;color:#7C879F}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;padding-top:6px;border-top:1px solid #E7ECF5;color:#0A84C6;font-weight:600}.wa-btn svg{width:13px;height:13px}
.bub.doc{display:flex;gap:8px;align-items:center;padding-bottom:18px}
.bub.doc small{font-size:11.5px;color:#7C879F}
.pdf{width:34px;height:40px;border-radius:5px;background:#E53935;color:#fff;font:700 11px var(--body);display:grid;place-items:center;flex:none}
.typing2{align-self:flex-start;background:#fff;border-radius:9px;padding:9px 12px;display:flex;gap:4px}
.typing2 i{width:6px;height:6px;border-radius:50%;background:#9AA5BE;animation:bl 1s infinite}.typing2 i:nth-child(2){animation-delay:.15s}.typing2 i:nth-child(3){animation-delay:.3s}
/* biometric */
.bio{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.scanner{width:150px;background:linear-gradient(160deg,#1B2B55,#0A1F4E);border-radius:24px;padding:16px;color:#fff;text-align:center;box-shadow:0 24px 50px -22px rgba(10,31,78,.6)}
.sc-screen{position:relative;height:120px;border-radius:14px;background:#0B1733;display:grid;place-items:center;overflow:hidden;border:1px solid #2A4A8F}
.sc-screen svg{width:64px;height:64px;color:#5B9BFF;stroke-width:1.5}
.scanline{position:absolute;left:10px;right:10px;height:3px;border-radius:3px;background:#6DD43C;box-shadow:0 0 12px #6DD43C;top:14px}
.scrow.in .scanline{animation:scan 2.2s ease-in-out infinite}
@keyframes scan{50%{top:100px}}
.scanner b{display:block;font-size:13.5px;margin-top:10px}.sc-ok{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:#6DD43C}.sc-ok svg{width:13px;height:13px}
.feed{width:300px;max-width:100%;padding:14px;display:grid;gap:9px}
.feed-h{display:flex;justify-content:space-between;align-items:center}.feed-h b{font:700 15px var(--head)}
.live{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#C42A40}.live i{width:7px;height:7px;border-radius:50%;background:#F0445B;animation:bl 1.2s infinite}
.feed-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.feed-kpi div{background:var(--bg);border-radius:10px;padding:6px 8px}.feed-kpi small{font-size:11px;color:var(--text-3)}.feed-kpi b{display:block;font:700 17px var(--head)}
.feed .row{display:flex;align-items:center;gap:8px;font-size:13.5px}.feed .row div{flex:1;min-width:0}.feed .row b{display:block;font-size:14px}.feed .row small{color:var(--text-3);font-size:12.5px}
.fa{width:30px;height:30px;border-radius:9px;color:#fff;display:grid;place-items:center;font:700 12.5px var(--head);flex:none}
.feed .pill{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:10px;white-space:nowrap}.pill.ok{background:var(--green-soft);color:#15803D}.pill.late{background:var(--orange-soft);color:#B45F00}
.sms{display:flex;gap:8px;align-items:flex-start;background:var(--blue-soft);border-radius:10px;padding:8px 10px;font-size:13px;color:var(--text-2)}.sms svg{width:15px;height:15px;color:var(--blue);flex:none;margin-top:1px}.sms b{display:block;color:var(--text);font-size:13.5px}
/* apps */
.apps3{display:flex;gap:12px;align-items:flex-end;justify-content:center}
.phone.psm{width:170px;border-width:7px;border-radius:28px}
.phone.psm .ph-notch{width:60px;height:13px}
.scrow.in .f1{animation:fl 6s ease-in-out infinite}.scrow.in .f2{animation:fl 6s ease-in-out -2s infinite;margin-bottom:26px}.scrow.in .f3{animation:fl 6s ease-in-out -4s infinite}
.f2{margin-bottom:26px}
@keyframes fl{50%{transform:translateY(-8px)}}
.ap-h{color:#fff;padding:20px 10px 10px}.ap-h small{font-size:9.5px;opacity:.85;text-transform:uppercase;letter-spacing:.5px}.ap-h b{display:block;font:700 14px var(--head)}
.ap-c{padding:8px;display:grid;gap:6px;background:#F5F8FD;min-height:190px;align-content:start}
.ap-card{background:#fff;border-radius:9px;padding:7px 8px;border:1px solid var(--border)}.ap-card small{font-size:9.5px;color:var(--text-3);display:block}.ap-card b{font:700 14.5px var(--head)}
.ap-btn{display:inline-block;margin-top:4px;background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:6px}.ap-btn.wide{display:block;text-align:center;padding:6px}
.ap-bar{height:5px;background:#E3EAF7;border-radius:3px;margin-top:4px}.ap-bar i{display:block;height:100%;border-radius:3px;background:var(--green)}
.ap-li{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:6px 8px;font-size:11.5px;border:1px solid var(--border)}.ap-li svg{width:12px;height:12px;color:var(--blue);flex:none}
.ap-li.tick svg{color:var(--green)}.ap-li.x svg{color:#E03E55}
.stores{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;width:100%}
.store{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:12px;background:#0F1B3D;color:#fff;transition:.15s}
.store:hover{background:#000;transform:translateY(-2px)}
.store svg{width:22px;height:22px}.store span{display:flex;flex-direction:column;line-height:1.1;font:700 17px var(--head)}.store small{font:500 9.5px var(--body);letter-spacing:.4px;opacity:.85}
.show-art:has(.apps3){flex-direction:column;align-items:center}
@media (prefers-reduced-motion:reduce){ .st1,.st2,.st4,.st5{opacity:1!important;animation:none!important} .st3{display:none} .scrow *{animation:none!important} }
@media (max-width:1000px){ .scrow{grid-template-columns:1fr;gap:22px} .scrow.flip .show-art{order:0} }
@media (max-width:520px){ .apps3{gap:6px} .phone.psm{width:31%;min-width:0;border-width:5px} .ap-c{min-height:150px} .ap-h b{font-size:11.5px} .scanner{width:100%} .feed{width:100%} }
/* ================= DPDP ================= */
.cbanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:260;max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 60px -20px rgba(10,31,78,.4);padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;transform:translateY(20px);opacity:0;transition:.25s}
.cbanner.show{transform:none;opacity:1}
.cb-t{flex:1 1 420px;min-width:0}.cb-t b{display:flex;align-items:center;gap:8px;font:700 16px var(--head)}.cb-t b svg{width:18px;height:18px;color:var(--green)}
.cb-t p{font-size:14.5px;color:var(--text-2);line-height:1.55;margin-top:4px}.cb-t a{color:var(--blue);font-weight:600}
.cb-opt{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;margin-top:8px}.cb-opt input{width:16px;height:16px;accent-color:var(--blue)}
.cb-b{display:flex;gap:8px;flex-wrap:wrap}.cb-b .btn{height:40px;padding:0 14px;font-size:14.5px}
.flink{font:inherit;font-size:15px;color:inherit;text-align:left;padding:0;display:block;margin:0;opacity:.85;cursor:pointer;line-height:inherit}
.foot .flink{color:#AFC0E6;margin-top:10px}.foot .flink:hover{color:#fff}
.flink2{color:var(--blue);font-weight:600;padding:0}
.dpdp{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#6DD43C;border:1px solid rgba(109,212,60,.4);border-radius:14px;padding:4px 10px}.dpdp svg{width:14px;height:14px}
.dpdp-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;background:linear-gradient(135deg,#F2FBF5,#fff);border:1px solid #BFE8CD;border-radius:22px;padding:28px}
.dpdp-band h2{font:700 clamp(20px,2vw,26px)/1.2 var(--head);margin:4px 0 8px}.dpdp-band p{font-size:15.5px;color:var(--text-2);line-height:1.7}
.dpdp-band .eyebrow{background:var(--green-soft);color:#15803D}
.guardian{display:grid;gap:12px;background:#F7FAFF;border:1px dashed #CFDDF7;border-radius:12px;padding:12px}
.g-note{display:flex;gap:8px;font-size:14px;color:var(--text-2);line-height:1.5}.g-note svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:1px}
.consent-log{margin-top:10px}
@media (max-width:900px){ .dpdp-band{grid-template-columns:1fr;padding:22px} }
/* ================= STUDENT APP SHELL ================= */
.app-body{background:#F4F7FC}
.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.app-side{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#0A1F4E,#081A42);color:#C9D6F2;display:flex;flex-direction:column;padding:16px 12px;gap:6px;overflow-y:auto;z-index:50}
.app-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.app-brand>img{width:40px;height:auto}
.app-sec{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:#7F93C4;padding:8px 10px 4px}
.app-side .dash-nav{background:none;border:0;padding:0;gap:2px}
.app-side .dash-nav button,.app-side .dash-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;color:#C9D6F2;text-align:left;width:100%}
.app-side .dash-nav button:hover,.app-side .dash-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.app-side .dash-nav .on{background:linear-gradient(90deg,#1E6BFF,#3F8CFF);color:#fff;box-shadow:0 8px 18px -8px rgba(30,107,255,.8)}
.app-side-f{margin-top:auto;display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.app-demo{display:flex;gap:8px;font-size:13px;line-height:1.45;color:#FFD48A;background:rgba(255,176,32,.1);border-radius:10px;padding:8px 10px}.app-demo svg{width:14px;height:14px;flex:none;margin-top:1px}
.app-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14.5px;font-weight:600;color:#C9D6F2}.app-link:hover{background:rgba(255,255,255,.07);color:#fff}.app-link svg{width:17px;height:17px}
.app-main{min-width:0;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:64px;padding:0 22px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.app-top .sp{flex:1}
.app-menu{display:none;width:40px;height:40px;border-radius:10px;place-items:center;background:var(--bg)}
.app-title small{display:block;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3)}.app-title b{font:700 17px var(--head)}
.app-cta{height:38px;padding:0 14px;font-size:14.5px}
.app-ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;color:var(--purple);background:#fff}
.app-me{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border:1px solid var(--border);border-radius:14px;background:#fff;max-width:230px}
.app-me .av{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),#7C5CFC);color:#fff;display:grid;place-items:center;font:700 14.5px var(--head);flex:none}
.app-me-t{min-width:0}.app-me-t b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-me-t small{font-size:11.5px;color:var(--text-3)}
.app-content{padding:24px 26px 40px}
.app-content .dash-main{max-width:1240px}
.app-scrim{display:none}
@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .app-side{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-100%);transition:transform .25s,box-shadow .25s;box-shadow:none}
  .app-side.open{transform:none;box-shadow:20px 0 40px -20px rgba(0,0,0,.5)}
  .app-scrim{display:block;position:fixed;inset:0;background:rgba(7,23,55,.5);z-index:45;opacity:0;pointer-events:none;transition:.25s}.app-scrim.scrow{opacity:1;pointer-events:auto}
  .app-menu{display:grid}
  .app-me-t,.app-cta span{display:none}.app-me{padding:4px}.app-cta{width:38px;padding:0}
  .app-content{padding:18px 16px 32px}
}
@media (max-width:420px){ .app-title small{display:none} .app-ic{display:none} }
.app-side .dash-nav{display:grid!important;overflow:visible}
@media (max-width:520px){ .apps3{width:100%} .apps3>*{min-width:0} }
@media (max-width:520px){ .ap-c{min-width:0} .ap-li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;padding:5px 6px} .ap-card b{font-size:12.5px} }
.stack1{display:grid}.stack1>*{grid-area:1/1}.stack1 .typing2{align-self:start;justify-self:start}.wa-body{height:auto;min-height:392px}
/* ================= IMAGES ================= */
.fig{margin:0;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(10,31,78,.35);position:relative}
.fig a{display:block;position:relative;cursor:zoom-in}
.fig img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fig a:hover img{transform:scale(1.02)}
.fig.flat{box-shadow:0 20px 40px -26px rgba(10,31,78,.35)}
.zoom-ic{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.9);color:var(--navy);display:grid;place-items:center;opacity:0;transition:.2s;box-shadow:var(--shadow)}
.fig a:hover .zoom-ic,.fig a:focus-visible .zoom-ic{opacity:1}
.zoom-ic svg{width:16px;height:16px}
.fig figcaption{font-size:14px;color:var(--text-3);padding:10px 14px}
.show-art .fig{width:100%}
.cert-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:center}
.cb-txt h2{font:700 clamp(22px,2.3vw,30px)/1.2 var(--head);margin:6px 0 10px}
.cb-txt p{font-size:16px;line-height:1.7;color:var(--text-2);margin-bottom:14px}
.zmodal{position:fixed;inset:0;z-index:300;background:rgba(7,23,55,.85);display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .2s}
.zmodal.show{opacity:1}
.zmodal img{max-width:min(1600px,100%);max-height:88vh;width:auto;height:auto;border-radius:14px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}
.zx{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center}
@media (max-width:1000px){ .cert-band{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .fig img{transition:none} }
.show-art:has(.fig){flex-direction:column;align-items:stretch}.show-art:has(.fig) .stores{justify-content:flex-start}
/* logo slogan always visible */
.brand .b-txt small{display:block;font-size:11.5px;line-height:1.2;color:#C9D6F2;margin-top:4px;letter-spacing:.35px;white-space:nowrap}
@media (max-width:1366px){ .hdr .b-mark{width:38px} .hdr .b-word{width:100px} .hdr .b-txt small{font-size:9.5px;letter-spacing:.2px} .search{max-width:230px} }
@media (max-width:1100px){ .hdr .b-mark{width:40px} .hdr .b-word{width:106px} .hdr .b-txt small{font-size:10.5px} }
.app-brand .b-txt img{width:104px;height:auto}.app-brand .b-txt small{font-size:9.5px;color:#9FB0D6;margin-top:3px;letter-spacing:.3px;white-space:nowrap}
/* The sidebar is 250px, far narrower than the header, so the full tagline cannot
   sit on one line: nowrap made it 286px wide and it ran out over the dashboard.
   It wraps here instead, and min-width:0 lets the flex items shrink to the rail. */
.app-brand{min-width:0}
.app-brand .b-txt{min-width:0;max-width:100%}
.app-brand .b-txt small.tagline{white-space:normal;line-height:1.3;overflow-wrap:anywhere}
.app-side{overflow-x:hidden}
/* logo slogan: Grow • Learn • Achieve (from the original logo) */
.slogan{display:flex!important;align-items:center;gap:5px;font-weight:700;letter-spacing:.3px!important}
.slogan b{font-weight:700}.slogan i{font-style:normal;color:#8FA2CF;font-size:.8em}
.slogan .s1{color:#F7810F}.slogan .s2{color:#fff}.slogan .s3{color:#6DD43C}
.cert-top .slogan .s2{color:var(--navy)}.cert-top .slogan .s3{color:#2E9E3E}.cert-top .slogan i{color:#9AA5BE}
.brand .b-txt small.slogan{font-size:12.5px}
@media (max-width:1366px){ .hdr .b-txt small.slogan{font-size:11px;gap:4px} }
.app-brand .b-txt small.slogan{font-size:11px;gap:4px}
.brand .slogan b,.cert-top .slogan b,.app-brand .slogan b,.slogan b{display:inline;font:inherit;font-weight:700;letter-spacing:inherit;margin:0}
.slogan{display:inline-flex!important}
.cert-top .slogan{font-size:13.5px;margin-top:4px}
/* ================= SCHOOL ERP — 3D hero ================= */
.d3{position:relative;height:440px;max-width:100%}
.d3-stage{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 40%}
.d3-glow{position:absolute;inset:10% 5% 5%;background:radial-gradient(closest-side,rgba(63,140,255,.35),rgba(124,92,252,.15) 60%,transparent);filter:blur(10px)}
.d3-laptop{position:absolute;left:4%;top:6%;width:78%;transform:rotateY(-20deg) rotateX(9deg) rotateZ(1.5deg);transform-style:preserve-3d;animation:d3f 8s ease-in-out infinite}
.d3-screen{position:relative;aspect-ratio:16/10;border-radius:14px;border:10px solid #0F1B3D;background:#F4F7FC;box-shadow:0 50px 80px -30px rgba(10,31,78,.55);overflow:hidden}
.d3-base{height:14px;margin:0 -6%;background:linear-gradient(#C9D3E6,#9AA7C2);border-radius:0 0 18px 18px;transform:translateZ(-1px)}
.d3-ui{position:absolute;inset:0;display:grid;grid-template-columns:18% 1fr;filter:blur(1.6px) saturate(1.1);opacity:.95}
.d3-side{background:#0A1F4E;padding:10px 8px;display:grid;gap:7px;align-content:start}
.d3-side i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}.d3-side i:nth-child(3){background:#3F8CFF}
.d3-main{padding:10px;display:grid;gap:8px;align-content:start}
.d3-top{height:14px;border-radius:7px;background:#fff;border:1px solid #E4EAF5}
.d3-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.d3-kpis .k{background:#fff;border-radius:8px;padding:6px;border:1px solid #E4EAF5;display:grid;gap:4px}
.d3-kpis span{width:16px;height:16px;border-radius:5px;background:var(--c)}.d3-kpis b{height:8px;width:60%;background:#0F1B3D;border-radius:4px;opacity:.7}.d3-kpis em{height:5px;width:40%;background:#22B45A;border-radius:3px}
.d3-row{display:grid;grid-template-columns:1.6fr 1fr;gap:6px}
.d3-chart{background:#fff;border-radius:8px;border:1px solid #E4EAF5;display:flex;align-items:flex-end;gap:5px;padding:8px;height:84px}
.d3-chart i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(#5B9BFF,#1E6BFF)}
.d3-donut{background:#fff;border-radius:8px;border:1px solid #E4EAF5;position:relative}
.d3-donut::after{content:"";position:absolute;inset:14% 22%;border-radius:50%;background:conic-gradient(#1E6BFF 0 40%,#22B45A 0 62%,#FF8A1F 0 80%,#F0457A 0);-webkit-mask:radial-gradient(circle,transparent 45%,#000 47%);mask:radial-gradient(circle,transparent 45%,#000 47%)}
.d3-rows{display:grid;gap:5px}.d3-rows div{display:grid;grid-template-columns:14px 1fr 50px;gap:6px;align-items:center;background:#fff;border-radius:6px;padding:5px;border:1px solid #E4EAF5}
.d3-rows span{width:14px;height:14px;border-radius:50%;background:#C9D6F2}.d3-rows b{height:6px;background:#C9D3E6;border-radius:3px}.d3-rows em{height:10px;border-radius:5px;background:#DDF5E5}
.d3-tag{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--text);font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:12px;box-shadow:0 10px 24px -10px rgba(10,31,78,.4);white-space:nowrap;border:1px solid var(--border)}
.d3-tag svg{width:15px;height:15px;color:var(--c)}
.d3-tag.big{top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:15px;padding:10px 16px;border-radius:14px}
.d3-phone{position:absolute;width:21%;aspect-ratio:9/18.5;border-radius:22px;border:6px solid #0F1B3D;background:#F4F7FC;box-shadow:0 30px 50px -20px rgba(10,31,78,.55);overflow:visible}
.d3-phone .d3-ui{display:block;border-radius:16px;overflow:hidden}
.d3-ph-h{height:26%}
.d3-ph-g{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px}.d3-ph-g i{aspect-ratio:1;border-radius:6px;background:#fff;border:1px solid #E4EAF5}
.d3-ph-l{display:grid;gap:5px;padding:0 7px}.d3-ph-l i{height:12px;border-radius:5px;background:#fff;border:1px solid #E4EAF5}
.d3-phone .d3-tag{bottom:-14px;font-size:12.5px;padding:5px 10px}
.p1{right:22%;top:44%;transform:rotateY(-16deg) rotateZ(-3deg);animation:d3f 7s ease-in-out -1s infinite}
.p2{right:3%;top:30%;transform:rotateY(-14deg) rotateZ(2deg);animation:d3f 7.5s ease-in-out -3s infinite}
.p3{right:12%;top:2%;width:16%;transform:rotateY(-14deg);animation:d3f 8s ease-in-out -5s infinite;opacity:.95}
.d3-chip{position:absolute;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:9px 12px;box-shadow:0 18px 36px -18px rgba(10,31,78,.45);animation:d3f 6s ease-in-out infinite}
.d3-chip span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}.d3-chip svg{width:17px;height:17px}
.d3-chip small{display:block;font-size:11.5px;color:var(--text-3)}.d3-chip b{font:700 15px var(--head)}
.c1{left:0;bottom:6%;animation-delay:-2s}.c2{left:32%;bottom:-2%;animation-delay:-4s}.c3{left:-2%;top:0}
@keyframes d3f{50%{translate:0 -8px}}
/* ================= problems, modules, benefits ================= */
.pb{padding:20px;display:grid;gap:10px;align-content:start}
.pb-x,.pb-v{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.pb-x{color:var(--text-2)}.pb-x svg{width:18px;height:18px;flex:none;color:#E03E55;background:#FDE8EB;border-radius:50%;padding:3px;margin-top:1px}
.pb-x span{text-decoration:line-through;text-decoration-color:rgba(224,62,85,.5)}
.pb-v{font-weight:600;color:var(--text)}.pb-v svg{width:18px;height:18px;flex:none;color:#fff;background:var(--green);border-radius:50%;padding:3px;margin-top:1px}
.pb-arrow{padding-left:4px;color:var(--text-3)}.pb-arrow svg{width:16px;height:16px}
.stagger.in .pb .pb-v{animation:pbv .6s both;animation-delay:inherit}
@keyframes pbv{from{opacity:0;transform:translateY(8px)}}
.mods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.mod{position:relative;display:grid;gap:6px;padding:16px 14px;align-content:start}
.mod b{font:700 15px var(--head)}.mod small{font-size:13px;color:var(--text-2);line-height:1.45}
.mod-go{position:absolute;right:10px;top:10px;color:var(--text-3);transition:.2s}.mod-go svg{width:15px;height:15px}
.mod:hover .mod-go{color:var(--blue);transform:translate(2px,-2px)}
.mod .ic{transition:transform .3s}.mod:hover .ic{transform:scale(1.1) rotate(-4deg)}
.ben{padding:22px}.ben h3{font:700 17px var(--head);margin:12px 0 6px}
/* ================= scenes ================= */
.notes{display:grid;gap:10px;width:260px;max-width:100%}
.note-p{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px 12px;box-shadow:0 14px 30px -18px rgba(10,31,78,.4)}
.note-p span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}.note-p svg{width:17px;height:17px}
.note-p b{display:block;font-size:14.5px}.note-p small{font-size:13px;color:var(--text-3)}
/* bus */
.bus-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%}
.bus-map{position:relative;width:420px;max-width:100%;padding:12px;overflow:hidden}
.bm-h{display:flex;gap:10px;align-items:center;margin-bottom:8px}.bm-h div{flex:1;min-width:0}.bm-h b{display:block;font:700 15px var(--head)}.bm-h small{font-size:12.5px;color:var(--text-3)}
.bm-ic{width:34px;height:34px;border-radius:10px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center}.bm-ic svg{width:18px;height:18px}
.bm-svg{width:100%;height:auto;display:block;background:#EEF4FB;border-radius:12px}
.bm-grid line{stroke:#DCE6F3;stroke-width:1}
.bm-road{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round}
.bm-route{fill:none;stroke:#1E6BFF;stroke-width:5;stroke-linecap:round;stroke-dasharray:10 8;opacity:.8}
.scrow.in .bm-route{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.bstop circle{fill:#fff;stroke:#1E6BFF;stroke-width:3}.bstop circle.in{fill:#1E6BFF;stroke:none}.bstop text{font:600 12.5px var(--body);fill:#4A5678;text-anchor:middle}
.bstop:last-child circle{stroke:#22B45A}.bstop:last-child circle.in{fill:#22B45A}
.bm-bus{position:absolute;left:12px;top:56px;width:34px;height:34px;border-radius:50%;background:#FF8A1F;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,138,31,.25);offset-rotate:0deg;offset-distance:0%;transform-origin:0 0;scale:calc(100% * var(--bs,1))}
.bm-bus svg{width:18px;height:18px}
.scrow.in .bm-bus{animation:busgo 11s ease-in-out infinite}
@keyframes busgo{0%,6%{offset-distance:0%}85%,100%{offset-distance:100%}}
.bm-f{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.bm-f div{background:var(--bg);border-radius:10px;padding:6px 8px}.bm-f small{font-size:11px;color:var(--text-3)}.bm-f b{display:block;font:700 15px var(--head)}
/* staff GPS */
.staff{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.stf-top{background:#7C5CFC;color:#fff;padding:24px 12px 10px}.stf-top small{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.5px}.stf-top b{display:block;font:700 15px var(--head)}
.stf-map{position:relative;height:150px;background:linear-gradient(#EAF3FF,#F4F8FF);background-image:linear-gradient(#DCE6F3 1px,transparent 1px),linear-gradient(90deg,#DCE6F3 1px,transparent 1px);background-size:26px 26px;overflow:hidden}
.geo{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:rgba(34,180,90,.14);border:2px dashed rgba(34,180,90,.6)}
.scrow.in .geo.g2{animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.campus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:10px;background:#fff;color:#22B45A;display:grid;place-items:center;box-shadow:var(--shadow)}.campus svg{width:18px;height:18px}
.gme{position:absolute;left:12%;top:18%;color:#7C5CFC}.gme svg{width:28px;height:28px;fill:rgba(124,92,252,.2)}
.scrow.in .gme{animation:walk 11s ease-in-out infinite}
@keyframes walk{0%,5%{left:12%;top:18%}28%,100%{left:58%;top:34%}}
.stf-c{padding:10px;display:grid;gap:8px;background:#fff}
.stf-loc{display:flex;gap:8px;align-items:center;font-size:13.5px}.stf-loc svg{width:16px;height:16px;color:#22B45A}.stf-loc b{display:block;font-size:14px}.stf-loc small{font-size:11.5px;color:var(--text-3)}
.stf-btn{position:relative;height:40px}
.stf-btn span{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14.5px;font-weight:700;color:#fff}
.stf-btn svg{width:16px;height:16px}
.stf-btn .b1{background:#7C5CFC}.stf-btn .b2{background:#22B45A;opacity:0}
.scrow.in .stf-btn .b1{animation:b1 11s infinite}.scrow.in .stf-btn .b2{animation:b2 11s infinite}
@keyframes b1{0%,30%{opacity:1;transform:none}33%{transform:scale(.95)}36%,100%{opacity:0}}
@keyframes b2{0%,34%{opacity:0}38%,95%{opacity:1}100%{opacity:0}}
.stf-sel{display:flex;gap:6px;align-items:center;font-size:13px;color:#15803D;font-weight:600}.stf-sel svg{width:15px;height:15px}
.stf-feed{width:320px}
/* audit */
.audit{width:460px;max-width:100%;padding:16px}
.au-h{display:flex;gap:10px;align-items:center;margin-bottom:12px}.au-h div{flex:1}.au-h b{display:block;font:700 16px var(--head)}.au-h small{font-size:13px;color:var(--text-3)}
.au-sh{width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}.au-sh svg{width:20px;height:20px}
.au-list{position:relative;display:grid;gap:10px;padding-left:4px}
.au-list::before{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;background:#E4EAF5}
.au-i{position:relative;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.au-d{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 4px #fff}.au-d svg{width:15px;height:15px}
.au-i span{color:var(--text-2)}.au-i small{display:block;font-size:12.5px;color:var(--text-3)}
.au-i s{color:#C42A40}
/* hub */
.hub{position:relative;width:520px;max-width:100%;aspect-ratio:520/340}
.hub-svg{position:absolute;inset:0;width:100%;height:100%}
.hub-l{stroke:#C9D6F2;stroke-width:2;stroke-dasharray:6 6;fill:none}
.scrow.in .hub-l{animation:dash 1s linear infinite}
.hub-dot{fill:var(--c)}
.hub-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:0 0 0 10px rgba(30,107,255,.08),0 20px 40px -18px rgba(10,31,78,.5);display:grid;place-items:center;align-content:center;text-align:center}
.hub-c img{width:52px;height:auto}.hub-c b{font:700 14.5px var(--head)}.hub-c small{font-size:11px;color:var(--text-3)}
.scrow.in .hub-c{animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(30,107,255,.05),0 20px 40px -18px rgba(10,31,78,.5)}}
.hub-n{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-50%);font-size:13.5px;font-weight:700;white-space:nowrap}
.hub-n span{width:46px;height:46px;border-radius:14px;color:#fff;display:grid;place-items:center;box-shadow:0 12px 24px -12px rgba(10,31,78,.6)}.hub-n svg{width:22px;height:22px}
.n1{left:17.3%;top:17.6%}.n2{left:82.7%;top:17.6%}.n3{left:17.3%;top:85.3%}.n4{left:82.7%;top:85.3%}
.hub-m{position:absolute;display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:10px;padding:5px 9px;font-size:12.5px;font-weight:600;box-shadow:0 10px 20px -12px rgba(10,31,78,.4);white-space:nowrap}
.hub-m svg{width:13px;height:13px;color:var(--blue)}
.m1{left:28%;top:26%}.m2{left:54%;top:28%}.m3{left:28%;top:66%}.m4{left:56%;top:68%}
/* absent */
.abs{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.abs-list{width:250px;padding:14px;display:grid;gap:8px}
.abs-r{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;position:relative;padding:4px;border-radius:10px}
.abs-r span:nth-child(2){flex:1}
.tg{width:34px;height:20px;border-radius:10px;background:#22B45A;position:relative;flex:none}
.tg::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.tg.flip{background:#22B45A}
.scrow.in .tg.flip{animation:tgbg 11s infinite}.scrow.in .tg.flip::after{animation:tgk 11s infinite}
@keyframes tgbg{0%,6%{background:#22B45A}10%,94%{background:#D5DCEA}100%{background:#22B45A}}
@keyframes tgk{0%,6%{right:2px}10%,94%{right:16px}100%{right:2px}}
.abs-r em{position:absolute;right:44px;font-style:normal;font-size:11.5px;font-weight:700;color:#C42A40;background:#FDE8EB;padding:2px 7px;border-radius:8px}
.abs-r.hl{background:#FFF8F0}
.abs-arrow{display:grid;justify-items:center;color:var(--blue)}.abs-arrow svg{width:26px;height:26px}.abs-arrow small{font-size:12.5px;color:var(--text-3)}
.phone.lock{background:linear-gradient(160deg,#2C3E7A,#0A1F4E 70%);width:250px}
.lock-t{color:#fff;text-align:center;padding:40px 0 16px}.lock-t b{display:block;font:300 44px var(--head)}.lock-t small{font-size:13.5px;opacity:.8}
.push{margin:0 10px 8px;display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:14px;padding:9px 10px;font-size:13px;line-height:1.4}
.push .pi{width:26px;height:26px;border-radius:8px;background:#0A1F4E;display:grid;place-items:center;flex:none;color:#fff}.push .pi img{width:20px;height:auto}.push .pi svg{width:14px;height:14px}
.push div{flex:1;min-width:0}.push b{display:block;font-size:12.5px;color:var(--text-2)}.push span{display:block;color:var(--text)}.push small{font-size:11px;color:var(--text-3)}
.phone.lock{padding-bottom:14px}
/* live classes */
.live-w{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.lv{width:400px;max-width:100%;padding:12px;background:#0F1B3D;border-color:#0F1B3D;color:#fff}
.lv-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.lv-top b{flex:1;font-size:14.5px}.lv-top small{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;opacity:.8}.lv-top small svg{width:13px;height:13px}
.lv-badge{display:inline-flex;align-items:center;gap:5px;background:#E03E55;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:8px}.lv-badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:bl 1.2s infinite}
.lv-main{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}
.lv-t{position:relative;aspect-ratio:4/3;border-radius:12px;background:linear-gradient(160deg,#7C5CFC,#1E6BFF);display:grid;place-items:center;align-content:center;gap:6px}
.lv-t b{position:absolute;left:8px;bottom:6px;font-size:12.5px;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px}
.lv-av{width:54px;height:54px;border-radius:50%;background:#fff;color:#7C5CFC;display:grid;place-items:center;font:700 18px var(--head)}
.lv-wave{display:flex;gap:3px;height:16px;align-items:center}.lv-wave i{width:3px;height:6px;border-radius:2px;background:#fff}
.scrow.in .lv-wave i{animation:wave 1s ease-in-out infinite}.lv-wave i:nth-child(2){animation-delay:.15s!important}.lv-wave i:nth-child(3){animation-delay:.3s!important}.lv-wave i:nth-child(4){animation-delay:.45s!important}.lv-wave i:nth-child(5){animation-delay:.6s!important}
@keyframes wave{50%{height:16px}}
.lv-board{border-radius:12px;background:#1E4D3A;display:grid;place-items:center;font:600 20px var(--script);color:#F4F7FC;border:4px solid #6B4F2E}
.lv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.lv-s{aspect-ratio:1;border-radius:10px;background:var(--c);display:grid;place-items:center;font:700 13.5px var(--head)}
.lv-bar{display:flex;gap:8px;align-items:center;margin-top:10px}
.lv-bar>span{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center}.lv-bar svg{width:15px;height:15px}
.lv-bar .hand{background:#FF8A1F}
.lv-bar .rec{width:auto;border-radius:10px;padding:0 10px;margin-left:auto;display:inline-flex;gap:5px;font-size:12.5px}.rec i{width:7px;height:7px;border-radius:50%;background:#F0445B;animation:bl 1.2s infinite}
.lv-chat{width:240px}
@media (max-width:1280px){ .mods{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1100px){ .d3{height:400px} }
@media (max-width:760px){ .mods{grid-template-columns:repeat(2,minmax(0,1fr))} .d3{height:300px} .d3-tag.big{font-size:13px;padding:7px 10px} .d3-chip{padding:6px 9px} .d3-chip b{font-size:13.5px} .d3-chip span{width:26px;height:26px} .c2{display:none}
  .hub-n span{width:38px;height:38px}.hub-c{width:104px;height:104px}.hub-c img{width:40px}.hub-m{font-size:9.5px;padding:3px 6px}.hub-n{font-size:11.5px} .abs-arrow{transform:rotate(90deg)} }
@media (prefers-reduced-motion:reduce){ .d3-laptop,.d3-phone,.d3-chip,.bm-bus,.gme{animation:none!important} .bm-bus{offset-distance:100%} .stf-btn .b1{opacity:0}.stf-btn .b2{opacity:1} }
.live-w,.staff,.abs,.bio{width:100%}.lv{width:100%;max-width:400px}.audit{width:100%;max-width:460px}.show-art>*{max-width:100%}
.bm-bus-g .halo{fill:rgba(255,138,31,.22)}.bm-bus-g .body{fill:#FF8A1F}.bm-bus-g .ico *{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.push span b{display:inline;color:inherit;font-size:inherit}
.m1{left:30%;top:1%}.m2{left:64%;top:40%}.m3{left:1%;top:45%}.m4{left:36%;top:88%}
@media (max-width:760px){ .m2{left:58%} }
/* ================= SCHOOL ERP — cinematic hero (real screens, light blur) ================= */
.cine{position:relative;height:470px;max-width:100%;--rx:0deg;--ry:0deg}
.cine.reveal{opacity:1;transform:none}
.cine-stage{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 45%;transform-style:preserve-3d}
.cine-light{position:absolute;inset:4% 0 0 8%;background:radial-gradient(closest-side,rgba(63,140,255,.42),rgba(124,92,252,.18) 55%,transparent 75%);filter:blur(18px);opacity:0}
.cine.in .cine-light{animation:cfade 2.2s .2s ease-out forwards}
.cine-laptop{position:absolute;left:0;top:7%;width:80%;transform-style:preserve-3d;opacity:0;
  transform:translate3d(0,90px,-380px) rotateX(46deg) rotateY(-4deg)}
.cine.in .cine-laptop{animation:claptop 1.9s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes claptop{to{opacity:1;transform:translate3d(0,0,0) rotateX(calc(8deg + var(--rx))) rotateY(calc(-18deg + var(--ry))) rotateZ(1deg)}}
.cine.in.settled .cine-laptop{animation:none;opacity:1;transform:translate3d(0,0,0) rotateX(calc(8deg + var(--rx))) rotateY(calc(-18deg + var(--ry))) rotateZ(1deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cine-screen{position:relative;aspect-ratio:1280/853;border-radius:14px;border:10px solid #0B1426;background:#0B1426;overflow:hidden;box-shadow:0 60px 90px -36px rgba(10,31,78,.6),0 0 0 1px rgba(255,255,255,.06) inset}
.cine-screen img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(6px) brightness(.25);transform:scale(1.03)}
.cine.in .cine-screen img{animation:cpower 1.4s cubic-bezier(.2,.8,.2,1) 1s forwards}
@keyframes cpower{to{filter:blur(.7px) brightness(1) saturate(1.05);transform:scale(1)}}
.glare{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);transform:translateX(-120%)}
.cine.in .glare{animation:cglare 9s ease-in-out 2.2s infinite}
@keyframes cglare{0%{transform:translateX(-120%)}14%,100%{transform:translateX(120%)}}
.cine-base{height:14px;margin:0 -6%;background:linear-gradient(#D5DDEC,#9AA7C2);border-radius:0 0 18px 18px;box-shadow:0 20px 30px -18px rgba(10,31,78,.5)}
.cine-tag{position:absolute;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.96);color:var(--text);font:700 13.5px var(--body);padding:6px 11px;border-radius:12px;box-shadow:0 12px 26px -12px rgba(10,31,78,.5);white-space:nowrap;border:1px solid var(--border);opacity:0}
.cine-tag svg{width:15px;height:15px;color:var(--c)}
.cine-tag.web{left:50%;top:-16px;transform:translateX(-50%);font-size:14.5px;padding:8px 14px}
.cine.in .cine-tag{animation:cfade .6s ease-out 2.3s forwards}
.cine-ph{position:absolute;width:19%;opacity:0;transform-style:preserve-3d}
.cine-ph-in{border-radius:24px;border:6px solid #0B1426;background:#0B1426;overflow:hidden;box-shadow:0 40px 60px -26px rgba(10,31,78,.65)}
.cine-ph-in img{display:block;width:100%;height:auto;filter:blur(.6px)}
.cine-ph .cine-tag{left:50%;bottom:-14px;transform:translateX(-50%)}
.pa{right:23%;top:38%;transform:translate3d(160px,120px,-200px) rotateY(-40deg)}
.pb2{right:1%;top:24%;transform:translate3d(200px,60px,-200px) rotateY(-40deg)}
.pc{right:12%;top:-2%;width:15%;transform:translate3d(160px,-40px,-300px) rotateY(-40deg)}
.cine.in .pa{animation:cph 1.4s cubic-bezier(.16,1,.3,1) 1.25s forwards;--to:rotateY(-14deg) rotateZ(-3deg)}
.cine.in .pb2{animation:cph 1.4s cubic-bezier(.16,1,.3,1) 1.5s forwards;--to:rotateY(-12deg) rotateZ(2deg)}
.cine.in .pc{animation:cph 1.4s cubic-bezier(.16,1,.3,1) 1.75s forwards;--to:rotateY(-12deg)}
@keyframes cph{to{opacity:1;transform:translate3d(0,0,0) var(--to)}}
.cine.in.settled .cine-ph{animation:none;opacity:1;transform:translate3d(calc(var(--ry) * -2px),calc(var(--rx) * 2px),0) var(--to);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cine-chip{position:absolute;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;padding:9px 12px;box-shadow:0 18px 36px -18px rgba(10,31,78,.5);opacity:0;transform:translateY(14px)}
.cine-chip span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}.cine-chip svg{width:17px;height:17px}
.cine-chip small{display:block;font-size:11.5px;color:var(--text-3)}.cine-chip b{font:700 16px var(--head)}
.k1{left:-2%;bottom:5%}.k2{left:36%;bottom:-3%}
.cine.in .k1{animation:cchip .7s cubic-bezier(.2,.8,.2,1) 2.5s forwards}.cine.in .k2{animation:cchip .7s cubic-bezier(.2,.8,.2,1) 2.7s forwards}
@keyframes cchip{to{opacity:1;transform:none}}
@keyframes cfade{to{opacity:1}}
@media (max-width:1100px){ .cine{height:430px} }
@media (max-width:760px){ .cine{height:300px} .cine-tag{font-size:11.5px;padding:4px 8px} .cine-tag.web{font-size:12.5px;padding:5px 9px;top:-12px} .cine-chip{padding:6px 9px}.cine-chip b{font-size:14px}.cine-chip span{width:26px;height:26px} .k2{display:none} .cine-ph-in{border-width:4px;border-radius:16px} }
@media (prefers-reduced-motion:reduce){ .cine *{animation:none!important} .cine-laptop,.cine-ph,.cine-tag,.cine-chip,.cine-light{opacity:1!important} .cine-laptop{transform:rotateX(8deg) rotateY(-18deg)} .cine-ph{transform:var(--to)} .cine-screen img{filter:blur(.7px)} .pa{--to:rotateY(-14deg)}.pb2{--to:rotateY(-12deg)}.pc{--to:rotateY(-12deg)} }
/* ================= problems with charts ================= */
.pbx-grid{align-items:stretch}
.pbx{display:flex;flex-direction:column;gap:14px;padding:20px}
.pbx header{display:flex;align-items:center;gap:10px}.pbx header h3{font:700 17px var(--head);flex:1}
.pbx-ba{display:grid;gap:8px}
.pbx-ba p{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;border-radius:12px;padding:10px 12px}
.pbx-ba b{display:block;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:2px}
.pbx-ba svg{width:18px;height:18px;flex:none;border-radius:50%;padding:3px;margin-top:1px}
.bef{background:#FFF5F6;color:var(--text-2)}.bef b{color:#C42A40}.bef svg{background:#FDE0E5;color:#C42A40}
.aft{background:#F1FBF4;color:var(--text)}.aft b{color:#15803D}.aft svg{background:var(--green);color:#fff}
.pbx-ch{margin:auto 0 0;border-top:1px dashed var(--border);padding-top:12px}
.pch{width:100%;height:auto;display:block;overflow:visible}
.pch .gl{stroke:#EDF1F8;stroke-width:1}.pch .tg-l{stroke:#9AA5BE;stroke-width:1.5;stroke-dasharray:4 4}
.pch .ax{font:500 9.5px var(--body);fill:#7C879F;text-anchor:middle}.pch .ax.r{text-anchor:end}
.pch .lb{font:700 11px var(--body);fill:#27325A;text-anchor:middle}
.pch .lg{font:500 11.5px var(--body);fill:#27325A}.pch .lg.b{font-weight:700;fill:#0F1B3D;text-anchor:end}.pch .lg.c{text-anchor:middle}
.pch .big{font:800 20px var(--head);fill:#0F1B3D;text-anchor:middle}
.pch .bar-a{transform-origin:center bottom;transform-box:fill-box;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}

.in .pch .bar-a{transform:scaleY(1)}
.pch .rem{fill:#FF8A1F;stroke:#fff;stroke-width:2}
.pch .arc{transition:stroke-dasharray 1.2s}
.pch .rt{stroke:#E3EAF7;stroke-width:6;stroke-linecap:round}.pch .rt-done{stroke:var(--blue);stroke-width:6;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.in .pch .rt-done{stroke-dashoffset:0}
.pch .sd{fill:var(--blue);stroke:#fff;stroke-width:2}.pch .sn{fill:#fff;stroke:#22B45A;stroke-width:3}
.pch .ar{fill:#F7FAFF;stroke:#E4EAF5}
.pch .flow{fill:none;stroke:#1E6BFF;stroke-width:2;stroke-dasharray:4 5}
.in .pch .flow{animation:dash 1s linear infinite}
.pch .gh{font:800 13.5px var(--head);fill:#fff;text-anchor:middle;letter-spacing:.5px}
.pbx-lg{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text-2);margin-top:6px}.pbx-lg span{display:inline-flex;align-items:center;gap:6px}.pbx-lg i{width:10px;height:10px;border-radius:3px}
.pbx figcaption{font-size:13.5px;color:var(--text-3);line-height:1.5;margin-top:6px}
/* ================= alignment polish ================= */
.showcase .scrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding:34px 0;border-bottom:1px dashed var(--border)}
.showcase .scrow:last-child{border-bottom:0}
.showcase .show-art{min-height:380px;align-items:center}
.showcase .show-txt{max-width:520px}
.showcase .scrow.flip .show-txt{justify-self:end}
.showcase .show-txt h3{font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.showcase .show-txt p{font-size:16px;line-height:1.75;margin-bottom:10px}
.showcase .ticks{gap:10px}.showcase .ticks li{font-size:15px}
@media (max-width:1000px){ .showcase .scrow{grid-template-columns:1fr;gap:24px} .showcase .show-art{min-height:0} .showcase .scrow.flip .show-txt{justify-self:start} }
/* hero phone layout v2: phones side by side, stepping up, all in front of the laptop */
.cine-laptop{width:76%}
.cine-ph{width:15.5%;z-index:3}
.pa{right:33%;top:40%}.pb2{right:16.5%;top:25%;z-index:4}.pc{right:0;top:10%;width:15.5%;z-index:5}
.cine-ph .cine-tag{bottom:-16px}
.k2{left:30%;bottom:-4%}
@media (max-width:760px){ .cine-ph{width:17%} .pa{right:36%}.pb2{right:18%} .cine-ph .cine-tag{font-size:9.5px;padding:3px 6px;gap:4px} .cine-ph .cine-tag svg{width:11px;height:11px} }
.cine-stage{transform-style:flat}.cine-laptop{z-index:1}
/* ================= SCHOOL ERP — hero ad film (18s loop, CSS only) ================= */
.film{--T:18s;position:relative;aspect-ratio:16/9;width:100%;border-radius:22px;overflow:hidden;container-type:inline-size;background:#071433;box-shadow:0 50px 90px -40px rgba(10,31,78,.7),0 0 0 1px rgba(255,255,255,.06) inset;isolation:isolate}
.film *{animation-duration:var(--T);animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both}
.film.paused,.film.paused *{animation-play-state:paused!important}
.fl-bg{position:absolute;inset:-20%;background:radial-gradient(40% 50% at 30% 30%,#1B4DB8 0,transparent 70%),radial-gradient(40% 50% at 75% 70%,#5B3FD6 0,transparent 70%),linear-gradient(135deg,#071433,#0A1F4E 55%,#0B1737);animation-name:flbg}
@keyframes flbg{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,3%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
.fl-orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5}
.o1{width:30cqw;height:30cqw;left:-6cqw;top:-8cqw;background:#3F8CFF;animation-name:orb1}.o2{width:26cqw;height:26cqw;right:-6cqw;bottom:-10cqw;background:#22B45A;opacity:.28;animation-name:orb2}
@keyframes orb1{50%{transform:translate(8cqw,6cqw)}}@keyframes orb2{50%{transform:translate(-8cqw,-4cqw)}}
.fl-s{position:absolute;inset:0;opacity:0;display:grid;place-items:center}
.fl-s1{animation-name:s1}.fl-s2{animation-name:s2}.fl-s3{animation-name:s3}.fl-s4{animation-name:s4}
@keyframes s1{0%{opacity:0;transform:scale(1.06)}3%{opacity:1;transform:scale(1)}14%{opacity:1;transform:scale(1.02)}17%,100%{opacity:0;transform:scale(1.1)}}
@keyframes s2{0%,15%{opacity:0}18%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes s3{0%,46%{opacity:0}49%,77%{opacity:1}80%,100%{opacity:0}}
@keyframes s4{0%,78%{opacity:0;transform:scale(.96)}81%,97%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* S1 logo */
.fl-s1{align-content:center;justify-items:center;gap:1.6cqw;text-align:center}
.fl-logo{display:flex;align-items:center;gap:2cqw}
.fl-logo img:first-child{width:12cqw;height:auto;animation-name:lmark}.fl-logo img:last-child{width:30cqw;height:auto;animation-name:lword}
@keyframes lmark{0%{transform:translateY(3cqw) scale(.6);opacity:0}4%{transform:none;opacity:1}100%{transform:none;opacity:1}}
@keyframes lword{0%,2%{clip-path:inset(0 100% 0 0);opacity:1}7%,100%{clip-path:inset(0 0 0 0)}}
.fl-tag{font:700 2.2cqw var(--body);letter-spacing:.3cqw;color:#C9D6F2;animation-name:fup1}
.fl-tag span:nth-child(1){color:#F7810F}.fl-tag span:nth-child(3){color:#6DD43C}
.fl-line{font:600 3.2cqw var(--head);color:#fff;animation-name:fup2}
@keyframes fup1{0%,5%{opacity:0;transform:translateY(1.5cqw)}8%,100%{opacity:1;transform:none}}
@keyframes fup2{0%,8%{opacity:0;transform:translateY(1.5cqw)}11%,100%{opacity:1;transform:none}}
/* S2 laptop + camera */
.fl-s2{perspective:120cqw}
.fl-laptop{width:66cqw;margin-top:-4cqw;animation-name:lap}
@keyframes lap{0%,15%{transform:translateY(12cqw) rotateX(28deg) scale(.86);opacity:0}21%{transform:rotateX(7deg) scale(1);opacity:1}45%{transform:rotateX(6deg) scale(1.02);opacity:1}48%,100%{transform:translateY(-4cqw) rotateX(4deg) scale(.9);opacity:0}}
.fl-scr{position:relative;aspect-ratio:1280/853;border-radius:1.2cqw;border:.9cqw solid #0B1426;background:#0B1426;overflow:hidden;box-shadow:0 4cqw 7cqw -3cqw rgba(0,0,0,.6)}
.fl-cam{position:absolute;inset:0;animation-name:cam}
.fl-cam img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(.08cqw) saturate(1.05)}
@keyframes cam{0%,23%{transform:scale(1);transform-origin:50% 50%}28%,32%{transform:scale(2.05);transform-origin:30% 24%}35%,38.5%{transform:scale(1.9);transform-origin:40% 52%}41.5%,44%{transform:scale(2.1);transform-origin:90% 48%}47%,100%{transform:scale(1);transform-origin:50% 50%}}
.fl-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 48%,transparent 60%);animation-name:sheen}
@keyframes sheen{0%,19%{transform:translateX(-120%)}24%,100%{transform:translateX(120%)}}
.fl-base{height:1.2cqw;margin:0 -5%;background:linear-gradient(#D5DDEC,#8C9AB8);border-radius:0 0 1.6cqw 1.6cqw}
.fl-cap{position:absolute;left:4cqw;bottom:9cqw;opacity:0;display:grid;gap:.4cqw;max-width:40cqw;padding:1.4cqw 1.8cqw;border-radius:1.6cqw;background:rgba(7,20,51,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.fl-cap small{font:700 1.3cqw var(--body);letter-spacing:.15cqw;text-transform:uppercase;color:#7FB0FF}
.fl-cap b{font:700 2.9cqw/1.15 var(--head);color:#fff}
.c0{animation-name:c0}.c1{animation-name:c1}.c2{animation-name:c2}.c3{animation-name:c3}
@keyframes c0{0%,19%{opacity:0;transform:translateY(1.5cqw)}21%,24.5%{opacity:1;transform:none}26%,100%{opacity:0}}
@keyframes c1{0%,26.5%{opacity:0;transform:translateY(1.5cqw)}28%,32%{opacity:1;transform:none}33.5%,100%{opacity:0}}
@keyframes c2{0%,34%{opacity:0;transform:translateY(1.5cqw)}35.5%,38.5%{opacity:1;transform:none}40%,100%{opacity:0}}
@keyframes c3{0%,40.5%{opacity:0;transform:translateY(1.5cqw)}42%,45%{opacity:1;transform:none}46.5%,100%{opacity:0}}
/* S3 phones */
.fl-s3{perspective:120cqw}
.fl-ph{position:absolute;top:11cqw;width:17cqw;border-radius:2.4cqw;border:.7cqw solid #0B1426;background:#0B1426;overflow:hidden;box-shadow:0 4cqw 6cqw -2cqw rgba(0,0,0,.65);opacity:0}
.fl-ph img{display:block;width:100%;height:auto;filter:blur(.05cqw)}
.f1{left:41cqw;animation-name:ph1}.f2{left:59.5cqw;animation-name:ph2;top:8cqw}.f3{left:78cqw;animation-name:ph3}
@keyframes ph1{0%,49%{opacity:0;transform:translate(-6cqw,8cqw) rotateY(35deg)}53%{opacity:1;transform:rotateY(12deg) scale(1.04)}57%{opacity:1;transform:rotateY(12deg)}58.5%,69%{opacity:.55;transform:rotateY(12deg) scale(.97)}71%,77%{opacity:1;transform:rotateY(12deg)}80%,100%{opacity:0}}
@keyframes ph2{0%,55%{opacity:0;transform:translateY(10cqw) rotateX(20deg)}59%{opacity:1;transform:scale(1.05)}63%{opacity:1;transform:none}64.5%,69%{opacity:.55;transform:scale(.97)}71%,77%{opacity:1;transform:none}80%,100%{opacity:0}}
@keyframes ph3{0%,61.5%{opacity:0;transform:translate(6cqw,8cqw) rotateY(-35deg)}65.5%,77%{opacity:1;transform:rotateY(-12deg)}80%,100%{opacity:0}}
.fl-s3 .fl-cap{left:4cqw;top:16cqw;bottom:auto;max-width:32cqw}
.d1{animation-name:d1}.d2{animation-name:d2}.d3{animation-name:d3c}.d4{animation-name:d4}
@keyframes d1{0%,51%{opacity:0;transform:translateX(-2cqw)}53%,57%{opacity:1;transform:none}58.5%,100%{opacity:0}}
@keyframes d2{0%,57.5%{opacity:0;transform:translateX(-2cqw)}59.5%,63%{opacity:1;transform:none}64.5%,100%{opacity:0}}
@keyframes d3c{0%,64%{opacity:0;transform:translateX(-2cqw)}66%,69%{opacity:1;transform:none}70.5%,100%{opacity:0}}
@keyframes d4{0%,70.5%{opacity:0;transform:translateX(-2cqw)}72%,77%{opacity:1;transform:none}79%,100%{opacity:0}}
/* S4 end card */
.fl-s4{align-content:center;justify-items:center;gap:2cqw;text-align:center;color:#fff}
.fl-end{display:flex;align-items:center;gap:2cqw}.fl-end>img{width:10cqw;height:auto}.fl-end div img{width:26cqw;height:auto;display:block}.fl-end p{font:700 1.8cqw var(--body);color:#7FB0FF;letter-spacing:.3cqw;text-transform:uppercase;text-align:left;margin-top:.6cqw}
.fl-s4 .fl-h{margin:0}
.fl-s4 .fl-h{font:700 4cqw/1.15 var(--head);max-width:70cqw}
.fl-cta{font:700 2cqw var(--body);background:#1E6BFF;padding:1.2cqw 2.6cqw;border-radius:99px;box-shadow:0 1.6cqw 3cqw -1cqw rgba(30,107,255,.8)}
/* player UI */
.fl-ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 2cqw;background:linear-gradient(transparent,rgba(0,0,0,.45));z-index:5}
.fl-pp{width:3.6cqw;height:3.6cqw;min-width:28px;min-height:28px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;flex:none;animation:none!important}
.fl-pp svg{width:55%;height:55%}
.fl-prog{position:relative;flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.2)}
.fl-prog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#fff;animation-name:prog}
.fl-prog span{position:absolute;top:-2px;width:2px;height:8px;background:rgba(255,255,255,.5);animation:none!important}
@keyframes prog{from{width:0}to{width:100%}}
.fl-ch{font:600 max(10px,1.3cqw) var(--body);color:#C9D6F2;white-space:nowrap;animation:none!important}
.film:hover .fl-ui,.film:focus-within .fl-ui{opacity:1}
@media (prefers-reduced-motion:reduce){ .film *{animation:none!important} .fl-s2{opacity:1} .fl-laptop{transform:rotateX(6deg)} .fl-ui{display:none} }
/* video modal player */
.modal-box video{width:100%;height:100%;display:block;background:#000;border-radius:inherit}
.film *{animation-timing-function:cubic-bezier(.45,.05,.25,1)}
.film .fl-prog i,.film .fl-bg,.film .fl-orb{animation-timing-function:linear}

/* =====================================================================
   STUDENT PAGES — futuristic "fx" look (dark glass, grid, light beams)
   All motion is CSS-only, runs only while on screen ([data-fx].run),
   and switches off for prefers-reduced-motion.
   ===================================================================== */
:root{ --fx-bg:#050B1F; --fx-line:rgba(120,160,255,.16); --fx-cyan:#22D3EE; --fx-vio:#8B5CF6; --fx-mint:#34D399; --fx-txt:#E6EEFF; --fx-dim:#9AA9CC; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.fx{position:relative;overflow:hidden;color:var(--fx-txt);background:radial-gradient(900px 420px at 88% -8%,rgba(59,130,246,.24),transparent 62%),radial-gradient(760px 420px at -6% 104%,rgba(139,92,246,.2),transparent 62%),var(--fx-bg)}
.fx::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(120,160,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.075) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 25%,transparent 78%)}
.fx>.wrap{position:relative;z-index:1}
.fx .crumbs{color:#7F8FB5}.fx .crumbs a{color:#AEBBDD}.fx .crumbs a:hover{color:#fff}
.fx-grad{background:linear-gradient(90deg,#5EEAD4,#60A5FA 45%,#A78BFA 80%,#5EEAD4);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShine 8s linear infinite}
@keyframes fxShine{to{background-position:-220% 0}}
.fx-eb{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:30px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:#A5F3FC;font:700 13px/1 var(--body);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:18px}
.fx-eb svg{width:15px;height:15px}
.fx-eb.sm{padding:6px 12px;font-size:12.5px;margin-bottom:14px}
.fx .btn-primary{box-shadow:0 12px 32px -10px rgba(30,107,255,.75)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.ci,.ci2{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--c,#1E6BFF);background:color-mix(in srgb,var(--c,#1E6BFF) 16%,transparent);border:1px solid color-mix(in srgb,var(--c,#1E6BFF) 38%,transparent)}
.ci svg,.ci2 svg{width:19px;height:19px}

/* ---------- hero ---------- */
.fx-hero{border-top:1px solid rgba(255,255,255,.06)}
.fx-beam{position:absolute;top:-40%;bottom:-40%;left:-30%;width:36%;background:linear-gradient(90deg,transparent,rgba(96,165,250,.09),transparent);transform:rotate(14deg);animation:fxBeam 11s ease-in-out infinite;pointer-events:none}
@keyframes fxBeam{0%{transform:translateX(0) rotate(14deg)}100%{transform:translateX(420%) rotate(14deg)}}
.fxh{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-top:44px;padding-bottom:64px}
.fx-hero h1{font:800 clamp(34px,3.9vw,58px)/1.06 var(--head);letter-spacing:-1.2px;color:#fff}
.fx-hero .lead{font-size:17px;line-height:1.7;color:#B8C4E2;margin:18px 0 26px;max-width:600px}
.fx-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}.fx-hero .ctas .btn{height:50px;padding:0 24px;border-radius:26px;font-size:16px}
.fx-note{display:flex;align-items:center;gap:8px;font-size:14.5px;color:#9AA9CC;margin-top:16px}
.fx-note svg{width:15px;height:15px;color:#FBBF24}.fx-note.ok svg{color:var(--fx-mint)}
.fx-stats{display:flex;gap:0;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);max-width:560px}
.fx-stats div{flex:1;padding-right:18px}.fx-stats div+div{padding-left:18px;border-left:1px solid rgba(255,255,255,.1)}
.fx-stats b{display:block;font:800 28px/1 var(--head);background:linear-gradient(90deg,#fff,#A5C8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-stats span{display:block;font-size:14px;color:#9AA9CC;margin-top:6px}

/* ---------- holographic photo frame ---------- */
.holo{position:relative;max-width:500px;margin:10px 0 10px auto;padding:0}
.holo-f{position:relative;z-index:1;margin:0;border-radius:30px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(34,211,238,.45),0 20px 60px -20px rgba(0,0,0,.6)}
.holo-f img{width:100%;height:auto;display:block}
.holo-f::after{content:"";position:absolute;inset:0;border-radius:30px;padding:1.5px;background:linear-gradient(140deg,#22D3EE,rgba(96,165,250,.2) 35%,rgba(139,92,246,.2) 65%,#8B5CF6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.holo-f::before{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(to top,rgba(5,11,31,.45),transparent);z-index:1;pointer-events:none}
.holo-scan{position:absolute;left:0;right:0;top:0;height:26%;z-index:2;background:linear-gradient(to bottom,transparent,rgba(34,211,238,.16) 60%,rgba(165,243,252,.35) 62%,transparent 64%);mix-blend-mode:screen;animation:holoScan 6s cubic-bezier(.6,0,.4,1) infinite;pointer-events:none}
@keyframes holoScan{0%{transform:translateY(-100%)}70%,100%{transform:translateY(420%)}}
.holo-ring{position:absolute;border-radius:50%;pointer-events:none}
.holo-ring.r1{inset:-9% -12%;border:1px dashed rgba(96,165,250,.35);animation:spin 60s linear infinite}
.holo-ring.r2{inset:8% -4%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);filter:blur(10px);animation:glowP 5s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glowP{50%{opacity:.55}}
.hud{position:absolute;z-index:2;width:26px;height:26px;border:2px solid var(--fx-cyan);opacity:.85;pointer-events:none}
.hud.tl{top:-10px;left:-10px;border-right:0;border-bottom:0;border-top-left-radius:8px}.hud.tr{top:-10px;right:-10px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.hud.bl{bottom:-10px;left:-10px;border-right:0;border-top:0;border-bottom-left-radius:8px}.hud.br{bottom:-10px;right:-10px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.holo-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(8,18,48,.78);border:1px solid rgba(148,187,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 16px 40px -14px rgba(0,0,0,.7);color:#fff;white-space:nowrap;animation:chipIn .7s cubic-bezier(.2,.8,.2,1) both,chipFloat 6s ease-in-out infinite alternate}
.holo-chip b{display:block;font:700 15px/1.2 var(--head)}.holo-chip small{display:block;font-size:13px;color:#9AA9CC;margin-top:2px}
.holo-chip .ci{width:34px;height:34px;border-radius:10px}.holo-chip .ci svg{width:17px;height:17px}
.holo-chip.hc1{top:-3%;left:-14%;animation-delay:.3s,0s}
.holo-chip.hc2{bottom:5%;right:-3%;animation-delay:.6s,-2s}
.holo-chip.hc3{top:46%;left:-18%;animation-delay:.9s,-4s}
.holo.hb .holo-chip.hc2{bottom:auto;right:auto;top:42%;left:-18%}
.holo.hb .holo-chip.hc3{top:auto;bottom:-3%;left:-10%}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes chipFloat{from{translate:0 -5px}to{translate:0 5px}}

/* ---------- section headings on dark ---------- */
.fx-sec{padding:84px 0}
.fx-sec.tight{padding:64px 0 72px}.fx-sec.slim{padding:30px 0}
.fx-head{text-align:center;max-width:760px;margin:0 auto 44px}
.fx-head h2{font:800 clamp(28px,2.8vw,42px)/1.12 var(--head);letter-spacing:-.6px;color:#fff}
.fx-head p{font-size:16.5px;line-height:1.7;color:#AEBBDD;margin-top:12px}
.fx-cap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:14px;color:#8C9BC0;text-align:center}
.fx-cap svg{width:14px;height:14px;flex:none}

/* ---------- AI bot ---------- */
.bot{display:block;overflow:visible}
.bot-l{width:210px;filter:drop-shadow(0 20px 40px rgba(34,211,238,.35));animation:botFloat 5s ease-in-out infinite}
.bot-s{width:74px;position:relative;z-index:2;filter:drop-shadow(0 8px 18px rgba(34,211,238,.4))}
.bot-eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
.bot-ant,.bot-core{animation:antP 1.6s ease-in-out infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes antP{50%{opacity:.3}}
@keyframes botFloat{50%{transform:translateY(-10px)}}

/* ---------- AI engine (inputs → core → outputs) ---------- */
.eng{display:grid;grid-template-columns:minmax(0,1fr) 76px 230px 76px minmax(0,1.1fr);align-items:stretch;max-width:1180px;margin:0 auto}
.eng-in,.eng-out{display:grid;grid-auto-rows:1fr}
.eng-in>div,.eng-out>div{align-self:center}
.eng-node,.eng-out-c{margin:7px 0;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(148,187,255,.18)}
.eng-node{display:flex;align-items:center;gap:12px;padding:12px 14px}
.eng-node b{display:block;font:700 15.5px/1.25 var(--head);color:#fff}.eng-node small{display:block;font-size:13.5px;color:#9AA9CC;margin-top:2px}
.eng-w{width:100%;height:100%;overflow:visible}
.eng-w .wb{fill:none;stroke:rgba(120,160,255,.28);stroke-width:1.4;vector-effect:non-scaling-stroke}
.eng-w .wf{fill:none;stroke:#22D3EE;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:3 14;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px #22D3EE);animation:wflow 1.1s linear infinite}
@keyframes wflow{to{stroke-dashoffset:-17}}
.eng-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:10px 0}
.core-vis{position:relative;width:176px;height:176px;display:grid;place-items:center}
.cr{position:absolute;border-radius:50%;pointer-events:none}
.cr.a{inset:0;border:2px dashed rgba(34,211,238,.45);animation:spin 16s linear infinite}
.cr.b{inset:14px;border:3px solid transparent;border-top-color:#60A5FA;border-left-color:#60A5FA;animation:spin 5s linear infinite reverse}
.cr.c{inset:28px;background:conic-gradient(from 0deg,transparent 0 62%,rgba(34,211,238,.9) 88%,transparent);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:spin 2.4s linear infinite}
.core-glow{position:absolute;inset:36px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.45),rgba(59,130,246,.12) 60%,transparent 70%);animation:glowP 2.6s ease-in-out infinite}
.core-lbl{text-align:center;width:100%}
.core-lbl small{display:block;font:700 11.5px/1 var(--mono);letter-spacing:2px;color:#67E8F9}
.core-steps{position:relative;height:22px;margin-top:8px}
.core-steps span{position:absolute;inset:0;font:700 15px/22px var(--head);color:#fff;opacity:0;animation:cstep 9s infinite}
.core-steps span:nth-child(2){animation-delay:3s}.core-steps span:nth-child(3){animation-delay:6s}
@keyframes cstep{0%{opacity:0;transform:translateY(8px)}3%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px)}}
.core-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin:10px auto 0;width:150px}
.core-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22D3EE,#8B5CF6);transform-origin:left;animation:cbar 3s linear infinite}
@keyframes cbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.eng-out-c{padding:14px 16px;color:#fff;opacity:.28;transform:translateX(10px)}
.eng-out-c b{display:block;font:700 16px/1.25 var(--head)}.eng-out-c small{display:block;font-size:14px;color:#AEBBDD;margin-top:4px;line-height:1.45}
.eng-out-c.eo1{animation:eo1 9s infinite}.eng-out-c.eo2{animation:eo2 9s infinite}.eng-out-c.eo3{animation:eo3 9s infinite}
@keyframes eo1{0%,26%{opacity:.28;transform:translateX(10px);border-color:rgba(148,187,255,.18);box-shadow:none}30%{opacity:1;transform:none;border-color:#22D3EE;box-shadow:0 0 0 4px rgba(34,211,238,.12),0 0 34px -6px rgba(34,211,238,.6)}40%,94%{opacity:1;transform:none;border-color:rgba(34,211,238,.45);box-shadow:0 0 30px -12px rgba(34,211,238,.6)}100%{opacity:.28;transform:translateX(10px)}}
@keyframes eo2{0%,52%{opacity:.28;transform:translateX(10px);border-color:rgba(148,187,255,.18);box-shadow:none}56%{opacity:1;transform:none;border-color:#A78BFA;box-shadow:0 0 0 4px rgba(167,139,250,.12),0 0 34px -6px rgba(167,139,250,.6)}66%,94%{opacity:1;transform:none;border-color:rgba(167,139,250,.45);box-shadow:none}100%{opacity:.28;transform:translateX(10px)}}
@keyframes eo3{0%,76%{opacity:.28;transform:translateX(10px);border-color:rgba(148,187,255,.18);box-shadow:none}80%{opacity:1;transform:none;border-color:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.12),0 0 34px -6px rgba(52,211,153,.6)}88%,94%{opacity:1;transform:none;border-color:rgba(52,211,153,.45);box-shadow:none}100%{opacity:.28;transform:translateX(10px)}}
.tagx{display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1 var(--body);padding:5px 9px;border-radius:20px;margin-bottom:8px}
.tagx.g{background:rgba(52,211,153,.16);color:#6EE7B7;border:1px solid rgba(52,211,153,.4)}
.opts3{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:8px!important}
.opts3 i{font-style:normal;font-size:13.5px;padding:4px 9px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#DCE6FF}
/* skill gauge output */
@property --n{syntax:'<integer>';inherits:false;initial-value:300}
.sg{display:flex;align-items:center;gap:14px}
.sg svg{width:120px;flex:none}
.sg .gt,.dp-gauge .gt{fill:none;stroke:rgba(255,255,255,.12);stroke-width:14;stroke-linecap:round}
.sg .gv{fill:none;stroke:url(#none);stroke:#22D3EE;stroke-width:14;stroke-linecap:round;stroke-dasharray:74 100;stroke-dashoffset:74;animation:sgv 9s infinite}
.sg-n b{display:block;font:800 30px/1 var(--head);color:#fff;--n:300;animation:sgn 9s infinite}
.sg-n b::after{counter-reset:n var(--n);content:counter(n)}
.sg-n span{display:block;font:700 14.5px/1.2 var(--head);color:#6EE7B7;margin-top:4px}.sg-n small{display:block;font-size:12.5px;color:#8C9BC0;margin-top:2px}
@keyframes sgv{0%,26%{stroke-dashoffset:74}40%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:74}}
@keyframes sgn{0%,26%{--n:300}40%,94%{--n:742}100%{--n:300}}

/* ---------- pillars 01–04 ---------- */
.pil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pil-c{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(148,187,255,.2);transition:transform .3s,border-color .3s,box-shadow .3s}
.pil-c:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 26px 50px -24px color-mix(in srgb,var(--c) 80%,transparent)}
.pil-n{position:absolute;top:18px;right:18px;font:800 14.5px/1 var(--mono);color:var(--c);padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--c) 16%,transparent)}
.pil-i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent),0 12px 30px -8px var(--c);margin-bottom:18px}
.pil-i svg{width:26px;height:26px}
.pil-c h3{font:800 21px/1.2 var(--head);color:#fff}
.pil-c p{font-size:15px;line-height:1.6;color:#AEBBDD;margin:8px 0 14px}
.pil-c ul{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.pil-c li{display:flex;align-items:center;gap:8px;font-size:15px;color:#DCE6FF}
.pil-c li svg{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--c);color:#fff;flex:none}
.pil-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:700 15px var(--head);color:var(--c)}
.pil-go svg{width:15px;height:15px;transition:transform .2s}.pil-c:hover .pil-go svg{transform:translateX(4px)}
.pil-sweep{position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);animation:pilSweep 7s ease-in-out infinite;pointer-events:none}
.pil-c:nth-child(2) .pil-sweep{animation-delay:1.2s}.pil-c:nth-child(3) .pil-sweep{animation-delay:2.4s}.pil-c:nth-child(4) .pil-sweep{animation-delay:3.6s}
@keyframes pilSweep{0%,60%{transform:translateX(0)}100%{transform:translateX(450%)}}

/* ---------- journey track ---------- */
.jr{max-width:1240px;margin:0 auto}
.jr-rail{position:relative}
.jr-track{position:absolute;left:calc(100%/12);right:calc(100%/12);top:36px;height:2px;background:rgba(120,160,255,.2)}
.jr-beam{position:absolute;inset:0;background:linear-gradient(90deg,#22D3EE,#60A5FA,#8B5CF6);transform-origin:left;transform:scaleX(0);animation:jrBeam 12s linear infinite}
.jr-run{position:absolute;inset:0;animation:jrRun 12s linear infinite}
.jr-orb{position:absolute;left:0;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(34,211,238,.35),0 0 26px 8px rgba(34,211,238,.75)}
@keyframes jrBeam{0%{transform:scaleX(0);opacity:1}85%{transform:scaleX(1)}95%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes jrRun{0%{transform:translateX(0);opacity:1}85%{transform:translateX(100%);opacity:1}95%{opacity:1;transform:translateX(100%)}100%{transform:translateX(100%);opacity:0}}
.jr-st{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;position:relative}
.jr-st li{text-align:center;padding:0 4px}
.jr-dot{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;background:#0A1433;border:1.5px solid rgba(148,187,255,.25);color:#8C9BC0;animation:1s linear infinite}
.jr-dot svg{width:28px;height:28px}
.jr-st em{display:block;font:700 12.5px/1 var(--mono);letter-spacing:1.5px;color:#67E8F9;font-style:normal;margin-bottom:6px}
.jr-st h3{font:800 17px/1.25 var(--head);color:#fff}
.jr-st p{font-size:14.5px;line-height:1.55;color:#AEBBDD;margin-top:6px}
.jr-st .j0 .jr-dot{animation:jr0 12s infinite}.jr-st .j1 .jr-dot{animation:jr1 12s infinite}.jr-st .j2 .jr-dot{animation:jr2 12s infinite}
.jr-st .j3 .jr-dot{animation:jr3 12s infinite}.jr-st .j4 .jr-dot{animation:jr4 12s infinite}.jr-st .j5 .jr-dot{animation:jr5 12s infinite}
@keyframes jr0{0%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}1%,95%{background:#0E2A5C;color:#fff;border-color:#22D3EE;box-shadow:0 0 0 6px rgba(34,211,238,.1),0 0 32px rgba(34,211,238,.5)}100%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}}
@keyframes jr1{0%,16.5%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}17%,95%{background:#0E2A5C;color:#fff;border-color:#22D3EE;box-shadow:0 0 0 6px rgba(34,211,238,.1),0 0 32px rgba(34,211,238,.5)}100%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}}
@keyframes jr2{0%,33.5%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}34%,95%{background:#0E2A5C;color:#fff;border-color:#22D3EE;box-shadow:0 0 0 6px rgba(34,211,238,.1),0 0 32px rgba(34,211,238,.5)}100%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}}
@keyframes jr3{0%,50.5%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}51%,95%{background:#0E2A5C;color:#fff;border-color:#60A5FA;box-shadow:0 0 0 6px rgba(96,165,250,.1),0 0 32px rgba(96,165,250,.5)}100%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}}
@keyframes jr4{0%,67.5%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}68%,95%{background:#1E1A4F;color:#fff;border-color:#A78BFA;box-shadow:0 0 0 6px rgba(167,139,250,.1),0 0 32px rgba(167,139,250,.5)}100%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}}
@keyframes jr5{0%,84.5%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}85%,95%{background:#1E1A4F;color:#fff;border-color:#A78BFA;box-shadow:0 0 0 6px rgba(167,139,250,.1),0 0 32px rgba(167,139,250,.5)}100%{background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25);box-shadow:none}}
.jr-end{display:flex;align-items:center;gap:16px;margin:40px auto 0;max-width:900px;padding:18px 20px;border-radius:20px;background:linear-gradient(90deg,rgba(34,211,238,.1),rgba(139,92,246,.1));border:1px solid rgba(148,187,255,.25)}
.jr-end-i{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#22D3EE,#8B5CF6);color:#fff}
.jr-end b{display:block;font:800 17px/1.25 var(--head);color:#fff}.jr-end small{display:block;font-size:14.5px;color:#AEBBDD;margin-top:3px}
.jr-end .btn{margin-left:auto;flex:none}

/* ---------- dashboard preview window ---------- */
.dp-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.h2l{font:800 clamp(28px,2.8vw,40px)/1.14 var(--head);letter-spacing:-.5px;margin:6px 0 12px}.h2l span{color:var(--blue)}
.lead-s{font-size:16.5px;line-height:1.7;color:var(--text-2);max-width:560px}
.ticks.lg li{font-size:15.5px;margin-top:10px}
.dp{border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 40px 80px -36px rgba(15,40,100,.45),0 0 0 8px rgba(30,107,255,.05)}
.dp-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#F1F5FC;border-bottom:1px solid var(--border)}
.dp-bar i{width:10px;height:10px;border-radius:50%;background:#F87171}.dp-bar i:nth-child(2){background:#FBBF24}.dp-bar i:nth-child(3){background:#34D399}
.dp-bar span{margin-left:12px;font:500 13px var(--mono);color:var(--text-3);background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px 10px}
.dp-body{display:grid;grid-template-columns:170px minmax(0,1fr);min-height:300px}
.dp-side{background:var(--navy);padding:14px 10px;display:flex;flex-direction:column;gap:6px}
.dp-side img{margin:0 0 10px 6px}
.dp-n{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;font:600 14px var(--body);color:#AFC0E6;animation:dpN 12s infinite}
.dp-n svg{width:15px;height:15px}
.dp-n.dpn1{animation-delay:3s}.dp-n.dpn2{animation-delay:6s}.dp-n.dpn3{animation-delay:9s}
@keyframes dpN{0%,24%{background:rgba(59,130,246,.28);color:#fff}25%,100%{background:transparent;color:#AFC0E6}}
.dp-main{position:relative;padding:18px}
.dp-p{position:absolute;inset:18px;opacity:0;animation:dpP 12s infinite}
.dp-p.dpp1{animation-delay:3s}.dp-p.dpp2{animation-delay:6s}.dp-p.dpp3{animation-delay:9s}
@keyframes dpP{0%{opacity:0;transform:translateY(10px)}2%,23%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-6px)}}
.dp-k{display:block;font:700 12.5px var(--body);text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin-bottom:12px}
.dp-hero{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--blue-soft)}
.dp-hero b{display:block;font:800 18px var(--head)}
.dp-tag{display:inline-block;font:700 12.5px var(--body);padding:4px 8px;border-radius:12px;margin-top:4px}.dp-tag.g{background:#DCFCE7;color:#15803D}
.dp-rows{display:grid;gap:10px;margin-top:14px}
.dp-rows span{display:grid;gap:5px;font-size:14px;font-weight:600;color:var(--text-2)}
.dp-rows i,.dp-prog i{display:block;height:7px;border-radius:5px;background:linear-gradient(90deg,var(--blue),#60A5FA);width:var(--w)}
.dp-gauge{position:relative;width:200px;margin:0 auto;text-align:center}
.dp-gauge svg{width:200px}.dp-gauge .gt{stroke:#E3EAF7}
.dp-gauge .gv{fill:none;stroke:#1E6BFF;stroke-width:14;stroke-linecap:round;stroke-dasharray:74 100}
.dp-gauge b{position:absolute;left:0;right:0;top:48px;font:800 32px var(--head)}.dp-gauge span{position:absolute;left:0;right:0;top:86px;font:700 13.5px var(--body);color:#15803D}
.dp-mini{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dp-mini span{flex:1;min-width:90px;padding:10px;border-radius:12px;background:#F5F8FD;border:1px solid var(--border);font-size:13px;color:var(--text-2)}
.dp-mini b{display:block;font:800 17px var(--head);color:var(--text);margin-top:2px}
.dp-course{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.dp-course>div{flex:1}.dp-course b{font:700 15px var(--head)}.dp-course small{font-size:13px;color:var(--text-3)}
.dp-prog{height:7px;border-radius:5px;background:#E3EAF7;margin:6px 0 4px}
.dp-cert{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;background:#DCFCE7;color:#15803D;font:700 14px var(--body)}
.dp-cert svg{width:16px;height:16px}
.dp-trk{list-style:none;display:grid;gap:10px;margin:4px 0 0}
.dp-trk li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text-3)}
.dp-trk li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #CBD5E8;flex:none}
.dp-trk li.d{color:var(--text)}.dp-trk li.d::before{background:#22B45A;border-color:#22B45A}
.dp-trk li.a{color:var(--blue);font-weight:700}.dp-trk li.a::before{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.18)}

/* ---------- login gate ---------- */
.gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;gap:18px 34px;padding:30px;border-radius:24px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);max-width:1180px;margin:0 auto;position:relative;overflow:hidden}
.gate::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#22D3EE,#1E6BFF,#8B5CF6)}
.gate-h{display:flex;gap:14px;align-items:flex-start}
.gate-ic{width:52px;height:52px;border-radius:16px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1E6BFF,#8B5CF6);box-shadow:0 12px 26px -10px rgba(30,107,255,.7)}
.gate-ic svg{width:24px;height:24px}
.gate-h h3{font:800 21px/1.25 var(--head)}.gate-h p{font-size:15px;line-height:1.6;color:var(--text-2);margin-top:6px}
.gate-cols{grid-row:1 / span 2;grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gate-cols>div{padding:18px;border-radius:16px;background:#F5F8FD;border:1px solid var(--border)}
.gate-cols>div.lk{background:linear-gradient(180deg,#EEF4FF,#F5F0FF);border-color:#D6E2FF}
.gate-cols b{display:flex;align-items:center;gap:8px;font:700 15px var(--head);margin-bottom:10px}
.gate-cols b svg{width:17px;height:17px;color:var(--blue)}
.gate-cols ul{list-style:none;display:grid;gap:8px}
.gate-cols li{display:flex;gap:8px;font-size:15px;color:var(--text-2);line-height:1.45}
.gate-cols li svg{width:15px;height:15px;flex:none;margin-top:2px;color:#22B45A}
.gate-cols .lk li svg{color:var(--purple)}
.gate-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;align-self:end}
.gate .btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text)}
.gate .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.gate-s{font-size:14px;color:var(--text-3);width:100%}

/* ---------- bands, who, courses ---------- */
.fx-band,.lband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fx-band>div,.lband>div{display:flex;align-items:center;gap:12px;padding:6px 4px}
.fx-band b{font:700 16px/1.3 var(--head);color:#fff}
.lband{padding:22px 24px;border-radius:22px;background:var(--navy);box-shadow:var(--shadow)}
.lband b{font:700 16px/1.3 var(--head);color:#fff}
.lband .ci{background:#fff;border:0}
.who{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
.who-l{font:800 13.5px var(--body);letter-spacing:1.5px;text-transform:uppercase;color:#6EE7B7;padding:8px 14px;border-radius:20px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35)}
.who-c{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(148,187,255,.22);font:700 16px var(--head);color:#fff}
.who-c .ci{width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;border:0}
.crs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.crs-c{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:0 4px 16px -10px rgba(15,40,100,.2);transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.crs-c::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.crs-c:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px color-mix(in srgb,var(--c) 70%,transparent);border-color:color-mix(in srgb,var(--c) 40%,white)}
.crs-c:hover::after{transform:scaleX(1)}
.crs-c .ci{width:46px;height:46px;border-radius:14px;background:var(--c);color:#fff;border:0;box-shadow:0 10px 22px -10px var(--c)}
.crs-t b{display:block;font:800 17px/1.25 var(--head)}.crs-t small{display:block;font-size:14.5px;line-height:1.5;color:var(--text-2);margin-top:4px}
.crs-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:700 14.5px var(--head);color:var(--c)}
.crs-go svg{width:14px;height:14px}
.num-c{position:relative}.num-c .nc{position:absolute;top:18px;right:18px;font:800 14.5px var(--mono);color:var(--text-3)}
.lvls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.lvls div{padding:12px 18px;border-radius:14px;background:#fff;border:1px solid var(--border);text-align:center}
.lvls b{display:block;font:700 15.5px var(--head)}.lvls small{font-size:13.5px;color:var(--text-3)}
.lvls span{width:100%;text-align:center;font-size:14.5px;color:var(--text-2)}

/* ---------- certificate machine ---------- */
.cp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;max-width:1120px;margin:0 auto}
.cp-flow{list-style:none;display:grid;gap:10px;position:relative}
.cp-flow::before{content:"";position:absolute;left:31px;top:28px;bottom:28px;width:2px;background:rgba(120,160,255,.2)}
.cp-flow li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;border:1px solid rgba(148,187,255,.14);background:rgba(255,255,255,.03);position:relative}
.cp-flow li .ci{position:relative;z-index:1;background:#0A1433;color:#8C9BC0;border-color:rgba(148,187,255,.25)}
.cp-flow b{display:block;font:700 16px var(--head);color:#fff}.cp-flow small{font-size:14px;color:#9AA9CC}
.cp-flow .cf0{animation:cpF0 10s infinite}.cp-flow .cf1{animation:cpF1 10s infinite}.cp-flow .cf2{animation:cpF2 10s infinite}.cp-flow .cf3{animation:cpF3 10s infinite}.cp-flow .cf4{animation:cpF4 10s infinite}
.cp-flow .cf0 .ci{animation:cpI0 10s infinite}.cp-flow .cf1 .ci{animation:cpI1 10s infinite}.cp-flow .cf2 .ci{animation:cpI2 10s infinite}.cp-flow .cf3 .ci{animation:cpI3 10s infinite}.cp-flow .cf4 .ci{animation:cpI4 10s infinite}
@keyframes cpF0{0%,95%{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.07)}100%{border-color:rgba(148,187,255,.14);background:rgba(255,255,255,.03)}}
@keyframes cpF1{0%,17%{border-color:rgba(148,187,255,.14);background:rgba(255,255,255,.03)}18%,95%{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.07)}100%{border-color:rgba(148,187,255,.14)}}
@keyframes cpF2{0%,35%{border-color:rgba(148,187,255,.14);background:rgba(255,255,255,.03)}36%,95%{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.07)}100%{border-color:rgba(148,187,255,.14)}}
@keyframes cpF3{0%,53%{border-color:rgba(148,187,255,.14);background:rgba(255,255,255,.03)}54%,95%{border-color:rgba(52,211,153,.6);background:rgba(52,211,153,.08)}100%{border-color:rgba(148,187,255,.14)}}
@keyframes cpF4{0%,71%{border-color:rgba(148,187,255,.14);background:rgba(255,255,255,.03)}72%,95%{border-color:rgba(96,165,250,.6);background:rgba(96,165,250,.09)}100%{border-color:rgba(148,187,255,.14)}}
@keyframes cpI0{0%,95%{background:#22D3EE;color:#051029;border-color:#22D3EE}100%{background:#0A1433;color:#8C9BC0}}
@keyframes cpI1{0%,17%{background:#0A1433;color:#8C9BC0}18%,95%{background:#22D3EE;color:#051029;border-color:#22D3EE}100%{background:#0A1433;color:#8C9BC0}}
@keyframes cpI2{0%,35%{background:#0A1433;color:#8C9BC0}36%,95%{background:#22D3EE;color:#051029;border-color:#22D3EE}100%{background:#0A1433;color:#8C9BC0}}
@keyframes cpI3{0%,53%{background:#0A1433;color:#8C9BC0}54%,95%{background:#34D399;color:#051029;border-color:#34D399}100%{background:#0A1433;color:#8C9BC0}}
@keyframes cpI4{0%,71%{background:#0A1433;color:#8C9BC0}72%,95%{background:#60A5FA;color:#051029;border-color:#60A5FA}100%{background:#0A1433;color:#8C9BC0}}
.cp-stage{position:relative;padding:20px 30px 34px}
.cp-stage::before{content:"";position:absolute;inset:10% 6%;background:radial-gradient(circle,rgba(34,211,238,.28),transparent 65%);filter:blur(20px)}
.cp-cert{position:relative;aspect-ratio:1.42;border-radius:14px;padding:10px;background:linear-gradient(135deg,#0D2A66,#1E6BFF 40%,#D4A33A 41%,#F5D67A 50%,#0D2A66 51%);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);transform:perspective(1200px) rotateY(-8deg) rotateX(4deg);animation:cpCard 10s infinite}
.cp-in{height:100%;border-radius:8px;background:#FDFCF7;padding:6% 7%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#0A1F4E}
.cp-top{display:flex;align-items:center;gap:8px;align-self:center}
.cp-top b{display:block;font:800 17px/1 var(--head)}.cp-top small{display:block;font:600 12.5px var(--body);color:#4A5678;text-align:left}
.cp-k{font:700 clamp(14px,1.6vw,21px) var(--head);margin-top:4%;color:#0A1F4E}
.cp-name{font:700 clamp(24px,2.8vw,38px)/1.1 var(--script);color:#0D2A66;border-bottom:1px solid #C8D1E6;padding:0 6% 4px;margin-top:3%}
.cp-name span{display:inline-block;animation:cpName 10s infinite}
.cp-for{font-size:13.5px;color:#4A5678;margin-top:3%}.cp-prog{font:700 clamp(12px,1.25vw,15px) var(--head);margin-top:1%}
.cp-foot{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;font-size:11.5px;color:#4A5678}
.cp-seal{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#F5D67A,#D4A33A);color:#7A5200;box-shadow:0 0 0 4px #FFF3C4,0 6px 16px -4px rgba(180,120,0,.6);animation:cpSeal 10s infinite}
.cp-seal svg{width:24px;height:24px}
.cp-stamp{position:absolute;top:12%;right:-2%;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:#22B45A;color:#fff;font:800 15px var(--head);box-shadow:0 12px 26px -10px rgba(34,180,90,.8);animation:cpStamp 10s infinite}
.cp-stamp svg{width:18px;height:18px}
.cp-li{position:absolute;bottom:0;left:18%;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:24px;background:#0A66C2;color:#fff;font:700 15px var(--head);box-shadow:0 14px 30px -10px rgba(10,102,194,.8);animation:cpLi 10s infinite}
.cp-li svg{width:17px;height:17px}
@keyframes cpCard{0%,50%{opacity:.4;filter:saturate(.3)}55%,95%{opacity:1;filter:none}100%{opacity:.4;filter:saturate(.3)}}
@keyframes cpName{0%,54%{clip-path:inset(0 100% 0 0)}64%,95%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes cpSeal{0%,62%{transform:scale(0) rotate(-40deg);opacity:0}66%{transform:scale(1.25) rotate(0);opacity:1}69%,95%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes cpStamp{0%,67%{opacity:0;transform:scale(1.7) rotate(-10deg)}71%,95%{opacity:1;transform:scale(1) rotate(-10deg)}100%{opacity:0}}
@keyframes cpLi{0%,73%{opacity:0;transform:translateY(14px)}77%,95%{opacity:1;transform:none}100%{opacity:0}}

/* ---------- loan console ---------- */
.lc{position:relative;max-width:470px;margin-left:auto;padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(148,187,255,.25);box-shadow:0 40px 90px -30px rgba(34,211,238,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lc-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.lc-h b{display:block;font:800 17px var(--head);color:#fff}.lc-h small{font-size:13.5px;color:#9AA9CC}
.lc-live{margin-left:auto;display:flex;align-items:center;gap:6px;font:700 12.5px var(--mono);letter-spacing:1px;color:#6EE7B7;text-transform:uppercase}
.lc-live i{width:8px;height:8px;border-radius:50%;background:#34D399;animation:antP 1.2s infinite}
.lc-s{list-style:none;display:grid;gap:10px;margin:16px 0}
.lc-s li{display:flex;align-items:center;gap:12px;font-size:15px;color:#8C9BC0}
.lc-s li svg{width:22px;height:22px;padding:4px;border-radius:50%;border:1.5px solid rgba(148,187,255,.3);color:transparent;flex:none}
.lc-s .ls1{animation:lcS1 10s infinite}.lc-s .ls2{animation:lcS2 10s infinite}.lc-s .ls3{animation:lcS3 10s infinite}.lc-s .ls4{animation:lcS4 10s infinite}.lc-s .ls5{animation:lcS5 10s infinite}
.lc-s .ls1 svg{animation:lcI1 10s infinite}.lc-s .ls2 svg{animation:lcI2 10s infinite}.lc-s .ls3 svg{animation:lcI3 10s infinite}.lc-s .ls4 svg{animation:lcI4 10s infinite}.lc-s .ls5 svg{animation:lcI5 10s infinite}
@keyframes lcS1{0%,8%{color:#8C9BC0}10%,95%{color:#fff}100%{color:#8C9BC0}}
@keyframes lcS2{0%,23%{color:#8C9BC0}25%,95%{color:#fff}100%{color:#8C9BC0}}
@keyframes lcS3{0%,38%{color:#8C9BC0}40%,95%{color:#fff}100%{color:#8C9BC0}}
@keyframes lcS4{0%,53%{color:#8C9BC0}55%,95%{color:#fff}100%{color:#8C9BC0}}
@keyframes lcS5{0%,68%{color:#8C9BC0}70%,95%{color:#fff}100%{color:#8C9BC0}}
@keyframes lcI1{0%,8%{background:none;color:transparent;border-color:rgba(148,187,255,.3)}10%,95%{background:#34D399;color:#051029;border-color:#34D399}100%{background:none;color:transparent}}
@keyframes lcI2{0%,23%{background:none;color:transparent;border-color:rgba(148,187,255,.3)}25%,95%{background:#34D399;color:#051029;border-color:#34D399}100%{background:none;color:transparent}}
@keyframes lcI3{0%,38%{background:none;color:transparent;border-color:rgba(148,187,255,.3)}40%,95%{background:#34D399;color:#051029;border-color:#34D399}100%{background:none;color:transparent}}
@keyframes lcI4{0%,53%{background:none;color:transparent;border-color:rgba(148,187,255,.3)}55%,95%{background:#34D399;color:#051029;border-color:#34D399}100%{background:none;color:transparent}}
@keyframes lcI5{0%,68%{background:none;color:transparent;border-color:rgba(148,187,255,.3)}70%,95%{background:#22D3EE;color:#051029;border-color:#22D3EE}100%{background:none;color:transparent}}
.lc-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.lc-bar i{display:block;height:100%;background:linear-gradient(90deg,#34D399,#22D3EE);transform-origin:left;animation:lcBar 10s infinite}
@keyframes lcBar{0%{transform:scaleX(0)}72%,95%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.lc-k{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.lc-k div{padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(148,187,255,.16)}
.lc-k small{display:block;font-size:13px;color:#9AA9CC}.lc-k b{display:block;font:800 19px var(--head);color:#fff;margin-top:3px}
.lc-coin{position:absolute;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--head);color:#7A5200;background:radial-gradient(circle at 35% 30%,#FFF1B8,#F5C542 55%,#C98F12);box-shadow:0 10px 24px -8px rgba(245,197,66,.8);animation:coin 6s ease-in-out infinite}
.lc-coin.lcc1{top:-16px;right:-14px}.lc-coin.lcc2{bottom:28%;left:-20px;width:32px;height:32px;font-size:16px;animation-delay:-3s}
@keyframes coin{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}

/* ---------- Ghosla AI visual + demo ---------- */
.aiv{position:relative;width:min(420px,calc(100% - 60px));aspect-ratio:1;margin:0 40px 0 auto}
.aiv-orbit{position:absolute;inset:0}
.aiv-ring{position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(96,165,250,.4);animation:spin 40s linear infinite}
.aiv-ring.r2{inset:28%;border:2px solid transparent;border-top-color:#22D3EE;border-bottom-color:#8B5CF6;animation-duration:9s;animation-direction:reverse}
.aiv-bot{position:absolute;inset:0;display:grid;place-items:center}
.aiv-bot::before{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.4),transparent 70%);animation:glowP 3s ease-in-out infinite}
.aiv-t{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:22px;background:rgba(8,18,48,.8);border:1px solid rgba(148,187,255,.3);font:700 14.5px var(--head);color:#DCE6FF;white-space:nowrap;transform:translate(-50%,-50%);animation:aivT 12s infinite}
.aiv-t svg{width:15px;height:15px;color:#67E8F9}
.aiv-t.at0{left:50%;top:5%}.aiv-t.at1{left:86%;top:27%;animation-delay:2s}.aiv-t.at2{left:86%;top:73%;animation-delay:4s}.aiv-t.at3{left:50%;top:95%;animation-delay:6s}.aiv-t.at4{left:14%;top:73%;animation-delay:8s}.aiv-t.at5{left:14%;top:27%;animation-delay:10s}
@keyframes aivT{0%{border-color:#22D3EE;box-shadow:0 0 0 4px rgba(34,211,238,.12),0 0 26px rgba(34,211,238,.5);color:#fff}16%{border-color:#22D3EE;box-shadow:0 0 26px rgba(34,211,238,.4);color:#fff}18%,100%{border-color:rgba(148,187,255,.3);box-shadow:none;color:#DCE6FF}}
.aid{padding:0;overflow:hidden;min-height:470px;display:flex;flex-direction:column}
.aid .chat-head{position:relative}
.aid-live{margin-left:auto;font:700 11.5px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);padding:5px 9px;border-radius:12px}
.aid-body{flex:1;min-height:380px}
.msg.pop{animation:msgPop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes msgPop{from{opacity:0;transform:translateY(8px)}}
.ai-can{padding:26px;border-radius:22px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.ai-can h3{font:800 19px var(--head);margin-bottom:14px}
.ai-can-g{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ai-can-g>div{display:flex;gap:10px;align-items:flex-start}
.ai-can-g b{display:block;font:700 15px var(--head)}.ai-can-g small{display:block;font-size:14px;color:var(--text-2);line-height:1.45;margin-top:2px}

/* ---------- run only on screen ---------- */
[data-fx]:not(.run) *,[data-fx]:not(.run){animation-play-state:paused!important}

/* ---------- student dashboard additions ---------- */
.gnext{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--blue-soft);color:var(--navy);font-size:15px;margin-bottom:14px;border:1px solid #D6E2FF}
.gnext svg{width:18px;height:18px;color:var(--blue);flex:none}
.btn-s{height:34px;padding:0 14px;font-size:14.5px;border-radius:18px}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.qrun{max-width:760px;margin:0 auto 6px;width:100%}
.djr-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.djr-s{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:16px;position:relative}
.djr-s::before{content:"";position:absolute;left:10%;right:10%;top:22px;height:2px;background:var(--border)}
.djr-s li a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative}
.djr-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--border);color:var(--text-3);transition:.2s}
.djr-dot svg{width:19px;height:19px}
.djr-s b{font:700 14px/1.3 var(--head);color:var(--text-2)}
.djr-s li.is-done .djr-dot{background:#22B45A;border-color:#22B45A;color:#fff}
.djr-s li.is-next .djr-dot{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 5px rgba(30,107,255,.14);animation:glowP 1.8s ease-in-out infinite}
.djr-s li.is-next b{color:var(--blue)}
.ok-t{display:flex;align-items:center;gap:8px;color:#15803D;font-weight:600}
.cm-card .k,.cm-hero .k{display:block;font:700 12.5px var(--body);text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin-bottom:10px}
.cm-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cm-h b,.cm-h h3{display:block;font:800 20px/1.2 var(--head)}
.cm-card p,.cm-hero p{font-size:15px;color:var(--text-2);line-height:1.55;margin-bottom:10px}
.cm-hero{background:linear-gradient(135deg,#F0F6FF,#F6F1FF);border-color:#D6E2FF}
.cm-other{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}.cm-other b{font:700 14.5px var(--head);margin-right:4px}
.cz{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:20px;align-items:center;background:linear-gradient(135deg,#0A1F4E,#13307A);color:#fff;border:0}
.cz h3{font:800 22px var(--head);color:#fff;margin:8px 0 6px}.cz p{color:#C6D3F2;font-size:15px}
.cz .eyebrow{background:rgba(255,255,255,.1);color:#A5F3FC}
.cz-3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.cz-3 li{padding:12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cz-3 span{font:700 12.5px var(--mono);color:#67E8F9}.cz-3 b{display:block;font:700 15px var(--head);margin-top:4px}.cz-3 small{font-size:13.5px;color:#AEBBDD}
.cz-v{position:relative;width:150px;height:150px;display:grid;place-items:center;color:#67E8F9}
.cz-v>svg{width:44px;height:44px}
.cz-run{text-align:center;padding:40px 20px!important}
.cz-core{position:relative;width:120px;height:120px;margin:0 auto 18px;display:grid;place-items:center;color:var(--blue)}
.cz-core>svg{width:40px;height:40px}
.cz-core .cr.a{border-color:rgba(30,107,255,.4)}
.cz-steps{list-style:none;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.cz-steps li{padding:7px 12px;border-radius:14px;background:#F1F5FC;font:600 14px var(--body);color:var(--text-3);animation:czS 2.2s both}
.cz-steps li:nth-child(2){animation-delay:.6s}.cz-steps li:nth-child(3){animation-delay:1.2s}
@keyframes czS{0%,30%{background:#F1F5FC;color:var(--text-3)}60%,100%{background:#DCFCE7;color:#15803D}}
.free-b{display:flex;gap:14px;align-items:center;background:linear-gradient(90deg,#ECFDF3,#F0F6FF);border-color:#CDEFD9}
.free-b b{display:block;font:700 16px var(--head)}.free-b small{display:block;font-size:14.5px;color:var(--text-2);margin-top:3px;line-height:1.5}
.crs2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
/* min-width:0 on both the cell and the title. A grid or flex item defaults to
   min-width:auto, so the longer course names ("Python Programming", "Web
   Development") refused to shrink and pushed the Enrol button out past the card
   edge and over the next card instead of wrapping. */
.crs2-c{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--border);background:#fff;min-width:0}
.crs2-c b{flex:1;min-width:0;font:700 15px/1.3 var(--head);overflow-wrap:anywhere}
.crs2-c .btn,.crs2-c .tag,.crs2-c .ci2{flex:none}
.crs2-c.on{border-color:#BFE8CD;background:#F6FDF8}
.crs2-c .tag svg{width:12px;height:12px;vertical-align:-2px}
.mycrs{display:grid;gap:10px;margin-top:10px}
.mycrs-r{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--border);background:#FBFCFF}
.mycrs-t{flex:1;min-width:0}.mycrs-t b{display:block;font:700 16px var(--head)}.mycrs-t small{font-size:13.5px;color:var(--text-3)}
.mycrs-a{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mini-trk{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mini-trk li{font-size:13px;padding:4px 9px;border-radius:12px;background:#F1F5FC;color:var(--text-3)}
.mini-trk li.d{background:#DCFCE7;color:#15803D;font-weight:600}
.ln{padding:16px 0;border-top:1px solid var(--border)}.ln:first-of-type{border-top:0}
.ln.wd{opacity:.65}
.ln-h{display:flex;align-items:center;gap:12px}.ln-h>div{flex:1;min-width:0}
.ln-h b{display:block;font:700 16px var(--head)}.ln-h small{font-size:13.5px;color:var(--text-3)}
.trk{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:16px 0 10px;position:relative}
.trk li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13.5px;color:var(--text-3);text-align:center;position:relative}
.trk li::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--border)}
.trk li:first-child::before{display:none}
.trk li span{width:18px;height:18px;border-radius:50%;border:2px solid #CBD5E8;background:#fff;position:relative;z-index:1}
.trk li.d{color:var(--text)}.trk li.d span{background:#22B45A;border-color:#22B45A}.trk li.d::before,.trk li.a::before{background:#22B45A}
.trk li.a{color:var(--blue);font-weight:700}.trk li.a span{border-color:var(--blue);box-shadow:0 0 0 5px rgba(30,107,255,.16);animation:glowP 1.8s infinite}
.ln-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14.5px}
.ln-f .muted svg{width:14px;height:14px;vertical-align:-2px}
.dchk{display:grid;gap:8px;margin-bottom:14px}.dchk b{font:700 14.5px var(--head);color:var(--text-2)}
.dchk .check{font-size:15px}
.emi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.emi-row div{padding:12px;border-radius:12px;background:#F5F8FD;border:1px solid var(--border)}
.emi-row small{display:block;font-size:13px;color:var(--text-3)}.emi-row b{display:block;font:800 17px var(--head);margin-top:2px}
.ai-dash{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:start}
.ai-side{padding:22px;border-radius:18px;background:linear-gradient(180deg,#0A1F4E,#13307A);text-align:center;color:#C6D3F2;font-size:14px;line-height:1.55}
.ai-side .bot{width:120px;margin:0 auto 14px;animation:botFloat 5s ease-in-out infinite}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eng{grid-template-columns:minmax(0,1fr) 50px 200px 50px minmax(0,1fr)}
  .core-vis{width:150px;height:150px}
}
@media (max-width:980px){
  .fxh{grid-template-columns:1fr;gap:44px;padding-top:30px}
  .fxh-v{max-width:520px;width:100%;margin:0 auto;padding:0 12%}
  .holo,.lc,.aiv{margin-left:auto;margin-right:auto}
  .dp-wrap,.cp{grid-template-columns:1fr;gap:32px}
  .gate{grid-template-columns:1fr}.gate-cols{grid-row:auto;grid-column:auto}
  .fx-band,.lband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-st{grid-template-columns:1fr;gap:18px}
  .jr-track{left:36px;right:auto;width:2px;height:auto;top:36px;bottom:60px}
  .jr-beam{transform-origin:top;animation-name:jrBeamY}
  .jr-run{animation-name:jrRunY}
  .jr-orb{left:50%;top:0;margin:-8px 0 0 -8px}
  .jr-st li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;text-align:left;align-items:center}
  .jr-dot{grid-row:1 / span 3;margin:0}
  .jr-st em{margin:0}
  .jr-end{flex-wrap:wrap}.jr-end .btn{margin-left:0}
  .eng{grid-template-columns:1fr;gap:0;max-width:560px}
  .eng-w{display:none}
  .eng-in{grid-template-columns:1fr 1fr;gap:0 10px;grid-auto-rows:auto}
  .eng-in>div{align-self:stretch}
  .eng-core{position:relative;padding:34px 0}
  .eng-core::before,.eng-core::after{content:"";position:absolute;left:50%;width:2px;height:30px;background:repeating-linear-gradient(to bottom,#22D3EE 0 4px,transparent 4px 10px);animation:vflow .8s linear infinite}
  .eng-core::before{top:2px}.eng-core::after{bottom:2px}
  .eng-out-c{margin:6px 0}
}
@keyframes vflow{to{background-position:0 10px}}
@keyframes jrBeamY{0%{transform:scaleY(0);opacity:1}85%{transform:scaleY(1)}95%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes jrRunY{0%{transform:translateY(0);opacity:1}85%{transform:translateY(100%);opacity:1}95%{opacity:1;transform:translateY(100%)}100%{transform:translateY(100%);opacity:0}}
@media (max-width:760px){
  .dgrid .djr,.djr-s{grid-template-columns:repeat(5,minmax(0,1fr))}
  .djr-s b{font-size:12.5px}.djr-dot{width:38px;height:38px}.djr-s::before{top:18px}
  .cz{grid-template-columns:1fr}.cz-v{display:none}.cz-3{grid-template-columns:1fr}
  .ai-dash{grid-template-columns:1fr}.ai-side{display:none}
  .trk li{font-size:11.5px}
  .mycrs-r{flex-wrap:wrap}.mycrs-a{flex-direction:row;width:100%;justify-content:space-between}
  .emi-row b{font-size:16px}
}
@media (max-width:640px){
  .fx-sec{padding:60px 0}
  .fx-hero h1{font-size:34px;letter-spacing:-.6px}
  .fx-hero .lead{font-size:16px}
  .fx-stats b{font-size:22px}.fx-stats span{font-size:13px}.fx-stats div{padding-right:10px}.fx-stats div+div{padding-left:10px}
  .fxh-v{padding:0 4%}
  .holo-chip{padding:7px 12px 7px 7px;gap:8px}.holo-chip b{font-size:13.5px}.holo-chip small{font-size:11.5px}.holo-chip .ci{width:28px;height:28px}
  .holo-chip.hc1{left:-4%;top:-5%}.holo-chip.hc2{right:-4%}.holo-chip.hc3{display:none}
  .holo.hb .holo-chip.hc2{left:-4%}
  .pil{grid-template-columns:1fr}
  .eng-in{grid-template-columns:1fr}
  .fx-band,.lband{grid-template-columns:1fr 1fr;gap:10px}.fx-band b,.lband b{font-size:14.5px}
  .gate{padding:22px}.gate-cols{grid-template-columns:1fr}
  .dp-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.dp-side{flex-direction:row;align-items:center;overflow:hidden;padding:8px}.dp-side img{display:none}
  .dp-n{font-size:0;padding:8px 10px}.dp-n svg{width:18px;height:18px}
  .dp-body{min-height:330px}
  .ai-can-g{grid-template-columns:1fr}
  .aiv-t{font-size:13px;padding:6px 10px 6px 8px}
  .cp-stage{padding:10px 6px 40px}.cp-stamp{right:-2%;top:6%;font-size:13.5px}.cp-li{left:8%}
  .cp-foot{font-size:8.5px}.cp-seal{width:40px;height:40px}
  .lc-k b{font-size:17px}
  .who-c{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .fx *,.fx::before,.fx-grad,[data-fx] *,.djr-dot,.trk li span,.cz-steps li{animation:none!important}
  .eng-out-c,.core-steps span:first-child,.dp-p.dpp0,.cp-cert,.cp-seal,.cp-stamp,.cp-li,.holo-chip{opacity:1!important;transform:none!important}
  .cp-name span{clip-path:none!important}
  .jr-beam{transform:scaleX(1)!important}
  .jr-dot{border-color:#22D3EE!important;color:#fff!important}
  .sg .gv{stroke-dashoffset:0!important}.sg-n b{--n:742!important}
  .lc-s li{color:#fff!important}.lc-s li svg{background:#34D399!important;color:#051029!important}.lc-bar i{transform:none!important}
}

/* ================= HOMEPAGE HERO (photo hero) ================= */
.hero2{position:relative;overflow:hidden;height:526px;background:linear-gradient(180deg,#E6F1FC 0%,#F2F7FD 60%,#F7FAFE 100%)}
.h2-photo{position:absolute;right:0;bottom:0;height:100%;width:910px;max-width:none;object-fit:cover;object-position:right bottom;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%);animation:h2in 1.1s cubic-bezier(.2,.8,.2,1) both}
.hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,246,253,.96) 0%,rgba(240,246,253,.85) 30%,rgba(240,246,253,0) 52%);pointer-events:none}
.h2-wrap{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.h2-copy{max-width:660px;padding-bottom:10px}
.h2-copy>*{animation:up .7s cubic-bezier(.2,.8,.2,1) both}.h2-copy>*:nth-child(2){animation-delay:.08s}.h2-copy>*:nth-child(3){animation-delay:.16s}.h2-copy>*:nth-child(4){animation-delay:.24s}
.h2-script{position:relative;display:inline-flex;flex-direction:column;font:700 34px/1.05 var(--script);color:#0A1F4E;transform:rotate(-8deg);transform-origin:left bottom;margin:0 0 26px -4px}
.h2-script span:last-of-type{padding-left:26px}
.h2-script svg{position:absolute;left:20px;bottom:-16px;width:210px;height:26px;overflow:visible}
.h2-script path{fill:none;stroke:#F5B301;stroke-width:4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:h2draw 1s .6s ease-out forwards}
.hero2 h1{font:800 clamp(34px,3.4vw,50px)/1.12 var(--head);letter-spacing:-1.2px;color:#0A1433}
.h2-l2{display:block;color:#0A1F4E}
.h2-grad{background:linear-gradient(90deg,#1E6BFF 0%,#1591E6 45%,#10B39A 80%,#22B45A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 .lead{font-size:18px;line-height:1.5;color:#34426A;max-width:520px;margin:18px 0 30px}
.h2-ctas{display:flex;gap:14px;flex-wrap:wrap}
.h2-ctas .btn{height:50px;border-radius:26px;padding:0 28px;font-size:16.5px}
.h2-video{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #1E6BFF;color:#1E6BFF;font-weight:600}
.h2-video:hover{background:#EEF4FF}
.h2-video .play{width:24px;height:24px;border-radius:50%;background:#1E6BFF;color:#fff;display:grid;place-items:center}
.h2-video .play svg{width:12px;height:12px;fill:#fff;margin-left:2px}
.h2-stats{position:absolute;z-index:3;top:50px;right:28px;width:198px;background:#fff;border-radius:16px;box-shadow:0 18px 40px -18px rgba(15,40,100,.35);padding:4px 16px;animation:h2card .8s .4s cubic-bezier(.2,.8,.2,1) both}
.h2-stats>div{display:flex;align-items:center;gap:12px;padding:14px 0}
.h2-stats>div+div{border-top:1px solid #EDF1F8}
.h2-ic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,#fff)}
.h2-ic svg{width:22px;height:22px}
.h2-stats small{display:block;font-size:13px;color:#4A5678}
.h2-stats b{display:block;font:800 17px/1.2 var(--head);color:#0A1433}
@keyframes h2in{from{opacity:0;transform:scale(1.04)}}
@keyframes h2draw{to{stroke-dashoffset:0}}
@keyframes h2card{from{opacity:0;transform:translateY(14px)}}
@media (max-width:1180px) and (min-width:901px){.h2-photo{width:700px;object-position:20% bottom}.h2-copy{max-width:520px}.hero2 h1{font-size:36px}}
@media (max-width:900px){
  .hero2{height:auto}
  .hero2::after{display:none}
  .h2-wrap{padding-top:34px;padding-bottom:24px}
  .hero2{display:flex;flex-direction:column}.h2-wrap{order:1}.h2-photo{order:2}.h2-stats{order:3}
  .h2-photo{position:relative;width:100%;height:auto;aspect-ratio:680/526;object-position:left bottom;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .h2-stats{position:relative;top:auto;right:auto;width:auto;margin:-40px 16px 20px;display:grid;grid-template-columns:repeat(3,1fr);padding:4px 6px}
  .h2-stats>div{flex-direction:column;text-align:center;gap:6px;padding:12px 4px}
  .h2-stats>div+div{border-top:0;border-left:1px solid #EDF1F8}
  .h2-ic{width:36px;height:36px}.h2-ic svg{width:18px;height:18px}.h2-stats b{font-size:16px}
}
@media (max-width:560px){.h2-script{font-size:28px}.hero2 .lead{font-size:17px}.h2-ctas .btn{padding:0 20px;font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.h2-photo,.h2-copy>*,.h2-stats{animation:none}.h2-script path{animation:none;stroke-dashoffset:0}}
/* limited-time offer band */
.offer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;max-width:1100px;margin:0 auto 22px;padding:16px 20px;border-radius:18px;background:linear-gradient(90deg,rgba(251,191,36,.14),rgba(249,115,22,.12));border:1px solid rgba(251,191,36,.45)}
.offer-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;background:#FBBF24;color:#1F1300;font:800 13.5px var(--body);letter-spacing:.6px;text-transform:uppercase;animation:offerP 2s ease-in-out infinite}
.offer-tag svg{width:15px;height:15px}
.offer p{flex:1;min-width:260px;color:#FDE68A;font-size:15.5px;line-height:1.5}.offer p b{color:#fff}
@keyframes offerP{50%{box-shadow:0 0 0 6px rgba(251,191,36,.18)}}
@media (prefers-reduced-motion:reduce){.offer-tag{animation:none}}

/* ================= COLLEGE / UNIVERSITY / COACHING ERP (unique look per type) ================= */
.ie-college{--ac:#6D4AFF;--ac2:#A78BFA;--acs:#F1EDFF;--acd:#3B25B8}
.ie-university{--ac:#0E8F7E;--ac2:#34D399;--acs:#E4F6F1;--acd:#075E53}
.ie-coaching{--ac:#F26B1D;--ac2:#FDBA74;--acs:#FFF1E6;--acd:#B4470B}
.ie-hero{position:relative;overflow:hidden;background:radial-gradient(760px 380px at 85% 10%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--acs),#F8FAFE);border-bottom:1px solid var(--border)}
.ie-dots{position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--ac) 22%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 75%);mask-image:linear-gradient(100deg,transparent 30%,#000 75%);opacity:.7}
.ie-hw{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-top:38px;padding-bottom:56px}
.ie-eb{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:30px;background:#fff;border:1px solid color-mix(in srgb,var(--ac) 30%,#fff);color:var(--ac);font:700 13.5px var(--body);letter-spacing:.8px;text-transform:uppercase;margin-bottom:16px;box-shadow:0 6px 16px -10px var(--ac)}
.ie-eb svg{width:16px;height:16px}
.ie-hero h1{font:800 clamp(32px,3.4vw,50px)/1.1 var(--head);letter-spacing:-1px;color:#0A1433}
.ie-hero h1 span{background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ie-hero .lead{font-size:17px;line-height:1.7;color:var(--text-2);margin:16px 0 26px;max-width:580px}
.ie-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}.ie-hero .ctas .btn{height:50px;border-radius:26px;padding:0 24px;font-size:16px}
.ie-btn{background:var(--ac);color:#fff;box-shadow:0 14px 30px -12px var(--ac)}.ie-btn:hover{background:var(--acd)}
.ie-trust{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}
.ie-trust li{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--text-2)}
.ie-trust svg{width:16px;height:16px;color:var(--ac)}
/* kpi strip */
.ie-ks{margin-top:-30px;position:relative;z-index:2}
.ie-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:20px;border:1px solid var(--border);box-shadow:0 20px 44px -26px rgba(15,40,100,.35);position:relative;overflow:hidden}
.ie-kpis::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.ie-kpis div{padding:20px 22px}.ie-kpis div+div{border-left:1px solid var(--border)}
.ie-kpis small{display:block;font-size:13.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.ie-kpis b{display:block;font:800 28px/1.2 var(--head);color:#0A1433;margin:6px 0 2px}
.ie-kpis span{font-size:14px;color:var(--ac);font-weight:600}
.ie-kpis em{position:absolute;right:12px;bottom:6px;font-size:11.5px;font-style:normal;color:var(--text-3)}
/* signature visuals */
.iv{position:relative;max-width:500px;margin-left:auto}
.iv-card{background:#fff;border-radius:22px;border:1px solid var(--border);box-shadow:0 34px 70px -34px rgba(15,40,100,.45);padding:20px}
.iv-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:12px}
.iv-top b{display:block;font:700 16.5px var(--head)}.iv-top small{font-size:13.5px;color:var(--text-3)}
.iv .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font:700 16px var(--head);flex:none}
.iv .av.sq{border-radius:12px}.iv .av svg{width:20px;height:20px}
.iv-tag{margin-left:auto;font:700 11.5px var(--body);text-transform:uppercase;letter-spacing:.6px;color:var(--ac);background:var(--acs);padding:5px 9px;border-radius:10px}
.iv-tag.tagabs{position:absolute;top:12px;right:12px}
.iv-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:0 18px 36px -18px rgba(15,40,100,.45);animation:ivFloat 6s ease-in-out infinite alternate}
.iv-chip>svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--acs);color:var(--ac);flex:none}
.iv-chip b{display:block;font:700 14.5px var(--head)}.iv-chip small{font-size:13px;color:var(--text-3)}
.iv-chip.c-a{left:-38px;bottom:22%}.iv-chip.c-b{right:-24px;top:-18px;animation-delay:-3s}
@keyframes ivFloat{from{translate:0 -4px}to{translate:0 4px}}
/* college lifecycle */
.iv-life{list-style:none;position:relative;display:grid;gap:4px}
.iv-line{position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--border)}
.iv-line i{position:absolute;inset:0;background:linear-gradient(var(--ac),var(--ac2));transform-origin:top;transform:scaleY(0);animation:lifeLine 10s linear infinite}
.iv-life li{position:relative;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 0;border-radius:12px}
.iv-life .d{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;border:2px solid var(--border);color:var(--text-3);position:relative;z-index:1}
.iv-life .d svg{width:18px;height:18px}
.iv-life b{display:block;font:700 15px var(--head)}.iv-life small{font-size:14px;color:var(--text-3)}
.iv-life li.cs0 .d{animation:cs0 10s infinite}.iv-life li.cs1 .d{animation:cs1 10s infinite}.iv-life li.cs2 .d{animation:cs2 10s infinite}.iv-life li.cs3 .d{animation:cs3 10s infinite}.iv-life li.cs4 .d{animation:cs4 10s infinite}
@keyframes lifeLine{0%{transform:scaleY(0)}80%,95%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes cs0{0%,95%{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 0 0 5px var(--acs)}100%{background:#fff;color:var(--text-3);border-color:var(--border);box-shadow:none}}
@keyframes cs1{0%,19%{background:#fff;color:var(--text-3);border-color:var(--border);box-shadow:none}20%,95%{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 0 0 5px var(--acs)}100%{background:#fff;color:var(--text-3);box-shadow:none}}
@keyframes cs2{0%,39%{background:#fff;color:var(--text-3);border-color:var(--border);box-shadow:none}40%,95%{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 0 0 5px var(--acs)}100%{background:#fff;color:var(--text-3);box-shadow:none}}
@keyframes cs3{0%,59%{background:#fff;color:var(--text-3);border-color:var(--border);box-shadow:none}60%,95%{background:#22B45A;border-color:#22B45A;color:#fff;box-shadow:0 0 0 5px #E3F6EA}100%{background:#fff;color:var(--text-3);box-shadow:none}}
@keyframes cs4{0%,79%{background:#fff;color:var(--text-3);border-color:var(--border);box-shadow:none}80%,95%{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 0 0 5px var(--acs)}100%{background:#fff;color:var(--text-3);box-shadow:none}}
/* university network */
.iv-uni{background:#fff;border-radius:22px;border:1px solid var(--border);box-shadow:0 34px 70px -34px rgba(15,40,100,.45);padding:20px 20px 16px}
.un-map{position:relative;aspect-ratio:440/340}
.un-map>svg{position:absolute;inset:0;width:100%;height:100%}
.un-map .nb{stroke:color-mix(in srgb,var(--ac) 25%,#fff);stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.un-map .nf{stroke:var(--ac);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:4 16;vector-effect:non-scaling-stroke;animation:unFlow 1.4s linear infinite}
@keyframes unFlow{to{stroke-dashoffset:-20}}
.un{position:absolute;transform:translate(-50%,-50%);padding:7px 12px;border-radius:20px;background:#fff;border:1.5px solid color-mix(in srgb,var(--ac) 35%,#fff);font:700 14px var(--head);color:#0A1433;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(15,40,100,.4)}
.un-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,var(--ac),var(--acd));color:#fff;box-shadow:0 18px 40px -14px var(--ac)}
.un-core svg{width:30px;height:30px}.un-core b{font:700 14.5px var(--head)}
.un-core .r{position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--ac);opacity:.4;animation:unPulse 2.4s ease-out infinite}
@keyframes unPulse{from{transform:scale(.85);opacity:.6}to{transform:scale(1.25);opacity:0}}
.un-k{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.un-k div{padding:10px 12px;border-radius:12px;background:var(--acs)}
.un-k small{display:block;font-size:13px;color:var(--text-2)}.un-k b{font:800 18px var(--head);color:var(--acd)}
/* coaching funnel */
.fn{display:grid;gap:10px;margin-top:4px}
.fb{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.fb i{display:flex;align-items:center;justify-content:flex-end;height:34px;border-radius:10px;background:linear-gradient(90deg,var(--ac2),var(--ac));width:var(--w);padding-right:10px;transform-origin:left;animation:fbGrow 8s infinite}
.fb i b{font:800 15px var(--head);color:#fff}
.fb.fb1 i{animation-delay:.3s}.fb.fb2 i{animation-delay:.6s}.fb.fb3 i{animation-delay:.9s;background:linear-gradient(90deg,#4ADE80,#16A34A)}
@keyframes fbGrow{0%{transform:scaleX(0)}10%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.fn-c{margin-top:12px;font-size:14px;color:var(--text-3)}
.iv-chip.rk{display:block;padding:12px 14px;min-width:210px}
.rk-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.rk-h svg{width:18px;height:18px;color:#F5A300}
.iv-chip.rk ol{list-style:none;display:grid;gap:5px}
.iv-chip.rk li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;font-size:14px}
.iv-chip.rk li em{font-style:normal;font-weight:800;color:var(--ac)}
.iv-coa .iv-chip.c-a{left:-46px;bottom:-34px}.iv-coa .iv-chip.c-b{top:-20px;right:-18px}
/* flow rail */
.ie-flow{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative;counter-reset:f}
.ie-rail{position:absolute;left:10%;right:10%;top:62px;height:2px;background:linear-gradient(90deg,var(--ac),var(--ac2));opacity:.25;z-index:0}
.ie-flow li{position:relative;z-index:1;background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px 18px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.ie-flow li:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 40%,#fff);box-shadow:0 20px 40px -24px var(--ac)}
.ie-fn{display:block;font:800 13.5px var(--head);color:var(--ac);letter-spacing:1px;margin-bottom:10px}
.ie-fi{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--acs);color:var(--ac);box-shadow:0 0 0 6px #fff,0 0 0 7px color-mix(in srgb,var(--ac) 20%,#fff)}
.ie-fi svg{width:24px;height:24px}
.ie-flow b{display:block;font:700 17px var(--head)}
.ie-flow small{display:block;font-size:14.5px;color:var(--text-2);line-height:1.55;margin-top:6px}
.ie-flow em{display:inline-block;margin-top:12px;font-style:normal;font-size:13px;font-weight:700;color:var(--ac);background:var(--acs);padding:4px 10px;border-radius:12px}
/* modules */
.ie-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ie-mod{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--border);border-radius:16px;transition:border-color .2s,box-shadow .2s,transform .2s}
.ie-mod:hover{border-color:color-mix(in srgb,var(--ac) 40%,#fff);box-shadow:0 16px 32px -22px var(--ac);transform:translateY(-3px)}
.ie-mi{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--acs);color:var(--ac)}
.ie-mi svg{width:21px;height:21px}
.ie-mod h3{font:700 16px/1.3 var(--head)}.ie-mod p{font-size:14.5px;color:var(--text-2);line-height:1.55;margin-top:4px}
/* before / after */
.ie-fix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ie-fx{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px}
.ie-fx h3{font:700 17px var(--head);margin:12px 0}
.ie-ba{display:grid;gap:8px}
.ie-ba>div{padding:12px 14px;border-radius:12px}
.ie-ba small{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
.ie-ba p{font-size:15px;line-height:1.5}
.ie-ba .b{background:#FFF1F2;color:#9F1239}.ie-ba .b p{color:#7F1D1D}
.ie-ba .a{background:var(--acs);color:var(--acd)}.ie-ba .a p{color:#0F1B3D}
/* roles */
.ie-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ie-roles>div{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--border)}
.ie-roles .ie-mi{grid-row:span 2}
.ie-roles b{font:700 16px var(--head)}.ie-roles small{font-size:14.5px;color:var(--text-2);line-height:1.45}
/* degree verification */
.vv{position:relative;max-width:440px;margin:0 auto;padding:10px 20px 40px}
.vv-c{background:#FFFDF6;border:1px solid #E9DFC0;border-radius:14px;padding:26px;text-align:center;box-shadow:0 30px 60px -30px rgba(15,40,100,.45);outline:6px solid #fff}
.vv-h{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--acd);margin-bottom:12px}.vv-h b{font:800 17px var(--head)}
.vv-c small{display:block;font-size:13.5px;color:var(--text-3);margin-top:8px}
.vv-c>b{display:block;font:700 16px var(--head);margin-top:2px}.vv-c .vv-n{font:700 26px var(--script);color:#0D2A66}
.vv-f{display:flex;align-items:center;gap:12px;margin-top:16px;text-align:left;font-size:13px;color:var(--text-2)}
.qr{width:52px;height:52px;flex:none;background:conic-gradient(#0A1433 25%,#fff 0 50%,#0A1433 0 75%,#fff 0) 0 0/13px 13px;border:4px solid #0A1433;border-radius:4px}
.vv-s{position:absolute;top:24px;right:0;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:#22B45A;color:#fff;font:800 15px var(--head);transform:rotate(8deg);box-shadow:0 12px 24px -10px rgba(34,180,90,.8)}
.vv-s svg{width:18px;height:18px}
.vv-req{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:0 18px 36px -18px rgba(15,40,100,.45);animation:ivFloat 6s ease-in-out infinite alternate}
.vv-req>svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--acs);color:var(--ac)}
.vv-req b{display:block;font:700 14.5px var(--head)}.vv-req small{font-size:13px;color:var(--text-3)}
.ie .eyebrow{background:var(--acs);color:var(--ac)}
.ie .ticks svg{color:var(--ac)}
.ie .dpdp-band .eyebrow{background:var(--green-soft);color:#15803D}.ie .dpdp-band .ticks svg{color:#22B45A}
@media (max-width:1100px){.ie-mods,.ie-roles{grid-template-columns:repeat(2,minmax(0,1fr))}.ie-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.ie-rail{display:none}}
@media (max-width:980px){.ie-hw{grid-template-columns:1fr;gap:56px}.iv{margin:0 auto;padding:0 24px}.ie-fix{grid-template-columns:1fr}.ie-kpis{grid-template-columns:repeat(2,1fr)}.ie-kpis div:nth-child(3){border-left:0}.ie-kpis div:nth-child(n+3){border-top:1px solid var(--border)}}
@media (max-width:640px){.ie-mods,.ie-roles,.ie-flow{grid-template-columns:1fr}.ie-flow li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;text-align:left;align-items:start}.ie-fn{grid-column:2;margin-bottom:2px}.ie-fi{grid-row:1 / span 4;margin:0}
  .iv{padding:0}.iv-chip.c-a{left:-4px;bottom:-30px}.iv-chip.c-b{right:-4px;top:-26px}.iv-coa .iv-chip.c-a{left:-4px;bottom:-40px}.iv-coa .iv-chip.c-b{right:-4px}
  .un{font-size:11.5px;padding:5px 8px}.un-core{width:84px;height:84px}.un-core svg{width:22px;height:22px}.un-core b{font-size:12.5px}.un-k b{font-size:16px}
  .fb{grid-template-columns:92px 1fr;font-size:13.5px}.ie-kpis b{font-size:22px}.ie-kpis div{padding:14px}.ie-trust{gap:10px 16px}}
@media (prefers-reduced-motion:reduce){.ie *{animation:none!important}.iv-line i,.fb i{transform:none!important}}

.iv-col .iv-chip.c-a{left:-40px;bottom:-24px}.iv-col .iv-chip.c-b{right:-28px;top:46%}
.iv-coa .iv-chip.c-a{left:auto;right:-20px;bottom:-62px}
.ie-coaching .ie-hw{padding-bottom:96px}
.ie .ie-hero .btn-outline{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 55%,#fff);background:#fff}.ie .ie-hero .btn-outline:hover{background:var(--acs)}
@media (max-width:640px){.iv-col .iv-chip.c-a{left:-4px;bottom:-34px}.iv-col .iv-chip.c-b{right:-4px;top:-30px}.iv-coa .iv-chip.c-a{right:-4px;bottom:-70px}.ie-coaching .ie-hw{padding-bottom:110px}}
@media (max-width:980px){.ie-ks{margin-top:26px}}

/* ================= partner: handshake "deal done" ================= */
.pd{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:center;max-width:900px;margin:0 auto}
.pd-vis{position:relative;display:grid;place-items:center;height:210px;border-radius:22px;background:linear-gradient(150deg,#0A1F4E,#12377A);overflow:hidden}
/* svg.lucide{width:18px} would win on specificity, so qualify this one. */
.pd-vis svg.pd-ic{width:92px;height:92px;stroke-width:1.6;color:#fff;z-index:2}
.pd.in .pd-ic{animation:pdShake 2.6s cubic-bezier(.36,.07,.19,.97) .3s both}
@keyframes pdShake{0%{transform:scale(.7) rotate(-14deg);opacity:0}
  22%{transform:scale(1) rotate(0);opacity:1}
  34%{transform:translateY(-5px) rotate(-5deg)}44%{transform:translateY(3px) rotate(4deg)}
  54%{transform:translateY(-3px) rotate(-3deg)}64%{transform:translateY(0) rotate(0)}100%{transform:none;opacity:1}}
.pd-ring{position:absolute;width:96px;height:96px;border-radius:50%;border:2px solid rgba(110,231,183,.6)}
.pd.in .pd-ring{animation:pdRing 2.2s ease-out 1.5s infinite}
.pd.in .pd-ring.r2{animation-delay:2.1s}
@keyframes pdRing{from{transform:scale(.8);opacity:.9}to{transform:scale(2.4);opacity:0}}
.pd-stamp{position:absolute;bottom:20px;z-index:3;font:800 15px var(--head);letter-spacing:2px;color:#6EE7B7;
  border:2.5px solid #6EE7B7;border-radius:9px;padding:5px 13px;transform:rotate(-8deg) scale(1.6);opacity:0}
.pd.in .pd-stamp{animation:pdStamp .5s cubic-bezier(.2,1.4,.4,1) 2.5s both}
@keyframes pdStamp{to{transform:rotate(-8deg) scale(1);opacity:1}}
.pd-steps{display:grid;gap:10px;align-content:start}
.pd-s{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;
  padding:13px 16px;border-radius:15px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);opacity:0}
.pd.in .pd-s{animation:pdStep .5s cubic-bezier(.2,.8,.2,1) both}
.pd.in .pd-s:nth-child(1){animation-delay:.35s}.pd.in .pd-s:nth-child(2){animation-delay:.85s}
.pd.in .pd-s:nth-child(3){animation-delay:1.35s}.pd.in .pd-s:nth-child(4){animation-delay:1.85s}
@keyframes pdStep{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.pd-s svg{grid-row:1/3;width:42px;height:42px;padding:10px;border-radius:13px;background:var(--blue-soft);color:var(--blue)}
.pd-s:nth-child(4) svg{background:var(--green-soft);color:#15803D}
.pd-s b{font:700 15.5px var(--head)}
.pd-s em{font-style:normal;font-size:13px;color:var(--text-2)}
.pd-cta{text-align:center;margin-top:26px;display:grid;gap:8px;justify-items:center}
.pd-cta .btn{height:52px;padding:0 28px;border-radius:26px;font-size:16px}
.pd-cta small{font-size:13px;color:var(--text-3)}
@media (max-width:760px){.pd{grid-template-columns:1fr}.pd-vis{height:170px}.pd-vis svg.pd-ic{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.pd.in .pd-ic,.pd.in .pd-ring,.pd.in .pd-stamp,.pd.in .pd-s{animation:none;opacity:1;transform:none}}

/* ================= brand tagline, footer brand, stores, trust badges ================= */
.tagline{display:block;font:500 8.6px/1.25 var(--body);color:#DCE6FA;letter-spacing:.15px;margin:3px 0 2px;white-space:nowrap}
/* Header carries the same full lockup as the footer -- wordmark, tagline, slogan --
   but only where it fits. The tagline is one long nowrap line that widens the brand
   from ~198px to ~329px, and that width comes straight out of the search box: at
   1366px it leaves 92px, at 1280px 24px, and by 1152px the header overflows the
   page. So it appears from 1400px up and stays hidden on smaller screens. */
.hdr .b-txt .tagline{display:none}
@media (min-width:1400px){.hdr .b-txt .tagline{display:block;font-size:9px}}
.band .brand .tagline{display:block;font-size:9px}
.app-brand .tagline{font-size:7.2px;margin:2px 0}
.slogan.lined{gap:6px}
.slogan.lined::before,.slogan.lined::after{content:"";width:18px;height:1.5px;background:#F7810F;border-radius:2px}
.f-brand p{margin:14px 0 4px;line-height:1.6;max-width:330px}
.f-logo{display:flex;align-items:center;gap:10px}
.f-logo img:first-child{width:58px;height:auto}
.f-logo .tagline{font-size:9.4px;margin:5px 0 4px;white-space:normal;max-width:220px}
.f-logo .slogan{font-size:13.5px}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.store{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 16px 0 12px;border-radius:12px;background:#000;border:1px solid rgba(255,255,255,.28);color:#fff;transition:transform .2s,border-color .2s}
.store:hover{transform:translateY(-2px);border-color:#fff}
.store svg{width:24px;height:24px;flex:none}
.store small{display:block;font-size:9.5px;line-height:1;letter-spacing:.3px;color:#D6DCEA;text-transform:uppercase}
.store b{display:block;font:700 17px/1.15 var(--head);letter-spacing:.1px}
.f-trust{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;border-top:1px solid rgba(255,255,255,.08)}
.f-dpdp img{width:230px;height:auto;border-radius:12px;background:#fff;padding:4px;transition:transform .2s}
.f-dpdp:hover img{transform:scale(1.03)}
.mib{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:14px;background:#fff;color:#0A1F4E;font:600 16px var(--head);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.mib b{font-weight:800;background:linear-gradient(90deg,#FF7A1A,#0A1F4E 50%,#138808);-webkit-background-clip:text;background-clip:text;color:transparent}
.mib .tri{width:30px;height:22px;border-radius:4px;background:linear-gradient(#FF9933 0 33.3%,#fff 0 66.6%,#138808 0);position:relative;box-shadow:inset 0 0 0 1px #E4EAF5}
.mib .tri::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;border:1.2px solid #0A3A8C}
@media (max-width:640px){.f-dpdp img{width:200px}.store{height:42px}.store b{font-size:15.5px}}
.dpdp-img{display:block;width:min(340px,100%);height:auto;margin-bottom:14px;border-radius:14px}

/* ================= "Only on Ghosla" presentation deck ================= */
.dk-sec{position:relative;overflow:hidden;padding:80px 0;background:radial-gradient(700px 360px at 90% 0%,rgba(59,130,246,.28),transparent 65%),radial-gradient(600px 340px at 0% 100%,rgba(139,92,246,.22),transparent 65%),#06112E;color:#E6EEFF}
.dk-sec::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.dk-sec .wrap{position:relative}
.dk-head{text-align:center;max-width:720px;margin:0 auto 34px}
.dk-eb{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:20px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#FDE68A;font:800 13px var(--body);letter-spacing:1.2px;text-transform:uppercase}
.dk-eb svg{width:15px;height:15px}
.dk-head h2{font:800 clamp(28px,3vw,44px)/1.12 var(--head);color:#fff;margin:14px 0 10px;letter-spacing:-.6px}
.dk-head p{color:#AEBBDD;font-size:16.5px;line-height:1.6}
.dk{position:relative;max-width:1180px;margin:0 auto;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(148,187,255,.2);padding:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.dk-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dk-tabs::-webkit-scrollbar{display:none}
.dk-tab{position:relative;flex:1 0 auto;display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;color:#AEBBDD;font:700 15px var(--head);white-space:nowrap;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.dk-tab svg{width:17px;height:17px;flex:none}
.dk-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.dk-tab.on{color:#fff;background:rgba(59,130,246,.2);border-color:rgba(96,165,250,.5)}
.dk-p{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#22D3EE,#8B5CF6);transform:scaleX(0);transform-origin:left}
.dk-tab.on .dk-p{animation:dkP 7s linear forwards}
.dk.paused .dk-tab.on .dk-p,.dk:not(.run) .dk-tab.on .dk-p{animation-play-state:paused}
@keyframes dkP{to{transform:scaleX(1)}}
.dk-stage{position:relative;margin-top:14px;min-height:360px}
.dk-slide{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:center;padding:22px}
.dk-slide.on{display:grid;animation:dkIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes dkIn{from{opacity:0;transform:translateY(12px)}}
.dk-n{font:700 13.5px var(--mono,monospace);color:#67E8F9;letter-spacing:1.5px}
.dk-txt h3{font:800 clamp(24px,2.3vw,32px)/1.15 var(--head);color:#fff;margin:8px 0 16px}
.dk-pr,.dk-so{padding:12px 16px;border-radius:14px;margin-bottom:10px}
.dk-pr{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3)}.dk-so{background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.3)}
.dk-pr small,.dk-so small{display:block;font:800 11.5px var(--body);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.dk-pr small{color:#FDA4AF}.dk-so small{color:#6EE7B7}
.dk-pr p,.dk-so p{font-size:15.5px;line-height:1.55;color:#E6EEFF}
.dk-re{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:10px 16px;border-radius:24px;background:linear-gradient(90deg,#22D3EE,#3B82F6);color:#04122E;font:800 15px var(--head)}
.dk-re svg{width:17px;height:17px}
.dk-pp{position:absolute;right:22px;bottom:20px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.dk-pp svg{width:16px;height:16px}
/* slide visuals */
.dv{position:relative;border-radius:20px;background:#fff;color:#0F1B3D;padding:18px;min-height:290px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 8px rgba(255,255,255,.04)}
/* The deck cycles on its own, so slides must be close in height or the section
   jumps under the reader. These trim the densest visuals back towards the rest. */
.dv .dv-rows span{padding:8px 10px;font-size:13px}
.dv .dv-rows em{font-size:12px}
.dv .dv-note{margin-top:9px;padding:9px 12px;font-size:13px}
.dv .dv-chips span{padding:9px 11px;font-size:13.5px}
.dv .dv-ticks span{font-size:13.5px}
/* Steps inside a slide appear one after another; the tab timer is 7s, so d5 lands with room to spare. */
.dk-slide.on .dvs0{animation:dvIn .45s .25s both}.dk-slide.on .dvs1{animation:dvIn .45s .95s both}.dk-slide.on .dvs2{animation:dvIn .45s 1.65s both}.dk-slide.on .dvs3{animation:dvIn .45s 2.35s both}
.dk-slide.on .dvs4{animation:dvIn .45s 3.05s both}.dk-slide.on .dvs5{animation:dvIn .45s 3.75s both}
@keyframes dvIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.dv-top{display:flex;align-items:center;gap:8px;font:700 15px var(--head);padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.dv-top svg{width:30px;height:30px;padding:6px;border-radius:50%;background:#25D366;color:#fff}
/* ---- WhatsApp fee thread: a phone, the real chat, and the receipt a parent gets ---- */
.dv-wa{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:14px;padding:14px;align-items:start;background:linear-gradient(160deg,#0B1F3F,#123A2C)}
/* Fixed height, clipped: the thread must not stretch the slide to a full screen. */
.wa-ph{height:404px;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#EFE7DE;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.wa-hd{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#075E54;color:#fff}
.wa-hd svg{width:15px;height:15px;opacity:.85;flex:none}
.wa-av{width:30px;height:30px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font:800 11.5px var(--head);flex:none}
.wa-who{flex:1;min-width:0}.wa-who b{display:block;font:700 13px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-who small{font-size:10px;opacity:.8}
.wa-body{flex:1;min-height:0;overflow:hidden;padding:9px 10px 12px;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;
  background-color:#EFE7DE;background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:14px 14px}
.wa-day{align-self:center;font:700 9px var(--body);letter-spacing:.6px;color:#5C6B73;background:#E2F2D8;padding:3px 9px;border-radius:8px}
.wa-m{flex:0 0 auto;position:relative;max-width:88%;padding:7px 9px 15px;border-radius:9px;font-size:11.5px;line-height:1.42;color:#111B21;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.wa-m.out{align-self:flex-end;background:#D9FDD3}
.wa-m time{position:absolute;right:8px;bottom:4px;display:flex;align-items:center;gap:3px;font-size:8.6px;color:#667781}
.wa-tk{width:11px;height:6px;border-left:1.5px solid #53BDEB;border-bottom:1.5px solid #53BDEB;transform:rotate(-45deg) translateY(-1px)}
.wa-t{display:block;font-weight:800;color:#075E54;margin-bottom:2px}
.wa-amt{display:inline-block;margin:5px 0 2px;font:800 15px var(--head);color:#0A1F4E}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;padding:6px;border-top:1px solid #E4E8EA;color:#1E6BFF;font-weight:700;font-size:11px}
.wa-cta svg{width:13px;height:13px}
.wa-ok{display:flex;align-items:center;gap:5px;font-weight:800;color:#15803D;margin-bottom:2px}.wa-ok svg{width:14px;height:14px}
/* the itemised receipt card inside the thread */
.wa-m.rc{max-width:94%;padding:8px 8px 16px;background:#fff}
.rc-h{display:flex;align-items:center;gap:7px;padding-bottom:7px;border-bottom:1px dashed #D6DEE5}
.rc-h svg{width:24px;height:24px;padding:5px;border-radius:7px;background:#FEE2E2;color:#DC2626;flex:none}
.rc-h b{display:block;font:800 12px var(--head)}.rc-h small{font-size:9.4px;color:#667781}
.rc-pd{margin-left:auto;font:800 8.6px var(--body);letter-spacing:.8px;color:#15803D;background:#DCFCE7;border:1px solid #86EFAC;padding:3px 7px;border-radius:6px;transform:rotate(-6deg)}
.rc-rows{display:grid;gap:3px;margin:7px 0}
.rc-rows span{display:flex;justify-content:space-between;gap:10px;font-size:10.5px}
.rc-rows em{font-style:normal;color:#667781}.rc-rows b{font-weight:700}
.rc-tot{padding-top:4px;border-top:1px solid #E4E8EA;font-size:11.5px!important}.rc-tot b{color:#15803D;font-weight:800}
.rc-dl{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;background:#F0F4F8;color:#1E6BFF;font-weight:700;font-size:10px}
.rc-dl svg{width:12px;height:12px}
.wa-side{display:grid;align-content:center;gap:9px}
.wa-side span{display:grid;gap:1px;padding:10px 9px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#D7E3F5;font-size:10px;text-align:center}
.wa-side svg{width:16px;height:16px;margin:0 auto 2px;color:#6EE7B7}
.wa-side b{font:800 16px var(--head);color:#fff}
@media (max-width:560px){.dv-wa{grid-template-columns:1fr}.wa-side{grid-template-columns:1fr 1fr}}

/* ---- Attendance ---- */
.dv-att{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start}
.at-scan{display:grid;gap:8px;justify-items:center}
.at-tag{display:flex;align-items:center;gap:5px;font:800 11.5px var(--body);color:#15803D;background:#DCFCE7;padding:4px 9px;border-radius:9px}
.at-tag svg{width:13px;height:13px}
.at-main{display:grid;gap:9px;min-width:0}
.at-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.at-kpis span{display:grid;gap:1px;padding:8px 6px;border-radius:11px;background:#DCFCE7;color:#15803D;text-align:center;font-size:10.5px;font-weight:600}
.at-kpis b{font:800 18px var(--head)}
.at-kpis .late{background:#FFF1E0;color:#B45F00}.at-kpis .abs{background:#FDE7EF;color:#C42A40}
.dv-fp{position:relative;width:120px;height:140px;border-radius:18px;background:#0A1F4E;display:grid;place-items:center;overflow:hidden;color:#5EEAD4}
.dv-fp svg{width:64px;height:64px}
.dv-fp .scan{position:absolute;left:0;right:0;height:3px;background:#22D3EE;box-shadow:0 0 16px 4px rgba(34,211,238,.7);animation:fpScan 2s ease-in-out infinite}
@keyframes fpScan{0%,100%{top:12%}50%{top:86%}}
.dv-rows{display:grid;gap:8px}
.dv-rows span{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#F5F8FD;border:1px solid var(--border);font-size:14.5px}
.dv-rows em{font-style:normal;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:4px}.dv-rows em svg{width:13px;height:13px}
.dv-rows .ok{color:#15803D}.dv-rows .no{color:#C42A40}

/* The slide box is taller than these stacks, and a grid row would otherwise
   stretch to fill it — which made single rows balloon to the full height. */
.dv-fee,.fe-feed,.fe-modes,.lb-main,.lb-rows,.at-main,.at-kpis,.dv-rows,.dv-chips,.dv-ticks{align-content:start}
.fe-feed>span,.lb-rows>span,.at-kpis>span,.dv-rows>span,.dv-chips>span{align-self:start}

/* ---- Fee collection, live ---- */
.dv-fee{display:grid;gap:11px}
.fe-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.fe-hd small{display:block;font-size:11.5px;color:var(--text-3);font-weight:600}
.fe-big{font:800 27px/1.1 var(--head);color:#0A1F4E}
.fe-up{display:flex;align-items:center;gap:4px;font:800 13px var(--body);color:#15803D;background:#DCFCE7;padding:5px 9px;border-radius:10px}
.fe-up svg{width:14px;height:14px}
.fe-bars{display:flex;align-items:flex-end;gap:7px;height:54px;padding:7px 10px;border-radius:13px;background:#F1F5FC}
.fe-bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#60A5FA,#1E6BFF);transform-origin:bottom}
.dk-slide.on .fe-bars i{animation:feBar .7s cubic-bezier(.2,.9,.2,1) both;height:var(--h)}
.dk-slide.on .fe-bars i:nth-child(2){animation-delay:.1s}.dk-slide.on .fe-bars i:nth-child(3){animation-delay:.2s}
.dk-slide.on .fe-bars i:nth-child(4){animation-delay:.3s}.dk-slide.on .fe-bars i:nth-child(5){animation-delay:.4s}
.dk-slide.on .fe-bars i:nth-child(6){animation-delay:.5s;background:linear-gradient(180deg,#34D399,#15803D)}
@keyframes feBar{from{transform:scaleY(0)}}
.fe-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.fe-modes span{display:grid;gap:1px;padding:7px 5px;border-radius:10px;background:#F5F8FD;border:1px solid var(--border);text-align:center}
.fe-modes em{font-style:normal;font-size:10.5px;color:var(--text-3)}
.fe-modes b{font:800 14px var(--head);color:#0A1F4E}
.fe-feed{display:grid;gap:6px}
.fe-feed span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:#fff;border:1px solid var(--border);font-size:12px;color:var(--text-2);box-shadow:0 6px 14px -12px rgba(15,40,100,.5)}
.fe-feed svg{width:22px;height:22px;padding:4px;border-radius:50%;background:#DCFCE7;color:#15803D;flex:none}
.fe-feed b{font:800 14px var(--head);color:#0A1F4E}
.fe-feed em{margin-left:auto;font-style:normal;font-weight:700;font-size:10.5px;color:#15803D;background:#DCFCE7;padding:3px 7px;border-radius:8px}

/* ---- Library ---- */
.dv-lib{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start}
.lb-scan{display:grid;gap:8px;justify-items:center}
.lb-book{position:relative;width:110px;height:132px;border-radius:14px;background:#0A1F4E;display:grid;place-items:center;overflow:hidden;color:#FBBF24}
.lb-book svg{width:56px;height:56px}
.lb-book .lb-beam{position:absolute;left:0;right:0;height:3px;background:#F0445B;box-shadow:0 0 16px 4px rgba(240,68,91,.7);animation:fpScan 2s ease-in-out infinite}
.lb-code{font:700 9.4px var(--body);letter-spacing:.4px;color:var(--text-3);background:#F1F5FC;padding:4px 7px;border-radius:7px}
.lb-main{display:grid;gap:9px;min-width:0}
.lb-issue{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 22px -16px rgba(15,40,100,.5)}
.lb-issue b{display:block;font:700 13.5px var(--head)}
.lb-issue small{font-size:11.5px;color:var(--text-3)}
.lb-issue em{align-self:center;margin-left:auto;font-style:normal;font:800 10.5px var(--body);color:#B45F00;background:#FFF1E0;padding:4px 8px;border-radius:9px;white-space:nowrap}
.lb-av{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#7C5CFC,#1E6BFF);color:#fff;display:grid;place-items:center;font:800 13px var(--head);flex:none}
.lb-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lb-rows span{display:grid;gap:1px;padding:8px 6px;border-radius:11px;background:#F5F8FD;border:1px solid var(--border);text-align:center}
.lb-rows b{font-size:10.5px;color:var(--text-3);font-weight:600}
.lb-rows em{font-style:normal;font:800 16px var(--head);color:#0A1F4E}
.dv-bus svg{width:100%;height:auto;background:linear-gradient(#EAF3FF,#F5F9FF);border-radius:14px}
.dv-bus .rt{fill:none;stroke:#93B4F5;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 12}
.dv-bus .st{fill:#fff;stroke:#1E6BFF;stroke-width:3}.dv-bus .sc{fill:#22B45A;stroke:#fff;stroke-width:3}
.dv-bus .bs{offset-path:path("M20 120 C 80 120, 70 40, 150 50 S 230 120, 280 30");animation:busGo 6s ease-in-out infinite}
@keyframes busGo{from{offset-distance:0%}to{offset-distance:100%}}
.dv-note{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 14px;border-radius:12px;background:#0A1F4E;color:#fff;font-size:14.5px;font-weight:600}
.dv-note svg{width:17px;height:17px;color:#FBBF24}
.dv-bey{display:grid;grid-template-columns:auto 40px 1fr;align-items:center;gap:10px}
.dv-erp{display:grid;place-items:center;gap:6px;width:110px;height:110px;border-radius:22px;background:#0A1F4E;color:#fff;font:700 14.5px var(--head);text-align:center}
.dv-erp svg{width:34px;height:34px;color:#60A5FA}
.dv-ar{height:3px;background:repeating-linear-gradient(90deg,#1E6BFF 0 6px,transparent 6px 11px);position:relative;animation:vflow .6s linear infinite}
.dv-chips{display:grid;gap:8px}
.dv-chips span{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:#F1F5FC;font-size:14.5px;font-weight:600}
.dv-chips svg{width:18px;height:18px;color:#7C5CFC;flex:none}
.dv-dp img{width:100%;height:auto;border-radius:12px}
.dv-ticks{display:grid;gap:6px;margin-top:10px}
.dv-ticks span{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}.dv-ticks svg{width:16px;height:16px;color:#22B45A}
.dv-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:24px;border:1.5px solid #1E6BFF;font-size:15px}
.dv-search svg{width:18px;height:18px;color:#1E6BFF}
.dk-slide.on .typed{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid #1E6BFF;animation:typeW 1.4s steps(22) both}
@keyframes typeW{from{width:0}to{width:22ch}}
.dv-card{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:14px;border:1px solid var(--border);background:#fff;box-shadow:0 12px 24px -16px rgba(15,40,100,.4)}
.dv-card .av{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#1E6BFF,#7C5CFC);color:#fff;display:grid;place-items:center;font:800 17px var(--head)}
.dv-card b{display:block;font:700 15.5px var(--head)}.dv-card small{font-size:13.5px;color:var(--text-3)}
.dv-card em{margin-left:auto;font-style:normal;font:800 12.5px var(--body);color:#15803D;background:#DCFCE7;padding:5px 9px;border-radius:10px}
.dv-fun{display:grid;gap:10px}
.dv-fun>span{display:flex;align-items:center;gap:10px;height:44px;width:var(--w);padding:0 14px;border-radius:12px;background:linear-gradient(90deg,#FDBA74,#F26B1D);color:#fff;font-size:14.5px;font-weight:600}
.dv-fun>span b{font:800 17px var(--head)}
@media (max-width:900px){.dk-slide{grid-template-columns:1fr;gap:22px;padding:14px 4px}.dk-stage{min-height:0}.dk-tab{flex:0 0 auto}.dk-pp{bottom:auto;top:78px;right:16px}}
@media (max-width:520px){.dv-att{grid-template-columns:1fr}.dv-fp{width:100%;height:90px}.dv-bey{grid-template-columns:1fr}.dv-erp{width:100%;height:64px;grid-auto-flow:column}.dv-ar{display:none}.dk-sec{padding:60px 0}}
@media (prefers-reduced-motion:reduce){.dk *{animation:none!important}}
.dk:hover .dk-tab.on .dk-p{animation-play-state:paused}

/* ================= lead popup ================= */
.lp{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(5,12,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
.lp.show{opacity:1}
.lp-box{position:relative;width:min(940px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-radius:26px;background:#fff;box-shadow:0 50px 120px -30px rgba(0,0,0,.6);transform:translateY(30px) scale(.94);opacity:0;transition:transform .6s cubic-bezier(.2,1.2,.3,1),opacity .4s}
.lp.show .lp-box{transform:none;opacity:1}
.lp-box::before{content:"";position:absolute;inset:0;border-radius:26px;padding:2px;background:conic-gradient(from var(--lpa,0deg),#22D3EE,#1E6BFF,#8B5CF6,#F7810F,#22B45A,#22D3EE);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lpSpin 6s linear infinite;pointer-events:none;z-index:3}
@property --lpa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lpSpin{to{--lpa:360deg}}
.lp-x{position:absolute;top:14px;right:14px;z-index:4;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#F1F5FC;color:var(--text);transition:transform .2s,background .2s}
.lp-x:hover{transform:rotate(90deg);background:#E4EAF5}
.lp-side{position:relative;overflow:hidden;padding:30px 28px;color:#fff;background:linear-gradient(160deg,#0A1F4E,#13307A 55%,#1E4FB5)}
.lp-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;animation:lpFloat 7s ease-in-out infinite alternate}
.lp-orb.lo1{width:160px;height:160px;right:-50px;top:-40px;background:radial-gradient(circle at 35% 35%,#60A5FA,transparent 70%)}
.lp-orb.lo2{width:200px;height:200px;left:-70px;bottom:-60px;background:radial-gradient(circle at 60% 40%,#8B5CF6,transparent 70%);animation-delay:-3s}
.lp-ring{position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1.5px dashed rgba(165,200,255,.35);animation:spin 30s linear infinite}
@keyframes lpFloat{to{transform:translate(12px,18px) scale(1.08)}}
.lp-brand{position:relative;display:flex;align-items:center;gap:10px}
.lp-brand .tagline{font-size:7.6px;white-space:normal;max-width:170px}
.lp-side h3{position:relative;font:800 26px/1.2 var(--head);margin:28px 0 18px}
.lp-side h3 span{background:linear-gradient(90deg,#5EEAD4,#93C5FD);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-pts{position:relative;list-style:none;display:grid;gap:11px}
.lp-pts li{display:flex;align-items:center;gap:10px;font-size:15px;color:#DCE6FA;opacity:0;transform:translateX(-12px)}
.lp.show .lp-pts li{animation:lpIn .5s cubic-bezier(.2,.8,.2,1) forwards}
.lp.show .lp-pts li:nth-child(1){animation-delay:.45s}.lp.show .lp-pts li:nth-child(2){animation-delay:.6s}.lp.show .lp-pts li:nth-child(3){animation-delay:.75s}.lp.show .lp-pts li:nth-child(4){animation-delay:.9s}
.lp-pts svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#22B45A;color:#fff;flex:none}
@keyframes lpIn{to{opacity:1;transform:none}}
.lp-live{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.1);font-size:14px;font-weight:600}
.lp-live i{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:lpPing 1.6s infinite}
@keyframes lpPing{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.lp-main{position:relative;padding:30px 30px 24px}
.lp-eb{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:var(--blue-soft);color:var(--blue);font:700 13.5px var(--body)}
.lp-eb svg{width:14px;height:14px}
.lp-main h2{font:800 25px/1.2 var(--head);margin:12px 0 6px;letter-spacing:-.3px}
.lp-main h2 span{color:var(--blue)}
.lp-sub{font-size:15px;color:var(--text-2);margin-bottom:14px}
.lp-who{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.lp-who input{position:absolute;opacity:0;pointer-events:none}
.lp-who span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:20px;border:1.5px solid var(--border);font-size:14.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:.2s}
.lp-who span svg{width:15px;height:15px}
.lp-who input:checked+span{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);transform:translateY(-1px)}
.lp-who input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.lp-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lp-f{position:relative}
.lp-f.full{grid-column:1/-1}
.lp-f input,.lp-f textarea{width:100%;height:50px;padding:18px 14px 6px;border-radius:12px;border:1.5px solid var(--border);font:inherit;font-size:15px;background:#FBFCFF;transition:border-color .2s,box-shadow .2s;resize:none}
.lp-f textarea{height:64px;padding-top:22px}
.lp-f label{position:absolute;left:15px;top:15px;font-size:15px;color:var(--text-3);pointer-events:none;transition:.18s}
.lp-f input:focus,.lp-f textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,255,.12);background:#fff}
.lp-f input:focus+label,.lp-f input:not(:placeholder-shown)+label,.lp-f textarea:focus+label,.lp-f textarea:not(:placeholder-shown)+label{top:6px;font-size:12.5px;font-weight:700;color:var(--blue)}
.lp-f.bad input{border-color:#F0445B}
.lp-f .err,.lp-c .err{font-size:13px;color:#C42A40}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px}
.lp-c{margin:10px 0 12px}.lp-c .check{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.lp-go{width:100%;height:52px;border-radius:14px;font-size:16.5px;gap:10px;position:relative;overflow:hidden}
.lp-go::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:lpShine 3s ease-in-out infinite}
@keyframes lpShine{0%,50%{left:-60%}100%{left:130%}}
.lp-go.busy span{opacity:.7}.lp-go.busy svg{animation:spin 1s linear infinite}
.lp-alt{text-align:center;font-size:14px;color:var(--text-3);margin-top:10px}.lp-alt a{color:var(--blue);font-weight:600}
.lp-done{text-align:center;padding:40px 10px;position:relative}
.lp-done svg{width:90px;height:90px;margin:0 auto 14px}
.lp-done circle{fill:#E3F6EA;stroke:#22B45A;stroke-width:3;stroke-dasharray:230;stroke-dashoffset:230;animation:lpDraw .6s ease-out forwards}
.lp-done path{fill:none;stroke:#22B45A;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:lpDraw .4s .5s ease-out forwards}
@keyframes lpDraw{to{stroke-dashoffset:0}}
.lp-done p{color:var(--text-2);margin:8px auto 18px;max-width:340px}
.lp-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lp-conf i{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;animation:conf 1.8s ease-in forwards}
@keyframes conf{to{transform:translateY(420px) rotate(540deg);opacity:0}}
@media (max-width:760px){.lp-box{grid-template-columns:1fr}.lp-side{padding:22px 22px 18px}.lp-side h3{font-size:20px;margin:16px 0 10px}.lp-pts,.lp-live,.lp-ring{display:none}.lp-main{padding:22px 18px 18px}.lp-main h2{font-size:21px}.lp-g{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lp,.lp-box,.lp-box::before,.lp-orb,.lp-go::after{animation:none!important;transition:none!important}.lp-pts li{opacity:1;transform:none}}

/* ================= listing cards v2 ================= */
.icard{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px;border-radius:18px;transition:transform .25s,box-shadow .25s,border-color .25s}
.icard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(15,40,100,.45);border-color:#CFDDF7}
.icard .logo{position:relative;width:96px;height:100%;min-height:120px;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 55%,#0A1F4E));font:800 26px var(--head);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.icard .logo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.35),transparent 45%),repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px)}
.icard .logo span{position:relative}
.ic-v{position:absolute!important;left:6px;right:6px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:3px;padding:3px 4px;border-radius:8px;background:rgba(255,255,255,.95);color:#1E6BFF;font:700 11px var(--body)}
.ic-v svg{width:11px;height:11px}
.ic-b{min-width:0;display:flex;flex-direction:column}
.ic-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.icard h3{font:700 17px/1.3 var(--head)}.icard h3 a:hover{color:var(--blue)}
.ic-loc{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--text-2);margin-top:3px}.ic-loc svg{width:13px;height:13px;color:var(--blue)}
.sring{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#22B45A calc(var(--p)*1%),#E3EAF7 0);position:relative}
.sring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.sring b{position:relative;font:800 15px var(--head);color:#15803D}
.icard .meta{margin-top:8px}
.icard .foot2{margin-top:auto;padding-top:10px;border-top:1px dashed var(--border)}
.icard .fee{font:800 17px var(--head)}.icard .fee small{font:500 13px var(--body);color:var(--text-3)}
.ic-act{display:flex;gap:6px;flex-wrap:wrap}
.icard .mini.go{background:var(--blue);color:#fff;border-color:var(--blue)}.icard .mini.go svg{width:13px;height:13px}
@media (max-width:640px){.icard{grid-template-columns:72px minmax(0,1fr)}.icard .logo{width:72px;min-height:96px;font-size:20px}.sring{width:40px;height:40px}}

/* footer fixes for new blocks */
.foot .f-logo{display:flex;padding:0}
.foot .f-logo>span{display:flex;flex-direction:column}
.foot .f-logo img{display:block}
.foot .social{display:flex;gap:8px;margin-top:14px}
.foot .social a{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:10px;background:rgba(255,255,255,.08)}
.foot .social a:hover{background:#1E6BFF;color:#fff}
.foot .social svg{width:17px;height:17px}
.foot .stores .store{display:inline-flex;padding:0 16px 0 12px}
.foot .f-dpdp{display:inline-block;padding:0}
.foot .wrap.f-trust{display:flex;grid-template-columns:none;padding-top:20px;padding-bottom:20px}
.lh{background:#fff;border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 24px 50px -30px rgba(15,40,100,.4)}
.lh-k{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lh-k div{padding:12px;border-radius:14px;background:var(--blue-soft);text-align:center}
.lh-k b{display:block;font:800 24px var(--head);color:var(--navy)}.lh-k span{font-size:13.5px;color:var(--text-2)}
.lh-t{font:700 13.5px var(--body);text-transform:uppercase;letter-spacing:.8px;color:var(--text-3);margin:16px 0 8px}
.lh-c{display:flex;flex-wrap:wrap;gap:6px}
.lh-c a{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:18px;border:1px solid var(--border);font-size:14.5px;font-weight:600;transition:.2s}
.lh-c a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}.lh-c svg{width:13px;height:13px;color:var(--blue)}
.lh-m{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--blue)}.lh-m svg{width:15px;height:15px}
.foot .f-brand .stores{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0;padding:0;width:auto}
.foot .f-logo span img{width:150px;height:auto}
.foot .f-logo>img{width:58px;height:auto}

/* ================= articles: quick answer, takeaways, TOC ================= */
.art-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;max-width:1080px;margin:0 auto;align-items:start}
.art-wrap .article{max-width:none;margin:0}
.art-side{position:sticky;top:90px}
.toc{display:grid;gap:2px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--border)}
.toc b{font:700 13.5px var(--body);text-transform:uppercase;letter-spacing:.8px;color:var(--text-3);margin-bottom:6px}
.toc a{font-size:15px;color:var(--text-2);padding:6px 10px;border-radius:8px;border-left:2px solid transparent;line-height:1.35}
.toc a:hover{background:var(--blue-soft);color:var(--blue);border-left-color:var(--blue)}
.qa-box{position:relative;padding:18px 20px;border-radius:16px;background:linear-gradient(135deg,#EEF4FF,#F3EEFF);border:1px solid #D6E2FF;margin-bottom:18px}
.qa-k{display:inline-flex;align-items:center;gap:6px;font:800 13px var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.qa-k svg{width:15px;height:15px}
.qa-box p{font-size:17px!important;line-height:1.65!important;color:var(--text)!important;margin:0!important}
.kt-box{padding:16px 20px;border-radius:16px;background:#F2FBF5;border:1px solid #BFE8CD;margin-bottom:10px}
.kt-box b{display:flex;align-items:center;gap:8px;font:700 16px var(--head);color:#15803D;margin-bottom:6px}.kt-box b svg{width:17px;height:17px}
.kt-box ul{margin:0!important}
.art-cta{margin-top:24px!important;padding:14px 18px;border-radius:14px;background:#F5F8FD;border:1px solid var(--border)}
.art-cta a{color:var(--blue);font-weight:600}
.article .acc{max-width:none!important}
@media (max-width:900px){.art-wrap{grid-template-columns:1fr;gap:18px}.art-side{position:static}}
/* footer brand as text + all social icons */
.foot .f-name{display:flex;flex-direction:column;padding:0}
.foot .f-name>b{font:800 24px/1 var(--head);letter-spacing:1px;color:#fff}
.foot .f-name .tagline{font-size:11.5px;margin:7px 0 6px;white-space:normal;max-width:300px;color:#C9D6F2}
.foot .f-name .slogan{font-size:14px}
.foot .social{flex-wrap:wrap;max-width:340px}
.foot .social a{width:34px;height:34px}
.foot .social .sx{font:700 17px/1 system-ui,sans-serif;color:inherit}
.foot .social{gap:6px;max-width:none}
.foot .social a{width:32px;height:32px;border-radius:9px}
.foot .social svg{width:16px;height:16px}
.foot .social{gap:5px}.foot .social a{width:30px;height:30px}.foot .social svg{width:15px;height:15px}.foot .social .sx{font-size:16px}
/* footer: first column as text content, aligned with the other columns */
.foot .f-brand p{margin:0 0 12px;line-height:1.65;max-width:330px}
.f-contact{list-style:none;display:grid;gap:8px;margin-bottom:4px}
.f-contact li{display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.f-contact svg{width:15px;height:15px;flex:none;margin-top:2px;color:#6EA8FF}
.foot .f-contact a{display:inline;padding:0}
.foot .f-h.f-sub{margin:18px 0 10px}
.foot .f-brand .social{margin-top:0}
.foot .f-brand .stores{margin-top:0}

/* ---------- /join/<code> — a partner's invite link ---------- */
/* --join-brand is set from the partner's own colour by assets/join.js; the
   default is the site blue so the card is never unstyled while it loads. */
#j-card{--join-brand:var(--blue)}
.jn-logo{display:grid;place-items:center;min-height:72px}
.jn-logo img{width:72px;height:72px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid var(--border)}
.jn-initials{display:grid;place-items:center;width:72px;height:72px;border-radius:14px;
  background:var(--join-brand);color:#fff;font:700 26px var(--head);letter-spacing:.5px}
.jn-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:50%;
  background:var(--blue-soft);color:var(--blue-2)}
.jn-mark svg{width:26px;height:26px}
.jn-mark.jn-ok{background:#E6F6EC;color:#0B7A32}
.jn-mark.jn-bad{background:#FDECEC;color:#B3261E}
/* The spinner is the one place this page animates, so it honours the setting
   rather than spinning at somebody who has asked the web to stop moving. */
@media (prefers-reduced-motion:no-preference){
  #j-load .jn-mark svg{animation:jn-spin 1.1s linear infinite}
}
@keyframes jn-spin{to{transform:rotate(360deg)}}

/* ---------- dashboard › courses: syllabus and the final assessment ---------- */
#lrn-panel{margin-top:14px}
.lrn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.lrn-sub{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin:18px 0 8px}
.lrn-out{margin:0 0 4px 18px;color:var(--text-2)}
.lrn-out li{margin-bottom:4px}
.lrn-m{border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:8px;background:#fff}
.lrn-m summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none}
.lrn-m summary::-webkit-details-marker{display:none}
.lrn-m summary small{color:var(--text-3);font-size:12px;white-space:nowrap}
.lrn-l{list-style:none;margin:10px 0 2px;padding:0}
.lrn-l li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--border);color:var(--text-2);font-size:14px}
.lrn-l li small{color:var(--text-3);white-space:nowrap}
.lrn-src{margin:0 0 4px 18px;color:var(--text-3);font-size:13px}
.lrn-src a{color:var(--blue);text-decoration:underline}
.lrn-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.lrn-act small{color:var(--text-3);font-size:12.5px}
.lrn-qs{margin:0;padding-left:20px}
.lrn-q{margin-bottom:18px}
.lrn-q p{font-weight:600;margin-bottom:8px}
.lrn-q.done p{color:var(--text-2)}
.lrn-os{display:grid;gap:7px}
/* 44px tall so the whole row is the target, not the 17px radio inside it —
   the mistake the tap-target sweep found on the consent checkboxes. */
.lrn-o{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;
  border:1px solid var(--border);border-radius:9px;cursor:pointer;background:#fff}
.lrn-o:hover{border-color:var(--blue)}
.lrn-o input{width:18px;height:18px;flex:none;accent-color:var(--blue)}
.lrn-o:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.lrn-cert{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px;
  border:1px solid #A7F3D0;border-radius:12px;background:#F0FDF4}
.lrn-cert small{display:block;color:var(--text-2);font-size:12.5px;margin-top:2px}
.cs-err{padding:12px 14px;border:1px solid #FCA5A5;border-radius:10px;background:#FEF2F2;color:#B3261E}
.lrn-hi{color:var(--text-2);font-size:13.5px;margin:8px 0 2px;padding-left:10px;border-left:2px solid var(--blue-soft)}

/* ---------- /school — the partner institution's view ---------- */
.sch-root{--sch-brand:var(--blue);max-width:980px;margin:0 auto}
.sch-spin{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;
  border-radius:50%;background:var(--blue-soft);color:var(--blue-2)}
@media (prefers-reduced-motion:no-preference){.sch-spin svg{animation:jn-spin 1.1s linear infinite}}
.sch-form{max-width:440px;margin:0 auto}
.sch-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sch-id{display:flex;align-items:center;gap:14px}
.sch-id img{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--border)}
.sch-initials{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;
  background:var(--sch-brand);color:#fff;font:700 20px var(--head)}
.sch-me{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sch-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;margin-bottom:18px}
.sch-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 12px;
  align-items:center;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:#fff}
.sch-stat svg{grid-row:1/3;width:26px;height:26px;color:var(--sch-brand)}
.sch-stat b{font:700 24px var(--head)}
.sch-stat span{color:var(--text-3);font-size:13px}
.sch-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.sch-code code{flex:1;min-width:0;overflow-wrap:anywhere;padding:10px 12px;border:1px solid var(--border);
  border-radius:9px;background:var(--blue-soft);font-size:13.5px;font-weight:600;color:var(--blue-2)}
.sch-t{width:100%;border-collapse:collapse}
.sch-t th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-3);padding:0 12px 8px 0;border-bottom:1px solid var(--border)}
.sch-t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--border);vertical-align:top;font-size:14px}
.sch-t td small{display:block;color:var(--text-3);font-size:12px;margin-top:2px}
@media (max-width:760px){
  .sch-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sch-t tr{display:block;border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:10px}
  .sch-t td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 0;text-align:right}
  .sch-t td::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--text-3);text-align:left}
  .sch-t td small{text-align:right}
}

/* ---------- /course-licences ---------- */
.lic-c{margin-bottom:16px;padding:22px}
.lic-c h3{font:700 17px var(--head);margin-bottom:10px}
.lic-t{width:100%;border-collapse:collapse;font-size:14px}
.lic-t th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-3);padding:0 14px 8px 0;border-bottom:1px solid var(--border)}
.lic-t td{padding:10px 14px 10px 0;border-bottom:1px solid var(--border);vertical-align:top}
.lic-t a{color:var(--blue);text-decoration:underline}
@media (max-width:620px){
  .lic-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lic-t tr{display:block;padding:8px 0;border-bottom:1px solid var(--border)}
  .lic-t td{display:flex;justify-content:space-between;gap:14px;border:0;padding:4px 0;text-align:right}
  .lic-t td::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--text-3);text-align:left}
}

/* ---------- /signin — student or institution ---------- */
.si-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:20px;max-width:900px;margin:0 auto}
.si-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--border);
  border-radius:18px;background:#fff;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.si-card:hover,.si-card:focus-visible{border-color:var(--blue);box-shadow:0 10px 30px rgba(16,42,100,.10);transform:translateY(-2px)}
.si-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:16px}
.si-ic svg{width:26px;height:26px}
.si-stu{background:var(--blue-soft);color:var(--blue-2)}
.si-ins{background:#E6F6EC;color:#0B7A32}
.si-card h2{font:700 20px var(--head);margin:0 0 8px}
.si-card>p{color:var(--text-2);margin:0 0 16px}
.si-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.si-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text-2)}
.si-list svg{width:16px;height:16px;flex:none;margin-top:3px;color:#0B7A32}
/* Pushed to the bottom so two cards of different heights still line up. */
.si-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;
  color:var(--blue);min-height:24px}
.si-go svg{width:17px;height:17px}
.si-note{max-width:900px;margin:26px auto 0;padding:20px 24px;border:1px solid var(--border);
  border-radius:14px;background:var(--blue-soft)}
.si-note p{margin:0 0 8px;color:var(--text-2)}
.si-note a{color:var(--blue);font-weight:600;text-decoration:underline}
/* The invite banner on the sign-up pane, and the way across to /school. */
.auth-join{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;margin-bottom:18px;
  border:1px solid #A7F3D0;border-radius:12px;background:#F0FDF4}
.auth-join .ic{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:9px;background:#0B7A32;color:#fff}
.auth-join .ic svg{width:18px;height:18px}
.auth-join b{display:block;font-size:14.5px}
.auth-join small{display:block;color:var(--text-2);font-size:12.5px;margin-top:2px;line-height:1.5}
.auth-other{text-align:center;margin-top:16px;font-size:14px;color:var(--text-3)}
.auth-other a{color:var(--blue);font-weight:600;text-decoration:underline}

/* ---------- /school sign-in: the selling half and the form card ---------- */
.sch-phero{padding-bottom:40px}
.sch-wrap{align-items:start}
.sch-card{max-width:none}
.sch-card .auth-ico{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;
  border-radius:14px;background:var(--blue-soft);color:var(--blue-2)}
.sch-card .auth-ico svg{width:22px;height:22px}
.sch-card h2{text-align:center;font:700 22px var(--head);margin:0 0 6px}
.sch-card .auth-sub{text-align:center;color:var(--text-2);font-size:14px;margin:0 0 20px}
.sch-card .gmsg{min-height:20px;margin:0 0 10px;color:var(--red);font-size:13.5px}
.sch-card .gmsg a{color:var(--blue);text-decoration:underline}
.sch-divide{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--text-3);font-size:12.5px}
.sch-divide::before,.sch-divide::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- /course-licences ---------- */
.lic-c{margin-bottom:16px;padding:22px}
.lic-c h3{font:700 17px var(--head);margin-bottom:10px}
.lic-t{width:100%;border-collapse:collapse;font-size:14px}
.lic-t th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-3);padding:0 14px 8px 0;border-bottom:1px solid var(--border)}
.lic-t td{padding:10px 14px 10px 0;border-bottom:1px solid var(--border);vertical-align:top}
.lic-t a{color:var(--blue);text-decoration:underline}
@media (max-width:620px){
  .lic-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lic-t tr{display:block;padding:8px 0;border-bottom:1px solid var(--border)}
  .lic-t td{display:flex;justify-content:space-between;gap:14px;border:0;padding:4px 0;text-align:right}
  .lic-t td::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--text-3);text-align:left}
}

/* ---------- /signin — student or institution ---------- */
.si-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:20px;max-width:900px;margin:0 auto}
.si-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--border);
  border-radius:18px;background:#fff;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.si-card:hover,.si-card:focus-visible{border-color:var(--blue);box-shadow:0 10px 30px rgba(16,42,100,.10);transform:translateY(-2px)}
.si-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:16px}
.si-ic svg{width:26px;height:26px}
.si-stu{background:var(--blue-soft);color:var(--blue-2)}
.si-ins{background:#E6F6EC;color:#0B7A32}
.si-card h2{font:700 20px var(--head);margin:0 0 8px}
.si-card>p{color:var(--text-2);margin:0 0 16px}
.si-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.si-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text-2)}
.si-list svg{width:16px;height:16px;flex:none;margin-top:3px;color:#0B7A32}
/* Pushed to the bottom so two cards of different heights still line up. */
.si-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;
  color:var(--blue);min-height:24px}
.si-go svg{width:17px;height:17px}
.si-note{max-width:900px;margin:26px auto 0;padding:20px 24px;border:1px solid var(--border);
  border-radius:14px;background:var(--blue-soft)}
.si-note p{margin:0 0 8px;color:var(--text-2)}
.si-note a{color:var(--blue);font-weight:600;text-decoration:underline}
/* The invite banner on the sign-up pane, and the way across to /school. */
.auth-join{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;margin-bottom:18px;
  border:1px solid #A7F3D0;border-radius:12px;background:#F0FDF4}
.auth-join .ic{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:9px;background:#0B7A32;color:#fff}
.auth-join .ic svg{width:18px;height:18px}
.auth-join b{display:block;font-size:14.5px}
.auth-join small{display:block;color:var(--text-2);font-size:12.5px;margin-top:2px;line-height:1.5}
.auth-other{text-align:center;margin-top:16px;font-size:14px;color:var(--text-3)}
.auth-other a{color:var(--blue);font-weight:600;text-decoration:underline}

/* ---------- /school sign-in: the selling half and the form card ---------- */
.sch-phero{padding-bottom:40px}
.sch-wrap{align-items:start}
.sch-card{max-width:none}
.sch-card .auth-ico{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;
  border-radius:14px;background:var(--blue-soft);color:var(--blue-2)}
.sch-card .auth-ico svg{width:22px;height:22px}
.sch-card h2{text-align:center;font:700 22px var(--head);margin:0 0 6px}
.sch-card .auth-sub{text-align:center;color:var(--text-2);font-size:14px;margin:0 0 20px}
.sch-card .gmsg{min-height:20px;margin:0 0 10px;color:var(--red);font-size:13.5px}
.sch-card .gmsg a{color:var(--blue);text-decoration:underline}
.sch-divide{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--text-3);font-size:12.5px}
.sch-divide::before,.sch-divide::after{content:"";flex:1;height:1px;background:var(--border)}

/* The dashboard mock-up. Somebody arriving from an email should be able to
   see they are in the right place before they type a password. */
.sch-shot{margin:26px 0 0;position:relative}
.sch-shot img{width:100%;height:auto;display:block;border:1px solid var(--border);
  border-radius:16px;box-shadow:0 18px 44px rgba(16,42,100,.13)}
.sch-shot figcaption{margin-top:10px;font-size:12.5px;color:var(--text-3);text-align:center}
/* A slow drift, so the panel reads as a live product rather than a flat
   screenshot. Off entirely for anyone who has asked the web to stop moving. */
@media (prefers-reduced-motion:no-preference){
  .sch-shot img{animation:sch-float 7s ease-in-out infinite}
}
@keyframes sch-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:900px){
  .sch-shot{display:none}   /* the form is the job on a phone; the mock-up is not */
}

/* ---------- /school signed in: it stops being a page ---------- */
/* The marketing chrome goes away so the dashboard is the whole window. Scoped
   to this one class so no other page can lose its header by accident. */
body.sch-on .topbar,
body.sch-on .hdr,
body.sch-on footer,
body.sch-on .skip{display:none}
body.sch-on #main{padding:0;max-width:none}
body.sch-on .sch-phero{padding:0}
body.sch-on .sch-phero>.wrap{padding:0;max-width:none;display:block}
body.sch-on .sch-root{max-width:none}

.sch-assure{display:flex;gap:11px;align-items:flex-start;margin-top:24px;padding:14px 16px;
  border:1px solid var(--border);border-radius:12px;background:var(--blue-soft)}
.sch-assure svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue-2)}
.sch-assure p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2)}

/* The institution's identity, pinned to the bottom of the navy rail. */
.sch-rail-id{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:4px;
  border-radius:11px;background:rgba(255,255,255,.06)}
.sch-rail-id img{width:34px;height:34px;object-fit:contain;border-radius:8px;background:#fff}
.sch-rail-id .sch-initials{width:34px;height:34px;border-radius:8px;font:700 13px var(--head)}
.sch-rail-id b{display:block;font-size:13.5px;color:#fff;line-height:1.3}
.sch-rail-id small{display:block;font-size:11.5px;color:#9FB3DC;margin-top:1px}
.app-side-f button.app-link{background:none;border:0;cursor:pointer;font:inherit;
  font-weight:600;font-size:14.5px}

.sch-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:14px;margin-bottom:18px}
.sch-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  gap:0 13px;align-items:center;padding:17px 19px;border:1px solid var(--border);
  border-radius:15px;background:#fff}
.sch-stat svg{grid-row:1/4;width:26px;height:26px;color:var(--sch-brand)}
.sch-stat b{font:700 25px var(--head);line-height:1.15}
.sch-stat span{color:var(--text-3);font-size:13px}
.sch-stat small{color:var(--text-3);font-size:11.5px;opacity:.85;margin-top:3px}

.sch-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:16px;margin-bottom:16px}

/* Eight weeks of joining. Twelve bars do not need a charting library. */
.sch-bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin:14px 0 6px}
.sch-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;gap:5px}
.sch-bar i{display:block;width:100%;min-height:3px;height:var(--h);border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--sch-brand),#8FB4FF)}
.sch-bar span{font-size:11.5px;font-weight:700;color:var(--text-3);min-height:14px}
@media (prefers-reduced-motion:no-preference){
  .sch-bar i{animation:sch-grow .5s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes sch-grow{from{height:0}}
.sch-bars-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin:0}

.sch-rhead{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:10px}
.sch-rhead h3{margin:0}
.sch-tools{display:flex;gap:9px;flex-wrap:wrap}
.sch-find{display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--border);
  border-radius:10px;background:#fff;min-height:40px}
.sch-find svg{width:16px;height:16px;color:var(--text-3)}
.sch-find input{border:0;outline:0;font:inherit;font-size:14px;min-width:150px;background:none}
.sch-tools select{min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:10px;
  font:inherit;font-size:14px;background:#fff}

.sch-how{margin:10px 0 0;padding-left:20px;color:var(--text-2)}
.sch-how li{margin-bottom:9px;line-height:1.6}
.sch-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  padding:2px 7px;border-radius:6px;background:var(--blue-soft);color:var(--blue-2)}

/* The rail slides in on a phone, same as the student dashboard's. */
@media (max-width:900px){
  .sch-root .app{grid-template-columns:1fr}
  .sch-root .app-side{position:fixed;inset:0 auto 0 0;width:270px;transform:translateX(-100%);
    transition:transform .22s ease}
  .sch-root.menu-open .app-side{transform:none}
  .sch-root .app-scrim{position:fixed;inset:0;background:rgba(8,20,48,.45);opacity:0;
    pointer-events:none;transition:opacity .22s;z-index:45}
  .sch-root.menu-open .app-scrim{opacity:1;pointer-events:auto}
}
@media (min-width:901px){ .sch-root .app-menu{display:none} }

/* The three questions a hesitating visitor is actually asking. */
.si-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:16px;max-width:900px;margin:22px auto 0}
.si-trust>div{padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:#fff}
.si-trust svg{width:20px;height:20px;color:var(--blue-2);margin-bottom:8px}
.si-trust b{display:block;font-size:14.5px;margin-bottom:3px}
.si-trust span{display:block;font-size:13px;line-height:1.55;color:var(--text-2)}

/* ---------- supplied artwork on the two sign-in pages ---------- */
/* The student panel on /login and the certifications banner on /school. Both
   are decorative: the real heading, the perks and the form are HTML beside
   them, so a reader with images off loses nothing but the picture. */
.auth-art,.sch-banner{margin:24px 0 0}
.auth-art img,.sch-banner img{width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 16px 40px rgba(16,42,100,.14)}
.sch-banner img{border:1px solid var(--border)}
@media (prefers-reduced-motion:no-preference){
  .auth-art img,.sch-banner img{animation:art-rise .7s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes art-rise{from{opacity:0;transform:translateY(14px)}}
/* On a phone the form is the job and the artwork is 80 KB of scrolling. */
@media (max-width:900px){ .auth-art,.sch-banner{display:none} }

/* Choosing a password, from the welcome email. */
.sch-meter{display:flex;align-items:center;gap:9px;margin-top:8px}
.sch-meter i{flex:1;height:5px;border-radius:3px;background:var(--border);position:relative;overflow:hidden}
.sch-meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  transition:width .2s,background .2s}
.sch-meter span{font-size:12px;font-weight:700;color:var(--text-3);min-width:62px;text-align:right}
.sch-meter.s0 i::after{width:12%;background:#F0445B}
.sch-meter.s1 i::after{width:30%;background:#F0445B}
.sch-meter.s2 i::after{width:55%;background:#FF8A1F}
.sch-meter.s3 i::after{width:78%;background:#22B45A}
.sch-meter.s4 i::after{width:100%;background:#0B7A32}
.sch-card .auth-ico.ok{background:#E6F6EC;color:#0B7A32}

/* ---------- where the artwork actually belongs ---------- */
/* The certifications banner is 2.67:1. In a half-width column its own text
   is unreadable, so it runs across the top at the size it was drawn for. */
.sch-banner{margin:0 auto 26px;max-width:1100px}
.sch-banner img{border:1px solid var(--border);border-radius:16px}

/* On /login the artwork says what the heading and the perks say. Rather than
   print both, the wide screen gets the picture and the narrow one the words —
   and the column stops being twice the height of the form beside it. */
.auth-art{margin:0}
.auth-art img{max-height:560px;width:auto;margin:0 auto}
@media (min-width:901px){
  .auth-sell>.eyebrow,.auth-sell>h1,.auth-sell>.lead,.auth-sell>.perks{display:none}
  .login-wrap{align-items:center}
}
@media (max-width:900px){ .auth-art{display:none} }

/* A supplied banner run at the width it was drawn for. Centred and capped,
   because stretching 2:1 artwork across a 1600px window makes its own text
   larger than the heading above it. */
.wide-banner{max-width:1100px;margin:0 auto}
.wide-banner img{width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid var(--border);box-shadow:0 16px 40px rgba(16,42,100,.12)}
@media (prefers-reduced-motion:no-preference){
  .wide-banner img{animation:art-rise .7s cubic-bezier(.2,.8,.2,1) both}
}

/* ---------- /login, as one panel ---------- */
/* The supplied artwork is half of a design: a photo filling the left edge to
   edge with the form floating on white beside it. Rendered as a picture
   sitting inside a column it was neither — so the two columns become one
   rounded panel, the photo fills its half, and the form keeps its own white.
   Below 900 the panel dissolves: the photo goes, the real heading and perks
   come back, and the form is the page. */
.login-hero{padding-top:28px}
@media (min-width:901px){
  .login-hero .login-wrap{
    /* No padding. The base rule has 40px top and bottom, which left a white
       strip above and below the photo — the panel looked like a picture
       pasted into a box rather than one surface. */
    display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;gap:0;padding:0;
    background:#fff;border:1px solid var(--border);border-radius:26px;overflow:hidden;
    box-shadow:0 26px 70px -28px rgba(10,31,78,.38)}
  /* The artwork is shown whole.
     It was stretched to cover the cell, and the cell's height is set by
     whichever column is taller — so on a page where the form grew, the
     picture was cropped top and bottom and the student lost her head. Now
     the image keeps its own 0.796 ratio and the cell carries the artwork's
     own sky colour, so whatever space is left over is invisible rather than
     a white band. Nothing is ever cut off. */
  .login-hero .auth-sell{padding:0;display:flex;align-items:center;
    background:linear-gradient(180deg,#DCF1FF 0%,#E4F2FD 55%,#193A6A 100%)}
  .login-hero .auth-art{margin:0;width:100%}
  .login-hero .auth-art img{width:100%;height:auto;max-height:none;object-fit:contain;
    border-radius:0;box-shadow:none;animation:none;display:block}
  .login-hero .login-wrap>.reveal:last-child{display:flex;flex-direction:column;
    justify-content:center;padding:44px 48px}
  /* The card is already on the panel's white; a second border round it draws
     a box inside a box. */
  .login-hero .auth{border:0;box-shadow:none;background:none;padding:0;max-width:430px;
    margin:0 auto;width:100%}
}
@media (max-width:900px){
  .login-hero .auth-sell{display:block}
}

/* The certifications banner above the institution sign-in.
   It was a 1100px slab with a heavy shadow dropped on top of the page and it
   read as an advert pasted over the form. Narrower than the content below
   it, a hairline instead of a drop shadow, and room to breathe — it is
   context for the page, not the page. */
.sch-banner{max-width:900px;margin:0 auto 34px}
.sch-banner img{border:1px solid var(--border);border-radius:14px;
  box-shadow:0 6px 18px -10px rgba(16,42,100,.35)}
@media (max-width:900px){ .sch-banner{display:none} }

/* ---------- /school › Your branding ---------- */
.sch-logo-box{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-top:14px}
.sch-logo-now{display:grid;place-items:center;width:104px;height:104px;flex:none;
  border:1px solid var(--border);border-radius:16px;background:#fff;overflow:hidden}
.sch-logo-now img{max-width:88px;max-height:88px;object-fit:contain}
.sch-logo-now .sch-initials{width:104px;height:104px;border-radius:0;font:700 30px var(--head)}
.sch-upload{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.sch-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;
  border:1px solid rgba(0,0,0,.12);margin-right:6px}
.tag.r{background:#FDECEC;color:#B3261E}

/* The certificate, drawn from their own row — their name, their colour,
   their logo. Answers "what will this look like with us on it" without
   waiting for a student to earn one. */
.sch-cert{margin-top:14px}
.sch-cert-paper{--c:#1D5BF5;max-width:620px;padding:30px 34px;border-radius:14px;background:#fff;
  border:1px solid var(--border);border-top:6px solid var(--c);text-align:center;
  box-shadow:0 10px 30px -16px rgba(16,42,100,.4)}
.sch-cert-top{display:flex;align-items:center;gap:12px;text-align:left;
  padding-bottom:14px;border-bottom:1px solid var(--border)}
.sch-cert-logo{width:46px;height:46px;flex:none;display:grid;place-items:center}
.sch-cert-logo img{max-width:46px;max-height:46px;object-fit:contain}
.sch-cert-mk{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;
  color:#fff;font:700 16px var(--head)}
.sch-cert-top b{display:block;font:700 15px var(--head);line-height:1.25}
.sch-cert-top small{display:block;font-size:12px;color:var(--text-3)}
.sch-cert-by{margin-left:auto;text-align:right;font-size:10.5px;color:var(--text-3);line-height:1.4}
.sch-cert-by b{font-size:12.5px;color:var(--text-2)}
.sch-cert-kind{font:700 24px var(--head);color:var(--c);margin:20px 0 14px}
.sch-cert-this{font-size:12.5px;color:var(--text-3);margin:0}
.sch-cert-who{font:600 22px var(--head);margin:6px 0 10px;
  border-bottom:1px dashed var(--border);display:inline-block;padding:0 26px 6px}
.sch-cert-course{font:700 17px var(--head);margin:8px 0 22px}
.sch-cert-foot{display:flex;justify-content:space-between;gap:16px;text-align:left;
  padding-top:14px;border-top:1px solid var(--border)}
.sch-cert-foot i{display:block;font-style:normal;font-weight:700;font-size:13.5px}
.sch-cert-foot small{display:block;font-size:11px;color:var(--text-3)}
.sch-cert-no{text-align:right}
.sch-cert-no i{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
@media (max-width:560px){ .sch-cert-paper{padding:22px 18px} }

/* The real certificate, dropped into a page that already has chrome.
   The template is laid out in mm for A4 landscape; inside a column it is
   scaled to fit rather than overflowing, and the page's own background
   shows through round it. */
/* The certificate lives in its own document (see cert-render.js), so there
   is nothing here to style but the frame it arrives in. Its stylesheet sets
   :root, * and body — loose in this page it restyled the whole dashboard. */
.cert-real{width:100%}
.cert-real iframe{display:block;width:100%;border:0;border-radius:12px;
  box-shadow:0 14px 40px -18px rgba(16,42,100,.45)}
/* The preview is a preview. Full width it dominated the pane and read as
   the page's subject rather than a check on the branding above it. */
#sch-cert{max-width:620px}

/* ================= COURSE CATALOGUE (/courses, /courses/<slug>) =================
   The 103 paid courses. Same tokens as the rest of the site — the cards
   are the site's card, not a second card system from the reference model. */
.catbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.catchip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:14px;font-weight:600;color:#2C3758;white-space:nowrap}
.catchip svg{width:16px;height:16px}
.catchip span{color:#8792AD;font-weight:600}
.catchip:hover{border-color:var(--blue);color:var(--blue)}
.catchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.catchip.on span{color:#C9DCFF}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:20px}
.mc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .18s,transform .18s}
.mc:hover{box-shadow:0 18px 38px -20px rgba(15,40,100,.35);transform:translateY(-2px)}
.mc-th{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:#EEF2F9}
.mc-b{display:flex;flex-direction:column;gap:6px;padding:13px 14px 15px}
.mc-t{font:700 15px/1.35 var(--head);color:#0F1A3C;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-by{font-size:12.5px;color:#6B7693}
.mc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mc-chips i{font-style:normal;font-size:11.5px;padding:3px 8px;border-radius:999px;background:#F1F5FB;color:#55617E}
.mc-f{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.mc-f b{font:800 17px/1 var(--head);color:#0F1A3C}
.mc-f s{font-size:13px;color:#9AA3BC}
.mc-off{font-style:normal;font-size:12px;font-weight:700;color:var(--green)}
/* --- one course --- */
.cpath{font-size:13.5px;color:#6B7693;margin:0 0 14px}
.cpath a{color:var(--blue)}
.cwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start}
.cmain h1{font:800 clamp(26px,2.6vw,36px)/1.18 var(--head);letter-spacing:-.6px;color:#0A1433}
.cmain .lead{font-size:17.5px;color:#39456A;margin:12px 0 10px}
.cby{font-size:14px;color:#6B7693;margin:0 0 20px}
.cmain h2{font:800 20px/1.3 var(--head);color:#0A1433;margin:28px 0 12px}
.cwhat ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.cwhat li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#33405F;line-height:1.5}
.cwhat li .ic{flex:none;margin-top:1px}
.cmod{border:1px solid var(--border);border-radius:12px;margin-bottom:8px;background:#fff}
.cmod summary{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 16px;cursor:pointer;font-size:15px}
.cmod summary span{font-size:13px;color:#7A86A3;white-space:nowrap}
.clec{margin:0;padding:4px 16px 14px 34px;display:grid;gap:8px}
.clec li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:#39456A}
.clec li span{flex:1}
.clec li i{font-style:normal;font-size:12.5px;color:#8792AD;white-space:nowrap}
.clec .free{font-style:normal;font-size:11.5px;font-weight:700;color:var(--green);background:#E7F7EE;padding:2px 7px;border-radius:999px}
.cbuy{position:sticky;top:96px;border:1px solid var(--border);border-radius:18px;background:#fff;padding:14px;box-shadow:0 20px 44px -26px rgba(15,40,100,.3)}
.cbuy>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.cprice{display:flex;align-items:baseline;gap:9px;margin:14px 2px 10px}
.cprice b{font:800 27px/1 var(--head);color:#0A1433}
.cprice s{font-size:15px;color:#9AA3BC}
.cprice em{font-style:normal;font-size:13px;font-weight:700;color:var(--green)}
.cnote{font-size:13.5px;color:#55617E;background:#FFF8E8;border:1px solid #F3DFA8;border-radius:10px;padding:10px 12px;margin:0 0 12px;line-height:1.5}
.cbuy .btn{width:100%}
.cbuy .btn+.cnote{margin-top:12px}
.cbuy .btn-ghost{margin-top:0;border:1.5px solid var(--border);color:#39456A;background:#fff}
.cfacts{list-style:none;margin:14px 0 2px;padding:0;display:grid;gap:10px}
.cfacts li{display:flex;gap:10px;align-items:center;font-size:14px;color:#39456A}
@media (max-width:900px){
  .cwrap{grid-template-columns:1fr;gap:24px}
  .cbuy{position:static;order:-1}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
}

/* ================= LECTURE PLAYER (/learn/<slug>) ================= */
.pl-load{padding:60px 0;text-align:center;color:#6B7693}
.pl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:0 0 20px}
.pl-back{font-size:13.5px;color:var(--blue)}
.pl-top h1{font:800 clamp(20px,2.2vw,27px)/1.2 var(--head);color:#0A1433;margin:4px 0 0}
.pl-prog{min-width:200px}
.pl-prog span{font-size:13px;color:#6B7693}
.pl-track{height:8px;border-radius:9px;background:#E6EBF5;overflow:hidden;margin-top:6px}
.pl-track i{display:block;height:100%;background:var(--green);border-radius:9px;transition:width .35s}
.pl-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
.pl-rail{border:1px solid var(--border);border-radius:16px;background:#fff;padding:8px;max-height:72vh;overflow:auto;position:sticky;top:92px}
.pl-sec{font:700 12.5px/1.3 var(--head);text-transform:uppercase;letter-spacing:.5px;color:#8792AD;padding:12px 10px 6px}
.pl-l{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;border:0;background:none;border-radius:9px;font-size:14px;color:#33405F;cursor:pointer}
.pl-l:hover{background:#F2F6FC}
.pl-l.on{background:var(--blue);color:#fff}
.pl-l.on em{color:#C9DCFF}
.pl-l i{flex:none;width:15px;height:15px;border-radius:50%;border:1.6px solid #C3CCE0}
.pl-l.done i{background:var(--green);border-color:var(--green)}
.pl-l.lock{opacity:.5;cursor:not-allowed}
.pl-l span{flex:1;line-height:1.35}
.pl-l em{font-style:normal;font-size:11.5px;color:#8792AD}
.pl-main{border:1px solid var(--border);border-radius:18px;background:#fff;padding:22px}
.pl-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.pl-kind{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--blue);background:var(--blue-soft);padding:3px 9px;border-radius:999px}
.pl-head h2{font:800 20px/1.3 var(--head);color:#0A1433;margin:8px 0 0}
.pl-voice-wrap{display:flex;gap:8px;align-items:center}
.pl-voice{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-size:13.5px;font-weight:600;color:#55617E;cursor:pointer}
.pl-voice svg{width:16px;height:16px}
.pl-voice.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.pl-rate select{border:1.5px solid var(--border);border-radius:999px;padding:8px 10px;font-size:13px;background:#fff}
/* A Ghosla-hosted lecture video, above the slides. 16:9 and full width
   of the stage, with no chrome of its own — the frame is the lesson, not
   a thing sitting on somebody else's site. */
.pl-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0A1433;margin-bottom:12px}
.pl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* The poster that stands in for the video until it is asked for. It is
   a button, not a thumbnail with a click handler, so it is reachable
   from the keyboard and announces itself. */
.pl-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0A1433;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.pl-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.pl-play-ic{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--blue,#1D5BF5);color:#fff;font-size:26px;padding-left:5px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pl-play-t{position:relative;color:#fff;font-weight:700;font-size:.95rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pl-play:hover .pl-play-ic,.pl-play:focus-visible .pl-play-ic{transform:scale(1.06)}
/* The credit under a course video. Open-licence work is credited even
   where the student is given no link to follow. */
.pl-credit{margin:0 0 18px;font-size:.82rem;color:var(--muted)}
.pl-stage{border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,#F7FAFF,#fff);padding:28px;min-height:280px}
.pl-stage h3{font:800 22px/1.3 var(--head);color:#0A1433;margin:0 0 16px}
.pl-stage ul{margin:0;padding-left:22px;display:grid;gap:11px}
.pl-stage li{font-size:16px;line-height:1.55;color:#33405F}
.pl-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.pl-nav span{font-size:13.5px;color:#6B7693}
.pl-read{max-height:62vh;overflow:auto;padding-right:10px}
.pl-read h3{font:800 18px/1.3 var(--head);color:#0A1433;margin:20px 0 8px}
.pl-read p{font-size:15.5px;line-height:1.65;color:#33405F;margin:0 0 12px}
.pl-read pre{background:#0D1733;color:#E6ECFB;padding:14px 16px;border-radius:10px;overflow:auto;font-size:13.5px}
.pl-read ul{padding-left:22px;display:grid;gap:8px;margin:0 0 12px}
.pl-end{height:1px}
.pl-q{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.pl-q b{display:block;font-size:15.5px;line-height:1.45;color:#0F1A3C;margin-bottom:10px}
.pl-opt{display:block;width:100%;text-align:left;padding:10px 13px;margin-bottom:7px;border:1.5px solid var(--border);border-radius:10px;background:#fff;font-size:14.5px;color:#33405F;cursor:pointer}
.pl-opt:hover{border-color:var(--blue)}
.pl-opt.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}
.pl-opt.right{border-color:var(--green);background:#E7F7EE}
.pl-opt.wrong{border-color:var(--pink);background:#FDEBF1}
.pl-why{font-size:13.5px;color:#55617E;background:#F4F7FC;border-radius:8px;padding:9px 12px;margin:8px 0 0}
.pl-brief{font-size:15.5px;line-height:1.6;color:#33405F}
.pl-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pl-steps label{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:#33405F;cursor:pointer}
.pl-steps input{margin-top:4px;width:17px;height:17px;flex:none}
.pl-take{margin-top:18px;background:#F4F8FF;border:1px solid #DCE7FA;border-radius:12px;padding:14px 16px}
.pl-take b{display:block;font-size:14px;color:#0A1433;margin-bottom:8px}
.pl-take ul{margin:0;padding-left:20px;display:grid;gap:7px;font-size:14.5px;color:#39456A}
.pl-lock{text-align:center;padding:48px 20px;color:#55617E}
.pl-lock b{display:block;font-size:17px;color:#0A1433;margin-bottom:6px}
.pl-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.pl-msg{font-size:14px;color:#55617E;margin:0}
.pl-buy{display:block;text-align:center;margin-top:14px;font-size:14px;color:var(--blue);font-weight:600}
@media (max-width:900px){
  .pl-wrap{grid-template-columns:1fr}
  .pl-rail{position:static;max-height:260px;order:2}
  .pl-main{order:1;padding:16px}
  .pl-stage{padding:18px}
}

.mc-free{color:var(--green)}
.cprice .mc-free{color:var(--green)}