/* ╔══════════════════════════════════════════════════════════════
   XL Secure — Homepage Rebrand
   Modern security-tech direction. All design tokens live in :root
   on xlsecure-global.css. This file is scoped to .xls-rebrand
   sections so it never bleeds into the dashboard or other pages.
   ══════════════════════════════════════════════════════════════ */

/* ── Full-bleed escape ────────────────────────────────
   The Extendable theme renders the_content() inside
   <div class="entry-content ... has-global-padding
                is-layout-constrained">
   which clamps children to a narrow content-size and adds
   horizontal padding. The rebrand needs to break out of
   BOTH so its sections paint edge-to-edge. We use the
   WP-native alignfull pattern AND a defensive viewport
   trick so the layout survives even if the theme's
   classes change.                                       */
.xls-rebrand{
  --container:1240px;
  --container-narrow:980px;
  color:var(--xl-ink);

  /* Break out of constrained-layout + global-padding */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
/* Native WP path: when the wrapper carries .alignfull on
   a has-global-padding parent, WP already pulls the
   negative margins for us — leave that alone. */
.has-global-padding > .xls-rebrand.alignfull{
  margin-left:calc(var(--wp--style--root--padding-left) * -1);
  margin-right:calc(var(--wp--style--root--padding-right) * -1);
  width:auto;
  max-width:none;
}
.xls-rebrand *{box-sizing:border-box}
.xls-rebrand img{max-width:100%;height:auto;display:block}

/* Reveal motion */
.xls-rebrand [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--xl-ease), transform .9s var(--xl-ease);
  will-change:transform,opacity;
}
.xls-rebrand [data-reveal].in-view{opacity:1;transform:none}
.xls-rebrand [data-reveal][data-delay="1"].in-view{transition-delay:.08s}
.xls-rebrand [data-reveal][data-delay="2"].in-view{transition-delay:.16s}
.xls-rebrand [data-reveal][data-delay="3"].in-view{transition-delay:.24s}
.xls-rebrand [data-reveal][data-delay="4"].in-view{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
  .xls-rebrand [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── Generic section frame ───────────────────────────── */
.xls-section{
  position:relative;
  padding:clamp(64px,8vw,128px) clamp(20px,4vw,40px);
}
.xls-section__inner{
  max-width:var(--container);
  margin-inline:auto;
}
.xls-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--xl-blue);
}
.xls-kicker::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
}
.xls-eyebrow-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid var(--xl-line);
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.04);
}
.xls-eyebrow-tag .dot{
  width:6px;height:6px;border-radius:999px;background:var(--xl-cyan);
  box-shadow:0 0 12px var(--xl-cyan);
}
.xls-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition:transform .25s var(--xl-ease), box-shadow .25s var(--xl-ease), background .25s var(--xl-ease);
}
.xls-btn--primary{
  background:var(--xl-blue);
  color:#fff;
  box-shadow:0 12px 32px -12px rgba(30,91,255,.6);
}
.xls-btn--primary:hover{
  background:var(--xl-blue-2);
  transform:translateY(-1px);
  box-shadow:0 18px 42px -14px rgba(30,91,255,.75);
}
.xls-btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}
.xls-btn--ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.5);
}
.xls-btn--dark{
  background:var(--xl-ink);
  color:#fff;
}
.xls-btn--dark:hover{
  background:#000;
  transform:translateY(-1px);
}
.xls-btn .arrow{
  width:14px;height:14px;
  transition:transform .25s var(--xl-ease);
}
.xls-btn:hover .arrow{transform:translateX(4px)}

/* ╔═══════════════════════════════════════════════════════
   SECTION 1 — HERO
   ═══════════════════════════════════════════════════════ */
