.landing { margin: 0; background: #f5f7f6; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.landing-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; background: transparent; color: var(--text); border-radius: 0; box-shadow: none; margin-bottom: 0; }
.landing-logo { display: flex; gap: 12px; align-items: center; color: var(--primary); font-size: 22px; font-weight: 750; }
.landing-logo .ui-icon { width: 36px; height: 36px; }
.landing-logo small { display: block; font-size: 12px; color: var(--secondary); font-weight: 400; }
.landing-header nav { display: flex; gap: 26px; align-items: center; }
.landing-header nav>a { color: var(--primary); font-weight: 600; }
.landing-hero { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 64px; align-items: center; padding: 48px 0 64px; }
.landing-tag { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; color: var(--primary); background: #e5efe8; border-radius: 30px; padding: 8px 14px; }
.landing-tag .ui-icon { width: 16px; height: 16px; }
.hero-copy h1 { font-size: clamp(36px,4.1vw,56px); line-height: 1.12; letter-spacing: -2px; margin: 24px 0; }
.hero-copy h1 span { color: var(--primary); }
.hero-copy>p { font-size: 17px; color: var(--secondary); line-height: 1.8; max-width: 520px; }
.landing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.landing-actions .ui-button { padding: 14px 20px; font-size: 14px; }
.hero-note { color: #6e7b73; font-size: 12px; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; color: var(--primary); font-size: 12px; }
.hero-benefits span { display: flex; align-items: center; gap: 8px; }
.hero-visual { min-width: 0; position: relative; padding: 26px 24px 34px; border-radius: 30px; text-align: center; }
.hero-visual-title { font-size: 12px; color: #d9e9df; margin-bottom: 22px; }
.landing-status-dot { display: inline-block; width: 7px; height: 7px; background: #8cd7a9; border-radius: 50%; margin-right: 6px; }
.phone-preview { display: block; width: 225px; max-width: 100%; margin-inline: auto; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 50px #0004; }
.phone-preview img { width: 100%; height: auto; display: block; }
.hero-floating { position: absolute; bottom: 30px; left: -24px; background: white; padding: 16px 20px; border-radius: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px #15352720; text-align: left; }
.hero-floating>.ui-icon { color: var(--primary); width: 28px; height: 28px; }
.hero-floating strong { display: block; font-size: 13px; }
.hero-floating small { color: var(--secondary); font-size: 12px; }
.hero-floating small { display: block; line-height: 1.5; margin-top: 3px; }
.hero-language-icon { flex-shrink: 0; color: var(--primary); font-weight: 750; font-size: 10px; line-height: 1.3; text-align: center; width: 32px; }
@media(min-width:961px) {
 .hero-visual { padding-top: 30px; padding-bottom: 62px; }
 .hero-floating { max-width: 250px; padding: 13px 15px; gap: 10px; border: 1px solid #e6eee8; }
 .hero-floating-languages { top: 90px; bottom: auto; left: -30px; }
 .hero-floating-qr { top: 215px; bottom: auto; right: -16px; left: auto; max-width: 220px; }
 .hero-floating-live { top: 350px; bottom: auto; left: -30px; max-width: 235px; }
 .hero-floating-order { bottom: 24px; right: 12px; left: auto; max-width: 270px; }
}
@media(max-width:960px) { .hero-floating-languages, .hero-floating-qr, .hero-floating-live { display: none; } }
.landing-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.landing-features article { border: 1px solid var(--border); background: white; border-radius: 18px; padding: 28px; }
.landing-features article>.ui-icon { color: var(--primary); width: 42px; height: 42px; padding: 9px; background: #eaf2ed; border-radius: 12px; }
.landing-features h2 { font-size: 18px; margin: 18px 0 10px; }
.landing-features p { color: var(--secondary); font-size: 14px; margin: 0; line-height: 1.7; }
.landing-preview { padding: 80px 0; scroll-margin-top: 24px; }
.preview-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 26px; }
.landing-eyebrow { font-size: 11px; letter-spacing: 1.3px; color: var(--primary); font-weight: 700; }
.preview-heading h2 { font-size: 32px; letter-spacing: -1px; margin: 8px 0; }
.preview-heading p { color: var(--secondary); margin: 0; }
.preview-tabs { display: flex; flex-shrink: 0; gap: 5px; padding: 5px; background: #e7ece9; border-radius: 14px; }
.preview-tabs button { border: 0; background: transparent; border-radius: 10px; padding: 12px 16px; color: var(--secondary); cursor: pointer; font-weight: 600; font-size: 13px; }
.preview-tabs button[aria-selected="true"] { background: var(--primary); color: white; }
.preview-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 50px; background: white; border: 1px solid var(--border); border-radius: 24px; padding: 40px; align-items: center; }
.preview-copy { min-width: 0; }
.preview-copy h3 { font-size: 30px; line-height: 1.25; letter-spacing: -.8px; margin: 20px 0; }
.preview-copy p { color: var(--secondary); line-height: 1.8; margin-bottom: 24px; }
.preview-copy .preview-caption { font-size: 12px; margin: 20px 0 0; }
.preview-mobile-image { display: block; width: 260px; max-width: 100%; margin-inline: auto; border-radius: 28px; overflow: hidden; box-shadow: 0 12px 30px #132d1e18; }
.preview-mobile-image img { display: block; width: 100%; height: auto; }
.dashboard-panel { grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 32px; }
.preview-dashboard-image { display: block; min-width: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px #132d1e12; }
.preview-dashboard-image img { display: block; width: 100%; height: auto; }
.browser-bar { display: flex; align-items: center; gap: 5px; background: #eef2ef; padding: 12px; color: #687a70; font-size: 10px; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9d5ce; }
.browser-bar span { margin-left: 10px; }
.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; background: linear-gradient(140deg,#082e20,#174f37); color: white; border-radius: 22px; }
.landing-cta h2 { font-size: 28px; margin: 0 0 8px; }
.landing-cta p { color: #c9dfd2; margin: 0; }
.landing-cta .ui-button { background: white; color: var(--primary); flex-shrink: 0; }
.landing-footer { display: flex; justify-content: space-between; padding: 30px 0; color: var(--secondary); font-size: 12px; }
.landing-footer a { color: var(--primary); }
@media(max-width:960px) { .landing-hero { gap: 32px; } .preview-heading { align-items: start; flex-direction: column; } .preview-panel { gap: 28px; padding: 28px; } .dashboard-panel { grid-template-columns: minmax(0,1fr); } }
@media(max-width:640px) {
 .wrap { width: calc(100% - 32px); } .landing-header { align-items: start; gap: 16px; flex-wrap: wrap; padding: 20px 0; } .landing-logo { font-size: 20px; } .landing-header nav { gap: 16px; flex-wrap: wrap; font-size: 12px; } .landing-header nav .ui-button { font-size: 12px; padding: 8px 12px; }
 .landing-hero { grid-template-columns: minmax(0,1fr); padding: 26px 0 32px; gap: 30px; } .hero-copy h1 { font-size: 38px; letter-spacing: -1.4px; } .hero-copy>p { font-size: 15px; } .hero-benefits { margin-top: 24px; } .hero-floating { left: 12px; right: 12px; bottom: 20px; justify-content: center; } .hero-visual { padding-bottom: 58px; }
 .landing-features { grid-template-columns: minmax(0,1fr); gap: 12px; } .landing-features article { padding: 22px; } .landing-preview { padding: 42px 0; } .preview-heading h2 { font-size: 28px; } .preview-tabs { width: 100%; } .preview-tabs button { flex: 1; padding: 12px 8px; font-size: 12px; } .preview-panel { grid-template-columns: minmax(0,1fr); padding: 24px; } .preview-copy h3 { font-size: 26px; } .landing-cta { flex-direction: column; align-items: start; padding: 26px; } .landing-cta h2 { font-size: 26px; }
}