/* ============================================================
   ZAKARIA AZIZA — PERSONAL BRAND V2 / 2026-09-05
   Final visual system layer. Keeps the original dark palette and
   future identity while making the experience calmer, sharper and
   more editorial across every public page.
   ============================================================ */
:root{
  --za-bg:#07090d;
  --za-bg-elev:#0b0f15;
  --za-panel:rgba(255,255,255,.035);
  --za-panel-strong:rgba(255,255,255,.055);
  --za-line:rgba(255,255,255,.105);
  --za-line-soft:rgba(255,255,255,.065);
  --za-text:#f4f7fb;
  --za-muted:#98a3b2;
  --za-cyan:#8cf7ff;
  --za-violet:#8f7cff;
  --za-lime:#d9ff75;
  --za-radius:24px;
  --za-radius-lg:34px;
  --za-shadow:0 34px 110px rgba(0,0,0,.28);
  --za-container:1420px;
}

html{background:var(--za-bg)}
body{
  background:
    radial-gradient(900px 580px at 88% -10%,rgba(140,247,255,.065),transparent 62%),
    radial-gradient(760px 520px at 4% 18%,rgba(143,124,255,.06),transparent 66%),
    linear-gradient(180deg,#07090d 0%,#0a0d12 48%,#07090d 100%);
  color:var(--za-text);
}
.container{width:min(100% - (var(--pad-desktop)*2),var(--za-container))}
.section{padding-block:clamp(92px,8.2vw,148px)}
.white-section,.dark-section{background:transparent!important}
.white-section::before,.dark-section::before{
  inset:14px clamp(10px,1.7vw,24px);
  border-color:var(--za-line-soft);
  border-radius:var(--za-radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.009));
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 24px 90px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
}