.xls-hero{
  position:relative;
  min-height:min(92vh,860px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(80% 50% at 80% 20%, rgba(30,91,255,.35), transparent 60%),
    radial-gradient(60% 40% at 10% 90%, rgba(0,194,209,.20), transparent 70%),
    linear-gradient(180deg, #060A18 0%, #0A0E1A 45%, #0E1530 100%);
  color:#fff;
  padding:clamp(120px,14vw,180px) clamp(20px,4vw,40px) clamp(80px,10vw,140px);
}
.xls-hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 40%, #000 40%, transparent 80%);
  pointer-events:none;
}
.xls-hero__beams{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.xls-hero__beams::before,
.xls-hero__beams::after{
  content:"";
  position:absolute;
  width:1px;
  height:140%;
  top:-20%;
  background:linear-gradient(180deg, transparent, var(--xl-cyan), transparent);
  opacity:.4;
  animation:xls-beam 7s var(--xl-ease) infinite;
}
.xls-hero__beams::before{left:18%; animation-delay:-3s}
.xls-hero__beams::after{right:22%; animation-delay:-1s; background:linear-gradient(180deg, transparent, var(--xl-blue), transparent)}
@keyframes xls-beam{
  0%,100%{transform:translateY(-10%);opacity:.0}
  50%{transform:translateY(10%);opacity:.55}
}
@media (prefers-reduced-motion: reduce){
  .xls-hero__beams::before,.xls-hero__beams::after{animation:none}
}
.xls-hero__inner{
  position:relative;
  max-width:var(--container);
  margin-inline:auto;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(40px,6vw,80px);
  align-items:center;
}
@media (max-width:960px){
  .xls-hero__inner{grid-template-columns:1fr;gap:48px}
}
.xls-hero__copy h1{
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  line-height:1.04;
  font-weight:700;
  margin:18px 0 22px;
  letter-spacing:-.02em;
}
.xls-hero__copy h1 .accent{
  background:linear-gradient(120deg,#FFFFFF,#FFFFFF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.xls-hero__copy p.lede{
  font-size:clamp(1.05rem, 1.5vw, 1.18rem);
  line-height:1.6;
  max-width:560px;
  color:rgba(255,255,255,.78);
  margin:0 0 32px;
}
.xls-hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.xls-hero__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  max-width:560px;
}
.xls-hero__stat{
  border:1px solid var(--xl-line);
  border-radius:var(--xl-radius);
  padding:18px 18px;
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(6px);
}
.xls-hero__stat .num{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem;
  font-weight:700;
  color:#fff;
  display:block;
  line-height:1;
  margin-bottom:6px;
}
.xls-hero__stat .lbl{
  font-size:.78rem;
  color:rgba(255,255,255,.65);
  letter-spacing:.04em;
}

.xls-hero__visual{
  position:relative;
  aspect-ratio:4/5;
  max-height:680px;
}
.xls-hero__visual::before{
  content:"";
  position:absolute;
  inset:-6%;
  background:radial-gradient(closest-side, rgba(30,91,255,.45), transparent 70%);
  filter:blur(40px);
  z-index:0;
}
.xls-hero__visual-card{
  position:relative;
  height:100%;
  border-radius:var(--xl-radius-lg);
  overflow:hidden;
  border:1px solid var(--xl-line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.xls-hero__visual-card img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:contrast(1.03) saturate(1.05);
}
.xls-hero__visual-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(6,10,24,.55) 100%);
}
.xls-hero__badge{
  position:absolute;
  left:-12px; bottom:24px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(10,14,26,.78);
  border:1px solid var(--xl-line);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 48px -16px rgba(0,0,0,.6);
}
.xls-hero__badge .pulse{
  width:10px;height:10px;border-radius:50%;
  background:var(--xl-cyan);
  box-shadow:0 0 0 0 rgba(0,194,209,.7);
  animation:xls-pulse 1.8s infinite;
}
@keyframes xls-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,194,209,.6)}
  70%{box-shadow:0 0 0 12px rgba(0,194,209,0)}
  100%{box-shadow:0 0 0 0 rgba(0,194,209,0)}
}
@media (prefers-reduced-motion: reduce){.xls-hero__badge .pulse{animation:none}}
.xls-hero__badge .txt{font-size:.85rem;color:#fff}
.xls-hero__badge .txt b{display:block;font-weight:600}
.xls-hero__badge .txt span{color:rgba(255,255,255,.6);font-size:.75rem}

.xls-hero__scroll{
  position:absolute;
  bottom:24px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.55);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
.xls-hero__scroll .line{
  width:1px; height:38px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.5));
  animation:xls-scrolldown 2.4s var(--xl-ease) infinite;
}
@keyframes xls-scrolldown{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (prefers-reduced-motion: reduce){.xls-hero__scroll .line{animation:none}}

/* ╔═══════════════════════════════════════════════════════
   SECTION 2 — THE XL SECURE WAY
   ═══════════════════════════════════════════════════════ */
.xls-way{
  background:var(--xl-paper);
  position:relative;
}
/* Foto verwijderd uit page 91 → sectie paginabreed, één kolom */
.xls-way__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,6vw,80px);
}
.xls-way__media{
  position:relative;
  border-radius:var(--xl-radius-lg);
  overflow:hidden;
  aspect-ratio:1/1;
  background:#0A0E1A;
}
.xls-way__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.xls-way__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(10,14,26,.4));
}
.xls-way__media .frame{
  position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:calc(var(--xl-radius-lg) - 6px);
  pointer-events:none;
}
.xls-way__media .corner{
  position:absolute; width:22px; height:22px;
  border:2px solid var(--xl-cyan);
}
.xls-way__media .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.xls-way__media .corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.xls-way__media .corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.xls-way__media .corner.br{bottom:14px;right:14px;border-left:0;border-top:0}

