:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --light-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --accent-color: #4facfe;
  --text-dark: #2c3e50;
  --text-light: #6c757d;
  --white: #ffffff;
  --light-bg: #f8f9fa;

  --box-shadow-light: 0 10px 40px rgba(0, 0, 0, 0.1);
  --box-shadow-medium: 0 20px 60px rgba(0, 0, 0, 0.15);
  --box-shadow-heavy: 0 30px 80px rgba(0, 0, 0, 0.2);

  --border-radius: 20px;
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Smooth Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--light-bg); }
::-webkit-scrollbar-thumb {
  background: var(--primary-gradient);
  border-radius: 10px;
}

/* Typography */
 h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.display-1 {
  font-size: 4.5rem;
  font-weight: 800;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lead { font-size: 1.4rem; font-weight: 300; color: var(--text-light); }

/* Navigation */
.navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: var(--box-shadow-light);
  transition: var(--transition-smooth);
  padding: 1rem 0;
}
.navbar.scrolled { padding: 0.5rem 0; background: rgba(255,255,255,0.98); }
.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-link {
  font-weight: 500;
  color: var(--text-dark) !important;
  margin: 0 0.5rem;
  padding: 0.5rem 1rem !important;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.nav-link:hover {
  background: var(--primary-gradient);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-medium);
}
.nav-link::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: var(--accent-gradient);
  transition: var(--transition-smooth);
  z-index: -1;
}
.nav-link:hover::before { left: 0; }

/* Buttons */
.btn-premium {
  background: var(--primary-gradient);
  border: none;
  color: #fff;
  padding: 1rem 2.5rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-bounce);
  box-shadow: var(--box-shadow-medium);
  position: relative;
  overflow: hidden;
}
.btn-premium:hover { transform: translateY(-5px) scale(1.05); box-shadow: var(--box-shadow-heavy); color:#fff; }
.btn-premium::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: var(--secondary-gradient);
  transition: var(--transition-smooth);
  z-index: -1;
}
.btn-premium:hover::before { left: 0; }

.btn-outline-premium {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--primary-gradient) border-box;
  color: var(--primary-color);
  padding: 1rem 2.5rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-bounce);
}
.btn-outline-premium:hover { background: var(--primary-gradient); color: #fff; transform: translateY(-3px); box-shadow: var(--box-shadow-medium); }

/* Hero */
.hero { min-height: 100vh; background: var(--primary-gradient); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
  opacity: .3;
}
.hero-content { position:relative; z-index:2; }
.hero .display-1 { -webkit-text-fill-color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.3); }
.hero .lead { color: rgba(255,255,255,.9); font-size:1.5rem; }
.hero-image { position:relative; z-index:2; }
.hero-image img { border-radius: var(--border-radius); box-shadow: var(--box-shadow-heavy); transition: var(--transition-smooth); }
.hero-image:hover img { transform: scale(1.05) rotate(2deg); }

/* Floating */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.float-animation { animation: float 6s ease-in-out infinite; }

/* Parallax */
.parallax-section { background-attachment: fixed; background-position: center; background-repeat:no-repeat; background-size:cover; position:relative; }
.parallax-overlay { position:absolute; inset:0; background: rgba(0,0,0,.5); }

/* Cards */
.card-premium { border:none; border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); transition: var(--transition-smooth); overflow:hidden; background:#fff; }
.card-premium:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--box-shadow-heavy); }
.card-premium .card-img-top { transition: var(--transition-smooth); }
.card-premium:hover .card-img-top { transform: scale(1.1); }
.card-premium .card-body { padding: 2rem; }
.card-premium .card-title { font-family:'Montserrat',sans-serif; font-weight:600; color: var(--text-dark); }
.card-premium .card-text { color: var(--text-light); line-height:1.7; }

/* Product Grid */
.product-card { position:relative; overflow:hidden; }
.product-card .overlay { position:absolute; inset:0; background: var(--primary-gradient); opacity:0; display:flex; align-items:center; justify-content:center; transition: var(--transition-smooth); }
.product-card:hover .overlay { opacity:.9; }
.product-card .overlay .btn { transform: translateY(50px); transition: var(--transition-bounce); }
.product-card:hover .overlay .btn { transform: translateY(0); }

/* Testimonials */
.testimonial-card { background:#fff; border-radius: var(--border-radius); padding:3rem 2rem; box-shadow: var(--box-shadow-light); text-align:center; position:relative; transition: var(--transition-smooth); }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-medium); }
.testimonial-card::before { content: '"'; position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:4rem; color: var(--primary-color); font-family:'Georgia',serif; }
.testimonial-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 1rem; border:4px solid var(--primary-color); overflow:hidden; }
.testimonial-avatar img { width:100%; height:100%; object-fit:cover; }

/* Stats */
.stats-section { background: var(--dark-gradient); color:#fff; padding:5rem 0; }
.stat-item { text-align:center; padding:2rem; }
.stat-number { font-size:3.5rem; font-weight:800; background: var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; }
.stat-label { font-size:1.2rem; font-weight:300; text-transform:uppercase; letter-spacing:2px; }

/* Team */
.team-member { text-align:center; padding:2rem; }
.team-avatar { width:200px; height:200px; border-radius:50%; margin:0 auto 1.5rem; border:4px solid var(--primary-color); overflow:hidden; transition: var(--transition-smooth); }
.team-avatar:hover { transform: scale(1.1); box-shadow: var(--box-shadow-medium); }
.team-avatar img { width:100%; height:100%; object-fit:cover; }
.social-links { margin-top:1rem; }
.social-links a { display:inline-block; width:40px; height:40px; background: var(--primary-gradient); color:#fff; text-align:center; line-height:40px; border-radius:50%; margin:0 .5rem; transition: var(--transition-bounce); }
.social-links a:hover { transform: translateY(-5px) scale(1.2); box-shadow: var(--box-shadow-medium); }

/* Footer */
.footer { background: var(--dark-gradient); color:#fff; padding:4rem 0 2rem; }
.footer h5 { color: var(--accent-color); margin-bottom:1.5rem; }
.footer a { color: rgba(255,255,255,.8); text-decoration:none; transition: var(--transition-smooth); }
.footer a:hover { color: var(--accent-color); }
.footer-social a { display:inline-block; width:50px; height:50px; background: var(--primary-gradient); color:#fff; text-align:center; line-height:50px; border-radius:50%; margin:0 .5rem; font-size:1.2rem; transition: var(--transition-bounce); }
.footer-social a:hover { transform: translateY(-5px) scale(1.1); box-shadow: var(--box-shadow-medium); }

/* Loading */
.loading-overlay { position:fixed; inset:0; background: var(--primary-gradient); display:flex; align-items:center; justify-content:center; z-index:9999; transition: opacity .5s ease-out; }
.loading-overlay.hidden { opacity:0; pointer-events:none; }
.spinner { width:60px; height:60px; border:6px solid rgba(255,255,255,.2); border-top:6px solid #fff; border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Responsive */
@media (max-width: 768px) {
  .display-1 { font-size: 3rem; }
  .hero { text-align:center; padding:2rem 0; }
  .btn-premium { padding: .8rem 2rem; font-size: .9rem; }
  .card-premium { margin-bottom: 2rem; }
  .navbar-nav { text-align:center; margin-top:1rem; }
}

/* Accessibility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.btn:focus, .nav-link:focus, a:focus { outline:3px solid var(--accent-color); outline-offset:2px; }

/* High contrast */
@media (prefers-contrast: high) {
  :root { --primary-color:#000; --text-dark:#000; --text-light:#333; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }