/* ============================================================
   WMB DIGITAL — Design System  v2 "Amber Editorial"
   Near-black canvas · molten amber→gold · editorial type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Sora:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Color: base (warm near-black) ----- */
  --bg:        oklch(0.15 0.006 70);
  --bg-deep:   oklch(0.105 0.006 60);
  --surface:   oklch(0.185 0.008 70);
  --surface-2: oklch(0.225 0.010 70);
  --line:      oklch(0.34 0.012 70 / 0.55);
  --line-soft: oklch(0.50 0.014 70 / 0.22);

  --text:      oklch(0.97 0.006 80);
  --text-dim:  oklch(0.76 0.012 75);
  --text-mute: oklch(0.58 0.014 70);

  /* ----- Accents (molten: orange → amber → gold) ----- */
  --orange:    oklch(0.70 0.195 48);
  --cyan:      oklch(0.80 0.165 70);   /* amber (primary accent) */
  --cyan-deep: oklch(0.70 0.180 55);   /* deep orange-amber */
  --green:     oklch(0.89 0.150 92);   /* bright gold */
  --green-deep:oklch(0.76 0.165 82);
  --accent:    var(--cyan);
  --grad: linear-gradient(100deg, var(--orange), var(--cyan) 55%, var(--green));

  --glow-cyan:  oklch(0.78 0.175 60 / 0.40);
  --glow-green: oklch(0.88 0.150 92 / 0.30);
  --glow-emerald: oklch(0.70 0.14 165 / 0.22);

  /* ----- Status ----- */
  --live:    oklch(0.80 0.15 162);     /* emerald (echoes growth glow) */
  --preview: var(--cyan);
  --soon:    oklch(0.82 0.13 95);
  --private: oklch(0.74 0.13 320);

  /* ----- Type ----- */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Sora', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ----- Geometry ----- */
  --r-sm: 7px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --maxw: 1240px;
  --gut:  clamp(20px, 5vw, 64px);

  --shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 20px 50px -20px oklch(0 0 0 / 0.7);
  --shadow-lg: 0 40px 90px -30px oklch(0 0 0 / 0.8);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
  --bg:        oklch(0.975 0.006 80);
  --bg-deep:   oklch(0.94 0.008 80);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.97 0.006 80);
  --line:      oklch(0.50 0.02 70 / 0.18);
  --line-soft: oklch(0.50 0.02 70 / 0.12);
  --text:      oklch(0.20 0.02 70);
  --text-dim:  oklch(0.40 0.02 70);
  --text-mute: oklch(0.54 0.02 70);
  --cyan:      oklch(0.62 0.17 55);
  --cyan-deep: oklch(0.55 0.18 48);
  --green-deep:oklch(0.62 0.16 78);
  --shadow: 0 1px 0 oklch(1 0 0 / 0.7) inset, 0 18px 40px -22px oklch(0.3 0.06 60 / 0.22);
  --shadow-lg: 0 40px 80px -34px oklch(0.3 0.06 60 / 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient page glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 50% at 82% -8%, var(--glow-cyan), transparent 70%),
    radial-gradient(48% 45% at 8% 4%, var(--glow-emerald), transparent 70%);
  opacity: 0.5;
}
[data-theme="light"] body::before { opacity: 0.6; }

/* Faint interface grid */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
  opacity: 0.4;
}

main, header, footer, .wa-sticky { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ============================================================
   TYPE
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.display { font-size: clamp(2.8rem, 6.5vw, 5.2rem); font-weight: 900; letter-spacing: -0.045em; line-height: 0.94; }
.h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 800; }
.h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-dim); font-weight: 300; }
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }

.kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 500;
}
.kicker::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section { padding-block: clamp(64px, 9vw, 130px); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .h2 { margin-top: 14px; }
.section-head .lead { margin-top: 16px; }

.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.center { text-align: center; }
.center.section-head { margin-inline: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --b: var(--surface-2);
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.4em;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--b);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s, background 0.25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); border-color: var(--line-soft); }
.btn .ico { width: 18px; height: 18px; }

.btn-primary {
  background: var(--grad);
  color: oklch(0.18 0.02 230);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 8px 30px -10px var(--glow-cyan);
}
.btn-primary:hover { box-shadow: 0 14px 40px -12px var(--glow-cyan); }

.btn-wa { background: oklch(0.62 0.16 150); color: #06140d; border-color: transparent; font-weight: 600; }
.btn-wa:hover { box-shadow: 0 14px 40px -12px oklch(0.62 0.16 150 / 0.5); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface); }

