/* ==========================================================================
   iTecknologi.ae — v2 dark theme
   Palette derived directly from the 14 tiles of the iTecknologi mosaic mark.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Space Grotesk';font-weight:400;font-display:swap;src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

/* ---------- Tokens ---------- */
:root{
  /* brand — sampled from the mark */
  --blue:#1B75BC;   --blue-lt:#29ABE2;  --blue-dp:#0066B3;
  --teal:#00A79D;   --orange:#F15A29;   --magenta:#EC008C;
  --purple:#92278F; --indigo:#2B3990;   --green:#39B54A;
  --amber:#F7941D;  --crimson:#B92025;  --violet:#662D91;
  --emerald:#009444;--cyan:#00AEEF;

  /* surfaces */
  --bg:#07080C;
  --bg-2:#0A0C12;
  --bg-3:#0E111A;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);

  /* ink */
  --ink:#F4F6FA;
  --ink-2:#B4BCCC;
  --ink-3:#7B849A;
  --ink-4:#4E566B;

  --grad-hero:linear-gradient(100deg,#29ABE2 0%,#00A79D 34%,#39B54A 66%,#F7941D 100%);
  --grad-blue:linear-gradient(135deg,#29ABE2,#1B75BC);
  --grad-warm:linear-gradient(135deg,#F7941D,#F15A29 52%,#EC008C);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --nav-h:72px;
  --pad:clamp(64px,7.6vw,132px);
  --wrap:1280px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:'Inter',system-ui,sans-serif;font-size:clamp(15px,1.02vw,17px);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}

/* film grain — sits above everything, ignores pointers */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;color:var(--ink);
  font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:0 0 .6em;
}
h1{font-size:clamp(2.7rem,6.6vw,6.1rem)}
h2{font-size:clamp(2.05rem,4.1vw,3.65rem)}
h3{font-size:clamp(1.18rem,1.6vw,1.5rem);letter-spacing:-.022em;line-height:1.2}
p{margin:0 0 1.1em}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--blue-lt);color:#04060a}
:focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px;border-radius:6px}

.skip{position:fixed;top:-100px;inset-inline-start:16px;z-index:10000;background:var(--blue);color:#fff;padding:12px 20px;border-radius:8px;font-weight:600}
.skip:focus{top:16px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.sec{position:relative;padding-block:var(--pad)}
.sec--tight{padding-block:calc(var(--pad)*.52)}
.sec--hero-in{padding-block:calc(var(--pad)*.7)}
.lead{font-size:clamp(1.02rem,1.32vw,1.28rem);color:var(--ink-2);line-height:1.6;max-width:62ch}
.mute{color:var(--ink-3)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.mx{max-width:760px}
.mt-s{margin-top:20px}.mt{margin-top:32px}.mt-l{margin-top:56px}

/* eyebrow chip */
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 15px 7px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);backdrop-filter:blur(12px);
}
.chip__dot{--dotc:var(--green);inline-size:7px;block-size:7px;border-radius:50%;background:var(--dotc);box-shadow:0 0 0 4px color-mix(in srgb,var(--dotc) 18%,transparent);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--dotc) 22%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--dotc) 0%,transparent)}}

