@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #1a1a2e;
  --secondary: #c9a96e;
  --accent: #e8d5b0;
  --dark: #0d0d1a;
  --light: #f8f5f0;
  --white: #ffffff;
  --gray: #6b7280;
  --border: rgba(201,169,110,0.2);
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
  --shadow: 0 20px 60px rgba(0,0,0,0.12);
  --shadow-lg: 0 40px 80px rgba(0,0,0,0.2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--white);color:var(--primary);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--transition)}
ul{list-style:none}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.2;color:var(--primary)}
h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.4rem,2.5vw,2rem)}
h4{font-size:1.4rem}
p{color:var(--gray);margin-bottom:1rem;font-size:1.05rem}

/* Layout */
.container{max-width:1280px;margin:0 auto;padding:0 2rem}
.container-sm{max-width:900px;margin:0 auto;padding:0 2rem}
.section{padding:7rem 0}
.section-sm{padding:4rem 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:4rem;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.text-center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.2rem;border-radius:2px;font-family:var(--font-body);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;transition:var(--transition);position:relative;overflow:hidden}
.btn-primary{background:var(--secondary);color:var(--primary);border-color:var(--secondary)}
.btn-primary:hover{background:transparent;color:var(--secondary)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--white)}
.btn-white{background:var(--white);color:var(--primary)}
.btn-white:hover{background:var(--secondary);color:var(--primary)}
.btn-lg{padding:1.1rem 2.8rem;font-size:1rem}

/* Section Labels */
.section-label{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--secondary);margin-bottom:1rem;position:relative;padding-left:2.5rem}
.section-label::before{content:'';position:absolute;left:0;top:50%;width:2rem;height:1px;background:var(--secondary);transform:translateY(-50%)}
.section-title{margin-bottom:1.5rem}
.section-subtitle{font-size:1.1rem;color:var(--gray);max-width:600px;margin:0 auto 3rem}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.5rem 0;transition:var(--transition)}
.navbar.scrolled{background:rgba(26,26,46,0.97);backdrop-filter:blur(20px);padding:1rem 0;box-shadow:0 2px 40px rgba(0,0,0,0.3)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between}
.navbar-logo{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;color:var(--white);letter-spacing:.05em}
.navbar-logo span{color:var(--secondary)}
.navbar-nav{display:flex;gap:2.5rem;list-style:none}
.navbar-nav > li{position:relative}
.navbar-nav a{color:var(--white);font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;transition:var(--transition)}
.navbar-nav a:hover,.navbar-nav a.active{color:var(--secondary)}

/* DROPDOWN */
.dropdown{position:absolute;top:100%;left:0;background:var(--dark);min-width:220px;padding:1rem 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease;list-style:none;box-shadow:0 10px 30px rgba(0,0,0,0.5);border-top:2px solid var(--secondary);z-index:100}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li{padding:0}
.dropdown a{display:block;padding:.75rem 1.5rem;font-size:.85rem;text-transform:none;letter-spacing:0;color:rgba(255,255,255,0.7);white-space:nowrap}
.dropdown a:hover{background:rgba(255,255,255,0.05);color:var(--secondary);padding-left:2rem}
.navbar-nav a:hover::after,.navbar-nav a.active::after{width:100%}
.navbar-cta{margin-left:1.5rem}
.navbar-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.5rem}
.navbar-toggle span{width:24px;height:2px;background:var(--white);transition:var(--transition)}

/* HERO SLIDER */
.hero-slider {
  height: 100vh;
  min-height: 700px;
  position: relative;
  overflow: hidden;
  background: var(--dark);
}
.slider-container {
  height: 100%;
  width: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-desktop);
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s ease, transform 6s linear;
  transform: scale(1.1);
  z-index: 1;
}
@media (max-width: 768px) {
  .hero-slide {
    background-image: var(--bg-mobile);
  }
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}
.hero-slide .hero-content {
  max-width: 800px;
  color: var(--white);
}
.hero-slide h1 {
  color: var(--white);
  margin-bottom: 1.5rem;
}
.hero-slide .hero-desc {
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 2.5rem;
}
.slider-dots {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 10;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: var(--transition);
}
.dot.active {
  background: var(--secondary);
  transform: scale(1.3);
}
.slider-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 3rem;
  z-index: 10;
  pointer-events: none;
}
.slider-nav button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.2);
  color: white;
  cursor: pointer;
  pointer-events: auto;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-nav button:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary);
}

