/* ═══════════════════════════════════════════════════════════
   PymeStudio — design system inspired by kaiko.ai
   Navy / teal clinical-AI language, adapted for AR PyMEs
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — from PymeStudio Website.dc.html */
  --bg:          #FFFDF7;
  --bg-2:        #F4F2E8;
  --bg-mint:     #CCE2BD;
  --bg-soft:     #E9E4CE;
  --paper:       #FFFFFF;

  /* Ink */
  --ink:         #111111;
  --ink-2:       #1E3A6B;
  --ink-3:       #3A3A3A;
  --muted:       #9A9A9A;

  /* Brand — design file palette */
  --blue:        #4CB8EA;
  --teal:        #6FB6D8;
  --mint:        #CCE2BD;
  --line:        #EDEBDF;
  --line-2:      #C9C6B8;
  --navy:        #17335E;
  --navy-deep:   #17335E;
  --navy-mid:    #2E5F9A;
  --peach:       #E9E4CE;
  --lavender:    #6FB6D8;

  /* Semantic aliases */
  --accent:      #4CB8EA;
  --accent-2:    #2E5F9A;
  --forest:      #1E3A6B;
  --forest-2:    #17335E;
  --sage:        #CCE2BD;
  --sage-2:      #E9E4CE;

  --shadow:      0 1px 0 rgba(3,5,44,.04), 0 24px 60px -28px rgba(3,5,44,.18);
  --shadow-lg:   0 32px 80px -32px rgba(3,5,44,.28);

  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   28px;

  --font-sans:   "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:"Space Grotesk", "DM Sans", sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, monospace;

  --nav-h:       72px;
  --container:   1200px;
  --ease:        cubic-bezier(.333, 0, 0, 1);
  --ease-out:    cubic-bezier(.4, 0, .2, 1);
}

/* Dark theme — deep navy like kaiko dark panels */
html[data-theme="dark"] {
  --bg:        #03052C;
  --bg-2:      #0C1058;
  --bg-mint:   #193969;
  --bg-soft:   #0C1058;
  --paper:     #0A0D3A;
  --ink:       #FAFAFA;
  --ink-2:     #CCEAE7;
  --ink-3:     #86D6D2;
  --muted:     #8796B0;
  --line:      rgba(196,218,217,.18);
  --line-2:    rgba(196,218,217,.28);
  --accent:    #86D6D2;
  --accent-2:  #387DD5;
  --forest:    #CCEAE7;
  --forest-2:  #86D6D2;
  --paper:     #0C1058;
  --shadow:    0 1px 0 rgba(255,255,255,.04), 0 24px 60px -28px rgba(0,0,0,.55);
}

/* —— Reset —— */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #17335E; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* ═══════════════════════════════════════════
   ATMOSPHERE — stripes + glows (stable version)
   ═══════════════════════════════════════════ */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #142E54 0%,
    #1E4A7A 26%,
    #3A7EAD 52%,
    #7FB4CE 76%,
    #D4CFB8 100%
  );
}
/* Vertical stripe film */
.atmosphere__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.09) 0px,
    rgba(255,255,255,0.09) 1px,
    transparent 1px,
    transparent 12px
  );
  background-size: 240px 100%;
  animation: stripeDrift 16s linear infinite;
}
/* Soft luminous blobs */
.atmosphere__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
  mix-blend-mode: lighten;
  will-change: transform;
}
.atmosphere__glow--1 {
  width: 600px; height: 600px;
  top: -200px; left: -120px;
  background: radial-gradient(circle, rgba(130,210,255,.85), rgba(70,160,220,.35) 45%, transparent 72%);
  animation: driftA 22s ease-in-out infinite;
}
.atmosphere__glow--2 {
  width: 520px; height: 520px;
  bottom: -140px; right: -100px;
  background: radial-gradient(circle, rgba(170,220,245,.75), rgba(90,170,210,.3) 45%, transparent 72%);
  animation: driftB 26s ease-in-out infinite;
}
.atmosphere__glow--3 {
  width: 420px; height: 420px;
  top: 32%; left: 52%;
  background: radial-gradient(circle, rgba(255,250,230,.7), rgba(220,210,180,.25) 45%, transparent 72%);
  animation: driftC 30s ease-in-out infinite;
}
.atmosphere__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 20%, transparent 28%, rgba(10,24,48,.28) 100%),
    linear-gradient(180deg, rgba(10,24,48,.2) 0%, transparent 40%);
  pointer-events: none;
}

@keyframes stripeDrift {
  from { background-position: 0 0; }
  to   { background-position: 240px 0; }
}
@keyframes driftA {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(60px,40px) scale(1.15); }
}
@keyframes driftB {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-50px,-30px) scale(1.1); }
}
@keyframes driftC {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-40px,50px) scale(1.2); }
}
@keyframes heroUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__stripes,
  .atmosphere__glow { animation: none; }
}

/* —— Commerce page atmosphere (distinct + animated) —— */
.atmosphere--commerce .atmosphere__base {
  background: linear-gradient(
    165deg,
    #12082A 0%,
    #1A0F3D 22%,
    #2A1860 45%,
    #17335E 70%,
    #1E4A7A 88%,
    #1A3A50 100%
  );
}
.atmosphere__commerce-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.atmosphere__orb-c {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.atmosphere__orb-c--1 {
  width: min(80vw, 720px);
  height: min(80vw, 720px);
  top: -20%;
  left: -15%;
  background: radial-gradient(circle, rgba(91,78,229,.65) 0%, rgba(91,78,229,0) 70%);
  animation: cOrb1 22s ease-in-out infinite;
}
.atmosphere__orb-c--2 {
  width: min(60vw, 520px);
  height: min(60vw, 520px);
  top: 20%;
  right: -10%;
  background: radial-gradient(circle, rgba(76,184,234,.5) 0%, rgba(76,184,234,0) 70%);
  animation: cOrb2 26s ease-in-out infinite;
}
.atmosphere__orb-c--3 {
  width: min(50vw, 420px);
  height: min(50vw, 420px);
  bottom: 5%;
  left: 35%;
  background: radial-gradient(circle, rgba(180,151,238,.4) 0%, transparent 70%);
  animation: cOrb3 20s ease-in-out infinite;
}
.atmosphere__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 10%, transparent 75%);
  animation: meshDrift 30s linear infinite;
  opacity: .7;
}
.atmosphere__sheen {
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,.05) 48%,
    rgba(91,78,229,.12) 50%,
    rgba(76,184,234,.08) 52%,
    transparent 65%
  );
  animation: sheenSweep 14s ease-in-out infinite;
}
@keyframes cOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .85; }
  50% { transform: translate(8%,5%) scale(1.12); opacity: 1; }
}
@keyframes cOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .75; }
  50% { transform: translate(-6%,-4%) scale(1.08); opacity: .95; }
}
@keyframes cOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .65; }
  50% { transform: translate(-4%,6%) scale(1.1); opacity: .9; }
}
@keyframes meshDrift {
  from { background-position: 0 0; }
  to { background-position: 48px 48px; }
}
@keyframes sheenSweep {
  0%,100% { transform: translateX(-15%) rotate(0deg); opacity: .4; }
  50% { transform: translateX(15%) rotate(1deg); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__orb-c,
  .atmosphere__mesh,
  .atmosphere__sheen { animation: none; }
}

/* —— FacturaFácil atmosphere (fiscal / CAE — not the home stripes) —— */
.atmosphere--factura .atmosphere__base {
  background: linear-gradient(
    168deg,
    #061820 0%,
    #0A2A32 18%,
    #0E3A42 38%,
    #124850 58%,
    #0F3540 78%,
    #0A242C 100%
  );
}
.atmosphere__factura-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Soft aurora orbs — teal / mint / warm gold (fiscal paper) */
.atmosphere__orb-f {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.atmosphere__orb-f--1 {
  width: min(75vw, 680px);
  height: min(75vw, 680px);
  top: -25%;
  right: -12%;
  background: radial-gradient(circle, rgba(76,184,234,.55) 0%, transparent 70%);
  animation: fOrb1 24s ease-in-out infinite;
}
.atmosphere__orb-f--2 {
  width: min(55vw, 480px);
  height: min(55vw, 480px);
  bottom: 10%;
  left: -8%;
  background: radial-gradient(circle, rgba(126,224,168,.35) 0%, transparent 70%);
  animation: fOrb2 28s ease-in-out infinite;
}
.atmosphere__orb-f--3 {
  width: min(40vw, 360px);
  height: min(40vw, 360px);
  top: 40%;
  left: 40%;
  background: radial-gradient(circle, rgba(212,175,120,.22) 0%, transparent 70%);
  animation: fOrb3 20s ease-in-out infinite;
}
/* Diagonal ticket / invoice lines */
.atmosphere__ticket {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -18deg,
      transparent 0,
      transparent 46px,
      rgba(255,255,255,.025) 46px,
      rgba(255,255,255,.025) 47px
    );
  mask-image: radial-gradient(ellipse 90% 70% at 60% 40%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 60% 40%, #000 15%, transparent 72%);
  animation: ticketDrift 36s linear infinite;
  opacity: .9;
}
/* Floating CAE-like code particles */
.atmosphere__cae-codes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(126,224,168,.22);
}
.atmosphere__cae-codes span {
  position: absolute;
  white-space: nowrap;
  animation: caeFloat 18s ease-in-out infinite;
}
.atmosphere__cae-codes span:nth-child(1) { top: 18%; left: 8%; animation-delay: 0s; }
.atmosphere__cae-codes span:nth-child(2) { top: 32%; right: 12%; animation-delay: -4s; opacity: .35; }
.atmosphere__cae-codes span:nth-child(3) { bottom: 28%; left: 18%; animation-delay: -8s; }
.atmosphere__cae-codes span:nth-child(4) { top: 55%; right: 22%; animation-delay: -11s; opacity: .28; }
.atmosphere__cae-codes span:nth-child(5) { bottom: 18%; right: 8%; animation-delay: -6s; }
/* Warm horizontal sheen (paper invoice light) */
.atmosphere__paper-sheen {
  position: absolute;
  inset: -20% -30%;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255,255,255,.04) 48%,
    rgba(76,184,234,.1) 50%,
    rgba(126,224,168,.06) 52%,
    transparent 62%
  );
  animation: sheenSweep 16s ease-in-out infinite;
}
@keyframes fOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .8; }
  50% { transform: translate(-6%,8%) scale(1.1); opacity: 1; }
}
@keyframes fOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .7; }
  50% { transform: translate(8%,-5%) scale(1.08); opacity: .95; }
}
@keyframes fOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .55; }
  50% { transform: translate(-5%,-6%) scale(1.12); opacity: .85; }
}
@keyframes ticketDrift {
  from { background-position: 0 0; }
  to { background-position: 80px 40px; }
}
@keyframes caeFloat {
  0%,100% { transform: translateY(0); opacity: .2; }
  50% { transform: translateY(-12px); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__orb-f,
  .atmosphere__ticket,
  .atmosphere__cae-codes span,
  .atmosphere__paper-sheen { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD BI atmospheres — switch BI_ATM: signal | matrix | pulse
   ═══════════════════════════════════════════════════════════ */
.atmosphere__bi-fx { position: absolute; inset: 0; overflow: hidden; }
.atmosphere__orb-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* A) SIGNAL — deep indigo + cyan (alertas / KPIs) */
.atmosphere--bi-signal .atmosphere__base {
  background: linear-gradient(
    165deg,
    #070B18 0%,
    #0C1630 22%,
    #122048 48%,
    #0E1A38 72%,
    #0A1228 100%
  );
}
.atmosphere--bi-signal .atmosphere__orb-b--1 {
  width: min(75vw, 680px); height: min(75vw, 680px);
  top: -22%; right: -12%;
  background: radial-gradient(circle, rgba(76,184,234,.5) 0%, transparent 70%);
  animation: biOrb1 22s ease-in-out infinite;
}
.atmosphere--bi-signal .atmosphere__orb-b--2 {
  width: min(55vw, 480px); height: min(55vw, 480px);
  bottom: 0; left: -10%;
  background: radial-gradient(circle, rgba(99,102,241,.4) 0%, transparent 70%);
  animation: biOrb2 26s ease-in-out infinite;
}
.atmosphere--bi-signal .atmosphere__orb-b--3 {
  width: min(40vw, 360px); height: min(40vw, 360px);
  top: 45%; left: 40%;
  background: radial-gradient(circle, rgba(251,146,60,.2) 0%, transparent 70%);
  animation: biOrb3 18s ease-in-out infinite;
}
/* Chart grid */
.atmosphere__bi-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(76,184,234,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,184,234,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 35%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 35%, #000 10%, transparent 75%);
  animation: biGridDrift 28s linear infinite;
  opacity: .85;
}
/* Rising KPI bars (ambient) */
.atmosphere__bi-bars {
  position: absolute;
  left: 8%; right: 8%;
  bottom: 12%;
  height: 28%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  opacity: .18;
  pointer-events: none;
}
.atmosphere__bi-bars i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(76,184,234,.9), rgba(76,184,234,.15));
  animation: biBar 3.2s ease-in-out infinite;
  min-height: 12%;
}
.atmosphere__bi-bars i:nth-child(1) { height: 35%; animation-delay: 0s; }
.atmosphere__bi-bars i:nth-child(2) { height: 55%; animation-delay: .2s; }
.atmosphere__bi-bars i:nth-child(3) { height: 42%; animation-delay: .4s; }
.atmosphere__bi-bars i:nth-child(4) { height: 70%; animation-delay: .1s; }
.atmosphere__bi-bars i:nth-child(5) { height: 50%; animation-delay: .35s; }
.atmosphere__bi-bars i:nth-child(6) { height: 85%; animation-delay: .15s; }
.atmosphere__bi-bars i:nth-child(7) { height: 60%; animation-delay: .5s; }
.atmosphere__bi-bars i:nth-child(8) { height: 45%; animation-delay: .25s; }
.atmosphere__bi-bars i:nth-child(9) { height: 75%; animation-delay: .4s; }
.atmosphere__bi-bars i:nth-child(10) { height: 95%; animation-delay: .05s; background: linear-gradient(180deg, rgba(251,146,60,.85), rgba(251,146,60,.15)); }

