/**
 * Worqex Elementor design foundation — v1.2.0
 * Source of truth: source/website.dc.html
 *
 * These tokens reproduce the Claude/DC presentation values for native
 * Elementor sections. They do not render content and they do not switch the
 * live homepage away from the safe source renderer.
 */

:root {
  /* Core palette */
  --worqex-deep-teal: #062B2C;
  --worqex-teal-dark: #0A6B67;
  --worqex-teal: #0B9A94;
  --worqex-teal-bright: #12B5AE;
  --worqex-aqua: #2FD1CA;
  --worqex-teal-soft: #E3F7F6;
  --worqex-surface-soft: #F1FAF9;
  --worqex-surface-alt: #F4FBFA;
  --worqex-yellow: #FFD23F;
  --worqex-yellow-button: #F5C400;
  --worqex-text: #2A2A2A;
  --worqex-text-strong: #1A1A1A;
  --worqex-text-mid: #4D5563;
  --worqex-muted: #7A8391;
  --worqex-quiet: #A7AEB9;
  --worqex-border: #E3EEEC;
  --worqex-success: #27AE60;
  --worqex-error: #C0392B;
  --worqex-white: #FFFFFF;

  /* Layout */
  --worqex-content-width: 1240px;
  --worqex-pad-desktop: 32px;
  --worqex-pad-mobile: 20px;
  --worqex-section-y: 96px;
  --worqex-section-y-mobile: 64px;

  /* Type */
  --worqex-font-display: "Poppins", system-ui, sans-serif;
  --worqex-font-body: "Inter", system-ui, sans-serif;
  --worqex-type-hero: 64px;
  --worqex-type-section: 40px;
  --worqex-type-subheading: 32px;
  --worqex-type-lead: 17px;
  --worqex-type-body: 14px;
  --worqex-type-small: 12px;

  /* Radius */
  --worqex-radius-xs: 6px;
  --worqex-radius-sm: 8px;
  --worqex-radius-button: 9px;
  --worqex-radius-md: 12px;
  --worqex-radius-card: 14px;
  --worqex-radius-lg: 18px;
  --worqex-radius-xl: 20px;
  --worqex-radius-hero: 28px;
  --worqex-radius-pill: 999px;

  /* Shadows */
  --worqex-shadow-card: 0 1px 2px rgba(10,107,103,.05), 0 6px 20px rgba(10,107,103,.05);
  --worqex-shadow-card-hover: 0 24px 50px rgba(10,107,103,.16);
  --worqex-shadow-cta: 0 16px 36px rgba(245,196,0,.35);
  --worqex-shadow-floating: 0 18px 40px rgba(10,107,103,.4);
  --worqex-shadow-mega: 0 40px 80px rgba(10,107,103,.28);
  --worqex-shadow-hero-visual: 0 40px 90px rgba(0,0,0,.45);

  /* Motion */
  --worqex-ease: cubic-bezier(.4,0,.2,1);
  --worqex-transition-fast: 160ms var(--worqex-ease);
  --worqex-transition: 200ms var(--worqex-ease);
  --worqex-transition-reveal: 600ms var(--worqex-ease);

  /* Source gradients */
  --worqex-gradient-teal: linear-gradient(135deg,#0B9A94 0%,#12B5AE 100%);
  --worqex-gradient-deep: linear-gradient(135deg,#0B9A94 0%,#0A6B67 100%);
  --worqex-gradient-spectrum: linear-gradient(90deg,#12B5AE 0%,#2FD1CA 45%,#FFD23F 100%);
  --worqex-gradient-cta: linear-gradient(120deg,#12B5AE 0%,#0B9A94 40%,#0A6B67 100%);
}

html,
body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--worqex-font-body);
  color: var(--worqex-text);
  background: var(--worqex-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--worqex-font-display);
}

a {
  color: var(--worqex-teal);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: #0B7F7A;
}

button,
a,
.elementor-button {
  transition:
    background-color var(--worqex-transition-fast),
    border-color var(--worqex-transition-fast),
    color var(--worqex-transition-fast),
    box-shadow var(--worqex-transition),
    transform var(--worqex-transition);
}

/* Elementor full-width pages should never receive classic-theme spacing. */
.worqex-elementor-page,
.worqex-elementor-page .site-main,
.worqex-elementor-page .site-content,
.worqex-elementor-page .content-area {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* Source-aligned helper classes for native Elementor containers. */
.worqex-content-width {
  width: min(calc(100% - (var(--worqex-pad-desktop) * 2)), var(--worqex-content-width));
  margin-inline: auto;
}

.worqex-section {
  padding-block: var(--worqex-section-y);
}

.worqex-section-heading .elementor-heading-title,
.elementor-widget-heading.worqex-section-heading .elementor-heading-title {
  font-family: var(--worqex-font-display);
  font-size: var(--worqex-type-section);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.worqex-hero-heading .elementor-heading-title,
.elementor-widget-heading.worqex-hero-heading .elementor-heading-title {
  font-family: var(--worqex-font-display);
  font-size: var(--worqex-type-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.worqex-eyebrow {
  font-family: var(--worqex-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.worqex-lead,
.worqex-lead .elementor-widget-container {
  font-family: var(--worqex-font-body);
  font-size: var(--worqex-type-lead);
  line-height: 1.65;
  color: var(--worqex-text-mid);
}

.worqex-card {
  border: 1px solid var(--worqex-border);
  border-radius: var(--worqex-radius-lg);
  background: linear-gradient(180deg,#fff 0%,#F7FCFB 100%);
  box-shadow: var(--worqex-shadow-card);
}

.worqex-card-hover {
  transition: transform var(--worqex-transition), border-color var(--worqex-transition-fast), box-shadow var(--worqex-transition);
}

.worqex-card-hover:hover {
  transform: translateY(-5px);
  border-color: var(--worqex-aqua);
  box-shadow: var(--worqex-shadow-card-hover);
}

.worqex-button-yellow .elementor-button,
.elementor-widget-button.worqex-button-yellow .elementor-button {
  border-radius: 12px;
  background: var(--worqex-yellow-button);
  color: var(--worqex-deep-teal);
  font-family: var(--worqex-font-body);
  font-weight: 700;
  box-shadow: var(--worqex-shadow-cta);
}

.worqex-button-yellow .elementor-button:hover,
.elementor-widget-button.worqex-button-yellow .elementor-button:hover {
  background: #E0B300;
  color: var(--worqex-deep-teal);
  transform: translateY(-2px);
}

.worqex-pill {
  border-radius: var(--worqex-radius-pill);
}

.worqex-surface-soft {
  background: var(--worqex-surface-soft);
}

.worqex-bg-deep {
  background: var(--worqex-deep-teal);
  color: var(--worqex-white);
}

.worqex-gradient-spectrum {
  background: var(--worqex-gradient-spectrum);
}

/* Reusable reveal behavior. A later phase connects this to the native section
   observer; defining it here keeps the timing identical to the source. */
.worqex-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--worqex-transition-reveal), transform var(--worqex-transition-reveal);
}

.worqex-reveal.is-visible,
.elementor-editor-active .worqex-reveal {
  opacity: 1;
  transform: none;
}

@keyframes worqex-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes worqex-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes worqex-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,63,.5); }
  70% { box-shadow: 0 0 0 12px rgba(255,210,63,0); }
}

@keyframes worqex-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 1080px) {
  :root {
    --worqex-type-hero: 38px;
    --worqex-type-section: 30px;
    --worqex-section-y: var(--worqex-section-y-mobile);
  }

  .worqex-content-width {
    width: min(calc(100% - (var(--worqex-pad-mobile) * 2)), var(--worqex-content-width));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .worqex-reveal {
    opacity: 1;
    transform: none;
  }
}