/* ===== source: css/act-training.css ===== */
/* =========================================================
   ACT TRAINING - awareness / preparedness page
   Scoped to body.act-page so no other page is affected.
   Tokens (colours, fonts, --hdr) come from base.css.
   ========================================================= */

.act-page {
  --act-radius: 12px;
  --act-ease: cubic-bezier(.2, .7, .2, 1);
  --act-shadow: 0 14px 34px rgba(21, 23, 28, .08);
  --act-shadow-lg: 0 20px 44px rgba(21, 23, 28, .14);
}

@media (prefers-color-scheme: dark) {
  .act-page { --act-shadow: 0 14px 34px rgba(0, 0, 0, .35); --act-shadow-lg: 0 20px 44px rgba(0, 0, 0, .5); }
}

.act-page main { overflow-x: clip; }
.act-page .act-sec { padding: 76px 0; scroll-margin-top: calc(var(--hdr) + 12px); }
.act-page .act-sec.alt { background: var(--soft); }
.act-page .act-head { max-width: 720px; margin: 0 0 36px; }
.act-page .act-head.center { margin-inline: auto; text-align: center; }
.act-page .act-kicker {
  display: inline-block; margin: 0 0 10px; font: 800 12px/1 var(--f-head);
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.act-page h2.act-h2 {
  font: 900 clamp(26px, 3.4vw, 40px)/1.12 var(--f-head); letter-spacing: -.01em; margin: 0 0 14px; color: var(--ink);
}
.act-page .act-lead { font-size: 17px; line-height: 1.7; color: var(--mut); margin: 0; }
.act-page .act-p { font-size: 16px; line-height: 1.75; color: var(--mut); margin: 0 0 16px; }
.act-page .act-link { color: var(--red); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s; }
.act-page .act-link:hover { border-color: var(--red); }

/* HERO */
.act-hero {
  position: relative; background: var(--dk); color: #fff; overflow: hidden; isolation: isolate;
  padding: 56px 0 64px;
}
.act-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(215, 25, 31, .38), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(215, 25, 31, .18), transparent 60%);
}
.act-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent);
}
.act-hero .crumb { margin: 0 0 26px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.act-hero .crumb a { color: #fff; text-decoration: none; }
.act-hero .crumb a:hover { text-decoration: underline; }
.act-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: center; }
.act-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font: 700 12px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px;
}
.act-pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.act-pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--red);
  animation: act-ping 2.2s ease-out infinite;
}
@keyframes act-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.act-hero h1 {
  font: 900 clamp(32px, 4.6vw, 56px)/1.05 var(--f-head); letter-spacing: -.015em; margin: 0 0 18px; color: #fff;
}
.act-hero h1 em { font-style: normal; color: #ff5b61; }
.act-hero-p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .82); margin: 0 0 26px; max-width: 560px; }
.act-hero .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.act-hero .btn.o { color: #fff; border-color: rgba(255, 255, 255, .5); }
.act-hero .btn.o:hover { background: #fff; color: var(--ink); }
.act-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 30px; justify-content: start; margin: 0; padding: 0; list-style: none; }
.act-facts li { border-left: 3px solid var(--red); padding-left: 12px; }
.act-facts b { display: block; font: 900 24px/1.1 var(--f-head); }
.act-facts span { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.act-hero-media { position: relative; }
.act-hero-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%;
  border-radius: 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .14);
}
.act-float {
  position: absolute; left: -22px; bottom: 26px; max-width: 250px; padding: 14px 16px; border-radius: 12px;
  background: rgba(12, 13, 16, .88); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.act-float b { display: block; font: 800 13px/1.2 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: #ff5b61; margin-bottom: 4px; }
.act-float span { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .85); }

/* INTRO */
.act-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.act-split.flip .act-split-media { order: -1; }
.act-split-media { position: relative; }
.act-split-media img {
  display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--act-shadow-lg);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.act-split-media::before {
  content: ""; position: absolute; inset: 18px -14px -14px 18px; border: 2px solid var(--red); border-radius: 16px; z-index: -1; opacity: .5;
}
.act-note {
  display: flex; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: var(--act-radius);
  background: var(--soft); border-left: 4px solid var(--red); font-size: 14.5px; line-height: 1.6; color: var(--mut);
}
.act-note b { color: var(--ink); }
.act-sec.alt .act-note { background: var(--card); }

/* INFORMATION */
.act-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.act-aud {
  position: relative; padding: 24px 22px; border-radius: var(--act-radius); background: var(--card); border: 1px solid var(--line);
  transition: transform .3s var(--act-ease), box-shadow .3s var(--act-ease), border-color .3s;
}
.act-aud:hover { transform: translateY(-4px); box-shadow: var(--act-shadow-lg); border-color: rgba(215, 25, 31, .45); }
.act-ico {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px;
  background: rgba(215, 25, 31, .1); color: var(--red);
}
.act-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.act-aud h3, .act-card h3 { font: 800 18px/1.25 var(--f-head); margin: 0 0 8px; color: var(--ink); }
.act-aud p, .act-card p { margin: 0; font-size: 14.8px; line-height: 1.65; color: var(--mut); }
.act-foot-note { margin: 24px 0 0; font-size: 14.5px; color: var(--mut); }

.act-glance { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
.act-dl { margin: 0; border: 1px solid var(--line); border-radius: var(--act-radius); background: var(--card); overflow: hidden; box-shadow: var(--act-shadow); }
.act-dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.act-dl div:last-child { border-bottom: 0; }
.act-dl dt { font: 800 12.5px/1.5 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.act-dl dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.act-before { padding: 26px; border-radius: var(--act-radius); background: var(--dk); color: #fff; }
.act-before h3 { font: 800 19px/1.25 var(--f-head); margin: 0 0 14px; color: #fff; }
.act-tick { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.act-tick li { position: relative; padding-left: 28px; font-size: 14.8px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.act-tick li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--red);
}
.act-tick li::after {
  content: ""; position: absolute; left: 5px; top: 8px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.act-list-light li { color: var(--mut); }

/* FEATURES */
.act-band { background: var(--dk); color: #fff; padding: 76px 0; position: relative; overflow: hidden; }
.act-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(45% 70% at 100% 0%, rgba(215, 25, 31, .3), transparent 65%);
}
.act-band .wrap { position: relative; }
.act-band h2.act-h2 { color: #fff; }
.act-band .act-lead { color: rgba(255, 255, 255, .78); }
.act-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; counter-reset: rung; }
.act-rung {
  position: relative; padding: 28px 26px 30px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  transition: background .3s, transform .3s var(--act-ease);
}
.act-rung + .act-rung { border-left: 0; }
.act-rung:first-child { border-radius: 14px 0 0 14px; }
.act-rung:last-child { border-radius: 0 14px 14px 0; }
.act-rung:hover { background: rgba(255, 255, 255, .09); }
.act-rung .act-ico { background: rgba(215, 25, 31, .22); color: #ff7a7f; }
.act-rung h3 { font: 900 22px/1.2 var(--f-head); margin: 0 0 8px; color: #fff; }
.act-rung p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.act-rung::after {
  counter-increment: rung; content: "0" counter(rung); position: absolute; top: 20px; right: 22px;
  font: 900 34px/1 var(--f-head); color: rgba(255, 255, 255, .08);
}
.act-rung:not(:last-child)::before {
  content: ""; position: absolute; top: 50%; right: -8px; z-index: 2; width: 14px; height: 14px; background: var(--red);
  transform: translateY(-50%) rotate(45deg); border-radius: 3px;
}
.act-law { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.act-law b { color: #fff; }

.act-expect { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: ex; }
.act-expect li { position: relative; padding-left: 58px; counter-increment: ex; }
.act-expect li::before {
  content: counter(ex, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--red); color: #fff; font: 800 14px/1 var(--f-head);
}
.act-expect b { display: block; font: 800 17px/1.3 var(--f-head); color: var(--ink); margin-bottom: 3px; }
.act-expect span { font-size: 15px; line-height: 1.6; color: var(--mut); }

/* CARDS */
.act-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.act-card {
  --mx: 50%; --my: 0%;
  position: relative; padding: 28px 24px 26px; border-radius: var(--act-radius); background: var(--card); border: 1px solid var(--line);
  overflow: hidden; transition: transform .3s var(--act-ease), box-shadow .3s var(--act-ease), border-color .3s;
}
.act-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(215, 25, 31, .12), transparent 70%);
}
.act-card:hover { transform: translateY(-5px); box-shadow: var(--act-shadow-lg); border-color: rgba(215, 25, 31, .45); }
.act-card:hover::before { opacity: 1; }
.act-card .tag {
  position: absolute; top: 18px; right: 18px; font: 900 13px/1 var(--f-head); letter-spacing: .06em; color: var(--red); opacity: .55;
}
.act-card ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.act-card li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.act-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

.act-done { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.act-done-step { padding: 22px; border-radius: var(--act-radius); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--red); }
.act-done-step h3 { font: 800 17px/1.3 var(--f-head); margin: 0 0 8px; color: var(--ink); }
.act-done-step p { margin: 0; font-size: 14.8px; line-height: 1.65; color: var(--mut); }
.act-caution {
  margin-top: 24px; padding: 18px 20px; border-radius: var(--act-radius); border: 1px dashed var(--red); background: rgba(215, 25, 31, .05);
  font-size: 14.8px; line-height: 1.65; color: var(--mut);
}
.act-caution b { color: var(--ink); }

.act-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.act-why .act-card { padding-right: 56px; }

/* FAQ */
.act-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.act-faq-item { border: 1px solid var(--line); border-radius: var(--act-radius); background: var(--card); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.act-faq-item.is-open { border-color: rgba(215, 25, 31, .5); box-shadow: var(--act-shadow); }
.act-faq-item h3 { margin: 0; font: inherit; }
.act-faq-item button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; text-align: left;
  background: none; border: 0; cursor: pointer; font: 700 16.5px/1.4 var(--f-head); color: var(--ink);
}
.act-faq-item button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.act-faq-item .pm { position: relative; flex: none; width: 18px; height: 18px; }
.act-faq-item .pm::before, .act-faq-item .pm::after {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 2px; background: var(--red); transition: transform .25s var(--act-ease);
}
.act-faq-item .pm::after { transform: rotate(90deg); }
.act-faq-item.is-open .pm::after { transform: rotate(0); }
.act-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--act-ease); }
.act-faq-item.is-open .act-faq-body { grid-template-rows: 1fr; }
.act-faq-body > div { overflow: hidden; }
.act-faq-body p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.7; color: var(--mut); }

/* CTA */
.act-cta { position: relative; padding: 76px 0; background: var(--dk); color: #fff; overflow: hidden; text-align: center; }
.act-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 90% at 50% 120%, rgba(215, 25, 31, .5), transparent 70%); }
.act-cta .wrap { position: relative; max-width: 780px; }
.act-cta h2 { font: 900 clamp(26px, 3.6vw, 42px)/1.12 var(--f-head); margin: 0 0 14px; color: #fff; }
.act-cta p { margin: 0 auto 26px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.act-cta .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.act-cta .btn.o { color: #fff; border-color: rgba(255, 255, 255, .5); }
.act-cta .btn.o:hover { background: #fff; color: var(--ink); }
.act-cta small { display: block; margin-top: 20px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* Scroll reveal (only hidden once JS has added .act-js) */
.act-js .act-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--act-ease), transform .6s var(--act-ease); transition-delay: var(--act-delay, 0ms); }
.act-js .act-reveal.act-in { opacity: 1; transform: none; }

/* RESPONSIVE */
@media (max-width: 1000px) {
  .act-hero-grid, .act-split, .act-glance { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .act-split.flip .act-split-media { order: 0; }
  .act-audience, .act-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-float { left: 14px; }
  .act-split-media::before { inset: 14px -8px -8px 14px; }
}
@media (max-width: 760px) {
  .act-page .act-sec, .act-band, .act-cta { padding: 56px 0; }
  .act-hero { padding: 40px 0 48px; }
  .act-ladder { grid-template-columns: minmax(0, 1fr); }
  .act-rung + .act-rung { border-left: 1px solid rgba(255, 255, 255, .14); border-top: 0; }
  .act-rung:first-child { border-radius: 14px 14px 0 0; }
  .act-rung:last-child { border-radius: 0 0 14px 14px; }
  .act-rung:not(:last-child)::before { top: auto; bottom: -8px; right: auto; left: 34px; transform: rotate(45deg); }
  .act-done, .act-why { grid-template-columns: minmax(0, 1fr); }
  .act-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .act-facts b { font-size: 20px; }
  .act-dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 560px) {
  .act-audience, .act-cards { grid-template-columns: minmax(0, 1fr); }
  .act-float { position: static; max-width: none; margin-top: 14px; }
  .act-hero .btns .btn, .act-cta .btns .btn { flex: 1 1 100%; text-align: center; }
  .act-faq-item button { padding: 16px 18px; font-size: 15.5px; }
  .act-faq-body p { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .act-pulse::after { animation: none; }
  .act-js .act-reveal { opacity: 1; transform: none; transition: none; }
  .act-aud, .act-card, .act-rung, .act-faq-body { transition: none; }
}




/* ===== ACT hero ===== */
.ax-hero{position:relative;overflow:hidden;isolation:isolate;background:#050505;color:#fff;padding-top:28px}
.ax-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 46px,
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/46px 100%;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.ax-hero::after{content:"";position:absolute;z-index:-1;left:-140px;bottom:60px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.28),transparent 70%);animation:axGlow 3.5s ease-in-out infinite}

.ax-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;padding:34px 0 80px}

/* Copy */
.ax-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 18px;border:1.5px solid #e50914;border-radius:50px;font-size:.85rem;font-weight:700;opacity:0;animation:axUp .6s ease .1s forwards}
.ax-dot{width:10px;height:10px;border-radius:50%;background:#e50914;animation:axBlink 1s steps(2) infinite}
.ax-copy h1{margin:0 0 22px;line-height:1.05;opacity:0;animation:axFocus .9s ease .25s forwards}
.ax-copy h1 em{display:block;margin-top:8px;font-style:normal;color:#e50914}
.ax-p{max-width:560px;margin:0 0 30px;line-height:1.85;opacity:0;animation:axUp .7s ease .55s forwards}
.ax-btns{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:axUp .7s ease .75s forwards}
.ax-b1,.ax-b2{position:relative;overflow:hidden;display:inline-block;padding:15px 28px;border-radius:10px;font-weight:700;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}
.ax-b1{background:#e50914;color:#fff}
.ax-b1::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:rgba(255,255,255,.35);transform:skewX(-25deg);animation:axShine 3.5s ease-in-out 1.6s infinite}
.ax-b1:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(229,9,20,.5)}
.ax-b2{background:transparent;color:#fff;border:2px solid #fff}
.ax-b2:hover{background:#fff;color:#000;transform:translateY(-3px)}

/* CCTV screen */
.ax-cam{position:relative;opacity:0;animation:axUp .9s ease .4s forwards}
.ax-screen{position:relative;margin:0;overflow:hidden;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.ax-screen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:contrast(1.05) saturate(.9)}
.ax-c{position:absolute;width:38px;height:38px;border:3px solid #e50914;animation:axCorner .9s cubic-bezier(.2,.8,.2,1) 1s both}
.ax-c1{left:14px;top:14px;border-right:0;border-bottom:0}
.ax-c2{right:14px;top:14px;border-left:0;border-bottom:0}
.ax-c3{left:14px;bottom:14px;border-right:0;border-top:0}
.ax-c4{right:14px;bottom:14px;border-left:0;border-top:0}
.ax-scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#e50914,transparent);box-shadow:0 0 18px 4px rgba(229,9,20,.6);animation:axScan 4s ease-in-out 1.4s infinite}
.ax-rec{position:absolute;right:62px;top:20px;display:flex;align-items:center;gap:8px;padding:5px 12px;background:rgba(0,0,0,.65);border-radius:4px;font-size:.78rem;font-weight:800}
.ax-rec i{width:9px;height:9px;border-radius:50%;background:#e50914;animation:axBlink 1s steps(2) infinite}

/* Notice / Report / Respond panel */
.ax-note{position:relative;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:-34px 22px 0 auto;max-width:92%;padding:18px 22px;background:#fff;color:#111;border-radius:12px;box-shadow:8px 8px 0 #e50914}
.ax-steps{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.ax-steps li{padding:8px 16px;border:1.5px solid #111;border-radius:50px;font-size:.82rem;font-weight:800;animation:axStep 6s linear infinite}
.ax-steps li:nth-child(2){animation-delay:2s}
.ax-steps li:nth-child(3){animation-delay:4s}
.ax-note>span{flex:1 1 200px;font-size:.92rem;line-height:1.5}

/* Facts bar */
.ax-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;color:#111;border-top:4px solid #e50914}
.ax-bar li{display:flex;align-items:baseline;justify-content:center;gap:14px;padding:22px 16px;border-right:1px solid #dcdcdc;opacity:0;animation:axUp .6s ease forwards}
.ax-bar li:last-child{border-right:0}
.ax-bar li:nth-child(1){animation-delay:1.1s}
.ax-bar li:nth-child(2){animation-delay:1.25s}
.ax-bar li:nth-child(3){animation-delay:1.4s}
.ax-bar b{font-size:2.2rem;font-weight:900;line-height:1;color:#e50914}
.ax-bar span{font-weight:600}

/* Animations */
@keyframes axUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes axFocus{from{opacity:0;filter:blur(12px);transform:translateY(20px)}to{opacity:1;filter:none;transform:none}}
@keyframes axCorner{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
@keyframes axScan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 3px);opacity:0}}
@keyframes axBlink{50%{opacity:.15}}
@keyframes axStep{0%,28%{background:#e50914;color:#fff;border-color:#e50914}33%,100%{background:transparent;color:#111;border-color:#111}}
@keyframes axGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes axShine{0%{left:-60%}35%,100%{left:130%}}

/* Responsive */
@media (max-width:900px){
  .ax-grid{grid-template-columns:1fr;gap:40px;padding:24px 0 56px}
  .ax-note{margin:-26px 10px 0 auto;max-width:96%;box-shadow:5px 5px 0 #e50914}
  .ax-bar{grid-template-columns:1fr}
  .ax-bar li{justify-content:flex-start;padding:16px 24px;border-right:0;border-bottom:1px solid #dcdcdc}
  .ax-bar li:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .ax-hero *,.ax-hero::after{animation:none!important;transition:none!important}
  .ax-eyebrow,.ax-copy h1,.ax-p,.ax-btns,.ax-cam,.ax-bar li{opacity:1}
  .ax-scan{display:none}
}
/* ===== Overview ===== */
.ov-sec{position:relative;overflow:hidden;background:#f6f6f6;color:#111;padding:90px 0}
.ov-sec::before{content:"";position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.12),transparent 70%);pointer-events:none}

/* Header */
.ov-head{position:relative;margin-bottom:50px;padding-bottom:22px;border-bottom:2px solid #111}
.ov-head::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:#e50914;transform-origin:left;animation:ovLine 1.2s cubic-bezier(.7,0,.2,1) both}
.ov-kicker{display:inline-block;margin:0 0 14px;padding:6px 16px;border:1.5px solid #e50914;border-radius:50px;font-size:.82rem;font-weight:700;color:#e50914}
.ov-head h2{margin:0;max-width:820px;line-height:1.08}

/* Grid */
.ov-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}

/* Photo */
.ov-photo{margin:0}
.ov-frame{position:relative;border-radius:18px;isolation:isolate}
.ov-frame::before{content:"";position:absolute;z-index:-1;inset:0;background:#0a0a0a;border-radius:18px;transform:translate(-18px,18px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ov-frame:hover::before{transform:translate(-8px,8px)}
.ov-frame img{display:block;width:100%;height:auto;aspect-ratio:4/3.2;object-fit:cover;border-radius:18px;border:3px solid #fff;box-shadow:0 22px 46px rgba(0,0,0,.18)}
.ov-tape{position:absolute;right:-16px;bottom:26px;padding:12px 24px;background:#e50914;color:#fff;font-weight:800;font-size:.92rem;border-radius:6px;box-shadow:0 10px 24px rgba(229,9,20,.45);animation:ovFloat 3s ease-in-out infinite}
.ov-tape::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35)}

/* Text */
.ov-lead{position:relative;margin:0 0 26px;padding-left:26px;font-size:1.22rem;line-height:1.75;font-weight:500}
.ov-lead::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:5px;background:#e50914}
.ov-p{margin:0;line-height:1.9;color:#444}

/* Official source strip */
.ov-source{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;margin-top:60px;padding:26px 32px;background:#0a0a0a;color:#fff;border-radius:18px;box-shadow:8px 8px 0 #e50914}
.ov-source::after{content:"";position:absolute;top:0;left:-30%;width:20%;height:100%;background:rgba(255,255,255,.08);transform:skewX(-25deg);animation:ovShine 5s ease-in-out 1.5s infinite}
.ov-source p{position:relative;z-index:1;margin:0;line-height:1.75;opacity:.9}
.ov-source b{color:#e50914;opacity:1}
.ov-shield{position:relative;z-index:1;flex:none;width:52px;height:60px;background:#e50914;clip-path:polygon(50% 0,100% 14%,100% 55%,50% 100%,0 55%,0 14%);animation:ovBeat 1.4s ease-in-out infinite}
.ov-shield::after{content:"";position:absolute;left:19px;top:15px;width:14px;height:24px;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg) scale(.7)}

/* Scroll reveal (CSS only) */
@supports (animation-timeline:view()){
  .ov-rv{animation:ovRv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .ov-photo.ov-rv{animation-name:ovSlide}
}

@keyframes ovRv{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes ovSlide{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes ovLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ovFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ovBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes ovShine{0%{left:-30%}40%,100%{left:130%}}

/* Responsive */
@media (max-width:860px){
  .ov-sec{padding:60px 0}
  .ov-head{margin-bottom:34px}
  .ov-grid{grid-template-columns:1fr;gap:44px}
  .ov-frame::before{transform:translate(-10px,10px)}
  .ov-tape{right:8px}
  .ov-lead{font-size:1.1rem}
  .ov-source{flex-direction:column;align-items:flex-start;gap:16px;margin-top:44px;padding:22px;box-shadow:5px 5px 0 #e50914}
}
@media (prefers-reduced-motion:reduce){
  .ov-sec *{animation:none!important;transition:none!important}
}
/* ===== How to complete ACT training online ===== */
.hs-sec{position:relative;overflow:hidden;background:#f6f6f6;color:#111;padding:90px 0}
.hs-sec::before{content:"";position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.12),transparent 70%);pointer-events:none}

.hs-head{position:relative;margin-bottom:50px;padding-bottom:22px;border-bottom:2px solid #111}
.hs-head::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:#e50914;transform-origin:left;animation:hsLine 1.2s cubic-bezier(.7,0,.2,1) both}
.hs-head h2{margin:0;line-height:1.1}

.hs-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}

/* Left card */
.hs-info{position:sticky;top:100px;padding:34px 32px;background:#0a0a0a;color:#fff;border-radius:22px;box-shadow:10px 10px 0 #e50914}
.hs-badge{display:inline-block;margin-bottom:14px;padding:6px 16px;background:#e50914;border-radius:50px;font-size:.82rem;font-weight:800}
.hs-info h3{margin:0 0 24px;font-size:1.5rem;line-height:1.2}
.hs-sub{margin:0 0 14px;font-weight:800;opacity:.9}
.hs-check,.hs-check ul{list-style:none;margin:0;padding:0}
.hs-check{display:grid;gap:14px}
.hs-check li{position:relative;padding-left:34px;line-height:1.7;opacity:.92}
.hs-check>li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:#e50914}
.hs-check>li::after{content:"";position:absolute;left:7px;top:8px;width:6px;height:11px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) scale(.8)}
.hs-check ul{display:grid;gap:8px;margin-top:10px;padding-left:2px}
.hs-check ul li{padding-left:18px}
.hs-check ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:#e50914}
.hs-check a{color:#fff;text-decoration:underline;text-decoration-color:#e50914;text-underline-offset:3px}
.hs-check a:hover{color:#e50914}

/* Timeline */
.hs-steps{position:relative;list-style:none;margin:0;padding:0 0 0 68px;display:grid;gap:34px}
.hs-steps::before,.hs-steps::after{content:"";position:absolute;left:25px;top:20px;bottom:20px;width:4px;border-radius:4px}
.hs-steps::before{background:#d9d9d9}
.hs-steps::after{background:#e50914;transform-origin:top}
.hs-step{position:relative}
.hs-node{position:absolute;left:-68px;top:0;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid #e50914;box-shadow:0 0 0 7px rgba(229,9,20,.12)}
.hs-node b{font-size:.95rem;color:#111}
.hs-step:hover .hs-node{background:#e50914}
.hs-step:hover .hs-node b{color:#fff}

.hs-card{padding:22px 24px 26px;background:#fff;border:1px solid #dcdcdc;border-radius:18px;transition:transform .4s ease,box-shadow .4s ease}
.hs-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.14)}
.hs-card h4{margin:0 0 4px;font-size:1.3rem}
.hs-card p{margin:0 0 18px;font-weight:600;color:#e50914}

/* Browser frame */
.hs-shot{position:relative;margin:0;overflow:hidden;border-radius:12px;background:#111;padding-top:28px;box-shadow:0 14px 30px rgba(0,0,0,.2)}
.hs-dots{position:absolute;left:14px;top:9px;width:9px;height:9px;border-radius:50%;background:#e50914;box-shadow:16px 0 0 #fff,32px 0 0 #777}
.hs-shot img{display:block;width:100%;height:auto;transition:transform .8s ease}
.hs-card:hover .hs-shot img{transform:scale(1.04)}

/* Scroll animations (CSS only) */
@supports (animation-timeline:view()){
  .hs-rv{animation:hsRv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .hs-info.hs-rv{animation-name:hsLeft}
  .hs-steps::after{animation:hsGrow linear both;animation-timeline:view();animation-range:entry 20% cover 75%}
}

@keyframes hsRv{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes hsLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes hsGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hsLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Responsive */
@media (max-width:900px){
  .hs-sec{padding:60px 0}
  .hs-head{margin-bottom:34px}
  .hs-grid{grid-template-columns:1fr;gap:44px}
  .hs-info{position:static;padding:26px 22px;box-shadow:6px 6px 0 #e50914}
  .hs-steps{padding-left:56px}
  .hs-steps::before,.hs-steps::after{left:19px}
  .hs-node{left:-56px;width:42px;height:42px}
  .hs-node b{font-size:.8rem}
  .hs-card{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .hs-sec *{animation:none!important;transition:none!important}
}
/* ===== Step 2 : e-Learning (dark) ===== */
.el-sec{position:relative;overflow:hidden;background:#0a0a0a;color:#fff;padding:90px 0}
.el-sec::before{content:"";position:absolute;right:-160px;top:-160px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.28),transparent 70%);animation:elGlow 3.5s ease-in-out infinite;pointer-events:none}

/* Header */
.el-head{position:relative;margin-bottom:50px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.2)}
.el-head::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:#e50914;transform-origin:left;animation:elLine 1.2s cubic-bezier(.7,0,.2,1) both}
.el-badge{display:inline-block;margin-bottom:16px;padding:7px 18px;background:#e50914;border-radius:50px;font-size:.85rem;font-weight:800}
.el-head h2{margin:0 0 12px;line-height:1.1}
.el-sub{margin:0;font-weight:700;opacity:.75}

/* Screenshots row with connecting arrows */
.el-shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.el-shot{position:relative}
.el-shot:not(:last-child)::after{content:"";position:absolute;right:-30px;top:50%;width:14px;height:14px;border-top:4px solid #e50914;border-right:4px solid #e50914;transform:rotate(45deg);animation:elNudge 1.4s ease-in-out infinite}
.el-label{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.el-label b{font-size:1.5rem;color:#e50914;line-height:1}
.el-label span{font-weight:600;opacity:.9}

.el-frame{position:relative;margin:0;overflow:hidden;border-radius:12px;background:#1b1b1b;padding-top:28px;border:1px solid rgba(255,255,255,.16);transition:transform .45s ease,box-shadow .45s ease}
.el-shot:hover .el-frame{transform:translateY(-8px);box-shadow:0 24px 44px rgba(229,9,20,.3)}
.el-dots{position:absolute;left:14px;top:9px;width:9px;height:9px;border-radius:50%;background:#e50914;box-shadow:16px 0 0 #fff,32px 0 0 #777}
.el-frame img{display:block;width:100%;height:auto;background:#fff;transition:transform .8s ease}
.el-shot:hover .el-frame img{transform:scale(1.05)}

/* Task cards */
.el-tasks{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}
.el-task{position:relative;overflow:hidden;padding:30px 24px 26px;background:#fff;color:#111;border-radius:18px;transition:transform .4s ease,box-shadow .4s ease}
.el-task::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:#e50914;transform:scaleX(.2);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.el-task:hover{transform:translateY(-8px);box-shadow:8px 8px 0 #e50914}
.el-task:hover::before{transform:scaleX(1)}
.el-num{position:absolute;right:16px;top:8px;font-size:4.2rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(229,9,20,.45)}
.el-task h3{position:relative;margin:14px 0 14px;font-size:1.2rem;line-height:1.25}
.el-task p,.el-task li{line-height:1.7;color:#333}
.el-task p{margin:0}
.el-task ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.el-task li{position:relative;padding-left:20px}
.el-task li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:#e50914}
.el-task a{color:#e50914;text-decoration:underline;text-underline-offset:3px}
.el-task a:hover{color:#000}

/* Scroll reveal (CSS only) */
@supports (animation-timeline:view()){
  .el-rv{animation:elRv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .el-shot.el-rv:nth-child(2),.el-task.el-rv:nth-child(2){animation-range:entry 6% entry 51%}
  .el-shot.el-rv:nth-child(3),.el-task.el-rv:nth-child(3){animation-range:entry 12% entry 57%}
  .el-task.el-rv:nth-child(4){animation-range:entry 18% entry 63%}
}

@keyframes elRv{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes elLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes elGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes elNudge{0%,100%{transform:translateX(0) rotate(45deg)}50%{transform:translateX(7px) rotate(45deg)}}

/* Responsive */
@media (max-width:1000px){
  .el-tasks{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .el-sec{padding:60px 0}
  .el-head{margin-bottom:34px}
  .el-shots{grid-template-columns:1fr;gap:34px}
  .el-shot:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-24px;margin-left:-7px;transform:rotate(135deg);animation:none}
  .el-tasks{grid-template-columns:1fr;margin-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .el-sec *,.el-sec::before{animation:none!important;transition:none!important}
}
/* ===== Step 3 : ACT Awareness (light) ===== */
.a3-sec{position:relative;overflow:hidden;background:#f6f6f6;color:#111;padding-top:90px}
.a3-sec::before{content:"";position:absolute;left:-160px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.12),transparent 70%);pointer-events:none}

/* Header */
.a3-head{position:relative;margin-bottom:50px;padding-bottom:24px;border-bottom:2px solid #111}
.a3-head::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:#e50914;transform-origin:left;animation:a3Line 1.2s cubic-bezier(.7,0,.2,1) both}
.a3-badge{display:inline-block;margin-bottom:16px;padding:7px 18px;background:#e50914;color:#fff;border-radius:50px;font-size:.85rem;font-weight:800}
.a3-head h2{margin:0 0 12px;line-height:1.1}
.a3-sub{margin:0;font-weight:700;opacity:.7}

/* Process bar */
.a3-flow{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.a3-flow::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:3px;background:repeating-linear-gradient(90deg,#e50914 0 10px,transparent 10px 18px)}
.a3-flow>li{position:relative;padding:0 6px}
.a3-n{position:relative;display:grid;place-items:center;width:56px;height:56px;margin:0 0 20px;border-radius:50%;background:#0a0a0a;color:#fff;font-size:1.4rem;font-weight:900;box-shadow:0 0 0 8px #f6f6f6,0 0 0 11px #e50914;transition:transform .4s ease,background .4s ease}
.a3-flow>li:hover .a3-n{transform:scale(1.12) rotate(8deg);background:#e50914}
.a3-flow h3{margin:0 0 12px;font-size:1.2rem;line-height:1.25}
.a3-flow p,.a3-flow li li{line-height:1.7;color:#333}
.a3-flow p{margin:0}
.a3-flow ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.a3-flow ul li{position:relative;padding-left:20px}
.a3-flow ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:#e50914}
.a3-flow a{color:#e50914;text-decoration:underline;text-underline-offset:3px}
.a3-flow a:hover{color:#000}

/* Note */
.a3-note{margin:50px 0 0;padding:20px 26px;background:#fff;border-left:6px solid #e50914;border-radius:0 14px 14px 0;font-weight:600;line-height:1.7;box-shadow:0 12px 30px rgba(0,0,0,.07)}

/* Screenshots */
.a3-shots{list-style:none;margin:60px 0 0;padding:0 0 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.a3-label{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.a3-label b{font-size:1.5rem;color:#e50914;line-height:1}
.a3-label span{font-weight:600}
.a3-frame{position:relative;margin:0;overflow:hidden;border-radius:12px;background:#111;padding-top:28px;box-shadow:10px 10px 0 #0a0a0a;transition:transform .45s ease,box-shadow .45s ease}
.a3-shot:nth-child(1) .a3-frame{transform:rotate(-1.5deg)}
.a3-shot:nth-child(3) .a3-frame{transform:rotate(1.5deg)}
.a3-shot:hover .a3-frame{transform:rotate(0) translateY(-8px);box-shadow:10px 10px 0 #e50914}
.a3-dots{position:absolute;left:14px;top:9px;width:9px;height:9px;border-radius:50%;background:#e50914;box-shadow:16px 0 0 #fff,32px 0 0 #777}
.a3-frame img{display:block;width:100%;height:auto;background:#fff}

/* Download certificate band */
.a3-cert{position:relative;overflow:hidden;background:#e50914;color:#fff;padding:0 0 80px}
.a3-cert::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 14px,transparent 14px 28px)}
.a3-cert .wrap{position:relative}
.a3-cert-title{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 56px;padding:26px 0;text-align:center;text-transform:uppercase;letter-spacing:.02em}
.a3-dl{position:relative;display:inline-block;width:28px;height:34px;animation:a3Down 1.4s ease-in-out infinite}
.a3-dl::before{content:"";position:absolute;left:12px;top:0;width:4px;height:22px;background:#fff}
.a3-dl::after{content:"";position:absolute;left:5px;top:10px;width:14px;height:14px;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg)}
.a3-cert-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.a3-cert-grid>li{position:relative;overflow:hidden;padding:34px 26px 30px;background:#0a0a0a;border-radius:18px;text-align:center;box-shadow:8px 8px 0 rgba(0,0,0,.25);transition:transform .4s ease,box-shadow .4s ease}
.a3-cert-grid>li:hover{transform:translateY(-8px);box-shadow:8px 8px 0 #fff}
.a3-cn{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:#e50914;font-size:1.3rem;font-weight:900}
.a3-cert-grid h3{margin:0 0 8px;font-size:1.5rem}
.a3-cert-grid p{margin:0;opacity:.85;line-height:1.6}

/* Scroll reveal (CSS only) */
@supports (animation-timeline:view()){
  .a3-rv{animation:a3Rv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .a3-flow>li:nth-child(2),.a3-shot:nth-child(2),.a3-cert-grid>li:nth-child(2){animation-range:entry 6% entry 51%}
  .a3-flow>li:nth-child(3),.a3-shot:nth-child(3),.a3-cert-grid>li:nth-child(3){animation-range:entry 12% entry 57%}
  .a3-flow>li:nth-child(4){animation-range:entry 18% entry 63%}
}

@keyframes a3Rv{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes a3Line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes a3Down{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}

/* Responsive */
@media (max-width:1000px){
  .a3-flow{grid-template-columns:1fr 1fr;gap:34px 20px}
  .a3-flow::before{display:none}
}
@media (max-width:860px){
  .a3-sec{padding-top:60px}
  .a3-head{margin-bottom:34px}
  .a3-flow{grid-template-columns:1fr}
  .a3-shots{grid-template-columns:1fr;gap:34px;margin-top:44px;padding-bottom:60px}
  .a3-shot .a3-frame{transform:none!important;box-shadow:6px 6px 0 #0a0a0a}
  .a3-cert{padding-bottom:56px}
  .a3-cert-title{margin-bottom:34px;font-size:1.5rem}
  .a3-cert-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .a3-sec *,.a3-cert *{animation:none!important;transition:none!important}
}