/* =========================================================
   ALWATHEER DIGITAL TECHNOLOGY TRADING EST.
   Design System — Navy / Copper / Silver
   ========================================================= */

:root{
  /* Brand palette — derived from the official logo */
  --navy-950:#060a24;
  --navy-900:#0a0f3c;
  --navy-800:#0d1548;
  --navy-700:#131e5e;
  --navy-100:#e7e9f4;

  --copper-600:#c25a1e;
  --copper-500:#e8822a;
  --copper-400:#f2a24f;
  --copper-tint:#fdf1e6;

  --silver-700:#5b5f72;
  --silver-500:#8b8fa3;
  --silver-300:#c7cad9;
  --silver-100:#eef0f6;

  --paper:#faf9f7;
  --white:#ffffff;
  --ink:#171a2b;
  --ink-soft:#4d5166;

  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:26px;

  --shadow-sm: 0 2px 10px rgba(10,15,60,.06);
  --shadow-md: 0 14px 34px rgba(10,15,60,.10);
  --shadow-lg: 0 28px 70px rgba(10,15,60,.16);

  --gradient-copper: linear-gradient(100deg, var(--copper-500), var(--copper-600));
  --gradient-navy: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);

  --font-display: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-ar: 'Cairo', 'Tajawal', sans-serif;

  --container: 1240px;
  --nav-h: 88px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="rtl"] body{ font-family:var(--font-ar); }

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{
  font-family:var(--font-ar);
  letter-spacing:0;
}
p{ margin:0 0 1em; color:var(--ink-soft); line-height:1.75; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:110px 0; }
.section-tight{ padding:70px 0; }
@media (max-width:900px){
  .section{ padding:72px 0; }
  .section-tight{ padding:50px 0; }
}

:focus-visible{ outline:3px solid var(--copper-500); outline-offset:3px; }

