/* ============ Theme tokens ============
   Light values live in :root; [data-theme="dark"] overrides only what
   needs to differ. Brand blue/orange are brightened (not inverted) in
   dark mode to stay legible as text/gradient-text on a dark page while
   remaining recognizably the same brand. */
:root{
  --bg-page:#F4F5FC;
  --bg-page-alt:#EDEEF8;
  --bg-footer:#E2E3F0;
  --bg-surface:#FFFFFF;
  --bg-input:rgba(0,0,0,.03);
  --border-rgb:0,0,0;

  --text-primary:#111122;
  --text-secondary:#666680;
  --text-tertiary:#888899;
  --text-muted:#555566;
  --text-dim:#666688;
  --text-body:#444455;
  --text-quote:#333344;

  --brand-blue:#3B4FE4;
  --brand-blue-rgb:59,79,228;
  --brand-blue-light:#5B6FF8;
  --brand-blue-lighter:#8899FF;
  --brand-blue-2:#5262F2;
  --brand-purple:#7B5CF8;
  --brand-purple-rgb:123,59,228;
  --brand-orange:#E8441A;
  --brand-orange-rgb:232,68,26;
  --brand-orange-light:#FF6B40;

  --star-gold:#F0A030;
  --whatsapp-green:#25D366;
  --whatsapp-green-dark:#1A7A38;
  --stat-teal:#1AE49A;
  --stat-blue-2:#1A8BE4;
  --success-teal:#1AE4A0;
  --phone-icon:#F05530;

  --nav-bg-top:rgba(244,245,252,0);
  --nav-bg-scrolled:rgba(244,245,252,0.97);
  --mobile-menu-bg:rgba(244,245,252,.97);

  --blob-blue:rgba(59,79,228,.14);
  --blob-orange:rgba(232,68,26,.11);
  --blob-purple:rgba(123,59,228,.07);
  --quote-mark-bg:rgba(59,79,228,.06);
}

[data-theme="dark"]{
  --bg-page:#0B0C18;
  --bg-page-alt:#12142A;
  --bg-footer:#0E1020;
  --bg-surface:#171A33;
  --bg-input:rgba(255,255,255,.05);
  --border-rgb:255,255,255;

  --text-primary:#F2F3FA;
  --text-secondary:#A8ACC8;
  --text-tertiary:#82869E;
  --text-muted:#9498B5;
  --text-dim:#8F93AD;
  --text-body:#C7CAE0;
  --text-quote:#DADCF0;

  --brand-blue:#6472FF;
  --brand-blue-rgb:100,114,255;
  --brand-blue-light:#7C8CFF;
  --brand-blue-lighter:#A6B2FF;
  --brand-blue-2:#6E7DFF;
  --brand-purple:#9B8CFF;
  --brand-purple-rgb:155,140,255;
  --brand-orange:#FF7A52;
  --brand-orange-rgb:255,122,82;
  --brand-orange-light:#FF9466;

  --nav-bg-top:rgba(11,12,24,0);
  --nav-bg-scrolled:rgba(11,12,24,.92);
  --mobile-menu-bg:rgba(11,12,24,.97);

  --blob-blue:rgba(100,114,255,.22);
  --blob-orange:rgba(255,122,82,.18);
  --blob-purple:rgba(155,140,255,.16);
  --quote-mark-bg:rgba(100,114,255,.10);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-page);color:var(--text-primary);transition:background-color .25s ease,color .25s ease}