/* B) MATRIX — near-black + green data (terminal CFO) */
.atmosphere--bi-matrix .atmosphere__base {
  background: linear-gradient(170deg, #040806 0%, #0A1410 40%, #0C1814 70%, #060A08 100%);
}
.atmosphere--bi-matrix .atmosphere__orb-b--1 {
  width: min(70vw, 600px); height: min(70vw, 600px);
  top: -15%; left: -10%;
  background: radial-gradient(circle, rgba(52,211,153,.28) 0%, transparent 70%);
  animation: biOrb1 24s ease-in-out infinite;
}
.atmosphere--bi-matrix .atmosphere__orb-b--2 {
  width: min(50vw, 440px); height: min(50vw, 440px);
  bottom: 5%; right: -8%;
  background: radial-gradient(circle, rgba(16,185,129,.2) 0%, transparent 70%);
  animation: biOrb2 28s ease-in-out infinite;
}
.atmosphere--bi-matrix .atmosphere__orb-b--3 {
  width: min(35vw, 300px); height: min(35vw, 300px);
  top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  animation: biOrb3 20s ease-in-out infinite;
}
.atmosphere--bi-matrix .atmosphere__bi-grid {
  background-image:
    linear-gradient(rgba(52,211,153,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,.06) 1px, transparent 1px);
}
.atmosphere--bi-matrix .atmosphere__bi-bars i {
  background: linear-gradient(180deg, rgba(52,211,153,.85), rgba(52,211,153,.1));
}
.atmosphere--bi-matrix .atmosphere__bi-bars i:nth-child(10) {
  background: linear-gradient(180deg, rgba(110,231,183,.95), rgba(16,185,129,.15));
}
.atmosphere__bi-rain {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(52,211,153,.18);
}
.atmosphere__bi-rain span {
  position: absolute;
  white-space: nowrap;
  animation: biRain 16s linear infinite;
}
.atmosphere__bi-rain span:nth-child(1) { left: 8%; top: -10%; animation-delay: 0s; }
.atmosphere__bi-rain span:nth-child(2) { left: 28%; top: -20%; animation-delay: -3s; }
.atmosphere__bi-rain span:nth-child(3) { left: 52%; top: -5%; animation-delay: -7s; }
.atmosphere__bi-rain span:nth-child(4) { left: 72%; top: -15%; animation-delay: -11s; }
.atmosphere__bi-rain span:nth-child(5) { left: 88%; top: -8%; animation-delay: -5s; }

/* C) PULSE — slate + violet (IA insights) */
.atmosphere--bi-pulse .atmosphere__base {
  background: linear-gradient(
    160deg,
    #0C0A14 0%,
    #16102A 28%,
    #1E1640 55%,
    #141028 78%,
    #0A0812 100%
  );
}
.atmosphere--bi-pulse .atmosphere__orb-b--1 {
  width: min(80vw, 720px); height: min(80vw, 720px);
  top: -25%; left: -15%;
  background: radial-gradient(circle, rgba(139,92,246,.45) 0%, transparent 70%);
  animation: biOrb1 23s ease-in-out infinite;
}
.atmosphere--bi-pulse .atmosphere__orb-b--2 {
  width: min(55vw, 500px); height: min(55vw, 500px);
  bottom: -5%; right: -10%;
  background: radial-gradient(circle, rgba(76,184,234,.35) 0%, transparent 70%);
  animation: biOrb2 27s ease-in-out infinite;
}
.atmosphere--bi-pulse .atmosphere__orb-b--3 {
  width: min(45vw, 380px); height: min(45vw, 380px);
  top: 35%; left: 40%;
  background: radial-gradient(circle, rgba(244,114,182,.18) 0%, transparent 70%);
  animation: biOrb3 19s ease-in-out infinite;
}
.atmosphere--bi-pulse .atmosphere__bi-grid {
  background-image:
    linear-gradient(rgba(167,139,250,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.06) 1px, transparent 1px);
}
.atmosphere--bi-pulse .atmosphere__bi-bars i {
  background: linear-gradient(180deg, rgba(167,139,250,.85), rgba(76,184,234,.15));
}
.atmosphere__bi-pulse-ring {
  position: absolute;
  width: min(45vw, 380px);
  height: min(45vw, 380px);
  top: 42%;
  left: 55%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.atmosphere__bi-pulse-ring span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.15);
  animation: biRing 4.5s ease-out infinite;
}
.atmosphere__bi-pulse-ring span:nth-child(2) { inset: 15%; animation-delay: 1.1s; border-color: rgba(76,184,234,.12); }
.atmosphere__bi-pulse-ring span:nth-child(3) { inset: 30%; animation-delay: 2.2s; border-color: rgba(255,255,255,.08); }

.atmosphere__bi-sheen {
  position: absolute;
  inset: -25% -20%;
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(255,255,255,.03) 48%,
    rgba(76,184,234,.1) 50%,
    rgba(99,102,241,.08) 52%,
    transparent 64%
  );
  animation: sheenSweep 15s ease-in-out infinite;
}
.atmosphere--bi-matrix .atmosphere__bi-sheen {
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(52,211,153,.06) 48%,
    rgba(16,185,129,.1) 50%,
    transparent 64%
  );
}
.atmosphere--bi-pulse .atmosphere__bi-sheen {
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(167,139,250,.08) 48%,
    rgba(76,184,234,.1) 50%,
    transparent 64%
  );
}

