/* ==========================================================================
   Layout — Topbar / Header / Nav / Footer / Hero
   ========================================================================== */

/* ---------- Utility topbar ---------- */
.topbar{
  background:var(--graphite-900); color:var(--text-on-dark-muted);
  font-size:.82rem;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem; flex-wrap:wrap; row-gap:.4rem; }
.topbar__contacts{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar__contacts a{ display:inline-flex; align-items:center; gap:.45em; color:var(--text-on-dark-muted); transition:color var(--dur-fast); }
.topbar__contacts a:hover{ color:var(--bronze-300); }
.topbar__contacts svg{ width:14px; height:14px; flex:none; opacity:.85; }
.topbar__whatsapp{ gap:.55rem !important; }
.topbar__whatsapp::before{ content:""; width:.65rem; height:.65rem; border:2px solid #25d366; border-radius:50%; flex:none; }
.topbar__whatsapp strong{ color:var(--bronze-300); font-size:.78rem; }
.topbar__lang{ display:flex; align-items:center; gap:.6rem; }
.lang-switch{ display:flex; border:1px solid rgba(247,244,239,.28); border-radius:20px; overflow:hidden; }
.lang-switch a{ padding:.3em .85em; font-weight:700; font-size:.78rem; color:var(--text-on-dark-muted); }
.lang-switch a[aria-current="true"]{ background:var(--bronze-500); color:var(--graphite-900); }
.lang-switch a:not([aria-current="true"]):hover{ color:var(--white); }

@media (max-width:760px){
  .hide-mobile{ display:none !important; }
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:1px solid rgba(34,31,30,.12);
}
.site-header::before{
  /* Frosted-glass layer lives on a pseudo-element (not the header itself) so
     backdrop-filter never creates a fixed-position containing block for the
     mobile nav overlay nested inside .site-header. */
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.45rem; }
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand img{ height:64px; width:auto; }
.brand__logo{ filter:drop-shadow(0 3px 10px rgba(0,0,0,.28)); }
.brand__text{ display:flex; flex-direction:column; line-height:1.25; }
.brand__text strong{ font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--graphite-900); white-space:nowrap; }
.brand__text span{ font-size:.72rem; color:var(--maroon-800); font-weight:700; letter-spacing:.03em; }

.main-nav{ display:flex; align-items:center; gap:2.1rem; }
.main-nav__inner{ display:contents; }
.main-nav ul{ display:flex; align-items:center; gap:1.7rem; }
.main-nav a{
  font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--graphite-900);
  position:relative; padding-block:.4rem;
}
.main-nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0;
  background:var(--bronze-300); transition:width var(--dur) var(--ease);
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{ width:100%; }
.main-nav a:hover,.main-nav a[aria-current="page"]{ color:var(--maroon-800); }

.header-cta{ display:flex; align-items:center; gap:.7rem; }
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--white); border:1px solid var(--border); color:var(--maroon-800);
  transition:background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ background:var(--maroon-800); color:#fff; border-color:var(--maroon-800); transform:translateY(-1px); }

