:root{
    --navy:#041D45;
    --navy-2:#0B2C5C;
    --teal:#0ABBB5;
    --teal-dark:#088F8A;
    --teal-soft:#DFF6F5;
    --paper:#F6F8FA;
    --surface:#EDF3F5;
    --ink:#0B1626;
    --ink-soft:#526078;
    --line:#DCE4EA;
    --radius-s:2px;
    --radius-m:8px;
    --maxw:1180px;
    --font-display:'Poppins', sans-serif;
    --font-body:'Inter', sans-serif;
    --ease:cubic-bezier(.22,.68,.32,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body.lang-ar{--font-display:'Tajawal', sans-serif; --font-body:'IBM Plex Sans Arabic', sans-serif;}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img,svg{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  button{font:inherit; cursor:pointer;}

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.15;
    margin:0;
    letter-spacing:-.01em;
  }
  body.lang-ar h1, body.lang-ar h2, body.lang-ar h3{font-weight:700; letter-spacing:0;}

  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:28px;}

  /* ---------- focus & motion ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--teal); outline-offset:3px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(247,245,240,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:16px;
  }
  .logo{display:flex; align-items:center;}
  .logo-img{height:40px; width:auto; display:block;}
  footer .logo-img{height:40px;}

  .nav-links{display:flex; align-items:center; gap:34px;}
  .nav-links a{font-size:.95rem; font-weight:500; color:var(--ink); position:relative; padding-block:4px;}
  .nav-links a::after{content:''; position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px; background:var(--teal); transition:width .3s var(--ease);}
  .nav-links a:hover::after{width:100%;}
  .nav-links a.active{color:var(--navy-2);}
  .nav-links a.active::after{width:100%;}
  .mobile-nav a.active{color:var(--teal);}

  .nav-right{display:flex; align-items:center; gap:16px;}

  .lang-switch{
    display:flex; border:1px solid var(--navy); border-radius:999px; overflow:hidden; font-size:.78rem; font-weight:600;
  }
  .lang-switch button{
    padding:7px 14px; background:transparent; color:var(--navy); border:none;
  }
  .lang-switch button.active{background:var(--navy); color:var(--paper);}

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:999px;
    background:var(--navy); color:var(--paper);
    font-weight:600; font-size:.92rem;
    border:1px solid var(--navy);
    transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  }
  .btn:hover{background:var(--navy-2); border-color:var(--navy-2); transform:translateY(-1px);}
  .btn.ghost{background:transparent; color:var(--navy);}
  .btn.ghost:hover{background:var(--navy); color:var(--paper);}
  .btn.on-dark{background:var(--teal); border-color:var(--teal); color:var(--navy);}
  .btn.on-dark:hover{background:var(--teal-soft); border-color:var(--teal-soft);}

  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
  .burger span{width:24px; height:2px; background:var(--navy); display:block;}

  /* ---------- hero ---------- */
  .hero{position:relative; padding-block:96px 80px; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}

  .hero.hero-banner-full{
    position:relative; min-height:600px; display:flex; align-items:center;
    padding-block:0; overflow:hidden;
  }
  .hero-banner-media{position:absolute; inset:0; z-index:0;}
  .hero-banner-media img{width:100%; height:100%; object-fit:cover; display:block;}
  .hero-banner-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(4,29,69,.92) 15%, rgba(4,29,69,.68) 50%, rgba(4,29,69,.25) 100%);
  }
  body.lang-ar .hero-banner-overlay{
    background:linear-gradient(270deg, rgba(4,29,69,.92) 15%, rgba(4,29,69,.68) 50%, rgba(4,29,69,.25) 100%);
  }
  .hero-banner-content{position:relative; z-index:2; max-width:640px;}
  .hero.hero-banner-full .eyebrow{color:var(--teal-soft);}
  .hero.hero-banner-full h1{color:#fff;}
  .hero.hero-banner-full p.lead{color:#D7DEE8;}
  .hero.hero-banner-full .link-arrow.light{color:#fff;}
  @media (max-width:760px){
    .hero.hero-banner-full{min-height:520px;}
    .hero-banner-overlay{background:linear-gradient(180deg, rgba(4,29,69,.55) 0%, rgba(4,29,69,.92) 65%);}
    body.lang-ar .hero-banner-overlay{background:linear-gradient(180deg, rgba(4,29,69,.55) 0%, rgba(4,29,69,.92) 65%);}
  }

  .hero.hero-dark{background:var(--navy); padding-block:0;}
  .hero-grid-dark{display:grid; grid-template-columns:.85fr 1.15fr; gap:0; align-items:stretch; min-height:560px;}
  .hero-man-cell{position:relative; overflow:hidden;}
  .hero-man-cell img{width:100%; height:100%; object-fit:cover; display:block; min-height:400px;}
  .hero-grid-dark > div:last-child{padding-block:60px; padding-inline-start:56px;}
  .hero.hero-dark .eyebrow{color:var(--teal-soft);}
  .hero.hero-dark h1{color:#fff;}
  .hero.hero-dark p.lead{color:#B9C6D6;}
  .hero.hero-dark .link-arrow.light{color:#fff;}
  body.lang-ar .hero-man-cell{order:2;}
  body.lang-ar .hero-grid-dark > div:last-child{padding-inline-start:0; padding-inline-end:56px;}
  @media (max-width:960px){
    .hero-grid-dark{grid-template-columns:1fr; min-height:auto;}
    .hero-man-cell img{min-height:260px; max-height:340px;}
    .hero-grid-dark > div:last-child{padding-inline:28px !important; padding-block:44px 56px;}
    body.lang-ar .hero-man-cell{order:0;}
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.82rem; font-weight:600; color:var(--navy-2); margin-bottom:18px;
  }
  .eyebrow::before{content:''; width:26px; height:1px; background:var(--teal);}
  body.lang-ar .eyebrow::before{order:2;}

  .hero h1{font-size:clamp(2.3rem, 4.4vw, 3.7rem); color:var(--navy); max-width:14ch;}
  .hero p.lead{margin-block-start:22px; font-size:1.12rem; color:var(--ink-soft); max-width:46ch;}
  .hero-cta{display:flex; align-items:center; gap:20px; margin-block-start:34px;}
  .hero-cta .link-arrow{font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:8px; color:var(--navy);}
  .hero-cta .link-arrow svg{width:16px; height:16px; transition:transform .25s var(--ease);}
  body.lang-ar .hero-cta .link-arrow svg{transform:scaleX(-1);}
  .hero-cta .link-arrow:hover svg{transform:translateX(4px);}
  body.lang-ar .hero-cta .link-arrow:hover svg{transform:scaleX(-1) translateX(4px);}

  .reveal-item{opacity:0; transform:translateY(14px); animation:riseIn .7s var(--ease) forwards;}
  .hero .eyebrow{animation-delay:.05s;}
  .hero h1{animation-delay:.16s;}
  .hero p.lead{animation-delay:.3s;}
  .hero-cta{animation-delay:.42s;}
  @keyframes riseIn{to{opacity:1; transform:translateY(0);}}

  .hero-art{position:relative;}
  .hero-photo-frame{
    position:relative; aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden;
    box-shadow:0 40px 70px -30px rgba(4,29,69,.4);
    opacity:0; transform:scale(1.05); animation:photoReveal 1s var(--ease) forwards;
  }
  @keyframes photoReveal{to{opacity:1; transform:scale(1);}}
  .hero-photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
  .hero-photo-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,29,69,.55), transparent 40%);}
  .photo-caption{
    position:absolute; inset-block-end:18px; inset-inline-start:20px; z-index:1;
    color:#fff; font-size:.8rem; font-weight:600; letter-spacing:.02em;
    display:flex; align-items:center; gap:7px;
  }
  .photo-caption::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--teal);}
  .pixel-accent{
    position:absolute; inset-block-start:-18px; inset-inline-end:-18px; width:76px; height:76px;
    fill:var(--teal); z-index:2;
    opacity:0; animation:fadeDot .5s ease forwards; animation-delay:1.05s;
  }
  body.lang-ar .pixel-accent{ transform:scaleX(-1); }
  @keyframes fadeDot{to{opacity:1;}}

  /* ---------- section shell ---------- */
  section{padding-block:90px;}
  .section-head{max-width:640px; margin-block-end:52px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h1, .section-head h2{font-size:clamp(1.8rem, 3vw, 2.5rem); color:var(--navy);}
  .section-head p{margin-block-start:16px; color:var(--ink-soft); font-size:1.02rem;}

  .fade-up{opacity:1;}
  html.js .fade-up{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  html.js .fade-up.in-view{opacity:1; transform:translateY(0);}

  hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

  /* ---------- stats ---------- */
  .stats{background:var(--navy); color:var(--paper); padding-block:56px;}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
  .stat h3{font-family:var(--font-display); font-size:clamp(2.1rem,3.6vw,2.8rem); color:var(--teal-soft); font-weight:500;}
  .stat p{margin-block-start:8px; font-size:.88rem; color:#CFE0D4; letter-spacing:.02em;}

  /* ---------- services (home teaser) ---------- */
  .svc-teaser-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .svc-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px 24px; transition:border-color .25s var(--ease), transform .25s var(--ease);}
  .svc-card:hover{border-color:var(--teal); transform:translateY(-4px);}
  .svc-card .icon{width:42px; height:42px; margin-block-end:18px;}
  .svc-card h3{font-size:1.08rem; color:var(--navy); margin-block-end:8px;}
  .svc-card p{margin:0; font-size:.92rem; color:var(--ink-soft);}

  /* ---------- about teaser ---------- */
  .about-teaser{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
  .about-frame{position:relative; aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden; background:var(--navy);}
  .about-frame img{width:100%; height:100%; object-fit:cover; display:block;}
  .about-teaser h2{font-size:clamp(1.8rem,3vw,2.4rem); color:var(--navy); max-width:16ch;}
  .about-teaser p{color:var(--ink-soft); margin-block-start:18px; max-width:52ch;}
  .about-teaser .btn{margin-block-start:26px;}

  /* ---------- why choose us ---------- */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .why-cell{background:var(--paper); padding:34px 26px;}
  .why-cell .num{font-family:var(--font-display); font-size:.9rem; color:var(--teal); font-weight:600; margin-block-end:16px; display:block;}
  .why-cell h3{font-size:1.08rem; color:var(--navy); margin-block-end:10px;}
  .why-cell p{margin:0; font-size:.92rem; color:var(--ink-soft);}

  /* ---------- mid CTA banner ---------- */
  .cta-banner{position:relative; overflow:hidden; border-radius:var(--radius-m); padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; color:var(--paper);}
  .cta-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .cta-banner::before{content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--navy) 40%, rgba(4,29,69,.55) 100%); z-index:1;}
  .cta-banner > *{position:relative; z-index:2;}
  .cta-banner h2{color:var(--paper); font-size:clamp(1.5rem,2.6vw,2.1rem); max-width:22ch;}
  .cta-banner .eyebrow{color:var(--teal-soft);}

  /* ---------- services full page ---------- */
  .hero-lead-block{max-width:640px;}
  .hero-lead-block .lead{font-size:1.12rem; color:var(--ink-soft); margin:0;}
  .hero-lead-block .hero-cta{display:flex; align-items:center; gap:20px; margin-block-start:26px;}

  .page-banner, .svc-banner{position:relative; height:340px; overflow:hidden; display:flex; align-items:flex-end;}
  .page-banner img, .svc-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;}
  .page-banner::after, .svc-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, var(--navy) 5%, rgba(4,29,69,.35) 65%, rgba(4,29,69,.15));}
  .page-banner-copy, .svc-banner-copy{position:relative; z-index:1; padding-block-end:34px;}
  .page-banner-copy .eyebrow, .svc-banner-copy .eyebrow{color:var(--teal-soft);}
  .page-banner-copy h1, .page-banner-copy h2, .svc-banner-copy h1, .svc-banner-copy h2{color:#fff; font-size:clamp(1.8rem, 3vw, 2.5rem);}
  @media (max-width:760px){
    .page-banner, .svc-banner{height:280px;}
  }
  .services-list{display:flex; flex-direction:column;}
  .service-row{
    display:grid; grid-template-columns:110px 1fr auto; gap:28px; align-items:center;
    padding-block:34px; border-block-end:1px solid var(--line);
    scroll-margin-top:90px;
  }
  .service-row:first-child{border-block-start:1px solid var(--line);}
  .service-row .num{font-family:var(--font-display); font-size:2.6rem; color:var(--surface); font-weight:600; -webkit-text-stroke:1.4px var(--teal); color:transparent;}
  .service-row h3{font-size:1.2rem; color:var(--navy); margin-block-end:8px;}
  .service-row p{margin:0; color:var(--ink-soft); font-size:.95rem; max-width:60ch;}
  .service-row .btn{white-space:nowrap;}
  @media (max-width:760px){
    .service-row{grid-template-columns:1fr; gap:10px;}
    .service-row .num{font-size:1.6rem;}
  }

  /* ---------- process ---------- */
  .process-steps{display:flex; flex-direction:column; gap:28px; margin-block-start:30px;}
  .process-step{display:flex; gap:20px; align-items:flex-start;}
  .process-step .step-tag{
    flex:none; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--teal);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--teal-dark);
  }
  .process-step h3{font-size:1.08rem; color:var(--navy); margin-block-end:6px;}
  .process-step p{margin:0; color:var(--ink-soft); font-size:.92rem;}

  /* ---------- team ---------- */
  /* ---------- team zigzag ---------- */
  :root{ --gold:#B68D40; --slate:#5B6B8C; }
  .team-zigzag-wrap{position:relative; padding-block:70px 10px;}
  .team-zigzag-line{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
  .team-zigzag-line path{stroke:var(--line);}
  .team-grid{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; gap:8px; flex-wrap:nowrap;}
  .team-card{display:flex; flex-direction:column; align-items:center; width:150px; text-align:center; flex:none;}
  .team-card.tz-low{margin-block-start:130px;}
  .team-card h3{order:1; font-family:var(--font-display); font-weight:700; font-size:1rem; margin:0 0 4px; color:var(--tz-color, var(--navy));}
  .team-card p{order:2; font-size:.8rem; color:var(--ink-soft); margin:0 0 14px; max-width:135px;}
  .team-card .avatar{order:3; margin-block-end:0;}
  .team-card.tz-low h3{order:3; margin-block-start:14px; margin-block-end:4px;}
  .team-card.tz-low p{order:4; margin-block-end:0;}
  .team-card.tz-low .avatar{order:2;}
  .avatar{
    width:104px; height:104px; border-radius:50%; margin-inline:auto;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:var(--surface); border:3px solid var(--tz-color, var(--teal));
    box-shadow:0 10px 22px rgba(4,29,69,.14);
    font-family:var(--font-display); font-size:1.5rem; color:var(--navy); font-weight:600;
  }
  .avatar img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
  .avatar.placeholder svg{width:52%; height:52%; color:var(--tz-color, var(--teal)); opacity:.55;}
  @media (max-width:900px){
    .team-zigzag-line{display:none;}
    .team-zigzag-wrap{padding-block:20px;}
    .team-grid{flex-wrap:wrap; justify-content:center; gap:32px 20px;}
    .team-card, .team-card.tz-low{margin-block-start:0; width:130px;}
    .team-card h3, .team-card.tz-low h3{order:1 !important; margin-block-start:14px;}
    .team-card p, .team-card.tz-low p{order:2 !important;}
    .team-card .avatar, .team-card.tz-low .avatar{order:0 !important;}
  }

  .avatar img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
  /* ---------- testimonials ---------- */
  .rating-row{display:flex; align-items:center; gap:18px; margin-block-end:40px; flex-wrap:wrap;}
  .rating-row .score{font-family:var(--font-display); font-size:2.6rem; color:var(--navy);}
  .rating-row .stars{color:var(--teal); font-size:1.1rem; letter-spacing:2px;}
  .rating-row .rating-copy{font-size:.85rem; color:var(--ink-soft);}
  .testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .testi-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:32px;}
  .testi-card .quote-mark{font-family:var(--font-display); font-size:2.6rem; color:var(--teal); line-height:1; display:block; margin-block-end:8px;}
  .testi-card p.quote{color:var(--ink); font-size:1rem; margin:0 0 20px;}
  .testi-person{display:flex; align-items:center; gap:12px;}
  .testi-person .mini-avatar{width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--teal-soft); display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; font-family:var(--font-display);}
  .testi-person strong{display:block; font-size:.92rem; color:var(--navy);}
  .testi-person span{font-size:.8rem; color:var(--ink-soft);}

  /* ---------- contact ---------- */
  .contact-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px;}
  .contact-info-item{display:flex; gap:16px; padding-block:20px; border-block-end:1px solid var(--line);}
  .contact-info-item:first-child{border-block-start:1px solid var(--line);}
  .contact-info-item .ic{width:22px; height:22px; flex:none; color:var(--teal); margin-block-start:3px;}
  .contact-info-item h3{font-size:.82rem; text-transform:none; letter-spacing:.03em; color:var(--ink-soft); margin-block-end:4px; font-family:var(--font-body); font-weight:600;}
  .contact-info-item p, .contact-info-item a{margin:0; font-size:1rem; color:var(--navy); font-weight:500;}
  .social-row{display:flex; gap:12px; margin-block-start:26px;}
  .social-row a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--navy); transition:background .2s, color .2s;}
  .social-row a:hover{background:var(--navy); color:var(--paper); border-color:var(--navy);}
  .social-row svg{width:16px; height:16px;}

  form.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  form.contact-form .full{grid-column:1/-1;}
  .field label{display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-block-end:7px;}
  .field input, .field textarea{
    width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-s);
    background:var(--paper); font:inherit; color:var(--ink); resize:vertical;
  }
  .field textarea{min-height:130px;}
  .field input:focus, .field textarea:focus{border-color:var(--teal);}
  form.contact-form button{margin-block-start:6px;}
  .form-note{font-size:.8rem; color:var(--ink-soft); margin-block-start:14px;}

  /* ---------- about page banner ---------- */
  .about-banner-inner{display:flex; align-items:center; gap:32px;}
  .about-banner-photo{
    flex:none; width:140px; height:140px; border-radius:50%; overflow:hidden;
    border:3px solid var(--teal); box-shadow:0 14px 30px -10px rgba(4,29,69,.35);
  }
  .about-banner-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
  @media (max-width:700px){
    .about-banner-inner{flex-direction:column; text-align:center; gap:20px;}
  }

  /* ---------- government platforms ---------- */
  .platforms-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .platform-badge{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:22px 20px; text-align:center; font-weight:600; color:var(--navy); font-size:.98rem;
    transition:border-color .25s var(--ease), transform .25s var(--ease);
  }
  .platform-badge:hover{border-color:var(--teal); transform:translateY(-3px);}
  @media (max-width:760px){
    .platforms-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:480px){
    .platforms-grid{grid-template-columns:1fr;}
  }

  /* ---------- review cards (speech bubble) ---------- */
  .review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-block-start:20px;}
  .review-card{
    position:relative; background:#fff; border-radius:20px;
    padding:40px 26px 30px; text-align:center;
    box-shadow:0 20px 45px -22px rgba(4,29,69,.25);
  }
  .review-card::after{
    content:''; position:absolute; bottom:-9px; inset-inline-start:34px;
    width:20px; height:20px; background:#fff;
    transform:rotate(45deg); border-radius:0 0 5px 0;
    box-shadow:4px 4px 10px -6px rgba(4,29,69,.15);
  }
  .review-badge{
    position:absolute; top:-18px; inset-inline-end:22px;
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(135deg, var(--teal), var(--teal-dark));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 20px -6px rgba(10,187,181,.55);
  }
  .review-badge svg{width:20px; height:20px; color:#fff;}
  .review-quote-icon{display:block; font-family:Georgia,serif; font-size:2.6rem; color:var(--teal); line-height:1; margin-block-end:6px;}
  .review-text{color:var(--navy); font-weight:600; font-size:.98rem; line-height:1.55; margin:0 0 18px;}
  .review-author{display:block; font-size:.85rem; color:var(--ink-soft); font-weight:500;}
  @media (max-width:900px){
    .review-grid{grid-template-columns:1fr; gap:44px;}
  }

  /* ---------- founder message ---------- */
  .founder-message{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
  .founder-photo-3d{perspective:1400px;}
  .founder-photo-card{
    position:relative; aspect-ratio:4/5; max-width:340px; margin-inline:auto;
    transform:rotateY(-14deg) rotateX(3deg);
    transform-style:preserve-3d;
    transition:transform .6s var(--ease);
    animation:founderFloat 7s ease-in-out infinite alternate;
  }
  .founder-photo-3d:hover .founder-photo-card{transform:rotateY(-6deg) rotateX(1deg) scale(1.03);}
  .founder-photo-card .layer{position:absolute; inset:0; border-radius:var(--radius-m);}
  .layer-navy{background:var(--navy); transform:translateZ(-50px) translate(26px,26px);}
  .layer-teal{background:var(--teal); transform:translateZ(-25px) translate(13px,13px);}
  .layer-photo{overflow:hidden; box-shadow:0 35px 60px -20px rgba(4,29,69,.5);}
  .layer-photo img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
  body.lang-ar .founder-photo-card{transform:rotateY(14deg) rotateX(3deg);}
  body.lang-ar .founder-photo-3d:hover .founder-photo-card{transform:rotateY(6deg) rotateX(1deg) scale(1.03);}
  body.lang-ar .layer-navy{transform:translateZ(-50px) translate(-26px,26px);}
  body.lang-ar .layer-teal{transform:translateZ(-25px) translate(-13px,13px);}
  @keyframes founderFloat{
    from{ transform:rotateY(-14deg) rotateX(3deg) translateY(0); }
    to{ transform:rotateY(-14deg) rotateX(3deg) translateY(-14px); }
  }
  body.lang-ar .founder-photo-card{animation-name:founderFloatRtl;}
  @keyframes founderFloatRtl{
    from{ transform:rotateY(14deg) rotateX(3deg) translateY(0); }
    to{ transform:rotateY(14deg) rotateX(3deg) translateY(-14px); }
  }
  @media (prefers-reduced-motion: reduce){
    .founder-photo-card{animation:none;}
  }
  .founder-text h2{font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--navy); margin-block:14px 20px;}
  .founder-text p{color:var(--ink-soft); margin:0 0 16px; max-width:60ch;}
  .founder-signature{margin-block-start:22px; padding-block-start:18px; border-block-start:1px solid var(--line);}
  .founder-signature strong{display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--navy);}
  .founder-signature span{font-size:.88rem; color:var(--ink-soft);}
  @media (max-width:900px){
    .founder-message{grid-template-columns:1fr; gap:40px;}
    .founder-photo-card{max-width:260px;}
  }

  /* ---------- seasonal banner ---------- */
  .seasonal-banner{display:block; border-radius:var(--radius-m); overflow:hidden; box-shadow:0 20px 45px -25px rgba(4,29,69,.35);}
  .seasonal-banner img{width:100%; height:auto; display:block;}
  .seasonal-banner-full{display:block; width:100%; overflow:hidden;}
  .seasonal-banner-full img{width:100%; height:auto; display:block;}

  footer{position:relative; background:var(--navy); color:#CFE0D4; padding-block:0 0;}
  .footer-wave{position:absolute; top:0; inset-inline-start:0; width:100%; height:auto; display:block; transform:translateY(-100%);}
  .footer-main{
    display:grid; grid-template-columns:1.3fr 1fr 1.3fr 1.2fr; gap:40px;
    padding-block:12px 44px;
  }
  .footer-brand p{margin:14px 0 0; font-size:.9rem; color:#9FBBA9; max-width:32ch; line-height:1.6;}
  .footer-brand .pixel-accent-footer{margin-block-start:18px; opacity:.8;}
  .footer-col h4{
    font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.04em;
    color:var(--teal-soft); margin:0 0 18px; text-transform:uppercase;
  }
  body.lang-ar .footer-col h4{letter-spacing:0;}
  .footer-col{display:flex; flex-direction:column; gap:12px;}
  .footer-col a{font-size:.92rem; color:#CFE0D4; position:relative; width:fit-content; transition:color .2s;}
  .footer-col a::after{content:''; position:absolute; inset-inline-start:0; bottom:-3px; width:0; height:1px; background:var(--teal); transition:width .25s var(--ease);}
  .footer-col a:hover{color:#fff;}
  .footer-col a:hover::after{width:100%;}
  .footer-contact-item{display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:#CFE0D4;}
  .footer-contact-item svg{width:16px; height:16px; flex:none; margin-block-start:3px; color:var(--teal);}
  .social-row-footer{display:flex; gap:10px; margin-block-start:20px;}
  .social-row-footer a{
    width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; color:#CFE0D4;
    transition:background .25s, color .25s, transform .25s var(--ease); position:static;
  }
  .social-row-footer a::after{display:none;}
  .social-row-footer a:hover{background:var(--teal); color:var(--navy); transform:translateY(-3px);}
  .social-row-footer svg{width:15px; height:15px;}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-block:20px; border-block-start:1px solid rgba(255,255,255,.12);
    font-size:.82rem; color:#8FA99B; flex-wrap:wrap; gap:10px;
  }
  .footer-bottom a{color:#8FA99B; text-decoration:underline; text-underline-offset:2px;}
  .footer-bottom a:hover{color:var(--teal-soft);}
  @media (max-width:900px){
    .footer-main{grid-template-columns:1fr 1fr; row-gap:36px;}
  }
  @media (max-width:560px){
    .footer-main{grid-template-columns:1fr;}
  }

  /* ---------- back to top ---------- */
  .to-top{
    position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:40;
    width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--paper);
    display:flex; align-items:center; justify-content:center; border:none;
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .to-top.show{opacity:1; pointer-events:auto;}
  .to-top svg{width:18px; height:18px;}
  body.lang-ar .to-top svg{transform:scaleX(-1) rotate(0deg);}

  /* ---------- whatsapp floating button ---------- */
  .whatsapp-float{
    position:fixed; inset-block-end:26px; inset-inline-start:26px; z-index:40;
    width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; border:none;
    box-shadow:0 10px 24px rgba(4,29,69,.25);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .whatsapp-float::before{
    content:''; position:absolute; inset:0; border-radius:50%; background:#25D366;
    animation:waPulse 2.4s ease-out infinite; z-index:-1;
  }
  .whatsapp-float svg{width:30px; height:30px;}
  .whatsapp-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 30px rgba(4,29,69,.32);}
  @keyframes waPulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}
    100%{box-shadow:0 0 0 18px rgba(37,211,102,0);}
  }
  @media (prefers-reduced-motion: reduce){
    .whatsapp-float::before{animation:none;}
  }
  @media (max-width:560px){
    .whatsapp-float{width:50px; height:50px; inset-block-end:20px; inset-inline-start:20px;}
    .whatsapp-float svg{width:26px; height:26px;}
    .to-top{inset-block-end:20px; inset-inline-end:20px;}
  }

  /* ---------- responsive ---------- */
  @media (max-width:960px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-art{max-width:320px; margin-inline:auto; order:-1;}
    .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:32px;}
    .svc-teaser-grid{grid-template-columns:repeat(2,1fr);}
    .about-teaser{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .testi-grid{grid-template-columns:1fr;}
    .process-steps{gap:22px;}
    .contact-grid{grid-template-columns:1fr;}
    .cta-banner{flex-direction:column; text-align:center;}
  }
  @media (max-width:560px){
    .svc-teaser-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr;}
    form.contact-form{grid-template-columns:1fr;}
    .service-row{padding-block:26px;}
  }

  /* mobile nav panel */
  .mobile-nav{
    position:fixed; inset:0; background:var(--navy); z-index:60;
    display:flex; flex-direction:column; padding:26px 28px;
    transform:translateY(-100%); transition:transform .4s var(--ease);
  }
  .mobile-nav.open{transform:translateY(0);}
  .mobile-nav .close-x{align-self:flex-end; background:none; border:none; color:var(--paper); font-size:1.6rem; line-height:1; padding:8px;}
  .mobile-nav ul{display:flex; flex-direction:column; gap:26px; margin-block-start:40px;}
  .mobile-nav a{font-family:var(--font-display); font-size:1.7rem; color:var(--paper);}
  .mobile-nav .btn{margin-block-start:34px; align-self:flex-start;}

/* ============ VISION 2030 SECTION ============ */
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-block-start:40px;}
.pillar-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px 24px; position:relative; overflow:hidden;}
.pillar-card .pillar-num{position:absolute; top:-6px; inset-inline-end:14px; font-family:var(--font-display); font-size:3.4rem; font-weight:700; color:var(--surface); z-index:0;}
.pillar-card h3{position:relative; z-index:1; font-size:1.08rem; color:var(--navy); margin-block-end:8px;}
.pillar-card p{position:relative; z-index:1; margin:0; font-size:.92rem; color:var(--ink-soft);}
.pillar-card::before{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--teal);}

