:root {
    --ink: #0f172a;
    --ink-soft: #344054;
    --muted: #6f7b8f;
    --blue: #0d6efd;
    --blue-dark: #0755c7;
    --blue-soft: #eaf3ff;
    --paper: #f7f9fc;
    --white: #fff;
    --line: rgba(15, 23, 42, .1);
    --line-blue: rgba(13, 110, 253, .18);
    --shadow-sm: 0 12px 35px rgba(15, 23, 42, .07);
    --shadow-lg: 0 35px 100px rgba(15, 23, 42, .14);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 32px;
    --font: "Manrope", sans-serif;
    --serif: "Instrument Serif", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: var(--blue); }
.container { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.kinetic-grid { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .58; }
.page-glow { position: fixed; z-index: 0; width: 42vw; aspect-ratio: 1; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: .18; }
.glow-a { top: -18vw; right: -12vw; background: #3d8dff; }
.glow-b { bottom: -22vw; left: -15vw; background: #a9ceff; }
main, .site-footer, .site-nav { position: relative; z-index: 2; }

/* Navigation */
.site-nav { position: fixed; z-index: 1000; inset: 0 0 auto; transition: top .35s var(--ease-premium); }
.nav-shell { display: flex; align-items: center; width: 100%; min-height: 78px; margin: auto; padding: 8px max(20px,calc((100vw - 1240px) / 2)); border: 0 solid rgba(255,255,255,.82); border-bottom-width: 1px; border-radius: 0; background: rgba(255,255,255,.88); box-shadow: 0 10px 35px rgba(15,23,42,.06); backdrop-filter: blur(24px) saturate(160%); }
.nav-brand { flex: 0 0 auto; }
.nav-brand img { width: 150px; height: auto; transition: width .35s var(--ease-premium); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links > a { padding: 10px 11px; color: #667085; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .025em; transition: .2s ease; }
.nav-links > a:not(.nav-primary):not(.nav-login):hover { color: var(--ink); background: rgba(13,110,253,.06); }
.nav-links .nav-login { margin-left: 5px; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.76); }
.nav-links .nav-primary { display: inline-flex; align-items: center; gap: 8px; margin-left: 3px; padding-inline: 15px; color: #fff; background: var(--blue); box-shadow: 0 10px 25px rgba(13,110,253,.24); }
.nav-primary i { font-size: 9px; transition: translate .2s ease; }
.nav-primary:hover i { translate: 3px 0; }
.nav-menu-button { display: none; margin-left: auto; width: 42px; height: 42px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* Hero */
.hero-section { position: relative; min-height: 950px; padding: 158px 0 96px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,255,.84)); }
.hero-grid-light { position: absolute; z-index: 0; inset: 0; opacity: .52; background-image: linear-gradient(rgba(13,110,253,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,110,253,.07) 1px, transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(ellipse 78% 73% at 70% 42%, #000 5%, transparent 76%); animation: heroGrid 18s linear infinite; }
@keyframes heroGrid { to { background-position: 76px 76px; } }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(540px,.95fr); align-items: center; gap: clamp(42px,5vw,74px); }
.hero-copy { max-width: 660px; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; color: #0755c7; border: 1px solid rgba(13,110,253,.15); border-radius: 999px; background: rgba(255,255,255,.74); box-shadow: 0 8px 30px rgba(13,110,253,.06); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.hero-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(13,110,253,.1), 0 0 18px rgba(13,110,253,.4); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; scale: .82; } }
.hero-copy h1 { margin: 27px 0 25px; font-size: clamp(52px,4.25vw,68px); font-weight: 800; line-height: .96; letter-spacing: -.064em; }
.hero-copy h1 em { color: var(--blue); font-family: var(--serif); font-size: 1.08em; font-weight: 400; letter-spacing: -.045em; }
.hero-copy > p { max-width: 580px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 13px; font-size: 12px; font-weight: 750; transition: .22s ease; }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 14px 35px rgba(13,110,253,.25); }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 20px 45px rgba(13,110,253,.3); }
.button-secondary { color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.7); backdrop-filter: blur(14px); }
.button-secondary:hover { border-color: var(--line-blue); background: #fff; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 26px; color: #7b8698; font-size: 10px; }
.hero-assurances span { display: inline-flex; align-items: center; gap: 6px; }
.hero-assurances i { color: var(--blue); font-size: 8px; }
.hero-scene { position: relative; min-height: 610px; display: grid; place-items: center; perspective: 1500px; }
.scene-orbit { position: absolute; z-index: -1; border: 1px solid rgba(13,110,253,.13); border-radius: 50%; }
.orbit-one { width: 720px; height: 720px; animation: rotate 28s linear infinite; }
.orbit-two { width: 520px; height: 520px; border-color: rgba(13,110,253,.09); animation: rotate 19s linear reverse infinite; }
.scene-orbit::after { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 20px rgba(13,110,253,.65); }
@keyframes rotate { to { rotate: 360deg; } }
.hero-app-card { width: min(690px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: rgba(255,255,255,.72); box-shadow: 0 45px 100px rgba(15,23,42,.17), 0 0 0 1px rgba(13,110,253,.05); backdrop-filter: blur(22px) saturate(140%); transform: rotateY(-3deg) rotateX(1deg); }
.hero-app-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 46px; padding: 0 15px; color: #98a2b3; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.8); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.window-controls { display: flex; gap: 5px; }
.window-controls i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.window-controls i:first-child { background: var(--blue); }
.hero-app-bar b { justify-self: end; display: flex; align-items: center; gap: 5px; color: #0755c7; font-weight: 700; }
.hero-app-bar b i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.hero-app-body { display: grid; grid-template-columns: 58px 1fr; min-height: 390px; background: rgba(243,246,250,.82); }
.hero-mini-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-right: 1px solid var(--line); background: rgba(255,255,255,.76); }
.hero-mini-rail span { display: grid; place-items: center; width: 34px; height: 34px; color: #8b96a8; border-radius: 9px; font-size: 13px; }
.hero-mini-rail span.active { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(13,110,253,.2); }
.hero-mini-workspace { padding: 16px; }
.hero-mini-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.8); font-size: 10px; }
.hero-mini-toolbar button { padding: 7px 9px; color: #fff; border: 0; border-radius: 7px; background: var(--blue); font-size: 8px; }
.hero-mini-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 11px; }
.hero-mini-board > div { min-height: 290px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.5); }
.hero-mini-board header { display: flex; justify-content: space-between; margin-bottom: 9px; color: #566176; font-size: 8px; font-weight: 750; }
.hero-mini-board header b { color: var(--blue); }
.hero-mini-board article { display: grid; gap: 3px; margin-bottom: 7px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid #aeb8c7; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.04); }
.hero-mini-board article.accent { border-left-color: var(--blue); }
.hero-mini-board article strong { font-size: 8px; }
.hero-mini-board article small { color: #8b96a8; font-size: 7px; }
.scene-lead { position: absolute; display: flex; align-items: center; gap: 10px; min-width: 205px; padding: 11px 13px; border: 1px solid rgba(13,110,253,.15); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 18px 50px rgba(15,23,42,.14); backdrop-filter: blur(18px); animation: float 6s ease-in-out infinite; }
.scene-lead > span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; color: #fff; border-radius: 9px; background: var(--blue); font-size: 9px; font-weight: 750; }
.scene-lead div { display: grid; gap: 2px; }
.scene-lead strong { font-size: 10px; }
.scene-lead small { color: #7b8698; font-size: 8px; }
.scene-lead > i { margin-left: auto; color: var(--blue); font-size: 10px; }
.lead-a { top: 30px; right: -50px; }
.lead-b { top: 168px; left: -90px; animation-delay: -2s; }
.lead-c { right: -80px; bottom: 42px; animation-delay: -4s; }
@keyframes float { 50% { translate: 0 -12px; } }
.hero-scroll-hint { position: absolute; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 10px; color: #98a2b3; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; translate: -50% 0; }
.hero-scroll-hint i { color: var(--blue); animation: scrollHint 1.8s ease-in-out infinite; }
@keyframes scrollHint { 50% { translate: 0 5px; } }

/* Marquee */
.signal-strip { position: relative; z-index: 3; overflow: hidden; padding: 19px 0; border-block: 1px solid rgba(13,110,253,.1); background: rgba(255,255,255,.72); backdrop-filter: blur(18px); }
.signal-strip::before, .signal-strip::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 16vw; }
.signal-strip::before { left: 0; background: linear-gradient(90deg,var(--paper),transparent); }
.signal-strip::after { right: 0; background: linear-gradient(-90deg,var(--paper),transparent); }
.signal-track { display: flex; align-items: center; width: max-content; will-change: transform; animation: marquee var(--signal-duration,31s) linear infinite; }
.signal-group { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.signal-track span { display: inline-flex; align-items: center; gap: 9px; color: #475467; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.signal-track span i { color: var(--blue); font-size: 14px; }
.signal-track b { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
@keyframes marquee { to { transform: translate3d(-50%,0,0); } }

/* Shared section typography */
.section-intro { max-width: 860px; margin-bottom: 54px; }
.section-intro.compact { max-width: 650px; }
.section-intro.centered { margin-inline: auto; text-align: center; }
.section-label { display: inline-flex; padding: 7px 11px; color: #0755c7; border: 1px solid rgba(13,110,253,.13); border-radius: 999px; background: rgba(13,110,253,.06); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.section-intro h2 { margin: 20px 0 17px; font-size: clamp(48px,5vw,76px); line-height: .98; letter-spacing: -.06em; }
.section-intro h2 em { color: var(--blue); font-family: var(--serif); font-weight: 400; }
.section-intro > p { max-width: 680px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.centered > p { margin-inline: auto; }

/* CRM demo */
.demo-section { position: relative; padding: 130px 0 145px; overflow: hidden; background: linear-gradient(180deg,#f5f7fa,#e9edf3 48%,#f7f9fc); }
.demo-grid-motion { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(13,110,253,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,253,.065) 1px,transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 87%,transparent); animation: demoGrid 20s linear infinite; }
@keyframes demoGrid { to { background-position: 58px -58px; } }
.demo-section .container { position: relative; z-index: 2; }
.demo-instructions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.demo-instructions span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; color: #566176; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.64); font-size: 9px; font-weight: 700; }
.demo-instructions i { color: var(--blue); }
.crm-simulator { position: relative; overflow: hidden; height: 780px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.68); box-shadow: 0 45px 120px rgba(15,23,42,.16),0 0 0 1px rgba(13,110,253,.05); backdrop-filter: blur(24px); }
.crm-simulator:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #e3e3e3; }
.crm-browser-bar { display: grid; grid-template-columns: 1fr minmax(250px,380px) 1fr; align-items: center; height: 48px; padding: 0 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }
.crm-browser-address { display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; color: #7b8698; border: 1px solid rgba(15,23,42,.07); border-radius: 8px; background: #f4f6f9; font-size: 8px; }
.crm-browser-address i { color: #8aa9d6; font-size: 7px; }
.crm-browser-bar > button { justify-self: end; display: grid; place-items: center; width: 31px; height: 31px; color: #667085; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.crm-browser-bar > button:hover { color: var(--blue); background: var(--blue-soft); }
.crm-demo-frame { display: block; width: 100%; height: calc(100% - 48px); border: 0; background: #e3e3e3; }
.crm-demo-frame ~ .crm-app,
.crm-demo-frame ~ .crm-toast,
.crm-demo-frame ~ .crm-modal-layer,
.crm-demo-frame ~ .crm-detail-drawer { display: none !important; }
.crm-app { display: grid; grid-template-columns: 86px 1fr; height: calc(100% - 48px); background: #e3e3e3; }
.crm-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px; color: #627087; border-right: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.76); backdrop-filter: blur(18px); }
.crm-sidebar-logo { display: grid; place-items: center; height: 48px; margin-bottom: 12px; }
.crm-sidebar-logo img { width: 42px; height: 42px; object-fit: contain; }
.crm-sidebar nav { display: grid; gap: 5px; }
.crm-sidebar button { position: relative; display: grid; place-items: center; gap: 3px; width: 100%; min-height: 51px; padding: 5px; color: inherit; border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: .18s ease; }
.crm-sidebar button i { font-size: 15px; }
.crm-sidebar button span { font-size: 7px; font-weight: 700; }
.crm-sidebar button b { position: absolute; top: 5px; right: 9px; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; color: #fff; border-radius: 999px; background: var(--blue); font-size: 6px; }
.crm-sidebar button:hover { color: var(--blue); background: rgba(13,110,253,.07); }
.crm-sidebar button.active { color: #fff; background: var(--blue); box-shadow: 0 10px 25px rgba(13,110,253,.23); }
.crm-sidebar-bottom { display: grid; gap: 8px; margin-top: auto; }
.crm-user-avatar { position: relative; display: grid; place-items: center; width: 39px; height: 39px; margin: auto; color: #fff; border-radius: 50%; background: var(--ink); font-size: 9px; font-weight: 750; }
.crm-user-avatar i { position: absolute; right: 0; bottom: 1px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); }
.crm-workspace { min-width: 0; min-height: 0; }
.crm-topbar { display: flex; align-items: center; gap: 18px; height: 66px; padding: 0 18px; border-bottom: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.73); backdrop-filter: blur(18px); }
.crm-mobile-title { display: grid; min-width: 135px; }
.crm-mobile-title strong { font-size: 11px; }
.crm-mobile-title span { color: #7b8698; font-size: 8px; }
.crm-global-search { position: relative; display: flex; align-items: center; flex: 1; max-width: 430px; }
.crm-global-search > i { position: absolute; left: 11px; color: #8b96a8; font-size: 10px; }
.crm-global-search input { width: 100%; height: 37px; padding: 0 45px 0 31px; color: var(--ink); border: 1px solid rgba(15,23,42,.1); border-radius: 10px; background: rgba(255,255,255,.82); outline: none; font-size: 9px; }
.crm-global-search input:focus { border-color: rgba(13,110,253,.4); box-shadow: 0 0 0 3px rgba(13,110,253,.08); }
.crm-global-search kbd { position: absolute; right: 8px; padding: 4px 6px; color: #98a2b3; border: 1px solid var(--line); border-radius: 5px; background: #f7f8fa; font: 7px/1 var(--font); }
.crm-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.crm-top-actions > button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: #627087; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.75); }
.crm-top-actions > button b { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.crm-top-actions > div { display: grid; margin-left: 5px; text-align: right; }
.crm-top-actions > div span { font-size: 8px; font-weight: 750; }
.crm-top-actions > div small { color: #8b96a8; font-size: 7px; }
.crm-top-avatar { display: grid; place-items: center; width: 31px; height: 31px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 8px; font-style: normal; font-weight: 750; }
.crm-content { height: calc(100% - 66px); padding: 15px 17px 18px; overflow: auto; }
.crm-content::-webkit-scrollbar { width: 7px; height: 7px; }
.crm-content::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(100,116,139,.35); background-clip: content-box; }
.crm-page-toolbar { display: flex; align-items: center; gap: 10px; min-height: 62px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.77); box-shadow: 0 12px 35px rgba(15,23,42,.06); backdrop-filter: blur(18px); }
.crm-page-heading { min-width: 125px; }
.crm-page-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.crm-page-heading span { display: block; margin-top: 2px; color: #8993a4; font-size: 7px; }
.crm-toolbar-search { position: relative; flex: 1; max-width: 270px; }
.crm-toolbar-search i { position: absolute; top: 50%; left: 9px; color: #98a2b3; font-size: 8px; translate: 0 -50%; }
.crm-toolbar-search input { width: 100%; height: 34px; padding: 0 10px 0 27px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.8); outline: 0; font-size: 8px; }
.crm-toolbar-select { height: 34px; padding: 0 8px; color: #4a5568; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 8px; }
.crm-view-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.crm-view-switch button { display: grid; place-items: center; width: 28px; height: 27px; color: #758196; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.crm-view-switch button.active { color: #fff; background: var(--blue); }
.crm-toolbar-actions { display: flex; gap: 6px; margin-left: auto; }
.crm-tool-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; color: #536074; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 8px; font-weight: 700; cursor: pointer; }
.crm-tool-button.primary { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 7px 16px rgba(13,110,253,.18); }
.crm-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 11px; }
.crm-kpi { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.7); }
.crm-kpi > i { display: grid; place-items: center; width: 28px; height: 28px; color: var(--blue); border-radius: 8px; background: var(--blue-soft); font-size: 11px; }
.crm-kpi div { display: grid; }
.crm-kpi strong { font-size: 12px; }
.crm-kpi span { color: #8b96a8; font-size: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crm-kanban { display: flex; align-items: stretch; gap: 10px; min-height: 455px; overflow-x: auto; }
.crm-column { display: flex; flex: 1 0 205px; flex-direction: column; min-width: 205px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.52); transition: .2s ease; }
.crm-column.drag-over { border-color: var(--blue); background: rgba(13,110,253,.07); box-shadow: inset 0 0 0 2px rgba(13,110,253,.08); }
.crm-column > header { display: flex; align-items: center; justify-content: space-between; padding: 11px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.68); }
.crm-column > header span { display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 750; }
.crm-column > header span i { width: 7px; height: 7px; border-radius: 50%; background: var(--stage,#94a3b8); }
.crm-column > header b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: var(--blue); border-radius: 999px; background: var(--blue-soft); font-size: 7px; }
.crm-column-body { flex: 1; min-height: 130px; padding: 8px; }
.crm-lead-card { position: relative; display: grid; gap: 4px; margin-bottom: 7px; padding: 10px 10px 9px 13px; border: 1px solid var(--line); border-left: 4px solid var(--stage,#94a3b8); border-radius: 8px; background: rgba(255,255,255,.9); box-shadow: 0 2px 7px rgba(15,23,42,.05); cursor: grab; transition: .18s ease; }
.crm-lead-card:hover { border-color: rgba(13,110,253,.3); border-left-color: var(--stage,var(--blue)); box-shadow: 0 7px 18px rgba(15,23,42,.1); }
.crm-lead-card.dragging { opacity: .4; scale: .98; }
.crm-lead-card strong { padding-right: 20px; font-size: 8px; }
.crm-lead-card > span { color: #6f7b8f; font-size: 7px; }
.crm-lead-card > small { color: #98a2b3; font-size: 6px; }
.crm-lead-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; padding-top: 6px; border-top: 1px solid rgba(15,23,42,.06); }
.crm-lead-card footer b { color: #344054; font-size: 7px; }
.crm-lead-card footer i { display: grid; place-items: center; width: 20px; height: 20px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 6px; font-style: normal; }
.crm-card-menu { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 19px; height: 19px; color: #98a2b3; border: 0; border-radius: 5px; background: transparent; font-size: 8px; }
.crm-column-add { width: calc(100% - 16px); min-height: 29px; margin: 0 8px 8px; color: #788498; border: 1px dashed rgba(13,110,253,.23); border-radius: 8px; background: rgba(13,110,253,.035); font-size: 7px; cursor: pointer; }
.crm-column-add:hover { color: var(--blue); background: var(--blue-soft); }
.crm-list { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.66); }
.crm-list-row { display: grid; grid-template-columns: 1.4fr .8fr .8fr .75fr .75fr; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.crm-list-row:last-child { border-bottom: 0; }
.crm-list-row:hover { background: rgba(13,110,253,.05); }
.crm-list-row.header { min-height: 34px; color: #8b96a8; font-size: 6px; font-weight: 750; text-transform: uppercase; cursor: default; }
.crm-list-person { display: flex; align-items: center; gap: 8px; }
.crm-list-person i { display: grid; place-items: center; width: 28px; height: 28px; color: var(--blue); border-radius: 8px; background: var(--blue-soft); font-size: 7px; font-style: normal; font-weight: 750; }
.crm-list-person span { display: grid; font-size: 8px; font-weight: 700; }
.crm-list-person small { color: #98a2b3; font-size: 6px; font-weight: 500; }
.crm-list-row > span, .crm-list-row > strong { font-size: 7px; }
.crm-status { width: fit-content; padding: 5px 7px; color: var(--blue); border-radius: 6px; background: var(--blue-soft); font-size: 6px !important; font-weight: 750; }
.crm-split { display: grid; grid-template-columns: 240px 1fr; min-height: 450px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.66); }
.crm-split-list { padding: 8px; border-right: 1px solid var(--line); }
.crm-split-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px; color: var(--ink); border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.crm-split-list button:hover,.crm-split-list button.active { background: rgba(13,110,253,.08); }
.crm-split-list button > i { display: grid; place-items: center; width: 29px; height: 29px; color: var(--blue); border-radius: 8px; background: var(--blue-soft); font-size: 7px; font-style: normal; font-weight: 750; }
.crm-split-list button span { display: grid; font-size: 8px; font-weight: 700; }
.crm-split-list button small { color: #8b96a8; font-size: 6px; font-weight: 500; }
.crm-split-detail { padding: 17px; }
.crm-contact-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.crm-contact-head > i { display: grid; place-items: center; width: 43px; height: 43px; color: #fff; border-radius: 12px; background: var(--blue); font-size: 10px; font-style: normal; font-weight: 750; }
.crm-contact-head div { flex: 1; }
.crm-contact-head h3 { margin: 0; font-size: 13px; }
.crm-contact-head p { margin: 2px 0 0; color: #8b96a8; font-size: 7px; }
.crm-contact-head button { width: 29px; height: 29px; color: var(--blue); border: 1px solid var(--line-blue); border-radius: 8px; background: var(--blue-soft); }
.crm-contact-info { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 12px 0; }
.crm-contact-info div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.crm-contact-info small { color: #98a2b3; font-size: 6px; }
.crm-contact-info strong { font-size: 8px; }
.crm-activity h4 { margin: 15px 0 7px; font-size: 9px; }
.crm-activity p { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 0; }
.crm-activity p > i { display: grid; place-items: center; width: 24px; height: 24px; color: var(--blue); border-radius: 7px; background: var(--blue-soft); font-size: 8px; }
.crm-activity p span { display: grid; font-size: 7px; font-weight: 700; }
.crm-activity p small { color: #98a2b3; font-size: 6px; font-weight: 500; }
.crm-page-card { min-height: 500px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.7); }
.crm-page-card > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.crm-page-card > header h2 { margin: 0; font-size: 14px; }
.crm-page-card > header p { margin: 3px 0 0; color: #8b96a8; font-size: 7px; }
.crm-agenda { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.crm-calendar { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.crm-calendar-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.crm-calendar-head strong { font-size: 10px; }
.crm-calendar-head button { color: var(--blue); border: 0; background: transparent; }
.crm-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.crm-calendar-grid span { display: grid; place-items: center; min-height: 40px; border-radius: 8px; color: #536074; font-size: 7px; }
.crm-calendar-grid span.label { min-height: 20px; color: #98a2b3; font-size: 6px; font-weight: 750; }
.crm-calendar-grid span.today { color: #fff; background: var(--blue); }
.crm-calendar-grid span.has-event { border: 1px solid var(--line-blue); background: var(--blue-soft); }
.crm-agenda-list { display: grid; gap: 7px; align-content: start; }
.crm-agenda-item { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 9px; background: #fff; }
.crm-agenda-item time { color: var(--blue); font-size: 6px; font-weight: 750; }
.crm-agenda-item strong { font-size: 8px; }
.crm-agenda-item small { color: #8b96a8; font-size: 6px; }
.crm-chat { display: grid; grid-template-columns: 220px 1fr; height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.crm-chat-list { padding: 8px; border-right: 1px solid var(--line); }
.crm-chat-list button { display: flex; gap: 8px; width: 100%; padding: 9px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.crm-chat-list button.active { background: var(--blue-soft); }
.crm-chat-list i { display: grid; place-items: center; width: 29px; height: 29px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 7px; font-style: normal; }
.crm-chat-list span { display: grid; font-size: 8px; font-weight: 700; }
.crm-chat-list small { color: #98a2b3; font-size: 6px; }
.crm-chat-room { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.crm-chat-room > header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.crm-chat-room > header i { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; border-radius: 50%; background: var(--ink); font-size: 7px; font-style: normal; }
.crm-chat-room > header div { display: grid; font-size: 8px; font-weight: 700; }
.crm-chat-room > header small { color: var(--blue); font-size: 6px; }
.crm-chat-messages { display: flex; flex-direction: column; gap: 8px; padding: 13px; overflow-y: auto; background: #f7f9fc; }
.crm-message { max-width: 70%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px 10px 10px 3px; background: #fff; font-size: 7px; line-height: 1.45; }
.crm-message.mine { align-self: flex-end; color: #fff; border-color: var(--blue); border-radius: 10px 10px 3px 10px; background: var(--blue); }
.crm-message small { display: block; margin-top: 3px; opacity: .55; font-size: 5px; }
.crm-chat-form { display: flex; gap: 7px; padding: 9px; border-top: 1px solid var(--line); }
.crm-chat-form input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; font-size: 7px; }
.crm-chat-form button { width: 34px; color: #fff; border: 0; border-radius: 9px; background: var(--blue); }
.crm-dashboard-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 9px; }
.crm-dashboard-card { min-height: 110px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.crm-dashboard-card.small { grid-column: span 3; }
.crm-dashboard-card.chart { grid-column: span 8; min-height: 265px; }
.crm-dashboard-card.ranking { grid-column: span 4; }
.crm-dashboard-card h3 { margin: 0 0 8px; font-size: 8px; }
.crm-dashboard-card > strong { font-size: 19px; }
.crm-dashboard-card > span { display: block; margin-top: 4px; color: #8b96a8; font-size: 6px; }
.dashboard-chart { display: flex; align-items: end; gap: 8px; height: 195px; padding-top: 20px; }
.dashboard-chart i { flex: 1; height: var(--h); min-height: 10px; border-radius: 6px 6px 2px 2px; background: linear-gradient(#69a7ff,var(--blue)); }
.crm-ranking { display: grid; gap: 7px; }
.crm-ranking p { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px; border-radius: 8px; background: #f7f9fc; }
.crm-ranking i { display: grid; place-items: center; width: 25px; height: 25px; color: var(--blue); border-radius: 7px; background: var(--blue-soft); font-size: 7px; font-style: normal; }
.crm-ranking span { display: grid; flex: 1; font-size: 7px; font-weight: 700; }
.crm-ranking small { color: #98a2b3; font-size: 6px; }
.crm-toast { position: absolute; z-index: 50; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; color: #fff; border-radius: 10px; background: #101828; box-shadow: 0 15px 35px rgba(15,23,42,.25); font-size: 8px; font-weight: 700; opacity: 0; translate: 0 20px; pointer-events: none; transition: .25s ease; }
.crm-toast.show { opacity: 1; translate: 0; }
.crm-toast i { color: #6ca8ff; }
.crm-modal-layer { position: absolute; z-index: 60; inset: 48px 0 0; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.38); backdrop-filter: blur(8px); }
.crm-modal-layer[hidden] { display: none; }
.crm-modal { width: min(460px,100%); padding: 21px; border: 1px solid rgba(255,255,255,.72); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(15,23,42,.28); }
.crm-modal header { display: flex; justify-content: space-between; margin-bottom: 16px; }
.crm-modal header span { color: var(--blue); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.crm-modal h3 { margin: 3px 0 0; font-size: 17px; }
.crm-modal header button { width: 30px; height: 30px; color: #667085; border: 0; border-radius: 8px; background: #f1f3f6; }
.crm-modal label { display: grid; gap: 5px; margin-bottom: 10px; color: #566176; font-size: 8px; font-weight: 700; }
.crm-modal input,.crm-modal select { width: 100%; height: 39px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: #fff; outline: 0; }
.crm-modal input:focus,.crm-modal select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13,110,253,.08); }
.crm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.crm-modal footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 15px; }
.crm-modal footer button { min-height: 37px; padding: 0 13px; color: #566176; border: 0; border-radius: 8px; background: #eef1f5; }
.crm-modal footer button:last-child { color: #fff; background: var(--blue); }
.crm-detail-drawer { position: absolute; z-index: 55; top: 48px; right: 0; bottom: 0; width: min(390px,90%); padding: 19px; overflow-y: auto; border-left: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: -25px 0 70px rgba(15,23,42,.16); backdrop-filter: blur(22px); animation: drawerIn .25s ease; }
.crm-detail-drawer[hidden] { display: none; }
@keyframes drawerIn { from { translate: 30px 0; opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.drawer-head span { color: var(--blue); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.drawer-head h3 { margin: 4px 0 0; font-size: 18px; }
.drawer-head button { width: 30px; height: 30px; color: #667085; border: 0; border-radius: 8px; background: #f1f3f6; }
.drawer-stage { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid var(--line-blue); border-radius: 9px; background: var(--blue-soft); }
.drawer-stage span { color: #0755c7; font-size: 8px; font-weight: 750; }
.drawer-stage strong { font-size: 9px; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
.drawer-grid div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.drawer-grid small { color: #98a2b3; font-size: 6px; }
.drawer-grid strong { font-size: 8px; }
.drawer-note { padding: 10px; border-radius: 9px; background: #f5f7fa; }
.drawer-note h4 { margin: 0 0 6px; font-size: 8px; }
.drawer-note p { margin: 0; color: #667085; font-size: 7px; line-height: 1.5; }

/* Dark theme inside simulator */
.crm-simulator.dark .crm-app { background: #171717; }
.crm-simulator.dark .crm-sidebar,.crm-simulator.dark .crm-topbar,.crm-simulator.dark .crm-page-toolbar,.crm-simulator.dark .crm-kpi,.crm-simulator.dark .crm-column,.crm-simulator.dark .crm-column > header,.crm-simulator.dark .crm-page-card,.crm-simulator.dark .crm-list,.crm-simulator.dark .crm-split,.crm-simulator.dark .crm-chat,.crm-simulator.dark .crm-dashboard-card { color: #f7f7f8; border-color: rgba(255,255,255,.12); background: rgba(21,24,28,.76); }
.crm-simulator.dark .crm-lead-card,.crm-simulator.dark .crm-calendar,.crm-simulator.dark .crm-agenda-item,.crm-simulator.dark .crm-chat-room,.crm-simulator.dark .crm-chat-messages { color: #f7f7f8; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.075); }
.crm-simulator.dark .crm-toolbar-search input,.crm-simulator.dark .crm-toolbar-select,.crm-simulator.dark .crm-view-switch,.crm-simulator.dark .crm-tool-button,.crm-simulator.dark .crm-global-search input { color: #f7f7f8; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); }

/* Bento system */
.system-section { position: relative; padding: 135px 0; background: rgba(247,249,252,.78); }
.system-bento { display: grid; grid-template-columns: repeat(12,1fr); gap: 13px; }
.bento-card { position: relative; min-height: 330px; overflow: hidden; border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 20px 60px rgba(15,23,42,.06),inset 0 1px #fff; backdrop-filter: blur(18px); }
.bento-large { grid-column: span 7; }
.bento-chat { grid-column: span 5; }
.bento-metric { grid-column: span 5; }
.bento-wide { grid-column: span 7; }
.bento-copy { position: relative; z-index: 2; max-width: 510px; padding: 30px; }
.bento-copy > span { color: var(--blue); font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.bento-copy h3 { margin: 15px 0 11px; font-size: clamp(27px,3vw,42px); line-height: 1.05; letter-spacing: -.045em; }
.bento-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.bento-pipeline { position: absolute; right: -30px; bottom: -36px; display: flex; align-items: end; gap: 8px; width: 72%; height: 66%; padding: 25px; border: 1px solid var(--line); border-radius: 22px 0 0 0; background: linear-gradient(145deg,#edf4ff,#fff); transform: rotate(-4deg); }
.bento-pipeline i { flex: 1; height: 82%; border: 1px solid rgba(13,110,253,.12); border-radius: 11px 11px 0 0; background: rgba(255,255,255,.75); }
.bento-pipeline i:nth-child(2) { height: 68%; }
.bento-pipeline i:nth-child(3) { height: 92%; }
.bento-pipeline i:nth-child(4) { height: 55%; }
.bento-pipeline span { position: absolute; top: 26%; left: 14%; width: 68%; height: 2px; background: var(--blue); box-shadow: 0 0 18px rgba(13,110,253,.4); animation: scan 4s ease-in-out infinite; }
@keyframes scan { 50% { translate: 0 130px; } }
.bento-messages { display: grid; gap: 11px; padding: 5px 27px 28px; }
.bento-messages p { display: flex; align-items: end; gap: 8px; width: 86%; margin: 0; }
.bento-messages p.mine { justify-self: end; }
.bento-messages i { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 7px; font-style: normal; font-weight: 750; }
.bento-messages span { display: grid; gap: 3px; padding: 10px 12px; color: #566176; border: 1px solid var(--line); border-radius: 13px 13px 13px 3px; background: #f6f8fb; font-size: 9px; }
.bento-messages .mine span { color: #fff; border-color: var(--blue); border-radius: 13px 13px 3px 13px; background: var(--blue); }
.bento-messages strong { font-size: 7px; }
.metric-visual { position: absolute; right: 25px; bottom: 23px; left: 25px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: #f8faff; }
.metric-visual > strong { font-size: 9px; }
.metric-visual > div { display: flex; align-items: end; gap: 9px; height: 120px; margin-top: 12px; }
.metric-visual i { flex: 1; height: var(--h); border-radius: 7px 7px 2px 2px; background: linear-gradient(#8bbaff,var(--blue)); animation: bars 3s ease-in-out infinite alternate; }
.metric-visual i:nth-child(2n) { animation-delay: -.8s; }
@keyframes bars { to { scale: 1 .83; transform-origin: bottom; } }
.automation-flow { position: absolute; right: 26px; bottom: 30px; left: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.automation-flow span { display: grid; place-items: center; gap: 7px; min-width: 100px; padding: 13px 10px; color: #536074; border: 1px solid var(--line); border-radius: 13px; background: #fff; font-size: 8px; font-weight: 700; }
.automation-flow span i { color: var(--blue); font-size: 15px; }
.automation-flow b { position: relative; width: 35px; height: 1px; background: rgba(13,110,253,.23); }
.automation-flow b i { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: flow 2s linear infinite; }
@keyframes flow { to { translate: 35px 0; } }

/* Plans */
.plans-section { position: relative; padding: 135px 0; background: rgba(255,255,255,.76); }
.plans-section .section-intro h2 em { display: inline-block; margin-top: 6px; font-size: .72em; }
.billing-control { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 25px; color: #8b96a8; font-size: 10px; font-weight: 700; }
.billing-control > span.active { color: var(--ink); }
.billing-control label { position: relative; display: block; width: 43px; height: 24px; }
.billing-control input { position: absolute; opacity: 0; }
.billing-control label i { position: absolute; inset: 0; border-radius: 999px; background: #d9e0ea; cursor: pointer; transition: .2s; }
.billing-control label i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.18); transition: .2s; }
.billing-control input:checked + i { background: var(--blue); }
.billing-control input:checked + i::after { translate: 19px 0; }
.billing-control > b { padding: 6px 8px; color: #0755c7; border-radius: 999px; background: var(--blue-soft); font-size: 8px; }
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; gap: 14px; }
.plan { position: relative; display: flex; flex-direction: column; min-height: 585px; padding: 28px; border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 20px 55px rgba(15,23,42,.06); transition: .25s ease; }
.plan:hover { border-color: var(--line-blue); box-shadow: 0 30px 75px rgba(15,23,42,.1); }
.plan.featured { color: #fff; border-color: transparent; background: linear-gradient(145deg,#1276ff,#0646a0); box-shadow: 0 30px 80px rgba(13,110,253,.25); }
.plan-popular { position: absolute; top: 18px; right: 18px; padding: 6px 8px; color: #0755c7; border-radius: 999px; background: #fff; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plan header > span { color: var(--blue); font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.featured header > span { color: #c7dcff; }
.plan h3 { margin: 12px 0 8px; font-size: 31px; }
.plan header p { min-height: 61px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.featured header p { color: rgba(255,255,255,.68); }
.plan-price { display: flex; align-items: baseline; margin: 27px 0 24px; }
.plan-price small { margin-right: 4px; font-size: 12px; font-weight: 700; }
.plan-price strong { font-size: 55px; line-height: 1; letter-spacing: -.06em; }
.plan-price > span { margin-left: 5px; color: #8b96a8; font-size: 8px; }
.featured .plan-price > span { color: rgba(255,255,255,.58); }
.plan ul { display: grid; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; }
.plan li { display: flex; align-items: center; gap: 8px; color: #566176; font-size: 10px; }
.featured li { color: rgba(255,255,255,.8); }
.plan li i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--blue); border-radius: 6px; background: var(--blue-soft); font-size: 7px; }
.featured li i { color: #fff; background: rgba(255,255,255,.14); }
.plan > a { display: grid; place-items: center; min-height: 46px; margin-top: auto; color: var(--blue); border: 1px solid var(--line-blue); border-radius: 11px; background: var(--blue-soft); font-size: 10px; font-weight: 750; }
.featured > a { color: var(--blue); border-color: #fff; background: #fff; }

/* Contact + FAQ */
.contact-section { padding: 70px 0 110px; background: transparent; }
.contact-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; padding: 55px; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: rgba(255,255,255,.045); box-shadow: 0 40px 110px rgba(0,0,0,.28); backdrop-filter: blur(20px); }
.contact-copy { color: #fff; }
.contact-copy .section-label { color: #a9cbff; border-color: rgba(108,168,255,.24); background: rgba(13,110,253,.13); }
.contact-copy h2 { margin: 20px 0 18px; font-size: clamp(43px,4.4vw,65px); line-height: 1; letter-spacing: -.055em; }
.contact-copy > p { color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.65; }
.contact-direct { display: grid; gap: 9px; margin-top: 30px; }
.contact-direct a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.04); }
.contact-direct a > i { display: grid; place-items: center; width: 36px; height: 36px; color: #9fc5ff; border-radius: 10px; background: rgba(13,110,253,.14); }
.contact-direct span { display: grid; gap: 2px; font-size: 11px; font-weight: 700; }
.contact-direct small { color: rgba(255,255,255,.4); font-size: 7px; text-transform: uppercase; }
.contact-form { padding: 28px; border-radius: 20px; background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.22); }
.contact-form label { display: grid; gap: 7px; margin-bottom: 13px; color: #566176; font-size: 9px; font-weight: 700; }
.contact-form input,.contact-form textarea { width: 100%; padding: 0 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; outline: 0; }
.contact-form input { height: 43px; }
.contact-form textarea { padding-block: 11px; resize: vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13,110,253,.08); background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.contact-form > button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; color: #fff; border: 0; border-radius: 11px; background: var(--blue); box-shadow: 0 12px 30px rgba(13,110,253,.22); font-size: 10px; font-weight: 750; }
.form-alert { margin-bottom: 12px; padding: 10px; border-radius: 9px; font-size: 9px; }
.form-alert.success { color: #0755c7; background: var(--blue-soft); }
.form-alert.error { color: #fff; background: var(--ink); }
.faq-section { padding: 125px 0; background: rgba(255,255,255,.8); }
.faq-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; align-items: start; }
.faq-list { display: grid; gap: 9px; }
.faq-list details { border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.8); box-shadow: 0 9px 28px rgba(15,23,42,.035); }
.faq-list details[open] { border-color: var(--line-blue); background: #fff; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 18px; font-size: 12px; font-weight: 750; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: var(--blue-soft); }
.faq-list summary i::before,.faq-list summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: var(--blue); translate: -50% -50%; }
.faq-list summary i::after { rotate: 90deg; transition: .2s; }
.faq-list details[open] summary i::after { rotate: 0deg; }
.faq-list details p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: 11px; line-height: 1.65; }

/* Footer */
.site-footer { color: #fff; background: #020712; }
.footer-main { display: grid; grid-template-columns: 1.35fr .55fr .7fr 1fr; gap: 45px; padding-block: 65px 50px; }
.footer-main > div:first-child img { width: 145px; }
.footer-main p { color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.65; }
.footer-main strong { display: block; margin-bottom: 15px; color: #fff; font-size: 10px; }
.footer-main nav { display: grid; align-content: start; gap: 9px; }
.footer-main nav a { color: rgba(255,255,255,.48); font-size: 9px; }
.footer-main nav a:hover { color: #fff; }
.footer-social { display: flex; gap: 7px; margin-top: 14px; }
.footer-social a { display: grid; place-items: center; width: 32px; height: 32px; color: #a9cbff; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); }
.footer-bottom { display: flex; justify-content: space-between; padding-block: 18px; color: rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.08); font-size: 8px; }
.whatsapp-button { position: fixed; z-index: 900; right: 22px; bottom: 22px; display: grid; place-items: center; width: 52px; height: 52px; color: #fff; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: var(--blue); box-shadow: 0 15px 40px rgba(13,110,253,.3); font-size: 21px; transition: .2s; }
.whatsapp-button:hover { background: var(--blue-dark); box-shadow: 0 19px 46px rgba(13,110,253,.36); }

/* Reveal */
[data-reveal] { opacity: 0; translate: 0 25px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].visible,[data-reveal].is-visible { opacity: 1; translate: 0; }

/* Responsive */
@media (max-width: 1100px) {
    .hero-layout { grid-template-columns: 1fr 1fr; gap: 42px; }
    .hero-copy h1 { font-size: clamp(55px,6.8vw,76px); }
    .scene-lead { scale: .9; }
    .lead-a,.lead-c { right: -25px; }
    .lead-b { left: -35px; }
    .crm-app { grid-template-columns: 74px 1fr; }
    .crm-page-toolbar { flex-wrap: wrap; }
    .crm-toolbar-search { max-width: none; }
}

@media (max-width: 900px) {
    .nav-menu-button { display: grid; place-items: center; }
    .nav-links { position: absolute; top: calc(100% + 8px); right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-lg); }
    .nav-links.open { display: flex; }
    .nav-links > a { text-align: center; }
    .nav-links .nav-login,.nav-links .nav-primary { margin-left: 0; }
    .hero-section { padding-top: 125px; }
    .hero-layout { grid-template-columns: minmax(0,1fr); }
    .hero-copy { min-width: 0; max-width: 720px; }
    .hero-scene { width: min(720px,100%); margin: auto; }
    .bento-large,.bento-chat,.bento-metric,.bento-wide { grid-column: span 12; }
    .plans-grid { grid-template-columns: 1fr; max-width: 620px; margin: auto; }
    .plan { min-height: auto; }
    .contact-shell { grid-template-columns: 1fr; }
    .faq-layout { grid-template-columns: 1fr; gap: 35px; }
    .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
    .footer-main > div:last-child { grid-column: span 3; }
}

@media (max-width: 700px) {
    .container { width: min(100% - 28px,1220px); }
    .site-nav.is-scrolled .nav-shell { width: min(100% - 20px,1280px); min-height: 58px; padding-left: 14px; border-radius: 15px; }
    .nav-brand img { width: 124px; }
    .hero-section { min-height: auto; padding: 105px 0 70px; }
    .hero-copy h1 { font-size: clamp(48px,14.2vw,65px); }
    .hero-copy > p { font-size: 15px; }
    .hero-actions { display: grid; }
    .button { width: 100%; }
    .hero-assurances { display: grid; grid-template-columns: 1fr 1fr; }
    .hero-scene { min-height: 470px; margin-top: 24px; }
    .scene-orbit { scale: .68; }
    .hero-app-card { border-radius: 19px; transform: none; }
    .hero-app-bar { grid-template-columns: 1fr auto; }
    .hero-app-bar > span { display: none; }
    .hero-app-body { grid-template-columns: 43px 1fr; min-height: 315px; }
    .hero-mini-rail { padding-inline: 5px; }
    .hero-mini-rail span { width: 30px; height: 30px; }
    .hero-mini-workspace { padding: 9px; }
    .hero-mini-board { gap: 5px; }
    .hero-mini-board > div { min-width: 130px; min-height: 230px; }
    .hero-mini-board { overflow: hidden; }
    .scene-lead { min-width: 170px; scale: .72; }
    .lead-a { top: -20px; right: -38px; }
    .lead-b { display: none; }
    .lead-c { right: -45px; bottom: -15px; }
    .hero-scroll-hint { display: none; }
    .section-intro h2 { font-size: clamp(41px,12vw,58px); }
    .demo-section,.system-section,.plans-section,.faq-section { padding-block: 90px; }
    .crm-simulator { height: 740px; border-radius: 20px; }
    .crm-browser-bar { grid-template-columns: 1fr auto; }
    .crm-browser-address { display: none; }
    .crm-app { grid-template-columns: 58px 1fr; }
    .crm-sidebar { padding-inline: 6px; }
    .crm-sidebar button { min-height: 44px; }
    .crm-sidebar button span { display: none; }
    .crm-topbar { height: 58px; padding-inline: 10px; }
    .crm-mobile-title { min-width: 85px; }
    .crm-global-search { display: none; }
    .crm-top-actions > button,.crm-top-actions > div { display: none; }
    .crm-content { height: calc(100% - 58px); padding: 9px; }
    .crm-page-toolbar { align-items: center; padding: 9px; }
    .crm-page-heading { min-width: 100%; }
    .crm-toolbar-search { flex-basis: 100%; order: 2; }
    .crm-toolbar-select { flex: 1; }
    .crm-toolbar-actions { margin-left: 0; }
    .crm-tool-button span { display: none; }
    .crm-kpis { grid-template-columns: repeat(2,1fr); }
    .crm-kanban { min-height: 430px; }
    .crm-column { flex-basis: 190px; min-width: 190px; }
    .crm-list-row { grid-template-columns: 1fr auto; }
    .crm-list-row > *:nth-child(2),.crm-list-row > *:nth-child(5) { display: none; }
    .crm-split { grid-template-columns: 1fr; }
    .crm-split-list { display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .crm-split-list button { min-width: 160px; }
    .crm-contact-info { grid-template-columns: 1fr; }
    .crm-agenda { grid-template-columns: 1fr; }
    .crm-chat { grid-template-columns: 1fr; }
    .crm-chat-list { display: none; }
    .crm-dashboard-card.small { grid-column: span 6; }
    .crm-dashboard-card.chart,.crm-dashboard-card.ranking { grid-column: span 12; }
    .crm-detail-drawer { top: 48px; width: calc(100% - 58px); }
    .bento-card { min-height: 380px; }
    .bento-copy { padding: 23px; }
    .automation-flow { flex-wrap: wrap; }
    .automation-flow b { display: none; }
    .automation-flow span { min-width: 42%; }
    .billing-control { flex-wrap: wrap; }
    .contact-section { padding-block: 75px; }
    .contact-shell { gap: 35px; padding: 25px 18px; border-radius: 22px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-main > div:first-child,.footer-main > div:last-child { grid-column: span 2; }
    .footer-bottom { display: grid; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    [data-reveal] { opacity: 1; translate: none; }
    .kinetic-grid { display: none; }
}

/* Simulator V2 — surfaces generated by the live product state */
.crm-content.page-enter { animation: crmPageIn .28s ease both; }
@keyframes crmPageIn { from { opacity: .45; translate: 0 5px; } }
.crm-page-heading small,.crm-simple-head small,.crm-welcome small { color: var(--blue); font-size: 6px; font-weight: 800; letter-spacing: .13em; }
.crm-kpis > article { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); }
.crm-kpis > article > i { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; color: var(--blue); border-radius: 8px; background: var(--blue-soft); font-size: 11px; }
.crm-kpis > article > div { display: grid; min-width: 0; }
.crm-kpis > article span { color: #8b96a8; font-size: 6px; white-space: nowrap; }
.crm-kpis > article strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.crm-kpis > article > small { margin-left: auto; color: #087a55; font-size: 5px; white-space: nowrap; }
.crm-column > header > div { display: flex; align-items: center; gap: 6px; }
.crm-column > header > div > i { width: 7px; height: 7px; border-radius: 50%; background: var(--stage); }
.crm-column > header > div strong { font-size: 8px; }
.crm-column > header > div b { display: grid; place-items: center; min-width: 18px; height: 18px; color: var(--blue); border-radius: 99px; background: var(--blue-soft); font-size: 6px; }
.crm-column > header > span { color: #7d899a; font-size: 6px; }
.crm-column-cards { flex: 1; min-height: 100px; padding: 8px; }
.crm-add-card { width: calc(100% - 16px); min-height: 29px; margin: 0 8px 8px; color: #788498; border: 1px dashed rgba(13,110,253,.23); border-radius: 8px; background: rgba(13,110,253,.035); font-size: 7px; cursor: pointer; }
.crm-add-card:hover { color: var(--blue); background: var(--blue-soft); }
.crm-lead-card { border-left-color: var(--stage); }
.crm-card-top { display: flex; align-items: center; justify-content: space-between; }
.crm-card-top button { width: 19px; height: 19px; color: #98a2b3; border: 0; border-radius: 5px; background: transparent; font-size: 8px; }
.crm-temperature { padding: 3px 5px; color: #596579; border-radius: 4px; background: #f0f2f5; font-size: 5px; font-weight: 800; text-transform: uppercase; }
.crm-temperature.quente { color: #0755c7; background: #e8f1ff; }
.crm-lead-card h4 { margin: 2px 0 0; font-size: 9px; }
.crm-lead-card > p { margin: 0; color: #7c8799; font-size: 6px; }
.crm-lead-card .crm-card-value { font-size: 8px; }
.crm-next-action { display: flex; align-items: flex-start; gap: 5px; padding: 6px; border-radius: 6px; background: #f6f8fb; }
.crm-next-action > i { color: var(--blue); font-size: 7px; }
.crm-next-action span { display: grid; color: #566176; font-size: 6px; }
.crm-next-action small { color: #9aa4b4; font-size: 5px; }
.crm-lead-card footer { justify-content: flex-start; gap: 5px; }
.crm-lead-card footer > span { color: #7c8799; font-size: 5px; }
.crm-lead-card footer > b { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.crm-lead-card footer > b i { display: inline; width: auto; height: auto; color: inherit; background: none; }
.crm-list > header.crm-list-row { min-height: 34px; color: #8b96a8; background: #f9fafb; font-size: 6px; font-weight: 800; text-transform: uppercase; cursor: default; }
.crm-list-row > span:first-child { display: grid; grid-template-columns: 29px 1fr; align-items: center; }
.crm-list-row > span:first-child .crm-list-logo { grid-row: span 2; display: grid; place-items: center; width: 27px; height: 27px; color: var(--blue); border-radius: 7px; background: var(--blue-soft); font-size: 6px; font-style: normal; }
.crm-list-row > span:first-child strong { font-size: 8px; }
.crm-list-row > span:first-child small { color: #98a2b3; font-size: 6px; }
.crm-list-row > span:nth-child(2) { display: flex; align-items: center; gap: 5px; }
.crm-list-row > span:nth-child(2) > i { width: 6px; height: 6px; border-radius: 50%; }
.crm-list-row > span:last-child { display: flex; align-items: center; gap: 5px; }
.crm-row-avatar { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 5px; font-style: normal; }
.crm-detail-company { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.crm-detail-company > i { display: grid; place-items: center; width: 43px; height: 43px; color: #fff; border-radius: 12px; background: var(--blue); font-size: 9px; font-style: normal; font-weight: 800; }
.crm-detail-company > div { flex: 1; }
.crm-detail-company small { color: var(--blue); font-size: 6px; font-weight: 800; text-transform: uppercase; }
.crm-detail-company h3 { margin: 2px 0 0; font-size: 13px; }
.crm-detail-company p { margin: 1px 0 0; color: #8b96a8; font-size: 7px; }
.crm-detail-company > strong { font-size: 10px; }
.crm-contact-info > span { display: grid; gap: 2px; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; font-size: 7px; text-overflow: ellipsis; }
.crm-timeline h4 { margin: 15px 0 7px; font-size: 9px; }
.crm-timeline p { display: flex; gap: 8px; margin: 0; padding: 7px 0; }
.crm-timeline p > i { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--blue); border-radius: 7px; background: var(--blue-soft); font-size: 8px; }
.crm-timeline p span { display: grid; color: #8792a4; font-size: 6px; }
.crm-timeline p strong { color: var(--ink); font-size: 7px; }
.crm-empty { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 360px; color: #8b96a8; border: 1px dashed var(--line); border-radius: 14px; font-size: 8px; }
.crm-empty > i { color: var(--blue); font-size: 24px; }
.crm-empty strong { color: var(--ink); font-size: 11px; }

.crm-simple-head,.crm-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 11px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.75); }
.crm-simple-head h2,.crm-welcome h2 { margin: 3px 0; font-size: 16px; }
.crm-simple-head p,.crm-welcome p { margin: 0; color: #7f8a9c; font-size: 7px; }
.crm-simple-head > button,.crm-welcome > button { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; color: #fff; border: 0; border-radius: 9px; background: var(--blue); font-size: 7px; font-weight: 700; cursor: pointer; }
.crm-dashboard-card { display: block; }
.crm-dashboard-card > span { margin: 0 0 5px; }
.crm-dashboard-card > small { display: block; margin-top: 8px; color: #087a55; font-size: 6px; }
.crm-dashboard-card > small.neutral { color: var(--blue); }
.crm-dashboard-card header { display: flex; align-items: center; justify-content: space-between; }
.crm-dashboard-card header > div { display: grid; }
.crm-dashboard-card header span { font-size: 8px; font-weight: 800; }
.crm-dashboard-card header strong,.crm-dashboard-card header small { color: #8b96a8; font-size: 6px; }
.crm-dashboard-card header > b { font-size: 13px; }
.crm-dashboard-card header button { color: var(--blue); border: 0; background: none; font-size: 6px; font-weight: 800; }
.crm-line-chart { height: 205px; padding-top: 16px; }
.crm-line-chart svg { width: 100%; height: 160px; overflow: visible; }
.crm-line-chart path:not(.area) { fill: none; stroke: var(--blue); stroke-width: 3; vector-effect: non-scaling-stroke; }
.crm-line-chart .area { fill: url(#area); stroke: none; }
.crm-line-chart > div { display: flex; justify-content: space-between; color: #98a2b3; font-size: 6px; }
.crm-dashboard-card.ranking ul { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.crm-dashboard-card.ranking li { display: flex; align-items: center; gap: 7px; min-height: 47px; padding: 7px; border-radius: 8px; background: #f7f9fc; }
.crm-dashboard-card.ranking li > i:not(.person) { width: 6px; height: 6px; border-radius: 50%; background: #8bbaff; }
.crm-dashboard-card.ranking li > i.hot { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.crm-dashboard-card.ranking li > span { display: grid; flex: 1; color: #8a95a6; font-size: 6px; }
.crm-dashboard-card.ranking li strong { color: var(--ink); font-size: 7px; }
.crm-dashboard-card.ranking li > b:not(:first-child) { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 6px; }
.crm-dashboard-card.ranking li > em { margin-left: auto; font-size: 7px; font-style: normal; font-weight: 800; }
.crm-dashboard-card.ranking .person { display: grid; place-items: center; width: 25px; height: 25px; color: var(--blue); border-radius: 7px; background: var(--blue-soft); font-size: 6px; font-style: normal; }
.crm-funnel { display: grid; gap: 8px; margin-top: 18px; }
.crm-funnel span { display: flex; align-items: center; justify-content: space-between; width: var(--w); min-height: 31px; padding: 0 10px; color: #fff; border-radius: 6px; background: linear-gradient(90deg,#0755c7,var(--blue)); font-size: 7px; }

.crm-calendar > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.crm-calendar > header strong { font-size: 10px; }
.crm-calendar > header button { color: var(--blue); border: 0; background: none; }
.crm-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.crm-week b { padding: 5px 0; color: #9aa4b4; text-align: center; font-size: 5px; }
.crm-week span { position: relative; display: grid; place-items: center; min-height: 42px; color: #566176; border-radius: 8px; font-size: 7px; }
.crm-week span.muted { color: #c1c7d0; }
.crm-week span.today { color: #fff; background: var(--blue); box-shadow: 0 7px 15px rgba(13,110,253,.2); }
.crm-week span i { position: absolute; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.crm-day { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.crm-day > header { display: grid; margin-bottom: 9px; }
.crm-day > header span { color: var(--blue); font-size: 5px; font-weight: 800; }
.crm-day > header strong { font-size: 10px; }
.crm-appointment { display: grid; grid-template-columns: 34px 5px 1fr auto; align-items: center; gap: 6px; min-height: 57px; border-bottom: 1px solid var(--line); }
.crm-appointment time { color: #7f8a9c; font-size: 6px; }
.crm-appointment > i { width: 5px; height: 25px; border-radius: 9px; background: #9bc0fa; }
.crm-appointment.active > i { background: var(--blue); }
.crm-appointment > span { display: grid; color: #8b96a8; font-size: 6px; }
.crm-appointment strong { color: var(--ink); font-size: 8px; }
.crm-appointment > b { display: grid; place-items: center; width: 23px; height: 23px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 5px; }

.crm-chat-list > label { position: relative; display: block; margin-bottom: 6px; }
.crm-chat-list > label i { position: absolute; top: 9px; left: 8px; width: auto; height: auto; color: #98a2b3; background: none; }
.crm-chat-list input { width: 100%; height: 31px; padding: 0 8px 0 25px; border: 1px solid var(--line); border-radius: 8px; font-size: 6px; }
.crm-chat-list button { align-items: center; cursor: pointer; }
.crm-chat-list button > span { flex: 1; min-width: 0; }
.crm-chat-list button time { color: #a1aab8; font-size: 5px; }
.crm-chat-list .person { position: relative; flex: 0 0 29px; }
.crm-chat-list .person b,.crm-conversation header > i b { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #22a06b; }
.crm-chat-list .person.team { color: var(--blue); background: var(--blue-soft); }
.crm-conversation { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.crm-conversation > header { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.crm-conversation > header > i { position: relative; display: grid; place-items: center; width: 30px; height: 30px; color: #fff; border-radius: 50%; background: var(--ink); font-size: 7px; font-style: normal; }
.crm-conversation > header span { display: grid; flex: 1; font-size: 8px; }
.crm-conversation > header small { color: #22a06b; font-size: 5px; }
.crm-conversation > header button { width: 28px; height: 28px; color: var(--blue); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.crm-messages { display: flex; flex-direction: column; gap: 8px; padding: 13px; overflow-y: auto; background: #f7f9fc; }
.crm-messages > time { color: #9aa4b4; text-align: center; font-size: 5px; }
.crm-messages p { display: flex; align-items: end; gap: 5px; max-width: 76%; margin: 0; }
.crm-messages p > i { display: grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; color: #fff; border-radius: 50%; background: var(--ink); font-size: 5px; font-style: normal; }
.crm-messages p > span { display: grid; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px 10px 10px 3px; background: #fff; font-size: 7px; }
.crm-messages p small { margin-top: 3px; color: #9ba5b5; font-size: 5px; }
.crm-messages p.mine { align-self: flex-end; }
.crm-messages p.mine > span { color: #fff; border-color: var(--blue); border-radius: 10px 10px 3px 10px; background: var(--blue); }
.crm-messages p.mine small { color: rgba(255,255,255,.68); text-align: right; }
.crm-message-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.crm-message-form input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; font-size: 7px; }
.crm-message-form button { width: 34px; color: #657287; border: 0; border-radius: 9px; background: #f0f2f5; }
.crm-message-form button:last-child { color: #fff; background: var(--blue); }

.crm-feed { display: grid; grid-template-columns: 1fr 220px; gap: 10px; }
.crm-feed > section { display: grid; gap: 9px; }
.crm-feed article,.crm-feed > aside { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.crm-feed article header { display: flex; align-items: center; gap: 7px; }
.crm-feed article header > i { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; border-radius: 50%; background: var(--blue); font-size: 6px; font-style: normal; }
.crm-feed article header span { display: grid; flex: 1; font-size: 8px; }
.crm-feed article header small { color: #98a2b3; font-size: 5px; }
.crm-feed article header button { color: #8b96a8; border: 0; background: none; }
.crm-feed article > p { color: #596579; font-size: 7px; line-height: 1.6; }
.crm-feed-deal { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line-blue); border-radius: 9px; background: var(--blue-soft); }
.crm-feed-deal > i { color: var(--blue); font-size: 16px; }
.crm-feed-deal span { display: grid; flex: 1; font-size: 7px; }
.crm-feed-deal small { color: #667085; font-size: 5px; }
.crm-feed-deal > b { color: var(--blue); font-size: 6px; }
.crm-feed article footer { display: flex; gap: 15px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.crm-feed article footer button { color: #68758a; border: 0; background: none; font-size: 6px; }
.crm-feed > aside h3 { margin: 0 0 10px; font-size: 9px; }
.crm-feed > aside p { display: flex; gap: 7px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.crm-feed > aside p > i { display: grid; place-items: center; width: 25px; height: 25px; color: var(--blue); border-radius: 7px; background: var(--blue-soft); }
.crm-feed > aside p span { display: grid; color: #8b96a8; font-size: 5px; }
.crm-feed > aside p strong { color: var(--ink); font-size: 7px; }

.crm-detail-drawer > header { display: flex; justify-content: space-between; margin-bottom: 13px; }
.crm-detail-drawer > header small { color: var(--blue); font-size: 6px; font-weight: 800; }
.crm-detail-drawer > header h3 { margin: 3px 0 0; font-size: 17px; }
.crm-detail-drawer > header button { width: 30px; height: 30px; color: #667085; border: 0; border-radius: 8px; background: #f1f3f6; }
.crm-detail-drawer > .crm-split-detail { padding: 0; }
.crm-detail-drawer > footer { display: flex; gap: 7px; margin-top: 16px; }
.crm-detail-drawer > footer button { flex: 1; height: 36px; color: var(--blue); border: 1px solid var(--line-blue); border-radius: 9px; background: var(--blue-soft); font-size: 7px; font-weight: 800; }
.crm-detail-drawer > footer button:last-child { color: #fff; background: var(--blue); }

.crm-simulator.dark .crm-kpis > article,.crm-simulator.dark .crm-simple-head,.crm-simulator.dark .crm-welcome,.crm-simulator.dark .crm-calendar,.crm-simulator.dark .crm-day,.crm-simulator.dark .crm-feed article,.crm-simulator.dark .crm-feed > aside { color: #f7f7f8; border-color: rgba(255,255,255,.12); background: rgba(21,24,28,.76); }
.crm-simulator.dark .crm-next-action,.crm-simulator.dark .crm-dashboard-card.ranking li,.crm-simulator.dark .crm-messages { background: rgba(255,255,255,.055); }
.crm-simulator.dark .crm-simple-head h2,.crm-simulator.dark .crm-welcome h2,.crm-simulator.dark .crm-detail-company h3,.crm-simulator.dark .crm-timeline p strong,.crm-simulator.dark .crm-appointment strong,.crm-simulator.dark .crm-dashboard-card.ranking li strong,.crm-simulator.dark .crm-feed > aside p strong { color: #f7f7f8; }

@media (max-width:900px) {
    .site-nav.is-scrolled { top: 10px; }
    .crm-feed { grid-template-columns: 1fr; }
    .crm-feed > aside { display: none; }
}
@media (max-width:600px) {
    .hero-copy h1 { font-size: clamp(44px,12.2vw,50px); letter-spacing: -.075em; }
    .hero-copy > p { max-width: 100%; overflow-wrap: anywhere; }
    .crm-kpis > article > small { display: none; }
    .crm-simple-head,.crm-welcome { align-items: flex-start; padding: 11px; }
    .crm-simple-head p,.crm-welcome p { max-width: 230px; }
    .crm-dashboard-grid.manager .crm-dashboard-card.small { grid-column: span 4; }
    .crm-dashboard-grid.manager .crm-dashboard-card.small strong { font-size: 12px; }
    .crm-week span { min-height: 34px; }
}

/* Landing visual upgrade — Framer composition, ReactBits motion, Figma-style tokens */
:root {
    --blue-electric: #1d7cff;
    --violet: #7559ff;
    --cyan: #4fd7ff;
    --surface-glass: rgba(255,255,255,.72);
    --ease-premium: cubic-bezier(.16,1,.3,1);
}

.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; }
.scroll-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--blue),var(--cyan),var(--violet)); box-shadow: 0 0 14px rgba(29,124,255,.7); transform: scaleX(0); transform-origin: left; will-change: transform; }

.nav-shell { transition: width .35s var(--ease-premium), min-height .35s var(--ease-premium), padding .35s var(--ease-premium), border-radius .35s var(--ease-premium), background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-nav.is-scrolled { top: 16px; }
.site-nav.is-scrolled .nav-shell { width: min(1280px,calc(100% - 32px)); min-height: 58px; padding: 8px 10px 8px 20px; border-width: 1px; border-color: rgba(255,255,255,.95); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 18px 55px rgba(15,23,42,.12); }
.site-nav.is-scrolled .nav-brand img { width: 132px; }
.nav-primary { position: relative; overflow: hidden; }
.nav-primary::before,.button-primary::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%); translate: -120% 0; transition: translate .7s var(--ease-premium); }
.nav-primary:hover::before,.button-primary:hover::before { translate: 120% 0; }

.hero-section::before { content: ""; position: absolute; z-index: 1; top: 70px; left: 7%; width: 42vw; height: 42vw; border-radius: 50%; background: radial-gradient(circle,rgba(117,89,255,.11),transparent 66%); filter: blur(10px); pointer-events: none; }
.hero-copy h1 em { display: inline-block; color: transparent; background: linear-gradient(100deg,#0755c7 5%,#2389ff 38%,#7559ff 64%,#0755c7 92%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: textShine 6s linear infinite; }
@keyframes textShine { to { background-position: -220% center; } }
.button-primary { position: relative; overflow: hidden; background: linear-gradient(135deg,#075bd8,#1682ff); }
.button-secondary { box-shadow: inset 0 1px rgba(255,255,255,.9),0 10px 32px rgba(15,23,42,.06); }

.hero-live-proof { display: flex; align-items: center; gap: 13px; width: fit-content; margin-top: 27px; padding: 9px 13px 9px 9px; border: 1px solid rgba(15,23,42,.075); border-radius: 16px; background: rgba(255,255,255,.68); box-shadow: inset 0 1px #fff,0 14px 40px rgba(15,23,42,.06); backdrop-filter: blur(14px); }
.proof-avatars { display: flex; padding-left: 8px; }
.proof-avatars i { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; color: #fff; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#0d6efd,#064da9); font-size: 7px; font-style: normal; font-weight: 800; }
.proof-avatars i:nth-child(2) { background: linear-gradient(145deg,#7559ff,#5235cb); }
.proof-avatars i:nth-child(3) { background: linear-gradient(145deg,#27a9d3,#09789c); }
.proof-avatars i:last-child { color: #536075; background: #edf2f8; }
.hero-live-proof > div:last-child { display: grid; gap: 3px; }
.hero-live-proof strong { font-size: 9px; }
.hero-live-proof span { display: flex; align-items: center; gap: 5px; color: #7b8698; font-size: 7px; }
.hero-live-proof span b { width: 5px; height: 5px; border-radius: 50%; background: #20b980; box-shadow: 0 0 0 4px rgba(32,185,128,.1); animation: pulse 2s ease infinite; }

.scene-aurora { position: absolute; z-index: -2; width: 86%; aspect-ratio: 1; border-radius: 38% 62% 64% 36%; background: conic-gradient(from 210deg,rgba(13,110,253,.22),rgba(79,215,255,.12),rgba(117,89,255,.2),rgba(13,110,253,.22)); filter: blur(45px); animation: auroraMorph 12s ease-in-out infinite alternate; }
@keyframes auroraMorph { 50% { border-radius: 63% 37% 42% 58%; rotate: 12deg; scale: 1.06; } }
.hero-app-card { will-change: transform; transition: transform .2s ease-out,box-shadow .45s ease; transform-style: preserve-3d; }
.hero-scene:hover .hero-app-card { box-shadow: 0 55px 130px rgba(15,23,42,.2),0 0 0 1px rgba(13,110,253,.1); }
.scene-lead { transition: border-color .3s ease,box-shadow .3s ease; }
.scene-lead:hover { border-color: rgba(13,110,253,.34); box-shadow: 0 24px 65px rgba(13,110,253,.18); }

.proof-section { position: relative; z-index: 3; padding: 34px 0 18px; background: linear-gradient(180deg,#f7f9fc,#f4f7fb); }
.proof-shell { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 44px; overflow: hidden; padding: 34px 38px; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: radial-gradient(circle at var(--spot-x,20%) var(--spot-y,20%),rgba(34,132,255,.3),transparent 28%),linear-gradient(135deg,#07152d,#0a2148 58%,#07152d); box-shadow: 0 30px 80px rgba(9,29,61,.2); }
.proof-shell::after { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,transparent,#000); pointer-events: none; }
.proof-heading,.proof-metrics { position: relative; z-index: 2; }
.proof-heading > span { color: #81b8ff; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.proof-heading h2 { max-width: 520px; margin: 8px 0; font-size: clamp(28px,3vw,43px); line-height: 1.02; letter-spacing: -.045em; }
.proof-heading p { max-width: 530px; margin: 0; color: rgba(255,255,255,.53); font-size: 11px; line-height: 1.55; }
.proof-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.proof-metrics article { position: relative; display: grid; align-content: center; min-height: 120px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.055); backdrop-filter: blur(12px); transition: transform .35s var(--ease-premium),background .35s ease; }
.proof-metrics article:hover { background: rgba(255,255,255,.1); }
.proof-metrics i { position: absolute; top: 15px; right: 15px; color: #79afff; font-size: 14px; }
.proof-metrics strong { font-size: 28px; line-height: 1; letter-spacing: -.05em; }
.proof-metrics span { margin-top: 7px; color: rgba(255,255,255,.48); font-size: 7px; line-height: 1.35; text-transform: uppercase; }

[data-spotlight] { --spot-x: 50%; --spot-y: 50%; }
.bento-card::after,.plan::after { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0; background: radial-gradient(280px circle at var(--spot-x) var(--spot-y),rgba(29,124,255,.13),transparent 68%); pointer-events: none; transition: opacity .3s ease; }
.bento-card:hover::after,.plan:hover::after { opacity: 1; }
.bento-card > *,.plan > * { position: relative; z-index: 1; }
.plan.featured::after { background: radial-gradient(310px circle at var(--spot-x) var(--spot-y),rgba(255,255,255,.22),transparent 68%); }

.system-bento [data-reveal]:nth-child(2),.plans-grid [data-reveal]:nth-child(2) { transition-delay: .09s; }
.system-bento [data-reveal]:nth-child(3),.plans-grid [data-reveal]:nth-child(3) { transition-delay: .18s; }
.system-bento [data-reveal]:nth-child(4) { transition-delay: .27s; }

@media (max-width: 900px) {
    .proof-section { padding-top: 22px; }
    .proof-shell { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
    .proof-heading p { max-width: 620px; }
}

@media (max-width: 600px) {
    .hero-live-proof { width: 100%; }
    .proof-shell { width: calc(100% - 28px); padding: 24px 18px; border-radius: 22px; }
    .proof-metrics { grid-template-columns: 1fr; }
    .proof-metrics article { min-height: 88px; }
    .proof-metrics strong { font-size: 25px; }
    .proof-metrics span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-app-card { transform: none !important; }
    .scroll-progress i { transition: none; }
}

/* Qualification experience */
.qualification-section { isolation: isolate; overflow: hidden; padding: 145px 0 125px; background: linear-gradient(180deg,#f7f9fc 0%,#edf3fb 52%,#f7f9fc 100%); }
.qualification-moving-grid { position: absolute; z-index: -1; inset: 0; opacity: .78; background-image: linear-gradient(rgba(13,110,253,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,253,.075) 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 70% at 70% 48%,#000,transparent 78%); animation: qualificationGrid 16s linear infinite; }
.qualification-moving-grid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 44%,rgba(13,110,253,.15),transparent 30%),radial-gradient(circle at 38% 62%,rgba(117,89,255,.09),transparent 28%); }
@keyframes qualificationGrid { to { background-position: 64px -64px; } }
.qualification-intro { max-width: 810px; }
.qualification-intro h2 em,.crm-story-copy h2 em { color: transparent; background: linear-gradient(95deg,#0875ee,#7559ff); -webkit-background-clip: text; background-clip: text; font-family: var(--serif); font-weight: 400; }
.qualification-shell { --spot-x: 68%; --spot-y: 42%; position: relative; display: grid; grid-template-columns: .82fr 1.18fr; min-height: 600px; overflow: hidden; border: 1px solid rgba(255,255,255,.94); border-radius: 30px; background: radial-gradient(600px circle at var(--spot-x) var(--spot-y),rgba(13,110,253,.12),transparent 62%),rgba(255,255,255,.73); box-shadow: 0 38px 100px rgba(24,54,93,.13),inset 0 1px #fff; backdrop-filter: blur(24px); }
.qualification-copy { position: relative; z-index: 3; align-self: center; padding: clamp(34px,5vw,66px); }
.qualification-kicker { display: inline-flex; align-items: center; gap: 8px; color: #08705b; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qualification-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #20b980; box-shadow: 0 0 0 5px rgba(32,185,128,.1); animation: pulse 2s ease infinite; }
.qualification-copy h3 { margin: 19px 0 15px; font-size: clamp(34px,3.5vw,52px); line-height: 1.02; letter-spacing: -.055em; }
.qualification-copy > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.qualification-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
.qualification-signals span { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; color: #546075; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); font-size: 8px; font-weight: 700; }
.qualification-signals i { color: var(--blue); font-size: 13px; }
.score-scale { display: flex; align-items: center; gap: 8px; margin-top: 25px; color: #8a95a6; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.score-scale i { flex: 1; height: 3px; border-radius: 9px; background: #d8e2f0; }
.score-scale i:last-of-type { background: linear-gradient(90deg,#80b7ff,var(--blue)); }
.qualification-stage { position: relative; min-width: 0; overflow: hidden; border-left: 1px solid rgba(13,110,253,.1); background: radial-gradient(circle at 50% 47%,rgba(13,110,253,.13),transparent 36%),linear-gradient(145deg,rgba(240,246,255,.58),rgba(255,255,255,.25)); }
.stage-grid,.journey-grid { position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(rgba(13,110,253,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,253,.09) 1px,transparent 1px); background-size: 42px 42px; animation: stageGrid 12s linear infinite; }
@keyframes stageGrid { to { background-position: 42px 42px; } }
.score-radar { position: absolute; top: 50%; left: 50%; width: 420px; height: 420px; translate: -50% -50%; }
.score-radar > i { position: absolute; inset: 0; border: 1px solid rgba(13,110,253,.13); border-radius: 50%; animation: radarPulse 4s ease-out infinite; }
.score-radar > i:nth-child(2) { inset: 58px; animation-delay: -1.3s; }
.score-radar > i:nth-child(3) { inset: 116px; animation-delay: -2.6s; }
.score-radar > span { position: absolute; top: 50%; left: 50%; width: 49%; height: 1px; background: linear-gradient(90deg,var(--blue),transparent); transform-origin: left; animation: radarSweep 5s linear infinite; }
@keyframes radarPulse { 50% { border-color: rgba(13,110,253,.3); box-shadow: inset 0 0 30px rgba(13,110,253,.035); } }
@keyframes radarSweep { to { rotate: 360deg; } }
.signal-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; min-width: 178px; padding: 10px; border: 1px solid rgba(13,110,253,.14); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 16px 45px rgba(15,23,42,.11); backdrop-filter: blur(15px); animation: signalFloat 5s ease-in-out infinite; }
.signal-node > i { display: grid; place-items: center; width: 32px; height: 32px; color: var(--blue); border-radius: 9px; background: var(--blue-soft); }
.signal-node span { display: grid; flex: 1; color: var(--ink); font-size: 8px; font-weight: 750; }
.signal-node small { color: #98a2b3; font-size: 6px; font-weight: 600; }
.signal-node > b { color: #08705b; font-size: 8px; }
.signal-company { top: 65px; left: 38px; }
.signal-interest { top: 112px; right: 30px; animation-delay: -1.6s; }
.signal-timing { right: 46px; bottom: 55px; animation-delay: -3.2s; }
@keyframes signalFloat { 50% { translate: 0 -9px; } }
.qualified-lead-card { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(370px,70%); padding: 20px; border: 1px solid rgba(255,255,255,.95); border-radius: 20px; background: rgba(255,255,255,.91); box-shadow: 0 35px 90px rgba(14,48,92,.2),0 0 0 1px rgba(13,110,253,.08); translate: -50% -42%; backdrop-filter: blur(20px); }
.qualified-lead-card header { display: flex; align-items: center; gap: 11px; }
.qualified-logo { display: grid; place-items: center; width: 43px; height: 43px; color: #fff; border-radius: 12px; background: linear-gradient(145deg,#0d6efd,#7559ff); font-size: 10px; font-weight: 800; }
.qualified-lead-card header > div:nth-child(2) { display: grid; flex: 1; }
.qualified-lead-card header small { color: #20a477; font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qualified-lead-card header strong { margin-top: 2px; font-size: 12px; }
.qualified-lead-card header > i { color: var(--blue); font-size: 18px; }
.qualified-score { margin: 19px 0; padding: 14px; border-radius: 13px; background: #f5f8fc; }
.qualified-score > div { display: flex; align-items: end; justify-content: space-between; }
.qualified-score span { color: #7c8799; font-size: 7px; font-weight: 700; }
.qualified-score strong { font-size: 26px; line-height: 1; }
.qualified-score strong small { color: #98a2b3; font-size: 8px; }
.qualified-score > i { display: block; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 8px; background: #dfe7f1; }
.qualified-score > i b { display: block; width: 86%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4ec7ff,var(--blue),#7559ff); animation: scoreLoad 2.2s var(--ease-premium) both; }
@keyframes scoreLoad { from { width: 0; } }
.qualified-lead-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qualified-lead-card footer > span { display: flex; align-items: center; gap: 6px; color: #08705b; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.qualified-lead-card footer > span i { width: 6px; height: 6px; border-radius: 50%; background: #20b980; }
.qualified-lead-card footer > b { color: var(--blue); font-size: 7px; }
.qualification-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.qualification-benefits article { display: flex; align-items: center; gap: 13px; padding: 20px; border: 1px solid rgba(15,23,42,.07); border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: 0 12px 35px rgba(15,23,42,.04); }
.qualification-benefits article > i { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: var(--blue); border-radius: 12px; background: var(--blue-soft); font-size: 15px; }
.qualification-benefits article div { display: grid; gap: 4px; }
.qualification-benefits strong { font-size: 10px; }
.qualification-benefits span { color: var(--muted); font-size: 8px; line-height: 1.5; }

/* CRM depth */
.crm-story-section { position: relative; overflow: hidden; padding: 140px 0; background: #fff; }
.crm-story-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(50px,8vw,120px); }
.crm-story-copy h2 { margin: 20px 0; font-size: clamp(46px,5vw,73px); line-height: .98; letter-spacing: -.06em; }
.crm-story-copy p { max-width: 520px; margin: 0 0 30px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.crm-journey { --spot-x: 50%; --spot-y: 50%; position: relative; display: grid; gap: 13px; overflow: hidden; min-height: 520px; padding: 62px 50px; border: 1px solid rgba(13,110,253,.11); border-radius: 30px; background: radial-gradient(430px circle at var(--spot-x) var(--spot-y),rgba(13,110,253,.16),transparent 65%),linear-gradient(145deg,#f6f9fe,#ecf3fc); box-shadow: 0 35px 90px rgba(21,64,120,.12); }
.journey-grid { animation-direction: reverse; mask-image: radial-gradient(circle,#000,transparent 78%); }
.journey-line { position: absolute; z-index: 1; top: 92px; bottom: 92px; left: 74px; width: 2px; background: rgba(13,110,253,.15); }
.journey-line i { display: block; width: 100%; height: 28%; background: linear-gradient(var(--cyan),var(--blue)); box-shadow: 0 0 18px rgba(13,110,253,.65); animation: journeyTravel 4s ease-in-out infinite; }
@keyframes journeyTravel { 50% { translate: 0 250%; } }
.journey-step { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; min-height: 85px; padding: 14px 18px; border: 1px solid rgba(15,23,42,.07); border-radius: 16px; background: rgba(255,255,255,.8); box-shadow: 0 12px 35px rgba(15,23,42,.055); backdrop-filter: blur(13px); transition: .3s var(--ease-premium); }
.journey-step:hover { border-color: var(--line-blue); box-shadow: 0 16px 42px rgba(15,23,42,.08); }
.journey-step > i { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(--blue); border-radius: 12px; background: var(--blue-soft); font-size: 15px; }
.journey-step.active > i { color: #fff; background: linear-gradient(145deg,var(--blue),#7559ff); box-shadow: 0 10px 25px rgba(13,110,253,.25); }
.journey-step span { display: grid; grid-template-columns: 35px 1fr; align-items: center; flex: 1; }
.journey-step small { grid-row: span 2; color: #a0a9b8; font-size: 7px; font-weight: 800; }
.journey-step strong { font-size: 11px; }
.journey-step b { color: #8893a5; font-size: 7px; font-weight: 600; }
.crm-capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 70px; }
.crm-capability-grid article { position: relative; min-height: 250px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fafbfd; transition: .35s var(--ease-premium); }
.crm-capability-grid article:hover { border-color: var(--line-blue); box-shadow: 0 24px 60px rgba(15,23,42,.08); }
.crm-capability-grid article > span { position: absolute; top: 23px; right: 25px; color: #b8c1cf; font-size: 8px; font-weight: 800; }
.crm-capability-grid article > i { display: grid; place-items: center; width: 48px; height: 48px; color: var(--blue); border-radius: 14px; background: var(--blue-soft); font-size: 18px; }
.crm-capability-grid h3 { margin: 32px 0 11px; font-size: 23px; letter-spacing: -.035em; }
.crm-capability-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

/* Deal ecosystem */
.ecosystem-contact-zone { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(155deg,#071731 0%,#020711 58%,#07162d 100%); }
.ecosystem-contact-zone::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; background-image: linear-gradient(rgba(94,158,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(94,158,255,.08) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,#000,rgba(0,0,0,.35) 72%,transparent); }
.ecosystem-section { position: relative; isolation: isolate; overflow: hidden; padding: 140px 0 80px; color: #fff; background: transparent; }
.ecosystem-grid-motion { position: absolute; z-index: -1; inset: 0; opacity: .5; background-image: linear-gradient(rgba(94,158,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(94,158,255,.1) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000,transparent); animation: ecosystemGrid 19s linear infinite; }
.ecosystem-grid-motion::after { content: ""; position: absolute; inset: 10% 20%; border-radius: 50%; background: rgba(13,110,253,.16); filter: blur(110px); }
@keyframes ecosystemGrid { to { background-position: -72px 72px; } }
.ecosystem-intro { max-width: 900px; }
.ecosystem-intro .section-label { color: #a9cbff; border-color: rgba(108,168,255,.25); background: rgba(13,110,253,.13); }
.ecosystem-intro h2 { color: #fff; }
.ecosystem-intro > p { color: rgba(255,255,255,.52); }
.ecosystem-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ecosystem-card { --spot-x: 50%; --spot-y: 50%; position: relative; display: flex; flex-direction: column; min-height: 530px; overflow: hidden; padding: 31px; border: 1px solid rgba(255,255,255,.11); border-radius: 28px; background: radial-gradient(360px circle at var(--spot-x) var(--spot-y),rgba(58,139,255,.2),transparent 70%),rgba(255,255,255,.05); box-shadow: inset 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.2); backdrop-filter: blur(20px); transition: .4s var(--ease-premium); }
.ecosystem-card.training { background: radial-gradient(360px circle at var(--spot-x) var(--spot-y),rgba(35,190,125,.2),transparent 70%),rgba(255,255,255,.05); }
.ecosystem-card:hover { border-color: rgba(125,180,255,.32); box-shadow: inset 0 1px rgba(255,255,255,.1),0 38px 95px rgba(0,0,0,.26); }
.ecosystem-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ecosystem-card-top img { width: 115px; max-height: 43px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.ecosystem-card-top span { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.5); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ecosystem-card-copy { margin-top: 65px; }
.ecosystem-card-copy small { color: #8ebcff; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.training .ecosystem-card-copy small { color: #70d9ae; }
.ecosystem-card-copy h3 { max-width: 510px; margin: 13px 0; font-size: clamp(31px,3vw,45px); line-height: 1.04; letter-spacing: -.05em; }
.ecosystem-card-copy p { max-width: 500px; margin: 0; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.65; }
.prospecting-visual { display: flex; align-items: center; margin-top: auto; padding-top: 45px; }
.prospecting-visual span { display: grid; place-items: center; flex: 0 0 90px; gap: 6px; min-height: 68px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.05); font-size: 7px; }
.prospecting-visual span i { color: #78adff; font-size: 15px; }
.prospecting-visual > b { position: relative; flex: 1; height: 1px; background: rgba(99,162,255,.25); }
.prospecting-visual > b i { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #6ca6ff; box-shadow: 0 0 12px #6ca6ff; animation: ecosystemFlow 2.2s linear infinite; }
@keyframes ecosystemFlow { to { translate: 100px 0; } }
.training-visual { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.055); }
.training-visual > i { display: grid; place-items: center; width: 45px; height: 45px; color: #061329; border-radius: 50%; background: #62d6a5; font-size: 18px; }
.training-visual > div { display: grid; flex: 1; gap: 4px; }
.training-visual span { color: #70d9ae; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.training-visual strong { font-size: 9px; }
.training-visual b { height: 3px; margin-top: 7px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.training-visual b i { display: block; width: 72%; height: 100%; background: linear-gradient(90deg,#31bc81,#75e0b4); animation: trainingProgress 4s ease-in-out infinite alternate; }
@keyframes trainingProgress { to { width: 94%; } }

@media (max-width: 1000px) {
    .qualification-shell,.crm-story-layout { grid-template-columns: 1fr; }
    .qualification-stage { min-height: 560px; border-top: 1px solid rgba(13,110,253,.1); border-left: 0; }
    .crm-story-copy { max-width: 720px; }
}

@media (max-width: 800px) {
    .qualification-section,.crm-story-section,.ecosystem-section { padding-block: 95px; }
    .qualification-benefits,.crm-capability-grid,.ecosystem-cards { grid-template-columns: 1fr; }
    .crm-capability-grid { margin-top: 35px; }
    .ecosystem-card { min-height: 500px; }
}

@media (max-width: 600px) {
    .qualification-moving-grid,.ecosystem-grid-motion { background-size: 46px 46px; }
    .qualification-intro h2 { font-size: 43px; }
    .qualification-shell { border-radius: 22px; }
    .qualification-copy { padding: 27px 20px 32px; }
    .qualification-copy h3 { font-size: 34px; }
    .qualification-signals { grid-template-columns: 1fr; }
    .qualification-stage { min-height: 515px; }
    .score-radar { width: 330px; height: 330px; }
    .signal-node { min-width: 145px; padding: 8px; }
    .signal-company { top: 35px; left: 15px; }
    .signal-interest { top: 92px; right: 10px; }
    .signal-timing { right: 15px; bottom: 28px; }
    .qualified-lead-card { width: calc(100% - 38px); padding: 16px; }
    .qualified-lead-card footer { align-items: flex-start; flex-direction: column; }
    .qualification-benefits article { padding: 16px; }
    .crm-story-copy h2 { font-size: 45px; }
    .crm-journey { min-height: 485px; padding: 42px 17px; border-radius: 22px; }
    .journey-line { top: 67px; bottom: 67px; left: 40px; }
    .journey-step { min-height: 82px; padding: 12px 13px; }
    .journey-step > i { flex-basis: 38px; width: 38px; height: 38px; }
    .crm-capability-grid article { min-height: 215px; }
    .ecosystem-card { min-height: 480px; padding: 22px; border-radius: 22px; }
    .ecosystem-card-top { align-items: flex-start; }
    .ecosystem-card-top span { max-width: 110px; justify-content: flex-end; text-align: right; }
    .ecosystem-card-copy { margin-top: 52px; }
    .ecosystem-card-copy h3 { font-size: 33px; }
    .prospecting-visual span { flex-basis: 76px; }
    .prospecting-visual > b i { animation-name: ecosystemFlowMobile; }
    @keyframes ecosystemFlowMobile { to { translate: 45px 0; } }
}

@media (prefers-reduced-motion: reduce) {
    .qualification-moving-grid,.stage-grid,.journey-grid,.ecosystem-grid-motion { animation: none; }
}

/* ICP lead delivery */
.icp-leads-section { position: relative; isolation: isolate; overflow: hidden; padding: 140px 0; color: #f5f8ff; background: radial-gradient(circle at 78% 18%,rgba(22,102,211,.2),transparent 31%),linear-gradient(145deg,#071b3b,#041329 70%,#061a38); }
.icp-leads-section::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .34; background-image: linear-gradient(rgba(111,169,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(111,169,255,.08) 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent); animation: icpGridMove 18s linear infinite; }
@keyframes icpGridMove { to { background-position: 70px -70px; } }
.icp-star-field { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.icp-star-field i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b8d5ff; box-shadow: 0 0 12px rgba(139,188,255,.9); animation: icpStar 4s ease-in-out infinite; }
.icp-star-field i:nth-child(1) { top: 9%; left: 18%; }
.icp-star-field i:nth-child(2) { top: 16%; right: 11%; animation-delay: -.8s; }
.icp-star-field i:nth-child(3) { top: 41%; left: 7%; animation-delay: -1.5s; }
.icp-star-field i:nth-child(4) { top: 34%; left: 56%; animation-delay: -2.2s; }
.icp-star-field i:nth-child(5) { top: 53%; right: 6%; animation-delay: -3s; }
.icp-star-field i:nth-child(6) { bottom: 20%; left: 29%; animation-delay: -.4s; }
.icp-star-field i:nth-child(7) { bottom: 11%; right: 23%; animation-delay: -1.1s; }
.icp-star-field i:nth-child(8) { top: 20%; left: 41%; animation-delay: -2.6s; }
.icp-star-field i:nth-child(9) { bottom: 35%; right: 42%; animation-delay: -3.4s; }
@keyframes icpStar { 50% { opacity: .25; scale: .55; } }
.icp-leads-intro { position: relative; z-index: 2; max-width: 930px; }
.icp-label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; color: #9bc5ff; border: 1px solid rgba(125,179,255,.32); border-radius: 999px; background: rgba(48,116,208,.1); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.icp-leads-intro h2 { margin: 24px 0 20px; font-size: clamp(54px,6vw,84px); line-height: .95; letter-spacing: -.065em; }
.icp-leads-intro h2 em { color: transparent; background: linear-gradient(95deg,#74adff,#67e1ff); -webkit-background-clip: text; background-clip: text; font-family: var(--serif); font-weight: 400; }
.icp-leads-intro p { max-width: 800px; margin: 0; color: rgba(224,235,251,.68); font-size: 16px; line-height: 1.75; }
.icp-process-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 64px; }
.icp-process-grid article { --spot-x: 50%; --spot-y: 50%; position: relative; min-height: 360px; overflow: hidden; padding: 30px; border: 1px solid rgba(112,170,250,.22); border-radius: 23px; background: radial-gradient(320px circle at var(--spot-x) var(--spot-y),rgba(61,139,247,.2),transparent 70%),rgba(24,59,107,.62); box-shadow: inset 0 1px rgba(255,255,255,.06),0 25px 60px rgba(0,8,23,.18); backdrop-filter: blur(18px); transition: .35s var(--ease-premium); }
.icp-process-grid article:hover { border-color: rgba(117,179,255,.42); box-shadow: inset 0 1px rgba(255,255,255,.08),0 35px 80px rgba(0,8,23,.3); }
.icp-process-grid article > span { display: flex; align-items: center; justify-content: space-between; }
.icp-process-grid article > span > i { display: grid; place-items: center; width: 46px; height: 46px; color: #73b2ff; border-radius: 14px; background: rgba(65,135,231,.18); font-size: 18px; }
.icp-process-grid article > span > b { color: rgba(183,211,247,.34); font-size: 9px; letter-spacing: .12em; }
.icp-process-grid h3 { margin: 32px 0 12px; font-size: 25px; letter-spacing: -.035em; }
.icp-process-grid article > p { min-height: 72px; margin: 0; color: rgba(224,235,251,.66); font-size: 12px; line-height: 1.65; }
.icp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }
.icp-tags i { padding: 8px 10px; color: #abd0ff; border: 1px solid rgba(123,180,255,.2); border-radius: 8px; background: rgba(75,143,231,.1); font-size: 7px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.icp-score { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 30px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(4,20,45,.34); }
.icp-score > span { color: rgba(224,235,251,.62); font-size: 8px; }
.icp-score > strong { color: #7ad4ff; font-size: 18px; }
.icp-score > i { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.09); }
.icp-score > i b { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2685ff,#68deff); animation: icpScoreLoad 2.4s var(--ease-premium) both; }
@keyframes icpScoreLoad { from { width: 0; } }
.icp-pipeline-mini { display: flex; align-items: center; margin-top: 34px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(4,20,45,.34); }
.icp-pipeline-mini > i { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: #78b7ff; border: 1px solid rgba(117,180,255,.22); border-radius: 10px; background: rgba(66,137,234,.14); font-size: 15px; }
.icp-pipeline-mini > i:last-child { color: #65d9b8; border-color: rgba(93,222,190,.25); background: rgba(43,185,149,.13); }
.icp-pipeline-mini > b { position: relative; flex: 1; height: 1px; background: rgba(112,177,255,.25); }
.icp-pipeline-mini > b small { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #65b0ff; box-shadow: 0 0 12px #3b92ff; animation: icpLeadFlow 2.2s linear infinite; }
@keyframes icpLeadFlow { to { translate: 70px 0; } }
.icp-footer-note { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 14px; padding: 20px; border: 1px solid rgba(112,170,250,.18); border-radius: 18px; background: rgba(16,45,85,.58); }
.icp-footer-note > i { display: grid; place-items: center; width: 42px; height: 42px; color: #73b2ff; border-radius: 12px; background: rgba(65,135,231,.16); font-size: 16px; }
.icp-footer-note > span { display: grid; gap: 3px; color: rgba(224,235,251,.55); font-size: 9px; }
.icp-footer-note strong { color: #f5f8ff; font-size: 11px; }
.icp-footer-note > a { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; color: #071b3b; border-radius: 10px; background: #fff; font-size: 8px; font-weight: 800; }
.icp-footer-note > a i { transition: translate .2s ease; }
.icp-footer-note > a:hover i { translate: 4px 0; }

@media (max-width: 900px) {
    .icp-leads-section { padding-block: 105px; }
    .icp-process-grid { grid-template-columns: 1fr; }
    .icp-process-grid article { min-height: 300px; }
}

@media (max-width: 600px) {
    .icp-leads-section { padding-block: 85px; }
    .icp-leads-section::before { background-size: 48px 48px; }
    .icp-leads-intro h2 { font-size: 47px; }
    .icp-leads-intro p { font-size: 13px; }
    .icp-process-grid { margin-top: 42px; }
    .icp-process-grid article { min-height: 315px; padding: 23px; }
    .icp-footer-note { grid-template-columns: auto 1fr; }
    .icp-footer-note > a { grid-column: 1 / -1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .icp-leads-section::before,.icp-star-field i,.icp-score > i b,.icp-pipeline-mini > b small { animation: none; }
}

/* Final layout and continuous-flow corrections */
.plan.featured { padding-top: 64px; }
.prospecting-visual > b,.icp-pipeline-mini > b { overflow: hidden; }
.prospecting-visual > b i,.icp-pipeline-mini > b small { left: 0; opacity: 0; translate: none; animation: leadDotLoop 2.2s linear infinite; }
@keyframes leadDotLoop {
    0% { left: 0; opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Strong moving grid — restored visual presence */
.hero-grid-light { opacity: .9; background-image: linear-gradient(rgba(13,110,253,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,253,.13) 1px,transparent 1px); mask-image: radial-gradient(ellipse 92% 85% at 68% 43%,#000 8%,transparent 84%); }
.qualification-moving-grid { opacity: 1; background-image: linear-gradient(rgba(13,110,253,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,253,.14) 1px,transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(ellipse 100% 82% at 62% 46%,#000 12%,transparent 88%); }
.stage-grid,.journey-grid { opacity: .9; background-image: linear-gradient(rgba(13,110,253,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,253,.14) 1px,transparent 1px); }
.icp-leads-section::before { opacity: .72; background-image: linear-gradient(rgba(111,169,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(111,169,255,.15) 1px,transparent 1px); }
.ecosystem-grid-motion { opacity: .72; background-image: linear-gradient(rgba(94,158,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(94,158,255,.15) 1px,transparent 1px); }

@media (max-width: 600px) {
    .hero-grid-light { opacity: .7; background-size: 54px 54px; }
    .qualification-moving-grid { background-size: 48px 48px; }
}

/* Pricing content and presentation restored from the approved reference */
.plan { min-height: 720px; padding: 30px 28px 28px; border-color: rgba(13,110,253,.16); border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.055); }
.plan.featured { padding: 28px; color: var(--ink); border: 2px solid #1483e6; background: #fff; box-shadow: 0 24px 65px rgba(13,110,253,.1); }
.plan-popular { top: -16px; right: auto; left: 50%; padding: 8px 14px; color: #fff; border-radius: 999px; background: #1483e6; font-size: 8px; letter-spacing: .05em; white-space: nowrap; transform: translateX(-50%); }
.plan h3 { margin: 0 0 20px; font-size: 27px; }
.plan-price { margin: 0 0 4px; }
.plan-price small { margin-right: 5px; font-size: 19px; }
.plan-price strong { font-size: 48px; }
.plan-price strong {
    position: relative;
    display: inline-grid;
    overflow: hidden;
    min-width: 1.75ch;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    isolation: isolate;
}
.plan-price-value { grid-area: 1 / 1; display: block; will-change: transform, opacity, filter; }
.plan-price-value--incoming { position: relative; }
.plan-price > span,.featured .plan-price > span { color: #53627a; font-size: 10px; }
.plan-billing-note { margin: 0 0 13px; color: #637089; font-size: 10px; }
.plan ul { gap: 8px; margin-bottom: 24px; }
.plan li,.featured li { gap: 7px; color: #596a83; font-size: 11px; font-weight: 650; }
.plan li i,.featured li i { display: inline-grid; place-items: center; width: 17px; height: 17px; color: #61758f; border-radius: 0; background: transparent; font-size: 10px; }
.plan li.unavailable,.featured li.unavailable { color: #c4c8ce; }
.plan li.unavailable i,.featured li.unavailable i { color: #c4c8ce; font-size: 13px; }
.plan > a,.featured > a { min-height: 54px; color: #fff; border-color: #1483e6; border-radius: 999px; background: #1483e6; font-size: 11px; }

@media (max-width: 900px) {
    .plan,.plan.featured { min-height: auto; padding: 30px 25px 25px; }
    .plan-popular { top: -15px; }
}
html,
body,
body * {
    -webkit-user-select: none;
    user-select: none;
}

.site-footer,
.site-footer * {
    -webkit-user-select: text;
    user-select: text;
}

img,
.site-footer img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Onboarding */
.onboarding-section { position: relative; padding: 105px 0; background: linear-gradient(180deg,#eef4fb,#f7f9fc); }
.onboarding-shell { --spot-x: 50%; --spot-y: 50%; display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border: 1px solid rgba(13,110,253,.12); border-radius: 28px; background: radial-gradient(460px circle at var(--spot-x) var(--spot-y),rgba(13,110,253,.08),transparent 72%),#fff; box-shadow: 0 30px 80px rgba(21,64,120,.1); }
.onboarding-copy { padding: 50px; }
.onboarding-copy h2 { margin: 22px 0 18px; font-size: clamp(42px,4.2vw,61px); line-height: .98; letter-spacing: -.055em; }
.onboarding-copy h2 em { color: var(--blue); font-family: var(--serif); font-weight: 400; }
.onboarding-copy p { margin: 0 0 28px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.onboarding-details { display: grid; align-content: center; gap: 12px; padding: 34px; border-left: 1px solid rgba(13,110,253,.1); background: rgba(241,246,253,.7); }
.onboarding-details article { display: flex; gap: 16px; padding: 22px; border: 1px solid rgba(15,23,42,.07); border-radius: 17px; background: rgba(255,255,255,.86); }
.onboarding-details article > i { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; color: var(--blue); border-radius: 12px; background: var(--blue-soft); font-size: 17px; }
.onboarding-details h3 { margin: 1px 0 7px; font-size: 17px; letter-spacing: -.025em; }
.onboarding-details p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.onboarding-includes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.onboarding-includes span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #53627a; border: 1px solid rgba(13,110,253,.1); border-radius: 999px; background: rgba(255,255,255,.75); font-size: 8px; font-weight: 750; }
.onboarding-includes i { color: var(--blue); font-size: 7px; }

@media (max-width: 900px) {
    .onboarding-section { padding: 82px 0; }
    .onboarding-shell { grid-template-columns: 1fr; }
    .onboarding-details { border-top: 1px solid rgba(13,110,253,.1); border-left: 0; }
}

@media (max-width: 600px) {
    .onboarding-section { padding: 68px 0; }
    .onboarding-shell { border-radius: 22px; }
    .onboarding-copy { padding: 30px 23px; }
    .onboarding-copy h2 { font-size: 41px; }
    .onboarding-details { padding: 18px; }
    .onboarding-details article { padding: 18px; }
}

@media (max-width: 900px) {
    .site-nav.is-scrolled { top: 10px; }
}

@media (max-width: 700px) {
    .site-nav.is-scrolled .nav-shell { width: min(100% - 20px,1280px); padding-left: 14px; border-radius: 15px; }
    .site-nav.is-scrolled .nav-brand img { width: 112px; }
}

/* Grid mais visível nas seções claras */
.icp-leads-intro h2 { font-size: clamp(44px,4.8vw,68px); }
.plans-section .section-intro h2 { font-size: clamp(42px,4.2vw,62px); }

.crm-story-section,
.plans-section,
.faq-section {
    background-image:
        linear-gradient(rgba(13,110,253,.075) 1px,transparent 1px),
        linear-gradient(90deg,rgba(13,110,253,.075) 1px,transparent 1px);
    background-size: 64px 64px;
}

.onboarding-section {
    background-image:
        linear-gradient(rgba(13,110,253,.075) 1px,transparent 1px),
        linear-gradient(90deg,rgba(13,110,253,.075) 1px,transparent 1px),
        linear-gradient(180deg,#eef4fb,#f7f9fc);
    background-size: 64px 64px,64px 64px,auto;
}

@media (max-width: 600px) {
    .crm-story-section,
    .plans-section,
    .faq-section,
    .onboarding-section { background-size: 48px 48px,48px 48px,auto; }
}