@font-face {
  font-family: 'Alexandria';
  src: local('Alexandria');
}

:root{
  --purple:        #6952A1;
  --purple-600:     #57458A;
  --purple-ink:     #241C3D;  
  --turquoise:      #1DB1A4;
  --turquoise-600:  #16897F;
  --charcoal:       #6A7177;
  --paper:          #FFFFFF;

  --mist:           #F5F3FA;   
  --mist-2:         #EDEAF6;
  --line:           #E3E0EC;
  --line-soft:      #ECEAF3;

  --ink:            #241C3D;
  --ink-soft:       #453B63;
  --body:           #55505f;

  --font: 'Alexandria', 'Segoe UI', sans-serif;

  --container: 1180px;
  --radius: 22px;
  --radius-sm: 14px;

  --ease: cubic-bezier(.22,.68,0,1);

  /* fallback until index.js measures the real rendered header height */
  --header-h: 72px;
}

:root[data-theme="dark"]{
  --paper:          #14101F;
  --ink:            #F2EFFA;
  --ink-soft:       #D9D3EA;
  --body:           #B7AFC9;
  --charcoal:       #B0A8C4;
  --mist:           #1E1830;
  --mist-2:         #241C3D;
  --line:           #342A52;
  --line-soft:      #2B2244;
}


*{ 
  box-sizing:border-box;
}
html{ 
  scroll-behavior:smooth; 
}
body{
  margin:0;
  font-family:var(--font)!important;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;

}
img{ 
  max-width:100%; 
  display:block; 
}
a{ color:inherit; 
  text-decoration:none; 
}

