/* ===== TRAINING · SHARED DESIGN SYSTEM ===== */

.tr-page{background:var(--c-ink)}
.va-accent{color:var(--c-primary);text-shadow:0 0 40px rgba(132,189,0,.25)}
.va-breadcrumb{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--c-grey-2);margin-bottom:28px;opacity:0;animation:fadeUp .7s var(--ease-out-expo) .1s forwards}
.va-breadcrumb a{transition:var(--transition)}
.va-breadcrumb a:hover{color:var(--c-primary)}
.va-breadcrumb__current{color:var(--c-grey)}

/* ---------- HERO ---------- */
.tr-hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:160px 0 100px;overflow:hidden}
.tr-hero__wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 78% 35%, rgba(132,189,0,.08) 0%, transparent 70%),radial-gradient(ellipse 50% 50% at 12% 70%, rgba(132,189,0,.04) 0%, transparent 70%)}
.tr-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(132,189,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(132,189,0,.035) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 70%)}
.tr-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.tr-hero__left{max-width:560px}
.tr-hero__eyebrow{opacity:0;animation:fadeUp .7s var(--ease-out-expo) .2s forwards}
.tr-hero__title{font-family:var(--font-display);font-size:clamp(34px,4.4vw,56px);font-weight:800;color:var(--c-white);line-height:1.1;letter-spacing:-.03em;margin-bottom:22px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .3s forwards}
.tr-hero__sub{font-size:18px;line-height:1.7;color:var(--c-grey);max-width:520px;margin-bottom:34px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .45s forwards}
.tr-hero__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:28px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .6s forwards}
.tr-hero__badges{display:flex;flex-wrap:wrap;gap:10px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .75s forwards}
.tr-hero__right{opacity:0;animation:fadeUp 1s var(--ease-out-expo) .55s forwards}

/* ---------- HERO VIDEO ---------- */
.tr-video{position:relative;border:1px solid var(--c-line);border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(132,189,0,.06)}
.tr-video__media{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tr-video__tag{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--c-white);background:rgba(14,17,22,.6);border:1px solid var(--c-line);padding:6px 12px;border-radius:100px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tr-video__tag .svc-build__dot,.tr-video__dot{width:7px;height:7px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 10px var(--c-primary-glow);animation:livePulse 1.6s ease-in-out infinite}

/* ---------- EVERY PROGRAMME INCLUDES ---------- */
.tr-includes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.tr-include{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--radius-lg);background:rgba(20,24,31,.6);border:1px solid var(--c-line);transition:border-color .4s ease,transform .4s ease}
.tr-include:hover{border-color:rgba(132,189,0,.28);transform:translateY(-4px)}
.tr-include__ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(132,189,0,.08);border:1px solid rgba(132,189,0,.2)}
.tr-include__h{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--c-white)}
.tr-include__d{font-size:14px;line-height:1.6;color:var(--c-grey)}
.reveal-stagger.visible .tr-include{opacity:1;transform:translateY(0)}
.reveal-stagger .tr-include{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.reveal-stagger.visible .tr-include:nth-child(2){transition-delay:.1s}
.reveal-stagger.visible .tr-include:nth-child(3){transition-delay:.2s}

/* ---------- PROGRAMMES GRID (reuses .glass-card) ---------- */
.tr-prog{text-align:left}
.tr-prog .container{display:flex;flex-direction:column}
.tr-prog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.tr-prog__grid .glass-card{display:flex;flex-direction:column}
.glass-card__who{display:block;margin-top:auto;padding-top:14px;font-family:var(--font-mono);font-size:11px;color:var(--c-grey-2);border-top:1px solid var(--c-line);line-height:1.5}

/* ---------- PROGRESSIVE LADDER ---------- */
.tr-ladder{text-align:left}
.tr-ladder .container{display:flex;flex-direction:column}
.tr-ladder__track{display:flex;align-items:stretch;gap:0;margin-top:36px}
.tr-rung{flex:1;display:flex;flex-direction:column;gap:10px;padding:26px 22px;border-radius:var(--radius-lg);background:rgba(20,24,31,.55);border:1px solid var(--c-line);transition:border-color .4s ease,transform .4s ease}
.tr-rung:hover{border-color:rgba(132,189,0,.3);transform:translateY(-4px)}
.tr-rung__stage{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--c-primary)}
.tr-rung__codes{display:flex;flex-wrap:wrap;gap:8px}
.tr-rung__code{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--c-white);padding:6px 12px;border-radius:8px;background:rgba(132,189,0,.08);border:1px solid rgba(132,189,0,.25)}
.tr-rung__name{font-size:14px;color:var(--c-grey);line-height:1.5}
.tr-rung__arrow{align-self:center;flex-shrink:0;color:var(--c-primary);font-size:20px;padding:0 14px}
.tr-design{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 26px;border-radius:var(--radius);background:rgba(132,189,0,.04);border:1px solid rgba(132,189,0,.18)}
.tr-design__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary)}
.tr-design__text{font-size:15px;color:var(--c-grey);line-height:1.6;flex:1;min-width:240px}

