/* ============================================================
   VSTN Group — (--primary #12121b / --accent #f7931e).
   ============================================================ */

:root{
  /* paper / light zones — deeper page tint so white cards visibly lift off it */
  --paper:      #f1e4cc;
  --paper-2:    #ffffff;
  --paper-3:    #e9d7ae;
  --line:       #ddc99e;
  --line-soft:  #e7d8b4;

  /* ink (warm near-black) */
  --ink:        #17140f;
  --ink-soft:   #4c4536;
  --ink-faint:  #8a8270;

  /* gold — Consultancy accent */
  --gold:        #f7931e;   /* vstntech.com --accent */
  --gold-dim:    #e07c0d;   /* vstntech.com --accent-dark */
  --gold-light:  #f9a74d;   /* vstntech.com --accent-light */
  --gold-strong: #d17104;   /* AA-safe darker gold for small text on paper */
  --gold-soft:   rgba(247,147,30,.14);
  --gold-glow:   rgba(247,147,30,.22);

  /* ink zones — Technology + footer, matching vstntech.com --primary/--secondary-accent */
  --noir:        #12121b;
  --noir-card:   #1c1c28;
  --noir-card-2: #272a33;
  --noir-line:   rgba(255,255,255,.10);
  --text-dark:   #f6f4ef;
  --muted-dark:  #c2c2cc;
  --muted-dark-2:#8d8d9c;

  /* elevation */
  --shadow-sm: 0 1px 3px rgba(23,20,15,.07), 0 1px 2px rgba(23,20,15,.05);
  --shadow-md: 0 16px 32px -12px rgba(23,20,15,.20);
  --shadow-lg: 0 32px 64px -20px rgba(23,20,15,.26);
  --shadow-dark: 0 20px 44px -16px rgba(0,0,0,.55);

  --sans: 'Inter', sans-serif;
  --serif-i: 'Fraunces', serif;
  --mono: 'JetBrains Mono', monospace;
  --ar-head: 'Noto Kufi Arabic', sans-serif;
  --ar-body: 'Noto Sans Arabic', sans-serif;

  --ease: cubic-bezier(.16,.8,.24,1);
  --header-h: 68px; /* fallback; refined by JS via ResizeObserver */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  position:relative;
}
body.lang-ar{ font-family:var(--ar-body); }
a{ color:inherit; } button{ font:inherit; }
:focus-visible{ outline:2px solid var(--gold-strong); outline-offset:3px; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,64px); position:relative; }
.mono{ font-family:var(--mono); }
a, button, .office-chip, .lang-toggle button{ cursor:pointer; }

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

/* ===== film grain — global tactile texture over everything ===== */
body::after{
  content:''; position:fixed; inset:0; z-index:70; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

/* ===== scroll progress ===== */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:80; background:transparent; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light)); transition:width .1s linear; }

/* ===== signature: eight-point star mark ===== */
.icon-star path{ fill:none; stroke:currentColor; stroke-width:5; stroke-linejoin:round; }