/* HERO STATS OVERLAY */
.hero-stats {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  width: calc(100% - 4rem);
  max-width: 1100px;
  z-index: 15;
  box-shadow: var(--shadow-lg);
}
.hero-stat {
  background: var(--white);
  padding: 2.5rem 1.5rem;
  text-align:center;
}
.hero-stat-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
}
.hero-stat-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--secondary);
  margin-top: .5rem;
}

/* ABOUT */
.about{background:var(--light)}
.about-image-wrap{position:relative}
.about-image-wrap img{width:100%;height:550px;object-fit:cover;border-radius:2px}
.about-badge{position:absolute;bottom:-2rem;right:-2rem;background:var(--secondary);color:var(--primary);padding:2rem;text-align:center;border-radius:2px}
.about-badge-num{font-family:var(--font-heading);font-size:3rem;font-weight:700;display:block}
.about-badge-text{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.about-feature{display:flex;align-items:center;gap:.75rem;font-size:.95rem;font-weight:500;color:var(--primary)}
.about-feature::before{content:'✓';width:1.5rem;height:1.5rem;background:var(--secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--primary);flex-shrink:0}

/* Product Grid Section */
.product-showcase {
  padding: 80px 0;
  background: var(--white);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.product-card {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-card:hover img {
  transform: scale(1.1);
}

.product-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(26, 26, 46, 0.98), rgba(26, 26, 46, 0.85));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 5;
}

.product-card:hover .overlay {
  opacity: 1;
  visibility: visible;
}

.product-card .overlay h3,
.product-card .overlay p,
.product-card .overlay .view-more-btn {
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s ease;
}

.product-card:hover .overlay h3 { transform: translateY(0); opacity: 1; transition-delay: 0.1s; }
.product-card:hover .overlay p { transform: translateY(0); opacity: 1; transition-delay: 0.15s; }
.product-card:hover .overlay .view-more-btn { transform: translateY(0); opacity: 1; transition-delay: 0.2s; }

.product-card .title-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 15px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s;
  z-index: 2;
  backdrop-filter: blur(5px);
}

.product-card:hover .title-bar {
  transform: translateY(100%);
  opacity: 0;
}

.product-card h3 {
  color: var(--secondary);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
}

.product-card p {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .view-more-btn {
  border: 1px solid var(--secondary);
  color: var(--secondary);
  padding: 8px 20px;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  transition: all 0.3s;
  border-radius: 2px;
}

.product-card .view-more-btn:hover {
  background: var(--secondary);
  color: var(--primary);
}

/* Header Card */
.header-card {
  background: #76bc43;
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 4px;
}

.header-card h2 {
  color: #fff;
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.header-card h2 span {
  font-weight: 700;
}

.header-card p {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Grid Specifics - Masonry Layout for Home Page Showcase */
.product-showcase .product-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 1.3 / 1; } /* Heterogeneous */
.product-showcase .product-grid > :nth-child(2) { grid-column: 2; grid-row: 1; } /* Header Card */
.product-showcase .product-grid > :nth-child(3) { grid-column: 3; grid-row: 1 / 3; aspect-ratio: 1.3 / 1; } /* ESD */
.product-showcase .product-grid > :nth-child(4) { grid-column: 1; grid-row: 3; aspect-ratio: 1.3 / 1; } /* Industrial */
.product-showcase .product-grid > :nth-child(5) { grid-column: 2; grid-row: 2 / 4; } /* Homogeneous */
.product-showcase .product-grid > :nth-child(6) { grid-column: 3; grid-row: 3; aspect-ratio: 1.3 / 1; } /* Accessories */

@media (max-width: 1024px) {
  .product-showcase .product-grid > :nth-child(1),
  .product-showcase .product-grid > :nth-child(2),
  .product-showcase .product-grid > :nth-child(3),
  .product-showcase .product-grid > :nth-child(4),
  .product-showcase .product-grid > :nth-child(5),
  .product-showcase .product-grid > :nth-child(6) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1.2;
  }
}

/* PORTFOLIO */
.portfolio-filter{display:flex;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}
.filter-btn{padding:.6rem 1.5rem;border:1px solid var(--border);background:transparent;color:var(--gray);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--transition);border-radius:2px}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:var(--white);border-color:var(--primary)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.portfolio-item{position:relative;overflow:hidden;border-radius:2px;cursor:pointer}
.portfolio-item img{width:100%;height:320px;object-fit:cover;transition:transform .8s ease}
.portfolio-item:hover img{transform:scale(1.08)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,26,.9) 0%,transparent 60%);opacity:0;transition:var(--transition)}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-info{position:absolute;bottom:0;left:0;right:0;padding:2rem;transform:translateY(1rem);opacity:0;transition:var(--transition)}
.portfolio-item:hover .portfolio-info{transform:translateY(0);opacity:1}
.portfolio-cat{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--secondary);margin-bottom:.5rem}
.portfolio-title{color:var(--white);font-size:1.3rem}

