:root {
  --primary-color: #1a1a1a;
  --bg-color: #fdfdfd;       /* Slightly warmer white for premium feel */
  --text-primary: #2d2b2a;
  --text-secondary: #5f6368;
  --brand-blue: #3b7d9b;     /* Deeper, more trustworthy blue */
  --brand-green: #e1f0e8;    /* Lighter pastel green for backgrounds */
  --accent-color: #d1eefc;   /* Soft blue accent */
  --accent-orange: #ffb067;  /* Accent for badges/highlights */
  --font-main: 'Outfit', sans-serif;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-main); background-color: var(--bg-color); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Typography */
h1, h2, h3 { font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -0.03em; font-weight: 600; color: var(--primary-color);}
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; margin-bottom: var(--spacing-sm); }
p { font-size: 1.1rem; color: var(--text-secondary); }

/* Top Announcement Bar */
.announcement-bar { background: linear-gradient(90deg, #3b7d9b, #5ca4cd); color: #fff; text-align: center; padding: 12px 0; font-size: 0.85rem; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; z-index: 200; position: fixed; top: 0; width: 100%; box-shadow: var(--shadow-sm); }
.announcement-bar span { opacity: 0.8; margin: 0 15px; font-weight: 300; }

/* Navigation */
nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; position: fixed; top: 43px; width: 100%; z-index: 100; border-bottom: 1px solid rgba(0,0,0,0.05); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
.logo { display: flex; align-items: flex-start; justify-content: center; text-decoration: none; }
.logo img { height: 60px; width: auto; object-fit: contain; }
.tm-symbol { font-size: 0.8rem; color: var(--text-primary); font-weight: 600; margin-left: 2px; margin-top: 10px; }

.nav-links { display: flex; gap: 30px; }
.nav-links a { text-decoration: none; color: var(--text-primary); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; position: relative; padding-bottom: 4px; }
.nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--brand-blue); transition: width 0.3s ease; }
.nav-links a:hover::after { width: 100%; }

.nav-icons { display: flex; gap: 20px; align-items: center; }
.nav-icons a { color: var(--text-primary); font-size: 1.2rem; text-decoration: none; transition: color 0.3s ease, transform 0.2s ease; display: flex; align-items: center; position: relative; }
.nav-icons a:hover { color: var(--brand-blue); transform: scale(1.1); }
.nav-icons svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; top: -8px; right: -10px; background-color: var(--brand-blue); color: white; font-size: 0.7rem; font-weight: bold; height: 18px; width: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Hero Section */
.hero { min-height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 180px 5% 80px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bg-color) 0%, var(--brand-green) 100%); gap: 2rem; }
.hero-content { flex: 1; max-width: 650px; z-index: 2; padding-left: 2rem; }
.brand-eyebrow { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--brand-blue); margin-bottom: 0.5rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hero-content h1 { margin-bottom: 1rem; line-height: 1.1; }
.hero-content p { margin: 1.5rem 0 2.5rem; font-size: 1.2rem; max-width: 550px; line-height: 1.7; }
.btn-primary { display: inline-block; background-color: var(--primary-color); color: #fff; padding: 1.2rem 3rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; font-weight: 600; border-radius: 40px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(26, 26, 26, 0.2); }
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(26, 26, 26, 0.3); background-color: var(--brand-blue); }

