/* ══════════════════════════════════════════════════════════════
   A1 TECH — Design System
   Palette derived from brand logo (blue triangle / indigo "one")
   Type: Tajawal (AR) + Rajdhani (EN/technical/numeric)
   ══════════════════════════════════════════════════════════════ */

:root{
  --navy:#16234a;
  --navy2:#1c2c5c;
  --navy3:#233872;
  --steel:#5c6b7d;
  --steel-light:#a9b4c0;
  --bone:#eef4fa;
  --white:#ffffff;
  --accent:#3f8fce;
  --accent2:#2f76ac;
  --accent-glow:rgba(63,143,206,.16);
  --sky:#8ecae6;
  --green:#3aa66b;
  --line:rgba(238,244,250,.12);
  --line-dark:rgba(22,35,74,.1);
  --font-ar:'Tajawal',sans-serif;
  --font-en:'Rajdhani',sans-serif;
  --radius:4px;
  --container:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ar);
  background:var(--bone);
  color:var(--navy);
  direction:rtl;          /* Arabic is the default */
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

.blueprint-bg{
  background-color:var(--navy);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:42px 42px;
  position:relative;
}
.blueprint-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(63,143,206,.16),transparent 55%);
  pointer-events:none;
}

.dim-label{
  font-family:var(--font-en);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
}
.dim-label::before{content:'';width:22px;height:1px;background:var(--accent)}

/* ── Header / Nav ──
   Two states, one smooth transition (0.32s):
   • at the top of the page  → full-bleed bar, square corners, no border, no shadow,
     the same navy as the hero underneath it, so it reads as part of the page.
   • after scrolling         → the bar itself goes transparent and its inner row
     pulls in from the sides into a floating glass capsule: rounded, blurred,
     saturated, with a soft shadow. */
:root{--head-ease:cubic-bezier(.22,.61,.36,1)}
.site-header{position:sticky;top:0;z-index:500;background:var(--navy);
  border-bottom:1px solid rgba(238,244,250,.08);
  transition:background .32s var(--head-ease),border-color .32s var(--head-ease),padding .32s var(--head-ease)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:var(--container);margin:0 auto;
  border:1px solid transparent;border-radius:0;background:transparent;
  transition:background .32s var(--head-ease),border-color .32s var(--head-ease),border-radius .32s var(--head-ease),
             box-shadow .32s var(--head-ease),padding .32s var(--head-ease),max-width .32s var(--head-ease),
             backdrop-filter .32s var(--head-ease)}

