/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: 140px; padding-bottom: var(--section-y); overflow: clip; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--grad-mesh); }
.hero-grid-lines {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { max-width: 620px; }
.hero h1 { margin: 22px 0 0; }
.hero .lede { margin-top: 24px; max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-trust { display: flex; align-items: center; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.hero-trust .avatars { display: flex; }
.hero-trust .avatars span {
  width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--bg); margin-left: -12px;
  background-size: cover; background-position: center; box-shadow: var(--shadow-sm);
}
.hero-trust .avatars span:first-child { margin-left: 0; }
.hero-trust small { font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
.hero-trust b { color: var(--ink); display: block; font-size: 14.5px; }
.stars { color: #f5a623; letter-spacing: 2px; font-size: 13px; }
.hero-trust .avatars span:nth-child(1) { background: linear-gradient(135deg,#ff2f63,#11b8d4); }
.hero-trust .avatars span:nth-child(2) { background: linear-gradient(135deg,#3711c0,#11b981); }
.hero-trust .avatars span:nth-child(3) { background: linear-gradient(135deg,#deec61,#2f6bff); }
.hero-trust .avatars span:nth-child(4) { background: linear-gradient(135deg,#f5a623,#e80ef0); }
.hero .dot-pulse { color: var(--teal); }

/* Hero entrance */
.reveal-hero > * { opacity: 0; transform: translateY(24px); }
.reveal-hero.in > * { animation: heroUp .9s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal-hero.in > *:nth-child(1){animation-delay:.05s}
.reveal-hero.in > *:nth-child(2){animation-delay:.14s}
.reveal-hero.in > *:nth-child(3){animation-delay:.23s}
.reveal-hero.in > *:nth-child(4){animation-delay:.32s}
.reveal-hero.in > *:nth-child(5){animation-delay:.41s}
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* ---- Conceptual dashboard ---- */
.hero-visual { position: relative; perspective: 1600px; }
.dash {
  position: relative; border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 20px; transform: rotateY(-13deg) rotateX(5deg); transform-style: preserve-3d;
  transition: transform .4s ease;
}
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dash-head .seg { display:flex; gap:6px; }
.dash-head .seg i { width:10px;height:10px;border-radius:50%;background:var(--border-strong); }
.dash-head .seg i:first-child{ background:#ff5f57 } .dash-head .seg i:nth-child(2){ background:#febc2e } .dash-head .seg i:nth-child(3){ background:#28c840 }
.dash-tabchip { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.dash-balance { padding: 4px 4px 18px; }
.dash-balance label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.dash-balance .amt { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; letter-spacing: -0.04em; margin-top: 4px; }
.dash-balance .amt small { font-size: 1.1rem; color: var(--ink-3); font-weight: 600; }
.dash-balance .delta { display:inline-flex; align-items:center; gap:6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--teal); }
.dash-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 8px 4px 0; }
.dash-chart .bar { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--accent-soft); position: relative; overflow: hidden; }
.dash-chart .bar::after { content:""; position:absolute; inset:auto 0 0 0; height: var(--h,40%); background: var(--grad-cta); border-radius: 6px 6px 3px 3px; transition: height 1s cubic-bezier(.2,.8,.2,1); }
.dash.in .bar::after { height: var(--h); }
.dash-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.dash-mini { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 14px; }
.dash-mini label { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.dash-mini .val { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-top: 5px; }
.dash-mini .ok { color: var(--teal); }

/* Floating glass chips around dashboard */
.float {
  position: absolute; z-index: 3; border-radius: 16px; padding: 13px 15px;
  background: var(--surface-glass); backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 11px;
  will-change: transform;
}
.float .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.float .ic svg { width: 19px; height: 19px; color: #fff; }
.float b { font-family: var(--font-display); font-size: 14px; display: block; line-height: 1.2; }
.float small { font-size: 11.5px; color: var(--ink-3); }
.float-1 { top: -22px; left: -34px; animation: floaty 6s ease-in-out infinite; }
.float-2 { bottom: 34px; left: -52px; animation: floaty 7s ease-in-out infinite .5s; }
.float-3 { top: 40%; right: -40px; animation: floaty 5.5s ease-in-out infinite 1s; }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
.ic-ambar { background: linear-gradient(135deg, #dc9a22, #a86406); } .ic-oro { background: linear-gradient(135deg, #f2d273, #d3a328); } .ic-bronce { background: linear-gradient(135deg, #9c7c3a, #5c440f); }
.ic-emerald { background: linear-gradient(135deg,#9aa53a,#6b7016); } .ic-amber{ background: linear-gradient(135deg,#e0a020,#b8780c); }