:root{--plum:#672e45;--plum2:#83405c;--plum3:#a03b68;--plum-d:#3e1a2a;--gold:#b8862a;--gold2:#e2b65c;--cream:#fbf6ee;--ink:#2a2226;--muted:#756a6f;--line:#eadfe4;--green:#2e8a55;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream)}
a{color:var(--plum3)}img{max-width:100%}
.ic{width:18px;height:18px;vertical-align:-3px;flex:none}
.pwrap{max-width:1200px;margin:0 auto;padding:0 20px}
/* nav */
.pnav{position:sticky;top:0;z-index:20;background:rgba(251,246,238,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(103,46,69,.1)}
.pnav-in{display:flex;align-items:center;gap:22px;height:68px}
.pbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--plum)}
.pbrand img{height:38px}.pbrand span{font-family:var(--serif);font-size:20px;letter-spacing:.5px;border-left:1px solid #d9c6cf;padding-left:10px}
.plinks{display:flex;gap:4px;flex:1}
.plinks a{padding:8px 14px;border-radius:20px;text-decoration:none;color:var(--ink);font-weight:500}
.plinks a:hover{background:rgba(103,46,69,.07)}.plinks a.on{background:var(--plum);color:#fff}
.pacct{display:flex;align-items:center;gap:10px}
.pavatar{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:600}
.pavatar span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff}
.pmenu{display:none;background:none;border:0;font-size:24px;color:var(--plum)}
@media(max-width:820px){.pmenu{display:block;margin-left:auto}.plinks,.pacct{display:none}body.pnav-open .plinks,body.pnav-open .pacct{display:flex}.pnav-in{flex-wrap:wrap;height:auto;padding:12px 20px}body.pnav-open .plinks{flex-basis:100%;flex-direction:column}body.pnav-open .pacct{flex-basis:100%;padding-bottom:10px}}
/* buttons */
.pbtn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:30px;background:var(--plum);color:#fff;text-decoration:none;font-weight:600;border:2px solid var(--plum);cursor:pointer;font-size:15px;transition:transform .15s,box-shadow .2s}
.pbtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(103,46,69,.25)}
.pbtn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:var(--gold)}
.pbtn.ghost{background:transparent;color:var(--plum)}
.pbtn.light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff}
.pbtn.sm{padding:7px 16px;font-size:14px}
/* hero */
.phero{position:relative;min-height:600px;color:#fff;overflow:hidden;display:flex;align-items:center}
.hero-scene{position:absolute;inset:0;width:100%;height:100%}
.hs-waves{animation:waves 9s linear infinite}@keyframes waves{to{transform:translateX(-120px)}}
.hs-sunglow{animation:glow 5s ease-in-out infinite;transform-origin:1060px 330px}@keyframes glow{50%{transform:scale(1.08);opacity:.85}}
.hs-birds{animation:birds 14s ease-in-out infinite}@keyframes birds{50%{transform:translate(60px,-14px)}}
.phero-in{position:relative;padding:90px 20px 170px;max-width:1200px;margin:0 auto;width:100%}
.phero .kicker{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);padding:6px 14px;border-radius:20px;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,68px);line-height:1.05;margin:18px 0 14px;max-width:760px;text-shadow:0 2px 20px rgba(62,26,42,.35)}
.phero h1 em{color:#ffd9a0;font-style:italic}
.phero p{font-size:19px;max-width:560px;opacity:.95;margin:0 0 28px}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap}
/* sections */
.psec{padding:70px 20px}
.psec-h{text-align:center;max-width:720px;margin:0 auto 40px}
.psec-h .eyebrow{color:var(--gold);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:13px}
.psec-h h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,44px);margin:8px 0 10px;color:var(--plum-d)}
.psec-h p{color:var(--muted);font-size:17px;margin:0}
.pgrid{display:grid;gap:22px}.pg2{grid-template-columns:repeat(2,1fr)}.pg3{grid-template-columns:repeat(3,1fr)}.pg4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.pg3,.pg4{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.pg2,.pg3,.pg4{grid-template-columns:1fr}}
.pcard{background:#fff;border-radius:20px;padding:26px;box-shadow:0 1px 2px rgba(62,26,42,.05),0 12px 30px rgba(62,26,42,.06);border:1px solid #f0e6ea}
/* stats strip */
.pstats{margin-top:-70px;position:relative;z-index:2}
.pstat{background:#fff;border-radius:18px;padding:22px;text-align:center;box-shadow:0 14px 34px rgba(62,26,42,.12)}
.pstat b{display:block;font-family:var(--serif);font-size:40px;color:var(--plum);font-weight:400;line-height:1.1}
.pstat span{color:var(--muted);font-size:14px}
/* feature tiles */
.pfeat{display:flex;gap:16px;align-items:flex-start}
.pfeat .fi{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;flex:none;color:#fff}
.pfeat .fi .ic{width:26px;height:26px}
.pfeat h3{margin:0 0 4px;font-size:18px}.pfeat p{margin:0;color:var(--muted);font-size:15px}
/* course cards */
.ccard{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;border:1px solid #f0e6ea;box-shadow:0 8px 24px rgba(62,26,42,.06);transition:transform .2s,box-shadow .2s}
.ccard:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(62,26,42,.14)}
.ccard .cc-top{position:relative;height:130px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.ccard .cc-top::after{content:"";position:absolute;right:-30px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12)}
.ccard .cc-top::before{content:"";position:absolute;right:40px;top:-40px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.08)}
.ccard .cc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.2)}
.ccard .cc-ic .ic{width:24px;height:24px}
.ccard .cc-cat{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.9}
.ccard .cc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ccard h3{margin:0;font-size:19px;color:var(--plum-d)}
.ccard p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.ccard .cc-meta{display:flex;gap:14px;font-size:13px;color:var(--muted)}
.pbar{height:8px;border-radius:5px;background:#f1e8ec;overflow:hidden}.pbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--plum3),var(--gold))}
.chip{display:inline-block;padding:3px 10px;border-radius:12px;background:#f6edf1;color:var(--plum);font-size:12px;font-weight:600}
.chip.done{background:#dcf3e4;color:#1d7a46}
/* properties */
.prop{border-radius:20px;overflow:hidden;background:#fff;border:1px solid #f0e6ea;box-shadow:0 8px 24px rgba(62,26,42,.06)}
.prop svg{display:block;width:100%;height:auto}
.prop div{padding:14px 16px}.prop b{display:block;color:var(--plum-d)}.prop span{font-size:13px;color:var(--muted)}
/* band */
.pband{background:linear-gradient(120deg,var(--plum-d),var(--plum) 55%,var(--plum3));color:#fff;border-radius:28px;padding:44px;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.pband::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07)}
.pband h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:0 0 6px}.pband p{margin:0;opacity:.9}
/* apps launcher */
.apphead{background:linear-gradient(120deg,var(--plum-d),var(--plum) 60%,var(--plum3));color:#fff;padding:46px 0 90px}
.apphead h1{font-family:var(--serif);font-weight:400;font-size:40px;margin:6px 0}
.apps{margin-top:-60px}
.app{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:22px;padding:24px;text-decoration:none;color:inherit;border:1px solid #f0e6ea;box-shadow:0 12px 30px rgba(62,26,42,.08);transition:transform .2s,box-shadow .2s;min-height:200px}
a.app:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(62,26,42,.16)}
.app .ai{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;color:#fff}
.app .ai .ic{width:30px;height:30px}
.app h3{margin:0;font-size:20px;color:var(--plum-d)}.app p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.app .go{font-weight:700;color:var(--plum3);display:flex;align-items:center;gap:6px}
.app .badge{position:absolute;top:18px;right:18px;background:var(--gold);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:12px}
.app.soon{opacity:.6;background:#fbf8f9;box-shadow:none}.app.soon .go{color:var(--muted)}
/* login */
.plogin{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1.1fr 1fr}
.plogin .art{position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:50px}
.plogin .art .hero-scene{position:absolute;inset:0}
.plogin .art div{position:relative}.plogin .art h2{font-family:var(--serif);font-weight:400;font-size:40px;margin:0 0 8px}
.plogin .form{display:flex;align-items:center;justify-content:center;padding:40px 20px}
.plogin form{width:100%;max-width:380px}
.plogin label{display:block;font-weight:600;font-size:14px;margin:16px 0 6px}
.plogin input{width:100%;padding:13px 14px;border:1px solid #d9c9d0;border-radius:12px;font:inherit;background:#fff}
.plogin input:focus{outline:3px solid #ecd2dd;border-color:var(--plum2)}
@media(max-width:860px){.plogin{grid-template-columns:1fr}.plogin .art{min-height:220px;padding:24px}}
.pflash{margin:16px 0 0;padding:12px 16px;border-radius:12px}.pflash-ok{background:#dcf3e4;color:#14603a}.pflash-error{background:#fbe1df;color:#8c1d16}.pflash-info{background:#e1ecfa;color:#1d4c88}
/* lessons */
.lesson{max-width:780px;margin:0 auto}
.lesson .lbody{font-size:17px;line-height:1.7}.lesson .lbody h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--plum-d);margin:26px 0 8px}
.lesson .lbody ul{padding-left:22px}.lesson .lbody li{margin:6px 0}
.tip{display:flex;gap:10px;background:#fff7e6;border-left:4px solid var(--gold);padding:14px 16px;border-radius:10px;margin:18px 0;color:#5d4410}
.quiz{background:#fff;border:2px solid #f0e2e8;border-radius:18px;padding:22px;margin-top:28px}
.quiz label.opt{display:flex;gap:10px;align-items:center;border:1px solid #eadfe4;border-radius:12px;padding:12px 14px;margin:8px 0;cursor:pointer;background:#fff}
.quiz label.opt:has(input:checked){border-color:var(--plum3);background:#fbf2f6}
.lnav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap}
.lessonlist{list-style:none;padding:0;margin:0}
.lessonlist li a{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid #f1e8ec;text-decoration:none;color:inherit}
.lessonlist .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f6edf1;color:var(--plum);font-weight:700;flex:none}
.lessonlist .done .n{background:var(--green);color:#fff}
.lessonlist .t{flex:1}.lessonlist small{color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.bdg{text-align:center;padding:14px 8px;border-radius:16px;background:#fff;border:1px solid #f0e6ea;font-size:13px}
.bdg .bi{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 8px;border-radius:50%;background:#efe8eb;color:#b3a7ad}
.bdg.on .bi{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;box-shadow:0 6px 14px rgba(184,134,42,.35)}
.bdg b{display:block;font-size:13.5px}.bdg span{color:var(--muted);font-size:12px}
.board li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f3eaee}
.board .rk{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f6edf1;color:var(--plum);font-weight:700;font-size:13px}
.board li:nth-child(1) .rk{background:var(--gold);color:#fff}
.board .nm{flex:1}.board ul{list-style:none;padding:0;margin:0}
/* footer */
.pfoot{background:var(--plum-d);color:#e9d8df;margin-top:60px}
.pfoot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-top:44px;padding-bottom:24px}
.pfoot-in div{display:flex;flex-direction:column;gap:6px}.pfoot a{color:#f3e4ea;text-decoration:none}.pfoot b{color:#fff;margin-bottom:4px}
.pfoot-logo{height:44px;width:auto;align-self:flex-start}
.pcopy{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;padding-bottom:18px;font-size:13px;opacity:.7}
@media(max-width:700px){.pfoot-in{grid-template-columns:1fr}}
/* admin forms */
.pform label{display:block;font-weight:600;font-size:14px;margin:12px 0 5px}
.pform input[type=text],.pform input[type=number],.pform textarea,.pform select{width:100%;padding:10px 12px;border:1px solid #d9c9d0;border-radius:10px;font:inherit;background:#fff}
.pform textarea{min-height:110px}
.ptable{width:100%;border-collapse:collapse}.ptable th,.ptable td{padding:10px;border-bottom:1px solid #f1e8ec;text-align:left;font-size:14px;vertical-align:top}.ptable th{font-size:12px;text-transform:uppercase;color:var(--muted)}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hs-waves,.hs-sunglow,.hs-birds{animation:none}}
/* certificate */
.cert{max-width:900px;margin:30px auto;background:#fff;border:12px solid #f4ead4;outline:2px solid var(--gold);outline-offset:-22px;padding:60px;text-align:center;border-radius:6px}
.cert img{height:80px}.cert h1{font-family:var(--serif);font-weight:400;font-size:44px;color:var(--plum-d);margin:20px 0 6px}
.cert .who{font-family:var(--serif);font-size:36px;color:var(--plum3);border-bottom:1px solid #e8dbc0;display:inline-block;padding:0 30px 6px;margin:16px 0}
@media print{.pnav,.pfoot,.noprint{display:none!important}body{background:#fff}.cert{margin:0;box-shadow:none}}
.pside{grid-template-columns:2fr 1fr;align-items:start}.pside2{grid-template-columns:1fr 2fr;align-items:start}
@media(max-width:860px){.pside,.pside2{grid-template-columns:1fr}}
@media(max-width:620px){.pstats .pg4{grid-template-columns:repeat(2,1fr)}.pstat b{font-size:30px}}
/* L&D */
.ldhead{padding-bottom:28px}
.ldtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.ldtabs a{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:14px;border:1px solid rgba(255,255,255,.25)}
.ldtabs a.on,.ldtabs a:hover{background:#fff;color:var(--plum)}
.ldwrap{margin-top:24px}
.kpi{display:flex;gap:14px;align-items:center}
.kpi .ki{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;color:#fff;flex:none}.kpi .ki .ic{width:24px;height:24px}
.kpi b{display:block;font-size:28px;font-family:var(--serif);font-weight:400;color:var(--plum-d);line-height:1.1}.kpi span{color:var(--muted);font-size:13.5px}
.task{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #f1e8ec;text-decoration:none;color:inherit}
.task .ti{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff;flex:none}
.task .tt{flex:1}.task small{color:var(--muted)}
.st{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700}
.st-completed{background:#dcf3e4;color:#1d7a46}.st-overdue{background:#fbe1df;color:#a32a20}.st-due{background:#fff1d1;color:#8a5a00}
.st-booked{background:#e1ecfa;color:#1d4c88}.st-attended{background:#dcf3e4;color:#1d7a46}.st-absent{background:#fbe1df;color:#a32a20}
.ring{--p:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--plum3) calc(var(--p)*1%),#f1e8ec 0);display:grid;place-items:center;margin:0 auto}
.ring span{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:28px;color:var(--plum-d)}
.matrix{border-collapse:separate;border-spacing:3px;font-size:13px}
.matrix th{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center;vertical-align:bottom;max-width:90px}
.matrix td.c{width:84px;height:30px;border-radius:6px;text-align:center;font-size:11.5px;font-weight:700}
.m-completed{background:#cdeedb;color:#14603a}.m-overdue{background:#f9d3cf;color:#8c1d16}.m-due{background:#fff0c9;color:#7a5300}.m-na{background:#f4f0f2;color:#b5aab0}
.chart2 .grid{stroke:#eee6ea}.chart2 .ax{font-size:11px;fill:#7a7275}.chart2 .bar{fill:#a03b68}.chart2 .val{font-size:11px;fill:#3b3236;font-weight:600}
.hb{display:grid;grid-template-columns:minmax(120px,40%) 1fr 48px;gap:10px;align-items:center;margin:8px 0;font-size:14px}
.hb .tr{height:12px;border-radius:6px;background:#f3eef0;overflow:hidden}.hb .tr i{display:block;height:100%;border-radius:6px;background:var(--plum3)}
.hb .tr i.g{background:#2e8a55}.hb .tr i.r{background:#c0392b}
.stars{color:var(--gold);letter-spacing:2px}
.demo-flag{display:inline-flex;gap:8px;align-items:center;background:#fff7e6;border:1px dashed var(--gold);color:#6b4b0e;padding:8px 14px;border-radius:12px;font-size:14px}
.pform .row{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}@media(max-width:700px){.pform .row{grid-template-columns:1fr}}
.qedit{border:1px solid #eadfe4;border-radius:14px;padding:14px;margin:10px 0;background:#fcfafb}
.vid{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;margin-bottom:18px;background:#000}.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}