.xls-way__copy h2{
  font-size:clamp(2rem,3.2vw,2.8rem);
  line-height:1.1;
  margin:14px 0 22px;
  color:var(--xl-ink);
  letter-spacing:-.015em;
}
.xls-way__copy h2 .accent{color:var(--xl-blue)}
.xls-way__copy .lede{
  font-size:1.08rem;
  line-height:1.65;
  color:#404a5e;
  margin:0 0 28px;
  max-width:540px;
}
.xls-way__pillars{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:0 0 32px;
}
@media (max-width:900px){.xls-way__pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.xls-way__pillars{grid-template-columns:1fr}}
.xls-way__pillar{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px;
  border:1px solid var(--xl-line-2);
  border-radius:var(--xl-radius);
  background:#fff;
  transition:transform .3s var(--xl-ease), box-shadow .3s var(--xl-ease), border-color .3s var(--xl-ease);
}
.xls-way__pillar:hover{
  transform:translateY(-3px);
  border-color:var(--xl-blue);
  box-shadow:0 18px 40px -22px rgba(30,91,255,.35);
}
.xls-way__pillar .ico{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:10px;
  background:rgba(30,91,255,.08);
  color:var(--xl-blue);
  display:grid; place-items:center;
}
.xls-way__pillar h4{
  font-size:.95rem; margin:0 0 4px; color:var(--xl-ink);
}
.xls-way__pillar p{
  font-size:.85rem; line-height:1.5; color:var(--xl-mute); margin:0;
}

/* ╔═══════════════════════════════════════════════════════
   SECTION 3 — ONZE DIENSTEN
   ═══════════════════════════════════════════════════════ */
.xls-services{
  background:#fff;
  position:relative;
}
.xls-services__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:56px;
}
.xls-services__head h2{
  font-size:clamp(2rem,3.2vw,2.8rem);
  margin:14px 0 0;
  max-width:640px;
  line-height:1.1;
  letter-spacing:-.015em;
}
.xls-services__head .desc{
  max-width:380px;
  color:var(--xl-mute);
  font-size:.98rem;
  line-height:1.6;
}
.xls-services__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
@media (max-width:1080px){.xls-services__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.xls-services__grid{grid-template-columns:1fr}}