ul{ 
  margin:0; 
  padding:0; 
  list-style:none;
}
h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--ink-soft);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--purple);
  margin-bottom:16px;
  font-size:clamp(26px,3.2vw,38px);

}
.eyebrow-1{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #8CE6DB;
  letter-spacing: .02em;
  margin-bottom: 16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:100px;
  font-weight:600;
  font-size:15.5px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn-primary{
  background:var(--purple-600);
  color:#fff;
}
.btn-primary:hover{
   background:var(--purple);
   transform:translateY(-2px);
   box-shadow:0 14px 30px -12px rgba(105,82,161,.55); }
.btn-outline{
  border-color:var(--line);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{ border-color:var(--purple); color:var(--purple); transform:translateY(-2px); }
.btn-ghost-light{
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(-4px); }

.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line-soft);
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
}
[data-theme="dark"] .site-header::before{ background:rgba(20,16,31,.86); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.nav-logo{ display:flex; align-items:center; gap:12px; }
.nav-logo img{ height:34px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:28px;
  font-size:15px; font-weight:600; color:var(--ink-soft);
  flex-wrap:nowrap;
  margin-inline-start:44px;
}
.nav-links > a{ position:relative; padding-block:6px; transition:color .25s; white-space:nowrap; flex-shrink:0; }
.nav-links > a::after{
  content:""; position:absolute; right:0; bottom:0; width:0; height:2px;
  background:var(--turquoise); transition:width .3s var(--ease);
}
.nav-links > a:hover, .nav-links > a.active{ color:var(--ink); }
.nav-links > a:hover::after, .nav-links > a.active::after{ width:100%; }
.nav-links-utility{ display:flex; align-items:center; gap:14px; order:99; flex-shrink:0; }
.nav-auth{ display:flex; align-items:center; gap:10px; margin-inline-start:6px; padding-inline-start:20px; border-inline-start:1px solid var(--line); flex-shrink:0; }
.nav-btn{ padding:9px 18px; font-size:13.5px; line-height:1; white-space:nowrap; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

.lang-switch{ display:flex; align-items:center; background:var(--mist); border:1px solid var(--line); border-radius:100px; padding:3px; gap:2px; }
.lang-btn{ border:0; background:none; padding:7px 13px; border-radius:100px; font-family:var(--font); font-size:12.5px; font-weight:700; color:var(--charcoal); cursor:pointer; transition:all .25s; }
.lang-btn.active{ background:var(--purple-ink); color:#fff; }
.lang-btn:not(.active):hover{ color:var(--purple); }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
  transition:all .25s; position:relative; flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--purple); color:var(--purple); }
.theme-toggle svg{ width:18px; height:18px; position:absolute; transition:opacity .25s, transform .35s var(--ease); }
.theme-toggle .icon-moon{ opacity:0; transform:scale(.5) rotate(-40deg); }
.theme-toggle .icon-sun{ opacity:1; transform:scale(1) rotate(0); }
[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform:scale(.5) rotate(40deg); }
[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform:scale(1) rotate(0); }

@media (max-width:1140px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column;
    justify-content:flex-start; padding:36px 28px; gap:22px; font-size:19px;
    margin-inline-start:0;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .35s var(--ease);
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .nav-links-utility{
    order:-1; width:100%;
    padding-bottom:20px; margin-bottom:4px;
    border-bottom:1px solid var(--line);
  }
  .nav-auth{
    flex-direction:column; width:100%; gap:12px;
    margin-top:auto; margin-inline-start:0; padding-top:20px; padding-inline-start:0;
    border-top:1px solid var(--line); border-inline-start:none;
  }
  .nav-btn{ width:100%; justify-content:center; }
}
.bg-paper {
  background: var(--mist);
  padding-top: 50px;
}
#sectors {
  background: var(--paper);
}
.rings{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ring{
  position:absolute; border-radius:50%; border:1.5px solid transparent;
}
@keyframes drift{
  0%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-14px,16px) rotate(8deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

section{ padding-block:110px; position:relative; }
.section-sm{ padding-block:80px; }
.bg-mist{ background:var(--mist); }
.bg-ink{ background:var(--purple-ink); color:#cdc7dd; }
.bg-ink h1, .bg-ink h2, .bg-ink h3{ color:#fff; }

.head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px;
}
.head-row h2{ 
  font-size:clamp(28px,3.4vw,42px); max-width:640px; 
  color:var(--purple-600);
}
.head-row p{ max-width:380px; color:var(--charcoal); margin:0; }

.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(36,28,61,.25); border-color:transparent; }
.card .icon{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--purple); margin-bottom:22px;
}
.card .icon svg{ width:24px; height:24px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--charcoal); font-size:15px; margin:0; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);
}
.stat{ padding:38px 20px; text-align:center; border-inline-start:1px solid rgba(255,255,255,.14); }
.stat:first-child{ border-inline-start:none; }
.stat .num{
  font-size:clamp(30px,3.6vw,48px); font-weight:800; color:#fff;
  display:block; letter-spacing:-.02em;
}
.stat .lbl{ font-size:14px; color:#a79ec4; margin-top:8px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr);} .stat{ border-inline-start:1px solid rgba(255,255,255,.14);} .stat:nth-child(2n+1){border-inline-start:none;} }

.process{ position:relative; }
.process-path{
  position:absolute; top:64px; right:6%; left:6%; height:2px;
  background:linear-gradient(90deg, var(--turquoise), var(--purple));
  opacity:.25;
}
.process-list{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px; position:relative;
}
@media (max-width:1000px){ .process-list{ grid-template-columns:repeat(3,1fr);} .process-path{display:none;} }
@media (max-width:600px){ .process-list{ grid-template-columns:1fr; } }
.process-step{ text-align:center; }
.process-step .badge{
  width:64px; height:64px; border-radius:50%;
  background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-weight:800; color:var(--purple); font-size:18px;
  position:relative; z-index:2; transition:border-color .3s, background .3s, color .3s;
}
.process-step:hover .badge{ background:var(--purple-ink); border-color:var(--purple-ink); color:#fff; }
.process-step h4{ font-size:15.5px; margin-bottom:6px; }
.process-step p{ font-size:13.5px; color:var(--charcoal); margin:0; }

.cta-band{
  border-radius:32px;
  background:linear-gradient(135deg, var(--purple) 0%, var(--turquoise-600) 100%);
  padding:64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  color:#fff;
} 
.cta-band h2{ color:#fff; margin:0 0 8px; font-size:clamp(24px,2.8vw,32px); }
.cta-band p{ color:rgba(255,255,255,.85); margin:0; }
.cta-band .btn{ align-self:flex-start; flex:0 0 auto; width:fit-content; }
@media (max-width:760px){ .cta-band{ flex-direction:column; text-align:center; padding:44px 28px;} .cta-band .btn{ align-self:center; } }

.site-footer{ background:var(--purple-ink); color:#a79ec4; padding-block:70px 30px;  }
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid > div{ min-width:0; }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-size:13.5px; margin-bottom:18px; }
.footer-grid li{ margin-bottom:11px; font-size:14px; }
.footer-grid a:hover{ color:#fff; }
.footer-logo img{ height:32px; margin-bottom:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13.5px; flex-wrap:wrap; gap:12px;
}
.social{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.social a:hover{ background:var(--turquoise); border-color:var(--turquoise); }
.social svg{ width:16px; height:16px; }

.page-hero{
  padding-top:90px; padding-bottom:70px;
  background:var(--mist);
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size:clamp(34px,5vw,58px); max-width:760px; }
.page-hero .lede{ font-size:18px; max-width:640px; color:var(--charcoal); }
.crumb{ font-size:13px; color:var(--charcoal); margin-bottom:18px; display:flex; gap:8px; align-items:center;}
.crumb a:hover{ color:var(--purple); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);  }
.reveal.in{ opacity:1; transform:translateY(0); text-align: center; }

.muted{ color:var(--charcoal); }
.tag{
  display:inline-block; padding:6px 14px; border-radius:100px; background:var(--mist-2);
  color:var(--purple); font-size:13px; font-weight:600;
}
hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }


.home-hero{
  /* fits exactly in the space left below the sticky header, on the
     screen's actual visible height (not the old 100vh, which on mobile
     browsers counts the area hidden behind the address bar and made the
     section taller than what was really visible) */
  height:calc(100vh - var(--header-h));
  height:calc(100dvh - var(--header-h));
  min-height:480px;
  max-height:900px;
  padding-block:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}

.hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  width: 100%;
}
.hero-video-layer .hero-yt-bg{
  position:absolute;
  inset:0;
  /* width:100%;
  height:100%; */
  border:0;
  pointer-events:none;
}
/* belt-and-suspenders: some mobile browsers still render native video
   chrome (e.g. the Picture-in-Picture corner button) even with the
   disablePictureInPicture/controlsList attributes set in HTML — this
   hides any such native UI so nothing but the video itself shows. */
.hero-video-layer video.hero-yt-bg::-webkit-media-controls,
.hero-video-layer video.hero-yt-bg::-webkit-media-controls-enclosure,
.hero-video-layer video.hero-yt-bg::-webkit-media-controls-panel{
  display:none !important;
  -webkit-appearance:none;
}
/* the still image keeps its aspect ratio and crops to fill the box */
.hero-video-layer img.hero-yt-bg{
  object-fit:cover;
}
/* video/iframe are stretched to fill the box's own width and height
   exactly — no cropping and no empty gaps, at the cost of distorting
   the video's native 16:9 shape to match the box's shape */
.hero-video-layer video.hero-yt-bg,
.hero-video-layer iframe.hero-yt-bg{
  inset:0;
  width:100%;
  height:100%;
  transform:none;
}
/* hidden until playback actually starts, so the YouTube thumbnail /
   play-button / any startup UI never becomes visible to the user */
#heroYtBg{
  opacity:0;
  transition:opacity .5s ease;
}
#heroYtBg.is-visible{
  opacity:1;
}
/* the YouTube IFrame API replaces our original <iframe class="hero-yt-bg">
   with a brand-new iframe of its own that keeps the id but drops the
   class, which silently breaks the width/height rule above. Target the
   id directly (with !important) so the video keeps filling the box even
   after the API swaps the element and adds its own inline width/height. */
#heroYtBg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(36,28,61,.45) 0%, rgba(36,28,61,.35) 40%, rgba(36,28,61,.88) 100%);
}
/* sits above the iframe and swallows every click/hover so YouTube's own
   title bar, logo, and control icons never get a chance to appear */
.hero-video-blocker{
  position:absolute;
  inset:0;
  z-index:1;
  background:transparent;
  pointer-events:auto;
  cursor:default;
}

