/* ============================================
   DBX GLOBAL — PRODUCT DETAIL EXPERIENCES v2
   Unique product pages with compact layouts and live-feeling demos
   ============================================ */

:root {
  --navy: #071727;
  --navy-2: #0d2034;
  --ink: #102033;
  --muted: #65758a;
  --soft: #f5f8fb;
  --paper: #fbfdff;
  --line: rgba(13, 32, 52, 0.10);
  --line-strong: rgba(13, 32, 52, 0.16);
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --shadow-soft: 0 24px 70px rgba(7, 23, 39, 0.10);
  --shadow-card: 0 16px 45px rgba(7, 23, 39, 0.09);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Space Grotesk', Inter, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
}

.theme-whats { --accent: #25d366; --accent-2: #00a884; --accent-rgb: 37, 211, 102; --accent-dark: #075e54; --chapter: #ecfff5; }
.theme-send { --accent: #3182ff; --accent-2: #6e6bff; --accent-rgb: 49, 130, 255; --accent-dark: #102f8f; --chapter: #eff6ff; }
.theme-bot { --accent: #10b981; --accent-2: #20d3c2; --accent-rgb: 16, 185, 129; --accent-dark: #064e3b; --chapter: #ecfdf5; }
.theme-tracker { --accent: #00b7c7; --accent-2: #2f80ff; --accent-rgb: 0, 183, 199; --accent-dark: #053f52; --chapter: #eefcff; }
.theme-voice { --accent: #ff8a3d; --accent-2: #ff4d6d; --accent-rgb: 255, 138, 61; --accent-dark: #6d2b08; --chapter: #fff5ed; }

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(var(--accent-rgb), 0.14), transparent 30vw),
    radial-gradient(circle at 80% 0%, rgba(34, 211, 238, 0.10), transparent 36vw),
    linear-gradient(180deg, #fbfdff 0%, #f4f8fb 42%, #fbfdff 100%);
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background-image:
    linear-gradient(rgba(7,23,39,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,23,39,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.7) 45%, transparent 100%);
}
::selection { background: rgba(var(--accent-rgb), .24); color: var(--navy); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 24px rgba(var(--accent-rgb), .55); }

.site-header { position: sticky; top: 16px; z-index: 50; padding: 0 20px; }
.header-card {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 16px 48px rgba(7, 23, 39, .08);
}
.brand-logo { display: inline-flex; align-items: center; flex: 0 0 auto; padding-left: 6px; }
.brand-logo img { height: 42px; width: auto; }
.header-links { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; }
.header-links a, .mobile-panel nav a {
  color: rgba(16,32,51,.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  padding: 11px 14px;
  border-radius: 999px;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.header-links a:hover { color: var(--navy); background: rgba(var(--accent-rgb), .10); transform: translateY(-1px); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 13px 18px;
  min-height: 46px;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 34px rgba(var(--accent-rgb), .30); }
.btn-primary:hover { box-shadow: 0 18px 45px rgba(var(--accent-rgb), .40); }
.btn-secondary { color: var(--navy); background: rgba(255,255,255,.76); border-color: var(--line); box-shadow: 0 12px 30px rgba(7,23,39,.06); }
.btn-secondary:hover { border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); }
.btn-ghost { color: var(--ink); background: rgba(7,23,39,.05); border-color: rgba(7,23,39,.04); }
.mobile-toggle { display: none; width: 44px; height: 44px; border: 0; background: rgba(var(--accent-rgb),.11); border-radius: 50%; position: relative; }
.mobile-toggle span { display: block; width: 18px; height: 2px; background: var(--navy); margin: 4px auto; border-radius: 999px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.menu-open .mobile-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .mobile-toggle span:nth-child(2) { opacity: 0; }
.menu-open .mobile-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-panel { width: min(1180px, calc(100% - 40px)); margin: 10px auto 0; padding: 16px; border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,.8); }
.mobile-panel[hidden] { display: none; }
.mobile-panel nav { display: grid; gap: 6px; margin-bottom: 12px; }
.mobile-panel nav a { background: rgba(7,23,39,.04); }
.mobile-panel .btn { width: 100%; }

.product-hero { position: relative; padding: 104px 0 52px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr); align-items: center; gap: clamp(36px, 5vw, 70px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(var(--accent-rgb), .10); color: color-mix(in srgb, var(--accent-dark) 76%, #0b1f34 24%); border: 1px solid rgba(var(--accent-rgb), .18); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .14); }
.hero-title { font-family: var(--font-display); font-size: clamp(48px, 7vw, 104px); line-height: .88; letter-spacing: -.07em; margin: 22px 0 18px; color: var(--navy); text-wrap: balance; }
.hero-title .accent { color: var(--accent); }
.hero-subtitle { max-width: 660px; margin: 0; color: rgba(16,32,51,.72); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.62; letter-spacing: -.025em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.proof-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid var(--line); color: rgba(16,32,51,.72); font-size: 12px; font-weight: 850; box-shadow: 0 10px 26px rgba(7,23,39,.05); }
.proof-pill i { color: var(--accent); }
.hero-demo { min-height: 500px; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-demo::before { content: ''; position: absolute; inset: 10% 0 4%; border-radius: 45%; background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 64%); filter: blur(22px); animation: pulseGlow 4s var(--ease) infinite alternate; }

.section { padding: 50px 0; }
.section.compact { padding: 34px 0; }
.section-head { max-width: 780px; margin-bottom: 28px; }
.section-tag { display: inline-flex; align-items: center; color: var(--accent-dark); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 12px; }
.section-title { font-family: var(--font-display); color: var(--navy); font-size: clamp(34px, 4.2vw, 66px); line-height: .95; letter-spacing: -.055em; margin: 0; text-wrap: balance; }
.section-copy { color: rgba(16,32,51,.68); font-size: 17px; line-height: 1.62; margin: 16px 0 0; max-width: 720px; }
.chapter { border-radius: 36px; padding: clamp(28px, 4vw, 52px); background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62)), var(--chapter); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; }
.chapter::before { content: ''; position: absolute; inset: auto -10% -35% 28%; height: 260px; background: radial-gradient(circle, rgba(var(--accent-rgb), .20), transparent 60%); pointer-events: none; }

.compact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-card { position: relative; z-index: 1; padding: 20px; min-height: 180px; border-radius: 24px; background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.86); box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); overflow: hidden; }
.mini-card:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(7,23,39,.13); border-color: rgba(var(--accent-rgb), .24); }
.mini-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(var(--accent-rgb), .16), transparent 34%); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.mini-card:hover::after { opacity: 1; }
.mini-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 30px rgba(var(--accent-rgb), .25); margin-bottom: 16px; }
.mini-card h3 { margin: 0 0 9px; font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: -.035em; color: var(--navy); }
.mini-card p { margin: 0; color: rgba(16,32,51,.68); line-height: 1.55; font-size: 14.5px; }

