.herbie-hero { padding: 60px 0 40px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); overflow: hidden; }
.herbie-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.herbie-hero-slider-wrap { position: relative; width: 100%; min-width: 0; }
.herbie-hero-slides { position: relative; width: 100%; }
.herbie-hero-slide { display: none; opacity: 0; }
.herbie-hero-visual-wrap { position: relative; width: 100%; min-width: 0; }
.herbie-hero-visual-slide { display: none; opacity: 0; }
@keyframes herbieSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes herbieFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes herbieSlideLeft { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes herbieZoom { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.herbie-hero-slider-wrap.effect-slide_up .herbie-hero-slide.is-active, .herbie-hero-slide.is-active { display: block !important; opacity: 1; animation: herbieSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.herbie-hero-slider-wrap.effect-fade .herbie-hero-slide.is-active { display: block !important; opacity: 1; animation: herbieFade 0.5s ease forwards; }
.herbie-hero-slider-wrap.effect-slide_left .herbie-hero-slide.is-active { display: block !important; opacity: 1; animation: herbieSlideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.herbie-hero-slider-wrap.effect-zoom .herbie-hero-slide.is-active { display: block !important; opacity: 1; animation: herbieZoom 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.herbie-hero-visual-wrap.effect-slide_up .herbie-hero-visual-slide.is-active, .herbie-hero-visual-slide.is-active { display: block !important; opacity: 1; animation: herbieSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.herbie-hero-visual-wrap.effect-fade .herbie-hero-visual-slide.is-active { display: block !important; opacity: 1; animation: herbieFade 0.55s ease forwards; }
.herbie-hero-visual-wrap.effect-slide_left .herbie-hero-visual-slide.is-active { display: block !important; opacity: 1; animation: herbieSlideLeft 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.herbie-hero-visual-wrap.effect-zoom .herbie-hero-visual-slide.is-active { display: block !important; opacity: 1; animation: herbieZoom 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.herbie-hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: #090e1a; margin-bottom: 24px; }
.herbie-highlight { color: var(--herbie-primary); display: inline-block; }
.herbie-hero-desc { font-size: 1.125rem; line-height: 1.6; color: #475569; max-width: 520px; margin-bottom: 32px; }
.herbie-hero-buttons { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.herbie-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--herbie-primary); color: #ffffff; padding: 14px 28px; border-radius: 9999px; font-size: 1rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(30, 86, 237, 0.25); transition: transform 0.15s ease, opacity 0.15s ease; }
.herbie-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.herbie-btn-outline { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #0f172a; padding: 14px 26px; border-radius: 9999px; border: 1.5px solid var(--herbie-border); font-size: 1rem; font-weight: 600; text-decoration: none; }
.herbie-btn-outline:hover { border-color: #cbd5e1; background: #ffffff; }
.herbie-hero-guarantees { font-size: 0.875rem; color: #64748b; }
.herbie-hero-price { margin-bottom: 8px; }
.herbie-hero-price strong { color: #0f172a; font-weight: 700; }
.herbie-hero-checks { display: flex; align-items: center; gap: 18px; }
.herbie-hero-checks span { display: inline-flex; align-items: center; gap: 6px; }
.herbie-slider-dots { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.herbie-slider-dot { width: 10px; height: 10px; border-radius: 999px; background: #cbd5e1; border: none; cursor: pointer; padding: 0; transition: all 0.25s ease; }
.herbie-slider-dot:hover { background: #94a3b8; }
.herbie-slider-dot.is-active { width: 28px; background: var(--herbie-primary); }
.herbie-mockup-wrapper { background: #e0e7ff; border-radius: 28px; padding: 24px; box-shadow: 0 20px 40px -10px rgba(30, 86, 237, 0.15); border: 1px solid #c7d2fe; }
.herbie-mockup-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 700; color: #3730a3; letter-spacing: 0.05em; margin-bottom: 16px; }
.herbie-mockup-device { background: #ffffff; border-radius: 24px; padding: 18px; box-shadow: 0 10px 25px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; }
.herbie-mockup-screen-box { overflow: hidden; padding: 10px; }
.herbie-mockup-custom-img { width: 100%; border-radius: 14px; object-fit: cover; display: block; max-height: 380: 14px; object-fit: cover; display: block; max-height: 380px; }
.herbie-phone-notch { width: 40px; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 0 auto 12px; }
.herbie-phone-appbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; font-size: 0.875rem; }
.herbie-brand-mini strong { color: var(--herbie-primary); }
.herbie-phone-badge-float { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.75rem; }
.herbie-phone-badge-float strong { display: block; color: #0f172a; font-size: 0.8125rem; }
.herbie-phone-badge-float small { color: #64748b; }
.herbie-float-icon { font-size: 1.25rem; }
.herbie-phone-product-card { display: flex; align-items: center; gap: 14px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.herbie-product-pic-box { width: 56px; height: 56px; background: #f1f5f9; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.herbie-prod-label { font-size: 0.625rem; font-weight: 700; color: var(--herbie-primary); }
.herbie-prod-name { font-size: 0.8125rem; font-weight: 700; color: #0f172a; }
.herbie-prod-price { font-size: 0.8125rem; font-weight: 700; color: #10b981; }
.herbie-phone-badge-float-bottom { display: flex; align-items: center; gap: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 10px 14px; font-size: 0.75rem; }
.herbie-phone-badge-float-bottom strong { display: block; color: #1e40af; font-size: 0.8125rem; }
.herbie-phone-badge-float-bottom small { color: #3b82f6; }
.herbie-mockup-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 0.8125rem; color: #4338ca; }
.herbie-mockup-link { font-weight: 600; text-decoration: none; color: var(--herbie-primary); }
@media (max-width: 960px) { .herbie-hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .herbie-hero-title { font-size: 2.75rem; } }
@media (max-width: 580px) { .herbie-hero-buttons { flex-direction: column; align-items: stretch; } }