/* ==========================================================
   Quantum FinOps — BASE
   Tokens, page canvas, global resets, repeating type patterns,
   buttons, and the chrome (header, menu, banner, footer) that
   renders on every page including /ar.

   Load order in template.conf:  qf-base → qf-sections → qf-rtl
   ========================================================== */

:root{
  --qf-navy:#082247;
  --qf-deep:#0b2f62;
  --qf-blue:#1f63c6;
  --qf-teal:#0f8f8a;
  --qf-warm:#d3921e;
  --qf-muted:#5f6f86;
  --qf-line:rgba(8,34,71,.10);
  --qf-tint:#fbfdff;
  --qf-shadow:0 18px 50px rgba(8,34,71,.08);
  --qf-shadow-sm:0 8px 24px rgba(8,34,71,.04);
  --qf-radius:24px;
  --qf-max:1180px;
  --qf-banner-h:47px;
}

/* ---------- Page canvas ---------- */
html{ scroll-behavior:smooth; scroll-padding-top:130px; }

body{
  font-family:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px !important;
  line-height:1.6 !important;
  font-weight:400;
  color:var(--qf-navy) !important;
  background:
    radial-gradient(circle at 85% 10%, rgba(31,99,198,.08), transparent 24%),
    radial-gradient(circle at 10% 16%, rgba(15,143,138,.07), transparent 18%),
    linear-gradient(180deg,#ffffff,#fbfdff 48%,#f7fafe);
}

/* ---------- Headings ----------
   The Visual Editor emits an inline <style> with h1,h2,h3,h4{font-weight:500}
   INSIDE the body, so it beats a plain element selector on document order no
   matter where qf-base loads. .zpheading adds a class and settles it.
   The editor's own heading-weight slot does not take effect — CSS is the
   only lever here.

   NOTE: .qf-hero-title h1{font-weight:300} in qf-sections is also (0,1,1),
   so it only wins because qf-sections loads AFTER this file. Keep that order.

   The demo has NO global heading letter-spacing rule — only per-class ones.
   So every heading the demo styles by class needs letter-spacing:normal in
   qf-sections to match. */
h1,h2,h3,h4{ letter-spacing:-.04em; font-weight:700; }

h1.zpheading, h2.zpheading, h3.zpheading, h4.zpheading{
  font-weight:700;
}

/* ---------- Container: match the demo's 1180px ---------- */
@media (min-width:992px){
  .theme-pages-full-stretch .zpcontainer{
    width:min(var(--qf-max), calc(100% - 40px));
    max-inline-size:none;
    padding-inline-start:0;
    padding-inline-end:0;
    margin-inline-start:auto;
    margin-inline-end:auto;
  }
}

/* ---------- Global margin and padding ---------- */
.zpelement{ margin-block-start:0; margin-block-end:0; }
.zprow{ margin-block-start:0; margin-block-end:0; }
.zpelem-col{ padding-block-start:0; padding-block-end:0; }

/* ---------- Repeating type patterns ---------- */
.qf-eyebrow .zptext > p{
  display:inline-flex; align-items:center; gap:8px;
  margin:0;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(8,34,71,.08);
  background:rgba(31,99,198,.04);
  color:#325372; font-size:.82rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.qf-eyebrow .zptext > p::before{
  content:""; flex:0 0 8px;
  width:8px; height:8px; border-radius:50%;
  background:var(--qf-teal); box-shadow:0 0 18px var(--qf-teal);
}

.qf-title h1, .qf-title h2, .qf-title h3{
  margin:18px 0 14px;
  font-size:clamp(2rem,4vw,3.45rem);
  line-height:1.08; letter-spacing:-.045em;
  max-width:850px;
}
.qf-lead .zptext > p{
  max-width:760px; margin:0;
  color:var(--qf-muted); font-size:1.08rem;
}

/* Section padding lives here, not in the builder panels — those emit
   per-element [data-element-id] blocks (0,2,1) inside the body that
   beat this file regardless of load order. Hero is the exception
   (88/78 set in the builder). */
.qf-section.zpsection{
  padding-block-start:96px;
  padding-block-end:96px;
}
@media (max-width:767px){
  .qf-section.zpsection{
    padding-block-start:72px;
    padding-block-end:72px;
  }
}

/* ---------- Tinted section helper ---------- */
.qf-tint{ background:var(--qf-tint); }

/* ---------- Buttons ---------- */
/* NOTE: these target the .zpbutton-wrapper <a>. The contact form's submit
   is an <input type="submit"> with .zpbutton but NO .zpbutton-wrapper, so
   it is styled separately in qf-sections. */
.zpbutton-wrapper.zpbutton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 19px;
  border-radius:14px;
  font-size:1rem;
  font-weight:800;
  line-height:1;
  border:1px solid transparent;
  transition:.25s ease;
}

.zpbutton-wrapper.zpbutton-type-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--qf-deep),var(--qf-blue));
  box-shadow:0 12px 28px rgba(31,99,198,.18);
}
.zpbutton-wrapper.zpbutton-type-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(31,99,198,.22);
}

