/* ============================================================
   ALTHORAYA TECHNICAL SERVICES — design system
   Palette drawn from the original brand (navy / teal / amber)
   refined into a control-room, precision-security aesthetic.
   ============================================================ */

:root{
  --navy-950:#070f1a;
  --navy-900:#0c1826;
  --navy-800:#122238;
  --navy-700:#1a3352;
  --navy-600:#24466b;
  --steel-400:#6c8099;
  --steel-300:#93a7bd;
  --steel-200:#c3d0dd;
  --fog-100:#eef2f6;
  --fog-50:#f7f9fb;
  --white:#ffffff;

  --teal:#20c2ae;
  --teal-dim:#17998a;
  --amber:#f0a63a;
  --amber-dim:#d68f28;
  --signal-red:#e2544f;

  --font-head:"Space Grotesk", "Segoe UI", sans-serif;
  --font-body:"Inter", "Segoe UI", sans-serif;

  --gap:clamp(1.25rem, 3vw, 2.5rem);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --shadow-soft:0 20px 45px -25px rgba(7,15,26,0.45);
  --shadow-tight:0 8px 20px -12px rgba(7,15,26,0.4);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:72px;
  --tab-h:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--fog-50);
  color:var(--navy-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:var(--tab-h);
}
@media (min-width:901px){ body{ padding-bottom:0; } }

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;line-height:1.12;letter-spacing:-0.01em;color:var(--navy-950);}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}

.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2rem);
}

:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:.8rem;
  font-weight:600;
  color:var(--teal-dim);
  letter-spacing:.02em;
}
.eyebrow::before{
  content:"";
  width:18px;height:2px;background:var(--teal);border-radius:2px;
}

.section-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-top:.5rem;}
.section-head p{color:var(--steel-400);margin-top:.9rem;font-size:1.03rem;line-height:1.6;}
.section-head.center{margin-inline:auto;text-align:center;}

section{padding-block:clamp(3.5rem,8vw,6.5rem);position:relative;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.85em 1.5em;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn svg{width:1.1em;height:1.1em;flex:none;}
.btn-primary{background:var(--teal);color:var(--navy-950);box-shadow:0 14px 30px -12px rgba(32,194,174,0.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(32,194,174,0.65);}
.btn-ghost{border-color:rgba(255,255,255,0.28);color:var(--white);}
.btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.5);}
.btn-outline{border-color:var(--navy-700);color:var(--navy-800);}
.btn-outline:hover{background:var(--navy-900);color:var(--white);border-color:var(--navy-900);}
.btn-sm{padding:.6em 1.1em;font-size:.85rem;}

/* ================= HEADER ================= */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;
  height:var(--header-h);
  z-index:60;
  display:flex;align-items:center;
  background:rgba(7,15,26,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:transform .45s var(--ease), background-color .3s ease;
}
.site-header.is-hidden{transform:translateY(-100%);}
.site-header.is-scrolled{background:rgba(7,15,26,0.92);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;}

.brand{display:flex;align-items:center;gap:.65rem;color:var(--white);}
.brand img{height:30px;width:auto;}
.brand-word{font-family:var(--font-head);font-weight:600;font-size:1.05rem;letter-spacing:.01em;}
.brand-word b{color:var(--teal);font-weight:700;}

.main-nav{display:none;}
.main-nav ul{display:flex;align-items:center;gap:.3rem;}
.main-nav a{
  display:inline-flex;align-items:center;
  font-size:.92rem;font-weight:500;color:var(--steel-200);
  position:relative;
  padding:.5rem 1rem;
  border-radius:999px;
  isolation:isolate;
  transition:color .3s ease, transform .3s var(--ease);
}
.main-nav a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background:rgba(255,255,255,0.08);
  opacity:0;transform:scale(.85);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.main-nav a:hover{color:var(--white);transform:translateY(-1px);}
.main-nav a:hover::before{opacity:1;transform:scale(1);}
.main-nav a.is-active{color:var(--teal);background:rgba(32,194,174,0.14);}
.main-nav a.is-active::before{opacity:0;}
.main-nav a:active{transform:translateY(0) scale(.96);}

.header-actions{display:flex;align-items:center;gap:.6rem;}
.header-actions > .lang-toggle,
.header-actions > .btn-primary{display:none;}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--white);background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  transition:background-color .25s ease, transform .25s ease;
}
.icon-btn:hover{background:rgba(255,255,255,0.16);transform:translateY(-1px);}
.icon-btn svg{width:19px;height:19px;}

