/* =========================================================================
   الصعود الاستثنائي — واجهات الصفحات (Hero) · الإصدار 2
   صور الشركة + هوية الشعار الخضراء (ليموني → أخضر → فيروزي)
   ========================================================================= */
:root{
  --br-lime:#B3D707; --br-lime-2:#90D609; --br-green:#3AD705; --br-green-2:#00D83F; --br-mint:#00D56D; --br-teal:#00C6B8;
  --br-grad:linear-gradient(225deg,#00C6B8 0%,#00D56D 30%,#3AD705 62%,#B3D707 100%);
  --br-grad-text:linear-gradient(270deg,#C9EC3A 0%,#7BE02A 34%,#16D873 68%,#19CDBE 100%);
  --hx-ink:#0B2724; --hx-deep:#0A2A25; --hx-forest:#0E3B33;
}

/* ---------- shared shell ---------- */
.hx{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--hx-ink)}
.hx .container{position:relative;z-index:3}
.hx__media-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hx__media-bg img{width:100%;height:100%;object-fit:cover}
.hx__grain{position:absolute;inset:0;z-index:2;background-image:var(--noise);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.hx__glow{position:absolute;z-index:1;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:hxFloat 16s ease-in-out infinite alternate}
.hx__glow--a{width:520px;height:520px;background:radial-gradient(circle,rgba(58,215,5,.35),transparent 65%);top:-160px;inset-inline-start:-120px}
.hx__glow--b{width:460px;height:460px;background:radial-gradient(circle,rgba(0,198,184,.30),transparent 65%);bottom:-200px;inset-inline-end:8%;animation-delay:-6s}
@keyframes hxFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,30px,0) scale(1.12)}}

