:root {
  --navy: #07111f;
  --navy-2: #0b1b31;
  --blue: #0d4f93;
  --electric: #1685e8;
  --red: #e21e2c;
  --ink: #121a25;
  --muted: #647184;
  --line: #dce2e8;
  --paper: #f6f8fb;
  --white: #fff;
  --container: 1180px;
  --radius: 22px;
  --shadow: 0 18px 55px rgba(7,17,31,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Cairo", "Inter", sans-serif; }
body.lang-en { font-family: "Inter", "Cairo", sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.top-strip { background: #050c16; color: #dce7f4; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.top-strip-inner { min-height: 36px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.language-switcher { display:flex; align-items:center; gap:8px; direction:ltr; }
.lang-btn { border:0; padding:0; background:none; color:#9fb0c4; cursor:pointer; font:600 12px inherit; }
.lang-btn.active { color:#fff; }
.lang-separator { color:#425064; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(7,17,31,.96); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav-wrap { min-height:76px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }
.brand-mark { width:55px; height:55px; object-fit:contain; }
.brand-copy strong, .footer-brand strong { color:#fff; font-family:"Inter", sans-serif; font-size:20px; letter-spacing:-.5px; }
.brand-copy em, .footer-brand em { color:#f42a37; font-style:normal; }
.brand-copy small, .footer-brand span { display:block; color:#b8c5d6; font-size:12px; font-weight:700; line-height:1.2; }
.main-nav { display:flex; align-items:center; justify-content:center; gap:26px; flex:1; }
.main-nav a, .footer-links a { color:#ccd6e2; font-size:13px; font-weight:600; transition:.2s ease; }
.main-nav a:hover, .footer-links a:hover { color:#fff; }
.nav-cta { background:var(--red); color:#fff; padding:10px 17px; border-radius:12px; font-weight:800; font-size:13px; }
.menu-toggle, .mobile-menu { display:none; }
.hero { position:relative; overflow:hidden; background: radial-gradient(circle at 76% 32%, rgba(23,117,208,.30), transparent 25%), linear-gradient(120deg, #06101d 0%, #0b1d33 54%, #07111f 100%); color:#fff; min-height:670px; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
.hose-line { position:absolute; border:8px solid rgba(19,132,232,.22); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(-12deg); filter:blur(.2px); }
.hose-line-one { width:680px; height:280px; right:-120px; top:120px; }
.hose-line-two { width:520px; height:210px; left:-230px; bottom:-80px; border-color:rgba(226,30,44,.18); border-left-color:transparent; border-bottom-color:transparent; }
.hero-inner { position:relative; z-index:2; min-height:670px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px; }
.hero-copy { padding:55px 0; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#8eb6df; text-transform:uppercase; letter-spacing:1.8px; font-size:11px; font-weight:800; }
.eyebrow span:first-child { width:38px; height:2px; background:var(--red); display:block; }
h1 { margin:14px 0 0; font-size:clamp(48px, 7vw, 86px); line-height:1; letter-spacing:-2px; }
.hero-en { margin-top:12px; font-family:Inter,sans-serif; font-weight:700; font-size:clamp(28px,3.2vw,44px); letter-spacing:-1px; }
.hero-en b { color:var(--red); }
.hero-tagline { margin:20px 0 0; max-width:670px; font-size:clamp(20px,2vw,30px); line-height:1.5; font-weight:800; color:#f6f8fb; }
.hero-actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn { min-height:48px; padding:0 22px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.btn-primary { background:var(--red); box-shadow:0 8px 20px rgba(226,30,44,.23); }
.btn-ghost { border:1px solid rgba(255,255,255,.18); color:#eaf1f8; background:rgba(255,255,255,.04); }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:46px; max-width:710px; }
.hero-stats div { padding:14px 16px; border-top:1px solid rgba(255,255,255,.11); }
.hero-stats strong { display:block; font:800 18px Inter,sans-serif; color:#fff; }
.hero-stats span { display:block; margin-top:4px; color:#8fa0b4; font-size:11px; }
.hero-logo-panel { align-self:stretch; display:flex; align-items:center; justify-content:center; position:relative; }
.logo-glow { position:absolute; width:390px; height:390px; border-radius:50%; background:radial-gradient(circle, rgba(22,133,232,.18), transparent 65%); }
.hero-logo-panel img { position:relative; width:min(100%, 570px); max-height:430px; object-fit:contain; mix-blend-mode:screen; filter:drop-shadow(0 28px 38px rgba(0,0,0,.3)); }
.section { padding:100px 0; }
.section.light { background:#fff; }
.two-col { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.section-photo { min-height:470px; border-radius:28px; position:relative; overflow:hidden; background:linear-gradient(140deg, #09172a, #11375b); box-shadow:var(--shadow); }
.photo-hoses:before, .photo-hoses:after { content:""; position:absolute; width:75%; height:28px; border-radius:40px; background:linear-gradient(180deg,#1a1f25,#05070a); border:2px solid #8595a6; transform:rotate(-21deg); left:-6%; top:39%; box-shadow:0 20px 35px rgba(0,0,0,.35); }
.photo-hoses:after { width:64%; top:53%; left:10%; transform:rotate(-18deg); border-color:#607286; }
.photo-overlay { position:absolute; inset:0; background:radial-gradient(circle at 60% 20%, rgba(226,30,44,.22), transparent 25%), linear-gradient(145deg,rgba(13,79,147,.4),rgba(7,17,31,.75)); }
.photo-label { position:absolute; bottom:28px; right:28px; font:800 40px/1 Inter,sans-serif; letter-spacing:-2px; color:#fff; }
.photo-label span { color:var(--red); }
.kicker { color:var(--red); text-transform:uppercase; letter-spacing:1.5px; font:800 11px/1 Inter,sans-serif; }
.section-copy h2, .section-heading h2, .quality-copy h2, .contact-wrap h2 { margin:12px 0 15px; font-size:clamp(30px,4vw,50px); line-height:1.18; letter-spacing:-1px; }
.section-copy p, .section-heading p, .quality-copy p, .contact-wrap p { color:var(--muted); font-size:16px; line-height:2; margin:0; }
.about-points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; }
.about-points div { border:1px solid var(--line); border-radius:16px; padding:18px 15px; text-align:center; }
.about-points b { display:block; color:var(--blue); font:800 24px Inter,sans-serif; }
.about-points span { display:block; color:#6a7584; font-size:11px; margin-top:6px; }
.section.dark { background:var(--navy); color:#fff; }
.section-heading.centered { text-align:center; max-width:740px; margin:0 auto 44px; }
.section.dark .section-heading p { color:#91a3b8; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.service-card { position:relative; border:1px solid rgba(255,255,255,.08); background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); min-height:260px; border-radius:20px; padding:26px; transition:.25s ease; }
.service-card:hover { transform:translateY(-5px); border-color:rgba(22,133,232,.36); }
.service-card.featured { background:linear-gradient(155deg,rgba(226,30,44,.16),rgba(255,255,255,.02)); }
.service-no { font:700 10px Inter,sans-serif; color:#6f849b; position:absolute; top:20px; left:22px; }
.icon-ring { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(22,133,232,.6); color:#8dccff; font:800 20px Inter,sans-serif; margin-bottom:50px; }
.service-card h3 { margin:0; font-size:22px; }
.service-card p { color:#8191a5; margin:8px 0 0; font:600 12px Inter,sans-serif; }
.quality-section { background:linear-gradient(120deg,#edf3f8,#fff); }
.quality-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.quality-badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.quality-badges span { padding:10px 12px; border:1px solid #d6dde5; border-radius:12px; color:#3c4c5e; font:700 10px Inter,sans-serif; }
.quality-visual { min-height:330px; position:relative; border-radius:26px; background:linear-gradient(145deg,#0b1d33,#06101d); overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.quality-visual:before { content:""; position:absolute; width:440px; height:180px; border:8px solid rgba(22,133,232,.18); border-radius:50%; transform:rotate(-18deg); }
.metal-card { position:relative; z-index:2; width:230px; padding:30px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(145deg,#f5f7fa,#8995a2); color:#122236; border-radius:18px; box-shadow:0 20px 40px rgba(0,0,0,.35); font:900 36px/1 Inter,sans-serif; letter-spacing:-1px; }
.metal-card span { color:var(--red); }
.metal-line { position:absolute; width:75%; height:16px; background:linear-gradient(180deg,#353b44,#090d12); border:2px solid #8d9aab; border-radius:50px; transform:rotate(-12deg); bottom:45px; right:-60px; }
.locations-section { background:#f6f8fb; }
.section-heading { max-width:800px; margin-bottom:35px; }
.locations-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.location-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; min-height:220px; display:flex; flex-direction:column; box-shadow:0 10px 25px rgba(17,29,45,.05); }
.location-card .city { color:var(--blue); font:800 24px Inter,sans-serif; }
.location-card .city-ar { font-size:18px; font-weight:800; margin-top:3px; }
.location-card .address { color:#6a7584; font-size:13px; line-height:1.9; margin:14px 0 auto; }
.location-card .map-btn { align-self:flex-start; margin-top:16px; color:var(--red); font-size:12px; font-weight:800; }
.contact-section { background:linear-gradient(135deg,#081221,#0c2139); color:#fff; }
.contact-wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:45px; align-items:center; }
.contact-wrap p { color:#91a3b8; }
.contact-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.contact-card { min-height:135px; padding:22px; border:1px solid rgba(255,255,255,.10); border-radius:18px; background:rgba(255,255,255,.04); display:flex; flex-direction:column; justify-content:space-between; }
.contact-card.accent { background:linear-gradient(145deg,rgba(226,30,44,.9),rgba(177,18,30,.88)); }
.contact-card span { color:#8ea1b6; font:700 10px Inter,sans-serif; letter-spacing:1px; }
.contact-card strong { font-size:16px; word-break:break-word; }
.contact-card.accent span { color:#ffd3d7; }
.site-footer { background:#050c16; color:#8da0b6; padding:35px 0 22px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand { display:flex; align-items:center; gap:11px; }
.footer-brand img { width:48px; height:48px; object-fit:contain; }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:18px; font-size:11px; }
@media (max-width:980px) {
  .main-nav { gap:15px; }
  .nav-cta { display:none; }
  .hero-inner, .quality-wrap, .contact-wrap, .two-col { grid-template-columns:1fr; }
  .hero-logo-panel { order:-1; min-height:300px; }
  .hero-inner { padding:35px 0 60px; }
  .hero-copy { padding:0; }
  .hero { min-height:auto; }
  .service-grid, .locations-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .container { width:min(calc(100% - 28px), var(--container)); }
  .main-nav { display:none; }
  .menu-toggle { display:block; margin-inline-start:auto; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#fff; width:42px; height:42px; border-radius:11px; font-size:18px; }
  .mobile-menu { display:none; padding:10px 14px 16px; background:#07111f; border-top:1px solid rgba(255,255,255,.07); }
  .mobile-menu.open { display:grid; }
  .mobile-menu a { padding:11px 10px; color:#d6dfeb; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px; }
  .brand-copy small { font-size:10px; }
  .brand-mark { width:48px; height:48px; }
  .top-strip-inner { min-height:34px; }
  .top-strip-inner > span { display:none; }
  h1 { font-size:50px; }
  .hero-tagline { font-size:20px; }
  .hero-stats { gap:8px; }
  .hero-stats div { padding:12px 8px; }
  .section { padding:74px 0; }
  .section-photo { min-height:330px; }
  .about-points { grid-template-columns:1fr; }
  .contact-cards { grid-template-columns:1fr; }
  .footer-top, .footer-bottom { flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px) {
  .service-grid, .locations-grid { grid-template-columns:1fr; }
  .hero-logo-panel { min-height:240px; }
  .hero-logo-panel img { width:105%; }
}