.brand { width: clamp(150px, 16vw, 230px); flex-shrink: 0; }
.brand img { display: block; width: 100%; height: auto; }
.nav { justify-content: flex-end; gap: clamp(18px, 1.7vw, 28px); }
.hero-scene { position: absolute; right: 0; top: 0; width: min(59%, 910px); height: 100%; isolation: isolate; perspective: 1100px; pointer-events: none; }
.hero-copy { z-index: 5; }
.depth-layer { transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0) rotate(var(--angle, 0deg)); }
.scene-glow { position: absolute; inset: 3% 3% 0 5%; background: radial-gradient(ellipse at 47% 49%, #b0080838, transparent 65%); z-index: 0; }
.hero-person { position: absolute; height: 103%; width: 100%; left: -6.5%; bottom: 0; z-index: 2; overflow: hidden; mask-image: linear-gradient(#000000 84%, transparent); }
.hero-person img { display: block; height: 152.381%; width: 100%; max-width: none; position: absolute; top: -5.715%; object-fit: contain; object-position: center top; filter: url('#portrait-soft-edge'); }
.crm-panel { position: absolute; color: #efeaec; border: 1px solid #ec181833; border-top-color: #ff1a1a5c; border-radius: 14px; background: linear-gradient(140deg, #241111dd, #110c12d9); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 24px 64px #00000088, inset 0 1px 0 #ffffff0f, 0 0 20px #fa191918; padding: 17px; font-size: 11px; }
.crm-panel-header { display: flex; align-items: center; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid #ffffff0e; }
.crm-panel-header strong { font-size: 11px; font-weight: 500; }
.crm-panel-header > span:last-child { margin-left: auto; color: #8c7e88; }
.crm-dot { height: 6px; width: 6px; border-radius: 50%; background: #ff1a1a; box-shadow: 0 0 5px #ff1a1a, 0 0 14px #ff1a1a73; }
.crm-panel-subtitle { display: flex; justify-content: space-between; font-size: 8px; color: #a4949d; padding: 15px 0 12px; letter-spacing: .6px; }
.crm-panel-subtitle span { color: #81717b; letter-spacing: 0; }
.crm-pipeline { --angle: 5deg; z-index: 1; top: 6%; right: 5%; width: 310px; opacity: .82; }
.pipeline-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.pipeline-board > div { padding: 8px 5px; background: #ffffff03; border: 1px solid #ffffff09; border-radius: 5px; }
.pipeline-board > div > span { display: flex; justify-content: space-between; font-size: 8px; color: #c7b9c2; white-space: nowrap; }
.pipeline-board b { font-weight: 400; color: #b91313; margin-left: 3px; }
.pipeline-board i { position: relative; display: block; margin-top: 9px; height: 29px; border: 1px solid #ffffff0d; border-radius: 4px; background: #ffffff04; }
.pipeline-board i::before, .pipeline-board i::after { content: ''; position: absolute; left: 7px; top: 7px; height: 3px; width: 60%; background: #c6bac14d; border-radius: 3px; }
.pipeline-board i::after { top: 16px; width: 36%; background: #d1151555; }
.crm-panel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding-top: 10px; border-top: 1px solid #ffffff0b; font-size: 8px; color: #a4949d; }
.crm-live { color: #dc1616; font-size: 7px; }
.crm-contacts { --angle: -7deg; z-index: 1; top: 37%; left: 0; width: 215px; opacity: .7; }
.contact-row { display: flex; gap: 8px; align-items: center; padding-top: 12px; font-size: 10px; }
.contact-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #e11717; background: #ca141421; font-size: 8px; }
.contact-row small { display: block; color: #8c7b87; font-size: 8px; padding-top: 3px; }
.contact-row b { margin-left: auto; font-size: 6px; color: #d41515; }
.crm-revenue { --angle: -4deg; z-index: 3; top: 58%; right: 3%; width: 300px; border-color: #f7191961; box-shadow: 0 24px 64px #00000088, inset 0 1px 0 #ffbdbd21, 0 0 9px #f5191924, 0 0 30px #fa191922; }
.revenue-label { display: block; color: #a5949f; font-size: 8px; letter-spacing: .9px; margin-top: 14px; }
.revenue-value { display: flex; align-items: center; justify-content: space-between; font-size: 26px; letter-spacing: -.7px; margin-top: 6px; }
.revenue-value small { color: #f51919; font-size: 9px; letter-spacing: 0; background: #dd16161c; border-radius: 4px; padding: 5px; }
.revenue-chart { display: block; width: 100%; height: 62px; margin-top: 12px; }
.revenue-chart > path:last-child { stroke: #ff1a1a; filter: drop-shadow(0 0 3px #ff1a1a96); }
.chart-grid { stroke: #ffffff0a; fill: none; stroke-width: 1; }
.crm-conversion { --angle: 4deg; z-index: 4; bottom: 8%; left: 13%; width: 245px; display: flex; align-items: center; gap: 13px; }
.conversion-ring { width: 55px; height: 55px; border-radius: 50%; background: conic-gradient(#ff1a1a 0 32%, #ffffff0a 32%); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 13px #f7191929; }
.conversion-ring > span { display: grid; place-items: center; grid-auto-flow: column; gap: 0; width: 45px; height: 45px; background: #1b1017; border-radius: 50%; font-size: 18px; }
.conversion-ring small { font-size: 9px; }
.crm-conversion .revenue-label { margin: 0 0 6px; }
.crm-conversion strong { font-size: 10px; line-height: 1.5; font-weight: 500; }
.crm-conversion > div > small { display: block; font-size: 8px; color: #dc1616; margin-top: 6px; }
.scene-demo { position: absolute; right: 5%; bottom: 2%; font-size: 7px; color: #806974; letter-spacing: 1px; z-index: 4; }

@media (min-width: 901px) and (max-width: 1200px) {
  .brand { width: 170px; }
  .header { gap: 22px; }
  .nav { gap: 14px; }
  .crm-pipeline { width: 250px; }
  .crm-revenue { width: 245px; top: 58%; }
  .crm-contacts { width: 170px; left: 8%; }
  .crm-conversion { width: 200px; left: 4%; bottom: 6%; }
  .crm-panel { padding: 12px; }
  .crm-panel-header strong { font-size: 10px; }
  .revenue-value { font-size: 22px; }
}
@media (max-width: 900px) {
  .brand { width: 155px; }
  .hero-scene { width: 100%; height: 420px; top: auto; bottom: 0; }
  .hero { height: 880px; }
  .crm-panel { padding: 12px; border-radius: 12px; }
  .crm-pipeline { width: 215px; right: 4%; top: 3%; }
  .crm-contacts { width: 165px; top: 34%; left: 4%; }
  .crm-panel-header strong { font-size: 9px; }
  .crm-revenue { width: 205px; right: 4%; top: 59%; }
  .crm-conversion { width: 175px; bottom: 8%; left: 4%; gap: 8px; padding: 10px; }
  .conversion-ring { width: 40px; height: 40px; }
  .conversion-ring > span { width: 32px; height: 32px; font-size: 14px; }
  .crm-conversion strong { font-size: 8px; }
  .crm-conversion .revenue-label { font-size: 7px; }
  .crm-conversion > div > small { font-size: 7px; }
  .revenue-value { font-size: 20px; }
  .revenue-value small { font-size: 7px; }
  .revenue-chart { height: 44px; }
  .scene-demo { bottom: 2%; font-size: 6px; }
  .hero-person { left: 0; width: 100%; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .brand { width: 205px; }
  .hero { height: 590px; }
  .hero-scene { width: 57%; height: 470px; bottom: 0; }
  .hero-person { width: 100%; left: 0; }
  .crm-contacts { left: 0; opacity: .5; }
  .crm-conversion { left: 0; }
}
@media (max-width: 380px) {
  .brand { width: 120px; }
  .header { gap: 5px; }
  .hero-scene { height: 410px; }
  .crm-revenue { width: 180px; right: 3%; }
  .crm-conversion { width: 153px; left: 3%; }
  .crm-pipeline { width: 195px; right: 3%; }
  .crm-contacts { width: 145px; }
}
@media (prefers-reduced-motion: reduce) { .depth-layer { transform: rotate(var(--angle, 0deg)); } }