/* =====================================================================
   SNA — landing page (three-sector gateway), navy edition
   Dark-navy page, white SNA lockup on top, each gate = blurred sector
   photo with a light navy tint + the sector logo only. Fluid on every
   screen: the page scrolls instead of clipping on short viewports.
   ===================================================================== */
:root{
  --ink:#0A1631; --ink-2:#0F1F45; --bg:#1F3F7E; --line:rgba(255,255,255,.12);
  --text:#FFFFFF; --text-dim:#C7D0E3; --text-faint:#8C98B5;
  --green:#62A744; --green-hi:#8BD061;
  --energy:#D4AF37; --agri:#70A850; --eng:#A7A8AA;
  --wa:#128C7E;
  --font:"Inter","Segoe UI",Arial,sans-serif;
  --font-ar:"Cairo","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body.gateway{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5;overflow-x:hidden}
html[lang="ar"] body.gateway{font-family:var(--font-ar);font-weight:500}   /* Cairo, a step heavier (user, 2026-10-02 night) */
html[lang="ar"] img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}

/* ---- Top: SNA lockup + language ---- */
.gw-top{flex:1 1 auto;display:flex;flex-direction:column;position:relative;text-align:center;padding:0 0 10px}   /* grows: the free height goes between the bar and the lockup, so the lockup sits just above the cards (user, 2026-10-02 night) */   /* roomier (user, 2026-10-02: "فراغات لترتاح العين") */
/* slim transparent bar on top (user, 2026-10-02): the small white SNA mark at the start; at the end two quiet links
   (SNA Standards · Contact) beside the corner tools. No page menu: every page belongs to a sector and the gates lead there. */