/* brand gradient words inside heroes */
.hx .gold-text,.hx .grad-text{background:var(--br-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:hxSheen 9s ease-in-out infinite}
@keyframes hxSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hx .swash svg{color:var(--br-green)}
.hx .swash svg path{stroke-dasharray:120;stroke-dashoffset:120}
.hx.is-ready .swash svg path{animation:hxDraw 1.4s 1.1s var(--ease-out) forwards}
@keyframes hxDraw{to{stroke-dashoffset:0}}

/* brand buttons inside heroes */
.hx .btn--gold{background:var(--br-grad);color:#04241C;box-shadow:0 18px 40px -18px rgba(58,215,5,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.hx .btn--gold:hover{box-shadow:0 24px 50px -18px rgba(0,213,109,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.hx .btn--glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hx .btn--glass:hover{background:rgba(255,255,255,.14);border-color:rgba(122,224,42,.6)}
.hx .chip--glass{background:rgba(6,28,25,.45);border:1px solid rgba(122,224,42,.38);color:#E9F7DF;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hx .chip--glass .icon{color:var(--br-lime)}
.hx .chip--glass .dot{background:var(--br-green-2)}
.hx .breadcrumb{color:rgba(255,255,255,.7);margin-bottom:24px}
.hx .breadcrumb a{color:rgba(255,255,255,.82)}
.hx .breadcrumb a:hover{color:#C9EC3A}
.hx .breadcrumb [aria-current]{color:#C9EC3A}
.hx .hero-chip{background:rgba(6,28,25,.42);border:1px solid rgba(255,255,255,.12);color:#E3EEEA;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,transform .3s var(--ease-out)}
.hx .hero-chip:hover{border-color:rgba(122,224,42,.55);transform:translateY(-2px)}
.hx .hero-chip .icon{color:var(--br-lime)}

/* logo spiral (outline + travelling light) */
.hx-mark{position:absolute;z-index:1;pointer-events:none;overflow:visible}
.hx-mark .m-body{fill:none;stroke:url(#hxGrad);stroke-width:50;stroke-linejoin:round;opacity:.09;stroke-dasharray:1000;stroke-dashoffset:1000}
.hx.is-ready .hx-mark .m-body{animation:hxMarkDraw 3.2s .3s var(--ease-out) forwards}
.hx-mark .m-line{fill:none;stroke:url(#hxGrad);stroke-width:1.6;opacity:.55;stroke-dasharray:1000;stroke-dashoffset:1000}
.hx.is-ready .hx-mark .m-line{animation:hxMarkDraw 3.6s .1s var(--ease-out) forwards}
.hx-mark .m-run{fill:none;stroke:#E8FFB0;stroke-width:3;stroke-linecap:round;stroke-dasharray:70 930;stroke-dashoffset:1000;opacity:.9;filter:drop-shadow(0 0 6px rgba(201,236,58,.95))}
.hx.is-ready .hx-mark .m-run{animation:hxRun 7s 2.8s linear infinite}
@keyframes hxMarkDraw{to{stroke-dashoffset:0}}
@keyframes hxRun{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}

/* word-by-word title reveal (JS adds .w spans) */
.hx [data-split]:not(.is-split){opacity:0;animation:hxFailsafe .6s 2.6s forwards}
.hx [data-split] .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(1.5deg);filter:blur(8px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms + .15s)}
.hx.is-ready [data-split] .w{opacity:1;transform:none;filter:none}

/* ============================== HOME ============================== */
.hx--home{--pw:min(45vw,840px);--off:max(24px,calc((100vw - var(--container)) / 2 + 24px));min-height:max(100svh,720px);display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 44px;background:radial-gradient(1100px 700px at 100% 0%,#0F3D35 0%,transparent 60%),var(--hx-ink)}
.hx--home .hx-mark{width:min(40vw,560px);inset-inline-start:-8vw;top:54%;transform:translateY(-50%)}
.hx--home .hx-mark .m-body{opacity:.06}
.hx--home .hx-mark .m-line{opacity:.28}
.hx--home .hx__glow--a{top:auto;bottom:-220px;inset-inline-start:20%}
.hx--home .hx__glow--b{top:-120px;bottom:auto;inset-inline-end:auto;inset-inline-start:30%}
/* photo panel (left in RTL) */
.hx__panel{position:absolute;z-index:1;top:calc(var(--header-h) + 26px);bottom:26px;inset-inline-end:0;width:var(--pw)}
.hx__slides{position:absolute;inset:0;overflow:hidden;border-radius:0 44px 46% 0/0 44px 30% 0;box-shadow:0 60px 120px -50px rgba(0,0,0,.9);background:#0B2A25;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-out) .1s}
.hx--home.is-ready .hx__slides{clip-path:inset(0 0 0 0)}
.hx__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s ease;will-change:opacity}
.hx__slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.12);transform-origin:var(--pos,50% 50%)}
.hx__slide.is-on{opacity:1}
.hx__slide.is-on img{animation:hxKen 9s ease-out forwards}
@keyframes hxKen{from{transform:scale(1.13)}to{transform:scale(1.01)}}
.hx__slides::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,28,25,.92) 0%,rgba(6,28,25,.35) 26%,transparent 46%),linear-gradient(270deg,rgba(6,28,25,.55),transparent 22%)}
.hx__panel .hx__outline{top:-14px;right:-14px;width:100%;height:100%}
.hx.is-ready .hx__panel .hx__outline path{animation-delay:1s}
.hx--home .hx__shade{display:none}
.hx--home .hx__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--pw) - var(--off) + 56px);gap:0;align-items:center}
.hx--home .hx__content{max-width:680px;padding-inline-end:clamp(12px,2vw,32px)}
.hx--home .hero__title{margin:20px 0 18px;font-size:clamp(2.2rem,1rem + 2.9vw,3.9rem);line-height:1.3}
.hx--home .hero__title .l2{display:block}
.hx--home .hero__lead{color:#DCE9E5;margin-bottom:0}
.hx--home .rotator{margin:22px 0 22px}
.hx--home .hero__badges{margin-bottom:28px}
.hx--home .rotator{color:#BFD3CD}
.hx--home .rotator .icon{color:var(--br-lime)}
.hx--home .rotator__words span{color:#C9EC3A}
.hx--home .hero__badges{color:#C9DAD5}
.hx--home .hero__badges .icon{color:var(--br-lime)}
.hx__cards{position:relative;align-self:stretch;min-height:420px}
.hx--home .float-card{background:rgba(6,28,25,.66);border:1px solid rgba(122,224,42,.34);box-shadow:0 30px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.hx--home .float-card b{color:#D6F35B}
.hx--home .float-card .icon-badge{background:linear-gradient(135deg,rgba(179,215,7,.18),rgba(0,198,184,.18));border:1px solid rgba(122,224,42,.35);color:#C9EC3A}
.hx--home .fc-1{top:4%;inset-inline-start:10px;inset-inline-end:auto}
.hx--home .fc-2{top:60%;inset-inline-start:70px;inset-inline-end:auto}
.hx--home .fc-3{top:80%;bottom:auto;inset-inline-start:-6px;inset-inline-end:auto}
.hx--home .float-card{opacity:0;translate:0 24px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),transform .6s var(--ease-out)}
.hx--home.is-ready .float-card{opacity:1;translate:0 0;animation:bob 7s ease-in-out infinite}
.hx--home.is-ready .fc-1{transition-delay:1.1s}.hx--home.is-ready .fc-2{transition-delay:1.3s;animation-delay:-2.5s}.hx--home.is-ready .fc-3{transition-delay:1.5s;animation-delay:-4.5s}
/* ascent stepper = slide navigation (over the photo) */
.hx__steps{position:absolute;z-index:3;inset-inline:28px 64px;bottom:26px}
.hx__steps ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0;padding:0}
.hx__step{display:flex;flex-direction:column;gap:9px;text-align:start;color:rgba(255,255,255,.66);font-weight:700;font-size:.88rem;line-height:1.3;transition:color .4s;width:100%;padding:6px 0}
.hx__step:hover,.hx__step.is-on{color:#fff}
.hx__step .n{font-family:var(--f-num);font-size:.9rem;color:#C9EC3A;margin-inline-end:6px;opacity:.85}
.hx__step .bar{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.hx__step .bar i{position:absolute;inset:0;background:var(--br-grad);transform:scaleX(0);transform-origin:right}
.hx__step.is-done .bar i{transform:scaleX(1)}
.hx__step.is-on .bar i{animation:hxFill var(--slide-dur,7s) linear forwards}
.hx.is-paused .hx__step.is-on .bar i{animation-play-state:paused}
@keyframes hxFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hx--home .scroll-hint{display:none}

/* ============================== INNER PAGES ============================== */
.hx--page{padding:calc(var(--header-h) + 70px) 0 clamp(64px,7vw,96px)}
.hx--page .hx__media-bg img{opacity:.2;filter:blur(18px) saturate(.9);transform:scale(1.2)}
.hx--page .hx__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(900px 520px at 85% 0%,rgba(0,213,109,.16),transparent 60%),
  linear-gradient(270deg,rgba(6,28,25,.97) 0%,rgba(6,28,25,.9) 45%,rgba(6,28,25,.72) 100%),
  linear-gradient(0deg,var(--hx-ink) 0%,rgba(6,28,25,0) 40%)}
.hx--page .hx-mark{width:420px;inset-inline-start:-110px;bottom:-140px;opacity:.9}
.hx__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.hx__content{position:relative}
.hx--page .h1{margin:16px 0 18px}
.hx--page .lead{color:#D6E4E0;max-width:620px}
.hx--page .page-hero__icon{margin:0 0 20px;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,rgba(179,215,7,.14),rgba(0,198,184,.14));border:1px solid rgba(122,224,42,.4);color:#C9EC3A}
.hx--page .hero-chips{justify-content:flex-start;margin-top:28px}
.hx--page .btn-row{justify-content:flex-start!important}
.hx--page .search-lg{margin-inline:0;max-width:560px}

/* framed company photo (logo-leaf shape) */
.hx__media{position:relative;aspect-ratio:5/4;max-width:600px;width:100%;justify-self:end}
.hx__frame{position:absolute;inset:0;overflow:hidden;border-radius:34px 34px 34px 46%;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);clip-path:inset(0 0 100% 0 round 34px);transition:clip-path 1.5s var(--ease-out) .2s;background:#0B2A25}
.hx.is-ready .hx__frame{clip-path:inset(-90px -90px -90px -90px round 0)}
.hx__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 2.4s var(--ease-out) .2s}
.hx.is-ready .hx__frame img{transform:scale(1.04);animation:hxDrift 22s 2.6s ease-in-out infinite alternate}
@keyframes hxDrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-14px,-8px,0)}}
.hx__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:linear-gradient(200deg,rgba(0,198,184,.10),transparent 40%),linear-gradient(0deg,rgba(6,28,25,.38),transparent 40%);pointer-events:none}
.hx__outline{position:absolute;top:-18px;right:-18px;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.hx__outline rect,.hx__outline path{fill:none;stroke:url(#hxGrad);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000}
.hx.is-ready .hx__outline path{animation:hxMarkDraw 2.6s .6s var(--ease-out) forwards}
.hx__badge{position:absolute;z-index:2;inset-inline-start:-26px;bottom:34px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 20px;border-radius:18px;background:rgba(6,28,25,.72);border:1px solid rgba(122,224,42,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 50px -24px rgba(0,0,0,.8);opacity:0;translate:0 18px;transition:opacity .9s var(--ease-out) 1.2s,translate .9s var(--ease-out) 1.2s;animation:bob 8s 2.2s ease-in-out infinite}
.hx.is-ready .hx__badge{opacity:1;translate:0 0}
.hx__badge img{width:38px;height:38px}
.hx__badge b{display:block;font-size:.95rem;line-height:1.3}
.hx__badge small{display:block;color:#B9CCC6;font-size:.78rem;line-height:1.4}
.hx__dots{position:absolute;z-index:2;top:-28px;inset-inline-end:-28px;width:120px;height:120px;background-image:radial-gradient(rgba(201,236,58,.55) 1.4px,transparent 1.6px);background-size:16px 16px;mask-image:radial-gradient(circle,#000 40%,transparent 72%);-webkit-mask-image:radial-gradient(circle,#000 40%,transparent 72%);animation:hxFloat 12s ease-in-out infinite alternate}
.hx__edge{position:absolute;inset-inline:0;bottom:0;height:2px;z-index:4;background:var(--br-grad);transform:scaleX(0);transform-origin:right;transition:transform 1.8s var(--ease-out) .4s;opacity:.85}
.hx.is-ready .hx__edge{transform:scaleX(1)}
.hx--compact .hx__media{aspect-ratio:16/10;max-width:520px}

/* entrance for hero content */
.hx [data-hx]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,.2s)}
.hx.is-ready [data-hx]{opacity:1;transform:none}

/* ---------- article hero (split, article cover in the frame) ---------- */
.hx.article-hero::after,.hx.article-hero::before{display:none}
.hx.article-hero .container{max-width:var(--container)}
.hx--article h1{font-size:clamp(1.7rem,1.1rem + 1.9vw,2.75rem);line-height:1.4;margin:16px 0 20px}
.hx--article .article-meta{color:#CFDDD9}
.hx--article .article-meta .icon{color:var(--br-lime)}
.hx--article .author{border-top-color:rgba(255,255,255,.12)}
.hx--article .author .member__avatar{background:linear-gradient(135deg,rgba(179,215,7,.16),rgba(0,198,184,.16));border:1px solid rgba(122,224,42,.4);color:#C9EC3A}
@media (min-width:961px){.hx--article .hx__media{aspect-ratio:4/3}}

/* ---------- 404 ---------- */
.nf{position:relative;isolation:isolate}
.nf__bg{position:absolute;inset:0;z-index:-1}
.nf__bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.nf__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 500px at 50% 40%,rgba(6,28,25,.55),rgba(6,28,25,.95))}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hx--home{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:calc(var(--header-h) + 16px) 0 56px}
  .hx__panel{order:-1;position:relative;top:auto;bottom:auto;width:auto;height:min(62vh,560px);margin:0 0 38px;inset-inline-end:auto}
  .hx__slides{border-radius:0 0 0 38%/0 0 0 22%}
  .hx__panel .hx__outline{display:none}
  .hx--home .hx__inner{grid-template-columns:1fr;min-height:0}
  .hx--home .hx__content{max-width:none;padding:0}
  .hx__cards{display:flex;flex-wrap:wrap;gap:12px;min-height:0;height:auto;margin-top:30px}
  .hx--home .float-card{position:relative;inset:auto!important;animation:none!important;flex:1 1 200px}
  .hx--home .hx-mark{width:90vw;inset-inline-start:-30vw;top:auto;bottom:-10vw;transform:none;opacity:.6}
  .hx__steps{inset-inline:20px}
  .hx--home .scroll-hint{display:none}
}
@media (max-width:960px){
  .hx__grid{grid-template-columns:1fr}
  .hx__media{justify-self:stretch;max-width:none;aspect-ratio:16/10;margin-top:8px}
  .hx--page .hx-mark{display:none}
  .hx__badge{inset-inline-start:14px;bottom:14px}
  .hx__dots{display:none}
  .hx__outline{top:-10px;right:-10px}
}
@media (max-width:760px){
  .hx__panel{height:min(52vh,420px);margin-bottom:30px}
  .hx__steps{bottom:14px;inset-inline:14px}
  .hx__steps ol{gap:6px}
  .hx__step{font-size:.72rem;gap:7px}
  .hx__step .n{display:none}
  .hx--page{padding-top:calc(var(--header-h) + 44px)}
  .hx__frame{border-radius:24px 24px 24px 38%}
  .hx__badge{padding:9px 12px;gap:9px}
  .hx__badge img{width:30px;height:30px}
  .hx .hero-chips{gap:8px;margin-top:22px}
  .hx .hero-chip{padding:8px 12px;border-radius:12px;font-size:.86rem;gap:7px}
  .hx .page-hero__icon{width:54px;height:54px;border-radius:15px;margin-bottom:14px}
  .hx .page-hero__icon .icon{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .hx [data-split] .w,.hx [data-hx],.hx--home .float-card{opacity:1!important;transform:none!important;filter:none!important;translate:none!important}
  .hx__frame{clip-path:none!important}
  .hx__frame img,.hx__slide img{transform:none!important;animation:none!important}
  .hx__slides{clip-path:none!important}
  .hx-mark .m-body,.hx-mark .m-line,.hx__outline rect,.hx__outline path{stroke-dashoffset:0!important;animation:none!important}
  .hx-mark .m-run{display:none}
  .hx__edge{transform:none!important}
  .hx__badge{opacity:1!important;translate:none!important}
}
.no-js .hx [data-split] .w,.no-js .hx [data-hx],.no-js .hx--home .float-card,.no-js .hx__badge{opacity:1;transform:none;filter:none;translate:none}
.no-js .hx__frame,.no-js .hx__slides{clip-path:none}
@media print{.hx:not(.article-hero){display:none!important}.hx.article-hero .hx__media,.hx.article-hero .hx__media-bg,.hx.article-hero .hx-mark,.hx.article-hero .hx__glow,.hx.article-hero .hx__shade,.hx.article-hero .hx__grain,.hx.article-hero .hx__edge{display:none!important}.hx.article-hero .hx__grid{display:block}.hx.article-hero [data-hx],.hx.article-hero [data-split],.hx.article-hero .w{opacity:1!important;transform:none!important;filter:none!important}.hx.article-hero,.hx.article-hero h1,.hx.article-hero .author b{color:#000!important}}
/* failsafe: never leave hero content hidden if the script is slow or blocked */
.hx:not(.is-ready) [data-hx],.hx:not(.is-ready) [data-split] .w,.hx--home:not(.is-ready) .float-card,.hx:not(.is-ready) .hx__badge{animation:hxFailsafe .6s 2.6s forwards}
.hx:not(.is-ready) .hx__frame,.hx:not(.is-ready) .hx__slides{animation:hxFailsafeClip .8s 2.6s forwards}
@keyframes hxFailsafe{to{opacity:1;transform:none;filter:none;translate:0 0}}
@keyframes hxFailsafeClip{to{clip-path:inset(-90px -90px -90px -90px round 0)}}

/* ---------- first-visit brand intro (once per session, CSS-only exit) ---------- */
.intro{display:none}
.exa-intro .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:10000;background:radial-gradient(900px 600px at 50% 45%,#10423A 0%,#0B2724 55%,#071E1B 100%);animation:introOut .7s 1.55s var(--ease-out) forwards;pointer-events:none}
.intro__in{display:flex;flex-direction:column;align-items:center;gap:22px;animation:introLift .7s 1.55s var(--ease-out) forwards}
.intro__mark{width:96px;height:96px;overflow:visible}
.intro__mark path{fill:none;stroke:url(#inGrad);stroke-width:50;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:hxMarkDraw 1.15s .1s cubic-bezier(.65,0,.35,1) forwards;filter:drop-shadow(0 0 18px rgba(58,215,5,.35))}
.intro__name{text-align:center;opacity:0;transform:translateY(10px);animation:introName .6s .75s var(--ease-out) forwards}
.intro__name b{display:block;font-family:var(--f-display);font-size:1.05rem;color:#fff;font-weight:600}
.intro__name small{display:block;font-size:.72rem;letter-spacing:.14em;color:#9FC1B8;margin-top:4px;direction:ltr}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@keyframes introLift{to{transform:translateY(-18px) scale(.96)}}
@keyframes introName{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.exa-intro .intro{display:none}}
@media print{.intro{display:none!important}}
.hx:not(.is-ready) .swash svg path{animation:hxDraw 1s 2.6s forwards}
@media (prefers-reduced-motion:reduce){.hx .swash svg path{stroke-dashoffset:0!important;animation:none!important}}
.no-js .hx [data-split]{opacity:1;animation:none}
@media (max-width:1100px){.hx--home .hx-mark .m-line,.hx--home .hx-mark .m-run{display:none}.hx--home .hx-mark .m-body{opacity:.05}}
@media (max-width:760px){.hx-mark{display:none}}