@media (min-width:1001px){
  .main-nav{display:block;}
  .header-actions > .btn-primary,
  .header-actions > .lang-toggle{display:inline-flex;}
}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block-start:calc(var(--header-h) + 2rem);
  padding-block-end:3rem;
  background:
    radial-gradient(1100px 550px at 82% -10%, rgba(32,194,174,0.22), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(240,166,58,0.14), transparent 55%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 46%, var(--navy-800) 100%);
  overflow:clip;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 75% 20%, black, transparent 68%);
}
.hero .container{
  display:grid;
  grid-template-columns:1fr;
  gap:2.6rem;
  align-items:center;
}
@media (min-width:961px){
  .hero .container{grid-template-columns:1.05fr .95fr;gap:3rem;}
}

.hero-status{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .9rem .5rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--steel-200);
  font-size:.8rem;font-weight:500;
  margin-bottom:1.4rem;
}
.pulse-dot{
  width:9px;height:9px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(32,194,174,0.7);
  animation:pulse 2.2s infinite;
  flex:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(32,194,174,0.55);}
  70%{box-shadow:0 0 0 9px rgba(32,194,174,0);}
  100%{box-shadow:0 0 0 0 rgba(32,194,174,0);}
}

.hero h1{
  color:var(--white);
  font-size:clamp(2.3rem, 5.4vw, 3.7rem);
  font-weight:600;
  max-width:14ch;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(95deg, var(--teal) 0%, #57e3cf 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{
  color:var(--steel-200);
  font-size:1.08rem;
  line-height:1.7;
  max-width:46ch;
  margin-block:1.3rem 2rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;}

.hero-badges{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.7rem;margin-top:2.6rem;max-width:460px;
}
.hero-badge{
  padding:.85rem .6rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  text-align:center;
}
.hero-badge strong{display:block;color:var(--white);font-family:var(--font-head);font-size:.95rem;}
.hero-badge span{display:block;color:var(--steel-300);font-size:.72rem;margin-top:.15rem;}

.hero-visual{position:relative;}
.hero-visual-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/3.1;
}
.hero-visual-frame img{width:100%;height:100%;object-fit:cover;}
.hero-visual-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, rgba(7,15,26,0) 45%, rgba(7,15,26,0.55) 100%);
}
.rec-chip{
  position:absolute;top:1rem;left:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(7,15,26,0.65);
  backdrop-filter:blur(6px);
  color:var(--white);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  padding:.35rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
}
.rec-dot{width:7px;height:7px;border-radius:50%;background:var(--signal-red);animation:pulse-red 1.6s infinite;}
@keyframes pulse-red{0%,100%{opacity:1;}50%{opacity:.35;}}
.float-card{
  position:absolute;bottom:-1.1rem;right:-1rem;z-index:2;
  background:var(--white);
  border-radius:var(--radius-md);
  padding:1rem 1.15rem;
  box-shadow:var(--shadow-soft);
  display:flex;align-items:center;gap:.8rem;
  max-width:230px;
}
@media (max-width:520px){ .float-card{right:0;bottom:-1rem;padding:.8rem .9rem;} }
.float-card .ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(150deg,var(--teal),var(--teal-dim));
  display:flex;align-items:center;justify-content:center;color:var(--navy-950);
}
.float-card .ic svg{width:19px;height:19px;}
.float-card strong{display:block;font-size:.85rem;color:var(--navy-950);}
.float-card span{display:block;font-size:.72rem;color:var(--steel-400);}