/* section label */
.slabel{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.slabel__ic{inline-size:17px;block-size:17px;flex:none;overflow:visible}
.center .slabel,.slabel.center{justify-content:center}

/* gradient text */
.g-text{background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .4s,border-color .4s,color .4s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn svg{inline-size:15px;block-size:15px;flex:none;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .btn svg{transform:scaleX(-1)}
[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}

.btn--p{background:var(--ink);color:#06070b}
.btn--p:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,255,255,.16)}

.btn--g{background:var(--grad-blue);color:#fff}
.btn--g:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(41,171,226,.34)}

.btn--o{border-color:var(--line);color:var(--ink);background:var(--glass);backdrop-filter:blur(10px)}
.btn--o:hover{border-color:rgba(255,255,255,.26);background:var(--glass-2);transform:translateY(-2px)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.center .btn-row{justify-content:center}

.tlink{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:.86rem;font-weight:600;color:var(--ink)}
.tlink svg{inline-size:14px;block-size:14px;transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
[dir="rtl"] .tlink svg{transform:scaleX(-1)}
[dir="rtl"] .tlink:hover svg{transform:scaleX(-1) translateX(4px)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:900;padding-block:14px;transition:padding .5s var(--ease)}
.nav__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:9px 10px 9px 18px;display:flex;align-items:center;gap:24px;
  border-radius:999px;border:1px solid transparent;transition:all .5s var(--ease);
}
.nav.is-stuck{padding-block:10px}
.nav.is-stuck .nav__in{
  background:rgba(10,12,18,.72);border-color:var(--line);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
@media (max-width:1099px){.nav__in{padding-inline:14px}}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{inline-size:30px;block-size:30px;flex:none;overflow:visible}
.brand__mark rect{transform-box:fill-box;transform-origin:center;animation:tilein .7s var(--ease) both}
@keyframes tilein{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.brand:hover .brand__mark rect{animation:tilepop .6s var(--ease) both}
@keyframes tilepop{0%{transform:scale(1)}45%{transform:scale(.72)}100%{transform:scale(1)}}
.brand__wm{block-size:19px;width:auto}

.nav__links{display:none;align-items:center;gap:3px;margin-inline-start:auto}
@media (min-width:1100px){.nav__links{display:flex}}
.nav__a{
  display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;
  font-size:.87rem;font-weight:500;color:var(--ink-2);position:relative;
  background:none;border:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:color .35s,background-color .35s;
}
.nav__a:hover,.nav__a[aria-expanded="true"]{color:var(--blue-lt);background:color-mix(in srgb,var(--blue-lt) 12%,transparent)}
.nav__a svg{inline-size:11px;block-size:11px;transition:transform .4s var(--ease)}
.nav__a[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav__grp{position:relative}
.mega{
  position:fixed;inset-block-start:calc(var(--nav-h) + 14px);inset-inline-start:50%;transform:translate(-50%,-10px);
  inline-size:min(720px,86vw);padding:12px;
  background:rgba(12,14,21,.92);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(24px);box-shadow:0 24px 70px rgba(0,0,0,.6);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.nav__grp.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
[dir="rtl"] .mega{transform:translate(50%,-10px)}
[dir="rtl"] .nav__grp.is-open .mega{transform:translate(50%,0)}
.mega__a{display:flex;gap:13px;padding:13px;border-radius:var(--r);transition:background-color .35s}
.mega__a:hover{background:var(--glass-2)}
.mega__ic{inline-size:34px;block-size:34px;flex:none;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line)}
.mega__ic svg{inline-size:17px;block-size:17px}
.mega__t{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.88rem;color:var(--ink)}
.mega__d{display:block;font-size:.775rem;color:var(--ink-3);line-height:1.45;margin-top:3px}

.nav__act{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
@media (min-width:1100px){.nav__act{margin-inline-start:8px}}
.lang{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all .4s var(--ease);
}
[dir="rtl"] .lang{padding:8px 10px 8px 14px}
.lang:hover{border-color:rgba(255,255,255,.26);background:var(--glass-2)}
.lang__ic{inline-size:23px;block-size:23px;flex:none}
.nav__cta{display:none}
@media (min-width:700px){.nav__cta{display:inline-flex;padding:12px 20px;font-size:.86rem}}

.burger{display:grid;gap:5px;inline-size:42px;block-size:42px;place-content:center;background:none;border:0;cursor:pointer;border-radius:999px}
@media (min-width:1100px){.burger{display:none}}
.burger span{display:block;inline-size:18px;block-size:1.8px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:880;background:rgba(7,8,12,.97);
  backdrop-filter:blur(20px);overflow-y:auto;padding:24px clamp(20px,5vw,40px) 80px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
@media (min-width:1100px){.drawer{display:none}}
.drawer__grp{border-block-end:1px solid var(--line-2)}
.drawer__top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 2px;background:none;border:0;cursor:pointer;text-align:start;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.drawer__top svg{inline-size:14px;block-size:14px;color:var(--ink-3);transition:transform .4s var(--ease)}
.drawer__top[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__p{display:none;padding-block-end:12px}
.drawer__p.is-open{display:block}
.drawer__p a{display:block;padding:11px 0 11px 16px;color:var(--ink-3);font-size:.9rem;border-inline-start:1px solid var(--line)}
[dir="rtl"] .drawer__p a{padding:11px 16px 11px 0}
.drawer__p a:hover{color:var(--ink);border-inline-start-color:var(--blue-lt)}
.drawer .btn{width:100%;margin-top:28px}

/* ---------- Hero ---------- */
.hero{position:relative;min-block-size:100svh;display:flex;align-items:center;padding-block:calc(var(--nav-h) + 52px) 72px;overflow:hidden;isolation:isolate}
.hero--inner{min-block-size:auto;padding-block:calc(var(--nav-h) + 64px) 64px}
#gl{position:absolute;inset:0;z-index:1;inline-size:100%;block-size:100%}
.hero__halo{position:absolute;z-index:0;inset-block:14%;inset-inline-end:2%;inline-size:52%;pointer-events:none;
  background:radial-gradient(circle at 52% 48%,rgba(27,117,188,.3),rgba(0,167,157,.14) 42%,transparent 66%);filter:blur(60px)}
[dir="rtl"] .hero__halo{inset-inline-end:auto;inset-inline-start:2%}
@media (max-width:1000px){.hero__halo{inline-size:100%;inset-inline:0}}
/* shown wherever the WebGL scene is skipped, so the hero is never bare */
.hero__static{display:none;position:absolute;z-index:0;inset-block-start:8%;inset-inline-end:-8%;inline-size:66%;opacity:.16;pointer-events:none}
.hero__static svg{width:100%;height:auto}
[dir="rtl"] .hero__static{inset-inline-end:auto;inset-inline-start:-8%}
@media (max-width:860px){.hero__static{display:block;inset-block-start:auto;inset-block-end:-6%;inset-inline-end:-22%;inline-size:96%;opacity:.1}}
@media (prefers-reduced-motion:reduce){.hero__static{display:block}}

.hero__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,8,12,.97) 0%,rgba(7,8,12,.94) 30%,rgba(7,8,12,.6) 46%,rgba(7,8,12,.1) 62%,rgba(7,8,12,0) 78%),
    linear-gradient(180deg,rgba(7,8,12,.82) 0%,rgba(7,8,12,0) 20%,rgba(7,8,12,0) 60%,var(--bg) 100%)}
[dir="rtl"] .hero__veil{background:
    linear-gradient(270deg,rgba(7,8,12,.97) 0%,rgba(7,8,12,.94) 30%,rgba(7,8,12,.6) 46%,rgba(7,8,12,.1) 62%,rgba(7,8,12,0) 78%),
    linear-gradient(180deg,rgba(7,8,12,.82) 0%,rgba(7,8,12,0) 20%,rgba(7,8,12,0) 60%,var(--bg) 100%)}
@media (max-width:1000px){.hero__veil{background:
    linear-gradient(180deg,rgba(7,8,12,.9) 0%,rgba(7,8,12,.78) 40%,rgba(7,8,12,.9) 100%)}}
.hero__in{position:relative;z-index:3;width:100%}
.hero h1{margin-bottom:26px;max-width:15ch}
.hero__in .chip,.hero h1,.hero .lead,.hero .btn-row,.hero__stats{max-width:min(680px,58vw)}
@media (max-width:1000px){.hero__in .chip,.hero h1,.hero .lead,.hero .btn-row,.hero__stats{max-width:none}}
.hero .lead{max-width:52ch}

.hero__stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:52px}
.hstat{padding:13px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(14px);min-inline-size:132px}
.hstat__n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.03em}
.hstat__l{font-size:.72rem;color:var(--ink-3);margin-top:6px;letter-spacing:.02em}

.hero__hint{position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.hero__hint i{inline-size:1px;block-size:38px;background:linear-gradient(var(--ink-4),transparent);position:relative;overflow:hidden}
.hero__hint i::after{content:"";position:absolute;inset-inline:0;block-size:12px;background:var(--blue-lt);animation:trail 2s var(--ease) infinite}
@keyframes trail{0%{top:-12px}100%{top:38px}}
[dir="rtl"] .hero__hint{transform:translateX(50%)}

/* ---------- Marquee ---------- */
.mq{border-block:1px solid var(--line-2);padding-block:26px;overflow:hidden;position:relative;background:var(--bg-2)}
.mq::before,.mq::after{content:"";position:absolute;inset-block:0;inline-size:16%;z-index:2;pointer-events:none}
.mq::before{inset-inline-start:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.mq::after{inset-inline-end:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.mq__t{display:flex;inline-size:max-content;animation:slide 34s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq__g{display:flex;align-items:center;gap:44px;padding-inline:22px}
.mq__i{display:flex;align-items:center;gap:14px;font-family:'Space Grotesk',sans-serif;font-size:clamp(1rem,1.7vw,1.4rem);font-weight:500;color:var(--ink-4);letter-spacing:-.02em;white-space:nowrap;transition:color .4s}
.mq__i b{inline-size:8px;block-size:8px;border-radius:2px;flex:none}
.mq__t:hover .mq__i{color:var(--ink-3)}

/* ---------- Bento ---------- */
.bento{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(0,auto)}
  .b-1{grid-column:span 3}.b-2{grid-column:span 3}
  .b-3{grid-column:span 2}.b-4{grid-column:span 2}.b-5{grid-column:span 2}
  .b-6{grid-column:span 3}.b-7{grid-column:span 3}
}
.card{
  position:relative;overflow:hidden;isolation:isolate;
  padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;flex-direction:column;gap:12px;min-block-size:210px;
  transition:transform .6s var(--ease),border-color .5s,box-shadow .6s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.card__sheen{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 22%,transparent),transparent 62%)}
.card:hover .card__sheen{opacity:1}
.card__glow{position:absolute;inset-block-start:-1px;inset-inline:22px;block-size:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.5;transition:opacity .5s}
.card:hover .card__glow{opacity:1}
.card__ic{inline-size:42px;block-size:42px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);background:color-mix(in srgb,var(--c) 12%,transparent)}
.card__ic svg{inline-size:20px;block-size:20px;color:var(--c)}
.card h3{margin:6px 0 0}
.card p{margin:0;font-size:.9rem;color:var(--ink-3)}
.card .tlink{margin-top:auto;color:var(--c)}
.card__viz{margin-top:auto;margin-inline:-26px;margin-block-end:-26px;position:relative}
.card__viz::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,8,12,.55))}

/* ---------- Sticky showcase ---------- */
.show{display:grid;gap:48px}
@media (min-width:1000px){.show{grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}}
.show__l{position:sticky;top:calc(var(--nav-h) + 48px)}
.rail{display:grid;gap:2px;margin-top:36px}
.rail__i{display:flex;gap:16px;padding:16px 0;border-block-start:1px solid var(--line-2);cursor:pointer;background:none;border-inline:0;border-block-end:0;text-align:start;font:inherit;color:inherit;transition:opacity .5s}
.rail__i:last-child{border-block-end:1px solid var(--line-2)}
.rail__n{font-family:'Space Grotesk',sans-serif;font-size:.74rem;font-weight:600;color:var(--ink-4);padding-top:3px;flex:none;letter-spacing:.08em}
.rail__t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink-3);transition:color .45s}
.rail__d{font-size:.85rem;color:var(--ink-4);margin-top:5px;max-width:40ch;
  display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s,margin .4s}
