/* mbaakliny.com v3: /ai-training/ (tools catalogue + training form) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hero */
.thero{padding-bottom:56px}
.thero .kick{margin-top:28px;color:var(--violet)}
.thero h1{max-width:13ch}
.tstats{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.tstats .stat{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:20px;padding:16px 22px;min-width:132px;display:flex;flex-direction:column;gap:4px}
.tstats .n{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1}
.tstats .l{font-family:var(--mono);font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}

/* filter bar (revealed by JS; without JS every category is simply shown) */
.tools{padding:0 var(--edge) 110px;scroll-margin-top:84px}
.tbar{position:sticky;top:88px;z-index:20;max-width:var(--maxw);margin:0 auto 28px}
.tfilters{display:flex;gap:4px;background:#19191B;padding:5px;border-radius:999px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;box-shadow:0 16px 40px -22px rgba(11,11,12,.55)}
.tfilters::-webkit-scrollbar{display:none}
.tbar::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:80px;border-radius:0 999px 999px 0;background:linear-gradient(90deg,rgba(25,25,27,0),#19191B 75%);pointer-events:none;opacity:0;transition:opacity .3s}
.tbar.more::after{opacity:1}
.tfilters button{all:unset;box-sizing:border-box;cursor:pointer;flex:none;white-space:nowrap;gap:7px;padding:0 14px;border-radius:999px;font-size:14px;min-height:44px;display:inline-flex;align-items:center;color:var(--dimnight);transition:background .35s,color .35s}
.tfilters button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:500}
.tfilters button .n{font-family:var(--mono);font-size:11px;opacity:.6}
.tfilters button:hover{color:var(--paper)}
.tfilters button[aria-pressed="true"]:hover{color:var(--ink)}
.tfilters button:focus-visible{outline:2px solid #A99FFF;outline-offset:-3px}

/* catalogue: one bento grid per category, the category itself is the anchor tile */
.tcat{max-width:var(--maxw);margin:0 auto 48px;scroll-margin-top:160px}
.tcat[hidden]{display:none}
.tcat.show .tgrid > li{animation:rise .6s var(--ease) both}
.tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tgrid > li{display:flex;min-width:0}
.thead{grid-column:span 2;border-radius:var(--r);padding:30px;flex-direction:column;justify-content:flex-end;min-height:220px;position:relative;overflow:hidden}
.thead .eyebrow{color:inherit;opacity:.75;margin-bottom:auto;padding-bottom:28px}
.thead h2{font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.04;letter-spacing:-.045em;margin:0}
.thead p{font-size:15px;line-height:1.55;margin:12px 0 0;opacity:.85;max-width:46ch}
.thead.dark{background:var(--night);color:var(--paper)}
.thead.accent{background:linear-gradient(140deg,var(--violet),#6A4BFF 60%,#3A2BD9);color:#fff}
.thead.teal{background:linear-gradient(140deg,#0A6B64,#0C7F77 60%,#085A54);color:#fff}
.thead::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-110px;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);pointer-events:none}

.tool{flex:1;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:22px 22px 20px;min-height:200px}
.tool:hover{color:var(--ink);border-color:#CFCBFF}
.tool .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.tool .mark{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;transition:transform .5s var(--ease)}
.tool .mark.v{background:var(--violetSoft);color:var(--violet)}
.tool .mark.t{background:#E3F6F4;color:var(--tealDeep)}
.tool .mark.k{background:var(--ink);color:var(--paper)}
.tool:hover .mark{transform:rotate(-10deg) scale(1.08)}
.tool .go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink2);transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.tool:hover .go{background:var(--violet);border-color:var(--violet);color:#fff;transform:translate(2px,-2px)}
.tool h3{font-size:19px;font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:0}
.tool p{font-size:14px;line-height:1.55;color:var(--mute);margin:8px 0 0;flex:1}
.tool .url{font-family:var(--mono);font-size:12px;color:var(--violet);margin-top:18px;overflow-wrap:anywhere}
.tool:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

@media (max-width:1020px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .tgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .thead{grid-column:auto;min-height:0;padding:26px}
  .tool{min-height:0;display:grid;grid-template-columns:40px minmax(0,1fr) 34px;column-gap:14px;padding:18px}
  .tool .top{display:contents}
  .tool .mark{grid-column:1;grid-row:1 / span 3}
  .tool .go{grid-column:3;grid-row:1}
  .tool h3{grid-column:2;grid-row:1;align-self:center}
  .tool p{grid-column:2 / span 2;grid-row:2;margin-top:6px}
  .tool .url{grid-column:2 / span 2;grid-row:3;margin-top:10px}
  .tstats{gap:8px;margin-top:36px}
  .tstats .stat{flex:1 1 0;min-width:0;padding:14px 14px}
  .tbar{top:84px;margin-bottom:20px}
  .thero{padding-top:140px}
}

/* training form zone */
.tzone{border-radius:40px;margin:0 clamp(8px,1.5vw,16px) 40px;overflow:hidden;position:relative;padding:110px var(--edge) 120px}
.tzone .z1{width:520px;height:520px;background:#5B4BFF;opacity:.35;top:-220px;left:-160px;animation:drift3 22s ease-in-out infinite alternate}
.tcontact{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start}
.tcopy .eyebrow{margin-bottom:22px}
.tcopy .lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#C9C9C4;margin:24px 0 0;max-width:46ch}
.fcard{padding:clamp(22px,3.4vw,40px);color:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1 / -1}
.field label{display:block;font-size:14px;font-weight:500;color:var(--ink2);margin-bottom:8px}
.field input,.field textarea{width:100%;min-height:52px;background:#FAFAF8;border:1px solid #D6D6D1;border-radius:14px;color:var(--ink);font:inherit;font-size:16px;line-height:1.5;padding:13px 16px;transition:border-color .25s,box-shadow .25s,background .25s}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:#B9B9B3}
.field input:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--violet);box-shadow:0 0 0 4px rgba(75,59,255,.18)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.field.invalid label{color:#B42318}
.field.invalid input,.field.invalid textarea{border-color:#D92D20;background:#FFF6F5;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.form .btn{min-width:150px;justify-content:center}
.form .btn:disabled{opacity:.65;cursor:wait;transform:none}
.form-err{grid-column:1 / -1;display:none;margin:0;font-size:15px;line-height:1.5;color:#912018;background:#FEF3F2;border:1px solid #FECDCA;border-radius:14px;padding:14px 16px}
.form-err a{color:#912018;font-weight:600}
.form-ok{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.25;color:var(--ink);padding:24px 0 24px 58px;position:relative;animation:rise .6s var(--ease) both}
.form-ok::before{content:"";position:absolute;left:0;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:#E7F6EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F8A55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/20px no-repeat}
.form-ok:focus{outline:none}

@media (max-width:900px){.tcontact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}.tzone{padding:80px var(--edge) 90px;border-radius:32px}.form .btn{width:100%}}