.demos-page { background: #030304; }
.demos-hero { padding: clamp(80px, 8vw, 120px) 0; text-align: center; }
.demos-hero-content { max-width: 850px; }
.demos-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 9px 15px; border: 1px solid #ad1b2a; border-radius: 22px; color: #f1f1f3; background: #18090b; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demos-badge .icon { color: #ff4052; width: 18px; height: 18px; }
.demos-hero h1 { font-size: clamp(44px, 5.5vw, 72px); line-height: 1.06; }
.demos-hero-content > p:not(.demos-badge) { color: #cccdd3; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; }
.demos-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.demos-actions .button { color: #fff; }
.demos-hero .demos-actions { justify-content: center; }
#demo-gallery { scroll-margin-top: 90px; }
.demos-section { padding: clamp(60px, 6vw, 85px) 0; }
.demos-heading { max-width: 850px; margin: 0 auto 42px; text-align: center; }
.demos-heading > p:first-child { color: #ff4658; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.demos-heading h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; margin-bottom: 15px; }
.demos-heading h2 span, .demos-cta h2 span { color: #f20720; }
.demos-heading > p:last-child { max-width: 730px; margin: 0 auto; color: #c2c2ca; font-size: 16px; line-height: 1.6; }
.demo-grid, .demos-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.demo-card, .demos-benefit { min-width: 0; border: 1px solid #991725; border-radius: 18px; background: linear-gradient(145deg, #1b0d10, #0a0a0c 65%); box-shadow: inset 0 -12px 25px -25px #ff102a, 0 0 16px #ff00100d; }
.demo-card { display: flex; flex-direction: column; padding: 25px; }
.demo-laptop { width: 100%; max-width: 350px; margin: 8px auto 26px; }
.laptop-screen { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 185px; padding: 24px; border: 5px solid #29292d; border-bottom-width: 8px; border-radius: 10px 10px 3px 3px; background: #13090b; box-shadow: 0 10px 25px #0007; }
.laptop-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.preview-barber { background: radial-gradient(circle at 85% 50%, #7a1324, transparent 48%), #10090b; }
.preview-barber::after { background: repeating-linear-gradient(110deg, transparent 0 32px, #ff324410 33px 34px); }
.preview-construction { background: linear-gradient(140deg, #101012 45%, #481017 45% 65%, #1a0b0d 65%); }
.preview-car { background: radial-gradient(ellipse at 85% 75%, #812135, transparent 48%), linear-gradient(155deg, #11151a, #16080b); }
.preview-nav { position: absolute; top: 12px; left: 15px; right: 15px; display: flex; justify-content: space-between; color: #b8a3a6; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.preview-icon { width: 33px; height: 33px; margin: 10px 0; color: #ff4052; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.laptop-screen strong { color: #fff; font-size: 19px; line-height: 1.1; letter-spacing: -.03em; }
.laptop-screen strong small { color: #c1b9bd; font-size: 11px; font-weight: 400; letter-spacing: .02em; }
.preview-rule { width: 40px; height: 2px; margin-top: 14px; background: #f10b27; }
.laptop-base { height: 11px; width: 108%; margin-left: -4%; border-radius: 0 0 50% 50%; background: linear-gradient(#77777e, #303034 50%, #141416); box-shadow: 0 8px 15px #0008; }
.demo-card-copy { display: flex; flex: 1; flex-direction: column; }
.demo-card h3, .demos-benefit h3 { font-size: 21px; line-height: 1.2; margin: 0 0 12px; }
.demo-card p, .demos-benefit p { color: #c2c2ca; font-size: 14px; line-height: 1.6; }
.demo-status { display: block; margin-top: auto; padding: 12px 16px; border: 1px solid #61212b; border-radius: 10px; color: #c9b6b9; text-align: center; font-size: 14px; font-weight: 700; background: #140b0d; }
.demos-benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demos-benefit { padding: 28px 22px; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; }
.demos-benefit:hover { transform: translateY(-5px); border-color: #ee3446; box-shadow: 0 8px 22px #d5001b30; }
.demos-icon { width: 42px; height: 42px; margin-bottom: 20px; fill: none; stroke: #ff4153; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demos-benefit p { margin-bottom: 0; }
.support-note { margin: 22px 0 0; color: #bcbcc4; font-size: 13px; line-height: 1.5; text-align: center; }
.demos-cta-section { padding: 35px 0 70px; }
.demos-cta { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 35px; overflow: hidden; padding: clamp(30px, 5vw, 65px); border: 1px solid #b31d2c; border-radius: 22px; background: radial-gradient(ellipse at 90% 65%, #8b071a55, transparent 45%), linear-gradient(120deg, #170b0d, #080708 65%); box-shadow: 0 0 25px #ed001b22; }
.demos-cta h2 { font-size: clamp(36px, 4.3vw, 58px); line-height: 1.08; margin-bottom: 18px; }
.demos-cta-copy > p:not(.demos-badge) { max-width: 510px; color: #c9c9cf; font-size: 16px; line-height: 1.65; }
.cta-highlights { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 0; margin: 28px 0 0; list-style: none; font-size: 13px; font-weight: 700; }
.cta-highlights li::before { content: '✓'; margin-right: 7px; color: #ff4052; }
.cta-laptop { width: 100%; max-width: 450px; margin: 0 auto; }
.cta-laptop-screen { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.65; padding: 12%; border: 7px solid #303035; border-bottom-width: 11px; border-radius: 12px 12px 3px 3px; background: radial-gradient(ellipse at 50% 85%, #650d1e, #000 70%); }
.cta-laptop-screen img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 960px) {
  .demo-grid, .demos-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demos-cta { gap: 25px; }
}
@media (max-width: 650px) {
  .demos-hero { padding: 70px 0; }
  .demos-hero h1 { font-size: clamp(38px, 10vw, 56px); }
  .demos-hero h1 br, .demos-cta h2 br { display: none; }
  .demos-actions .button { flex: 1 1 190px; }
  .demos-section { padding: 55px 0; }
  .demos-heading { margin-bottom: 32px; }
  .demo-grid, .demos-benefit-grid { grid-template-columns: 1fr; }
  .demo-card { padding: 22px; }
  .demos-cta-section { padding: 20px 0 55px; }
  .demos-cta { grid-template-columns: 1fr; }
  .cta-laptop { max-width: 360px; }
  #demo-gallery { scroll-margin-top: 75px; }
}