/* Mohamed Radi Portfolio — Arabic Experience V25
   RTL-first typography, layout, hero, forms, projects, articles and mobile polish. */

:root{
  --ar25-cyan:#35e8ff;
  --ar25-cyan-soft:#8deeff;
  --ar25-green:#83ff79;
  --ar25-bg:#020a12;
  --ar25-panel:rgba(4,18,30,.84);
  --ar25-panel-strong:rgba(3,15,26,.94);
  --ar25-line:rgba(70,224,255,.18);
  --ar25-line-strong:rgba(70,224,255,.34);
  --ar25-text:#f2f9fc;
  --ar25-muted:#9eb5c3;
}

/* ---------- Arabic type system ---------- */
html[lang="ar"]{
  direction:rtl;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;
}
html[lang="ar"] body{
  direction:rtl;
  text-align:right;
  line-height:1.8;
  background:
    radial-gradient(900px 620px at 82% 10%,rgba(31,210,255,.06),transparent 68%),
    radial-gradient(780px 560px at 12% 38%,rgba(16,116,184,.05),transparent 68%),
    linear-gradient(180deg,#02080e 0%,#03101a 48%,#02080f 100%)!important;
}
html[lang="ar"] :is(h1,h2,h3,h4,p,li,a,button,label,strong,small,span){
  letter-spacing:0!important;
}
html[lang="ar"] :is(h1,h2,h3,h4){
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;
  text-wrap:balance;
}
html[lang="ar"] p,
html[lang="ar"] li{line-height:1.9}
html[lang="ar"] :is(code,kbd,pre,[data-ltr],.mr-v23-ltr,a[href^="tel:"],a[href^="mailto:"]){
  direction:ltr;
  unicode-bidi:isolate;
}

/* ---------- Header / navigation ---------- */
html[lang="ar"] .site-header{
  width:min(1360px,calc(100% - 34px))!important;
  min-height:72px!important;
  height:auto!important;
  padding:8px 14px 8px 12px!important;
  border-radius:18px!important;
  border-color:rgba(63,222,255,.16)!important;
  background:rgba(2,10,17,.82)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[lang="ar"] .site-header.is-scrolled{background:rgba(2,10,17,.94)!important}
html[lang="ar"] .brand{min-width:205px!important;gap:10px!important}
html[lang="ar"] .brand strong{font-size:14px!important;font-weight:800!important;letter-spacing:0!important}
html[lang="ar"] .brand small{font-size:9px!important;letter-spacing:0!important;color:#78e9f8!important}
html[lang="ar"] .site-nav{gap:2px!important;justify-content:center}
html[lang="ar"] .site-nav a{
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:0!important;
  padding:10px 10px!important;
  border-radius:9px!important;
}
html[lang="ar"] .site-nav a.is-active{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(53,232,255,.10),rgba(53,232,255,.035))!important;
  box-shadow:inset 0 -1px 0 var(--ar25-cyan)!important;
}
html[lang="ar"] .lang-switch{
  min-width:44px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(53,232,255,.28);border-radius:10px;
  color:var(--ar25-cyan)!important;font:800 11px/1 system-ui,sans-serif!important;
  background:rgba(4,20,32,.7);
}

/* ---------- Shared hero system ---------- */
html[lang="ar"] .page-hero{
  min-height:auto!important;
  padding:clamp(128px,11vw,158px) 0 clamp(58px,6vw,82px)!important;
  overflow:hidden!important;
  background:
    radial-gradient(720px 520px at 18% 48%,rgba(32,203,255,.095),transparent 68%),
    radial-gradient(620px 440px at 88% 14%,rgba(17,112,179,.06),transparent 72%),
    linear-gradient(135deg,#02080e,#03111c 62%,#02080f)!important;
}
html[lang="ar"] .page-hero:after{opacity:.16!important}
html[lang="ar"] .page-hero>.wrap:not(.page-hero__grid){max-width:1180px}
html[lang="ar"] .page-hero__grid{
  display:grid!important;
  grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr)!important;
  grid-template-areas:"visual copy"!important;
  align-items:center!important;
  gap:clamp(34px,5vw,72px)!important;
  width:min(1240px,calc(100% - 46px))!important;
}
html[lang="ar"] .page-hero__grid>.reveal:first-child{grid-area:copy;max-width:790px;justify-self:start}
html[lang="ar"] .page-hero__grid>.credential-core{grid-area:visual;justify-self:center}
html[lang="ar"] .page-kicker,
html[lang="ar"] .eyebrow{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  color:var(--ar25-cyan)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:0!important;
  margin-bottom:14px!important;
}
html[lang="ar"] .page-kicker:before,
html[lang="ar"] .eyebrow:before{
  content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--ar25-cyan),transparent)
}
html[lang="ar"] .page-hero h1,
html[lang="ar"] .case-hero h1{
  max-width:900px!important;
  margin:0!important;
  font-size:clamp(42px,5vw,68px)!important;
  line-height:1.18!important;
  letter-spacing:0!important;
  font-weight:850!important;
  color:#f7fbfd!important;
}
html[lang="ar"] .page-hero p,
html[lang="ar"] .case-hero p{
  max-width:780px!important;
  margin:22px 0 0!important;
  color:#a9bdc9!important;
  font-size:clamp(16px,1.55vw,19px)!important;
  line-height:1.95!important;
}
html[lang="ar"] .page-hero .hero-actions{margin:28px 0 0!important}
html[lang="ar"] .btn{
  min-height:48px!important;
  border-radius:11px!important;
  padding:0 19px!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
html[lang="ar"] .credential-core:not(.v19-stage){
  width:250px!important;height:250px!important;margin:0!important;
  border:1px solid rgba(53,232,255,.18)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(53,232,255,.13),transparent 36%),
    rgba(3,15,25,.52)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 0 45px rgba(53,232,255,.035)!important;
}
html[lang="ar"] .credential-core:not(.v19-stage) strong{font-size:74px!important}
html[lang="ar"] .credential-core:not(.v19-stage) span{bottom:23%!important;font-size:8px!important;letter-spacing:.08em!important}