.nav-toggle{
  display:none; flex:none; width:42px; height:42px; border-radius:8px; border:1px solid var(--border);
  background:var(--cream); border-color:var(--border); align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--graphite-900); display:block; transition:transform var(--dur), opacity var(--dur); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:980px){
  .main-nav{
    position:fixed; inset-inline:0; top:calc(var(--headerH,120px)); bottom:0; background:var(--cream);
    flex-direction:column; align-items:stretch; padding:1.4rem 0 2rem; gap:0;
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    overflow-y:auto; border-top:1px solid var(--border);
  }
  .main-nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .main-nav a{ color:var(--graphite-800); }
  .main-nav a:hover,.main-nav a[aria-current="page"]{ color:var(--maroon-800); }
  .main-nav li{ border-bottom:1px solid var(--border); }
  .main-nav a{ display:block; padding:1rem 24px; }
  .main-nav a::after{ display:none; }
  .main-nav__cta{ padding:1.2rem 24px 0; display:flex; flex-direction:column; gap:.7rem; }
  .nav-toggle{ display:inline-flex; }
  .header-cta > .btn{ display:none; }
}
@media (min-width:981px){
  .main-nav__cta{ display:none; }
  .header-cta > .btn-primary{ background:var(--grad-bronze); color:var(--graphite-900); }
}
@media (max-width:560px){
  .site-header .container{ gap:.6rem; padding-inline:16px; }
  .brand{ gap:.45rem; }
  .brand img{ height:54px; }
  .brand__text strong{ font-size:.78rem; }
  .brand__text span{ font-size:.62rem; }
  .header-cta{ gap:.35rem; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:#141210;
  min-height:min(92vh, 800px);
  display:flex; align-items:center;
}
.hero__field{ position:absolute; inset:0; z-index:0; }
.hero__field svg{ width:100%; height:100%; }
.hero__diag{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(42% 58% at 80% 32%, rgba(180,42,42,.62) 0%, transparent 68%),
    radial-gradient(34% 46% at 94% 4%, rgba(203,169,119,.30) 0%, transparent 72%),
    radial-gradient(52% 62% at 4% 102%, rgba(122,31,31,.58) 0%, transparent 66%),
    radial-gradient(26% 34% at 26% 88%, rgba(90,86,84,.4) 0%, transparent 70%),
    linear-gradient(180deg, #1a1714 0%, #201c19 50%, #161310 100%);
}
.hero__diag::before{
  content:""; position:absolute; inset:0; animation:aurora-pulse 10s ease-in-out infinite;
  background:radial-gradient(40% 55% at 82% 30%, rgba(203,169,119,.20) 0%, transparent 70%);
  mix-blend-mode:screen;
}
.hero__diag::after{
  /* soft vignette for depth at the edges, and a fine brand seam */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(122deg, transparent 60%, rgba(203,169,119,.14) 63.5%, transparent 67%),
    radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.4) 100%);
}
.hero__grain{ position:absolute; inset:0; z-index:2; opacity:.045; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size:3px 3px; }

.hero .container{ position:relative; z-index:3; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; padding-block:64px; }
.hero .container > *{ min-width:0; }
.hero__eyebrow{ color:var(--bronze-300); }
.hero__eyebrow::before{ background:var(--bronze-300); }
.hero h1{ color:var(--white); text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero h1 em{ font-style:normal; color:var(--bronze-300); }
.hero__lede{ color:var(--text-on-dark-muted); font-size:1.12rem; max-width:46ch; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero__meta{ display:flex; gap:2.2rem; margin-top:3rem; flex-wrap:wrap; }
.hero__meta div{ display:flex; flex-direction:column; }
.hero__meta strong{ font-family:var(--font-head); font-size:1.5rem; color:var(--white); font-weight:800; }
.hero__meta span{ font-size:.8rem; color:var(--text-on-dark-muted); }

.hero__art{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero__ring-wrap{ position:relative; width:min(100%, 420px); aspect-ratio:1; perspective:900px; }
.hero__brand-mark{
  position:absolute; top:50%; left:50%;
  width:48%; max-width:205px; height:auto; object-fit:contain;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 22px rgba(180,42,42,.45)) drop-shadow(0 0 42px rgba(203,169,119,.18));
  transform-origin:center;
  z-index:2;
}
.hero__ring-wrap svg{ width:100%; height:100%; }

@media (max-width:980px){
  .hero .container{ grid-template-columns:1fr; padding-block:48px; }
  .hero__art{ order:-1; max-width:280px; margin-inline:auto; }
  .hero__brand-mark{ width:50%; }
  .hero__meta{ gap:1.6rem; }
}

@media (max-width:560px){
  .hero__brand-mark{ width:52%; }
}

/* ---------- Page header (non-home pages) ---------- */
.page-header{
  position:relative; overflow:hidden; background:#161310; color:var(--white);
  padding-block: clamp(64px, 10vw, 96px) clamp(40px,6vw,56px);
}
.page-header::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(55% 130% at 90% 0%, rgba(180,42,42,.55) 0%, transparent 65%),
    radial-gradient(40% 100% at 100% 10%, rgba(203,169,119,.22) 0%, transparent 68%),
    radial-gradient(45% 90% at 6% 100%, rgba(122,31,31,.4) 0%, transparent 65%),
    linear-gradient(180deg, #1a1714 0%, #201c19 55%, #161310 100%);
  clip-path:polygon(0 0,100% 0,100% 82%,0 100%);
}
.page-header::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(120deg, transparent 58%, rgba(203,169,119,.22) 62%, transparent 67%),
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.32) 100%);
  clip-path:polygon(0 0,100% 0,100% 82%,0 100%);
}
.page-header .container{ position:relative; z-index:2; }
.breadcrumbs{ display:flex; gap:.5em; align-items:center; font-size:.85rem; color:var(--text-on-dark-muted); margin-bottom:1rem; }
.breadcrumbs a{ color:var(--text-on-dark-muted); }
.breadcrumbs a:hover{ color:var(--white); }
.page-header h1{ color:var(--white); margin-bottom:.4rem; }
.page-header p{ color:var(--text-on-dark-muted); max-width:60ch; font-size:1.05rem; }

