/*
 * LUX VISION  —  Brand system
 * Primary #0E4560  |  Secondary #00ADAB
 * The official logo is kept pixel-for-pixel from the client-provided PNG.
 * Navigation keeps the logo on the physical LEFT in Arabic and English.
 */
:root {
  --ink: #0e4560;
  --muted: #607b89;
  --paper: #f7fafb;
  --white: #fff;
  --line: #dce8ed;
  --accent: #00adab;
  --deep: #072d43;
  --brand: #0e4560;
  --aqua: #00adab;
  --pale-aqua: #e9f7f7;
  --shadow-blue: rgba(10, 51, 74, .12);
  --radius: 28px;
}
body { color:#183e54; background:#f7fafb; }
::selection { background:#b8ecec; color:#0e4560; }
:focus-visible { outline:3px solid var(--aqua); outline-offset:4px; }
a, button { -webkit-tap-highlight-color:transparent; }

/* Fixed physical logo location. RTL affects copy, not brand placement. */
.header {
  background:rgba(255,255,255,.965);
  border-bottom:1px solid rgba(14,69,96,.1);
  box-shadow:0 1px 4px rgba(7,40,57,.025);
}
.header.scrolled { box-shadow:0 12px 34px rgba(13,67,91,.09); }
.header-inner { direction:ltr; justify-content:space-between; gap:clamp(18px,2.5vw,42px); }
.brand { display:inline-flex; align-items:center; flex:0 0 auto; gap:0; direction:ltr; padding:0; }
.brand-logo { width:clamp(155px,14.5vw,192px); height:auto; object-fit:contain; display:block; }
.desktop-nav { direction:rtl; margin-inline:auto; justify-content:center; gap:clamp(20px,2.3vw,38px); }
html[dir="ltr"] .desktop-nav { direction:ltr; }
.desktop-nav a { color:#224c63; font-size:13px; font-weight:700; padding:12px 0; position:relative; }
.desktop-nav a::after { content:""; background:var(--accent); height:2px; position:absolute; inset-inline:50%; bottom:4px; transition:inset .25s ease; border-radius:2px; }
.desktop-nav a:hover { color:var(--brand); opacity:1; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { inset-inline:0; }
.header-actions { direction:ltr; gap:16px; }
.lang-switch { color:var(--brand); border:1px solid #d6e4e9; border-radius:50px; background:#fff; padding:10px 15px; font-weight:800; transition:border-color .2s,background .2s; }
.lang-switch:hover { background:var(--pale-aqua); border-color:var(--aqua); }
.pill { border-radius:100px; }
.pill-dark { background:var(--brand); color:#fff; border-color:var(--brand); padding:13px 22px; font-size:13px; }
.pill-dark:hover { background:#155a75; border-color:#155a75; }
.pill-white { background:#fff; color:var(--brand); border-color:#fff; }
.pill-white:hover { background:#ddfbf8; border-color:#ddfbf8; }
.menu-toggle { background:#e9f4f5; color:var(--brand); }
.menu-toggle:hover { background:#dcf1f1; }
.mobile-nav { background:rgba(255,255,255,.99); border-color:#e0edef; }
.mobile-nav a { color:var(--brand); border-color:#e8f0f2; }
.mobile-nav a:hover { color:#008b8b; }

/* Samsung-inspired full-bleed editorial hero, with Lux Vision visual identity. */
.hero { background:var(--deep); }
.hero:before { background:radial-gradient(circle at 26% 18%,rgba(0,173,171,.3) 0,transparent 49%),linear-gradient(115deg,#07283e,#0e4560); }
.hero-photo { filter:saturate(.84) contrast(1.04); opacity:.7; }
.hero-shade {
  background:linear-gradient(180deg,rgba(7,32,49,.35),rgba(4,32,53,.49) 30%,rgba(5,41,60,.85) 100%),
             linear-gradient(90deg,rgba(8,48,69,.72),rgba(6,43,64,.10) 54%,rgba(6,40,61,.67));
}
.hero-content { max-width:1050px; }
.hero h1 { line-height:1.27; letter-spacing:-.055em; text-shadow:0 6px 30px rgba(4,22,33,.22); }
.hero h1 .hero-highlight { color:#6ae6e0; }
.hero-eyebrow { color:#d5f9f9; letter-spacing:.28em; font-size:12px; }
.hero-eyebrow::before,.hero-eyebrow::after { background:rgba(172,245,241,.65); }
.brand-star { font-family:Arial,sans-serif; letter-spacing:0; color:var(--aqua); font-size:15px; }
.hero-description { color:#f0f7fa; opacity:.95; max-width:660px; }
.hero .pill-white { color:#0c455e; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,.12); }
.hero .pill-outline { border-color:rgba(224,251,251,.75); }
.hero .pill-outline:hover { background:rgba(0,173,171,.17); border-color:#8ceee8; }
.hero-bottom-note { color:#e1f3f6; }
.hero-dot { background:var(--aqua); box-shadow:0 0 0 5px rgba(0,173,171,.2); }
.scroll-cue { color:#dcf0f4; }
.scroll-line { background:var(--aqua); }

/* About */
.intro { background:#fff; padding-top:138px; padding-bottom:136px; }
.section-label { color:#057978; font-weight:800; }
.section-label:before { background:var(--aqua); height:3px; }
.intro h2 { color:var(--brand); }
.intro h2 em { color:#007f7c; }
.intro p { color:#5b7280; }
.intro-footnote { color:var(--brand); }
.intro-footnote i { background:var(--aqua); height:3px; }
.intro-visual { border-radius:30px; background:radial-gradient(circle at 50% 44%,#2d7d85,#0b334e 72%); box-shadow:0 30px 55px rgba(4,45,66,.12); }
.intro-visual:before { background:radial-gradient(circle at 58% 48%,#5397a1,#0e4560 70%,#082c43); }
.intro-visual .image-fill { filter:saturate(.85) contrast(1.03); }
.intro-image-wash { background:linear-gradient(0deg,rgba(4,39,57,.82),rgba(9,57,74,.06) 60%); }
.visual-tag strong { color:#97edeb; }

/* Figures: company metrics carry the primary brand block. */
.numbers { background:#0e4560; color:#fff; padding-block:125px 136px; }
.numbers::before { content:"LUX"; color:rgba(255,255,255,.036); }
.numbers::after { content:""; pointer-events:none; position:absolute; right:-140px; top:-230px; width:660px; height:660px; border:1px solid rgba(0,173,171,.16); border-radius:50%; box-shadow:0 0 0 80px rgba(0,173,171,.025),0 0 0 180px rgba(0,173,171,.018); }
.numbers-top, .metrics { z-index:1; position:relative; }
.numbers .section-label { color:#89f0eb; }
.numbers .section-label:before { background:var(--aqua); }
.numbers h2 { color:#fff; }
.numbers-top > p { color:#d1e3eb; }
.metrics { border-top:1px solid rgba(169,230,232,.35); }
.metric { border-color:rgba(180,229,233,.23); }
.metric-value { color:#fff; font-weight:700; }
.metric-value small { color:#70e1db; }
.metric-label { color:#fff; }
.metric-desc { color:#b3d0d9; }
.metric.unverified .metric-value { color:#a6c7d1; }

/* High-impact visual service tiles */
.services { background:#f7fafb; padding-block:140px 154px; }
.services-heading h2 { color:var(--brand); }
.services-heading p { color:#657d87; }
.services-grid { gap:20px; }
.service-card { border-radius:28px; background:#0b425e; box-shadow:0 15px 35px rgba(14,69,96,.06); }
.service-card:focus-visible { outline-color:var(--aqua); }
.service-card::before { background:radial-gradient(circle at 70% 12%,rgba(1,179,177,.7),transparent 45%),linear-gradient(145deg,#0c5a73,#092b44); }
.service-card:nth-child(2)::before { background:radial-gradient(circle at 25% 20%,rgba(0,173,171,.6),transparent 40%),linear-gradient(145deg,#15536b,#052d46); }
.service-card:nth-child(3)::before { background:linear-gradient(145deg,#0e4560,#036c75); }
.service-card:nth-child(4)::before { background:linear-gradient(145deg,#072e4a,#119a9a); }
.service-card:nth-child(5)::before { background:linear-gradient(145deg,#155974,#063a55); }
.service-card:nth-child(6)::before { background:linear-gradient(145deg,#07596c,#092b44); }
.service-img { filter:saturate(.6) hue-rotate(5deg); opacity:.81; }
.service-card:hover .service-img { filter:saturate(.86) hue-rotate(5deg); }
.service-card::after { background:linear-gradient(180deg,rgba(7,49,70,.31),rgba(4,47,65,.12) 28%,rgba(4,34,54,.92) 100%); }
.service-number { background:rgba(6,51,68,.23); border-color:rgba(180,244,239,.65); backdrop-filter:blur(12px); }
.service-card h3 { color:#fff; }
.service-card p { color:#e4f2f4; }
.service-arrow { background:#d7f9f6; color:var(--brand); }
.service-card:hover .service-arrow { background:#fff; }

/* Brand statement */
.promise { background:#e6f5f5; color:var(--brand); padding:101px 0; position:relative; overflow:hidden; }
.promise::before,.promise::after { content:""; position:absolute; width:270px; height:270px; border-radius:50%; border:1px solid rgba(0,173,171,.18); pointer-events:none; }
.promise::before { left:-180px; top:-110px; }
.promise::after { right:-190px; bottom:-130px; }
.promise .quote-overline { color:#057978; }
.promise h2 span { color:var(--brand); }
.promise h2 span:last-child { color:#007f7c; }

/* Footer + contact conversion */
.contact { background:linear-gradient(140deg,#0b3b55,#082f48 65%,#052a42); color:#fff; }
.contact::after { border-color:rgba(0,173,171,.17); box-shadow:0 0 0 100px rgba(0,173,171,.023),0 0 0 200px rgba(0,173,171,.017); }
.contact .section-label { color:#81e8e4; }
.contact .section-label:before { background:#00adab; }
.contact-main { border-color:rgba(217,239,244,.24); }
.contact h2 { color:#fff; }
.contact-main p { color:#d3e5ea; }
.contact .pill-white { color:var(--brand); }
.contact .pill-white:hover { background:#d7f9f6; border-color:#d7f9f6; }
.contact-footer h3 { color:#86ddd9; }
.contact-footer p,.contact-footer a { color:#e3eef3; }
.contact-footer a:hover { color:#7aeae5; }
.footer-bottom { border-color:rgba(235,250,252,.17); color:#a5c6d1; }
.footer-bottom a { color:#cde4ea; }
.to-top { border-color:rgba(137,232,229,.55); }
.to-top:hover { color:#fff; background:rgba(0,173,171,.3); }

@media (max-width: 1100px) {
  .brand-logo { width:164px; }
  .header-inner { gap:16px; }
  .desktop-nav { gap:16px; }
  .header-actions { gap:8px; }
  .header-actions .pill-dark { padding:12px 13px; }
}
@media (max-width: 760px) {
  :root { --header-height:72px; }
  .container { width:min(calc(100% - 38px),var(--container)); }
  .brand-logo { width:145px; height:auto; }
  .header-inner { direction:ltr; gap:8px; }
  .header-actions { gap:8px; }
  .lang-switch { padding:9px 12px; min-width:47px; }
  .mobile-nav { direction:rtl; text-align:right; }
  html[dir="ltr"] .mobile-nav { direction:ltr; text-align:left; }
  .hero { min-height:680px; }
  .hero h1 { letter-spacing:-.045em; }
  .hero h1 .hero-highlight { color:#79eae3; }
  .hero-description { max-width:450px; }
  .intro { padding-block:84px 98px; }
  .intro-visual { border-radius:24px; min-height:400px; }
  .numbers { padding-block:84px 100px; }
  .numbers::after { right:-340px; top:-50px; }
  .services { padding-block:91px 101px; }
  .services-grid { gap:15px; }
  .service-card { border-radius:23px; }
  .promise { padding-block:79px; }
}
@media (max-width: 380px) {
  .brand-logo { width:125px; }
  .header-actions { gap:5px; }
  .lang-switch { padding:9px; }
  .hero h1 { font-size:38px; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav a::after { transition:none; }
}


/* -------------------------------------------------------------
 * Lux Vision — approved revision 23 Oct 2026
 * Keep primary colors, header placement and original stat scales.
 * ------------------------------------------------------------- */
.about-title-line { display:inline-block; white-space:nowrap; max-width:none; }
/* Keep the first line intact across responsive widths; preserve teal 'ordinary'. */
#aboutTitle { font-size:clamp(34px,3.65vw,57px); line-height:1.4; }

/* 5th/last service card is Media & Marketing, keep its original image. */
/* The Media & Marketing image is defined in index.html using the approved local asset. */

/* The brand statement stays on a single line while videos form a clean gallery. */
.promise { padding-block:100px 112px; }
.promise .container { max-width:var(--container); }
.promise .promise-one-line {
  white-space:nowrap; max-width:none; width:100%;
  font-size:clamp(22px,3.22vw,48px); line-height:1.5;
  margin:16px auto 0; letter-spacing:-.045em;
}
.promise-videos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:46px; direction:ltr; }
.video-card { min-width:0; text-align:start; }
.video-preview,.video-embed { display:block; width:100%; aspect-ratio:16 / 9; border:0; border-radius:16px; overflow:hidden; }
.video-preview { position:relative; cursor:pointer; padding:0; background:linear-gradient(135deg,#0e4560,#00adab); color:#fff; box-shadow:0 12px 26px rgba(14,69,96,.10); }
.video-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,31,43,.48),rgba(7,31,43,.08)); pointer-events:none; }
.video-preview img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.video-preview:hover img { transform:scale(1.06); }
.video-play-icon { position:absolute; z-index:1; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:64px; height:64px; background:rgba(255,255,255,.96); color:var(--brand); border-radius:50%; display:grid; place-items:center; box-shadow:0 7px 26px #001b2840; transition:background .2s, transform .2s; }
.video-preview:hover .video-play-icon { background:#bff5ef; transform:translate(-50%,-50%) scale(1.07); }
.video-play-icon svg { width:27px; height:27px; margin-left:4px; }
.video-index { position:absolute; z-index:1; left:17px; bottom:13px; font:700 11px/1 'DM Sans',sans-serif; letter-spacing:.12em; color:#fff; }
.video-youtube-link { display:inline-flex; align-items:center; gap:7px; color:var(--brand); font-weight:700; font-size:13px; margin-top:13px; }
.video-youtube-link:hover { color:#007f7c; text-decoration:underline; }
.video-embed { background:#071f2c; }

/* Icon-only social handles, unchanged footer layout and visual palette. */
.social-links { display:flex; align-items:center; gap:10px; margin-top:17px; direction:ltr; }
.contact-footer .social-links a { display:inline-flex; align-items:center; justify-content:center; width:41px; height:41px; border-radius:50%; border:1px solid rgba(123,228,221,.48); color:#e3f4f5; line-height:1; transition:background .2s, transform .2s, border-color .2s; }
.contact-footer .social-links a:hover { background:rgba(0,173,171,.23); border-color:var(--aqua); transform:translateY(-2px); }
.social-links svg { display:block; width:19px; height:19px; flex:0 0 19px; }
.whatsapp-line { display:inline-flex; align-items:center; gap:9px; direction:ltr; }
.whatsapp-line svg { width:18px; height:18px; color:#75e9dd; flex-shrink:0; }

@media (max-width:1080px) {
  #aboutTitle { font-size:clamp(29px,3.45vw,42px); }
  .promise .promise-one-line { font-size:clamp(18px,3.1vw,36px); }
}
@media (max-width:760px) {
  #aboutTitle { font-size:clamp(24px,7vw,36px); }
  .promise { padding-block:78px 88px; }
  .promise .promise-one-line { font-size:clamp(12px,3.6vw,17px); letter-spacing:-.065em; }
  .promise-videos { grid-template-columns:1fr; gap:26px; margin-top:32px; }
  .video-preview,.video-embed { border-radius:14px; }
  .video-play-icon { width:56px; height:56px; }
  .social-links { margin-top:14px; }
}
@media (max-width:380px) {
  #aboutTitle { font-size:clamp(21px,6.5vw,25px); }
}
@media (max-width:335px) {
  .promise .promise-one-line { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .video-preview img,.video-play-icon,.social-links a { transition:none; }
}

/* English text is longer; keep the two-line headline within its column. */
html[lang="en"] #aboutTitle { font-size:clamp(28px,2.8vw,44px); }
@media (max-width:760px) {
  html[lang="en"] #aboutTitle { font-size:clamp(20px,6.3vw,25px); }
}


/* Restored V3: only the lower footer layout and email icon are adjusted. */
.contact-footer { text-align:center; }
.contact-footer > div { display:flex; flex-direction:column; align-items:center; }
.contact-footer h3,
.contact-footer p,
.contact-footer a { text-align:center; }
.contact-footer .social-links { justify-content:center; }
.contact-footer .mail-line,
.contact-footer .whatsapp-line { display:inline-flex; align-items:center; justify-content:center; gap:9px; direction:ltr; }
.contact-footer .mail-line svg { display:block; width:18px; height:18px; flex:0 0 18px; color:#75e9dd; }
.footer-bottom { position:relative; justify-content:center; padding-inline:50px; text-align:center; }
.footer-bottom > span { max-width:none; }
.footer-bottom > .to-top { position:absolute; inset-inline-end:0; top:50%; transform:translateY(-50%); }
@media(max-width:760px) {
  .contact-footer > div { min-width:0; }
  .footer-bottom { padding-inline:44px; }
  .footer-bottom > span { max-width:100%; }
}

/* About paragraph — balanced reading rhythm, no change to the approved copy. */
.intro .about-copy {
  width: 100%;
  max-width: 560px;
  text-align: start;
}
.intro .about-copy p {
  margin: 0;
  max-width: none;
  font-size: clamp(15.5px, 1.19vw, 17px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.intro .about-copy p:first-child { color: #34576b; }
.intro .about-copy p + p { margin-top: 15px; color: #5b7280; }
@media(max-width:760px) {
  .intro .about-copy { max-width: 100%; }
  .intro .about-copy p { font-size: 15px; line-height: 1.92; }
  .intro .about-copy p + p { margin-top: 12px; }
}