:root{--paper:#f5f8fc;--ink:#14213d;--ink2:#3c4a66;--mute:#6b7894;--line:#dce3ef;--blue:#2457f5;--blue-d:#1a3fc2;--mark:#ffd23f;--ok:#1f9d6b;--bad:#c8372d;--card:#fff;--grid:rgba(36,87,245,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.6 Figtree,system-ui,sans-serif;color:var(--ink2);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Bricolage Grotesque',Figtree,sans-serif;color:var(--ink);line-height:1.12;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,5.4vw,3.8rem);font-weight:800}h2{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:800}h3{font-size:1.2rem;font-weight:600}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--mark);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.banner{background:var(--ink);color:#fff;text-align:center;padding:8px 16px;font-size:.92rem}
.top{position:sticky;top:0;z-index:20;background:rgba(245,248,252,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font:800 1.15rem 'Bricolage Grotesque',sans-serif;color:var(--ink);text-decoration:none}
.nav{display:flex;align-items:center;gap:6px;flex:1}.nav>a,.dd>summary{padding:8px 12px;border-radius:8px;color:var(--ink2);text-decoration:none;font-weight:500;cursor:pointer;list-style:none}
.nav>a:hover,.dd>summary:hover{background:#e8eefb;color:var(--ink)}.dd>summary::-webkit-details-marker{display:none}.dd>summary::after{content:" ▾";font-size:.8em}
.dd{position:relative}.dd-menu{position:absolute;top:110%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 14px 30px -12px rgba(20,33,61,.25)}
.dd-menu a{display:block;padding:8px 12px;border-radius:6px;color:var(--ink);text-decoration:none}.dd-menu a:hover{background:#e8eefb}
.nav-end{margin-left:auto;display:flex;gap:8px;align-items:center}.nav-end>a:not(.btn){padding:8px 12px;text-decoration:none;font-weight:500;color:var(--ink)}
.burger{display:none;margin-left:auto;font-size:1.4rem;background:none;border:1px solid var(--line);border-radius:8px;padding:2px 10px;color:var(--ink)}
.btn,button.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff!important;border:0;border-radius:10px;padding:11px 20px;font:600 1rem Figtree,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--blue-d)}.btn:active{transform:translateY(1px)}.btn-ghost{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff!important}
.btn-sm{padding:6px 12px;font-size:.88rem;border-radius:8px}.btn-danger{background:var(--bad)}.btn-mark{background:var(--mark);color:var(--ink)!important}.btn-mark:hover{background:#f3c21f}
.btn[disabled]{opacity:.5;cursor:not-allowed}
section{padding:64px 0}.tight{padding:40px 0}.lead{font-size:1.15rem;max-width:56ch}.muted{color:var(--mute)}.center{text-align:center}
/* hero */
.hero{background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/28px 28px;border-bottom:1px solid var(--line);padding:56px 0 48px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--mark) 62% 92%,transparent 92%)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.plot{width:100%;height:auto;background:#fff;border:1.5px solid var(--ink);border-radius:18px 4px 18px 4px;box-shadow:8px 8px 0 var(--ink)}
.plot .curve{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.2s .3s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
/* board picker */
.seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.seg button{font:600 .95rem Figtree;border:1.5px solid var(--ink);background:#fff;color:var(--ink);padding:8px 16px;border-radius:999px;cursor:pointer}
.seg button[aria-selected=true]{background:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{display:inline-block;padding:10px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600}
.chip:hover{border-color:var(--blue);color:var(--blue)}
/* services */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--ink)}.svc>div{padding:26px 28px 26px 0;border-bottom:1px solid var(--line)}.svc>div:nth-child(odd){border-right:1px solid var(--line)}.svc>div:nth-child(even){padding-left:28px}
.svc h3{margin-bottom:.3em}
/* cards, grids */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.card.link{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}.card.link:hover{border-color:var(--blue);transform:translateY(-2px)}
.card img{width:100%;border-radius:10px;aspect-ratio:16/9;object-fit:cover}
.badge{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:#e8eefb;color:var(--blue-d)}.badge.ok{background:#dff5ec;color:#117150}.badge.warn{background:#fff3c7;color:#7a5b00}.badge.bad{background:#fde2df;color:#a02a21}
.price{font:800 2.2rem 'Bricolage Grotesque';color:var(--ink)}.price small{font:500 .9rem Figtree;color:var(--mute)}
.plan.best{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--mark)}.plan ul{padding-left:1.1em;margin:.2em 0 1em}.plan ul li{margin:.25em 0}
.quote{border-left:4px solid var(--mark);padding:2px 0 2px 16px;margin:0}.quote p{color:var(--ink);font-size:1.05rem}.quote cite{font-style:normal;color:var(--mute);font-size:.9rem}
details.faq{border-bottom:1px solid var(--line);padding:14px 0}details.faq summary{font-weight:600;color:var(--ink);cursor:pointer}details.faq div{margin-top:8px}
/* crumbs, lessons */
.crumbs{font-size:.9rem;color:var(--mute);margin-bottom:14px}.crumbs a{color:var(--mute)}
.unit{margin:0 0 22px}.unit h3{border-bottom:2px solid var(--ink);padding-bottom:6px}
.mlist{list-style:none;margin:0;padding:0}.mlist li{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}.mlist a{flex:1;color:var(--ink);font-weight:500;text-decoration:none}.mlist a:hover{color:var(--blue)}
.lock{color:var(--mute);font-size:.85rem}.done{color:var(--ok);font-weight:700}
.reader{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,40px)}.reader img{max-width:100%}.reader iframe,.reader .ratio iframe{width:100%;border:0;border-radius:10px}
.ratio{aspect-ratio:16/9}.ratio iframe{height:100%}.pdfview{height:75vh}
.prose{max-width:72ch}.prose h2,.prose h3{margin-top:1.4em}
.gate{background:#fff;border:2px dashed var(--ink);border-radius:14px;padding:32px;text-align:center}
.bar2{height:8px;background:#e5eaf5;border-radius:99px;overflow:hidden}.bar2>i{display:block;height:100%;background:var(--ok)}
/* forms, notes */
.form{max-width:520px;display:grid;gap:14px}.form.wide{max-width:none}label{font-weight:600;color:var(--ink);display:block;margin-bottom:4px;font-size:.93rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],input[type=url],select,textarea{width:100%;padding:10px 12px;border:1.5px solid #c5cfe3;border-radius:10px;font:inherit;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(36,87,245,.18)}textarea{min-height:110px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex;gap:8px;align-items:center;font-weight:500}.check input{width:auto}
.note{padding:12px 16px;border-radius:10px;margin:0 0 16px;border:1px solid}.note-ok{background:#e6f7ef;border-color:#a7e0c5;color:#0e5b3f}.note-err{background:#fdeceb;border-color:#f3b7b2;color:#8f251d}.note-info{background:#e9effd;border-color:#bccbf5;color:#1d3f9a}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.94rem}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{background:#eef2fa;color:var(--ink);font-weight:700}
.tscroll{overflow-x:auto}.thread{display:grid;gap:12px;max-width:760px}.msg{background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 2px;padding:12px 16px}.msg.staff{background:#eaf0ff;border-color:#c3d2fa;border-radius:12px 12px 2px 12px}.msg small{color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.stat b{display:block;font:800 1.9rem 'Bricolage Grotesque';color:var(--ink)}
/* footer */
.foot{background:var(--ink);color:#c9d3ea;padding:48px 0 0;margin-top:40px}.foot a{display:block;color:#c9d3ea;text-decoration:none;padding:3px 0}.foot a:hover{color:#fff}.foot b{display:block;color:#fff;margin-bottom:8px}.fbrand{font:800 1.2rem 'Bricolage Grotesque'}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:28px}.copy{padding:22px 20px;margin-top:30px;border-top:1px solid #2c3b5f;font-size:.88rem}
/* admin */
body.admin{background:#eef2f9}.ashell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.aside{background:var(--ink);color:#c9d3ea;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.aside .abrand{color:#fff;font:800 1.1rem 'Bricolage Grotesque';padding:6px 10px 14px;display:block;text-decoration:none}.aside h4{margin:16px 10px 4px;font-size:.78rem;color:#8fa0c6;font-weight:600}
.aside a{display:block;padding:7px 10px;border-radius:8px;color:#dbe3f7;text-decoration:none;font-size:.95rem}.aside a:hover{background:#22345e}.aside a.on{background:var(--mark);color:var(--ink);font-weight:700}
.amain{padding:26px clamp(16px,3vw,36px);min-width:0}.amain h1{font-size:1.8rem}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px}
.actions{display:flex;gap:6px;flex-wrap:wrap}.ql{background:#fff}.ql-container{min-height:200px;font-size:1rem}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.svc{grid-template-columns:1fr}.svc>div:nth-child(n){border-right:0;padding:22px 0}.fgrid{grid-template-columns:1fr 1fr}.row2{grid-template-columns:1fr}
.burger{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.nav-end{margin:8px 0 0;flex-wrap:wrap}.dd-menu{position:static;box-shadow:none}
.ashell{grid-template-columns:1fr}.aside{position:static;height:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.plot .curve{stroke-dashoffset:0}}