:root{
  --color-primary: #222222;
  --color-secondary: var(--wp--preset--color--secondary);
  --color-dark: var(--wp--preset--color--dark);
  --color-mid: var(--wp--preset--color--mid);
  --color-light: var(--wp--preset--color--light);
  --color-white: var(--wp--preset--color--white);
  --color-grey-8: #555;
  --color-black: #000000;
  --color-accent: #0077FF;
  --max-width: var(--wp--style--layout--content-size, 1320px);
  --header-height: 73px;
  --radius: 12px;
  --space: 24px;
  --space-lg: 48px;
  --font-display: 'scale-variable', system-ui, -apple-system, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-subheading: 'DM Mono', 'Courier New', monospace;
  --font-base: var(--font-body);
  --tracking-display-large: -0.0417em;
  --tracking-display: -0.025em;
  --tracking-heading-large: -0.0417em;
  --tracking-heading: -0.025em;
  --tracking-subheading-large: 0.0417em;
  --tracking-subheading: 0;
  --tracking-body: -0.025em;
  --text-body: 1.1rem;
  --text-body-small: 1rem;
  --text-body-large: 1.325rem;
  --heading-section-size: clamp(2rem, 4vw, 4.8rem);
  --heading-section-size-large: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 992px){
  :root{
    --header-height: 81px;
  }
}
*{box-sizing:border-box}

@media (prefers-reduced-motion: no-preference) {
  html {scroll-behavior: smooth;}
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{margin:0;background: var(--color-white);color:var(--color-dark);font-family:var(--font-base);font-size:var(--text-body);line-height:1.5;letter-spacing:var(--tracking-body);-webkit-font-smoothing: antialiased;}
a{color: var(--color-primary);text-decoration:none}
a:hover{/* text-decoration:underline; */}
.container{max-width:var(--max-width);margin-inline:auto;padding-inline:16px}

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Global focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  a:focus, a:active, a:focus-visible,
  button:focus, button:active, button:focus-visible,
  input:focus, input:active, input:focus-visible,
  select:focus, select:active, select:focus-visible,
  textarea:focus, textarea:active, textarea:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus,
  [tabindex]:not([tabindex="-1"]):active,
  [tabindex]:not([tabindex="-1"]):focus-visible,
  .skip-link:focus, .skip-link:focus-visible {
    outline: none;
    outline-offset: 0;
  }
  a:focus, a:active { text-decoration: none; }
  html { -webkit-tap-highlight-color: transparent; }
}

/* Allow titles to wrap to prevent horizontal scroll */
h1,h2,h3,h4,h5,h6,[class*="__title"],[class*="-title"]{/* overflow-wrap:break-word; *//* word-break:break-word; */}
.site-header.is-sticky{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(1.5) blur(6px)}

.site-main{padding-top:var(--header-height)}
.main-no-padding .site-main{padding-top:0}

/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;font-size:var(--text-body-small);padding-block: 2rem 1rem;}
.breadcrumb__link{color:var(--color-primary)}
.breadcrumb__link--home{color:var(--color-primary)}
.breadcrumb__link:not(.breadcrumb__link--home){color:var(--color-grey-8)}
.breadcrumb__link:hover{text-decoration:underline}
.breadcrumb__current{color:var(--color-grey-8)}
.breadcrumb__sep{display:inline-flex;color:var(--color-black);line-height:1}