.zpbutton-wrapper.zpbutton-type-secondary{
  color:var(--qf-navy);
  background:#fff;
  border-color:rgba(8,34,71,.12);
  box-shadow:none;
}
.zpbutton-wrapper.zpbutton-type-secondary:hover{
  background:#f7faff;
  border-color:rgba(31,99,198,.24);
}
.zpbutton-wrapper.zpbutton.zpbutton-size-md{
  min-height:48px;
  padding:0 19px;
  font-size:1rem;
  font-weight:800;
  line-height:1;
  border-radius:14px;
}

/* ---------- Card: services, cases, industries ---------- */
.qf-card{
  padding:28px;
  border-radius:var(--qf-radius);
  border:1px solid var(--qf-line);
  background:#fff;
  box-shadow:0 10px 28px rgba(8,34,71,.04);
  transition:.25s ease;
}
.qf-card:hover{
  transform:translateY(-4px);
  border-color:rgba(15,143,138,.22);
}


/* ==========================================================
   CHROME — header, menu, banner, footer
   Template regions: these render on every page, /ar included.
   ========================================================== */

/* ---------- Header ---------- */
[data-headercontainer].zpheader-style-01{
  position:sticky;
  top:var(--qf-banner-h);   /* sits below the sticky banner */
  z-index:1000;
}

[data-headercontainer].zpheader-style-01 .theme-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(8,34,71,.08);
  box-shadow:0 8px 28px rgba(8,34,71,.04);
}

[data-headercontainer].zpheader-style-01 .theme-header-topbar{
  display:none;
}

[data-headercontainer].zpheader-style-01 .theme-header > .zpcontainer{
  padding-top:8px;
  padding-bottom:8px;
}
[data-headercontainer].zpheader-style-01 .theme-branding-info,
[data-headercontainer].zpheader-style-01 .theme-logo-parent{
  margin-top:0;
  margin-bottom:0;
}

/* ---------- Menu ---------- */
.theme-navigation-and-icons .theme-menu-area .theme-menu ul > li > a{
  font-size:.94rem;
  font-weight:500;
  color:#385171;
}
.theme-navigation-and-icons .theme-menu-area .theme-menu ul > li > a:hover,
.theme-navigation-and-icons .theme-menu-area .theme-menu ul > li.theme-menu-selected > a{
  color:var(--qf-navy);
}

/* Arabic — coloured link rather than a pill, to keep it narrow */
.theme-menu ul > li:has([data-theme-menu-name="العربية"]) > a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  background:#fff;
  border:1px solid rgba(8,34,71,.12);
  transition:.25s ease;
}
.theme-menu ul > li:has([data-theme-menu-name="العربية"]) > a:hover{
  background:#f7faff;
  border-color:rgba(31,99,198,.24);
}

/* Start a Project — primary button, matching .zpbutton-type-primary */
.theme-menu ul > li:has([data-theme-menu-name="Start a Project"]) > a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--qf-deep),var(--qf-blue));
  box-shadow:0 10px 24px rgba(31,99,198,.18);
  font-weight:800;
  transition:.25s ease;
}
.theme-menu ul > li:has([data-theme-menu-name="Start a Project"]) > a:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(31,99,198,.22);
}
.theme-menu ul > li:has([data-theme-menu-name="Start a Project"]) > a .theme-menu-name,
.theme-menu ul > li:has([data-theme-menu-name="Start a Project"]) > a:hover .theme-menu-name{
  color:#fff;
}
@media (min-width:992px){
  .theme-navigation-and-icons .theme-menu-area .theme-menu ul li:has([data-theme-menu-name="Start a Project"]) > a{
    color:#fff;
    border-radius:12px;
    font-weight:800;
    font-size:.94rem;
    padding-inline-start:14px;
    padding-inline-end:14px;
  }
   .theme-navigation-and-icons .theme-menu-area .theme-menu ul li:has([data-theme-menu-name="العربية"]) > a,
  .theme-navigation-and-icons .theme-menu-area .theme-menu ul li.theme-menu-selected:has([data-theme-menu-name="العربية"]) > a{
    color:#385171;
    border-radius:12px;
    font-weight:500;
    font-size:.94rem;
    padding-inline-start:14px;
    padding-inline-end:14px;
  }
}
/* ---------- Announcement banner ---------- */
/* Code Snippet; JS moves it above the header at runtime */

.qf-banner{
  position:sticky;
  top:0;
  z-index:1001;
  opacity:0;
  transition:opacity .2s ease;
  min-height:46px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(8,34,71,.07);
  background:
    linear-gradient(90deg,rgba(15,143,138,.08),rgba(31,99,198,.08),rgba(211,146,30,.06)),
    #f7fbff;
}

.qf-banner-inner{
  width:min(var(--qf-max), calc(100% - 40px));
  margin:auto;
  min-height:46px;
  display:grid;
  grid-template-columns:38px 1fr 38px;
  gap:10px;
  align-items:center;
}