/* ================= MARQUEE / TRUST STRIP ================= */
.trust-strip{background:var(--navy-950);padding-block:1.4rem 1.7rem;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06);}
.trust-strip p{
  text-align:center;color:var(--steel-400);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;
}
.marquee{
  display:flex;width:max-content;
  animation:scroll-left 32s linear infinite;
}
.marquee:hover{animation-play-state:paused;}
.marquee-track{display:flex;align-items:center;gap:clamp(1rem,3vw,1.6rem);padding-inline-end:clamp(1rem,3vw,1.6rem);}
.brand-chip{
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
  border-radius:12px;
  padding:.65rem 1.3rem;
  height:52px;
  opacity:.9;
  transition:opacity .25s ease, transform .25s ease;
}
.brand-chip:hover{opacity:1;transform:translateY(-2px);}
.marquee-track img{height:22px;width:auto;max-width:110px;object-fit:contain;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ================= SERVICES ================= */
.services{background:var(--fog-50);}
.services-rail{
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * clamp(1.25rem,4vw,2rem));
  padding-inline:clamp(1.25rem,4vw,2rem);
  padding-block-end:.6rem;
  scrollbar-width:none;
}
.services-rail::-webkit-scrollbar{display:none;}
.service-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:min(78vw,300px);
  background:var(--white);
  border-radius:var(--radius-md);
  border:1px solid var(--fog-100);
  box-shadow:var(--shadow-tight);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);}
.service-card .thumb{aspect-ratio:16/10;overflow:hidden;position:relative;}
.service-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.service-card:hover .thumb img{transform:scale(1.07);}
.service-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(7,15,26,.55), transparent 55%);}
.service-num{
  position:absolute;bottom:.7rem;left:.85rem;color:var(--white);
  font-family:var(--font-head);font-size:.78rem;font-weight:600;letter-spacing:.05em;
  z-index:1;opacity:.85;
}
.service-body{padding:1.2rem 1.25rem 1.4rem;}
.service-body h3{font-size:1.08rem;margin-bottom:.5rem;}
.service-body p{color:var(--steel-400);font-size:.9rem;line-height:1.6;}
.service-body .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;}
.service-body .tags span{
  font-size:.72rem;color:var(--teal-dim);background:rgba(32,194,174,.1);
  padding:.28rem .6rem;border-radius:999px;font-weight:600;
}
@media (min-width:761px){
  .services-rail{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
    overflow:visible;margin-inline:0;padding-inline:0;
  }
  .service-card{width:auto;}
}
@media (min-width:1101px){
  .services-rail{grid-template-columns:repeat(4,1fr);}
}

/* ================= ABOUT / SPLIT SECTIONS ================= */
.split{
  display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center;
}
@media (min-width:901px){ .split{grid-template-columns:1fr 1fr;gap:3.5rem;} }
.split.reverse .split-media{order:-1;}
@media (min-width:901px){ .split.reverse .split-media{order:2;} }

.split-media{position:relative;}
.split-media img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  aspect-ratio:5/4;object-fit:cover;
}
.split-copy p{color:var(--steel-400);line-height:1.75;font-size:1rem;margin-top:1.1rem;}
.split-copy .check-list{margin-top:1.5rem;display:grid;gap:.85rem;}
.check-item{display:flex;align-items:flex-start;gap:.7rem;font-size:.94rem;color:var(--navy-800);}
.check-item svg{width:20px;height:20px;flex:none;color:var(--teal-dim);margin-top:.05rem;}

.stat-row{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap;}
.stat-row div strong{display:block;font-family:var(--font-head);font-size:1.7rem;color:var(--navy-950);}
.stat-row div span{font-size:.78rem;color:var(--steel-400);}

/* quote block for Quality section */
.quote-block{
  background:linear-gradient(160deg, var(--navy-900), var(--navy-800));
  border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,3.4rem);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.quote-block::before{
  content:"\201C";
  position:absolute;top:-1.4rem;left:1.2rem;
  font-family:var(--font-head);font-size:9rem;color:rgba(255,255,255,0.06);
  line-height:1;
}
.quote-block blockquote{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,3vw,1.85rem);
  line-height:1.4;position:relative;z-index:1;max-width:20ch;
}
.quote-block cite{
  display:block;margin-top:1.3rem;color:var(--teal);font-style:normal;
  font-size:.85rem;letter-spacing:.03em;
}

/* process / quality pillars */
.pillars{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.4rem;}
@media (min-width:701px){ .pillars{grid-template-columns:repeat(3,1fr);} }
.pillar{
  padding:1.5rem;border:1px solid var(--fog-100);border-radius:var(--radius-md);
  background:var(--white);
}
.pillar .pillar-mark{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(240,166,58,.14);color:var(--amber-dim);margin-bottom:1rem;
}
.pillar .pillar-mark svg{width:19px;height:19px;}
.pillar h4{font-size:1rem;margin-bottom:.4rem;}
.pillar p{font-size:.88rem;color:var(--steel-400);line-height:1.6;}