.flow-section { padding: 62px 0; }
.flow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; }
.flow-copy { position: sticky; top: 110px; }
.flow-steps { display: grid; gap: 14px; }
.flow-step { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(7,23,39,.06); }
.step-index { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), .12); color: var(--accent-dark); font-weight: 950; }
.flow-step h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.035em; }
.flow-step p { margin: 0; color: rgba(16,32,51,.66); line-height: 1.55; }

.cta-card { border-radius: 30px; padding: clamp(24px, 3.6vw, 44px); color: #fff; background: radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), .32), transparent 34%), linear-gradient(135deg, #061421, #0d2439 64%, #0a1a2a); box-shadow: 0 24px 70px rgba(7,23,39,.22); overflow: hidden; position: relative; }
.cta-card::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -100px; bottom: -130px; background: radial-gradient(circle, rgba(var(--accent-rgb), .38), transparent 65%); }
.cta-grid { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.cta-title { margin: 0; max-width: 720px; font-family: var(--font-display); font-size: clamp(30px, 4vw, 58px); line-height: .96; letter-spacing: -.055em; }
.cta-copy { margin: 14px 0 0; color: rgba(255,255,255,.72); max-width: 620px; line-height: 1.65; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-card .btn-secondary { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.site-footer { padding: 38px 20px 36px; }
.footer-card { width: min(1180px, 100%); margin: 0 auto; padding: 22px; display: flex; justify-content: space-between; align-items: center; gap: 22px; border-radius: 28px; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.86); box-shadow: 0 16px 45px rgba(7,23,39,.06); }
.footer-card strong { font-family: var(--font-display); color: var(--navy); }
.footer-copy { margin: 7px 0 0; color: rgba(16,32,51,.62); line-height: 1.5; max-width: 620px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-links a { padding: 10px 12px; border-radius: 999px; color: rgba(16,32,51,.66); background: rgba(7,23,39,.04); font-weight: 800; font-size: 13px; }

/* shared demo primitives */
.demo-device { position: relative; z-index: 1; width: min(100%, 520px); border-radius: 34px; padding: 18px; background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 34px 90px rgba(7,23,39,.16); backdrop-filter: blur(18px); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.demo-lights { display: flex; gap: 6px; }
.demo-lights span { width: 9px; height: 9px; border-radius: 50%; background: rgba(7,23,39,.16); }
.demo-title { font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; color: rgba(16,32,51,.52); }
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), .12); color: var(--accent-dark); font-size: 11px; font-weight: 950; }
.live-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }

