/* UX: block accidental text selection on UI chrome; keep it where copying is useful */
*{-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;-moz-user-select:none;user-select:none}
input,textarea,select,[contenteditable],table,.tbl,.copyable,.copyable *{-webkit-user-select:text;-moz-user-select:text;user-select:text}

:root{
  --green-950:#0c2c24;--green-900:#123c32;--green-800:#17493b;--green-700:#1f5c4d;
  --green-600:#2d7a66;--green-500:#3f9b7f;--green-300:#9ccbb9;
  --lime:#7ec73f;--lime-2:#a4d95f;--lime-deep:#4ea03a;
  --ink:#14120e;--ink-2:#5d574d;--ink-3:#988f82;
  --bg:#f6f4ee;--bg-2:#eef1e9;--surface:#ffffff;--surface-2:#fbfaf6;
  --line:#e7e2d8;--line-2:#efe9df;
  --r:14px;--r2:20px;--r3:28px;
  --fn:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --sh-sm:0 1px 2px rgba(20,18,14,.04),0 4px 14px rgba(20,18,14,.05);
  --sh-md:0 2px 6px rgba(20,18,14,.05),0 18px 44px rgba(20,18,14,.08);
  --sh-lg:0 30px 70px rgba(18,60,50,.20),0 8px 24px rgba(18,60,50,.10);
  --sh-green:0 10px 30px rgba(31,92,77,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
html{touch-action:manipulation;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;width:100%;max-width:100%}
body{font-family:var(--fn);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;max-width:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;width:100%;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right))}

/* ---------- ambient background ---------- */
.bgmesh{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bgmesh i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:drift 26s ease-in-out infinite}
.bgmesh i:nth-child(1){width:560px;height:560px;background:radial-gradient(circle,#bfe3d0,transparent 70%);top:-200px;left:-140px}
.bgmesh i:nth-child(2){width:480px;height:480px;background:radial-gradient(circle,#d8eccd,transparent 70%);top:60px;right:-180px;animation-delay:-8s}
.bgmesh i:nth-child(3){width:440px;height:440px;background:radial-gradient(circle,#cfe9da,transparent 70%);top:780px;left:35%;animation-delay:-15s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(46px,-34px) scale(1.08)}66%{transform:translate(-34px,28px) scale(.94)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;background-image:radial-gradient(rgba(20,18,14,.022) 1px,transparent 1px);background-size:4px 4px}

/* ---------- scroll progress ---------- */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--green-600),var(--lime));box-shadow:0 0 12px rgba(126,199,63,.6);transition:width .12s linear}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.7);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s}
header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 28px rgba(20,18,14,.05);background:rgba(246,244,238,.86)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;letter-spacing:-.03em}
.brand img{width:38px;height:38px;object-fit:contain;animation:popIn .7s cubic-bezier(.34,1.56,.64,1) both}
.nav-actions{display:flex;gap:12px;align-items:center}
.lang{position:relative;display:flex;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:3px;box-shadow:var(--sh-sm)}
.lang .ind{position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:52px;background:linear-gradient(135deg,var(--green-700),var(--green-500));border-radius:9px;transition:transform .34s cubic-bezier(.34,1.4,.5,1);box-shadow:0 4px 12px rgba(31,92,77,.3)}
.lang button{position:relative;z-index:1;border:none;background:transparent;padding:8px 0;width:52px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:var(--fn);transition:color .26s}
.lang button.on{color:#fff}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;border-radius:13px;font-weight:600;font-size:14.5px;font-family:var(--fn);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .24s,border-color .24s;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:linear-gradient(135deg,var(--green-700),var(--green-600));color:#fff;border-color:transparent;box-shadow:var(--sh-green)}
.btn.primary:hover{box-shadow:0 16px 38px rgba(31,92,77,.34)}
.btn.primary::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s}
.btn.primary:hover::after{left:150%}
.btn.lg{padding:16px 28px;font-size:15.5px;border-radius:14px}
.btn.lime{background:linear-gradient(135deg,var(--lime),var(--lime-deep));color:#14361a;border-color:transparent;box-shadow:0 10px 28px rgba(78,160,58,.32)}
.btn.ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
.btn.ghost-light:hover{background:rgba(255,255,255,.16)}
.nav-actions .login{min-width:84px}
.nav-actions .primary{min-width:230px}

/* ---------- hero ---------- */
.hero{position:relative;padding:74px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);color:var(--green-700);font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;box-shadow:var(--sh-sm)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(126,199,63,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,199,63,.55)}70%{box-shadow:0 0 0 10px rgba(126,199,63,0)}100%{box-shadow:0 0 0 0 rgba(126,199,63,0)}}
.hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:22px 0 0;text-wrap:balance}
.hero h1 .hl{position:relative;white-space:nowrap;color:var(--green-700)}
.hero h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.34em;background:linear-gradient(90deg,var(--lime),var(--lime-2));border-radius:4px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:hlsweep .7s cubic-bezier(.22,.61,.36,1) .55s forwards;opacity:.55}
@keyframes hlsweep{to{transform:scaleX(1)}}
.hero p.sub{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);margin:22px 0 0;max-width:520px;text-wrap:pretty}
.hero .cta{margin-top:32px;display:flex;gap:13px;flex-wrap:wrap}
.hero .cta .btn{min-width:236px}
.metarow{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sandbox-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:15px;font-weight:700;color:var(--green-700,#1f5c4d);text-decoration:none;padding:9px 16px;border:1px dashed var(--green-500,#3f9b7f);border-radius:12px;background:rgba(126,199,63,.08);transition:.15s}
.sandbox-link:hover{background:rgba(126,199,63,.18);border-style:solid;transform:translateX(3px)}
.meta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.meta .mi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);border:1px solid var(--line)}
.meta .mi svg{width:17px;height:17px;stroke:var(--green-700);fill:none;stroke-width:1.9}
.meta b{color:var(--ink);font-weight:700}

