/* ==========================================================================
   NAWAH — Design System
   Palette: Midnight Navy #07162d · Deep Teal #126e82 · Catalyst Gold #c9a24b
            Ink Black #1a1a1a · Cloud White #edeff5
   Type: Inter (heading+body, per brand guide) + IBM Plex Mono (labels/data)
         + Tajawal (Arabic)
   ========================================================================== */

:root{
  /* brand colors */
  --navy: #07162d;
  --navy-1: #0b2038;
  --navy-2: #102b47;
  --teal: #126e82;
  --teal-light: #1f93ab;
  --teal-glow: #4fc3dc;
  --gold: #c9a24b;
  --gold-light: #e0bd73;
  --ink: #1a1a1a;
  --cloud: #edeff5;
  --white: #ffffff;

  /* semantic */
  --bg: var(--cloud);
  --bg-alt: #ffffff;
  --text: var(--ink);
  --text-soft: #52565e;
  --line: #dcdfe6;

  /* type */
  --font-body: 'Inter', 'Tajawal', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-ar: 'Tajawal', 'Inter', sans-serif;

  /* scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  --step-4: clamp(2.6rem, 2rem + 2.6vw, 4.2rem);
  --step-5: clamp(3.2rem, 2.2rem + 4vw, 5.6rem);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;

  --container: 1240px;
}

@media (prefers-color-scheme: dark){ :root{ } }

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body{ font-family: var(--font-ar); }
html[dir="rtl"] body{ text-align: right; }

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1,h2,h3,h4{ font-family: var(--font-body); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--navy); overflow-wrap: break-word; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-family: var(--font-ar); letter-spacing: 0; font-weight: 700; }
h1{ font-size: var(--step-5); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
p{ margin: 0; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
html[lang="ar"] .eyebrow{ font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-weight: 700; }
.eyebrow::before{
  content:"";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,75,.22);
}

@media (max-width: 420px){
  :root{ --step-5: clamp(2.35rem, 1.9rem + 4vw, 3.2rem); --step-3: clamp(1.75rem, 1.5rem + 2vw, 2.1rem); }
}
.container{ max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.section{ padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section-tight{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.bg-navy{ background: var(--navy); color: var(--cloud); }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color: var(--white); }
.bg-alt{ background: var(--bg-alt); }
.bg-cloud{ background: var(--cloud); }

/* ---------- links / buttons ---------- */
.btn{
  --btnbg: var(--navy);
  --btnfg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.6em;
  border-radius: 100px;
  background: var(--btnbg); color: var(--btnfg);
  font-weight: 600; font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ --btnbg: var(--gold); --btnfg: var(--navy); }
.btn-gold:hover{ --btnbg: var(--gold-light); }
.btn-outline{ --btnbg: transparent; --btnfg: var(--white); border-color: rgba(255,255,255,.35); }
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); }
.btn-outline-dark{ --btnbg: transparent; --btnfg: var(--navy); border-color: var(--line); }
.btn-outline-dark:hover{ border-color: var(--teal); color: var(--teal); }
.btn-sm{ padding: .7em 1.3em; font-size: .85rem; }
.btn svg{ width: 1em; height: 1em; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }
html[dir="rtl"] .btn:hover svg{ transform: translateX(-3px) rotate(180deg); }
html[dir="rtl"] .btn svg{ transform: rotate(180deg); }

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position: fixed; inset-inline: 0; top: 0; z-index: 500;
  padding-top: 14px;
  transition: padding .4s var(--ease);
}
.nav-shell{
  max-width: var(--container); margin-inline: auto;
  margin-inline: auto;
  padding-inline: clamp(1rem,3vw,1.75rem);
}
.nav-bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .55rem .6rem .55rem 1.1rem;
  border-radius: 100px;
  background: rgba(7,22,45,.62);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px rgba(7,22,45,.18);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled{ padding-top: 8px; }
.site-header.is-scrolled .nav-bar{ background: rgba(7,22,45,.86); box-shadow: 0 14px 34px rgba(7,22,45,.3); }

.brand{ display: flex; align-items: center; gap: .6em; }
.brand-mark{ height: 34px; width: auto; flex-shrink: 0; color: var(--cloud); }
.brand-name{ font-weight: 700; color: var(--white); font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1; }
.brand-sub{ display:block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .28em; color: var(--teal-glow); margin-top: 3px; }

