/* =====================================================================
   إسناد | Esnad — Landing Page (Phase 1)
   Aesthetic: Institutional Premium — navy-dominant, disciplined cyan,
   generous whitespace, soft depth, building+checklist motif.
   RTL-first. Font: IBM Plex Sans Arabic.
   ===================================================================== */

/* ----------  Design Tokens — PASS brand identity  ---------- */
:root{
  /* brand — PASS official palette */
  --navy:#313843;            /* Primary Navy */
  --navy-700:#3E4757;        /* lighter navy (hover/gradients) */
  --ink:#313843;             /* Dark Text */
  /* green accent (token names kept as --cyan* to preserve references) */
  --cyan:#00B050;            /* PASS Green */
  --cyan-deep:#007A35;       /* WCAG-tuned green for text/buttons on light */
  --cyan-bright:#3AD07A;     /* bright green accent/glow */
  --teal:#0B6B3A;            /* deep green */
  /* supporting shades (mapped off the green/navy family) */
  --royal:#3E4757;           /* was royal blue → navy shade */
  --ocean:#00B050;           /* was ocean blue → green */
  --slate:#5C6270;
  /* neutrals */
  --bg:#F5F3EE;        /* Light Background (single unified bg) */
  --sand:#F5F3EE;      /* alias — sections no longer alternate */
  --white:#FFFFFF;
  --muted:#616872;
  --muted-light:#7A818B;
  --line:#E6E2D9;      /* Light Gray */
  /* status */
  --green:#00B050;     /* Success — unified on the brand green */
  /* type — IBM Plex Sans Arabic (Arabic) + Poppins (Latin, Gilroy alternative) */
  --font:"Montserrat","Dubai","Tajawal","IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  --font-head:"Montserrat","Dubai","Tajawal","IBM Plex Sans Arabic",system-ui,sans-serif;
  /* layout */
  --container:1200px;
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --space:clamp(48px,5.5vw,84px);
  --shadow-sm:0 4px 14px rgba(49,56,67,.06);
  --shadow:0 14px 40px rgba(49,56,67,.10);
  --shadow-lg:0 30px 70px rgba(49,56,67,.16);
  --ring:0 0 0 4px rgba(0,176,80,.22);
}

/* ----------  Reset  ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(48rem 48rem at 88% -8%, rgba(58,208,122,.08), transparent 60%),
    radial-gradient(44rem 44rem at -12% 106%, rgba(49,56,67,.06), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.35;font-weight:600;color:var(--navy);letter-spacing:0}
.eyebrow,.kicker{font-family:var(--font-head)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2vw,23px)}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.skip-link{position:absolute;inset-inline-start:16px;inset-block-start:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 18px;border-radius:0 0 12px 12px;font-weight:600;font-size:14px;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:0}

/* numbers stay LTR with tabular figures */
.num{direction:ltr;unicode-bidi:isolate;font-feature-settings:"tnum" 1,"lnum" 1}

/* English mode: use Poppins (Gilroy alternative) for Latin */
html[lang="en"]{--font:"Poppins",system-ui,"Segoe UI",sans-serif;--font-head:"Poppins",system-ui,sans-serif}

/* ----------  Layout helpers  ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:22px}
.section{padding-block:var(--space)}
.anchor{display:block;height:0;overflow:hidden}
:where(#contact,#consult,#packages,#about){scroll-margin-top:74px}
.section--sand{background:transparent}
.section--navy{background:transparent;color:#dCE7F2}
.section--navy h2,.section--navy h3{color:#fff}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:12.5px;font-weight:700;color:var(--cyan-deep);
  background:rgba(0,176,80,.09);border:1px solid rgba(0,176,80,.24);
  padding:6px 15px;border-radius:999px;margin-bottom:16px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(0,176,80,.5);animation:livePulse 2s infinite}
.section-head{max-width:680px;margin-bottom:clamp(34px,5vw,56px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{margin-top:12px;font-size:18px}
.lead{font-size:19px;line-height:1.85}

/* ----------  Buttons  ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--radius-pill);
  font-weight:600;font-size:16px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:none}
.btn:disabled,.btn.is-busy{opacity:.6;cursor:progress;transform:none;box-shadow:none;pointer-events:none}
.btn-primary{background:linear-gradient(135deg,#00B050,#007A35);color:#fff;box-shadow:0 10px 24px rgba(0,176,80,.34),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:hover{background:linear-gradient(135deg,#00C25A,#00893C);transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,176,80,.46),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn-ghost{background:rgba(255,255,255,.4);border-color:rgba(49,56,67,.16);color:var(--navy);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--cyan-deep);color:var(--cyan-deep);background:rgba(0,176,80,.08);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}
.btn-block{width:100%}
/* animated gradient border + sheen */
.btn--glow{position:relative;z-index:0;border:0;color:#fff;box-shadow:0 12px 28px rgba(0,176,80,.4)}
.btn--glow:hover{transform:translateY(-2px)}
.btn--glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-2;background:conic-gradient(from 0deg,var(--cyan),var(--cyan-bright),var(--royal),var(--cyan-deep),var(--cyan));animation:spinBorder 4s linear infinite}
.btn--glow::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--cyan-deep)}
.btn--glow:hover::after{background:var(--teal)}
@keyframes spinBorder{to{transform:rotate(360deg)}}
.btn-primary,.btn-light,.btn-ghost{position:relative;overflow:hidden}
.btn-primary::before,.btn-light::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(120%);transition:none;pointer-events:none}
.btn-primary:hover::before,.btn-light:hover::before{animation:sheen .8s ease}
@keyframes sheen{from{transform:translateX(120%)}to{transform:translateX(-120%)}}

/* ----------  Glass utility  ---------- */
.glass{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
}

/* ----------  Header — floating glass pill  ---------- */
.header{
  position:sticky;top:0;z-index:60;
  padding:8px 18px 0;background:transparent;transition:padding .3s ease;
}
.header__inner{
  position:relative;width:max-content;max-width:calc(100% - 8px);margin-inline:auto;
  display:flex;align-items:center;gap:6px;height:50px;padding-inline:8px 8px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
  backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 30px rgba(49,56,67,.1),inset 0 1px 0 rgba(255,255,255,.55);
  transition:background .3s,box-shadow .3s,border-color .3s,transform .3s;
  animation:pillIn .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pillIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.header.scrolled{padding-top:6px}
.header.scrolled .header__inner{
  background:rgba(255,255,255,.62);box-shadow:0 12px 38px rgba(49,56,67,.16),inset 0 1px 0 rgba(255,255,255,.6);
}

/* logo — static (client 2026-08-27: no movement on the brand mark) */
.brand{display:flex;align-items:center;gap:10px;flex:none;order:3}
.brand img{
  height:46px;width:auto;
  transition:filter .35s ease;
}
.brand:hover img{filter:drop-shadow(0 8px 18px rgba(0,176,80,.4))}
/* logo swaps to white-letter version on dark theme */
.brand .logo-dark{display:none}
[data-theme="dark"] .brand .logo-light{display:none}
[data-theme="dark"] .brand .logo-dark{display:block}

/* nav links — animated underline + color */
.nav{display:flex;align-items:center;gap:2px;margin-inline:8px;order:2}
.nav a,.nav .dd__btn{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:10px;font-weight:600;font-size:14px;color:var(--navy);
  background:none;border:0;cursor:pointer;transition:color .22s ease,transform .22s ease;
}
.nav a::after,.nav .dd__btn::after{
  content:"";position:absolute;inset-inline:13px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover,.nav .dd__btn:hover{color:var(--cyan-deep);transform:translateY(-1px)}
.nav a:hover::after,.nav .dd__btn:hover::after{transform:scaleX(1)}
.dd{position:relative}
.dd__btn svg{width:15px;height:15px;transition:transform .25s}
.dd.open .dd__btn svg{transform:rotate(180deg)}
.dd__menu{
  position:absolute;inset-inline-start:0;top:calc(100% + 14px);min-width:264px;
  border-radius:16px;box-shadow:var(--shadow);
  padding:9px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.24s ease;
}
.dd.open .dd__menu{opacity:1;visibility:visible;transform:translateY(0)}
/* the menu overlays page content — keep it near-opaque so nothing bleeds through
   (a large translucent panel is unreadable, and backdrop-filter can be unavailable) */
.dd__menu.glass{background:rgba(255,255,255,.985);border-color:rgba(49,56,67,.09)}
[data-theme="dark"] .dd__menu.glass{background:rgba(10,30,52,.985);border-color:rgba(255,255,255,.12)}
.dd__menu a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;font-size:15px;color:var(--navy)}
.dd__menu a::after{display:none}
.dd__menu a:hover{background:rgba(0,176,80,.1);color:var(--cyan-deep);transform:none}
.dd__menu .ic{width:22px;height:22px;color:var(--cyan-deep);flex:none}
/* two-column mega menu (13 services) */
.dd__menu--mega{
  min-width:min(640px,calc(100vw - 32px));
  display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:13px;
}
.dd__col{display:flex;flex-direction:column;min-width:0}
.dd__label{
  font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--muted-light);padding:5px 12px 7px;
}
.dd__menu--mega a{font-size:14.4px;padding:9px 12px}
.dd__all{
  grid-column:1 / -1;margin-top:5px;padding-top:9px;
  border-top:1px solid rgba(49,56,67,.08);
  justify-content:center;font-weight:600;color:var(--cyan-deep) !important;
}
[data-theme="dark"] .dd__all{border-top-color:rgba(255,255,255,.1)}

/* actions */
.header__actions{display:flex;align-items:center;gap:6px;flex:none;order:1}
.header__actions::before{content:"";width:1px;height:20px;background:rgba(49,56,67,.12);margin-inline:2px 6px;flex:none;order:9}
.icon-btn{
  position:relative;
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(49,56,67,.14);background:rgba(255,255,255,.45);
  color:var(--navy);font-weight:700;font-size:12.5px;cursor:pointer;touch-action:manipulation;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,color .2s,background .2s,box-shadow .2s;
}
/* expand tap target to >=44px without enlarging the visual (keeps header compact) */
.icon-btn::after{content:"";position:absolute;inset:-6px;border-radius:inherit}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan-deep);transform:translateY(-2px);background:#fff;box-shadow:0 6px 16px rgba(0,176,80,.22)}
.icon-btn:active{transform:translateY(0) scale(.94)}
.icon-btn svg{width:17px;height:17px;transition:transform .3s}
.icon-btn.theme-toggle:hover svg{transform:rotate(40deg)}
.icon-btn .ic-sun{display:none}
.link-auth{padding:7px 14px;border:1.5px solid rgba(49,56,67,.16);border-radius:var(--radius-pill);font-weight:600;font-size:13.5px;color:var(--navy);transition:border-color .2s,color .2s,background .2s}
.link-auth:hover{color:var(--cyan-deep);border-color:var(--cyan);background:rgba(0,176,80,.06)}
.header .btn{padding:8px 16px;font-size:13.5px}
#theme-toggle{font-size:0}
.hamburger{display:none;width:44px;height:44px;border:1px solid rgba(49,56,67,.14);background:rgba(255,255,255,.5);border-radius:12px;cursor:pointer;align-items:center;justify-content:center;color:var(--navy)}
.hamburger svg{width:24px;height:24px}
.nav .only-mobile{display:none}

