/* ============================================================
   AMWAJ ALTAQA — Design System
   Signature: the brochure's diagonal navy/gold cut, reborn as a
   living "sun-arc" motif that recurs at every section seam —
   echoing the rays in the company mark.
   ============================================================ */

:root{
  /* ---- Palette --------------------------------------------- */
  --navy-900:#071226;
  --navy-800:#0B1E38;
  --navy-700:#12294A;
  --navy-600:#1B3A63;
  --sky-500:#1E88C7;
  --sky-400:#2AA9E0;
  --sky-300:#7CCBEE;
  --gold-600:#C98A12;
  --gold-500:#F2B90C;
  --gold-400:#FBD24D;
  --paper-0:#FFFFFF;
  --paper-50:#F7F9FC;
  --paper-100:#EEF2F8;
  --ink-900:#0B1018;
  --ink-700:#334155;
  --ink-500:#475569;
  --ink-400:#64748B;
  --line:#E3E9F2;

  --bg: var(--paper-50);
  --bg-elevated: var(--paper-0);
  --text: var(--ink-900);
  --text-soft: var(--ink-700);
  --text-mute: var(--ink-500);
  --border: var(--line);
  --nav-bg: rgba(255,255,255,.78);
  --card-bg: var(--paper-0);
  --footer-bg: var(--navy-900);
  --footer-text: #C7D3E6;

  /* ---- Type --------------------------------------------------*/
  --f-display:'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --f-body:'IBM Plex Sans Arabic','Cairo', sans-serif;

  /* ---- Scale ---------------------------------------------- */
  --step--1: clamp(.83rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5:  clamp(3rem, 2.2rem + 3.6vw, 5rem);

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-1: 0 2px 10px rgba(11,30,56,.06);
  --shadow-2: 0 18px 50px -20px rgba(11,30,56,.28);
  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: .7s;
}

[data-theme="dark"]{
  --bg:#081326;
  --bg-elevated:#0E1B33;
  --text:#F0F6FF;
  --text-soft:#C5D4EA;
  --text-mute:#9DB0CC;
  --border:#1C2E4A;
  --nav-bg: rgba(8,19,38,.72);
  --card-bg:#0E1B33;
  --footer-bg:#050D1B;
  --footer-text:#B0C2DE;
}

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

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow-x:hidden;
}
html[dir="rtl"] body{font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;}
html[dir="ltr"] body{font-family:'IBM Plex Sans','Cairo',sans-serif;}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit;}

.container{width:min(1200px, 92%); margin-inline:auto;}
.container-narrow{width:min(880px, 92%); margin-inline:auto;}

section{position:relative; padding-block: clamp(64px, 9vw, 128px);}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:var(--step-5);}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);}
p{color:var(--text-soft); margin:0 0 1em;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--step--1); font-weight:800; letter-spacing:.06em;
  color:var(--gold-600); text-transform:uppercase;
  margin-bottom:14px;
}
[dir="rtl"] .eyebrow{text-transform:none;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold-500); display:inline-block; border-radius:2px;}

.section-head{max-width:680px; margin-bottom:52px;}
.section-head.center{margin-inline:auto; text-align:center;}