.nav-menu{ display: flex; align-items: center; gap: 1.9rem; }
.nav-link{
  position: relative;
  font-size: .92rem; font-weight: 500; color: rgba(237,239,245,.8);
  padding: .3rem 0;
  transition: color .3s;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--gold); transition: right .35s var(--ease);
}
.nav-link:hover{ color: var(--white); }
.nav-link:hover::after{ right: 0; }

.has-dropdown{ position: relative; }
/* Invisible bridge across the visual gap between the trigger link and the
   dropdown below it -- without this, moving the mouse straight down from
   "Services"/"About" toward a subservice link crosses a dead zone that's
   outside both elements' hover box, so :hover drops and the menu closes
   before the cursor ever reaches it. */
.has-dropdown::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
}
.dropdown{
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  background: var(--navy-1);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-m);
  padding: .6rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown a{
  display: flex; align-items: center; gap: .7em;
  padding: .65rem .8rem; border-radius: 10px;
  font-size: .88rem; color: rgba(237,239,245,.85);
  transition: background .25s, color .25s;
}
.dropdown a:hover{ background: rgba(255,255,255,.06); color: var(--white); }
.dropdown .dot{ width:6px;height:6px;border-radius:50%; background: var(--teal-glow); flex-shrink:0; }

.nav-actions{ display: flex; align-items: center; gap: .7rem; }
.lang-toggle{
  display: flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; padding: 4px; font-family: var(--font-mono); font-size: .72rem;
}
.lang-toggle button{
  border: none; background: transparent; color: rgba(237,239,245,.6);
  padding: .4em .85em; border-radius: 100px; cursor: pointer; transition: all .3s;
}
.lang-toggle button.active{ background: var(--gold); color: var(--navy); font-weight: 700; }