.xls-service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--xl-radius-lg);
  overflow:hidden;
  background:#0A0E1A;
  border:1px solid var(--xl-line);
  min-height:420px;
  text-decoration:none;
  color:#fff;
  isolation:isolate;
  transition:transform .35s var(--xl-ease), box-shadow .35s var(--xl-ease);
}
.xls-service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -28px rgba(30,91,255,.45);
}
.xls-service-card__img{
  position:absolute; inset:0;
  z-index:0;
}
.xls-service-card__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--xl-ease);
}
.xls-service-card:hover .xls-service-card__img img{transform:scale(1.06)}
.xls-service-card__img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,26,.20) 0%, rgba(10,14,26,.55) 50%, rgba(10,14,26,.95) 100%);
}
.xls-service-card__num{
  position:absolute; top:18px; left:18px; z-index:2;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem; letter-spacing:.2em;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);
  padding:6px 10px; border-radius:6px;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
}
.xls-service-card__body{
  position:relative;
  margin-top:auto;
  padding:22px 22px 24px;
  z-index:1;
}
.xls-service-card__body h3{
  font-size:1.4rem;
  font-weight:700;
  margin:0 0 8px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.xls-service-card__body p{
  font-size:.88rem;
  color:rgba(255,255,255,.7);
  margin:0 0 18px;
  line-height:1.5;
}
.xls-service-card__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.85rem; font-weight:600;
  color:#fff;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  transition:background .25s var(--xl-ease), border-color .25s var(--xl-ease);
}
.xls-service-card:hover .xls-service-card__cta{
  background:var(--xl-blue);
  border-color:var(--xl-blue);
}
.xls-service-card__cta .arrow{width:14px;height:14px;transition:transform .25s var(--xl-ease)}
.xls-service-card:hover .xls-service-card__cta .arrow{transform:translateX(3px)}

/* ╔═══════════════════════════════════════════════════════
   SECTION 4 — STATEMENT
   ═══════════════════════════════════════════════════════ */
.xls-statement{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(60% 80% at 80% 50%, rgba(0,194,209,.18), transparent 60%),
    radial-gradient(60% 80% at 20% 50%, rgba(30,91,255,.28), transparent 60%),
    linear-gradient(180deg, #0A0E1A, #0E1530);
  color:#fff;
  text-align:center;
}
.xls-statement::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(50% 50% at 50% 50%, #000, transparent);
  pointer-events:none;
}
.xls-statement__inner{
  position:relative;
  max-width:880px;
  margin-inline:auto;
}
.xls-statement h2{
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1.06;
  margin:18px 0 32px;
  font-weight:700;
  letter-spacing:-.02em;
}
.xls-statement h2 .accent{
  background:linear-gradient(120deg,#FFFFFF,#FFFFFF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.xls-statement p{
  font-size:1.05rem;
  color:rgba(255,255,255,.75);
  max-width:580px;
  margin:0 auto 36px;
  line-height:1.6;
}

.xls-statement__contacts{
  list-style:none;
  padding:0;
  margin:40px auto 0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:760px;
}
.xls-statement__contacts > li{display:flex}
.xls-statement__contacts a{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:14px 22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  backdrop-filter:blur(8px);
  transition:border-color .25s var(--xl-ease),
             background .25s var(--xl-ease),
             transform .25s var(--xl-ease);
}
.xls-statement__contacts a:hover{
  border-color:rgba(0,194,209,.6);
  background:rgba(0,194,209,.06);
  transform:translateY(-2px);
}
.xls-statement__contacts .ico{
  width:38px;height:38px;
  border-radius:10px;
  background:rgba(30,91,255,.18);
  color:var(--xl-cyan);
  display:grid;place-items:center;
  flex-shrink:0;
}
.xls-statement__contacts .txt{
  display:flex;flex-direction:column;
  text-align:left;
  line-height:1.25;
}
.xls-statement__contacts .txt b{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.02rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.01em;
}
.xls-statement__contacts .txt > span{
  font-size:.74rem;
  color:rgba(255,255,255,.55);
  letter-spacing:.06em;
  text-transform:uppercase;
}
@media (max-width:560px){
  .xls-statement__contacts{flex-direction:column;align-items:stretch}
  .xls-statement__contacts a{justify-content:flex-start}
}

/* ╔═══════════════════════════════════════════════════════
   SECTION 5 — TESTIMONIALS
   ═══════════════════════════════════════════════════════ */
.xls-testimonials{background:var(--xl-paper)}
.xls-testimonials__head{
  text-align:center;
  margin-bottom:56px;
}
.xls-testimonials__head h2{
  font-size:clamp(2rem,3.2vw,2.6rem);
  margin:14px 0 0;
  letter-spacing:-.015em;
}
.xls-testimonials__head .desc{
  color:var(--xl-mute);
  font-size:.98rem;
  max-width:480px;
  margin:14px auto 0;
}
.xls-testimonials__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
@media (max-width:900px){.xls-testimonials__grid{grid-template-columns:1fr}}

.xls-quote{
  position:relative;
  background:#fff;
  border-radius:var(--xl-radius-lg);
  padding:36px 32px 32px;
  border:1px solid var(--xl-line-2);
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--xl-ease), box-shadow .35s var(--xl-ease), border-color .35s var(--xl-ease);
}
.xls-quote:hover{
  transform:translateY(-4px);
  border-color:var(--xl-blue);
  box-shadow:0 30px 60px -32px rgba(30,91,255,.35);
}
.xls-quote__mark{
  position:absolute;
  top:18px; right:24px;
  font-family:'Space Grotesk',sans-serif;
  font-size:5rem;
  line-height:1;
  color:rgba(30,91,255,.10);
  font-weight:700;
}
.xls-quote__stars{
  display:flex; gap:2px; margin-bottom:18px;
  color:var(--xl-blue);
}
.xls-quote__body{
  font-size:1rem;
  line-height:1.7;
  color:#1f2840;
  margin:0 0 28px;
  flex:1;
}
.xls-quote__by{
  display:flex; align-items:center; gap:14px;
  padding-top:20px;
  border-top:1px solid var(--xl-line-2);
}
.xls-quote__avatar{
  width:42px; height:42px;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--xl-blue),var(--xl-blue-2));
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
}
.xls-quote__by .meta b{
  display:block; font-size:.95rem; color:var(--xl-ink);
  font-family:'Space Grotesk',sans-serif;
}
.xls-quote__by .meta span{
  font-size:.78rem; color:var(--xl-mute);
}