/* scrolled state */
.site-header.floating{background:transparent;border-bottom-color:transparent;padding:10px 14px}
@media(max-width:600px){
  .site-header.floating{padding:8px 10px}
  .site-header.floating .nav-wrap{padding:6px 10px}
  .site-header.floating .btn-quote{font-size:.7rem;padding:8px 12px}
}
.site-header.floating .nav-wrap{
  max-width:1140px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(16,26,56,.80);
  border-color:rgba(238,244,250,.16);
  box-shadow:0 16px 40px rgba(7,14,33,.34);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
/* browsers without backdrop-filter get a solid-enough panel instead of grey mush */
@supports not (backdrop-filter:blur(1px)){
  .site-header.floating .nav-wrap{background:rgba(18,29,62,.94)}
}
.site-header.floating .btn-quote{border-radius:999px}
.site-header.floating .nav-icon-btn,.site-header.floating .nav-toggle{border-radius:50%}
.logo{display:flex;align-items:center;gap:10px;color:var(--white)}
.logo img{height:42px;width:auto}
.logo-text{font-family:var(--font-en);font-weight:800;font-size:1.25rem;letter-spacing:.02em}
.logo-sub{font-size:.55rem;color:var(--steel-light);letter-spacing:.15em;text-transform:uppercase;font-family:var(--font-en)}
.nav-links{display:flex;gap:30px}
.nav-links a{color:var(--bone);font-weight:600;font-size:.92rem;position:relative;padding:6px 0}
.nav-links a::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:0;height:2px;background:var(--accent);transition:.25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-icon-btn{position:relative;color:var(--bone);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(238,244,250,.15);border-radius:3px;transition:.2s}
.nav-icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn{width:auto;padding:0 12px;font-family:var(--font-en);font-weight:700;font-size:.78rem;letter-spacing:.03em}
.btn-quote{background:var(--accent);color:#fff;font-weight:700;font-size:.85rem;padding:10px 20px;border-radius:3px;transition:.2s}
.btn-quote:hover{background:var(--accent2)}
.nav-toggle{display:none;color:var(--bone);width:38px;height:38px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:3px;font-weight:700;font-size:.95rem;transition:.2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-outline{border:1.5px solid var(--bone);color:var(--bone)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-outline-dark{border:1.5px solid var(--navy);color:var(--navy)}
.btn-outline-dark:hover{background:var(--navy);color:#fff}

/* ── Hero ── */
.hero{padding:80px 0 60px;color:var(--white);position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero h1{font-family:var(--font-en);font-size:3.2rem;font-weight:800;line-height:1.1;margin-bottom:20px}
.hero h1 span{color:var(--accent)}
.hero p{color:var(--steel-light);font-size:1.02rem;max-width:520px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;border-top:1px solid rgba(238,244,250,.12);padding-top:22px;flex-wrap:wrap}
.hero-stat b{font-family:var(--font-en);font-size:1.6rem;color:var(--accent);display:block}
.hero-stat span{font-size:.72rem;color:var(--steel-light)}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap}
.hero-badge{border:1px solid rgba(238,244,250,.25);color:var(--steel-light);font-size:.78rem;font-weight:600;padding:8px 16px;border-radius:20px;background:rgba(238,244,250,.04)}
.schematic-wrap svg{width:100%;height:auto}
.hero-video{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.35);border:1px solid rgba(238,244,250,.12)}

/* ── Application cards ("What are you moving?") ── */
.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.app-card{background:var(--white);border:1px solid rgba(22,35,74,.08);border-radius:var(--radius);padding:22px 14px;text-align:center;transition:.2s}
.app-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 26px rgba(22,35,74,.08)}
.app-icon{font-size:1.8rem;margin-bottom:10px}
.app-card span{display:block;font-size:.82rem;font-weight:700;color:var(--navy)}

/* ── Process steps ── */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.process-step{position:relative;padding-top:6px}
.process-num{font-family:var(--font-en);font-size:1.6rem;font-weight:800;color:var(--accent);opacity:.5;margin-bottom:10px}
.process-step h4{font-size:.92rem;font-weight:800;margin-bottom:6px;color:#fff}
.process-step p{font-size:.8rem;color:var(--steel-light)}

/* ── Markets we serve ── */
.markets-row{display:flex;gap:12px;flex-wrap:wrap}
.market-pill{border:1px solid rgba(22,35,74,.12);border-radius:24px;padding:10px 20px;font-size:.85rem;font-weight:700;color:var(--navy);background:var(--white)}

.section{padding:76px 0}
.section-dark{background:var(--navy);color:var(--white)}
.section-head{max-width:640px;margin-bottom:44px}
.section-head h2{font-size:2rem;font-weight:800;line-height:1.25}
.section-head p{color:var(--steel)}
.section-dark .section-head p{color:var(--steel-light)}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat-card{background:var(--white);border:1px solid rgba(22,35,74,.08);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden;transition:.25s}
.cat-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,35,74,.08)}
.cat-ico{width:52px;height:52px;background:var(--navy);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px;overflow:hidden}
.cat-ico svg{width:100%;height:100%}
.cat-ico[style*="transparent"]{background:var(--navy);width:100%;height:auto;aspect-ratio:240/190;border-radius:4px;margin-bottom:14px}
.cat-card h3{font-size:1.02rem;margin-bottom:8px;font-weight:800}
.cat-card p{font-size:.85rem;color:var(--steel);margin-bottom:16px}
.cat-tag{font-family:var(--font-en);font-size:.65rem;letter-spacing:.1em;color:var(--accent);font-weight:700;text-transform:uppercase}
.cat-count{position:absolute;top:22px;inset-inline-end:22px;font-family:var(--font-en);font-size:.7rem;color:var(--steel-light);font-weight:700}

.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}
.feature-item{padding:28px 22px;border-inline-start:1px solid var(--line-dark)}
.feature-item:last-child{border-inline-start:none}
.feature-item .num{font-family:var(--font-en);font-size:.7rem;color:var(--accent);font-weight:700;margin-bottom:10px;display:block}
.feature-item h4{font-size:.95rem;margin-bottom:8px;font-weight:800}
.feature-item p{font-size:.8rem;color:var(--steel)}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{background:var(--white);border:1px solid rgba(22,35,74,.08);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.product-card:hover{box-shadow:0 16px 34px rgba(22,35,74,.1);border-color:var(--accent)}
.product-thumb{aspect-ratio:1/.85;background:linear-gradient(135deg,var(--navy2),var(--navy));display:flex;align-items:center;justify-content:center;color:rgba(238,244,250,.35);position:relative;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-thumb svg{width:85%;height:85%}
.stock-pill{position:absolute;top:12px;inset-inline-start:12px;background:rgba(58,166,107,.15);color:var(--green);font-family:var(--font-en);font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid rgba(58,166,107,.3);z-index:2}
.offer-pill{position:absolute;top:12px;inset-inline-end:12px;background:var(--accent);color:#fff;font-family:var(--font-en);font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:20px;z-index:2}
.product-body{padding:16px;display:flex;flex-direction:column;flex:1}
.product-cat{font-family:var(--font-en);font-size:.62rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.product-body h3{font-size:.9rem;font-weight:800;margin-bottom:6px}
.product-spec{font-size:.75rem;color:var(--steel);margin-bottom:14px;font-family:var(--font-en);direction:ltr;text-align:start}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px dashed rgba(22,35,74,.1)}
.price{font-family:var(--font-en);font-weight:800;font-size:1.02rem;color:var(--navy)}
.price span{font-size:.68rem;color:var(--steel);font-weight:600}
.price .old{text-decoration:line-through;color:var(--steel-light);font-size:.8rem;margin-inline-start:6px}
.add-btn{width:34px;height:34px;background:var(--navy);color:var(--accent);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.add-btn:hover{background:var(--accent);color:#fff}

.cert-strip{display:flex;gap:40px;align-items:center;flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);margin:46px 0}
.cert-item{display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-size:.76rem;font-weight:700;color:var(--steel);letter-spacing:.03em}
.cert-item svg{color:var(--accent)}

.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.test-card{background:var(--navy2);border:1px solid rgba(238,244,250,.08);border-radius:var(--radius);padding:26px}
.test-card p{color:var(--bone);font-size:.9rem;margin-bottom:20px;line-height:1.8}
.test-who{display:flex;align-items:center;gap:12px}
.test-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-glow);border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-weight:800;font-size:.85rem}
.test-who b{display:block;font-size:.85rem;color:var(--white)}
.test-who span{font-size:.72rem;color:var(--steel-light)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{background:var(--white);border:1px solid rgba(22,35,74,.08);border-radius:var(--radius);overflow:hidden;transition:.2s}
.blog-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.blog-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--navy3));position:relative;display:flex;align-items:end;padding:14px}
.blog-thumb span{font-family:var(--font-en);font-size:.62rem;background:var(--accent);color:#fff;padding:4px 10px;border-radius:20px;font-weight:700;letter-spacing:.05em}
.blog-body{padding:18px}
.blog-body h3{font-size:.93rem;font-weight:800;margin-bottom:8px;line-height:1.5}
.blog-body p{font-size:.8rem;color:var(--steel);margin-bottom:14px}
.blog-meta{font-family:var(--font-en);font-size:.68rem;color:var(--steel-light);letter-spacing:.05em;display:flex;gap:10px}

.cta-banner{background:linear-gradient(120deg,var(--accent),var(--accent2));border-radius:var(--radius);padding:48px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;color:#fff}
.cta-banner h2{font-size:1.55rem;font-weight:800;max-width:520px}
.cta-banner p{opacity:.92;font-size:.9rem;margin-top:8px}

.site-footer{background:var(--navy);color:var(--steel-light);padding:56px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px;border-bottom:1px solid rgba(238,244,250,.08)}
.footer-grid h4{color:var(--white);font-size:.85rem;font-weight:800;margin-bottom:16px}
.footer-grid li{margin-bottom:10px;font-size:.82rem}
.footer-grid a:hover{color:var(--accent)}
.footer-bottom{padding-top:20px;display:flex;justify-content:space-between;font-size:.75rem;flex-wrap:wrap;gap:10px}

.page-hero{padding:50px 0;color:#fff}
.breadcrumb{font-family:var(--font-en);font-size:.75rem;color:var(--steel-light);letter-spacing:.05em;margin-bottom:14px}
.breadcrumb b{color:var(--accent)}
.page-hero h1{font-size:2.2rem;font-weight:800}
.page-hero p{color:var(--steel-light);margin-top:10px;max-width:560px}

.filters-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 22px;background:var(--white);border:1px solid rgba(22,35,74,.08);border-radius:var(--radius);margin-bottom:30px}
.filter-chip{padding:8px 16px;border:1px solid rgba(22,35,74,.15);border-radius:20px;font-size:.8rem;font-weight:700;color:var(--steel);transition:.2s}
.filter-chip.active,.filter-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.search-input{flex:1;min-width:200px;padding:10px 16px;border:1px solid rgba(22,35,74,.15);border-radius:3px;font-family:var(--font-ar);font-size:.85rem}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-field label{font-size:.82rem;font-weight:700;color:var(--navy)}
.form-field input,.form-field select,.form-field textarea{padding:12px 14px;border:1px solid rgba(22,35,74,.15);border-radius:3px;font-family:var(--font-ar);font-size:.88rem;background:var(--white)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent)}

.offer-card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px;position:relative;overflow:hidden}
.offer-badge{position:absolute;top:0;inset-inline-end:0;background:var(--accent);padding:6px 18px;border-radius:0 0 6px 0;font-family:var(--font-en);font-weight:800;font-size:.85rem}
.offer-old{font-family:var(--font-en);color:var(--steel-light);text-decoration:line-through;font-size:.9rem}
.offer-new{font-family:var(--font-en);font-size:1.9rem;font-weight:800;color:var(--accent)}

.flash{padding:14px 20px;border-radius:4px;margin-bottom:20px;font-size:.88rem;font-weight:600}
.flash-success{background:rgba(58,166,107,.12);color:var(--green);border:1px solid rgba(58,166,107,.3)}
.flash-error{background:rgba(224,80,80,.1);color:#e05050;border:1px solid rgba(224,80,80,.3)}

/* ── Admin panel ── */
.admin-body{background:#f2f5fa;min-height:100vh}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{width:230px;background:var(--navy);color:#fff;flex-shrink:0;padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-sidebar .logo{padding:0 20px 22px;border-bottom:1px solid rgba(238,244,250,.1);margin-bottom:14px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:var(--steel-light);font-size:.85rem;font-weight:600;transition:.15s;border-right:3px solid transparent}
.admin-nav a:hover{background:rgba(238,244,250,.05);color:#fff}
.admin-nav a.active{background:rgba(63,143,206,.12);color:var(--accent);border-color:var(--accent)}
.admin-main{flex:1;padding:30px 34px;min-width:0}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.admin-burger{display:none}
.admin-overlay{display:none}
.admin-topbar h1{font-size:1.3rem;font-weight:800}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.admin-stat{background:#fff;border:1px solid rgba(22,35,74,.08);border-radius:6px;padding:20px}
.admin-stat b{font-family:var(--font-en);font-size:1.8rem;color:var(--accent);display:block}
.admin-stat span{font-size:.78rem;color:var(--steel)}
.admin-card{background:#fff;border:1px solid rgba(22,35,74,.08);border-radius:6px;padding:24px;margin-bottom:22px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{text-align:right;font-size:.72rem;color:var(--steel);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:2px solid rgba(22,35,74,.08)}
.admin-table td{padding:12px;border-bottom:1px solid rgba(22,35,74,.06);font-size:.85rem}
.admin-table tr:hover{background:#f8fafc}
.badge{padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700}
.badge-green{background:rgba(58,166,107,.12);color:var(--green)}
.badge-gray{background:rgba(92,107,125,.12);color:var(--steel)}
.badge-orange{background:rgba(63,143,206,.12);color:var(--accent)}
.btn-sm{padding:7px 14px;font-size:.78rem}
.btn-danger{background:#e05050;color:#fff}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy)}
.login-box{background:#fff;border-radius:8px;padding:40px;width:380px;max-width:90vw}
.login-box .logo{justify-content:center;margin-bottom:24px;color:var(--navy)}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .cat-grid,.product-grid,.test-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  /* The burger button toggles .mobile-open on .nav-links, but no rule ever showed
     the menu — on phones the site had no navigation at all. This is that rule. */
  .nav-wrap{position:relative}
  .nav-links.mobile-open{display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% + 12px);
    left:0;right:0;background:var(--navy);border-top:1px solid rgba(238,244,250,.08);
    padding:6px 4px 10px;box-shadow:0 22px 34px rgba(0,0,0,.32);z-index:10}
  .nav-links.mobile-open a{padding:13px 4px;border-bottom:1px solid rgba(238,244,250,.07);font-size:.95rem}
  .nav-links.mobile-open a:last-child{border-bottom:none}
  .nav-links.mobile-open a::after{display:none}
  .nav-links.mobile-open a.active{color:var(--accent)}
  .site-header.floating .nav-links.mobile-open{border-radius:18px;border-top:none;
    background:#0e1734;padding:8px 14px 12px;box-shadow:0 18px 40px rgba(7,14,33,.45)}
  .form-grid{grid-template-columns:1fr}
  .admin-sidebar{position:fixed;right:-230px;z-index:900;transition:.25s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .admin-sidebar.open{right:0}
  .admin-burger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
    border:1px solid rgba(22,35,74,.15);border-radius:4px;color:var(--navy);background:#fff;flex-shrink:0}
  .admin-overlay{display:block;position:fixed;inset:0;background:rgba(10,18,40,.45);z-index:850;opacity:0;pointer-events:none;transition:.25s}
  .admin-overlay.show{opacity:1;pointer-events:auto}
  .admin-main{padding:20px 16px}
  .admin-topbar{gap:12px}
  .admin-topbar h1{font-size:1.05rem;flex:1}
  /* Wide admin tables used to push the page sideways on a phone (content got cut
     off at the edge). Now each card scrolls its own table horizontally instead. */
  .admin-card{padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .admin-table{min-width:520px}
  .admin-body{overflow-x:hidden}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .app-grid{grid-template-columns:repeat(3,1fr)}
  .process-grid{grid-template-columns:repeat(3,1fr);row-gap:24px}
}
@media(max-width:600px){
  /* Mobile header: keep the whole bar on one tidy line — the brand name used to
     wrap ("A1 / Tech") and the tagline took three lines, which blew the header up. */
  .nav-wrap{padding:10px 12px;gap:8px}
  .logo{gap:8px;min-width:0;flex:1}
  .logo img{height:32px}
  .logo-text{font-size:.98rem;white-space:nowrap}
  .logo-sub{display:none}
  .nav-actions{gap:6px;flex-shrink:0}
  .nav-icon-btn{width:34px;height:34px}
  /* the magnifier is redundant on a phone (the products page has a real search
     field) and it was crowding the row until the logo overlapped the EN button */
  .nav-actions .nav-icon-btn:not(.lang-btn){display:none}
  .logo>div{min-width:0;overflow:hidden}
  .logo-text{overflow:hidden;text-overflow:ellipsis}
  .lang-btn{padding:0 8px;font-size:.7rem}
  .btn-quote{font-size:.72rem;padding:9px 10px;white-space:nowrap;line-height:1}
  .nav-toggle{width:34px;height:34px}
  .hero h1{font-size:2rem}
  .cat-grid,.product-grid,.test-grid,.blog-grid{grid-template-columns:1fr}
  .feature-strip{grid-template-columns:1fr}
  .cta-banner{flex-direction:column;text-align:center}
  .footer-grid{grid-template-columns:1fr}
  .admin-stats{grid-template-columns:1fr}
  .app-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .btn-quote{display:none}      /* very small screens: the quote CTA lives in the menu + hero */
  .logo-text{font-size:.9rem}
}


/* ── Floating social icons (icon-only, label reveals on hover) ── */
/* Always anchored far-left and expand rightward, independent of page language/direction */
.floating-social{position:fixed;bottom:24px;z-index:800;display:flex;flex-direction:column;align-items:flex-start;gap:10px;direction:ltr}
.floating-social.side-right{right:20px;left:auto}
.floating-social.side-left{left:20px;right:auto}
.fab{display:flex;align-items:center;color:#fff;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.22);border-radius:26px;overflow:hidden;transition:.2s}
.fab-icon-circle{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fab-label{max-width:0;opacity:0;white-space:nowrap;font-weight:700;font-size:.82rem;line-height:1;transition:max-width .25s ease,opacity .2s ease,padding .25s ease;display:flex;align-items:center}
.fab:hover .fab-label{max-width:120px;opacity:1;padding-left:2px;padding-right:12px}
.fab:hover{transform:translateY(-2px)}
.fab-whatsapp{background:#25d366}
.fab-facebook{background:#1877f2}
.fab-instagram{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}

/* ── Chatbot widget ── */
/* Anchored to a physical screen edge, independent of page language/direction.
   The wrap is exactly the size of the bubble; the panel is positioned absolutely
   against it, so the panel expands INWARD (away from the edge) instead of pushing
   the bubble off the edge. Previously the wrap was as wide as the panel (330px)
   and, in RTL, `align-items:end` parked the bubble on the panel's LEFT side —
   which is why the bubble showed up ~330px away from the screen edge. */
.chatbot-wrap{position:fixed;bottom:24px;z-index:900;width:52px;height:52px;direction:ltr}
.chatbot-wrap.side-right{right:20px;left:auto}
.chatbot-wrap.side-left{left:20px;right:auto}
.chatbot-bubble{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(63,143,206,.4);position:relative;transition:.2s}
.chatbot-bubble svg{width:22px;height:22px}
.chatbot-bubble:hover{transform:translateY(-2px)}
.chatbot-bubble.hidden-bubble{display:none}
.chatbot-ping{position:absolute;top:-1px;left:-1px;width:12px;height:12px;background:var(--green);border-radius:50%;border:2px solid #fff}
.chatbot-panel{position:absolute;bottom:100%;margin-bottom:14px;width:330px;max-width:calc(100vw - 40px);height:0;opacity:0;pointer-events:none;background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(22,35,74,.25);overflow:hidden;display:flex;flex-direction:column;transition:.25s;transform:translateY(10px)}
/* Bubble on the right edge -> panel grows to the LEFT (and vice-versa) */
.chatbot-wrap.side-right .chatbot-panel{right:0;left:auto;transform-origin:bottom right}
.chatbot-wrap.side-left .chatbot-panel{left:0;right:auto;transform-origin:bottom left}
body.lang-ar .chatbot-panel{direction:rtl}
body.lang-en .chatbot-panel{direction:ltr}
.chatbot-panel.open{height:460px;opacity:1;pointer-events:all;transform:translateY(0)}
.chatbot-head{background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chatbot-avatar{width:34px;height:34px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chatbot-head b{display:block;font-size:.88rem}
.chatbot-head span{font-size:.68rem;color:var(--steel-light)}
.chatbot-close{margin-inline-start:auto;background:none;border:none;color:var(--steel-light);font-size:1rem;cursor:pointer}
.chatbot-close:hover{color:#fff}
.chatbot-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#f6f9fc}
.msg{max-width:85%;padding:9px 13px;border-radius:12px;font-size:.82rem;line-height:1.7}
.msg-bot{background:#fff;border:1px solid rgba(22,35,74,.08);align-self:flex-start;border-end-start-radius:3px}
.msg-user{background:var(--accent);color:#fff;align-self:flex-end;border-end-end-radius:3px}
.msg-link{align-self:flex-start;font-size:.78rem;color:var(--accent);font-weight:700;margin-top:-4px}
.chatbot-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.qbtn{background:#fff;border:1px solid rgba(22,35,74,.15);border-radius:20px;padding:6px 12px;font-size:.72rem;color:var(--navy);font-weight:600}
.qbtn:hover{border-color:var(--accent);color:var(--accent)}
.chatbot-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(22,35,74,.08);background:#fff}
.chatbot-input input{flex:1;border:1px solid rgba(22,35,74,.15);border-radius:20px;padding:9px 14px;font-family:var(--font-ar);font-size:.82rem}
.chatbot-input input:focus{outline:none;border-color:var(--accent)}
.chatbot-input button{width:36px;height:36px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chatbot-input button:hover{background:var(--accent2)}

@media(max-width:600px){
  .floating-social{bottom:16px;gap:8px}
  .floating-social.side-right{right:12px}
  .floating-social.side-left{left:12px}
  .fab-whatsapp span.fab-label{display:none}
  .fab-whatsapp{padding:11px;border-radius:50%}
  .fab-icon-circle{width:38px;height:38px}
  .chatbot-wrap{bottom:16px;width:46px;height:46px}
  .chatbot-wrap.side-right{right:12px}
  .chatbot-wrap.side-left{left:12px}
  .chatbot-bubble{width:46px;height:46px}
  .chatbot-panel{margin-bottom:10px;max-width:calc(100vw - 24px)}
  .chatbot-panel.open{height:70vh;max-height:520px}
}


/* ── Two-column page layouts ──
   These used to be inline `display:grid;grid-template-columns:...` on the page
   containers, so they stayed two columns on a phone: the contact page pushed the
   whole document ~150px wider than the screen (everything shifted and got cut),
   and the "من نحن" feature strip was squeezed into a 130px column. As classes they
   can collapse to a single column on small screens. */
.two-col{display:grid;gap:50px}
.two-col>*{min-width:0}   /* grid items may shrink below their content width */
.two-col-even{grid-template-columns:1fr 1fr}
.two-col-form{grid-template-columns:1fr 1.2fr}
.two-col-detail{grid-template-columns:.9fr 1.1fr;gap:44px}

@media(max-width:900px){
  .two-col,.two-col-even,.two-col-form,.two-col-detail{grid-template-columns:minmax(0,1fr);gap:28px}
}

@media(max-width:600px){
  /* Readability + tap targets on phones */
  .cat-tag{font-size:.7rem}
  .cat-count{font-size:.72rem}
  .stock-pill{font-size:.68rem;padding:4px 10px}
  .product-cat{font-size:.68rem}
  .btn-quote{min-height:36px;display:inline-flex;align-items:center}
  .site-footer a{display:inline-block;padding:5px 0}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .blog-thumb span,.blog-meta,.blog-meta span{font-size:.72rem}
  /* stop long English SKUs / URLs from forcing a sideways scroll */
  .product-card,.blog-card,.admin-card,.info-row{overflow-wrap:anywhere}
}

/* The technical labels inside the blueprint SVGs are English and start at x=16.
   In an RTL page they were laid out right-to-left from that point, so they ran off
   the left edge of the drawing and showed as clipped fragments ("EW"). */
svg text{direction:ltr;text-anchor:start}


/* ── Flash messages sit above the page, only when there are any ──
   (this wrapper used to render on every page, leaving a stray light strip
   between the header and the hero) */
.flash-wrap{padding-top:16px;padding-bottom:4px}

/* ── Mobile spacing pass ──
   The desktop rhythm (76px sections, 44px heads, 48/56px banners) is far too
   airy on a 390px screen: everything felt disconnected and needed endless
   scrolling. These are the phone-scale equivalents. */
@media(max-width:600px){
  .container{padding:0 16px}
  .hero{padding:44px 0 40px}
  .hero p{font-size:.95rem;margin-bottom:24px}
  .hero-actions{gap:10px;margin-bottom:26px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{gap:18px 26px;padding-top:18px}
  .hero-badges{gap:8px}
  .hero-badge{font-size:.72rem;padding:7px 13px}
  .hero-video{min-height:200px}

  .section{padding:44px 0}
  .section-head{margin-bottom:24px}
  .section-head h2{font-size:1.45rem}
  .section-head p{font-size:.9rem}

  .page-hero{padding:34px 0 30px}
  .page-hero h1{font-size:1.6rem}
  .page-hero p{font-size:.9rem;margin-top:8px}

  .cta-banner{padding:28px 20px;gap:16px;border-radius:8px}
  .cta-banner h2{font-size:1.2rem}
  .cta-banner p{font-size:.85rem}
  .cta-banner .btn{width:100%;justify-content:center}

  .cat-grid,.product-grid,.blog-grid,.test-grid{gap:14px}
  .cat-card{padding:20px}
  .app-grid{gap:10px}
  .app-card{padding:16px 10px}
  .process-grid{gap:14px}
  .feature-item{padding:20px 18px;border-inline-start:none;border-bottom:1px solid var(--line-dark)}
  .feature-item:last-child{border-bottom:none}
  .markets-row{gap:8px}
  .market-pill{padding:8px 15px;font-size:.8rem}

  .footer-grid{gap:26px}
  .site-footer{padding-top:40px}
  .two-col{gap:24px}
}

@media(max-width:400px){
  .container{padding:0 13px}
  .section{padding:36px 0}
  .hero{padding:34px 0 32px}
}

/* The <html> tag already carries dir="ltr" for the English version, but the CSS
   forced direction:rtl on the body — so the English site rendered mirrored
   (logo on the right, text right-aligned). The page language decides now. */
body.lang-en{direction:ltr}
body.lang-en .product-spec{text-align:left}