.qf-banner-ctrl{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  font-size:1.15rem;
  border-radius:10px;
  border:1px solid rgba(8,34,71,.10);
  background:rgba(255,255,255,.7);
  color:var(--qf-navy);
  cursor:pointer;
  transition:.2s ease;
}
.qf-banner-ctrl:hover{
  background:rgba(255,255,255,.95);
  transform:translateY(-1px);
}

.qf-banner-stage{
  position:relative;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qf-banner-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
  text-align:center;
  font-size:.86rem;
  color:#36506f;
}
.qf-banner-slide.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.qf-banner-slide strong{ color:var(--qf-navy); }

.qf-banner-link{
  color:var(--qf-teal);
  font-weight:850;
  white-space:nowrap;
  border-bottom:1px solid rgba(15,143,138,.35);
}

.qf-banner-count{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(211,146,30,.08);
  border:1px solid rgba(211,146,30,.16);
  color:#8f6312;
  font-weight:800;
  font-size:.76rem;
  white-space:nowrap;
}

.qf-banner-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:rgba(8,34,71,.05);
}
.qf-banner-progress i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--qf-teal),var(--qf-blue));
  animation:qfBannerProgress 6s linear infinite;
}
@keyframes qfBannerProgress{
  from{ width:0 }
  to{ width:100% }
}

/* collapse the empty section the banner snippet leaves behind,
   so there's no gap above the hero */
[data-element-id="elm_7kAbqtS0srOAcs2jYF2SOw"].zpsection{
  padding-block-start:0;
  padding-block-end:0;
  padding-inline-start:0;
  padding-inline-end:0;
  min-height:0;
}

@media (max-width:680px){
  .qf-banner-inner{
    width:calc(100% - 18px);
    grid-template-columns:32px 1fr 32px;
  }
  .qf-banner-slide{
    font-size:.75rem;
    gap:7px;
  }
  .qf-banner-slide .qf-hide-mob{ display:none; }
  .qf-banner-count{ font-size:.67rem; }
}

/* ---------- Footer ---------- */
/* A normal section inside the template's footer area, so the usual
   selectors apply. No section ID available, so scoped by class. */

.qf-footer .zprow-container .zprow-container{
  margin-inline-start:0;
  margin-inline-end:0;
  width:auto;
}

/* one of the deliberate non-transparent sections, like the trust strip.
   Not .qf-section — the demo's footer has its own padding. */
.qf-footer.zpsection{
  margin-block-start:70px;
  padding-block-start:34px;
  padding-block-end:42px;
  border-block-start:1px solid rgba(8,34,71,.08);
  background:#fbfdff;
}

/* the builder made three equal thirds; space-between with auto-width
   columns is what puts the links hard right, as in the demo.
   align-items:center explicit — Zoho puts zpalign-items-flex-start
   on every row it creates. */
.qf-footer-row.zprow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}

.qf-footer .qf-footer-row > .zpelem-col{
  flex:0 0 auto;
  width:auto;
  max-inline-size:none;
  min-inline-size:0;
  padding-inline-start:0;
  padding-inline-end:0;
}

/* Logo.
   The desktop size (163x56) is set in the builder's image panel, which
   emits a per-element block WITH !important and switches the container
   to .zpimage-size-custom. That matters: .zpimage-size-fit carries
   width:100%!important; height:auto!important above 992px, which no
   amount of specificity beats. The builder panel is the only lever.
   Below 992px the container falls back to fit mode, so the rules here
   still do the work. */
.qf-footer .qf-f-logo .zpimage-container,
.qf-footer .qf-f-logo figure,
.qf-footer .qf-f-logo .zpimage-anchor,
.qf-footer .qf-f-logo picture{
  display:grid;
  place-items:center;
  margin:0;
}
.qf-footer .qf-f-logo .zpimage-container figure img{
  height:56px;
  width:auto;
  max-inline-size:none;
  object-fit:contain;
}

.qf-f-copy .zptext > p{
  margin:0;
  font-size:.83rem;
  color:var(--qf-muted);
}

/* the three links are ONE text element with three <a> and no spaces
   between them — a stray &nbsp; becomes its own flex item and doubles
   the gap */
.qf-f-links .zptext > p{
  display:flex;
  gap:18px;
  margin:0;
  font-size:.84rem;
}
.qf-f-links .zptext > p a{
  color:#516a86;
  white-space:nowrap;
  transition:color .2s ease;
}
.qf-f-links .zptext > p a:hover{
  color:var(--qf-navy);
}

.qf-f-copy .zptext br,
.qf-f-links .zptext br{ display:none; }

.qf-f-copy .zptext b, .qf-f-copy .zptext strong{
  font-weight:inherit;
}

@media (max-width:680px){
  .qf-footer-row.zprow{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
  }
  .qf-footer .qf-f-logo .zpimage-container figure img{ height:46px; }
  .qf-footer .qf-f-logo .zpimage-container,
  .qf-footer .qf-f-logo figure,
  .qf-footer .qf-f-logo .zpimage-anchor,
  .qf-footer .qf-f-logo picture{ place-items:center start; }
}