.btn-lg { padding: 1.05em 1.7em; font-size: 1.02rem; }
.btn-sm { padding: 0.6em 1em; font-size: 0.85rem; }

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-live    { color: var(--live);    border-color: oklch(0.82 0.155 158 / 0.4); }
.badge-live .dot { box-shadow: 0 0 0 0 var(--glow-green); animation: pulse 2s infinite; }
.badge-preview { color: var(--preview); border-color: oklch(0.80 0.165 70 / 0.4); }
.badge-soon    { color: var(--soon);    border-color: oklch(0.78 0.10 80 / 0.4); }
.badge-private { color: var(--private); border-color: oklch(0.72 0.13 300 / 0.4); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--glow-green);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

.chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--surface);
  cursor: pointer;
  transition: 0.2s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-soft); }
.chip[aria-selected="true"], .chip.active {
  background: var(--grad);
  color: oklch(0.18 0.02 230);
  border-color: transparent;
  font-weight: 500;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}
.card-hover:hover { transform: translateY(-6px); border-color: oklch(0.80 0.165 70 / 0.45); box-shadow: var(--shadow-lg); }
.card-hover:hover .card-arrow { transform: translate(3px,-3px); color: var(--cyan); }
.card .card-arrow { transition: 0.3s var(--ease); color: var(--text-mute); }

.card-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: oklch(0.30 0.04 200 / 0.4);
  border: 1px solid var(--line);
  color: var(--cyan);
  margin-bottom: 18px;
}
.card-icon svg { width: 24px; height: 24px; }

/* Image / preview placeholder */
.ph {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--bg-deep);
  background-image: repeating-linear-gradient(135deg, var(--line-soft) 0 1px, transparent 1px 11px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  padding: 0.4em 0.8em;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.ph.has-shot {
  background-size: cover;
  background-position: center;
}
.ph.has-shot::after { display: none; }
.ph-16-9 { aspect-ratio: 16/9; }
.ph-4-3  { aspect-ratio: 4/3; }
.ph-1-1  { aspect-ratio: 1/1; }
.ph-phone { aspect-ratio: 9/19; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 70px;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; }
.brand .mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display: grid; place-items: center;
  color: oklch(0.16 0.02 230);
  font-weight: 700;
  box-shadow: 0 6px 20px -6px var(--glow-cyan);
  position: relative;
}
.brand .mark span { font-size: 0.95rem; }
.brand small { color: var(--text-mute); font-family: var(--mono); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.18em; display: block; margin-top: -2px; }

.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a {
  font-size: 0.92rem;
  color: var(--text-dim);
  padding: 0.5em 0.85em;
  border-radius: 8px;
  transition: 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { content:""; display:block; height:2px; margin-top:4px; border-radius:2px; background: linear-gradient(90deg, var(--cyan), var(--green)); }

.nav-tools { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  display: grid; place-items: center;
  cursor: pointer;
  transition: 0.2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-soft); }
.lang-toggle { font-family: var(--mono); font-size: 0.78rem; width: auto; padding-inline: 10px; gap: 5px; }
.lang-toggle b { color: var(--cyan); }

.burger { display: none; }

/* Mobile nav */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-deep);
  padding: 24px var(--gut);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mnav.open { transform: translateX(0); }
