{"id":40,"date":"2026-04-28T08:59:44","date_gmt":"2026-04-28T08:59:44","guid":{"rendered":"https:\/\/breezy-donovan.duckdns.org\/?page_id=40"},"modified":"2026-04-28T09:14:18","modified_gmt":"2026-04-28T09:14:18","slug":"home","status":"publish","type":"page","link":"https:\/\/breezy-donovan.duckdns.org\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Breezy<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700&family=Playfair+Display:wght@400;700;900&display=swap');\r\n\r\n :root {\r\n --sky-50: #f0f9ff;\r\n --sky-100: #e0f2fe;\r\n --sky-200: #bae6fd;\r\n --sky-400: #38bdf8;\r\n --sky-500: #0ea5e9;\r\n --sky-600: #0284c7;\r\n --sky-700: #0369a1;\r\n --slate-50: #f8fafc;\r\n --slate-100: #f1f5f9;\r\n --slate-200: #e2e8f0;\r\n --slate-300: #cbd5e1;\r\n --slate-500: #64748b;\r\n --slate-600: #475569;\r\n --slate-700: #334155;\r\n --slate-800: #1e293b;\r\n --slate-900: #0f172a;\r\n --amber-400: #fbbf24;\r\n --amber-500: #f59e0b;\r\n --emerald-400: #34d399;\r\n --emerald-500: #10b981;\r\n --rose-500: #f43f5e;\r\n --violet-500: #8b5cf6;\r\n --radius: 12px;\r\n --radius-lg: 20px;\r\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);\r\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);\r\n --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);\r\n --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', system-ui, sans-serif;\r\n color: var(--slate-800);\r\n background: var(--sky-50);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n h1,\r\n h2,\r\n h3,\r\n h4 {\r\n font-family: 'Playfair Display', serif;\r\n line-height: 1.15;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* \u2500\u2500 HEADER \u2500\u2500 *\/\r\n .header-wrap {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n }\r\n\r\n \/* Utility bar *\/\r\n .utility-bar {\r\n background: var(--slate-900);\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n padding: 0 32px;\r\n height: 36px;\r\n gap: 24px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n .utility-bar a {\r\n color: rgba(255, 255, 255, 0.7);\r\n text-decoration: none;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n letter-spacing: 0.5px;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: color 0.2s;\r\n }\r\n\r\n .utility-bar a:hover {\r\n color: #fff;\r\n }\r\n\r\n .utility-bar .util-icon {\r\n font-size: 0.85rem;\r\n }\r\n\r\n \/* Middle bar: logo + secondary nav *\/\r\n .mid-bar {\r\n background: var(--slate-800);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0 32px;\r\n height: 56px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n .nav-brand {\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900;\r\n font-size: 1.5rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .nav-brand em {\r\n font-style: normal;\r\n background: linear-gradient(135deg, var(--sky-400), var(--violet-500));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .mid-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 28px;\r\n }\r\n\r\n .mid-links a {\r\n color: rgba(255, 255, 255, 0.75);\r\n text-decoration: none;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n transition: color 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n\r\n .mid-links a:hover {\r\n color: #fff;\r\n }\r\n\r\n .mid-links .book-btn {\r\n background: var(--sky-500);\r\n color: #fff;\r\n padding: 8px 20px;\r\n border-radius: 4px;\r\n transition: background 0.2s;\r\n }\r\n\r\n .mid-links .book-btn:hover {\r\n background: var(--sky-600);\r\n }\r\n\r\n \/* Main nav bar *\/\r\n .main-nav {\r\n background: var(--slate-700);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 32px;\r\n height: 48px;\r\n gap: 0;\r\n }\r\n\r\n .location-badge {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-right: 24px;\r\n color: #fff;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n }\r\n\r\n .location-dot {\r\n width: 22px;\r\n height: 22px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, #34d399, #0ea5e9);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.7rem;\r\n }\r\n\r\n .main-nav-links {\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n }\r\n\r\n .main-nav-links a {\r\n color: rgba(255, 255, 255, 0.85);\r\n text-decoration: none;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n letter-spacing: 1.8px;\r\n text-transform: uppercase;\r\n padding: 0 20px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n border-right: 1px solid rgba(255, 255, 255, 0.12);\r\n transition: background 0.2s, color 0.2s;\r\n white-space: nowrap;\r\n }\r\n\r\n .main-nav-links a:first-child {\r\n border-left: 1px solid rgba(255, 255, 255, 0.12);\r\n }\r\n\r\n .main-nav-links a:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n color: #fff;\r\n }\r\n\r\n \/* MORE dropdown *\/\r\n .more-wrap {\r\n position: relative;\r\n height: 100%;\r\n }\r\n\r\n .more-btn {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n color: rgba(255, 255, 255, 0.85);\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n letter-spacing: 1.8px;\r\n text-transform: uppercase;\r\n padding: 0 20px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n border-right: 1px solid rgba(255, 255, 255, 0.12);\r\n transition: background 0.2s;\r\n font-family: inherit;\r\n }\r\n\r\n .more-btn:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n color: #fff;\r\n }\r\n\r\n .more-arrow {\r\n font-size: 0.6rem;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .more-btn.open .more-arrow {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .more-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n right: 0;\r\n background: rgba(30, 41, 59, 0.97);\r\n backdrop-filter: blur(8px);\r\n min-width: 200px;\r\n padding: 8px 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(-4px);\r\n transition: opacity 0.2s, transform 0.2s, visibility 0.2s;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n .more-dropdown.open {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n .more-dropdown a {\r\n display: block;\r\n padding: 12px 24px;\r\n color: rgba(255, 255, 255, 0.8);\r\n text-decoration: none;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n transition: background 0.15s, color 0.15s;\r\n }\r\n\r\n .more-dropdown a:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n color: #fff;\r\n }\r\n\r\n \/* \u2500\u2500 HAMBURGER (mobile) \u2500\u2500 *\/\r\n .hamburger {\r\n display: none;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n width: 44px;\r\n height: 44px;\r\n position: relative;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 26px;\r\n height: 2px;\r\n background: #fff;\r\n border-radius: 2px;\r\n transition: transform 0.3s, opacity 0.2s;\r\n }\r\n\r\n .hamburger.open span:nth-child(1) {\r\n transform: translateY(8px) rotate(45deg);\r\n }\r\n\r\n .hamburger.open span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n\r\n .hamburger.open span:nth-child(3) {\r\n transform: translateY(-8px) rotate(-45deg);\r\n }\r\n\r\n \/* \u2500\u2500 MOBILE MENU OVERLAY \u2500\u2500 *\/\r\n .mobile-menu {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: var(--slate-900);\r\n z-index: 99;\r\n flex-direction: column;\r\n align-items: center;\r\n padding-top: 120px;\r\n gap: 0;\r\n overflow-y: auto;\r\n }\r\n\r\n .mobile-menu.open {\r\n display: flex;\r\n }\r\n\r\n .mobile-menu a {\r\n display: block;\r\n color: #fff;\r\n text-decoration: none;\r\n font-size: 1.05rem;\r\n font-weight: 600;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n padding: 18px 32px;\r\n text-align: center;\r\n width: 100%;\r\n max-width: 400px;\r\n transition: background 0.15s;\r\n }\r\n\r\n .mobile-menu a:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .mobile-menu .mobile-divider {\r\n width: 80%;\r\n max-width: 300px;\r\n height: 1px;\r\n background: rgba(255, 255, 255, 0.1);\r\n margin: 8px auto;\r\n }\r\n\r\n \/* \u2500\u2500 RESPONSIVE NAV \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n\r\n .main-nav-links,\r\n .more-wrap {\r\n display: none;\r\n }\r\n\r\n .mid-links {\r\n display: none;\r\n }\r\n\r\n .utility-bar {\r\n display: none;\r\n }\r\n\r\n .hamburger {\r\n display: flex;\r\n }\r\n\r\n .step-connector {\r\n display: none;\r\n }\r\n\r\n .mid-bar {\r\n height: 60px;\r\n }\r\n\r\n .main-nav {\r\n height: 44px;\r\n }\r\n\r\n .location-badge {\r\n margin-right: 0;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 180px 24px 80px;\r\n background:\r\n radial-gradient(ellipse 80% 60% at 50% 0%, rgba(186, 230, 253, 0.5), transparent),\r\n radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139, 92, 246, 0.08), transparent),\r\n var(--sky-50);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%230ea5e9' opacity='0.08'\/%3E%3C\/svg%3E\");\r\n pointer-events: none;\r\n }\r\n\r\n .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n background: #fff;\r\n border: 1px solid var(--sky-200);\r\n border-radius: 100px;\r\n padding: 6px 16px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n color: var(--sky-700);\r\n margin-bottom: 24px;\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n .badge span {\r\n display: inline-block;\r\n width: 8px;\r\n height: 8px;\r\n background: var(--emerald-400);\r\n border-radius: 50%;\r\n }\r\n\r\n .hero h1 {\r\n font-size: clamp(2.8rem, 6vw, 5.5rem);\r\n font-weight: 900;\r\n max-width: 800px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .hero h1 em {\r\n font-style: normal;\r\n background: linear-gradient(135deg, var(--sky-500), var(--violet-500));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .hero p {\r\n font-size: 1.2rem;\r\n color: var(--slate-500);\r\n max-width: 540px;\r\n margin-bottom: 36px;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n\r\n .btn {\r\n padding: 14px 32px;\r\n border-radius: 100px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n text-decoration: none;\r\n cursor: pointer;\r\n border: none;\r\n transition: all 0.2s;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--sky-500);\r\n color: #fff;\r\n box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--sky-600);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);\r\n }\r\n\r\n .btn-secondary {\r\n background: #fff;\r\n color: var(--slate-700);\r\n border: 1.5px solid var(--slate-200);\r\n }\r\n\r\n .btn-secondary:hover {\r\n border-color: var(--sky-300);\r\n background: var(--sky-50);\r\n }\r\n\r\n .social-proof {\r\n margin-top: 56px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .avatars {\r\n display: flex;\r\n }\r\n\r\n .avatars span {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n border: 2.5px solid #fff;\r\n margin-left: -10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .avatars span:first-child {\r\n margin-left: 0;\r\n }\r\n\r\n .social-proof p {\r\n font-size: 0.85rem;\r\n color: var(--slate-500);\r\n }\r\n\r\n .social-proof strong {\r\n color: var(--slate-800);\r\n }\r\n\r\n \/* \u2500\u2500 LOGOS \u2500\u2500 *\/\r\n .logos {\r\n padding: 48px 24px;\r\n text-align: center;\r\n border-top: 1px solid var(--sky-100);\r\n border-bottom: 1px solid var(--sky-100);\r\n background: #fff;\r\n }\r\n\r\n .logos p {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n color: var(--slate-400);\r\n font-weight: 600;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .logo-row {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 48px;\r\n flex-wrap: wrap;\r\n opacity: 0.35;\r\n }\r\n\r\n .logo-row span {\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n color: var(--slate-700);\r\n }\r\n\r\n \/* \u2500\u2500 SECTION UTILITY \u2500\u2500 *\/\r\n section {\r\n padding: 96px 24px;\r\n }\r\n\r\n .container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-label {\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 2.5px;\r\n color: var(--sky-500);\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(2rem, 4vw, 3rem);\r\n font-weight: 900;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .section-sub {\r\n font-size: 1.05rem;\r\n color: var(--slate-500);\r\n max-width: 560px;\r\n }\r\n\r\n \/* \u2500\u2500 FEATURES \u2500\u2500 *\/\r\n .features {\r\n background: #fff;\r\n }\r\n\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 24px;\r\n margin-top: 56px;\r\n }\r\n\r\n .feature-card {\r\n background: var(--slate-50);\r\n border: 1px solid var(--slate-100);\r\n border-radius: var(--radius-lg);\r\n padding: 36px 28px;\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n cursor: default;\r\n }\r\n\r\n .feature-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-lg);\r\n }\r\n\r\n .feature-icon {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .feature-card h3 {\r\n font-size: 1.25rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n\r\n .feature-card p {\r\n color: var(--slate-500);\r\n font-size: 0.95rem;\r\n }\r\n\r\n \/* \u2500\u2500 HOW IT WORKS \u2500\u2500 *\/\r\n .how {\r\n background: var(--sky-50);\r\n }\r\n\r\n .steps {\r\n display: flex;\r\n gap: 32px;\r\n margin-top: 56px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n\r\n .step {\r\n flex: 1;\r\n min-width: 220px;\r\n max-width: 300px;\r\n text-align: center;\r\n position: relative;\r\n padding: 0 12px;\r\n\r\n \/* For the hover effect *\/\r\n \/* 2. Smooth transition for hover effects *\/\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n\r\n border-radius: 16px;\r\n border: 2px solid transparent;\r\n transition: all 0.4s ease;\r\n box-sizing: border-box;\r\n }\r\n\r\n .step:hover,\r\n .step.in-view {\r\n padding: 0 10px;\r\n \/* 1. Expanding padding on hover for a more dynamic feel *\/\r\n \/* Not really necessary. I just like that it feels \"bouncy\" *\/\r\n\r\n \/* 3. The \"Coming Forward\" movement *\/\r\n transform: translateY(-12px) scale(1.02);\r\n\r\n \/* 4. The Shadow *\/\r\n box-shadow: var(--shadow-hover);\r\n\r\n \/* 5. Darker background on hover *\/\r\n background-color: #f8fafc;\r\n border-color: var(--sky-600);\r\n }\r\n\r\n .step-num {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--sky-500), var(--violet-500));\r\n color: #fff;\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 18px;\r\n margin-top: 7px;\r\n box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);\r\n }\r\n\r\n .step-connector {\r\n flex: 1;\r\n height: 2px;\r\n background: var(--slate-500);\r\n align-self: center;\r\n \/* Centers it vertically with the numbers *\/\r\n min-width: 20px;\r\n max-width: 50px;\r\n }\r\n\r\n .step h3 {\r\n font-size: 1.15rem;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .step:hover h3 {\r\n color: var(--sky-600);\r\n }\r\n\r\n .step p {\r\n font-size: 0.9rem;\r\n color: var(--slate-500);\r\n }\r\n\r\n \/* \u2500\u2500 PRICING \u2500\u2500 *\/\r\n .pricing {\r\n background: #fff;\r\n }\r\n\r\n .pricing-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 24px;\r\n margin-top: 56px;\r\n }\r\n\r\n .price-card {\r\n border: 1.5px solid var(--slate-200);\r\n border-radius: var(--radius-lg);\r\n padding: 36px 28px;\r\n position: relative;\r\n background: #fff;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .price-card:hover {\r\n transform: translateY(-3px);\r\n }\r\n\r\n .price-card.popular {\r\n border-color: var(--sky-400);\r\n box-shadow: 0 0 0 1px var(--sky-400), var(--shadow-xl);\r\n }\r\n\r\n .popular-tag {\r\n position: absolute;\r\n top: -13px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: linear-gradient(135deg, var(--sky-500), var(--violet-500));\r\n color: #fff;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n padding: 4px 16px;\r\n border-radius: 100px;\r\n }\r\n\r\n .price-card h3 {\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .price-card .desc {\r\n font-size: 0.85rem;\r\n color: var(--slate-500);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .price {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 3rem;\r\n font-weight: 900;\r\n }\r\n\r\n .price sup {\r\n font-size: 1.2rem;\r\n top: -1rem;\r\n }\r\n\r\n .price sub {\r\n font-size: 0.85rem;\r\n font-weight: 400;\r\n color: var(--slate-500);\r\n bottom: 0;\r\n }\r\n\r\n .price-card ul {\r\n list-style: none;\r\n margin: 24px 0;\r\n }\r\n\r\n .price-card li {\r\n padding: 8px 0;\r\n font-size: 0.9rem;\r\n color: var(--slate-600);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .price-card li::before {\r\n content: '\u2713';\r\n color: var(--emerald-500);\r\n font-weight: 700;\r\n }\r\n\r\n .price-card .btn {\r\n width: 100%;\r\n justify-content: center;\r\n margin-top: 8px;\r\n }\r\n\r\n \/* \u2500\u2500 TESTIMONIALS \u2500\u2500 *\/\r\n .testimonials {\r\n background: var(--slate-900);\r\n color: #fff;\r\n }\r\n\r\n .testimonials .section-label {\r\n color: var(--sky-400);\r\n }\r\n\r\n .testimonials .section-sub {\r\n color: var(--slate-300);\r\n }\r\n\r\n .test-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 24px;\r\n margin-top: 56px;\r\n }\r\n\r\n .test-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: var(--radius-lg);\r\n padding: 32px 24px;\r\n }\r\n\r\n .stars {\r\n color: var(--amber-400);\r\n font-size: 1rem;\r\n margin-bottom: 16px;\r\n letter-spacing: 2px;\r\n }\r\n\r\n .test-card blockquote {\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n color: var(--slate-200);\r\n margin-bottom: 20px;\r\n font-style: italic;\r\n }\r\n\r\n .test-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .test-avatar {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .test-author strong {\r\n display: block;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .test-author span {\r\n font-size: 0.8rem;\r\n color: var(--slate-400);\r\n }\r\n\r\n \/* \u2500\u2500 STATS \u2500\u2500 *\/\r\n .stats {\r\n background: linear-gradient(135deg, var(--sky-500), var(--violet-500));\r\n color: #fff;\r\n text-align: center;\r\n padding: 72px 24px;\r\n }\r\n\r\n .stats-grid {\r\n display: flex;\r\n justify-content: center;\r\n gap: 64px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stat h2 {\r\n font-size: 3.2rem;\r\n font-weight: 900;\r\n }\r\n\r\n .stat p {\r\n font-size: 0.9rem;\r\n opacity: 0.85;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* \u2500\u2500 FAQ \u2500\u2500 *\/\r\n .faq {\r\n background: var(--sky-50);\r\n }\r\n\r\n .faq-list {\r\n max-width: 680px;\r\n margin: 56px auto 0;\r\n }\r\n\r\n .faq-item {\r\n border-bottom: 1px solid var(--slate-200);\r\n padding: 20px 0;\r\n }\r\n\r\n .faq-q {\r\n font-weight: 700;\r\n font-size: 1.05rem;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: none;\r\n border: none;\r\n width: 100%;\r\n text-align: left;\r\n font-family: inherit;\r\n color: var(--slate-800);\r\n }\r\n\r\n .faq-q::after {\r\n content: '+';\r\n font-size: 1.4rem;\r\n color: var(--sky-500);\r\n transition: transform 0.2s;\r\n }\r\n\r\n .faq-q.open::after {\r\n transform: rotate(45deg);\r\n }\r\n\r\n .faq-a {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease, padding 0.3s;\r\n color: var(--slate-500);\r\n font-size: 0.95rem;\r\n line-height: 1.7;\r\n }\r\n\r\n .faq-a.open {\r\n max-height: 200px;\r\n padding-top: 12px;\r\n }\r\n\r\n \/* \u2500\u2500 NEWSLETTER \/ CTA \u2500\u2500 *\/\r\n .newsletter {\r\n background: #fff;\r\n text-align: center;\r\n }\r\n\r\n .nl-box {\r\n background: var(--slate-900);\r\n border-radius: var(--radius-lg);\r\n padding: 64px 40px;\r\n max-width: 720px;\r\n margin: 0 auto;\r\n color: #fff;\r\n }\r\n\r\n .nl-box h2 {\r\n font-size: 2.2rem;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .nl-box p {\r\n color: var(--slate-300);\r\n margin-bottom: 28px;\r\n }\r\n\r\n .nl-form {\r\n display: flex;\r\n gap: 10px;\r\n max-width: 440px;\r\n margin: 0 auto;\r\n }\r\n\r\n .nl-form input {\r\n flex: 1;\r\n padding: 14px 18px;\r\n border-radius: 100px;\r\n border: 1.5px solid rgba(255, 255, 255, 0.15);\r\n background: rgba(255, 255, 255, 0.08);\r\n color: #fff;\r\n font-size: 0.95rem;\r\n font-family: inherit;\r\n outline: none;\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .nl-form input::placeholder {\r\n color: var(--slate-400);\r\n }\r\n\r\n .nl-form input:focus {\r\n border-color: var(--sky-400);\r\n }\r\n\r\n .nl-form .btn-primary {\r\n white-space: nowrap;\r\n }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--slate-900);\r\n color: var(--slate-400);\r\n padding: 64px 24px 32px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .footer-grid {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .footer-brand .nav-brand {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .footer-brand p {\r\n margin-top: 10px;\r\n font-size: 0.85rem;\r\n line-height: 1.6;\r\n max-width: 280px;\r\n }\r\n\r\n footer h4 {\r\n color: #fff;\r\n font-size: 0.85rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 16px;\r\n font-family: 'DM Sans', sans-serif;\r\n }\r\n\r\n footer ul {\r\n list-style: none;\r\n }\r\n\r\n footer li {\r\n margin-bottom: 10px;\r\n }\r\n\r\n footer a {\r\n color: var(--slate-400);\r\n text-decoration: none;\r\n font-size: 0.9rem;\r\n transition: color 0.2s;\r\n }\r\n\r\n footer a:hover {\r\n color: var(--sky-400);\r\n }\r\n\r\n .footer-bottom {\r\n max-width: 1100px;\r\n margin: 48px auto 0;\r\n padding-top: 24px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 0.8rem;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n\r\n \/* \u2500\u2500 TOAST \u2500\u2500 *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 24px;\r\n right: 24px;\r\n z-index: 200;\r\n background: var(--slate-900);\r\n color: #fff;\r\n padding: 16px 24px;\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow-xl);\r\n font-size: 0.9rem;\r\n transform: translateY(120%);\r\n transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .toast.show {\r\n transform: translateY(0);\r\n }\r\n\r\n .main-nav-links a {\r\n position: relative;\r\n z-index: 100;\r\n \/* Higher than the header-wrap *\/\r\n pointer-events: auto !important;\r\n }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 768px) {\r\n .footer-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n\r\n .nl-form {\r\n flex-direction: column;\r\n }\r\n\r\n .stats-grid {\r\n gap: 32px;\r\n }\r\n\r\n .mobileStep {\r\n\r\n padding: 0 10px;\r\n \/* 1. Expanding padding on hover for a more dynamic feel *\/\r\n \/* Not really necessary. I just like that it feels \"bouncy\" *\/\r\n\r\n \/* 3. The \"Coming Forward\" movement *\/\r\n transform: translateY(-12px) scale(1.02);\r\n\r\n \/* 4. The Shadow *\/\r\n box-shadow: var(--shadow-hover);\r\n\r\n \/* 5. Darker background on hover *\/\r\n background-color: #f8fafc;\r\n border-color: var(--sky-600);\r\n\r\n\r\n }\r\n }\r\n <\/style>\r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- HEADER -->\r\n <div class=\"header-wrap\">\r\n <!-- Utility bar -->\r\n <div class=\"utility-bar\">\r\n <a href=\"#\"><span class=\"util-icon\">\ud83d\udcf1<\/span> Breezy App<\/a>\r\n <a href=\"#\"><span class=\"util-icon\">\ud83d\udcc5<\/span> Consultations<\/a>\r\n <a href=\"#\"><span class=\"util-icon\">\ud83d\udcde<\/span> 1-888-AIR-GOOD<\/a>\r\n <\/div>\r\n\r\n <!-- Mid bar: logo + secondary links -->\r\n <div class=\"mid-bar\">\r\n <div class=\"nav-brand\"><em>Breezy<\/em> \u2122<\/div>\r\n <div class=\"mid-links\">\r\n <a href=\"#\">Locations <span style=\"font-size:0.6rem;\">\u25be<\/span><\/a>\r\n <a href=\"#\">Rewards Club<\/a>\r\n <a href=\"#signup\" class=\"book-btn\">Book Air <span style=\"font-size:0.6rem;\">\u25be<\/span><\/a>\r\n <\/div>\r\n <button class=\"hamburger\" id=\"hamburgerBtn\" onclick=\"toggleMobileMenu()\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Main nav -->\r\n <div class=\"main-nav\">\r\n <div class=\"location-badge\">\r\n <div class=\"location-dot\">\ud83d\udccd<\/div>\r\n SUMMIT\r\n <\/div>\r\n <div class=\"main-nav-links\">\r\n <a href=\"#features\">Features<\/a>\r\n <a href=\"#how\">How It Works<\/a>\r\n <a href=\"#pricing\">Pricing<\/a>\r\n <a href=\"#testimonials\">Reviews<\/a>\r\n <a href=\"#\">Promotions<\/a>\r\n <\/div>\r\n <div class=\"more-wrap\">\r\n <button class=\"more-btn\" onclick=\"toggleMore()\">\r\n More <span class=\"more-arrow\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"more-dropdown\" id=\"moreDropdown\">\r\n <a href=\"#faq\">FAQ<\/a>\r\n <a href=\"#\">Air Menu<\/a>\r\n <a href=\"#\">Careers<\/a>\r\n <a href=\"#\">Directions<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MOBILE MENU OVERLAY -->\r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <a href=\"#features\" onclick=\"closeMobile()\">Features<\/a>\r\n <a href=\"#how\" onclick=\"closeMobile()\">How It Works<\/a>\r\n <a href=\"#pricing\" onclick=\"closeMobile()\">Pricing<\/a>\r\n <a href=\"#testimonials\" onclick=\"closeMobile()\">Reviews<\/a>\r\n <a href=\"#\">Promotions<\/a>\r\n <div class=\"mobile-divider\"><\/div>\r\n <a href=\"#faq\" onclick=\"closeMobile()\">FAQ<\/a>\r\n <a href=\"#\">Air Menu<\/a>\r\n <a href=\"#\">Careers<\/a>\r\n <a href=\"#\">Directions<\/a>\r\n <div class=\"mobile-divider\"><\/div>\r\n <a href=\"#\">Locations<\/a>\r\n <a href=\"#\">Rewards Club<\/a>\r\n <a href=\"#signup\" onclick=\"closeMobile()\">Book Air<\/a>\r\n <\/div>\r\n <article id=\"post-2\" class=\"post-2 page type-page status-publish hentry\">\r\n <header class=\"header\">\r\n <h1 class=\"entry-title\" itemprop=\"name\">Home<\/h1>\r\n <\/header>\r\n <div class=\"entry-content\" itemprop=\"mainContentOfPage\">\r\n\r\n <!-- HERO -->\r\n <section class=\"hero\" id=\"hero\">\r\n <div class=\"badge\"><span><\/span> Now serving 47 countries<\/div>\r\n <h1>Premium <em>Artisanal Air<\/em>, Delivered Fresh<\/h1>\r\n <p>Hand-curated atmospheric blends sourced from the world’s finest altitudes. Because you deserve air with\r\n <em>character<\/em>.\r\n <\/p>\r\n <div class=\"hero-buttons\">\r\n <button class=\"btn btn-primary\" onclick=\"window.location.href='#'\">Start Breathing Better \u2192<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showToast('\ud83d\udcfa Playing: \\\" The Art of Nothing\\\" (3 min)')\">\u25b6 Watch\r\n the Story<\/button>\r\n <\/div>\r\n <div class=\"social-proof\">\r\n <div class=\"avatars\">\r\n <span style=\"background:#fcd34d\">\ud83e\uddd1<\/span>\r\n <span style=\"background:#a5f3fc\">\ud83d\udc69<\/span>\r\n <span style=\"background:#c4b5fd\">\ud83e\uddd4<\/span>\r\n <span style=\"background:#fda4af\">\ud83d\udc71<\/span>\r\n <span style=\"background:#86efac\">\ud83d\udc69\u200d\ud83e\uddb0<\/span>\r\n <\/div>\r\n <p><strong>12,847<\/strong> breathers joined this month<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- LOGOS -->\r\n <div class=\"logos\">\r\n <p>Trusted by industry leaders who breathe<\/p>\r\n <div class=\"logo-row\">\r\n <span>Lungify<\/span>\r\n <span>AirBnBreeze<\/span>\r\n <span>OxyCorp<\/span>\r\n <span>NostrilTech<\/span>\r\n <span>GaspWorks<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FEATURES -->\r\n <section class=\"features\" id=\"features\">\r\n <div class=\"container\">\r\n <div class=\"section-label\">Why Breezy<\/div>\r\n <div class=\"section-title\">Air, but make it \u2728 premium \u2728<\/div>\r\n <p class=\"section-sub\">We ruined a perfectly free resource by adding a subscription model. You’re\r\n welcome.<\/p>\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background:#dbeafe;\">\ud83c\udfd4\ufe0f<\/div>\r\n <h3>Mountain-Sourced\u2122<\/h3>\r\n <p>Each batch is harvested at peak altitude by our trained Air Sommeliers using proprietary glass jars.\r\n <\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background:#fce7f3;\">\ud83e\uddec<\/div>\r\n <h3>DNA-Matched Blends<\/h3>\r\n <p>Our AI analyzes your 23andMe data to craft a bespoke nitrogen-oxygen ratio. Patent pending.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background:#d1fae5;\">\ud83c\udf3f<\/div>\r\n <h3>Carbon-Neutral Carbon<\/h3>\r\n <p>We offset our CO\u2082 by thinking really hard about trees. It’s basically the same thing.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background:#fef3c7;\">\u26a1<\/div>\r\n <h3>Instant Delivery<\/h3>\r\n <p>Our patented “Open a Window” technology ensures same-second delivery anywhere on Earth.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background:#ede9fe;\">\ud83d\udd2c<\/div>\r\n <h3>Lab-Verified Purity<\/h3>\r\n <p>Every batch is tested by scientists who definitely exist and are not just our intern in a lab coat.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\" style=\"background:#ffe4e6;\">\ud83e\udd1d<\/div>\r\n <h3>Community Breathing<\/h3>\r\n <p>Join our Discord of 50k+ breathers. Share tips, techniques, and which nostril you prefer.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- HOW IT WORKS -->\r\n <section class=\"how\" id=\"how\">\r\n <div class=\"container\" style=\"text-align:center;\">\r\n <div class=\"section-label\">How It Works<\/div>\r\n <div class=\"section-title\">Three steps to better breathing<\/div>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">It’s so simple, you’ve probably been doing it wrong\r\n your whole life.<\/p>\r\n <div class=\"steps\">\r\n <div class=\"step\">\r\n <div class=\"step-num\">1<\/div>\r\n <h3>Take Our Quiz<\/h3>\r\n <p>Answer 47 deeply personal questions so we can recommend the air you were already breathing.<\/p>\r\n <\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step\">\r\n <div class=\"step-num\">2<\/div>\r\n <h3>We “Curate”<\/h3>\r\n <p>Our team spends 0 minutes hand-selecting the exact same air from our warehouse (the sky).<\/p>\r\n <\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step\">\r\n <div class=\"step-num\">3<\/div>\r\n <h3>Breathe & Subscribe<\/h3>\r\n <p>Inhale, exhale, repeat. If you stop, it’s not our fault but also please don’t cancel.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PRICING -->\r\n <section class=\"pricing\" id=\"pricing\">\r\n <div class=\"container\" style=\"text-align:center;\">\r\n <div class=\"section-label\">Pricing<\/div>\r\n <div class=\"section-title\">Choose your atmosphere<\/div>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">All plans include unlimited access to Earth’s atmosphere\r\n (terms apply).<\/p>\r\n <div class=\"pricing-grid\">\r\n <div class=\"price-card\">\r\n <h3>Casual Breather<\/h3>\r\n <p class=\"desc\">For the air-curious<\/p>\r\n <div class=\"price\"><sup>$<\/sup>9<sub>\/mo<\/sub><\/div>\r\n <ul>\r\n <li>Up to 23,000 breaths\/day<\/li>\r\n <li>Standard atmospheric blend<\/li>\r\n <li>Email support (we may reply)<\/li>\r\n <li>1 nostril optimization<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-secondary\" onclick=\"showToast('\ud83e\udec1 Welcome aboard, Casual Breather!')\">Get\r\n Started<\/button>\r\n <\/div>\r\n <div class=\"price-card popular\">\r\n <div class=\"popular-tag\">Most Popular<\/div>\r\n <h3>Power Inhaler<\/h3>\r\n <p class=\"desc\">For serious oxygen enthusiasts<\/p>\r\n <div class=\"price\"><sup>$<\/sup>29<sub>\/mo<\/sub><\/div>\r\n <ul>\r\n <li>Unlimited breaths<\/li>\r\n <li>3 premium altitude blends<\/li>\r\n <li>Priority support (we will reply)<\/li>\r\n <li>Dual-nostril optimization<\/li>\r\n <li>Monthly Air Report\u2122<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-primary\"\r\n onclick=\"showToast('\ud83c\udf89 Power Inhaler activated! Take a deep breath.')\">Start Free Trial<\/button>\r\n <\/div>\r\n <div class=\"price-card\">\r\n <h3>Enterprise Lung<\/h3>\r\n <p class=\"desc\">For teams that breathe together<\/p>\r\n <div class=\"price\"><sup>$<\/sup>99<sub>\/mo<\/sub><\/div>\r\n <ul>\r\n <li>Everything in Power Inhaler<\/li>\r\n <li>Dedicated Air Account Manager<\/li>\r\n <li>Custom scent profiles<\/li>\r\n <li>SSO (Single Sniff-On)<\/li>\r\n <li>SLA: 99.9% oxygen uptime<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-secondary\"\r\n onclick=\"showToast('\ud83d\udcde Our Air Sales team will reach out within 1 business breath.')\">Contact\r\n Sales<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TESTIMONIALS -->\r\n <section class=\"testimonials\" id=\"testimonials\">\r\n <div class=\"container\">\r\n <div class=\"section-label\">Testimonials<\/div>\r\n <div class=\"section-title\" style=\"color:#fff;\">Don’t take our word for it<\/div>\r\n <p class=\"section-sub\">Real reviews from real breathers. Probably.<\/p>\r\n <div class=\"test-grid\">\r\n <div class=\"test-card\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <blockquote>“I’ve been breathing for 34 years and never knew I was doing it wrong. Breezy\r\n changed everything. My left nostril has never been more optimized.”<\/blockquote>\r\n <div class=\"test-author\">\r\n <div class=\"test-avatar\" style=\"background:#fcd34d;\">\ud83e\uddd1<\/div>\r\n <div><strong>Jordan P.<\/strong><span>VP of Inhaling, Lungify<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"test-card\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <blockquote>“We switched our entire office to Breezy Enterprise. Productivity is the same but morale\r\n is confusingly higher. 10\/10 would subscribe to air again.”<\/blockquote>\r\n <div class=\"test-author\">\r\n <div class=\"test-avatar\" style=\"background:#c4b5fd;\">\ud83d\udc69<\/div>\r\n <div><strong>Sam K.<\/strong><span>COO, NostrilTech<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"test-card\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/div>\r\n <blockquote>“Four stars because I briefly forgot to breathe and it wasn’t covered under the\r\n warranty. Otherwise, flawless product. The Mountain Blend slaps.”<\/blockquote>\r\n <div class=\"test-author\">\r\n <div class=\"test-avatar\" style=\"background:#86efac;\">\ud83e\uddd4<\/div>\r\n <div><strong>Taylor R.<\/strong><span>Professional Breather<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- STATS -->\r\n <section class=\"stats\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat\">\r\n <h2>12M+<\/h2>\r\n <p>Breaths facilitated<\/p>\r\n <\/div>\r\n <div class=\"stat\">\r\n <h2>99.97%<\/h2>\r\n <p>Oxygen uptime SLA<\/p>\r\n <\/div>\r\n <div class=\"stat\">\r\n <h2>47<\/h2>\r\n <p>Countries served<\/p>\r\n <\/div>\r\n <div class=\"stat\">\r\n <h2>0<\/h2>\r\n <p>Customers who stopped breathing*<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FAQ -->\r\n <section class=\"faq\" id=\"faq\">\r\n <div class=\"container\" style=\"text-align:center;\">\r\n <div class=\"section-label\">FAQ<\/div>\r\n <div class=\"section-title\">Questions we made up<\/div>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Transparent answers to the questions literally nobody asked.<\/p>\r\n <div class=\"faq-list\" style=\"text-align:left;\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" onclick=\"toggleFaq(this)\">Isn’t air already free?<\/button>\r\n <div class=\"faq-a\">Technically, yes. But is <em>free<\/em> air really the air you want to be breathing? Our\r\n air comes with a receipt, and that’s called peace of mind.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" onclick=\"toggleFaq(this)\">What if I forget to breathe?<\/button>\r\n <div class=\"faq-a\">That’s actually a medical concern and not something we can help with. But our\r\n Power Inhaler plan does include breathing reminders via push notification every 4 seconds.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" onclick=\"toggleFaq(this)\">Can I cancel anytime?<\/button>\r\n <div class=\"faq-a\">You can cancel your subscription anytime! You’ll just need to fill out a 23-page\r\n form, attend an exit interview with our Air Retention Specialist, and solve a CAPTCHA that’s\r\n actually a lung capacity test.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" onclick=\"toggleFaq(this)\">Is this a real product?<\/button>\r\n <div class=\"faq-a\">This is a test site for A\/B testing and other experiments. But honestly, at this point\r\n in tech, would you really be surprised if someone funded this? We’ve seen worse on Product Hunt.\r\n <\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" onclick=\"toggleFaq(this)\">Do you have an API?<\/button>\r\n <div class=\"faq-a\">Yes! Our REST API supports GET \/air and POST \/exhale endpoints. Rate limited to 12\r\n breaths per minute (we recommend not exceeding this in production or in life).<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- NEWSLETTER CTA -->\r\n <section class=\"newsletter\" id=\"signup\">\r\n <div class=\"container\">\r\n <div class=\"nl-box\">\r\n <h2>Ready to breathe different?<\/h2>\r\n <p>Join 12,847 breathers. Get weekly air quality insights and exclusive nostril tips.<\/p>\r\n <div class=\"nl-form\">\r\n <input type=\"email\" placeholder=\"you@breathe.io\" id=\"emailInput\">\r\n <button class=\"btn btn-primary\" onclick=\"handleSignup()\">Subscribe Free \u2192<\/button>\r\n <\/div>\r\n <p style=\"font-size:0.75rem; color:var(--slate-500); margin-top:14px;\">No spam. Just air. Unsubscribe by\r\n holding your breath for 60 seconds.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <p><\/p>\r\n <div class=\"entry-links\"><\/div>\r\n <\/div>\r\n <\/article>\r\n <!-- FOOTER -->\r\n <footer>\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <div class=\"nav-brand\" style=\"color:#fff;background:none;-webkit-text-fill-color:unset;\">\r\n <em>Breezy<\/em> \u2122\r\n <\/div>\r\n <p>Making the world's most abundant resource feel exclusive since 2026. Venture-backed. Carbon-confused.<\/p>\r\n <\/div>\r\n <div>\r\n <h4>Product<\/h4>\r\n <ul>\r\n <li><a href=\"#features\">Features<\/a><\/li>\r\n <li><a href=\"#pricing\">Pricing<\/a><\/li>\r\n <li><a href=\"#\">API Docs<\/a><\/li>\r\n <li><a href=\"#\">Changelog<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4>Company<\/h4>\r\n <ul>\r\n <li><a href=\"#\">About (It's Air)<\/a><\/li>\r\n <li><a href=\"#\">Blog<\/a><\/li>\r\n <li><a href=\"#\">Careers<\/a><\/li>\r\n <li><a href=\"#\">Press Kit<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4>Legal<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Privacy Policy<\/a><\/li>\r\n <li><a href=\"#\">Terms of Service<\/a><\/li>\r\n <li><a href=\"#\">Air EULA<\/a><\/li>\r\n <li><a href=\"#\">Nostril Waiver<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n © 2026 Breezy <\/div>\r\n <\/footer>\r\n\r\n <!-- TOAST -->\r\n <div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n <script>\r\n function showToast(msg) {\r\n const t = document.getElementById('toast');\r\n t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(() => t.classList.remove('show'), 3200);\r\n }\r\n\r\n function handleSignup() {\r\n const email = document.getElementById('emailInput').value;\r\n if (email && email.includes('@')) {\r\n showToast('\ud83c\udf89 Welcome to Breezy! Check your inbox (or just inhale).');\r\n document.getElementById('emailInput').value = '';\r\n } else {\r\n showToast('\u26a0\ufe0f Please enter a valid email. We need it for... air reasons.');\r\n }\r\n }\r\n\r\n function toggleFaq(btn) {\r\n const answer = btn.nextElementSibling;\r\n const isOpen = btn.classList.contains('open');\r\n document.querySelectorAll('.faq-q').forEach(q => q.classList.remove('open'));\r\n document.querySelectorAll('.faq-a').forEach(a => a.classList.remove('open'));\r\n if (!isOpen) {\r\n btn.classList.add('open');\r\n answer.classList.add('open');\r\n }\r\n }\r\n\r\n \/\/ MORE dropdown\r\n function toggleMore() {\r\n const btn = document.querySelector('.more-btn');\r\n const dd = document.getElementById('moreDropdown');\r\n btn.classList.toggle('open');\r\n dd.classList.toggle('open');\r\n }\r\n \/\/ Close MORE on outside click\r\n document.addEventListener('click', (e) => {\r\n if (!e.target.closest('.more-wrap')) {\r\n document.querySelector('.more-btn')?.classList.remove('open');\r\n document.getElementById('moreDropdown')?.classList.remove('open');\r\n }\r\n });\r\n\r\n \/\/ Mobile menu\r\n function toggleMobileMenu() {\r\n const btn = document.getElementById('hamburgerBtn');\r\n const menu = document.getElementById('mobileMenu');\r\n btn.classList.toggle('open');\r\n menu.classList.toggle('open');\r\n document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';\r\n }\r\n function closeMobile() {\r\n document.getElementById('hamburgerBtn').classList.remove('open');\r\n document.getElementById('mobileMenu').classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Smooth scroll for nav links\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\r\n a.addEventListener('click', e => {\r\n e.preventDefault();\r\n\r\n \/\/console.log('Navigating to:', a.href);\r\n\r\n const cleanHref = a.getAttribute('href');\r\n \/\/console.log('Clean href:', cleanHref);\r\n\r\n const target = document.querySelector(cleanHref);\r\n \/\/console.log('Target element:', target);\r\n\r\n try {\r\n const target = document.querySelector(cleanHref); \/\/ Using the ID instead of full URL\r\n if (target) {\r\n \/\/console.log(\"Target found! Scrolling to:\", target);\r\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n } else {\r\n console.warn(\"Target element not found for ID:\", cleanHref);\r\n }\r\n } catch (err) {\r\n console.error(\"The selector failed. Error:\", err);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Part 2 - Bonus\r\n\r\n \/\/ observer callback function that adds 'in-view' class to .step elements when they are in the middle of the viewport on mobile \r\n const observerCallback = (entries, observer) => {\r\n\r\n const isMobile = window.innerWidth <= 768;\r\n\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting && isMobile) {\r\n \/\/console.log('Section in view:', entry.target.id);\r\n \/\/ You can add any animation or class toggle here\r\n entry.target.classList.add('in-view');\r\n } else {\r\n entry.target.classList.remove('in-view');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Make the observer only apply its styling within 2% of the screen (oddly, it works well)\r\n const observerOptions = {\r\n root: null, \/\/ viewport\r\n rootMargin: '-49% 0px -49% 0px',\r\n threshold: 0\r\n };\r\n\r\n const observer = new IntersectionObserver(observerCallback, observerOptions);\r\n\r\n \/\/ Apply the observer to each .step element\r\n document.querySelectorAll('.step').forEach(step => observer.observe(step));\r\n <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Breezy \ud83d\udcf1 Breezy App \ud83d\udcc5 Consultations \ud83d\udcde 1-888-AIR-GOOD Breezy \u2122 Locations \u25be Rewards Club Book Air \u25be \ud83d\udccd SUMMIT Features How It Works Pricing Reviews Promotions More \u25bc FAQ Air Menu Careers Directions Features How It Works Pricing Reviews Promotions FAQ Air Menu Careers Directions Locations Rewards Club Book Air Home Now serving 47 countries Premium […]<\/p>\n","protected":false},"author":1,"featured_media":45,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-40","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":7,"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/67"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=\/wp\/v2\/media\/45"}],"wp:attachment":[{"href":"https:\/\/breezy-donovan.duckdns.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}