.home-hero .container.home-hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:640px;
  margin-inline:0 auto;
  padding-bottom:80px;
}
.home-hero-inner .eyebrow{ color: var(--paper); justify-content:flex-start; }
.home-hero-inner .eyebrow::before{ background:#8CE6DB; }
.home-hero-inner h1{
  color:#fff;
  line-height:1.4;
}
.home-hero-inner .lede{
  font-size:16.5px;
  max-width:520px;
  color:#d8d3e8;
}
.hero-cta-row{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; justify-content:flex-start; }
.hero-cta-row .btn{ padding:13px 26px; font-size:14.5px; }
.capability-grid{ margin-top:8px; }

/* mobile only: the hero box always takes the full visible screen
   height (same calc(100dvh - header) used on desktop), and the video
   is forced to object-fit:cover instead of stretching to fill — so on
   phones (a tall/portrait box vs. the video's landscape 16:9 shape)
   the video always covers 100% of the width AND height with no empty
   gaps, at the cost of cropping the video's edges instead of
   distorting its shape. Applies whether a dedicated mobile video is
   present or not, since the crop-not-stretch fix works either way.
   Laptop / tablet / iPad are untouched — this block only fires under
   640px, the same breakpoint already used elsewhere in this file. */
@media (max-width:640px){
  .home-hero{
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    min-height:480px;
    max-height:none; /* no cap on mobile — many phone viewports exceed 900px,
                        capping here left a gap below the video on tall screens */
    aspect-ratio:unset;
  }
  .hero-video-layer video.hero-yt-bg,
  .hero-video-layer iframe.hero-yt-bg,
  #heroYtBg{
    /* full width AND full height on every phone, no crop and no
       letterbox bars: stretches to exactly match the box's shape.
       The dedicated mobile video is close enough to a typical phone
       ratio that this stretch stays very slight. */
    object-fit:fill !important;
  }
  /* the eyebrow/heading/button shrink and tighten up a bit on phones
     so they read well against a full-height background video. */
  .home-hero .container.home-hero-inner{
    max-width:100%;
    padding-bottom:16px;
  }
  .home-hero-inner .eyebrow-1{
    font-size:11px;
    margin-bottom:6px;
  }
  .home-hero-inner h1{
    font-size:clamp(18px,6vw,24px);
    line-height:1.25;
    margin-bottom:10px;
  }
  .home-hero .hero-cta-row{
    margin-top:6px;
    gap:8px;
  }
  .home-hero .hero-cta-row .btn{
    padding:8px 16px;
    font-size:12px;
  }
}
/* tablet only: the hero box itself keeps its full height here (the
   short-video-box change above only applies under 640px), so this
   just tunes the text down a bit from the desktop default so it
   doesn't look oversized on narrower/portrait tablet widths. */
@media (min-width:641px) and (max-width:1024px){
  .home-hero-inner h1{
    font-size:clamp(30px,4.2vw,42px);
    line-height:1.3;
  }
  .home-hero-inner .eyebrow-1{
    font-size:13px;
  }
  .home-hero .hero-cta-row .btn{
    padding:12px 24px;
    font-size:14px;
  }
}

.about-teaser{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:64px;
  align-items:center;
}
@media (max-width:900px){ .about-teaser{ grid-template-columns:1fr; gap:36px; } ;}




.about-teaser-media{ position:relative; display:flex; flex-direction:column; gap:16px; }
.chairman-frame{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(160deg, var(--purple) 0%, var(--turquoise-600) 100%);
  display:flex; align-items:center; justify-content:center;
}
.chairman-frame img{ width:100%; height:100%; object-fit:cover; }
.chairman-frame .placeholder-icon{ width:30%; height:30%; color:rgba(255,255,255,.5); }
.chairman-tag{
  position:static;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 20px;
}
[data-theme="dark"] .chairman-tag{ background:var(--mist-2); }
.chairman-tag strong{ display:block; color:var(--purple-600); font-size:15.5px; font-weight:700; }
.chairman-tag span{ display:block; color:var(--charcoal); font-size:13px; margin-top:2px; }

.about-teaser-content { align-items: flex-start;}

.about-teaser-content .eyebrow {
  color: var(--purple-600)
}
.about-teaser-content h2{
  font-size:clamp(24px,2.7vw,34px);
  line-height:1.55;
  color: var(--purple-600);

}
.about-teaser-content p{
  color:var(--charcoal);
  font-size:16px;
}
.about-teaser-content .btn{ margin-top:10px; }