.mnav .nav { height: auto; margin-bottom: 30px; }
.mnav-links { display: flex; flex-direction: column; gap: 4px; }
.mnav-links a {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text);
}
.mnav-links a .arr { color: var(--text-mute); }
.mnav-cta { margin-top: 28px; display: grid; gap: 12px; }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .burger { display: grid; }
  .nav-tools .btn:not(.burger) { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(60px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.hero h1 { margin: 18px 0 22px; }
.hero .cta-row { margin-top: 32px; }
.hero .trust { margin-top: 26px; font-size: 0.9rem; color: var(--text-mute); display: flex; gap: 10px; align-items: center; }
.hero .trust svg { color: var(--green); flex-shrink: 0; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* Pseudo-3D system hub */
.hub {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.hub-inner { position: absolute; inset: 0; transition: transform 0.2s ease-out; }
.hub svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub svg.links path { fill: none; stroke: url(#flow); stroke-width: 1.4; stroke-dasharray: 5 9; opacity: 0.6; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }

.hub-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 38%; aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 35% 30%, oklch(0.4 0.05 200 / 0.8), oklch(0.18 0.02 230 / 0.9));
  border: 1px solid oklch(0.80 0.165 70 / 0.5);
  box-shadow: 0 0 60px -10px var(--glow-cyan), inset 0 0 40px -10px var(--glow-cyan);
  text-align: center;
  z-index: 3;
}
.hub-core .mk { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.7rem); line-height: 1; }
.hub-core small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.15em; color: var(--cyan); display:block; margin-top: 5px; }
.hub-core::before {
  content:""; position:absolute; inset:-12px; border-radius:50%;
  border:1px solid var(--line-soft);
  animation: spin 18s linear infinite;
  mask: linear-gradient(transparent 40%, black);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hub-node {
  position: absolute;
  width: 23%;
  transform: translate(-50%,-50%);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  z-index: 2;
  box-shadow: var(--shadow);
  animation: float 6s ease-in-out infinite;
}
.hub-node svg { width: 20px; height: 20px; color: var(--cyan); margin-bottom: 4px; }
.hub-node span { font-size: 0.62rem; font-family: var(--mono); color: var(--text-dim); display: block; line-height: 1.2; }
.hub-node:nth-child(odd) svg { color: var(--green); }
@keyframes float { 0%,100%{ transform: translate(-50%,-50%);} 50%{ transform: translate(-50%,-58%);} }

@media (prefers-reduced-motion: reduce) {
  .hub-node, .hub-core::before, .hub svg.links path { animation: none !important; }
}

/* ============================================================
   PATH CARDS
   ============================================================ */
.path-card { display: flex; flex-direction: column; gap: 14px; }
.path-card .num { font-family: var(--mono); font-size: 0.75rem; color: var(--cyan); letter-spacing: 0.1em; }
.path-card h3 { margin-bottom: 2px; }
.path-card .btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--body); font-size: 0.92rem; font-weight: 400;
  color: var(--text-mute);
  padding: 0.9em 1.1em;
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: 0.2s;
}
.tab:hover { color: var(--text-dim); }
.tab.active { color: var(--text); border-bottom-color: var(--cyan); }
.tab-panel { display: none; padding-top: 30px; }
.tab-panel.active { display: block; animation: fadein 0.4s var(--ease); }
@keyframes fadein { from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.7em 1em;
  color: var(--text-mute);
}
.search input { flex: 1; background: none; border: none; color: var(--text); font-family: var(--body); font-size: 0.92rem; outline: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   PRODUCT / DEMO / USE-CASE CARD
   ============================================================ */
.pcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pcard .media { position: relative; }
.pcard .media .badge { position: absolute; top: 12px; left: 12px; background: color-mix(in oklch, var(--bg) 60%, transparent); backdrop-filter: blur(6px); }
.pcard .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard .cat { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.pcard .price { font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.pcard .price small { font-family: var(--body); font-size: 0.72rem; color: var(--text-mute); font-weight: 300; }
.pcard .cardfoot { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; }
.pcard .cardfoot .btn { flex: 1; justify-content: center; }

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.timeline { position: relative; display: grid; gap: 0; }
.tstep { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 34px; position: relative; }
.tstep:not(:last-child)::before { content:""; position: absolute; left: 27px; top: 50px; bottom: -6px; width: 2px; background: linear-gradient(var(--cyan), var(--line)); opacity: 0.5; }
.tstep .tnum {
  width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--cyan); z-index: 1;
}
.tstep h3 { font-size: 1.2rem; margin-bottom: 4px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--glow-cyan), transparent 60%),
    radial-gradient(80% 120% at 0% 100%, var(--glow-green), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .h2 { max-width: 760px; margin-inline: auto; }
.cta-band .cta-row { justify-content: center; margin-top: 30px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.25em 0;
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 22px; height: 22px; flex-shrink: 0; position: relative; transition: 0.3s; color: var(--cyan); }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { padding-bottom: 1.4em; color: var(--text-dim); max-width: 70ch; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb { font-family: var(--mono); font-size: 0.78rem; color: var(--text-mute); display: flex; gap: 8px; align-items: center; padding-block: 22px 0; }
.crumb a:hover { color: var(--cyan); }
.crumb .sep { opacity: 0.5; }

/* ============================================================
   PAGE HERO (inner)
   ============================================================ */
.page-hero { padding-block: clamp(40px, 6vw, 80px) clamp(30px, 4vw, 50px); }
.page-hero .h1 { margin: 16px 0 18px; max-width: 16ch; }
.page-hero .lead { max-width: 56ch; }

/* ============================================================
   STAT / FEATURE LIST
   ============================================================ */
.feat-list { display: grid; gap: 14px; }
.feat-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-dim); }
.feat-list li svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.stat-row { display: flex; gap: clamp(24px,5vw,60px); flex-wrap: wrap; }
.stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(2rem,4vw,2.8rem); }
.stat .l { font-size: 0.85rem; color: var(--text-mute); }

/* ============================================================
   FORM
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 0.85rem; color: var(--text-dim); font-weight: 400; }
.field label .req { color: var(--cyan); }
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 0.95rem;
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.85em 1em;
  color: var(--text); outline: none; transition: 0.2s;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px oklch(0.80 0.165 70 / 0.15); }
.field textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-success { display: none; }
.help { font-size: 0.78rem; color: var(--text-mute); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site { border-top: 1px solid var(--line); background: var(--bg-deep); padding-block: clamp(48px,6vw,76px) 30px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h5 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 16px; }
.foot-grid ul { display: grid; gap: 10px; }
.foot-grid a { color: var(--text-dim); font-size: 0.92rem; transition: 0.2s; }
.foot-grid a:hover { color: var(--cyan); }
.foot-brand p { color: var(--text-mute); font-size: 0.9rem; max-width: 32ch; margin-top: 14px; }
.foot-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-mute); font-size: 0.82rem; font-family: var(--mono); }
.social { display: flex; gap: 10px; }

/* ============================================================
   STICKY WHATSAPP
   ============================================================ */
.wa-sticky {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 120;
  display: flex; align-items: center; gap: 10px;
  background: oklch(0.62 0.16 150);
  color: #06140d;
  padding: 0.85em 1.2em;
  border-radius: 999px;
  font-weight: 600; font-size: 0.92rem;
  box-shadow: 0 14px 40px -10px oklch(0.62 0.16 150 / 0.6);
  transition: transform 0.3s var(--ease);
}
.wa-sticky:hover { transform: scale(1.05); }
.wa-sticky svg { width: 22px; height: 22px; }
@media (max-width: 920px) { .wa-sticky span.lbl { display: none; } .wa-sticky { padding: 0.9em; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ============================================================
   MISC
   ============================================================ */
.divider { height: 1px; background: var(--line); border: none; margin: 0; }
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.note { font-family: var(--mono); font-size: 0.74rem; color: var(--text-mute); padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; display: inline-flex; gap: 8px; align-items: center; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-mute); }
.empty-state svg { color: var(--text-mute); margin-bottom: 14px; }

/* ============================================================
   v2 EDITORIAL LAYER
   ============================================================ */

/* Editorial kicker: index number + label + rule */
.kicker { font-weight: 600; color: var(--cyan); }

/* Big outlined section index numbers */
.sec-index {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1.5px var(--line);
  color: transparent;
  display: block;
  margin-bottom: 6px;
  -webkit-text-fill-color: transparent;
}
.sec-index em { font-style: normal; -webkit-text-fill-color: var(--cyan); -webkit-text-stroke: 0; color: var(--cyan); }

/* Editorial head with hanging index column */
.ehead { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 54px); align-items: start; margin-bottom: clamp(36px, 5vw, 60px); }
.ehead .idx { font-family: var(--mono); font-size: 0.8rem; color: var(--cyan); letter-spacing: 0.1em; padding-top: 10px; white-space: nowrap; }
.ehead .idx::after { content: ""; display: block; width: 1px; height: clamp(30px, 5vw, 60px); background: linear-gradient(var(--cyan), transparent); margin-top: 14px; }
@media (max-width: 680px) { .ehead { grid-template-columns: 1fr; gap: 8px; } .ehead .idx::after { display: none; } }

/* Solid gold accent block (poster-style) */
.accent-block { background: var(--grad); color: oklch(0.18 0.04 60); border-radius: var(--r); padding: clamp(20px,3vw,30px); box-shadow: 0 20px 50px -20px var(--glow-cyan); }
.accent-block .h3 { color: oklch(0.16 0.04 60); }

/* Headline highlight underline (editorial marker) */
.mark-hl { position: relative; }
.mark-hl::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -0.12em; height: 0.16em; background: var(--grad); border-radius: 4px; transform-origin: left center; transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .mark-hl::after { transform: scaleX(0); animation: markDraw 0.7s var(--ease) 0.5s forwards; }
}
@keyframes markDraw { to { transform: scaleX(1); } }