/* TESTIMONIALS */
.testimonials{background:var(--primary);padding:7rem 0}
.testimonials .section-label,.testimonials .section-title,.testimonials .section-subtitle{color:var(--white)}
.testimonials .section-subtitle{color:rgba(255,255,255,.6)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.testimonial-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:2.5rem;border-radius:2px;transition:var(--transition)}
.testimonial-card:hover{background:rgba(201,169,110,.1);border-color:rgba(201,169,110,.3)}
.testimonial-stars{color:var(--secondary);letter-spacing:.2rem;margin-bottom:1rem;font-size:1rem}
.testimonial-text{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.8;margin-bottom:1.5rem;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:1rem}
.testimonial-avatar{width:3rem;height:3rem;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.2rem;font-weight:700;color:var(--primary)}
.testimonial-name{color:var(--white);font-weight:600;font-size:.95rem}
.testimonial-role{color:var(--secondary);font-size:.8rem}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.blog-card{background:var(--white);border:1px solid var(--border);border-radius:2px;overflow:hidden;transition:var(--transition)}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.blog-card-image{height:240px;overflow:hidden}
.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.blog-card:hover .blog-card-image img{transform:scale(1.06)}
.blog-card-body{padding:1.75rem}
.blog-cat{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);font-weight:600;margin-bottom:.75rem;display:block}
.blog-title{font-size:1.2rem;margin-bottom:.75rem;line-height:1.4;transition:var(--transition)}
.blog-card:hover .blog-title{color:var(--secondary)}
.blog-excerpt{font-size:.9rem;color:var(--gray);margin-bottom:1.25rem}
.blog-meta{display:flex;gap:1.5rem;font-size:.8rem;color:var(--gray)}
.blog-meta span{display:flex;align-items:center;gap:.4rem}

/* CTA BANNER */
.cta-banner{background:linear-gradient(135deg,var(--primary) 0%,#2d1a0a 100%);padding:7rem 0;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(201,169,110,.05) 0,rgba(201,169,110,.05) 1px,transparent 0,transparent 50%);background-size:30px 30px}
.cta-banner .section-label{color:var(--secondary)}
.cta-banner h2{color:var(--white);margin-bottom:1rem}
.cta-banner p{color:rgba(255,255,255,.7);max-width:600px;margin:0 auto 2.5rem}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{width:100%;background:none;border:none;padding:1.75rem 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--font-heading);font-size:1.2rem;font-weight:600;color:var(--primary);text-align:left;gap:1rem}
.faq-icon{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--primary);flex-shrink:0;transition:transform .3s ease}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 0 1.75rem;color:var(--gray);line-height:1.8}
.faq-item.active .faq-answer{display:block}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:5rem;align-items:start}
.contact-info-item{display:flex;gap:1rem;margin-bottom:2rem}
.contact-icon{width:3rem;height:3rem;background:var(--secondary);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--primary);flex-shrink:0}
.contact-form .form-group{margin-bottom:1.5rem;width:100%}
.contact-form label{display:block;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:.5rem}
.contact-form input,.contact-form textarea,.contact-form select{width:100% !important;display:block;padding:.9rem 1.2rem;border:1px solid var(--border);background:var(--light);font-family:var(--font-body);font-size:.95rem;color:var(--primary);border-radius:2px;transition:var(--transition);outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--secondary);background:var(--white)}
.contact-form textarea{min-height:160px;resize:vertical}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:600px){.form-row-2{grid-template-columns:1fr;gap:0}}