/* ================= CONTACT / CTA ================= */
.cta-band{
  background:
    radial-gradient(700px 350px at 15% 0%, rgba(32,194,174,0.16), transparent 60%),
    var(--navy-950);
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:clamp(2.2rem,5vw,3.6rem);
  display:grid;gap:1.8rem;
  grid-template-columns:1fr;
}
@media (min-width:861px){ .cta-band{grid-template-columns:1.3fr 1fr;align-items:center;} }
.cta-band h2{color:var(--white);font-size:clamp(1.6rem,3.4vw,2.2rem);max-width:16ch;}
.cta-band p{color:var(--steel-300);margin-top:.8rem;max-width:44ch;line-height:1.65;}
.contact-grid{display:grid;gap:1rem;}
.contact-card{
  display:flex;align-items:center;gap:.9rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-sm);
  padding:.9rem 1rem;
  transition:background-color .25s ease, transform .25s ease;
}
.contact-card:hover{background:rgba(255,255,255,0.11);transform:translateX(3px);}
.contact-card .ic{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:rgba(32,194,174,0.18);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.contact-card .ic svg{width:18px;height:18px;}
.contact-card strong{display:block;font-size:.86rem;}
.contact-card span{display:block;font-size:.76rem;color:var(--steel-300);}

/* ================= FOOTER ================= */
.site-footer{background:var(--navy-950);color:var(--steel-300);padding-block-start:3.5rem;}
.footer-grid{
  display:grid;gap:2.4rem;
  grid-template-columns:1.3fr repeat(3,1fr);
}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand p{font-size:.87rem;line-height:1.7;max-width:32ch;color:var(--steel-400);}
.footer-col h5{color:var(--white);font-family:var(--font-head);font-size:.85rem;letter-spacing:.03em;margin-bottom:1rem;}
.footer-col ul{display:grid;gap:.65rem;}
.footer-col a{font-size:.86rem;transition:color .2s ease;}
.footer-col a:hover{color:var(--white);}
.footer-social{display:flex;gap:.6rem;margin-top:1.2rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:3rem;padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  font-size:.78rem;color:var(--steel-400);
}

/* ================= FLOATING ACTIONS ================= */
.fab-stack{
  position:fixed;right:1.1rem;bottom:calc(var(--tab-h) + 1rem);z-index:55;
  display:flex;flex-direction:column;gap:.7rem;
}
@media (min-width:901px){ .fab-stack{bottom:1.3rem;} }
.fab{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);
  color:var(--white);
  transition:transform .3s var(--ease);
}
.fab:hover{transform:scale(1.07);}
.fab svg{width:24px;height:24px;}
.fab-whatsapp{background:linear-gradient(150deg,var(--teal),var(--teal-dim));color:var(--navy-950);}
.fab-call{background:var(--navy-900);border:1px solid rgba(255,255,255,0.14);}
.fab-top{
  width:44px;height:44px;background:var(--white);color:var(--navy-900);
  border:1px solid var(--fog-100);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.fab-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.fab-top svg{width:18px;height:18px;}

/* ================= FIXED SIDE SOCIAL BAR ================= */
.social-bar{
  display:none;
  position:fixed;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%);
  z-index:55;
  flex-direction:column;
  background:rgba(7,15,26,0.55);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-radius:0 14px 14px 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  border-inline-start:none;
}
@media (min-width:901px){
  .social-bar{display:flex;}
}
[dir="rtl"] .social-bar{
  border-radius:14px 0 0 14px;
  border-inline-start:1px solid rgba(255,255,255,0.1);
  border-inline-end:none;
}
.social-bar a{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  color:var(--steel-200);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background-color .25s ease, color .25s ease, padding-inline-start .25s var(--ease);
}
.social-bar a:last-child{border-bottom:none;}
.social-bar a svg{width:18px;height:18px;}
.social-bar a:hover{background:var(--teal);color:var(--navy-950);padding-inline-start:4px;}

/* ================= LANGUAGE TOGGLE ================= */
.lang-toggle{
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:.3rem;
  font-size:.72rem;font-weight:700;
}
.lang-toggle button{
  border:none;background:transparent;color:var(--steel-300);
  padding:.35rem .65rem;border-radius:999px;
  font-weight:700;font-size:.72rem;letter-spacing:.02em;
  transition:background-color .25s ease, color .25s ease;
}
.lang-toggle button.is-active{background:var(--teal);color:var(--navy-950);}
.drawer .lang-toggle{width:100%;justify-content:center;margin-bottom:.4rem;}
.drawer .lang-toggle button{flex:1;}