/* ===== header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(241,228,204,.75); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
header.is-scrolled{ background:rgba(241,228,204,.92); box-shadow:var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; flex-wrap:wrap; }
.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0; }
.logo svg{ width:20px; height:20px; color:var(--gold-strong); }
.logo span{ font-weight:700; font-size:18px; letter-spacing:.01em; }
.logo img{ height:36px; width:auto; display:block; }
.section-logo{ height:60px; width:auto; display:block; margin-bottom:14px; }
nav.main-nav{ display:flex; align-items:center; gap:clamp(12px,3vw,28px); flex-wrap:wrap; row-gap:10px; }
nav.main-nav a.navlink{ position:relative; text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .2s; white-space:nowrap; }
nav.main-nav a.navlink::after{ content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius:2px; transition:right .25s var(--ease); }
nav.main-nav a.navlink:hover{ color:var(--ink); }
nav.main-nav a.navlink:hover::after{ right:0; }
nav.main-nav a.navlink.active{ color:var(--ink); font-weight:700; }
nav.main-nav a.navlink.active::after{ right:0; }
[dir="rtl"] nav.main-nav a.navlink::after{ left:100%; right:0; }
[dir="rtl"] nav.main-nav a.navlink:hover::after,
[dir="rtl"] nav.main-nav a.navlink.active::after{ left:0; }
@media (max-width:480px){
  nav.main-nav{ gap:10px 16px; }
  nav.main-nav a.navlink{ font-size:13px; }
}
.lang-toggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lang-toggle button{ border:none; background:transparent; padding:6px 14px; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--ink-soft); transition:all .2s; }
.lang-toggle button.active{ background:var(--ink); color:var(--paper-2); }
.btn{ display:inline-flex; align-items:center; gap:7px; padding:11px 20px; font-size:13.5px; font-weight:600; text-decoration:none; border:none; border-radius:6px; transition:all .18s ease; white-space:nowrap; }
.btn-accent{ background:var(--gold); color:#241300; box-shadow:0 10px 22px -8px var(--gold-glow); }
.btn-accent:hover{ background:#ffa53a; transform:translateY(-2px); box-shadow:0 16px 30px -10px var(--gold-glow); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink-faint); background:var(--paper-3); }
.btn-line{ background:transparent; color:var(--text-dark); border:1px solid var(--noir-line); }
.btn-line:hover{ border-color:var(--gold-light); color:var(--gold-light); }

/* ===== hero — fills the screen below the header, no scroll needed ===== */
.hero{
  min-height:calc(100vh - var(--header-h, 68px));
  min-height:calc(100dvh - var(--header-h, 68px));
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(16px,3vh,32px) 0 clamp(60px,9vh,88px);
  text-align:center; position:relative; overflow:hidden;
  box-shadow:inset 0 -60px 40px -50px rgba(23,20,15,.06);
}
/* soft edge — the only cue that the hero has ended and content begins */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-soft) 18%, var(--line-soft) 82%, transparent);
}
.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.blob{ position:absolute; border-radius:50%; filter:blur(4px); will-change:transform; }
.blob-a{ top:-260px; left:50%; translate:-50% 0; width:900px; height:900px; background:radial-gradient(circle, var(--gold-glow), transparent 60%); }
.blob-b{ top:60px; left:-140px; width:440px; height:440px; background:radial-gradient(circle, rgba(18,18,27,.05), transparent 65%); }
.blob-c{ top:-40px; right:-140px; width:460px; height:460px; background:radial-gradient(circle, rgba(247,147,30,.14), transparent 65%); }
.spotlight{ position:absolute; top:0; left:0; width:520px; height:520px; margin:-260px; border-radius:50%; background:radial-gradient(circle, rgba(247,147,30,.16), transparent 70%); opacity:0; transition:opacity .4s; will-change:transform; }
.spotlight.is-active{ opacity:1; }
.floating-star{ position:absolute; color:var(--gold-strong); opacity:.18; animation:floaty 7s ease-in-out infinite; }
.floating-star.s1{ top:16%; left:8%; width:26px; height:26px; animation-delay:0s; }
.floating-star.s2{ top:64%; left:14%; width:16px; height:16px; animation-delay:1.4s; color:var(--gold-dim); }
.floating-star.s3{ top:22%; right:10%; width:20px; height:20px; animation-delay:.7s; }
.floating-star.s4{ top:68%; right:16%; width:14px; height:14px; animation-delay:2.1s; color:var(--gold-dim); }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce){ .floating-star{ animation:none; } }

.hero .wrap{ position:relative; z-index:1; }
.hero-logo{ height:clamp(40px,7.5vh,120px); width:auto; margin-bottom:clamp(6px,1.4vh,14px); }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:clamp(13px,1.1vh + 0.6vw,16px); font-weight:700; color:var(--gold-strong); letter-spacing:.07em; margin-bottom:clamp(12px,2.2vh,24px); }
body.lang-ar .eyebrow{ font-family:var(--ar-body); letter-spacing:normal; }
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); }

h1.hero-head{ font-weight:800; font-size:clamp(28px, 3.6vh + 2.6vw, 84px); line-height:1.05; margin:0 auto clamp(12px,2vh,24px); max-width:920px; letter-spacing:-.02em; }
h1.hero-head em{ font-family:var(--serif-i); font-style:italic; font-weight:500; background:linear-gradient(100deg, var(--gold-strong), var(--gold) 55%, var(--gold-light)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:5px; }
body.lang-ar h1.hero-head{ font-family:var(--ar-head); font-weight:700; }
body.lang-ar h1.hero-head em{ font-family:var(--ar-head); font-style:normal; }

p.hero-sub{ font-size:clamp(14.5px, 0.9vh + 0.8vw, 18.5px); color:var(--ink-soft); max-width:620px; margin:0 auto clamp(18px,3vh,40px); line-height:1.6; }

.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(22px,4vh,56px); }