@keyframes biOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .8; }
  50% { transform: translate(-6%,7%) scale(1.1); opacity: 1; }
}
@keyframes biOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .7; }
  50% { transform: translate(7%,-5%) scale(1.08); opacity: .95; }
}
@keyframes biOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .55; }
  50% { transform: translate(-4%,-6%) scale(1.12); opacity: .85; }
}
@keyframes biGridDrift {
  from { background-position: 0 0; }
  to { background-position: 56px 56px; }
}
@keyframes biBar {
  0%,100% { transform: scaleY(1); opacity: .7; }
  50% { transform: scaleY(1.12); opacity: 1; }
}
@keyframes biRain {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .35; }
  90% { opacity: .2; }
  100% { transform: translateY(110vh); opacity: 0; }
}
@keyframes biRing {
  0% { transform: scale(.8); opacity: .45; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__orb-b,
  .atmosphere__bi-grid,
  .atmosphere__bi-bars i,
  .atmosphere__bi-rain span,
  .atmosphere__bi-pulse-ring span,
  .atmosphere__bi-sheen { animation: none; }
}

/* —— Agro atmosphere (campo / cosecha) —— */
.atmosphere--agro .atmosphere__base {
  background: linear-gradient(
    168deg,
    #0A140C 0%,
    #142418 20%,
    #1E3A22 42%,
    #2A4A28 62%,
    #1A3020 82%,
    #0E1A12 100%
  );
}
.atmosphere__agro-fx { position: absolute; inset: 0; overflow: hidden; }
.atmosphere__orb-a {
  position: absolute;
  border-radius: 50%;
  filter: blur(54px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.atmosphere__orb-a--1 {
  width: min(80vw, 700px); height: min(80vw, 700px);
  top: -22%; right: -12%;
  background: radial-gradient(circle, rgba(155,179,105,.4) 0%, transparent 70%);
  animation: agroOrb1 24s ease-in-out infinite;
}
.atmosphere__orb-a--2 {
  width: min(55vw, 480px); height: min(55vw, 480px);
  bottom: 5%; left: -10%;
  background: radial-gradient(circle, rgba(212,175,80,.28) 0%, transparent 70%);
  animation: agroOrb2 28s ease-in-out infinite;
}
.atmosphere__orb-a--3 {
  width: min(45vw, 380px); height: min(45vw, 380px);
  top: 40%; left: 35%;
  background: radial-gradient(circle, rgba(100,160,120,.25) 0%, transparent 70%);
  animation: agroOrb3 20s ease-in-out infinite;
}
/* Soft horizon bands */
.atmosphere__agro-field {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(30,58,34,.35) 40%, rgba(20,40,24,.55) 100%);
  pointer-events: none;
}
.atmosphere__agro-rows {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -8deg,
    transparent 0 28px,
    rgba(155,179,105,.04) 28px 29px
  );
  mask-image: radial-gradient(ellipse 90% 60% at 50% 55%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 55%, #000 20%, transparent 75%);
  animation: agroRows 40s linear infinite;
  opacity: .9;
  pointer-events: none;
}
.atmosphere__agro-sheen {
  position: absolute;
  inset: -25% -20%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.04) 48%,
    rgba(155,179,105,.12) 50%,
    rgba(212,175,80,.08) 52%,
    transparent 62%
  );
  animation: sheenSweep 16s ease-in-out infinite;
}
@keyframes agroOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .8; }
  50% { transform: translate(-6%,6%) scale(1.1); opacity: 1; }
}
@keyframes agroOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .7; }
  50% { transform: translate(7%,-4%) scale(1.08); opacity: .95; }
}
@keyframes agroOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .55; }
  50% { transform: translate(-4%,-5%) scale(1.12); opacity: .85; }
}
@keyframes agroRows {
  from { background-position: 0 0; }
  to { background-position: 80px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__orb-a,
  .atmosphere__agro-rows,
  .atmosphere__agro-sheen { animation: none; }
}
/* Agro hero stage tint */
.hero-stage--agro {
  background: linear-gradient(165deg, #1A2E1C 0%, #142418 50%, #1E3520 100%);
  border-color: rgba(155,179,105,.2);
}
.hero-stage--agro .hero-stage__label { color: #9BB369; }
.hero-stage--agro .hero-stage__title em {
  background: linear-gradient(91deg, #9BB369, #D4AF50);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.agro-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  height: 100%;
  min-height: 260px;
  color: #F4EFE6;
}
.agro-panel__card {
  background: rgba(244,239,230,.06);
  border: 1px solid rgba(155,179,105,.16);
  border-radius: 12px;
  padding: 12px 14px;
}
.agro-panel__card--chart { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.agro-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.agro-panel__muted {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  font-family: var(--font-display);
}
.agro-panel__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 6px 0 10px;
  font-family: var(--font-display);
}
.agro-panel__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.agro-panel__num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-top: 4px;
}
.agro-panel__num--sm { font-size: 17px; }
.agro-panel__num--ok { color: #9BB369; }
.agro-panel__herd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.agro-panel__svg {
  width: 100%;
  height: 48px;
  display: block;
  margin-top: 4px;
}

/* Business skills section (Dashboard BI) */
.skills-section { padding-top: 0; }
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.skill-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.skill-card:hover {
  border-color: rgba(76,184,234,.35);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -20px rgba(23,51,94,.28);
}
.skill-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #EEF6FB 0%, #F0EEFF 100%);
  color: #17335E;
  border: 1px solid rgba(76,184,234,.16);
}
.skill-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4CB8EA;
  margin-bottom: 6px;
}
.skill-card__title {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #111;
  margin: 0 0 8px;
  line-height: 1.25;
}
.skill-card__title em {
  font-style: normal;
  color: inherit;
  background: none;
  -webkit-text-fill-color: inherit;
}
.skill-card__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5A5A5A;
}
.skills-stack {
  padding: 24px 24px 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, #F7F9FC, #F3F0FF);
  border: 1px solid rgba(76,184,234,.14);
}
.skills-stack__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 16px;
}
.skills-stack__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.skills-stack__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 13px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.skills-stack__card:hover {
  border-color: rgba(76,184,234,.3);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(23,51,94,.25);
}
.skills-stack__logo {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #EEF6FB 0%, #E8F4F8 100%);
  border: 1px solid rgba(76,184,234,.16);
  color: #17335E;
}
.skills-stack__logo svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Brand logos (official-style marks) */
.brand-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}
.brand-logo svg,
.brand-logo img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}
.brand-logo--drive {
  background: #fff;
  border-color: rgba(66,133,244,.2);
}
.brand-logo--drive svg { width: 28px; height: 28px; }
.brand-logo--mp {
  background: #fff;
  border-color: rgba(0,158,227,.25);
}
.brand-logo--mp img {
  width: 28px;
  height: 28px;
  /* Simple Icons monochrome → Mercado Pago blue */
  filter: invert(48%) sepia(98%) saturate(1200%) hue-rotate(166deg) brightness(95%) contrast(101%);
}
.brand-logo--resend {
  background: #0A0A0A;
  border-color: #0A0A0A;
}
.brand-logo--resend img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}
.brand-logo--arca {
  background: #fff;
  border-color: rgba(11,61,92,.2);
  padding: 0;
}
.brand-logo--arca svg {
  width: 48px;
  height: 48px;
}
.brand-logo--senasa {
  background: #fff;
  border-color: rgba(27,94,32,.2);
  padding: 0;
}
.brand-logo--senasa svg {
  width: 48px;
  height: 48px;
}
.brand-logo--api {
  background: #fff;
  border-color: rgba(23,51,94,.15);
  padding: 0;
}
.brand-logo--api svg {
  width: 48px;
  height: 48px;
}
.brand-logo--generic {
  background: linear-gradient(145deg, #EEF6FB, #E8F4F8);
  color: #17335E;
}
.skills-stack__body { min-width: 0; }
.skills-stack__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #111;
  line-height: 1.25;
}
.skills-stack__role {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #6B7280;
}
@media (max-width: 900px) {
  .skills-stack__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .skills-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .skills-stack__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   RETAIL hero atmospheres — 3 animated alternatives
   Switch via RETAIL_ATM in product-page.jsx: neon | warm | night
   ═══════════════════════════════════════════════════════════ */

/* A) NEON POS — charcoal + coral (caja / ticket) */
.atmosphere--retail-neon .atmosphere__base {
  background: linear-gradient(
    160deg,
    #0C0A09 0%,
    #1A1210 22%,
    #2A1814 48%,
    #1C1218 72%,
    #0E0C10 100%
  );
}
.atmosphere__retail-fx { position: absolute; inset: 0; overflow: hidden; }
.atmosphere__orb-r {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.atmosphere--retail-neon .atmosphere__orb-r--1 {
  width: min(70vw, 640px); height: min(70vw, 640px);
  top: -18%; right: -10%;
  background: radial-gradient(circle, rgba(227,116,73,.55) 0%, transparent 70%);
  animation: rOrb1 22s ease-in-out infinite;
}
.atmosphere--retail-neon .atmosphere__orb-r--2 {
  width: min(50vw, 440px); height: min(50vw, 440px);
  bottom: 5%; left: -8%;
  background: radial-gradient(circle, rgba(255,180,120,.28) 0%, transparent 70%);
  animation: rOrb2 26s ease-in-out infinite;
}
.atmosphere--retail-neon .atmosphere__orb-r--3 {
  width: min(40vw, 360px); height: min(40vw, 360px);
  top: 45%; left: 40%;
  background: radial-gradient(circle, rgba(120,90,255,.18) 0%, transparent 70%);
  animation: rOrb3 20s ease-in-out infinite;
}
/* Soft scanline like POS display */
.atmosphere__retail-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(255,255,255,.012) 3px 4px
  );
  animation: retailScan 8s linear infinite;
  opacity: .7;
  pointer-events: none;
}
/* Floating payment chips */
.atmosphere__retail-chips {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.atmosphere__retail-chips span {
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.28);
  animation: chipFloat 14s ease-in-out infinite;
}
.atmosphere--retail-neon .atmosphere__retail-chips span:nth-child(1) { top: 22%; left: 10%; color: rgba(227,116,73,.45); border-color: rgba(227,116,73,.25); }
.atmosphere--retail-neon .atmosphere__retail-chips span:nth-child(2) { top: 38%; right: 14%; animation-delay: -3s; }
.atmosphere--retail-neon .atmosphere__retail-chips span:nth-child(3) { bottom: 30%; left: 18%; animation-delay: -6s; color: rgba(255,200,150,.4); }
.atmosphere--retail-neon .atmosphere__retail-chips span:nth-child(4) { bottom: 20%; right: 12%; animation-delay: -9s; }
.atmosphere--retail-neon .atmosphere__retail-chips span:nth-child(5) { top: 58%; left: 42%; animation-delay: -5s; }

/* B) WARM SHOP — espresso + amber (boutique / local) */
.atmosphere--retail-warm .atmosphere__base {
  background: linear-gradient(
    155deg,
    #1A1008 0%,
    #2C1A0C 25%,
    #3D2410 50%,
    #2A160E 75%,
    #140E0A 100%
  );
}
.atmosphere--retail-warm .atmosphere__orb-r--1 {
  width: min(80vw, 700px); height: min(80vw, 700px);
  top: -20%; left: -15%;
  background: radial-gradient(circle, rgba(232,168,72,.45) 0%, transparent 70%);
  animation: rOrb1 24s ease-in-out infinite;
}
.atmosphere--retail-warm .atmosphere__orb-r--2 {
  width: min(55vw, 500px); height: min(55vw, 500px);
  bottom: -5%; right: -10%;
  background: radial-gradient(circle, rgba(200,90,50,.35) 0%, transparent 70%);
  animation: rOrb2 28s ease-in-out infinite;
}
.atmosphere--retail-warm .atmosphere__orb-r--3 {
  width: min(45vw, 400px); height: min(45vw, 400px);
  top: 35%; right: 25%;
  background: radial-gradient(circle, rgba(255,230,180,.2) 0%, transparent 70%);
  animation: rOrb3 22s ease-in-out infinite;
}
/* Soft bokeh lights */
.atmosphere__retail-bokeh {
  position: absolute; inset: 0;
  pointer-events: none;
}
.atmosphere__retail-bokeh i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,160,.55), transparent 70%);
  filter: blur(2px);
  animation: bokehPulse 6s ease-in-out infinite;
}
.atmosphere__retail-bokeh i:nth-child(1) { width: 8px; height: 8px; top: 20%; left: 15%; animation-delay: 0s; }
.atmosphere__retail-bokeh i:nth-child(2) { width: 12px; height: 12px; top: 35%; right: 20%; animation-delay: -1.5s; }
.atmosphere__retail-bokeh i:nth-child(3) { width: 6px; height: 6px; bottom: 30%; left: 30%; animation-delay: -3s; }
.atmosphere__retail-bokeh i:nth-child(4) { width: 10px; height: 10px; top: 55%; left: 60%; animation-delay: -2s; }
.atmosphere__retail-bokeh i:nth-child(5) { width: 7px; height: 7px; bottom: 22%; right: 18%; animation-delay: -4s; }
.atmosphere__retail-bokeh i:nth-child(6) { width: 9px; height: 9px; top: 28%; left: 48%; animation-delay: -2.5s; }
.atmosphere--retail-warm .atmosphere__retail-chips span {
  color: rgba(255,220,160,.35);
  border-color: rgba(232,168,72,.2);
  background: rgba(232,168,72,.06);
}

/* C) NIGHT COUNTER — near-black + dual cyan/orange (MODO / digital pay) */
.atmosphere--retail-night .atmosphere__base {
  background: linear-gradient(
    170deg,
    #05060A 0%,
    #0A0E18 28%,
    #0E1424 55%,
    #12101A 78%,
    #08060C 100%
  );
}
.atmosphere--retail-night .atmosphere__orb-r--1 {
  width: min(65vw, 600px); height: min(65vw, 600px);
  top: -15%; left: -10%;
  background: radial-gradient(circle, rgba(76,184,234,.4) 0%, transparent 70%);
  animation: rOrb1 20s ease-in-out infinite;
}
.atmosphere--retail-night .atmosphere__orb-r--2 {
  width: min(55vw, 480px); height: min(55vw, 480px);
  bottom: 0; right: -8%;
  background: radial-gradient(circle, rgba(227,116,73,.4) 0%, transparent 70%);
  animation: rOrb2 24s ease-in-out infinite;
}
.atmosphere--retail-night .atmosphere__orb-r--3 {
  width: min(40vw, 340px); height: min(40vw, 340px);
  top: 40%; left: 45%;
  background: radial-gradient(circle, rgba(180,151,238,.2) 0%, transparent 70%);
  animation: rOrb3 18s ease-in-out infinite;
}
/* Concentric pay-pulse rings */
.atmosphere__retail-rings {
  position: absolute;
  width: min(50vw, 420px);
  height: min(50vw, 420px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.atmosphere__retail-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(76,184,234,.12);
  animation: ringPulse 5s ease-out infinite;
}
.atmosphere__retail-rings span:nth-child(2) {
  inset: 12%;
  border-color: rgba(227,116,73,.12);
  animation-delay: 1.2s;
}
.atmosphere__retail-rings span:nth-child(3) {
  inset: 24%;
  border-color: rgba(255,255,255,.08);
  animation-delay: 2.4s;
}
.atmosphere--retail-night .atmosphere__retail-chips span:nth-child(odd) {
  color: rgba(76,184,234,.4);
  border-color: rgba(76,184,234,.2);
}
.atmosphere--retail-night .atmosphere__retail-chips span:nth-child(even) {
  color: rgba(227,116,73,.4);
  border-color: rgba(227,116,73,.2);
}

/* D) GRAPHITE LED — cool steel + mint LED (caja moderna / barcode) */
.atmosphere--retail-led .atmosphere__base {
  background: linear-gradient(
    158deg,
    #0A0C0E 0%,
    #12161A 24%,
    #1A2228 48%,
    #141A1E 72%,
    #0B0E10 100%
  );
}
.atmosphere--retail-led .atmosphere__orb-r--1 {
  width: min(70vw, 620px); height: min(70vw, 620px);
  top: -22%; left: 30%;
  background: radial-gradient(circle, rgba(100,220,200,.32) 0%, transparent 70%);
  animation: rOrb1 23s ease-in-out infinite;
}
.atmosphere--retail-led .atmosphere__orb-r--2 {
  width: min(55vw, 480px); height: min(55vw, 480px);
  bottom: -8%; left: -10%;
  background: radial-gradient(circle, rgba(90,140,180,.28) 0%, transparent 70%);
  animation: rOrb2 27s ease-in-out infinite;
}
.atmosphere--retail-led .atmosphere__orb-r--3 {
  width: min(40vw, 360px); height: min(40vw, 360px);
  top: 40%; right: -5%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  animation: rOrb3 19s ease-in-out infinite;
}
/* Horizontal barcode beams */
.atmosphere__retail-barcode {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
}
.atmosphere__retail-barcode::before,
.atmosphere__retail-barcode::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 42%;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 3px,
    rgba(100,220,200,.07) 3px,
    rgba(100,220,200,.07) 5px,
    transparent 5px,
    transparent 9px,
    rgba(255,255,255,.04) 9px,
    rgba(255,255,255,.04) 10px,
    transparent 10px,
    transparent 16px
  );
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  animation: barcodeSlide 22s linear infinite;
}
.atmosphere__retail-barcode::before { top: 12%; animation-duration: 26s; }
.atmosphere__retail-barcode::after {
  bottom: 8%;
  opacity: .7;
  animation-direction: reverse;
  animation-duration: 30s;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 2px,
    rgba(120,180,220,.06) 2px,
    rgba(120,180,220,.06) 4px,
    transparent 4px,
    transparent 11px
  );
}
.atmosphere--retail-led .atmosphere__retail-chips span {
  color: rgba(140,230,210,.4);
  border-color: rgba(100,220,200,.18);
  background: rgba(100,220,200,.05);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
}
.atmosphere--retail-led .atmosphere__retail-sheen {
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255,255,255,.03) 48%,
    rgba(100,220,200,.1) 50%,
    rgba(120,180,220,.06) 52%,
    transparent 64%
  );
}