/* ╔═══════════════════════════════════════════════════════
   SECTION 6 — CTA BAND
   ═══════════════════════════════════════════════════════ */
.xls-cta{
  background:var(--xl-ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.xls-cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 80% at 90% 50%, rgba(30,91,255,.30), transparent 60%),
    radial-gradient(40% 80% at 10% 50%, rgba(0,194,209,.18), transparent 60%);
}
.xls-cta__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}
@media (max-width:880px){.xls-cta__inner{grid-template-columns:1fr;text-align:center}}
.xls-cta h2{
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  line-height:1.12;
  margin:14px 0 16px;
  letter-spacing:-.015em;
}
.xls-cta p{
  color:rgba(255,255,255,.72);
  font-size:1.02rem;
  line-height:1.6;
  max-width:540px;
  margin:0;
}
@media (max-width:880px){.xls-cta p{margin-inline:auto}}
.xls-cta__actions{
  display:flex; flex-direction:column; gap:16px;
}
@media (max-width:880px){.xls-cta__actions{align-items:center}}
.xls-cta__phone{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px;
  border:1px solid var(--xl-line);
  border-radius:var(--xl-radius);
  background:rgba(255,255,255,.04);
  color:#fff;
  text-decoration:none;
  transition:border-color .25s var(--xl-ease), background .25s var(--xl-ease);
}
.xls-cta__phone:hover{
  border-color:var(--xl-cyan);
  background:rgba(0,194,209,.07);
}
.xls-cta__phone .ico{
  width:42px; height:42px; border-radius:10px;
  background:rgba(30,91,255,.15);
  color:var(--xl-cyan);
  display:grid; place-items:center;
  flex-shrink:0;
}
.xls-cta__phone .txt b{display:block;font-size:1.05rem;font-family:'Space Grotesk',sans-serif}
.xls-cta__phone .txt span{font-size:.78rem;color:rgba(255,255,255,.6);letter-spacing:.06em;text-transform:uppercase}

/* ╔═══════════════════════════════════════════════════════
   SECTION 7 — FOOTER MARK (light enhancement, theme footer remains)
   ═══════════════════════════════════════════════════════ */
.xls-footmark{
  background:#060A18;
  color:rgba(255,255,255,.7);
  padding:28px 20px;
  text-align:center;
  font-size:.85rem;
  letter-spacing:.04em;
  border-top:1px solid var(--xl-line);
}
.xls-footmark img{display:inline-block;height:22px;width:auto;margin-bottom:10px;opacity:.9}