/* Pill CTA bar (like reference "Get In Touch") */
.pillbar { display: inline-flex; align-items: center; gap: 14px; background: var(--grad); color: oklch(0.18 0.04 60); font-family: var(--display); font-weight: 800; font-size: clamp(1rem,1.6vw,1.25rem); padding: 0.7em 1.4em; border-radius: 999px; box-shadow: 0 16px 44px -14px var(--glow-cyan); transition: transform 0.3s var(--ease); }
.pillbar:hover { transform: translateY(-2px); }
.pillbar .num { font-family: var(--mono); font-weight: 600; }

/* Card numbering for path cards */
.path-card .num { font-weight: 600; }

/* ============================================================
   HERO GROWTH VISUAL (3D glowing chart)
   ============================================================ */
.growth {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.04;
  perspective: 1100px;
}
.growth::before { /* ambient emerald-to-gold glow like the reference */
  content: "";
  position: absolute; inset: -8% -6% 0 -6%;
  background:
    radial-gradient(60% 50% at 70% 18%, var(--glow-cyan), transparent 62%),
    radial-gradient(55% 45% at 30% 8%, var(--glow-emerald), transparent 60%);
  filter: blur(6px);
  pointer-events: none;
}
.growth-slab {
  position: absolute;
  left: 50%; bottom: 6%;
  width: 78%; aspect-ratio: 16 / 10;
  transform: translateX(-50%) rotateX(60deg) translateZ(-10px);
  transform-style: preserve-3d;
  border-radius: 16px;
  background:
    linear-gradient(180deg, oklch(0.30 0.02 200 / 0.6), oklch(0.16 0.012 220 / 0.7));
  border: 1px solid oklch(0.6 0.05 200 / 0.3);
  box-shadow: 0 40px 80px -20px oklch(0 0 0 / 0.8), inset 0 0 40px -8px oklch(0.7 0.12 80 / 0.25);
}
.growth-slab::before { /* grid lines on slab */
  content: ""; position: absolute; inset: 12px;
  background-image: linear-gradient(oklch(0.7 0.1 90 / 0.18) 1px, transparent 1px), linear-gradient(90deg, oklch(0.7 0.1 90 / 0.18) 1px, transparent 1px);
  background-size: 14% 18%;
  border-radius: 8px;
}
/* 3D motion layers: tilt (pointer) wraps float (idle bob) */
.growth-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.3s var(--ease); }
.growth-float { position: absolute; inset: 0; transform-style: preserve-3d; animation: sceneFloat 8s ease-in-out infinite; }
@keyframes sceneFloat { 0%,100%{ transform: translateY(0) rotateZ(0deg); } 50%{ transform: translateY(-12px) rotateZ(-0.6deg); } }
.growth-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.growth-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(20px); }
.growth-bar { transform-box: fill-box; transform-origin: bottom; }
.growth-arrow { animation: arrowPulse 3.4s ease-in-out infinite; }
@keyframes arrowPulse { 0%,100%{ opacity: 0.92; } 50%{ opacity: 1; filter: drop-shadow(0 0 8px var(--glow-cyan)); } }
.growth-pulse { filter: drop-shadow(0 0 5px #FFE08A); }

/* Floating glass service tiles (what WMB builds) hovering in 3D */
.gtile {
  position: absolute;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(160deg, oklch(0.34 0.035 80 / 0.62), oklch(0.20 0.014 70 / 0.5));
  border: 1px solid oklch(0.78 0.10 80 / 0.45);
  backdrop-filter: blur(8px);
  color: oklch(0.86 0.155 78);
  box-shadow: 0 16px 30px -12px oklch(0 0 0 / 0.6), inset 0 0 18px -6px var(--glow-cyan);
  transform: translateZ(60px);
  animation: tileFloat 6s ease-in-out infinite;
}
.gtile svg { width: 22px; height: 22px; }
.gtile.t2 { animation-delay: -1.5s; color: var(--green); }
.gtile.t3 { animation-delay: -3s; }
.gtile.t4 { animation-delay: -4.5s; color: var(--green); }
@keyframes tileFloat { 0%,100%{ transform: translateZ(60px) translateY(0); } 50%{ transform: translateZ(60px) translateY(-14px); } }

.growth-chip {
  position: absolute;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  color: oklch(0.18 0.04 70);
  background: var(--grad);
  padding: 0.3em 0.6em; border-radius: 6px;
  box-shadow: 0 10px 24px -8px var(--glow-cyan);
  transform: translateZ(80px);
  animation: floatChip 5s ease-in-out infinite;
}
.growth-chip.g2 { animation-delay: 1.2s; }
@keyframes floatChip { 0%,100%{ transform: translateZ(80px) translateY(0);} 50%{ transform: translateZ(80px) translateY(-8px);} }
@media (prefers-reduced-motion: reduce) {
  .growth-bar, .growth-arrow, .growth-chip, .growth-float, .gtile, .growth-pulse { animation: none !important; }
}

/* ============================================================
   HERO PRODUCT SCENE  (Option A — realistic laptop + phone)
   ============================================================ */
.pstage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 0.9; perspective: 1500px; }
.pstage::before { content:""; position:absolute; inset:-8% -4% -2% -4%;
  background: radial-gradient(54% 48% at 64% 30%, var(--glow-cyan), transparent 60%), radial-gradient(50% 46% at 28% 72%, var(--glow-emerald), transparent 60%);
  filter: blur(10px); pointer-events:none; }
.ptilt { position:absolute; inset:0; transform-style:preserve-3d; transition: transform 0.3s var(--ease); }
.pfloat { position:absolute; inset:0; transform-style:preserve-3d; animation: pFloat 9s ease-in-out infinite; }
@keyframes pFloat { 0%,100%{ transform: translateY(0) rotateZ(0); } 50%{ transform: translateY(-10px) rotateZ(-0.4deg); } }
@media (prefers-reduced-motion: reduce){ .pfloat{ animation:none !important; } .fcard{ animation:none !important; } }

/* ----- shared screen primitives ----- */
.pstage .row2 { display:flex; }
.pstage .col { display:flex; flex-direction:column; }
.s-line { height:5px; border-radius:3px; background: var(--line); }
.s-amber { background: var(--grad); }
.s-green { background: oklch(0.7 0.13 162); }

/* ----- LAPTOP ----- */
.laptop { position:absolute; left:0; top:8%; width:84%; transform: translateZ(0); }
.lt-lid { position:relative; width:100%; aspect-ratio:16/10.2; border-radius:14px 14px 6px 6px;
  background: linear-gradient(155deg, oklch(0.30 0.012 75), oklch(0.17 0.01 70));
  border:1px solid oklch(0.55 0.03 75 / 0.55); padding:8px;
  box-shadow: 0 40px 70px -24px oklch(0 0 0 / 0.85), inset 0 0 30px -10px oklch(0.7 0.1 80 / 0.18); }
.lt-screen { position:relative; width:100%; height:100%; border-radius:7px; overflow:hidden; background: oklch(0.11 0.008 70); }
.lt-gloss { position:absolute; inset:0; border-radius:7px; pointer-events:none;
  background: linear-gradient(120deg, oklch(1 0 0 / 0.10) 0%, transparent 32%, transparent 100%); }
.lt-hinge { width:104%; height:8px; margin-left:-2%; border-radius:0 0 3px 3px;
  background: linear-gradient(180deg, oklch(0.34 0.012 75), oklch(0.2 0.01 70)); }
.lt-base { width:116%; height:13px; margin-left:-8%; border-radius:0 0 14px 14px;
  background: linear-gradient(180deg, oklch(0.30 0.012 75), oklch(0.14 0.01 70));
  box-shadow: 0 26px 34px -16px oklch(0 0 0 / 0.8); position:relative; }
.lt-base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:18%; height:4px; border-radius:0 0 5px 5px; background: oklch(0.18 0.01 70); }

