/* LANDING PIXEL · TIKTOK PLATFORM V4
   Buffer-inspired calm visual system. Content/structure preserved. */

:root {
  --bg: #f7f7f5;
  --bg-2: #f1f2f8;
  --surface: #ffffff;
  --surface-2: #f8f8ff;
  --text: #231f20;
  --text-mute: #5f5b5d;
  --text-dim: #8a8587;
  --border: #e5e3de;
  --border-2: #d7d4ce;
  --blue: #2c4bff;
  --blue-light: #abb7ff;
  --blue-soft: #eef0ff;
  --navy: #121e66;
  --yellow: #fade2a;
  --orange: #ff9b6b;
  --pink: #f3afb9;
  --wa: #25d366;
  --wa-dark: #128c4a;
  --grad: linear-gradient(100deg, #2c4bff 0%, #6b81ff 48%, #121e66 100%);
  --grad-soft: linear-gradient(135deg, rgba(44,75,255,.09), rgba(243,175,185,.18), rgba(250,222,42,.16));
  --shadow-sm: 0 1px 2px rgba(35,31,32,.04), 0 6px 20px rgba(35,31,32,.04);
  --shadow: 0 18px 50px rgba(35,31,32,.09);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --dur: 420ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
html, body { color: var(--text); }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.008em;
  overflow-x: hidden;
  background:
    radial-gradient(700px 380px at 104% 8%, rgba(171,183,255,.34), transparent 66%),
    radial-gradient(620px 340px at -8% 30%, rgba(250,222,42,.22), transparent 70%),
    var(--bg);
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--yellow); color: var(--text); }

.grad {
  color: var(--blue);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad.sm { font-size: inherit; }

/* ================================================== HEADER */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  background: rgba(247,247,245,.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(215,212,206,.72);
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease);
}
.app-header.scrolled { background: rgba(255,255,255,.94); box-shadow: 0 8px 28px rgba(35,31,32,.06); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .045em; font-size: 13px; }
.brand-dot {
  width: 12px; height: 12px; border-radius: 4px;
  background: var(--blue);
  box-shadow: 6px 6px 0 rgba(250,222,42,.75);
  transform: rotate(-8deg);
  animation: brandFloat 3.8s ease-in-out infinite;
}
@keyframes brandFloat { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-2px); } }
.brand-name { color: var(--text); }
.head-meta { display: flex; align-items: center; gap: 8px; }
.tag, .status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: 999px;
  letter-spacing: .015em;
}
.tag { display: none; color: var(--blue); background: var(--blue-soft); border: 1px solid #dbe0ff; }
.status { color: var(--navy); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(44,75,255,.10); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.86); } }
@media (min-width: 720px) { .tag { display: inline-flex; } }

/* ================================================== APP */
.app { display: block; max-width: 1240px; margin: 0 auto; padding: 0 18px; }