/* ╔══════════════════════════════════════════════════════
   SUBPAGE COMPONENTS — shared design tokens for every
   page beyond the homepage. The same .xls-rebrand wrapper
   contains these so they inherit the rebrand baseline.
   ══════════════════════════════════════════════════════ */

/* ── Page hero (shorter than homepage hero) ──────────── */
.xls-page-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(120px,16vw,180px) clamp(20px,4vw,40px) clamp(56px,9vw,100px);
  background:
    radial-gradient(80% 50% at 80% 20%, rgba(30,91,255,.35), transparent 60%),
    radial-gradient(60% 40% at 10% 90%, rgba(0,194,209,.20), transparent 70%),
    linear-gradient(180deg, #060A18 0%, #0A0E1A 45%, #0E1530 100%);
  color:#fff;
}
.xls-page-hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 40%, #000 40%, transparent 80%);
  pointer-events:none;
}
.xls-page-hero__inner{
  position:relative;
  max-width:1240px;
  margin-inline:auto;
  text-align:center;
}
.xls-page-hero__crumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  margin-bottom:18px;
}
.xls-page-hero__crumb a{
  color:inherit;
  text-decoration:none;
  transition:color .2s var(--xl-ease);
}
.xls-page-hero__crumb a:hover{color:#fff}
.xls-page-hero__crumb .sep{color:rgba(255,255,255,.3)}
.xls-page-hero h1{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(1.85rem,5vw,3.8rem);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.018em;
  margin:0 0 18px;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.xls-page-hero h1 .accent{
  display:inline-block;
  background:linear-gradient(120deg,#FFFFFF,#FFFFFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.xls-page-hero p.lede{
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:64ch;
  margin:0 auto 32px;
}
.xls-page-hero__ctas{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
}

/* ── Feature block (alternating media/text rows) ─────── */
.xls-features{
  background:#fff;
  padding:clamp(64px,9vw,128px) clamp(20px,4vw,40px);
}
.xls-features__head{
  max-width:1240px;
  margin:0 auto clamp(40px,6vw,72px);
  text-align:center;
}
.xls-features__head .xls-kicker{justify-content:center}
.xls-features__head h2{
  font-size:clamp(2rem,3.2vw,2.6rem);
  margin:14px 0 0;
  letter-spacing:-.015em;
}
.xls-features__head .desc{
  max-width:60ch;
  margin:14px auto 0;
  color:var(--xl-mute);
  line-height:1.6;
}
.xls-feature-row{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,80px);
  align-items:center;
  padding:clamp(40px,6vw,80px) 0;
  border-top:1px solid var(--xl-line-2);
}
.xls-feature-row:first-of-type{border-top:0}
.xls-feature-row.reverse{direction:rtl}
.xls-feature-row.reverse > *{direction:ltr}
@media (max-width:880px){
  .xls-feature-row{grid-template-columns:1fr;gap:32px}
  .xls-feature-row.reverse{direction:ltr}
}
.xls-feature-row__media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--xl-radius-lg);
  overflow:hidden;
  background:#0A0E1A;
}
.xls-feature-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.xls-feature-row__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,14,26,.35));
}
.xls-feature-row__media .frame{
  position:absolute;inset:14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:calc(var(--xl-radius-lg) - 6px);
  pointer-events:none;
}
.xls-feature-row__media .corner{
  position:absolute;width:22px;height:22px;border:2px solid var(--xl-cyan);
}
.xls-feature-row__media .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.xls-feature-row__media .corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.xls-feature-row__media .corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.xls-feature-row__media .corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.xls-feature-row__num{
  position:absolute;top:18px;left:18px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.74rem;letter-spacing:.18em;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8);
  padding:6px 10px;border-radius:6px;
  backdrop-filter:blur(8px);
  z-index:2;
}
.xls-feature-row__copy h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:14px 0 16px;
  color:var(--xl-ink);
}
.xls-feature-row__copy .xls-kicker{color:var(--xl-blue)}
.xls-feature-row__copy p.intro{
  font-size:1rem;
  line-height:1.6;
  color:#404a5e;
  margin:0 0 22px;
  max-width:48ch;
}
.xls-feature-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.xls-feature-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--xl-line-2);
  border-radius:var(--xl-radius);
  transition:border-color .2s var(--xl-ease), transform .2s var(--xl-ease), box-shadow .2s var(--xl-ease);
}
.xls-feature-list li:hover{
  border-color:var(--xl-blue);
  transform:translateY(-1px);
  box-shadow:0 12px 28px -18px rgba(30,91,255,.35);
}
.xls-feature-list .check{
  width:24px;height:24px;flex-shrink:0;
  border-radius:50%;
  background:rgba(30,91,255,.10);
  color:var(--xl-blue);
  display:grid;place-items:center;
  margin-top:1px;
}
.xls-feature-list .check svg{width:14px;height:14px}
.xls-feature-list .txt b{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;
  color:var(--xl-ink);
  margin-bottom:2px;
}
.xls-feature-list .txt p{
  font-size:.88rem;
  color:var(--xl-mute);
  margin:0;
  line-height:1.5;
}