/* ---- Buttons ------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; font-weight:700; font-size:var(--step--1);
  border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-gold{background:linear-gradient(135deg, var(--gold-400), var(--gold-600)); color:var(--navy-900); box-shadow:0 10px 30px -10px rgba(242,185,12,.55);}
.btn-gold:hover{transform:translateY(-3px); box-shadow:0 16px 36px -12px rgba(242,185,12,.65);}
.btn-outline{border-color:rgba(255,255,255,.4); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12); transform:translateY(-3px);}
.btn-navy{background:var(--navy-800); color:#fff;}
.btn-navy:hover{background:var(--navy-700); transform:translateY(-3px);}
.btn-ghost{border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--sky-400); color:var(--sky-500);}
.btn-block{width:100%;}

/* ---- Nav ------------------------------------------------------ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  background:var(--nav-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-color:var(--border); box-shadow:var(--shadow-1);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:96px; gap:24px;}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:800; font-size:1.1rem;}
.brand img{width:64px; height:64px; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:var(--step--1); font-weight:600; color:var(--text-soft); position:relative; padding:6px 0;}
.nav-links a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--gold-500); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);}
[dir="ltr"] .nav-links a::after{transform-origin:left;}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; background:var(--bg-elevated);
  color:var(--text); transition:border-color .25s, transform .25s;
}
.icon-btn:hover{border-color:var(--sky-400); transform:translateY(-2px);}
.lang-toggle{font-weight:700; font-size:.78rem;}
.burger{display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--border); align-items:center; justify-content:center; background:var(--bg-elevated);}
.burger span, .burger span::before, .burger span::after{content:""; display:block; width:18px; height:2px; background:var(--text); position:relative; transition:.3s;}
.burger span::before{position:absolute; top:-6px;}
.burger span::after{position:absolute; top:6px;}

.mobile-panel{
  position:fixed; inset:96px 0 0 0; background:var(--bg); z-index:999;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:.35s var(--ease);
  padding:30px 0; overflow:auto;
}
.mobile-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-panel a{display:block; padding:16px 0; font-size:1.2rem; font-weight:700; border-bottom:1px solid var(--border);}

/* ---- Hero ------------------------------------------------------ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:
    linear-gradient(180deg, rgba(7,18,38,.86), rgba(7,18,38,.93) 55%, var(--navy-900) 100%),
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(18,41,74,.4), transparent 60%),
    url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=900&q=70') center/cover no-repeat;
  color:#fff; overflow:hidden; padding-top:120px;
}
.hero-glow{position:absolute; top:12%; left:50%; translate:-50% -50%; width:640px; height:640px; background:radial-gradient(circle, rgba(30,136,199,.45), transparent 68%); filter:blur(10px); z-index:0;}
.hero-inner{position:relative; z-index:2; text-align:center; max-width:900px; margin-inline:auto;}
.hero h1{font-size:var(--step-5); color:#fff; margin-bottom:.4em;}
.hero h1 .accent{background:linear-gradient(100deg, var(--gold-400), var(--sky-300)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lede{font-size:var(--step-1); color:#D8E3F4; max-width:640px; margin-inline:auto 40px;}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:56px;}
.hero-stats{display:flex; gap:0; justify-content:center; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); padding-top:34px; max-width:820px; margin-inline:auto;}
.hero-stats .stat{flex:1; min-width:150px; text-align:center; padding-inline:16px; border-inline-start:1px solid rgba(255,255,255,.14);}
.hero-stats .stat:first-child{border-inline-start:none;}
.hero-stats .num{font-family:var(--f-display); font-weight:800; font-size:var(--step-3); color:var(--gold-400); display:block;}
.hero-stats .lbl{font-size:var(--step--1); color:#B0C2DE;}
.scroll-cue{position:absolute; bottom:26px; left:50%; translate:-50% 0; z-index:2; color:#B0C2DE; font-size:.78rem; display:flex; flex-direction:column; align-items:center; gap:8px;}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(#F2B90C, transparent); animation:cueMove 1.8s infinite;}
@keyframes cueMove{0%{opacity:0; transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0; transform:translateY(10px);}}

/* ---- Reveal --------------------------------------------------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);}
.reveal.in{opacity:1; transform:none;}
.stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---- Diagonal seam (signature) --------------------------------- */
.seam{position:relative; height:120px; margin-block:-1px;}
.seam svg{position:absolute; inset:0; width:100%; height:100%;}
.seam-navy-up{background:var(--navy-900);}