@keyframes fadeInFromLeft{
  from{opacity:0;transform:translateX(-0.375rem)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes fadeInFromBottom{
  from{opacity:0;transform:translateY(1rem)}
  to{opacity:1;transform:translateY(0)}
}
.anim-entrance-left{opacity:0;animation:fadeInFromLeft var(--animations-duration, 300ms) ease forwards}
.breadcrumb__segment{animation-delay:calc(var(--breadcrumb-i, 0) * 100ms);animation-duration:600ms}

/* Cascade entrance (on load): left / bottom; children use --i for stagger. Parent may set --stagger-delay, --cascade-duration. */
@media (prefers-reduced-motion: no-preference) {
  .anim-cascade-left > * {
    opacity: 0;
    animation: fadeInFromLeft var(--cascade-duration, 0.4s) ease forwards;
    animation-delay: calc(var(--i, 0) * var(--stagger-delay, 100ms));
  }
  .anim-cascade-bottom > * {
    opacity: 0;
    animation: fadeInFromBottom var(--cascade-duration, 0.4s) ease forwards;
    animation-delay: calc(var(--i, 0) * var(--stagger-delay, 100ms));
  }
  .anim-cascade-bottom.is-in-view > * {
    opacity: 0;
    animation: fadeInFromBottom var(--cascade-duration, 0.4s) ease forwards;
    animation-delay: calc(var(--i, 0) * var(--stagger-delay, 100ms));
  }
}
@media (prefers-reduced-motion: reduce) {
  .anim-cascade-left > *,
  .anim-cascade-bottom > *,
  .anim-cascade-bottom.is-in-view > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Wow text entrance: blur + opacity + stagger (scroll-triggered via .is-in-view) */
@media (prefers-reduced-motion: no-preference) {
  .js-wow-text .wow-text__item {
    --wow-duration: 0.5s;
    --wow-stagger: 0.1s;
    --wow-blur: 14px;
    opacity: 0;
    filter: blur(var(--wow-blur));
    transition: opacity var(--wow-duration) ease-out,      filter var(--wow-duration) ease-out,background-color .2s, color .2s;
    transition-delay: calc(var(--wow-stagger) * var(--wow-index, 0));
    text-wrap-style: pretty;
  }
  .js-wow-text.is-in-view .wow-text__item {
    opacity: 1;
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
  .js-wow-text .wow-text__item {
    transform: translateY(0.75rem);
    transition: opacity var(--wow-duration) ease-out,
      filter var(--wow-duration) ease-out,
      transform var(--wow-duration) ease-out, background-color .2s, color .2s;
  }
  .js-wow-text.is-in-view .wow-text__item {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-wow-text .wow-text__item {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* Editor: disable wow text animation so content is visible while editing */
.editor-styles-wrapper .js-wow-text .wow-text__item {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}

/* Button system */
:root{
  --btn-height-large: 47px;
  --btn-height-medium: 47px;
  --btn-height-small: 47px;
  --btn-padding-x-large: 40px;
  --btn-padding-x-medium: 16px;
  --btn-padding-x-small: 16px;
  --btn-padding-y-large: 12px;
  --btn-padding-y-medium: 8px;
  --btn-padding-y-small: 8px;
  --btn-radius: 999px;
  --btn-gap: 4px;
  --btn-icon-size-large: 20px;
  --btn-icon-size-medium: 16px;
  --btn-icon-size-small: 12px;
  --btn-avatar-size-large: 24px;
  --btn-avatar-size-medium: 20px;
  --btn-avatar-size-small: 16px;
  --color-azure: #0077ff;
  --color-charcoal: #222222;
  --color-grey-1: #fafafa;
  --color-grey-5: #d2d2d2;
  --color-grey-6: #c0c0c0;
  --color-grey-9: #5e5e5e;
  --color-grey-10: #404040;
}

/* Section theme modifiers (unified bg for case-study-slider, servicios, stats-results) */
.section-theme-default {
  --section-bg: #ffffff;
  --section-color: #222;
  --section-border: rgba(0, 0, 0, 0.1);
  --section-muted: rgba(0, 0, 0, 0.65);
}
.section-theme-dark {
  --section-bg: #222;
  --section-color: #fff;
  --section-border: rgba(255, 255, 255, 0.12);
  --section-muted: rgba(255, 255, 255, 0.7);
}
.section-theme-white {
  --section-bg: #fff;
  --section-color: #222;
  --section-border: rgba(0, 0, 0, 0.1);
  --section-muted: rgba(0, 0, 0, 0.65);
}

/* Section label: above section title, accent color (kicker style) */
.section-label {
  display: block;
  font-size: var(--text-body-small);
  font-weight: 600;
  letter-spacing: var(--tracking-subheading);
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.bg-accent {
  background: var(--color-accent);
  color: #fff;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);
  min-height:var(--btn-height-large);
  padding:var(--btn-padding-y-large) var(--btn-padding-x-large);
  border:none;
  border-radius:var(--btn-radius);
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:-0.3px;
  text-decoration:none;
  cursor:pointer;
  transition: opacity var(--wow-duration) ease-out,      filter var(--wow-duration) ease-out,      transform var(--wow-duration) ease-out, color .2s, background .2s;
  position:relative;
  white-space:nowrap;
}

.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* Button sizes */
.btn--large{
  min-height:var(--btn-height-large);
  padding:var(--btn-padding-y-large) var(--btn-padding-x-large);
  font-size: 1.1rem;
  line-height:1.5;
  letter-spacing:-0.3px;
}

.btn--medium{
  min-height:var(--btn-height-medium);
  padding:var(--btn-padding-y-medium) var(--btn-padding-x-medium);
  font-size:0.875rem;
  line-height:1.43;
  letter-spacing:-0.2px;
}

.btn--small{
  min-height:var(--btn-height-small);
  padding:var(--btn-padding-y-small) var(--btn-padding-x-small);
  font-size:0.75rem;
  line-height:1.33;
  letter-spacing:0;
}

/* Primary button — glossy dark style */
.btn--primary {
  --glossy-bg: rgba(230, 230, 230, 0.1);
  --glossy-bg-hover: rgba(255, 255, 255, 0.15);
  --glossy-bg-active: rgba(200, 200, 200, 0.08);
  --glossy-color: #fff;
  --glossy-blend-bg: rgba(34, 34, 34, 0.9);
  --glossy-shadow-inset: inset 1px 1px 1px 0.5px rgba(255,255,255,0.75),
    inset -1px -1px 1px 0.5px rgba(255,255,255,0.75),
    inset 0 0 1px 1px rgba(255,255,255,0.15),
    inset 0 0 16px 0 rgba(242,242,242,0.3);
}

/* Accent button — glossy azul */
.btn--accent {
  --glossy-bg: rgba(0, 119, 255, 0.75);
  --glossy-bg-hover: rgba(0, 119, 255, 0.85);
  --glossy-bg-active: rgba(0, 119, 255, 0.65);
  --glossy-color: #fff;
  --glossy-blend-bg: rgba(0, 119, 255, 0.5);
  --glossy-shadow-inset: inset 1px 1px 0.5px 0 rgba(255,255,255,0.5),
    inset -1px -1px 0.5px 0 rgba(0,0,0,0.15),
    inset 0 0 1px 0.5px rgba(255,255,255,0.15),
    inset 0 0 8px 0 rgba(100,180,255,0.4);
}

/* Secondary button — glossy azul */
.btn--secondary{
  --glossy-bg: var(--color-azure);
  --glossy-bg-hover: #0066e6;
  --glossy-bg-active: #0055cc;
  --glossy-color: #fff;
  --glossy-blend-bg: rgba(0, 100, 230, 0.5);
  --glossy-shadow-inset: inset 1px 1px 0.5px 0 rgba(255,255,255,0.5),
    inset -1px -1px 0.5px 0 rgba(0,50,150,0.6),
    inset 0 0 1px 0.5px rgba(255,255,255,0.15),
    inset 0 0 8px 0 rgba(100,180,255,0.4);
}

/* Glossy button (glassmorphism, unified) */
.btn--glossy,
.btn--glossy-dark,
.btn--glossy-light,
.btn--primary,
.btn--secondary,
.btn--accent {
  --glossy-bg: #222;
  --glossy-bg-hover: rgba(160, 160, 160, 0.3);
  --glossy-bg-active: rgba(120, 120, 120, 0.2);
  --glossy-color: #fff;
  --glossy-blur: 18px;
  --glossy-blend-bg: #171717;
  --glossy-shadow-outer: 0 0 2px rgba(0,0,0,0.1), 0 1px 8px rgba(0,0,0,0.1);
  --glossy-shadow-inset: inset 1px 1px 0.5px 0 rgba(255,255,255,0.75),
    inset -1px -1px 0.5px 0 rgba(38,38,38,1),
    inset 0 0 1px 0.5px rgba(255,255,255,0.15),
    inset 0 0 8px 0 rgba(242,242,242,0.5);
  background: var(--glossy-bg);
  backdrop-filter: blur(var(--glossy-blur));
  -webkit-backdrop-filter: blur(var(--glossy-blur));
  color: var(--glossy-color);
  box-shadow: var(--glossy-shadow-outer);
  overflow: hidden;
}

.btn--glossy::before,
.btn--glossy-dark::before,
.btn--glossy-light::before,
.btn--primary::before,
.btn--secondary::before,
.btn--accent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  transition: all .3s;
}

.btn--glossy::after,
.btn--glossy-dark::after,
.btn--glossy-light::after,
.btn--primary::after,
.btn--secondary::after,
.btn--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--glossy-shadow-inset);
  pointer-events: none;
  transition: all .3s;
}

.btn--glossy:hover,
.btn--glossy-dark:hover,
.btn--glossy-light:hover,
.btn--primary:hover,
.btn--secondary:hover,
.btn--accent:hover {
  background: var(--color-accent);
}

.btn--glossy:active,
.btn--glossy-dark:active,
.btn--glossy-light:active,
.btn--primary:active,
.btn--secondary:active,
.btn--accent:active {
  background: var(--glossy-bg-active);
}

/* Glossy dark — para fondos oscuros */
.btn--glossy-dark {
  --glossy-bg: rgba(230, 230, 230, 0.1);
  --glossy-bg-hover: rgba(255, 255, 255, 0.15);
  --glossy-bg-active: rgba(200, 200, 200, 0.08);
  --glossy-blend-bg: rgba(34, 34, 34, 0.9);
  --glossy-shadow-inset: inset 1px 1px 1px 0.5px rgba(255,255,255,0.75),
    inset -1px -1px 1px 0.5px rgba(255,255,255,0.75),
    inset 0 0 1px 1px rgba(255,255,255,0.15),
    inset 0 0 16px 0 rgba(242,242,242,0.3);
}

/* Glossy light — para fondos claros */
.btn--glossy-light {
  --glossy-bg: rgba(255, 255, 255, 0.35);
  --glossy-bg-hover: rgba(255, 255, 255, 0.45);
  --glossy-bg-active: rgba(255, 255, 255, 0.25);
  --glossy-color: #222;
  --glossy-blend-bg: rgba(255, 255, 255, 0.5);
  --glossy-shadow-inset: inset 1px 1px 0.5px 0 rgba(255,255,255,0.9),
    inset -1px -1px 0.5px 0 rgba(0,0,0,0.05),
    inset 0 0 8px 0 rgba(255,255,255,0.6);
}

/* Quaternary button (text only) */
.btn--quaternary{
  background:transparent;
  color:var(--color-charcoal);
  padding-left:0;
  padding-right:0;
}

.btn--quaternary:hover{
  color:#000;
}

.btn--quaternary:active{
  opacity:0.7;
}

/* Button icons */
.btn__icon{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.btn--large .btn__icon{
  width:var(--btn-icon-size-large);
  height:var(--btn-icon-size-large);
}

.btn--medium .btn__icon{
  width:var(--btn-icon-size-medium);
  height:var(--btn-icon-size-medium);
}

.btn--small .btn__icon{
  width:var(--btn-icon-size-small);
  height:var(--btn-icon-size-small);
}

.btn__icon--leading{
  order:-1;
}

.btn__icon--trailing{
  order:1;
}

/* Button avatar */
.btn__avatar{
  flex-shrink:0;
  border-radius:var(--btn-radius);
  object-fit:cover;
}

.btn--large .btn__avatar{
  width:var(--btn-avatar-size-large);
  height:var(--btn-avatar-size-large);
}

.btn--medium .btn__avatar{
  width:var(--btn-avatar-size-medium);
  height:var(--btn-avatar-size-medium);
}

.btn--small .btn__avatar{
  width:var(--btn-avatar-size-small);
  height:var(--btn-avatar-size-small);
}

.btn__avatar--leading{
  order:-1;
}

.btn__avatar--trailing{
  order:1;
}

/* Button shortcut key */
.btn__shortcut{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  border-radius:8px;
  font-size:0.875rem;
  line-height:1.43;
  letter-spacing:-0.2px;
  flex-shrink:0;
}

.btn--small .btn__shortcut{
  padding:2px 6px;
  border-radius:6px;
  font-size:0.75rem;
  line-height:1.33;
}

.btn--primary .btn__shortcut,
.btn--secondary .btn__shortcut{
  background:var(--color-grey-10);
  color:var(--color-grey-6);
}

.btn--glossy .btn__shortcut,
.btn--quaternary .btn__shortcut{
  background:var(--color-grey-5);
  color:var(--color-grey-9);
}

.btn__shortcut--trailing{
  order:1;
}

/* Icon only button */
.btn--icon-only{
  padding-left:var(--btn-padding-x-large);
  padding-right:var(--btn-padding-x-large);
}

.btn--icon-only.btn--large{
  padding-left:var(--btn-padding-x-large);
  padding-right:var(--btn-padding-x-large);
}

.btn--icon-only.btn--medium{
  padding-left:var(--btn-padding-x-medium);
  padding-right:var(--btn-padding-x-medium);
}

.btn--icon-only.btn--small{
  padding:var(--btn-padding-y-small);
}

.btn--quaternary.btn--icon-only{
  padding:var(--btn-padding-y-large) 8px;
}

.btn--quaternary.btn--icon-only.btn--medium,
.btn--quaternary.btn--icon-only.btn--small{
  padding:var(--btn-padding-y-medium) 8px;
}

/* Legacy button support */
.btn.btn-secondary{
  background:var(--color-secondary);
  color:var(--color-white);
}

:root{
  --action-btn-gap: 13px;
  --action-btn-arrow-size: 32px;
  --action-btn-arrow-size-medium:16px;
  --action-btn-arrow-padding:5px;
  --animations-duration:300ms;
}

@keyframes arrowAnim{
  0%{transform: translate(0) rotate(-45deg);}
  50%{transform: translate(100%,-100%)  rotate(-45deg);}
  51%{transform: translate(-100%,100%)  rotate(-45deg);}
  100%{transform: translate(0)  rotate(-45deg);}
}

@keyframes pulse{
  0%{box-shadow: 0 0 0 0 var(--color-accent);transform:scale(.95);}
  70%{box-shadow:0 0 0 10px transparent;transform:scale(1);}
  100%{box-shadow:0 0 0 0 transparent;transform:scale(.95);}
}

.pulse{
  position:relative;
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--color-accent);
  vertical-align:middle;
}
.pulse::before{
  content:"";
  position:absolute;
  left:-16px;
  top:-16px;
  width:40px;
  height:40px;
  border: none;
  border-radius:50%;
}
.pulse::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--color-accent);
  animation:pulse 2s infinite;
}

.action_button{
  display:inline-flex;
  align-items:center;
  gap:var(--action-btn-gap);
  font-weight: 600;
  list-style:none;
  text-decoration:none;
  transition:color var(--animations-duration);
  cursor:pointer;
}

.action_button:hover{
  text-decoration:none;
  color: var(--color-accent);
}

.action_button .arrow{
  flex-shrink:0;
  aspect-ratio:1/1;
  border-radius:50%;
  border:1px solid currentColor;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:var(--action-btn-arrow-padding);
}

.action_button:hover .arrow svg{
  animation:arrowAnim 1s infinite;
}

.action_button .arrow svg{
  width:var(--action-btn-arrow-size);
  height:var(--action-btn-arrow-size);
  transform: rotate(-45deg);
}

.action_button--primary{
  color:var(--color-white,#fff);
}

.action_button--primary:hover{
  color: var(--color-accent);
}

.action_button--primary .arrow{
  border-color:currentColor;
}

.action_button--secondary{
  color:inherit;
  background:transparent;
}

.action_button--secondary:hover{
  color: var(--color-accent);
}

.action_button--secondary .arrow{
  border-color:currentColor;
}

.action_button--inverse{
  color:var(--color-white,#fff);
}

.action_button--inverse .arrow{
  border-color:currentColor;
}

.action_button--inverse:hover{
  color: var(--color-accent);
}

.action_button--accent{
  background:var(--color-yellow,#fcdc0c);
  color:var(--color-button-text,#093341);
  padding:0.75rem 1.5rem;
  border-radius:0.625rem;
}

.action_button--accent:hover{
  background:#f5d50a;
  color:var(--color-button-text,#093341);
}

.action_button--accent .arrow{
  border-color:currentColor;
}

.action_button--large{
  font-size: 1.225rem;
  line-height:1.33;
}

.action_button--large .arrow svg{
  width:var(--action-btn-arrow-size);
  height:var(--action-btn-arrow-size);
}

.action_button--medium{
  font-size:1rem;
  line-height:1.5;
}

.action_button--medium .arrow{
  padding:4px;
}

.action_button--medium .arrow svg{
  width:var(--action-btn-arrow-size-medium);
  height:var(--action-btn-arrow-size-medium);
}

/* Reusable circle link icon (e.g. case-study-slider cards, servicios CTA). Use with SVG arrow path: M7 17L17 7M17 7H7M17 7V17 */
.link-icon-circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.link-icon-circle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.link-icon-circle svg {
  display: block;
}


/* Animated background shapes */
.shape-bg{
  position:relative;
  overflow:hidden;
}

.shape-bg::before{
  content:'';
  position:absolute;
  inset:-50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  animation:shapeFloat 20s ease-in-out infinite;
  opacity:0.8;
  z-index:0;
  pointer-events:none;
}

.shape-bg > *{
  position:relative;
  z-index:1;
}

/* Shape 1: Yellow-Green gradient */
.shape-bg--yellow-green::before{
  background:radial-gradient(ellipse 120% 100% at 70% 20%,#ffeb3b 0%,#fff9c4 30%,#f1f8e9 60%,#c8e6c9 100%);
  filter:blur(40px);
  animation:shapeFloat 18s ease-in-out infinite;
}

/* Shape 2: Orange gradient */
.shape-bg--orange::before{
  background:radial-gradient(ellipse 100% 120% at 50% 80%,#ff6f00 0%,#ff8f00 40%,#ffb74d 80%,#ffe0b2 100%);
  filter:blur(40px);
  animation:shapeFloat 22s ease-in-out infinite;
}

/* Shape 3: Peach-Pink-Purple gradient */
.shape-bg--peach-purple::before{
  background:radial-gradient(ellipse 110% 100% at 30% 50%,#ffe0b2 0%,#f8bbd0 35%,#f48fb1 60%,#ce93d8 100%);
  filter:blur(40px);
  animation:shapeFloat 20s ease-in-out infinite;
}

/* Shape 4: Blue-Cyan gradient */
.shape-bg--blue-cyan::before{
  background:radial-gradient(ellipse 100% 110% at 30% 60%,#e3f2fd 0%,#81d4fa 40%,#29b6f6 70%,#0277bd 100%);
  filter:blur(40px);
  animation:shapeFloat 24s ease-in-out infinite;
}

/* Shape 5: Pink-Red gradient */
.shape-bg--pink-red::before{
  background:radial-gradient(ellipse 110% 100% at 50% 70%,#fce4ec 0%,#f8bbd0 30%,#f06292 60%,#e91e63 80%,#c62828 100%);
  filter:blur(40px);
  animation:shapeFloat 19s ease-in-out infinite;
}

/* Animation keyframes */
@keyframes shapeFloat{
  0%,100%{
    transform:translate(0,0) scale(1) rotate(0deg);
  }
  25%{
    transform:translate(5%,-5%) scale(1.05) rotate(2deg);
  }
  50%{
    transform:translate(-3%,3%) scale(0.95) rotate(-1deg);
  }
  75%{
    transform:translate(3%,5%) scale(1.02) rotate(1deg);
  }
}

/* Shape variations - different animation speeds */
.shape-bg--slow::before{
  animation-duration:30s;
}

.shape-bg--fast::before{
  animation-duration:15s;
}

/* Shape opacity variations */
.shape-bg--subtle::before{
  opacity:0.4;
}

.shape-bg--strong::before{
  opacity:1;
}

/* Multiple shapes overlay */
.shape-bg--overlay{
  position:relative;
}

.shape-bg--overlay::after{
  content:'';
  position:absolute;
  inset:-50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  animation:shapeFloat 25s ease-in-out infinite reverse;
  opacity:0.3;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.shape-bg--overlay.shape-bg--yellow-green::after{
  background:radial-gradient(ellipse 100% 120% at 50% 80%,#ffeb3b 0%,#fff9c4 50%,#c8e6c9 100%);
  filter:blur(50px);
}

.shape-bg--overlay.shape-bg--orange::after{
  background:radial-gradient(ellipse 110% 100% at 30% 50%,#ff6f00 0%,#ff8f00 50%,#ffe0b2 100%);
  filter:blur(50px);
}

.shape-bg--overlay.shape-bg--peach-purple::after{
  background:radial-gradient(ellipse 100% 110% at 70% 40%,#ffe0b2 0%,#f8bbd0 50%,#ce93d8 100%);
  filter:blur(50px);
}

.shape-bg--overlay.shape-bg--blue-cyan::after{
  background:radial-gradient(ellipse 110% 100% at 50% 30%,#e3f2fd 0%,#81d4fa 50%,#0277bd 100%);
  filter:blur(50px);
}

.shape-bg--overlay.shape-bg--pink-red::after{
  background:radial-gradient(ellipse 100% 120% at 30% 60%,#fce4ec 0%,#f8bbd0 50%,#c62828 100%);
  filter:blur(50px);
}

/* Shape as background image (static) */
.bg-shape{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.bg-shape--yellow-green{
  background:radial-gradient(ellipse 120% 100% at 70% 20%,#ffeb3b 0%,#fff9c4 30%,#f1f8e9 60%,#c8e6c9 100%);
}

.bg-shape--orange{
  background:radial-gradient(ellipse 100% 120% at 50% 80%,#ff6f00 0%,#ff8f00 40%,#ffb74d 80%,#ffe0b2 100%);
}

.bg-shape--peach-purple{
  background:radial-gradient(ellipse 110% 100% at 30% 50%,#ffe0b2 0%,#f8bbd0 35%,#f48fb1 60%,#ce93d8 100%);
}

.bg-shape--blue-cyan{
  background:radial-gradient(ellipse 100% 110% at 30% 60%,#e3f2fd 0%,#81d4fa 40%,#29b6f6 70%,#0277bd 100%);
}

.bg-shape--pink-red{
  background:radial-gradient(ellipse 110% 100% at 50% 70%,#fce4ec 0%,#f8bbd0 30%,#f06292 60%,#e91e63 80%,#c62828 100%);
}

/* Typography system */
.font-display{font-family:var(--font-display);letter-spacing:var(--tracking-display)}
.font-heading{font-family:var(--font-heading);letter-spacing:var(--tracking-heading)}
.font-body{font-family:var(--font-body);letter-spacing:var(--tracking-body)}
.font-subheading{font-family:var(--font-subheading);letter-spacing:var(--tracking-subheading);text-transform:uppercase}
.section-title{font-family:var(--font-display);font-size:var(--heading-section-size);font-weight:500;line-height:1.2;letter-spacing:var(--tracking-display)}

/* Display typography - Scale VF */
.display-1{font-family:var(--font-display);font-size:7.5rem;line-height:1.2;letter-spacing:var(--tracking-display-large);font-weight:500}
.display-2{font-family:var(--font-display);font-size:5rem;line-height:1.2;letter-spacing:var(--tracking-display);font-weight:500}

/* Heading typography - Display font for main headings */
h1,h2{font-family:var(--font-display);font-weight: 400;line-height: 1.14;}
h1{font-size: clamp(2.5rem, 5vw, 4.5rem);}
h2{font-size:clamp(2rem, 4vw, 5rem);}
h3,h4,h5,h6{font-family:var(--font-heading);font-weight:500;line-height:1.2}
h3{font-size:clamp(1.75rem, 3vw, 3rem);}
h4{font-size:clamp(1.5rem, 2.5vw, 2rem);letter-spacing:var(--tracking-heading)}
h5{font-size:clamp(1.25rem, 2vw, 1.5rem);letter-spacing:var(--tracking-heading)}
h6{font-size:clamp(1rem, 1.5vw, 1.25rem);letter-spacing:var(--tracking-heading)}

/* Subheading typography - DM Mono */
.subheading{font-family:var(--font-subheading);text-transform:uppercase;font-weight:400;color:var(--color-grey-8)}
.subheading-large{font-size:clamp(1.5rem, 3vw, 7.5rem);letter-spacing:var(--tracking-subheading-large)}
.subheading-medium{font-size:clamp(1rem, 2vw, 5rem);letter-spacing:var(--tracking-subheading)}
.subheading-small{font-size:clamp(0.875rem, 1.5vw, 1.5rem);letter-spacing:0.075em}

/* Font weights */
.font-regular{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}