/* ==========================================================================
   Awad Tech — Base + Components
   All directional spacing uses CSS logical properties so RTL is structural.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
  transition:background-color var(--dur) var(--ease-soft),color var(--dur) var(--ease-soft);
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.015em}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4{font-family:var(--font-body);font-weight:700;letter-spacing:0;line-height:var(--lh-snug)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* ---- accessibility ---- */
.skip-link{
  position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:2000;
  background:var(--primary);color:var(--on-primary);
  padding:.8rem 1.4rem;border-end-end-radius:var(--r-md);font-weight:600;
}
.skip-link:focus{inset-inline-start:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
main:focus{outline:none}

/* ---- ambient animated background (whole page, behind everything) ---- */
/* The blend lives on the wrapper, not the blobs: .ambient is its own stacking
   context, so blending the children would trap them inside it. Blending the
   whole layer lets it act on the page ground itself. */
.ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  mix-blend-mode:var(--amb-blend);
}
/* --sy is scroll progress through the document, 0 to 1, written by main.js.
   Light and dark share one geometry and one motion path; only the colour
   tokens below differ, so both themes read as the same designed background. */
/* ==========================================================================
   The engineered background.
   One structure, two palettes. A blueprint field: fine measurement grid,
   orthogonal circuit traces with junction nodes, data pulses running the
   traces, and a depth wash. Scroll pans the camera across it (--sy).
   Light reads as a drafting blueprint; dark as an illuminated board.
   ========================================================================== */
:root{
  --sy:0;
  /* structure */
  --amb-trace:#2F62C8;        /* circuit traces        */
  --amb-trace-o:.30;
  --amb-node:#1B4FD8;         /* junction nodes        */
  --amb-node-o:.55;
  --amb-pulse:#9A7433;        /* travelling data pulse */
  --amb-pulse-o:.85;
  --amb-grid-c:#5C7CB8;       /* measurement grid      */
  --amb-grid-o:.20;
  --amb-rule-o:.30;           /* major rules           */
  /* depth wash */
  --amb-1:#A8C4F7;
  --amb-2:#E8D3A4;
  --amb-o1:.55;
  --amb-o2:.38;
  --amb-blend:multiply;
  --amb-blur:90px;
}
[data-theme="dark"]{
  --amb-trace:#4C87E8;
  --amb-trace-o:.26;
  --amb-node:#7FB0FF;
  --amb-node-o:.62;
  --amb-pulse:#E8C87E;
  --amb-pulse-o:.95;
  --amb-grid-c:#5E80C0;
  --amb-grid-o:.14;
  --amb-rule-o:.22;
  --amb-1:#2E6BFF;
  --amb-2:var(--gold-500);
  --amb-o1:.30;
  --amb-o2:.16;
  --amb-blend:screen;
  --amb-blur:96px;
}

/* --- depth wash: two soft fields, kept restrained so the structure leads --- */
.ambient__blob{
  position:absolute;border-radius:50%;
  filter:blur(var(--amb-blur));
  will-change:transform;
}
.ambient__blob--a{
  inline-size:52vw;block-size:52vw;min-inline-size:360px;min-block-size:360px;
  inset-block-start:-16%;inset-inline-start:-10%;
  background:radial-gradient(circle,var(--amb-1),transparent 70%);
  opacity:var(--amb-o1);
  transform:translate3d(calc(var(--sy) * 24vw), calc(var(--sy) * 40vh), 0) scale(calc(1 + var(--sy) * .28));
}
.ambient__blob--b{
  inline-size:42vw;block-size:42vw;min-inline-size:290px;min-block-size:290px;
  inset-block-end:-18%;inset-inline-end:-12%;
  background:radial-gradient(circle,var(--amb-2),transparent 70%);
  opacity:var(--amb-o2);
  transform:translate3d(calc(var(--sy) * -28vw), calc(var(--sy) * -36vh), 0) scale(calc(1.14 - var(--sy) * .26));
}
[dir="rtl"] .ambient__blob--a{transform:translate3d(calc(var(--sy) * -24vw), calc(var(--sy) * 40vh),0) scale(calc(1 + var(--sy) * .28))}
[dir="rtl"] .ambient__blob--b{transform:translate3d(calc(var(--sy) * 28vw), calc(var(--sy) * -36vh),0) scale(calc(1.14 - var(--sy) * .26))}