/* ----------  Hero — centered, animated  ---------- */
.hero{position:relative;overflow:hidden;background:transparent;text-align:center;min-height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:stretch;padding:22px 0 26px}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__motif{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:min(125vw,1150px);height:min(125vw,1150px);color:var(--navy);opacity:.08;transform:translate(50%,-50%);transform-origin:center;animation:motifDrift 26s ease-in-out infinite}
.hero__motif .motif-lines path,.hero__motif .motif-ticks path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3s ease forwards}
.hero__motif .motif-ticks path{stroke:var(--cyan-deep);animation-delay:1.4s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes motifDrift{0%,100%{transform:translate(50%,-50%) rotate(0) scale(1)}50%{transform:translate(50%,-50%) rotate(4deg) scale(1.05)}}
.hero__orb{position:absolute;border-radius:50%;filter:blur(12px)}
.hero__orb--a{inset-block-start:-120px;inset-inline-start:-100px;width:440px;height:440px;background:radial-gradient(circle,rgba(58,208,122,.24),transparent 65%);animation:orbA 16s ease-in-out infinite}
.hero__orb--b{inset-block-end:-140px;inset-inline-end:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(49,56,67,.18),transparent 65%);animation:orbB 20s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,-30px)}}
/* floating geometric shapes (professional drift) */
.hero__shape{position:absolute;pointer-events:none;opacity:.55;will-change:transform}
.hero__shape--ring{inset-block-start:17%;inset-inline-start:13%;width:120px;height:120px;border:2px solid rgba(0,176,80,.35);border-radius:50%;animation:floatY 9s ease-in-out infinite}
.hero__shape--dot{inset-block-start:30%;inset-inline-end:17%;width:16px;height:16px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(0,176,80,.12);animation:floatXY 11s ease-in-out infinite}
.hero__shape--sq{inset-block-end:23%;inset-inline-start:11%;width:74px;height:74px;border:2px solid rgba(49,56,67,.22);border-radius:16px;animation:spinSlow 20s linear infinite}
.hero__shape--tri{inset-block-end:19%;inset-inline-end:13%;width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:42px solid rgba(58,208,122,.2);animation:floatY 8s ease-in-out .8s infinite reverse}
.hero__shape--pill{inset-block-start:21%;inset-inline-end:29%;width:88px;height:34px;border-radius:999px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:floatXY 13s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(8deg)}}
@keyframes floatXY{0%,100%{transform:translate(0,0)}33%{transform:translate(22px,-18px)}66%{transform:translate(-16px,14px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;gap:0;padding-block:clamp(8px,2vh,24px)}
.hero__top,.hero__mid{display:flex;flex-direction:column;align-items:center}
.hero__top{padding-top:0}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:13.5px;letter-spacing:.01em;color:var(--cyan-deep);background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.44));border:1px solid rgba(0,176,80,.28);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);padding:8px 18px;border-radius:999px;box-shadow:0 6px 20px rgba(0,176,80,.12),inset 0 1px 0 rgba(255,255,255,.75)}
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(30,158,90,.5);animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(30,158,90,.5)}70%{box-shadow:0 0 0 9px rgba(30,158,90,0)}100%{box-shadow:0 0 0 0 rgba(30,158,90,0)}}
.hero__lockup{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:16px}
.hero__name-ar{font-family:"IBM Plex Sans Arabic","Poppins",sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,40px);line-height:1;letter-spacing:.01em;background:linear-gradient(120deg,var(--navy),var(--ocean) 62%,var(--cyan-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__name-en{font-family:"IBM Plex Sans",sans-serif;letter-spacing:.42em;font-size:12px;font-weight:500;color:var(--muted-light);padding-inline-start:.42em;max-width:100%;text-align:center}
.hero__title{font-family:var(--font-head);font-size:clamp(28px,4.4vw,52px);line-height:1.28;font-weight:700;color:var(--navy);margin-top:clamp(18px,3vh,30px);max-width:24ch;letter-spacing:-.01em}
.hero__title .hl{position:relative;color:var(--cyan-deep)}
.hero__title .hl::after{content:"";position:absolute;inset-inline:0;bottom:.04em;height:.26em;background:rgba(58,208,122,.28);z-index:-1;border-radius:4px;transform:scaleX(0);transform-origin:inline-end;animation:hlGrow .7s ease 1.1s forwards}
@keyframes hlGrow{to{transform:scaleX(1)}}
.hero__sub{font-size:clamp(15px,1.7vw,17.5px);line-height:1.8;margin-top:14px;max-width:600px;color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.hero__actions .btn-primary svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hero__actions .btn-primary:hover svg{transform:translateX(-4px)}
.hero__features{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(28px,5vh,52px);padding:14px 26px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.46));-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.75);border-radius:18px;box-shadow:0 12px 34px rgba(49,56,67,.09),inset 0 1px 0 rgba(255,255,255,.7)}
.feat{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:14px;color:var(--navy);transition:transform .25s ease}
.feat:hover{transform:translateY(-2px)}
.feat__ico{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(0,176,80,.18),rgba(58,208,122,.1));color:var(--cyan-deep);display:grid;place-items:center;transition:transform .3s ease,box-shadow .3s ease}
.feat:hover .feat__ico{transform:scale(1.08);box-shadow:0 6px 16px rgba(0,176,80,.24)}
.feat__ico svg{width:20px;height:20px}
.feat__div{width:1px;height:26px;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.hero__scroll{display:none;position:absolute;inset-block-end:18px;left:50%;transform:translateX(-50%);flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--muted);z-index:1}
.hero__scroll svg{width:20px;height:20px;color:var(--cyan-deep);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ----------  Government Platforms Strip  ---------- */
/* ---------- Government Integration Board ---------- */
.gov{background:transparent;position:relative}
.gov__head{text-align:center;max-width:660px;margin:0 auto clamp(30px,4vw,46px)}
.gov__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.09em;color:var(--cyan-deep);text-transform:uppercase;background:rgba(0,176,80,.09);border:1px solid rgba(0,176,80,.22);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.gov__eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(0,176,80,.5);animation:livePulse 2s infinite}
.gov__title{font-size:clamp(20px,2.7vw,29px);color:var(--navy);font-weight:700;line-height:1.5}
.gov__title .hl{color:var(--cyan-deep)}
.gov__sub{margin-top:12px;font-size:clamp(14px,1.5vw,16px);color:var(--muted);line-height:1.8}

.gov__board{position:relative}
/* connective "signal" wire above the grid — a soft light travels along it */
.gov__wire{position:absolute;inset-block-start:-3px;inset-inline:5%;height:2px;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(49,56,67,.10) 14%,rgba(49,56,67,.10) 86%,transparent)}
.gov__wire::after{content:"";position:absolute;top:0;width:38%;height:100%;inset-inline-start:-45%;
  background:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);animation:govSignal 3.6s linear infinite}
@keyframes govSignal{to{inset-inline-start:107%}}

.gov__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 12px 16px;border-radius:18px;color:var(--navy);isolation:isolate;overflow:hidden;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 26px -16px rgba(8,42,90,.40),inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,box-shadow .28s ease}
.gnode::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(130px 90px at 50% 0%,rgba(0,176,80,.20),transparent 72%)}
.gnode:hover{transform:translateY(-6px);border-color:rgba(0,176,80,.55);
  box-shadow:0 24px 42px -18px rgba(49,56,67,.5),0 0 0 1px rgba(0,176,80,.22),inset 0 1px 0 rgba(255,255,255,.7)}
.gnode:hover::before{opacity:1}
.gnode__ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;flex:none;color:var(--cyan-deep);
  background:linear-gradient(140deg,rgba(0,176,80,.16),rgba(49,56,67,.07));border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7);
  transition:transform .32s cubic-bezier(.16,1,.3,1),background .32s ease,color .32s ease,box-shadow .32s ease}
.gnode__ico svg{width:26px;height:26px}
.gnode:hover .gnode__ico{transform:scale(1.09) translateY(-1px);color:#fff;
  background:linear-gradient(140deg,var(--cyan-deep),var(--teal));box-shadow:0 12px 22px -8px rgba(0,176,80,.55)}