/* ---------- Cable divider (signature motif) ---------- */
.cable-divider{ position:relative; height:64px; overflow:hidden; }
.cable-divider svg{ width:100%; height:100%; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--grad-graphite-rich); color:var(--text-on-dark-muted); position:relative; }
.site-footer > *{ position:relative; z-index:1; }
.footer-top{ padding-block:4rem 3rem; }
.footer-grid{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1.1fr; gap:2.5rem; }
.footer-grid > *{ min-width:0; }
.footer-brand__identity{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.footer-brand__logo{ height:96px; width:auto; margin:0; filter:drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
.footer-brand__name{ display:flex; flex-direction:column; line-height:1.3; }
.footer-brand__name strong{ color:var(--white); font-family:var(--font-head); font-size:1rem; font-weight:800; }
.footer-brand__name span{ color:var(--bronze-300); font-size:.75rem; font-weight:700; }
.footer-brand p{ color:var(--text-on-dark-muted); max-width:34ch; font-size:.92rem; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(247,244,239,.25); display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur-fast), border-color var(--dur-fast); }
.footer-social a:hover{ background:var(--maroon-800); border-color:var(--maroon-800); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ color:var(--white); font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1.1rem; }
[lang="ar"] .footer-col h4{ letter-spacing:0; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:.92rem; color:var(--text-on-dark-muted); transition:color var(--dur-fast); }
.footer-col a:hover{ color:var(--bronze-300); }
.footer-contact li{ display:flex; gap:.6em; align-items:flex-start; font-size:.9rem; }
.footer-contact svg{ width:16px; height:16px; flex:none; margin-top:.2em; color:var(--bronze-300); }
.footer-bottom{ border-top:1px solid rgba(247,244,239,.14); padding-block:1.3rem; }
.footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.82rem; }
.footer-bottom a{ color:var(--text-on-dark-muted); }
.footer-bottom a:hover{ color:var(--white); }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Remembered-language banner ---------- */
.lang-banner{
  position:fixed; bottom:0; inset-inline:0; z-index:95; background:var(--graphite-900); color:var(--white);
  padding:.9rem 1.2rem; display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  font-size:.88rem; box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
.lang-banner a{ color:var(--bronze-300); font-weight:700; text-decoration:underline; }
.lang-banner button{ background:transparent; border:1px solid rgba(247,244,239,.3); color:#fff; width:26px; height:26px; border-radius:50%; font-size:1rem; line-height:1; }

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; inset-inline-end:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform var(--dur-fast);
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; }

.footer-contact__channels > span{
  display:grid;
  gap:.35rem;
}
.footer-contact__channels a{
  color:inherit;
  transition:color var(--dur-fast) var(--ease);
}
.footer-contact__channels a:hover{ color:var(--bronze-300); }