/* ---- About / split ---------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about-media{position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:4/5;}
.about-media img{width:100%; height:100%; object-fit:cover;}
.badge-float{
  position:absolute; bottom:22px; inset-inline-start:22px; background:var(--bg-elevated); color:var(--text);
  border-radius:var(--radius-m); padding:18px 22px; box-shadow:var(--shadow-2); display:flex; align-items:center; gap:14px; max-width:260px;
}
.badge-float .ico{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); display:flex; align-items:center; justify-content:center; flex:none;}
.value-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px;}
.value-item{padding:20px; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--card-bg);}
.value-item h4{font-size:1rem; margin-bottom:.3em;}
.value-item p{font-size:var(--step--1); margin:0; color:var(--text-mute);}

/* ---- Cards grid --------------------------------------------------- */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:36px 30px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-2); border-color:transparent;}
.card .ico{
  width:58px; height:58px; border-radius:16px; margin-bottom:22px;
  background:linear-gradient(135deg, var(--sky-400), var(--navy-700));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.card h3{font-size:1.2rem; margin-bottom:.4em;}
.card p{font-size:var(--step--1); margin:0;}
.card .tag{position:absolute; top:26px; inset-inline-end:28px; font-family:var(--f-display); font-weight:800; font-size:2rem; color:var(--border); z-index:0;}

/* Why-us row */
.why-row{display:flex; gap:20px; align-items:flex-start; padding:26px 0; border-bottom:1px solid var(--border);}
.why-row:last-child{border-bottom:none;}
.why-num{font-family:var(--f-display); font-weight:800; font-size:1.3rem; color:var(--gold-600); flex:none; width:46px;}

/* ---- Solutions tabs --------------------------------------------- */
.tabs{display:flex; gap:10px; justify-content:center; margin-bottom:44px; flex-wrap:wrap;}
.tab-btn{padding:12px 26px; border-radius:100px; border:1px solid var(--border); background:var(--card-bg); font-weight:700; font-size:var(--step--1); color:var(--text-soft); transition:.3s;}
.tab-btn.active{background:var(--navy-800); color:#fff; border-color:var(--navy-800);}
.tab-panel{display:none;}
.tab-panel.active{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.solution-diagram{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-l); padding:30px;}
.flow{display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center;}
.flow-node{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px 18px; text-align:center; font-size:.82rem; font-weight:700; min-width:110px;}
.flow-arrow{width:34px; height:2px; background:var(--gold-500); position:relative; margin-inline:4px;}
.flow-arrow::after{content:""; position:absolute; inset-inline-end:-1px; top:-3px; border:4px solid transparent; border-inline-start-color:var(--gold-500);}
[dir="rtl"] .flow-arrow::after{border-inline-start-color:transparent; border-inline-end-color:var(--gold-500);}
.solution-points{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.solution-points li{display:flex; gap:10px; align-items:flex-start; font-size:var(--step--1); color:var(--text-soft);}

/* ---- Projects ------------------------------------------------- */
.filters{display:flex; gap:10px; justify-content:center; margin-bottom:38px; flex-wrap:wrap;}
.filter-btn{padding:10px 22px; border-radius:100px; border:1px solid var(--border); background:transparent; font-weight:600; font-size:.85rem; color:var(--text-mute); transition:.25s;}
.filter-btn.active, .filter-btn:hover{background:var(--navy-800); color:#fff; border-color:var(--navy-800);}
.proj-card{border-radius:var(--radius-l); overflow:hidden; position:relative; background:var(--card-bg); box-shadow:var(--shadow-1); transition:transform .4s var(--ease), box-shadow .4s var(--ease); display:block;}
.proj-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-2);}
.proj-img-wrap{position:relative; aspect-ratio:4/3; overflow:hidden;}
.proj-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.proj-card:hover img{transform:scale(1.08);}
.proj-tag{position:absolute; top:14px; inset-inline-start:14px; background:rgba(7,18,38,.88); color:var(--gold-400); font-size:.72rem; font-weight:700; padding:6px 14px; border-radius:100px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); letter-spacing:.02em;}
.proj-info{padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.proj-info h4{color:var(--text); margin:0; font-size:1rem; line-height:1.4; font-weight:700;}
.proj-arrow{flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-mute); transition:.35s var(--ease);}
.proj-card:hover .proj-arrow{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); transform:translateX(var(--arrow-x,0)) rotate(var(--arrow-r,0));}
[dir="rtl"] .proj-card{--arrow-x:-4px; --arrow-r:-45deg;}
[dir="ltr"] .proj-card{--arrow-x:4px; --arrow-r:0deg;}
.proj-card [data-lucide="arrow-left"]{width:16px; height:16px;}
.proj-card[hidden]{display:none;}