.nav-burger{ display:none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); position: relative; cursor: pointer; }
.nav-burger span{ position:absolute; left: 13px; right: 13px; height: 1.5px; background: #fff; transition: transform .35s var(--ease), opacity .35s; }
.nav-burger span:nth-child(1){ top: 16px; }
.nav-burger span:nth-child(2){ top: 22px; }
.nav-burger span:nth-child(3){ top: 28px; }
.nav-burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity: 0; }
.nav-burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-panel{
  position: fixed; inset: 0; z-index: 480;
  background: var(--navy);
  padding: 7.5rem 1.5rem 3rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.mobile-panel.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-panel .nav-link{ display:block; font-size: 1.3rem; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-panel .m-sub{ padding-inline-start: 1rem; }
.mobile-panel .m-sub .nav-link{ font-size: 1rem; color: rgba(237,239,245,.65); border-bottom: none; padding: .5rem 0; }

@media (max-width: 900px){
  .nav-menu{ display:none; }
  .nav-actions .lang-toggle{ display:flex; }
  .nav-actions .btn{ display:none; }
  .nav-burger{ display:block; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  background: radial-gradient(120% 90% at 82% 8%, #0d2b48 0%, var(--navy) 46%, #04101f 100%);
  color: var(--white);
  overflow: hidden;
  padding-top: 7rem;
  padding-bottom: 4rem;
}
.hero-grid-lines{
  position: absolute; inset:0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 60% 30%, black 10%, transparent 78%);
}
.hero-mark{
  position: absolute; z-index: 1; pointer-events: none;
  inset-inline-end: -10%; top: 44%; transform: translateY(-50%);
  width: min(42vw, 780px); opacity: .55;
}
html[dir="rtl"] .hero-mark{ inset-inline-end: auto; inset-inline-start: -10%; }
@media (max-width: 1080px){
  .hero-mark{ width: min(60vw, 520px); opacity: .3; top: 60%; }
}
@media (max-width: 700px){
  .hero-mark{ display: none; }
}
.hero-mark svg{ width: 100%; height: auto; }
.orbit-dot{ animation: orbit 9s linear infinite; transform-origin: 224px 224px; }
@keyframes orbit{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.ribbon-path{ animation: dash 5.5s var(--ease) infinite alternate; }
@keyframes dash{
  0%{ stroke-dashoffset: 60; }
  100%{ stroke-dashoffset: 0; }
}

.hero-content{ position: relative; z-index: 2; max-width: 760px; }
.hero-content .eyebrow{ color: var(--teal-glow); margin-bottom: 1.4rem; }
.hero-content h1{ color: var(--white); margin-bottom: 1.4rem; }
.hero-content h1 .accent{ color: var(--gold); }
.hero-lede{ font-size: var(--step-1); color: rgba(237,239,245,.78); max-width: 46ch; margin-bottom: 2.2rem; }
.hero-cta{ display:flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-trustline{ display:flex; align-items:center; gap: 1.4rem; flex-wrap: wrap; color: rgba(237,239,245,.55); font-size: .85rem; }
.hero-trustline strong{ color: var(--white); }
.hero-trust-divider{ width:1px; height: 20px; background: rgba(255,255,255,.18); }

.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform: scale(1); }
.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   SERVICE BREAKDOWN (signature split image / 5 sections)
   ========================================================================== */
.service-split{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 560px;
  box-shadow: 0 30px 60px -20px rgba(7,22,45,.35);
}
.service-panel{
  position: relative;
  padding: 2.4rem 1.6rem 2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white);
  min-height: 100%;
  background-size: cover; background-position: center;
  flex: 1 1 0;
  transition: flex .6s var(--ease);
  cursor: pointer;
  border-inline-end: 1px solid rgba(255,255,255,.08);
}
.service-panel::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,22,45,.15) 0%, rgba(7,22,45,.78) 78%, rgba(7,22,45,.94) 100%);
  transition: background .5s;
}
.service-panel:hover, .service-panel.is-active{ flex: 2.4 1 0; }
.service-panel:hover::before{ background: linear-gradient(180deg, rgba(7,22,45,.05) 0%, rgba(18,110,130,.55) 60%, rgba(7,22,45,.92) 100%); }
.service-index{ font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--gold-light); position: relative; z-index: 1; }
.service-panel h4{ color: var(--white); position: relative; z-index: 1; margin-block: .5rem .5rem; font-size: 1.1rem; }
.service-desc{
  position: relative; z-index: 1;
  font-size: .86rem; color: rgba(237,239,245,.85);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease) .1s;
}
.service-panel:hover .service-desc, .service-panel.is-active .service-desc{ max-height: 220px; opacity: 1; }
.service-panel .course-link{
  color: #fff; position: relative; z-index: 1; margin-top: .55rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease) .1s;
}
.service-panel:hover .course-link, .service-panel.is-active .course-link{ max-height: 40px; opacity: 1; }