.vision-chart-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:40px clamp(20px,4vw,48px) 32px; margin-block-start:56px;
  position:relative;
}
@media (max-width:760px){
  .vision-chart-panel::after{
    content:''; position:absolute; top:0; bottom:0; inset-inline-end:0; width:36px;
    background:linear-gradient(90deg, transparent, var(--paper));
    pointer-events:none; border-radius:0 var(--radius-m) var(--radius-m) 0;
  }
  body.lang-ar .vision-chart-panel::after{ transform:scaleX(-1); }
}
.vision-chart-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-block-end:8px;}
.vision-chart-head h3{font-size:1.15rem; color:var(--navy);}
.vision-chart-head span{font-size:.85rem; color:var(--ink-soft);}

.chart3d-wrap{
  display:flex;
  justify-content:space-around;
  gap:16px;
  position:relative;
  margin-block-start:56px;
  padding-inline-start:18px;
}
.chart3d-wrap::after{
  content:''; position:absolute; top:230px; inset-inline-start:0; inset-inline-end:0; height:1px; background:var(--line);
}
.bar3d-col{display:flex; flex-direction:column; align-items:center; width:100%; max-width:130px;}
.bar-stack{height:230px; width:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;}
.bar3d{
  position:relative;
  width:44px;
  height:0;
  transition:height 1.1s var(--ease);
}
.bar3d .bar-front{position:absolute; inset-inline-start:0; bottom:0; width:44px; height:100%; background:linear-gradient(180deg, #2FD4CC, var(--teal-dark));}
.bar3d .bar-top{position:absolute; inset-inline-start:0; bottom:100%; width:44px; height:11px; background:#93EFE9; transform-origin:bottom left; transform:skewX(-45deg);}
body.lang-ar .bar3d .bar-top{transform-origin:bottom right; transform:skewX(45deg);}
.bar3d .bar-side{position:absolute; inset-inline-start:100%; bottom:0; width:11px; height:100%; background:var(--navy-2); transform-origin:top left; transform:skewY(-45deg);}
body.lang-ar .bar3d .bar-side{inset-inline-start:auto; inset-inline-end:100%; transform-origin:top right; transform:skewY(45deg);}
.bar3d .marker-target{position:absolute; inset-inline-start:-11px; inset-inline-end:-16px; height:0; border-top:2px dashed var(--navy); opacity:.75;}
.bar-value{font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:1.05rem; margin-block-end:10px;}
.bar3d-label{margin-block-start:16px; font-size:.82rem; color:var(--ink-soft); text-align:center; line-height:1.35;}
.bar3d-label strong{display:block; color:var(--navy); font-size:.85rem;}
.bar3d-status{display:inline-block; margin-block-start:6px; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:99px; background:var(--teal-soft); color:var(--teal-dark);}

.vision-legend{display:flex; flex-wrap:wrap; gap:22px; margin-block-start:30px; padding-block-start:20px; border-block-start:1px solid var(--line);}
.vision-legend .leg-item{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft);}
.leg-swatch{width:14px; height:14px; border-radius:3px; background:var(--teal-dark); flex:none;}
.leg-swatch.line{background:none; border-top:2px dashed var(--navy); width:16px; height:0;}
.vision-source{margin-block-start:18px; font-size:.8rem; color:var(--ink-soft);}
.vision-source a{color:var(--teal-dark); font-weight:600; text-decoration:underline;}

@media (max-width:760px){
  .pillar-grid{grid-template-columns:1fr;}
  .chart3d-wrap{gap:6px; overflow-x:auto; padding-inline-end:8px; padding-block-end:6px; justify-content:flex-start;}
  .chart3d-wrap::after{display:none;}
  .bar-stack{border-block-end:1px solid var(--line);}
  .bar3d-col{min-width:82px; max-width:82px;}
  .bar3d{width:34px;}
  .bar3d .bar-front{width:34px;}
  .bar3d .bar-top{width:34px;}
  .bar3d-label{font-size:.76rem;}
  .bar3d-label strong{font-size:.78rem;}
}

/* ============ SMOOTH CROSS-PAGE TRANSITIONS (progressive enhancement) ============ */
@view-transition{
  navigation:auto;
}
::view-transition-old(root){ animation-duration:.32s; animation-timing-function:ease-out; }
::view-transition-new(root){ animation-duration:.32s; animation-timing-function:ease-out; }

/* ============ AMBIENT HERO GLOW ============ */
.hero-glow{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(10,187,181,.35), rgba(10,187,181,0) 70%);
  filter:blur(10px);
  z-index:-1;
  top:-60px; inset-inline-end:-80px;
  animation:heroFloat 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroFloat{
  from{ transform:translateY(-16px) scale(1); }
  to{ transform:translateY(18px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  .hero-glow{ animation:none; }
}

/* ============ OFFER LANDING PAGE ============ */
.offer-hero{position:relative; min-height:580px; display:flex; align-items:center; overflow:hidden; padding-block:0;}
.offer-hero-media{position:absolute; inset:0; z-index:0;}
.offer-hero-media img{width:100%; height:100%; object-fit:cover; display:block;}
.offer-hero-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(4,29,69,.94) 32%, rgba(4,29,69,.6) 72%);}
body.lang-ar .offer-hero-overlay{background:linear-gradient(260deg, rgba(4,29,69,.94) 32%, rgba(4,29,69,.6) 72%);}
.offer-hero-content{position:relative; z-index:2; max-width:680px;}
.offer-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--gold), #8F6C28); color:#fff;
  padding:8px 16px; border-radius:99px; font-size:.82rem; font-weight:700;
  margin-block-end:22px; box-shadow:0 10px 20px -6px rgba(182,141,64,.55);
}
.offer-badge svg{width:16px; height:16px;}
.offer-hero-content h1{color:#fff; font-size:clamp(2rem,4vw,3rem); max-width:16ch; margin-block-end:18px;}
.offer-hero-content .lead{color:#D7DEE8; max-width:48ch;}
.offer-hero-content .link-arrow.light{color:#fff;}

.ownership-strip{display:flex; align-items:center; gap:24px;}
.ownership-icon{
  flex:none; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
}
.ownership-icon svg{width:32px; height:32px; color:var(--gold); animation:spinGlobe 14s linear infinite;}
@keyframes spinGlobe{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.ownership-icon svg{animation:none;}}
.ownership-strip h2{color:#fff; font-size:1.4rem; margin:0 0 4px;}
.ownership-strip p{color:#B9C6D6; margin:0; font-size:.95rem;}

.pricing-3d-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-block-start:50px; perspective:1600px;}
.pricing-3d-card{
  position:relative; background:#fff; border-radius:20px; padding:44px 36px;
  box-shadow:0 30px 60px -25px rgba(4,29,69,.3);
  transform:rotateX(4deg); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  border-block-start:4px solid var(--gold);
}
.pricing-3d-card.alt{border-block-start-color:var(--teal);}
.pricing-3d-card:hover{transform:rotateX(0deg) translateY(-8px); box-shadow:0 40px 70px -25px rgba(4,29,69,.4);}
.pricing-badge{
  position:absolute; top:-14px; inset-inline-end:28px; background:var(--gold); color:#fff;
  font-size:.75rem; font-weight:700; padding:6px 14px; border-radius:99px;
  box-shadow:0 8px 16px -4px rgba(182,141,64,.5);
}
.pricing-3d-card h3{font-size:1.3rem; color:var(--navy); margin-block-end:8px;}
.pricing-desc{color:var(--ink-soft); font-size:.92rem; margin:0 0 24px;}
.pricing-amount{display:flex; align-items:baseline; gap:8px; color:var(--navy); font-family:var(--font-display); margin-block-end:6px;}
.pricing-amount > span:first-child{font-size:1rem; font-weight:600; color:var(--ink-soft); font-family:var(--font-body);}
.pricing-number{font-size:2.8rem; font-weight:700;}
.pricing-note{font-size:.82rem; color:var(--teal-dark); font-weight:600; margin:0 0 26px;}
.pricing-check-list{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px;}
.pricing-check-list li{position:relative; padding-inline-start:28px; font-size:.92rem; color:var(--ink);}
.pricing-check-list li::before{
  content:'\2713'; position:absolute; inset-inline-start:0; top:1px; width:18px; height:18px; border-radius:50%;
  background:var(--teal); color:#fff; font-size:.68rem; line-height:18px; text-align:center;
}

.offer-services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-block-start:10px;}
.offer-service-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:30px 24px;
  transition:transform .25s var(--ease), border-color .25s;
}
.offer-service-card:hover{transform:translateY(-4px); border-color:var(--teal);}
.badge-3d{
  width:56px; height:56px; border-radius:16px; margin-block-end:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--teal), var(--teal-dark)); color:#fff;
  box-shadow:0 12px 22px -8px rgba(10,187,181,.55), inset 0 -3px 6px rgba(0,0,0,.15), inset 0 2px 3px rgba(255,255,255,.3);
}
.badge-3d svg{width:26px; height:26px;}
.offer-service-card h3{font-size:1.05rem; color:var(--navy); margin-block-end:8px;}
.offer-service-card p{margin:0; color:var(--ink-soft); font-size:.9rem;}

@media (max-width:900px){
  .offer-hero{min-height:520px;}
  .offer-hero-overlay{background:linear-gradient(180deg, rgba(4,29,69,.55) 0%, rgba(4,29,69,.92) 65%) !important;}
  .pricing-3d-grid{grid-template-columns:1fr;}
  .offer-services-grid{grid-template-columns:repeat(2,1fr);}
  .ownership-strip{flex-direction:column; text-align:center;}
}
@media (max-width:560px){
  .offer-services-grid{grid-template-columns:1fr;}
  .pricing-3d-card{padding:34px 24px;}
}