/* FOOTER */
.footer{background:var(--dark);color:rgba(255,255,255,.7);padding:5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.footer-logo{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--white);margin-bottom:1rem}
.footer-logo span{color:var(--secondary)}
.footer-about{font-size:.92rem;line-height:1.8;margin-bottom:1.5rem}
.footer-social{display:flex;gap:.75rem}
.social-link{width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:.9rem;transition:var(--transition)}
.social-link:hover{background:var(--secondary);border-color:var(--secondary);color:var(--primary)}
.footer-heading{color:var(--white);font-family:var(--font-body);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1.5rem}
.footer-links li{margin-bottom:.75rem}
.footer-links a{color:rgba(255,255,255,.6);font-size:.9rem;transition:var(--transition)}
.footer-links a:hover{color:var(--secondary);padding-left:.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.85rem}
.footer-bottom a{color:var(--secondary)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* Page Hero */
.page-hero{background:var(--primary);padding:10rem 0 5rem;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(201,169,110,.04) 0,rgba(201,169,110,.04) 1px,transparent 0,transparent 50%);background-size:30px 30px}
.page-hero h1{color:var(--white)}
.page-hero p{color:rgba(255,255,255,.65);max-width:600px;margin:.75rem auto 0}
.breadcrumb{display:flex;justify-content:center;gap:.5rem;font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:1rem}
.breadcrumb a{color:var(--secondary)}

/* Alerts */
.alert{padding:1rem 1.5rem;border-radius:2px;margin-bottom:1.5rem;font-size:.95rem;border-left:4px solid}
.alert-success{background:#ecfdf5;border-color:#10b981;color:#065f46}
.alert-error{background:#fef2f2;border-color:#ef4444;color:#991b1b}
.alert-info{background:#eff6ff;border-color:#3b82f6;color:#1e3a5f}

/* Loading */
.loading{display:inline-block;width:1.2rem;height:1.2rem;border:2px solid rgba(255,255,255,.3);border-top-color:var(--white);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Cookie Banner */
.cookie-banner{position:fixed;bottom:2rem;left:2rem;right:2rem;max-width:500px;background:var(--primary);color:var(--white);padding:1.5rem 2rem;border-radius:4px;z-index:9999;box-shadow:var(--shadow-lg);display:none}
.cookie-banner.show{display:block;animation:fadeUp .5s ease}
.cookie-actions{display:flex;gap:.75rem;margin-top:1rem}

/* Responsive */
@media(max-width:1024px){
.grid-2{grid-template-columns:1fr;gap:3rem}
.grid-4{grid-template-columns:repeat(2,1fr)}
.services-grid{grid-template-columns:repeat(2,1fr)}
.portfolio-grid{grid-template-columns:repeat(2,1fr)}
.blog-grid{grid-template-columns:repeat(2,1fr)}
.testimonials-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.hero-stats{grid-template-columns:repeat(2,1fr)}
.contact-grid{grid-template-columns:1fr}
.product-grid{grid-template-columns:repeat(2,1fr)}
}

.mobile-menu{position:fixed;inset:0;background:var(--dark);z-index:999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;transform:translateX(100%);transition:transform .5s ease}
.mobile-menu.open{display:flex;transform:translateX(0)}
.mobile-menu a{color:var(--white);font-size:1.8rem;font-family:var(--font-heading);font-weight:600}
.mobile-menu a:hover{color:var(--secondary)}

@media(max-width:768px){
.navbar-nav,.navbar-cta{display:none}
.navbar-toggle{display:flex}
.grid-3{grid-template-columns:1fr}
.services-grid{grid-template-columns:1fr}
.portfolio-grid{grid-template-columns:1fr}
.blog-grid{grid-template-columns:1fr}
.testimonials-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr)}
.about-badge{right:-1rem;bottom:-1rem}
.section{padding:5rem 0}
.hero{min-height:100svh}
.product-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
.hero-stats{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:1fr}
.hero-actions{flex-direction:column}
.btn{width:100%;justify-content:center}
}

/* Global Responsive Swatch Grid */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media(max-width:1024px) {
  .swatch-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
@media(max-width:768px) {
  .swatch-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }
}
@media(max-width:480px) {
  .swatch-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Global Responsive Blog Layout */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}
@media(max-width:992px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .blog-layout aside {
    position: static !important;
  }
}

/* Responsive Utilities for About Stats & Project Meta Grids */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media(max-width:480px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
}

.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--light);
  border-radius: 2px;
}
@media(max-width:480px) {
  .project-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive Product Single Hero */
.product-hero-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  width: 100%;
}
.product-hero-inner h1 {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
@media(max-width:768px) {
  .product-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-hero-ref {
    height: auto !important;
    padding: 8rem 0 4rem;
  }
}