@media (max-width: 860px){
  .service-split{ grid-template-columns: 1fr; min-height: auto; }
  .service-panel{ min-height: 130px; flex: none !important; border-inline-end:none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .service-panel::before{ background: linear-gradient(180deg, rgba(7,22,45,.35) 0%, rgba(7,22,45,.9) 100%) !important; }
  .service-desc{ max-height: none !important; opacity: 1 !important; }
  .service-panel .course-link{ max-height: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   CARDS / GENERIC
   ========================================================================== */
.grid{ display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.section-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem,4vw,3.2rem); flex-wrap: wrap; }
.section-head h2{ margin-top: .6rem; max-width: 22ch; }
.section-head-meta{ max-width: 34ch; color: var(--text-soft); }

.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 30px 46px -22px rgba(7,22,45,.28); border-color: transparent; }

/* Contact-info link cards (contact.html's phone/WhatsApp cards) — the flex
   layout lives in this class rather than an inline style so that JS setting
   el.style.display = "" (see applyContact() in main.js, which only manages
   the `display` property and only clears an *inline* override) falls back
   to this class's `display:flex` instead of the browser's plain-`<a>`
   default. An inline `display:flex` here would get silently stripped the
   moment the element is revealed. */
.contact-link-card{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; }

/* course card */
.course-card{ display: flex; flex-direction: column; }
.course-thumb{ position: relative; aspect-ratio: 16/10; overflow: hidden; }
.course-thumb img{ width:100%; height:100%; object-fit: cover; transition: transform .7s var(--ease); }
.course-card:hover .course-thumb img{ transform: scale(1.07); }
.course-tag{ position:absolute; top: .9rem; inset-inline-start: .9rem; background: rgba(7,22,45,.82); color: var(--gold-light); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; padding: .4em .8em; border-radius: 100px; }

/* sale ribbon — injected by assets/js/main.js when a course has an active auto-apply voucher */
.sale-ribbon{ position:absolute; top:0; right:0; width:96px; height:96px; overflow:hidden; pointer-events:none; }
.sale-ribbon::before{ content:""; position:absolute; inset:0; background:linear-gradient(225deg,#e11d48,#be123c 55%,#500724); clip-path:polygon(100% 0, 100% 100%, 0 0); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.sale-ribbon span{ position:absolute; left:66%; top:33%; transform:translate(-50%,-50%) rotate(45deg); font-family:Arial,Helvetica,sans-serif; font-size:1.05rem; font-weight:900; letter-spacing:.02em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); white-space:nowrap; }

/* dynamic training-catalog loading/error state — assets/js training-catalog fetch */
.training-course-status{ grid-column: 1 / -1; text-align:center; color: var(--text-soft); padding: 2rem 0; }
.course-body{ padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap: .7rem; flex:1; }
.course-meta{ display:flex; gap: 1rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft); flex-wrap: wrap; }
.course-meta span{ display:flex; align-items:center; gap:.4em; }
.course-title{ font-size: 1.08rem; font-weight: 700; color: var(--navy); }
.course-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top: .7rem; border-top: 1px dashed var(--line); }
.course-link{ font-size:.85rem; font-weight:600; color: var(--teal); display:flex; align-items:center; gap:.4em; }

/* service deep-dive card */
.svc-card{ padding: 2.1rem 1.9rem; }
.svc-icon{ width:52px;height:52px; border-radius: 14px; background: var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom: 1.4rem; }
.svc-icon svg{ width: 26px; height:26px; stroke: var(--gold-light); }
.svc-list{ margin-top: 1rem; display:flex; flex-direction:column; gap:.55rem; }
.svc-list li{ display:flex; gap:.6em; font-size:.92rem; color: var(--text-soft); }
.svc-list li::before{ content:""; margin-top:.55em; width:5px;height:5px;border-radius:50%; background: var(--teal); flex-shrink:0; }

/* stat / partner marquee */
.marquee{ overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track{ display:flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.uni-item{ font-family: var(--font-mono); font-size: 1rem; color: var(--navy); opacity:.55; white-space:nowrap; display:flex; align-items:center; gap:.6em; }
.uni-item::before{ content:"◆"; color: var(--gold); font-size:.6em; }

/* testimonial */
.testi-card{ padding: 2.2rem; display:flex; flex-direction:column; gap:1.4rem; }
.testi-quote{ font-size: 1.05rem; color: var(--navy); line-height: 1.65; }
.testi-who{ display:flex; align-items:center; gap: .8rem; margin-top:auto; }
.testi-avatar{ width: 46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.testi-avatar img{ width:100%;height:100%;object-fit:cover; }
.testi-name{ font-weight:700; font-size:.92rem; }
.testi-role{ font-size:.8rem; color: var(--text-soft); }

/* FAQ */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.5rem 0; background:none; border:none; text-align: start; cursor:pointer; font-size: 1.05rem; font-weight:600; color: var(--navy); }
.faq-icon{ width: 30px;height:30px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; position:relative; }
.faq-icon::before, .faq-icon::after{ content:""; position:absolute; top:50%;left:50%; background: var(--navy); transition: transform .4s var(--ease), opacity .3s; }
.faq-icon::before{ width:10px;height:1.4px; transform: translate(-50%,-50%); }
.faq-icon::after{ width:1.4px;height:10px; transform: translate(-50%,-50%); }
.faq-item.is-open .faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item.is-open .faq-icon{ background: var(--navy); border-color: var(--navy); }
.faq-item.is-open .faq-icon::before{ background:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.faq-a-in{ padding-bottom: 1.5rem; color: var(--text-soft); max-width: 68ch; }

/* CTA band */
.cta-band{ border-radius: var(--radius-l); padding: clamp(2.5rem, 6vw, 5rem); position: relative; overflow: hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 140% at 100% 0%, #12405c 0%, var(--navy) 55%);
}
.cta-band > *{ position: relative; z-index: 1; }
.cta-band-flex{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

/* footer */
.site-footer{ background: var(--navy); color: rgba(237,239,245,.7); padding-top: clamp(3rem,6vw,5rem); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand p{ color: rgba(237,239,245,.55); font-size:.9rem; max-width: 32ch; margin-top:1rem; }
.footer-col h5{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light); margin-bottom:1.1rem; }
.footer-col a{ display:block; font-size:.9rem; color: rgba(237,239,245,.68); padding: .35rem 0; transition: color .3s, transform .3s; }
.footer-col a:hover{ color:#fff; transform: translateX(3px); }
html[dir="rtl"] .footer-col a:hover{ transform: translateX(-3px); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-block: 1.6rem; font-size:.8rem; color: rgba(237,239,245,.45); flex-wrap:wrap; gap:1rem; }
.social-row{ display:flex; gap:.6rem; }
.social-row a{ width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex;align-items:center;justify-content:center; transition: background .3s, border-color .3s; }
.social-row a:hover{ background: var(--teal); border-color: var(--teal); }
.social-row svg{ width:16px;height:16px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* WhatsApp floating button */
.wa-fab{
  position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 400;
  width: 60px; height:60px; border-radius:50%;
  background: #15803d; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px rgba(21,128,61,.4);
  animation: pulse-wa 2.6s ease-in-out infinite;
}
.wa-fab svg{ width: 28px; height:28px; fill:#fff; }
@keyframes pulse-wa{ 0%,100%{ box-shadow: 0 14px 30px rgba(21,128,61,.4);} 50%{ box-shadow: 0 14px 30px rgba(21,128,61,.75), 0 0 0 8px rgba(21,128,61,.12);} }

/* Discount popup */
.promo-popup{
  position: fixed; z-index: 600; bottom: 26px; inset-inline-start: 26px;
  max-width: 340px; background: var(--navy); color:#fff; border-radius: var(--radius-m);
  padding: 1.4rem 1.5rem; box-shadow: 0 30px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  transform: translateY(20px) scale(.97); opacity:0; visibility:hidden; pointer-events:none;
  transition: all .5s var(--ease);
}
.promo-popup.is-open{ transform: translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto; }
.promo-popup .close-x{ position:absolute; top:10px; inset-inline-end:12px; background:none;border:none;color:rgba(255,255,255,.5); font-size:1.1rem; cursor:pointer; }
.promo-timer{ font-family: var(--font-mono); font-size: 1.6rem; color: var(--gold-light); margin-block: .5rem; letter-spacing: .05em; }

/* page hero (interior pages) */
.page-hero{ padding-top: 9.5rem; padding-bottom: 3.5rem; background: var(--navy); color:#fff; position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4{ color:#fff; }
.breadcrumb{ font-family: var(--font-mono); font-size:.78rem; color: rgba(237,239,245,.5); margin-bottom: 1rem; }
.breadcrumb a{ color: var(--teal-glow); }

/* utility */
.text-teal{ color: var(--teal); }
.text-gold{ color: var(--gold); }
.center{ text-align:center; margin-inline:auto; }
.mt-lg{ margin-top: clamp(2rem,4vw,3.5rem); }
.small{ font-size:.85rem; }
.divider-dot{ display:flex; align-items:center; gap:.6rem; margin-block: 1rem; }
.divider-dot span{ flex:1; height:1px; background: var(--line); }
.divider-dot i{ width:6px;height:6px;border-radius:50%; background: var(--gold); display:block; }

/* forms */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.85rem; font-weight:600; color: var(--navy); }
.field input, .field select, .field textarea{
  padding: .9em 1em; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; font-family: inherit; font-size: .95rem; color: var(--text);
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,110,130,.14); outline:none; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* accent blob background */
.blob-bg{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.35; pointer-events:none; z-index:0; }

[data-i18n], [data-i18n-html]{ }
.skip-link{ position:absolute; inset-inline-start:-999px; top:0; background:#fff; color:#000; padding:1rem; z-index:9999; }
.skip-link:focus{ inset-inline-start: 1rem; top: 1rem; }