.gw-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,2vw,28px);padding:clamp(10px,1.8vh,18px) clamp(20px,3vw,44px);min-height:44px;border-bottom:1px solid rgba(255,255,255,.14)}   /* a thin white hairline closes the header (user, 2026-10-03); the logo centred in the bar, the tools in the end corner (user, 2026-10-03: "توسيط الـ navigation") */
.gw-bar__logo{margin:0;line-height:0;grid-column:2;grid-row:1;justify-self:center}
.gw-bar__logo img{height:36px;width:auto;display:block}
.gw-bar .tools{grid-column:3;grid-row:1;justify-self:end}
/* general definition of the company between the bar and the cards (user, 2026-10-03: "تعريف عام عن شركة سنا في صفحة البداية") */
.gw-intro{margin:auto 0;padding:clamp(8px,1.6vh,20px) 20px 0}
.gw-intro p{max-width:760px;margin:0 auto;font-size:clamp(14px,1.1vw,16px);line-height:1.8;color:rgba(242,246,253,.84)}
/* the user's sentence as the page title (user, 2026-10-03): "حيث تلتقي الطاقة والمياه والزراعة في رؤية واحدة." + the line under it */
.gw-intro__title{max-width:980px;margin:0 auto clamp(6px,1.2vh,12px);font-size:clamp(22px,2.5vw,36px);line-height:1.35;font-weight:800;color:#fff;letter-spacing:-.01em}
html[lang="ar"] .gw-intro__title{line-height:1.5;letter-spacing:0}
.gw-intro__title span{color:var(--green-hi)}
/* "SNA divisions" above the cards, then a line diagram: one stem, a bar, three arrows down to the three division cards (user, 2026-10-03) */
.gw-tree{position:relative;width:min(100% - 2 * clamp(20px,4vw,64px),1180px);height:40px;margin:4px auto 0;--tree:rgba(255,255,255,.38);--gap:clamp(14px,1.6vw,24px);--col:calc((100% - 2 * var(--gap)) / 3)}   /* the arrows land on the card centres: half a column, the middle, and a column + gap from the end */
.gw-tree::before{content:"";position:absolute;left:50%;top:0;width:1.5px;height:14px;background:var(--tree);transform:translateX(-50%)}
.gw-tree::after{content:"";position:absolute;top:14px;left:calc(var(--col) / 2);right:calc(var(--col) / 2);height:1.5px;background:var(--tree)}
.gw-tree span{position:absolute;top:14px;width:1.5px;height:18px;background:var(--tree);transform:translateX(-50%)}
.gw-tree span:nth-child(1){left:calc(var(--col) / 2)}.gw-tree span:nth-child(2){left:50%}.gw-tree span:nth-child(3){left:calc(100% - var(--col) / 2)}
.gw-tree span::after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid rgba(255,255,255,.5);transform:translateX(-50%)}
/* the division names under the arrows, one per card column (user, 2026-10-03) */
.gw-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap,clamp(14px,1.6vw,24px));width:min(100% - 2 * clamp(20px,4vw,64px),1180px);margin:2px auto 8px;--gap:clamp(14px,1.6vw,24px);font-size:clamp(13px,1vw,15px);font-weight:600;color:rgba(255,255,255,.88);text-align:center;line-height:1.4}
html[lang="ar"] .gw-labels{font-weight:700}
.gw-sectors{margin:0;padding:clamp(6px,1.4vh,16px) 20px 0;font-size:clamp(18px,1.7vw,23px);font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.92)}
html[lang="ar"] .gw-sectors{font-weight:700;letter-spacing:0}
/* the alliances sentence sits under the three gates, in place of the per-sector lines (user, 2026-10-02) */
.gw-tagline{flex:0 0 auto;max-width:780px;margin:0 auto;padding:clamp(18px,2.8vh,30px) 20px clamp(10px,1.6vh,18px);text-align:center;font-size:clamp(14px,1.15vw,16.5px);line-height:1.8;color:rgba(242,246,253,.84);font-weight:400}
.lang{display:inline-flex;gap:6px;margin-top:clamp(12px,2vh,20px)}
.lang a{display:inline-block;min-width:46px;padding:6px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--text-dim);transition:.2s}
.lang a:hover{border-color:var(--green);color:#fff}
.lang a.is-active{background:var(--green);border-color:var(--green);color:#fff}

/* ---- Gates ---- */
/* smaller gate cards with air around them (user, 2026-10-02: "تصغير مربعات القطاعات... فراغات"): a centred row with gaps and rounded
   corners instead of the edge-to-edge band; the free height of the screen is split above the row and below the trust line */
.gates{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);width:min(100% - 2 * clamp(20px,4vw,64px),1180px);height:clamp(220px,32vh,380px);margin:0 auto}   /* the sector order follows the language (user, 2026-10-02 night, reversing the 2026-10-01 rule): Energy first from the right on Arabic pages, from the left on English pages */
.gate{position:relative;display:flex;flex-direction:column;background:transparent;opacity:0;transform:translateY(12px);animation:gateIn .5s var(--ease) forwards}
/* the box = blurred photo + logo; the meaning line sits UNDER the whole box (user, 2026-10-02) */
.gate__box{position:relative;isolation:isolate;overflow:hidden;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px);background:var(--ink-2);border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.32)}
.gate__desc{margin:0;padding:12px 18px 14px;text-align:center;font-size:clamp(13px,1.05vw,15px);line-height:1.5;color:rgba(242,246,253,.8);background:var(--ink);border-top:1px solid var(--line);transition:color .4s var(--ease)}
html[lang="ar"] .gate__desc{direction:rtl}
.gate:hover .gate__desc{color:#fff}
/* "a door opening": the photo brightens and grows a little, a soft glow in the sector colour rises behind the logo */
.gate__box::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(55% 45% at 50% 58%,var(--glow),transparent 72%);opacity:0;transition:opacity .6s var(--ease)}
.gate:hover .gate__box::before,.gate:focus-visible .gate__box::before{opacity:1}
.gate--energy{--glow:rgba(212,175,55,.26)}
.gate--agriculture{--glow:rgba(112,168,80,.28)}
.gate--solutions{--glow:rgba(167,168,170,.22)}
/* gentle ordered entrance: quick and small, the gates are usable from the first frame */
.gate:nth-child(1){animation-delay:.06s}.gate:nth-child(2){animation-delay:.16s}.gate:nth-child(3){animation-delay:.26s}
@keyframes gateIn{to{opacity:1;transform:none}}
.gate__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease),filter .6s var(--ease),opacity .5s var(--ease)}
.gate:hover .gate__img{transform:scale(1.1);filter:brightness(1.12)}
/* light tint only: the blurred photo stays visible behind the logo, and the gate fades into the navy page at top and bottom */
.gate__veil{position:absolute;inset:0;z-index:1;transition:opacity .5s var(--ease);background:linear-gradient(to bottom,rgba(10,22,49,.55) 0%,rgba(10,22,49,.24) 28%,rgba(10,22,49,.24) 70%,rgba(10,22,49,.6) 100%)}   /* a card now: the photo stays visible up to its rounded edges */
.gate:hover .gate__veil{opacity:.9}
.gate__logo{position:relative;z-index:2;width:min(64%,300px);transition:transform .5s var(--ease),opacity .5s var(--ease)}
/* hover (pointer devices): the card turns transparent and a preview of the sector's own first page shows through (user, 2026-10-03) */
.gate__preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.03);transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
/* and by themselves: every five seconds the cards cross-fade between the logo and the preview of the division's page (fx.js toggles .is-peek; user, 2026-10-03) */
.gate.is-peek .gate__img,.gate.is-peek .gate__veil,.gate.is-peek .gate__box::before{opacity:0}
.gate.is-peek .gate__logo{opacity:0;transform:translateY(-8px)}
.gate.is-peek .gate__preview{opacity:1;transform:scale(1)}
@media (hover:hover){
  .gate:hover .gate__img,.gate:focus-visible .gate__img{opacity:0}
  .gate:hover .gate__veil,.gate:focus-visible .gate__veil{opacity:0}
  .gate:hover .gate__box::before,.gate:focus-visible .gate__box::before{opacity:0}
  .gate:hover .gate__logo,.gate:focus-visible .gate__logo{opacity:0;transform:translateY(-8px)}
  .gate:hover .gate__preview,.gate:focus-visible .gate__preview{opacity:1;transform:scale(1)}
}
.gate__logo img{width:100%;height:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.35))}
.gate:hover .gate__logo{transform:translateY(-4px)}
.gate__box::after{content:"";position:absolute;z-index:3;left:50%;bottom:0;width:32%;height:4px;transform:translateX(-50%);background:var(--accent);border-radius:4px 4px 0 0;transition:width .5s var(--ease)}
.gate:hover .gate__box::after,.gate:focus-visible .gate__box::after{width:100%}
.gate:focus-visible{outline:3px solid var(--green-hi);outline-offset:-3px}
.gate--energy{--accent:var(--energy)}
.gate--agriculture{--accent:var(--agri)}
.gate--solutions{--accent:var(--eng)}