/* programme credential tag */
.tr-prog__grid .glass-card{position:relative}
.tr-prog__cred{position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--c-primary);padding:4px 9px;border:1px solid rgba(132,189,0,.3);border-radius:100px;background:rgba(132,189,0,.08)}

/* ---------- HERO · CERTIFICATE COVER (AI Certs) ---------- */
.tr-hero__partner{font-size:14px;color:var(--c-grey-2);margin-top:28px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .7s forwards}
.tr-hero__partner span{font-family:var(--font-display);font-weight:700;color:var(--c-white)}
.tr-cert{border:1px solid var(--c-line);border-radius:var(--radius-lg);background:rgba(20,24,31,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(132,189,0,.05);overflow:hidden}
.tr-cert__head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--c-line);background:rgba(14,17,22,.5);font-family:var(--font-mono);font-size:12px;color:var(--c-grey)}
.tr-cert__head .tr-video__dot{width:7px;height:7px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 10px var(--c-primary-glow);animation:livePulse 1.6s ease-in-out infinite}
.tr-cert__body{padding:44px 36px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.tr-cert__seal{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.tr-cert__seal svg{position:relative;z-index:1}
.tr-cert__seal-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(132,189,0,.4);animation:trSpin 22s linear infinite}
@keyframes trSpin{to{transform:rotate(360deg)}}
.tr-cert__disc{position:absolute;inset:14px;border-radius:50%;background:rgba(132,189,0,.08);border:1px solid rgba(132,189,0,.3);box-shadow:0 0 30px rgba(132,189,0,.15)}
.tr-cert__title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--c-white)}
.tr-cert__title span{color:var(--c-primary)}
.tr-cert__formats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tr-cert__fmt{font-family:var(--font-mono);font-size:11px;color:var(--c-grey);padding:6px 13px;border:1px solid var(--c-line);border-radius:100px;background:rgba(132,189,0,.04)}
.tr-cert__foot{padding:13px 20px;border-top:1px solid var(--c-line);background:rgba(14,17,22,.4);text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--c-primary)}

/* ---------- LEARNING TRACKS ---------- */
.tr-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.tr-tracks .glass-card{display:flex;flex-direction:column}

/* ---------- ROLE-BASED PORTFOLIO ---------- */
.tr-port{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.tr-port-card{padding:32px;border-radius:var(--radius-lg);background:rgba(20,24,31,.6);border:1px solid var(--c-line);transition:border-color .4s ease,transform .4s ease}
.tr-port-card:hover{border-color:rgba(132,189,0,.28);transform:translateY(-4px)}
.tr-port-card__tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary);padding:5px 12px;border:1px solid rgba(132,189,0,.3);border-radius:100px;background:rgba(132,189,0,.05);margin-bottom:16px}
.tr-port-card__h{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--c-white);margin-bottom:12px}
.tr-port-card__d{font-size:14px;line-height:1.65;color:var(--c-grey);margin-bottom:18px}
.tr-port-cats{display:flex;flex-wrap:wrap;gap:8px}
.tr-port-cat{font-family:var(--font-mono);font-size:11px;color:var(--c-grey);padding:6px 12px;border:1px solid var(--c-line);border-radius:8px;background:rgba(132,189,0,.04)}
.tr-roles{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tr-role{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--c-grey);padding:11px 17px;border:1px solid var(--c-line);border-radius:100px;background:rgba(20,24,31,.6);transition:var(--transition)}
.tr-role::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 8px var(--c-primary-glow);flex-shrink:0}
.tr-role:hover{color:var(--c-white);border-color:rgba(132,189,0,.35);transform:translateY(-2px)}
.tr-roles__note{margin-top:20px;font-size:14px;color:var(--c-grey-2);font-style:italic;max-width:680px}