/* Shared retail animations */
.atmosphere__retail-sheen {
  position: absolute;
  inset: -25% -20%;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255,255,255,.03) 48%,
    rgba(227,116,73,.1) 50%,
    rgba(255,200,150,.06) 52%,
    transparent 64%
  );
  animation: sheenSweep 15s ease-in-out infinite;
}
.atmosphere--retail-night .atmosphere__retail-sheen {
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(76,184,234,.06) 48%,
    rgba(227,116,73,.1) 50%,
    rgba(76,184,234,.05) 52%,
    transparent 64%
  );
}
@keyframes rOrb1 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .85; }
  50% { transform: translate(-7%,6%) scale(1.1); opacity: 1; }
}
@keyframes rOrb2 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .75; }
  50% { transform: translate(6%,-5%) scale(1.08); opacity: .95; }
}
@keyframes rOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .6; }
  50% { transform: translate(-4%,-7%) scale(1.12); opacity: .9; }
}
@keyframes retailScan {
  from { background-position: 0 0; }
  to { background-position: 0 80px; }
}
@keyframes chipFloat {
  0%,100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-10px); opacity: .9; }
}
@keyframes bokehPulse {
  0%,100% { opacity: .35; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.35); }
}
@keyframes ringPulse {
  0% { transform: scale(.85); opacity: .5; }
  70% { opacity: .15; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes barcodeSlide {
  from { background-position: 0 0; }
  to { background-position: 120px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__orb-r,
  .atmosphere__retail-scan,
  .atmosphere__retail-chips span,
  .atmosphere__retail-bokeh i,
  .atmosphere__retail-rings span,
  .atmosphere__retail-sheen,
  .atmosphere__retail-barcode::before,
  .atmosphere__retail-barcode::after { animation: none; }
}

/* —— Product hero: real screenshot inside classic square —— */
.hero__visual--shot {
  background: #0E0A1A;
  max-height: 560px;
}
.hero__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
  transform: scale(1.02);
  animation: shotFloat 14s ease-in-out infinite;
}
@keyframes shotFloat {
  0%, 100% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(1.06) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual-img { animation: none; }
}

/* —— Commerce hero: same shell as pillars__stage + nested Basket dash —— */
.hero-stage {
  position: relative;
  border-radius: var(--radius-xl, 22px);
  overflow: hidden;
  background: linear-gradient(165deg, #142E54 0%, #0F2748 55%, #163A66 100%);
  border: 1px solid rgba(76,184,234,.14);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(0,0,0,.45));
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  max-height: 560px;
  aspect-ratio: 4/5;
}
.hero-stage::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76,184,234,.18), transparent 70%);
  pointer-events: none;
}
.hero-stage__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4CB8EA;
  margin-bottom: 10px;
}
.hero-stage__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  letter-spacing: -.02em;
  font-weight: 500;
  margin: 0 0 8px;
  color: #FAFAFA;
}
.hero-stage__desc {
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  color: rgba(250,250,250,.7);
  max-width: 36ch;
  line-height: 1.5;
  margin: 0 0 16px;
}
.hero-stage__frame {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.5);
  flex: 1;
  min-height: 0;
}
.hero-stage__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.hero-stage__frame--mock {
  flex: 1;
  min-height: 200px;
  padding: 0;
  background: rgba(0,0,0,.18);
}
.hero-stage__mock {
  height: 100%;
  min-height: 200px;
  padding: 14px;
  overflow: auto;
  color: #F4EFE6;
  font-size: 13px;
}
.hero-stage__mock--dark {
  background: linear-gradient(160deg, #1A1A1A 0%, #0E0F0C 100%);
}
.hero-stage__mock--agro {
  background: linear-gradient(160deg, #3F5142 0%, #1F2820 100%);
}
.hero-stage--dark {
  background: linear-gradient(165deg, #1A1A1A 0%, #0E0F0C 55%, #1A1A1A 100%);
}
/* Nested stage-mock inside product hero stage */
.hero-stage__inner-mock {
  margin: 0;
  height: 100%;
  min-height: 240px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.hero-stage__frame--mock {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-stage__frame--mock .stage-mock__body {
  flex: 1;
}
/* Product hero: give title room (Factura / long lines) */
.hero--product .hero__title {
  max-width: 16ch;
}
.hero--product .hero-stage {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

/* —— Retail counter hero: real counter photo + tablet POS —— */
.counter-hero {
  position: relative;
  border-radius: var(--radius-xl, 22px);
  overflow: hidden;
  min-height: 440px;
  max-height: 560px;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  border: 1px solid rgba(100,220,200,.14);
  box-shadow:
    0 28px 60px -24px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  background: #0A0C0E;
}
.counter-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.counter-hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transform: scale(1.04);
  animation: counterKen 18s ease-in-out infinite alternate;
}
.counter-hero__photo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,12,.35) 0%, rgba(8,10,12,.12) 40%, rgba(8,10,12,.48) 100%),
    radial-gradient(ellipse 80% 50% at 50% 20%, transparent 25%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
}
@keyframes counterKen {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.1) translate(-1.5%, -1%); }
}
.counter-hero__stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 14px;
}
.counter-hero__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(140,230,210,.8);
  margin-bottom: 8px;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.counter-hero__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #FAFAFA;
  margin: 0 0 6px;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.counter-hero__title em {
  font-style: normal;
  background: linear-gradient(91deg, #64DCC8, #4CB8EA);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.counter-hero__desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(250,250,250,.75);
  max-width: 34ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.counter-hero__device {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.45));
}
.counter-hero__bezel {
  width: 100%;
  max-width: 340px;
  background: rgba(18, 20, 22, .42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 12px 28px -8px rgba(0,0,0,.45);
}
.counter-hero__notch {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  margin: 0 auto 8px;
}
.counter-hero__stand {
  width: 72px;
  height: 10px;
  margin-top: 6px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #2A2E32, #1A1C1E);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* POS screen UI — more transparent so counter photo reads through */
.pos-screen {
  background: rgba(14, 15, 12, .38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px;
  color: #F4EFE6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,.06);
}
.pos-screen__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
  font-family: var(--font-display);
}
.pos-screen__ticket {
  background: rgba(244,239,230,.05);
  border: 1px solid rgba(244,239,230,.1);
  border-radius: 12px;
  padding: 12px;
}
.pos-screen__ticket-h {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 10px;
}
.pos-screen__line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
  gap: 8px;
}
.pos-screen__line em {
  font-style: normal;
  opacity: .55;
  margin-right: 4px;
}
.pos-screen__line span:last-child {
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.pos-screen__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(244,239,230,.1);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .9;
}
.pos-screen__total strong {
  font-size: 20px;
  letter-spacing: -.02em;
  font-weight: 500;
  text-transform: none;
  opacity: 1;
  font-family: var(--font-display);
}
.pos-screen__pays {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pos-screen__pay {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(244,239,230,.06);
  border: 1px solid rgba(244,239,230,.12);
  font-size: 11.5px;
}
.pos-screen__pay.is-active {
  background: #E37449;
  border-color: #E37449;
  color: #1A1A1A;
}
.pos-screen__pay-l { font-weight: 500; }
.pos-screen__pay-s {
  font-size: 10px;
  opacity: .75;
  margin-top: 2px;
}
.pos-screen__client {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(155,179,105,.1);
  border: 1px solid rgba(155,179,105,.28);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .counter-hero__photo-img { animation: none; }
}

/* Page shell */
.page {
  position: relative;
  z-index: 1;
  padding-bottom: 20px;
}

/* Content box — Kaiko-like: sheet with side gutters of atmosphere */
.content-box {
  position: relative;
  z-index: 2;
  margin: 0 14px 18px;
  background: var(--bg);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(250,250,250,.08),
    0 32px 80px -24px rgba(0,0,0,.45);
}
@media (min-width: 1100px) {
  .content-box { margin: 0 22px 28px; border-radius: 32px; }
}
@media (max-width: 720px) {
  .content-box { margin: 0 10px 14px; border-radius: 20px; }
}

/* —— Typography —— */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* No colored dots on section labels (looks template/AI) */
.eyebrow::before,
.eyebrow::after {
  content: none !important;
  display: none !important;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 16px 0 0;
  text-wrap: balance;
  color: var(--ink);
}
.section-title em {
  font-style: normal;
  background: linear-gradient(91deg, #387DD5, #86D6D2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lede em {
  font-style: normal;
  background: linear-gradient(91deg, #387DD5, #86D6D2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lede {
  font-size: 17.5px;
  color: var(--ink-3);
  max-width: 52ch;
  line-height: 1.55;
  margin: 20px 0 0;
}

/* ═══════════════════════════════════════════
   BUTTONS — Kaiko pattern
   Pill + circular arrow icon that morphs L→R on hover
   Space Grotesk · uppercase · wide tracking
   ═══════════════════════════════════════════ */

/* Legacy simple buttons (still used in denser UI) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition:
    transform .25s var(--ease),
    background .45s var(--ease),
    color .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .25s var(--ease);
  white-space: nowrap;
  position: relative;
}
.btn:active { transform: scale(.94); }

.btn--primary {
  background: #17335E;
  color: #fff;
}
.btn--primary:hover {
  background: #2E5F9A;
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: #EEF3F0;
  border-color: #C4DAD9;
  color: #193969;
}

.btn--accent {
  background: #17335E;
  color: #fff;
}
.btn--accent:hover {
  background: #2E5F9A;
  color: #fff;
}

.btn--mint {
  background: #CCEAE7;
  color: #193969;
  border-color: transparent;
}
.btn--mint:hover {
  background: #86D6D2;
  color: #03052C;
}

/* ═══════════════════════════════════════════
   BUTTONS — Kaiko model
   [●→] LABEL  → hover →  LABEL [●→]
   Space Grotesk · uppercase · wide tracking
   duration ~500ms color transition
   ═══════════════════════════════════════════ */
.btnk {
  --btnk-bg: #17335E;          /* navy body */
  --btnk-fg: #FFFFFF;
  --btnk-dot-bg: #FFFFFF;      /* white circle */
  --btnk-dot-fg: #17335E;      /* arrow color */
  --btnk-hover-bg: #4CB8EA;    /* cyan fill on hover (like kaiko light-blue) */
  --btnk-hover-fg: #0C2A3F;

  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px 0 6px;
  border-radius: 999px;
  background: var(--btnk-bg);
  color: var(--btnk-fg);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: background .5s ease, color .5s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btnk:active { transform: scale(.92); }

/* Idle: circle left + label */
.btnk__idle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: opacity .4s ease, transform .5s cubic-bezier(.333,0,0,1);
}
/* Hover fly layer: label left + circle right */
.btnk__fly {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  color: var(--btnk-hover-fg);
}
.btnk__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--btnk-dot-bg);
  color: var(--btnk-dot-fg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .5s ease, color .5s ease, transform .5s cubic-bezier(.333,0,0,1);
}
.btnk__dot svg { width: 14px; height: 14px; display: block; }
.btnk__txt {
  letter-spacing: .1em;
  padding-right: 4px;
}
.btnk__fly .btnk__txt {
  transform: translateX(8px);
  transition: transform .5s cubic-bezier(.333,0,0,1);
  padding-right: 0;
}
.btnk__fly .btnk__dot {
  transform: scale(0) translateX(-8px);
  opacity: 0;
  transition:
    transform .5s cubic-bezier(.333,0,0,1),
    opacity .35s ease,
    background .5s ease,
    color .5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .btnk:hover {
    background: var(--btnk-hover-bg);
    color: var(--btnk-hover-fg);
  }
  .btnk:hover .btnk__idle {
    opacity: 0;
    transform: translateX(10px);
  }
  .btnk:hover .btnk__fly {
    opacity: 1;
  }
  .btnk:hover .btnk__fly .btnk__txt {
    transform: translateX(0);
  }
  .btnk:hover .btnk__fly .btnk__dot {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
}

/* Touch / phone: never show the hover morph (idle + fly stacked = double CTA) */
@media (hover: none), (pointer: coarse) {
  .btnk__fly { display: none !important; }
  .btnk:active { transform: none; }
}
@media (max-width: 980px) {
  .btnk__fly { display: none !important; }
  .btnk:active { transform: none; }
}

/* Frost on dark hero (nav CTA) */
.btnk--frost {
  --btnk-bg: rgba(255,255,255,.14);
  --btnk-fg: #FFFFFF;
  --btnk-dot-bg: #FFFFFF;
  --btnk-dot-fg: #17335E;
  --btnk-hover-bg: rgba(255,255,255,.28);
  --btnk-hover-fg: #FFFFFF;
}
.btnk--frost .btnk__fly .btnk__dot {
  background: #FFFFFF;
  color: #17335E;
}

/* Ghost on dark hero */
.btnk--ghost {
  --btnk-bg: transparent;
  --btnk-fg: #FFFFFF;
  --btnk-dot-bg: rgba(255,255,255,.16);
  --btnk-dot-fg: #FFFFFF;
  --btnk-hover-bg: rgba(255,255,255,.16);
  --btnk-hover-fg: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.btnk--ghost:hover {
  box-shadow: inset 0 0 0 1.5px transparent;
}
.btnk--ghost .btnk__fly .btnk__dot {
  background: #FFFFFF;
  color: #17335E;
}

/* Ghost on light surfaces */
.btnk--ghost-light {
  --btnk-bg: transparent;
  --btnk-fg: #17335E;
  --btnk-dot-bg: #F4F2E8;
  --btnk-dot-fg: #17335E;
  --btnk-hover-bg: #F4F2E8;
  --btnk-hover-fg: #17335E;
  box-shadow: inset 0 0 0 1.5px #EDEBDF;
}
.btnk--ghost-light:hover {
  box-shadow: inset 0 0 0 1.5px #EDEBDF;
}

/* Light solid (on dark dashboard panels) */
.btnk--light {
  --btnk-bg: #FFFFFF;
  --btnk-fg: #17335E;
  --btnk-dot-bg: #17335E;
  --btnk-dot-fg: #FFFFFF;
  --btnk-hover-bg: #4CB8EA;
  --btnk-hover-fg: #0C2A3F;
}

/* Compact nav size */
.btnk--sm {
  height: 40px;
  padding: 0 14px 0 4px;
  font-size: 11.5px;
  letter-spacing: .08em;
}
.btnk--sm .btnk__dot {
  width: 30px;
  height: 30px;
}
.btnk--sm .btnk__dot svg { width: 13px; height: 13px; }
.btnk--sm .btnk__idle { gap: 10px; }
.btnk--sm .btnk__fly { padding: 0 4px 0 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 13px;
  font-family: var(--font-display);
  border: 1px solid var(--line);
}

/* —— Nav —— */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
  border-bottom: 1px solid transparent;
  color: #FAFAFA;
  /* allow product dropdown to paint outside the nav bar */
  overflow: visible;
}
/* Over dark atmosphere: light nav until scrolled into content-box */
.nav:not(.scrolled) .nav__logo { color: #FAFAFA; }
.nav:not(.scrolled) .nav__links { color: rgba(250,250,250,.78); }
.nav:not(.scrolled) .nav__links > a:hover,
.nav:not(.scrolled) .nav__item > a:hover { color: #FAFAFA; }
.nav:not(.scrolled) .nav__logo-mark {
  color: #86D6D2;
  background: rgba(250,250,250,.1);
}
.nav:not(.scrolled) .nav__menu-btn {
  border-color: rgba(250,250,250,.28);
  color: #FAFAFA;
}
/* "Ingresar" — was invisible on dark hero (dark text on dark bg) */
.nav__login {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, opacity .25s ease;
  white-space: nowrap;
}
.nav:not(.scrolled) .nav__login {
  color: rgba(255,255,255,.92);
}
.nav:not(.scrolled) .nav__login:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.nav.scrolled .nav__login {
  color: #1E3A6B;
}
.nav.scrolled .nav__login:hover {
  background: #F4F2E8;
  color: #17335E;
}

.nav:not(.scrolled) .nav__logo-mark {
  background: transparent;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(23,51,94,.06);
  color: var(--ink);
}
.nav.scrolled .nav__links { color: #3A3A3A; }
/* Frost → solid navy when scrolled */
.nav.scrolled .btnk--frost {
  --btnk-bg: #17335E;
  --btnk-fg: #fff;
  --btnk-dot-bg: #FFFFFF;
  --btnk-dot-fg: #17335E;
  --btnk-hover-bg: #4CB8EA;
  --btnk-hover-fg: #0C2A3F;
}

.nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: visible;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.nav__logo-mark {
  width: 30px; height: 30px;
  display: inline-grid;
  place-items: center;
  color: inherit;
  background: transparent;
  transition: color .25s;
}
.nav__logo-word {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.nav__logo-word .w-light { font-weight: 400; }
.nav__logo-word .w-bold  { font-weight: 700; }
.nav__links {
  display: flex;
  gap: 4px 28px;
  font-size: 14.5px;
  color: var(--ink-3);
  font-weight: 500;
  align-items: center;
  transition: color .25s var(--ease);
  overflow: visible;
}
.nav__links > a,
.nav__item > a {
  padding: 8px 0;
  transition: color .2s var(--ease);
  position: relative;
}
.nav__links > a:hover,
.nav__item > a:hover { color: var(--blue); }
.nav__item {
  position: relative;
  /* extend hit area below the label so cursor can reach the panel */
  padding-bottom: 14px;
  margin-bottom: -14px;
}
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 220;
}
/* invisible bridge so hover is not lost between label and panel */
.nav__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius);
  transition: background .15s var(--ease);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.nav__dropdown-item:hover { background: var(--bg-2); }
.nav__dropdown-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-mint);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nav__dropdown-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.nav__dropdown-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.nav__cta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav__cta .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 13.5px;
}
.nav__cta .btn--ghost {
  border-color: transparent;
  background: transparent;
}
.nav__cta .btn--ghost:hover {
  background: var(--bg-2);
  border-color: transparent;
}
.nav__menu-btn {
  display: none;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
@media (max-width: 980px) {
  .nav { overflow: visible; }
  .nav__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
  }
  .nav__logo {
    grid-column: 1;
    min-width: 0;
  }
  .nav__links,
  .nav__cta { display: none !important; }
  .nav__menu-btn {
    grid-column: 2;
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    margin: 0;
    justify-self: end;
    background: rgba(255,255,255,.12);
  }
  .nav.scrolled .nav__menu-btn {
    background: transparent;
  }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateY(-100%);
  transition: transform .4s var(--ease);
  pointer-events: none;
}
.drawer.open {
  transform: translateY(0);
  pointer-events: auto;
}
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  margin-top: -8px;
}
.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}
.drawer__links a {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.02em;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.drawer__links a:last-child { border-bottom: 1px solid var(--line); }
.drawer__cta { display: flex; gap: 10px; margin-top: auto; }
@media (min-width: 981px) {
  .drawer { display: none !important; }
}

/* —— Sections —— */
section { padding: 100px 0; position: relative; }
@media (max-width: 720px) { section { padding: 64px 0; } }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 820px;
  margin-bottom: 52px;
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-head--center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* —— Marquee —— */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  background: var(--bg);
}
.marquee__track {
  display: flex;
  gap: 56px;
  align-items: center;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: .75;
}
.marquee__item svg { width: 22px; height: 22px; color: var(--blue); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .btn::after { display: none; }
}

/* —— Hero (Kaiko: centered on atmosphere, no product mock) —— */
.hero {
  position: relative;
  z-index: 2;
  min-height: min(88vh, 820px);
  padding: calc(var(--nav-h) + 56px) 24px 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero__center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero__chip {
  margin-bottom: 28px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  height: 36px;
  padding: 0 16px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 auto;
  text-wrap: balance;
  text-align: center;
  color: #FFFFFF;
  max-width: 22ch;
  animation: heroUp .8s ease-out .12s both;
}
/* Home + product heroes: color play like closing / ecommerce */
.hero__title em,
.hero--product .hero__title em {
  font-style: normal;
  background: linear-gradient(91deg, #4CB8EA, #B497EE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__sub em,
.hero--product .hero__sub em {
  font-style: normal;
  color: #4CB8EA;
  -webkit-text-fill-color: #4CB8EA;
}
.hero__sub {
  font-size: clamp(16px, 1.55vw, 19.5px);
  max-width: 46ch;
  margin: 28px auto 0;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  animation: heroUp .8s ease-out .22s both;
  text-wrap: balance;
  text-align: center;
  font-weight: 400;
}
.hero__chip {
  animation: heroUp .6s ease-out both;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
  align-items: center;
  animation: heroUp .8s ease-out .32s both;
}
.hero__trustline {
  display: flex;
  gap: 22px;
  margin-top: 28px;
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-display);
  animation: heroUp .8s ease-out .4s both;
}
.hero__trustline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__trustline svg { color: #CCE2BD; }

/* Preview controls (title + fx) — text tabs, NOT buttons */
.hero__controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
  animation: heroUp .8s ease-out .5s both;
}
.hero__alts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: center;
  align-items: baseline;
  opacity: .9;
}
.hero__alts-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-right: 6px;
  font-family: var(--font-display);
}
.hero__alt {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
  box-shadow: none;
  text-transform: none;
}
.hero__alt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: transparent;
  transition: background .2s ease;
}
.hero__alt:hover {
  color: rgba(255,255,255,.85);
  background: none;
}
.hero__alt.is-active {
  color: #fff;
  background: none;
  border: none;
}
.hero__alt.is-active::after {
  background: rgba(255,255,255,.7);
}

/* Avatars (reused elsewhere) */
.hero__avatars {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.hero__avatar-stack { display: flex; }
.hero__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #17335E;
  margin-left: -8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-mint);
}
.hero__avatar:first-child { margin-left: 0; }

