.marketing .hero { grid-template-columns: 1.12fr 1fr; gap: 64px; min-height: 680px; padding-block: 88px 110px; }
.marketing .hero h1 { font-size: clamp(40px, 3.55vw, 56px); line-height: 1.15; letter-spacing: -1.8px; margin-bottom: 28px; }
.marketing .hero-description { font-size: 19px; line-height: 1.7; max-width: 530px; color: #b8b8c1; margin-bottom: 34px; }
.marketing .hero-actions { gap: 14px; }
.marketing .hero-actions .button { font-size: 16px; min-height: 54px; }
.product-preview { margin: 0; min-width: 0; border: 1px solid #35353c; border-radius: 16px; background: #1a1a1f; box-shadow: 0 24px 70px #0004; }
.product-preview figcaption { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 19px 22px; border-bottom: 1px solid #303037; font-size: 16px; color: #dddde4; }
.product-preview figcaption > span:first-child { display: flex; align-items: center; gap: 10px; }
.product-preview figcaption svg { color: #ed9a80; width: 20px; height: 20px; }
.preview-label { font-size: 14px; color: #a6a6b2; }
.preview-chat { padding: 24px; }
.preview-request { background: #24242c; border-radius: 7px; padding: 12px 14px; font-size: 15px; line-height: 1.5; color: #b8b8c5; margin-bottom: 25px; }
.preview-request > span { color: #f3b095; margin-right: 8px; font-weight: 500; }
.preview-bot { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; }
.preview-bot img { border-radius: 11px; }
.preview-bot strong { font-weight: 500; }
.bot-tag { font-size: 12px; background: #6e57ad; padding: 2px 5px; border-radius: 4px; color: white; }
.preview-embed { border: 1px solid #303039; border-left: 3px solid #ef855e; border-radius: 5px; padding: 20px; background: #151519; }
.preview-track { display: flex; align-items: center; gap: 16px; }
.preview-track p { font-size: 14px; color: #a1a1ae; margin: 0; line-height: 1.6; }
.preview-track h2 { font-size: 20px; font-weight: 500; line-height: 1.4; margin: 6px 0; letter-spacing: -.3px; }
.record-art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(145deg,#7c466c,#b76b54); }
.record-art > span { width: 51px; height: 51px; border-radius: 50%; background: repeating-radial-gradient(#22222a 0 3px,#303039 4px 5px); position: relative; }
.record-art > span::after { content: ''; position: absolute; inset: 19px; border: 4px solid #e8a285; background: #27212a; border-radius: 50%; }
.preview-progress { height: 4px; background: #35353e; border-radius: 8px; margin-top: 22px; overflow: hidden; }
.preview-progress > span { display: block; width: 38%; height: 100%; background: #ee9d80; }
.preview-times { display: flex; justify-content: space-between; font-size: 13px; color: #a1a1ad; margin-top: 9px; font-variant-numeric: tabular-nums; }
.preview-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.preview-controls > span { background: #303038; border: 1px solid #3c3c47; border-radius: 6px; padding: 9px 11px; color: #e5e5ed; font-size: 14px; line-height: 1.3; }
.secondary-controls { margin-top: 7px; }
.secondary-controls > span { background: #25252d; color: #bcbcc9; }
@media (min-width: 1700px) { .marketing .hero { min-height: 740px; } }
@media (max-width: 1100px) { .marketing .hero { gap: 30px; } .marketing .hero h1 { font-size: 42px; } .preview-chat { padding: 18px; } .preview-embed { padding: 15px; } .preview-track { gap: 12px; } .record-art { width: 56px; height: 56px; } }
@media (max-width: 800px) { .marketing .hero { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding-block: 48px 65px; } .marketing .hero-copy { max-width: 600px; } .product-preview { width: 100%; max-width: 540px; justify-self: center; } .marketing .hero-description { font-size: 17px; } }
@media (max-width: 450px) { .marketing .hero h1 { font-size: 36px; letter-spacing: -1.1px; } .marketing .hero h1 br { display: none; } .marketing .hero-actions { align-items: stretch; } .marketing .hero-actions .button { flex: 1 1 100%; } .preview-chat { padding: 16px; } .product-preview figcaption { padding: 16px; } .preview-track h2 { font-size: 18px; } .preview-track p { font-size: 13px; } .preview-controls > span { font-size: 13px; padding: 9px; } }