/* =========================================================
   PROFISSIO.AI — Landing Page (mobile-first)
   Brand colors (manual oficial):
     --black     #000000
     --pixel-rose#BE3F84
     --quantum   #2F4073
     --cyber     #3DBFF2
     --neoblue   #57E3F2
   Fonts: Rothek (display) / Minork Sans (slogan) / Sora (text)
   ========================================================= */

@font-face {
  font-family: "Rothek";
  src: url("assets/fonts/trial-rothek-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: "Rothek";
  src: url("assets/fonts/trial-rothek-medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: "Rothek";
  src: url("assets/fonts/trial-rothek-semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: "Rothek";
  src: url("assets/fonts/trial-rothek-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: "Rothek";
  src: url("assets/fonts/trial-rothek-black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: "Minork Sans";
  src: url("assets/fonts/minorksans-extrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --black:       #000000;

  /* Brand palette (manual oficial) — invariant across themes */
  --rose:        #BE3F84;
  --rose-soft:   #D86AA8;
  --rose-bright: #E255A0;
  --quantum:     #2F4073;
  --cyber:       #3DBFF2;
  --neoblue:     #57E3F2;
  --violet:      #6B3CB8;

  --maxw:        1280px;
  --pad-x:       clamp(20px, 5vw, 96px);
  --radius-sm:   12px;
  --radius:      18px;
  --radius-lg:   24px;
  --radius-xl:   28px;

  --font-display: "Rothek", "Sora", "Cairo", system-ui, sans-serif;
  --font-slogan:  "Minork Sans", "Sora", "Cairo", system-ui, sans-serif;
  --font-text:    "Sora", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Arabic / RTL specifics */
:root[lang="ar"] {
  --font-display: "Cairo", "Sora", system-ui, sans-serif;
  --font-text:    "Cairo", "Sora", system-ui, sans-serif;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3 { letter-spacing: 0; }
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(-3px); }
[dir="rtl"] .timeline::before {
  background: linear-gradient(-90deg,
    var(--quantum)    0%,
    var(--violet)    25%,
    var(--rose)      50%,
    var(--rose-soft) 70%,
    var(--cyber)     88%,
    var(--neoblue)  100%);
}
[dir="rtl"] .step .num {
  left: auto;
  right: -22px;
}

/* ===== Dark theme (default) ===== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #07060B;
  --bg-2:        #0E0B16;
  --footer-bg:   #100E1B;
  --surface:     #15101F;
  --surface-2:   #1B1428;
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text:        #FFFFFF;
  --text-dim:    #B6B0C5;
  --text-mute:   #7B7589;

  --on-bg-rgb:   255, 255, 255;
  --grid-line:   rgba(255, 255, 255, 0.045);
  --grid-opacity: 0.55;

  --glass-tint:    rgba(255, 255, 255, 0.05);
  --glass-rim:     rgba(255, 255, 255, 0.55);
  --glass-rim-dim: rgba(255, 255, 255, 0.18);
  --glass-shade:   rgba(0, 0, 0, 0.22);

  --bg-glow-rose:    rgba(190, 63, 132, 0.34);
  --bg-glow-violet:  rgba(107, 60, 184, 0.28);
  --bg-glow-quantum: rgba(47, 64, 115, 0.20);
}

/* ===== Light theme ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #F2EFF7;
  --bg-2:        #E8E3F0;
  --footer-bg:   #E5DFEE;
  --surface:     #FFFFFF;
  --surface-2:   #F7F4FB;
  --line:        rgba(20, 14, 32, 0.10);
  --line-strong: rgba(20, 14, 32, 0.20);
  --text:        #15101F;
  --text-dim:    #4F4858;
  --text-mute:   #7B7589;

  --on-bg-rgb:   20, 14, 32;
  --grid-line:   rgba(20, 14, 32, 0.05);
  --grid-opacity: 0.7;

  --glass-tint:    rgba(255, 255, 255, 0.4);
  --glass-rim:     rgba(255, 255, 255, 0.7);
  --glass-rim-dim: rgba(20, 14, 32, 0.10);
  --glass-shade:   rgba(20, 14, 32, 0.06);

  --bg-glow-rose:    rgba(190, 63, 132, 0.18);
  --bg-glow-violet:  rgba(107, 60, 184, 0.14);
  --bg-glow-quantum: rgba(61, 191, 242, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--rose); color: #fff; }

/* ============== layout helpers ============== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
}
.site-header .container,
.footer .container {
  max-width: none;
  padding: 0 max(12px, calc(var(--pad-x) / 2));
}

.eyebrow {
  font-family: var(--font-text);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
}
.section-head .eyebrow,
.cta-banner .eyebrow,
.cop-copy .eyebrow {
  display: block;
}
.section-head .eyebrow,
.cta-banner .eyebrow {
  white-space: nowrap;
}
.section-head .eyebrow::before,
.cta-banner .eyebrow::before,
.cop-copy .eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose), var(--violet));
  margin: 0 0 12px;
}
.section-head,
.cta-banner {
  text-align: center;
}
.section-head .eyebrow::before,
.cta-banner .eyebrow::before {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .cta-with-phone .copy .eyebrow::before {
    margin-left: 0;
    margin-right: auto;
  }
}

.h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 8.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .h1 { font-size: clamp(48px, 4.5vw, 68px); }
}

.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p, .lead { text-wrap: pretty; }

.lead {
  font-size: clamp(15px, 3.6vw, 18px);
  color: var(--text-dim);
  max-width: 64ch;
  line-height: 1.55;
}

.text-rose { color: var(--rose); }

@media (min-width: 768px) {
  body { font-size: 16px; }
  .h3 { font-size: 22px; }
}

/* ============== background FX ============== */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 520px at center, var(--bg-glow-rose), transparent 60%) no-repeat,
    radial-gradient(820px 620px at center, var(--bg-glow-violet), transparent 65%) no-repeat,
    radial-gradient(1100px 800px at center, var(--bg-glow-quantum), transparent 60%) no-repeat;
  background-position: 92% 8%, 5% 28%, 50% 110%;
  animation: bg-fx-drift 32s ease-in-out infinite;
}
@keyframes bg-fx-drift {
  0%   { background-position: 92% 8%,  5% 28%, 50% 110%; }
  25%  { background-position: 84% 18%, 14% 22%, 56% 104%; }
  50%  { background-position: 96% 14%, 8% 36%, 44% 116%; }
  75%  { background-position: 88% 4%,  2% 30%, 52% 108%; }
  100% { background-position: 92% 8%,  5% 28%, 50% 110%; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-fx::before { animation: none; }
}
.bg-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 0, transparent calc(100% - 1px), var(--grid-line) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--grid-line) 100%);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, #000 50%, transparent 85%);
  opacity: var(--grid-opacity);
}

/* ============== header ============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}
/* Scrolled state — liquid glass surface kicks in once the user scrolls
   past the page top. The atmospheric ::before fade dims to 0 to avoid
   doubling up with the glass surface. */
.site-header.is-scrolled {
  background: rgba(22, 22, 23, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.site-header.is-scrolled::before { opacity: 0; }

/* Softer primary (matches header "Entrar" feel — lower bloom). */
.site-header .btn:not(.btn-ghost):not(.btn-quiet) {
  --btn-tint-b:      rgba(226, 85, 160, 0.18);
  --btn-pool:        rgba(226, 85, 160, 0.22);
  --btn-bloom:       rgba(226, 85, 160, 0.40);
  --btn-bloom-soft:  rgba(226, 85, 160, 0.22);
}
/* Dark-mode shadow rebalance — black drops disappear on the near-black
   canvas, so the buttons read flat. Swap them for white-tinted halos
   (low alpha) + a thin outer rim glow so the lift reads even without
   relying on the colored bloom. Applies to all .btn variants. */
:root[data-theme="dark"] .btn {
  box-shadow:
    inset 0 0 0 1px var(--btn-rim-edge),
    inset 0 1px 0 var(--btn-rim-top),
    inset 0 -1px 0 var(--btn-rim-bot),
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 10px 22px -8px rgba(255, 255, 255, 0.10),
    0 26px 64px -14px var(--btn-bloom-soft),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .btn:hover {
  box-shadow:
    inset 0 0 0 1px var(--btn-rim-edge),
    inset 0 1px 0 var(--btn-rim-top),
    inset 0 -1px 0 var(--btn-rim-bot),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 14px 30px -8px rgba(255, 255, 255, 0.14),
    0 32px 80px -14px var(--btn-bloom),
    0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Saturated header primary in dark mode — mirrors the approved light tri-tone
   diagonal but with deeper alphas so the rose→violet→blue body still
   asserts itself against a near-black canvas. White rim & specular
   crescent stay subtle to avoid a "plastic" highlight. */
:root[data-theme="dark"] .site-header .btn:not(.btn-ghost):not(.btn-quiet) {
  background:
    radial-gradient(130% 90% at 82% 115%,
      rgba(61, 191, 242, 0.42) 0%,
      transparent 60%),
    radial-gradient(140% 60% at 50% -20%,
      rgba(255, 255, 255, 0.20) 0%,
      transparent 52%),
    linear-gradient(125deg,
      rgba(232, 96, 168, 0.92) 0%,
      rgba(204, 80, 156, 0.90) 22%,
      rgba(158, 76, 178, 0.88) 50%,
      rgba(96, 92, 200, 0.88) 78%,
      rgba(70, 138, 218, 0.90) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 10px 22px -8px rgba(255, 255, 255, 0.10),
    0 26px 64px -14px rgba(158, 76, 178, 0.60),
    0 0 0 1px rgba(232, 96, 168, 0.22);
}
:root[data-theme="dark"] .site-header .btn:not(.btn-ghost):not(.btn-quiet):hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 14px 30px -8px rgba(255, 255, 255, 0.14),
    0 34px 88px -14px rgba(158, 76, 178, 0.78),
    0 0 0 1px rgba(232, 96, 168, 0.30);
}
:root[data-theme="light"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 -1px 0 rgba(20, 14, 32, 0.08);
}
/* Atmospheric fade behind the header that extends down past its bottom
   edge into the top of the hero, so the menu reads as floating over a
   softly shaded band with no visible boundary line between header and
   hero. Pseudo lives inside the sticky header's stacking context, so it
   stays attached to the menu as the page scrolls. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 296px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
  background:
    radial-gradient(60% 100% at 0% 0%,
      rgba(0, 0, 0, 0.32) 0%,
      transparent 70%),
    radial-gradient(60% 100% at 100% 0%,
      rgba(0, 0, 0, 0.32) 0%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.10) 45%,
      transparent 100%);
}
:root[data-theme="light"] .site-header::before {
  opacity: 0.6;
  background:
    radial-gradient(60% 100% at 0% 0%,
      rgba(20, 14, 50, 0.10) 0%,
      transparent 70%),
    radial-gradient(60% 100% at 100% 0%,
      rgba(20, 14, 50, 0.10) 0%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(20, 14, 50, 0.07) 0%,
      rgba(20, 14, 50, 0.03) 45%,
      transparent 100%);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand .symbol {
  height: 28px;
  width: auto;
  flex: 0 0 auto;
  transition: filter 0.3s ease;
}
:root[data-theme="light"] .brand .symbol { filter: invert(1) saturate(0); }
.brand .word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.nav {
  display: none;
}

.nav-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--glass-tint);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: background 0.2s ease;
}
.site-header .header-actions { display: none; }
.site-header .header-mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle:hover { background: rgba(var(--on-bg-rgb), 0.07); }
.nav-toggle svg { width: 20px; height: 20px; }

/* =====================================================================
   Liquid glass buttons
   ---------------------------------------------------------------------
   Philosophy: the button is a piece of refractive glass sitting on the
   page — it does NOT have a baked-in metallic gradient. Surface effects:
     1. Real backdrop-filter (blur + saturate) so content behind shows
        through softened.
     2. Faint warm tint inside the glass — light passing through, not paint
        on top. We layer two whisper-thin gradients (top→bottom and a soft
        radial "liquid pool") instead of a flat color.
     3. Specular top-rim crescent using mix-blend-mode: screen so the
        highlight ADDS light to whatever is behind, like a real reflection.
     4. Hairline rim (1px inset) with brighter top, dimmer bottom.
     5. Soft outer color bloom suggesting light bleeding through the edges.
     6. Hover: bloom intensifies, the conic ring fades in subtly. No
        background color jump (which is what made the old style feel
        plasticky / early-2000s).
   ===================================================================== */
.btn {
  /* Dark theme defaults — primary CTA, must read confidently against the
     dark page and out-loud against secondary ghost/quiet variants. We keep
     the liquid-glass surface logic but raise the internal saturation and
     the colored bloom radius so the button asserts itself as the primary. */
  --btn-tint-a:      rgba(255, 255, 255, 0.09);
  --btn-tint-b:      rgba(226, 85, 160, 0.32);
  --btn-pool:        rgba(226, 85, 160, 0.42);
  --btn-bloom:       rgba(226, 85, 160, 0.70);
  --btn-bloom-soft:  rgba(226, 85, 160, 0.45);
  --btn-rim-top:     rgba(255, 255, 255, 0.55);
  --btn-rim-edge:    rgba(255, 255, 255, 0.22);
  --btn-rim-bot:     rgba(255, 255, 255, 0.05);
  --btn-fg:          #fff;
  --btn-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.3);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-shadow: var(--btn-text-shadow);
  /* The glass body itself: two faint internal tints layered. No flat fill. */
  background:
    radial-gradient(140% 80% at 50% 120%, var(--btn-pool) 0%, transparent 60%),
    linear-gradient(180deg, var(--btn-tint-a) 0%, var(--btn-tint-b) 100%);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  /* Glass shell shadow stack:
       1. hairline rim (1px inset)
       2. tiny crisp drop
       3. ambient soft drop
       4. colored bloom — what gives the "liquid" feel */
  box-shadow:
    inset 0 0 0 1px var(--btn-rim-edge),
    inset 0 1px 0 var(--btn-rim-top),
    inset 0 -1px 0 var(--btn-rim-bot),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 12px 28px -10px rgba(0, 0, 0, 0.45),
    0 28px 72px -14px var(--btn-bloom-soft),
    0 0 0 1px rgba(226, 85, 160, 0.10);
  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.4s ease,
    background 0.4s ease;
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
}

/* Specular top-rim crescent. Uses screen blend so it ADDS light over
   whatever's behind — like a real catchlight on liquid mercury. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* top crescent reflection */
    radial-gradient(120% 70% at 50% -25%,
      var(--btn-rim-top) 0%,
      transparent 45%),
    /* faint side edge catches */
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.10) 0%,
      transparent 14%,
      transparent 86%,
      rgba(255, 255, 255, 0.10) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Refractive ring — only on hover. Subtle iridescent halo, not a flashy
   rainbow. Lower opacity than before, slower rotation. */
.btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--btn-ring-angle, 0deg),
    transparent 0%,
    transparent 30%,
    var(--rose-bright) 42%,
    rgba(255, 255, 255, 0.85) 50%,
    var(--cyber) 58%,
    transparent 70%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(0.4px) drop-shadow(0 0 8px rgba(226, 85, 160, 0.4));
}
.btn:hover::after {
  opacity: 0.7;
  animation: btn-shine-rotate 3.6s linear infinite;
}
@property --btn-ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes btn-shine-rotate {
  to { --btn-ring-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation: none; }
}

.btn:hover {
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 0 0 1px var(--btn-rim-edge),
    inset 0 1px 0 var(--btn-rim-top),
    inset 0 -1px 0 var(--btn-rim-bot),
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 14px 32px -10px rgba(0, 0, 0, 0.45),
    0 30px 80px -14px var(--btn-bloom);
}
.btn:active {
  transform: translateY(0);
  transition-duration: 0.1s;
  box-shadow:
    inset 0 0 0 1px var(--btn-rim-edge),
    inset 0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 -1px 0 var(--btn-rim-bot),
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 18px 50px -14px var(--btn-bloom);
}

/* =====================================================================
   LIGHT THEME BUTTONS
   ---------------------------------------------------------------------
   Primary CTA (.btn) is the only attention-grabber — body is a tri-tone
   diagonal gradient running rose → violet → cyber blue (135°). Adding
   the cool side of the palette pulls the wavelength out of pure red and
   adds depth (rose remains dominant, ~60% of the body, but the trail
   reads cool). Bloom shadow blends the rose + cyber so the colored halo
   under the button is a soft purple-magenta — visually richer than
   monochrome rose.

   Ghost/quiet (.btn-ghost, .btn-quiet) are deliberately quiet now — clean
   white glass, thin rim, almost no shadow. The job: be readable without
   competing with the primary CTA.
   ===================================================================== */
:root[data-theme="light"] .btn {
  --btn-fg:          #fff;
  --btn-text-shadow: 0 1px 2px rgba(30, 18, 70, 0.50), 0 0 1px rgba(30, 18, 70, 0.30);

  background:
    /* cyan "liquid pool" — softer, more transparent */
    radial-gradient(130% 90% at 82% 115%,
      rgba(61, 191, 242, 0.32) 0%,
      transparent 60%),
    /* upper highlight wash */
    radial-gradient(140% 60% at 50% -20%,
      rgba(255, 255, 255, 0.38) 0%,
      transparent 52%),
    /* tri-tone body — alpha-driven so backdrop blur shows through.
       Each stop carries its hue but with ~78–82% alpha, letting the page
       behind whisper through and giving the surface a true glass feel. */
    linear-gradient(125deg,
      rgba(226, 85, 160, 0.82) 0%,
      rgba(196, 75, 150, 0.80) 22%,
      rgba(150, 70, 168, 0.78) 50%,
      rgba(90, 87, 190, 0.78) 78%,
      rgba(61, 127, 208, 0.80) 100%);
  /* Backdrop blur is back — that's what makes the alpha gradient read as
     liquid glass instead of just a transparent paint. */
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(20, 14, 70, 0.22),
    0 1px 1px rgba(30, 20, 90, 0.14),
    0 10px 22px -8px rgba(107, 60, 184, 0.28),
    0 24px 56px -14px rgba(80, 90, 200, 0.38);
}

/* Specular crescent — cleaner / brighter on the saturated body */
:root[data-theme="light"] .btn::before {
  background:
    radial-gradient(110% 60% at 50% -15%,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.22) 25%,
      transparent 50%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.24) 0%,
      transparent 14%,
      transparent 86%,
      rgba(255, 255, 255, 0.20) 100%);
  mix-blend-mode: screen;
  opacity: 0.95;
}

:root[data-theme="light"] .btn:hover {
  transform: translateY(-1.5px);
  background:
    radial-gradient(130% 90% at 82% 115%,
      rgba(87, 227, 242, 0.40) 0%,
      transparent 60%),
    radial-gradient(140% 60% at 50% -20%,
      rgba(255, 255, 255, 0.48) 0%,
      transparent 52%),
    linear-gradient(125deg,
      rgba(237, 105, 174, 0.88) 0%,
      rgba(209, 88, 162, 0.86) 22%,
      rgba(165, 85, 184, 0.84) 50%,
      rgba(105, 104, 208, 0.84) 78%,
      rgba(77, 146, 224, 0.86) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.40),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(20, 14, 70, 0.22),
    0 1px 1px rgba(30, 20, 90, 0.14),
    0 14px 30px -8px rgba(107, 60, 184, 0.36),
    0 32px 72px -14px rgba(80, 90, 200, 0.48);
}

/* -------------------- Ghost / quiet (light, liquid glass) -------------------- */
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .btn-quiet {
  --btn-fg:          var(--text);
  --btn-text-shadow: none;

  color: var(--text);
  background:
    /* internal liquid pool — subtle cool wash welling from bottom-right */
    radial-gradient(130% 90% at 78% 115%,
      rgba(180, 195, 230, 0.30) 0%,
      transparent 60%),
    /* upper highlight wash */
    radial-gradient(140% 60% at 50% -20%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 50%),
    /* glassy body — alpha-driven so backdrop blur shows through */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.34) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 14, 32, 0.10),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(20, 14, 32, 0.06),
    0 1px 1px rgba(20, 14, 32, 0.05),
    0 6px 14px -6px rgba(20, 14, 32, 0.10),
    0 18px 38px -14px rgba(20, 14, 32, 0.12);
}
:root[data-theme="light"] .btn-ghost::before,
:root[data-theme="light"] .btn-quiet::before {
  background:
    radial-gradient(110% 60% at 50% -15%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.20) 25%,
      transparent 50%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.30) 0%,
      transparent 14%,
      transparent 86%,
      rgba(255, 255, 255, 0.24) 100%);
  mix-blend-mode: screen;
  opacity: 0.95;
}
:root[data-theme="light"] .btn-ghost:hover,
:root[data-theme="light"] .btn-quiet:hover {
  background:
    radial-gradient(130% 90% at 78% 115%,
      rgba(180, 195, 230, 0.40) 0%,
      transparent 60%),
    radial-gradient(140% 60% at 50% -20%,
      rgba(255, 255, 255, 0.65) 0%,
      transparent 50%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.48) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 14, 32, 0.12),
    inset 0 1.2px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(20, 14, 32, 0.06),
    0 1px 1px rgba(20, 14, 32, 0.05),
    0 10px 22px -6px rgba(20, 14, 32, 0.14),
    0 26px 56px -14px rgba(20, 14, 32, 0.16);
}
.btn .arrow {
  width: 18px;
  height: 18px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn:hover .arrow { transform: translateX(3px); }
.btn .btn-leading {
  display: inline-flex;
  align-items: center;
  margin-right: -4px;
}
.btn .btn-leading svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
/* Ghost / quiet variants — neutral liquid glass. Same surface logic as the
   primary (internal pool + specular crescent + backdrop blur), just with
   a colorless tint so they stay secondary. */
.btn-ghost,
.btn-quiet {
  --btn-tint-a:      rgba(255, 255, 255, 0.10);
  --btn-tint-b:      rgba(255, 255, 255, 0.04);
  --btn-pool:        rgba(255, 255, 255, 0.08);
  --btn-bloom:       rgba(255, 255, 255, 0.18);
  --btn-bloom-soft:  rgba(255, 255, 255, 0.10);
  color: var(--text);
  text-shadow: none;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .btn-quiet {
  --btn-tint-a:      rgba(255, 255, 255, 0.50);
  --btn-tint-b:      rgba(255, 255, 255, 0.20);
  --btn-pool:        rgba(255, 255, 255, 0.10);
  --btn-bloom:       rgba(20, 14, 32, 0.18);
  --btn-bloom-soft:  rgba(20, 14, 32, 0.10);
}
.btn-ghost { font-weight: 600; }
.btn-quiet {
  font-weight: 500;
  font-size: 13.5px;
  padding: 9px 16px;
}
/* Ghost/quiet keep the rotating iridescent ring on hover (Dribbble shader
   reference). We just temper its visibility so it doesn't overpower the
   neutral surface — slightly lower opacity + thinner ring. */
.btn-ghost:hover::after,
.btn-quiet:hover::after { opacity: 0.55; }
.btn-block { width: 100%; justify-content: center; }

@media (min-width: 1024px) {
  .site-header .container { height: 76px; }
  .brand .symbol { height: 32px; width: auto; }
  .brand .word { font-size: 22px; }
  .nav {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .nav a {
    font-size: 14.5px;
    color: var(--text-dim);
    font-weight: 500;
    transition: color 0.2s ease;
  }
  .nav a:hover { color: var(--text); }
  .nav-toggle { display: none; }
  .site-header .header-mobile-actions { display: none; }
  .site-header .header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-block { width: auto; }
}

/* mobile drawer */
.nav-drawer {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: calc(100dvh - 60px);
  height: calc(100vh - 60px);
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 32px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
  visibility: hidden;
  border-bottom: 1px solid var(--line);
}
.nav-drawer.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.28s ease, visibility 0s;
}
.nav-drawer a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: #fff;
}
.nav-drawer .btn { margin-top: 24px; }
@media (min-width: 1024px) {
  .nav-drawer { display: none; }
}

/* ============== hero ============== */
.hero {
  position: relative;
  z-index: 2;
  padding: 24px 0 24px;
}
/* Hero top vignette is now driven by .site-header::before (covers header +
   top band of the hero in one continuous fade). Pseudos disabled here. */
.hero::before { content: none; }
.hero::after { content: none; }
:root[data-theme="light"] .hero::before { content: none; }
:root[data-theme="light"] .hero::after { content: none; }
.hero-top { position: relative; }
.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-grid > .hero-headline { margin-top: 24px; }
.hero-grid > .hero-rest { margin-top: 0; }
.hero-rest > .lead { margin-top: 20px; }
.hero-rest > .cta-lead {
  margin: 0 0 14px;
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-rest > .cta-row { margin-top: 0; }

/* ============== client logos marquee ============== */
.client-marquee {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  padding: 12px 0;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Fade-in/out aligned to the container edges (same line as the headline + stats).
     --edge = distance from each viewport edge to the container's content edge.
     Inside that, a small --fade band softens the appearance/disappearance. */
  --edge: max(var(--pad-x), calc(50vw - var(--maxw) / 2 + var(--pad-x)));
  --fade: 48px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--edge),
    #000 calc(var(--edge) + var(--fade)),
    #000 calc(100% - var(--edge) - var(--fade)),
    transparent calc(100% - var(--edge)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--edge),
    #000 calc(var(--edge) + var(--fade)),
    #000 calc(100% - var(--edge) - var(--fade)),
    transparent calc(100% - var(--edge)),
    transparent 100%
  );
}
@media (min-width: 1024px) {
  .client-marquee { --fade: 80px; }
}
.client-marquee-track {
  display: inline-flex;
  gap: 64px;
  align-items: center;
  white-space: nowrap;
  animation: client-marquee-scroll 42s linear infinite;
  will-change: transform;
}
.client-logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.55;
  text-transform: none;
  user-select: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.client-logo:hover {
  opacity: 1;
  color: var(--text);
}
@keyframes client-marquee-scroll {
  /* Triplicated track: animating -33.333% slides exactly one set out, with the next two
     sets keeping the viewport always full. The reset is invisible because position 0 and
     -33.333% render identically. */
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee-track { animation: none; }
}
@media (min-width: 1024px) {
  .client-marquee { margin-top: 32px; }
  .client-logo { height: 32px; font-size: 22px; }
  .client-marquee-track { gap: 80px; }
}