/* WHATS — conversational split */
.whats-layout .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(360px, .78fr); }
.chat-demo { max-width: 430px; transform: rotate(-1.2deg); }
.chat-window { border-radius: 26px; background: linear-gradient(180deg, #effff6, #ffffff); border: 1px solid rgba(37,211,102,.18); padding: 14px; }
.chat-agent { display: flex; align-items: center; gap: 10px; padding: 10px 10px 14px; border-bottom: 1px solid rgba(7,23,39,.08); }
.avatar { width: 38px; height: 38px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; box-shadow: 0 12px 26px rgba(var(--accent-rgb),.25); }
.agent-name { font-weight: 950; color: var(--navy); }
.agent-status { font-size: 12px; color: rgba(16,32,51,.56); }
.chat-messages { display: grid; gap: 10px; padding: 16px 2px 8px; min-height: 300px; }
.bubble { max-width: 83%; padding: 10px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 10px 22px rgba(7,23,39,.06); animation: bubbleIn .55s var(--ease) both; }
.bubble.in { background: #fff; color: rgba(16,32,51,.82); border-bottom-left-radius: 5px; }
.bubble.out { justify-self: end; background: linear-gradient(135deg, rgba(37,211,102,.92), rgba(0,168,132,.92)); color: #fff; border-bottom-right-radius: 5px; }
.bubble:nth-child(2) { animation-delay: .28s; } .bubble:nth-child(3) { animation-delay: .56s; } .bubble:nth-child(4) { animation-delay: .84s; }
.typing { display: inline-flex; gap: 4px; padding: 10px 12px; width: fit-content; background: #fff; border-radius: 16px; box-shadow: 0 10px 22px rgba(7,23,39,.06); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: typing 1s infinite; }
.typing span:nth-child(2) { animation-delay: .14s; } .typing span:nth-child(3) { animation-delay: .28s; }
.queue-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.queue-strip div { padding: 10px; border-radius: 15px; background: rgba(255,255,255,.82); border: 1px solid rgba(37,211,102,.16); font-size: 11px; color: rgba(16,32,51,.58); }
.queue-strip strong { display: block; font-size: 17px; color: var(--accent-dark); margin-bottom: 2px; }
.whats-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.whats-chips span { padding: 10px 12px; border-radius: 999px; background: rgba(37,211,102,.10); color: #075e54; font-weight: 900; font-size: 12px; }

/* SEND — campaign control room */
.send-layout .product-hero { padding-bottom: 30px; }
.campaign-demo { width: min(100%, 560px); }
.campaign-board { position: relative; min-height: 440px; border-radius: 30px; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .14), transparent 44%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,247,255,.74)); border: 1px solid rgba(255,255,255,.9); overflow: hidden; }
.orbit { position: absolute; inset: 44px; border: 1px dashed rgba(var(--accent-rgb), .28); border-radius: 50%; animation: rotate 24s linear infinite; }
.orbit.two { inset: 92px; animation-duration: 18s; animation-direction: reverse; }
.campaign-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 26px 60px rgba(var(--accent-rgb), .28); font-family: var(--font-display); font-weight: 950; letter-spacing: -.04em; }
.segment-node { position: absolute; padding: 11px 12px; border-radius: 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(var(--accent-rgb), .18); box-shadow: 0 16px 38px rgba(7,23,39,.08); font-size: 12px; font-weight: 950; color: var(--navy); animation: floatNode 3.4s var(--ease) infinite alternate; }
.segment-node small { display: block; color: var(--accent-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.node-a { left: 28px; top: 58px; } .node-b { right: 34px; top: 74px; animation-delay: .2s; } .node-c { left: 50px; bottom: 52px; animation-delay: .45s; } .node-d { right: 42px; bottom: 66px; animation-delay: .65s; }
.launch-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .75), transparent); transform-origin: left center; opacity: .7; animation: linePulse 2.2s infinite; }
.line-a { width: 150px; left: 126px; top: 122px; transform: rotate(23deg); } .line-b { width: 150px; right: 126px; top: 136px; transform: rotate(154deg); } .line-c { width: 160px; left: 120px; bottom: 124px; transform: rotate(-22deg); } .line-d { width: 140px; right: 128px; bottom: 130px; transform: rotate(202deg); }
.campaign-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.campaign-stats div { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.86); border: 1px solid var(--line); }
.campaign-stats strong { display: block; font-size: 20px; color: var(--accent-dark); font-family: var(--font-display); }
.campaign-stats span { color: rgba(16,32,51,.58); font-size: 11px; font-weight: 850; }