/* spec panel — "ticket stub" treatment */
.spec-panel{
  max-width:920px; margin:0 auto 0; background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; text-align:start; overflow:hidden; box-shadow:var(--shadow-md);
}
.spec-top{ display:flex; align-items:center; justify-content:space-between; padding:clamp(9px,1.4vh,16px) 22px; border-bottom:1px dashed var(--line); gap:12px; flex-wrap:wrap; }
.spec-top .dots{ display:flex; gap:6px; }
.spec-top .dots span{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.spec-top .url{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); overflow-wrap:anywhere; }
.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.spec-cell{ padding:clamp(12px,2.2vh,26px) 22px; border-inline-start:1px dashed var(--line); position:relative; }
.spec-cell:first-child{ border-inline-start:none; }
.spec-cell .val{ font-size:clamp(20px, 1.6vh + 1.4vw, 32px); font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; font-family:var(--serif-i); }
.spec-cell .val.accent{ color:var(--gold); }
.spec-cell .lbl{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
@media (max-width:640px){
  .spec-grid{ grid-template-columns:repeat(2,1fr); }
  .spec-cell{ border-inline-start:1px dashed var(--line); border-top:none; }
  .spec-cell:nth-child(odd){ border-inline-start:none; }
  .spec-cell:nth-child(n+3){ border-top:1px dashed var(--line); }
}
@media (max-width:340px){
  .spec-grid{ grid-template-columns:1fr; }
  .spec-cell{ border-inline-start:none; border-top:1px dashed var(--line); }
  .spec-cell:first-child{ border-top:none; }
}

/* ===== scroll cue — subtle invitation to keep going ===== */
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(10px,2.4vh,26px); translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
  color:var(--ink-faint); opacity:.65; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.scroll-cue:hover{ opacity:1; transform:translate(-50%,2px); }
.scroll-cue-track{ width:20px; height:32px; border:1.5px solid currentColor; border-radius:12px; position:relative; }
.scroll-cue-dot{
  position:absolute; top:5px; left:50%; translate:-50% 0; width:3.5px; height:7px; border-radius:2px;
  background:var(--gold-strong); animation:scrollCueDot 1.8s ease-in-out infinite;
}
@keyframes scrollCueDot{ 0%{ top:5px; opacity:1; } 65%{ top:17px; opacity:.25; } 66%{ opacity:0; } 100%{ top:5px; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue-dot{ animation:none; } }
@media (max-height:680px){ .scroll-cue{ display:none; } }

/* ===== intro-statement — prominent lead line + pulled-out credential chips ===== */
.intro-statement{
  position:relative; padding-inline-start:22px; margin:0 0 48px; max-width:700px;
  border-inline-start:3px solid var(--gold);
  border-image:linear-gradient(var(--gold-dim), var(--gold), var(--gold-light)) 1;
}
.intro-lead{
  font-size:clamp(19px,2.15vw,23px); font-weight:600; line-height:1.5;
  color:var(--ink); margin:0 0 20px; letter-spacing:-.005em;
}
body.lang-ar .intro-lead{ font-family:var(--ar-head); font-weight:700; }
section.dark-zone .intro-lead{ color:var(--text-dark); }
.intro-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.intro-chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--paper-2); border:1px solid var(--line);
  padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-soft);
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.intro-chip svg{ width:13px; height:13px; color:var(--gold-strong); flex-shrink:0; }
.intro-chip:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
body.lang-ar .intro-chip{ font-family:var(--ar-body); }
section.dark-zone .intro-chip{ background:var(--noir-card); border-color:var(--noir-line); color:var(--muted-dark); }
section.dark-zone .intro-chip svg{ color:var(--gold-light); }
section.dark-zone .intro-chip:hover{ border-color:var(--gold-light); }

/* ===== section scaffolding ===== */
section.block{ padding:clamp(64px,8vw,110px) 0; position:relative; }
.section-tag{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--gold-strong); letter-spacing:.06em; margin-bottom:14px; }
body.lang-ar .section-tag{ font-family:var(--ar-body); letter-spacing:normal; }
.sec-head-row{ position:relative; }
.sec-num{ font-family:var(--serif-i); font-style:italic; position:absolute; top:-.55em; inset-inline-start:-.06em; font-size:clamp(70px,10vw,140px); color:var(--ink); opacity:.05; line-height:1; z-index:0; pointer-events:none; user-select:none; }
h2.section-head{ position:relative; z-index:1; font-weight:700; font-size:clamp(28px,3.8vw,42px); line-height:1.16; margin:0 0 16px; max-width:680px; letter-spacing:-.01em; }
body.lang-ar h2.section-head{ font-family:var(--ar-head); }
p.section-intro{ font-size:16.5px; color:var(--ink-soft); line-height:1.75; max-width:640px; margin:0 0 48px; position:relative; z-index:1; }