/* --- the measurement grid: fine cells plus heavier major rules --- */
.ambient__grid{
  position:absolute;inset:-200px;
  background-image:
    /* major rules every 5th cell */
    linear-gradient(to right, color-mix(in srgb,var(--amb-grid-c) calc(var(--amb-rule-o) * 100%),transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--amb-grid-c) calc(var(--amb-rule-o) * 100%),transparent) 1px, transparent 1px),
    /* fine cells */
    linear-gradient(to right, color-mix(in srgb,var(--amb-grid-c) calc(var(--amb-grid-o) * 100%),transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--amb-grid-c) calc(var(--amb-grid-o) * 100%),transparent) 1px, transparent 1px);
  background-size:240px 240px,240px 240px,48px 48px,48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 92% 84% at 50% 42%, #000 22%, transparent 84%);
  mask-image:radial-gradient(ellipse 92% 84% at 50% 42%, #000 22%, transparent 84%);
  will-change:transform;
  transform:translate3d(calc(var(--sy) * -48px), calc(var(--sy) * -240px), 0);
}

/* --- the circuit board: traces, nodes and running pulses (canvas) --- */
.ambient__board{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  -webkit-mask-image:radial-gradient(ellipse 94% 88% at 50% 44%, #000 26%, transparent 88%);
  mask-image:radial-gradient(ellipse 94% 88% at 50% 44%, #000 26%, transparent 88%);
}

/* Alternating bands sit on a translucent ground so the moving background
   keeps reading through them, with softened edges instead of a hard seam. */
.section--alt{
  background:color-mix(in srgb,var(--bg-alt) 84%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
}
/* cards and the form keep a solid ground so text contrast never depends on
   whatever the background happens to be doing behind them */
.card,.form,.qa,.ind,.apps-feature{background-color:var(--surface)}

/* ---- layout ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.stack{display:grid;gap:var(--sp-4)}

.section-head{max-width:var(--maxw-prose);margin-block-end:clamp(2rem,1rem + 3vw,3.5rem)}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);margin-block-end:var(--sp-3);
}
:lang(ar) .eyebrow{font-family:var(--font-body);letter-spacing:0;font-size:.78rem}
.eyebrow::before{
  content:"";inline-size:22px;block-size:1px;background:currentColor;opacity:.65;flex:none;
}
.section-head--center .eyebrow::before{display:none}
.h2{font-size:var(--fs-h2)}
.lead{
  margin-block-start:var(--sp-4);color:var(--text-2);
  font-size:var(--fs-lead);max-width:var(--maxw-prose);
}
.section-head--center .lead{margin-inline:auto}

/* ---- buttons ---- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--text);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.82rem 1.5rem;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-weight:600;font-size:.95rem;line-height:1;cursor:pointer;
  transition:background-color var(--dur) var(--ease-soft),color var(--dur) var(--ease-soft),
             border-color var(--dur) var(--ease-soft),transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--primary);--btn-fg:var(--on-primary);box-shadow:var(--shadow-md)}
.btn--primary:hover{--btn-bg:var(--primary-hover);box-shadow:var(--shadow-lg)}
.btn--outline{--btn-bd:var(--border-strong);--btn-fg:var(--text)}
.btn--outline:hover{--btn-bg:var(--surface-2);--btn-bd:var(--primary)}
.btn--onhero{--btn-bd:rgba(255,255,255,.34);--btn-fg:var(--hero-ink)}
.btn--onhero:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:rgba(255,255,255,.6)}
.btn--sm{padding:.58rem 1.1rem;font-size:.87rem}
.btn__arrow{transition:transform var(--dur) var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(3px)}
[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(3px)}
@media (pointer:coarse){.btn{min-block-size:44px}}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--primary);font-weight:600;font-size:.92rem;
  transition:gap var(--dur) var(--ease-out),color var(--dur) var(--ease-soft);
}
.link-arrow:hover{gap:.8rem;color:var(--primary-hover)}
[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}

/* ---- header / nav ---- */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:1000;
  block-size:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-block-end:1px solid transparent;
  transition:background-color var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft),
             backdrop-filter var(--dur) var(--ease-soft);
}
.header.is-stuck{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-block-end-color:var(--border);
}
.header__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:var(--sp-5);
}
/* Logo: temporary text treatment. REPLACE WITH FINAL LOGO ASSET HERE. */
.logo{display:inline-flex;align-items:center;gap:.62rem;flex:none}
.logo__mark{inline-size:32px;block-size:32px;flex:none}
.logo__mark svg{inline-size:100%;block-size:100%}
.logo__text{
  font-family:var(--font-display);font-weight:700;font-size:1.12rem;
  letter-spacing:-.02em;color:var(--text);white-space:nowrap;
}
.logo__text em{font-style:normal;color:var(--primary)}
.header:not(.is-stuck) .logo__text{color:var(--hero-ink)}
.header:not(.is-stuck) .logo__text em{color:var(--gold-400)}