/* BOT — decision tree */
.bot-layout .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(430px, 1fr); }
.bot-lab { width: min(100%, 540px); }
.bot-canvas { position: relative; min-height: 430px; border-radius: 30px; padding: 22px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,241,255,.82)); border: 1px solid rgba(255,255,255,.9); overflow: hidden; }
.bot-node { position: absolute; min-width: 148px; padding: 13px; border-radius: 18px; background: rgba(255,255,255,.94); border: 1px solid rgba(var(--accent-rgb), .20); box-shadow: 0 18px 40px rgba(7,23,39,.08); animation: nodeBreathe 2.8s var(--ease) infinite alternate; }
.bot-node strong { display: block; color: var(--navy); font-size: 13px; margin-bottom: 4px; }
.bot-node span { color: rgba(16,32,51,.57); font-size: 11px; font-weight: 750; }
.bot-node.main { left: 50%; top: 24px; transform: translateX(-50%); text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.bot-node.main strong, .bot-node.main span { color: #fff; }
.bot-node.n1 { left: 24px; top: 150px; } .bot-node.n2 { right: 24px; top: 150px; animation-delay: .25s; } .bot-node.n3 { left: 44px; bottom: 36px; animation-delay: .5s; } .bot-node.n4 { right: 44px; bottom: 36px; animation-delay: .75s; }
.bot-line { position: absolute; height: 2px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .72)); transform-origin: left center; animation: flowLine 1.8s infinite; }
.bot-line.l1 { left: 230px; top: 106px; width: 140px; transform: rotate(141deg); } .bot-line.l2 { left: 270px; top: 106px; width: 142px; transform: rotate(39deg); } .bot-line.l3 { left: 94px; top: 244px; width: 128px; transform: rotate(64deg); } .bot-line.l4 { right: 94px; top: 244px; width: 128px; transform: rotate(116deg); }
.intent-bar { position: absolute; left: 24px; right: 24px; bottom: 156px; display: flex; gap: 8px; justify-content: center; }
.intent-bar span { padding: 8px 10px; border-radius: 999px; background: rgba(139,92,246,.10); color: #32146a; font-size: 11px; font-weight: 900; }
.bot-transcript { margin-top: 12px; display: grid; gap: 8px; }
.bot-transcript div { padding: 10px 12px; border-radius: 15px; background: rgba(255,255,255,.86); border: 1px solid var(--line); font-size: 12px; color: rgba(16,32,51,.66); }
.bot-transcript strong { color: var(--accent-dark); }

/* TRACKER — analytics cockpit */
.tracker-layout .product-hero { padding-top: 92px; }
.analytics-demo { width: min(100%, 590px); }
.dashboard { border-radius: 30px; padding: 16px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,252,255,.78)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 34px 90px rgba(7,23,39,.14); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-kpi, .chart-card { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.86); border: 1px solid rgba(0,183,199,.14); }
.dash-kpi span { display: block; color: rgba(16,32,51,.54); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.dash-kpi strong { font-family: var(--font-display); font-size: 34px; color: var(--navy); letter-spacing: -.055em; }
.dash-kpi em { color: var(--accent-dark); font-style: normal; font-size: 12px; font-weight: 900; }
.chart-card { grid-column: span 2; min-height: 145px; position: relative; overflow: hidden; }
.chart-bars { position: absolute; inset: auto 18px 18px; height: 90px; display: flex; gap: 8px; align-items: end; }
.chart-bars i { flex: 1; min-width: 0; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); opacity: .86; animation: barGrow 2.4s var(--ease) infinite alternate; transform-origin: bottom; }
.chart-bars i:nth-child(2) { animation-delay: .12s; } .chart-bars i:nth-child(3) { animation-delay: .24s; } .chart-bars i:nth-child(4) { animation-delay: .36s; } .chart-bars i:nth-child(5) { animation-delay: .48s; } .chart-bars i:nth-child(6) { animation-delay: .60s; }
.alert-feed { display: grid; gap: 8px; margin-top: 10px; }
.alert-feed div { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 15px; background: rgba(255,255,255,.82); border: 1px solid var(--line); color: rgba(16,32,51,.68); font-size: 12px; font-weight: 760; }
.alert-feed i { color: var(--accent); }
.metric-mosaic { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 22px; }
.metric-mosaic div { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.82); border: 1px solid var(--line); }
.metric-mosaic strong { font-family: var(--font-display); font-size: 28px; color: var(--accent-dark); }
.metric-mosaic span { display: block; color: rgba(16,32,51,.57); font-size: 12px; font-weight: 850; margin-top: 4px; }

