/* ProvaDent - Ultra Optimized CSS */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,sans-serif;line-height:1.6;color:#333;background:#f9f9f9;padding-top:80px}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
a{text-decoration:none}

/* Navigation */
nav{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.98);box-shadow:0 2px 10px rgba(0,0,0,0.1);z-index:1000;padding:15px 0}
nav .container{display:flex;justify-content:space-between;align-items:center}
nav .logo{font-size:1.5em;font-weight:bold;color:#667eea}
nav ul{display:flex;list-style:none;gap:15px;align-items:center}
nav ul li a{color:#333;font-weight:500;padding:8px 10px;transition:color 0.3s;font-size:0.95em}
nav ul li a:hover{color:#667eea}
.nav-cta{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff!important;padding:10px 20px!important;border-radius:25px;font-weight:bold;box-shadow:0 3px 10px rgba(255,107,107,0.4);transition:all 0.3s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(255,107,107,0.6)}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.8em;color:#667eea;cursor:pointer;padding:5px}

/* Mobile CTA Bar */
.mobile-cta-bar{display:none;position:fixed;top:70px;left:0;right:0;z-index:999;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);padding:10px 15px;box-shadow:0 4px 12px rgba(255,107,107,0.5)}
.mobile-cta-button{display:block;text-align:center;background:#fff;color:#ff6b6b;padding:14px 20px;border-radius:25px;font-weight:bold;font-size:1em;box-shadow:0 3px 8px rgba(0,0,0,0.15);letter-spacing:0.5px}

/* Header */
header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px 0;text-align:center}
h1{font-size:2.5em;margin-bottom:10px}
.subtitle{font-size:1.2em;opacity:0.95}

/* Hero */
.hero{background:#fff;padding:40px 0}
.hero .container{display:flex;align-items:center;gap:50px;flex-wrap:nowrap}
.hero-left{flex:0 0 45%;max-width:45%;display:flex;justify-content:center;align-items:center}
.hero-right{flex:1;max-width:55%}
.hero-image{max-width:100%;height:auto;display:block}
.rating{font-size:1.3em;color:#ffa500;margin:15px 0;text-align:left}
.hero h2{font-size:2em;color:#333;margin:20px 0;text-align:left}
.hero p{font-size:1.1em;line-height:1.8;text-align:left}

/* CTA Button */
.cta-button{display:inline-block;background:#ff6b6b;color:#fff;padding:16px 40px;border-radius:50px;font-size:1.2em;font-weight:bold;margin:15px 0;transition:all 0.3s;box-shadow:0 4px 12px rgba(255,107,107,0.4)}
.cta-button:hover{background:#ff5252;transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,107,107,0.6)}

/* Sections */
.section{background:#fff;margin:30px 0;padding:40px;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
h2{color:#667eea;font-size:2em;margin-bottom:20px;border-bottom:3px solid #667eea;padding-bottom:10px}
h3{color:#764ba2;font-size:1.4em;margin:20px 0 15px}
p{margin:15px 0;line-height:1.8}

/* Benefits Grid */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin:30px 0}
.benefit-card{background:#f8f9fa;padding:25px;border-radius:10px;border-left:4px solid #667eea;transition:transform 0.3s}
.benefit-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,0.1)}
.benefit-icon{font-size:2.5em;margin-bottom:10px}

/* Tables */
table{width:100%;border-collapse:collapse;margin:25px 0;overflow-x:auto;display:block}
@media(min-width:769px){table{display:table}}
thead{background:#667eea;color:#fff}
th,td{padding:15px;text-align:left;border-bottom:1px solid #ddd}
th{font-weight:bold}
tr:hover{background:#f5f5f5}

/* Reviews */
.review-card{background:#f8f9fa;padding:20px;margin:20px 0;border-radius:10px;border-left:5px solid #ffa500}
.reviewer-name{font-weight:bold;color:#667eea;font-size:1.1em}
.review-stars{color:#ffa500;font-size:1.2em;margin:5px 0}

/* FAQ */
.faq-item{background:#f8f9fa;padding:20px;margin:15px 0;border-radius:8px;border-left:4px solid:#764ba2}
.faq-question{font-weight:bold;color:#333;font-size:1.1em;margin-bottom:10px}
.faq-answer{color:#555}

/* Pricing */
.price-table{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:10px;padding:30px;margin:30px 0;text-align:center}
.price{font-size:3em;font-weight:bold;margin:20px 0}
.guarantee-badge{background:#4caf50;color:#fff;padding:12px 25px;border-radius:50px;display:inline-block;margin:20px 0;font-weight:bold}

/* Pros/Cons */
.pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin:30px 0}
.pros{background:#e8f5e9;padding:25px;border-radius:10px;border-left:5px solid #4caf50}
.cons{background:#ffebee;padding:25px;border-radius:10px;border-left:5px solid #f44336}
ul{padding-left:25px}
li{margin:10px 0}

/* Highlight Boxes */
.highlight-box{background:#e3f2fd;border-left:5px solid #2196f3;padding:20px;margin:25px 0;border-radius:5px}
.ingredient-card{background:#fff;padding:20px;margin:15px 0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}

/* Footer */
footer{background:#333;color:#fff;text-align:center;padding:30px 0;margin-top:50px}
footer a{color:#fff}
.disclaimer{font-size:0.85em;opacity:0.8;max-width:900px;margin:20px auto}

/* Tablet Responsive (768px - 1024px) */
@media(max-width:1024px){
.container{padding:0 20px}
h1{font-size:2.2em}
h2{font-size:1.8em}
.benefits-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.hero-left{flex:0 0 40%;max-width:40%}
.hero-right{flex:1;max-width:60%}
}

/* Mobile Responsive (max-width: 768px) */
@media(max-width:768px){
body{padding-top:140px}
nav{padding:12px 0}
nav .logo{font-size:1.3em}
.mobile-menu-btn{display:block}
.desktop-only{display:none!important}
nav ul{position:fixed;top:140px;left:-100%;width:100%;max-height:calc(100vh - 140px);background:#fff;flex-direction:column;gap:0;padding:0;margin:0;transition:left 0.3s ease;overflow-y:auto;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
nav ul.active{left:0}
nav ul li{width:100%;border-bottom:1px solid #eee}
nav ul li a{display:block;padding:15px 20px;width:100%}
.mobile-cta-bar{display:block}
.hero .container{flex-direction:column;text-align:center;flex-wrap:wrap}
.hero-left{order:1;flex:0 0 100%;max-width:100%}
.hero-right{order:2;flex:0 0 100%;max-width:100%}
.rating{text-align:center}
.hero h2{text-align:center}
.hero p{text-align:center}
h1{font-size:1.8em}
h2{font-size:1.5em}
h3{font-size:1.2em}
.subtitle{font-size:1em}
.section{padding:25px 15px;margin:20px 0}
.cta-button{padding:14px 30px;font-size:1.1em}
.benefits-grid{grid-template-columns:1fr;gap:15px}
.benefit-card{padding:20px}
.pros-cons{grid-template-columns:1fr}
table{font-size:0.9em}
th,td{padding:10px 8px}
.price{font-size:2.5em}
.hero{padding:30px 0}
}

/* Small Mobile (max-width: 480px) */
@media(max-width:480px){
nav .logo{font-size:1.1em}
.mobile-cta-button{font-size:0.9em;padding:12px 15px}
h1{font-size:1.5em}
h2{font-size:1.3em}
.cta-button{padding:12px 25px;font-size:1em}
.section{padding:20px 10px}
.benefit-card{padding:15px}
.review-card,.faq-item{padding:15px}
.price{font-size:2em}
table{font-size:0.85em}
th,td{padding:8px 5px;font-size:0.9em}
}

/* Extra Small (max-width: 360px) */
@media(max-width:360px){
body{padding-top:135px}
nav .logo{font-size:1em}
.mobile-cta-button{padding:10px 12px;font-size:0.85em}
h1{font-size:1.3em}
.cta-button{padding:10px 20px;font-size:0.95em}
}

/* Print Styles */
@media print{
nav,.mobile-cta-bar,footer{display:none}
body{padding-top:0}
.section{box-shadow:none;page-break-inside:avoid}
}