.nav{margin-inline-start:auto;display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .8rem;border-radius:var(--r-sm);
  font-size:.93rem;font-weight:500;color:var(--text-2);
  transition:color var(--dur) var(--ease-soft),background-color var(--dur) var(--ease-soft);
  background:none;border:0;cursor:pointer;font-family:inherit;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--text);background:var(--surface-2)}
.nav__link[aria-current="page"]{color:var(--primary)}
.header:not(.is-stuck) .nav__link{color:rgba(255,255,255,.82)}
.header:not(.is-stuck) .nav__link:hover,
.header:not(.is-stuck) .nav__link[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.12)}
.nav__caret{transition:transform var(--dur) var(--ease-out);flex:none}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.menu{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;
  min-inline-size:280px;padding:.5rem;
  background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility var(--dur);
  z-index:20;
}
.nav__item.is-open .menu{opacity:1;visibility:visible;transform:none}
.menu__link{display:block;padding:.7rem .8rem;border-radius:var(--r-md);transition:background-color var(--dur-fast) var(--ease-soft)}
.menu__link:hover{background:var(--surface-2)}
.menu__title{display:block;font-weight:600;font-size:.94rem;color:var(--text)}
.menu__desc{display:block;font-size:.82rem;color:var(--text-3);margin-block-start:.15rem;line-height:1.45}

.header__actions{display:flex;align-items:center;gap:.4rem;flex:none}
.icon-btn{
  inline-size:40px;block-size:40px;flex:none;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--border);color:var(--text-2);cursor:pointer;
  transition:color var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft),background-color var(--dur) var(--ease-soft);
}
.icon-btn:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}
.header:not(.is-stuck) .icon-btn{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.28)}
.header:not(.is-stuck) .icon-btn:hover{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.14)}
.icon-btn svg{inline-size:18px;block-size:18px}
.lang-btn{
  inline-size:auto;padding-inline:.8rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;
}
.lang-btn svg{inline-size:16px;block-size:16px;flex:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}
[data-theme="dark"] .theme-btn .i-moon{display:none}
.theme-btn .i-sun{display:none}
.theme-btn .i-moon{display:block}

.nav-toggle{display:none}
@media (max-width:1060px){
  .nav{display:none}
  .header__cta{display:none}
  .nav-toggle{display:grid}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:1100;
  display:grid;grid-template-rows:auto 1fr;
  background:var(--bg);
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out),visibility var(--dur-slow);
  overflow-y:auto;
}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.is-open{transform:none;visibility:visible}
.drawer__top{
  block-size:var(--nav-h);display:flex;align-items:center;
  padding-inline:var(--gutter);border-block-end:1px solid var(--border);
}
.drawer__close{margin-inline-start:auto}
.drawer__body{padding:var(--sp-5) var(--gutter) var(--sp-8)}
.drawer__group + .drawer__group{margin-block-start:var(--sp-5);padding-block-start:var(--sp-5);border-block-start:1px solid var(--border)}
.drawer__label{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-3);margin-block-end:var(--sp-3);display:block;
}
:lang(ar) .drawer__label{font-family:var(--font-body);letter-spacing:0}
.drawer__link{display:block;padding:.62rem 0;font-size:1.05rem;font-weight:500;color:var(--text)}
.drawer__link--sub{font-size:.95rem;color:var(--text-2);padding-inline-start:.9rem;border-inline-start:2px solid var(--border)}
.drawer__cta{margin-block-start:var(--sp-6)}

