/* Critical CSS for Above-the-Fold Content (Homepage) */
/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;color:#3b3d3a;background-color:#f8f6f4;overflow-x:hidden}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.header{background:linear-gradient(135deg,#f8f6f4 0%,#ffffff 100%);box-shadow:0 2px 15px rgba(59,61,58,0.1);position:fixed;top:0;width:100%;z-index:1000;border-bottom:2px solid #b6886e;backdrop-filter:blur(10px)}
.navbar{padding:1.2rem 0}
.navbar .container{display:flex;justify-content:space-between;align-items:center;position:relative;gap:4rem}
.nav-brand{display:flex;align-items:center;gap:.75rem;margin-right:2rem}
.logo{height:60px;width:auto;object-fit:contain}
.business-name-header{font-family:"Dancing Script",cursive;font-size:1.8rem;font-weight:700;color:#3b3d3a;white-space:nowrap}
.nav-menu{display:flex;list-style:none;gap:2rem;padding:0;align-items:center;margin:0 0 0 auto}
.nav-link{text-decoration:none;color:#3b3d3a;font-weight:500;position:relative;padding:.5rem 0;display:block;font-size:.9rem}
.hamburger{display:none;flex-direction:column;cursor:pointer;padding:.5rem}
.bar{width:25px;height:3px;background-color:#3b3d3a;margin:3px 0;transition:all 0.3s ease}

/* Hero Section */
.hero{min-height:calc(100vh - 120px);display:flex;align-items:flex-start;justify-content:center;background-image:linear-gradient(135deg,rgba(248,246,244,.85)0,rgba(248,246,244,.8)100%),url(/assets/img-opt/training-dog-background-1440.webp)!important;background-size:cover!important;background-position:center!important;background-attachment:fixed!important;background-repeat:no-repeat!important;margin-top:80px;padding:3rem 0}
.hero-content{text-align:center;position:relative;z-index:10;padding-top:1rem}
.hero-title{font-size:3.5rem;font-weight:700;color:#3b3d3a;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.1)}
.hero-subtitle{font-size:1.5rem;color:#4a5658;margin-bottom:2rem;font-weight:300}
.cta-buttons{display:flex;gap:1.5rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.doggie-dashboard-btn{display:inline-block;transition:transform .3s ease,box-shadow .3s ease;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.doggie-dashboard-btn img{width:220px;height:auto;display:block;border-radius:8px}
.secondary-cta{display:flex;justify-content:center;margin-bottom:2rem}
.call-button{display:inline-flex;align-items:center;gap:.5rem;padding:12px 24px;background:linear-gradient(135deg,#4a90e2 0,#357abd 100%);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:16px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.2);min-width:200px;justify-content:center}
.hero-subtext{font-size:1.1rem;color:#4a5658;max-width:600px;margin:0 auto;line-height:1.8}
.hero-features{display:flex;justify-content:center;gap:30px;margin:30px 0;flex-wrap:wrap}
.feature-item{display:flex;align-items:center;gap:8px;color:#3b3d3a;font-size:14px;font-weight:600;background:rgba(255,255,255,.8);padding:8px 16px;border-radius:20px;border:2px solid #b6886e}

/* Critical Font Faces */
.business-name{font-family:"Dancing Script",cursive;font-weight:700;color:#3b3d3a;font-size:1.1em}

/* Mobile Critical */
@media (max-width:768px){
.nav-menu{display:none;position:absolute;top:70px;left:0;width:100%;background-color:#fff;flex-direction:column;padding:1rem;box-shadow:0 2px 10px rgba(59,61,58,0.1)}
.nav-menu.active{display:flex}
.hamburger{display:flex}
.hero-title{font-size:2.5rem}
.hero-subtitle{font-size:1.2rem}
.cta-buttons{flex-direction:column;align-items:center;gap:1rem}
.doggie-dashboard-btn img{width:180px}
}