.elementor-kit-13{--e-global-color-primary:#0F0F0F;--e-global-color-secondary:#0F0F0F;--e-global-color-text:#0F0F0F;--e-global-color-accent:#5BA9D6;--e-global-color-7e00cd4:#032541;--e-global-color-5ea6643:#092C5E;--e-global-typography-primary-font-family:"Fira Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Fira Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Red Hat Display";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Red Hat Display";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-kit-13 a{color:var( --e-global-color-accent );}.elementor-kit-13 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-13 h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-13 h3{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-13 h4{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-13 h5{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-13 h6{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1220px;}.e-con{--container-max-width:1220px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==============================================================
   HOLA QUANTUM — HERO CTAs ABOVE THE PALM (ONE-BLOCK CONTROLS)
   Use classes in Elementor:
     • Outer background container:  hq-hero-arm
     • Wrapper (heading + buttons): hq-cta-wrapper hq-cta-stack
     • Group wrapping the 3 button containers: hq-cta-buttons
     • Each individual button container: hq-cta-btn
   NOTE: All variables you may want to tweak are below.
============================================================== */

/* ---------- 0) ALL YOUR KNOBS (TWEAK HERE ONLY) ---------- */
:root{
  /* Background image framing */
  --hero-bg-x: 110%;                 /* X position of robot arm image */
  --hero-bg-y: 15%;                 /* Y position of robot arm image */

  /* Hero height by device */
  --hero-minh-desktop: 820px;
  --hero-minh-tablet: 740px;
  --hero-minh-mobile-p: 80vh;       /* portrait */
  --hero-minh-mobile-l: 60vh;       /* landscape */

  /* CTA block placement ABOVE palm (negative = UP, positive = DOWN) */
  --cta-shiftX-desktop: 0%;
  --cta-shiftY-desktop: -150%;
  --cta-shiftX-tablet:  0%;
  --cta-shiftY-tablet:  -120%;
  --cta-shiftX-mobile:  0%;
  --cta-shiftY-mobile:  -50%;

  /* Button geometry (same for all three) */
  --cta-gap: 10px;                 /* space between buttons (desktop/tablet) */
  --cta-height: 44px;              /* identical desktop/tablet height */
  --cta-pad-v: 8px;                /* vertical padding */
  --cta-pad-h: 36px;               /* horizontal padding */
  --cta-radius: 6px;
  --cta-font: clamp(15px,1.6vw,18px);

  /* Mobile portrait specifics */
  --cta-mobile-wrap: normal;       /* allow wrap on phones */
  --cta-mobile-pad-v: 10px;
  --cta-mobile-pad-h: 28px;

  /* Bottom button visual width (when it sits under the top pair) */
  --cta-bottom-max-desktop: calc(50% - var(--cta-gap));  /* equals one top cell */
  --cta-bottom-max-tablet:  calc(50% - var(--cta-gap));
  --cta-bottom-max-mobile-l: calc(50% - 8px);            /* landscape gap is tighter */
}

/* ========== BASE LAYOUT (applies to all devices unless overridden) ========== */

/* 1) Outer hero with robot arm */
.elementor .hq-hero-arm{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: var(--hero-minh-desktop);
  margin:0 !important; padding:0 !important;

  background-repeat:no-repeat !important;
  background-position: var(--hero-bg-x) var(--hero-bg-y) !important;
  background-size: clamp(900px, 78vw, 1380px) auto !important;
}

/* 2) Wrapper (title + buttons) — centered, then nudged by variables */
.elementor .hq-cta-wrapper,
.elementor .hq-cta-stack{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: clamp(14px, 2vw, 22px);
  width: min(90vw, 640px);
  margin: 0 auto !important; padding:0 !important;

  /* Single transform line that reads device-specific variables */
  --_shiftX: var(--cta-shiftX-desktop);
  --_shiftY: var(--cta-shiftY-desktop);
  transform: translate(var(--_shiftX), var(--_shiftY)) !important;
}

/* 3) Title tidy */
.elementor .hq-cta-wrapper .elementor-heading-title,
.elementor .hq-cta-wrapper h1,
.elementor .hq-cta-wrapper h2,
.elementor .hq-cta-wrapper h3{
  margin:0 0 clamp(10px,2vw,18px) 0 !important;
  line-height:1.1; max-width:48ch;
  font-size: clamp(22px, 3.2vw, 40px); font-weight:700;
}

/* 4) Buttons group — FLEX (2 top + 1 centered below) */
.elementor .hq-cta-buttons{
  display:flex !important; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap: var(--cta-gap);
  width:100%;
}

/* each button container (top two = 50%; bottom = same width centered) */
.elementor .hq-cta-btn{
  margin:0 !important; padding:0 !important;
  flex: 0 1 calc(50% - var(--cta-gap));
  display:flex; justify-content:center; align-items:center;
}
.elementor .hq-cta-buttons .hq-cta-btn:nth-child(3){
  flex-basis: calc(50% - var(--cta-gap));
  margin-left:auto !important; margin-right:auto !important;
}

/* 5) Actual buttons — identical height, no wrap on desktop/tablet */
.elementor .hq-cta-wrapper .elementor-button{
  width:100% !important;
  height: var(--cta-height) !important;         /* locks equal height */
  display:inline-flex !important; align-items:center; justify-content:center;
  padding: var(--cta-pad-v) var(--cta-pad-h) !important;
  font-size: var(--cta-font) !important;
  border-radius: var(--cta-radius) !important;
  white-space: nowrap !important;               /* prevents wrap that changes height */
  line-height:1.2 !important; box-sizing:border-box; text-align:center;
}

/* Normalize any Elementor wrapper spacing around buttons */
.elementor .hq-cta-btn .elementor-widget-button,
.elementor .hq-cta-btn .elementor-button-wrapper,
.elementor .hq-cta-btn .elementor-widget-container{
  width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}

/* ============================ TABLET OVERRIDES ============================ */
@media (min-width:768px) and (max-width:1024px){
  .elementor .hq-hero-arm{
    min-height: var(--hero-minh-tablet);
    background-position: 90% 32% !important;
    background-size: clamp(720px, 88vw, 1100px) auto !important;
  }
  .elementor .hq-cta-wrapper,
  .elementor .hq-cta-stack{
    --_shiftX: var(--cta-shiftX-tablet);
    --_shiftY: var(--cta-shiftY-tablet);
    width: min(92vw, 640px);
  }
  /* bottom button width feels the same as a top cell */
  .elementor .hq-cta-buttons .hq-cta-btn:nth-child(3){
    flex-basis: var(--cta-bottom-max-tablet);
  }
}

/* ========================== MOBILE PORTRAIT OVERRIDES ========================== */
@media (max-width:767px){
  .elementor .hq-hero-arm{
    min-height: var(--hero-minh-mobile-p);
    background-position: -20% 95% !important;
    background-size: clamp(520px, 110vw, 880px) auto !important;
  }
  .elementor .hq-cta-wrapper,
  .elementor .hq-cta-stack{
    --_shiftX: var(--cta-shiftX-mobile);
    --_shiftY: var(--cta-shiftY-mobile);
    width: min(94vw, 560px);
  }

  /* On narrow phones, stack vertically for clarity */
  .elementor .hq-cta-btn{ flex-basis: 100%; }

  /* Allow wrapping & natural height on mobile */
  .elementor .hq-cta-wrapper .elementor-button{
    white-space: var(--cta-mobile-wrap) !important;
    height:auto !important;
    min-height: 40px;
    padding: var(--cta-mobile-pad-v) var(--cta-mobile-pad-h) !important;
    line-height: 1.25 !important;
  }
}

/* ======================== MOBILE LANDSCAPE OVERRIDES ======================== */
@media (max-width:767px) and (orientation:landscape){
  .elementor .hq-hero-arm{
    min-height: var(--hero-minh-mobile-l);
    background-position: 70% 30% !important;
    background-size: clamp(620px, 120vw, 980px) auto !important;
  }
  /* Return to 2-up layout in landscape */
  .elementor .hq-cta-btn{
    flex-basis: calc(50% - 8px); /* narrower gap feels better in landscape */
  }
  .elementor .hq-cta-buttons .hq-cta-btn:nth-child(3){
    flex-basis: var(--cta-bottom-max-mobile-l);
  }
}/* End custom CSS */