/* ===== AI VIDEOS & DOCUMENTATION · PLATFORM PAGE (calm / editorial) ===== */

.av-page{background:var(--c-ink)}
.va-accent{color:var(--c-primary)}
.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)}

/* generous section rhythm */
.av-page .section{padding:150px 0}

/* ---------- HERO ---------- */
.av-hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:160px 0 100px;overflow:hidden}
.av-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 15% 70%, rgba(132,189,0,.04) 0%, transparent 70%);
}
.av-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.av-hero__left{max-width:540px}
.av-hero__eyebrow{opacity:0;animation:fadeUp .7s var(--ease-out-expo) .2s forwards}
.av-hero__title{
    font-family:var(--font-display);font-size:clamp(34px,4.4vw,56px);font-weight:700;
    color:var(--c-white);line-height:1.14;letter-spacing:-.025em;margin-bottom:24px;
    opacity:0;animation:fadeUp .8s var(--ease-out-expo) .3s forwards;
}
.av-hero__sub{font-size:19px;line-height:1.6;color:var(--c-grey);max-width:460px;margin-bottom:36px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .45s forwards}
.av-hero__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:30px;opacity:0;animation:fadeUp .8s var(--ease-out-expo) .6s forwards}
.av-hero__partner{font-size:14px;color:var(--c-grey-2);opacity:0;animation:fadeUp .8s var(--ease-out-expo) .75s forwards}
.av-hero__partner span{font-family:var(--font-display);font-weight:700;color:var(--c-white)}
.av-hero__right{opacity:0;animation:fadeUp 1s var(--ease-out-expo) .55s forwards}

/* ---------- STUDIO (before/after) ---------- */
.av-studio{
    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,.45);overflow:hidden;
    transition:transform .4s var(--ease-out-expo);
}
.av-studio__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--c-line);background:rgba(14,17,22,.5)}
.av-studio__label{font-family:var(--font-mono);font-size:12px;color:var(--c-grey-2);letter-spacing:.04em}
.av-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;background:rgba(14,17,22,.6);border:1px solid var(--c-line);border-radius:100px;min-width:170px}
.av-seg__thumb{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:100px;background:rgba(132,189,0,.14);border:1px solid rgba(132,189,0,.4);transform:translateX(100%);transition:transform .45s var(--ease-out-expo)}
.av-studio.is-before .av-seg__thumb{transform:translateX(0)}
.av-seg__btn{position:relative;z-index:1;padding:7px 14px;font-size:13px;font-weight:600;color:var(--c-grey);border-radius:100px;transition:color .3s ease}
.av-seg__btn.is-active{color:var(--c-primary)}

.av-studio__stage{position:relative;height:300px;padding:24px}
.av-raw,.av-out{position:absolute;inset:24px;transition:opacity .55s var(--ease-out-expo),transform .55s var(--ease-out-expo)}
/* before visible */
.av-studio.is-before .av-raw{opacity:1;transform:scale(1);pointer-events:auto}
.av-studio.is-before .av-out{opacity:0;transform:scale(.96);pointer-events:none}
.av-studio.is-after .av-raw{opacity:0;transform:scale(1.02);pointer-events:none}
.av-studio.is-after .av-out{opacity:1;transform:scale(1);pointer-events:auto}

/* raw recording */
.av-raw{display:flex;flex-direction:column}
.av-raw__rec{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--font-mono);font-size:11px;color:#ff8a8a;margin-bottom:12px}
.av-raw__dot{width:9px;height:9px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 10px rgba(255,90,90,.6);animation:avBlink 1.4s ease-in-out infinite}
@keyframes avBlink{0%,100%{opacity:1}50%{opacity:.3}}
.av-raw__screen{flex:1;border-radius:10px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;margin-bottom:14px}
.av-raw__cursor{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--c-grey);top:30%;left:20%;animation:avCursor 5s ease-in-out infinite}
.av-raw__cursor::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.15)}
@keyframes avCursor{0%{top:30%;left:20%}30%{top:60%;left:70%}55%{top:40%;left:45%}80%{top:70%;left:30%}100%{top:30%;left:20%}}
.av-raw__wave{display:flex;align-items:center;gap:3px;height:26px;margin-bottom:10px}
.av-raw__wave span{flex:1;background:rgba(255,255,255,.18);border-radius:2px}
.av-raw__time{height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 14px,transparent 14px 18px);margin-bottom:12px}
.av-raw__tag{font-family:var(--font-mono);font-size:10px;color:var(--c-grey-2);letter-spacing:.04em}