[data-lang="ar"]{font-family:'Tajawal',sans-serif}
[data-lang="en"]{font-family:'Outfit',sans-serif}
[data-lang="ar"] .en-only{display:none!important}
[data-lang="en"] .ar-only{display:none!important}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes floatX{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-rev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes slide-up{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes reel-up{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
@keyframes reel-down{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}
@keyframes img-cycle{0%,13%{opacity:1}19%,100%{opacity:0}}
@keyframes hero-line{0%{width:0;opacity:0}100%{width:80px;opacity:1}}
@keyframes word-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes dash-move{to{stroke-dashoffset:0}}
@keyframes dot-path-1{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes glow-pulse{0%,100%{opacity:.7;r:5}50%{opacity:1;r:7}}
@keyframes trail-fade{0%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@keyframes orbit-ccw{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes ticker{0%,100%{opacity:0;transform:translateY(8px)}15%,85%{opacity:1;transform:translateY(0)}}
@keyframes tl-fill{from{width:0}to{width:68%}}
@keyframes scan-line{0%{transform:translateX(-100%)}100%{transform:translateX(600%)}}
@keyframes badge-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes card-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(-2deg)}}
@keyframes card-float-2{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes card-float-3{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes blob-1{0%,100%{transform:translate(0,0) scale(1);border-radius:60% 40% 70% 30%/50% 60% 40% 70%}33%{transform:translate(60px,-40px) scale(1.08);border-radius:40% 60% 30% 70%/60% 40% 70% 30%}66%{transform:translate(-30px,50px) scale(.95);border-radius:70% 30% 50% 50%/30% 70% 60% 40%}}
@keyframes blob-2{0%,100%{transform:translate(0,0) scale(1);border-radius:50% 50% 40% 60%/60% 30% 70% 40%}33%{transform:translate(-50px,30px) scale(1.1);border-radius:30% 70% 60% 40%/40% 60% 30% 70%}66%{transform:translate(40px,-60px) scale(.92);border-radius:70% 30% 40% 60%/50% 70% 30% 50%}}
@keyframes blob-3{0%,100%{transform:translate(0,0) scale(1);border-radius:40% 60% 50% 50%/50% 40% 60% 50%}50%{transform:translate(35px,35px) scale(1.06);border-radius:60% 40% 30% 70%/40% 60% 70% 30%}}
@keyframes line-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes word-appear{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes counter-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mp-dot{animation:glow-pulse 2s ease-in-out infinite}
.mp-dot:nth-child(2){animation-delay:.7s}
.mp-dot:nth-child(3){animation-delay:1.4s}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}
.d4{transition-delay:.38s}.d5{transition-delay:.48s}.d6{transition-delay:.58s}

.nav-link{text-decoration:none;position:relative;transition:color .2s}
.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-orange));transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav-link:hover{color:var(--text-primary)!important}
.nav-link:hover::after{transform:scaleX(1)}

.svc-card{transition:transform .32s ease,box-shadow .32s ease;cursor:pointer}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 28px 80px rgba(0,0,0,.55)!important}
.svc-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.svc-card:hover .svc-img{transform:scale(1.07)}
.svc-over{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;background:linear-gradient(135deg,rgba(12,18,80,.93),rgba(100,20,0,.88))}
.svc-card:hover .svc-over{opacity:1}

.port-item{overflow:hidden;cursor:pointer}
.port-overlay{opacity:0;transition:opacity .3s ease}
.port-item:hover .port-overlay{opacity:1}
.port-thumb{transition:transform .45s ease}
.port-item:hover .port-thumb{transform:scale(1.07)}

.filter-btn{cursor:pointer;transition:all .2s ease;font-family:inherit}
.filter-btn.active{background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light))!important;color:#fff!important;border-color:transparent!important}
.filter-btn:not(.active):hover{border-color:var(--brand-blue)!important;color:var(--brand-blue)!important}

.btn-glow{transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.btn-glow:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(var(--brand-blue-rgb),.55)!important}
.btn-ghost{transition:all .2s ease;cursor:pointer}
.btn-ghost:hover{background:rgba(var(--brand-orange-rgb),.1)!important;border-color:var(--brand-orange)!important;color:var(--brand-orange)!important;transform:translateY(-3px)}

.social-ic{transition:transform .2s ease,opacity .2s ease}
.social-ic:hover{transform:translateY(-3px);opacity:1!important}

.wa-float{transition:transform .25s ease,box-shadow .25s ease}
.wa-float:hover{transform:translateY(-5px) scale(1.08);box-shadow:0 20px 60px rgba(37,211,102,.5)!important}

.team-card{transition:transform .3s ease,box-shadow .3s ease}
.team-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(var(--border-rgb),.12)}

input,textarea{outline:none;transition:border-color .2s,box-shadow .2s,background-color .25s ease,color .25s ease;font-family:inherit}
input:focus,textarea:focus{border-color:var(--brand-blue)!important;box-shadow:0 0 0 3px rgba(var(--brand-blue-rgb),.18)!important}

.show-mobile{display:none}
@media(max-width:768px){
  .show-mobile{display:flex!important}
  .hide-mobile{display:none!important}
  .hero-grid{flex-direction:column!important}
  .about-grid{flex-direction:column!important}
  .services-grid{grid-template-columns:1fr!important}
  .portfolio-grid{grid-template-columns:1fr 1fr!important}
  .team-grid{grid-template-columns:1fr 1fr!important}
  .contact-grid{grid-template-columns:1fr!important}
  .footer-grid{flex-direction:column!important;gap:40px!important}
  .stats-row{gap:24px!important}
}
@media(max-width:480px){
  .portfolio-grid{grid-template-columns:1fr!important}
  .team-grid{grid-template-columns:1fr!important}
  .filters-wrap{gap:8px!important}
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-page)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand-blue),var(--brand-orange));border-radius:3px}

/* Mobile menu — driven by .open class on #mobile-menu (js/main.js) */
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--mobile-menu-bg);backdrop-filter:blur(20px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.mobile-menu.open{display:flex}

/* Theme toggle — driven by data-theme on <html> (js/main.js) */
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(var(--border-rgb),.15);background:rgba(var(--border-rgb),.04);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;padding:0}
.theme-toggle:hover{border-color:var(--brand-blue);color:var(--brand-blue)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ============ Articles / blog ============ */
.article-card{transition:transform .3s ease,box-shadow .3s ease}
.article-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(var(--border-rgb),.12)}
.article-img{transition:transform .5s ease}
.article-card:hover .article-img{transform:scale(1.08)}

.featured-article{transition:box-shadow .3s ease}
.featured-article:hover{box-shadow:0 24px 60px rgba(var(--border-rgb),.14)}
.featured-article:hover .article-img{transform:scale(1.06)}

@media(max-width:768px){
  .articles-grid{grid-template-columns:1fr 1fr!important}
  .featured-grid{flex-direction:column!important}
}
@media(max-width:480px){
  .articles-grid{grid-template-columns:1fr!important}
}

/* Article page body copy — used only inside articles/*.html */
.article-body p{margin-bottom:22px}
.article-body h2{font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--text-primary);margin:40px 0 18px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-inline-start:22px}
.article-body li{margin-bottom:10px}
/* Links inside article text. Underlined rather than colour-only, so they stay
   identifiable without relying on colour alone. Both tokens are redefined under
   [data-theme="dark"], so dark mode needs no extra rule. */
.article-body a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.article-body a:hover{color:var(--brand-orange)}