/* ================= MOBILE APP TAB BAR ================= */
.tab-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  height:var(--tab-h);
  display:flex;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-top:1px solid var(--fog-100);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:901px){ .tab-bar{display:none;} }
.tab-bar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  color:var(--steel-400);font-size:.66rem;font-weight:600;
  position:relative;
  transition:color .25s ease;
}
.tab-bar a svg{width:21px;height:21px;transition:transform .25s var(--ease);}
.tab-bar a::before{
  content:"";position:absolute;top:.35rem;
  width:34px;height:34px;border-radius:12px;
  background:rgba(32,194,174,0.12);
  opacity:0;transform:scale(.7);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:-1;
}
.tab-bar a.is-active{color:var(--teal-dim);}
.tab-bar a.is-active::before{opacity:1;transform:scale(1);}
.tab-bar a.is-active svg{transform:translateY(-1px);}
.tab-bar a:active svg{transform:scale(.88);}

/* ================= MOBILE NAV DRAWER (tablet fallback) ================= */
.menu-toggle{display:inline-flex;}
@media (min-width:1001px){ .menu-toggle{display:none;} }

.drawer{
  position:fixed;inset:0;z-index:80;
  visibility:hidden;
}
.drawer.is-open{visibility:visible;}
.drawer-scrim{
  position:absolute;inset:0;background:rgba(7,15,26,0.55);
  opacity:0;transition:opacity .35s ease;
}
.drawer.is-open .drawer-scrim{opacity:1;}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(80vw,340px);
  background:var(--navy-950);
  padding:1.6rem 1.5rem 2rem;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.is-open .drawer-panel{transform:translateX(0);}
.drawer-head{display:flex;justify-content:flex-end;margin-bottom:1.5rem;}
.drawer nav ul{display:grid;gap:.3rem;}
.drawer nav a{
  display:flex;align-items:center;gap:.6rem;
  padding:.9rem .7rem;color:var(--steel-200);
  font-family:var(--font-head);font-size:1.1rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  transition:color .25s ease, background-color .25s ease, padding-inline-start .25s ease;
}
.drawer nav a:hover{background:rgba(255,255,255,0.05);}
.drawer nav a.is-active{color:var(--teal);background:rgba(32,194,174,0.1);padding-inline-start:1.1rem;}
.drawer-foot{margin-top:auto;display:grid;gap:.8rem;padding-top:1.5rem;}

/* ================= REVEAL ANIMATION ================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* utility */
.text-center{text-align:center;}
.mt-lg{margin-top:2.4rem;}
.visually-hidden{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ================= ARABIC / RTL ================= */
html[lang="ar"] body,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .eyebrow,html[lang="ar"] .btn,html[lang="ar"] .brand-word,
html[lang="ar"] .lang-toggle,html[lang="ar"] .tab-bar a,
html[lang="ar"] .service-num,html[lang="ar"] .rec-chip{
  font-family:"Tajawal","Inter",sans-serif;
}
html[lang="ar"]{letter-spacing:0;}

[dir="rtl"] .rec-chip{left:auto;right:1rem;}
[dir="rtl"] .float-card{right:auto;left:-1rem;}
@media (max-width:520px){ [dir="rtl"] .float-card{left:0;right:auto;} }
[dir="rtl"] .quote-block::before{left:auto;right:1.2rem;}
[dir="rtl"] .service-num{left:auto;right:.85rem;}
[dir="rtl"] .eyebrow::before{order:2;}
[dir="rtl"] .hero-status .pulse-dot,
[dir="rtl"] .rec-chip .rec-dot{order:2;}
[dir="rtl"] .checklist-icon{order:2;}
[dir="rtl"] .drawer-panel{right:auto;left:0;transform:translateX(-100%);}
[dir="rtl"] .drawer.is-open .drawer-panel{transform:translateX(0);}
[dir="rtl"] .contact-card:hover{transform:translateX(-3px);}
[dir="rtl"] .main-nav a.is-active,
[dir="rtl"] .drawer nav a.is-active{padding-inline-start:1rem;}