.root-fix-placeholder{}


:root{
  /* Vibrant double-color theme */
  --bg-1: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
  --bg-2: linear-gradient(135deg, rgba(96,163,134,0.08), rgba(96,163,134,0.02));
  --glass: rgba(255,255,255,0.95);
  --card: #ffffff;
  --text: #0f172a; /* deep blue-black */
  --muted-2: #475569;
  --accent: #60A386; /* brand green */
  --accent-2: #2f8f6d; /* darker green */
  --radius:12px;
  --max-width:1200px;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --glass-border: rgba(96,163,134,0.12);
  --header-bg: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); /* vibrant light blue gradient */
  --header-text: #0c2340; /* darker blue text */
  --card-bg: #ffffff;
  --card-ghost: rgba(96,163,134,0.06);
}

*{box-sizing:border-box;scroll-behavior:smooth}
body{font-family:'Inter', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg-1); color:var(--text); margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.container{width:calc(100% - 48px); max-width:var(--max-width); margin:0 auto}

.topbar{position:sticky;top:0;left:0;right:0;z-index:120;padding:6px 0;background:var(--header-bg);border-bottom:1px solid rgba(6,66,92,0.08)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:6px 18px;background:transparent;color:var(--header-text);backdrop-filter:none;border:0;border-radius:0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.logo{width:72px;height:72px;object-fit:contain;background:transparent}
.brand-name{font-weight:800;letter-spacing:0.2px;color:var(--header-text);font-size:1.25rem}
.site-nav{display:flex;gap:18px;align-items:center}

/* Dropdown styles */
.nav-item{position:relative}
.drop-toggle{background:transparent;border:0;color:var(--header-text);padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:600}
.drop-toggle:hover{background:rgba(6,66,92,0.04)}
.dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;background:var(--card);border:1px solid rgba(0,0,0,0.06);border-radius:10px;padding:6px 8px;display:none;flex-direction:column;box-shadow:0 8px 24px rgba(4,32,24,0.06);z-index:120;min-width:max-content;max-width:90vw}
.dropdown-menu a{display:block;padding:8px 12px;color:var(--text);text-decoration:none;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-menu a:hover{background:var(--accent);color:var(--header-text)}
.nav-item.open .dropdown-menu{display:flex}

/* Show dropdown on hover for pointer devices (desktop) */
@media (hover: hover) and (min-width: 641px) {
  .nav-item:hover .dropdown-menu{display:flex}
}
.site-nav a{text-decoration:none;color:var(--header-text);padding:8px 10px;border-radius:8px}
.site-nav a:hover{color:var(--header-text);background:rgba(6,66,92,0.06)}
.nav-toggle{display:none;background:none;border:0;color:var(--header-text);font-size:1.6rem}

.banner{padding:40px 0; /* full-bleed background */ background:linear-gradient(90deg, rgba(124,58,237,0.10), rgba(56,189,248,0.06)); border-top:1px solid rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.02);}
.banner-inner{display:flex;gap:28px;align-items:center;padding:22px;max-width:var(--max-width);margin:0 auto;background:transparent;border-radius:0;box-shadow:none}
.banner-left{flex:1;min-width:0}
.banner-title{font-size:1.8rem;margin:0;color:#fff;line-height:1.05}
.banner-sub{color:var(--muted-2);margin-top:10px;font-size:1rem}
.banner-ctas{margin-top:18px;display:flex;gap:12px}
.banner-right{display:flex;align-items:center;justify-content:center}
.banner-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,0.04)}
.banner-card img{width:260px;height:auto;border-radius:12px;display:block;box-shadow:0 18px 50px rgba(2,6,23,0.6)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;border:0;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);color:#fff;box-shadow: 0 8px 24px rgba(96,163,134,0.15)}
.btn-light{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.04);color:var(--muted-2)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--muted-2)}
.btn-sm{padding:8px 10px;border-radius:8px}