.news-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.news-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(36,28,61,.25); border-color:transparent; }
.news-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; flex-shrink:0;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.news-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-thumb img{ transform:scale(1.05); }
.news-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,31,0) 45%, rgba(20,16,31,.45) 100%);
  pointer-events:none;
}
.news-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.news-thumb--1{ background:linear-gradient(160deg,#6952A1,#4A3876); }
.news-thumb--2{ background:linear-gradient(160deg,#1DB1A4,#158F85); }
.news-thumb--3{ background:linear-gradient(160deg,#241C3D,#453B63); }
.news-play{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--purple-ink);
  border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s;
}
.news-play svg{ width:20px; height:20px; margin-inline-start:2px; }
.news-card:hover .news-play{ transform:scale(1.08); background:#fff; }
.news-card-body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.news-date{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--turquoise-600);
}
.news-date svg{ width:14px; height:14px; }
.news-card h3{
  font-size:15px; line-height:1.5; margin:0; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
  min-height:2.9em;
}
.news-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:gap .3s var(--ease), color .3s;
}
.news-more svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.news-card:hover .news-more{ color:var(--purple); }
.news-card:hover .news-more svg{ transform:translateX(-4px); }

.event-head{ text-align:center; max-width:720px; margin-inline:auto; margin-bottom:40px;}
.event-head .eyebrow{ color: var(--paper)!important; justify-content:center; font-size:clamp(28px,3.4vw,40px)!important; }
.event-head .eyebrow::before{ background:#8CE6DB; }
.event-head h2{ color: var(--charcoal); font-size: 16px;}

[data-theme="dark"] .event-head .eyebrow { color: var(--paper) !important;}
.why-section{ position:relative; overflow:hidden; }
.why-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 320px at 85% 0%, rgba(140,230,219,.10), transparent 65%),
    radial-gradient(560px 320px at 10% 100%, rgba(105,82,161,.35), transparent 65%);
  pointer-events:none;
}
.why-head{
  position:relative;
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.why-head .eyebrow{ justify-content:center; color:#8CE6DB; }
.why-head .eyebrow::before{ background:#8CE6DB; }
.why-head h2{
  color:#fff;
  line-height:1.5;
  margin-bottom:.4em;
}
.why-head p{
  color:rgba(255,255,255,.7);
  font-size:16.5px;
  line-height:1.9;
  max-width:620px;
  margin-inline:auto;
}

.why-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:52px;
}
.why-card{
  position:relative;
  padding:32px 26px 28px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.why-card:hover{
  transform:translateY(-6px);
  border-color:rgba(140,230,219,.35);
  background:rgba(255,255,255,.06);
}
.why-num{
  position:absolute;
  top:22px;
  left:26px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  color:rgba(255,255,255,.28);
}
.why-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(140,230,219,.12);
  color:#8CE6DB;
  margin-bottom:20px;
}
.why-icon svg{ width:24px; height:24px; }
.why-card h3{
  color:#fff;
  font-size:18px;
  margin-bottom:.5em;
}
.why-card p{
  color:rgba(255,255,255,.65);
  font-size:14.5px;
  line-height:1.85;
  margin:0;
}

@media (max-width:860px){
  .why-grid{ grid-template-columns:1fr; }
}
.video-embed{
  position:relative; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.55);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-ink);
}
.video-embed img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.video-embed:hover img{ transform:scale(1.03); }
.video-embed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,31,.15) 0%, rgba(20,16,31,.55) 100%);
  pointer-events:none;
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed-play{
  position:relative; z-index:1;
  width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--purple-ink);
  border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.5);
}
.video-embed-play svg{ width:32px; height:32px; margin-inline-start:3px; }
.video-embed:hover .video-embed-play{ background:#fff; }

.partners-marquee{
  position:relative;
  overflow:hidden;
  direction:ltr;
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-grid{
  display:flex; flex-wrap:nowrap; align-items:center; gap:20px;
  width:max-content;
  will-change:transform;
}
.logo-grid .logo-tile{ flex:0 0 160px; }
@media (max-width:520px){
  .logo-grid{ gap:14px; }
  .logo-grid .logo-tile{ flex:0 0 120px; }
  .container{padding-inline: 28px !important;
  .about-teaser {
   display: flex;
   flex-direction: column;  }
  }  

}
@media (min-width:1140px){
  .logo-grid .logo-tile{ flex:0 0 200px; height:120px; padding:22px; }
}
.logo-tile{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  height:96px; display:flex; align-items:center; justify-content:center; padding:18px;
  color:var(--charcoal);
  transition:color .3s, transform .3s var(--ease), border-color .3s;
}
.logo-tile:hover{ color:var(--purple);  border-color:var(--purple); }
.logo-tile svg{ width:34px; height:34px; }
.logo-tile img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }


  .sector-card{
    flex:0 0 calc((100% - 48px) / 3);
    height:380px;
    perspective:1200px;
  }
  @media (max-width:980px){ .sector-card{ flex-basis:calc((100% - 24px) / 2); height:340px; } }
  @media (max-width:640px){ .sector-card{ flex-basis:86%; height:320px; } }

.sectors-scroll-wrap{ position:relative; }
.sectors-scroll-clip{ overflow:hidden; }
.sectors-scroll{
  display:flex;
  direction:ltr; /* دائمًا من اليسار إلى اليمين بغض النظر عن لغة الصفحة */
  gap:24px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  padding-bottom:26px;
}
.sectors-dots-wrap{ display:flex; justify-content:center; margin-top:1.75rem; }
.sectors-dots{ display:flex; align-items:center; gap:.6rem; }
.sectors-dot{
  width:10px; height:10px; border-radius:50%; border:none; padding:0;
  background:rgba(120,120,130,.35); cursor:pointer;
  transition:width .3s ease, border-radius .3s ease, background .3s ease;
}
.sectors-dot:hover{ background:rgba(120,120,130,.6); }
.sectors-dot.active{
  width:28px; border-radius:6px;
  background:linear-gradient(135deg, var(--purple) 0%, var(--turquoise-600) 100%);
}
[data-theme="dark"] .sectors-dot{ background:rgba(255,255,255,.25); }
[data-theme="dark"] .sectors-dot:hover{ background:rgba(255,255,255,.45); }
/* on phones the active dot stays a plain circle (just bigger + colored)
   instead of stretching into a pill, matching the "circular buttons" look */
@media (max-width:640px){
  .sectors-dot{ width:8px; height:8px; }
  .sectors-dot.active{
    width:11px; height:11px; border-radius:50%;
  }
}

.flip-inner{
  position:relative;
  width:100%; height:100%;
  scroll-snap-align:start;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease);
}
.sector-card:hover .flip-inner,
.sector-card.flipped .flip-inner{
  transform:rotateY(180deg);
}
.flip-front, .flip-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius);
  padding:32px;
  display:flex; flex-direction:column; gap:14px;
  overflow:hidden;
}
.flip-front{
  background:linear-gradient(160deg, var(--purple) 0%, var(--turquoise-600) 100%);
  border:1px solid var(--line);
  padding:0;
  justify-content:flex-end;
}
.sector-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sector-front-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,28,61,0) 32%, rgba(36,28,61,.85) 100%);
}
.sector-front-label{
  position:relative;  padding:24px;
}
.sector-front-label h3{ color:#fff; font-size:18px; margin:0; }
.flip-back{
  background:linear-gradient(160deg, var(--purple) 0%, var(--turquoise-600) 100%);
  color:#fff;
  transform:rotateY(180deg);
  justify-content:center;
}
.flip-back h3{ color:#fff; font-size:18px; }
.flip-back p{ color:rgba(255,255,255,.92); font-size:14.5px; margin:0; line-height:1.75; }


.sector-num{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 4px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em;
}
.flip-back .sector-num{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);
}
[data-theme="dark"] .card{ background:var(--mist); }
[data-theme="dark"] .process-step .badge{ background:var(--mist); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{ background:var(--mist); color:var(--ink); border-color:var(--line); }
[data-theme="dark"] .stat .lbl{ color:#c9c1de; }
[data-theme="dark"] .flip-front{ border-color:var(--line); }
[data-theme="dark"] .logo-tile{ background:var(--mist); border-color:var(--line); }
[data-theme="dark"] .news-card{ background:var(--mist); border-color:var(--line); }@font-face {
  font-family: 'Alexandria';
  src: local('Alexandria');
}

:root{
  --purple:        #6952A1;
  --purple-600:     #57458A;
  --purple-ink:     #241C3D;  
  --turquoise:      #1DB1A4;
  --turquoise-600:  #16897F;
  --charcoal:       #6A7177;
  --paper:          #FFFFFF;

  --mist:           #F5F3FA;   
  --mist-2:         #EDEAF6;
  --line:           #E3E0EC;
  --line-soft:      #ECEAF3;

  --ink:            #241C3D;
  --ink-soft:       #453B63;
  --body:           #55505f;

  --font: 'Alexandria', 'Segoe UI', sans-serif;

  --container: 1180px;
  --radius: 22px;
  --radius-sm: 14px;

  --ease: cubic-bezier(.22,.68,0,1);

  /* fallback until index.js measures the real rendered header height */
  --header-h: 72px;
}

:root[data-theme="dark"]{
  --paper:          #14101F;
  --ink:            #F2EFFA;
  --ink-soft:       #D9D3EA;
  --body:           #B7AFC9;
  --charcoal:       #B0A8C4;
  --mist:           #1E1830;
  --mist-2:         #241C3D;
  --line:           #342A52;
  --line-soft:      #2B2244;
}


*{ 
  box-sizing:border-box;
}
html{ 
  scroll-behavior:smooth; 
}
body{
  margin:0;
  font-family:var(--font)!important;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;

}
img{ 
  max-width:100%; 
  display:block; 
}
a{ color:inherit; 
  text-decoration:none; 
}

ul{ 
  margin:0; 
  padding:0; 
  list-style:none;
}
h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--ink-soft);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--purple);
  margin-bottom:16px;
  font-size:clamp(26px,3.2vw,38px);

}
.eyebrow-1{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #8CE6DB;
  letter-spacing: .02em;
  margin-bottom: 16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:100px;
  font-weight:600;
  font-size:15.5px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn-primary{
  background:var(--purple-600);
  color:#fff;
}
.btn-primary:hover{
   background:var(--purple);
   transform:translateY(-2px);
   box-shadow:0 14px 30px -12px rgba(105,82,161,.55); }
.btn-outline{
  border-color:var(--line);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{ border-color:var(--purple); color:var(--purple); transform:translateY(-2px); }
.btn-ghost-light{
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(-4px); }

.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line-soft);
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
}
[data-theme="dark"] .site-header::before{ background:rgba(20,16,31,.86); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.nav-logo{ display:flex; align-items:center; gap:12px; }
.nav-logo img{ height:34px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:28px;
  font-size:15px; font-weight:600; color:var(--ink-soft);
  flex-wrap:nowrap;
  margin-inline-start:44px;
}
.nav-links > a{ position:relative; padding-block:6px; transition:color .25s; white-space:nowrap; flex-shrink:0; }
.nav-links > a::after{
  content:""; position:absolute; right:0; bottom:0; width:0; height:2px;
  background:var(--turquoise); transition:width .3s var(--ease);
}
.nav-links > a:hover, .nav-links > a.active{ color:var(--ink); }
.nav-links > a:hover::after, .nav-links > a.active::after{ width:100%; }
.nav-links-utility{ display:flex; align-items:center; gap:14px; order:99; flex-shrink:0; }
.nav-auth{ display:flex; align-items:center; gap:10px; margin-inline-start:6px; padding-inline-start:20px; border-inline-start:1px solid var(--line); flex-shrink:0; }
.nav-btn{ padding:9px 18px; font-size:13.5px; line-height:1; white-space:nowrap; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

.lang-switch{ display:flex; align-items:center; background:var(--mist); border:1px solid var(--line); border-radius:100px; padding:3px; gap:2px; }
.lang-btn{ border:0; background:none; padding:7px 13px; border-radius:100px; font-family:var(--font); font-size:12.5px; font-weight:700; color:var(--charcoal); cursor:pointer; transition:all .25s; }
.lang-btn.active{ background:var(--purple-ink); color:#fff; }
.lang-btn:not(.active):hover{ color:var(--purple); }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
  transition:all .25s; position:relative; flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--purple); color:var(--purple); }
.theme-toggle svg{ width:18px; height:18px; position:absolute; transition:opacity .25s, transform .35s var(--ease); }
.theme-toggle .icon-moon{ opacity:0; transform:scale(.5) rotate(-40deg); }
.theme-toggle .icon-sun{ opacity:1; transform:scale(1) rotate(0); }
[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform:scale(.5) rotate(40deg); }
[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform:scale(1) rotate(0); }

@media (max-width:1140px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column;
    justify-content:flex-start; padding:36px 28px; gap:22px; font-size:19px;
    margin-inline-start:0;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .35s var(--ease);
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .nav-links-utility{
    order:-1; width:100%;
    padding-bottom:20px; margin-bottom:4px;
    border-bottom:1px solid var(--line);
  }
  .nav-auth{
    flex-direction:column; width:100%; gap:12px;
    margin-top:auto; margin-inline-start:0; padding-top:20px; padding-inline-start:0;
    border-top:1px solid var(--line); border-inline-start:none;
  }
  .nav-btn{ width:100%; justify-content:center; }
}
.bg-paper {
  background: var(--mist);
}
#sectors {
  background: var(--paper);
}
.rings{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ring{
  position:absolute; border-radius:50%; border:1.5px solid transparent;
}
@keyframes drift{
  0%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-14px,16px) rotate(8deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

section{ padding-block:110px; position:relative; }
.section-sm{ padding-block:80px; }
.bg-mist{ background:var(--mist); }
.bg-ink{ background:var(--purple-ink); color:#cdc7dd; }
.bg-ink h1, .bg-ink h2, .bg-ink h3{ color:#fff; }

.head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px;
}
.head-row h2{ 
  font-size:clamp(28px,3.4vw,42px); max-width:640px; 
  color:var(--purple-600);
}
.head-row p{ max-width:380px; color:var(--charcoal); margin:0; }

.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(36,28,61,.25); border-color:transparent; }
.card .icon{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mist); color:var(--purple); margin-bottom:22px;
}
.card .icon svg{ width:24px; height:24px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--charcoal); font-size:15px; margin:0; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);
}
.stat{ padding:38px 20px; text-align:center; border-inline-start:1px solid rgba(255,255,255,.14); }
.stat:first-child{ border-inline-start:none; }
.stat .num{
  font-size:clamp(30px,3.6vw,48px); font-weight:800; color:#fff;
  display:block; letter-spacing:-.02em;
}
.stat .lbl{ font-size:14px; color:#a79ec4; margin-top:8px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr);} .stat{ border-inline-start:1px solid rgba(255,255,255,.14);} .stat:nth-child(2n+1){border-inline-start:none;} }

.process{ position:relative; }
.process-path{
  position:absolute; top:64px; right:6%; left:6%; height:2px;
  background:linear-gradient(90deg, var(--turquoise), var(--purple));
  opacity:.25;
}
.process-list{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px; position:relative;
}
@media (max-width:1000px){ .process-list{ grid-template-columns:repeat(3,1fr);} .process-path{display:none;} }
@media (max-width:600px){ .process-list{ grid-template-columns:1fr; } }
.process-step{ text-align:center; }
.process-step .badge{
  width:64px; height:64px; border-radius:50%;
  background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-weight:800; color:var(--purple); font-size:18px;
  position:relative; z-index:2; transition:border-color .3s, background .3s, color .3s;
}
.process-step:hover .badge{ background:var(--purple-ink); border-color:var(--purple-ink); color:#fff; }
.process-step h4{ font-size:15.5px; margin-bottom:6px; }
.process-step p{ font-size:13.5px; color:var(--charcoal); margin:0; }

.cta-band{
  border-radius:32px;
  background:linear-gradient(135deg, var(--purple) 0%, var(--turquoise-600) 100%);
  padding:64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  color:#fff;
} 
.cta-band h2{ color:#fff; margin:0 0 8px; font-size:clamp(24px,2.8vw,32px); }
.cta-band p{ color:rgba(255,255,255,.85); margin:0; }
.cta-band .btn{ align-self:flex-start; flex:0 0 auto; width:fit-content; }
@media (max-width:760px){ .cta-band{ flex-direction:column; text-align:center; padding:44px 28px;} .cta-band .btn{ align-self:center; } }

.site-footer{ background:var(--purple-ink); color:#a79ec4; padding-block:70px 30px;  }
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid > div{ min-width:0; }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-size:13.5px; margin-bottom:18px; }
.footer-grid li{ margin-bottom:11px; font-size:14px; }
.footer-grid a:hover{ color:#fff; }
.footer-logo img{ height:32px; margin-bottom:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13.5px; flex-wrap:wrap; gap:12px;
}
.social{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.social a:hover{ background:var(--turquoise); border-color:var(--turquoise); }
.social svg{ width:16px; height:16px; }

.page-hero{
  padding-top:90px; padding-bottom:70px;
  background:var(--mist);
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size:clamp(34px,5vw,58px); max-width:760px; }
.page-hero .lede{ font-size:18px; max-width:640px; color:var(--charcoal); }
.crumb{ font-size:13px; color:var(--charcoal); margin-bottom:18px; display:flex; gap:8px; align-items:center;}
.crumb a:hover{ color:var(--purple); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);  }
.reveal.in{ opacity:1; transform:translateY(0); text-align: center; }

.muted{ color:var(--charcoal); }
.tag{
  display:inline-block; padding:6px 14px; border-radius:100px; background:var(--mist-2);
  color:var(--purple); font-size:13px; font-weight:600;
}
hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }


.home-hero{
  /* fits exactly in the space left below the sticky header, on the
     screen's actual visible height (not the old 100vh, which on mobile
     browsers counts the area hidden behind the address bar and made the
     section taller than what was really visible) */
  height:calc(100vh - var(--header-h));
  height:calc(100dvh - var(--header-h));
  min-height:480px;
  max-height:900px;
  padding-block:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}

.hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-video-layer .hero-yt-bg{
  position:absolute;
  inset:0;
  /* width:100%;
  height:100%; */
  border:0;
  pointer-events:none;
}
/* belt-and-suspenders: some mobile browsers still render native video
   chrome (e.g. the Picture-in-Picture corner button) even with the
   disablePictureInPicture/controlsList attributes set in HTML — this
   hides any such native UI so nothing but the video itself shows. */
.hero-video-layer video.hero-yt-bg::-webkit-media-controls,
.hero-video-layer video.hero-yt-bg::-webkit-media-controls-enclosure,
.hero-video-layer video.hero-yt-bg::-webkit-media-controls-panel{
  display:none !important;
  -webkit-appearance:none;
}
/* the still image keeps its aspect ratio and crops to fill the box */
.hero-video-layer img.hero-yt-bg{
  object-fit:cover;
}
/* video/iframe are stretched to fill the box's own width and height
   exactly — no cropping and no empty gaps, at the cost of distorting
   the video's native 16:9 shape to match the box's shape */
.hero-video-layer video.hero-yt-bg,
.hero-video-layer iframe.hero-yt-bg{
  inset:0;
  width:100%;
  height:100%;
  transform:none;
}
/* hidden until playback actually starts, so the YouTube thumbnail /
   play-button / any startup UI never becomes visible to the user */
#heroYtBg{
  opacity:0;
  transition:opacity .5s ease;
}
#heroYtBg.is-visible{
  opacity:1;
}
/* the YouTube IFrame API replaces our original <iframe class="hero-yt-bg">
   with a brand-new iframe of its own that keeps the id but drops the
   class, which silently breaks the width/height rule above. Target the
   id directly (with !important) so the video keeps filling the box even
   after the API swaps the element and adds its own inline width/height. */
#heroYtBg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(36,28,61,.45) 0%, rgba(36,28,61,.35) 40%, rgba(36,28,61,.88) 100%);
}
/* sits above the iframe and swallows every click/hover so YouTube's own
   title bar, logo, and control icons never get a chance to appear */