/* ---- Trust line under the gates (user, 2026-10-02): three short words, no numbers ---- */
.gw-trust{flex:1 0 auto;display:flex;justify-content:center;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px clamp(24px,3.5vw,56px);padding:clamp(10px,1.6vh,16px) 20px clamp(14px,2vh,20px);background:transparent;font-size:clamp(12.5px,.95vw,14px);letter-spacing:.02em;color:var(--text-dim)}
.gw-trust span{display:inline-flex;align-items:center;gap:8px}
.gw-trust svg{width:16px;height:16px;color:var(--green-hi);flex:none}

/* ---- Footer ---- */
.gw-footer{flex:0 0 auto;border-top:1px solid var(--line);padding:clamp(16px,2.4vh,24px) 20px;font-size:13px;color:var(--text-dim);background:transparent}
.gw-footer__inner{display:flex;align-items:center;justify-content:center;gap:12px 32px;flex-wrap:wrap;text-align:center}
.gw-footer__inner a:hover{color:var(--green-hi)}
.gw-footer .socials{display:flex;gap:8px}
.gw-footer .socials a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;transition:.2s}
.gw-footer .socials a:hover{background:var(--green);border-color:var(--green)}
.gw-footer .socials a:not([href]){opacity:.45;cursor:default;pointer-events:none}   /* social pages not live yet */
.gw-footer .socials svg{width:14px;height:14px}
.gw-footer__copy{color:var(--text-faint);width:100%}
@media (min-width:1180px){.gw-footer__copy{width:auto}}

