/* ═══════════════════════════════════════════
   شركة البيرق الرائد لتجارة المواد بالجملة ذات مسؤولية محدودة — Shared Stylesheet
   al-bayraq-alraed.com
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;900&family=Orbitron:wght@600;700;900&display=swap');

:root {
  --dark:    #0a1628;
  --blue:    #1e40af;
  --cyan:    #0ea5e9;
  --orange:  #f97316;
  --gray:    #64748b;
  --bg:      #f8fafc;
  --text:    #1e293b;
  --textl:   #64748b;
  --white:   #ffffff;
  --border:  #e2e8f0;
  --sh-sm:   0 2px 8px rgba(14,165,233,.08);
  --sh-md:   0 8px 24px rgba(14,165,233,.12);
  --sh-lg:   0 20px 48px rgba(14,165,233,.16);
  --nav-h:   80px;
}

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Cairo', sans-serif;
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.7;
}
img { max-width:100%; display:block; }
a { text-decoration:none; }

/* LAYOUT */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* REVEAL ANIMATION */
.reveal { opacity:0; transform:translateY(28px); transition:all .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══ NAV ═══ */
#nav {
  position:fixed; top:0; left:0; right:0;
  background:rgba(10,22,40,.97);
  backdrop-filter:blur(16px);
  z-index:1000;
  border-bottom:2px solid rgba(14,165,233,.2);
  transition:box-shadow .3s;
}
#nav.scrolled { box-shadow:var(--sh-lg); }

.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
}

/* LOGO */
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img {
  height:70px; width:auto;
  background:#fff;
  padding:7px 12px;
  border-radius:10px;
  object-fit:contain;
}

/* NAV LINKS */
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  color:rgba(255,255,255,.85);
  font-weight:600; font-size:15px;
  transition:color .25s;
  position:relative; padding-bottom:4px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; right:0;
  width:0; height:2px; background:var(--cyan);
  transition:width .3s;
}
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

/* HAMBURGER */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.hamburger span {
  width:26px; height:2px; background:#fff;
  border-radius:2px; transition:all .3s; display:block;
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,6px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-6px); }

/* MOBILE NAV */
.mobile-menu {
  display:none; position:fixed;
  top:var(--nav-h); left:0; right:0; bottom:0;
  background:rgba(10,22,40,.98);
  padding:24px;
  flex-direction:column; gap:4px;
  overflow-y:auto;
  z-index:999;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  color:rgba(255,255,255,.85);
  font-size:16px; font-weight:600;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .25s, padding-right .25s;
}
.mobile-menu a:hover { color:var(--cyan); padding-right:24px; }

/* ═══ PAGE HERO ═══ */
.page-hero {
  background:linear-gradient(135deg,var(--dark),var(--blue));
  padding:140px 0 80px;
  margin-top:var(--nav-h);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827z' fill='%230ea5e9' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.page-hero-inner { position:relative; z-index:1; text-align:center; }
.page-hero h1 {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(32px,5vw,52px);
  color:#fff; margin-bottom:12px; font-weight:900;
}
.page-hero p { font-size:18px; color:rgba(255,255,255,.8); max-width:600px; margin:0 auto; }

/* ═══ SECTION HEADER ═══ */
.sec-head { text-align:center; margin-bottom:56px; }
.sec-tag {
  display:inline-block;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  margin-bottom:12px;
}
.sec-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(28px,4vw,44px);
  color:var(--dark); margin-bottom:14px; font-weight:900;
}
.sec-desc { font-size:17px; color:var(--textl); max-width:660px; margin:0 auto; line-height:1.8; }

/* ═══ FOOTER ═══ */
footer {
  background:var(--dark);
  color:rgba(255,255,255,.8);
  padding:64px 0 28px;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
  margin-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logo { margin-bottom:16px; }
.footer-logo img {
  height:52px; width:auto;
  background:#fff;
  padding:7px 12px;
  border-radius:10px;
}
.footer-brand p {
  font-size:14px; color:rgba(255,255,255,.65);
  line-height:1.8; margin-top:14px;
}
.footer-col h4 { font-size:15px; font-weight:700; color:#fff; margin-bottom:18px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a {
  color:rgba(255,255,255,.65); font-size:14px;
  transition:all .25s;
}
.footer-col ul li a:hover { color:var(--cyan); padding-right:6px; }
.footer-bottom {
  text-align:center; font-size:13px; color:rgba(255,255,255,.4);
}
.footer-bottom a { color:var(--cyan); }

/* ═══ WHATSAPP ═══ */
.wa-float {
  position:fixed; bottom:28px; left:28px;
  z-index:9999;
  width:58px; height:58px;
  background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  opacity:1; pointer-events:all;
}
.wa-float.hide-wa {
  opacity:0 !important;
  pointer-events:none !important;
  transform:scale(0.7) translateY(20px) !important;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 32px rgba(37,211,102,.6); }
.wa-float svg { width:30px; height:30px; fill:#fff; }

/* ═══ BUTTONS ═══ */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff; padding:14px 32px; border-radius:10px;
  font-family:'Cairo',sans-serif; font-size:15px; font-weight:700;
  border:none; cursor:pointer; transition:all .3s;
  box-shadow:0 6px 20px rgba(14,165,233,.3);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(14,165,233,.45); }

.btn-orange {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--orange);
  color:#fff; padding:14px 32px; border-radius:10px;
  font-family:'Cairo',sans-serif; font-size:15px; font-weight:700;
  border:none; cursor:pointer; transition:all .3s;
  box-shadow:0 6px 20px rgba(249,115,22,.3);
}
.btn-orange:hover { transform:translateY(-2px); background:#ea6c0b; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:960px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:600px) {
  .footer-grid { grid-template-columns:1fr; }
  .wa-float { bottom:20px; left:20px; width:50px; height:50px; }
  .wa-float svg { width:26px; height:26px; }
}