.gnode__name{font-weight:700;font-size:15px;line-height:1.25}
.gnode__en{direction:ltr;font-family:"IBM Plex Sans","Poppins",sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--muted-light);text-transform:uppercase}
.gnode__live{position:absolute;inset-block-start:12px;inset-inline-end:12px;width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14);animation:govLive 2.6s ease-in-out infinite}
.gnode:nth-child(2n) .gnode__live{animation-delay:.5s}
.gnode:nth-child(3n) .gnode__live{animation-delay:1.1s}
.gnode:nth-child(5n) .gnode__live{animation-delay:1.7s}
@keyframes govLive{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ----------  Stats — gradient numbers  ---------- */
/* Stats — single rounded glass pill with dividers */
.stats-pill{
  position:relative;display:flex;align-items:stretch;max-width:960px;margin-inline:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.24));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-radius:22px;padding:clamp(12px,1.4vw,16px) clamp(6px,1.2vw,14px);
  box-shadow:var(--shadow-sm);
}
.stats-pill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(120deg,var(--cyan-bright),var(--royal) 48%,var(--cyan-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5;
}
.stat{position:relative;flex:1;min-width:0;padding:5px clamp(8px,1.4vw,16px);display:flex;align-items:center;justify-content:center;gap:12px}
.stat__sep{flex:none;align-self:center;width:1px;height:42px;background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.stat__ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px;background:rgba(0,176,80,.1);border:1px solid rgba(0,176,80,.2);color:var(--cyan-deep);transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,color .3s ease,box-shadow .3s ease}
.stat__ico svg{width:21px;height:21px}
.stat:hover .stat__ico{transform:translateY(-2px) scale(1.05);background:linear-gradient(140deg,var(--cyan-deep),var(--teal));color:#fff;box-shadow:0 8px 16px -6px rgba(0,176,80,.5)}
.stat__body{min-width:0;text-align:start}
.stat__num{direction:ltr;font-family:var(--font-head);font-size:clamp(21px,2.4vw,29px);font-weight:800;line-height:1.05;background:linear-gradient(135deg,var(--navy),var(--cyan-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__num .suffix{-webkit-text-fill-color:var(--cyan-deep);color:var(--cyan-deep)}
.stat__label{margin-top:4px;font-weight:500;color:var(--muted);font-size:12.5px;line-height:1.3}
.stats-note{text-align:center;margin-top:16px;font-size:13px;color:var(--muted-light)}

/* ----------  Services — compact gradient-border cards  ---------- */
.services__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.svcs__note{
  margin:clamp(22px,3vw,38px) auto 0;text-align:center;
  font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:clamp(16px,1.8vw,22px);line-height:1.7;
}
.svcs__dots{
  display:inline-block;margin-inline:6px;letter-spacing:.18em;
  color:var(--cyan-deep);opacity:.6;font-size:.8em;vertical-align:middle;
}
.svcs__note .hl{color:var(--cyan-deep)}
[data-theme="dark"] .svcs__note .hl,
[data-theme="dark"] .svcs__dots{color:var(--cyan-bright)}
.svc{
  /* basis sized so the client's four home cards sit on one row at ≥1200px */
  flex:1 1 258px;max-width:384px;position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "desc desc" "more more";
  align-items:center;column-gap:14px;row-gap:5px;
  padding:20px 22px;border-radius:20px;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(165%);backdrop-filter:blur(14px) saturate(165%);
  border:1px solid rgba(49,56,67,.12);
  box-shadow:0 10px 26px -18px rgba(8,42,90,.4),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s ease,box-shadow .32s ease;
}
/* start-edge accent spine — distinctive shape signal, grows on hover */
.svc::before{content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;z-index:2;
  background:linear-gradient(180deg,var(--cyan),var(--cyan-deep));transform:scaleY(.3);transform-origin:top;opacity:.45;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.svc:hover{transform:translateY(-6px);border-color:rgba(0,176,80,.45);
  box-shadow:0 26px 46px -22px rgba(49,56,67,.5),0 0 0 1px rgba(0,176,80,.14),inset 0 1px 0 rgba(255,255,255,.7)}
.svc:hover::before{transform:scaleY(1);opacity:1}
.svc__icon{grid-area:icon;position:relative;z-index:1;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:var(--cyan-deep);
  background:linear-gradient(140deg,rgba(0,176,80,.16),rgba(49,56,67,.06));border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s ease,color .35s ease,box-shadow .35s ease}
.svc__icon svg{width:23px;height:23px}
.svc:hover .svc__icon{transform:scale(1.07);color:#fff;background:linear-gradient(140deg,var(--cyan-deep),var(--teal));box-shadow:0 10px 18px -8px rgba(0,176,80,.55)}
.svc h3{grid-area:title;margin:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--navy);position:relative;z-index:1}
.svc p{grid-area:desc;margin:0;font-size:13px;line-height:1.7;color:var(--muted);position:relative;z-index:1}
.svc__more{
  grid-area:more;justify-self:start;position:relative;z-index:1;margin-top:10px;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:600;font-size:13.5px;color:var(--cyan-deep);
}
.svc__more::after{display:none}
.svc__more svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.svc:hover .svc__more svg{transform:translateX(-4px)}
[data-theme="dark"] .svc__more{color:var(--cyan-bright)}
/* compact section head for services */
#services .section-head{margin-bottom:clamp(24px,3.2vw,38px)}
#services .section-head h2{font-size:clamp(22px,2.9vw,33px)}
#services .section-head p{font-size:clamp(14px,1.5vw,16px);margin-top:10px}

/* ---------- Services explore grid (landing first section) ---------- */
.svcx{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(30px,4.4vw,58px) clamp(40px,6vw,76px)}
.svcx__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 40% at 50% -4%,rgba(0,176,80,.09),transparent 68%)}
.svcx__head{max-width:780px;margin:0 auto clamp(28px,3.6vw,46px);text-align:center;display:flex;flex-direction:column;align-items:center}
.svcx__title{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,4.4vw,50px);line-height:1.28;color:var(--navy);letter-spacing:-.01em;margin:0}
.svcx__title .hl{position:relative;color:var(--cyan-deep)}
.svcx__sub{margin-top:16px;font-size:clamp(15px,1.7vw,17.5px);line-height:1.85;color:var(--muted);max-width:640px}
.svcx__eyebrow{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-family:var(--font-head);font-weight:700;font-size:clamp(13px,1.5vw,15px);color:var(--cyan-deep);letter-spacing:.01em}

.svcx__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.scard{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  border-radius:18px;background:#fff;border:1px solid rgba(49,56,67,.12);
  box-shadow:0 10px 26px -18px rgba(49,56,67,.42);
  transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s ease,box-shadow .32s ease}
.scard:hover{transform:translateY(-6px);border-color:rgba(0,176,80,.45);
  box-shadow:0 26px 46px -22px rgba(49,56,67,.5),0 0 0 1px rgba(0,176,80,.14)}
.scard__head{position:relative;padding:15px 16px;background:linear-gradient(135deg,#313843,#3E4757);overflow:hidden}
.scard__head::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:scaleX(.2);opacity:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.scard:hover .scard__head::after{transform:scaleX(1);opacity:1}
.scard__name{margin:0;color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.45}
.scard__body{flex:1;padding:15px 16px 6px}
.scard__body p{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}
.scard__more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:12px 16px 16px;
  font-family:var(--font-head);font-weight:600;font-size:13.5px;color:var(--cyan-deep)}
.scard__more svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.scard:hover .scard__more svg{transform:translateX(-4px)}
/* dark theme */
[data-theme="dark"] .scard{background:rgba(49,56,67,.6);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .scard:hover{border-color:rgba(0,176,80,.5)}
[data-theme="dark"] .scard__head{background:linear-gradient(135deg,#3E4757,#2B3039)}
[data-theme="dark"] .scard__more{color:var(--cyan-bright)}
[data-theme="dark"] .svcx__title{color:#F5F3EE}
[data-theme="dark"] .svcx__title .hl{color:var(--cyan-bright)}
/* responsive columns (mockup is 6-wide on desktop) */
@media (max-width:1140px){.svcx__grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.svcx__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.svcx__grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:420px){.svcx__grid{grid-template-columns:1fr}}

/* ---------- About (من نحن) — full landing section ---------- */
.abt-checks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.abt-checks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.8;color:var(--muted)}
.abt-ck{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:2px;color:#fff;background:linear-gradient(140deg,var(--cyan-deep),var(--teal));box-shadow:0 6px 14px -6px rgba(0,176,80,.5)}
.abt-ck svg{width:13px;height:13px}
.about .abt-more{margin-top:clamp(30px,4.4vw,58px);display:flex;flex-direction:column;gap:clamp(28px,3.6vw,48px)}
.about .abt-vm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.abt-h{font-size:clamp(19px,2.3vw,26px);font-weight:700;color:var(--navy);margin:0 0 clamp(16px,2vw,22px)}
.abt-h.center{text-align:center}
.about .abt-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.abval{padding:20px;border-radius:16px;background:rgba(255,255,255,.62);border:1px solid rgba(49,56,67,.12);box-shadow:0 10px 26px -18px rgba(49,56,67,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column;align-items:flex-start;text-align:start}
.abval:hover{transform:translateY(-4px);border-color:rgba(0,176,80,.4);box-shadow:0 22px 40px -22px rgba(49,56,67,.5)}
.abval__ck{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--cyan-deep),var(--teal));flex:none;margin-bottom:12px}
.abval__ck svg{width:17px;height:17px}
.abval b{display:block;font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--navy);margin:0 0 6px}
.abval span{display:block;font-size:13.5px;line-height:1.75;color:var(--muted);margin:0}
.about .abt-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.abt-card{padding:clamp(22px,2.4vw,30px);border-radius:20px;background:rgba(255,255,255,.62);border:1px solid rgba(49,56,67,.12);box-shadow:0 12px 30px -20px rgba(49,56,67,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.abt-card>p{margin:0;font-size:14.5px;line-height:1.85;color:var(--muted)}
.abt-kicker{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--cyan-deep);background:rgba(0,176,80,.09);border:1px solid rgba(0,176,80,.22);padding:5px 13px;border-radius:999px;margin-bottom:12px}
.about .abt-why{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.abt-wi{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:14px;font-weight:600;font-size:14px;line-height:1.55;color:var(--navy);background:rgba(255,255,255,.62);border:1px solid rgba(49,56,67,.12);transition:transform .3s,border-color .3s}
.abt-wi:hover{transform:translateY(-3px);border-color:rgba(0,176,80,.4)}
.abt-wi .abt-ck{margin-top:0}
.abt-closing{margin:clamp(6px,1.2vw,14px) auto 0;max-width:820px;text-align:center;font-family:var(--font-head);font-weight:700;font-size:clamp(18px,2.4vw,26px);line-height:1.7;color:var(--navy);padding:clamp(24px,3.2vw,38px) clamp(20px,3vw,36px);border-radius:22px;background:linear-gradient(140deg,rgba(0,176,80,.09),rgba(49,56,67,.05));border:1px solid rgba(0,176,80,.22)}
/* dark */
[data-theme="dark"] .abval,
[data-theme="dark"] .abt-card,
[data-theme="dark"] .abt-wi{background:rgba(49,56,67,.55);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .abt-h,[data-theme="dark"] .abt-wi,[data-theme="dark"] .abval b{color:#F5F3EE}
[data-theme="dark"] .abt-closing{color:#F5F3EE;background:linear-gradient(140deg,rgba(0,176,80,.14),rgba(49,56,67,.5));border-color:rgba(0,176,80,.3)}
/* responsive */
@media (max-width:860px){.about .abt-vals,.about .abt-why{grid-template-columns:repeat(2,1fr)}.about .abt-cols,.about .abt-vm{grid-template-columns:1fr}}
@media (max-width:560px){.about .abt-vals,.about .abt-why{grid-template-columns:1fr}}

/* ----------  Sectors (نطاق القطاعات)  ---------- */
/* ---------- Sectors — interactive spotlight ---------- */
.sectors .section-head{margin-bottom:clamp(22px,3vw,34px)}
.secx{display:grid;grid-template-columns:1.08fr .92fr;gap:18px;align-items:stretch}
/* STAGE — cinematic dark spotlight */
.secx__stage{position:relative;overflow:hidden;border-radius:24px;min-height:362px;display:flex;isolation:isolate;
  background:linear-gradient(155deg,#3E4757,#313843 55%,#05182F);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 34px 66px -34px rgba(49,56,67,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.secx__aurora{position:absolute;inset:-28%;z-index:0;pointer-events:none;filter:blur(62px);opacity:.72;will-change:transform;
  background:radial-gradient(38% 44% at 28% 30%,rgba(0,176,80,.55),transparent 70%),radial-gradient(44% 50% at 76% 72%,rgba(58,208,122,.34),transparent 72%);
  animation:auroraShift 18s ease-in-out infinite alternate}
.secx__stageInner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(22px,2.6vw,32px);width:100%}
.secx__big{width:clamp(66px,6.6vw,84px);height:clamp(66px,6.6vw,84px);border-radius:22px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.2);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.secx__big svg{width:48%;height:48%}
.secx__count{font-family:var(--font-head);font-size:14px;color:rgba(220,232,246,.55);letter-spacing:.04em}
.secx__count b{color:var(--cyan-bright);font-size:22px;font-weight:800}
.secx__count i{font-style:normal;margin-inline-start:5px}
.secx__name{font-size:clamp(22px,2.7vw,31px);font-weight:800;color:#fff;margin:8px 0 8px;line-height:1.18}
.secx__desc{font-size:clamp(14px,1.5vw,16.5px);line-height:1.8;color:rgba(226,237,248,.82);max-width:42ch}
.secx__swap .secx__big,.secx__swap .secx__meta{animation:secxSwap .5s cubic-bezier(.16,1,.3,1)}
@keyframes secxSwap{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:none}}
/* LIST */
.secx__list{display:flex;flex-direction:column;gap:8px}
.secx__item{position:relative;display:flex;align-items:center;gap:13px;width:100%;flex:1;text-align:start;cursor:pointer;overflow:hidden;
  padding:0 16px;border-radius:16px;border:1px solid rgba(49,56,67,.1);color:var(--navy);
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,background .28s ease,box-shadow .28s ease}
.secx__item:hover{border-color:rgba(0,176,80,.4)}
.secx__ico{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--cyan-deep);
  background:linear-gradient(140deg,rgba(0,176,80,.14),rgba(49,56,67,.06));border:1px solid rgba(255,255,255,.55);
  transition:transform .3s ease,background .3s ease,color .3s ease}
.secx__ico svg{width:21px;height:21px}
.secx__label{font-family:var(--font-head);font-weight:700;font-size:15px;flex:1;min-width:0;line-height:1.3}
.secx__go{flex:none;color:var(--cyan-deep);opacity:0;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease}
.secx__go svg{width:18px;height:18px}
.secx__bar{position:absolute;inset-block-end:0;inset-inline-start:0;height:3px;width:100%;transform:scaleX(0);transform-origin:inline-start;opacity:0;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-deep))}
.secx__item.is-active{border-color:rgba(0,176,80,.5);background:rgba(0,176,80,.09);box-shadow:0 12px 26px -14px rgba(0,176,80,.55)}
.secx__item.is-active .secx__ico{background:linear-gradient(140deg,var(--cyan-deep),var(--teal));color:#fff;transform:scale(1.05)}
.secx__item.is-active .secx__label{color:var(--cyan-deep)}
.secx__item.is-active .secx__go{opacity:1;transform:none}
.secx__item.is-active .secx__bar{opacity:1;animation:secxBar var(--secx-dur,4200ms) linear forwards}
.secx.is-paused .secx__item.is-active .secx__bar{animation-play-state:paused}
@keyframes secxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ----------  Why-us — split layout  ---------- */
.why__layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
.why__lead{margin-top:14px;font-size:17px;line-height:1.85;max-width:46ch;color:var(--muted)}
.why__list{display:grid;gap:18px;margin-top:28px}
.why__item{display:flex;gap:16px;align-items:flex-start}
.why__item .wic{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,var(--navy),var(--ocean));color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(49,56,67,.22)}
.why__item .wic svg{width:22px;height:22px}
.why__item h3{font-size:17.5px;margin-bottom:3px}
.why__item p{font-size:15px;line-height:1.7}
.why__note{color:var(--muted-light);font-size:13px}
.why__cta{margin-top:32px}

/* compliance dashboard — light glass card */
.why__visual{position:relative}
.dashcard{position:relative;overflow:hidden;border-radius:22px;padding:20px 22px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-lg)}
.dashcard::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright),var(--royal))}
.dashcard::after{content:"";position:absolute;inset-block-start:-70px;inset-inline-start:-70px;width:220px;height:220px;background:radial-gradient(circle,rgba(58,208,122,.2),transparent 65%);pointer-events:none}
.dashcard__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.dashcard__title{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:16px}
.dashcard__ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(0,176,80,.12);color:var(--cyan-deep)}
.dashcard__ico svg{width:18px;height:18px}
.dashcard__live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--green)}
.dashcard__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.dashcard__row:last-child{border-bottom:0}
.dashcard__row .l{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--navy);font-weight:500}
.dashcard__row .l .pd{width:9px;height:9px;border-radius:50%;flex:none}
.dashcard__row .l .pd.ok{background:var(--green);box-shadow:0 0 0 3px rgba(30,158,90,.16)}
.dashcard__row .l .pd.soon{background:#E8A219;box-shadow:0 0 0 3px rgba(232,162,25,.16)}
.pill-ok{flex:none;font-size:12px;font-weight:600;color:#0F7A44;background:rgba(30,158,90,.14);padding:4px 11px;border-radius:999px}
.pill-soon{flex:none;font-size:12px;font-weight:600;color:#9A6A09;background:rgba(232,162,25,.16);padding:4px 11px;border-radius:999px}
.dash-note{margin-top:14px;font-size:12.5px;color:var(--muted-light);text-align:center}
/* ---- live monitoring: scan line, health ring, summary, alert pulse ---- */
.dashcard__head,.dashcard__summary,.dashcard__rows{position:relative;z-index:2}
.dashcard__scan{position:absolute;inset-inline:12px;top:0;height:2px;z-index:1;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);opacity:0;
  box-shadow:0 0 12px 2px rgba(58,208,122,.5);animation:dashScan 5s ease-in-out infinite}
@keyframes dashScan{0%{top:0;opacity:0}9%{opacity:.85}55%{top:100%;opacity:.85}64%,100%{top:100%;opacity:0}}
.dashcard__summary{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.dashcard__ring{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center}
.dashcard__ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--cyan),var(--cyan-deep) calc(var(--p,96)*1%),rgba(49,56,67,.12) calc(var(--p,96)*1%));
  -webkit-mask:radial-gradient(farthest-side,transparent 62%,#000 64%);mask:radial-gradient(farthest-side,transparent 62%,#000 64%)}
.dashcard__ring b{position:relative;font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--cyan-deep);direction:ltr}
.dashcard__ring b i{font-style:normal;font-size:10px;margin-inline-start:1px}
.dashcard__sumtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dashcard__sumtxt strong{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--navy)}
.dashcard__sumtxt span{font-size:12.5px;color:var(--muted);line-height:1.5}
.dashcard__row.warn{background:rgba(232,162,25,.07);margin-inline:-22px;padding-inline:22px}
.dashcard__row .l .pd.soon{animation:soonPulse 1.8s ease-in-out infinite}
@keyframes soonPulse{0%,100%{box-shadow:0 0 0 3px rgba(232,162,25,.18)}50%{box-shadow:0 0 0 6px rgba(232,162,25,.03)}}
/* trust list — subtle interactivity */
.why__item{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.why__item:hover{transform:translateX(-3px)}
.why__item .wic{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.why__item:hover .wic{transform:scale(1.08) rotate(-3deg);box-shadow:0 12px 24px rgba(49,56,67,.32)}

/* ----------  Process — animated wavy journey path (green)  ---------- */
.journey{position:relative;margin-top:6px}
.journey__svg{width:100%;height:auto;display:block;overflow:visible}
.journey__track{stroke:rgba(49,56,67,.1);stroke-width:3;stroke-linecap:round;fill:none}
.journey__fill{stroke-width:4;stroke-linecap:round;fill:none}
.journey__dot{fill:var(--cyan-bright);opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 7px rgba(58,208,122,.95)) drop-shadow(0 0 14px rgba(58,208,122,.6))}
.journey__steps{position:absolute;inset:0}
.jstep{position:absolute;left:var(--x);top:var(--y);width:190px;transform:translate(-50%,-35px);text-align:center}
.jstep__node,.jstep__body{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.jstep__body{transition-delay:.1s}
.jstep.is-on .jstep__node,.jstep.is-on .jstep__body{opacity:1;transform:none}
.jstep__node{position:relative;width:66px;height:66px;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-weight:800;font-size:24px;
  background:linear-gradient(140deg,var(--cyan-deep),var(--teal));box-shadow:0 12px 26px -8px rgba(0,176,80,.5),0 0 0 6px var(--bg);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.jstep__node::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(0,176,80,.45);opacity:0;transition:opacity .4s}
.jstep:hover .jstep__node{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 32px -10px rgba(0,176,80,.6),0 0 0 6px var(--bg)}
.jstep:hover .jstep__node::after{opacity:1}
.jstep__num{line-height:1}
.jstep__body{margin-top:14px}
.jstep__body h3{font-size:16px;margin-bottom:5px;color:var(--navy)}
.jstep__body p{font-size:13px;line-height:1.6;color:var(--muted)}
.journey__mline{display:none}

/* ----------  Vision 2030  ---------- */
.vision{position:relative}
.vision__grid{
  position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;
  background:linear-gradient(135deg,var(--navy),var(--royal));
  border-radius:30px;padding:clamp(34px,5vw,60px);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.vision__grid::after{content:"";position:absolute;inset-block-start:-100px;inset-inline-end:-100px;width:420px;height:420px;background:radial-gradient(circle,rgba(58,208,122,.22),transparent 65%);pointer-events:none}
.vision__grid>*{position:relative;z-index:1}
.vision__badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;color:#fff;margin-bottom:18px}
.vision h2{font-size:clamp(26px,3.4vw,38px)}
.vision p{color:#cdddec;font-size:18px;line-height:1.85;margin-top:14px}
.vision__risk{display:grid;gap:14px;margin-top:8px}
.risk{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px}
.risk .rico{flex:none;width:42px;height:42px;border-radius:11px;background:rgba(255,180,40,.16);color:#ffce73;display:grid;place-items:center}
.risk .rico svg{width:22px;height:22px}
.risk h4{color:#fff;font-size:16px;margin-bottom:3px}
.risk p{color:rgba(255,255,255,.7);font-size:14px;margin:0}

/* ----------  Packages  ---------- */
.pkgs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pkg{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;padding:34px 28px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.pkg:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pkg__ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(150deg,rgba(0,176,80,.16),rgba(49,56,67,.12));border:1px solid rgba(0,176,80,.22);color:var(--cyan-deep)}
.pkg__ico svg{width:27px;height:27px}
.pkg__name{font-family:var(--font-head);font-size:21px;font-weight:700;color:var(--navy)}
.pkg__price{margin-top:12px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1}
.pkg__from{font-size:12.5px;color:var(--muted);font-weight:500}
.pkg__amount{font-family:var(--font-head);font-weight:700;font-size:32px;color:var(--cyan-deep)}
.pkg__cur{font-size:14px;font-weight:600;color:var(--cyan-deep)}
.pkg__per{font-size:13px;color:var(--muted)}
.pkg__pnote{font-size:12px;color:var(--muted-light);margin-top:4px}
.pkg__desc{font-size:14.5px;margin:12px 0 20px;color:var(--muted)}
.pkg--featured .pkg__amount,.pkg--featured .pkg__cur{color:var(--cyan-bright)}
.pkg--featured .pkg__from,.pkg--featured .pkg__per,.pkg--featured .pkg__pnote{color:rgba(220,231,242,.7)}
.pkg__feats{display:grid;gap:13px;margin-bottom:28px}
.pkg__feats li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink)}
.pkg__chk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(30,158,90,.12);color:var(--green)}
.pkg__chk svg{width:13px;height:13px}
.pkg .btn{margin-top:auto}

/* featured — dark glowing card */
.pkgs__grid .pkg.pkg--featured{
  background:radial-gradient(220px 220px at 14% 0%,rgba(58,208,122,.28),transparent 60%),linear-gradient(160deg,#0C3257,#08305F 55%,#0A223C);
  border:1px solid rgba(58,208,122,.35);
  transform:scale(1.05);z-index:2;
  box-shadow:0 30px 70px rgba(8,42,90,.42),0 0 40px rgba(58,208,122,.12);
}
.pkgs__grid .pkg.pkg--featured:hover{transform:scale(1.05) translateY(-6px)}
.pkg--featured .pkg__ico{background:rgba(58,208,122,.16);border-color:rgba(58,208,122,.42);color:var(--cyan-bright)}
.pkg--featured .pkg__name{color:#fff;-webkit-text-fill-color:#fff}
.pkg--featured .pkg__desc{color:rgba(220,231,242,.78)}
.pkg--featured .pkg__feats li{color:#F5F3EE}
.pkg--featured .pkg__chk{background:rgba(58,208,122,.18);color:var(--cyan-bright)}
.pkg__tag{position:absolute;inset-block-start:-14px;left:50%;transform:translateX(-50%);z-index:3;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));color:#06243F;font-size:12px;font-weight:700;padding:6px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(58,208,122,.45)}

/* tabbed pricing — families (HR / Gov / Elite) */
.pkgtabs{position:relative;display:flex;gap:4px;padding:6px;max-width:max-content;margin:0 auto 20px;background:rgba(49,56,67,.05);border:1px solid var(--line);border-radius:999px;flex-wrap:wrap;justify-content:center}
.pkgtabs__ind{position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:999px;background:linear-gradient(135deg,var(--navy),var(--cyan-deep));box-shadow:0 10px 22px -6px rgba(49,56,67,.4);transition:transform .42s cubic-bezier(.16,1,.3,1),width .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1);pointer-events:none}
.pkgtab{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--muted);padding:11px 24px;border-radius:999px;transition:color .3s ease;white-space:nowrap}
.pkgtab:hover{color:var(--navy)}
.pkgtab.is-active{color:#fff}
.pkgtab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pkgpanel[hidden]{display:none}
.pkgpanel.is-active{animation:pkgFade .5s cubic-bezier(.16,1,.3,1)}
@keyframes pkgFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pkgpanel__note{text-align:center;max-width:700px;margin:0 auto 34px;font-size:14px;color:var(--muted);line-height:1.75}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;border-radius:22px;padding:30px 24px 26px;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(49,56,67,.1);box-shadow:0 12px 30px -18px rgba(8,42,90,.4);
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease}
.tier:hover{transform:translateY(-8px);border-color:rgba(0,176,80,.42);box-shadow:0 30px 52px -24px rgba(49,56,67,.5)}
.tier__name{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--navy)}
.tier__price{margin-top:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;line-height:1}
.tier__price .num{font-family:var(--font-head);font-weight:800;font-size:38px;color:var(--cyan-deep);letter-spacing:-.02em}
.tier__cur{font-size:14px;font-weight:700;color:var(--cyan-deep)}
.tier__per{font-size:12.5px;color:var(--muted);margin-inline-start:2px}
.tier__meta{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:13px}
.tier__meta li{position:relative;padding-inline-start:27px;font-size:14px;color:var(--ink);line-height:1.5}
.tier__meta li::before{content:"✓";position:absolute;inset-inline-start:0;inset-block-start:0;width:18px;height:18px;border-radius:50%;background:rgba(0,176,80,.15);color:var(--cyan-deep);font-size:11px;font-weight:900;display:grid;place-items:center;line-height:1}
.tier .btn{margin-top:auto}
.tier--featured{border-color:rgba(0,176,80,.5);transform:translateY(-8px);
  background:linear-gradient(180deg,rgba(0,176,80,.07),rgba(255,255,255,.62));
  box-shadow:0 30px 56px -24px rgba(0,176,80,.5),0 0 0 1px rgba(0,176,80,.28) inset}
.tier--featured:hover{transform:translateY(-14px)}
.tier--featured .tier__name{color:var(--cyan-deep)}
.tier__tag{position:absolute;inset-block-start:-13px;left:50%;transform:translateX(-50%);z-index:3;background:linear-gradient(135deg,var(--cyan-deep),var(--teal));color:#fff;font-size:11.5px;font-weight:700;padding:6px 15px;border-radius:999px;box-shadow:0 10px 22px -6px rgba(0,176,80,.6);white-space:nowrap}

/* establishment package + consultations */
.pkg-extra{margin-top:44px;display:grid;gap:22px}
.estab{display:flex;flex-direction:column;position:relative;overflow:hidden;padding:30px 32px;border-radius:24px;background:radial-gradient(300px 260px at 10% -10%,rgba(58,208,122,.22),transparent 62%),linear-gradient(160deg,#0C3257,#08305F 55%,#0A223C);border:1px solid rgba(58,208,122,.28);box-shadow:0 26px 56px -28px rgba(8,42,90,.6)}
.estab__head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.estab__ico{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(58,208,122,.16);border:1px solid rgba(58,208,122,.42);color:var(--cyan-bright)}
.estab__ico svg{width:26px;height:26px}
.estab__title{flex:1;min-width:min(100%,240px)}
.estab__name{font-family:var(--font-head);font-weight:700;font-size:20px;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.estab__badge{font-size:11px;font-weight:600;color:var(--cyan-bright);background:rgba(58,208,122,.14);border:1px solid rgba(58,208,122,.36);padding:3px 10px;border-radius:999px}
.estab__desc{margin:7px 0 0;font-size:14.5px;line-height:1.7;color:rgba(220,231,242,.82)}
.estab__price{flex:none;line-height:1;white-space:nowrap;text-align:end}
.estab__price .num{font-family:var(--font-head);font-weight:800;font-size:34px;color:var(--cyan-bright)}
.estab__cur{font-size:15px;font-weight:600;color:var(--cyan-bright);margin-inline-start:4px}
.estab__includes{list-style:none;padding:0;margin:22px 0;display:flex;flex-wrap:wrap;gap:10px}
.estab__includes li{position:relative;font-size:13px;color:#EAF4FB;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px;padding-inline-start:32px}
.estab__includes li::before{content:"✓";position:absolute;inset-inline-start:12px;inset-block-start:50%;transform:translateY(-50%);color:var(--cyan-bright);font-weight:900;font-size:12px}
.estab .btn{align-self:flex-start;margin-top:4px}
.consults{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.consult-card{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid rgba(49,56,67,.1);border-radius:20px;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 12px 30px -18px rgba(8,42,90,.4);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
.consult-card:hover{transform:translateY(-5px);border-color:rgba(0,176,80,.4);box-shadow:0 26px 46px -22px rgba(49,56,67,.5)}
.consult-card__ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,176,80,.16),rgba(49,56,67,.06));border:1px solid rgba(255,255,255,.55);color:var(--cyan-deep)}
.consult-card__ico svg{width:23px;height:23px}
.consult-card__b{flex:1;min-width:0}
.consult-card__b b{display:block;font-family:var(--font-head);font-size:16px;color:var(--navy);margin-bottom:2px}
.consult-card__b span{font-size:13px;color:var(--muted);line-height:1.5}
.consult-card__price{flex:none;font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--cyan-deep);white-space:nowrap}

/* ----------  Testimonials  ---------- */
.tst__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst{position:relative;border-radius:22px;padding:28px;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(49,56,67,.1);box-shadow:0 12px 30px -18px rgba(8,42,90,.4);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
.tst:hover{transform:translateY(-6px);border-color:rgba(0,176,80,.4);box-shadow:0 26px 46px -22px rgba(49,56,67,.5)}
.tst__top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.tst__top .ava{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--cyan-deep));color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-head);font-size:18px;flex:none;box-shadow:0 0 0 4px rgba(0,176,80,.12)}
.tst__id{min-width:0}
.tst__id b{display:block;color:var(--navy);font-family:var(--font-head);font-size:15.5px;line-height:1.3}
.tst__id span{font-size:13px;color:var(--muted)}
.tst__stars{margin-inline-start:auto;align-self:flex-start;display:flex;gap:2px;color:#FFB627;font-size:14px;letter-spacing:1px;flex:none}
.tst__mark{display:block;font-family:Georgia,"Times New Roman",serif;font-size:50px;line-height:.7;height:26px;color:var(--cyan);opacity:.35}
.tst__quote{font-size:15.5px;line-height:1.9;color:var(--ink);font-weight:500}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:46px;opacity:.7}
.logos-row .clogo{font-weight:700;color:var(--muted);font-size:18px;letter-spacing:.02em}


/* ----------  About — glass editorial  ---------- */
.about{position:relative;overflow:hidden;padding-block:clamp(38px,4.5vw,62px)}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:center}

/* media side */
.about__media{position:relative;padding:14px;max-width:470px;width:100%;margin-inline:auto}
.about__frame{position:relative;z-index:2;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);aspect-ratio:4/3}
.about__frame img{width:100%;height:100%;object-fit:cover;display:block}
.about__overlay{position:absolute;inset-block-end:0;inset-inline:0;padding:14px;background:linear-gradient(0deg,rgba(49,56,67,.5),transparent)}
.about__chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(49,56,67,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);padding:7px 13px;border-radius:999px}
.about__cred{position:absolute;z-index:3;inset-block-end:-14px;inset-inline-start:-10px;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:18px;box-shadow:var(--shadow);animation:floatY 7.5s ease-in-out infinite}
.about__cred-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,#313843,#00B050);box-shadow:0 8px 18px rgba(49,56,67,.3)}
.about__cred-ico svg{width:23px;height:23px}
.about__cred-txt b{display:block;font-family:var(--font-head);font-size:15px;color:var(--navy);line-height:1.25}
.about__cred-txt span{font-size:12px;color:var(--muted)}
/* decorative shapes */
.about__blob{position:absolute;z-index:0;inset-block-start:-34px;inset-inline-end:-46px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(58,208,122,.5),rgba(49,56,67,.22));filter:blur(38px);animation:floatXY 17s ease-in-out infinite}
.about__ring{position:absolute;z-index:1;inset-block-start:-16px;inset-inline-start:30px;width:80px;height:80px;border-radius:50%;border:7px solid rgba(58,208,122,.32);animation:floatY 9s ease-in-out infinite}
.about__dots{position:absolute;z-index:1;inset-block-end:40px;inset-inline-end:-22px;width:92px;height:92px;background-image:radial-gradient(rgba(49,56,67,.28) 2px,transparent 2px);background-size:16px 16px;border-radius:8px;animation:floatXY 13s ease-in-out infinite reverse}