/* ================================================== HERO */
.hero { position: relative; padding: 34px 0 42px; overflow: hidden; isolation: isolate; }
.hero::after {
  content: ""; position: absolute; inset: 14px 0 8px; z-index: -2;
  border: 1px solid rgba(215,212,206,.78); border-radius: 32px;
  background: rgba(255,255,255,.68); box-shadow: var(--shadow-sm);
}
.hero-bg { position: absolute; inset: 14px 0 8px; z-index: -1; pointer-events: none; overflow: hidden; border-radius: 32px; }
.grid-mask {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(44,75,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,75,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
}
.glow { position: absolute; border-radius: 999px; filter: blur(0); opacity: 1; }
.glow.cyan { width: 320px; height: 220px; background: rgba(171,183,255,.50); top: -85px; right: 7%; transform: rotate(-14deg); }
.glow.magenta { width: 260px; height: 190px; background: rgba(250,222,42,.45); bottom: -90px; left: 8%; transform: rotate(12deg); }
.noise { display: none; }
.hero-inner { position: relative; padding: 22px 20px; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pill {
  font-size: 10px; font-weight: 800; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text-mute);
  letter-spacing: .055em; text-transform: uppercase; box-shadow: var(--shadow-sm);
  transition: all var(--dur) var(--ease);
}
.pill:nth-child(1) { background: var(--blue-soft); color: var(--blue); border-color: #dbe0ff; }
.pill:nth-child(2) { background: #fff9cf; color: #665700; border-color: #f2e787; }
.pill:nth-child(3) { background: #fdebef; color: #8e4450; border-color: #f6cbd2; }
.pill:hover { transform: translateY(-2px); }
.h1 {
  font-size: clamp(35px, 4.6vw, 64px); line-height: .99; letter-spacing: -.045em;
  font-weight: 850; margin-bottom: 15px; max-width: 19ch; color: var(--text);
}
.lead { font-size: clamp(14px,1.25vw,16px); line-height: 1.6; color: var(--text-mute); max-width: 62ch; margin-bottom: 22px; }

/* FUNNEL */
.funnel {
  position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 9px;
  padding: 12px; margin: 0 0 20px; background: rgba(255,255,255,.86);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm);
}
.funnel-line { position: absolute; top: 50%; left: 36px; right: 36px; height: 3px; background: linear-gradient(90deg,var(--blue),var(--blue-light),var(--yellow)); transform: translateY(-50%); border-radius: 999px; opacity: .28; }
.funnel-pulse { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 8px rgba(44,75,255,.08); animation: travel 4.6s linear infinite; }
@keyframes travel { 0% { left:0; opacity:0 } 10%,90% { opacity:1 } 100% { left:100%; opacity:0 } }
.step { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 8px; text-align: center; box-shadow: 0 3px 10px rgba(35,31,32,.035); transition: all var(--dur) var(--ease); }
.step:hover { border-color: #b9c3ff; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(44,75,255,.08); }
.step-icon { width: 28px; height: 28px; margin: 0 auto 7px; color: var(--blue); background: var(--blue-soft); border-radius: 9px; padding: 5px; }
.step-icon svg { width: 100%; height: 100%; }
.step-name { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--text); margin-bottom: 1px; }
.step-state { font-size: 9px; color: var(--text-dim); letter-spacing: .055em; text-transform: uppercase; }
@media (max-width:760px) {
  .funnel { grid-template-columns: repeat(5,minmax(120px,1fr)); overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .funnel::-webkit-scrollbar { display:none; }
  .step { scroll-snap-align:start; min-width:120px; }
  .funnel-line { left:60px; right:60px; }
}

/* CTA */
.cta-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cta {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 48px; padding: 12px 20px; font-size:14px; font-weight:800;
  border-radius: 12px; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
  cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden;
}
.cta svg { width:17px; height:17px; }
.cta.primary { background: var(--blue); color:#fff; border:1px solid var(--blue); box-shadow: 0 9px 24px rgba(44,75,255,.22); }
.cta.primary:hover { transform:translateY(-3px); background:#213ddd; border-color:#213ddd; box-shadow:0 14px 30px rgba(44,75,255,.30); }
.cta.primary.block { width:100%; }
.cta.primary.big { padding:15px 26px; font-size:16px; }
.cta.secondary { background:#fff; color:var(--text); border:1px solid var(--border-2); box-shadow:var(--shadow-sm); }
.cta.secondary:hover { transform:translateY(-3px); border-color:#aeb9ff; color:var(--blue); box-shadow:0 12px 28px rgba(44,75,255,.10); }

.cta.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #19b956 100%);
  color:#fff; border:1px solid #19b956;
  box-shadow: 0 10px 25px rgba(37,211,102,.27), 0 0 0 0 rgba(37,211,102,.34);
  isolation:isolate;
  animation: waPulse 2.2s ease-in-out infinite;
}
.cta.whatsapp::before {
  content:""; position:absolute; top:-80%; left:-30%; width:35%; height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transform:rotate(18deg); animation:waSheen 3.1s ease-in-out infinite; z-index:-1;
}
.cta.whatsapp::after { content:""; position:absolute; inset:-5px; border:2px solid rgba(37,211,102,.28); border-radius:15px; animation:waRing 2.2s ease-out infinite; pointer-events:none; }
.cta.whatsapp:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px rgba(37,211,102,.36); }
.wa-icon { width:25px; height:25px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.wa-icon svg { width:25px; height:25px; }
@keyframes waPulse { 0%,100% { box-shadow:0 10px 25px rgba(37,211,102,.27),0 0 0 0 rgba(37,211,102,.25); } 50% { box-shadow:0 12px 30px rgba(37,211,102,.35),0 0 0 8px rgba(37,211,102,0); } }
@keyframes waSheen { 0%,52% { left:-35%; opacity:0; } 58% { opacity:1; } 82%,100% { left:125%; opacity:0; } }
@keyframes waRing { 0% { opacity:.7; transform:scale(.98); } 75%,100% { opacity:0; transform:scale(1.08); } }

/* ================================================== SECTION TYPOGRAPHY */
.radar, .diag, .video-section, .how, .presence, .final-cta { position:relative; }
.radar { padding: 38px 0; }
.section-head { margin-bottom:18px; }
.h2 { font-size:clamp(28px,3.1vw,44px); line-height:1.05; letter-spacing:-.035em; font-weight:850; margin-bottom:8px; }
.section-sub { font-size:clamp(13px,1.2vw,15px); color:var(--text-mute); max-width:62ch; }

/* DASHBOARD */
.dashboard { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; box-shadow:var(--shadow-sm); overflow:hidden; }
.dashboard::before { content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:.55; pointer-events:none; }
.dash-card { position:relative; background:rgba(255,255,255,.9); border:1px solid var(--border); border-radius:16px; padding:15px 14px 16px; transition:all var(--dur) var(--ease); }
.dash-card:hover { transform:translateY(-3px); border-color:#c6ceff; box-shadow:0 14px 28px rgba(44,75,255,.08); }
.dash-num { font-size:11px; font-weight:900; letter-spacing:.1em; color:var(--blue); margin-bottom:7px; }
.dash-title { font-size:17px; font-weight:850; letter-spacing:-.015em; margin-bottom:4px; }
.dash-body { font-size:12.5px; line-height:1.45; color:var(--text-mute); margin-bottom:12px; }
.dash-bar { height:5px; background:#ecebea; border-radius:999px; overflow:hidden; }
.dash-bar span { display:block; height:100%; width:30%; border-radius:999px; background:var(--blue); animation:barFill 3.2s ease-in-out infinite; }
.dash-card:nth-child(2) .dash-bar span { width:48%; background:#6b81ff; animation-delay:.3s; }
.dash-card:nth-child(3) .dash-bar span { width:66%; background:var(--orange); animation-delay:.6s; }
.dash-card:nth-child(4) .dash-bar span { width:86%; background:var(--yellow); animation-delay:.9s; }
@keyframes barFill { 0%,100% { opacity:.68 } 50% { opacity:1 } }
@media (max-width:760px) { .dashboard { grid-template-columns:repeat(2,1fr); } }

/* MINI DIAGRAM */
.diag { padding:30px 0; }
.diag-head, .how-head, .presence-head { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.diag-label { font-size:10px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; color:var(--navy); padding:6px 10px; border-left:4px solid var(--blue); background:var(--blue-soft); border-radius:0 10px 10px 0; }
.diag-flow { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); }
.diag-node { font-size:12px; font-weight:700; padding:7px 11px; background:#fafafa; border:1px solid var(--border); border-radius:9px; color:var(--text); }
.diag-arrow { color:var(--blue); font-weight:900; font-size:14px; }
.diag-flow .diag-node:last-child { border-color:#a9eec4; color:var(--wa-dark); background:#effdf4; }

/* VIDEO */
.video-section { padding:34px 0 38px; }
.video-grid { display:grid; grid-template-columns:1.8fr 1fr; gap:16px; align-items:stretch; }
.video-frame { position:relative; background:#101010; border-radius:22px; overflow:hidden; border:1px solid #d4d8ff; box-shadow:0 22px 54px rgba(35,31,32,.13), 0 0 0 5px rgba(44,75,255,.045); }
.video-frame::before { content:""; position:absolute; left:18px; right:18px; top:0; height:4px; border-radius:0 0 8px 8px; background:linear-gradient(90deg,var(--blue),var(--pink),var(--yellow)); z-index:2; }
.video-frame video { width:100%; aspect-ratio:16/9; background:#000; object-fit:cover; }
.video-side { display:flex; flex-direction:column; gap:11px; padding:18px; background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-sm); }
.side-tag { font-size:10px; font-weight:850; letter-spacing:.13em; color:var(--blue); display:inline-flex; align-items:center; gap:7px; align-self:flex-start; padding:6px 9px; background:var(--blue-soft); border:1px solid #dbe0ff; border-radius:999px; }
.side-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(44,75,255,.08); animation:pulse 1.8s ease-in-out infinite; }
.checks { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:2px 0; }
.checks li { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--text); }
.tick { width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--yellow); color:var(--text); font-size:11px; font-weight:900; }
.side-text { font-size:12.5px; line-height:1.55; color:var(--text-mute); }
@media (max-width:760px) { .video-grid { grid-template-columns:1fr; } }

/* HOW */
.how { padding:30px 0; }
.how-band { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.how-item { position:relative; display:flex; align-items:center; gap:10px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:15px; box-shadow:var(--shadow-sm); transition:all var(--dur) var(--ease); cursor:default; }
.how-item:hover { border-color:#c3cbff; transform:translateY(-3px); box-shadow:0 14px 28px rgba(44,75,255,.08); }
.how-item::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); font-size:11px; color:#fff; background:var(--navy); padding:5px 9px; border-radius:7px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 180ms var(--ease); }
.how-item:hover::after { opacity:1; }
.how-num { font-size:11px; font-weight:900; letter-spacing:.08em; color:var(--blue); }
.how-name { font-size:14px; font-weight:800; }
@media (max-width:760px) { .how-band { grid-template-columns:repeat(2,1fr); } }

/* PRESENCE */
.presence { padding:30px 0; }
.presence-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.presence-item { display:flex; align-items:center; gap:11px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:15px; box-shadow:var(--shadow-sm); transition:all var(--dur) var(--ease); }
.presence-item:hover { border-color:#bdc6ff; transform:translateY(-3px); box-shadow:0 14px 28px rgba(44,75,255,.08); }
.pres-icon { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:var(--blue-soft); border:1px solid #dce1ff; color:var(--blue); flex-shrink:0; }
.pres-icon svg { width:17px; height:17px; }
.pres-fb { color:#1877f2; background:#eef6ff; border-color:#d6e8ff; }
.pres-col { display:flex; flex-direction:column; gap:1px; min-width:0; }
.pres-kind { font-size:10px; letter-spacing:.10em; color:var(--text-dim); text-transform:uppercase; font-weight:800; }
.pres-val { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px) { .presence-row { grid-template-columns:1fr; } }

/* FINAL CTA */
.final-cta { padding:34px 0 42px; }
.final-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:36px 24px; background:var(--navy); color:#fff; border:1px solid var(--navy); border-radius:26px; box-shadow:0 24px 54px rgba(18,30,102,.20); }
.final-card::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(171,183,255,.24); top:-170px; right:-70px; }
.final-card::after { content:""; position:absolute; width:210px; height:210px; border-radius:50%; background:rgba(250,222,42,.20); bottom:-150px; left:-40px; }
.final-card > * { position:relative; z-index:1; }
.final-card .h2 { margin-bottom:4px; max-width:25ch; }
.final-card .grad { color:#fff; background:none; -webkit-text-fill-color:#fff; }
.final-text { font-size:14px; color:rgba(255,255,255,.75); max-width:50ch; }
.final-card .cta.primary { background:#fff; color:var(--navy); border-color:#fff; box-shadow:none; }
.final-card .cta.primary:hover { background:var(--yellow); border-color:var(--yellow); }

/* FOOTER */
.foot { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0 32px; border-top:1px solid var(--border); font-size:11px; color:var(--text-dim); letter-spacing:.045em; }

/* STICKY MOBILE CTA (original Telegram CTA preserved) */
.sticky-cta { display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:60; background:var(--blue); color:#fff; font-weight:800; font-size:14px; padding:14px 18px; border-radius:13px; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 34px rgba(44,75,255,.30); transition:transform 240ms var(--ease), opacity 240ms var(--ease); border:1px solid var(--blue); }
.sticky-cta svg { width:16px; height:16px; }
.sticky-cta.is-shown { display:inline-flex; animation:slideUp 380ms var(--ease); }
.sticky-cta.is-hidden-near-footer { opacity:0; transform:translateY(20px); pointer-events:none; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { body { padding-bottom:84px; } }

/* REVEAL */
.reveal, .hero-inner > *, .dash-card, .step, .how-item, .presence-item { opacity:0; transform:translateY(12px); transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
.reveal.is-visible, .hero-inner > *.is-visible, .dash-card.is-visible, .step.is-visible, .how-item.is-visible, .presence-item.is-visible { opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width: 620px) {
  .app-header { min-height:58px; padding:0 13px; }
  .brand { font-size:12px; }
  .status { padding:5px 8px; font-size:10px; }
  .app { padding:0 12px; }
  .hero { padding:18px 0 28px; }
  .hero::after, .hero-bg { inset:8px 0 4px; border-radius:24px; }
  .hero-inner { padding:22px 15px; }
  .h1 { font-size:clamp(32px,11vw,47px); max-width:100%; }
  .h1 br { display:none; }
  .cta-row { display:grid; grid-template-columns:1fr; }
  .cta { width:100%; }
  .dashboard { grid-template-columns:1fr 1fr; padding:9px; gap:8px; }
  .dash-card { padding:13px 11px; }
  .how-band { grid-template-columns:1fr 1fr; }
  .foot { flex-direction:column; align-items:flex-start; }
}
@media (min-width:720px) {
  .app { padding:0 28px; }
  .hero-inner { padding:30px; }
  .radar,.diag,.video-section,.how,.presence,.final-cta { padding-top:48px; padding-bottom:48px; }
}
@media (min-width:1024px) {
  .app { padding:0 36px; }
  .hero { padding:42px 0 54px; }
  .hero-inner { padding:38px 42px; }
  .radar,.diag,.video-section,.how,.presence,.final-cta { padding-top:56px; padding-bottom:56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal, .hero-inner > *, .dash-card, .step, .how-item, .presence-item { opacity:1; transform:none; }
}

/* ================================================================
   LANDING PIXEL · V5 — BUFFER-INSPIRED METALLIC SALES SKIN
   Visual-only override. Content, layout density, tracking and logic preserved.
   ================================================================ */
:root {
  --bg: #f4f3ef;
  --bg-2: #eceef3;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --text: #15161a;
  --text-mute: #555963;
  --text-dim: #7b808b;
  --border: #d7dae1;
  --border-2: #c6cad4;
  --blue: #2c4bff;
  --blue-light: #8fa1ff;
  --blue-soft: #eef1ff;
  --navy: #11173f;
  --yellow: #f7df1e;
  --orange: #ff7b54;
  --pink: #8f7cff;
  --wa: #25d366;
  --wa-dark: #128c4a;
  --metal-1: #ffffff;
  --metal-2: #f2f3f6;
  --metal-3: #dfe2e8;
  --metal-edge: #bcc1cc;
  --grad: linear-gradient(96deg, #2c4bff 0%, #6b7fff 48%, #171f66 100%);
  --grad-soft: linear-gradient(135deg, rgba(44,75,255,.10), rgba(143,124,255,.08), rgba(247,223,30,.12));
  --shadow-sm: 0 1px 0 rgba(255,255,255,.95) inset, 0 7px 20px rgba(17,23,63,.06);
  --shadow: 0 24px 60px rgba(17,23,63,.13);
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(760px 420px at 104% 4%, rgba(44,75,255,.16), transparent 68%),
    radial-gradient(680px 420px at -8% 28%, rgba(247,223,30,.16), transparent 72%),
    linear-gradient(180deg, #f8f7f3 0%, #f1f2f5 52%, #f7f6f2 100%);
}

/* Header: Buffer calm + metallic edge */
.app-header {
  background: rgba(250,249,246,.90);
  border-bottom: 1px solid #d2d5dc;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.app-header.scrolled {
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 32px rgba(17,23,63,.08), 0 1px 0 #fff inset;
}
.brand-dot {
  background: linear-gradient(145deg,#5f76ff,#2444ff);
  box-shadow: 6px 6px 0 rgba(247,223,30,.88), 0 5px 12px rgba(44,75,255,.24);
}
.status {
  background: linear-gradient(180deg,#fff,#eef0f4);
  border-color:#cfd3dc;
  box-shadow: 0 1px 0 #fff inset, 0 6px 16px rgba(17,23,63,.07);
}
.tag {
  background: linear-gradient(180deg,#f7f8ff,#e9edff);
  border-color:#cfd6ff;
}

/* Hero becomes a premium metallic sales panel */
.hero::after {
  border: 1px solid var(--metal-edge);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(246,247,250,.97) 46%, rgba(226,229,236,.94) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(177,182,194,.35) inset,
    0 26px 62px rgba(17,23,63,.13);
}
.hero-bg {
  border: 1px solid rgba(255,255,255,.72);
}
.grid-mask {
  background-image:
    linear-gradient(rgba(44,75,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,75,255,.045) 1px, transparent 1px);
}
.glow.cyan {
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(94,118,255,.33) 42%, rgba(44,75,255,.11) 72%, transparent 74%);
  box-shadow: inset 0 0 42px rgba(255,255,255,.7), 0 24px 70px rgba(44,75,255,.13);
}
.glow.magenta {
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.9), rgba(247,223,30,.45) 42%, rgba(247,223,30,.12) 75%, transparent 78%);
}
.h1 { color:#121319; text-shadow: 0 1px 0 #fff; }
.grad {
  background: linear-gradient(100deg,#2444ff 0%,#566fff 40%,#11173f 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.pill {
  background: linear-gradient(180deg,#fff,#eceef3);
  border-color:#cfd3db;
  color:#3c414b;
  box-shadow: 0 1px 0 #fff inset, 0 6px 14px rgba(17,23,63,.055);
}
.pill:nth-child(1) { background:linear-gradient(180deg,#f7f8ff,#e7ebff); color:#2444ff; border-color:#cbd3ff; }
.pill:nth-child(2) { background:linear-gradient(180deg,#fffceb,#f8e964); color:#564b00; border-color:#e8d747; }
.pill:nth-child(3) { background:linear-gradient(180deg,#f8f7ff,#e8e4ff); color:#5a49bd; border-color:#d6cfff; }

/* Metallic cards */
.funnel, .dashboard, .diag-flow, .video-side, .how-item, .presence-item {
  background: linear-gradient(145deg,#ffffff 0%,#f8f9fb 48%,#eceef2 100%);
  border-color:#cfd3dc;
  box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(183,188,199,.25) inset, 0 14px 34px rgba(17,23,63,.075);
}
.step, .dash-card {
  background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(241,243,247,.96));
  border-color:#d2d5dd;
  box-shadow: 0 1px 0 #fff inset, 0 5px 16px rgba(17,23,63,.055);
}
.step:hover, .dash-card:hover, .how-item:hover, .presence-item:hover {
  border-color:#9eabff;
  box-shadow: 0 1px 0 #fff inset, 0 16px 34px rgba(44,75,255,.13);
}
.step-icon, .pres-icon {
  background: linear-gradient(145deg,#f7f8ff,#e2e7ff);
  border:1px solid #cbd3ff;
  box-shadow:0 1px 0 #fff inset;
}
.funnel-line {
  background: linear-gradient(90deg,#2c4bff 0%,#8fa1ff 48%,#f7df1e 100%);
  opacity:.48;
}

/* CTAs: more sales-oriented without changing wording */
.cta {
  border-radius: 13px;
  letter-spacing:-.005em;
}
.cta.primary {
  background: linear-gradient(180deg,#4562ff 0%,#2c4bff 55%,#233ed7 100%);
  border-color:#203ddc;
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset, 0 12px 28px rgba(44,75,255,.30);
}
.cta.primary::before {
  content:"";
  position:absolute;
  left:12%; right:12%; top:1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
}
.cta.primary:hover {
  background: linear-gradient(180deg,#5670ff,#2948f5 55%,#1e36c5);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 34px rgba(44,75,255,.38);
}
.cta.secondary {
  background:linear-gradient(180deg,#fff,#eceef2);
  border-color:#c7cbd4;
  box-shadow:0 1px 0 #fff inset,0 8px 18px rgba(17,23,63,.08);
}

.cta.whatsapp {
  background: linear-gradient(180deg,#36df76 0%,#25d366 50%,#18ad50 100%);
  border-color:#149c47;
  box-shadow:0 1px 0 rgba(255,255,255,.36) inset,0 12px 30px rgba(37,211,102,.34),0 0 0 0 rgba(37,211,102,.26);
}

/* Section labels with stronger marketing color hierarchy */
.diag-label, .side-tag {
  color:#233ed7;
  background:linear-gradient(180deg,#f8f9ff,#e8ecff);
  border-color:#cbd3ff;
}
.diag-label { border-left-color:#2c4bff; }
.dash-bar { background:#dfe2e8; box-shadow: inset 0 1px 2px rgba(17,23,63,.08); }
.dash-card:nth-child(3) .dash-bar span { background:#ff7b54; }
.dash-card:nth-child(4) .dash-bar span { background:#f7df1e; }

/* Video frame: dark gunmetal */
.video-frame {
  background:linear-gradient(145deg,#252832,#090b10);
  border-color:#aeb5c3;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 26px 60px rgba(17,23,63,.22),0 0 0 5px rgba(44,75,255,.055);
}
.video-frame::before {
  background:linear-gradient(90deg,#2c4bff 0%,#8f7cff 52%,#f7df1e 100%);
}

/* Final CTA: deep premium Buffer-like blue/navy */
.final-card {
  background:
    radial-gradient(420px 220px at 95% -10%, rgba(116,137,255,.30), transparent 72%),
    linear-gradient(135deg,#151d5a 0%,#10163e 54%,#0a0f2c 100%);
  border-color:#28327a;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 28px 70px rgba(17,23,63,.30);
}
.final-card .cta.primary {
  background:linear-gradient(180deg,#fff,#edf0f5);
  color:#11173f;
  border-color:#d9dce3;
}
.final-card .cta.primary:hover {
  background:linear-gradient(180deg,#fffdeb,#f7df1e);
  border-color:#e5cd0d;
}

/* Persistent WhatsApp button: visible from the first pixel of the page */
.wa-float {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:120;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 18px 9px 10px;
  color:#fff;
  background:linear-gradient(180deg,#39e27b 0%,#25d366 50%,#16aa4d 100%);
  border:1px solid #119643;
  border-radius:999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.40) inset,
    0 16px 36px rgba(18,140,74,.34),
    0 0 0 0 rgba(37,211,102,.30);
  animation:waFloatPulse 2.3s ease-in-out infinite;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),filter 220ms var(--ease);
}
.wa-float::before {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:inherit;
  pointer-events:none;
}
.wa-float::after {
  content:"";
  position:absolute;
  top:-50%; left:-28%; width:26%; height:210%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.56),transparent);
  transform:rotate(18deg);
  animation:waFloatSheen 3.2s ease-in-out infinite;
  pointer-events:none;
}
.wa-float:hover {
  transform:translateY(-4px) scale(1.025);
  filter:saturate(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.48) inset,0 20px 44px rgba(18,140,74,.42),0 0 0 7px rgba(37,211,102,.10);
}
.wa-float-icon {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset;
}
.wa-float-icon svg { width:27px; height:27px; }
.wa-float-copy { display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.wa-float-copy strong { font-size:14px; font-weight:900; letter-spacing:.01em; }
.wa-float-copy small { margin-top:4px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.86); }
@keyframes waFloatPulse {
  0%,100% { box-shadow:0 1px 0 rgba(255,255,255,.40) inset,0 16px 36px rgba(18,140,74,.34),0 0 0 0 rgba(37,211,102,.22); }
  50% { box-shadow:0 1px 0 rgba(255,255,255,.40) inset,0 18px 40px rgba(18,140,74,.40),0 0 0 10px rgba(37,211,102,0); }
}
@keyframes waFloatSheen {
  0%,52% { left:-30%; opacity:0; }
  60% { opacity:1; }
  84%,100% { left:125%; opacity:0; }
}

/* Metallic micro-details */
.diag-node {
  background:linear-gradient(180deg,#fff,#eef0f4);
  border-color:#cfd3dc;
  box-shadow:0 1px 0 #fff inset;
}
.diag-flow .diag-node:last-child {
  background:linear-gradient(180deg,#f4fff8,#e0f8e9);
  border-color:#9de0b8;
}
.tick {
  background:linear-gradient(180deg,#fff36f,#f7df1e);
  border:1px solid #dfca13;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
}

@media (max-width:760px) {
  .wa-float {
    right:14px;
    bottom:88px;
    min-height:54px;
    padding:8px 14px 8px 8px;
  }
  .wa-float-icon { width:38px; height:38px; }
  .wa-float-copy strong { font-size:13px; }
  .wa-float-copy small { font-size:10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float::after { animation:none !important; }
}


/* ============================================================
   LANDING PIXEL · TIKTOK × BUFFER HYBRID V6
   Visual-only override. Content, structure, tracking and behavior preserved.
   TikTok-inspired social accents + Buffer-like clean product system + metallic depth.
   ============================================================ */
:root {
  --tt-cyan: #25f4ee;
  --tt-pink: #fe2c55;
  --tt-ink: #161823;
  --tt-soft: #f8f8f8;
  --buffer-blue: #2c4bff;
  --metal-hi: #ffffff;
  --metal-mid: #eef0f4;
  --metal-low: #d8dce4;
  --metal-edge-v6: #c9ced8;
  --bg: #f7f7f8;
  --bg-2: #f1f2f5;
  --surface: #ffffff;
  --text: #161823;
  --text-mute: #5f6068;
  --text-dim: #8d8e96;
  --border: #dedfe4;
  --border-2: #cdd0d8;
  --blue: var(--buffer-blue);
  --navy: #11153f;
  --grad: linear-gradient(100deg, var(--tt-cyan) 0%, var(--buffer-blue) 48%, var(--tt-pink) 100%);
  --grad-soft: linear-gradient(135deg, rgba(37,244,238,.10), rgba(44,75,255,.08), rgba(254,44,85,.10));
}

html { background:#f7f7f8; }
body {
  color:var(--tt-ink);
  background:
    radial-gradient(760px 400px at 106% 8%, rgba(37,244,238,.10), transparent 68%),
    radial-gradient(720px 420px at -8% 24%, rgba(254,44,85,.08), transparent 70%),
    linear-gradient(180deg,#fff 0%,#f7f7f8 38%,#f3f4f6 100%);
}
::selection { background:var(--tt-cyan); color:#111; }

/* TikTok-like clean top chrome, Buffer-like product spacing */
.app-header {
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e7e7eb;
  box-shadow:0 1px 0 rgba(22,24,35,.03), 0 8px 26px rgba(22,24,35,.045);
}
.app-header::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--tt-cyan) 26%,var(--buffer-blue) 50%,var(--tt-pink) 74%,transparent 100%);
  opacity:.72;
  pointer-events:none;
}
.app-header.scrolled { background:rgba(255,255,255,.98); }
.brand { letter-spacing:.03em; }
.brand-dot {
  width:13px; height:13px; border-radius:4px;
  background:var(--tt-ink);
  box-shadow:-4px 3px 0 rgba(37,244,238,.90), 4px -3px 0 rgba(254,44,85,.86);
  transform:rotate(-7deg);
}
.brand-name { color:var(--tt-ink); font-weight:900; }
.tag {
  color:var(--buffer-blue);
  background:#f3f5ff;
  border-color:#dce1ff;
}
.status {
  color:var(--tt-ink);
  background:#fff;
  border-color:#e1e2e6;
}
.status-dot {
  background:var(--tt-cyan);
  box-shadow:0 0 0 4px rgba(37,244,238,.14), 3px 0 0 rgba(254,44,85,.45);
}

/* Hero: bright TikTok surface + metallic Buffer panel */
.hero::after {
  border:1px solid var(--metal-edge-v6);
  background:
    linear-gradient(145deg,rgba(255,255,255,.995) 0%,rgba(249,249,250,.99) 46%,rgba(232,234,239,.97) 100%);
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(172,177,187,.30) inset,
    0 24px 65px rgba(22,24,35,.10);
}
.hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:22px 10px auto;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--tt-cyan),var(--buffer-blue),var(--tt-pink));
  opacity:.92;
  box-shadow:0 0 18px rgba(37,244,238,.18),0 0 22px rgba(254,44,85,.12);
}
.grid-mask {
  background-image:
    linear-gradient(rgba(22,24,35,.033) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,24,35,.033) 1px,transparent 1px);
}
.glow.cyan {
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.97),rgba(37,244,238,.30) 38%,rgba(37,244,238,.09) 70%,transparent 74%);
  box-shadow:inset 0 0 42px rgba(255,255,255,.72),0 20px 64px rgba(37,244,238,.11);
}
.glow.magenta {
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.95),rgba(254,44,85,.22) 42%,rgba(254,44,85,.07) 75%,transparent 78%);
}
.h1 { color:var(--tt-ink); text-shadow:0 1px 0 #fff; }
.grad {
  color:var(--buffer-blue);
  background:linear-gradient(100deg,#18d8d2 0%,var(--buffer-blue) 46%,var(--tt-pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lead { color:#5c5d65; }

/* Three identity chips: TikTok cyan + Buffer blue + TikTok pink */
.pill { color:#3d3e45; background:linear-gradient(180deg,#fff,#eef0f3); border-color:#d5d7de; }
.pill:nth-child(1) { background:linear-gradient(180deg,#f5fffe,#dcfcfa); color:#087b77; border-color:#a9eeea; }
.pill:nth-child(2) { background:linear-gradient(180deg,#f7f8ff,#e8ebff); color:#2644df; border-color:#cbd3ff; }
.pill:nth-child(3) { background:linear-gradient(180deg,#fff7f9,#ffe6ec); color:#b3193a; border-color:#ffc1cf; }

/* Funnel cards with TikTok motion accents but Buffer clarity */
.funnel {
  background:linear-gradient(145deg,#fff 0%,#f8f9fa 52%,#eceef2 100%);
  border-color:#cfd3da;
  box-shadow:0 1px 0 #fff inset,0 14px 34px rgba(22,24,35,.07);
}
.funnel-line {
  background:linear-gradient(90deg,var(--tt-cyan) 0%,var(--buffer-blue) 52%,var(--tt-pink) 100%);
  opacity:.64;
}
.funnel-pulse {
  background:var(--tt-pink);
  box-shadow:0 0 0 6px rgba(254,44,85,.10),-5px 0 0 rgba(37,244,238,.62);
}
.step {
  background:linear-gradient(155deg,#fff,#f2f3f6);
  border-color:#d5d7de;
}
.step::before {
  content:"";
  position:absolute;
  top:-1px; left:18%; right:18%; height:2px;
  border-radius:0 0 999px 999px;
  background:var(--buffer-blue);
  opacity:.0;
  transition:opacity 220ms ease,left 220ms ease,right 220ms ease;
}
.step:hover::before { opacity:1; left:8%; right:8%; }
.step:nth-child(3n+1) .step-icon { color:#058f89; background:#e2fffd; border-color:#b8f3ef; }
.step:nth-child(3n+2) .step-icon { color:var(--buffer-blue); background:#edf0ff; border-color:#d1d8ff; }
.step:nth-child(3n) .step-icon { color:#d91f48; background:#fff0f3; border-color:#ffc8d3; }

/* CTA system: keep Buffer blue as primary conversion; TikTok black secondary */
.cta.primary {
  background:linear-gradient(180deg,#4562ff 0%,var(--buffer-blue) 56%,#213bd0 100%);
  border-color:#203bd2;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 12px 28px rgba(44,75,255,.28),-3px 3px 0 rgba(37,244,238,.16),3px -3px 0 rgba(254,44,85,.12);
}
.cta.primary:hover {
  background:linear-gradient(180deg,#5a73ff,#2948f5 56%,#1f35b7);
  box-shadow:0 1px 0 rgba(255,255,255,.38) inset,0 16px 35px rgba(44,75,255,.34),-4px 4px 0 rgba(37,244,238,.18),4px -4px 0 rgba(254,44,85,.14);
}
.cta.secondary {
  color:#fff;
  background:linear-gradient(180deg,#2b2d34,#161823);
  border-color:#11131b;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 22px rgba(22,24,35,.18),-2px 2px 0 rgba(37,244,238,.22),2px -2px 0 rgba(254,44,85,.17);
}
.cta.secondary:hover { color:#fff; border-color:#090a0e; background:linear-gradient(180deg,#34363e,#101116); }
/* WhatsApp remains intentionally green and visually dominant for direct contact. */

/* Lower sections: TikTok accents inside Buffer-like product cards */
.h2 { color:var(--tt-ink); }
.diag-label,.side-tag {
  color:#23263a;
  background:linear-gradient(180deg,#fff,#edf0f4);
  border-color:#d1d5dd;
}
.diag-label { border-left-color:var(--tt-pink); box-shadow:-3px 0 0 rgba(37,244,238,.60); }
.dashboard,.diag-flow,.video-side,.how-item,.presence-item {
  border-color:#cfd3da;
  background:linear-gradient(145deg,#fff 0%,#f8f9fa 48%,#eceef2 100%);
}
.dash-card { border-color:#d8dae0; }
.dash-card:nth-child(1) .dash-num { color:#087f7a; }
.dash-card:nth-child(2) .dash-num { color:var(--buffer-blue); }
.dash-card:nth-child(3) .dash-num { color:#d91f48; }
.dash-card:nth-child(4) .dash-num { color:#30323a; }
.dash-card:nth-child(1) .dash-bar span { background:var(--tt-cyan); }
.dash-card:nth-child(2) .dash-bar span { background:var(--buffer-blue); }
.dash-card:nth-child(3) .dash-bar span { background:var(--tt-pink); }
.dash-card:nth-child(4) .dash-bar span { background:#161823; }
.diag-arrow { color:var(--buffer-blue); text-shadow:-2px 0 rgba(37,244,238,.32),2px 0 rgba(254,44,85,.22); }

/* Video card: TikTok-like black media area with cyan/pink edge, Buffer product shell */
.video-frame {
  background:linear-gradient(145deg,#282a31,#090a0d);
  border-color:#aeb3bd;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 26px 60px rgba(22,24,35,.22),-4px 4px 0 rgba(37,244,238,.14),4px -4px 0 rgba(254,44,85,.12);
}
.video-frame::before { background:linear-gradient(90deg,var(--tt-cyan) 0%,var(--buffer-blue) 52%,var(--tt-pink) 100%); }
.tick { background:linear-gradient(145deg,var(--tt-cyan),#bffffb); border-color:#7adbd6; color:#111; }

/* Final sales block: creator-studio black with Buffer-blue CTA and TikTok edge lights */
.final-card {
  position:relative;
  background:
    radial-gradient(420px 220px at 92% -10%,rgba(37,244,238,.18),transparent 72%),
    radial-gradient(420px 220px at -6% 112%,rgba(254,44,85,.16),transparent 72%),
    linear-gradient(135deg,#20222a 0%,#161823 54%,#0e0f14 100%);
  border-color:#333640;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 28px 70px rgba(22,24,35,.30),-4px 4px 0 rgba(37,244,238,.12),4px -4px 0 rgba(254,44,85,.10);
}
.final-card::before {
  content:"";
  position:absolute;
  inset:0 20% auto;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--tt-cyan),var(--buffer-blue),var(--tt-pink));
}
.final-card .cta.primary {
  background:linear-gradient(180deg,#fff,#eef0f4);
  color:var(--tt-ink);
  border-color:#d4d7dd;
  box-shadow:0 1px 0 #fff inset,0 12px 28px rgba(0,0,0,.20),-3px 3px 0 rgba(37,244,238,.18),3px -3px 0 rgba(254,44,85,.16);
}
.final-card .cta.primary:hover { background:linear-gradient(180deg,#fff,#f7f8ff); color:var(--buffer-blue); }

/* WhatsApp stays fixed, green and unmistakable. */
.wa-float {
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 16px 36px rgba(18,140,74,.34),-3px 3px 0 rgba(37,244,238,.18),3px -3px 0 rgba(254,44,85,.12);
}

/* Mobile: keep the TikTok-like crisp contrast without changing content density. */
@media (max-width:760px) {
  .hero::before { left:18px; right:18px; }
  .cta-row .cta { width:100%; }
  .app-header { min-height:58px; }
}

/* ============================================================
   LANDING PIXEL V9 — HERO APROBADO EXACTO + RESTO CLARO
   La sección hero usa literalmente la imagen aprobada por Mariano.
   El resto de la página conserva el lenguaje claro Buffer/TikTok.
   ============================================================ */

/* Cache-busting visual baseline */
html, body { background:#f7f7f8 !important; color:#161823; }
body {
  background:
    radial-gradient(760px 400px at 106% 8%, rgba(37,244,238,.08), transparent 68%),
    radial-gradient(720px 420px at -8% 24%, rgba(254,44,85,.06), transparent 70%),
    linear-gradient(180deg,#ffffff 0%,#f7f7f8 45%,#f2f3f5 100%) !important;
}

/* El header HTML viejo queda oculto: el hero aprobado ya contiene su propio header visual. */
.exact-hidden-header { display:none !important; }

/* El main puede alojar el arte exacto a su tamaño natural. */
.app { max-width:1672px !important; margin:0 auto; padding:0 !important; }

.hero-exact {
  position:relative;
  margin:0 auto;
  padding:0 !important;
  background:#081528;
  overflow:hidden;
  isolation:isolate;
}
.hero-exact::before,
.hero-exact::after,
.hero-exact .hero-bg { display:none !important; }

.hero-exact-art {
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  background:#081528;
  box-shadow:0 22px 66px rgba(8,18,36,.22);
}

/* IMPORTANTE: sin crop, sin object-cover. Se muestra el PNG aprobado 1:1 proporcional. */
.hero-exact-image {
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* Usa el logo REAL que pasó Mariano. Cubre solamente el logo generado dentro del arte,
   manteniendo intacto el resto del hero aprobado. */
.hero-brand-overlay {
  position:absolute;
  z-index:8;
  top:0;
  left:0;
  width:18.2%;
  height:7.9%;
  min-width:210px;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:1.75%;
  background:#fff;
  color:#12182a;
  pointer-events:none;
}
.hero-brand-overlay::after {
  content:"";
  position:absolute;
  left:0;
  right:-30px;
  bottom:-3px;
  height:3px;
  background:linear-gradient(90deg,#25f4ee 0%,#2c4bff 52%,#fe2c55 100%);
  box-shadow:0 0 10px rgba(37,244,238,.18),0 0 12px rgba(254,44,85,.12);
}
.hero-brand-logo {
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:13px;
  box-shadow:0 4px 14px rgba(27,92,220,.16),0 0 15px rgba(37,244,238,.16);
}
.hero-brand-text {
  font-size:clamp(16px,1.35vw,23px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  white-space:nowrap;
}

/* Flujo inferior: posiciones coincidentes con los 5 cuadros DENTRO del PNG aprobado. */
.hero-flow-overlay {
  position:absolute;
  z-index:9;
  left:11.75%;
  width:75.15%;
  bottom:4.65%;
  height:15.80%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.25%;
  pointer-events:auto;
  border-radius:18px;
}

.hero-flow-hotspot {
  --flow:#25f4ee;
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  height:100%;
  border:1px solid transparent;
  border-radius:15px;
  background:transparent;
  color:transparent;
  outline:none;
  cursor:pointer;
  transform:translateY(0) scale(1);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.hero-flow-hotspot[data-step="1"] { --flow:#25f4ee; }
.hero-flow-hotspot[data-step="2"] { --flow:#ff3aa8; }
.hero-flow-hotspot[data-step="3"] { --flow:#27e6e8; }
.hero-flow-hotspot[data-step="4"] { --flow:#8b5cff; }
.hero-flow-hotspot[data-step="5"] { --flow:#25d366; }

.hero-flow-hotspot::before {
  content:"";
  position:absolute;
  inset:2px;
  border-radius:13px;
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0));
  transition:inherit;
}
.hero-flow-hotspot::after {
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-3px;
  height:3px;
  border-radius:999px;
  opacity:0;
  transform:scaleX(.25);
  background:linear-gradient(90deg,transparent,var(--flow),#fff,var(--flow),transparent);
  box-shadow:0 0 12px var(--flow),0 0 20px var(--flow);
  transition:all .26s ease;
}
.hero-flow-hotspot:hover,
.hero-flow-hotspot:focus-visible,
.hero-flow-hotspot.is-active {
  transform:translateY(-7px) scale(1.035);
  border-color:color-mix(in srgb,var(--flow) 65%,white 15%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--flow) 12%,transparent),rgba(255,255,255,.025));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 12px 25px rgba(0,0,0,.28),
    0 0 19px color-mix(in srgb,var(--flow) 46%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--flow) 10%,transparent);
  filter:brightness(1.11) saturate(1.22);
}
.hero-flow-hotspot.is-active { animation:flowCardPulse 1.15s ease-in-out infinite alternate; }
.hero-flow-hotspot:hover::before,
.hero-flow-hotspot:focus-visible::before,
.hero-flow-hotspot.is-active::before {
  border-color:color-mix(in srgb,var(--flow) 42%,white 15%);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
}
.hero-flow-hotspot:hover::after,
.hero-flow-hotspot:focus-visible::after,
.hero-flow-hotspot.is-active::after { opacity:1; transform:scaleX(1); }

@keyframes flowCardPulse {
  from { box-shadow:0 0 0 1px rgba(255,255,255,.08),0 9px 20px rgba(0,0,0,.24),0 0 12px color-mix(in srgb,var(--flow) 34%,transparent); }
  to { box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 28px rgba(0,0,0,.30),0 0 27px color-mix(in srgb,var(--flow) 62%,transparent); }
}

/* Barra de energía que viaja de Anuncio hacia WhatsApp. */
.hero-flow-sweep {
  position:absolute;
  left:2.5%;
  right:2.5%;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  overflow:visible;
  pointer-events:none;
  opacity:.90;
}
.hero-flow-sweep::before {
  content:"";
  position:absolute;
  top:-1px;
  left:-22%;
  width:18%;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#25f4ee 20%,#ffffff 48%,#2c4bff 62%,#fe2c55 82%,transparent);
  filter:drop-shadow(0 0 5px #25f4ee) drop-shadow(0 0 9px #fe2c55);
  animation:heroFlowSweepV9 2.65s linear infinite;
}
@keyframes heroFlowSweepV9 { from { left:-22%; } to { left:104%; } }

/* CTAs inmediatamente debajo del hero: claros para que SOLO el hero sea oscuro. */
.hero-exact-ctas {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:22px 20px 24px;
  background:#ffffff !important;
  border-bottom:1px solid #e5e6eb;
  box-shadow:0 14px 34px rgba(22,24,35,.05);
}
.hero-exact-ctas .cta { min-height:50px; min-width:220px; }

/* El resto vuelve a layout claro y contenido centrado. */
.radar, .diag, .video-section, .how, .presence, .final-cta, .foot {
  max-width:1240px;
  margin-inline:auto;
  padding-left:18px;
  padding-right:18px;
}
.radar, .diag, .video-section, .how, .presence { background:transparent !important; color:#161823 !important; }
.dashboard, .diag-flow, .video-side, .how-item, .presence-item {
  background:linear-gradient(145deg,#fff 0%,#f8f9fa 52%,#eef0f4 100%) !important;
  border-color:#cfd3da !important;
  color:#161823 !important;
}
.h2, .dash-title, .how-name, .pres-val { color:#161823 !important; }
.section-sub, .dash-body, .side-text, .step-state, .pres-kind { color:#5f6068 !important; }
.diag-node { background:#fff !important; color:#161823 !important; border-color:#d8dae0 !important; }
.video-frame { background:#090a0d !important; }

/* Final CTA también claro: el único gran bloque oscuro debe ser el hero aprobado. */
.final-card {
  color:#161823 !important;
  background:
    radial-gradient(420px 220px at 92% -10%,rgba(37,244,238,.15),transparent 72%),
    radial-gradient(420px 220px at -6% 112%,rgba(254,44,85,.11),transparent 72%),
    linear-gradient(145deg,#ffffff 0%,#f5f6f8 55%,#eceef3 100%) !important;
  border:1px solid #cfd3da !important;
  box-shadow:0 18px 46px rgba(22,24,35,.09) !important;
}
.final-card .h2, .final-card .grad { color:#161823 !important; -webkit-text-fill-color:initial !important; }
.final-text { color:#5f6068 !important; }

/* WhatsApp siempre visible. */
.wa-float { z-index:100 !important; }

.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:900px) {
  .hero-brand-overlay { min-width:0; width:26%; padding-left:1.4%; }
  .hero-brand-logo { width:36px; height:36px; border-radius:10px; }
  .hero-brand-text { font-size:clamp(11px,2vw,18px); }
  .hero-flow-hotspot { border-radius:10px; }
}
@media (max-width:620px) {
  .hero-brand-overlay { width:31%; gap:5px; }
  .hero-brand-logo { width:25px; height:25px; border-radius:7px; }
  .hero-brand-text { font-size:10px; }
  .hero-exact-ctas { display:grid; grid-template-columns:1fr; padding:14px 12px 18px; }
  .hero-exact-ctas .cta { width:100%; min-width:0; }
  .hero-flow-hotspot.is-active { transform:translateY(-3px) scale(1.018); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-flow-sweep::before, .hero-flow-hotspot.is-active { animation:none !important; }
}

/* ==================================================
   V10 CONTRAST PATCH — ONLY the white cards called out by Mariano.
   Everything else remains exactly as V9.
================================================== */

/* Señales de Intención Real de Compra: dark metallic cards for legibility */
.dashboard .dash-card {
  background:
    linear-gradient(145deg, rgba(31,39,58,.98) 0%, rgba(17,23,36,.99) 58%, rgba(9,13,22,.99) 100%) !important;
  border:1px solid rgba(115,145,190,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 12px 28px rgba(0,0,0,.22) !important;
}
.dashboard .dash-card:hover {
  border-color:rgba(37,244,238,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 34px rgba(0,0,0,.28),
    0 0 20px rgba(37,244,238,.08) !important;
}
.dashboard .dash-title { color:#ffffff !important; }
.dashboard .dash-body { color:#cbd5e6 !important; }
.dashboard .dash-bar { background:rgba(255,255,255,.10) !important; }
.dashboard .dash-card:nth-child(1) .dash-num { color:#25f4ee !important; }
.dashboard .dash-card:nth-child(2) .dash-num { color:#7892ff !important; }
.dashboard .dash-card:nth-child(3) .dash-num { color:#ff4f75 !important; }
.dashboard .dash-card:nth-child(4) .dash-num { color:#f5d56a !important; }

/* Presencia oficial: same metallic contrast treatment, preserving icons/content */
.presence .presence-item {
  background:
    linear-gradient(145deg, rgba(31,39,58,.98) 0%, rgba(17,23,36,.99) 58%, rgba(9,13,22,.99) 100%) !important;
  border:1px solid rgba(115,145,190,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 12px 28px rgba(0,0,0,.22) !important;
}
.presence .presence-item:hover {
  border-color:rgba(37,244,238,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 34px rgba(0,0,0,.28),
    0 0 20px rgba(37,244,238,.08) !important;
}
.presence .pres-kind { color:#9fb0c9 !important; }
.presence .pres-val { color:#ffffff !important; }


/* ==================================================
   V11 HERO CROP + DIAG LOGO INSERT
================================================== */
.hero-brand-overlay { display:none !important; }
.hero-exact-art { max-width:100%; }
.hero-flow-overlay { bottom:5.1%; height:17.3%; }
.diag-logo-wrap { display:flex; justify-content:center; margin-top:18px; }
.diag-logo { width:72px; height:72px; object-fit:cover; border-radius:18px; box-shadow:0 10px 28px rgba(27,92,220,.18), 0 0 22px rgba(37,244,238,.20), 0 0 28px rgba(254,44,85,.16); background:#fff; padding:4px; }
@media (max-width:760px){ .diag-logo{ width:58px; height:58px; border-radius:15px; } }


/* ==================================================
   V12 — ONLY requested adjustment
   1) remove standalone logo gap after diagnostic flow
   2) place logo in upper-right of video info card
   3) pull video section upward to remove dead space
================================================== */
.diag-logo-wrap { display:none !important; }

/* Override old desktop section paddings only for this transition */
.diag {
  padding-bottom: 8px !important;
}
.video-section {
  padding-top: 8px !important;
}

.video-side {
  position: relative !important;
}
.video-side-logo {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 18px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgba(44,75,255,.18);
  box-shadow:
    0 10px 28px rgba(27,92,220,.18),
    0 0 22px rgba(37,244,238,.20),
    0 0 28px rgba(254,44,85,.16);
  z-index: 2;
}
.video-side .side-tag,
.video-side .h2 {
  max-width: calc(100% - 96px);
}

@media (max-width:760px) {
  .diag { padding-bottom: 6px !important; }
  .video-section { padding-top: 6px !important; }
  .video-side-logo {
    width: 58px;
    height: 58px;
    top: 14px;
    right: 14px;
    border-radius: 15px;
  }
  .video-side .side-tag,
  .video-side .h2 {
    max-width: calc(100% - 72px);
  }
}