:root{
    --navy-950:#071B3D;
    --navy-900:#0B2A5B;
    --navy-700:#163E7D;
    --teal-500:#12A99C;
    --teal-400:#2FC2B4;
    --teal-300:#8FE6DA;
    --white:#FFFFFF;
    --ink:#0A1830;
    --ink-soft:#3E5273;
    --mist:#F4FAF9;
    --mist-line:#E1EEEC;
    --shadow: 0 20px 50px -20px rgba(11,42,91,.25);
    --radius: 18px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Tajawal', sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.75;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Cairo', sans-serif; color:var(--navy-900); line-height:1.35;}
  .eyebrow{
    font-family:'IBM Plex Sans Arabic', sans-serif;
    font-size:.8rem;
    letter-spacing:.06em;
    color:var(--teal-500);
    font-weight:600;
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.9rem;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:2px; background:var(--teal-500); display:inline-block; border-radius:2px;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  section{position:relative;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  /* subtle pixel-dust texture, echoes the dissolving pixels in the logo mark */
  .pixel-dust{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
  .pixel-dust span{
    position:absolute; display:block; background:var(--teal-400); opacity:.14; border-radius:2px;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--mist-line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .brand{display:flex; align-items:center; gap:.65rem;}
  .brand img{height:40px; width:auto;}
  .brand-name{font-family:'Cairo',sans-serif; font-weight:800; font-size:1.05rem; color:var(--navy-900);}
  .brand-name span{color:var(--teal-500);}
  nav ul{list-style:none; display:flex; gap:2rem;}
  nav ul a{font-weight:500; font-size:.95rem; color:var(--ink-soft); transition:color .2s;}
  nav ul a:hover{color:var(--teal-500);}
  .nav-cta{
    background:var(--navy-900); color:var(--white); padding:.65rem 1.4rem;
    border-radius:999px; font-weight:700; font-size:.9rem; white-space:nowrap;
    transition:background .2s, transform .2s;
  }
  .nav-cta:hover{background:var(--teal-500); transform:translateY(-2px);}
  .nav-toggle{display:none; background:none; border:none; cursor:pointer;}
  .nav-toggle span{display:block; width:24px; height:2px; background:var(--navy-900); margin:5px 0;}

  /* ---------- HERO ---------- */
  .hero{
    background:linear-gradient(180deg, var(--white) 0%, var(--mist) 100%);
    padding:88px 0 40px;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; position:relative; z-index:1;
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--white); border:1px solid var(--mist-line);
    padding:.5rem 1rem; border-radius:999px; font-size:.8rem; color:var(--navy-700);
    font-weight:600; box-shadow:var(--shadow); margin-bottom:1.6rem;
  }
  .hero-tag i{width:8px; height:8px; border-radius:50%; background:var(--teal-500); display:inline-block;}
  .hero h1{
    font-size:clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight:900;
    margin-bottom:1.3rem;
  }
  .hero h1 .accent{color:var(--teal-500);}
  .hero p.lead{
    font-size:1.12rem; color:var(--ink-soft); max-width:560px; margin-bottom:2.1rem;
  }
  .btn-row{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem;}
  .btn{
    padding:.95rem 1.9rem; border-radius:12px; font-weight:700; font-size:.98rem;
    display:inline-flex; align-items:center; gap:.6rem; transition:all .25s;
  }
  .btn-primary{background:var(--navy-900); color:var(--white);}
  .btn-primary:hover{background:var(--teal-500); transform:translateY(-3px); box-shadow:var(--shadow);}
  .btn-ghost{border:1.5px solid var(--navy-900); color:var(--navy-900);}
  .btn-ghost:hover{background:var(--navy-900); color:var(--white);}
  .hero-stats{display:flex; gap:2.2rem; flex-wrap:wrap;}
  .hero-stats div{border-right:2px solid var(--mist-line); padding-right:1.2rem;}
  .hero-stats div:first-child{padding-right:0; border-right:none;}
  .hero-stats b{font-family:'IBM Plex Sans Arabic'; font-size:1.6rem; color:var(--navy-900); display:block;}
  .hero-stats span{font-size:.82rem; color:var(--ink-soft);}

  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
  .hero-visual .ring{
    position:absolute; width:420px; height:420px; border-radius:50%;
    border:1px dashed var(--mist-line);
  }
  .hero-visual .logo-card{
    position:relative; background:var(--white); border-radius:28px;
    padding:2.4rem; box-shadow:var(--shadow); width:min(360px, 80%);
  }
  .hero-visual .logo-card img{width:100%;}
  .pulse-wrap{width:100%; margin-top:.6rem;}
  .pulse-wrap svg{width:100%; height:46px; display:block;}
  .pulse-path{
    fill:none; stroke:var(--teal-500); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:600; stroke-dashoffset:600;
    animation:draw 3.2s ease-in-out infinite;
  }
  @keyframes draw{
    0%{stroke-dashoffset:600;}
    55%{stroke-dashoffset:0;}
    100%{stroke-dashoffset:-600;}
  }

  /* section divider echoing the pulse motif */
  .ecg-divider{height:64px; width:100%; overflow:hidden;}
  .ecg-divider svg{width:100%; height:100%;}
  .ecg-divider path{fill:none; stroke:var(--mist-line); stroke-width:2;}
  .ecg-divider path.live{
    stroke:var(--teal-500); stroke-width:2.4;
    stroke-dasharray:2000; stroke-dashoffset:2000;
  }
  .ecg-divider.in-view path.live{animation:draw-once 2.4s ease forwards;}
  @keyframes draw-once{ to{stroke-dashoffset:0;} }

  /* ---------- SECTION HEADS ---------- */
  .section-head{max-width:620px; margin-bottom:3rem;}
  .section-head h2{font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800;}
  .section-head p{color:var(--ink-soft); margin-top:.9rem; font-size:1.02rem;}
  .center{margin-left:auto; margin-right:auto; text-align:center;}

  /* ---------- ABOUT ---------- */
  .about{padding:90px 0 40px;}
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:start;}
  .about-text p{color:var(--ink-soft); margin-bottom:1.1rem; font-size:1.02rem;}
  .about-text .msg-box{
    background:var(--navy-900); color:var(--white); padding:1.6rem 1.8rem; border-radius:var(--radius);
    margin-top:1.6rem;
  }
  .about-text .msg-box b{font-family:'Cairo'; display:block; font-size:1.15rem; margin-bottom:.4rem; color:var(--teal-300);}

  .palette{display:flex; flex-direction:column; gap:1rem;}
  .swatch{
    display:flex; align-items:center; gap:1.1rem; background:var(--mist); border:1px solid var(--mist-line);
    border-radius:14px; padding:1.1rem 1.3rem;
  }
  .swatch i{width:46px; height:46px; border-radius:12px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
  .swatch b{display:block; font-family:'Cairo'; font-size:1rem; color:var(--navy-900);}
  .swatch span{font-size:.85rem; color:var(--ink-soft);}
  .sw-navy{background:var(--navy-900);}
  .sw-teal{background:var(--teal-500);}
  .sw-white{background:var(--white); box-shadow:inset 0 0 0 1px #ddd;}

  /* ---------- SECTORS ---------- */
  .sectors{padding:40px 0 90px; background:var(--mist);}
  .sector-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
  .sector-card{
    background:var(--white); border-radius:var(--radius); padding:1.9rem 1.6rem;
    border:1px solid var(--mist-line); transition:transform .25s, box-shadow .25s;
  }
  .sector-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent;}
  .sector-num{
    font-family:'IBM Plex Sans Arabic'; font-size:.78rem; color:var(--teal-500); font-weight:600; margin-bottom:1rem; display:block;
  }
  .sector-icon{
    width:52px; height:52px; border-radius:14px; background:var(--mist);
    display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
  }
  .sector-icon svg{width:26px; height:26px; stroke:var(--navy-900);}
  .sector-card h3{font-size:1.08rem; margin-bottom:.6rem;}
  .sector-card p{font-size:.9rem; color:var(--ink-soft);}

  /* ---------- SERVICES ---------- */
  .services{padding:90px 0;}
  .service-tabs-note{color:var(--ink-soft); margin-bottom:2.4rem; max-width:640px;}
  .service-groups{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
  .service-group{
    border:1px solid var(--mist-line); border-radius:var(--radius); padding:1.8rem 1.9rem;
    transition:border-color .25s;
  }
  .service-group:hover{border-color:var(--teal-400);}
  .service-group h3{
    font-size:1.05rem; display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;
  }
  .service-group h3 i{
    width:34px; height:34px; border-radius:10px; background:var(--navy-900); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .service-group h3 i svg{width:18px; height:18px; stroke:var(--teal-300);}
  .service-group ul{list-style:none; display:flex; flex-direction:column; gap:.55rem;}
  .service-group li{
    font-size:.94rem; color:var(--ink-soft); display:flex; align-items:flex-start; gap:.55rem;
  }
  .service-group li::before{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--teal-500);
    margin-top:.55rem; flex-shrink:0;
  }

  /* ---------- PLATFORM SPOTLIGHT ---------- */
  .platform{
    background:var(--navy-950);
    background-image:radial-gradient(circle at 15% 20%, rgba(47,194,180,.16), transparent 45%),
                      radial-gradient(circle at 85% 80%, rgba(47,194,180,.1), transparent 40%);
    color:var(--white); padding:100px 0; position:relative; overflow:hidden;
  }
  .platform .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:3.4rem; align-items:center; position:relative; z-index:1;}
  .platform .eyebrow{color:var(--teal-300);}
  .platform .eyebrow::before{background:var(--teal-300);}
  .platform h2{color:var(--white); font-size:clamp(1.7rem,3.3vw,2.5rem); margin-bottom:1.2rem;}
  .platform h2 span{color:var(--teal-300);}
  .platform p.lead{color:#B9C7DF; font-size:1.05rem; margin-bottom:1.7rem; max-width:560px;}
  .rank-badge{
    display:inline-flex; align-items:center; gap:.7rem; background:rgba(255,255,255,.06);
    border:1px solid rgba(143,230,218,.35); padding:.75rem 1.2rem; border-radius:999px;
    font-weight:700; font-size:.9rem; color:var(--teal-300); margin-bottom:1.8rem;
  }
  .platform-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
  .p-badge{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px;
    padding:1.2rem 1rem; text-align:center;
  }
  .p-badge b{font-family:'IBM Plex Sans Arabic'; font-size:1.5rem; color:var(--teal-300); display:block; margin-bottom:.3rem;}
  .p-badge span{font-size:.78rem; color:#B9C7DF;}

  .platform-card{
    background:var(--white); border-radius:24px; padding:2.4rem; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  }
  .platform-card .pc-head{display:flex; align-items:center; gap:.9rem; margin-bottom:1.4rem;}
  .platform-card .pc-icon{
    width:52px; height:52px; border-radius:14px; background:var(--teal-500); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .platform-card .pc-icon svg{width:26px; height:26px; stroke:var(--white);}
  .platform-card h3{font-size:1.25rem; color:var(--navy-900);}
  .platform-card h3 small{display:block; font-size:.8rem; color:var(--ink-soft); font-weight:500; margin-top:.15rem;}
  .platform-card ul{list-style:none; display:flex; flex-direction:column; gap:.75rem; margin-top:1rem;}
  .platform-card li{display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:var(--ink-soft);}
  .platform-card li svg{width:18px; height:18px; stroke:var(--teal-500); flex-shrink:0; margin-top:.15rem;}
  .platform-card .search-mock{
    margin-top:1.6rem; background:var(--mist); border-radius:12px; padding:.9rem 1.1rem; border:1px solid var(--mist-line);
  }
  .search-mock .row{display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--ink-soft); margin-bottom:.5rem;}
  .search-mock .row svg{width:14px; height:14px; stroke:var(--teal-500);}
  .search-mock .row:last-child{margin-bottom:0;}
  .search-mock .top-tag{
    background:var(--teal-500); color:var(--white); font-size:.68rem; font-weight:700;
    padding:.15rem .55rem; border-radius:999px;
  }

  /* ---------- AUDIENCE ---------- */
  .audience{padding:90px 0; background:var(--mist);}
  .audience-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;}
  .aud-card{
    background:var(--white); border-radius:14px; padding:1.4rem 1rem; text-align:center;
    border:1px solid var(--mist-line);
  }
  .aud-card svg{width:28px; height:28px; stroke:var(--teal-500); margin:0 auto .7rem;}
  .aud-card span{font-size:.86rem; font-weight:600; color:var(--navy-900);}

  /* ---------- CTA / CONTACT ---------- */
  .cta-final{padding:100px 0; text-align:center;}
  .cta-final h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:1rem;}
  .cta-final p{color:var(--ink-soft); max-width:520px; margin:0 auto 2.2rem;}
  .phone-pill{
    display:inline-flex; align-items:center; gap:.7rem; background:var(--navy-900); color:var(--white);
    padding:1rem 2rem; border-radius:999px; font-family:'IBM Plex Sans Arabic'; font-size:1.15rem; font-weight:600;
    letter-spacing:.02em;
  }
  .phone-pill svg{width:20px; height:20px; stroke:var(--teal-300);}

  footer{
    background:var(--navy-950); color:#9FB0CC; padding:56px 0 28px;
  }
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.6rem;}
  .footer-brand{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;}
  .footer-brand img{height:32px;}
  .footer-brand b{font-family:'Cairo'; color:var(--white); font-weight:800;}
  .footer-col h4{font-family:'Cairo'; color:var(--white); font-size:.95rem; margin-bottom:1rem;}
  .footer-col ul{list-style:none; display:flex; flex-direction:column; gap:.6rem;}
  .footer-col a{font-size:.88rem; transition:color .2s;}
  .footer-col a:hover{color:var(--teal-300);}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.08); padding-top:1.6rem; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:1rem; font-size:.82rem;
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    nav ul{display:none;}
    .nav-toggle{display:block;}
    .hero .wrap{grid-template-columns:1fr; text-align:center;}
    .hero p.lead{margin-inline:auto;}
    .btn-row{justify-content:center;}
    .hero-stats{justify-content:center;}
    .hero-visual{order:-1;}
    .about-grid{grid-template-columns:1fr;}
    .sector-grid{grid-template-columns:repeat(2,1fr);}
    .service-groups{grid-template-columns:1fr;}
    .platform .wrap{grid-template-columns:1fr;}
    .platform-badges{grid-template-columns:repeat(3,1fr);}
    .audience-grid{grid-template-columns:repeat(3,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .sector-grid{grid-template-columns:1fr;}
    .audience-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column; text-align:center;}
    .hero-stats{gap:1.3rem;}
  }

  @media (prefers-reduced-motion: reduce){
    .pulse-path, .ecg-divider path.live{animation:none !important; stroke-dashoffset:0 !important;}
  }

  :focus-visible{outline:2.5px solid var(--teal-500); outline-offset:3px;}