/* VOICE — audio routing */
.voice-layout .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(390px, .9fr); }
.voice-console { max-width: 470px; }
.call-card { border-radius: 30px; padding: 18px; background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(255,245,237,.82)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 34px 90px rgba(7,23,39,.14); }
.caller { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,138,61,.15); }
.call-avatar { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 16px 34px rgba(var(--accent-rgb),.25); }
.caller strong { display: block; color: var(--navy); }
.caller span { color: rgba(16,32,51,.55); font-size: 12px; font-weight: 760; }
.waveform { display: flex; align-items: center; gap: 6px; height: 100px; padding: 18px 8px; }
.waveform i { display: block; flex: 1; max-width: 10px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); animation: wave 1.15s var(--ease) infinite alternate; }
.waveform i:nth-child(2n) { animation-delay: .12s; } .waveform i:nth-child(3n) { animation-delay: .24s; } .waveform i:nth-child(4n) { animation-delay: .36s; }
.routing-map { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.route-box { padding: 13px; border-radius: 18px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,138,61,.14); }
.route-box strong { display: block; color: var(--navy); font-size: 13px; }
.route-box span { color: rgba(16,32,51,.55); font-size: 11px; font-weight: 760; }
.route-arrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); animation: arrowPulse 1.4s infinite; }
.voice-options { display: grid; gap: 9px; margin-top: 12px; }
.voice-options div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 15px; background: rgba(255,255,255,.82); border: 1px solid var(--line); font-size: 12px; color: rgba(16,32,51,.62); }
.voice-options strong { color: var(--accent-dark); }

.faq-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.faq-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(7,23,39,.055); }
.faq-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 1.05; letter-spacing: -.035em; color: var(--navy); }
.faq-card p { margin: 0; color: rgba(16,32,51,.66); line-height: 1.55; font-size: 14px; }

[data-reveal] { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: .32; transform: scale(.8); } }
@keyframes pulseGlow { to { transform: scale(1.06); opacity: .72; } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .55; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes floatNode { to { transform: translateY(-10px); } }
@keyframes linePulse { 0%,100% { opacity: .18; } 45% { opacity: .85; } }
@keyframes nodeBreathe { to { box-shadow: 0 20px 50px rgba(var(--accent-rgb), .16); transform: translateY(-5px); } }
@keyframes flowLine { 0% { opacity: .15; } 50% { opacity: .85; } 100% { opacity: .15; } }
@keyframes barGrow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes wave { from { height: 16px; opacity: .55; } to { height: 78px; opacity: 1; } }
@keyframes arrowPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .11); } }

