/* HAB Landing — merged desktop + mobile. Generated from HAB_Landing_DR_V5 (1).html + HAB_Landing_DR_V5_Mobile.html */

/* ===== Desktop / tablet (768px and up) ===== */
@media (min-width:768px){
:root{--hab-green:#7F9B86;--hab-green-dark:#25372F;--hab-green-deep:#3D6A5D;--hab-sage:#B1C9B7;--hab-mint:#EAF3EE;--hab-cream:#FFFDF8;--hab-pink:#FDF1F4;--hab-peach:#E8B9A5;--hab-gold:#DCC696;--hab-charcoal:#25372F;--hab-white:#FFF;--radius-sm:12px;--radius-md:20px;--radius-lg:32px}
*{margin:0;padding:0;box-sizing:border-box}html,body{overflow-x:hidden;height:auto}
body{font-family:'Assistant','Varela Round',sans-serif;background:var(--hab-cream);color:var(--hab-charcoal);line-height:1.7;-webkit-overflow-scrolling:touch}
h1,h2,h3,h4{font-family:'Varela Round','Assistant',sans-serif;font-weight:700}
/* Nav */
.nav{position:fixed;top:0;right:0;left:0;z-index:100;padding:16px 40px;display:flex;justify-content:space-between;align-items:center;transition:all .4s}
.nav.scrolled{background:rgba(255,253,248,.92);backdrop-filter:blur(20px);box-shadow:0 2px 40px rgba(37,55,47,.06)}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;gap:32px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;color:var(--hab-charcoal);font-weight:600;font-size:15px;transition:color .3s}
.nav-links a:hover{color:var(--hab-green)}
.nav-cta{background:var(--hab-green);animation:nav-glow 3s ease-in-out infinite;color:#fff!important;padding:10px 28px;border-radius:50px;font-weight:700!important}
.nav-cta:hover{background:var(--hab-green-deep)!important;transform:translateY(-2px)}
@keyframes nav-glow{0%,100%{box-shadow:0 0 0 0 rgba(127,155,134,0)}50%{box-shadow:0 0 0 6px rgba(127,155,134,.25)}}
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--hab-charcoal);margin:6px 0;border-radius:2px}
/* Hero */
.hero{min-height:auto;display:flex;align-items:center;padding:110px 60px 60px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,var(--hab-mint) 0%,transparent 70%);opacity:.6;z-index:0}
.hero::after{content:'';position:absolute;bottom:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--hab-pink) 0%,transparent 70%);opacity:.5;z-index:0}
.hero-content{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;position:relative;z-index:1;width:100%}
.hero-text{max-width:580px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--hab-mint);color:var(--hab-green-deep);padding:8px 20px;border-radius:50px;font-size:14px;font-weight:600;margin-bottom:28px}
.hero-badge-dot{width:8px;height:8px;background:var(--hab-green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hero-title{font-size:clamp(32px,4.5vw,50px);line-height:1.25;color:var(--hab-charcoal);margin-bottom:20px}
.hero-title-highlight{color:var(--hab-green)}
.hero-subtitle{font-size:19px;color:#3d5246;line-height:1.8;margin-bottom:32px;font-weight:500}
.hero-subtitle strong{color:var(--hab-charcoal)}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--hab-green);color:#fff;padding:16px 36px;border-radius:50px;font-size:18px;font-weight:700;text-decoration:none;transition:all .3s;border:none;cursor:pointer;font-family:inherit}
.btn-primary:hover{background:var(--hab-green-deep);transform:translateY(-3px);box-shadow:0 12px 40px rgba(127,155,134,.3)}
.btn-secondary{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--hab-charcoal);padding:16px 36px;border-radius:50px;font-size:18px;font-weight:600;text-decoration:none;transition:all .3s;border:2px solid var(--hab-sage)}
.btn-secondary:hover{border-color:var(--hab-green);color:var(--hab-green);transform:translateY(-2px)}
.hero-trust{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}
.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#6b7d73;font-weight:500}
.hero-trust-icon{color:var(--hab-green);font-size:16px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.hero-phone-frame{width:260px;background:var(--hab-white);border-radius:40px;padding:10px;box-shadow:0 40px 80px rgba(37,55,47,.15),0 0 0 1px rgba(127,155,134,.1);position:relative;z-index:2}
.hero-phone-frame img{width:100%;border-radius:30px;display:block}
.hero-floating-card{position:absolute;background:var(--hab-white);border-radius:var(--radius-md);padding:14px 20px;box-shadow:0 12px 40px rgba(37,55,47,.1);z-index:3;animation:float 6s ease-in-out infinite}
.hero-card-1{top:40px;right:-30px}.hero-card-2{bottom:80px;left:-20px;animation-delay:2s}.hero-card-3{top:180px;left:-50px;animation-delay:4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.card-status{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;white-space:nowrap}
.status-dot{width:10px;height:10px;border-radius:50%}.status-green{background:#4CAF50}.status-orange{background:var(--hab-gold)}.status-pink{background:var(--hab-peach)}
/* Sections */
.section-container{max-width:1200px;margin:0 auto}
.section-header{text-align:center;max-width:700px;margin:0 auto 64px}
.section-tag{display:inline-block;background:var(--hab-mint);color:var(--hab-green-deep);padding:6px 18px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:20px;letter-spacing:.5px}
.section-title{font-size:clamp(28px,4vw,42px);margin-bottom:16px;line-height:1.3}
.section-subtitle{font-size:18px;color:#4a6b53;line-height:1.7}
/* Pain */
.pain-section{padding:80px 60px;background:var(--hab-white)}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pain-card{background:var(--hab-cream);border-radius:var(--radius-md);padding:36px 32px;position:relative;overflow:hidden;transition:all .3s}
.pain-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(37,55,47,.08)}
.pain-icon{width:56px;height:56px;background:var(--hab-pink);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:20px}
.pain-card h3{font-size:20px;margin-bottom:12px}.pain-card p{font-size:15px;color:#6b7d73;line-height:1.7}
/* Mid CTA */
.mid-cta{padding:56px 60px;background:var(--hab-mint);text-align:center}
.mid-cta h2{font-size:clamp(24px,3.5vw,36px);margin-bottom:20px;line-height:1.3}
.mid-cta p{font-size:18px;color:#3d5246;font-weight:600;margin-bottom:28px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.7}
/* Features */
.features-section{padding:80px 60px;background:var(--hab-cream)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}
.feature-row:last-child{margin-bottom:0}
.feature-row.reverse{direction:ltr}.feature-row.reverse .feature-text{direction:rtl}
.feature-phone{width:260px;margin:0 auto;background:var(--hab-white);border-radius:36px;padding:10px;box-shadow:0 30px 60px rgba(37,55,47,.12);position:relative;z-index:1}
.feature-phone img{width:100%;border-radius:28px;display:block}
.feature-visual{position:relative}
.feature-bg-shape{position:absolute;width:320px;height:320px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.shape-green{background:var(--hab-mint)}.shape-pink{background:var(--hab-pink)}.shape-peach{background:rgba(232,185,165,.15)}
.feature-tag{display:inline-block;background:var(--hab-mint);color:var(--hab-green-deep);padding:5px 16px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:16px}
.feature-title{font-size:clamp(26px,3.5vw,36px);margin-bottom:20px;line-height:1.3}
.feature-desc{font-size:17px;color:#5a6b63;line-height:1.8;margin-bottom:28px}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.feature-list li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500}
.feature-list-icon{width:32px;height:32px;background:var(--hab-mint);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--hab-green);font-size:16px;flex-shrink:0}
/* More features grid */
.more-features{padding:60px 60px 80px;background:var(--hab-cream)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--hab-white);border-radius:24px;padding:36px 28px;transition:all .3s;border:1px solid transparent}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(37,55,47,.08);border-color:var(--hab-sage)}
.fc-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px}
.fc-green{background:var(--hab-mint)}.fc-pink{background:var(--hab-pink)}.fc-peach{background:#FDF0EB}.fc-gold{background:#F5ECD8}.fc-blue{background:#E8F0F8}
.feature-card h3{font-size:18px;margin-bottom:10px}.feature-card p{font-size:15px;color:#5a6b63;line-height:1.7}
/* How it works */
.how-section{padding:80px 60px;background:var(--hab-green-dark);color:var(--hab-white);position:relative;overflow:hidden}
.how-section::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(circle at top right,rgba(127,155,134,.15),transparent 60%)}
.how-section .section-tag{background:rgba(127,155,134,.2);color:var(--hab-sage)}
.how-section .section-title{color:var(--hab-white)}.how-section .section-subtitle{color:var(--hab-sage)}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;z-index:1}
.how-step{text-align:center;padding:40px 24px;border-radius:var(--radius-md);background:rgba(255,255,255,.05);border:1px solid rgba(177,201,183,.15);transition:all .3s}
.how-step:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.how-step-number{width:56px;height:56px;background:var(--hab-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:0 auto 20px;font-family:'Varela Round',sans-serif}
.how-step h3{font-size:20px;margin-bottom:12px}.how-step p{font-size:15px;color:var(--hab-sage);line-height:1.7}
/* Personas */
.persona-section{padding:80px 60px;background:var(--hab-white)}
.personas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.persona-card{background:var(--hab-cream);border-radius:var(--radius-md);padding:36px;text-align:center;transition:all .3s}
.persona-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(37,55,47,.08)}
.persona-emoji{font-size:48px;margin-bottom:20px}
.persona-role{font-weight:700;font-size:18px;color:var(--hab-green-deep);margin-bottom:14px}
.persona-pain{font-size:15px;color:#5a6b63;line-height:1.8;margin-bottom:16px}
.persona-solve{font-size:15px;color:var(--hab-green-deep);font-weight:600;line-height:1.7}
.persona-solve::before{content:"HAB: ";color:var(--hab-green)}
/* Founder */
.founder-section{padding:60px 60px;background:var(--hab-cream)}
.founder-content{max-width:800px;margin:0 auto;text-align:center;background:var(--hab-white);border-radius:var(--radius-lg);padding:52px 44px;box-shadow:0 20px 60px rgba(37,55,47,.06)}
.founder-story{font-size:18px;line-height:1.9;color:var(--hab-charcoal);margin-bottom:20px}
.founder-name{font-size:16px;font-weight:700;color:var(--hab-green)}.founder-role{font-size:14px;color:#7a8a82}
/* FAQ — V3 NEW */
.faq-section{padding:80px 60px;background:var(--hab-white)}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hab-mint);overflow:hidden}
.faq-question{width:100%;background:none;border:none;padding:24px 0;font-size:18px;font-weight:700;color:var(--hab-charcoal);cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:right;font-family:inherit;line-height:1.5;gap:16px}
.faq-question:hover{color:var(--hab-green)}
.faq-arrow{font-size:20px;color:var(--hab-green);transition:transform .3s;flex-shrink:0;width:24px;text-align:center}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;padding:0 0}
.faq-item.open .faq-answer{max-height:300px;padding:0 0 24px 0}
.faq-answer p{font-size:16px;color:#5a6b63;line-height:1.8}
/* Brand strip */
.brand-strip{padding:48px 0;background:var(--hab-cream);overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.brand-strip-track{display:inline-flex;white-space:nowrap;animation:scroll-strip 35s linear infinite;will-change:transform}
.brand-strip-inner{display:inline-flex;gap:16px;padding-right:16px}
.brand-pill{display:inline-block;background:var(--hab-white);border-radius:50px;padding:14px 28px;font-size:15px;color:var(--hab-charcoal);border:1px solid var(--hab-mint);white-space:nowrap;font-weight:500}
@keyframes scroll-strip{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Final CTA */
.cta-section{padding:80px 60px;background:var(--hab-mint);text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(127,155,134,.2);top:-200px;right:-100px}
.cta-section::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(253,241,244,.5);bottom:-100px;left:-50px}
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto}
.cta-title{font-size:clamp(32px,4.5vw,48px);margin-bottom:20px;line-height:1.3}
.cta-subtitle{font-size:20px;color:#4a6b53;margin-bottom:32px;line-height:1.7}
.cta-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.store-btn{display:inline-flex;align-items:center;gap:14px;background:var(--hab-charcoal);color:var(--hab-white);padding:16px 32px;border-radius:16px;text-decoration:none;transition:all .3s}
.store-btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(37,55,47,.25)}
.store-btn-svg{flex-shrink:0}.store-btn-text{text-align:right}.store-btn-name{font-size:17px;font-weight:700}
.cta-note{margin-top:20px;font-size:14px;color:#6b8b73}
.cta-urgency{display:inline-block;background:rgba(127,155,134,.15);color:var(--hab-green-deep);padding:10px 24px;border-radius:50px;font-size:15px;font-weight:600;margin-top:16px}
/* Sticky mobile CTA — V3 NEW */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:rgba(255,253,248,.95);backdrop-filter:blur(16px);padding:12px 20px;box-shadow:0 -4px 24px rgba(37,55,47,.1);text-align:center;transform:translateY(100%);transition:transform .4s ease}
.sticky-cta.visible{transform:translateY(0)}
.sticky-cta .btn-primary{width:100%;max-width:360px;justify-content:center;padding:14px 28px;font-size:17px}
.sticky-cta-sub{font-size:12px;color:#7a8a82;margin-top:6px}
/* Footer */
.footer{background:var(--hab-green-dark);color:var(--hab-sage);padding:60px 60px 30px}
.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand-tagline{font-size:14px;color:var(--hab-sage);margin-bottom:20px}
.footer-brand p{font-size:15px;line-height:1.7;max-width:320px;color:#6b8b70}
.footer-col h4{color:var(--hab-white);font-size:16px;margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col a{color:#6b8b70;text-decoration:none;font-size:15px;transition:color .3s}.footer-col a:hover{color:var(--hab-white)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(177,201,183,.15);display:flex;justify-content:space-between;align-items:center;font-size:14px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--hab-sage);text-decoration:none;font-size:18px;transition:all .3s}
.footer-social a:hover{background:var(--hab-green);color:var(--hab-white)}
/* Animation */
.js-animated{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}.js-animated.visible{opacity:1;transform:translateY(0)}
/* Responsive */
@media(max-width:1024px){.hero-content{grid-template-columns:1fr;gap:32px;text-align:center}.hero{padding-top:100px;padding-bottom:48px}.hero-text{max-width:100%}.hero-actions,.hero-trust{justify-content:center}.hero-visual{order:1}.hero-phone-frame{width:200px}.hero-floating-card{display:none}.pain-grid,.features-grid,.personas-grid{grid-template-columns:1fr;max-width:500px;margin-left:auto;margin-right:auto}.feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:40px;direction:rtl}.feature-row.reverse .feature-text{direction:rtl}.how-steps{grid-template-columns:repeat(2,1fr)}.footer-content{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.nav{padding:12px 20px}.nav-links{display:none}.nav-links.open{display:flex;position:fixed;top:56px;right:0;left:0;background:rgba(255,253,248,.98);flex-direction:column;padding:24px;gap:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);z-index:99}.mobile-menu-btn{display:block}.hero{padding:90px 24px 40px}.hero-phone-frame{width:180px}.hero-content{gap:24px}.pain-section,.features-section,.more-features,.how-section,.persona-section,.cta-section,.founder-section,.mid-cta,.faq-section{padding:56px 24px}.how-steps{grid-template-columns:1fr}.footer{padding:40px 24px 20px}.footer-content{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:16px;text-align:center}.hero-trust{flex-direction:column;gap:12px;align-items:center}.cta-buttons{flex-direction:column;align-items:center}.brand-pill{padding:10px 20px;font-size:13px}.section-header{margin-bottom:40px}.pain-card{padding:28px 24px}.feature-phone{width:200px}.store-btn{padding:14px 28px;width:100%;max-width:280px;justify-content:center}.hero-title{font-size:30px}.hero-subtitle{font-size:16px}.btn-primary,.btn-secondary{padding:14px 28px;font-size:16px;width:100%;justify-content:center;text-align:center}.hero-actions{flex-direction:column;width:100%;max-width:320px;margin:0 auto}.founder-content{padding:36px 24px}.founder-story{font-size:16px}.sticky-cta{display:block}.footer{padding-bottom:90px}}
}

/* ===== Mobile (up to 767px) ===== */
@media (max-width:767.98px){
:root{--hab-green:#7F9B86;--hab-green-dark:#25372F;--hab-green-deep:#3D6A5D;--hab-sage:#B1C9B7;--hab-mint:#EAF3EE;--hab-cream:#FFFDF8;--hab-pink:#FDF1F4;--hab-peach:#E8B9A5;--hab-gold:#DCC696;--hab-charcoal:#25372F;--hab-white:#FFF;--radius-sm:12px;--radius-md:20px;--radius-lg:32px}
*{margin:0;padding:0;box-sizing:border-box}html,body{overflow-x:hidden;height:auto}
body{font-family:'Assistant','Varela Round',sans-serif;background:var(--hab-cream);color:var(--hab-charcoal);line-height:1.7;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:'Varela Round','Assistant',sans-serif;font-weight:700}
/* Nav */
.nav{position:fixed;top:0;right:0;left:0;z-index:100;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;transition:all .4s}
.nav.scrolled{background:rgba(255,253,248,.92);backdrop-filter:blur(20px);box-shadow:0 2px 40px rgba(37,55,47,.06)}
.nav-logo img{height:36px;width:auto}
.nav-links{display:none;list-style:none}
.nav-links.open{display:flex;position:fixed;top:56px;right:0;left:0;background:rgba(255,253,248,.98);flex-direction:column;padding:24px;gap:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);z-index:99}
.nav-links a{text-decoration:none;color:var(--hab-charcoal);font-weight:600;font-size:15px;transition:color .3s}
.nav-links a:hover{color:var(--hab-green)}
.nav-cta{background:var(--hab-green);animation:nav-glow 3s ease-in-out infinite;color:#fff!important;padding:10px 28px;border-radius:50px;font-weight:700!important}
.nav-cta:hover{background:var(--hab-green-deep)!important;transform:translateY(-2px)}
@keyframes nav-glow{0%,100%{box-shadow:0 0 0 0 rgba(127,155,134,0)}50%{box-shadow:0 0 0 6px rgba(127,155,134,.25)}}
.mobile-menu-btn{display:block;background:none;border:none;cursor:pointer;padding:8px}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--hab-charcoal);margin:6px 0;border-radius:2px}
/* Hero */
.hero{min-height:auto;display:flex;align-items:center;padding:88px 20px 40px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-120px;left:-120px;width:360px;height:360px;background:radial-gradient(circle,var(--hab-mint) 0%,transparent 70%);opacity:.6;z-index:0}
.hero::after{content:'';position:absolute;bottom:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,var(--hab-pink) 0%,transparent 70%);opacity:.5;z-index:0}
.hero-content{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center;position:relative;z-index:1;width:100%}
.hero-text{max-width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--hab-mint);color:var(--hab-green-deep);padding:8px 18px;border-radius:50px;font-size:13px;font-weight:600;margin-bottom:20px}
.hero-badge-dot{width:8px;height:8px;background:var(--hab-green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hero-title{font-size:28px;line-height:1.3;color:var(--hab-charcoal);margin-bottom:16px}
.hero-title-highlight{color:var(--hab-green)}
.hero-subtitle{font-size:16px;color:#3d5246;line-height:1.75;margin-bottom:24px;font-weight:500}
.hero-subtitle strong{color:var(--hab-charcoal)}
.hero-actions{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:320px;margin:0 auto}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--hab-green);color:#fff;padding:14px 28px;border-radius:50px;font-size:17px;font-weight:700;text-decoration:none;transition:all .3s;border:none;cursor:pointer;font-family:inherit;width:100%;text-align:center}
.btn-primary:hover{background:var(--hab-green-deep);transform:translateY(-2px);box-shadow:0 12px 40px rgba(127,155,134,.3)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;color:var(--hab-charcoal);padding:14px 28px;border-radius:50px;font-size:17px;font-weight:600;text-decoration:none;transition:all .3s;border:2px solid var(--hab-sage);width:100%;text-align:center}
.btn-secondary:hover{border-color:var(--hab-green);color:var(--hab-green);transform:translateY(-2px)}
.hero-trust{display:flex;flex-direction:column;gap:10px;margin-top:20px;align-items:center}
.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#6b7d73;font-weight:500}
.hero-trust-icon{color:var(--hab-green);font-size:16px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;order:1}
.hero-phone-frame{width:200px;background:var(--hab-white);border-radius:36px;padding:8px;box-shadow:0 30px 60px rgba(37,55,47,.12),0 0 0 1px rgba(127,155,134,.1);position:relative;z-index:2}
.hero-phone-frame img{width:100%;border-radius:28px;display:block}
.hero-floating-card{display:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.card-status{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;white-space:nowrap}
.status-dot{width:10px;height:10px;border-radius:50%}.status-green{background:#4CAF50}.status-orange{background:var(--hab-gold)}.status-pink{background:var(--hab-peach)}
/* Sections */
.section-container{max-width:1200px;margin:0 auto}
.section-header{text-align:center;max-width:700px;margin:0 auto 40px}
.section-tag{display:inline-block;background:var(--hab-mint);color:var(--hab-green-deep);padding:6px 18px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:16px;letter-spacing:.5px}
.section-title{font-size:26px;margin-bottom:14px;line-height:1.3}
.section-subtitle{font-size:16px;color:#4a6b53;line-height:1.7}
/* Pain */
.pain-section{padding:48px 20px;background:var(--hab-white)}
.pain-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:500px;margin:0 auto}
.pain-card{background:var(--hab-cream);border-radius:var(--radius-md);padding:28px 24px;position:relative;overflow:hidden;transition:all .3s}
.pain-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(37,55,47,.08)}
.pain-icon{width:48px;height:48px;background:var(--hab-pink);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.pain-card h3{font-size:18px;margin-bottom:10px}.pain-card p{font-size:15px;color:#6b7d73;line-height:1.7}
/* Mid CTA */
.mid-cta{padding:44px 20px;background:var(--hab-mint);text-align:center}
.mid-cta h2{font-size:24px;margin-bottom:16px;line-height:1.35}
.mid-cta p{font-size:16px;color:#3d5246;font-weight:600;margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.7}
/* Features */
.features-section{padding:48px 20px;background:var(--hab-cream)}
.feature-row{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;margin-bottom:56px}
.feature-row:last-child{margin-bottom:0}
.feature-row.reverse{direction:rtl}.feature-row.reverse .feature-text{direction:rtl}
.feature-phone{width:200px;margin:0 auto;background:var(--hab-white);border-radius:32px;padding:8px;box-shadow:0 24px 48px rgba(37,55,47,.1);position:relative;z-index:1}
.feature-phone img{width:100%;border-radius:24px;display:block}
.feature-visual{position:relative}
.feature-bg-shape{position:absolute;width:260px;height:260px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.shape-green{background:var(--hab-mint)}.shape-pink{background:var(--hab-pink)}.shape-peach{background:rgba(232,185,165,.15)}
.feature-tag{display:inline-block;background:var(--hab-mint);color:var(--hab-green-deep);padding:5px 16px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:14px}
.feature-title{font-size:24px;margin-bottom:16px;line-height:1.3}
.feature-desc{font-size:16px;color:#5a6b63;line-height:1.75;margin-bottom:24px}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.feature-list li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.feature-list-icon{width:28px;height:28px;background:var(--hab-mint);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--hab-green);font-size:14px;flex-shrink:0}
/* More features grid */
.more-features{padding:48px 20px 56px;background:var(--hab-cream)}
.features-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:500px;margin:0 auto}
.feature-card{background:var(--hab-white);border-radius:20px;padding:28px 24px;transition:all .3s;border:1px solid transparent}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(37,55,47,.08);border-color:var(--hab-sage)}
.fc-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.fc-green{background:var(--hab-mint)}.fc-pink{background:var(--hab-pink)}.fc-peach{background:#FDF0EB}.fc-gold{background:#F5ECD8}.fc-blue{background:#E8F0F8}
.feature-card h3{font-size:17px;margin-bottom:8px}.feature-card p{font-size:14px;color:#5a6b63;line-height:1.7}
/* How it works */
.how-section{padding:48px 20px;background:var(--hab-green-dark);color:var(--hab-white);position:relative;overflow:hidden}
.how-section::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(circle at top right,rgba(127,155,134,.15),transparent 60%)}
.how-section .section-tag{background:rgba(127,155,134,.2);color:var(--hab-sage)}
.how-section .section-title{color:var(--hab-white)}.how-section .section-subtitle{color:var(--hab-sage)}
.how-steps{display:grid;grid-template-columns:1fr;gap:20px;position:relative;z-index:1}
.how-step{text-align:center;padding:32px 20px;border-radius:var(--radius-md);background:rgba(255,255,255,.05);border:1px solid rgba(177,201,183,.15);transition:all .3s}
.how-step:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.how-step-number{width:48px;height:48px;background:var(--hab-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin:0 auto 16px;font-family:'Varela Round',sans-serif}
.how-step h3{font-size:18px;margin-bottom:10px}.how-step p{font-size:14px;color:var(--hab-sage);line-height:1.7}
/* Personas */
.persona-section{padding:48px 20px;background:var(--hab-white)}
.personas-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:500px;margin:0 auto}
.persona-card{background:var(--hab-cream);border-radius:var(--radius-md);padding:32px 24px;text-align:center;transition:all .3s}
.persona-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(37,55,47,.08)}
.persona-emoji{font-size:44px;margin-bottom:16px}
.persona-role{font-weight:700;font-size:17px;color:var(--hab-green-deep);margin-bottom:12px}
.persona-pain{font-size:14px;color:#5a6b63;line-height:1.75;margin-bottom:14px}
.persona-solve{font-size:14px;color:var(--hab-green-deep);font-weight:600;line-height:1.7}
.persona-solve::before{content:"HAB: ";color:var(--hab-green)}
/* Founder */
.founder-section{padding:48px 20px;background:var(--hab-cream)}
.founder-content{max-width:800px;margin:0 auto;text-align:center;background:var(--hab-white);border-radius:var(--radius-lg);padding:36px 24px;box-shadow:0 20px 60px rgba(37,55,47,.06)}
.founder-story{font-size:16px;line-height:1.85;color:var(--hab-charcoal);margin-bottom:20px}
.founder-name{font-size:16px;font-weight:700;color:var(--hab-green)}.founder-role{font-size:14px;color:#7a8a82}
/* FAQ */
.faq-section{padding:48px 20px;background:var(--hab-white)}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hab-mint);overflow:hidden}
.faq-question{width:100%;background:none;border:none;padding:20px 0;font-size:16px;font-weight:700;color:var(--hab-charcoal);cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:right;font-family:inherit;line-height:1.5;gap:12px}
.faq-question:hover{color:var(--hab-green)}
.faq-arrow{font-size:18px;color:var(--hab-green);transition:transform .3s;flex-shrink:0;width:24px;text-align:center}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;padding:0 0}
.faq-item.open .faq-answer{max-height:300px;padding:0 0 20px 0}
.faq-answer p{font-size:15px;color:#5a6b63;line-height:1.8}
/* Brand strip */
.brand-strip{padding:36px 0;background:var(--hab-cream);overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.brand-strip-track{display:inline-flex;white-space:nowrap;animation:scroll-strip 30s linear infinite;will-change:transform}
.brand-strip-inner{display:inline-flex;gap:12px;padding-right:12px}
.brand-pill{display:inline-block;background:var(--hab-white);border-radius:50px;padding:10px 20px;font-size:13px;color:var(--hab-charcoal);border:1px solid var(--hab-mint);white-space:nowrap;font-weight:500}
@keyframes scroll-strip{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Final CTA */
.cta-section{padding:56px 20px;background:var(--hab-mint);text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(127,155,134,.2);top:-120px;right:-60px}
.cta-section::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(253,241,244,.5);bottom:-60px;left:-30px}
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto}
.cta-title{font-size:28px;margin-bottom:16px;line-height:1.3}
.cta-subtitle{font-size:17px;color:#4a6b53;margin-bottom:28px;line-height:1.7}
.cta-buttons{display:flex;flex-direction:column;gap:16px;align-items:center}
.store-btn{display:inline-flex;align-items:center;gap:14px;background:var(--hab-charcoal);color:var(--hab-white);padding:14px 28px;border-radius:16px;text-decoration:none;transition:all .3s;width:100%;max-width:280px;justify-content:center}
.store-btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(37,55,47,.25)}
.store-btn-svg{flex-shrink:0}.store-btn-text{text-align:right}.store-btn-name{font-size:17px;font-weight:700}
.cta-note{margin-top:16px;font-size:14px;color:#6b8b73}
.cta-urgency{display:inline-block;background:rgba(127,155,134,.15);color:var(--hab-green-deep);padding:10px 20px;border-radius:50px;font-size:14px;font-weight:600;margin-top:14px}
/* Sticky mobile CTA */
.sticky-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:99;background:rgba(255,253,248,.95);backdrop-filter:blur(16px);padding:12px 20px;box-shadow:0 -4px 24px rgba(37,55,47,.1);text-align:center;transform:translateY(100%);transition:transform .4s ease}
.sticky-cta.visible{transform:translateY(0)}
.sticky-cta .btn-primary{width:100%;max-width:360px;justify-content:center;padding:14px 28px;font-size:17px}
.sticky-cta-sub{font-size:12px;color:#7a8a82;margin-top:6px}
/* Footer */
.footer{background:var(--hab-green-dark);color:var(--hab-sage);padding:40px 20px 90px}
.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:36px}
.footer-brand-tagline{font-size:14px;color:var(--hab-sage);margin-bottom:16px}
.footer-brand p{font-size:14px;line-height:1.7;max-width:320px;color:#6b8b70}
.footer-col h4{color:var(--hab-white);font-size:16px;margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col a{color:#6b8b70;text-decoration:none;font-size:15px;transition:color .3s}.footer-col a:hover{color:var(--hab-white)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:20px;border-top:1px solid rgba(177,201,183,.15);display:flex;flex-direction:column;gap:16px;text-align:center;font-size:14px}
.footer-social{display:flex;gap:12px;justify-content:center}
.footer-social a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--hab-sage);text-decoration:none;font-size:18px;transition:all .3s}
.footer-social a:hover{background:var(--hab-green);color:var(--hab-white)}
/* Animation */
.js-animated{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(.16,1,.3,1)}.js-animated.visible{opacity:1;transform:translateY(0)}
/* Desktop scale-up */
@media(min-width:768px){
.nav{padding:16px 40px}
.nav-links{display:flex;gap:32px;align-items:center;position:static;background:none;flex-direction:row;padding:0;box-shadow:none}
.mobile-menu-btn{display:none}
.hero{padding:110px 60px 60px}
.hero-content{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;text-align:right}
.hero-text{max-width:580px}
.hero-title{font-size:clamp(32px,4.5vw,50px);line-height:1.25}
.hero-subtitle{font-size:19px;line-height:1.8}
.hero-actions{flex-direction:row;width:auto;max-width:none}
.btn-primary,.btn-secondary{width:auto;padding:16px 36px;font-size:18px}
.hero-trust{flex-direction:row;gap:24px}
.hero-visual{order:0}
.hero-phone-frame{width:260px;border-radius:40px;padding:10px;box-shadow:0 40px 80px rgba(37,55,47,.15),0 0 0 1px rgba(127,155,134,.1)}
.hero-floating-card{display:block;position:absolute;background:var(--hab-white);border-radius:var(--radius-md);padding:14px 20px;box-shadow:0 12px 40px rgba(37,55,47,.1);z-index:3;animation:float 6s ease-in-out infinite}
.hero-card-1{top:40px;right:-30px}.hero-card-2{bottom:80px;left:-20px;animation-delay:2s}.hero-card-3{top:180px;left:-50px;animation-delay:4s}
.pain-section,.features-section,.more-features,.how-section,.persona-section,.cta-section,.founder-section,.mid-cta,.faq-section{padding:80px 60px}
.section-header{margin-bottom:64px}
.section-title{font-size:clamp(28px,4vw,42px)}
.pain-grid{grid-template-columns:repeat(3,1fr);gap:28px;max-width:none}
.pain-card{padding:36px 32px}
.pain-icon{width:56px;height:56px;font-size:28px}
.pain-card h3{font-size:20px}
.mid-cta h2{font-size:clamp(24px,3.5vw,36px)}
.mid-cta p{font-size:18px}
.feature-row{grid-template-columns:1fr 1fr;gap:80px;margin-bottom:80px}
.feature-phone{width:260px;border-radius:36px;padding:10px;box-shadow:0 30px 60px rgba(37,55,47,.12)}
.feature-bg-shape{width:320px;height:320px}
.feature-title{font-size:clamp(26px,3.5vw,36px)}
.feature-desc{font-size:17px}
.feature-list li{font-size:16px}
.feature-list-icon{width:32px;height:32px;border-radius:10px;font-size:16px}
.features-grid{grid-template-columns:repeat(3,1fr);gap:24px;max-width:none}
.feature-card{padding:36px 28px;border-radius:24px}
.fc-icon{width:56px;height:56px;font-size:26px}
.feature-card h3{font-size:18px}
.feature-card p{font-size:15px}
.how-steps{grid-template-columns:repeat(4,1fr);gap:32px}
.how-step{padding:40px 24px}
.how-step-number{width:56px;height:56px;font-size:24px}
.how-step h3{font-size:20px}.how-step p{font-size:15px}
.personas-grid{grid-template-columns:repeat(3,1fr);gap:28px;max-width:none}
.persona-card{padding:36px}
.persona-emoji{font-size:48px}
.persona-role{font-size:18px}
.persona-pain,.persona-solve{font-size:15px}
.founder-content{padding:52px 44px}
.founder-story{font-size:18px}
.faq-question{padding:24px 0;font-size:18px}
.brand-pill{padding:14px 28px;font-size:15px}
.cta-title{font-size:clamp(32px,4.5vw,48px)}
.cta-subtitle{font-size:20px}
.cta-buttons{flex-direction:row;justify-content:center}
.store-btn{width:auto;max-width:none;padding:16px 32px}
.sticky-cta{display:none}
.footer{padding:60px 60px 30px}
.footer-content{grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-bottom{flex-direction:row;justify-content:space-between;text-align:right}
}
}

/* ===== WordPress admin bar offset for the fixed nav (logged-in users only) ===== */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
@media (max-width:600px){#wpadminbar{position:fixed}}