/* ── Projects grid ───────────────────────────────────── */
.xls-projects{
  background:var(--xl-paper);
  padding:clamp(64px,9vw,128px) clamp(20px,4vw,40px);
}
.xls-projects__inner{max-width:1240px;margin-inline:auto}
.xls-projects__head{text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.xls-projects__head .xls-kicker{justify-content:center}
.xls-projects__head h2{
  font-size:clamp(2rem,3.2vw,2.6rem);
  margin:14px 0 0;
}
.xls-projects__head .desc{
  max-width:60ch;margin:14px auto 0;
  color:var(--xl-mute);line-height:1.6;
}
.xls-projects__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
@media (max-width:980px){.xls-projects__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.xls-projects__grid{grid-template-columns:1fr}}
.xls-project-card{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:var(--xl-radius-lg);
  overflow:hidden;
  background:#0A0E1A;
  border:1px solid var(--xl-line);
  min-height:340px;
  color:#fff;
  text-decoration:none;
  isolation:isolate;
  transition:transform .3s var(--xl-ease), box-shadow .3s var(--xl-ease);
}
.xls-project-card:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 50px -28px rgba(30,91,255,.4);
}
.xls-project-card__img{position:absolute;inset:0;z-index:0}
.xls-project-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--xl-ease)}
.xls-project-card:hover .xls-project-card__img img{transform:scale(1.05)}
.xls-project-card__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,14,26,.15), rgba(10,14,26,.55) 60%, rgba(10,14,26,.95));
}
.xls-project-card__tag{
  position:absolute;top:18px;left:18px;z-index:2;
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:6px 12px;border-radius:6px;backdrop-filter:blur(8px);
}
.xls-project-card__body{position:relative;margin-top:auto;padding:22px;z-index:1}
.xls-project-card__body h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.25rem;font-weight:700;line-height:1.2;
  margin:0 0 6px;letter-spacing:-.01em;
}
.xls-project-card__body p{
  font-size:.85rem;color:rgba(255,255,255,.7);
  margin:0;line-height:1.5;
}
.xls-project-card.is-placeholder{
  background:linear-gradient(180deg,#0A0E1A,#0E1530);
  display:grid;place-items:center;
  text-align:center;
  padding:32px;
}
.xls-project-card.is-placeholder .xls-project-card__body{margin:0;padding:0}
.xls-project-card.is-placeholder h3{color:rgba(255,255,255,.8)}
.xls-project-card.is-placeholder p{color:rgba(255,255,255,.5)}

/* ── Form section (Contact, Join the team, Experience) ── */
.xls-form-section{
  background:#fff;
  padding:clamp(56px,8vw,112px) clamp(20px,4vw,40px);
}
.xls-form-section__inner{
  max-width:1080px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px,6vw,72px);
  align-items:start;
}
@media (max-width:880px){.xls-form-section__inner{grid-template-columns:1fr;gap:40px}}
.xls-form-section__copy h2{
  font-size:clamp(1.8rem,3vw,2.4rem);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:14px 0 16px;
}
.xls-form-section__copy p.intro{
  font-size:1rem;line-height:1.6;
  color:#404a5e;margin:0 0 28px;
}
.xls-info-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.xls-info-list li{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;
  border:1px solid var(--xl-line-2);
  border-radius:var(--xl-radius);
  background:#fff;
  transition:border-color .2s var(--xl-ease), transform .2s var(--xl-ease);
}
.xls-info-list li:hover{border-color:var(--xl-blue);transform:translateY(-1px)}
.xls-info-list .ico{
  width:38px;height:38px;border-radius:10px;
  background:rgba(30,91,255,.10);
  color:var(--xl-blue);
  display:grid;place-items:center;flex-shrink:0;
}
.xls-info-list .txt span{display:block;font-size:.74rem;color:var(--xl-mute);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.xls-info-list .txt b,
.xls-info-list .txt a{font-family:'Space Grotesk',sans-serif;font-size:1rem;color:var(--xl-ink);text-decoration:none;font-weight:600}
.xls-info-list .txt a:hover{color:var(--xl-blue)}

.xls-form-card{
  background:#fff;
  border:1px solid var(--xl-line-2);
  border-radius:var(--xl-radius-lg);
  padding:clamp(24px,3vw,40px);
  box-shadow:0 24px 56px -32px rgba(10,14,26,.18);
}
.xls-form-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.3rem;font-weight:700;
  margin:0 0 8px;letter-spacing:-.01em;
}
.xls-form-card p.intro{
  font-size:.95rem;color:#404a5e;margin:0 0 22px;line-height:1.5;
}
.xls-form-card .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]),
.xls-form-card input[type="text"],
.xls-form-card input[type="email"],
.xls-form-card input[type="tel"],
.xls-form-card textarea,
.xls-form-card select{
  width:100%;
  border:1px solid var(--xl-line-2);
  background:#fff;
  border-radius:10px;
  padding:12px 14px;
  font-size:.95rem;
  font-family:'Inter',sans-serif;
  color:var(--xl-ink);
  transition:border-color .2s var(--xl-ease), box-shadow .2s var(--xl-ease);
}
.xls-form-card input:focus,
.xls-form-card textarea:focus,
.xls-form-card select:focus{
  outline:none;
  border-color:var(--xl-blue);
  box-shadow:0 0 0 4px rgba(30,91,255,.10);
}
.xls-form-card textarea{min-height:140px;resize:vertical}
.xls-form-card label,
.xls-form-card p{font-size:.92rem;color:var(--xl-ink)}
.xls-form-card .wpcf7-submit,
.xls-form-card input[type="submit"]{
  display:inline-flex;
  align-items:center;
  background:var(--xl-blue);
  color:#fff;
  border:0;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  cursor:pointer;
  width:auto;
  transition:background .2s var(--xl-ease), transform .2s var(--xl-ease), box-shadow .2s var(--xl-ease);
  box-shadow:0 12px 32px -14px rgba(30,91,255,.55);
}
.xls-form-card .wpcf7-submit:hover,
.xls-form-card input[type="submit"]:hover{
  background:var(--xl-blue-2);
  transform:translateY(-1px);
  box-shadow:0 16px 40px -16px rgba(30,91,255,.7);
}

/* ── USP row (three pill stats above a form) ─────────── */
.xls-usp-row{
  background:#fff;
  padding:clamp(40px,5vw,72px) clamp(20px,4vw,40px) 0;
}
.xls-usp-row__inner{
  max-width:1080px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
@media (max-width:780px){.xls-usp-row__inner{grid-template-columns:1fr}}
.xls-usp{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  border:1px solid var(--xl-line-2);
  border-radius:var(--xl-radius);
}
.xls-usp .ico{
  width:42px;height:42px;border-radius:10px;
  background:rgba(0,194,209,.10);
  color:#000000;
  display:grid;place-items:center;flex-shrink:0;
}
.xls-usp b{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:1rem;color:var(--xl-ink);
}
.xls-usp span{display:block;font-size:.82rem;color:var(--xl-mute);margin-top:2px}