.fbl-page {max-width: 760px;margin: 0 auto;padding: 0 0 48px}
.fbl-hero {position: relative;margin: 0 12px;padding: 40px 20px 60px;border-radius: var(--radius-lg) var(--radius-lg) 0 0;background:
radial-gradient(120% 90% at 15% -10%, rgba(125, 211, 252, 0.42), transparent 55%),
linear-gradient(165deg, #0e7490 0%, #0284c7 45%, #1d4ed8 100%);color: #fff;overflow: hidden;text-align: center}
.fbl-hero-inner {position: relative;z-index: 3;max-width: 560px;margin: 0 auto}
.fbl-hero-badge {display: inline-flex;align-items: center;gap: 6px;padding: 6px 14px;border-radius: 999px;background: rgba(255, 255, 255, 0.18);font-size: 12px;font-weight: 700;backdrop-filter: blur(4px)}
.fbl-hero-title {margin: 16px 0 12px;font-size: 28px;font-weight: 800;line-height: 1.34;letter-spacing: 0.01em;word-break: keep-all;overflow-wrap: anywhere;text-shadow: 0 2px 12px rgba(2, 22, 46, 0.28)}
.fbl-hero-lead {margin: 0 auto;max-width: 480px;font-size: 15px;line-height: 1.75;color: rgba(255, 255, 255, 0.92)}
.fbl-hero-lead strong {color: #fff;font-weight: 800}
.fbl-hero-drift {position: absolute;inset: 0;z-index: 1;opacity: 0.5;pointer-events: none}
.fbl-hero-drift span {position: absolute;display: block;animation: fbl-drift 9s ease-in-out infinite}
.fbl-hero-drift span:nth-child(1) { left: 6%; top: 18%; animation-delay: 0s; }
.fbl-hero-drift span:nth-child(2) { right: 8%; top: 12%; animation-delay: -2.4s; }
.fbl-hero-drift span:nth-child(3) { right: 14%; bottom: 22%; animation-delay: -4.8s; }
.fbl-hero-drift span:nth-child(4) { left: 12%; bottom: 18%; animation-delay: -6.6s; }
@keyframes fbl-drift {0%, 100% { transform: translateY(0) rotate(-6deg); }
50% { transform: translateY(-12px) rotate(6deg); }}
.fbl-capsule-demo {position: relative;z-index: 3;max-width: 400px;margin: 26px auto 0;animation: fbl-bob 6s ease-in-out infinite}
@keyframes fbl-bob {0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }}
.fbl-capsule-demo-label {display: block;margin-bottom: 8px;font-size: 11.5px;font-weight: 700;letter-spacing: 0.04em;color: rgba(255, 255, 255, 0.78)}
.fbl-capsule-demo .fb-capsule {text-decoration: none;color: var(--color-text-primary)}
.fbl-hero-cta {display: inline-flex;align-items: center;justify-content: center;gap: 8px;margin-top: 26px;min-height: 52px;padding: 14px 30px;border-radius: 999px;background: #fff;color: var(--color-primary-dark);font-size: 15.5px;font-weight: 800;text-decoration: none;box-shadow: 0 10px 24px rgba(3, 15, 30, 0.28);transition: transform 0.12s ease, box-shadow 0.15s ease}
.fbl-hero-cta:hover {transform: translateY(-2px);box-shadow: 0 14px 30px rgba(3, 15, 30, 0.34)}
.fbl-hero-note {margin: 12px 0 0;font-size: 11.5px;color: rgba(255, 255, 255, 0.72)}
.fbl-hero-wave {position: absolute;left: 0;right: 0;bottom: -1px;line-height: 0;color: var(--color-bg-muted);z-index: 2}
.fbl-hero-wave svg {display: block;width: 100%;height: 46px}
.fbl-body {margin: 0 12px;padding: 26px 16px 8px;background: var(--color-bg-muted);border-radius: 0 0 var(--radius-lg) var(--radius-lg)}
.fbl-section { margin-bottom: 34px; }
.fbl-section-head {text-align: center;margin-bottom: 18px}
.fbl-section-title {margin: 0;font-size: 20px;font-weight: 800}
.fbl-section-sub {margin: 6px 0 0;font-size: 13px;line-height: 1.6;color: var(--color-text-muted)}
.fbl-steps {list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px}
.fbl-step {position: relative;min-width: 0;padding: 20px 12px 16px;text-align: center;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-sm)}
.fbl-step-num {position: absolute;top: -11px;left: 50%;transform: translateX(-50%);display: inline-flex;align-items: center;justify-content: center;width: 26px;height: 26px;border-radius: 50%;background: linear-gradient(135deg, #06b6d4, #3b82f6);color: #fff;font-size: 13px;font-weight: 800;box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3)}
.fbl-step-icon {display: inline-flex;align-items: center;justify-content: center;width: 46px;height: 46px;margin: 6px auto 10px;border-radius: 14px;background: #cffafe;color: #0e7490}
.fbl-step-label {font-size: 14px;font-weight: 800;white-space: nowrap}
.fbl-step-desc {margin: 5px 0 0;font-size: 11.5px;line-height: 1.55;color: var(--color-text-muted)}
.fbl-faces {list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px}
.fbl-face {min-width: 0;padding: 16px 8px 14px;text-align: center;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-sm)}
.fbl-face-ic {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 8px;border-radius: 50%}
.fbl-face-ic--smile { background: #fef3c7; color: #d97706; }
.fbl-face-ic--cry { background: #dbeafe; color: #2563eb; }
.fbl-face-ic--wow { background: #fce7f3; color: #db2777; }
.fbl-face-ic--star { background: #ede9fe; color: #7c3aed; }
.fbl-face-name {font-size: 13px;font-weight: 800}
.fbl-face-foot {margin: 14px 0 0;text-align: center;font-size: 12px;line-height: 1.65;color: var(--color-text-secondary)}
.fbl-bottles {list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px}
.fbl-bottle {position: relative;min-width: 0;padding: 14px 6px 12px;text-align: center;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-sm)}
.fbl-bottle-art {height: 56px;display: flex;align-items: center;justify-content: center}
.fbl-bottle-art svg {width: 40px;height: 50px}
.fbl-bottle-name {display: block;margin-top: 6px;font-size: 12px;font-weight: 800}
.fbl-bottle-sub {display: block;margin-top: 2px;font-size: 10px;color: var(--color-text-light)}
.fbl-bottle-tag {position: absolute;top: -8px;left: 50%;transform: translateX(-50%);padding: 2px 8px;border-radius: 999px;white-space: nowrap;font-size: 9.5px;font-weight: 800;letter-spacing: 0.02em;background: linear-gradient(135deg, #06b6d4, #3b82f6);color: #fff;box-shadow: 0 3px 8px rgba(37, 99, 235, 0.28)}
.fbl-bottle-tag--sale {background: linear-gradient(135deg, #f97316, #ef4444);box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3)}
.fbl-bottles-note {margin: 14px 0 0;text-align: center;font-size: 11.5px;line-height: 1.7;color: var(--color-text-light)}
.fbl-store-wrap { text-align: center; }
.fbl-store-link {display: inline-flex;align-items: center;gap: 6px;margin-top: 12px;padding: 10px 18px;border-radius: 999px;border: 1px dashed var(--color-primary);color: var(--color-primary-dark);font-size: 12.5px;font-weight: 800;text-decoration: none;background: rgba(59, 130, 246, 0.05)}
.fbl-life {list-style: none;margin: 0;padding: 0 0 0 26px;position: relative}
.fbl-life::before {content: "";position: absolute;left: 9px;top: 8px;bottom: 12px;width: 2px;background: linear-gradient(180deg, #06b6d4, rgba(148, 163, 184, 0.35));border-radius: 2px}
.fbl-life-item {position: relative;padding: 0 0 16px}
.fbl-life-item:last-child { padding-bottom: 0; }
.fbl-life-dot {position: absolute;left: -26px;top: 3px;width: 20px;height: 20px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #fff;border: 2px solid #06b6d4;color: #0e7490}
.fbl-life-item:last-child .fbl-life-dot {border-color: var(--color-text-light);color: var(--color-text-light)}
.fbl-life-time {font-size: 12px;font-weight: 800;color: #0e7490}
.fbl-life-item:last-child .fbl-life-time { color: var(--color-text-muted); }
.fbl-life-text {margin: 3px 0 0;font-size: 12.5px;line-height: 1.6;color: var(--color-text-secondary)}
.fbl-safety {list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px}
.fbl-safety-item {min-width: 0;display: flex;align-items: flex-start;gap: 9px;padding: 13px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md)}
.fbl-safety-ic {flex: 0 0 auto;margin-top: 1px;color: #0e7490}
.fbl-safety-title {display: block;font-size: 12.5px;font-weight: 800}
.fbl-safety-text {margin: 3px 0 0;font-size: 11.5px;line-height: 1.55;color: var(--color-text-muted)}
.fbl-signup {margin-top: 8px;padding: 28px 20px;text-align: center;border-radius: var(--radius-lg);background:
radial-gradient(120% 100% at 50% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
#fff;border: 1px solid var(--color-border);box-shadow: var(--shadow-sm)}
.fbl-signup-title {margin: 0 0 6px;font-size: 18px;font-weight: 800}
.fbl-signup-text {margin: 0 auto 18px;max-width: 420px;font-size: 13px;line-height: 1.65;color: var(--color-text-secondary)}
.fbl-signup-btn {display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 50px;padding: 13px 28px;border-radius: var(--radius-sm);background: linear-gradient(135deg, #06b6d4, #3b82f6);color: #fff;font-size: 15px;font-weight: 800;text-decoration: none;box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);transition: opacity 0.15s ease, transform 0.05s ease}
.fbl-signup-btn:hover { opacity: 0.95; }
.fbl-signup-btn:active { transform: translateY(1px); }
.fbl-signup-sub {margin: 12px 0 0;font-size: 11.5px;color: var(--color-text-light)}
@media (max-width: 480px) {.fbl-hero { padding: 32px 16px 52px; }
.fbl-hero-title { font-size: 23px; }
.fbl-steps { gap: 8px; }
.fbl-step { padding: 18px 8px 14px; }
.fbl-step-desc { display: none; }
.fbl-step-icon { display: flex; margin: 6px auto 8px; }
.fbl-step-label { display: block; }
.fbl-faces { grid-template-columns: repeat(2, 1fr); }
.fbl-bottles { grid-template-columns: repeat(2, 1fr); }
.fbl-bottle-sub { font-size: 9.5px; }
.fbl-safety { grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce) {.fbl-hero-drift span,
.fbl-capsule-demo {animation: none !important}}