/* outputs bloom */
.av-out{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:10px}
.av-out__card{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    border-radius:12px;background:rgba(14,17,22,.6);border:1px solid var(--c-line);padding:12px 8px;
    opacity:0;transform:translateY(10px) scale(.95);
}
.av-studio.is-after .av-out__card{animation:avBloom .55s var(--ease-out-expo) forwards;animation-delay:calc(var(--i) * .07s + .1s)}
@keyframes avBloom{to{opacity:1;transform:translateY(0) scale(1)}}
.av-out__card--video{grid-column:span 2;grid-row:span 2;background:linear-gradient(150deg,rgba(132,189,0,.12),rgba(20,24,31,.6));border-color:rgba(132,189,0,.3)}
.av-out__card--lang{grid-column:span 2}
.av-out__ico{font-size:20px}
.av-out__name{font-size:11px;font-weight:600;color:var(--c-white);text-align:center}
.av-out__play{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-primary);color:var(--c-ink);box-shadow:0 0 24px rgba(132,189,0,.4)}
.av-out__card--video .av-out__name{font-size:13px}
.av-studio__hint{padding:14px 18px;border-top:1px solid var(--c-line);font-size:13px;color:var(--c-grey-2);text-align:center;background:rgba(14,17,22,.4)}

/* ---------- TRANSFORMATION JOURNEY ---------- */
.av-journey{text-align:left}
.av-journey .container{display:flex;flex-direction:column}
.av-flow{display:flex;align-items:stretch;gap:0;margin-top:36px}
.av-flow__stage{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:10px;
    padding:26px 22px;border-radius:var(--radius);
    background:rgba(20,24,31,.5);border:1px solid var(--c-line);
    transition:flex .5s var(--ease-out-expo),background .4s ease,border-color .4s ease,transform .4s ease;
    cursor:default;
}
.av-flow__stage:hover,.av-flow__stage:focus-visible{
    flex:1.9;background:rgba(132,189,0,.05);border-color:rgba(132,189,0,.3);transform:translateY(-3px);
    box-shadow:0 14px 40px rgba(0,0,0,.3);outline:none;
}
.av-flow__ico{font-size:22px}
.av-flow__name{font-size:15px;font-weight:600;color:var(--c-white)}
.av-flow__desc{font-size:13px;line-height:1.5;color:var(--c-grey-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out-expo),opacity .4s ease}
.av-flow__stage:hover .av-flow__desc,.av-flow__stage:focus-visible .av-flow__desc{max-height:80px;opacity:1}
.av-flow__link{align-self:center;width:24px;height:1px;background:linear-gradient(90deg,rgba(132,189,0,.4),rgba(132,189,0,.1));flex-shrink:0}

/* ---------- CAPABILITIES BENTO ---------- */
.av-bento-sec{text-align:left}
.av-bento-sec .container{display:flex;flex-direction:column}
.av-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:18px;margin-top:36px}
.av-bento__card{
    position:relative;overflow:hidden;
    grid-column:span 2;
    display:flex;flex-direction:column;gap:10px;
    padding:28px;border-radius:var(--radius-lg);
    background:rgba(20,24,31,.6);border:1px solid var(--c-line);
    transition:transform .4s var(--ease-out-expo),box-shadow .4s ease,border-color .4s ease;
}
.av-bento__card::after{content:'';position:absolute;top:-40%;right:-30%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(132,189,0,.1),transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.av-bento__card:hover{transform:translateY(-5px);border-color:rgba(132,189,0,.28);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.av-bento__card:hover::after{opacity:1}
.av-bento__card--feature{grid-column:span 4;grid-row:span 2}
.av-bento__card--wide{grid-column:span 4}
.av-bento__ico{font-size:26px;transition:transform .4s var(--ease-out-expo)}
.av-bento__card:hover .av-bento__ico{transform:translateY(-3px) scale(1.08)}
.av-bento__title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--c-white)}
.av-bento__card--feature .av-bento__title{font-size:24px}
.av-bento__desc{font-size:14px;line-height:1.6;color:var(--c-grey)}
.av-bento__mock{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:20px}
.av-bento__mock-bar{height:10px;border-radius:5px;background:rgba(132,189,0,.12);border:1px solid rgba(132,189,0,.2)}
.av-bento__mock-bar:nth-child(2){width:80%}
.av-bento__mock-bar:nth-child(3){width:60%}