/* Product visual (used in product-stage, not hero) */
.hero__visual {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(165deg, #0C1058 0%, #03052C 100%);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(196,218,217,.12);
}
.hero__visual--video {
  background: linear-gradient(160deg, #0C1058 0%, #03052C 55%, #193969 100%);
}
.hero__visual-tag {
  position: absolute;
  left: 18px; top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250,250,250,.1);
  backdrop-filter: blur(12px);
  color: #FAFAFA;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 2;
  border: 1px solid rgba(250,250,250,.12);
}
.hero__visual-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(134,214,210,.25);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(134,214,210,.25); }
  50% { box-shadow: 0 0 0 8px rgba(134,214,210,.05); }
}

/* Product stage — former hero mock relocated */
.product-stage {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
  padding: 8px 0 8px;
}
.product-stage__copy { max-width: 440px; }
.product-stage__visual {
  aspect-ratio: 16/11;
  min-height: 320px;
}
@media (max-width: 900px) {
  .product-stage { grid-template-columns: 1fr; gap: 28px; }
  .product-stage__copy { max-width: none; }
}

/* —— Stats —— */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper);
}
.stats__item {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.stats__item:last-child { border-right: none; }
.stats__item:hover { background: var(--bg-2); }
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.stats__num em {
  font-style: normal;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats__label {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 26ch;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item { border-right: none; border-bottom: 1px solid var(--line); }
  .stats__item:nth-child(odd) { border-right: 1px solid var(--line); }
  .stats__item:nth-last-child(-n+2) { border-bottom: none; }
}

/* —— Pillars (Kaiko accordion-style) —— */
.pillars {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: stretch;
  min-height: 520px;
}
.pillars__list { display: flex; flex-direction: column; }
.pillar {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--muted);
  transition: color .45s var(--ease);
}
.pillar.active .pillar__title { color: var(--ink-2); cursor: default; }
.pillar__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55em;
  letter-spacing: .04em;
  color: #4CB8EA;
  margin-right: 10px;
  vertical-align: middle;
  font-weight: 500;
}
.pillar:not(.active) .pillar__num { color: var(--muted); opacity: .7; }
.pillar__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.pillar.active .pillar__body { grid-template-rows: 1fr; }
.pillar__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.pillar.active .pillar__inner { opacity: 1; }
.pillar__inner p {
  color: var(--ink-3);
  margin: 14px 0 0;
  max-width: 42ch;
  font-size: 15.5px;
  line-height: 1.55;
}
.pillar__cta {
  margin-top: 16px;
  display: inline-flex;
  visibility: hidden;
}
.pillar.active .pillar__cta { visibility: visible; }