/* ---------- Arabic homepage hero: clean portrait-first composition ---------- */
html[lang="ar"] body[data-page="home"] .page-hero-v22{
  padding:clamp(118px,9vw,144px) 0 46px!important;
  min-height:auto!important;
  overflow:hidden!important;
  background:
    radial-gradient(760px 560px at 19% 44%,rgba(28,206,255,.10),transparent 65%),
    linear-gradient(125deg,#02080e,#03111b 64%,#02080e)!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .page-hero__grid{
  grid-template-columns:minmax(480px,.94fr) minmax(520px,1.06fr)!important;
  grid-template-areas:"stage copy"!important;
  gap:clamp(42px,5vw,76px)!important;
  width:min(1360px,calc(100% - 54px))!important;
  align-items:center!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .page-hero__grid>.reveal:first-child{
  grid-area:copy!important;
  max-width:680px!important;
  align-self:center!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 h1{
  font-size:clamp(48px,5.15vw,72px)!important;
  line-height:1.16!important;
  max-width:680px!important;
  margin:0!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 p{
  max-width:650px!important;
  font-size:17px!important;
  line-height:1.95!important;
  margin-top:22px!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-stage{
  grid-area:stage!important;
  width:100%!important;
  max-width:590px!important;
  min-height:650px!important;
  height:650px!important;
  margin:0!important;
  justify-self:end!important;
  overflow:hidden!important;
  direction:ltr!important;
  border:1px solid rgba(53,232,255,.20)!important;
  border-radius:28px!important;
  background:#020b13!important;
  box-shadow:0 34px 90px rgba(0,0,0,.34),0 0 55px rgba(35,205,255,.045),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-scene{
  inset:0!important;
  transform:none!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-scene:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  left:0!important;top:0!important;width:auto!important;aspect-ratio:auto!important;
  z-index:4!important;
  border-radius:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(to top,rgba(1,8,14,.34),transparent 33%),
    linear-gradient(90deg,rgba(1,8,14,.10),transparent 16%,transparent 84%,rgba(1,8,14,.12))!important;
  filter:none!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-scene:after{
  content:""!important;
  position:absolute!important;inset:auto 0 0!important;height:22%!important;z-index:5!important;
  background:linear-gradient(to top,rgba(1,8,14,.30),transparent)!important;
  transform:none!important;filter:none!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .v22-art-shell{
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  transform:none!important;
  z-index:2!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 .v22-art{
  display:block!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  object-position:50% 33%!important;
  transform:none!important;
  filter:saturate(.98) contrast(1.025) brightness(.99)!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
html[lang="ar"] body[data-page="home"] .page-hero-v22 :is(.v19-network,.v19-orbit,.v21-cyber-globe,.v19-logo-orb,.v19-proof-cluster,.v19-brand-note,.v19-side-words,.v19-scan,.v22-art-hud,.v22-art-scan){
  display:none!important;
}

/* ---------- Sections / cards ---------- */
html[lang="ar"] .section{padding:clamp(78px,8vw,112px) 0!important}
html[lang="ar"] .section-heading{max-width:850px!important;margin-bottom:34px!important}
html[lang="ar"] .section-heading>span{
  color:var(--ar25-cyan)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
html[lang="ar"] .section-heading h2{
  margin:10px 0 14px!important;
  font-size:clamp(34px,4.3vw,58px)!important;
  line-height:1.22!important;
  letter-spacing:0!important;
}
html[lang="ar"] .section-heading p{font-size:16px!important;line-height:1.9!important;color:#a5bbc8!important}
html[lang="ar"] :is(.ar-feature-card,.service-card,.visual-service-card,.verified-card,.verification-card,.credential-card,.achievement-card,.story-card,.identity-card,.contact-method,.qr-card,.social-node,.seo-intent-card,.gateway-card,.insight-card,.project-panel--premium){
  text-align:right!important;
  border-radius:18px!important;
  border-color:var(--ar25-line)!important;
  background:linear-gradient(145deg,rgba(5,21,34,.84),rgba(2,11,19,.92))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
html[lang="ar"] :is(.ar-feature-card,.service-card,.verified-card,.verification-card,.credential-card,.seo-intent-card) :is(h3,strong){line-height:1.45!important}
html[lang="ar"] :is(.ar-feature-card,.service-card,.verified-card,.verification-card,.credential-card,.seo-intent-card) p{line-height:1.85!important}
html[lang="ar"] .ar-feature-card strong{color:var(--ar25-cyan)!important}
html[lang="ar"] .verified-card__body small,
html[lang="ar"] .verified-card__visual>span,
html[lang="ar"] .visual-proof-label{
  letter-spacing:0!important;
  text-transform:none!important;
}
html[lang="ar"] .verified-card__actions{justify-content:flex-start!important}
html[lang="ar"] .contact-cta__inner{
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(5,23,37,.92),rgba(3,13,23,.94))!important;
}
html[lang="ar"] .contact-cta__inner h2{line-height:1.35!important}

/* ---------- Forms / selectors ---------- */
html[lang="ar"] :is(input,textarea,select){
  direction:rtl;
  text-align:right;
  border-radius:11px!important;
}
html[lang="ar"] :is(input[type="email"],input[type="url"],input[type="tel"]){direction:ltr;text-align:left}
html[lang="ar"] :is(.configurator-form,.universe-console,.global-projects-console){direction:rtl}
html[lang="ar"] :is(.universe-console,.global-projects-console){
  gap:10px!important;
  border-radius:16px!important;
  border-color:var(--ar25-line)!important;
  background:rgba(3,15,26,.84)!important;
}
html[lang="ar"] :is(.universe-console,.global-projects-console) :is(input,select,button){min-height:46px!important}
html[lang="ar"] .project-modal__panel{text-align:right!important;direction:rtl!important}
html[lang="ar"] .project-modal__meta,
html[lang="ar"] .project-modal__tags{justify-content:flex-start!important}

/* ---------- Arabic article reading experience ---------- */
html[lang="ar"] .seo-article-hero{
  padding:clamp(120px,11vw,154px) 0 48px!important;
  background:radial-gradient(760px 480px at 82% 24%,rgba(39,213,255,.075),transparent 70%)!important;
}
html[lang="ar"] .seo-article-hero__inner{max-width:1040px!important}
html[lang="ar"] .seo-article-hero h1{
  max-width:940px!important;
  font-size:clamp(38px,5vw,64px)!important;
  line-height:1.22!important;
  letter-spacing:0!important;
}
html[lang="ar"] .seo-article-hero p{font-size:18px!important;line-height:1.95!important}
html[lang="ar"] .seo-article-meta span{letter-spacing:0!important;text-transform:none!important;font-size:11px!important}
html[lang="ar"] .seo-article-layout{
  grid-template-columns:minmax(0,1fr) 290px!important;
  gap:48px!important;
  align-items:start!important;
}
html[lang="ar"] .seo-article{max-width:850px!important}
html[lang="ar"] .seo-article h2{font-size:clamp(28px,3vw,40px)!important;line-height:1.35!important}
html[lang="ar"] .seo-article h3{font-size:23px!important;line-height:1.5!important}
html[lang="ar"] .seo-article :is(p,li){font-size:17px!important;line-height:2!important;color:#bacbd6!important}
html[lang="ar"] .seo-answer-box,
html[lang="ar"] .seo-article-aside{border-radius:16px!important;background:linear-gradient(145deg,rgba(5,22,36,.90),rgba(2,12,21,.94))!important}
html[lang="ar"] .seo-article-aside a{line-height:1.65!important}
html[lang="ar"] .seo-related-grid a{line-height:1.65!important}
html[lang="ar"] .seo-discovery-strip__inner{direction:rtl}
html[lang="ar"] .seo-discovery-strip__links{justify-content:flex-start!important}

/* ---------- Social / credentials ---------- */
html[lang="ar"] .social-node{text-align:right!important}
html[lang="ar"] .social-node__sig{direction:ltr;unicode-bidi:isolate;text-align:left}
html[lang="ar"] .footer-social-mini{direction:ltr}
html[lang="ar"] .credential-dashboard-card,
html[lang="ar"] .credential-poster-card,
html[lang="ar"] .credential-roadmap-card{direction:rtl;text-align:right}

/* ---------- Footer ---------- */
html[lang="ar"] .site-footer{background:rgba(2,9,16,.90)!important}
html[lang="ar"] .footer-grid{
  grid-template-columns:1.25fr .75fr .85fr!important;
  gap:36px!important;
  text-align:right!important;
}
html[lang="ar"] .footer-brand span{letter-spacing:0!important;font-size:10px!important}
html[lang="ar"] .footer-links,
html[lang="ar"] .footer-contact{font-size:13px!important}
html[lang="ar"] .footer-bottom{letter-spacing:0!important;font-size:10px!important}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  html[lang="ar"] .site-header{width:min(100% - 20px,980px)!important}
  html[lang="ar"] .page-hero__grid,
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .page-hero__grid{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "visual"!important;
    width:min(860px,calc(100% - 34px))!important;
    gap:28px!important;
  }
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .page-hero__grid{grid-template-areas:"copy" "stage"!important}
  html[lang="ar"] .page-hero__grid>.credential-core{grid-area:visual!important;margin-top:6px!important}
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-stage{
    grid-area:stage!important;
    width:min(100%,620px)!important;
    max-width:620px!important;
    justify-self:center!important;
  }
  html[lang="ar"] .footer-grid{grid-template-columns:1fr 1fr!important}
  html[lang="ar"] .footer-brand{grid-column:1/-1}
}

@media(max-width:760px){
  html[lang="ar"] .site-header{
    top:8px!important;min-height:62px!important;padding:6px 8px 6px 10px!important;border-radius:14px!important;
  }
  html[lang="ar"] .brand{min-width:0!important}
  html[lang="ar"] .brand img{width:42px!important;height:42px!important}
  html[lang="ar"] .brand span{display:grid!important}
  html[lang="ar"] .brand strong{font-size:11px!important}
  html[lang="ar"] .brand small{font-size:7px!important}
  html[lang="ar"] .lang-switch{min-width:40px;height:38px}
  html[lang="ar"] .menu-button{width:40px!important;height:38px!important;border-radius:10px!important}
  html[lang="ar"] .mobile-menu{align-items:stretch!important;padding:86px 24px 34px!important;justify-content:flex-start!important;gap:5px!important;text-align:right!important}
  html[lang="ar"] .mobile-menu>a{font-size:25px!important;padding:8px 4px!important}
  html[lang="ar"] .mobile-menu__close{right:auto!important;left:20px!important;top:18px!important}
  html[lang="ar"] .mobile-menu__contact{flex-direction:column!important;gap:8px!important;margin-top:16px!important;align-items:flex-start!important}

  html[lang="ar"] .page-hero{padding:100px 0 48px!important}
  html[lang="ar"] .page-hero__grid,
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .page-hero__grid{
    width:calc(100% - 24px)!important;
    gap:22px!important;
  }
  html[lang="ar"] .page-hero h1,
  html[lang="ar"] .case-hero h1{font-size:clamp(36px,10vw,50px)!important;line-height:1.24!important}
  html[lang="ar"] .page-hero p,
  html[lang="ar"] .case-hero p{font-size:15px!important;line-height:1.9!important;margin-top:16px!important}
  html[lang="ar"] .page-hero .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:22px!important}
  html[lang="ar"] .page-hero .hero-actions .btn{width:100%!important;padding:0 12px!important}
  html[lang="ar"] .credential-core:not(.v19-stage){width:205px!important;height:205px!important}

  html[lang="ar"] body[data-page="home"] .page-hero-v22{padding:96px 0 32px!important}
  html[lang="ar"] body[data-page="home"] .page-hero-v22 h1{font-size:clamp(38px,11.8vw,54px)!important;line-height:1.2!important}
  html[lang="ar"] body[data-page="home"] .page-hero-v22 p{font-size:15px!important;line-height:1.9!important}
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-stage{
    min-height:450px!important;height:450px!important;max-width:none!important;border-radius:20px!important;
  }
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .v22-art{object-position:50% 30%!important}

  html[lang="ar"] .section{padding:68px 0!important}
  html[lang="ar"] .section-heading{margin-bottom:26px!important}
  html[lang="ar"] .section-heading h2{font-size:clamp(31px,9vw,43px)!important;line-height:1.28!important}
  html[lang="ar"] .section-heading p{font-size:15px!important}
  html[lang="ar"] .seo-article-hero{padding:100px 0 36px!important}
  html[lang="ar"] .seo-article-hero h1{font-size:clamp(34px,10vw,48px)!important;line-height:1.28!important}
  html[lang="ar"] .seo-article-layout{grid-template-columns:1fr!important;gap:24px!important}
  html[lang="ar"] .seo-article :is(p,li){font-size:16px!important;line-height:1.95!important}
  html[lang="ar"] .seo-article-aside{position:static!important}
  html[lang="ar"] :is(.universe-console,.global-projects-console){display:grid!important;grid-template-columns:1fr!important}
  html[lang="ar"] .footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  html[lang="ar"] .footer-brand{grid-column:auto}
  html[lang="ar"] .footer-bottom{align-items:flex-start!important;gap:8px!important}
}

@media(max-width:430px){
  html[lang="ar"] .brand span{display:none!important}
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .v19-stage{min-height:410px!important;height:410px!important}
  html[lang="ar"] body[data-page="home"] .page-hero-v22 .v22-art{object-position:50% 28%!important}
  html[lang="ar"] .page-hero .hero-actions{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){
  html[lang="ar"] *{scroll-behavior:auto!important}
}