.hero-video-blocker{
  position:absolute;
  inset:0;
  z-index:1;
  background:transparent;
  pointer-events:auto;
  cursor:default;
}

.home-hero .container.home-hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:640px;
  margin-inline:0 auto;
  padding-bottom:80px;
}
.home-hero-inner .eyebrow{ color: var(--paper); justify-content:flex-start; }
.home-hero-inner .eyebrow::before{ background:#8CE6DB; }
.home-hero-inner h1{
  color:#fff;
  line-height:1.4;
}
.home-hero-inner .lede{
  font-size:16.5px;
  max-width:520px;
  color:#d8d3e8;
}
.hero-cta-row{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; justify-content:flex-start; }
.hero-cta-row .btn{ padding:13px 26px; font-size:14.5px; }
.capability-grid{ margin-top:8px; }

/* mobile only: the hero box always takes the full visible screen
   height (same calc(100dvh - header) used on desktop), and the video
   is forced to object-fit:cover instead of stretching to fill — so on
   phones (a tall/portrait box vs. the video's landscape 16:9 shape)
   the video always covers 100% of the width AND height with no empty
   gaps, at the cost of cropping the video's edges instead of
   distorting its shape. Applies whether a dedicated mobile video is
   present or not, since the crop-not-stretch fix works either way.
   Laptop / tablet / iPad are untouched — this block only fires under
   640px, the same breakpoint already used elsewhere in this file. */
@media (max-width:640px){
  .home-hero{
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    min-height:480px;
    max-height:none; /* no cap on mobile — many phone viewports exceed 900px,
                        capping here left a gap below the video on tall screens */
    aspect-ratio:unset;
  }
  .hero-video-layer video.hero-yt-bg,
  .hero-video-layer iframe.hero-yt-bg,
  #heroYtBg{
    /* full width AND full height on every phone, no crop and no
       letterbox bars: stretches to exactly match the box's shape.
       The dedicated mobile video is close enough to a typical phone
       ratio that this stretch stays very slight. */
    object-fit:fill !important;
  }
  /* the eyebrow/heading/button shrink and tighten up a bit on phones
     so they read well against a full-height background video. */
  .home-hero .container.home-hero-inner{
    max-width:100%;
    padding-bottom:16px;
  }
  .home-hero-inner .eyebrow-1{
    font-size:11px;
    margin-bottom:6px;
  }
  .home-hero-inner h1{
    font-size:clamp(18px,6vw,24px);
    line-height:1.25;
    margin-bottom:10px;
  }
  .home-hero .hero-cta-row{
    margin-top:6px;
    gap:8px;
  }
  .home-hero .hero-cta-row .btn{
    padding:8px 16px;
    font-size:12px;
  }
}
/* tablet only: the hero box itself keeps its full height here (the
   short-video-box change above only applies under 640px), so this
   just tunes the text down a bit from the desktop default so it
   doesn't look oversized on narrower/portrait tablet widths. */