.pillars__stage {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(165deg, #142E54 0%, #0F2748 55%, #163A66 100%);
  min-height: 480px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(76,184,234,.12);
}
.pillars__stage::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76,184,234,.18), transparent 70%);
  pointer-events: none;
}
.pillars__stage-panel {
  position: absolute;
  inset: 0;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
  color: #FAFAFA;
  z-index: 1;
}
.pillars__stage-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pillars__stage-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4CB8EA;
  margin-bottom: 12px;
}
.pillars__stage-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -.02em;
  font-weight: 500;
  margin: 0 0 10px;
}
.pillars__stage-desc {
  font-size: 14px;
  color: rgba(250,250,250,.7);
  max-width: 42ch;
  line-height: 1.5;
  margin: 0 0 18px;
}
.pillars__stage-visual {
  margin-top: auto;
  min-height: 0;
}

/* —— Stage product mocks —— */
.stage-mock {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.stage-mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.stage-mock__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4CB8EA;
  box-shadow: 0 0 0 3px rgba(76,184,234,.2);
  flex-shrink: 0;
}
.stage-mock__bar-title {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-mock__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}
.stage-mock__pill--ok {
  background: rgba(126,224,168,.15);
  color: #7EE0A8;
}
.stage-mock__body { padding: 16px; }
.stage-mock__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.stage-mock__label {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 4px;
  font-family: var(--font-display);
}
.stage-mock__value {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.015em;
}
.stage-mock__value--lg {
  font-size: 22px;
  font-family: var(--font-display);
  letter-spacing: -.03em;
}
.stage-mock__muted {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}
.stage-mock__mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255,255,255,.85);
}
.stage-mock__divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 14px 0;
}
.stage-mock__meta {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}
.stage-mock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.stage-mock__chip {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(76,184,234,.12);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(76,184,234,.2);
}
.stage-mock__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stage-mock__kpi {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 10px;
}
.stage-mock__trend {
  font-size: 11px;
  color: #7EE0A8;
  margin-top: 6px;
}
.stage-mock__trend--neg { color: #FFB4A2; }
.stage-mock__ai {
  background: linear-gradient(135deg, rgba(91,78,229,.2), rgba(76,184,234,.12));
  border: 1px solid rgba(180,151,238,.25);
  border-radius: 12px;
  padding: 12px 14px;
}
.stage-mock__ai-badge {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B497EE;
  margin-bottom: 6px;
}
.stage-mock__ai p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.85);
}
.stage-mock__flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.stage-mock__node {
  flex: 1;
  min-width: 64px;
  text-align: center;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 8px;
}
.stage-mock__node-t {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.stage-mock__node-s {
  font-size: 10.5px;
  color: #4CB8EA;
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.stage-mock__arrow {
  color: rgba(255,255,255,.35);
  font-size: 14px;
  flex-shrink: 0;
}
.stage-mock__sync {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
  margin-bottom: 4px;
}
.stage-mock__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7EE0A8;
  box-shadow: 0 0 0 0 rgba(126,224,168,.5);
  animation: pulseDot 2s ease infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(126,224,168,.45); }
  50% { box-shadow: 0 0 0 6px rgba(126,224,168,0); }
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; min-height: auto; }
  .pillars__stage { min-height: 420px; }
  .stage-mock__kpis { grid-template-columns: 1fr 1fr; }
  .stage-mock__kpi:last-child { grid-column: span 2; }
}

/* —— Productos (bento 2×2 + mock por card) —— */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
/* 5 cards: first row 2, second 2, last full-width optional via order */
.prod-grid .prod-card:nth-child(5) {
  grid-column: 1 / -1;
  max-width: 100%;
}
@media (min-width: 901px) {
  .prod-grid .prod-card:nth-child(5) {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
  .prod-grid .prod-card:nth-child(5) .prod-card__viz {
    height: 100%;
    display: flex;
    align-items: stretch;
  }
  .prod-grid .prod-card:nth-child(5) .prod-viz {
    flex: 1;
    min-height: 160px;
  }
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  min-height: 100%;
}
.prod-card:hover {
  transform: translateY(-4px);
  border-color: rgba(76,184,234,.35);
  box-shadow: var(--shadow);
}
.prod-card--featured {
  border-color: rgba(23,51,94,.2);
  box-shadow: 0 1px 0 rgba(23,51,94,.04);
}
.prod-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 0;
}
.prod-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: #4CB8EA;
  font-weight: 500;
}
.prod-card__status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.prod-card__status--live {
  background: rgba(126,224,168,.15);
  color: #2A7A4B;
}
.prod-card__status--beta {
  background: rgba(76,184,234,.12);
  color: #1E6A94;
}
.prod-card__viz {
  padding: 14px 18px 4px;
}
.prod-card__body {
  padding: 8px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prod-card__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #EEF6FB;
  color: #17335E;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.prod-card__icon svg { width: 20px; height: 20px; }
.prod-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  color: #111;
}
.prod-card__tagline {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: #1E3A6B;
  letter-spacing: -.01em;
}
.prod-card__desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3A3A3A;
}
.prod-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 14px;
}
.prod-card__chip {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #F4F2E8;
  color: #3A3A3A;
  border: 1px solid #EDEBDF;
}
.prod-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: #17335E;
  transition: gap .2s var(--ease), color .2s;
}
.prod-card:hover .prod-card__cta {
  gap: 10px;
  color: #4CB8EA;
}