/* ---------- Eyebrow / section heading ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--copper-600);
  margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--gradient-copper); display:inline-block; border-radius:2px;
}
html[dir="rtl"] .eyebrow{ letter-spacing:0; }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.6vw,44px); }
.section-head p{ font-size:17px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px; font-family:var(--font-display);
  font-weight:700; font-size:14.5px; letter-spacing:.01em; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap; cursor:pointer; max-width:100%;
}
@media (max-width:480px){
  .btn{ white-space:normal; text-align:center; line-height:1.3; }
}
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:var(--gradient-copper); color:#fff; box-shadow:0 8px 22px rgba(232,130,42,.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(232,130,42,.4); }
.btn-outline{ border-color:rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(4px); }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); transform:translateY(-2px); }
.btn-navy{ background:var(--navy-900); color:#fff; box-shadow:0 8px 20px rgba(10,15,60,.22); }
.btn-navy:hover{ background:var(--navy-800); transform:translateY(-2px); box-shadow:0 14px 28px rgba(10,15,60,.3); }
.btn-ghost{ border-color:var(--silver-300); color:var(--navy-900); background:#fff; }
.btn-ghost:hover{ border-color:var(--copper-500); color:var(--copper-600); background:var(--copper-tint); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:13px; }
.btn svg{ width:16px; height:16px; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; inset-inline:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  background:linear-gradient(rgba(6,10,36,.55), rgba(6,10,36,.32));
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .35s ease, box-shadow .35s ease, height .35s ease, border-color .35s ease;
}
.nav-inner{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.nav .brand{ display:flex; align-items:center; flex:none; }
.nav .brand img{ height:48px; max-height:52px; width:auto; object-fit:contain; }
.nav.scrolled{
  height:74px; background:rgba(6,10,36,.86); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 40px rgba(6,10,36,.22); border-bottom-color:rgba(255,255,255,.06);
}

.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links > a{
  font-family:var(--font-display); font-size:14.5px; font-weight:600; color:#fff; opacity:.82;
  position:relative; padding:10px 14px; border-radius:9px; transition:.2s ease;
}
.nav-links > a:hover{ opacity:1; background:rgba(255,255,255,.07); }
.nav-links > a.active{ opacity:1; color:var(--copper-400); }
.nav-links > a::after{
  content:""; position:absolute; bottom:4px; inset-inline:14px; height:2px; background:var(--gradient-copper); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
html[dir="rtl"] .nav-links > a::after{ transform-origin:right; }
.nav-links > a:hover::after, .nav-links > a.active::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-burger{ display:none; }
.lang-switch{
  display:flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:6px; background:rgba(255,255,255,.06);
}
.lang-switch button{
  border:0; background:transparent; color:#fff; opacity:.6; font-family:var(--font-display); font-weight:700;
  font-size:12.5px; padding:6px 12px; border-radius:999px; transition:.2s;
}
.lang-switch button.active{ opacity:1; background:var(--gradient-copper); }
.nav-burger{ display:none; }

@media (max-width:980px){
  .nav-links{
    position:fixed; top:var(--nav-h); inset-inline:0; bottom:0; background:var(--navy-950);
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0;
    padding:20px 24px 100px; transform:translateX(100%); transition:transform .35s ease; overflow-y:auto;
  }
  html[dir="rtl"] .nav-links{ transform:translateX(-100%); }
  .nav-links.open{ transform:translateX(0); }
  .nav-links > a{ width:100%; padding:17px 4px; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; opacity:.92; }
  .nav-links > a:hover{ background:transparent; opacity:1; }
  .nav-burger{
    display:flex; width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2); align-items:center; justify-content:center; flex-direction:column; gap:5px;
    transition:.2s;
  }
  .nav-burger span{ width:18px; height:2px; background:#fff; border-radius:2px; transition:.3s ease; }
  .nav-burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.active span:nth-child(2){ opacity:0; }
  .nav-burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav .btn-primary.desktop-only{ display:none; }
}

@media (max-width:560px){
  .nav-inner{ padding:0 16px; gap:10px; }
  .nav .brand img{ height:30px; }
  .nav-actions{ gap:8px; }
  .icon-btn{ width:36px; height:36px; font-size:12px; }
  .lang-switch{ padding:4px; }
  .lang-switch button{ padding:5px 9px; font-size:11px; }
  .nav-burger{ width:38px; height:38px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:var(--gradient-navy); overflow:hidden; padding-top:var(--nav-h);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,10,36,.97) 22%, rgba(6,10,36,.72) 55%, rgba(6,10,36,.4) 100%);
}
html[dir="rtl"] .hero-media::after{
  background:linear-gradient(260deg, rgba(6,10,36,.97) 22%, rgba(6,10,36,.72) 55%, rgba(6,10,36,.4) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:760px; padding:90px 0 70px; }
.hero-inner .eyebrow{ color:var(--copper-400); }
.hero h1{ color:#fff; font-size:clamp(38px,5.4vw,68px); margin-bottom:.4em; }
.hero h1 em{ font-style:normal; color:var(--copper-400); }
.hero p.lead{ color:rgba(255,255,255,.78); font-size:19px; max-width:560px; }
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:44px; margin-top:64px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:clamp(26px,3vw,38px); color:#fff; }
.hero-stat span{ font-size:13px; color:rgba(255,255,255,.6); letter-spacing:.03em; }
.scroll-cue{
  position:absolute; bottom:34px; inset-inline-start:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.14em;
}
.scroll-cue .line{ width:1px; height:38px; background:linear-gradient(#fff, transparent); animation:cue 1.8s infinite; }
@keyframes cue{ 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }

/* wave signature divider — echoes the logo mark */
.wave-divider{ display:block; width:100%; height:64px; margin-top:-1px; }
.wave-divider path{ fill:var(--paper); }
.wave-divider.flip{ transform:scaleY(-1); }
.wave-divider.on-navy path{ fill:var(--navy-950); }

/* ---------- Page header (interior pages) ---------- */
.page-header{
  background:var(--gradient-navy); padding:calc(var(--nav-h) + 92px) 0 90px; position:relative; overflow:hidden;
}
.page-header::before{
  content:""; position:absolute; inset-inline-end:-8%; top:-30%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,130,42,.22), transparent 70%);
}
.page-header .eyebrow{ color:var(--copper-400); }
.page-header h1{ color:#fff; font-size:clamp(32px,4.4vw,52px); margin-bottom:.3em; }
.page-header p{ color:rgba(255,255,255,.72); max-width:600px; font-size:17px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:20px; }
.breadcrumb a{ color:rgba(255,255,255,.8); }
.breadcrumb a:hover{ color:var(--copper-400); }

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); border:1px solid rgba(10,15,60,.06);
  transition:box-shadow .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); border-color:rgba(232,130,42,.18); }