/* value cards — editorial glass */
.vcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.vcard{position:relative;overflow:hidden;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(49,56,67,.1);border-radius:6px 20px 20px 20px;padding:22px 20px;box-shadow:0 10px 26px -18px rgba(8,42,90,.4);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s}
.vcard::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--cyan-bright),var(--cyan-deep),var(--royal));transform:scaleX(0);transform-origin:right;transition:transform .45s ease}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(58,208,122,.55)}
.vcard:hover::before{transform:scaleX(1)}
.vcard__num{position:absolute;inset-block-start:10px;inset-inline-end:14px;font-family:var(--font-head);font-weight:700;font-size:36px;line-height:1;color:var(--navy);opacity:.08;pointer-events:none}
.vcard .vic{width:48px;height:48px;border-radius:14px;background:linear-gradient(150deg,#313843,#007A35);color:#fff;display:grid;place-items:center;margin-bottom:14px;box-shadow:0 10px 20px rgba(49,56,67,.22);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.vcard:hover .vic{transform:rotate(-6deg) scale(1.07)}
.vcard .vic svg{width:24px;height:24px}
.vcard h4{font-size:17px;color:var(--navy);margin-bottom:6px}
.vcard p{font-size:14px;line-height:1.7;margin:0;color:var(--muted)}

/* values strip (client's 6 core values) */
.values{margin-top:22px}
.values__label{display:block;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:12px;letter-spacing:.01em}
.values__list{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.vchip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);background:rgba(0,176,80,.08);border:1px solid rgba(0,176,80,.24);padding:8px 15px;border-radius:999px;transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s}
.vchip:hover{transform:translateY(-3px);background:rgba(0,176,80,.14);border-color:rgba(0,176,80,.5)}
.vchip__dot{flex:none;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-bright),var(--cyan-deep));box-shadow:0 0 0 3px rgba(0,176,80,.14)}