.rail__d>span{overflow:hidden;display:block}
.rail__i.is-on .rail__t{color:var(--ink)}
.rail__i.is-on .rail__n{color:var(--blue-lt)}
.rail__i.is-on .rail__d{grid-template-rows:1fr;opacity:1}
.show__r{display:grid;gap:14px}
.panel{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-3);transition:border-color .5s,box-shadow .6s var(--ease),transform .6s var(--ease);
}
.panel.is-on{border-color:rgba(255,255,255,.2);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.panel__h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-block-end:1px solid var(--line-2);font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.panel__h b{inline-size:8px;block-size:8px;border-radius:2px;flex:none;background:var(--c,var(--blue-lt))}

/* ---------- Stats band ---------- */
.nums{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){.nums{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.nums{grid-template-columns:repeat(4,1fr)}}
.num{padding:34px 28px;background:var(--bg-2);transition:background-color .5s}
.num:hover{background:var(--bg-3)}
.num__n{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:600;line-height:1;letter-spacing:-.045em;margin-bottom:12px}
.num__l{font-size:.85rem;color:var(--ink-3);max-width:24ch}

/* ---------- Split / cross-brand ---------- */
.split{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;position:relative;background:var(--bg-2)}
@media (min-width:1000px){.split{grid-template-columns:1.05fr .95fr;align-items:center}}
.split::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;background:linear-gradient(90deg,transparent,var(--teal),var(--green),transparent)}
.split__c{padding:clamp(30px,4.4vw,60px)}
.split__v{padding:clamp(20px,3vw,44px);display:flex;align-items:center;justify-content:center;position:relative;min-block-size:340px;isolation:isolate}
.split__v::before{content:"";position:absolute;inset-block:12%;inset-inline:14%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(102,45,145,.5),rgba(0,167,157,.16) 55%,transparent 72%);filter:blur(46px)}