.grid{ display:grid; gap:28px; grid-template-columns:minmax(0,1fr); }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- Service cards ---------- */
.service-card{ padding:36px 30px; position:relative; overflow:hidden; }
.service-card .icon{
  width:56px; height:56px; border-radius:16px; background:var(--navy-100); display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; color:var(--navy-900);
}
.service-card .icon svg{ width:26px; height:26px; }
.service-card h3{ font-size:20px; }
.service-card p{ font-size:14.5px; margin-bottom:1.2em; }
.service-card a.more{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--copper-600); display:inline-flex; align-items:center; gap:6px; }
.service-card::before{
  content:""; position:absolute; top:0; inset-inline-start:0; width:4px; height:0; background:var(--gradient-copper); transition:.35s ease;
}
.service-card:hover::before{ height:100%; }

/* ---------- Product / catalogue cards ---------- */

.product-card{
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s ease;
    border:1px solid #ececec;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.product-card .thumb{
    aspect-ratio:5/4;
    overflow:hidden;
    background:#f7f7f7;
}

.product-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.product-card:hover .thumb img{
    transform:scale(1.08);
}

.product-card .body{
    padding:26px;
    text-align:center;
}

.product-card h3{
    font-size:22px;
    font-weight:800;
    margin:12px 0;
    color:#0A1A33;
}

.product-card .tag{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    color:#B8860B;
    text-transform:uppercase;
    margin-bottom:6px;
}

.product-card p{
    display:none;
}

.view-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    color:#0A1A33;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.view-link:hover{
    color:#B8860B;
    gap:14px;
}

/* ---------- Stats / counters ---------- */
.stats-strip{ background:var(--navy-950); padding:64px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat b{ font-family:var(--font-display); font-size:clamp(30px,4vw,46px); color:#fff; display:block; }
.stat span{ color:rgba(255,255,255,.6); font-size:13.5px; letter-spacing:.03em; }
@media (max-width:800px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-inline-start:30px; }
.timeline::before{ content:""; position:absolute; inset-inline-start:5px; top:6px; bottom:6px; width:2px; background:var(--silver-300); }
.timeline-item{ position:relative; padding-bottom:44px; padding-inline-start:30px; }
.timeline-item::before{
  content:""; position:absolute; inset-inline-start:-24.5px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--gradient-copper); box-shadow:0 0 0 5px var(--copper-tint);
}
.timeline-item b{ font-family:var(--font-display); color:var(--copper-600); display:block; font-size:14px; margin-bottom:4px; }

/* ---------- Logos strip ---------- */
.logo-strip{ background:#fff; padding:26px 0; border-block:1px solid var(--silver-100); }
.logo-track{ display:flex; align-items:center; gap:70px; }
.logo-track img{ height:46px; width:auto; filter:grayscale(1) opacity(.65); transition:.25s; }
.logo-track img:hover{ filter:none; }

.clients-frame{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--silver-100); background:#fff;
}

/* ---------- Testimonials (Swiper) ---------- */
.testi-card{ padding:40px 36px; }
.testi-card .stars{ color:var(--copper-500); font-size:14px; margin-bottom:16px; letter-spacing:2px; }
.testi-card p{ font-size:17px; color:var(--navy-900); font-family:var(--font-display); font-weight:600; line-height:1.6; }
.testi-card .who{ margin-top:22px; display:flex; align-items:center; gap:12px; }
.testi-card .who .dot{ width:38px; height:38px; border-radius:50%; background:var(--gradient-copper); }
.testi-card .who b{ display:block; font-size:14px; color:var(--navy-900); }
.testi-card .who span{ font-size:12.5px; color:var(--ink-soft); }
.swiper-pagination-bullet{ background:var(--silver-300); opacity:1; }
.swiper-pagination-bullet-active{ background:var(--copper-500); }

/* ---------- FAQ (accordion) ---------- */
.faq-item{ border-bottom:1px solid var(--silver-100); padding:22px 0; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; font-family:var(--font-display); font-weight:700; color:var(--navy-900); font-size:16.5px; }
.faq-q .plus{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--silver-300); display:flex; align-items:center; justify-content:center; transition:.3s; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); background:var(--gradient-copper); border-color:transparent; color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a{ max-height:280px; }
.faq-a p{ padding-top:14px; font-size:15px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--navy-900); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--silver-300); border-radius:var(--radius-sm); padding:14px 16px; font-size:15px; font-family:inherit;
  background:#fff; color:var(--ink); transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--copper-500); outline:none; box-shadow:0 0 0 4px var(--copper-tint); }