.hero .topline {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  width: fit-content;
}
.hero .topline .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 12px var(--rose);
  transition: box-shadow 0.3s ease;
}
.hero .topline .dot.flash { animation: dot-pulse 0.55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dot-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 12px var(--rose); }
  35%  { transform: scale(2);   box-shadow: 0 0 22px var(--rose-bright), 0 0 0 6px rgba(190, 63, 132, 0); }
  100% { transform: scale(1);   box-shadow: 0 0 12px var(--rose); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .topline .dot.flash { animation: none; }
}

/* code-bracket frame around the headline */
.hero-headline {
  position: relative;
  padding: 22px 18px;
  border-radius: 14px;
}
.hero-headline::before,
.hero-headline::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--rose);
  transition: border-color 0.3s ease, filter 0.3s ease;
}
.hero-headline::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 12px;
}
.hero-headline::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 12px;
}
@keyframes corner-flash {
  0%   { border-color: var(--rose);        filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  20%  { border-color: var(--rose-bright); filter: drop-shadow(0 0 24px rgba(226, 85, 160, 1)) drop-shadow(0 0 8px rgba(87, 227, 242, 0.5)); transform: scale(1.18); }
  60%  { border-color: var(--rose-soft);   filter: drop-shadow(0 0 12px rgba(226, 85, 160, 0.6)); transform: scale(0.96); }
  100% { border-color: var(--rose);        filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
}
.hero-headline.flash::before {
  transform-origin: top left;
  animation: corner-flash 0.7s cubic-bezier(.34, 1.56, .64, 1);
}
.hero-headline.flash::after {
  transform-origin: bottom right;
  animation: corner-flash 0.7s cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-headline.flash::before,
  .hero-headline.flash::after { animation: none; }
}

.hero h1 .accent {
  background: linear-gradient(120deg, var(--rose-bright) 0%, var(--rose) 50%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .rotator {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.hero h1 .rotator-word {
  display: inline-block;
  will-change: transform, opacity, filter;
  background: linear-gradient(120deg, var(--rose-bright) 0%, var(--rose) 50%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero p.lead {
  margin: 0;
  font-size: 15px;
}

.hero-rest > .cta-row .btn-stack .btn-label {
  display: inline-block;
  text-align: left;
  line-height: 1.18;
  font-size: 14.5px;
}
.hero-rest > .cta-row .btn-stack { padding-block: 22px; }
[dir="rtl"] .hero-rest > .cta-row .btn-stack .btn-label { text-align: right; }

/* Subtitle right above the bignumbers row */
.hero .stats-lead {
  margin: 32px 0 14px;
  font-family: var(--font-text);
  font-size: clamp(14px, 3.4vw, 17px);
  font-weight: 500;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.hero .cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
}

.hero .stats { display: none; }
.hero-divider { display: none; }

@media (min-width: 768px) {
  .hero { padding: 36px 0 32px; }
  .hero-headline { padding: 32px 28px; }
  .hero-headline::before, .hero-headline::after { width: 36px; height: 36px; }
  .hero p.lead { font-size: 17px; max-width: 56ch; }
  .hero .cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .hero .cta-row .btn { width: auto; flex: 0 0 auto; }
}

@media (min-width: 1024px) {
  .hero { padding: 44px 0 36px; }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "topline ."
      "head    ."
      "rest    ."
      "div1    div1"
      "stats   stats"
      "div2    div2";
    column-gap: 64px;
    row-gap: 0;
    align-items: start;
  }
  .hero-grid > .topline       { grid-area: topline; margin-bottom: 24px; }
  .hero-grid > .hero-headline { grid-area: head; margin-top: 0; }
  .hero-grid > .hero-rest     { grid-area: rest; margin-top: 32px; }
  .hero-grid > .stats-lead    { grid-area: slead; max-width: 640px; justify-self: center; width: 100%; margin-top: 56px; text-align: center; }
  .hero-grid > .stats         { grid-area: stats; max-width: 640px; justify-self: center; width: 100%; }
  .hero-grid > .hero-divider:nth-of-type(1) { grid-area: div1; margin: 56px 0 22px; }
  .hero-grid > .hero-divider:nth-of-type(2) { grid-area: div2; margin: 22px 0 0; }
  .hero-grid > .hero-divider {
    display: block;
    width: 100%;
    max-width: 640px;
    justify-self: center;
    height: 0;
    border: 0;
    border-top: 1px solid var(--line);
  }
  .hero .stats {
    display: grid;
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .hero-grid > .stats-lead { margin-top: 56px; margin-bottom: 14px; }
  .hero .stat .num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(28px, 2.4vw, 34px);
    letter-spacing: -0.02em;
    color: var(--text);
  }
  :root[data-theme="dark"] .hero .stat .num {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 4px rgba(0, 0, 0, 0.4);
  }
  .hero .stat .label {
    font-size: 13.5px;
    color: var(--text);
    margin-top: 4px;
    font-weight: 500;
    opacity: 0.92;
  }
  :root[data-theme="dark"] .hero .stat .label {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
}

/* =========================================================
   HERO FLOW — official brand element (rendered SVG asset)
   The P bowl is anchored on its RIGHT edge, scales by HEIGHT,
   and the tail extends leftward (clipped by overflow:hidden).
   ========================================================= */
.hero-grid { position: relative; z-index: 3; }
.hero > .container { position: relative; z-index: 2; }

.hero-flow {
  /* User-tunable knobs — overridden inline by the P-tuner panel.
     Defaults: scale 100% (tail keeps its original reach to the marquee bottom-left).
     y = -70px shifts the whole image DOWN by 70px so the top of the P bowl drops
     to the red-line level (just below the topline pill). The bottom of the tail goes
     past the .hero-flow bottom and is clipped by overflow:hidden — the visible tail
     end stays at marquee bottom. */
  --p-scale: 1;
  --p-x: 0px;
  --p-y: -70px;
  /* Empty-space ratio inside the SVG (right of the P bowl): clip 1257/1440 = 87.3%
     ⇒ ~12.7% empty on the right. We push the image rightward by that much so the
     P's right edge aligns with the container's right padding line.
     For hero-element.png (1920×1080): right empty band = 10.42%. */
  --p-edge-comp: 10.42%;

  position: absolute;
  inset: 0;
  /* Above the marquee so the tail covers the logos; below .hero-grid so headline
     text always reads on top. */
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* Hidden on mobile + tablet; only shown >= 1024px */
  display: none;
}

@media (min-width: 1024px) {
  .hero-flow { display: block; }
}

.hero-flow-frame {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
}

.hero-flow .flow-img {
  position: absolute;
  /* Anchor by right edge to the container's right padding line, then translate
     the image by --p-edge-comp so the P bowl's right edge lands exactly there. */
  right: var(--pad-x);
  bottom: var(--p-y);
  top: auto;
  /* Scale uniformly by height so the visual stays in the hero-top vertical band.
     width: auto preserves the SVG's 1440:810 aspect ratio — the tail spills to
     the left and is clipped by .hero-flow's overflow:hidden. */
  height: calc(100% * var(--p-scale));
  width: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Push the image right by --p-edge-comp (% is relative to the image's own width)
     so the P right edge sits flush with the container's right padding line. */
  transform: translateX(calc(var(--p-edge-comp) + var(--p-x)));
  /* Preserve max raster fidelity — no filters that force a re-rasterization at
     a smaller intermediate size. */
  image-rendering: high-quality;
  -webkit-image-rendering: high-quality;
  animation: flowImgFloat 9s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes flowImgFloat {
  0%   { transform: translateX(calc(var(--p-edge-comp) + var(--p-x)))                  translate3d(0, 0, 0)     scale(1); }
  100% { transform: translateX(calc(var(--p-edge-comp) + var(--p-x)))                  translate3d(-6px, -8px, 0) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flow .flow-img { animation: none; }
}

/* No filter chain on the flow image — drop-shadow + brightness force a
   filter-graph re-rasterization that softens the iridescent gradients.
   Keep the artwork pristine; if a glow is needed, layer it as a blurred
   pseudo-element behind the image, not as a CSS filter on it. */

/* ============== sections ============== */
.section {
  position: relative;
  z-index: 2;
  padding: 64px 0;
}
.section-head {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 800px;
}
.section-head .eyebrow {
  display: block;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .section { padding: 88px 0; }
  .section-head { margin-bottom: 48px; }
}
@media (min-width: 1024px) {
  .section { padding: 112px 0; }
  .section-head { margin: 0 auto 56px; }
}

/* ============== problemas ============== */
.problems-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.problem-block {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.problem-block::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: var(--radius-lg);
  background: radial-gradient(400px 200px at 0% 0%, rgba(190, 63, 132, 0.15), transparent 60%);
}
.problem-block > * { position: relative; z-index: 1; }

.problem-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(190, 63, 132, 0.22), rgba(107, 60, 184, 0.16));
  border: 1px solid rgba(190, 63, 132, 0.5);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 16px;
}
.problem-chip .ico {
  width: 16px;
  height: 16px;
  color: var(--rose-bright);
  display: grid;
  place-items: center;
}

.problem-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.problems-card,
.solutions-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.problems-card { border-color: rgba(190, 63, 132, 0.22); }
.solutions-card {
  background: linear-gradient(180deg, rgba(190, 63, 132, 0.16), rgba(107, 60, 184, 0.10) 60%, rgba(47, 64, 115, 0.08));
  border-color: rgba(190, 63, 132, 0.45);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-head .h3 {
  font-size: 16px;
  font-weight: 700;
}
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--on-bg-rgb), 0.04);
  color: var(--text-mute);
  white-space: nowrap;
  flex: 0 0 auto;
}
.card-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
  flex: 0 0 auto;
}
.solutions-card .card-tag {
  border-color: rgba(190, 63, 132, 0.45);
  background: linear-gradient(135deg, rgba(190, 63, 132, 0.18), rgba(107, 60, 184, 0.12));
  color: var(--rose);
}
.solutions-card .card-tag::before {
  background: var(--rose);
  box-shadow: 0 0 8px var(--rose);
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.solutions-card .list li { color: var(--text); }
.list li .ico {
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
}
.list .ico-x { color: var(--rose); }
.list .ico-ck {
  color: #fff;
  background: var(--rose);
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .problem-block { padding: 26px; }
  .problem-cards { flex-direction: row; gap: 16px; }
  .problem-cards > * { flex: 1; }
  .problems-card, .solutions-card { padding: 22px; }
  .list li { font-size: 14.5px; }
}

/* desktop: tabs UI */
@media (min-width: 1024px) {
  .problems-stack { display: none; }
  .tabs {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 28px;
    position: relative;
    overflow: hidden;
  }
  .tabs::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: var(--radius-xl);
    background: radial-gradient(600px 200px at 100% 0%, rgba(190, 63, 132, 0.18), transparent 60%);
  }
  .tablist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
  }
  .tab {
    text-align: left;
    padding: 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 16px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }
  .tab:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
  .tab[aria-selected="true"] {
    background: linear-gradient(180deg, rgba(190, 63, 132, 0.16), rgba(107, 60, 184, 0.08));
    border-color: rgba(190, 63, 132, 0.45);
    color: #fff;
  }
  .tab .ico {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--rose);
  }
  .tabpanels { position: relative; z-index: 2; }
  .tabpanel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    animation: fadeIn 0.35s ease;
  }
  .tabpanel[data-active="true"] { display: grid; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 1023px) {
  .tabs { display: none; }
}

/* ============== como fazemos (timeline) ============== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  position: relative;
}
.step {
  position: relative;
  padding: 22px 22px 22px 22px;
  background: linear-gradient(180deg, rgba(var(--on-bg-rgb), 0.04), rgba(var(--on-bg-rgb), 0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.25s ease, border-color 0.25s ease;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step:hover { border-color: rgba(190, 63, 132, 0.4); }
.step .num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--rose), var(--violet));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  flex: 0 0 40px;
  box-shadow: 0 12px 28px -8px rgba(190, 63, 132, 0.55);
}
.step h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
}
.step p {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 56px;
    padding-top: 22px;
    position: relative;
  }
  .timeline { isolation: isolate; }
  .timeline::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      var(--quantum)    0%,
      var(--violet)    25%,
      var(--rose)      50%,
      var(--rose-soft) 70%,
      var(--cyber)     88%,
      var(--neoblue)  100%);
    box-shadow: 0 0 16px rgba(190, 63, 132, 0.35);
    z-index: 1;
  }
  .step {
    flex-direction: column;
    padding: 28px 22px;
    gap: 0;
    align-items: stretch;
    z-index: 2;
  }
  .step:hover { transform: translateY(-4px); z-index: 3; }
  .step .num {
    position: absolute;
    top: -22px;
    left: -22px;
    width: 44px;
    height: 44px;
    margin: 0;
    align-self: auto;
    font-size: 18px;
    border: 4px solid var(--bg);
    z-index: 2;
  }
  .step h4 { font-size: 17px; margin-bottom: 8px; }
  .step p { font-size: 14px; }
}

/* ============== diferenciais ============== */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.diff-card {
  position: relative;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.diff-card:hover {
  transform: translateY(-4px);
  border-color: rgba(190, 63, 132, 0.4);
}
.diff-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: var(--radius);
  background: radial-gradient(400px 160px at 100% 0%, rgba(190, 63, 132, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.diff-card:hover::before { opacity: 1; }
.diff-card .ico-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(190, 63, 132, 0.18), rgba(107, 60, 184, 0.08));
  border: 1px solid rgba(190, 63, 132, 0.35);
  color: var(--rose);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.diff-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
}
.diff-card p {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .diff-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .diff-card { padding: 26px; }
  .diff-card h4 { font-size: 18px; }
  .diff-card p { font-size: 14px; }
}
@media (min-width: 1024px) {
  .diff-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .diff-card { padding: 28px 26px; }
  .diff-card .ico-wrap { width: 48px; height: 48px; margin-bottom: 18px; }
  .diff-card h4 { font-size: 19px; margin-bottom: 10px; }
  .diff-card p { font-size: 14.5px; }
}

/* ============== COP — Customer OmniAI Platform ============== */
.cop-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.cop-hex {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.cop-hex::before {
  content: "";
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle at 50% 50%, rgba(190, 63, 132, 0.18), transparent 60%);
  filter: blur(20px);
}
.cop-hex svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.cop-hex .center {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 3;
}
.cop-hex .center .badge {
  width: 100%;
  aspect-ratio: 1;
  background:
    linear-gradient(180deg, var(--rose) 0%, var(--violet) 100%),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.30), transparent 50%);
  border: 1px solid rgba(190, 63, 132, 0.6);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12%;
  box-shadow: 0 30px 80px -20px rgba(190, 63, 132, 0.55);
}
.cop-hex .badge .label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 8vw, 44px);
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.cop-hex .badge .sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 4px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.cop-hex { perspective: 1100px; }
.cop-orbit {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform-style: preserve-3d;
}
.cop-node {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  pointer-events: auto;
  white-space: nowrap;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
  transition: opacity 0.18s linear;
}
.cop-node .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.cop-node.n1 .dot { background: var(--rose); }
.cop-node.n2 .dot { background: var(--cyber); }
.cop-node.n3 .dot { background: var(--neoblue); }
.cop-node.n4 .dot { background: var(--violet); }

.cop-copy h2 { margin-bottom: 14px; }
.cop-copy p.lead { margin-bottom: 22px; }

.cop-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cop-card {
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cop-card .ico-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: linear-gradient(140deg, rgba(190, 63, 132, 0.18), rgba(107, 60, 184, 0.08));
  border: 1px solid rgba(190, 63, 132, 0.35);
  color: var(--rose);
}
.cop-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
}
.cop-card p {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .cop-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cop-card .ico-wrap { width: 44px; height: 44px; margin-bottom: 16px; }
  .cop-card h4 { font-size: 18px; }
  .cop-card p { font-size: 14px; }
}
@media (min-width: 1024px) {
  .cop-wrap {
    display: grid;
    grid-template-columns: 0.95fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 56px;
  }
  .cop-hex { max-width: none; }
  .cop-cards { gap: 18px; }
  .cop-card { padding: 26px; }
}