@media (min-width:641px) and (max-width:1024px){
  .home-hero-inner h1{
    font-size:clamp(30px,4.2vw,42px);
    line-height:1.3;
  }
  .home-hero-inner .eyebrow-1{
    font-size:13px;
  }
  .home-hero .hero-cta-row .btn{
    padding:12px 24px;
    font-size:14px;
  }
}

.about-teaser{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:64px;
  align-items:center;
}
@media (max-width:900px){ .about-teaser{ grid-template-columns:1fr; gap:36px; } ;}




.about-teaser-media{ position:relative; display:flex; flex-direction:column; gap:16px; }
.chairman-frame{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(160deg, var(--purple) 0%, var(--turquoise-600) 100%);
  display:flex; align-items:center; justify-content:center;
}
.chairman-frame img{ width:100%; height:100%; object-fit:cover; }
.chairman-frame .placeholder-icon{ width:30%; height:30%; color:rgba(255,255,255,.5); }
.chairman-tag{
  position:static;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 20px;
}
[data-theme="dark"] .chairman-tag{ background:var(--mist-2); }
.chairman-tag strong{ display:block; color:var(--purple-600); font-size:15.5px; font-weight:700; }
.chairman-tag span{ display:block; color:var(--charcoal); font-size:13px; margin-top:2px; }