/* ----------  Forms  ---------- */
.form-wrap{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(49,56,67,.1);border-radius:var(--radius);box-shadow:0 16px 38px -22px rgba(8,42,90,.5);padding:clamp(22px,3.2vw,34px)}
.consult__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,56px);align-items:center}
.consult__aside .lead{margin-top:14px}
.assure{display:grid;gap:13px;margin-top:20px;margin-bottom:4px}
.assure li{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--ink)}
.assure .aic{width:40px;height:40px;border-radius:11px;background:rgba(0,176,80,.12);color:var(--cyan-deep);display:grid;place-items:center;flex:none}
.assure .aic svg{width:21px;height:21px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:14.5px;color:var(--navy);margin-bottom:7px}
.field label .req{color:#E5484D}
.field label .opt{color:var(--muted-light);font-weight:500;font-size:12.5px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--bg);transition:border-color .18s,box-shadow .18s,background .18s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-light)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);background:#fff;box-shadow:var(--ring)}
.field textarea{resize:vertical;min-height:110px}
.field.err input,.field.err select,.field.err textarea{border-color:#E5484D;background:#FEF6F6}
.field .err-msg{display:none;color:#E5484D;font-size:13px;margin-top:6px;font-weight:500}
.field.err .err-msg{display:block}
.form-success{background:rgba(30,158,90,.1);border:1px solid rgba(30,158,90,.3);color:#157a45;border-radius:12px;padding:13px 16px;font-weight:600;font-size:15px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.form-note{font-size:13px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:7px}
.form-note svg{width:16px;height:16px;color:var(--muted-light);flex:none}

/* ----------  FAQ  ---------- */
.faq{max-width:980px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq-col{display:grid;gap:12px;align-content:start}
.faq-item{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px) saturate(165%);backdrop-filter:blur(14px) saturate(165%);border:1px solid rgba(49,56,67,.1);border-radius:14px;overflow:hidden;transition:box-shadow .25s,border-color .25s,background .25s}
.faq-item:hover{border-color:rgba(0,176,80,.32)}
.faq-item.open{box-shadow:0 16px 34px -20px rgba(49,56,67,.5);border-color:rgba(0,176,80,.5);background:rgba(255,255,255,.72)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;background:none;border:0;cursor:pointer;text-align:start;font-weight:600;font-size:15px;line-height:1.5;color:var(--navy)}
.faq-q .fic{flex:none;width:28px;height:28px;border-radius:9px;background:rgba(0,176,80,.12);display:grid;place-items:center;color:var(--cyan-deep);transition:transform .35s cubic-bezier(.16,1,.3,1),background .2s,color .2s}
.faq-q .fic svg{width:16px;height:16px}
.faq-item.open .faq-q .fic{transform:rotate(135deg);background:linear-gradient(140deg,var(--cyan-deep),var(--teal));color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 18px 16px;font-size:14px;line-height:1.75;margin:0;color:var(--muted)}

/* ----------  Contact  ---------- */
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,48px)}
.contact__info{display:grid;gap:16px;align-content:start}
.cinfo{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(49,56,67,.1);border-radius:14px;padding:15px 18px;box-shadow:0 10px 24px -18px rgba(8,42,90,.4);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease}
.cinfo:hover{transform:translateY(-3px);border-color:rgba(0,176,80,.35);box-shadow:0 22px 40px -22px rgba(49,56,67,.5)}
.cinfo .cic{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(140deg,rgba(0,176,80,.15),rgba(49,56,67,.05));border:1px solid rgba(255,255,255,.5);color:var(--cyan-deep);display:grid;place-items:center}
.cinfo .cic svg{width:24px;height:24px}
.cinfo b{display:block;color:var(--navy);font-size:15.5px;margin-bottom:3px}
.cinfo span,.cinfo a{color:var(--muted);font-size:14.5px}
.cinfo .num{display:inline-block}
.map{margin-top:4px;border-radius:14px;overflow:hidden;border:1px solid var(--line);height:200px;background:var(--sand) center/cover}
.wa-btn{background:#25D366;color:#fff;border-color:#25D366}
.wa-btn:hover{background:#1da851;border-color:#1da851}

/* ----------  Newsletter strip  ---------- */
.news{background:linear-gradient(120deg,var(--navy),var(--ocean));border-radius:24px;padding:clamp(30px,4vw,46px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;position:relative;overflow:hidden}
.news::after{content:"";position:absolute;inset-block-end:-90px;inset-inline-end:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(45,212,224,.25),transparent 65%)}
.news h3{color:#fff;font-size:24px}
.news p{color:rgba(255,255,255,.78);margin-top:8px;font-size:16px}
.news__form{display:flex;gap:12px;position:relative;z-index:1}
.news__form input{min-width:280px;padding:14px 18px;border-radius:var(--radius-pill);border:0;font-family:inherit;font-size:15.5px}
.news__form input:focus{box-shadow:var(--ring)}
.news .form-success{position:absolute;inset-block-end:-46px;inset-inline-start:0;margin:0;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}

/* ----------  Footer  ---------- */
.footer{position:relative;overflow:hidden;background:linear-gradient(165deg,#313843,#1B1F25);color:#a9bfd4;padding-block:clamp(34px,3.8vw,48px) 0}
.footer::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--cyan-bright),var(--royal),transparent);opacity:.75}
.footer::after{content:"";position:absolute;inset-block-start:-130px;inset-inline-start:-90px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(58,208,122,.10),transparent 65%);pointer-events:none}
.footer .container{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:22px 36px;align-items:start}
.footer__brand img{height:42px;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer__brand p{font-size:14px;line-height:1.8;color:#8fa6bd;max-width:300px}
.footer h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:16px;position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-bright))}
.footer__links{display:grid;gap:10px}
.footer__links a{font-size:14px;color:#a9bfd4;width:max-content;transition:color .18s,transform .18s}
.footer__links a:hover{color:var(--cyan-bright);transform:translateX(-4px)}
.footer__contact{display:grid;gap:12px;font-size:14px}
.footer__contact div{display:flex;align-items:center;gap:10px;color:#a9bfd4}
.footer__contact svg{width:17px;height:17px;color:var(--cyan-bright);flex:none}
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#a9bfd4;transition:.22s}
.footer__social a:hover{background:var(--cyan-deep);color:#fff;border-color:var(--cyan-deep);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,176,80,.4)}
.footer__social svg{width:18px;height:18px}
.footer__bottom{margin-top:24px;border-top:1px solid rgba(255,255,255,.1);padding-block:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;font-size:13px;color:#7e95ad}
.footer__badges{display:flex;align-items:center;gap:12px}
.footer__badges span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:5px 11px;font-weight:600;color:#a9bfd4;font-size:12.5px}
.footer__badges svg{width:16px;height:16px;color:var(--cyan-bright)}

/* ----------  Mobile sticky CTA + WhatsApp  ---------- */
.mobile-cta{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:55;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(120%);transition:transform .3s;box-shadow:0 -8px 24px rgba(49,56,67,.1);
}
.mobile-cta.show{transform:translateY(0)}
.wa-float{
  position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:54;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(145deg,#2ee06f,#1faa52);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 28px rgba(37,211,102,.42),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
  animation:waRing 2.6s ease-out infinite;
}
.wa-float:hover{transform:scale(1.09) rotate(-4deg)}
.wa-float:active{transform:scale(1.02)}
.wa-float svg{width:30px;height:30px}
@keyframes waRing{
  0%{box-shadow:0 12px 28px rgba(37,211,102,.42),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 12px 28px rgba(37,211,102,.42),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 15px rgba(37,211,102,0)}
  100%{box-shadow:0 12px 28px rgba(37,211,102,.42),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(37,211,102,0)}
}

/* sample/placeholder ribbon */
.sample-banner{background:#FFF6E5;border:1px dashed #F0C36B;color:#8a6212;text-align:center;font-size:13.5px;font-weight:600;padding:9px 14px}
.sample-banner b{font-weight:700}

/* ----------  Reveal on load / scroll  ---------- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(2px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:none}
[data-stagger]>*{opacity:0;transform:translateY(20px);animation:rise .65s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
/* hero entrance stagger */
.hero__inner>.reveal:nth-child(1){transition-delay:.05s}
.hero__inner>.reveal:nth-child(2){transition-delay:.16s}
.hero__inner>.reveal:nth-child(3){transition-delay:.27s}
.hero__inner>.reveal:nth-child(4){transition-delay:.38s}
.hero__inner>.reveal:nth-child(5){transition-delay:.49s}
.hero__inner>.reveal:nth-child(6){transition-delay:.6s}

/* ---------- Section divider ornament ---------- */
.section-head.center{position:relative}
/* decorative dot-line ornament removed — the pill eyebrow is the anchor now */

/* =====================================================================
   Glass cards — translucent surfaces floating on the unified background
   ===================================================================== */
.pkg{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
  border-color:rgba(255,255,255,.75);
}
.hero__card{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.7)}

/* ---------- Partners marquee ---------- */
.marquee{overflow:hidden;margin-top:42px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee .clogo{font-family:var(--font-head);font-weight:700;color:var(--muted);font-size:20px;white-space:nowrap;padding-inline:24px;transition:color .25s}
.marquee .clogo:hover{color:var(--cyan-deep)}
.dot-sep{width:7px;height:7px;border-radius:50%;background:var(--cyan);opacity:.55;flex:none}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:100;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright))}

/* ---------- Back-to-top button ---------- */
.to-top{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:54;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--navy);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s,border-color .2s,color .2s;box-shadow:var(--shadow-sm)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--cyan);color:var(--cyan-deep);transform:translateY(-3px)}
.to-top svg{width:22px;height:22px}

/* ---------- Testimonials — distinctive touches ---------- */
.tst{overflow:hidden}

/* =====================================================================
   Dark mode (functional toggle) — [data-theme="dark"]
   --navy is repurposed as a light text token; intentionally-dark
   surfaces are pinned to fixed dark colors below.
   ===================================================================== */
[data-theme="dark"]{
  --bg:#22262C;
  --sand:#2B3039;
  --ink:#ECEAE3;
  --navy:#F5F3EE;          /* now light: used for headings & nav text */
  --muted:#A6ADB6;
  --muted-light:#868D97;
  --line:rgba(255,255,255,.10);
  --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
}
[data-theme="dark"] body{background:var(--bg)}
/* glass surfaces */
[data-theme="dark"] .glass{background:rgba(49,56,67,.55);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .header.scrolled .header__inner{background:rgba(8,28,48,.72)}
/* cards that used literal white */
[data-theme="dark"] .svc,
[data-theme="dark"] .stats-pill,
[data-theme="dark"] .gnode,
[data-theme="dark"] .pkg,
[data-theme="dark"] .tst,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .cinfo,
[data-theme="dark"] .form-wrap,
[data-theme="dark"] .vcard,
[data-theme="dark"] .about__cred,
[data-theme="dark"] .hero__card{background:rgba(49,56,67,.55);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .hero__badge{background:rgba(49,56,67,.85);border-color:rgba(255,255,255,.1)}
/* buttons & controls */
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .hamburger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#ECEAE3}
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .hamburger:hover{color:var(--cyan-bright);border-color:var(--cyan)}
[data-theme="dark"] .icon-btn .ic-moon{display:none}
[data-theme="dark"] .icon-btn .ic-sun{display:block}
[data-theme="dark"] .btn-light{background:#fff;color:#313843}
[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:#F5F3EE}
[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:#fff}
/* intentionally-dark surfaces (pinned, since --navy is now light) */
[data-theme="dark"] .hero{background:transparent}
[data-theme="dark"] .vision__grid,
[data-theme="dark"] .dashcard{background:rgba(49,56,67,.55);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .dashcard__head,[data-theme="dark"] .dashcard__row{border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .pill-ok{color:#9ff0c4;background:rgba(30,158,90,.2)}
[data-theme="dark"] .pill-soon{color:#ffd98a;background:rgba(255,180,40,.18)}
[data-theme="dark"] .dashcard__ring b{color:var(--cyan-bright)}
[data-theme="dark"] .dashcard__ring::before{background:conic-gradient(from -90deg,var(--cyan),var(--cyan-bright) calc(var(--p,96)*1%),rgba(255,255,255,.12) calc(var(--p,96)*1%))}
[data-theme="dark"] .tier,[data-theme="dark"] .consult-card{background:rgba(49,56,67,.55);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .tier--featured{background:linear-gradient(180deg,rgba(0,176,80,.13),rgba(49,56,67,.55))}
[data-theme="dark"] .tier__price .num,[data-theme="dark"] .tier__cur,[data-theme="dark"] .consult-card__price{color:var(--cyan-bright)}
[data-theme="dark"] .tier__price{border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .consult-card__ico{color:var(--cyan-bright)}
[data-theme="dark"] .why__item .wic{background:#15406B}
[data-theme="dark"] .news{background:linear-gradient(120deg,#2B3039,#00B050)}
[data-theme="dark"] .tst__top .ava,
[data-theme="dark"] .hero__trust .avatars span{background:linear-gradient(135deg,#15406B,var(--cyan-deep))}
[data-theme="dark"] .footer{background:#040E1A}
/* form fields */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{background:#2B3039;color:var(--ink)}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus{background:#0E2842}
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder{color:#6B8099}
/* misc */
[data-theme="dark"] .mobile-cta{background:rgba(8,28,48,.94);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .to-top{background:rgba(49,56,67,.7);border-color:rgba(255,255,255,.12);color:#ECEAE3}
[data-theme="dark"] .hero__shape--pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .hero__eyebrow,[data-theme="dark"] .hero__features{background:rgba(49,56,67,.5);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .pkgtabs__ind{background:linear-gradient(135deg,var(--cyan-deep),var(--teal));box-shadow:0 10px 22px -6px rgba(0,176,80,.4)}
[data-theme="dark"] .pkgtabs{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .map{background:linear-gradient(135deg,#2B3039,#0E2842)!important;color:var(--muted)}
[data-theme="dark"] .badge-sample{background:#2B3039}
[data-theme="dark"] .svc__icon{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(0,176,80,.16));color:var(--cyan-bright)}
[data-theme="dark"] .secx__item{background:rgba(49,56,67,.55);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .secx__ico{color:var(--cyan-bright);background:linear-gradient(140deg,rgba(0,176,80,.18),rgba(255,255,255,.04))}
[data-theme="dark"] .secx__item.is-active .secx__label,[data-theme="dark"] .secx__go{color:var(--cyan-bright)}
[data-theme="dark"] .secx__item.is-active{background:rgba(0,176,80,.12)}
[data-theme="dark"] .cinfo .cic{background:rgba(255,255,255,.06)}
[data-theme="dark"] .hero__bullets .tick{background:rgba(0,176,80,.2)}
[data-theme="dark"] .journey__track{stroke:rgba(255,255,255,.13)}
[data-theme="dark"] .journey__mline{background:rgba(255,255,255,.13)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1080px){
  .services__grid,.pkgs__grid,.tst__grid,.tiers{grid-template-columns:repeat(2,1fr)}
  .pkg--featured{transform:none}
  .pkg--featured:hover{transform:translateY(-4px)}
  .tier--featured{transform:none}
  .tier--featured:hover{transform:translateY(-8px)}
  .gov__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:960px){
  .nav,.header__actions .link-auth,.header__actions>.btn-primary{display:none}
  .header__actions{margin-inline-start:auto}
  .header__actions::before{display:none}
  .hamburger{display:flex}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;inset-block-start:calc(100% + 10px);inset-inline:0;
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:18px;
    padding:14px;box-shadow:var(--shadow);margin:0;
  }
  .nav.open a,.nav.open .dd__btn{font-size:16px;padding:12px 14px}
  .nav.open a::after,.nav.open .dd__btn::after{display:none}
  .nav.open a:hover,.nav.open .dd__btn:hover{background:rgba(0,176,80,.1);transform:none}
  .nav.open .dd__menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding-inline-start:14px;display:none}
  .nav.open .dd.open .dd__menu{display:block}
  .nav.open .dd__menu--mega{min-width:0;grid-template-columns:1fr;padding:0 0 0 0;padding-inline-start:14px}
  .nav.open .dd.open .dd__menu--mega{display:grid}
  .nav.open .dd__all{justify-content:flex-start}
  [data-theme="dark"] .nav.open{background:rgba(8,28,48,.96);border-color:rgba(255,255,255,.12)}
  .nav.open .only-mobile{display:block}
  .hero__grid,.why__layout,.vision__grid,.consult__grid,.contact__grid,.about__grid{grid-template-columns:1fr;gap:40px}
  .hero__art{order:-1;max-width:480px;margin-inline:auto}
  .news{grid-template-columns:1fr;text-align:center}
  .news__form{justify-content:center;flex-wrap:wrap}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:16px}
  .mobile-cta{display:block}
  .wa-float{inset-block-end:88px}
  .to-top{inset-block-end:88px;width:44px;height:44px}
  .hero__shape{display:none}
  .services__grid,.pkgs__grid,.tst__grid,.faq,.tiers,.consults{grid-template-columns:1fr}
  .gov__grid{grid-template-columns:repeat(3,1fr)}
  .secx{grid-template-columns:1fr;gap:14px}
  .secx__stage{min-height:246px}
  .secx__list{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .secx__item{flex:none;padding:12px 13px}
  .secx__go{display:none}
  .secx__label{font-size:13.5px}
  .secx__big{width:76px;height:76px}
  .estab{padding:26px 22px}
  .estab__title{min-width:min(100%,180px)}
  .estab__price{text-align:start;margin-top:4px}
  .estab .btn{align-self:stretch;text-align:center;justify-content:center}
  /* journey → vertical timeline */
  .journey__svg{display:none}
  .journey__steps{position:relative;inset:auto;display:flex;flex-direction:column;gap:22px;padding:6px 6px 6px 0}
  .jstep{position:relative;left:auto;top:auto;width:auto;transform:none;text-align:start;display:flex;align-items:flex-start;gap:15px}
  .jstep__node{width:50px;height:50px;margin:0;flex:none;font-size:19px;box-shadow:0 8px 18px -6px rgba(0,176,80,.55),0 0 0 5px var(--bg)}
  .jstep__body{margin:0;padding-top:3px;min-width:0;flex:1}
  .journey__mline{display:block;position:absolute;top:10px;bottom:10px;inset-inline-start:31px;width:3px;border-radius:3px;background:rgba(49,56,67,.1)}
  .journey__mfill{position:absolute;top:0;inset-inline-start:0;width:100%;height:0;border-radius:3px;background:linear-gradient(180deg,var(--cyan),var(--cyan-deep))}
  .stats-pill{flex-wrap:wrap;border-radius:22px;padding:16px 10px;row-gap:16px}
  .stats-pill .stat{flex:0 0 50%;justify-content:flex-start;padding-inline-start:clamp(14px,5vw,34px)}
  .stats-pill .stat__sep{display:none}
  .form-row{grid-template-columns:1fr}
  .vcards{grid-template-columns:1fr 1fr}
  .about__media{padding:6px 6px 0}
  .about__cred{position:static;inset:auto;margin-top:16px;width:max-content;max-width:100%}
  .about__cred{animation:none}
  .footer__grid{grid-template-columns:1fr}
  .hero__badge--a{inset-inline-start:0}
  .hero__badge--b{inset-inline-end:0}
  .news__form input{min-width:0;width:100%}
}
@media (max-width:560px){
  /* stack hero CTAs full-width to avoid horizontal overflow on phones */
  .hero__actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-inline:auto}
  .hero__actions .btn{width:100%}
  .vcards{grid-template-columns:1fr}
  /* keep the letter-spaced EN tagline within narrow screens */
  .hero__name-en{letter-spacing:.26em;font-size:10.5px;padding-inline-start:.26em}
  .hero__features{gap:10px 14px;padding:14px 18px}
  .gov__grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .gnode{padding:18px 10px 14px}
  .gnode__ico{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero__aurora{animation:none}
}

/* ============ Cinematic motion layer (GSAP) ============ */
/* When GSAP is active, content is visible by default (safety net); GSAP's
   inline tweens animate it in. No !important so inline tweens still win. */
.gsap-on .reveal{opacity:1;transform:none;filter:none;transition:none}
.gsap-on [data-stagger]>*{opacity:1;animation:none;transform:none}

/* keep SplitText words flowing horizontally no matter what */
.hero__title .cx-word{display:inline-block}

/* hero aurora — animated gradient wash behind the headline */
.hero__aurora{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.85;
  background:
    radial-gradient(38% 48% at 22% 32%,rgba(0,176,80,.34),transparent 70%),
    radial-gradient(42% 52% at 78% 26%,rgba(58,208,122,.26),transparent 70%),
    radial-gradient(48% 58% at 62% 82%,rgba(49,56,67,.30),transparent 70%);
  animation:auroraShift 20s ease-in-out infinite alternate;will-change:transform}
@keyframes auroraShift{
  0%{transform:translate3d(-2%,-1%,0) scale(1.05) rotate(0deg)}
  100%{transform:translate3d(3%,2%,0) scale(1.18) rotate(7deg)}}
[data-theme="dark"] .hero__aurora{opacity:.6}

/* card 3D tilt + cursor-following spotlight */
.gsap-on .services__grid,.gsap-on .sectors__grid,.gsap-on .vcards{perspective:1100px}
.cx-card{transform-style:preserve-3d;will-change:transform}
.cx-card>:not(.cx-glow){position:relative;z-index:1}
.cx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(0,176,80,.16),transparent 60%);
  transition:opacity .35s ease}
.cx-card:hover .cx-glow{opacity:1}
[data-theme="dark"] .cx-glow{background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(58,208,122,.20),transparent 60%)}

/* ============ Clients / Partners — airy monochrome logo cloud ============ */
.plogos{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(46px,5.6vw,76px)}
.plogos__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 4%,rgba(0,176,80,.055),transparent 62%)}
/* soft hairlines to gently frame the band on the light page */
.plogos::before,.plogos::after{content:"";position:absolute;inset-inline:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(49,56,67,.12),transparent)}
.plogos::before{top:0}
.plogos::after{bottom:0}

.plogos h2{font-size:clamp(24px,3.2vw,38px)}
.plogos .hl{position:relative;color:var(--cyan-deep)}
.plogos .hl::after{content:"";position:absolute;inset-inline:0;bottom:.05em;height:.24em;z-index:-1;
  background:rgba(58,208,122,.28);border-radius:4px}
.plogos__sub{color:var(--muted-light);font-size:clamp(14px,1.6vw,17px)}

.pmarquee{position:relative;margin-top:clamp(24px,3.2vw,42px);direction:ltr;
  -webkit-mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
          mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.pmarquee__row{overflow:hidden;padding-block:7px}
.pmarquee__track{display:flex;width:max-content;animation:pmarq 50s linear infinite;will-change:transform}
.pmarquee__row--rev .pmarquee__track{animation-direction:reverse;animation-duration:58s}
.pmarquee:hover .pmarquee__track{animation-play-state:paused}
.pmarquee__set{display:flex;flex:0 0 auto}

/* borderless logos — desaturated at rest, full colour + lift on hover (21st.dev-style) */
.plogo{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(128px,14.5vw,164px);height:70px;margin-inline:clamp(8px,1.5vw,20px);
  transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.plogo img{max-width:80%;max-height:46px;width:auto;height:auto;object-fit:contain;
  filter:none;opacity:1;transition:transform .34s ease}
.plogo:hover{transform:translateY(-5px)}
.plogo:hover img{transform:scale(1.06)}

@keyframes pmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Dark mode: dark-on-transparent logos would vanish → give each a clean white plate, full colour */
[data-theme="dark"] .plogos__bg{background:radial-gradient(58% 62% at 50% 4%,rgba(58,208,122,.07),transparent 62%)}
[data-theme="dark"] .plogos::before,[data-theme="dark"] .plogos::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
[data-theme="dark"] .plogo{background:#fff;border-radius:15px;border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55);width:clamp(126px,14.5vw,158px);height:72px}
[data-theme="dark"] .plogo img{filter:none;opacity:1;max-width:76%;max-height:44px}
[data-theme="dark"] .plogo:hover{box-shadow:0 18px 34px -12px rgba(0,176,80,.5)}

@media (max-width:640px){
  .plogo{width:clamp(108px,36vw,138px);height:60px;margin-inline:clamp(7px,3vw,14px)}
  .plogo img{max-height:36px}
  [data-theme="dark"] .plogo{height:62px}
  .pmarquee{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .pmarquee__track{animation:none}
  .pmarquee__row{overflow-x:auto;scrollbar-width:none}
  .pmarquee__row::-webkit-scrollbar{display:none}
}

/* ---- Icon-box glyph legibility in light mode (v45): thicker white glyph on deeper green ---- */
.abval__ck,.abt-ck{background:linear-gradient(140deg,#007a37,#0a5628)}
/* `.abval span{color:muted}` (0,1,1) was greying the check span — force white glyph */
.abval__ck svg,.abt-ck svg{stroke-width:3;stroke:#fff;color:#fff}
/* nudge the check down ~1.5px: the glyph is geometrically centred but reads top-heavy (long arm points up) */
.abval__ck svg{width:19px;height:19px;transform:translateY(4px)}
.abt-ck svg{width:14px;height:14px}
.vcard .vic svg{stroke-width:2.5}

/* =====================================================================
   notes-2026 — client review pass (ملاحظات الموقع الالكتروني)
   Appended last so these win on source order.
   ===================================================================== */

/* ---- A3 · ص1: «تعديل تصميم الشريط العلوي باسلوب افضل من كذا - مع تكبير حجم الشعار»
   The floating max-content pill left no room for a bigger logo. Replaced with a
   full-width corporate bar: container-aligned, taller, quiet at the top of the
   page and turning to solid glass + hairline once you scroll. ---- */
.header{padding:0;background:transparent}
.header.scrolled{padding-top:0}
.header__inner.glass{
  width:100%; max-width:100%; margin:0;
  height:76px; padding-inline:clamp(16px,3.4vw,44px);
  border-radius:0; border:0;
  border-bottom:1px solid transparent;
  background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background .32s ease, box-shadow .32s ease, border-color .32s ease, height .32s ease;
}
.header.scrolled .header__inner.glass{
  height:66px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(49,56,67,.10);
  box-shadow:0 10px 30px -18px rgba(49,56,67,.4);
}
[data-theme="dark"] .header.scrolled .header__inner.glass{
  background:rgba(34,38,44,.9); border-bottom-color:rgba(255,255,255,.10);
}
/* the logo finally has room */
.brand img{height:58px}
.header.scrolled .brand img{height:50px}
.brand img{transition:filter .35s ease, height .32s ease}
/* nav breathes now that the bar is full width */
.nav{gap:4px; margin-inline:auto}
.nav a,.nav .dd__btn{font-size:14.5px; padding:10px 13px}
.header__actions{gap:8px}
.header__actions::before{height:24px; margin-inline:4px 8px}
@media (max-width:960px){
  .header__inner.glass{height:64px; padding-inline:14px}
  .header.scrolled .header__inner.glass{height:60px}
  .brand img{height:46px}
  .header.scrolled .brand img{height:44px}
}

/* ---- A4 · ص1: «تعديل مقاس القوالب بحيث كل عنوان كل قالب في سطر واحد وينتصف القالب»
   Every service-card header is now the same height, the title is centred and
   scaled to sit on a single line. ---- */
.scard__head{
  padding:0 10px; min-height:62px;
  display:flex; align-items:center; justify-content:center;
}
.scard__name{
  text-align:center; width:100%;
  font-size:12.5px; line-height:1.35; letter-spacing:-.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scard__body{padding-top:14px}
@media (max-width:1200px){ .scard__name{font-size:11.6px} }
@media (max-width:1140px){ .scard__name{font-size:14px} }
@media (max-width:620px){ .scard__head{min-height:54px} .scard__name{font-size:13.5px} }

/* ---- A6 fix · the partner logo wall moved onto the home page.
   These rules lived ONLY in pages.css, which index.html does not load, so the
   grid collapsed and every logo rendered at its intrinsic size.
   NOTE: the columns MUST be minmax(0,1fr) — a bare 1fr resolves its min to the
   image's intrinsic width and blows the grid past the viewport (this already
   broke links.html once). ---- */
.logo-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:10px}
.lw-logo{min-width:0;overflow:hidden;aspect-ratio:5/3;display:grid;place-items:center;padding:12px 8px;border-radius:14px;background:none;border:1px solid transparent;box-shadow:none}
.lw-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.lw-logo:hover img{filter:grayscale(0);opacity:1}
[data-theme="dark"] .lw-logo{padding:12px 16px;background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.12)}
@media(max-width:900px){.logo-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}


/* ---- notes-4 §5.3–§5.6: client logos ----
   Both strips now show full-colour logos at the same size, each centred in
   its cell. «شركات نفخر بها» became a marquee like «منشآت رائدة», so the two
   sections read as one system. */
.plogo{
  width:clamp(150px,17vw,196px); height:96px;
  display:grid; place-items:center;            /* الشعار في منتصف القالب */
  margin-inline:clamp(10px,1.6vw,22px);
}
.plogo img{
  max-width:88%; max-height:74px; width:auto; height:auto;
  object-fit:contain; filter:none; opacity:1;  /* ملوّنة */
}
.lw-logo img{filter:none !important; opacity:1 !important}
@media (max-width:640px){
  .plogo{width:132px; height:80px}
  .plogo img{max-height:60px}
}

/* notes-4 §4.12 — «أبشر أعمال» must not break across lines.
   The class was applied in services-hr.html but never defined; without this
   the phrase still wrapped exactly as the client reported. */
.nowrap{white-space:nowrap}