/* editorial drop cap (LTR only) */
p.intro-drop::first-letter{
  font-family:var(--serif-i); font-style:italic; font-weight:600; color:var(--gold);
  float:inline-start; font-size:3.4em; line-height:.78; padding-inline-end:8px; padding-top:4px; padding-right:4px;
}
body.lang-ar p.intro-drop::first-letter{ all:unset; }

/* ===== scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* pillar / feature grid (bento) — light, asymmetric featured first cell */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.bento.cols-5{ grid-template-columns:repeat(5,1fr); }
.bento.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .bento, .bento.cols-5, .bento.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bento, .bento.cols-5, .bento.cols-4{ grid-template-columns:1fr; } }
.bento-cell{ background:var(--paper-2); padding:26px 22px; display:flex; flex-direction:column; gap:12px; transition:background .25s, transform .25s var(--ease), box-shadow .25s var(--ease); position:relative; z-index:1; }
.bento-cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); z-index:2; }
.bento-cell .ic{ width:34px; height:34px; border-radius:8px; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; color:var(--gold-strong); transition:transform .3s var(--ease); }
.bento-cell:hover .ic{ transform:scale(1.1) rotate(-4deg); }
.bento-cell .ic svg{ width:17px; height:17px; }
.bento-cell .t{ font-weight:700; font-size:15px; }
body.lang-ar .bento-cell .t{ font-family:var(--ar-head); font-size:14.5px; }
.bento-cell .d{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
/* featured first cell in consultancy/technology bentos */
.bento.cols-5 .bento-cell:first-child,
.bento.cols-4 .bento-cell:first-child{
  background:linear-gradient(155deg, var(--gold-strong), var(--gold) 75%);
  color:#2a1500;
}
.bento.cols-5 .bento-cell:first-child .t,
.bento.cols-4 .bento-cell:first-child .t{ color:#241300; }
.bento.cols-5 .bento-cell:first-child .d,
.bento.cols-4 .bento-cell:first-child .d{ color:rgba(36,19,0,.78); }
.bento.cols-5 .bento-cell:first-child .ic,
.bento.cols-4 .bento-cell:first-child .ic{ background:rgba(36,19,0,.14); color:#2a1500; }
.bento.cols-5 .bento-cell:first-child:hover,
.bento.cols-4 .bento-cell:first-child:hover{ background:linear-gradient(155deg, var(--gold-strong), var(--gold) 75%); }

/* pipeline / process tracker */
.pipeline{ display:flex; gap:0; margin-bottom:20px; overflow-x:none; }
.pipe-stage{ flex:1; min-width:190px; position:relative; padding:26px 20px 20px; border:1px solid var(--line); background:var(--paper-2); transition:background .2s, transform .25s var(--ease); overflow:hidden; }
.pipe-stage:hover{ background:var(--paper-3); transform:translateY(-3px); }
.pipe-stage + .pipe-stage{ border-inline-start:none; }
.pipe-stage:first-child{ border-start-start-radius:10px; border-end-start-radius:10px; }
.pipe-stage:last-child{ border-start-end-radius:10px; border-end-end-radius:10px; }
.pipe-stage .bg-num{ position:absolute; top:-.3em; inset-inline-end:2px; font-family:var(--serif-i); font-style:italic; font-size:64px; color:var(--ink); opacity:.05; z-index:0; }
.pipe-num{ position:relative; z-index:1; font-family:var(--mono); font-size:11px; color:var(--gold-strong); margin-bottom:10px; }
.pipe-t{ position:relative; z-index:1; font-weight:700; font-size:14.5px; margin-bottom:8px; }
body.lang-ar .pipe-t{ font-family:var(--ar-head); font-size:14px; }
.pipe-d{ position:relative; z-index:1; font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.pipe-stage::after{
  content:''; position:absolute; top:50%; inset-inline-end:-1px; translate:50% -50%;
  width:8px; height:8px; border-radius:50%; background:var(--gold); z-index:2;
}
.pipe-stage:last-child::after{ display:none; }
[dir="rtl"] .pipe-stage::after{ translate:-50% -50%; }

@media (max-width:900px){
  .pipeline{ flex-direction:column; overflow-x:none; }
  .pipe-stage{ min-width:0; border-radius:0 !important; border-inline-start:1px solid var(--line) !important; }
  .pipe-stage + .pipe-stage{ border-top:none; }
  .pipe-stage:first-child{ border-start-start-radius:10px !important; border-start-end-radius:10px !important; border-end-start-radius:0 !important; border-end-end-radius:0 !important; }
  .pipe-stage:last-child{ border-start-start-radius:0 !important; border-start-end-radius:0 !important; border-end-start-radius:10px !important; border-end-end-radius:10px !important; }
  .pipe-stage::after{ top:auto; bottom:-1px; inset-inline-end:auto; left:50%; translate:-50% 50%; }
}

/* services bento (asymmetric) */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:64px; box-shadow:var(--shadow-sm); }
@media (max-width:900px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-cell{ background:var(--paper-2); padding:24px 20px; min-height:150px; display:flex; flex-direction:column; gap:10px; transition:background .2s, transform .25s var(--ease), box-shadow .25s var(--ease); position:relative; z-index:1; }
.svc-cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); z-index:2; }
.svc-cell .icon-star{ width:15px; height:15px; color:var(--gold-strong); transition:transform .3s var(--ease); }
.svc-cell:hover .icon-star{ transform:rotate(25deg) scale(1.15); }
.svc-cell .t{ font-weight:700; font-size:14.5px; }
body.lang-ar .svc-cell .t{ font-family:var(--ar-head); font-size:14px; }
.svc-cell .d{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; }

/* awards / recognition badges — ribbon treatment */
.badge-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:56px; }
@media (max-width:820px){ .badge-row{ grid-template-columns:1fr; } }
.badge-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:22px; padding-inline-start:26px; display:flex; gap:14px; align-items:flex-start; position:relative; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.badge-card::before{ content:''; position:absolute; inset-inline-start:0; top:12px; bottom:12px; width:3px; border-radius:2px; background:linear-gradient(var(--gold), var(--gold-dim)); }
.badge-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.badge-mark{ width:32px; height:32px; border-radius:8px; background:var(--gold-soft); color:var(--gold-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.badge-mark svg{ width:16px; height:16px; }
.badge-card .t{ font-size:14px; font-weight:700; line-height:1.4; }
body.lang-ar .badge-card .t{ font-family:var(--ar-head); font-size:13.5px; }
.badge-card .s{ font-size:12px; color:var(--ink-faint); margin-top:4px; }

/* pull quote — oversized quotation glyph */
.pull-quote{ position:relative; padding-inline-start:24px; margin:0 0 64px; max-width:680px; }
.pull-quote::before{ content:'“'; position:absolute; top:-.5em; inset-inline-start:-.14em; font-family:var(--serif-i); font-size:110px; color:var(--gold); opacity:.25; line-height:1; z-index:0; }
.pull-quote p{ position:relative; z-index:1; font-family:var(--serif-i); font-style:italic; font-size:clamp(19px,2.2vw,25px); line-height:1.5; margin:0 0 12px; color:var(--ink); }
body.lang-ar .pull-quote p{ font-family:var(--ar-head); font-style:normal; font-weight:600; }
body.lang-ar .pull-quote::before{ content:none; }
.pull-quote .attr{ position:relative; z-index:1; font-size:13px; color:var(--ink-faint); }

/* office chips */
.offices{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:64px; }
.office-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--paper-2); border:1px solid var(--line); padding:9px 16px; border-radius:999px; font-size:13px; font-weight:500; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.office-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--gold); }
.office-chip svg{ width:12px; height:12px; color:var(--gold-strong); }

