/* ============================================================
   ABO ELYAZID — Accounting & Tax Consultancy
   Core Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- Palette ---- */
  --c-bg:            #0a0a0a;
  --c-bg-alt:        #111111;
  --c-panel:         #151513;
  --c-panel-2:       #1c1c19;
  --c-panel-border:  rgba(201,162,39,.18);
  --c-gold:          #c9a227;
  --c-gold-light:    #e8cd6d;
  --c-gold-dark:     #8f6f16;
  --c-gold-grad:     linear-gradient(120deg,#f4dd8a 0%, #c9a227 45%, #8f6f16 100%);
  --c-white:         #f6f4ee;
  --c-muted:         #b7b3a6;
  --c-muted-2:       #85806f;
  --c-line:          rgba(246,244,238,.08);

  /* ---- Type ---- */
  --f-ar-head: 'Cairo', sans-serif;
  --f-ar-body: 'Tajawal', sans-serif;
  --f-en-head: 'Playfair Display', serif;
  --f-en-body: 'Montserrat', sans-serif;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-gold: 0 10px 40px -10px rgba(201,162,39,.25);
  --shadow-deep: 0 20px 60px -20px rgba(0,0,0,.6);
  --header-h: 84px;
  --dur: .35s;
}

/* ---- Register --angle so the browser can animate it, and define the
       rotating-border keyframes used by .card, .faq-item,
       .contact-info-card and .cta-band ---- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --hero-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateBorder {
  to { --angle: 360deg; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-white);
  font-family:var(--f-en-body);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Arabic (default) direction */
html[lang="ar"] body{ font-family:var(--f-ar-body); direction:rtl; }
html[lang="en"] body{ font-family:var(--f-en-body); direction:ltr; }

h1,h2,h3,h4,h5{ margin:0 0 .5em; font-weight:700; line-height:1.25; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{
  font-family:var(--f-ar-head); font-weight:800;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4{
  font-family:var(--f-en-head);
}
p{ margin:0 0 1em; color:var(--c-muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--c-gold); color:#0a0a0a; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.gold{ color:var(--c-gold); }
/* .gold-text moved to animations.css so the shimmer keeps its
   background-size/animation instead of getting reset here */
.section{ padding:110px 0; position:relative; }
.section--tight{ padding:70px 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 60px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--c-gold); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; margin-bottom:14px;
}
.eyebrow::before, .eyebrow::after{
  content:""; width:26px; height:1px; background:var(--c-gold-grad);
}
.section-head h2{ font-size:clamp(28px,3.4vw,42px); }
.section-head p{ margin-top:14px; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; border-radius:4px; font-weight:700; font-size:15px;
  border:1px solid transparent; transition:all var(--dur) ease; white-space:nowrap;
  letter-spacing:.01em;
}
.btn--gold{
  background:var(--c-gold-grad); color:#0d0c08;
  box-shadow:var(--shadow-gold);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 46px -10px rgba(201,162,39,.45); }
.btn--outline{
  background:transparent; color:var(--c-white); border-color:rgba(246,244,238,.25);
}
.btn--outline:hover{ border-color:var(--c-gold); color:var(--c-gold); background:rgba(201,162,39,.06); }
.btn--wa{
  background:#1e2b22; color:#e8f5ea; border-color:rgba(60,180,90,.35);
}
.btn--wa:hover{ border-color:#3cb45a; }
.btn--sm{ padding:11px 22px; font-size:13px; }
.btn--block{ width:100%; }

/* ---- Header ---- */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:1000;
  height:var(--header-h);
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-line);
  transition:background var(--dur) ease, border-color var(--dur) ease;
}
.site-header.is-scrolled{ background:rgba(8,8,8,.94); border-color:var(--c-panel-border); }
.site-header .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:1; }
.brand__mark{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--c-panel-border);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 25%, #232017, #0c0c0a);
  color:var(--c-gold); font-family:var(--f-en-head); font-weight:700; font-size:16px;
}
.brand__mark-img{
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:1px solid var(--c-panel-border); display:block; flex-shrink:0;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__ar{ font-family:var(--f-ar-head); font-weight:800; font-size:16px; color:var(--c-white); }
.brand__sub{ font-size:10px; letter-spacing:.16em; color:var(--c-gold); text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:14.5px; font-weight:500; color:var(--c-muted); position:relative; padding:6px 0;
  transition:color var(--dur) ease; white-space:nowrap;
}
html[lang="ar"] .nav a{ font-weight:600; }
html[lang="en"] .nav{ gap:28px; }
html[lang="en"] .brand__ar{ font-family:var(--f-en-head); }
html[lang="en"] .brand__sub{ letter-spacing:.08em; }
.nav a::after{
  content:""; position:absolute; bottom:0; inset-inline:0; height:2px; width:0;
  background:var(--c-gold-grad); transition:width var(--dur) ease; margin:0 auto;
}
.nav a:hover, .nav a.active{ color:var(--c-white); }
.nav a:hover::after, .nav a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; flex:1; justify-content:flex-end; }
.lang-switch{
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  border:1px solid var(--c-panel-border); border-radius:20px; padding:4px; color:var(--c-muted);
}
.lang-switch button{
  background:none; border:none; color:inherit; padding:5px 12px; border-radius:16px;
  transition:all var(--dur) ease; font-family:inherit; font-weight:700;
}
.lang-switch button.active{ background:var(--c-gold-grad); color:#0d0c08; }

.menu-toggle{
  display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--c-panel-border);
  background:none; align-items:center; justify-content:center; color:var(--c-white);
}
.menu-toggle svg{ width:20px; height:20px; }