/* ----- admin dashboard UI ----- */
.dash { position:absolute; inset:0; display:flex; font-family:var(--body); }
.dash .sb { width:23%; background: oklch(0.145 0.008 70); border-right:1px solid var(--line); padding:9px 7px; display:flex; flex-direction:column; gap:9px; }
.dash .sb .brand2 { display:flex; align-items:center; gap:5px; }
.dash .sb .brand2 .m { width:13px; height:13px; border-radius:4px; background:var(--grad); }
.dash .sb .brand2 b { font-family:var(--display); font-weight:800; font-size:8px; color:var(--text); }
.dash .nav2 { display:flex; flex-direction:column; gap:4px; margin-top:2px; }
.dash .nav2 i { display:flex; align-items:center; gap:5px; font-size:7.5px; color:var(--text-mute); padding:4px 5px; border-radius:5px; font-style:normal; }
.dash .nav2 i svg { width:9px; height:9px; }
.dash .nav2 i.on { background: oklch(0.3 0.05 80 / 0.3); color:var(--cyan); }
.dash .mn { flex:1; padding:9px 10px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.dash .tb { display:flex; align-items:center; justify-content:space-between; }
.dash .tb b { font-family:var(--display); font-weight:800; font-size:10px; color:var(--text); }
.dash .tb .av { width:14px; height:14px; border-radius:50%; background: var(--grad); }
.dash .tb .sr { width:38%; height:11px; border-radius:6px; background: oklch(0.17 0.01 70); border:1px solid var(--line); margin-left:auto; margin-right:6px; }
.dash .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dash .kpi { border:1px solid var(--line); border-radius:7px; padding:6px; background: oklch(0.155 0.01 70); }
.dash .kpi .l { font-size:6.5px; color:var(--text-mute); font-family:var(--mono); }
.dash .kpi .v { font-family:var(--display); font-weight:800; font-size:11px; color:var(--text); margin-top:2px; }
.dash .kpi.hot { border-color: oklch(0.7 0.12 80 / 0.5); background: oklch(0.3 0.06 80 / 0.18); }
.dash .kpi.hot .v { color: var(--cyan); }
.dash .chart { flex:1; min-height:52px; border:1px solid var(--line); border-radius:7px; background: oklch(0.13 0.008 70); padding:8px; position:relative; overflow:hidden; }
.dash .chart .gl { position:absolute; left:8px; right:8px; height:1px; background:var(--line-soft); }
.dash .chart svg { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); overflow:visible; }
.dash .tbl { display:flex; flex-direction:column; gap:4px; }
.dash .tr { display:flex; align-items:center; gap:6px; }
.dash .tr .d { width:9px; height:9px; border-radius:3px; background: oklch(0.3 0.04 80 / 0.6); }
.dash .tr .g { flex:1; height:5px; border-radius:3px; background:var(--line); }
.dash .tr .p { width:26px; height:9px; border-radius:5px; background: oklch(0.3 0.07 162 / 0.4); }