.about-teaser-content { align-items: flex-start;}

.about-teaser-content .eyebrow {
  color: var(--purple-600)
}
.about-teaser-content h2{
  font-size:clamp(24px,2.7vw,34px);
  line-height:1.55;
  color: var(--purple-600);

}
.about-teaser-content p{
  color:var(--charcoal);
  font-size:16px;
}
.about-teaser-content .btn{ margin-top:10px; }

.news-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.news-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(36,28,61,.25); border-color:transparent; }
.news-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; flex-shrink:0;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.news-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-thumb img{ transform:scale(1.05); }
.news-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,31,0) 45%, rgba(20,16,31,.45) 100%);
  pointer-events:none;
}
.news-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.news-thumb--1{ background:linear-gradient(160deg,#6952A1,#4A3876); }
.news-thumb--2{ background:linear-gradient(160deg,#1DB1A4,#158F85); }
.news-thumb--3{ background:linear-gradient(160deg,#241C3D,#453B63); }
.news-play{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--purple-ink);
  border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s;
}
.news-play svg{ width:20px; height:20px; margin-inline-start:2px; }
.news-card:hover .news-play{ transform:scale(1.08); background:#fff; }
.news-card-body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.news-date{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--turquoise-600);
}
.news-date svg{ width:14px; height:14px; }
.news-card h3{
  font-size:15px; line-height:1.5; margin:0; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
  min-height:2.9em;
}
.news-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:gap .3s var(--ease), color .3s;
}
.news-more svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.news-card:hover .news-more{ color:var(--purple); }
.news-card:hover .news-more svg{ transform:translateX(-4px); }

.event-head{ text-align:center; max-width:720px; margin-inline:auto; margin-bottom:40px;}
.event-head .eyebrow{ color: var(--paper)!important; justify-content:center; font-size:clamp(28px,3.4vw,40px)!important; }
.event-head .eyebrow::before{ background:#8CE6DB; }
.event-head h2{ color: var(--charcoal); font-size: 16px;}

[data-theme="dark"] .event-head .eyebrow { color: var(--paper) !important;}
.why-section{ position:relative; overflow:hidden; }
.why-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 320px at 85% 0%, rgba(140,230,219,.10), transparent 65%),
    radial-gradient(560px 320px at 10% 100%, rgba(105,82,161,.35), transparent 65%);
  pointer-events:none;
}
.why-head{
  position:relative;
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.why-head .eyebrow{ justify-content:center; color:#8CE6DB; }
.why-head .eyebrow::before{ background:#8CE6DB; }
.why-head h2{
  color:#fff;
  line-height:1.5;
  margin-bottom:.4em;
}
.why-head p{
  color:rgba(255,255,255,.7);
  font-size:16.5px;
  line-height:1.9;
  max-width:620px;
  margin-inline:auto;
}

.why-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:52px;
}
.why-card{
  position:relative;
  padding:32px 26px 28px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.why-card:hover{
  transform:translateY(-6px);
  border-color:rgba(140,230,219,.35);
  background:rgba(255,255,255,.06);
}
.why-num{
  position:absolute;
  top:22px;
  left:26px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  color:rgba(255,255,255,.28);
}
.why-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(140,230,219,.12);
  color:#8CE6DB;
  margin-bottom:20px;
}
.why-icon svg{ width:24px; height:24px; }
.why-card h3{
  color:#fff;
  font-size:18px;
  margin-bottom:.5em;
}
.why-card p{
  color:rgba(255,255,255,.65);
  font-size:14.5px;
  line-height:1.85;
  margin:0;
}

@media (max-width:860px){
  .why-grid{ grid-template-columns:1fr; }
}
.video-embed{
  position:relative; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.55);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-ink);
}
.video-embed img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.video-embed:hover img{ transform:scale(1.03); }
.video-embed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,31,.15) 0%, rgba(20,16,31,.55) 100%);
  pointer-events:none;
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed-play{
  position:relative; z-index:1;
  width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--purple-ink);
  border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.5);
}
.video-embed-play svg{ width:32px; height:32px; margin-inline-start:3px; }
.video-embed:hover .video-embed-play{ background:#fff; }

.partners-marquee{
  position:relative;
  overflow:hidden;
  direction:ltr;
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-grid{
  display:flex; flex-wrap:nowrap; align-items:center; gap:20px;
  width:max-content;
  will-change:transform;
}
.logo-grid .logo-tile{ flex:0 0 160px; }
@media (max-width:520px){
  .logo-grid{ gap:14px; }
  .logo-grid .logo-tile{ flex:0 0 120px; }
  .container{padding-inline: 28px !important;
  .about-teaser {
   display: flex;
   flex-direction: column;  }
  }  

}
@media (min-width:1140px){
  .logo-grid .logo-tile{ flex:0 0 200px; height:120px; padding:22px; }
}
.logo-tile{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  height:96px; display:flex; align-items:center; justify-content:center; padding:18px;
  color:var(--charcoal);
  transition:color .3s, transform .3s var(--ease), border-color .3s;
}
.logo-tile:hover{ color:var(--purple);  border-color:var(--purple); }
.logo-tile svg{ width:34px; height:34px; }
.logo-tile img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }


  .sector-card{
    flex:0 0 calc((100% - 48px) / 3);
    height:380px;
    perspective:1200px;
  }
  @media (max-width:980px){ .sector-card{ flex-basis:calc((100% - 24px) / 2); height:340px; } }
  @media (max-width:640px){ .sector-card{ flex-basis:86%; height:320px; } }

.sectors-scroll-wrap{ position:relative; }
.sectors-scroll-clip{ overflow:hidden; }
.sectors-scroll{
  display:flex;
  direction:ltr; /* دائمًا من اليسار إلى اليمين بغض النظر عن لغة الصفحة */
  gap:24px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  padding-bottom:26px;
}
.sectors-dots-wrap{ display:flex; justify-content:center; margin-top:1.75rem; }
.sectors-dots{ display:flex; align-items:center; gap:.6rem; }
.sectors-dot{
  width:10px; height:10px; border-radius:50%; border:none; padding:0;
  background:rgba(120,120,130,.35); cursor:pointer;
  transition:width .3s ease, border-radius .3s ease, background .3s ease;
}
.sectors-dot:hover{ background:rgba(120,120,130,.6); }
.sectors-dot.active{
  width:28px; border-radius:6px;
  background:linear-gradient(135deg, var(--purple) 0%, var(--turquoise-600) 100%);
}
[data-theme="dark"] .sectors-dot{ background:rgba(255,255,255,.25); }
[data-theme="dark"] .sectors-dot:hover{ background:rgba(255,255,255,.45); }
/* on phones the active dot stays a plain circle at its natural size
   instead of stretching into a pill, matching the "circular buttons" look */
@media (max-width:640px){
  .sectors-dot.active{
    border-radius:50%;
  }
}

.flip-inner{
  position:relative;
  width:100%; height:100%;
  scroll-snap-align:start;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease);
}
.sector-card:hover .flip-inner,
.sector-card.flipped .flip-inner{
  transform:rotateY(180deg);
}
.flip-front, .flip-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius);
  padding:32px;
  display:flex; flex-direction:column; gap:14px;
  overflow:hidden;
}
.flip-front{
  background:linear-gradient(160deg, var(--purple) 0%, var(--turquoise-600) 100%);
  border:1px solid var(--line);
  padding:0;
  justify-content:flex-end;
}
.sector-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sector-front-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,28,61,0) 32%, rgba(36,28,61,.85) 100%);
}
.sector-front-label{
  position:relative;  padding:24px;
}
.sector-front-label h3{ color:#fff; font-size:18px; margin:0; }
.flip-back{
  background:linear-gradient(160deg, var(--purple) 0%, var(--turquoise-600) 100%);
  color:#fff;
  transform:rotateY(180deg);
  justify-content:center;
}
.flip-back h3{ color:#fff; font-size:18px; }
.flip-back p{ color:rgba(255,255,255,.92); font-size:14.5px; margin:0; line-height:1.75; }


.sector-num{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 4px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em;
}
.flip-back .sector-num{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);
}
[data-theme="dark"] .card{ background:var(--mist); }
[data-theme="dark"] .process-step .badge{ background:var(--mist); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{ background:var(--mist); color:var(--ink); border-color:var(--line); }
[data-theme="dark"] .stat .lbl{ color:#c9c1de; }
[data-theme="dark"] .flip-front{ border-color:var(--line); }
[data-theme="dark"] .logo-tile{ background:var(--mist); border-color:var(--line); }
[data-theme="dark"] .news-card{ background:var(--mist); border-color:var(--line); }