/* ---- Hero ---- */
.hero{
  min-height:100vh; display:flex; align-items:center;
  padding-top:var(--header-h);
  position:relative; overflow:hidden;
  perspective: 1200px;
  background:
    radial-gradient(ellipse 900px 500px at 85% 10%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(201,162,39,.06), transparent 60%),
    var(--c-bg);
}
.hero .container{
  display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
}
.hero__eyebrow{ color:var(--c-gold); letter-spacing:.12em; font-weight:700; font-size:13px; text-transform:uppercase; margin-bottom:18px; display:block;}
.hero h1{ font-size:clamp(32px,4.4vw,54px); letter-spacing:-.01em; }
.hero h1 .line{ display:block; }
.hero p.lead{ font-size:17px; max-width:520px; margin-top:20px; }
.hero__cta{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero__badges{ display:flex; gap:14px; margin-top:46px; flex-wrap:wrap; }
.badge{
  flex:1 1 150px; display:flex; align-items:center; gap:12px; padding:16px 18px;
  border:1px solid var(--c-panel-border); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.badge svg{ width:26px; height:26px; color:var(--c-gold); flex-shrink:0; }
.badge span{ font-size:13px; font-weight:600; color:var(--c-white); }

.hero__visual{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image:
    linear-gradient(var(--c-bg), var(--c-bg)),
    conic-gradient(from var(--hero-angle, 0deg),
      rgba(201,162,39,0) 0%,
      rgba(201,162,39,.9) 10%,
      rgba(232,205,109,1) 16%,
      rgba(201,162,39,.9) 22%,
      rgba(201,162,39,0) 38%,
      rgba(201,162,39,0) 100%);
  box-shadow:var(--shadow-deep);
  aspect-ratio:3/2;
  will-change:transform;
}
.hero__office-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* ---- Cards / Services ---- */
.grid{ display:grid; gap:26px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background-image:
    linear-gradient(180deg, var(--c-panel), var(--c-bg-alt)),
    conic-gradient(from var(--angle, 0deg),
      rgba(201,162,39,0) 0%,
      rgba(201,162,39,.9) 12%,
      rgba(232,205,109,1) 18%,
      rgba(201,162,39,.9) 24%,
      rgba(201,162,39,0) 40%,
      rgba(201,162,39,0) 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:34px 30px;
  transition:transform var(--dur) ease, box-shadow var(--dur) ease;
  position:relative;
  animation: rotateBorder 6s linear infinite;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-gold); animation-duration:3s; }
.card__icon{
  width:56px; height:56px; border-radius:var(--radius-sm); margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(201,162,39,.08); border:1px solid var(--c-panel-border); color:var(--c-gold);
}
.card__icon svg{ width:28px; height:28px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ font-size:14.5px; margin-bottom:0; }
.card__link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--c-gold); font-size:13.5px; font-weight:700; }