/* ----- PHONE ----- */
.phone { position:absolute; right:-1%; bottom:0; width:31%; z-index:4; }
.ph-body { position:relative; width:100%; aspect-ratio:9/19.2; border-radius:26px;
  background: linear-gradient(155deg, oklch(0.32 0.012 75), oklch(0.16 0.01 70));
  border:1px solid oklch(0.55 0.03 75 / 0.6); padding:5px;
  box-shadow: 0 46px 64px -22px oklch(0 0 0 / 0.9), inset 0 0 20px -8px oklch(0.7 0.1 80 / 0.2); }
.ph-screen { position:relative; width:100%; height:100%; border-radius:21px; overflow:hidden; background: oklch(0.12 0.008 70); display:flex; flex-direction:column; }
.ph-island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:32%; height:8px; border-radius:6px; background:#000; z-index:3; }
.ph-gloss { position:absolute; inset:0; border-radius:21px; pointer-events:none; background: linear-gradient(125deg, oklch(1 0 0 / 0.10), transparent 30%); }
.app-hd { background: var(--grad); padding:20px 10px 12px; border-radius:0 0 18px 18px; }
.app-hd .gr { font-family:var(--display); font-weight:800; font-size:9px; color: oklch(0.2 0.05 60); }
.app-hd .sub { font-size:6.5px; color: oklch(0.25 0.05 60 / 0.8); font-family:var(--mono); margin-top:1px; }
.app-hd .sb2 { margin-top:8px; height:14px; border-radius:8px; background: oklch(1 0 0 / 0.25); }
.app-bd { flex:1; padding:9px; display:flex; flex-direction:column; gap:7px; }
.app-bd .sec { font-size:7px; font-family:var(--mono); color:var(--text-mute); letter-spacing:.08em; }
.app-card { display:flex; gap:7px; align-items:center; border:1px solid var(--line); border-radius:9px; padding:6px; background: oklch(0.155 0.01 70); }
.app-card .th { width:26px; height:26px; border-radius:7px; background: linear-gradient(140deg, oklch(0.4 0.06 80), oklch(0.5 0.1 165)); flex-shrink:0; }
.app-card .ct { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.app-card .pill { font-size:6px; font-family:var(--mono); padding:2px 5px; border-radius:5px; background: oklch(0.3 0.07 162 / 0.4); color: oklch(0.8 0.13 162); white-space:nowrap; }
.app-nav { height:11%; background: oklch(0.155 0.01 70); border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:center; }
.app-nav span { width:13px; height:13px; border-radius:5px; color:var(--text-mute); display:grid; place-items:center; }
.app-nav span svg { width:13px; height:13px; }
.app-nav span.on { color: var(--cyan); }

/* ----- floating data cards ----- */
.fcard { position:absolute; display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:13px;
  background: linear-gradient(160deg, oklch(0.30 0.03 80 / 0.72), oklch(0.17 0.012 70 / 0.62));
  backdrop-filter: blur(10px); border:1px solid oklch(0.74 0.09 80 / 0.42);
  box-shadow: 0 18px 34px -14px oklch(0 0 0 / 0.7); transform: translateZ(90px); z-index:6; animation: fcardFloat 6s ease-in-out infinite; }
.fcard .ic { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background: oklch(0.3 0.05 80 / 0.5); color:var(--cyan); flex-shrink:0; }
.fcard .ic.grn { color: var(--green); }
.fcard .ic svg { width:16px; height:16px; }
.fcard .tx { display:flex; flex-direction:column; gap:1px; }
.fcard .tx .l { font-family:var(--mono); font-size:.6rem; color:var(--text-mute); line-height:1.2; white-space:nowrap; }
.fcard .tx .v { font-family:var(--display); font-weight:800; font-size:.95rem; color:var(--text); line-height:1.1; white-space:nowrap; }
.fcard.f-a { top:-2%; right:6%; animation-delay:-1s; }
.fcard.f-b { bottom:16%; left:-4%; animation-delay:-3.5s; }
@keyframes fcardFloat { 0%,100%{ transform: translateZ(90px) translateY(0);} 50%{ transform: translateZ(90px) translateY(-13px);} }

@media (max-width: 880px){ .pstage { max-width: 460px; } }

/* ---- In-site demo viewer (modal) ---- */
.demo-modal { position:fixed; inset:0; z-index:300; display:none; flex-direction:column;
  background: color-mix(in oklch, var(--bg-deep) 90%, transparent); backdrop-filter: blur(10px); }
.demo-modal.open { display:flex; animation: fadein 0.3s var(--ease); }
.demo-modal .dm-bar { display:flex; align-items:center; gap:12px; padding:11px clamp(14px,3vw,22px); background:var(--bg); border-bottom:1px solid var(--line); }
.demo-modal .dm-title { font-family:var(--display); font-weight:700; font-size:1rem; }
.demo-modal .dm-right { margin-left:auto; display:flex; gap:8px; }
.demo-modal .dm-frame { flex:1; padding:clamp(0px,2vw,22px); display:flex; }
.demo-modal iframe { flex:1; width:100%; height:100%; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-lg); }
@media (max-width:680px){ .demo-modal .dm-frame { padding:0; } .demo-modal iframe { border-radius:0; border:0; } }

