.elementor-7 .elementor-element.elementor-element-91a8b4d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7 .elementor-element.elementor-element-a67fd74{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-a67fd74 *//* ============================================================
   ZARK SITE DESIGN SYSTEM — TOKENS
   Landing dark dramático com Liquid Lava como única assinatura
   Fonte: design-system/extracao-referencia.md + paleta-cliente.md
   ============================================================ */

:root {
  /* ═══════════════════════════════════════════════════════════
     BRAND — Liquid Lava scale (oficial #F56F10)
     ═══════════════════════════════════════════════════════════ */
  --lava-50:  #fff3e9;
  --lava-100: #ffe1c8;
  --lava-200: #ffc28e;
  --lava-300: #ffa056;
  --lava-400: #ff8a3a;
  --lava-500: #f56f10;   /* LIQUID LAVA — brand primary, oficial */
  --lava-600: #d45e0d;
  --lava-700: #ad4a09;
  --lava-800: #843706;
  --lava-900: #5e2704;
  --lava: #f56f10;       /* alias semântico */

  /* ═══════════════════════════════════════════════════════════
     DARK SCALE — Dark Void → Glucon Grey (oficiais)
     ═══════════════════════════════════════════════════════════ */
  --void:           #151419;   /* Dark Void — bg dominante */
  --surface-dark:   #1B1A1E;   /* Glucon Grey — card / surface */
  --surface-dark-2: #22212a;   /* Surface elevada (modal, popover) */
  --surface-dark-3: #2c2b32;   /* Hover de surface */

  --line-dark-1: #2a282f;      /* Hairline em dark */
  --line-dark-2: #34323a;      /* Border padrão em dark */
  --line-dark-3: #403e47;      /* Divisor mais forte */

  /* ═══════════════════════════════════════════════════════════
     LIGHT SCALE — Snow + warm cream pra seções de quebra
     ═══════════════════════════════════════════════════════════ */
  --snow:    #FBFBFB;          /* Snow — texto on dark, bg light */
  --cream:   #f6f3ee;          /* Section bg light alternativa */
  --paper:   #f0eee9;          /* Card bg secundário em light */

  --line-light-1: #eae7e1;     /* Hairline em light */
  --line-light-2: #d8d5cf;     /* Border padrão em light */
  --line-light-3: #c4c1b9;     /* Divisor forte em light */

  /* ═══════════════════════════════════════════════════════════
     INK — Texto warm scale
     ═══════════════════════════════════════════════════════════ */
  /* Light mode — texto preto-quente sobre cremes */
  --ink-900: #0a0a09;
  --ink-800: #111110;
  --ink-700: #1a1916;          /* Texto primary em light */
  --ink-600: #2e2c28;
  --ink-500: #4a4741;          /* Body em light */
  --ink-400: #6f6b64;          /* Labels, captions em light */
  --ink-300: #878787;          /* Dusty Grey oficial — placeholder */

  /* Dark mode — texto warm-white sobre void */
  --on-dark-1: #FBFBFB;                    /* Snow — primary em dark */
  --on-dark-2: rgba(251, 251, 251, 0.78);  /* Body em dark */
  --on-dark-3: rgba(251, 251, 251, 0.55);  /* Labels em dark */
  --on-dark-4: rgba(251, 251, 251, 0.32);  /* Placeholder em dark */

  /* ═══════════════════════════════════════════════════════════
     GLOW / ATMOSFERA
     ═══════════════════════════════════════════════════════════ */
  --glow-lava-soft:   rgba(245, 111, 16, 0.08);
  --glow-lava-mid:    rgba(245, 111, 16, 0.18);
  --glow-lava-strong: rgba(245, 111, 16, 0.35);
  --glow-lava-shadow: rgba(245, 111, 16, 0.45);

  --grain-opacity: 0.04;

  /* ═══════════════════════════════════════════════════════════
     SEMÂNTICOS (warm tone)
     ═══════════════════════════════════════════════════════════ */
  --success-50:  #ecfdf3;
  --success-500: #10a960;
  --success-700: #067a44;

  --warning-50:  #fff8e6;
  --warning-500: #d99000;
  --warning-700: #9a6500;

  --danger-50:  #fef1f1;
  --danger-500: #dc3545;
  --danger-700: #a52833;

  --info-50:  #eef5ff;
  --info-500: #2f7adc;
  --info-700: #1f5ba8;

  /* ═══════════════════════════════════════════════════════════
     TIPOGRAFIA
     Display: Space Grotesk (300-700) — títulos
     Body / numbers: Inter (300-900)
     Mono: JetBrains Mono — eyebrows numerados, badges técnicas
     ═══════════════════════════════════════════════════════════ */
  --font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale (px) — landing-friendly, com display gigante */
  --fs-2xs:    10px;
  --fs-xs:     11px;
  --fs-sm:     12px;
  --fs-md:     13px;
  --fs-base:   14px;
  --fs-lg:     16px;
  --fs-xl:     18px;
  --fs-2xl:    22px;
  --fs-3xl:    28px;
  --fs-4xl:    36px;   /* h3 */
  --fs-5xl:    48px;   /* h2 */
  --fs-6xl:    64px;   /* h1 small */
  --fs-7xl:    80px;   /* hero md */
  --fs-display: 112px; /* hero lg */
  --fs-mega:   144px;  /* display extreme */

  /* Line heights */
  --lh-tight: 1.0;
  --lh-snug:  1.1;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  /* Letter spacing */
  --ls-tightest: -0.04em;
  --ls-tighter:  -0.03em;
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --ls-widest:    0.14em;
  --ls-huge:      0.18em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  /* ═══════════════════════════════════════════════════════════
     ESPAÇAMENTO (4px base)
     ═══════════════════════════════════════════════════════════ */
  --sp-0:  0;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  14px;
  --sp-8:  16px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-14: 28px;
  --sp-16: 32px;
  --sp-20: 40px;
  --sp-24: 48px;
  --sp-32: 64px;
  --sp-40: 80px;
  --sp-48: 96px;
  --sp-64: 128px;
  --sp-80: 160px;
  --sp-96: 192px;

  /* ═══════════════════════════════════════════════════════════
     RAIOS
     ═══════════════════════════════════════════════════════════ */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;       /* CTAs / botões */
  --r-xl:   6px;        /* cards */
  --r-2xl:  8px;        /* cards destaque */
  --r-3xl:  28px;       /* pricing card hero */
  --r-pill: 999px;

  /* ═══════════════════════════════════════════════════════════
     SOMBRAS — warm, não preto puro
     ═══════════════════════════════════════════════════════════ */
  /* Sombras pra dark mode (default) */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 32px 64px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 40px 96px rgba(0, 0, 0, 0.7), 0 12px 24px rgba(0, 0, 0, 0.4);

  /* Sombra accent pra CTAs primários */
  --shadow-lava-sm: 0 4px 14px var(--glow-lava-shadow);
  --shadow-lava-md: 0 8px 28px var(--glow-lava-strong), 0 1px 0 rgba(255,255,255,0.18) inset;
  --shadow-lava-lg: 0 12px 40px var(--glow-lava-shadow), 0 1px 0 rgba(255,255,255,0.22) inset;

  /* Inset highlight (top edge highlight) */
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-inset-dark:  inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(245, 111, 16, 0.30);

  /* ═══════════════════════════════════════════════════════════
     MOTION
     ═══════════════════════════════════════════════════════════ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-instant: 80ms;
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    280ms;
  --t-slower:  420ms;
  --t-page:    600ms;

  /* ═══════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════ */
  --container-max:  1280px;
  --container-tight: 920px;
  --container-text:  720px;
  --topbar-h:        72px;

  /* ═══════════════════════════════════════════════════════════
     GRAIN OVERLAY (SVG noise inline)
     ═══════════════════════════════════════════════════════════ */
  --grain-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   THEME — DARK por padrão (a vibe)
   Light é OPT-IN via [data-theme="light"]
   ============================================================ */

:root {
  /* Defaults = DARK */
  --bg:          var(--void);
  --surface:     var(--surface-dark);
  --surface-2:   var(--surface-dark-2);
  --surface-3:   var(--surface-dark-3);
  --line-1:      var(--line-dark-1);
  --line-2:      var(--line-dark-2);
  --line-3:      var(--line-dark-3);
  --text-1:      var(--on-dark-1);
  --text-2:      var(--on-dark-2);
  --text-3:      var(--on-dark-3);
  --text-4:      var(--on-dark-4);

  /* Text on lava */
  --text-on-lava: var(--void);

  --grain-blend: overlay;
}

[data-theme="light"] {
  --bg:          var(--snow);
  --surface:     #ffffff;
  --surface-2:   var(--cream);
  --surface-3:   var(--paper);
  --line-1:      var(--line-light-1);
  --line-2:      var(--line-light-2);
  --line-3:      var(--line-light-3);
  --text-1:      var(--ink-700);
  --text-2:      var(--ink-500);
  --text-3:      var(--ink-400);
  --text-4:      var(--ink-300);

  --text-on-lava: var(--void);

  --grain-blend: multiply;
  --grain-opacity: 0.06;

  /* Sombras light */
  --shadow-xs:  0 1px 0 rgba(20, 17, 12, 0.04);
  --shadow-sm:  0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
  --shadow-md:  0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
  --shadow-lg:  0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
  --shadow-xl:  0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
  --shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);

  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-inset-dark:  inset 0 -1px 0 rgba(20, 17, 12, 0.06);
}

/* ============================================================
   BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 700px at 85% -10%, var(--glow-lava-mid) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, var(--glow-lava-soft) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: var(--grain-svg);
  background-repeat: repeat;
  background-size: 180px 180px;
}

::selection {
  background: var(--lava-500);
  color: var(--text-on-lava);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--lava-500);
}

.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  color: var(--text-3);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
}

.h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--fs-display));
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  color: var(--text-1);
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-1);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-1);
}

.lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

.body {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-2);
}

.caption {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-3);
}

/* Text accent inline */
.lava-text { color: var(--lava-500); }

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-16);
  position: relative;
  z-index: 1;
}

.container-tight {
  width: 100%;
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--sp-16);
  position: relative;
  z-index: 1;
}

.container-text {
  width: 100%;
  max-width: var(--container-text);
  margin: 0 auto;
  padding: 0 var(--sp-16);
  position: relative;
  z-index: 1;
}

/* ============================================================
   FOCUS — sempre visível em interativo
   ============================================================ */

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}/* End custom CSS */