/* ---- Stats band --------------------------------------------- */
.stats-band{background:var(--navy-900); color:#fff; padding-block:70px;}
.stats-band .grid-4{gap:20px;}
.stat-box{text-align:center;}
.stat-box .num{font-family:var(--f-display); font-weight:800; font-size:var(--step-4); color:var(--gold-400);}
.stat-box .lbl{color:#B0C2DE; font-size:var(--step--1);}

/* ---- Testimonials ----------------------------------------- */
.testi-track{overflow:hidden; position:relative;}
.testi-slide{display:none; text-align:center; max-width:760px; margin-inline:auto; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-l); padding:48px 44px; box-shadow:var(--shadow-1); position:relative;}
.testi-slide.active{display:block; animation:fadeUp .6s var(--ease);}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.testi-slide::before{content:"\201C"; position:absolute; top:10px; inset-inline-start:28px; font-size:5rem; font-family:var(--f-display); color:var(--gold-400); opacity:.22; line-height:1;}
.testi-slide .stars{color:var(--gold-500); font-size:1.2rem; margin-bottom:18px; letter-spacing:3px;}
.testi-slide p{font-size:var(--step-1); color:var(--text); font-style:normal; line-height:1.85; position:relative; z-index:1;}
.testi-author{margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.testi-author b{font-family:var(--f-display); font-size:1.1rem;}
.testi-author span{color:var(--text-mute); font-size:var(--step--1);}
.testi-dots{display:flex; gap:8px; justify-content:center; margin-top:34px;}
.testi-dots button{width:9px; height:9px; border-radius:50%; background:var(--border); border:none; padding:0; cursor:pointer; transition:.3s;}
.testi-dots button:hover{background:var(--text-mute);}
.testi-dots button.active{background:var(--gold-500); width:26px; border-radius:5px; transition:.3s;}

/* ---- FAQ ------------------------------------------------- */
.faq-item{border:1px solid var(--border); border-radius:var(--radius-m); margin-bottom:12px; overflow:hidden; transition:border-color .3s, box-shadow .3s; background:var(--card-bg);}
.faq-item:hover{border-color:var(--gold-400);}
.faq-item.open{border-color:var(--gold-400); box-shadow:var(--shadow-1);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:none; border:none; text-align:start; font-size:1.05rem; font-weight:700; color:var(--text); cursor:pointer;}
.faq-q .plus{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative; transition:.35s; background:var(--bg);}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--text); transition:.35s;}
.faq-q .plus::before{width:14px; height:2px;}
.faq-q .plus::after{width:2px; height:14px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg); background:var(--gold-500); border-color:var(--gold-500);}
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{background:var(--navy-900);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-a p{padding:0 24px 22px; margin:0; color:var(--text-mute); line-height:1.8;}


/* ---- Contact --------------------------------------------- */
.contact-wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:50px; align-items:start;}
.contact-info-card{background:var(--navy-900); color:#fff; border-radius:var(--radius-l); padding:38px; position:relative; overflow:hidden;}
.contact-info-card h3{color:#fff;}
.contact-row{display:flex; gap:14px; align-items:center; margin-bottom:20px;}
.contact-row .ico{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-row a, .contact-row span{color:#DCE7F5; font-size:var(--step--1);}
.social-row{display:flex; gap:10px; margin-top:26px;}
.social-row a{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:.3s;}
.social-row a:hover{background:var(--gold-500); color:var(--navy-900);}
.form-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-l); padding:38px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.82rem; font-weight:700; color:var(--text-soft);}
.field input, .field select, .field textarea{
  padding:14px 16px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:.95rem; transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--sky-400);}
.map-frame{border-radius:var(--radius-l); overflow:hidden; margin-top:26px; border:1px solid var(--border); height:280px;}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.15);}