/* Mini product visuals */
.prod-viz {
  background: #F7F5EE;
  border: 1px solid #EDEBDF;
  border-radius: 14px;
  padding: 14px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.prod-viz--dark {
  background: linear-gradient(145deg, #17335E, #1E4A7A);
  border-color: transparent;
  color: #fff;
}
.prod-viz--dark .prod-viz__label { color: rgba(255,255,255,.5); }
.prod-viz--dark .prod-viz__sub { color: rgba(255,255,255,.85); }
.prod-viz--agro {
  background: linear-gradient(160deg, #EEF6FB, #F7F5EE);
}
.prod-viz__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.prod-viz__row--bottom { margin-top: 14px; }
.prod-viz__label {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9A9A9A;
  font-family: var(--font-display);
  margin-bottom: 3px;
}
.prod-viz__main {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -.01em;
}
.prod-viz__sub { font-size: 13.5px; font-weight: 500; color: #1E3A6B; }
.prod-viz__price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.prod-viz__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.prod-viz__badge--ok {
  background: rgba(126,224,168,.2);
  color: #7EE0A8;
}
.prod-viz__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.prod-viz__kpi {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #17335E;
}
.prod-viz__kpi--warn { color: #C45C3E; }
.prod-viz__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
}
.prod-viz__bars span {
  flex: 1;
  background: linear-gradient(180deg, #4CB8EA, rgba(76,184,234,.25));
  border-radius: 4px 4px 2px 2px;
  min-height: 8px;
}
.prod-viz__pos { display: flex; flex-direction: column; gap: 6px; }
.prod-viz__pos-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #3A3A3A;
}
.prod-viz__pos-line--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #EDEBDF;
  font-weight: 600;
  color: #17335E;
}
.prod-viz__pos-foot {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.prod-viz__chip {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #EEF6FB;
  color: #1E6A94;
  border: 1px solid rgba(76,184,234,.2);
}
.prod-viz__chart {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  display: block;
}
.prod-viz--commerce {
  background: linear-gradient(145deg, #F3F0FF, #EEF6FB);
  border-color: rgba(91,78,229,.15);
}
.prod-viz__channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: #17335E;
}
.prod-viz__ch-arrow {
  color: #4CB8EA;
  font-size: 12px;
  opacity: .7;
}

@media (max-width: 800px) {
  .prod-grid { grid-template-columns: 1fr; }
  .prod-grid .prod-card:nth-child(5) {
    display: flex;
    grid-column: auto;
  }
}

/* —— Product pages (factura-facil, etc.) —— */
.prod-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.prod-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.prod-badge--live {
  background: rgba(126,224,168,.18);
  color: #7EE0A8;
}
.prod-badge--beta {
  background: rgba(76,184,234,.18);
  color: #4CB8EA;
}
.prod-badge--soon {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}
.prod-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}
.prod-hero-meta-item {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prod-hero-meta-item strong {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: none;
}
/* Product page hero only (must NOT affect home centered hero) */
.hero--product {
  min-height: auto;
  padding: calc(var(--nav-h) + 48px) 24px 64px;
  display: block;
  align-items: unset;
  justify-content: unset;
}
.hero--product .hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.hero--product .hero__title {
  max-width: 16ch;
  text-align: left;
  font-size: clamp(36px, 5vw, 56px);
  margin-left: 0;
  margin-right: 0;
}
.hero--product .hero__sub {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: 48ch;
}
.hero--product .hero__ctas {
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .hero--product .hero__inner {
    grid-template-columns: 1fr;
  }
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.feat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition: border-color .2s, transform .2s;
}
.feat:hover {
  border-color: rgba(76,184,234,.35);
  transform: translateY(-2px);
}
.feat__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #EEF6FB;
  color: #17335E;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
/* Feature / list widgets: solid single-color titles */
.feat__title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  margin: 0 0 8px;
  color: #111;
  letter-spacing: -.015em;
}
.feat__title em {
  font-style: normal;
  color: inherit;
  background: none;
  -webkit-text-fill-color: inherit;
}
.feat__desc em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}
.extra-mix__list em {
  font-style: normal;
  color: inherit;
  background: none;
  -webkit-text-fill-color: inherit;
  font-weight: inherit;
}
.hero-stage__title em {
  font-style: normal;
  background: linear-gradient(91deg, #4CB8EA, #B497EE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.prod-hero-meta-item strong em,
.prod-hero-meta-item em {
  font-style: normal;
  color: #4CB8EA;
}
.plan-callout__desc em {
  font-style: normal;
  color: #4CB8EA;
  -webkit-text-fill-color: #4CB8EA;
}
.hero-stage__desc em {
  font-style: normal;
  color: #4CB8EA;
}
.feat__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3A3A3A;
}
.feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 24px;
}
.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #3A3A3A;
  line-height: 1.45;
}
.feat-list li svg { color: #4CB8EA; flex-shrink: 0; margin-top: 2px; }

/* Legacy pills (kept for safety) */
.int-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.int-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: #1E3A6B;
  font-weight: 500;
}
.int-pill__mark { display: none; }

/* Integraciones — professional card grid */
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.int-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(23,51,94,.04);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.int-card:hover {
  border-color: rgba(76,184,234,.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(23,51,94,.28);
}
.int-card__mark,
.int-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #17335E;
  background: linear-gradient(145deg, #EEF6FB 0%, #F3F0FF 100%);
  border: 1px solid rgba(76,184,234,.18);
}
.int-card__icon svg { display: block; }

/* Omnichannel stack panel (Commerce) */
.omni-section { padding-top: 0; }
.omni-panel {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 32px;
  align-items: center;
  padding: 40px 36px;
  border-radius: 24px;
  background: linear-gradient(145deg, #17335E 0%, #0F2748 55%, #1A0F3D 100%);
  border: 1px solid rgba(76,184,234,.14);
  color: #fff;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.4);
}
.omni-panel__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 12px 0 0;
}
.omni-panel__title em {
  font-style: normal;
  background: linear-gradient(91deg, #4CB8EA, #B497EE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.omni-panel__desc {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250,250,250,.72);
  max-width: 44ch;
}
.omni-panel__layers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.omni-layer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.omni-layer__icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(76,184,234,.14);
  color: #4CB8EA;
  flex-shrink: 0;
}
.omni-layer__t {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.omni-layer__d {
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(250,250,250,.6);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .omni-panel { grid-template-columns: 1fr; padding: 28px 22px; }
}

/* Cobertura Argentina (Commerce SEO) */
.cover-ar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cover-ar__card {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.cover-ar__card:hover {
  border-color: rgba(76,184,234,.35);
  transform: translateY(-2px);
}
.cover-ar__t {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: #111;
}
.cover-ar__d {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #6B7280;
}
@media (max-width: 900px) {
  .cover-ar__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cover-ar__grid { grid-template-columns: 1fr; }
}

/* Plan custom (Commerce / Estudio) */
.plan-custom {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #17335E, #0F2748);
  border: 1px solid rgba(76,184,234,.14);
  color: #fff;
}
.plan-custom__main { padding: 40px 36px; }
.plan-custom__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 12px 0 0;
}
.plan-custom__title em {
  font-style: normal;
  background: linear-gradient(91deg, #4CB8EA, #B497EE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.plan-custom__desc {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250,250,250,.72);
  max-width: 48ch;
}
.plan-custom__points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-custom__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(250,250,250,.88);
  line-height: 1.4;
}
.plan-custom__points svg {
  color: #4CB8EA;
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-custom__aside {
  padding: 36px 28px;
  background: rgba(0,0,0,.22);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plan-custom__aside-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(250,250,250,.5);
}
.plan-custom__aside-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-top: 8px;
}
.plan-custom__aside-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250,250,250,.65);
}
.plan-custom__aside-link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: #4CB8EA;
  text-decoration: none;
}
.plan-custom__aside-link:hover { color: #86D6D2; }
@media (max-width: 900px) {
  .plan-custom { grid-template-columns: 1fr; }
  .plan-custom__aside {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .plan-custom__main { padding: 28px 22px; }
}
.int-card__body { min-width: 0; }
.int-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: #111;
  line-height: 1.25;
}
.int-card__note {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6B7280;
}
@media (max-width: 900px) {
  .int-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .int-grid { grid-template-columns: 1fr; }
}

/* Detalle: mix of real captures OR UI mocks + list (same as Commerce) */
.extra-mix {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px 36px;
  align-items: start;
}
.extra-mix__shot--ui {
  background: linear-gradient(165deg, #142E54 0%, #0F2748 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.extra-mix__shot--ui .stage-mock,
.extra-mix__shot--ui .extra-ui-card {
  flex: 1;
}
.extra-mix__shot--dark { background: linear-gradient(160deg, #1A1A1A, #0E0F0C); }
.extra-mix__shot--agro { background: linear-gradient(160deg, #3F5142, #1F2820); }
.extra-ui-card {
  padding: 16px;
  color: #F4EFE6;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extra-ui-card--tall { min-height: 280px; }
.extra-ui-card--dark { color: #F4EFE6; }
.extra-ui-card__h {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  font-family: var(--font-display);
}
.extra-ui-card__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  gap: 10px;
}
.extra-ui-card__row--total {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-weight: 600;
  font-size: 15px;
}
.extra-ui-card__big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.extra-ui-card__muted { font-size: 12px; opacity: .55; }
.extra-ui-card__ok { color: #7EE0A8; font-size: 12.5px; font-weight: 500; }
.extra-ui-card__warn { color: #FFB4A2; font-size: 12.5px; }
.extra-ui-card__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: #4CB8EA;
  color: #0F2748;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-display);
}
.extra-ui-card__p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .85;
}
.extra-ui-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 12px;
}
.extra-ui-kpis span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .5;
}
.extra-ui-kpis strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}
.extra-ui-kpis strong.warn { color: #FFB4A2; }
.extra-ui-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 72px;
  margin-top: auto;
}
.extra-ui-bars i {
  flex: 1;
  display: block;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #4CB8EA, rgba(76,184,234,.25));
  min-height: 8px;
}
.extra-ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.extra-ui-chips span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
}
/* Product sections rhythm inside content-box (match Commerce) */
.content-box > section {
  padding-left: 0;
  padding-right: 0;
}
.content-box > section:first-child {
  padding-top: 72px;
}
.content-box .section-head {
  margin-bottom: 40px;
}
.prod-section .feat-grid,
.feat-grid {
  margin-top: 0;
}
.extra-mix__shots {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.extra-mix__shots--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.extra-mix__shots--4 .extra-mix__shot {
  min-height: 0;
  aspect-ratio: 16/10;
}
.extra-mix__shot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0E0A1A;
  box-shadow: 0 12px 40px -18px rgba(0,0,0,.35);
}
.extra-mix__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.extra-mix__shot--main {
  grid-row: 1 / 3;
  min-height: 320px;
  aspect-ratio: 4/5;
}
.extra-mix__shot--top {
  min-height: 150px;
  aspect-ratio: 16/10;
}
.extra-mix__shot--bot {
  min-height: 150px;
  aspect-ratio: 16/10;
}
.extra-mix__shot-cap {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,15,20,.72);
  backdrop-filter: blur(8px);
  color: #FAFAFA;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12);
}
.extra-mix__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.extra-mix__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: #2A2A2A;
  line-height: 1.45;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.extra-mix__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.extra-mix__list li span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: #6B7280;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 1.6em;
}
@media (max-width: 900px) {
  .extra-mix { grid-template-columns: 1fr; }
  .extra-mix__shot--main { min-height: 260px; aspect-ratio: 4/5; max-height: 420px; }
}

.plan-callout {
  background: linear-gradient(145deg, #17335E, #0F2748);
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 32px;
  align-items: center;
  color: #fff;
  border: 1px solid rgba(76,184,234,.15);
}
.plan-callout__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 12px 0 0;
  line-height: 1.1;
}
.plan-callout__title em {
  font-style: normal;
  background: linear-gradient(91deg, #4CB8EA, #B497EE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.plan-callout__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 24px 28px;
}
.plan-callout__price-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.plan-callout__price-period {
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
}
@media (max-width: 800px) {
  .plan-callout {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .plan-callout__price { align-items: flex-start; }
}

.cross {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.cross__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  color: inherit;
  text-decoration: none;
}
.cross__card:hover {
  transform: translateY(-3px);
  border-color: rgba(76,184,234,.35);
  box-shadow: var(--shadow);
}
.cross__card-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #EEF6FB;
  color: #17335E;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.cross__card-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
  color: #111;
}
.cross__card-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: #3A3A3A;
  line-height: 1.45;
}
.cross__card-link {
  font-size: 13px;
  font-weight: 500;
  color: #17335E;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
}
.cross__card:hover .cross__card-link { color: #4CB8EA; }

@media (max-width: 980px) {
  .module, .module--wide, .module-link { grid-column: span 6; }
  .module-link[style] { grid-column: span 6 !important; }
}
@media (max-width: 640px) {
  .module, .module--wide, .module-link { grid-column: span 12; }
  .module-link[style] { grid-column: span 12 !important; }
}

/* —— Dashboard mock —— */
.dashboard {
  background: linear-gradient(145deg, #0C1058 0%, #03052C 70%);
  color: #FAFAFA;
  border-radius: var(--radius-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196,218,217,.1);
}
.dashboard::before {
  content: "";
  position: absolute;
  top: -100px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,125,213,.28) 0%, transparent 65%);
  pointer-events: none;
}
.dashboard::after {
  content: "";
  position: absolute;
  bottom: -80px; left: 20%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134,214,210,.15) 0%, transparent 65%);
  pointer-events: none;
}
.dashboard__left {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.dashboard__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 28px 0 32px;
  border-top: 1px solid rgba(250,250,250,.12);
  border-bottom: 1px solid rgba(250,250,250,.12);
}
.dashboard__kpi {
  padding: 18px 14px 18px 0;
  border-right: 1px solid rgba(250,250,250,.12);
}
.dashboard__kpi:last-child { border-right: none; padding-left: 14px; }
.dashboard__kpi:nth-child(2) { padding-left: 14px; }
.dashboard__kpi-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(250,250,250,.5);
  font-family: var(--font-display);
}
.dashboard__kpi-value {
  font-family: var(--font-display);
  font-size: 26px;
  margin-top: 6px;
  letter-spacing: -.02em;
  font-weight: 500;
  line-height: 1;
}
.dashboard__kpi-value em {
  font-style: normal;
  color: var(--teal);
}
.dashboard__kpi-trend {
  font-size: 11.5px;
  margin-top: 6px;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dashboard__kpi-trend--neg { color: var(--peach); }
.dashboard__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.dashboard__feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: rgba(250,250,250,.8);
  line-height: 1.45;
}
.dashboard__feature svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--teal);
}
.dashboard__feature strong {
  color: #FAFAFA;
  font-weight: 500;
}
.dashboard__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 12px 0 0;
}
.dashboard__title em {
  font-style: normal;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dashboard__desc {
  margin: 20px 0 0;
  color: rgba(250,250,250,.72);
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.5;
}
.dashboard__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,.12);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.dashboard__tab {
  background: none;
  border: none;
  color: rgba(250,250,250,.5);
  padding: 10px 0;
  margin-right: 20px;
  font-size: 14px;
  font-family: var(--font-display);
  position: relative;
  transition: color .2s;
}
.dashboard__tab.active { color: #FAFAFA; }
.dashboard__tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(91deg, var(--blue), var(--teal));
}

.ui-mock {
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 28px 70px -24px rgba(0,0,0,.45);
  font-size: 13px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.ui-mock__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-2);
  font-family: var(--font-display);
  font-weight: 500;
}
.ui-mock__head-left { display: flex; align-items: center; gap: 8px; }
.ui-mock__body { padding: 18px; }

@media (max-width: 880px) {
  .dashboard { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
  .dashboard__kpis { grid-template-columns: 1fr 1fr; }
  .dashboard__kpi:nth-child(2) { border-right: none; }
  .dashboard__kpi:nth-child(3) {
    border-top: 1px solid rgba(250,250,250,.12);
    padding-top: 18px;
    padding-left: 0;
  }
}

/* —— Steps —— */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper);
}
.step {
  padding: 32px 22px 36px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .25s var(--ease);
}
.step:last-child { border-right: none; }
.step:hover { background: var(--bg-2); }
.step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .06em;
}
.step__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg-mint);
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.step__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}
.step__desc {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}

/* —— Testimonials (Kaiko carousel feel) —— */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.testimonial__stars { color: var(--blue); display: flex; gap: 3px; }
.testimonial__quote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}
.testimonial__quote em {
  font-style: normal;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.testimonial__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-mint);
  border: 2px solid var(--line);
}
.testimonial__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.testimonial__role {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Kaiko-style featured testimonial band */
.tband {
  background: var(--bg-2);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
}
.tband__quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 28ch;
}
.tband__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tband__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.tband__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .06em;
}
.tband__btns { display: flex; gap: 8px; }
.tband__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s, color .2s;
}
.tband__btn:hover {
  background: var(--navy-deep);
  color: #FAFAFA;
  border-color: var(--navy-deep);
}
@media (max-width: 800px) {
  .testimonials { grid-template-columns: 1fr; }
  .tband { grid-template-columns: 1fr; padding: 32px; }
  .tband__nav { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* —— Trust (Kaiko "Proven, not promised") —— */
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.trust__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform .25s var(--ease), border-color .25s;
}
.trust__card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
}
.trust__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(56,125,213,.12), rgba(134,214,210,.2));
  color: var(--ink-2);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.trust__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.trust__desc {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .trust { grid-template-columns: 1fr; }
}