/* ===== pillar-strip — "5 Cs" medallion coins (Consultancy signature layout) ===== */
.pillar-strip{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px 16px; margin-bottom:8px; position:relative; }
.pillar-strip::before{
  content:''; position:absolute; top:33px; left:6%; right:6%; height:1px; z-index:0;
  background-image:linear-gradient(to right, var(--ink-faint) 0 6px, transparent 6px 14px);
  background-size:14px 1px; background-repeat:repeat-x; opacity:.4;
}
.pillar-coin{ flex:1 1 150px; max-width:200px; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.pillar-coin .num{
  width:68px; height:68px; border-radius:50%; background:var(--paper-2); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif-i); font-style:italic; font-weight:600;
  font-size:26px; color:var(--gold-strong); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.pillar-coin:hover .num{ transform:scale(1.1) rotate(-6deg); background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241300; border-color:transparent; box-shadow:var(--shadow-md); }
.pillar-coin .t{ font-weight:700; font-size:14.5px; }
body.lang-ar .pillar-coin .t{ font-family:var(--ar-head); font-size:14px; }
.pillar-coin .d{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; max-width:175px; }
@media (max-width:760px){
  .pillar-strip{ flex-direction:column; align-items:stretch; gap:22px; }
  .pillar-strip::before{ display:none; }
  .pillar-coin{ max-width:none; flex-direction:row; text-align:start; gap:16px; }
  .pillar-coin .num{ flex-shrink:0; }
  .pillar-coin .d{ max-width:none; }
}

/* ===== medal-wall — trophy/award medallions (replaces flat badge cards) ===== */
.medal-wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px; }
@media (max-width:820px){ .medal-wall{ grid-template-columns:1fr; } }
.medal{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:30px 18px 22px; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.medal:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.medal-face{ position:relative; width:60px; height:60px; border-radius:50%; background:linear-gradient(155deg, var(--gold-strong), var(--gold) 70%); display:flex; align-items:center; justify-content:center; color:#241300; box-shadow:0 8px 18px -6px var(--gold-glow); }
.medal-face::before{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px dashed var(--gold-strong); opacity:.45; }
.medal-face .icon-star{ width:24px; height:24px; }
.medal .ribbon{ display:flex; gap:3px; margin-top:-8px; }
.medal .ribbon span{ width:11px; height:18px; background:var(--gold-dim); clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%); }
.medal .ribbon span:last-child{ background:var(--ink); opacity:.7; }
.medal .t{ font-size:14px; font-weight:700; line-height:1.4; }
body.lang-ar .medal .t{ font-family:var(--ar-head); font-size:13.5px; }
.medal .s{ font-size:12px; color:var(--ink-faint); }

/* ===== presence-grid — region cards (replaces flat office chips) ===== */
.presence-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:64px; }
@media (max-width:820px){ .presence-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .presence-grid{ grid-template-columns:1fr; } }
.region-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:20px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.region-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.region-card .rname{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:8px; }
body.lang-ar .region-card .rname{ font-family:var(--ar-head); font-size:13.5px; }
.region-card .rname svg{ width:13px; height:13px; color:var(--gold-strong); flex-shrink:0; }
.region-card .rplaces{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }

/* ===== db-strip — research database credibility badges ===== */
.db-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.db-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--paper-3); border:1px solid var(--line); padding:8px 14px; border-radius:8px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; transition:border-color .2s, transform .2s var(--ease); }
.db-badge:hover{ border-color:var(--gold); transform:translateY(-2px); }
.db-badge svg{ width:11px; height:11px; color:var(--gold-strong); flex-shrink:0; }

/* cta band — bold gold gradient block (consultancy) */
.cta-band{
  background:linear-gradient(155deg, var(--gold-strong), var(--gold) 70%);
  border:2px solid rgba(255,255,255,.35); border-radius:22px; padding:clamp(38px,5.5vw,54px) clamp(32px,5vw,56px);
  margin-bottom:8px; position:relative; overflow:hidden;
  box-shadow:0 0 0 6px rgba(247,147,30,.10), 0 24px 48px -20px var(--gold-glow);
  animation:ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 0 6px rgba(247,147,30,.10), 0 24px 48px -20px var(--gold-glow); }
  50%{ box-shadow:0 0 0 8px rgba(247,147,30,.13), 0 26px 52px -18px rgba(247,147,30,.4); }
}
.cta-band::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.28), transparent 55%); pointer-events:none; }
.cta-watermark{ position:absolute; top:-24px; inset-inline-end:-10px; width:190px; height:190px; color:#241300; opacity:.08; pointer-events:none; z-index:0; }
.cta-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,40px); flex-wrap:wrap; text-align:start; }
.cta-copy{ flex:1 1 320px; }
.cta-badge{
  display:inline-flex; align-items:center; gap:7px; background:#241300; color:var(--gold-light);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  padding:7px 16px; border-radius:999px; margin-bottom:16px;
}
.cta-badge .icon-star{ width:11px; height:11px; }
body.lang-ar .cta-badge{ font-family:var(--ar-body); letter-spacing:normal; }
.cta-band h3{ font-weight:800; font-size:clamp(22px,2.7vw,30px); line-height:1.22; margin:0 0 12px; color:#241300; }
body.lang-ar .cta-band h3{ font-family:var(--ar-head); }
.cta-sub{ font-size:14.5px; line-height:1.6; color:rgba(36,19,0,.72); max-width:440px; margin:0; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }

.btn-cta{
  font-size:15px; font-weight:700; padding:16px 26px; border-radius:11px; gap:10px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.55); position:relative; overflow:hidden;
}
.btn-cta::before{
  content:''; position:absolute; top:0; left:-60%; width:30%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-20deg); animation:btnShine 7s ease-in-out infinite;
}
@keyframes btnShine{ 0%{ left:-60%; } 16%{ left:130%; } 100%{ left:130%; } }
.btn-arrow{ display:inline-flex; transition:transform .25s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }
[dir="rtl"] .btn:hover .btn-arrow{ transform:translateX(-4px); }
.cta-band .btn-accent{ background:#241300; color:var(--gold); box-shadow:0 10px 26px -10px rgba(0,0,0,.5); }
.cta-band .btn-accent:hover{ background:#0f0800; color:#ffb454; transform:translateY(-3px) scale(1.03); box-shadow:0 20px 40px -10px rgba(0,0,0,.6); }
@media (max-width:680px){
  .cta-inner{ flex-direction:column; align-items:stretch; }
  .cta-actions{ width:100%; }
  .cta-actions .btn{ width:100%; justify-content:center; }
}

/* contact */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:56px; }
@media (max-width:720px){ .contact-split{ grid-template-columns:1fr; } }
.contact-split .body-text{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin:0 0 16px; }

/* contact rows — clickable email / phone with a small icon badge */
.contact-rows{ display:flex; flex-direction:column; gap:8px; }
.contact-row{
  display:inline-flex; align-items:center; gap:13px; width:fit-content; max-width:100%;
  text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:700; padding:5px 0;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.contact-row:hover{ color:var(--gold-strong); transform:translateX(4px); }
body.lang-ar .contact-row:hover{ transform:translateX(-4px); }
.contact-ic{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%; background:var(--gold-soft); color:var(--gold-strong);
  transition:background .2s, color .2s;
}
.contact-ic svg{ width:15px; height:15px; }
.contact-row:hover .contact-ic{ background:var(--gold); color:#241300; }

.ksa-card{ background:var(--paper-2); border:1px dashed var(--ink-faint); border-radius:10px; padding:24px; position:relative; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.ksa-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ksa-card .stamp{ position:absolute; top:16px; inset-inline-end:16px; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--gold-strong); display:flex; align-items:center; justify-content:center; color:var(--gold-strong); opacity:.7; transform:rotate(12deg); }
.ksa-card .stamp svg{ width:16px; height:16px; }
.ksa-card .cap{ font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--gold-strong); letter-spacing:.05em; margin-bottom:10px; max-width:80%; }
body.lang-ar .ksa-card .cap{ font-family:var(--ar-body); letter-spacing:normal; }
.ksa-card .addr{ font-size:14px; color:var(--ink); line-height:1.85; white-space:pre-line; }

/* ===== technology: dark ink zone ===== */
section.dark-zone{
  background:var(--noir); color:var(--text-dark);
  position:relative; overflow:hidden;
  clip-path:polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%);
  margin-top:-28px;
}
section.dark-zone::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(560px 420px at 12% 0%, rgba(247,147,30,.10), transparent 65%),
    radial-gradient(520px 420px at 92% 100%, rgba(255,255,255,.04), transparent 65%);
}
section.dark-zone .wrap{ z-index:1; }
section.dark-zone .section-tag{ color:var(--gold-light); }
section.dark-zone .sec-num{ color:var(--text-dark); opacity:.06; }
section.dark-zone h2.section-head{ color:var(--text-dark); }
section.dark-zone p.section-intro{ color:var(--muted-dark); }
section.dark-zone p.intro-drop::first-letter{ color:var(--gold); }
section.dark-zone h3.section-tag{ color:var(--gold-light); }

