/* RESPONSIVE ARCHITECTURE - STRICT SEPARATION */

/* MOBILE BASE - Hide desktop nav, show mobile hamburger */
.desktop-nav{display:none}
.desktop-auth{display:none}
.mobile-menu-btn{display:block;padding:0.5rem;border:none;background:none;cursor:pointer}
.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999}
.mobile-menu-panel{position:absolute;top:0;right:0;width:80%;max-width:20rem;height:100%;background:white;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);padding:1.5rem;overflow-y:auto}

/* DESKTOP (1024px+) - Show desktop nav, hide mobile hamburger */
@media(min-width:1024px){
.desktop-nav{display:flex;align-items:center;gap:0.5rem}
.desktop-auth{display:flex;align-items:center;gap:1rem}
.mobile-menu-btn{display:none}
}

/* CONTAINER RESPONSIVE */
.container{max-width:100%;padding:0 1rem;margin:0 auto}
@media(min-width:768px){.container{max-width:720px;padding:0 1.5rem}}
@media(min-width:1024px){.container{max-width:1200px;padding:0 2rem}}
@media(min-width:1280px){.container{max-width:1280px}}
@media(min-width:1536px){.container{max-width:1400px}}

/* SECTION SPACING */
.section{padding:3rem 0}
@media(min-width:768px){.section{padding:4rem 0}}
@media(min-width:1024px){.section{padding:6rem 0}}

/* HERO SECTION */
.section-hero{min-height:auto;padding:4rem 0}
@media(min-width:768px){.section-hero{padding:5rem 0}}
@media(min-width:1024px){.section-hero{min-height:85vh;padding:8rem 0;display:flex;align-items:center}}

/* LOGO RESPONSIVE */
.logo-img{height:2rem;width:auto;max-width:150px}
@media(min-width:768px){.logo-img{height:2.25rem;max-width:180px}}
@media(min-width:1024px){.logo-img{height:2.5rem;max-width:200px}}

/* HERO TYPOGRAPHY */
.hero-title{font-size:2rem;line-height:1.2}
.hero-emphasis{font-size:2rem}
.hero-subtitle{font-size:1rem;line-height:1.6;margin-bottom:2rem}
@media(min-width:768px){
.hero-title{font-size:2.5rem}
.hero-emphasis{font-size:2.5rem}
.hero-subtitle{font-size:1.125rem}
}
@media(min-width:1024px){
.hero-title{font-size:4rem;line-height:1.1;letter-spacing:-0.02em;margin-bottom:2rem}
.hero-emphasis{font-size:4rem}
.hero-subtitle{font-size:1.5rem;line-height:1.7;max-width:56rem;margin-bottom:3.5rem}
}
@media(min-width:1280px){
.hero-title{font-size:4.5rem}
.hero-emphasis{font-size:4.5rem}
.hero-subtitle{font-size:1.625rem}
}

/* BUTTONS */
.btn-lg{padding:0.875rem 1.5rem;font-size:1rem}
@media(min-width:1024px){
.btn-lg{padding:1.125rem 2.5rem;font-size:1.125rem}
.btn-hero-primary,.btn-hero-secondary{min-width:200px}
}

/* FEATURE CARDS */
.feature-card-enhanced{padding:1.5rem}
.icon-container{width:3rem;height:3rem;margin-bottom:1rem}
.icon-container svg{width:1.5rem;height:1.5rem}
@media(min-width:768px){
.feature-card-enhanced{padding:2rem}
}
@media(min-width:1024px){
.feature-card-enhanced{padding:3rem;min-height:320px}
.icon-container{width:4.5rem;height:4.5rem;margin-bottom:2rem}
.icon-container svg{width:2.25rem;height:2.25rem}
}

/* PERSONA CARDS */
.persona-card{padding:1.5rem}
.persona-icon{width:4rem;height:4rem}
.persona-icon svg{width:2rem;height:2rem}
@media(min-width:768px){.persona-card{padding:2rem}}
@media(min-width:1024px){
.persona-card{padding:3rem 2rem;min-height:280px}
.persona-icon{width:5.5rem;height:5.5rem;margin-bottom:2rem}
.persona-icon svg{width:2.75rem;height:2.75rem}
}

/* TRUST BADGES */
.trust-badge{padding:1.5rem;flex-direction:column}
.trust-icon{width:3rem;height:3rem}
@media(min-width:1024px){
.trust-badge{padding:3rem 2.5rem;min-height:240px}
.trust-icon{width:3.5rem;height:3.5rem}
}

/* FAQ */
.faq-header{padding:1.25rem 1rem;font-size:1rem}
.faq-content-inner{padding:0 1rem 1.25rem}
@media(min-width:768px){
.faq-header{padding:1.5rem 1.5rem;font-size:1.0625rem}
.faq-content-inner{padding:0 1.5rem 1.5rem}
}
@media(min-width:1024px){
.faq-header{padding:2rem 2.5rem;font-size:1.25rem}
.faq-content-inner{padding:0 2.5rem 2rem;font-size:1.0625rem;line-height:1.8}
}

/* TYPOGRAPHY */
h2{font-size:1.875rem;margin-bottom:1rem}
h3{font-size:1.25rem}
@media(min-width:1024px){
h2{font-size:2.75rem;margin-bottom:1.5rem}
h3{font-size:1.5rem}
.text-gray-600{font-size:1.125rem;line-height:1.8}
}

/* GRID */
.grid{display:grid;gap:1.5rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:768px){
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-8{gap:2rem}
}
@media(min-width:1024px){
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-8{gap:2.5rem}
}

/* NAVIGATION */
.nav-modern{height:4rem;position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid #f3f4f6;padding:0.75rem 0}
@media(min-width:1024px){.nav-modern{height:5rem;padding:1rem 0}}

/* FOOTER */
footer{padding:3rem 0 2rem}
@media(min-width:1024px){
footer{padding:5rem 0 3rem}
footer .logo-img{height:2rem}
}

/* UTILITIES */
.text-center{text-align:center}
.mb-12{margin-bottom:3rem}
@media(min-width:1024px){.mb-12{margin-bottom:4rem}}
.max-w-4xl{max-width:56rem;margin-left:auto;margin-right:auto}
@media(min-width:1024px){.max-w-4xl{max-width:64rem}}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.justify-center{justify-content:center}
.items-center{align-items:center}
.gap-4{gap:1rem}
@media(min-width:1024px){.gap-4{gap:1.5rem}}
.gap-6{gap:1.5rem}
@media(min-width:1024px){.gap-6{gap:2rem}}