/* entrance for hero text */
.up{opacity:0;transform:translateY(22px);animation:up .85s cubic-bezier(.22,.61,.36,1) forwards}
.up.d1{animation-delay:.06s}.up.d2{animation-delay:.14s}.up.d3{animation-delay:.22s}.up.d4{animation-delay:.3s}.up.d5{animation-delay:.38s}
@keyframes up{to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.5) rotate(-14deg)}100%{opacity:1;transform:none}}

/* ---------- hero product mockup ---------- */
.stage{position:relative;perspective:1600px}
.app{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,.61,.36,1);opacity:0;animation:appIn 1s cubic-bezier(.22,.61,.36,1) .25s forwards}
@keyframes appIn{from{opacity:0;transform:translateY(30px) rotateX(8deg) scale(.96)}to{opacity:1;transform:none}}
.app-top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.app-top .lights{display:flex;gap:6px}
.app-top .lights i{width:11px;height:11px;border-radius:50%}
.app-top .lights i:nth-child(1){background:#f0c0b8}.app-top .lights i:nth-child(2){background:#f2e0a8}.app-top .lights i:nth-child(3){background:#bfe0c4}
.app-top .url{flex:1;display:flex;align-items:center;gap:7px;justify-content:center;font-size:11.5px;color:var(--ink-3);font-weight:600}
.app-top .url svg{width:12px;height:12px;stroke:var(--green-500);fill:none;stroke-width:2}
.app-body{display:grid;grid-template-columns:64px 1fr}
.app-side{background:linear-gradient(180deg,var(--green-700),var(--green-800));padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:7px}
.app-side .logo{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.app-side .logo img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}
.app-side .si{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.62);transition:.2s}
.app-side .si svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
.app-side .si.on{background:rgba(255,255,255,.16);color:#fff}
.app-main{padding:18px 18px 22px;background:var(--surface)}
.jhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.jhead .t{font-weight:700;font-size:15px;letter-spacing:-.01em}
.jhead .t .sub{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:2px}
.chip-sub{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green-700);background:var(--bg-2);border:1px solid var(--line);padding:6px 11px;border-radius:9px}
.chip-sub .d{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.jtable{border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.jrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line-2);font-size:13px}
.jrow:last-child{border-bottom:none}
.jrow.head{background:var(--surface-2);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.stud{display:flex;align-items:center;gap:9px;font-weight:600}
.stud .av{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:7px}
.pill .pd{width:6px;height:6px;border-radius:50%}
.pill.ok{background:#e7f5ec;color:#268a52}.pill.ok .pd{background:#2faf63}
.pill.late{background:#fdf2df;color:#b07d18}.pill.late .pd{background:#e0a92a}
.pill.absent{background:#fbe9e6;color:#c0493a}.pill.absent .pd{background:#d05c49}
.grades{display:flex;gap:5px}
.g{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.g.hi{background:#e7f5ec;color:#1f7a45}.g.mid{background:#fdf2df;color:#a9791a}.g.lo{background:#fbe9e6;color:#bd4636}.g.em{background:var(--bg-2);color:var(--ink-3)}

/* floating cards */
.float{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-md);padding:13px 15px;z-index:3}
.float.pet{left:-34px;bottom:54px;display:flex;align-items:center;gap:11px;animation:floaty 6s ease-in-out infinite}
.flame{position:relative;width:40px;height:40px;border-radius:12px;background:radial-gradient(circle at 50% 70%,#ffd27a,#ff8a3d 55%,#e85d2a);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(232,93,42,.4)}
.flame svg{width:22px;height:22px;animation:flick 1.8s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-1px)}}
.float.pet .pt{font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.float.pet .pn{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;line-height:1.25}
.float.pet .lvl{margin-top:4px;height:5px;width:96px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.float.pet .lvl i{display:block;height:100%;width:68%;border-radius:3px;background:linear-gradient(90deg,var(--lime),var(--lime-deep))}
.float.note{right:-30px;top:40px;display:flex;align-items:center;gap:11px;animation:floaty 7s ease-in-out infinite .8s}
.float.note .ni{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#b78a2e,#d8a93f);display:flex;align-items:center;justify-content:center}
.float.note .ni svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2}
.float.note .nt{font-size:11px;color:var(--ink-3);font-weight:600}
.float.note .nn{font-size:13.5px;font-weight:700}
.float.note .nn b{color:var(--green-600)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---------- section scaffolding ---------- */
section.block{padding:64px 0}
.sec-head{max-width:640px;margin:0 auto 40px;text-align:center}
.sec-eye{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-600)}
.sec-eye::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--lime)}
.sec-eye::after{content:"";width:18px;height:2px;border-radius:2px;background:var(--lime)}
.sec-head h2{font-size:clamp(27px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:14px 0 0;text-wrap:balance}
.sec-head p{color:var(--ink-2);margin:14px auto 0;font-size:16.5px;max-width:520px;text-wrap:pretty}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px,auto);gap:18px}
.cell{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:24px;box-shadow:var(--sh-sm);overflow:hidden;transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s}
.cell:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--green-300)}
.cell .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eaf4ee,#f2f8ec);border:1px solid var(--line-2);margin-bottom:14px;transition:transform .35s}
.cell:hover .ic{transform:scale(1.1) rotate(-5deg)}
.cell .ic svg{width:22px;height:22px;stroke:var(--green-700);fill:none;stroke-width:1.8}
.cell h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.cell p{color:var(--ink-2);font-size:13.8px;margin-top:6px;text-wrap:pretty}
/* spans */
.c-journal{grid-column:span 3}
.c-sched{grid-column:span 3}
.c-att{grid-column:span 2}
.c-parent{grid-column:span 2}
.c-geo{grid-column:span 2}
.c-lang{grid-column:span 3}
.c-roles{grid-column:span 3}
/* journal cell visual */
.mini-grades{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.mini-grades .g{width:30px;height:30px;border-radius:9px;font-size:13px}
/* schedule cell visual */
.weekstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:16px}
.weekstrip .d{text-align:center}
.weekstrip .dl{font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.weekstrip .dc{margin-top:5px;height:46px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line-2);display:flex;flex-direction:column;gap:3px;padding:5px 4px}
.weekstrip .dc i{display:block;height:8px;border-radius:3px;background:linear-gradient(90deg,var(--green-500),var(--green-300));opacity:.85}
.weekstrip .dc i:nth-child(2){background:linear-gradient(90deg,var(--lime),var(--lime-2));width:70%}
.weekstrip .d.today .dc{border-color:var(--green-500);box-shadow:0 0 0 2px rgba(63,155,127,.18)}
/* attendance cell */
.att-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.att-list .ar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600}
.att-list .ar .nm{color:var(--ink-2)}
/* parent cell */
.parent-card{margin-top:14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:13px;padding:12px}
.parent-card .pr{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:4px 0}
.parent-card .pr .s{font-weight:700}
.parent-card .code{display:inline-flex;gap:4px;margin-top:6px}
.parent-card .code b{width:24px;height:30px;border-radius:7px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--green-700)}
/* geo cell */
.geo{position:relative;margin-top:14px;height:96px;border-radius:13px;overflow:hidden;background:linear-gradient(135deg,#e8f1ea,#eef4e6);border:1px solid var(--line-2)}
.geo .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(31,92,77,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,92,77,.07) 1px,transparent 1px);background-size:22px 22px}
.geo .road{position:absolute;height:8px;background:rgba(31,92,77,.12);border-radius:6px}
.geo .road.r1{top:34px;left:-10%;width:120%;transform:rotate(-8deg)}
.geo .road.r2{top:0;bottom:0;left:62%;width:8px;height:auto;transform:rotate(6deg)}
.geo .radius{position:absolute;left:38%;top:46%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(126,199,63,.28),rgba(126,199,63,.05) 70%);border:1.5px solid rgba(78,160,58,.5);transform:translate(-50%,-50%);animation:radiusPulse 3s ease-in-out infinite}
@keyframes radiusPulse{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}}
.geo .pin{position:absolute;left:38%;top:46%;width:22px;height:22px;transform:translate(-50%,-90%);z-index:2}
.geo .pin svg{width:22px;height:22px;fill:var(--green-700);filter:drop-shadow(0 3px 4px rgba(18,60,50,.4))}
/* lang cell */
.langdemo{margin-top:16px;display:flex;align-items:center;gap:14px}
.langdemo .seg{position:relative;display:flex;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:3px}
.langdemo .seg .ind{position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:60px;border-radius:8px;background:linear-gradient(135deg,var(--green-700),var(--green-500));transition:transform .4s cubic-bezier(.34,1.4,.5,1)}
.langdemo .seg b{position:relative;z-index:1;width:60px;text-align:center;padding:8px 0;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:color .3s}
.langdemo .seg b.on{color:#fff}
.langdemo .ph{flex:1;font-size:14px;font-weight:600;color:var(--ink-2);min-height:20px}
/* roles cell */
.roles{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.roles .rl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--green-800);background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:7px 11px}
.roles .rl .rd{width:7px;height:7px;border-radius:50%;background:var(--lime)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:28px 26px;box-shadow:var(--sh-sm);transition:transform .35s,box-shadow .35s}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.step .num{counter-increment:step;font-size:13px;font-weight:800;color:#fff;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--green-700),var(--green-500));display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-green)}
.step .num::before{content:"0" counter(step)}
.step h3{margin-top:16px;font-size:17.5px;font-weight:700;letter-spacing:-.01em}
.step p{margin-top:8px;color:var(--ink-2);font-size:14px;text-wrap:pretty}
.step .line{position:absolute;top:46px;right:-10px;width:20px;height:2px;background:repeating-linear-gradient(90deg,var(--green-300) 0 5px,transparent 5px 9px)}
.steps .step:last-child .line{display:none}

/* ---------- dark CTA ---------- */
.cta-band{position:relative;background:linear-gradient(150deg,var(--green-900),var(--green-800) 55%,var(--green-700));color:#fff;border-radius:var(--r3);padding:64px 48px;text-align:center;overflow:hidden;box-shadow:0 40px 80px rgba(12,44,36,.3)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(126,199,63,.22),transparent 46%),radial-gradient(circle at 84% 86%,rgba(63,155,127,.3),transparent 50%)}
.cta-band .spark{position:absolute;border-radius:50%;background:var(--lime);opacity:.5;animation:rise2 var(--d,9s) linear infinite}
.cta-band>*{position:relative;z-index:1}
.cta-band .sec-eye{color:var(--lime-2)}
.cta-band .sec-eye::before,.cta-band .sec-eye::after{background:var(--lime)}
.cta-band h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;margin-top:14px;text-wrap:balance}
.cta-band p{opacity:.85;margin:16px auto 0;max-width:540px;font-size:17px}
.cta-band .cta{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.cta-band .cta .btn{min-width:210px}
@keyframes rise2{0%{transform:translateY(20px);opacity:0}10%{opacity:.6}90%{opacity:.4}100%{transform:translateY(-120px);opacity:0}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 40px;background:var(--surface);margin-top:64px}
.foot-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand{max-width:340px}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{color:var(--ink-2);font-size:13.5px;text-wrap:pretty}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.foot-col a{display:block;color:var(--ink-2);font-size:14px;font-weight:600;padding:4px 0;transition:color .2s}
.foot-col a:hover{color:var(--green-700)}
.foot-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}

/* ═══ v33.9: новые блоки лендинга ═══ */
.topnav{display:flex;gap:2px;margin-right:auto;margin-left:34px}
.nav-actions .btn{white-space:nowrap}
@media(max-width:1240px){.nav-actions .primary{min-width:0}}
@media(max-width:1120px){.topnav{display:none}}
.topnav a{font-size:14px;font-weight:600;color:var(--ink-2);padding:8px 12px;border-radius:10px;transition:background .2s,color .2s}
.topnav a:hover{background:var(--surface);color:var(--green-700)}
/* для кого */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.who-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:26px;box-shadow:var(--sh-sm)}
.who-card .wt{font-size:18px;font-weight:800;letter-spacing:-.015em}
.who-card .wd{color:var(--ink-2);font-size:14px;margin-top:6px;text-wrap:pretty}
.who-card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.who-card li{display:flex;gap:9px;font-size:13.8px;color:var(--ink);line-height:1.4}
.who-card li::before{content:"";flex:0 0 7px;height:7px;margin-top:7px;border-radius:50%;background:var(--lime)}
.who-card.main{background:linear-gradient(160deg,#f2f8ef,var(--surface) 60%);border-color:var(--green-300)}
/* модули */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mod{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;transition:border-color .25s,transform .25s}
.mod:hover{border-color:var(--green-300);transform:translateY(-3px)}
.mod .mi2{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);border:1px solid var(--line-2);margin-bottom:12px}
.mod .mi2 svg{width:19px;height:19px;stroke:var(--green-700);fill:none;stroke-width:1.9}
.mod h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.mod p{font-size:13.2px;color:var(--ink-2);margin-top:5px;text-wrap:pretty}
.mod .plan{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;color:var(--green-700);background:var(--bg-2);border-radius:6px;padding:3px 7px}
/* безопасность */
.sec-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:stretch}
.sec-lead{background:linear-gradient(150deg,var(--green-900),var(--green-700));color:#fff;border-radius:var(--r2);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;box-shadow:var(--sh-lg)}
.sec-lead h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.sec-lead p{opacity:.85;font-size:15px;margin-top:10px;text-wrap:pretty}
.iso{display:flex;gap:10px;flex-wrap:wrap}
.iso span{flex:1 1 120px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px;font-size:13px;font-weight:600}
.iso span b{display:block;font-size:11px;font-weight:600;opacity:.7;margin-bottom:3px}
.sec-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.sec-item h4{font-size:14.5px;font-weight:700}
.sec-item p{font-size:13px;color:var(--ink-2);margin-top:5px;text-wrap:pretty}
/* тарифы */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:28px 26px;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.plan-card.rec{border:2px solid var(--green-500);box-shadow:var(--sh-md)}
.plan-card .rec-tag{position:absolute;top:-12px;left:26px;background:linear-gradient(135deg,var(--green-700),var(--green-500));color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.plan-card .pname{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--green-700)}
.plan-card .pfor{font-size:13.5px;color:var(--ink-2);margin-top:4px;min-height:40px}
.plan-card .price{margin-top:14px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-card .price b{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan-card .price span{font-size:13.5px;color:var(--ink-2);font-weight:600}
.plan-card .pex{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.plan-card ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.plan-card li{display:flex;gap:9px;font-size:13.8px;line-height:1.4}
.plan-card li svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;stroke:var(--green-600);fill:none;stroke-width:2.4}
.plan-card li.inh{color:var(--ink-2);font-weight:600}
.plan-card .btn{width:100%}
.plans-note{text-align:center;color:var(--ink-2);font-size:13.5px;margin-top:20px;text-wrap:pretty}
/* вопросы */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 20px;transition:border-color .2s}
.faq details[open]{border-color:var(--green-300)}
.faq summary{list-style:none;cursor:pointer;padding:17px 0;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:500;color:var(--green-600);transition:transform .25s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);font-size:14.5px;padding:0 0 18px;margin-top:-4px;text-wrap:pretty}
/* контакты и WhatsApp */
.foot-col a.ico-l{display:flex;align-items:center;gap:8px}
.foot-col a.ico-l svg{width:16px;height:16px;flex:0 0 16px}
.foot-col .addr{color:var(--ink-2);font-size:13.5px;padding:4px 0;max-width:220px}
.foot-legal{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.foot-legal a{color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.foot-trust{margin-top:34px;display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap}
.trust-pills{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.trust-pills li{font-size:13px;font-weight:600;color:var(--green-700);background:var(--bg-2);border:1px solid var(--line);padding:7px 13px;border-radius:999px}
@media (max-width:560px){.foot-trust{gap:14px}.trust-pills li{font-size:12.5px}}
.foot-bottom a{color:var(--ink-2);font-weight:600}
.foot-bottom a:hover{color:var(--green-700)}
.foot-bottom .fb-links{display:flex;gap:16px;flex-wrap:wrap}
.has-wa footer{padding-bottom:96px}
.site-counter{display:flex;align-items:center;justify-content:center;margin-top:16px;min-height:0}
.wa-fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:9px;background:#1f9d55;color:#fff;font-weight:700;font-size:14px;padding:12px 16px 12px 13px;border-radius:999px;box-shadow:0 12px 30px rgba(31,157,85,.35);transition:transform .2s}
.wa-fab:hover{transform:translateY(-2px)}
.wa-fab svg{width:22px;height:22px;fill:#fff}
.btn.wa{background:#1f9d55;color:#fff;border-color:transparent}
.btn.wa svg{width:18px;height:18px;fill:#fff}
@media(max-width:980px){
  .who{grid-template-columns:1fr}
  .mods{grid-template-columns:repeat(2,1fr)}
  .sec-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan-card .pfor{min-height:0}
}
@media(max-width:680px){
  .mods{grid-template-columns:1fr}
  .sec-list{grid-template-columns:1fr}
  .wa-fab span{display:none}
  .wa-fab{padding:13px}
}
.who>*,.mods>*,.plans>*,.sec-grid>*,.sec-list>*{min-width:0}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .hero{padding:48px 0 40px}
  .stage{max-width:560px;margin:0 auto}
  .bento{grid-template-columns:repeat(4,1fr)}
  .c-journal,.c-sched,.c-lang,.c-roles{grid-column:span 4}
  .c-att,.c-parent,.c-geo{grid-column:span 2}
}
@media(max-width:680px){
  .nav{height:62px}
  .nav-actions .primary{display:none}
  .lang button,.lang .ind{width:46px}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%;min-width:0}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .c-journal,.c-sched,.c-att,.c-parent,.c-geo,.c-lang,.c-roles{grid-column:span 1}
  .steps{grid-template-columns:1fr}
  .step .line{display:none}
  .cta-band{padding:46px 24px}
  .cta-band .cta .btn{width:100%;min-width:0}
  .float.pet{left:-8px;bottom:14px;padding:10px 12px}
  .float.note{right:-6px;top:14px;padding:10px 12px}
  .float.pet .lvl{width:70px}
  section.block{padding:48px 0}
  .foot-links{gap:32px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .up,.reveal,.app{opacity:1!important;transform:none!important}
  .bgmesh{display:none}
  .hero h1 .hl::after{transform:scaleX(1)}
}

/* v6.1: images never overflow; notch safe-area; readable surfaces without blur.
   NOTE: we do NOT force min-height on every <button>. Compact segmented controls
   (the Рус/Қаз/Eng switch) have a fixed geometry and a sliding indicator sized to
   it — bumping their height overflowed the header. Only real action buttons and
   form fields get enlarged touch targets. */
img,svg,video,iframe{max-width:100%;height:auto}
@media(pointer:coarse){
  /* Only real action buttons + form fields. Segmented controls (.lang, .rsw, .langbar)
     have fixed geometry with a sliding indicator and must keep their own height. */
  a.btn,.btn,input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px}
  .lang button,.langbar button,.rsw{min-height:0}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header,.nav{background:var(--surface,#fff)!important}
}

/* ═══ v6.1 fix: header crowding on narrow phones ═══
   At 393px the brand + language switch + "Войти" don't fit on one line, so the
   switch slid over the logo. Shrink the switch, hide the wordmark, keep tap sizes. */
@media(max-width:520px){
  .nav{gap:8px}
  .nav-actions{gap:8px}
  .lang{padding:2px}
  .lang button,.lang .ind{width:40px;font-size:12px}
  .lang button{padding:7px 0}
  .brand span{font-size:17px}
  .btn.login{padding:9px 14px;font-size:13.5px}
}
@media(max-width:400px){
  .brand span{display:none}                 /* logo mark only */
  .brand img{width:34px;height:34px}
  .lang button,.lang .ind{width:35px;font-size:11.5px}
  .btn.login{padding:8px 12px;font-size:13px}
}
/* Segmented control keeps its own geometry on touch (indicator is sized to it) */
@media(pointer:coarse){ .lang button{min-height:0} }

/* ═══ v6.3 fix: horizontal overflow on phones ═══
   Root cause: the floating mock-up cards sit at left:-34px / right:-30px, so they
   stick out past .stage and widen the document. overflow-x on <body> doesn't
   contain them once a position:sticky header exists. We clip at the stage itself
   and pull the cards inside on small screens. */
.stage{max-width:100%}
@media(max-width:980px){
  .hero-visual{max-width:100%;overflow:visible}
  .stage{overflow:visible}
}
@media(max-width:680px){
  /* keep the cards fully inside the viewport instead of hanging off the edges */
  .stage{overflow:hidden;border-radius:24px;padding:8px}
  .float.pet{left:6px;bottom:8px}
  .float.note{right:6px;top:8px;max-width:74%}
  .float.note .nn{white-space:normal;line-height:1.25}
}
@media(max-width:520px){
  .float.pet,.float.note{padding:9px 11px;border-radius:13px}
  .float.pet .pn{font-size:13px}
  .float.note .nn{font-size:12.5px}
  .float.note{max-width:78%}
}
/* Hero CTA buttons: min-width:236px overflowed a 360px screen once padding was added */
@media(max-width:680px){
  .hero .cta .btn,.cta-band .cta .btn{min-width:0;width:100%}
  .sandbox-link{width:100%;justify-content:flex-start}
}
/* Grid/flex children default to min-width:auto, which lets long content push the
   track wider than the screen. Reset it only on the layout containers — NOT on *,
   which would break the fixed-width language indicator and grade chips. */
.hero-grid>*,.bento>*,.steps>*,.foot-grid>*{min-width:0}
/* v7.2.2: .hero-grid убран из этого списка. Он висит на том же элементе, что и
   .wrap (<div class="wrap hero-grid">), а max-width:100% при равной специфичности
   стоит ниже .wrap{max-width:1160px} и перебивал его — на экранах шире ~1200px
   hero растягивался на всю ширину (шапка оставалась в колонке). Ограничение
   ширины и так обеспечивает .wrap (width:100%; max-width:1160px), так что
   мобильный overflow-фикс ничего не теряет. */
.bento,.steps,.foot-grid{max-width:100%}
.hero-copy,.hero-visual{min-width:0;max-width:100%}

/* overflow-x:clip doesn't create a scroll container (so position:sticky keeps
   working); hidden does, but is the safe baseline for Safari < 16. */
@supports (overflow-x:clip){ body{overflow-x:clip} }

/* v20.6: тонкая полупрозрачная прокрутка — как в кабинете школы.
   Системная широкая полоса выглядела инородно на светлых страницах. */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;transition:background .18s}
*:hover::-webkit-scrollbar-thumb{background:rgba(120,120,120,.28)}
*:hover::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.5)}
html{scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.3) transparent}

/* v29.6: крупные экраны — телевизор 4K, мониторы 1440p/5K при масштабе 100%.
   Интерфейс свёрстан под ~1920 точек; на 3840 он становился мелким и жался
   узкой полосой посередине. Масштабируем целиком, как «Ctrl +» в браузере:
   на 4K выглядит как на 1920, только чётче. Ноутбуки и обычные мониторы
   (до 2399 точек) не затронуты. */
@media(min-width:2400px){html{zoom:1.25}}
@media(min-width:3200px){html{zoom:1.75}}
@media(min-width:4600px){html{zoom:2.4}}