/* ---- Floating WhatsApp ---- */
.wa-float{position:fixed;z-index:50;bottom:18px;inset-inline-end:18px;width:54px;height:54px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:26px;height:26px}

/* ---- Responsive ---- */
@media (max-width:900px){
  .gw-bar{gap:12px;padding:10px 16px}   /* phones: the same grid, logo centred, tools in the corner */
  .gw-bar__logo img{height:30px}
  .gw-tree,.gw-labels{--gap:10px;width:calc(100% - 32px)}   /* the diagram and the names stay on phones, over the three squares */
  .gw-labels{font-size:11.5px;line-height:1.3;margin:0 auto 6px}
  .gate__preview{object-position:center}   /* the phone previews are centred on the page title */
  .gw-top{padding-bottom:8px}
      .gw-intro{padding-top:12px}
  .gw-intro p{font-size:13.5px;line-height:1.7}
  .gw-intro__title{font-size:21px;margin-bottom:6px}
  .gw-sectors{padding-top:14px;font-size:17px}
  .gates{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:calc(100% - 32px);height:auto;margin:0 auto}   /* phones: three squares side by side under the diagram (user, 2026-10-03) */
  .gate__box{aspect-ratio:1/1;min-height:0;padding:10px;border-radius:12px}
  .gate__logo{width:min(80%,130px)}
  .gate__desc{color:#fff;font-size:13.5px;padding:9px 16px 11px}   /* always clear on phones; the three gates fit the first screen */
}
@media (max-width:520px){
  .gw-top{padding-bottom:14px}
  .gw-tagline{font-size:13px;line-height:1.65;padding:14px 18px 6px}
  .gate__box{padding:8px}
  .gate__logo{width:min(84%,120px)}
  .gw-trust{gap:6px 16px;font-size:12px}
  .gw-footer__inner{gap:8px 18px;font-size:12.5px}
  .wa-float{width:50px;height:50px;bottom:14px;inset-inline-end:14px}
}
@media (max-width:520px){.gw-bar .tools__calc{display:none}}   /* narrow phones: the dim calculator placeholder is hidden in the landing bar */
/* common laptops (≤ 800 px tall): trim a little so the page still fits without scrolling */
@media (min-width:901px) and (max-height:800px){
  .gw-top{padding-bottom:10px}
  .gw-bar{padding-block:clamp(8px,1.6vh,14px)}
  .gw-sectors{padding-top:clamp(4px,1.2vh,10px)}
  .gw-tagline{padding-top:12px}
  .gates{height:clamp(220px,30vh,380px)}
}
/* short landscape screens (rotated phones/tablets, small laptops): keep 3 columns, let the page scroll */
@media (min-width:901px) and (max-height:640px){
  .gw-top{padding-bottom:8px}
  .gw-bar{padding-block:8px;min-height:0}
  .gw-intro{padding-top:6px}
  .gw-intro p{font-size:13.5px;line-height:1.6}
  .gw-intro__title{font-size:22px;margin-bottom:4px}
  .gw-sectors{padding-top:4px;font-size:18px}
  .gw-tagline{padding:10px 20px 4px}
  .gates{height:clamp(200px,33vh,400px)}
  .gw-trust{padding:10px 20px}
  .gate__logo{width:min(60%,260px)}
}

/* a lighter navy with a soft light at the top, instead of the flat near-black navy
   (user, 2026-10-03: "mavi renk çok koyu geldi ... biraz çizim ekleyebilirsin rengi kırmak için") */
body.gateway{position:relative;isolation:isolate;background:radial-gradient(120% 85% at 50% 0%,#2B4F99 0%,#1F3F7E 50%,#19356F 100%) var(--bg)}
/* the faint white drawings, alive (user, 2026-10-03: "make the graphics alive ... the wheat as if wind is moving it slowly, the sun etc."):
   the sun turns slowly, the gear the other way, the three wheat stalks sway each at its own pace, the contour lines drift, the dots twinkle */
.gw-deco{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.gw-deco img{position:absolute;display:block;max-width:none;height:auto}
.gw-deco__sun{right:-170px;top:-150px;width:480px;animation:gwSpin 90s linear infinite}
.gw-deco__panels{left:-40px;top:76px;width:440px;animation:gwFloat 14s ease-in-out infinite alternate}   /* solar panels under the sun (user, 2026-10-03: "ضع رسومات ألواح الطاقة") */
.gw-deco__gear{left:-120px;top:44%;width:330px;animation:gwSpin 70s linear infinite reverse}
.gw-deco__contour{left:-300px;bottom:-260px;width:900px;animation:gwFloat 16s ease-in-out infinite alternate}
.gw-deco__wheat{position:absolute;right:1.5%;bottom:70px;width:200px;aspect-ratio:420/660}
.gw-deco__wheat img{inset:0;width:100%;height:100%;animation:gwSway 5.2s ease-in-out infinite alternate}
.gw-deco__wheat img:nth-child(1){transform-origin:35.7% 97%;animation-duration:5.6s;animation-delay:-1.2s}
.gw-deco__wheat img:nth-child(2){transform-origin:48.8% 97%;animation-duration:4.7s;animation-delay:-3s}
.gw-deco__wheat img:nth-child(3){transform-origin:62.4% 97%;animation-duration:6.3s;animation-delay:-.4s}
@keyframes gwSpin{to{transform:rotate(360deg)}}
@keyframes gwSway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.8deg)}}
@keyframes gwFloat{from{transform:translate(0,0)}to{transform:translate(22px,-14px)}}
@keyframes gwTwinkle{from{opacity:.4}to{opacity:1}}
/* the names above the cards are gone too (user, 2026-10-03): a little air between "SNA Divisions" and the cards */
.gw-sectors{margin-bottom:clamp(8px,1.4vh,14px)}
@media (max-width:900px){
  body.gateway{background:radial-gradient(130% 70% at 50% 0%,#2B4F99 0%,#1F3F7E 55%,#19356F 100%) var(--bg)}
  .gw-deco__sun{right:-120px;top:-110px;width:300px}
  .gw-deco__contour{left:-220px;bottom:-200px;width:600px}
  .gw-deco__dots,.gw-deco__gear{display:none}
  .gw-deco__wheat{right:3%;left:auto;bottom:150px;width:84px}
  .gw-deco__panels{left:-30px;top:auto;bottom:196px;width:230px}
  .gw-sectors{margin-bottom:10px}
}

/* ==== nexus start ==== */
/* the convergence scene above the title (user, 2026-10-04: "a strong animation: SNA brought energy, agriculture and water
   together, so the visitor understands the merger by seeing it"): the sun, the drop and the wheat appear in the order of the
   title, each lighting its word; they send their light into one point, where SNA's mark opens inside a ring of their three
   colours and the three words take one colour ("one vision"). Then SNA's mark charges and sends three lines down through the
   title to the three division cards, which light up as they arrive (user, 2026-10-04: "when the lines connect to the green tick
   it charges, then exports lines that pass through the words to the sectors"; the paths follow the layout, assets/js/nexus.js).
   Then all the lines stay still: no more waves from the three circles, nor from SNA to the divisions (user, 2026-10-04).
   Plays whatever the OS motion setting (the owner's choice for the site). */
.nexus{margin:0 auto clamp(4px,1vh,10px);line-height:0}
/* its height takes what the screen leaves free, so the division cards stay on the first screen (the English title needs two lines) */
.nexus svg{display:block;margin:0 auto;height:clamp(120px,min(24vh,calc(100vh - 584px)),270px);width:auto;max-width:100%;overflow:visible}
html[lang="en"] .nexus svg{height:clamp(120px,min(24vh,calc(100vh - 615px)),270px)}

/* the streams: drawn from each element to the meeting point, a comet of light at their head */
.nx-base{fill:none;stroke-width:2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:nxDraw var(--dur) cubic-bezier(.55,.05,.85,.5) var(--t0) forwards,nxDim 1s ease 4.6s forwards}
/* the light runs along them once; after the intro the lines stay still (user, 2026-10-04: "after the animation finishes stop the
   lighting waves that come from the 3 circles and keep its lines") */
.nx-c{fill:none;stroke-linecap:round;stroke-dasharray:var(--d) 4000px;stroke-dashoffset:var(--d);opacity:0;animation:nxRun var(--dur) cubic-bezier(.55,.05,.85,.5) var(--t0) forwards,nxRunFade var(--dur) linear var(--t0) forwards}
@keyframes nxDraw{to{stroke-dashoffset:0}}
@keyframes nxDim{to{opacity:.5}}
@keyframes nxRun{to{stroke-dashoffset:calc(var(--d) - var(--len))}}
@keyframes nxRunFade{0%{opacity:0}8%{opacity:1}90%{opacity:1}100%{opacity:0}}

/* the three elements: they pop in one after another, glow, and send a pulse when their light leaves */
.nx-node{opacity:0;animation:nxPop .6s cubic-bezier(.3,1.45,.55,1) var(--tn) forwards}
.nx-glow{opacity:0;animation:nxGlow 1.4s ease-out var(--tn) forwards}
.nx-pulse{animation:nxPulse .8s ease-out var(--t0) forwards}
.nx-rays{animation:nxSpin 26s linear infinite}
.nx-ripple{animation:nxRipple 2.8s ease-out 1s infinite}
.nx-sway{animation:nxSway 3.6s ease-in-out infinite alternate}
@keyframes nxPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes nxGlow{0%{opacity:0}25%{opacity:1}100%{opacity:.5}}
@keyframes nxPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@keyframes nxSpin{to{transform:rotate(360deg)}}
@keyframes nxRipple{0%{opacity:.9;transform:scale(.45)}100%{opacity:0;transform:scale(1.6)}}
@keyframes nxSway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* the meeting point: a flash, two rings, sparks, then SNA's mark inside the ring of the three colours */
.nx-aura{animation:nxAura 1.2s ease-out 1.68s forwards,nxAuraCharge 1.2s ease-in-out 2.9s,nxBeatA 1.2s ease-out 5.404s infinite}
.nx-flash{animation:nxFlash .9s cubic-bezier(.2,.7,.2,1) 1.7s forwards}
.nx-streak{animation:nxStreak .85s cubic-bezier(.2,.7,.2,1) 1.72s forwards}
.nx-shock{animation:nxShock 1s cubic-bezier(.2,.7,.2,1) 1.74s forwards}
.nx-shock + .nx-shock{animation-delay:1.92s}
.nx-spark{opacity:0;animation:nxSpark .9s cubic-bezier(.15,.7,.3,1) 1.74s forwards}
.nx-core{opacity:0;animation:nxPop .6s cubic-bezier(.3,1.5,.55,1) 1.7s forwards}
.nx-tick{opacity:0;animation:nxPop .55s cubic-bezier(.3,1.6,.55,1) 1.84s forwards,nxKick .5s ease-out 3.45s}
.nx-beat{animation:nxBeat 1.2s ease-out 5.404s infinite}
.nx-arc{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:nxDraw .75s cubic-bezier(.2,.7,.2,1) 1.9s forwards}
.nx-ring{animation:nxSpin 40s linear 2.6s infinite}
.nx-orbit{animation:nxFadeIn .8s ease 2.1s forwards,nxSpin 90s linear 2.1s infinite reverse}
@keyframes nxAura{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.05)}100%{opacity:.5;transform:scale(1)}}
@keyframes nxBeatA{0%{opacity:.5}8%{opacity:.8}50%,100%{opacity:.5}}
@keyframes nxFlash{0%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes nxStreak{0%{opacity:0;transform:scaleX(.04)}14%{opacity:1}100%{opacity:0;transform:scaleX(1.15)}}
@keyframes nxShock{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes nxSpark{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes nxBeat{0%{transform:scale(1)}8%{transform:scale(1.05)}50%,100%{transform:scale(1)}}
@keyframes nxFadeIn{to{opacity:1}}

/* the title: each word lights in its element's colour as it appears, and all three end in one colour with the meeting */
.nxw--e{animation:nxWE 2.4s ease forwards}
.nxw--w{animation:nxWW 2.4s ease forwards}
.nxw--a{animation:nxWA 2.4s ease forwards}
.gw-intro__title > span{animation:nxJoin 2.4s ease forwards,nxTextGlow 1.4s ease-out 1.72s backwards}   /* the joining words (و / and) stay white until the meeting */
@keyframes nxJoin{0%,73%{color:#fff}88%,100%{color:#8BD061}}
@keyframes nxWE{0%,4%{color:#fff}17%,73%{color:#F2C94C}88%,100%{color:#8BD061}}
@keyframes nxWW{0%,11%{color:#fff}23%,73%{color:#5BC8F5}88%,100%{color:#8BD061}}
@keyframes nxWA{0%,18%{color:#fff}30%,100%{color:#8BD061}}
@keyframes nxTextGlow{0%{text-shadow:0 0 0 rgba(139,208,97,0)}25%{text-shadow:0 0 22px rgba(139,208,97,.75)}100%{text-shadow:0 0 0 rgba(139,208,97,0)}}

/* SNA charges (2.65-3.45 s): a ring of light closes around the mark, the mark fills with light, the glow around it swells;
   then it lets go: the ring bursts outward, the mark kicks, and the three lines leave for the divisions */
.nx-charge{stroke-dasharray:1 1;stroke-dashoffset:1;animation:nxCharge .8s cubic-bezier(.4,0,.8,.6) 2.65s forwards,nxRelease .5s ease-out 3.45s forwards}
.nx-charge-glow{animation:nxChargeGlow 1.6s ease-in-out 2.65s forwards}
.nx-release{animation:nxShock 1s cubic-bezier(.2,.7,.2,1) 3.45s forwards}
@keyframes nxCharge{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes nxRelease{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
@keyframes nxChargeGlow{0%{opacity:0}50%{opacity:.95}62%{opacity:.25}100%{opacity:.18}}
@keyframes nxAuraCharge{0%{opacity:.5;transform:scale(1)}46%{opacity:.95;transform:scale(1.12)}100%{opacity:.5;transform:scale(1)}}
@keyframes nxKick{0%{transform:scale(1)}30%{transform:scale(1.16)}100%{transform:scale(1)}}

/* the lines to the divisions: behind the page content (the title and "SNA Divisions" stay on top), from SNA's mark to the top of
   each card; nexus.js draws them and runs their light. The words glow as the light passes through them, and each card lights up
   in its colour when its line arrives */
.nx-out{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.nx-out path{fill:none}
.nx-obase{stroke-width:2}
.nx-oc{stroke-linecap:round;opacity:0}   /* the light runs once; no repeating waves to the divisions (user, 2026-10-04) */
.nx-otail{stroke-width:6.5;stroke-opacity:.5}
.nx-ohead{stroke:#fff;stroke-width:3}
.gw-intro__title{animation:nxPass .9s ease-out 3.72s}
.gw-sectors > span{animation:nxPass .9s ease-out 4.02s}
@keyframes nxPass{0%,100%{text-shadow:0 0 0 rgba(139,208,97,0)}30%{text-shadow:0 0 20px rgba(139,208,97,.75),0 0 2px rgba(255,255,255,.6)}}
.gate--energy{--lit:rgba(242,201,76,.8)}
.gate--agriculture{--lit:rgba(139,208,97,.8)}
.gate--solutions{--lit:rgba(220,222,225,.7)}
.gate__box{animation:nxCard 1.3s ease-out 4.3s}
.gate__box::after{animation:nxBar 1.5s cubic-bezier(.2,.7,.2,1) 4.3s}
@keyframes nxCard{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.32)}22%{box-shadow:0 0 0 2px var(--lit),0 0 38px var(--lit),0 18px 40px rgba(0,0,0,.32)}}
@keyframes nxBar{0%,100%{width:32%}35%,55%{width:100%}}

@media (max-width:900px){.nexus svg,html[lang="en"] .nexus svg{height:auto;width:min(100%,430px)}}
/* ==== nexus end ==== */