/* ---- Hero "motion with purpose": app booking -> admin system -> growth (5s loop) ---- */
.hero-flow { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:7; }
.dash-live { width:5px; height:5px; border-radius:50%; background:#54E8A8; margin-left:6px; box-shadow:0 0 0 0 rgba(84,232,168,.5); animation: liveDot 2.2s ease-out infinite; }
@keyframes liveDot { 0%{ box-shadow:0 0 0 0 rgba(84,232,168,.5);} 70%{ box-shadow:0 0 0 5px rgba(84,232,168,0);} 100%{ box-shadow:0 0 0 0 rgba(84,232,168,0);} }
.kpi-plus { position:absolute; top:4px; right:6px; font-family:var(--display); font-weight:800; font-size:9px; color:var(--green); opacity:0; animation: kpiPlus 5s ease-in-out infinite; }
@keyframes kpiPlus { 0%,55%{ opacity:0; transform:translateY(6px);} 61%{ opacity:1; transform:translateY(0);} 78%,100%{ opacity:0; transform:translateY(-9px);} }
.hero-toast {
  position:absolute; top:13%; left:8%; right:8%; z-index:5;
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(180deg, oklch(0.30 0.03 80 / .96), oklch(0.22 0.02 70 / .96));
  border:1px solid oklch(0.7 0.1 80 / .5); border-radius:8px;
  padding:6px 8px; font-family:var(--body); font-size:7.5px; font-weight:500; color:var(--text);
  box-shadow:0 8px 18px -6px oklch(0 0 0 / .6); opacity:0;
  animation: heroToast 5s ease-in-out infinite;
}
.hero-toast .td { width:7px; height:7px; border-radius:50%; background:var(--grad); flex-shrink:0; }
@keyframes heroToast { 0%,3%{ opacity:0; transform:translateY(8px) scale(.96);} 8%,28%{ opacity:1; transform:none;} 36%,100%{ opacity:0; transform:translateY(-4px);} }
.fcard.f-a { animation: fcardFloat 6s ease-in-out infinite, faPing 5s ease-in-out infinite; }
@keyframes faPing { 0%,58%{ box-shadow:0 18px 34px -14px oklch(0 0 0 / .7);} 64%{ box-shadow:0 18px 34px -14px oklch(0 0 0 / .7), 0 0 0 2px var(--cyan);} 74%,100%{ box-shadow:0 18px 34px -14px oklch(0 0 0 / .7);} }
@media (prefers-reduced-motion: reduce) {
  .hero-flow .flow-pulse, .dash-live, .kpi-plus, .hero-toast { animation: none !important; }
  .kpi-plus { opacity:1; } .hero-toast { display:none; }
  .fcard.f-a { animation: none !important; }
}