/* ---------- Industry rail ---------- */
.hrail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:16px;margin-inline:calc(clamp(20px,4vw,48px)*-1);padding-inline:clamp(20px,4vw,48px);scrollbar-width:none}
.hrail::-webkit-scrollbar{display:none}
.icard{
  scroll-snap-align:start;flex:0 0 clamp(240px,74vw,320px);
  padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;flex-direction:column;gap:12px;min-block-size:250px;
  transition:transform .6s var(--ease),border-color .5s;
}
.icard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.icard__ic{inline-size:34px;block-size:34px;color:var(--c)}
.icard__ic svg{inline-size:100%;block-size:100%}
.icard h3{margin:4px 0 0;font-size:1.05rem}
.icard p{margin:0;font-size:.86rem;color:var(--ink-3)}
.icard__tag{margin-top:auto;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:600}

/* ---------- Big CTA ---------- */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(44px,7vw,104px) clamp(24px,5vw,72px);text-align:center;background:var(--bg-2);
}
.cta::before{content:"";position:absolute;inset-block-start:-46%;inset-inline-start:50%;transform:translateX(-50%);
  inline-size:min(760px,120%);aspect-ratio:1;z-index:-1;border-radius:50%;
  background:conic-gradient(from 200deg,var(--blue-lt),var(--teal),var(--green),var(--amber),var(--orange),var(--magenta),var(--violet),var(--blue-lt));
  filter:blur(110px);opacity:.19;animation:spin 30s linear infinite}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 46%,rgba(7,8,12,.72),rgba(7,8,12,.34) 70%,transparent)}
