.hero { padding: 96px 0 72px; background: radial-gradient(circle at 80% 22%, rgba(255,255,255,0.74), transparent 30%), linear-gradient(135deg, #c8ecf5 0%, #b7e2ee 55%, #f3f6f8 100%); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.03fr 0.97fr; gap: 52px; align-items: center; }
.hero .badge { margin-bottom: 20px; }
.hero .lead { color: #23313e; margin-top: 24px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.product-duo { margin-top: 34px; }
.product-card { position: relative; overflow: hidden; min-height: 280px; }
.product-card::before { content: ""; position: absolute; right: -70px; top: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(233, 99, 34, 0.12); }
.product-card > * { position: relative; }
.hero-visual { position: relative; min-height: 420px; display: grid; place-items: center; }
.hero-device { width: min(100%, 520px); background: #ffffff; border-radius: 32px; box-shadow: var(--shadow-md); padding: 22px; transform: rotate(-1deg); }
.browser-bar { display: flex; gap: 8px; margin-bottom: 18px; }
.browser-dot { width: 11px; height: 11px; border-radius: 50%; background: #d6dce2; }
.mock-form { display: grid; gap: 12px; }
.mock-line, .mock-field { height: 16px; border-radius: 999px; background: #e8edf2; }
.mock-line-short { width: 52%; }
.mock-field { height: 42px; border-radius: 12px; }
.mock-field-highlight { background: rgba(233, 99, 34, 0.16); }
.hero-note { position: absolute; right: 4%; bottom: 5%; background: #ffffff; border-radius: 18px; box-shadow: var(--shadow-md); padding: 18px; width: 235px; border-left: 5px solid var(--color-primary); font-weight: 800; }
.process-number { width: 42px; height: 42px; border-radius: 14px; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-weight: 900; margin-bottom: 16px; }
.product-overview { background: #1f2933; color: #ffffff; position: relative; overflow: hidden; }
.product-overview::before { content: ""; position: absolute; inset: -140px -90px auto auto; width: 430px; height: 430px; border-radius: 50%; background: rgba(233, 99, 34, 0.25); }
.product-overview .container { position: relative; }
.product-overview .card { background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.14); }
.product-overview .card p, .product-overview .card li { color: #d9e2ea; }
.split-highlight { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 24px; align-items: stretch; }
.quote { font-size: 1.32rem; color: var(--color-primary-dark); font-weight: 800; margin: 0; }
@media (max-width: 900px) { .hero { padding: 66px 0; } .hero-grid, .split-highlight { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .hero-note { position: static; width: auto; margin-top: 18px; } }