/* ============== CTA banner ============== */
.cta-banner {
  position: relative;
  padding: 36px 24px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(190, 63, 132, 0.22), rgba(107, 60, 184, 0.12) 50%, rgba(47, 64, 115, 0.10)),
    radial-gradient(600px 320px at 80% 50%, rgba(190, 63, 132, 0.32), transparent 60%);
  border: 1px solid rgba(190, 63, 132, 0.4);
  overflow: hidden;
  text-align: left;
  margin: 48px 0;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent calc(100% - 1px), rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 255, 255, 0.06) 100%);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 80%);
  opacity: 0.6;
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
  margin-bottom: 12px;
  font-size: clamp(24px, 6vw, 44px);
}
.cta-banner p {
  color: var(--text-dim);
  margin: 0 0 20px;
  font-size: 14.5px;
}
.cta-banner .cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .cta-banner { padding: 56px 40px; text-align: center; }
  .cta-banner p { max-width: 60ch; margin: 0 auto 24px; }
  .cta-banner .cta-row {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
}
@media (min-width: 1024px) {
  .cta-banner { padding: 80px; margin: 80px 0; }
}

/* CTA com mockup de telefone */
.cta-with-phone {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.cta-with-phone .copy { text-align: center; }
.cta-with-phone .copy h2 { font-size: clamp(24px, 6vw, 44px); }
.cta-with-phone .copy p {
  color: var(--text-dim);
  margin: 12px 0 20px;
  font-size: 14.5px;
}

.phone {
  width: 240px;
  aspect-ratio: 240 / 480;
  background: #0B0816;
  border: 8px solid #1A1428;
  border-radius: 36px;
  position: relative;
  box-shadow:
    0 40px 80px -20px rgba(190, 63, 132, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
  flex: 0 0 auto;
}
.phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 18px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
}
.phone .screen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #075E54 0%, #128C7E 60px, #ECE5DD 60px);
  display: flex;
  flex-direction: column;
}
.phone .topbar {
  height: 54px;
  background: #075E54;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex: 0 0 54px;
  margin-top: 26px;
}
.phone .topbar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.phone .topbar .avatar img { height: 26px; width: auto; }
.phone .topbar .name {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.phone .topbar .name strong {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.phone .topbar .name span {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
}
.phone .chat {
  flex: 1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5), transparent 40%),
    #ECE5DD;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.phone .chat::-webkit-scrollbar { display: none; }
.phone .chat.done {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
.phone .chat.done::-webkit-scrollbar { display: block; width: 4px; }
.phone .chat.done::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 4px; }
.phone .msg {
  max-width: 78%;
  padding: 6px 9px 5px;
  border-radius: 8px;
  font-size: 9.5px;
  line-height: 1.35;
  color: #111;
  position: relative;
  font-family: -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  animation: msg-pop 0.28s cubic-bezier(.34, 1.56, .64, 1);
  flex: 0 0 auto;
  text-align: start;
}
@keyframes msg-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.phone .msg.in {
  background: #fff;
  align-self: flex-start;
  border-top-left-radius: 2px;
}
.phone .msg.out {
  background: #DCF8C6;
  align-self: flex-end;
  border-top-right-radius: 2px;
}
.phone .msg .time {
  display: block;
  font-size: 7.5px;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
  margin-top: 2px;
}
.phone .msg.typing {
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.phone .msg.typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B8B8B8;
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.phone .msg.typing i:nth-child(2) { animation-delay: 0.18s; }
.phone .msg.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.phone .msg.divider {
  align-self: center;
  background: rgba(255, 255, 255, 0.85);
  font-size: 8.5px;
  font-weight: 600;
  color: var(--rose);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(190, 63, 132, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  letter-spacing: 0.04em;
}
.phone .msg.product {
  padding: 4px;
  width: 78%;
  max-width: 78%;
  background: #fff;
}
.phone .msg.product .product-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: linear-gradient(180deg, #1F1A29 0%, #0E0B16 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.phone .msg.product .product-photo svg {
  width: 70%;
  height: 70%;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.phone .msg.product .product-photo::after {
  content: "Hit&Fit";
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
}
.phone .msg.product .product-meta {
  padding: 6px 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.phone .msg.product .product-title {
  font-size: 9.5px;
  font-weight: 600;
  color: #111;
  line-height: 1.2;
}
.phone .msg.product .product-price {
  font-size: 9px;
  color: #555;
}
.phone .msg .wa-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 6px -9px -5px;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: #00A884;
  cursor: default;
  user-select: none;
  letter-spacing: 0.01em;
}
.phone .msg .wa-button svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .cta-with-phone {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
  }
  .cta-with-phone .copy { flex: 1; text-align: left; }
  .cta-with-phone .copy p { margin-left: 0; margin-right: 0; }
  .phone { width: 280px; }
}

/* ============== footer (revealed on scroll) ============== */
main {
  position: relative;
  z-index: 2;
  background: var(--bg);
}
main::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(47, 64, 115, 0.5) 12%,
    rgba(107, 60, 184, 0.7) 32%,
    rgba(190, 63, 132, 0.85) 50%,
    rgba(61, 191, 242, 0.7) 70%,
    rgba(87, 227, 242, 0.5) 88%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(190, 63, 132, 0.25);
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: var(--footer-bg);
  border-top: 1px solid var(--line);
  padding: 32px 0 24px;
}
.footer .container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer .brand-block .word { font-size: 22px; }
.footer .brand-block p {
  color: var(--text-dim);
  font-size: 13px;
  margin: 12px 0 0;
  max-width: 36ch;
}
.footer .nav-cols { display: none; }
.footer h5 {
  font-family: var(--font-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  margin: 0 0 14px;
  font-weight: 600;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer ul a {
  color: var(--text-dim);
  font-size: 13.5px;
  transition: color 0.2s ease;
}
.footer ul a:hover { color: #fff; }
.footer-bottom {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: var(--text-mute);
}
.footer-bottom .socials {
  display: flex;
  gap: 10px;
}
.footer-bottom .socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-dim);
  transition: all 0.2s ease;
}
.footer-bottom .socials a:hover {
  color: #fff;
  border-color: var(--rose);
  background: rgba(190, 63, 132, 0.08);
}
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-pill:hover {
  color: #fff;
  border-color: var(--rose);
  background: rgba(190, 63, 132, 0.08);
}
.lang-pill svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.lang-pill .region {
  color: var(--text-mute);
  margin-left: 4px;
}

.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lang-modal[data-open="true"] { display: flex; }
.lang-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lang-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(80vh, 640px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lang-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.lang-modal-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  color: var(--text);
}
.lang-modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: rgba(var(--on-bg-rgb), 0.06);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-modal-close:hover { color: var(--text); background: rgba(var(--on-bg-rgb), 0.12); }
.lang-modal-list {
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lang-option:hover { background: rgba(var(--on-bg-rgb), 0.05); color: var(--text); }
.lang-option .name {
  font-size: 15px;
  color: var(--text);
}
.lang-option .sub {
  display: block;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
}
.lang-option .check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  display: none;
  place-items: center;
  flex: 0 0 auto;
}
.lang-option[aria-selected="true"] .check { display: grid; }
.lang-option[aria-selected="true"] { background: rgba(var(--on-bg-rgb), 0.04); }

/* ============== stats counter animation ============== */
.hero .stat .num {
  display: inline-block;
  transform-origin: left center;
  transition: filter 0.3s ease;
}
@keyframes num-boom {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(190, 63, 132, 0)); }
  35%  { transform: scale(1.18); filter: drop-shadow(0 0 28px rgba(190, 63, 132, 0.85)) drop-shadow(0 0 14px rgba(87, 227, 242, 0.4)); }
  60%  { transform: scale(0.96); filter: drop-shadow(0 0 18px rgba(190, 63, 132, 0.55)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(190, 63, 132, 0)); }
}
.hero .stat .num.boom { animation: num-boom 0.85s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
  .hero .stat .num.boom { animation: none; }
}

/* ============== theme toggle (liquid glass switch) ============== */
.theme-switch {
  --track-w: 58px;
  --track-h: 30px;
  --thumb: 22px;
  --pad: 4px;
  position: relative;
  width: var(--track-w);
  height: var(--track-h);
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--glass-tint);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--glass-rim-dim),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 var(--glass-shade),
    0 4px 16px -6px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease;
}
.theme-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  z-index: -1;
}
.theme-switch .theme-icon {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.theme-switch .theme-icon.sun { left: calc(var(--pad) + (var(--thumb) - 14px) / 2); }
.theme-switch .theme-icon.moon { right: calc(var(--pad) + (var(--thumb) - 14px) / 2); }
.theme-switch .theme-thumb {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.6) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(20, 14, 32, 0.18),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 6px 16px -4px rgba(0, 0, 0, 0.22);
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.theme-switch[aria-pressed="true"] .theme-thumb {
  transform: translateX(calc(var(--track-w) - var(--thumb) - var(--pad) * 2));
}
.theme-switch[aria-pressed="false"] .theme-icon.moon { color: var(--text); opacity: 0.85; }
.theme-switch[aria-pressed="true"]  .theme-icon.sun  { color: var(--text); opacity: 0.85; }
.theme-switch:hover {
  background: color-mix(in srgb, var(--glass-tint) 100%, white 5%);
}

@media (min-width: 768px) {
  .footer { padding: 48px 0 32px; }
  .footer .nav-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
}
@media (min-width: 1024px) {
  .footer .container {
    display: grid;
    grid-template-columns: 1.2fr 3fr;
    gap: 64px;
  }
  .footer .nav-cols { grid-template-columns: 1fr 1fr 1fr; }
  .footer-bottom {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}


/* ============== P-tuner (dev) ============== */
.p-tuner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font: 500 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}
.p-tuner-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(190,63,132,.35);
  background: #fff;
  color: var(--pixel-rose);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(20,14,32,.16);
}
.p-tuner.open .p-tuner-handle { display: none; }
.p-tuner-panel {
  display: none;
  width: 240px;
  padding: 12px 14px 14px;
  background: #fff;
  border: 1px solid rgba(20,14,32,.12);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20,14,32,.18);
}
.p-tuner.open .p-tuner-panel { display: block; }
.p-tuner-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.p-tuner-head strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #50455F; }
.p-tuner-close {
  border: 0; background: transparent; font-size: 18px; line-height: 1;
  color: #50455F; cursor: pointer; padding: 0 4px;
}
.p-tuner label {
  display: block;
  margin: 6px 0 2px;
}
.p-tuner label > span {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: #50455F; margin-bottom: 2px;
}
.p-tuner label em { font-style: normal; color: var(--pixel-rose); font-weight: 600; }
.p-tuner input[type="range"] {
  width: 100%;
  accent-color: var(--pixel-rose);
}
.p-tuner-reset {
  margin-top: 10px;
  width: 100%;
  border: 1px solid rgba(20,14,32,.12);
  background: #F7F5FA;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink);
}
.p-tuner-reset:hover { background: #EFEBF5; }