.cta h2{margin-inline:auto;max-width:19ch;position:relative}
.cta .lead{margin-inline:auto;max-width:52ch}
.cta .btn-row{justify-content:center}

/* ---------- Footer ---------- */
.foot{position:relative;border-block-start:1px solid var(--line);padding-block:80px 34px;overflow:hidden}
.foot__g{display:grid;gap:44px}
@media (min-width:800px){.foot__g{grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:36px}}
.foot h4{font-family:'Space Grotesk',sans-serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;font-weight:600}
.foot li{margin-bottom:11px}
.foot a{color:var(--ink-3);font-size:.9rem;transition:color .35s}
.foot a:hover{color:var(--ink)}
.foot__brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px}
.foot__mark{inline-size:34px;block-size:34px;flex:none;overflow:visible}
.foot__wmwrap{display:flex;flex-direction:column;gap:5px}
.foot__wm{block-size:22px;width:auto;margin-bottom:0}
.foot__tag{block-size:11px;width:auto;opacity:.65}
.soc{display:flex;gap:9px;margin-top:20px}
.soc a{inline-size:38px;block-size:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;color:var(--ink-3);transition:all .4s var(--ease)}
.soc a:hover{color:var(--ink);border-color:rgba(255,255,255,.26);background:var(--glass-2);transform:translateY(-2px)}
.soc svg{inline-size:16px;block-size:16px}
.foot__b{margin-top:64px;padding-top:26px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:.79rem;color:var(--ink-4)}
.foot__b p{margin:0;max-width:60ch}

/* ---------- Cookie ---------- */
.cookie{position:fixed;inset-block-end:18px;inset-inline:18px;z-index:950;max-inline-size:600px;margin-inline:auto;
  padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(12,14,21,.94);
  backdrop-filter:blur(20px);box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:translateY(150%);transition:transform .7s var(--ease)}
.cookie.is-on{transform:none}
.cookie p{font-size:.85rem;margin-bottom:14px}
.cookie__r{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.cookie .btn{padding:10px 18px;font-size:.8rem}
.cookie__x{background:none;border:0;color:var(--ink-4);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer;padding:10px 4px}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(22px)}
.rv-in{opacity:1!important;transform:none!important;transition:opacity .85s var(--ease),transform .85s var(--ease)}

/* ---------- Arabic / RTL ---------- */
[lang="ar"]{--ink:#F4F6FA}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4,
[lang="ar"] .btn,[lang="ar"] .mega__t,[lang="ar"] .rail__t,[lang="ar"] .num__n,
[lang="ar"] .hstat__n,[lang="ar"] .slabel,[lang="ar"] .mq__i,[lang="ar"] .tlink,[lang="ar"] .lang{
  font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
[lang="ar"] body,[lang="ar"]{font-family:'IBM Plex Sans Arabic',sans-serif}
[lang="ar"] h1{line-height:1.26}[lang="ar"] h2{line-height:1.3}[lang="ar"] h3{line-height:1.42}
[lang="ar"] .slabel,[lang="ar"] .chip,[lang="ar"] .icard__tag{letter-spacing:.03em}
[dir="rtl"] .mq__t{animation-direction:reverse}
[dir="rtl"] .card__glow{inset-inline:22px}
body.swap{opacity:.4;transition:opacity .2s}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1;transform:none}
  #gl{display:none}
  .mq__t{animation:none}
}

.sr{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ==========================================================================
   v3 additions — inner pages, 3D tiles, phone mock, forms, explainer flow
   ========================================================================== */

/* ---------- card 3D tilt (bento + icards) ---------- */
.card,.icard{transform:perspective(1200px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(var(--ty,0));transform-style:preserve-3d}
.card:hover,.icard:hover{--ty:-4px}
.card__ic,.icard__ic{transition:transform .5s var(--ease)}
.card:hover .card__ic,.icard:hover .icard__ic{transform:translateZ(18px) scale(1.08)}
@media (hover:none){.card,.icard{--rx:0!important;--ry:0!important}}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-4);margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:var(--ink-3);transition:color .3s}
.crumb a:hover{color:var(--blue-lt)}
.crumb span{opacity:.5}