/* ---- Footer --------------------------------------------- */
.footer{background:var(--footer-bg); color:var(--footer-text); padding-block:70px 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:50px;}
.footer h5{color:#fff; font-family:var(--f-display); font-size:1rem; margin-bottom:18px;}
.footer ul li{margin-bottom:12px;}
.footer ul a{font-size:.9rem; color:var(--footer-text); transition:color .25s;}
.footer ul a:hover{color:var(--gold-400);}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand img{width:44px;}
.footer-brand span{font-family:var(--f-display); font-weight:800; color:#fff; font-size:1.1rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem;}
.footer-bottom a{color:var(--gold-400); font-weight:700;}

/* ---- Loader ------------------------------------------------ */
#loader{position:fixed; inset:0; z-index:9999; background:var(--navy-900); display:flex; align-items:center; justify-content:center; transition:opacity .6s var(--ease), visibility .6s; animation:loaderFallback .6s ease 4s forwards;}
#loader.hide{opacity:0; visibility:hidden;}
@keyframes loaderFallback{to{opacity:0; visibility:hidden;}}
.loader-sun{width:70px; height:70px; position:relative;}
.loader-sun span{position:absolute; inset:0; border-radius:50%; border:3px solid transparent; border-top-color:var(--gold-500); border-inline-end-color:var(--sky-400); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* WhatsApp float */
.wa-float{position:fixed; bottom:26px; inset-inline-end:26px; z-index:900; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); animation:floatPulse 2.6s ease-in-out infinite;}
@keyframes floatPulse{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* Back to top */
.to-top{position:fixed; bottom:26px; inset-inline-start:26px; z-index:900; width:46px; height:46px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.3s;}
.to-top.show{opacity:1; pointer-events:auto;}

/* Page hero (inner pages) */
.page-hero{background:radial-gradient(ellipse 120% 100% at 50% 0%, var(--navy-700), var(--navy-900) 70%); color:#fff; padding-top:170px; padding-bottom:90px; text-align:center;}
.breadcrumb{display:flex; gap:8px; justify-content:center; color:#B0C2DE; font-size:.85rem; margin-bottom:16px;}
.breadcrumb a{color:#D8E3F4;}
.breadcrumb .sep{color:var(--gold-500);}

/* ---- Responsive ----------------------------------------------- */
@media (max-width:980px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .split, .contact-wrap, .footer-grid{grid-template-columns:1fr;}
  .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
  .tab-panel.active{grid-template-columns:1fr;}
  .footer-grid{gap:34px;}
}
@media (max-width:640px){
  .grid-3, .grid-4, .grid-2, .value-grid, .form-grid, .solution-points{grid-template-columns:1fr;}
  .hero-stats .stat{border-inline-start:none; border-top:1px solid rgba(255,255,255,.14); padding-top:16px;}
  section{padding-block:56px;}
}

/* ============================================================
   PHASE 2 — Redesign additions (icons, logo, detail templates)
   ============================================================ */

/* ---- Lucide icon sizing --------------------------------------- */
[data-lucide]{display:block;}
.icon-btn [data-lucide]{width:19px; height:19px;}
.ico [data-lucide]{width:24px; height:24px;}
.contact-row .ico [data-lucide]{width:20px; height:20px;}
.card .ico [data-lucide]{width:26px; height:26px;}
.social-row a [data-lucide]{width:18px; height:18px; display:block;}
.social-row a svg{width:18px; height:18px; display:block;}
.contact-row .ico svg{width:20px; height:20px; display:block;}
.footer ul a svg{width:16px; height:16px; flex:none; display:block;}
.flow-node [data-lucide]{width:20px; height:20px; margin-inline-end:6px; vertical-align:-5px;}
.value-item .ico [data-lucide]{width:22px; height:22px;}
.wrap-ico{display:inline-flex; align-items:center; gap:8px;}

/* ---- Brand / bigger logo, no wordmark -------------------------- */
.brand{gap:0;}
.brand img{width:76px; height:76px; border-radius:12px; transition:transform .35s var(--ease);}
.brand:hover img{transform:scale(1.05) rotate(-2deg);}
.brand .brand-name{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.footer-brand img{width:68px; height:68px; border-radius:10px;}

/* ---- Nav polish -------------------------------------------------- */
.nav-links a{display:inline-flex; align-items:center;}
.icon-btn{position:relative; overflow:hidden;}
.icon-btn svg{transition:transform .4s var(--ease);}
.icon-btn:hover svg{transform:rotate(-14deg) scale(1.08);}

/* ---- Service tabs (merged Services + Solutions) ------------------ */
.svc-cat-tabs{display:flex; gap:10px; justify-content:center; margin-bottom:44px; flex-wrap:wrap;}
.svc-cat-tabs button{padding:12px 24px; border-radius:100px; border:1px solid var(--border); background:var(--card-bg); font-weight:700; font-size:var(--step--1); color:var(--text-soft); transition:.3s;}
.svc-cat-tabs button.active, .svc-cat-tabs button:hover{background:var(--navy-800); color:#fff; border-color:var(--navy-800);}

/* ---- Service card (clickable, linking to detail template) -------- */
.card.svc-card{cursor:pointer; text-align:center;}
.card.svc-card .ico{margin-inline:auto;}
.card.svc-card .card-arrow{position:absolute; bottom:26px; inset-inline-end:28px; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:.35s var(--ease); color:var(--text-mute);}
.card.svc-card:hover .card-arrow{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); transform:translateX(var(--arrow-x,0)) rotate(var(--arrow-r,0));}
[dir="rtl"] .card.svc-card{--arrow-x:-4px; --arrow-r:-45deg;}
[dir="ltr"] .card.svc-card{--arrow-x:4px; --arrow-r:0deg;}
.card.svc-card [data-lucide="arrow-left"]{width:16px; height:16px;}

/* ---- Detail page (service / project) ------------------------------ */
.detail-banner{position:relative; min-height:52vh; display:flex; align-items:flex-end; color:#fff; padding-top:150px; padding-bottom:60px; background-size:cover; background-position:center; overflow:hidden;}
.detail-banner .hero-canvas-container{position:absolute; inset:0; z-index:0; pointer-events:none;}
.detail-banner .container{position:relative; z-index:1;}
.detail-banner::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--navy-900) 5%, rgba(7,18,38,.55) 60%, rgba(7,18,38,.55)); }
.detail-banner .container{position:relative; z-index:1;}
.detail-banner .tag-pill{display:inline-block; background:rgba(242,185,12,.16); border:1px solid rgba(242,185,12,.4); color:var(--gold-400); font-size:.78rem; font-weight:700; padding:6px 16px; border-radius:100px; margin-bottom:14px;}
.detail-banner h1{color:#fff; margin-bottom:.3em; max-width:820px;}
.detail-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start;}
.detail-feature-list{display:grid; gap:12px; margin-top:10px;}
.detail-feature-list li{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-m); font-size:var(--step--1); color:var(--text);}
.detail-feature-list li [data-lucide]{width:18px; height:18px; color:var(--sky-500); flex:none;}
.detail-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;}
.detail-gallery img{border-radius:var(--radius-m); aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .5s var(--ease); cursor:pointer;}
.detail-gallery img:hover{transform:scale(1.03);}
.detail-sidebar{position:sticky; top:100px; display:flex; flex-direction:column; gap:18px;}
.detail-cta-card{background:var(--navy-900); color:#fff; border-radius:var(--radius-l); padding:30px; text-align:center;}
.detail-cta-card p{color:#D8E3F4; font-size:var(--step--1);}
.detail-meta-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-l); padding:26px;}
.detail-meta-row{display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); font-size:var(--step--1);}
.detail-meta-row:last-child{border-bottom:none;}
.detail-meta-row b{color:var(--text); font-weight:700;}
.detail-meta-row span{color:var(--text-mute);}
.related-grid{margin-top:20px;}
.empty-note{color:var(--text-mute); text-align:center; padding:40px 0;}

@media (max-width:980px){
  .detail-layout{grid-template-columns:1fr;}
  .detail-sidebar{position:static;}
  .detail-gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .detail-gallery{grid-template-columns:1fr 1fr;}
  .brand img{width:56px; height:56px;}
}

/* ---- Footer contact icons -------------------------------------- */
.footer ul a{display:inline-flex; align-items:center; gap:8px;}
.footer ul a [data-lucide]{width:16px; height:16px; flex:none;}