section.dark-zone .bento{ background:var(--noir-line); border-color:var(--noir-line); box-shadow:var(--shadow-dark); }
section.dark-zone .bento-cell{ background:var(--noir-card); }
section.dark-zone .bento-cell .t{ color:var(--text-dark); }
section.dark-zone .bento-cell .d{ color:var(--muted-dark); }
section.dark-zone .bento-cell .ic{ background:rgba(247,147,30,.16); color:var(--gold-light); }
section.dark-zone .bento-cell:hover{ box-shadow:var(--shadow-dark); }
section.dark-zone .bento.cols-4 .bento-cell:first-child{ background:linear-gradient(155deg, var(--noir-card-2), var(--noir-card) 130%); border:1px solid rgba(247,147,30,.35); }
section.dark-zone .bento.cols-4 .bento-cell:first-child .t{ color:var(--text-dark); }
section.dark-zone .bento.cols-4 .bento-cell:first-child .d{ color:var(--muted-dark); }
section.dark-zone .bento.cols-4 .bento-cell:first-child .ic{ background:rgba(247,147,30,.16); color:var(--gold-light); }
section.dark-zone .bento.cols-4 .bento-cell:first-child:hover{ background:linear-gradient(155deg, var(--noir-card-2), var(--noir-card) 130%); }