/* ---------- 3D floating icon tile ---------- */
.i3d{position:relative;inline-size:clamp(120px,15vw,190px);block-size:clamp(120px,15vw,190px);flex:none;perspective:900px}
.i3d__base{position:absolute;inset:16px;border-radius:30px;background:var(--c);opacity:.22;filter:blur(3px);transform:translate(16px,20px)}
.i3d__tile{
  position:absolute;inset:0;border-radius:30px;display:grid;place-items:center;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 20%,var(--bg-3)),var(--bg-3) 70%);
  border:1px solid var(--line);box-shadow:0 30px 60px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);
  transform:rotateX(10deg) rotateY(-16deg);animation:i3float 5.5s ease-in-out infinite;
}
.i3d__tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120px circle at 30% 20%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.i3d__tile svg{inline-size:42%;block-size:42%;color:var(--c);filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
@keyframes i3float{0%,100%{transform:rotateX(10deg) rotateY(-16deg) translateY(0)}50%{transform:rotateX(6deg) rotateY(-10deg) translateY(-12px)}}
[dir="rtl"] .i3d__tile{transform:rotateX(10deg) rotateY(16deg)}
[dir="rtl"] .i3d__base{transform:translate(-16px,20px)}
@media (prefers-reduced-motion:reduce){.i3d__tile{animation:none}}

/* ---------- inner page hero ---------- */
.hero-in{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line-2)}
.hero-in__glow{position:absolute;z-index:0;inset-block-start:-20%;inset-inline-end:-14%;inline-size:60%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c,var(--blue-lt)) 32%,transparent),transparent 68%);filter:blur(70px)}
[dir="rtl"] .hero-in__glow{inset-inline-end:auto;inset-inline-start:-14%}
.hero-in__grid{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(60% 60% at 70% 20%,#000,transparent 75%)}
.ihero{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
@media (min-width:960px){.ihero{grid-template-columns:1.15fr .85fr;gap:56px}}
.ihero h1{max-width:14ch}
.ihero .lead{max-width:54ch}
.ihero__v{display:grid;justify-items:center;gap:26px}
.ihero__panel{width:100%;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-3);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.ihero__panel .panel__h{background:rgba(255,255,255,.02)}

/* ---------- feature icon list ---------- */
.flist{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:680px){.flist{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.flist--3{grid-template-columns:repeat(3,1fr)}}
.fitem{
  display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:transform .5s var(--ease),border-color .4s;
}
.fitem:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.fitem__ic{inline-size:40px;block-size:40px;border-radius:11px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:color-mix(in srgb,var(--c) 13%,transparent)}
.fitem__ic svg{inline-size:19px;block-size:19px;color:var(--c)}
.fitem h3{margin:2px 0 5px;font-size:1.02rem}
.fitem p{margin:0;font-size:.87rem;color:var(--ink-3)}

/* ---------- related solutions strip ---------- */
.rel{display:flex;gap:12px;flex-wrap:wrap}
.rel a{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);font-size:.84rem;font-weight:500;color:var(--ink-2);
  transition:all .4s var(--ease);
}
.rel a b{inline-size:8px;block-size:8px;border-radius:2px;flex:none}
.rel a:hover{color:var(--ink);border-color:rgba(255,255,255,.24);background:var(--glass-2);transform:translateY(-2px)}

/* ---------- explainer flow connector ---------- */
.rail{position:relative}
.rail::before{content:"";position:absolute;inset-inline-start:6px;inset-block:6px;inline-size:1px;
  background:linear-gradient(var(--line-2),var(--line-2));z-index:0}
[dir="rtl"] .rail::before{inset-inline-start:auto;inset-inline-end:6px}
.rail__prog{position:absolute;inset-inline-start:6px;inset-block-start:6px;inline-size:1px;block-size:0;
  background:linear-gradient(var(--blue-lt),var(--green));transition:height .5s var(--ease);z-index:0}
[dir="rtl"] .rail__prog{inset-inline-start:auto;inset-inline-end:6px}
.rail__i{position:relative;z-index:1}
.rail__n{position:relative}
.rail__n::before{content:"";position:absolute;inset-inline-start:-2px;inset-block-start:3px;inline-size:13px;block-size:13px;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line-2);z-index:-1}
.rail__i.is-on .rail__n::before{border-color:var(--blue-lt);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue-lt) 18%,transparent)}
.show__intro{font-size:.86rem;color:var(--ink-4);margin-top:-8px;margin-bottom:8px;max-width:46ch}

/* ---------- numbers band header ---------- */
.nums-hd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.nums-hd h3{margin:0;font-size:clamp(1.3rem,2vw,1.7rem)}
.nums-hd p{margin:0;color:var(--ink-3);font-size:.9rem;max-width:44ch}