/* ---------- OUTPUT SHOWCASE ---------- */
.av-showcase{text-align:left}
.av-showcase .container{display:flex;flex-direction:column}
.av-gallery{margin-top:36px;border:1px solid var(--c-line);border-radius:var(--radius-lg);background:rgba(20,24,31,.45);overflow:hidden}
.av-gallery__tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--c-line);background:rgba(14,17,22,.4);flex-wrap:wrap}
.av-tab{padding:10px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--c-grey);transition:var(--transition)}
.av-tab:hover{color:var(--c-white);background:rgba(255,255,255,.03)}
.av-tab.is-active{color:var(--c-ink);background:var(--c-primary);font-weight:600}
.av-gallery__stage{position:relative;min-height:360px;padding:40px;display:flex;align-items:center;justify-content:center}
.av-preview{position:absolute;inset:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--ease-out-expo),visibility .45s}
.av-gallery__stage[data-out="video"] .av-preview--video,
.av-gallery__stage[data-out="guide"] .av-preview--guide,
.av-gallery__stage[data-out="pdf"] .av-preview--pdf,
.av-gallery__stage[data-out="scorm"] .av-preview--scorm,
.av-gallery__stage[data-out="html"] .av-preview--html{opacity:1;visibility:visible;transform:translateY(0)}
.av-preview__cap{font-size:14px;color:var(--c-grey-2);text-align:center;max-width:420px}

/* video preview */
.av-vp{width:440px;max-width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--c-line);background:rgba(14,17,22,.7)}
.av-vp__screen{height:200px;background:linear-gradient(150deg,rgba(132,189,0,.1),rgba(20,24,31,.8));display:flex;align-items:center;justify-content:center}
.av-vp__play{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-primary);color:var(--c-ink);box-shadow:0 0 30px rgba(132,189,0,.4)}
.av-vp__ctrl{display:flex;align-items:center;gap:12px;padding:12px 16px}
.av-vp__time{font-family:var(--font-mono);font-size:11px;color:var(--c-grey-2)}
.av-vp__track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);position:relative}
.av-vp__track span{position:absolute;left:0;top:0;height:100%;width:22%;border-radius:4px;background:var(--c-primary)}

/* guide preview */
.av-doc{width:440px;max-width:100%;border-radius:14px;border:1px solid var(--c-line);background:rgba(14,17,22,.6);padding:26px 28px}
.av-doc__h{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--c-white);margin-bottom:18px}
.av-doc__steps{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.av-doc__steps li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--c-grey)}
.av-doc__steps span{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;color:var(--c-primary);background:rgba(132,189,0,.1);border:1px solid rgba(132,189,0,.3)}
.av-doc__shot{height:90px;border-radius:8px;background:repeating-linear-gradient(135deg,rgba(132,189,0,.07) 0 10px,transparent 10px 20px);border:1px solid rgba(132,189,0,.15)}