/* ---------- CERTIFICATION DOMAINS (cyber) ---------- */
.tr-domains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.tr-domain{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:var(--radius-lg);background:rgba(20,24,31,.6);border:1px solid var(--c-line);transition:border-color .4s ease,transform .4s ease}
.tr-domain:hover{border-color:rgba(132,189,0,.28);transform:translateY(-4px)}
.tr-domain__ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(132,189,0,.08);border:1px solid rgba(132,189,0,.2)}
.tr-domain__h{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--c-white)}
.tr-domain__list{display:flex;flex-direction:column;gap:9px}
.tr-domain__item{display:flex;gap:10px;font-size:13px;line-height:1.45;color:var(--c-grey)}
.tr-domain__item::before{content:'';flex-shrink:0;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 6px var(--c-primary-glow)}
.reveal-stagger.visible .tr-domain{opacity:1;transform:translateY(0)}
.reveal-stagger .tr-domain{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.reveal-stagger.visible .tr-domain:nth-child(1){transition-delay:.04s}
.reveal-stagger.visible .tr-domain:nth-child(2){transition-delay:.1s}
.reveal-stagger.visible .tr-domain:nth-child(3){transition-delay:.16s}
.reveal-stagger.visible .tr-domain:nth-child(4){transition-delay:.22s}
.reveal-stagger.visible .tr-domain:nth-child(5){transition-delay:.28s}
.reveal-stagger.visible .tr-domain:nth-child(6){transition-delay:.34s}

/* ---------- BICSI CREDENTIALS (badges) ---------- */
.tr-creds-sec{text-align:left}
.tr-creds-sec .container{display:flex;flex-direction:column}
.tr-creds{display:flex;flex-direction:column;gap:34px;margin-top:32px}
.tr-cred-group__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-grey-2);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.tr-cred-group__label::after{content:'';flex:1;height:1px;background:var(--c-line)}
.tr-cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tr-cred{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--radius);background:rgba(20,24,31,.6);border:1px solid var(--c-line);transition:border-color .4s ease,transform .4s ease}
.tr-cred:hover{border-color:rgba(132,189,0,.32);transform:translateY(-3px)}
.tr-cred__mark{flex-shrink:0;width:56px;height:62px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--c-ink);background:linear-gradient(145deg,#9ad400,#6FA000);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 18px rgba(132,189,0,.25)}
.tr-cred__mark--flag{background:linear-gradient(145deg,#b6e84a,#84BD00);box-shadow:0 0 26px rgba(132,189,0,.4)}
.tr-cred__body{min-width:0}
.tr-cred__name{font-size:14px;font-weight:600;color:var(--c-white);line-height:1.3;margin-bottom:4px}
.tr-cred__note{font-size:12px;color:var(--c-grey);line-height:1.5}
.tr-cred__flagtag{display:inline-block;margin-top:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary)}

/* ---------- RECOGNITION STRIP ---------- */
.tr-recog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.tr-recog__item{padding:30px 24px;border-radius:var(--radius-lg);background:rgba(20,24,31,.5);border:1px solid var(--c-line);text-align:center}
.tr-recog__num{display:block;font-family:var(--font-mono);font-size:clamp(28px,3.6vw,42px);font-weight:700;color:var(--c-primary);line-height:1;margin-bottom:10px;text-shadow:0 0 30px rgba(132,189,0,.25)}
.tr-recog__label{font-size:13px;color:var(--c-grey);line-height:1.5}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
    .tr-cred-grid{grid-template-columns:repeat(2,1fr)}
    .tr-recog{grid-template-columns:1fr;gap:14px}
    .tr-hero{padding:130px 0 70px;min-height:auto}
    .tr-hero__inner{grid-template-columns:1fr;gap:40px}
    .tr-hero__left{max-width:none}
    .tr-includes{grid-template-columns:1fr}
    .tr-prog__grid{grid-template-columns:repeat(2,1fr)}
    .tr-ladder__track{flex-direction:column;gap:12px}
    .tr-rung__arrow{transform:rotate(90deg);padding:0}
}
    .tr-tracks{grid-template-columns:repeat(2,1fr)}
    .tr-port{grid-template-columns:1fr}
    .tr-domains{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    .tr-prog__grid{grid-template-columns:1fr}
    .tr-cred-grid{grid-template-columns:1fr}
    .tr-tracks{grid-template-columns:1fr}
    .tr-domains{grid-template-columns:1fr}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    .tr-video__dot,.tr-video__tag .svc-build__dot{animation:none!important}
}