/* ---------- real phone mock (iEmployee) ---------- */
.phone3d{position:relative;inline-size:min(260px,72vw);perspective:1400px;margin-inline:auto}
.phone3d__body{
  position:relative;border-radius:38px;overflow:hidden;border:6px solid #10131c;background:#10131c;
  box-shadow:0 40px 80px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  transform:rotateY(-14deg) rotateX(4deg);animation:pfloat 6s ease-in-out infinite;
}
.phone3d__body img{display:block;width:100%;height:auto}
.phone3d__notch{position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%);inline-size:38%;block-size:22px;background:#10131c;border-radius:0 0 16px 16px;z-index:2}
.phone3d__sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.16) 0%,transparent 26%,transparent 74%,rgba(255,255,255,.06) 100%)}
.phone3d__glow{position:absolute;inset-block:8%;inset-inline:-18%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(102,45,145,.5),rgba(0,167,157,.16) 55%,transparent 72%);filter:blur(50px)}
@keyframes pfloat{0%,100%{transform:rotateY(-14deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-10deg) rotateX(2deg) translateY(-14px)}}
.phone3d__chip{
  position:absolute;padding:10px 14px;border-radius:14px;background:rgba(14,17,26,.86);border:1px solid var(--line);
  backdrop-filter:blur(10px);display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:600;color:var(--ink);
  box-shadow:0 14px 30px rgba(0,0,0,.4);animation:chipfloat 4.5s ease-in-out infinite;
}
.phone3d__chip i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--green);flex:none}
.phone3d__chip--1{inset-inline-start:-6%;inset-block-start:14%;animation-delay:.3s}
.phone3d__chip--2{inset-inline-end:-10%;inset-block-end:20%;animation-delay:1.1s}
[dir="rtl"] .phone3d__chip--1{inset-inline-start:auto;inset-inline-end:-6%}
[dir="rtl"] .phone3d__chip--2{inset-inline-end:auto;inset-inline-start:-10%}
@keyframes chipfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:680px){.phone3d__chip{display:none}}
@media (prefers-reduced-motion:reduce){.phone3d__body,.phone3d__chip{animation:none}}

/* ---------- contact / forms ---------- */
.fgrid{display:grid;gap:16px}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--ink-3)}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;transition:border-color .35s,background-color .35s;width:100%;
}
.fld select{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B849A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-inline-end:38px}
[dir="rtl"] .fld select{background-position:left 14px center}
.fld textarea{resize:vertical;min-block-size:120px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue-lt);background:var(--glass-2)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fcheck{display:flex;align-items:flex-start;gap:11px;font-size:.83rem;color:var(--ink-3)}
.fcheck input{margin-top:3px;inline-size:16px;block-size:16px;flex:none;accent-color:var(--blue-lt)}
.fnote{display:none;margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--ink);font-size:.88rem}
.fnote.is-on{display:block}
.cpanel{border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,3.6vw,44px);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.cinfo{display:flex;flex-direction:column;gap:22px}
.cinfo__i{display:flex;gap:14px;align-items:flex-start}
.cinfo__i .fitem__ic{margin-top:2px}
.cinfo__i h4{margin:0 0 4px;font-family:'Space Grotesk',sans-serif;font-size:.92rem;color:var(--ink)}
.cinfo__i p,.cinfo__i a{margin:0;font-size:.88rem;color:var(--ink-3)}
.cinfo__i a:hover{color:var(--blue-lt)}

/* ---------- industries grid page ---------- */
.igrid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:680px){.igrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.igrid{grid-template-columns:repeat(3,1fr)}}
.igrid .icard{flex:none;scroll-snap-align:none}

/* ---------- about brand line ---------- */
.bigline{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.2rem,7vw,5.4rem);color:var(--ink)}
.about-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);min-block-size:320px;
  background:radial-gradient(circle at 30% 20%,rgba(41,171,226,.16),transparent 55%),
             radial-gradient(circle at 80% 80%,rgba(0,167,157,.14),transparent 55%),var(--bg-3);
  display:grid;place-items:center;isolation:isolate}
.about-photo .mark{inline-size:34%;opacity:.9}

/* ---------- 404 ---------- */
.err{text-align:center;padding-block:calc(var(--pad)*1.1)}
.err .i3d{margin-inline:auto;margin-bottom:8px}
.err h1{font-size:clamp(3.2rem,9vw,7rem);margin-bottom:6px}
.err .btn-row{justify-content:center}

/* ---------- misc RTL/i18n polish ---------- */
[lang="ar"] .fitem__ic,[lang="ar"] .cinfo__i .fitem__ic{transform:none}
[lang="ar"] .crumb span[aria-hidden]{transform:scaleX(-1);display:inline-block}
[lang="ar"] .fld select{font-family:'IBM Plex Sans Arabic',sans-serif}

/* ==========================================================================
   v4 additions — richer inner-page hero visuals (Industries/Trust/About/Partners)
   ========================================================================== */
@keyframes spin2{to{transform:rotate(360deg)}}