.features{padding:44px 0}
.section-title{font-size:1.4rem;margin:0 0 18px;color:#0b2b22}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.modern-grid{grid-template-columns: repeat(3, 1fr);}

/* Modern feature cards */
.features .feature{
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-bg) 100%);
  border-radius: var(--radius);
  padding: 1.15rem 1rem;
  box-shadow: 0 8px 22px rgba(9,30,24,0.06);
  display:flex;
  gap: 0.9rem;
  align-items: flex-start;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(6,66,92,0.04);
}

/* Unique light background colors for each feature card */
.features .feature:nth-child(1){
  background: linear-gradient(135deg, rgba(96,163,134,0.15) 0%, rgba(96,163,134,0.04) 100%);
}
.features .feature:nth-child(2){
  background: linear-gradient(135deg, rgba(45,212,191,0.15) 0%, rgba(45,212,191,0.04) 100%);
}
.features .feature:nth-child(3){
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.04) 100%);
}
.features .feature:nth-child(4){
  background: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(168,85,247,0.04) 100%);
}
.features .feature:nth-child(5){
  background: linear-gradient(135deg, rgba(236,72,153,0.15) 0%, rgba(236,72,153,0.04) 100%);
}
.features .feature:nth-child(6){
  background: linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(249,115,22,0.04) 100%);
}

/* initial hidden state for scroll animation */
.features .feature,
.cards-grid .card{
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
}

/* when element enters viewport */
.in-view{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger animation for feature cards on scroll */
.features .feature.in-view{
  animation: slideInCard 600ms cubic-bezier(0.2,0.9,0.2,1) forwards;
}

@keyframes slideInCard{
  from{
    opacity: 0;
    transform: translateY(16px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .feature-icon{
    animation: none;
  }
  .features .feature.in-view{
    animation: none;
  }
}

.features .feature:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(9,30,24,0.12);
}

.feature-icon{
  flex: 0 0 48px;
  height:48px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background: linear-gradient(180deg, rgba(96,163,134,0.08), rgba(96,163,134,0.02));
  box-shadow: 0 6px 14px rgba(96,163,134,0.06);
  animation: float 3s ease-in-out infinite;
}

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

.features .feature h3{margin:0 0 6px 0;font-size:1.05rem;font-weight:700;color:var(--text)}
.features .feature p{margin:0;color:var(--muted-2);font-size:0.95rem;line-height:1.4}

/* New wrapper for heading + paragraph to layout vertically inside flex item */
.feature-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0}
.feature-body h3{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;font-size:1.05rem}
.feature-body p{margin:0;color:var(--muted-2);font-size:0.95rem;line-height:1.35;white-space:normal;overflow:visible;text-overflow:unset}

@media (max-width:420px){
  .feature-body h3{font-size:1rem}
}

.catalog{padding:44px 0}
.catalog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.catalog-controls input{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#E6EEF8;width:360px}

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));border-radius:14px;overflow:hidden;border:1px solid rgba(96,163,134,0.08);display:flex;flex-direction:column;transition:transform .28s ease, box-shadow .28s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(2,6,23,0.6)}
.card-image{border:0;background:transparent;padding:0;cursor:pointer}
.card-image img{width:100%;height:220px;object-fit:cover;display:block}
.card-body{padding:14px}
.muted{color:var(--muted-2);font-size:0.9rem}
.small{font-size:0.86rem;color:var(--muted-2)}
.card-actions{display:flex;gap:8px;margin-top:12px}

.about,.contact{padding:36px 0;color:var(--muted-2)}

.site-footer{padding:60px 0 20px;background:linear-gradient(135deg, rgba(96,163,134,0.08) 0%, rgba(45,212,191,0.06) 100%);border-top:1px solid rgba(96,163,134,0.12);margin-top:40px}

.footer-content{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:var(--max-width);width:calc(100% - 48px);margin:0 auto;padding:0 24px;margin-bottom:40px}

.footer-section h3{font-size:1rem;font-weight:700;color:var(--text);margin:0 0 12px}