/* product mock windows — glass, teal accent (dark zone) */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px; perspective:1200px; }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr; } }
.product-win{ background:rgba(255,255,255,.03); backdrop-filter:blur(6px); border:1px solid var(--noir-line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-dark); transition:box-shadow .3s var(--ease), border-color .3s; transform-style:preserve-3d; will-change:transform; }
.product-win:hover{ border-color:var(--gold-dim); }
.win-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--noir-line); background:rgba(255,255,255,.02); }
.win-bar .d{ width:8px; height:8px; border-radius:50%; }
.win-bar .d:nth-child(1){ background:#e5534b; } .win-bar .d:nth-child(2){ background:#e0a02f; } .win-bar .d:nth-child(3){ background:var(--gold-light); }
.win-bar .url{ font-family:var(--mono); font-size:10.5px; color:var(--muted-dark-2); margin-inline-start:8px; }
.win-body{ padding:20px; }
.win-body .skel{ height:9px; border-radius:4px; background:linear-gradient(90deg,var(--noir-line),rgba(255,255,255,.06),var(--noir-line)); margin-bottom:8px; }
.win-body .logo-img{ height:48px; width:auto; display:block; margin:6px 0 4px; opacity:.92; }
.product-win .name{ font-weight:700; font-size:16px; color:var(--gold-light); margin:16px 20px 8px; }
.product-win .desc{ font-size:13px; color:var(--muted-dark); line-height:1.6; padding:0 20px 22px; }
@media (prefers-reduced-motion: reduce){ .product-win{ transform:none !important; } }

/* cta band inside dark zone — teal gradient */
section.dark-zone .cta-band{ background:linear-gradient(155deg, var(--gold-dim), var(--gold) 70%); box-shadow:0 24px 48px -20px var(--gold-glow); }
section.dark-zone .cta-band h3{ color:#241300; }
section.dark-zone .cta-band .btn-accent{ background:#241300; color:var(--gold); }
section.dark-zone .cta-band .btn-accent:hover{ background:#0f0800; color:#ffb454; }

section.dark-zone .contact-split .body-text{ color:var(--muted-dark); }
section.dark-zone .contact-row{ color:var(--text-dark); }
section.dark-zone .contact-row:hover{ color:var(--gold-light); }
section.dark-zone .contact-ic{ background:rgba(247,147,30,.16); color:var(--gold-light); }
section.dark-zone .contact-row:hover .contact-ic{ background:var(--gold); color:#241300; }
section.dark-zone .ksa-card{ background:var(--noir-card); border-color:var(--noir-line); box-shadow:var(--shadow-dark); }
section.dark-zone .ksa-card:hover{ box-shadow:var(--shadow-dark); }
section.dark-zone .ksa-card .stamp{ border-color:var(--gold-light); color:var(--gold-light); }
section.dark-zone .ksa-card .cap{ color:var(--gold-light); }
section.dark-zone .ksa-card .addr{ color:var(--text-dark); }

/* footer */
footer{ background:var(--noir); color:var(--text-dark); border-top:1px solid var(--noir-line); padding:clamp(48px,6vw,68px) 0 26px; position:relative; overflow:hidden; }
footer::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(480px 320px at 8% 0%, rgba(247,147,30,.10), transparent 65%), radial-gradient(480px 320px at 100% 100%, rgba(255,255,255,.04), transparent 65%); }
footer .wrap{ z-index:1; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:32px; }
@media (max-width:720px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.foot-brand svg{ width:18px; height:18px; color:var(--gold-light); }
.foot-brand span{ font-weight:700; font-size:17px; }
.foot-brand img{ opacity: 1; }
.foot-col .cap{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; margin-bottom:12px; background:linear-gradient(90deg, var(--gold-light), var(--gold-dim)); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.lang-ar .foot-col .cap{ font-family:var(--ar-body); letter-spacing:normal; }
.foot-col p, .foot-col a, .foot-col div{ font-size:13.5px; line-height:1.8; color:var(--muted-dark); }
.foot-col a{
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  background:rgba(247,147,30,.14); border:1px solid rgba(247,147,30,.4);
  color:var(--gold-light); padding:8px 15px; border-radius:999px;
  font-weight:700; margin:0 8px 10px 0;
  transition:background .2s, border-color .2s, transform .2s var(--ease), color .2s, box-shadow .2s;
}
.foot-col a::after{ content:'↗'; font-size:11px; opacity:.85; }
.foot-col a:hover{ background:var(--gold); border-color:var(--gold); color:#241300; transform:translateY(-2px); box-shadow:0 10px 22px -10px var(--gold-glow); }
.foot-rule{ height:1px; background:var(--noir-line); margin-bottom:20px; }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--muted-dark-2); }