/* industries: floating cluster of the six sector tiles */
.icluster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:320px;margin-inline:auto}
.icluster__t{
  aspect-ratio:1;border-radius:20px;display:grid;place-items:center;color:var(--c);
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 22%,var(--bg-3)),var(--bg-3) 75%);
  border:1px solid var(--line);box-shadow:0 18px 36px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  animation:i3float 5s ease-in-out infinite;
}
.icluster__t svg{inline-size:36%;block-size:36%}
.icluster__t:nth-child(2){margin-top:22px}.icluster__t:nth-child(5){margin-top:22px}
.icluster__t:nth-child(3){margin-top:8px}.icluster__t:nth-child(6){margin-top:8px}
@media (prefers-reduced-motion:reduce){.icluster__t{animation:none}}

/* trust: shield tile inside rotating dashed rings, with floating claim chips */
.trust-viz{position:relative;display:grid;place-items:center;min-block-size:260px;padding:30px}
.trust-viz__rings{position:absolute;inset:0;margin:auto;inline-size:min(300px,84%);block-size:auto;z-index:0}
.trust-viz__rings circle{transform-box:fill-box;transform-origin:50% 50%}
.trust-viz__ra{animation:spin2 26s linear infinite}
.trust-viz__rb{animation:spin2 34s linear infinite reverse}
.trust-viz .i3d{position:relative;z-index:1}
.trust-viz__chip{position:absolute;z-index:2}
.trust-viz__chip--1{inset-inline-start:-6%;inset-block-start:10%}
.trust-viz__chip--2{inset-inline-end:-10%;inset-block-end:14%}
@media (max-width:760px){.trust-viz__chip{display:none}}
@media (prefers-reduced-motion:reduce){.trust-viz__ra,.trust-viz__rb{animation:none}}

/* about: large brand mark with a slow conic glow behind it */
.about-mark{position:relative;display:grid;place-items:center;min-block-size:280px;padding:20px}
.about-mark__halo{
  position:absolute;inline-size:230px;block-size:230px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--blue-lt),var(--teal),var(--green),var(--amber),var(--magenta),var(--violet),var(--blue-lt));
  opacity:.22;filter:blur(46px);animation:spin2 16s linear infinite;
}
.about-mark__svg{inline-size:min(220px,58vw);block-size:auto;position:relative;z-index:1;overflow:visible}
.about-mark__svg rect{animation:tilein .8s var(--ease) both}
@media (prefers-reduced-motion:reduce){.about-mark__halo{animation:none}}

/* partners: central node connected to three partner-type nodes */
.pnet{position:relative;width:100%;max-width:340px;aspect-ratio:320/260;margin-inline:auto}
.pnet__lines{position:absolute;inset:0;inline-size:100%;block-size:100%}
.pnet__l{fill:none;stroke:color-mix(in srgb,var(--teal) 55%,var(--line-2));stroke-width:1.4;stroke-dasharray:4 7;animation:pnetdash 2.6s linear infinite}
@keyframes pnetdash{to{stroke-dashoffset:-22}}
.pnet__center,.pnet__node{
  position:absolute;border-radius:18px;display:grid;place-items:center;
  border:1px solid var(--line);box-shadow:0 18px 36px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  animation:i3float 5.2s ease-in-out infinite;
}
.pnet__center{
  inset-inline-start:50%;inset-block-start:54%;transform:translate(-50%,-50%);
  inline-size:74px;block-size:74px;color:var(--blue-lt);
  background:linear-gradient(155deg,color-mix(in srgb,var(--blue-lt) 24%,var(--bg-3)),var(--bg-3) 75%);
}
.pnet__center svg{inline-size:40%;block-size:40%}
.pnet__node{inline-size:56px;block-size:56px;color:var(--c);transform:translate(-50%,-50%);
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 22%,var(--bg-3)),var(--bg-3) 75%);}
.pnet__node svg{inline-size:42%;block-size:42%}
@media (prefers-reduced-motion:reduce){.pnet__center,.pnet__node{animation:none}}

/* about: "what we do" solution index inside a split card */
.rel__col{padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:4px;background:var(--bg-3);align-self:stretch;justify-content:center}
.rel__row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r);color:var(--ink-2);font-size:.9rem;font-weight:500;transition:background-color .35s,color .35s}
.rel__row:hover{background:var(--glass-2);color:var(--ink)}
.rel__row-a{margin-inline-start:auto;inline-size:14px;block-size:14px;opacity:.5;flex:none;transition:transform .4s var(--ease),opacity .3s}
.rel__row:hover .rel__row-a{opacity:1;transform:translateX(4px)}
[dir="rtl"] .rel__row-a{transform:scaleX(-1)}
[dir="rtl"] .rel__row:hover .rel__row-a{transform:scaleX(-1) translateX(4px)}