.hero-image-wrapper { flex: 1.2; display: flex; justify-content: center; align-items: center; position: relative; }
.hero-img-main { width: 100%; max-width: 650px; height: 500px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; border: 8px solid white; z-index: 2; border-radius: 200px 200px 24px 24px; animation: popup 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes popup {
  0% { transform: scale(0.9) translateY(40px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Floating Badges */
.floating-badge { position: absolute; background: white; padding: 12px 20px; border-radius: 30px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--brand-blue); font-size: 0.9rem; z-index: 3; border: 1px solid rgba(0,0,0,0.04); animation: float 6s ease-in-out infinite; }
.badge-1 { top: 15%; right: 5%; animation-delay: 0s; }
.badge-2 { bottom: 20%; left: -5%; animation-delay: 2s; }
.badge-icon { font-size: 1.5rem; }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* Logic Section (Features) */
.logic-section { padding: var(--spacing-xl) 5%; text-align: center; background-color: #ffffff; }
.logic-section > p { max-width: 700px; margin: 0 auto var(--spacing-md); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.feature-card { padding: 3rem 2rem; background: var(--bg-color); border: 1px solid rgba(0,0,0,0.03); border-radius: var(--border-radius-lg); transition: all 0.4s ease; cursor: default; }
.feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); background: white; border-color: transparent; }
.feature-icon-wrapper { width: 80px; height: 80px; background: var(--brand-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2.5rem; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: var(--brand-blue); }
.feature-card:hover .feature-icon-wrapper { transform: scale(1.1) rotate(5deg); background: var(--accent-color); }
.feature-card h3 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--primary-color); font-weight: 600; }

/* Smart Sizing Calculator Section */
.calculator-section { padding: var(--spacing-xl) 5%; background: linear-gradient(to bottom, #ffffff, var(--brand-green)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-top: 1px solid rgba(0,0,0,0.04);}
.calc-content-wrapper { display: flex; flex-direction: row; gap: 4rem; max-width: 1100px; width: 100%; align-items: stretch; background: white; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: 4rem; z-index: 2;}
.calc-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.calc-tag { background: var(--accent-orange); color: white; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; display: inline-block; align-self: flex-start; letter-spacing: 0.5px;}
.calc-info h2 { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }
.calc-info p { margin-bottom: 2rem; font-size: 1.15rem; color: var(--text-secondary); line-height: 1.7;}

/* Calculator Functionality Styles */
.calculator-app { flex: 1.2; background-color: var(--bg-color); padding: 35px; border-radius: var(--border-radius-md); box-shadow: inset 0 2px 10px rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.calculator-app input[type="number"] { width: 100%; padding: 14px; border: 1px solid #dcdcdc; border-radius: 8px; font-size: 16px; transition: all 0.3s; background: white; font-family: var(--font-main); }
.calculator-app input[type="number"]:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(59, 125, 155, 0.1); outline: none; }
.unit-toggle { display: flex; margin-bottom: 25px; background: #eaebec; border-radius: 8px; overflow: hidden; padding: 4px; }
.unit-btn { flex: 1; padding: 10px; border: none; background: transparent; cursor: pointer; font-weight: 600; color: var(--text-secondary); transition: all 0.3s; border-radius: 6px; font-family: var(--font-main); }
.unit-btn.active { background-color: white; color: var(--brand-blue); box-shadow: var(--shadow-sm); }
.calc-btn-action { width: 100%; padding: 16px; background-color: var(--brand-blue); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 10px; font-family: var(--font-main); text-transform: uppercase; letter-spacing: 1px;}
.calc-btn-action:hover { background-color: #2b5d73; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

#result { margin-top: 25px; padding: 25px; background-color: #f0f7f4; border-radius: 8px; border-left: 5px solid #27ae60; display: none; animation: slideDown 0.4s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.recommendation-title { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 12px; }
.size-badge { display: inline-block; background-color: #27ae60; color: white; padding: 6px 14px; border-radius: 6px; font-size: 1.2rem; font-weight: 700; margin-left: 10px;}
.prediction-text { margin-top: 15px; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }
.calc-warning { background-color: #fff8e1 !important; border-left-color: #ffb067 !important; }

/* Product Spotlight */
.product-spotlight { display: flex; align-items: center; padding: var(--spacing-xl) 5%; background-color: #ffffff; gap: var(--spacing-lg); }
.product-image { flex: 1; position: relative; }
.product-image img { width: 100%; height: auto; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); transition: transform 0.5s ease;}
.product-image img:hover { transform: scale(1.02); }
.deal-badge { position: absolute; top: -15px; left: -15px; background: var(--accent-orange); color: white; border-radius: 50%; width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: bold; font-size: 0.9rem; transform: rotate(-10deg); box-shadow: var(--shadow-md); z-index: 10; line-height: 1.2;}
.product-details { flex: 1; max-width: 550px; }
.product-details h2 { font-size: clamp(2rem, 3.5vw, 2.5rem); }
.price-container { display: flex; align-items: center; gap: 15px; margin-bottom: var(--spacing-md); }
.price { font-size: 2rem; font-weight: 600; color: var(--primary-color);}
.price-original { font-size: 1.3rem; color: #a0a0a0; text-decoration: line-through; }
ul.benefits-list { list-style: none; margin: var(--spacing-md) 0 2.5rem; }
ul.benefits-list li { margin-bottom: 1rem; padding-left: 2rem; position: relative; color: var(--text-secondary); font-size: 1.05rem; }
ul.benefits-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand-blue); font-weight: 800; background: var(--brand-green); width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.8rem;}

/* WhatsApp Floating Button */
.whatsapp-float { position: fixed; width: 65px; height: 65px; bottom: 30px; right: 30px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: var(--shadow-lg); z-index: 1000; transition: transform 0.3s ease; display: flex; justify-content: center; align-items: center; text-decoration: none;}
.whatsapp-float:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 15px 35px rgba(37, 211, 102, 0.3); }
.whatsapp-float svg { width: 35px; height: 35px; fill: currentColor; }
.whatsapp-pulse { position: absolute; right: 30px; bottom: 30px; width: 65px; height: 65px; background: #25d366; border-radius: 50%; opacity: 0.5; z-index: 999; animation: pulse 2s infinite ease-out; pointer-events: none;}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Footer */
footer { padding: var(--spacing-lg) 5% var(--spacing-md); text-align: center; background-color: var(--primary-color); color: rgba(255,255,255,0.8); }
.footer-content { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 3rem; margin-bottom: 2rem;}
footer .logo-footer { background: white; padding: 10px 20px; border-radius: 12px; display: inline-block; margin-bottom: 1.5rem; }
footer .logo-footer img { height: 50px; }
.footer-col { flex: 1; min-width: 200px;}
.footer-col h4 { color: white; font-size: 1.2rem; margin-bottom: 1.5rem; font-weight: 500;}
.footer-col a { display: block; color: rgba(255,255,255,0.7); text-decoration: none; margin-bottom: 0.8rem; transition: color 0.3s;}
.footer-col a:hover { color: var(--accent-orange); }
.footer-bottom { font-size: 0.9rem; display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto;}
.social-icons { display: flex; gap: 15px; }
.social-icons svg { width: 20px; height: 20px; fill: currentColor; transition: transform 0.3s, fill 0.3s;}
.social-icons a:hover svg { transform: scale(1.2); fill: var(--accent-orange); }

@media (max-width: 992px) {
  .hero { flex-direction: column; padding-top: 140px; text-align: center; gap: 4rem; }
  .hero-content { padding-left: 0; align-items: center; display: flex; flex-direction: column; }
  .hero-img-main { border-radius: 24px; height: auto; max-height: 400px; }
  .calc-content-wrapper { flex-direction: column; padding: 2.5rem; }
  .product-spotlight { flex-direction: column; text-align: center; }
  ul.benefits-list li { text-align: left; }
  .footer-content { flex-direction: column; gap: 2rem; }
  .nav-links { display: none; } /* Simplified mobile handling */
  .floating-badge { display: none; } /* Hide floating badges on mobile to save space */
}