@media (max-width: 1040px) {
  .header-links, .header-actions { display: none; }
  .mobile-toggle { display: block; margin-left: auto; }
  .hero-grid, .whats-layout .hero-grid, .bot-layout .hero-grid, .voice-layout .hero-grid, .flow-grid { grid-template-columns: 1fr; }
  .hero-demo { min-height: auto; }
  .flow-copy { position: static; }
}
@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1180px); }
  .site-header { top: 10px; padding: 0 12px; }
  .brand-logo img { height: 36px; }
  .product-hero { padding: 64px 0 34px; }
  .hero-title { font-size: clamp(44px, 15vw, 70px); }
  .hero-subtitle { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .compact-grid, .faq-grid, .metric-mosaic { grid-template-columns: 1fr; }
  .dash-grid, .campaign-stats { grid-template-columns: 1fr; }
  .chart-card { grid-column: span 1; }
  .cta-grid, .footer-card { flex-direction: column; align-items: flex-start; }
  .cta-actions { justify-content: flex-start; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .demo-device, .chat-demo, .voice-console, .analytics-demo, .campaign-demo, .bot-lab { width: 100%; transform: none; }
  .campaign-board { min-height: 360px; }
  .segment-node { min-width: 124px; font-size: 11px; }
  .node-a { left: 14px; top: 54px; } .node-b { right: 14px; top: 72px; } .node-c { left: 16px; bottom: 48px; } .node-d { right: 16px; bottom: 56px; }
  .campaign-core { width: 124px; height: 124px; font-size: 14px; }
  .bot-canvas { min-height: 430px; }
  .bot-node { min-width: 132px; }
  .bot-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================
   HOME-STYLE PRODUCT MOCKUPS
   Correção: exemplificações das páginas internas seguem o mockup aprovado da home
   ============================================ */
.pd-mock-wrap {
  position: relative;
  width: min(100%, 560px);
  perspective: 1000px;
  margin: 0 auto;
  --pd-accent: var(--accent);
  --pd-dark: var(--accent-2);
  --pd-glow: rgba(var(--accent-rgb), .42);
  --pd-light: rgba(var(--accent-rgb), .18);
}
.pd-glow-ring {
  position: absolute;
  inset: -34px;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .16), transparent 62%);
  filter: blur(20px);
  animation: glowPulse 4s ease-in-out infinite;
}
.pd-dashboard-mockup {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(7, 23, 39, .14), 0 5px 18px rgba(7, 23, 39, .08), 0 0 0 1px rgba(7, 23, 39, .045);
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.pd-dashboard-mockup:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  box-shadow: 0 34px 90px rgba(7, 23, 39, .18), 0 0 0 1px rgba(var(--accent-rgb), .10);
}
.pd-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}
.pd-dots { display: flex; gap: 6px; }
.pd-dots span { width: 10px; height: 10px; border-radius: 50%; }
.pd-dots span:nth-child(1) { background: #ff5f57; }
.pd-dots span:nth-child(2) { background: #febc2e; }
.pd-dots span:nth-child(3) { background: #28c840; }
.pd-url {
  flex: 1;
  text-align: center;
  padding: 4px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.pd-content { display: flex; min-height: 330px; }
.pd-sidebar {
  width: 54px;
  padding: 16px 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pd-nav-item {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.38);
  font-size: 14px;
}
.pd-nav-item.active {
  color: var(--pd-accent);
  background: rgba(var(--accent-rgb), .18);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .16), 0 0 18px rgba(var(--accent-rgb), .18);
}
.pd-main {
  position: relative;
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.pd-main > * { animation: pdChildIn .56s var(--ease) both; }
.pd-main > *:nth-child(2) { animation-delay: .08s; }
.pd-main > *:nth-child(3) { animation-delay: .16s; }
.pd-main > *:nth-child(4) { animation-delay: .24s; }
.pd-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pd-header strong { color: #0f172a; font-size: 16px; letter-spacing: -.02em; }
.pd-status { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 12px; font-weight: 700; }
.pd-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--pd-accent); box-shadow: 0 0 9px var(--pd-glow); animation: statusPulse 2s ease-in-out infinite; }
.pd-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pd-stats div { text-align: center; padding: 10px 8px; border-radius: 13px; background: #f8fafc; border: 1px solid #eef2f7; }
.pd-stats strong { display: block; color: var(--pd-accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; line-height: 1; }
.pd-stats span { display: block; margin-top: 4px; color: #64748b; font-size: 10px; font-weight: 750; }
.pd-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; min-height: 220px; }
.pd-kcol { border: 1px solid #e5e7eb; border-radius: 13px; padding: 7px; display: flex; flex-direction: column; gap: 7px; }
.pd-kcol > span { text-align: center; color: #64748b; font-size: 9px; font-weight: 900; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid rgba(15,23,42,.08); }
.pd-kcol.col-new { background: #f0fdf4; border-color: #bbf7d0; }
.pd-kcol.col-work { background: #eff6ff; border-color: #bfdbfe; }
.pd-kcol.col-done { background: #fef2f2; border-color: #fecaca; }
.pd-kcard { background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; padding: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 5px; }
.pd-kcard strong { font-size: 10px; color: #0f172a; }
.pd-kcard em { align-self: flex-start; font-style: normal; font-size: 8px; font-weight: 800; padding: 3px 5px; border-radius: 5px; background: rgba(var(--accent-rgb), .14); color: var(--accent-dark); }
.pd-kcard.card-mover { animation: pdKanbanMove 4.5s ease-in-out infinite; animation-delay: .9s; position: relative; z-index: 5; }
.pd-flow { position: relative; min-height: 166px; flex: 1; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 13px; overflow: hidden; }
.pd-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd-flow path { fill: none; stroke: var(--pd-accent); stroke-width: 2; stroke-dasharray: 6; animation: pdFlowDash 13s linear infinite; opacity: .72; }
.pd-node { position: absolute; display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; color: #0f172a; font-size: 10px; font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,.05); z-index: 2; }
.pd-node i { color: var(--pd-accent); }
.pd-node.active { border-color: var(--pd-accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.pd-integrations { display: flex; align-items: center; justify-content: space-around; gap: 10px; padding: 16px 10px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 13px; }
.pd-integrations div { text-align: center; color: var(--pd-accent); }
.pd-integrations div:first-child { color: #1877f2; }
.pd-integrations div:last-child { color: #ea4335; }
.pd-integrations i { font-size: 28px; }
.pd-integrations span { display: block; margin-top: 6px; font-size: 9px; font-weight: 850; color: currentColor; }
.pd-integrations b { width: 28px; height: 2px; background: repeating-linear-gradient(90deg, #cbd5e1 0 4px, transparent 4px 8px); position: relative; }
.pd-core i { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--pd-accent); background: var(--navy); box-shadow: 0 0 16px rgba(var(--accent-rgb), .24); }
.pd-donuts { display: flex; justify-content: center; gap: 18px; padding: 14px 0 6px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 13px; }
.pd-donut { --c: var(--pd-accent); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p)*1%), #e5e7eb 0); position: relative; animation: pdDonut .9s var(--ease) both; }
.pd-donut::before { content: ''; position: absolute; inset: 6px; border-radius: inherit; background: #fff; }
.pd-donut.dark { --c: var(--pd-dark); }
.pd-donut.soft { --c: rgba(var(--accent-rgb), .34); }
.pd-donut span { position: relative; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 900; }
.pd-legends { display: flex; justify-content: center; gap: 16px; color: #64748b; font-size: 9px; font-weight: 800; margin-top: -7px; }
.pd-wave { height: 78px; display: flex; align-items: center; justify-content: center; gap: 4px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 13px; }
.pd-wave i { display: block; width: 5px; height: var(--h); border-radius: 99px; background: linear-gradient(180deg, var(--pd-accent), var(--pd-dark)); animation: pdWave 1.5s ease-in-out infinite alternate; }
.pd-wave i:nth-child(odd) { animation-delay: .1s; }
.pd-wave i:nth-child(even) { animation-delay: .3s; }
.pd-convos { display: flex; flex-direction: column; gap: 8px; }
.pd-convos div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 13px; background: #f8fafc; border: 1px solid #eef2f7; }
.pd-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--pd-accent); flex: 0 0 auto; font-size: 12px; }
.pd-avatar.dark { background: var(--navy); color: var(--pd-accent); }
.pd-convos p { margin: 0; flex: 1; min-width: 0; }
.pd-convos strong { display: block; color: #0f172a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-convos small { display: block; color: #64748b; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-convos em { font-style: normal; font-size: 10px; font-weight: 850; color: #fff; background: var(--pd-accent); padding: 3px 8px; border-radius: 99px; }
.pd-convos time { color: #94a3b8; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pd-progress { display: flex; justify-content: center; gap: 8px; padding: 11px 0 9px; background: #f8fafc; border-top: 1px solid #eef2f7; }
.pd-progress span { width: 8px; height: 8px; border-radius: 99px; background: #cbd5e1; }
.pd-progress span.active { width: 24px; background: var(--pd-accent); box-shadow: 0 0 10px var(--pd-glow); }
.pd-float-badge { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.82); box-shadow: 0 10px 28px rgba(7,23,39,.10); backdrop-filter: blur(14px); color: #334155; font-size: 12px; font-weight: 850; white-space: nowrap; animation: pdBadgeFloat 4s ease-in-out infinite alternate; }
.pd-badge-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--pd-accent); }
.pd-badge-tl { top: 15%; left: -13%; }
.pd-badge-br { bottom: 29%; right: -9%; animation-delay: .25s; }
.pd-badge-bl { bottom: 7%; left: -7%; animation-delay: .5s; }
@keyframes pdChildIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pdKanbanMove { 0%,15% { transform: translate(0,0) scale(1) rotate(0); } 25% { transform: translate(0,-6px) scale(1.05) rotate(4deg); } 50% { transform: translate(calc(100% + 15px),-6px) scale(1.05) rotate(4deg); } 60%,100% { transform: translate(calc(100% + 15px),25px) scale(1) rotate(0); } }
@keyframes pdFlowDash { to { stroke-dashoffset: -100; } }
@keyframes pdDonut { from { transform: scale(.88); opacity: .65; } to { transform: scale(1); opacity: 1; } }
@keyframes pdWave { from { transform: scaleY(.6); opacity: .68; } to { transform: scaleY(1.05); opacity: 1; } }
@keyframes pdBadgeFloat { to { transform: translateY(-8px); } }
@media (max-width: 760px) {
  .pd-mock-wrap { overflow: hidden; padding: 2px; }
  .pd-glow-ring { inset: 0; }
  .pd-dashboard-mockup { transform: none; max-width: 100%; border-radius: 20px; }
  .pd-dashboard-mockup:hover { transform: none; }
  .pd-content { min-height: 300px; }
  .pd-sidebar { width: 46px; }
  .pd-nav-item { width: 32px; height: 32px; }
  .pd-main { padding: 12px; gap: 10px; }
  .pd-header strong { font-size: 14px; }
  .pd-status { font-size: 11px; }
  .pd-stats strong { font-size: 15px; }
  .pd-stats span { font-size: 8.5px; }
  .pd-float-badge { display: none; }
  .pd-kanban { min-height: 190px; gap: 5px; }
  .pd-kcol { padding: 5px; gap: 5px; }
  .pd-kcard { padding: 5px; }
  .pd-kcard strong { font-size: 8.5px; }
  .pd-kcard em { font-size: 7px; }
  .pd-convos small, .pd-convos strong { max-width: 170px; }
}

/* Floating Back Home Button */
.back-home-floating {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: auto;
}
.btn-back-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(13, 27, 42, 0.08);
  box-shadow: 0 10px 30px rgba(13, 27, 42, 0.06);
  color: #27272a;
  font-size: 14px;
  font-weight: 800;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-back-home i {
  font-size: 12px;
  transition: transform 0.3s ease;
}
.btn-back-home:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: var(--accent, #30C5B1);
  box-shadow: 0 15px 40px rgba(13, 27, 42, 0.1);
  color: #09090b;
}
.btn-back-home:hover i {
  transform: translateX(-4px);
}