/* —— Pricing —— */
.pricing-toggle {
  position: relative;
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 40px;
}
.pricing-toggle__slider {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(3,5,44,.08);
  transition: left .3s var(--ease), width .3s var(--ease);
  z-index: 0;
}
.pricing-toggle__btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: color .2s;
}
.pricing-toggle__btn.active { color: var(--ink); }
.pricing-toggle__badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-mint);
  color: var(--ink-2);
}

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plan--featured {
  background: linear-gradient(165deg, #0C1058, #03052C);
  color: #FAFAFA;
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.plan--featured .plan__name,
.plan--featured .plan__price,
.plan--featured .plan__desc { color: #FAFAFA; }
.plan--featured .plan__desc { color: rgba(250,250,250,.7); }
.plan--featured .plan__price-period,
.plan--featured .plan__price-old { color: rgba(250,250,250,.5); }
.plan--featured .plan__feature { color: rgba(250,250,250,.85); }
.plan--featured .plan__feature svg { color: var(--teal); }
.plan__badge {
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--font-display);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  color: #fff;
  letter-spacing: .02em;
}
.plan__name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.plan__price {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.plan__price-period {
  font-size: 15px;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
}
.plan__price-old {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  text-decoration: line-through;
}
.plan__desc {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 12px 0 8px;
  min-height: 3.2em;
}
.plan__features {
  list-style: none;
  margin: 12px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}
.plan__feature svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blue);
}
@media (max-width: 900px) {
  .pricing { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* —— Blog —— */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.post {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex;
  flex-direction: column;
}
.post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.post__img {
  aspect-ratio: 16/10;
  background: var(--bg-2);
  background-size: cover;
  background-position: center;
}
.post__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .04em;
  padding: 18px 20px 0;
}
.post__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 10px 20px 22px;
  line-height: 1.3;
  color: var(--ink);
}
@media (max-width: 800px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* —— FAQ —— */
.faq {
  max-width: 720px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink);
}
.faq__toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .3s var(--ease), background .2s, border-color .2s, color .2s;
  color: var(--ink-2);
}
.faq__item.open .faq__toggle {
  transform: rotate(45deg);
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #FAFAFA;
}
.faq__panel {
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.faq__answer {
  padding: 0 0 22px;
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.65;
  margin: 0;
  max-width: 58ch;
}

/* —— Services —— */
.services { background: var(--bg); }
.services__head { margin-bottom: 40px; }
.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  color: inherit;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.service-card__visual {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.service-card__visual svg { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.service-card__brand {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.service-card__brand em {
  font-style: normal;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.service-card__tagline {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
}
.service-card__desc {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
}
.service-card__bullets {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.service-card__bullets svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.service-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.service-card__stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--ink);
}
.service-card__stat-num span {
  font-size: 16px;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.service-card__stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}
.services__note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 28px;
}
@media (max-width: 800px) {
  .services__grid { grid-template-columns: 1fr; }
}

/* —— Closing CTA (Kaiko gradient title) —— */
.closing {
  background: linear-gradient(145deg, #0C1058 0%, #03052C 100%);
  border-radius: var(--radius-xl);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  color: #FAFAFA;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196,218,217,.1);
}
.closing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: min(80%, 640px);
  height: min(80%, 640px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,125,213,.3) 0%, rgba(134,214,210,.1) 40%, transparent 70%);
  pointer-events: none;
}
.closing > * { position: relative; z-index: 1; }
.closing__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 500;
  margin: 12px 0 18px;
}
.closing__title em {
  font-style: normal;
  background: linear-gradient(91deg, #387DD5, #86D6D2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.closing__desc {
  font-size: 16.5px;
  color: rgba(250,250,250,.72);
  max-width: 42ch;
  line-height: 1.55;
  margin: 0 0 28px;
}
.closing .btn--primary {
  background: #FAFAFA;
  color: var(--navy-deep);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.3);
}
.closing .btn--primary:hover {
  background: var(--teal);
  color: var(--navy-deep);
}
.closing .btn--ghost {
  color: #FAFAFA;
  border-color: rgba(250,250,250,.25);
}
.closing .btn--ghost:hover {
  background: rgba(250,250,250,.1);
  color: #FAFAFA;
  border-color: rgba(250,250,250,.4);
}
.closing__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  background: rgba(250,250,250,.06);
  border: 1px solid rgba(250,250,250,.1);
}
.closing__img image-slot,
.closing__img > * {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px;
}
@media (max-width: 800px) {
  .closing { grid-template-columns: 1fr; padding: 36px 24px; }
  .closing__img { min-height: 200px; }
}

/* —— Footer —— */
.footer {
  padding: 64px 0 40px;
  border-top: 1px solid var(--line);
  background: transparent;
}
.footer__big {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 120px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .95;
  margin: 0 0 56px;
  color: var(--ink);
}
.footer__big em {
  font-style: normal;
  background: linear-gradient(91deg, var(--blue), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer__col h4 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 16px;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  font-size: 14.5px;
  color: var(--ink-2);
  transition: color .15s;
}
.footer__col a:hover { color: var(--blue); }
.footer__about p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 28ch;
}
.footer__social {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: background .2s, color .2s, border-color .2s;
}
.footer__social:hover {
  background: var(--navy-deep);
  color: #FAFAFA;
  border-color: var(--navy-deep);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* —— Focus —— */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════
   AUTH MODALS — login / signup
   ═══════════════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: authFadeIn .2s var(--ease-out);
}
.auth-overlay__bg {
  position: absolute;
  inset: 0;
  background: rgba(23, 51, 94, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes authFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.auth-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: min(92vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px 36px 32px;
  box-shadow: var(--shadow-lg);
  animation: authSlideUp .28s var(--ease-out);
  margin: auto;
}
@keyframes authSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  transition: background .2s, color .2s;
}
.auth-modal__close:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.auth-modal__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.auth-modal__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.auth-modal__sub {
  font-size: 14.5px;
  color: var(--ink-3);
  margin: 0 0 24px;
  line-height: 1.45;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.auth-field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.auth-field input,
.auth-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.auth-field input:focus,
.auth-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76, 184, 234, .18);
}
.auth-field input::placeholder,
.auth-field textarea::placeholder {
  color: var(--muted);
}
.auth-link {
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
  align-self: flex-end;
  margin: -4px 0 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link:hover { color: var(--blue); }
.auth-submit {
  width: 100%;
  height: 50px;
  margin-top: 6px;
  border: none;
  border-radius: 999px;
  background: #17335E;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .3s var(--ease), transform .2s;
  cursor: pointer;
}
.auth-submit:hover:not(:disabled) {
  background: #4CB8EA;
  color: #0C2A3F;
}
.auth-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.auth-error {
  background: #FDECEA;
  color: #B42318;
  font-size: 13px;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.auth-switch {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 22px 0 0;
}
.auth-switch a,
.auth-switch button {
  color: var(--navy);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.auth-switch a:hover,
.auth-switch button:hover { color: var(--blue); }
.auth-success {
  text-align: center;
  padding: 12px 0 4px;
}
.auth-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--mint);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.auth-success h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.auth-success p {
  color: var(--ink-3);
  font-size: 14.5px;
  margin: 0 0 24px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .auth-overlay { padding: 12px; align-items: flex-start; }
  .auth-modal {
    padding: 28px 18px 24px;
    border-radius: 18px;
    max-height: calc(100vh - 24px);
    margin: 12px auto;
  }
  .auth-modal__title { font-size: 20px; }
  .auth-field input,
  .auth-field textarea { font-size: 16px; /* avoid iOS zoom */ }
  .drawer__links a { font-size: 22px; padding: 12px 0; }
}

/* ═══════════════════════════════════════════
   MOBILE — phone layout (nav / hero / type)
   ═══════════════════════════════════════════ */
.drawer {
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
  z-index: 250;
  -webkit-overflow-scrolling: touch;
}
.drawer.open { visibility: visible; }

.show-mobile { display: none; }
@media (max-width: 720px) {
  .show-mobile { display: block; }
}

@media (max-width: 720px) {
  :root { --nav-h: 56px; }
  .nav { height: var(--nav-h); }
  .container { padding: 0 16px; }
  .nav__menu-btn {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    border: 1.5px solid rgba(255,255,255,.5) !important;
    color: #fff !important;
    background: rgba(23,51,94,.45) !important;
  }

  .hero {
    min-height: auto;
    height: auto;
    padding: calc(var(--nav-h) + 24px) 0 36px;
    align-items: flex-start;
    overflow: visible;
  }
  .hero .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero__center {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  .hero__center > *,
  .hero--product .hero__inner > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .hero__title {
    font-size: 24px;
    line-height: 1.22;
    width: 100%;
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    text-wrap: wrap;
    letter-spacing: -0.03em;
    padding-inline: 4px;
    box-sizing: border-box;
  }
  .hero__title em {
    padding-right: 0.12em;
  }
  .hero__sub {
    font-size: 14.5px;
    margin-top: 14px;
    width: 100%;
    max-width: 100% !important;
    text-wrap: wrap;
    overflow-wrap: break-word;
    white-space: normal;
    padding-inline: 8px;
    box-sizing: border-box;
  }
  .hero__avatars {
    margin-top: 18px;
    margin-bottom: 0;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .hero__avatars > div {
    min-width: 0;
    text-align: left;
  }
  .hero__ctas {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }
  .hero__ctas .btnk {
    width: auto;
    max-width: 100%;
    justify-content: center;
    height: 40px;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 0 14px 0 4px;
  }
  .hero__ctas .btnk .btnk__dot {
    width: 28px;
    height: 28px;
  }
  .hero__ctas .btnk .btnk__idle {
    width: auto;
    gap: 8px;
    justify-content: center;
  }
  .hero--product .hero__ctas {
    align-items: flex-start;
  }
  .hero__trustline {
    width: 100%;
    max-width: 100%;
    gap: 8px 14px;
    font-size: 12px;
    margin-top: 16px;
    padding-bottom: 8px;
    flex-wrap: wrap;
  }

  .hero--product {
    padding: calc(var(--nav-h) + 20px) 0 36px;
  }
  .hero--product .hero__inner {
    padding: 0 16px;
    gap: 24px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .hero--product .hero__title {
    max-width: 100% !important;
    font-size: 26px;
    text-align: left;
  }
  .hero--product .hero__sub {
    max-width: 100% !important;
  }
  .hero--product .hero__ctas {
    width: 100%;
  }

  .section-title {
    font-size: clamp(26px, 8vw, 40px);
  }
  .content-box {
    margin: 0;
    border-radius: 20px 20px 0 0;
  }
  .closing {
    padding: 28px 18px;
    border-radius: 18px;
  }
  .closing__title { font-size: clamp(26px, 8vw, 36px); }
  .footer { padding: 40px 0 28px; }
  .footer__big { font-size: clamp(36px, 12vw, 64px); margin-bottom: 32px; }
  .plan-custom__main { padding: 28px 18px; }
  .hero-stage, .stage-mock, .counter-hero { max-width: 100%; }
  .hero-stage { overflow: hidden; }
  .prod-hero-meta { gap: 12px 18px; }
}

@media (max-width: 380px) {
  .hero__title { font-size: 22px; }
  .hero--product .hero__title { font-size: 22px; }
  .hero__ctas .btnk {
    height: 38px;
    font-size: 10.5px;
    letter-spacing: .04em;
  }
}

/* Final mobile guards — keep last so nothing overrides */
@media (max-width: 980px) {
  .nav__links,
  .nav__cta { display: none !important; }
  .nav__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
  }
  .nav__menu-btn {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    justify-self: end !important;
    border: 1.5px solid rgba(255,255,255,.5) !important;
    color: #fff !important;
    background: rgba(23,51,94,.4) !important;
  }
  .nav.scrolled .nav__menu-btn {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: var(--bg) !important;
  }
}