/* Header: less ornamental, more premium utility */
.site-header{height:84px}
.site-header .header-inner{
  height:60px;
  margin-top:12px;
  padding-inline:18px 10px;
  border-color:rgba(255,255,255,.09);
  background:rgba(7,9,13,.74);
  box-shadow:0 14px 44px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
}
.brand{font-size:13px;letter-spacing:.075em}
.brand::before{width:5px;height:5px;box-shadow:0 0 12px rgba(140,247,255,.7)}
.desktop-nav{background:transparent;border-color:transparent;gap:1px}
.desktop-nav a{font-size:11px;color:#aeb8c6;padding:9px 12px}
.desktop-nav a[aria-current="page"]{background:rgba(255,255,255,.055);color:#fff}
.desktop-nav a::after{inset-inline:30%;bottom:3px}
.header-actions .button-ai,.mobile-ai{
  background:rgba(140,247,255,.09);
  color:#dcfbff;
  border-color:rgba(140,247,255,.25);
  box-shadow:none;
}
.header-actions .button-ai:hover,.mobile-ai:hover{
  background:var(--za-cyan);color:#061014;border-color:var(--za-cyan);box-shadow:0 0 28px rgba(140,247,255,.14)
}

/* Type scale + interface language */
.eyebrow{font-size:9px;letter-spacing:.22em;color:var(--za-cyan);margin-bottom:20px}
.eyebrow::before{width:16px;opacity:.7}
h1{font-weight:560;letter-spacing:-.066em}
h2{font-weight:560;letter-spacing:-.052em}
h3{font-weight:590}
.large-copy,.hero-lead,.split-intro>p,.about-hero-lead,.team-page-lead,.insights-page-lead,.contact-page-lead{color:var(--za-muted)!important}
.button{min-height:50px;padding-inline:22px;font-size:13px}
.button-primary,.button-light{background:#f2f5f8;color:#080b0f}
.button-primary:hover,.button-light:hover{background:var(--za-cyan);color:#061014}
.button-outline,.button-dark-outline{border-color:rgba(255,255,255,.14);color:#eef3f8;background:rgba(255,255,255,.018)}
.button-outline:hover,.button-dark-outline:hover{border-color:rgba(140,247,255,.35);background:rgba(140,247,255,.05)}

/* Homepage hero: editorial personal-brand cover */
.hero{
  min-height:calc(100svh - 84px);
  padding-top:clamp(54px,6vw,88px);
  padding-bottom:clamp(72px,7vw,112px);
}
.hero::before{
  content:"ZAKARIA / 01";
  top:auto;bottom:4%;inset-inline-end:2.5vw;
  font-size:clamp(68px,13vw,205px);
  -webkit-text-stroke:1px rgba(255,255,255,.028);
  color:transparent;
  letter-spacing:-.075em;
}
.hero::after{
  background:
    linear-gradient(90deg,transparent 49.95%,rgba(255,255,255,.035) 50%,transparent 50.05%),
    radial-gradient(circle at 78% 42%,rgba(140,247,255,.08),transparent 28%),
    radial-gradient(circle at 28% 62%,rgba(143,124,255,.065),transparent 30%);
}
.hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);gap:clamp(48px,7vw,116px);align-items:center}
.hero-copy{padding-block:22px}
.hero-copy::before{
  content:"ZAKARIA AZIZA / PERSONAL BRAND";
  background:transparent;border:0;border-radius:0;padding:0;
  color:#657181;font-size:8px;letter-spacing:.23em;margin-bottom:24px;
}
html[lang="ar"] .hero-copy::before{content:"ZAKARIA AZIZA / PERSONAL BRAND";letter-spacing:.2em}
.hero-copy h1{font-size:clamp(58px,7vw,116px);line-height:.91;max-width:1040px;margin-bottom:32px}
.hero-lead{max-width:760px;font-size:16px;line-height:1.78;margin-bottom:32px}
.hero-copy .action-row{gap:12px}
.hero-media{
  height:min(70vw,690px);min-height:555px;
  border-radius:var(--za-radius-lg);
  border-color:rgba(255,255,255,.105);
  box-shadow:0 34px 110px rgba(0,0,0,.32),0 0 80px rgba(140,247,255,.055);
  overflow:hidden;
}
.hero-media::before{
  content:"ZA / PORTRAIT 01";
  top:16px;left:16px;
  padding:7px 10px;border-color:rgba(255,255,255,.1);background:rgba(7,9,13,.58);
  color:#b9c4d1;font-size:7px;letter-spacing:.18em;
}
html[dir="rtl"] .hero-media::before{left:auto;right:16px}
.hero-media::after{inset:0;border:0;border-radius:inherit;clip-path:none;background:linear-gradient(180deg,transparent 62%,rgba(6,8,12,.34));pointer-events:none}
.hero-media img{filter:grayscale(.93) contrast(1.035) brightness(.86);transform:scale(1.002)}
.hero-media:hover img{filter:grayscale(.55) contrast(1.035) brightness(.9);transform:scale(1.018)}

/* Proof + trust signal become one coherent information system */
.proof-strip{border-color:var(--za-line-soft);background:rgba(255,255,255,.008)}
.proof-grid{gap:0}
.proof-item{padding:30px 26px;border-color:var(--za-line-soft);position:relative}
.proof-item strong{font-size:clamp(24px,2.2vw,34px);font-weight:560;color:#f4f7fb}
.proof-item span{color:#7f8997;font-size:11px}
.credibility-strip{border-bottom:1px solid var(--za-line-soft)}
.credibility-inner{padding-block:24px!important}
.credibility-names{gap:0}
.credibility-names span{font-size:13px;color:#d8dee6;padding-inline:18px}

/* Canonical identity section — visible to humans and easy to extract by search/AI */
.entity-profile{padding-block:clamp(86px,8vw,132px)}
.entity-profile-grid{
  display:grid;grid-template-columns:minmax(180px,.68fr) minmax(0,1.8fr);gap:clamp(42px,8vw,132px);
  padding-top:34px;border-top:1px solid var(--za-line);
}
.entity-profile-index{display:flex;flex-direction:column;justify-content:space-between;min-height:290px;color:#667180}
.entity-profile-index>span:first-child{font-size:9px;letter-spacing:.22em;color:var(--za-cyan)}
.entity-profile-index strong{font-size:clamp(72px,9vw,144px);line-height:.78;font-weight:560;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18)}
.entity-profile-copy h2{font-size:clamp(42px,5vw,78px);max-width:1000px;margin-bottom:26px}
.entity-profile-copy .entity-answer{font-size:clamp(18px,1.6vw,23px);line-height:1.68;color:#c6cfda;max-width:950px;margin-bottom:34px}
.entity-profile-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.entity-profile-tags span{border:1px solid var(--za-line);border-radius:999px;padding:8px 12px;color:#8d98a7;font-size:10px;letter-spacing:.055em;text-transform:uppercase;background:rgba(255,255,255,.012)}
html[lang="ar"] .entity-profile-tags span{text-transform:none;letter-spacing:0;font-size:11px}
.entity-profile-link{display:inline-flex;align-items:center;gap:12px;color:#e7edf4;font-size:13px;font-weight:650}
.entity-profile-link .logical-arrow{color:var(--za-cyan)}

/* Homepage sections: less card-heavy, stronger rhythm */
.signature-reel-section,.ai-home-section{padding-block:clamp(82px,7vw,122px)}
.signature-reel-shell,.ai-quiet-grid{border-radius:var(--za-radius-lg)!important;border-color:var(--za-line)!important;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01))!important;box-shadow:var(--za-shadow)!important}
.motion-mosaic{gap:12px}
.motion-frame{border-radius:20px!important;border:1px solid var(--za-line-soft);overflow:hidden;background:#0a0d12}
.motion-work-label{background:linear-gradient(180deg,transparent,rgba(5,7,10,.9))!important}
.editorial-list,.insight-list{border-color:var(--za-line)}
.editorial-row,.insight-row{border-color:var(--za-line-soft)}
.editorial-row:hover,.insight-row:hover{background:rgba(140,247,255,.022)!important;padding-inline:14px!important}
.editorial-row h3{font-size:clamp(22px,2.1vw,30px)}
.editorial-row p{color:#8d98a7!important}
.leadership-home-media,.story-media{border-radius:var(--za-radius-lg);overflow:hidden;border:1px solid var(--za-line-soft)}
.leadership-current{background:rgba(140,247,255,.025);border-color:rgba(140,247,255,.23);color:#9ea9b8}
.founder-story blockquote{border-color:rgba(140,247,255,.18);color:#e7edf3}
.final-cta::before{border-radius:var(--za-radius-lg);border-color:var(--za-line);background:radial-gradient(circle at 80% 28%,rgba(140,247,255,.065),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01))}

/* General page heroes: make every page feel part of the same personal-brand system */
.page-hero,.about-hero,.team-page-hero,.insights-page-hero,.contact-page-hero,.privacy-hero{
  min-height:clamp(610px,76svh,840px);
  padding-top:clamp(74px,8vw,120px);
  padding-bottom:clamp(70px,7vw,110px);
}
.page-hero::after,.about-hero::after,.team-page-hero::after,.insights-page-hero::after,.contact-page-hero::after,.privacy-hero::after{
  width:560px;height:560px;inset-inline-end:-240px;top:8%;border-color:rgba(140,247,255,.055);box-shadow:0 0 0 90px rgba(143,124,255,.012),0 0 0 180px rgba(140,247,255,.008)
}
.page-hero h1,.about-hero h1,.team-page-hero h1,.insights-page-hero h1,.contact-page-hero h1,.privacy-hero h1{max-width:1060px}
.about-hero-media,.work-hero-media,.team-page-hero figure,.insights-page-hero figure{border-radius:var(--za-radius-lg);overflow:hidden;border:1px solid var(--za-line-soft)}
.about-name-entity{color:#8995a4;font-size:12px;letter-spacing:.08em}

/* About page: reference-profile facts */
.about-reference{padding-block:0 96px}
.about-reference-grid{
  display:grid;grid-template-columns:minmax(210px,.75fr) minmax(0,2fr);gap:clamp(38px,7vw,110px);
  border-top:1px solid var(--za-line);padding-top:30px
}
.about-reference-title{font-size:10px;letter-spacing:.2em;color:var(--za-cyan);text-transform:uppercase}
html[lang="ar"] .about-reference-title{text-transform:none;letter-spacing:0}
.about-reference-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--za-line-soft)}
.about-reference-facts div{padding:20px 0;border-bottom:1px solid var(--za-line-soft);display:grid;grid-template-columns:150px 1fr;gap:20px}
.about-reference-facts span{font-size:10px;color:#6f7a89;text-transform:uppercase;letter-spacing:.08em}
.about-reference-facts strong{font-size:14px;font-weight:560;color:#dfe6ee}
html[lang="ar"] .about-reference-facts span{text-transform:none;letter-spacing:0}
.about-chapter,.team-model-steps article,.team-role-list article,.team-responsibility-grid article,.contact-paths-grid article,.contact-proof-grid article,.privacy-quick-grid article{
  border-radius:18px!important;background:rgba(255,255,255,.018)!important;border-color:var(--za-line-soft)!important
}
.about-timeline::before{opacity:.4}
.about-year{-webkit-text-stroke:1px rgba(140,247,255,.22)!important}

/* Work: stronger project hierarchy, cinematic archive */
.work-project,.work-case,.portfolio-archive-card{border-color:var(--za-line-soft)!important}
.work-case-media,.project-media{border-radius:var(--za-radius);overflow:hidden;border:1px solid var(--za-line-soft);background:#0a0d12}
.work-case-media img,.project-media img{transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease}
.work-case-media:hover img,.project-media:hover img{transform:scale(1.025);filter:saturate(.92) contrast(1.02)}
.project-role{border-color:rgba(140,247,255,.18)!important}

/* Leadership: keep process, remove visual repetition after duplicate capability list is removed */
.team-structure-grid,.team-responsibility-grid,.team-staffing-grid{gap:clamp(42px,6vw,90px)}
.team-role-list article{padding:22px!important}
.team-split{padding-block:clamp(90px,8vw,138px)}
.team-split-note{color:#8b96a5}

/* Insights: editorial publication feel */
.insight-row{padding-block:30px}
.insight-row h3{font-size:clamp(24px,2.6vw,38px)}
.article-body{font-size:clamp(17px,1.35vw,20px);line-height:1.82}

/* Contact: calmer, more credible conversion surface */
.contact-paths-grid article,.contact-proof-grid article{box-shadow:none!important}
.contact-form-shell,.project-form{border-color:var(--za-line)!important;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012))!important;border-radius:var(--za-radius-lg)!important}

/* Footer */
.site-footer{padding-top:80px!important}
.footer-grid{border-top:1px solid var(--za-line);padding-top:28px}
.footer-grid strong{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.footer-grid span,.footer-grid nav,.footer-legal{color:#6f7a88}

/* Focus + accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--za-cyan)!important;outline-offset:4px!important}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 400px;gap:42px}
  .entity-profile-grid,.about-reference-grid{grid-template-columns:1fr;gap:32px}
  .entity-profile-index{min-height:auto;display:flex;flex-direction:row;align-items:end}
  .entity-profile-index strong{font-size:78px}
}

@media(max-width:980px){
  .container{width:min(100% - 48px,var(--za-container))}
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{height:min(82svh,760px);min-height:560px}
  .hero-copy h1{font-size:clamp(52px,10vw,92px)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .about-reference-facts{grid-template-columns:1fr}
}

@media(max-width:767px){
  .container{width:min(100% - 36px,var(--za-container))}
  .section{padding-block:82px}
  .site-header .header-inner{margin-top:10px;height:58px;padding-inline:14px 8px}
  .brand{font-size:11px}
  .hero{padding-top:48px;padding-bottom:76px}
  .hero::before{font-size:24vw;bottom:1.5%}
  .hero::after{background:radial-gradient(circle at 70% 32%,rgba(140,247,255,.07),transparent 32%),radial-gradient(circle at 12% 62%,rgba(143,124,255,.055),transparent 34%)}
  .hero-copy::before{margin-bottom:18px;font-size:7px}
  .hero-copy h1{font-size:clamp(44px,12vw,66px);line-height:.95;letter-spacing:-.058em}
  html[lang="ar"] .hero-copy h1{font-size:clamp(42px,11vw,62px);line-height:1.14}
  .hero-lead{font-size:15px;line-height:1.72}
  .hero-media{height:68svh;min-height:500px;border-radius:26px}
  .proof-item{padding:24px 16px}
  .credibility-names{display:flex;flex-wrap:wrap;gap:8px}
  .credibility-names span{padding:0;font-size:11px}
  .entity-profile{padding-block:78px}
  .entity-profile-grid{padding-top:24px}
  .entity-profile-index{display:none}
  .entity-profile-copy h2{font-size:clamp(38px,10vw,54px)}
  .entity-profile-copy .entity-answer{font-size:17px;line-height:1.7}
  .entity-profile-tags span{font-size:9px}
  .page-hero,.about-hero,.team-page-hero,.insights-page-hero,.contact-page-hero,.privacy-hero{min-height:auto;padding-block:90px 72px}
  .about-reference{padding-bottom:72px}
  .about-reference-facts div{grid-template-columns:1fr;gap:7px}
  .editorial-row:hover,.insight-row:hover{padding-inline:0!important;background:transparent!important}
  .footer-grid{padding-top:24px}
}

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

/* ============================================================
   V4 — LANGUAGE MENU
   One globe control, three explicit locale destinations.
   ============================================================ */
.language-switcher{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.language-button{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.025)!important;
  color:#cbd5df;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.language-button:hover,
.language-switcher.is-open .language-button{
  border-color:rgba(140,247,255,.34)!important;
  background:rgba(140,247,255,.07)!important;
  color:var(--za-cyan);
}
.language-button:active{transform:translateY(1px)}
.language-globe{width:19px;height:19px;display:block}
.language-menu{
  position:absolute;
  z-index:90;
  top:calc(100% + 12px);
  inset-inline-end:0;
  width:188px;
  padding:7px;
  display:grid;
  gap:3px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(9,12,17,.96);
  box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  direction:ltr;
}
.language-menu[hidden]{display:none!important}
.language-menu::before{
  content:"";
  position:absolute;
  top:-5px;
  inset-inline-end:14px;
  width:9px;
  height:9px;
  transform:rotate(45deg);
  border-left:1px solid rgba(255,255,255,.11);
  border-top:1px solid rgba(255,255,255,.11);
  background:#0a0d12;
}
.language-option{
  min-height:42px;
  padding:0 11px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#b9c3cf;
  font-size:12px;
  text-decoration:none;
  transition:background .16s ease,color .16s ease;
}
.language-option:hover,
.language-option:focus-visible{
  background:rgba(255,255,255,.055);
  color:#f6f9fb;
}
.language-option.is-current{
  background:rgba(140,247,255,.075);
  color:#effdff;
}
.language-option.is-current .language-name::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-inline-end:8px;
  border-radius:50%;
  background:var(--za-cyan);
  box-shadow:0 0 10px rgba(140,247,255,.7);
  vertical-align:middle;
}
.language-name{font-weight:560;white-space:nowrap}
.language-option[lang="ar"] .language-name{direction:rtl;unicode-bidi:isolate}
.language-code{
  color:#626d7a;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}
.language-option.is-current .language-code{color:#87a7ac}

@media(max-width:767px){
  .language-button{width:38px;min-width:38px;height:38px;border-radius:9px}
  .language-globe{width:18px;height:18px}
  .language-menu{width:176px;top:calc(100% + 10px)}
}