.field-upload{ border:1.5px dashed var(--silver-300); border-radius:var(--radius-sm); padding:26px; text-align:center; color:var(--ink-soft); font-size:14px; }
.field-upload:hover{ border-color:var(--copper-500); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.footer{ background:var(--navy-950); color:rgba(255,255,255,.7); padding-top:80px; }
.footer h4{ color:#fff; font-size:15.5px; margin-bottom:20px; }
.footer .brand img{ height:42px; margin-bottom:18px; }
.footer p{ color:rgba(255,255,255,.55); font-size:14.5px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; min-width:0; }
.footer-grid > div{ min-width:0; }
.footer ul li{ margin-bottom:12px; }
.footer ul a{ font-size:14.5px; color:rgba(255,255,255,.65); }
.footer ul a:hover{ color:var(--copper-400); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--gradient-copper); border-color:transparent; }
.social-row svg{ width:16px; height:16px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } }
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer ul a, .footer ul span{ overflow-wrap:break-word; word-break:break-word; }
}

/* ---------- Sticky WhatsApp ---------- */
.float-whatsapp{
  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 10px 26px rgba(37,211,102,.4);
}
.float-whatsapp svg{ width:28px; height:28px; fill:#fff; }
.float-whatsapp:hover{ transform:scale(1.08); }

/* ---------- 404 ---------- */
.page-404{ min-height:100vh; display:flex; align-items:center; background:var(--gradient-navy); text-align:center; }
.page-404 .code{ font-family:var(--font-display); font-size:clamp(80px,16vw,180px); color:#fff; opacity:.14; line-height:1; }
.page-404 h1{ color:#fff; margin-top:-30px; }
.page-404 p{ color:rgba(255,255,255,.7); max-width:440px; margin-inline:auto; }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.muted{ color:var(--silver-500); }
.tag-pill{ display:inline-block; padding:6px 14px; border-radius:999px; background:var(--copper-tint); color:var(--copper-600); font-size:12px; font-weight:700; font-family:var(--font-display); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; align-items:center; }
.split > *{ min-width:0; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.img-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.badge-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }
.badge{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--navy-900); font-weight:600; }
.badge .dot-ico{ width:34px; height:34px; border-radius:10px; background:var(--copper-tint); color:var(--copper-600); display:flex; align-items:center; justify-content:center; flex:none; }

/* language content is swapped in JS (see applyLang in main.js) — no CSS toggling needed */

/* AOS-safe: avoid layout shift before init */
[data-aos]{ pointer-events:auto; }

::selection{ background:var(--copper-500); color:#fff; }

/* Defensive: never let long emails/URLs/phone strings force horizontal overflow */
a, p, li, span, td{ overflow-wrap:break-word; }
img, video, iframe{ max-width:100%; }
.container{ overflow-x:clip; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--silver-300); border-radius:10px; }

/* =========================================================
   PHASE 2 — Loader, Skip Link, Mega Menu, Search, FAB stack
   ========================================================= */

/* Skip link */
.skip-link{
  position:fixed; top:-60px; inset-inline-start:16px; z-index:3000; background:var(--navy-900); color:#fff;
  padding:12px 20px; border-radius:8px; font-family:var(--font-display); font-weight:700; font-size:13px; transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* Preloader */
#preloader{
  position:fixed; inset:0; z-index:5000; background:var(--navy-950); display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ width:64px; height:64px; animation:pulse-logo 1.1s ease-in-out infinite; }
.preloader-mark img{ width:100%; height:100%; object-fit:contain; }
@keyframes pulse-logo{ 0%,100%{ transform:scale(.9); opacity:.7; } 50%{ transform:scale(1.05); opacity:1; } }

/* Mega-menu style dropdowns */
.has-dropdown{ position:relative; }
.drop-trigger{
  background:none; border:0; font-family:var(--font-display); font-size:14.5px; font-weight:600; color:#fff; opacity:.82;
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:9px; transition:.2s ease;
}
.drop-trigger i{ font-size:10px; transition:transform .25s; }
.has-dropdown:hover .drop-trigger, .has-dropdown.open .drop-trigger, .has-dropdown:focus-within .drop-trigger{ opacity:1; background:rgba(255,255,255,.07); }
.has-dropdown:hover .drop-trigger i, .has-dropdown.open .drop-trigger i, .has-dropdown:focus-within .drop-trigger i{ transform:rotate(180deg); }
.dropdown-panel{
  position:absolute; top:calc(100% + 14px); inset-inline-start:-16px; width:340px; background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:14px; display:grid; gap:4px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s ease; border:1px solid var(--silver-100);
}
.has-dropdown:hover .dropdown-panel, .has-dropdown.open .dropdown-panel, .has-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel a{ display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:10px; color:var(--navy-900); }
.dropdown-panel a:hover, .dropdown-panel a:focus-visible{ background:var(--silver-100); }
.dropdown-panel a i{ width:34px; height:34px; border-radius:9px; background:var(--copper-tint); color:var(--copper-600); display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; }
.dropdown-panel a b{ display:block; font-family:var(--font-display); font-size:13.5px; }
.dropdown-panel a small{ display:block; font-size:12px; color:var(--ink-soft); font-weight:400; }

@media (max-width:980px){
  .has-dropdown{ width:100%; }
  .drop-trigger{ color:#fff; width:100%; justify-content:space-between; padding:17px 4px; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; opacity:.92; }
  .drop-trigger:hover{ background:transparent; }
  .dropdown-panel{
    position:static; width:100%; box-shadow:none; border:0; background:transparent; padding:4px 0 10px 10px; display:none;
    opacity:1; visibility:visible; transform:none;
  }
  .has-dropdown.open .dropdown-panel{ display:grid; }
  .dropdown-panel a{ width:auto; color:rgba(255,255,255,.75); border-bottom:0; padding:11px 12px; }
  .dropdown-panel a b{ color:#fff; }
  .dropdown-panel a:hover{ background:rgba(255,255,255,.06); }
  .dropdown-panel a i{ background:rgba(232,130,42,.16); color:var(--copper-400); }
}

/* Search */
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; transition:.2s;
}
.icon-btn:hover{ background:var(--gradient-copper); border-color:transparent; }
.search-overlay{
  position:fixed; inset:0; z-index:4000; background:rgba(6,10,36,.7); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; opacity:0; visibility:hidden; transition:.25s;
}
.search-overlay.open{ opacity:1; visibility:visible; }
.search-box{ width:min(620px,92vw); background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.search-input-row{ display:flex; align-items:center; gap:14px; padding:22px 26px; border-bottom:1px solid var(--silver-100); }
.search-input-row i:first-child{ color:var(--silver-500); }
.search-input-row input{ flex:1; border:0; outline:none; font-size:17px; font-family:var(--font-body); background:transparent; }
.search-input-row button{ border:0; background:var(--silver-100); width:32px; height:32px; border-radius:50%; color:var(--ink-soft); }
.search-results{ max-height:50vh; overflow-y:auto; padding:10px; }
.search-results a{ display:flex; flex-direction:column; padding:14px 16px; border-radius:10px; }
.search-results a:hover{ background:var(--silver-100); }
.search-results a b{ font-family:var(--font-display); font-size:14.5px; color:var(--navy-900); }
.search-results a span{ font-size:12.5px; color:var(--ink-soft); }
.search-empty{ padding:30px; text-align:center; color:var(--silver-500); font-size:14px; }

/* FAB stack (scroll-top + whatsapp) */
.fab-stack{ position:fixed; bottom:24px; inset-inline-end:24px; z-index:900; display:flex; flex-direction:column; gap:12px; align-items:center; }
.fab{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  transition:.2s;
}
.fab-top{ background:#fff; color:var(--navy-900); border:1px solid var(--silver-100); opacity:0; visibility:hidden; transform:translateY(10px); font-size:13px; }
.fab-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.fab-top:hover{ background:var(--navy-900); color:#fff; }
.fab-whatsapp{ width:48px; height:48px; background:#25D366; box-shadow:0 8px 20px rgba(37,211,102,.35); }
.fab-whatsapp svg{ width:22px; height:22px; fill:#fff; }
.fab-whatsapp:hover{ transform:scale(1.08); box-shadow:0 10px 24px rgba(37,211,102,.45); }

/* Page loading progress bar on internal nav (progressive enhancement, cosmetic) */
.blog-card{ overflow:hidden; }
.blog-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--silver-100); }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .thumb img{ transform:scale(1.06); }
.blog-card .body{ padding:24px 26px 28px; }
.blog-card .meta{ display:flex; gap:14px; font-size:12.5px; color:var(--silver-500); margin-bottom:10px; }
.blog-card h3{ font-size:19px; }
.blog-card p{ font-size:14.5px; }

.article-body h2{ font-size:26px; margin-top:1.4em; }
.article-body h3{ font-size:20px; margin-top:1.2em; }
.article-body p{ font-size:16.5px; line-height:1.85; }
.article-body ul{ margin:0 0 1.2em; padding-inline-start:22px; list-style:disc; }
.article-body ul li{ margin-bottom:.5em; color:var(--ink-soft); font-size:16px; line-height:1.7; }
.article-hero-img{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:40px; }

.job-card{ padding:30px 32px; }
.job-card .meta-row{ display:flex; gap:18px; flex-wrap:wrap; margin:10px 0 16px; }
.job-card .meta-row span{ font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }

.cert-card{ padding:34px 30px; text-align:center; }
.cert-card .icon{ margin:0 auto 20px; }

.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-chip{
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--silver-300); font-family:var(--font-display); font-weight:700;
  font-size:13px; color:var(--navy-900); transition:.2s; background:#fff;
}
.filter-chip.active, .filter-chip:hover{ background:var(--gradient-copper); color:#fff; border-color:transparent; }

@media (max-width:640px){
  .fab-stack{ bottom:16px; inset-inline-end:16px; gap:10px; }
  .fab{ width:40px; height:40px; }
  .fab-whatsapp{ width:44px; height:44px; }
  .fab-whatsapp svg{ width:20px; height:20px; }
}

/* Product Categories Responsive */

@media (max-width:1200px){
    .grid-4{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:992px){
    .grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:576px){
    .grid-4{
        grid-template-columns:1fr;
    }
}

.product-card{
    text-decoration:none;
    color:inherit;
}

.card-arrow{
    margin-top:18px;
    display:flex;
    justify-content:flex-end;
    font-size:20px;
    color:#0A1A33;
    transition:.3s;
}

.product-card:hover .card-arrow{
    transform:translateX(8px);
    color:#B8860B;
}

/* CTA */

.cta-section{

    background:#0f172a;

}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

    padding:70px 30px;

}

.cta-box h2{

    color:#fff;

    margin-bottom:20px;

}

.cta-box p{

    color:rgba(255,255,255,.75);

    max-width:650px;

    margin:0 auto 35px;

}

/* ===== Manager Desks Page ===== */

.cta-section{

    background:#0f172a;

}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

    padding:70px 30px;

}

.cta-box h2{

    color:#fff;

    margin-bottom:20px;

}

.cta-box p{

    color:rgba(255,255,255,.75);

    max-width:650px;

    margin:0 auto 35px;

}

.fa-2x{

    color:var(--copper-600);

    margin-bottom:20px;

}

/* ===========================
CATEGORY NAVIGATION
=========================== */

.category-navigation{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:30px;

flex-wrap:wrap;

}

.category-navigation a{

padding:14px 28px;

border-radius:12px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.prev-category,
.next-category{

background:#fff;

border:1px solid #ddd;

color:#0A1A33;

}

.prev-category:hover,
.next-category:hover{

background:#0A1A33;

color:#fff;

}

.all-category{

background:#B8860B;

color:#fff;

}

.all-category:hover{

background:#9a7007;

}