.footer-section p{color:var(--muted-2);font-size:0.95rem;margin:0 0 10px;line-height:1.5}

.footer-section a{color:var(--accent);text-decoration:none;transition:color .2s ease}

.footer-section a:hover{color:var(--accent-2);text-decoration:underline}

.contact-link{display:inline-block;margin-top:8px;padding:8px 16px;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-radius:6px;font-weight:600;transition:transform .2s ease, box-shadow .2s ease}

.contact-link:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(96,163,134,0.15);text-decoration:none}

.footer-section ul li{margin:8px 0}

.footer-bottom{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);width:calc(100% - 48px);margin:0 auto;padding:20px 24px;border-top:1px solid rgba(96,163,134,0.1);color:var(--muted-2);font-size:0.9rem}

.footer-links{display:flex;gap:20px}

.footer-links a{color:var(--muted-2);text-decoration:none;transition:color .2s ease}

.footer-links a:hover{color:var(--accent)}

@media (max-width:900px){
  .footer-content{grid-template-columns:repeat(2,1fr);gap:30px}
}

@media (max-width:640px){
  .footer-content{grid-template-columns:1fr;gap:24px;margin-bottom:30px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .footer-links{justify-content:center}
}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(rgba(2,6,23,0.6), rgba(2,6,23,0.85));z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:transparent;padding:12px;border-radius:8px;max-width:92%;max-height:92%;display:flex;align-items:center}
.modal-content img{max-width:86vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 60px rgba(2,6,23,0.8)}
.modal-close{position:absolute;right:18px;top:18px;border:0;background:rgba(255,255,255,0.06);border-radius:8px;padding:8px;color:#fff;cursor:pointer}

/* Responsive */
@media (max-width:1000px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .banner-inner{flex-direction:column-reverse;gap:18px;padding:18px}
  .banner-card img{max-width:60vw}
}

/* Carousel styles */
/* hero-carousel uses a clean, transparent background (no glass panel) */
.hero-carousel{background:linear-gradient(135deg, rgba(96,163,134,0.12) 0%, rgba(45,212,191,0.10) 100%);padding:0;margin-top:40px;margin-bottom:0;border-bottom:1px solid rgba(96,163,134,0.08)}
.carousel{position:relative;overflow:hidden}
.carousel-track{position:relative;height:380px /* reduced to tighten header->hero gap */}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex;align-items:center}
.slide[aria-hidden="false"],.slide.active{opacity:1;z-index:2}
.slide-inner{display:flex;align-items:center;gap:24px;max-width:var(--max-width);margin:0 auto;padding:16px 28px /* reduced vertical padding to bring content closer to header */}
.slide-left{flex:1;min-width:0}
.slide-left h2{font-size:2rem;margin:0;color:var(--text)}
.slide-left .lead{color:var(--muted-2);margin-top:10px}
.slide-right{width:340px;display:flex;justify-content:center}
.slide-right img{width:320px;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(45,212,191,0.12)}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px}
.carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(8,56,39,0.08);border:1px solid rgba(96,163,134,0.12);cursor:pointer}
.carousel-dot.active{background:var(--accent)}

@media (max-width:900px){
  .carousel-track{height:360px}
  .slide-inner{flex-direction:column;align-items:flex-start;padding:18px}
  .slide-right{width:100%;display:flex;justify-content:flex-start}
  .slide-right img{width:48vw}
  .slide-left h2{font-size:1.4rem}
}
@media (max-width:640px){
  .hero-carousel{margin-top:20px}
}
@media (max-width:640px){
  .feature-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .site-nav{display:none;position:absolute;right:16px;top:108px;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
  .nav-toggle{display:block}
  .container{width:calc(100% - 24px)}
  .logo{width:44px;height:44px}
  .hero-text h1{font-size:1.5rem}
}

/* topbar spacing on very small screens */
@media (max-width:420px){
  .topbar-inner{padding:10px}
  .brand-name{display:none}
}