/* ---- Why choose us / stats band ---- */
.band{ background:linear-gradient(180deg,#0d0d0c,#0a0a0a); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.band .grid--2{ gap:60px; }
.feature-row{ display:flex; align-items:flex-start; gap:16px; margin-bottom:30px; }
.feature-row svg{ width:30px; height:30px; color:var(--c-gold); flex-shrink:0; margin-top:2px; }
.feature-row h4{ font-size:16px; margin-bottom:4px; }
.feature-row p{ font-size:13.5px; margin:0; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat{
  text-align:center; padding:28px 14px; border:1px solid var(--c-panel-border); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(201,162,39,.05), transparent);
}
.stat b{ display:block; font-family:var(--f-en-head); font-size:32px; color:var(--c-gold); }
.stat span{ font-size:12.5px; color:var(--c-muted); display:block; margin-top:6px; }

/* ---- Team ---- */
.team-card{ text-align:center; }
.avatar{
  width:100%; aspect-ratio:1/1.05; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:20px;
  background:linear-gradient(160deg,#201f1a,#0b0b0a);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--c-panel-border);
}
.avatar svg{ width:56%; color:rgba(201,162,39,.5); }
.avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.team-card h4{ font-size:17px; margin-bottom:4px; }
.team-card .role{ font-size:13px; color:var(--c-gold); margin-bottom:10px; display:block; }
.team-card p{ font-size:13px; }
.social-mini{ display:flex; justify-content:center; gap:10px; margin-top:14px; }
.social-mini a{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--c-panel-border);
  display:flex; align-items:center; justify-content:center; color:var(--c-muted); transition:all var(--dur);
}
.social-mini a:hover{ color:#0d0c08; background:var(--c-gold); border-color:var(--c-gold); }
.social-mini svg{ width:15px; height:15px; }

/* ---- Articles ---- */
.article-card{ overflow:hidden; padding:0; }
.article-card__img{
  aspect-ratio:16/10; background:radial-gradient(ellipse 55% 50% at 50% 50%,rgba(201,162,39,.07) 0%,transparent 70%),linear-gradient(160deg,#1c1a12,#0a0a0a);
  display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--c-panel-border);
}
.article-card__img svg{ width:44%; }
.article-card__body{ padding:26px 26px 30px; }
.article-meta{ display:flex; gap:12px; font-size:12px; color:var(--c-muted-2); margin-bottom:10px; }
.tag-pill{
  display:inline-block; font-size:11.5px; padding:5px 12px; border-radius:20px;
  border:1px solid var(--c-panel-border); color:var(--c-gold); background:rgba(201,162,39,.06);
}
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:50px; }
.filter-bar button{
  padding:9px 20px; border-radius:20px; border:1px solid var(--c-panel-border); background:none; color:var(--c-muted);
  font-size:13.5px; font-weight:600; transition:all var(--dur);
}
.filter-bar button.active, .filter-bar button:hover{ background:var(--c-gold-grad); color:#0d0c08; border-color:transparent; }

/* ---- FAQ accordion ---- */
.faq-item{
  border:1px solid transparent;
  border-radius:var(--radius); margin-bottom:14px; overflow:hidden;
  background-image:
    linear-gradient(180deg, var(--c-panel), var(--c-bg-alt)),
    conic-gradient(from var(--angle, 0deg),
      rgba(201,162,39,0) 0%, rgba(201,162,39,.9) 12%,
      rgba(232,205,109,1) 18%, rgba(201,162,39,.9) 24%,
      rgba(201,162,39,0) 40%, rgba(201,162,39,0) 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: rotateBorder 6s linear infinite;
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; cursor:pointer; font-weight:700; font-size:15.5px; color:var(--c-white);
  background:none; border:none; width:100%; text-align:inherit;
}
.faq-q .icon{
  width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1px solid var(--c-panel-border);
  display:flex; align-items:center; justify-content:center; color:var(--c-gold); transition:transform var(--dur);
}
.faq-item.open .faq-q .icon{ transform:rotate(45deg); background:var(--c-gold); color:#0d0c08; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a__inner{ padding:0 26px 24px; font-size:14.5px; color:var(--c-muted); }
.faq-item.open .faq-a{ max-height:400px; }

/* ---- Contact ---- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:stretch; }
.contact-info-card{
  border:1px solid transparent;
  border-radius:var(--radius); padding:36px;
  background-image:
    linear-gradient(180deg, var(--c-panel), var(--c-bg-alt)),
    conic-gradient(from var(--angle, 0deg),
      rgba(201,162,39,0) 0%, rgba(201,162,39,.9) 12%,
      rgba(232,205,109,1) 18%, rgba(201,162,39,.9) 24%,
      rgba(201,162,39,0) 40%, rgba(201,162,39,0) 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: rotateBorder 6s linear infinite;
}
.contact-line{ display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; }
.contact-line svg{ width:24px; height:24px; color:var(--c-gold); flex-shrink:0; margin-top:2px; }
.contact-line h5{ font-size:14px; margin-bottom:4px; color:var(--c-white); }
.contact-line p{ font-size:13.5px; margin:0; }
.contact-line a{ transition:color var(--dur); }
.contact-line a:hover{ color:var(--c-gold); }
.map-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-panel-border); min-height:340px;
  background:linear-gradient(160deg,#1a1a17,#0a0a0a); position:relative;
}
.map-frame iframe{ width:100%; height:100%; min-height:340px; filter:grayscale(1) invert(.92) contrast(.9); border:0; }
.map-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  color:var(--c-gold); width:34px; height:34px; pointer-events:none;
}

/* ---- CTA band ---- */
.cta-band{
  border-radius:16px; border:1px solid transparent; padding:60px 50px; text-align:center;
  background-image:
    radial-gradient(ellipse 600px 300px at 50% 0%, rgba(201,162,39,.14), transparent 70%),
    linear-gradient(180deg,#141310,#0a0a0a),
    conic-gradient(from var(--angle, 0deg),
      rgba(201,162,39,0) 0%, rgba(201,162,39,.9) 12%,
      rgba(232,205,109,1) 18%, rgba(201,162,39,.9) 24%,
      rgba(201,162,39,0) 40%, rgba(201,162,39,0) 100%);
  background-clip: padding-box, padding-box, border-box;
  background-origin: padding-box, padding-box, border-box;
  margin-top:20px;
  animation: rotateBorder 6s linear infinite;
}
.cta-band h3{ font-size:clamp(22px,2.6vw,32px); }
.cta-band .btn-row{ display:flex; gap:16px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

/* ---- Page header (interior pages) ---- */
.page-hero{
  padding:calc(var(--header-h) + 70px) 0 70px; text-align:center;
  position:relative; z-index:1;
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(201,162,39,.12), transparent 65%),
    var(--c-bg);
  border-bottom:1px solid var(--c-line);
}
.breadcrumb{ font-size:13px; color:var(--c-muted-2); margin-bottom:16px; }
.breadcrumb .gold{ font-weight:700; }
.page-hero h1{ font-size:clamp(28px,3.6vw,44px); }
.page-hero p{ max-width:620px; margin:14px auto 0; }

/* ---- Footer ---- */
.site-footer{ background:#080807; border-top:1px solid var(--c-line); padding:70px 0 26px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:50px; }
.footer-brand p{ font-size:13.5px; margin-top:16px; }
.footer-col h5{ color:var(--c-white); font-size:15px; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:13.5px; color:var(--c-muted); transition:color var(--dur); }
.footer-col a:hover{ color:var(--c-gold); }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--c-panel-border);
  display:flex; align-items:center; justify-content:center; color:var(--c-muted); transition:all var(--dur);
}
.footer-social a:hover{ background:var(--c-gold); color:#0d0c08; border-color:var(--c-gold); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{
  border-top:1px solid var(--c-line); padding-top:24px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--c-muted-2);
}
.footer-bottom a{ color:var(--c-muted-2); }
.footer-bottom a:hover{ color:var(--c-gold); }
.footer-bottom-links{ display:flex; gap:20px; }

.footer-credit{
  text-align: center;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: 12px;
  color: var(--c-muted-2);
  letter-spacing: .02em;
}
.footer-credit__link{
  display: inline-block;
  margin-inline-start: 6px;
  font-weight: 700;
  background: var(--c-gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  transition: transform .3s ease;
}

/* ---- Back to top / WhatsApp float ---- */
.float-stack{ position:fixed; bottom:26px; inset-inline-end:26px; z-index:900; display:flex; flex-direction:column; gap:12px; }
.float-btn{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-deep); border:1px solid var(--c-panel-border); transition:transform var(--dur);
}
.float-btn:hover{ transform:translateY(-4px); }
.float-btn--wa{ background:#25D366; color:#08210f; }
.float-btn--top{ background:var(--c-panel); color:var(--c-gold); opacity:0; pointer-events:none; }
.float-btn--top.show{ opacity:1; pointer-events:auto; }
.float-btn svg{ width:22px; height:22px; }

/* ---- Utility ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }

/* ---- Mobile nav ---- */
.mobile-nav{
  position:fixed; inset:var(--header-h) 0 0 0; background:rgba(6,6,6,.98); z-index:999;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:all var(--dur) ease;
  overflow-y:auto;
}
.mobile-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-nav .container{ padding-top:40px; display:flex; flex-direction:column; gap:6px; }
.mobile-nav a{ padding:16px 4px; border-bottom:1px solid var(--c-line); font-size:17px; font-weight:600; }
.mobile-nav .btn{ margin-top:24px; }

/* ---- Moving gold/white line background (sitewide) ---- */
.bg-lines{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  background-image:
    repeating-linear-gradient(115deg, rgba(201,162,39,.6) 0px, rgba(201,162,39,.6) 1px, transparent 1px, transparent 140px),
    repeating-linear-gradient(65deg, rgba(246,244,238,.4) 0px, rgba(246,244,238,.4) 1px, transparent 1px, transparent 160px);
  background-size:200% 200%;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .hero .container{ grid-template-columns:1fr; }
  .hero__visual{ max-width:420px; margin:0 auto; }
  /* Image fills by height on mobile (ratio 1.707 > container ratio 1.5) — no vertical overflow.
     Anchor crop to the right so the logo on the right wall is never clipped. */
  .hero__office-img{ object-position: right center; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .band .grid--2{ grid-template-columns:1fr; gap:36px; }

  /* Header: collapse actions to auto-width, hide gold CTA button */
  .header-actions{ flex:0 0 auto; }
  .header-actions .btn{ display:none; }
  /* Shrink lang-switch slightly so logo text has room */
  .lang-switch button{ padding:4px 8px; font-size:12px; }
}

@media (max-width:640px){
  .section{ padding:70px 0; }
  .grid--3, .grid--4, .grid--2{ grid-template-columns:1fr; }
  /* Footer: 2-column grid — brand full-width on top, link cols in pairs */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-brand{ grid-column:1 / -1; }
  /* Tighter spacing inside link columns */
  .footer-col ul li{ margin-bottom:8px; }
  .footer-col h5{ margin-bottom:12px; font-size:14px; }
  .footer-col a{ font-size:13px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  /* Footer-bottom links: wrap and center on mobile */
  .footer-bottom-links{ flex-wrap:wrap; justify-content:center; gap:10px; }

  /* Reduce gap between text and image so the image is closer to the viewport on phones */
  .hero .container{ gap:28px; }
  /* Hero: stack CTA buttons full-width */
  .hero__cta{ flex-direction:column; gap:12px; }
  .hero__cta .btn{ width:100%; }
  /* Hero visual: fill column, don't cap at 420px on phones */
  .hero__visual{ max-width:100%; }
  /* Badges: full width when stacked */
  .hero__badges{ flex-direction:column; }
  .badge{ flex:1 1 100%; }

  /* Cards: reduce padding for narrow screens */
  .card{ padding:24px 18px; }

  /* Stats: 3 cards — single column on narrow phones to avoid cramped 97px cells */
  .stats{ grid-template-columns:1fr !important; }

  /* Contact: tighter card padding, shorter map on phones */
  .contact-info-card{ padding:24px 20px; }
  .map-frame{ min-height:240px; }
  .map-frame iframe{ min-height:240px; }

  /* CTA band: comfortable narrow padding */
  .cta-band{ padding:40px 24px; }

  /* FAQ: tighter horizontal padding for narrow screens, ensure touch target */
  .faq-q{ padding:18px 20px; }
  .faq-a__inner{ padding:0 20px 20px; }
  /* FAQ touch target: ensure .faq-q .icon stays tappable */
  .faq-q .icon{ width:34px; height:34px; }

  /* Filter bar: comfortable touch target */
  .filter-bar button{ padding:12px 20px; }

  /* Readable minimum font sizes on mobile */
  .article-meta{ font-size:13px; }
  .stat span{ font-size:13px; }
}

/* Very small phones (375–400 px): shrink brand so header doesn't overflow */
@media (max-width:400px){
  .container{ padding:0 16px; }
  .brand__mark-img, .brand__mark{ width:38px; height:38px; }
  .brand__ar{ font-size:13px; }
  .brand__sub{ font-size:9px; letter-spacing:.08em; }
  /* Allow brand text to truncate rather than overflow */
  .brand{ min-width:0; }
  .brand__text{ min-width:0; overflow:hidden; }
  .brand__ar, .brand__sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .section{ padding:56px 0; }
  .card{ padding:20px 14px; }
  .cta-band{ padding:28px 14px; }
  .hero__cta .btn{ font-size:14px; padding:14px 20px; }
}

/* ---- Legal Pages ---- */
.legal-content{ max-width:860px; margin:0 auto; }
.legal-updated{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; color:var(--c-muted);
  background:rgba(201,162,39,.06); border:1px solid var(--c-panel-border);
  border-radius:20px; padding:8px 18px; margin-bottom:32px;
}
.legal-updated svg{ color:var(--c-gold); flex-shrink:0; }

.legal-toc{
  border:1px solid var(--c-panel-border); border-radius:var(--radius);
  padding:26px 30px;
  background:linear-gradient(180deg, var(--c-panel), var(--c-bg-alt));
  margin-bottom:36px;
}
.legal-toc h6{
  margin:0 0 16px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-gold); font-weight:700; font-family:var(--f-en-body);
}
html[lang="ar"] .legal-toc h6{ font-family:var(--f-ar-head); }
.legal-toc ol{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px 28px;
  counter-reset:toc-c;
}
.legal-toc ol li{ counter-increment:toc-c; }
.legal-toc ol li a{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--c-muted);
  padding:5px 0; transition:color var(--dur);
}
.legal-toc ol li a:hover{ color:var(--c-gold); }
.legal-toc ol li a::before{
  content:counter(toc-c);
  font-family:var(--f-en-body); font-size:11px; font-weight:700;
  color:var(--c-gold);
  min-width:22px; height:22px; line-height:22px;
  text-align:center; flex-shrink:0;
  border:1px solid var(--c-panel-border); border-radius:50%;
  background:rgba(201,162,39,.07); display:inline-block;
}
.legal-section{
  background:linear-gradient(180deg, var(--c-panel), var(--c-bg-alt));
  border:1px solid var(--c-panel-border); border-radius:var(--radius);
  padding:28px 32px; margin-bottom:20px;
  transition:border-color var(--dur) ease;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.legal-section:hover{ border-color:rgba(201,162,39,.4); }
.legal-section:last-child{ margin-bottom:0; }
.legal-section h2{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(17px,2.1vw,21px); margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--c-line);
}
.legal-section .num{
  flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--c-gold);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--c-gold);
  background:rgba(201,162,39,.07);
  font-family:var(--f-en-body); line-height:1;
}
.legal-section p{ font-size:14.5px; color:var(--c-muted); line-height:1.85; margin-bottom:14px; }
.legal-section p:last-child{ margin-bottom:0; }
.legal-section ul{ margin:0; padding:0; list-style:none; }
.legal-section ul li{
  position:relative;
  padding-inline-start:22px;
  font-size:14px; color:var(--c-muted);
  margin-bottom:10px; line-height:1.75;
}
.legal-section ul li:last-child{ margin-bottom:0; }
.legal-section ul li::before{
  content:""; position:absolute;
  inset-inline-start:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--c-gold-grad);
}
@media (max-width:640px){
  .legal-toc{ padding:18px 16px; }
  .legal-toc ol{ grid-template-columns:1fr; }
  .legal-section{ padding:20px 16px; }
  /* Smaller numbered badge so it doesn't crowd the heading text */
  .legal-section .num{ width:28px; height:28px; font-size:11px; }
  /* Heading stays on same line as badge without wrapping awkwardly */
  .legal-section h2{ gap:10px; }
}

/* ---- Orbit Hero (Services page) ---- */
:root{ --orbit-r: 230px; }

.orbit-hero-section{ padding: 20px 0 0; overflow: visible; }

.orbit-hero{
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1/1;
  margin: 0 auto 60px;
  overflow: visible;
}

.orbit-ring--logo{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Subtle circular glow frame behind the logo */
.orbit-ring--logo::before{
  content: "";
  position: absolute;
  width: 44%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid var(--c-panel-border);
  box-shadow: 0 0 40px -10px rgba(201,162,39,.4);
}

.orbit-logo{
  width: 42%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
  animation: orbitSpinCW 30s linear infinite;
  position: relative;
  z-index: 1;
}

.orbit-ring--services{
  position: absolute;
  inset: 0;
  overflow: visible;
  animation: orbitSpinCCW 40s linear infinite;
}

/* Each pill is a direct child of the ring (its containing block).
   top/left:50% places the pill's top-left at the ring center.
   transform-origin:0 0 makes rotations happen around that center.
   The full positioning+counter-rotation chain lives in @keyframes. */
.orbit-pill{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  animation: orbitCounterSpin 40s linear infinite;
  display: inline-block;
  background: linear-gradient(180deg, var(--c-panel), var(--c-bg-alt));
  border: 1px solid var(--c-panel-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
  box-shadow: var(--shadow-gold);
  z-index: 3;
}

@media (max-width: 768px){
  :root{ --orbit-r: 150px; }
  .orbit-hero{ max-width: 360px; }
}

@media (max-width: 480px){
  :root{ --orbit-r: 105px; }
  .orbit-hero-section{ overflow-x: clip; }
  .orbit-hero{ max-width: 300px; }
  .orbit-logo{ width: 38%; }
  .orbit-pill{
    font-size: 10px;
    padding: 6px 10px;
  }
}