/* pdf preview */
.av-sheet{width:300px;max-width:100%;border-radius:8px;background:rgba(245,245,245,.95);padding:28px 26px;display:flex;flex-direction:column;gap:12px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.av-sheet__h{height:16px;width:60%;border-radius:3px;background:#2a2f37}
.av-sheet__l{height:8px;border-radius:3px;background:#c4c8ce}
.av-sheet__l--short{width:70%}
.av-sheet__num{position:absolute;bottom:12px;right:16px;font-family:var(--font-mono);font-size:9px;color:#9aa0a8}

/* scorm preview */
.av-pkg{width:380px;max-width:100%;border-radius:14px;border:1px solid var(--c-line);background:rgba(14,17,22,.6);padding:24px 26px;display:flex;flex-direction:column;gap:14px}
.av-pkg__badge{align-self:flex-start;font-family:var(--font-mono);font-size:11px;color:var(--c-primary);padding:5px 12px;border-radius:100px;background:rgba(132,189,0,.08);border:1px solid rgba(132,189,0,.3)}
.av-pkg__mods{display:flex;flex-direction:column;gap:8px}
.av-pkg__mods li{font-size:14px;color:var(--c-grey);padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--c-line)}
.av-pkg__tag{font-family:var(--font-mono);font-size:11px;color:var(--c-grey-2)}

/* html preview */
.av-browser{width:420px;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--c-line);background:rgba(14,17,22,.7)}
.av-browser__bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid var(--c-line);background:rgba(14,17,22,.5)}
.av-browser__bar span{width:9px;height:9px;border-radius:50%;background:var(--c-grey-2)}
.av-browser__body{padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.av-browser__h{height:18px;width:55%;border-radius:4px;background:rgba(132,189,0,.25)}
.av-browser__p{height:9px;border-radius:3px;background:rgba(255,255,255,.12)}
.av-browser__p--short{width:65%}

/* ---------- WHY PRO SKILLS ---------- */
.av-why__inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.av-why__statement{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);font-weight:700;color:var(--c-white);line-height:1.2;letter-spacing:-.02em;margin-top:8px}
.av-why__p{font-size:17px;line-height:1.7;color:var(--c-grey);margin-bottom:18px}
.av-why__brands{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.av-why__brand{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--c-white);padding:8px 18px;border:1px solid var(--c-line);border-radius:100px;background:rgba(132,189,0,.05)}
.av-why__brand-note{font-size:14px;color:var(--c-grey-2)}

/* ---------- EXPORT TILES ---------- */
.av-export{text-align:left}
.av-export .container{display:flex;flex-direction:column}
.av-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.av-tile{
    position:relative;height:160px;border-radius:var(--radius-lg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    background:rgba(20,24,31,.6);border:1px solid var(--c-line);
    transition:transform .45s var(--ease-out-expo),border-color .4s ease,box-shadow .4s ease;
    animation:avFloat 6s ease-in-out infinite;cursor:default;
}
.av-tile:nth-child(2){animation-delay:1s}
.av-tile:nth-child(3){animation-delay:2s}
.av-tile:nth-child(4){animation-delay:3s}
@keyframes avFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.av-tile:hover,.av-tile:focus-visible{transform:translateY(-10px);border-color:rgba(132,189,0,.35);box-shadow:0 20px 50px rgba(0,0,0,.35);outline:none;animation-play-state:paused}
.av-tile__fmt{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--c-white);letter-spacing:.02em}
.av-tile__use{font-size:12px;color:var(--c-grey-2);text-align:center;max-width:80%;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s var(--ease-out-expo)}
.av-tile:hover .av-tile__use,.av-tile:focus-visible .av-tile__use{opacity:1;transform:translateY(0)}

/* ---------- AT A GLANCE ---------- */
.av-glance{text-align:left}
.av-glance .container{display:flex;flex-direction:column}
.av-spec{margin-top:36px;display:flex;flex-direction:column}
.av-spec__row{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:28px 4px;border-bottom:1px solid var(--c-line);align-items:baseline}
.av-spec__row:last-child{border-bottom:none}
.av-spec__key{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary)}
.av-spec__val{font-size:18px;color:var(--c-white);line-height:1.5}
.reveal-stagger.visible .av-spec__row{opacity:1;transform:translateY(0)}
.reveal-stagger .av-spec__row{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.reveal-stagger.visible .av-spec__row:nth-child(1){transition-delay:.05s}
.reveal-stagger.visible .av-spec__row:nth-child(2){transition-delay:.14s}
.reveal-stagger.visible .av-spec__row:nth-child(3){transition-delay:.23s}
.reveal-stagger.visible .av-spec__row:nth-child(4){transition-delay:.32s}
.reveal-stagger.visible .av-spec__row:nth-child(5){transition-delay:.41s}

/* ---------- FINAL CTA ---------- */
.av-cta{position:relative;overflow:hidden;text-align:center;padding:170px 0}
.av-cta__wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(132,189,0,.1) 0%, transparent 65%)}
.av-cta__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.av-cta__inner{position:relative;z-index:2}
.av-cta__title{font-family:var(--font-display);font-size:clamp(32px,4.4vw,56px);font-weight:700;color:var(--c-white);line-height:1.12;letter-spacing:-.02em;margin-bottom:22px}
.av-cta__sub{font-size:18px;color:var(--c-grey);max-width:560px;margin:0 auto 40px;line-height:1.6}
.av-cta__buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
    .av-hero{padding:130px 0 80px;min-height:auto}
    .av-hero__inner{grid-template-columns:1fr;gap:48px}
    .av-hero__left{max-width:none}
    .av-studio{max-width:520px;margin:0 auto}
    .av-flow{flex-direction:column;gap:12px}
    .av-flow__stage,.av-flow__stage:hover,.av-flow__stage:focus-visible{flex:none;transform:none}
    .av-flow__stage .av-flow__desc{max-height:80px;opacity:1}
    .av-flow__link{width:1px;height:18px;background:linear-gradient(to bottom,rgba(132,189,0,.4),rgba(132,189,0,.1))}
    .av-bento{grid-template-columns:repeat(2,1fr)}
    .av-bento__card,.av-bento__card--feature,.av-bento__card--wide{grid-column:span 2;grid-row:auto}
    .av-why__inner{grid-template-columns:1fr;gap:32px}
    .av-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    .av-page .section{padding:100px 0}
    .av-out__card--video{grid-column:span 2;grid-row:span 1}
    .av-spec__row{grid-template-columns:1fr;gap:8px}
    .av-tiles{grid-template-columns:1fr}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    .av-raw__dot,.av-raw__cursor,.av-tile,.av-cta__canvas{animation:none!important}
    .av-out__card{opacity:1!important;transform:none!important;animation:none!important}
    .av-tile{animation:none!important}
}