/* ---- cards ---- */
.card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.4rem,1rem + 1.2vw,2rem);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out),background-color var(--dur) var(--ease-soft);
}
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
/* card with an image header */
.card--media{padding:0;overflow:hidden}
.card__media{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#08111F;flex:none;
}
.card__media img{
  inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.card--media:hover .card__media img{transform:scale(1.06)}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(6,14,28,.05), rgba(6,14,28,.55));
}
.card__media .card__icon{
  position:absolute;z-index:1;inset-block-end:12px;inset-inline-start:14px;
  margin:0;background:rgba(10,20,38,.72);color:#CFE0FF;
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  inline-size:40px;block-size:40px;
}
.card__body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.3rem,1rem + 1vw,1.75rem);
}
.card--media .card__title{margin-block-end:var(--sp-2)}

.card__icon{
  inline-size:46px;block-size:46px;border-radius:var(--r-md);
  display:grid;place-items:center;margin-block-end:var(--sp-4);
  background:var(--primary-soft);color:var(--primary);flex:none;
}
.card__icon svg{inline-size:22px;block-size:22px}
.card__title{font-size:var(--fs-h3);margin-block-end:var(--sp-3)}
.card__text{color:var(--text-2);font-size:.95rem}
.card__list{margin-block-start:var(--sp-4);display:grid;gap:.45rem}
.card__list li{
  position:relative;padding-inline-start:1.15rem;font-size:.89rem;color:var(--text-2);line-height:1.5;
}
.card__list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:5px;block-size:5px;border-radius:50%;background:var(--accent);
}
.card__foot{margin-block-start:auto;padding-block-start:var(--sp-4)}

/* ---- forms ---- */
.field{display:grid;gap:.45rem}
.field__label{font-size:.86rem;font-weight:600;color:var(--text-2)}
.field__req{color:var(--danger);margin-inline-start:.15rem}
.field input,.field select,.field textarea{
  inline-size:100%;padding:.78rem .95rem;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  transition:border-color var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.field textarea{resize:vertical;min-block-size:120px}
.field__error{font-size:.82rem;color:var(--danger);min-block-size:1.1em}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--danger)}
.form-status{padding:.9rem 1.1rem;border-radius:var(--r-md);font-size:.92rem;display:none}
.form-status.is-ok{display:block;background:var(--success-soft);color:var(--success)}
.form-status.is-err{display:block;background:var(--danger-soft);color:var(--danger)}

/* ---- footer ---- */
.footer{background:var(--bg-alt);border-block-start:1px solid var(--border);padding-block:var(--sp-8) var(--sp-6)}
.footer__grid{
  display:grid;gap:var(--sp-6);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
}
.footer__about{max-width:34ch;color:var(--text-2);font-size:.92rem;margin-block-start:var(--sp-4)}
.footer__col h3{font-size:.92rem;font-weight:600;margin-block-end:var(--sp-4);color:var(--text)}
.footer__col li + li{margin-block-start:.6rem}
.footer__col a{font-size:.9rem;color:var(--text-2);transition:color var(--dur) var(--ease-soft)}
.footer__col a:hover{color:var(--primary)}
.footer__bottom{
  margin-block-start:var(--sp-7);padding-block-start:var(--sp-5);border-block-start:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--text-3);
}
.placeholder{
  border-block-end:1px dashed var(--accent);color:var(--text-2);
}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ---- scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-group].is-in > *{opacity:1;transform:none}
[data-reveal-group] > *{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
[data-reveal-group].is-in > *:nth-child(2){transition-delay:.07s}
[data-reveal-group].is-in > *:nth-child(3){transition-delay:.14s}
[data-reveal-group].is-in > *:nth-child(4){transition-delay:.21s}
[data-reveal-group].is-in > *:nth-child(5){transition-delay:.28s}
[data-reveal-group].is-in > *:nth-child(6){transition-delay:.35s}
[data-reveal-group].is-settled > *,
[data-reveal-group].is-settled > *:nth-child(2),
[data-reveal-group].is-settled > *:nth-child(3),
[data-reveal-group].is-settled > *:nth-child(4),
[data-reveal-group].is-settled > *:nth-child(5),
[data-reveal-group].is-settled > *:nth-child(6){transition-delay:0s !important}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
  }
  [data-reveal],[data-reveal-group] > *{opacity:1 !important;transform:none !important}
  .btn:hover{transform:none}
  .card:hover{transform:none}
  .ambient__blob,.ambient__grid,.hero__media img{animation:none !important}
  .hero__canvas{display:none}
  /* the board still renders, it just stops moving (one static frame) */
}