:root {
  --rippa-blue:#182d82;
  --rippa-blue-medium:#033976;
  --rippa-blue-bright:#0046b8;
  --rippa-accent:#0693e3;
  --bg:#ffffff;
  --text:#1a1a1a;
  --text-muted:#666666;
  --border:#e5e7eb;
  --card-bg:#f9fafb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--rippa-blue);text-decoration:none}
a:hover{color:var(--rippa-blue-bright)}
.container{max-width:1100px;margin:0 auto;padding:24px}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.98);backdrop-filter:saturate(120%) blur(8px);border-bottom:3px solid var(--rippa-blue);box-shadow:0 2px 12px rgba(0,0,0,.06);z-index:1000}
.site-header .brand{font-weight:700;margin-right:auto;color:var(--rippa-blue);text-decoration:none;font-size:22px}
.site-header nav a{margin:0 12px;text-decoration:none;color:var(--text);font-weight:500;padding:4px 0;border-bottom:2px solid transparent;transition:all .2s}
.site-header nav a:hover{color:var(--rippa-blue);border-bottom-color:var(--rippa-blue)}
.site-header .container{display:flex;align-items:center;gap:12px;padding:16px 24px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:28px;height:3px;background:var(--rippa-blue);border-radius:2px;transition:all .3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -6px)}

.hero{padding:80px 0;background:linear-gradient(135deg, rgba(24,45,130,.05) 0%, rgba(6,147,227,.08) 100%);border-bottom:1px solid var(--border)}
.hero h1{font-size:48px;margin:0 0 16px;color:var(--rippa-blue);font-weight:800;line-height:1.2}
.hero p{font-size:20px;color:var(--text-muted);margin-bottom:24px}
.cta-row{display:flex;gap:12px;margin-top:24px}

.btn{background:var(--rippa-blue);color:#fff;font-weight:700;border:2px solid var(--rippa-blue);padding:14px 28px;border-radius:8px;text-decoration:none;display:inline-block;transition:all .2s;font-size:16px;cursor:pointer}
.btn:hover{background:var(--rippa-blue-medium);border-color:var(--rippa-blue-medium);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(24,45,130,.3)}
.btn.outline{background:#fff;color:var(--rippa-blue);border:2px solid var(--rippa-blue)}
.btn.outline:hover{background:var(--rippa-blue);border-color:var(--rippa-blue);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(24,45,130,.3)}
.btn.sm{padding:10px 18px;font-size:14px}

.hero-img{margin-top:32px;max-width:600px;width:100%;border-radius:12px;border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.1)}

.features{padding:60px 0}
.features h2{text-align:center;font-size:36px;color:var(--rippa-blue);margin-bottom:48px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .3s}
.card:hover{box-shadow:0 8px 24px rgba(24,45,130,.12);transform:translateY(-4px);border-color:var(--rippa-blue)}
.card h3{color:var(--rippa-blue);margin-top:0;font-size:20px}
.card p{color:var(--text-muted);line-height:1.6}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.cards.inventory{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cards,.cards.inventory{grid-template-columns:1fr}}
.card.product img{width:100%;height:220px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--border);margin-bottom:16px}

.inventory-preview{padding:60px 0}
.inventory-preview h2{font-size:32px;color:var(--rippa-blue);margin-bottom:24px}

.cta{background:linear-gradient(135deg, var(--rippa-blue) 0%, var(--rippa-blue-bright) 100%);color:#fff;padding:60px 24px;border-radius:16px;text-align:center;margin:60px auto}
.cta h2{color:#fff;font-size:36px;margin:0 0 16px}
.cta p{color:rgba(255,255,255,.9);font-size:18px;margin-bottom:24px}
.cta .btn{background:#fff;color:var(--rippa-blue);font-size:18px;padding:16px 32px}
.cta .btn:hover{background:var(--card-bg);transform:translateY(-2px)}

.page-hero{background:linear-gradient(135deg, rgba(24,45,130,.08) 0%, rgba(6,147,227,.05) 100%);padding:48px 0;border-bottom:1px solid var(--border)}
.page-hero h1{color:var(--rippa-blue);font-size:40px;margin:0}

.checklist{list-style:none;padding-left:20px}
.checklist li{position:relative;margin:12px 0;color:var(--text)}
.checklist li:before{content:"✓";position:absolute;left:-20px;color:var(--rippa-blue);font-weight:700}

.map-embed iframe{width:100%;height:350px;border:1px solid var(--border);border-radius:12px}

.site-footer{border-top:2px solid var(--border);margin-top:80px;padding-top:40px;background:var(--card-bg)}
.site-footer h4{color:var(--rippa-blue);font-size:18px;margin-bottom:12px}
.site-footer p{color:var(--text-muted);line-height:1.8}
.site-footer a{color:var(--text);transition:color .2s}
.site-footer a:hover{color:var(--rippa-blue)}
.site-footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:768px){.site-footer .cols{grid-template-columns:1fr}}
.footnote{opacity:.7;font-size:14px;text-align:center;margin-top:32px;padding-bottom:24px;color:var(--text-muted)}

.form label{display:block;margin:16px 0 6px;color:var(--text);font-weight:500}
.form .required{color:#dc2626;font-weight:700;margin-left:2px}
.form input,.form select,.form textarea{width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:15px;transition:all .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--rippa-blue);box-shadow:0 0 0 3px rgba(24,45,130,.1)}
.form textarea{min-height:120px;resize:vertical}
.hint{opacity:.75;font-size:13px;color:var(--text-muted);margin-top:4px}
.filters{display:flex;gap:12px;margin:16px 0;flex-wrap:wrap}
.filters button{background:var(--card-bg);border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .2s;color:var(--text);font-weight:500}
.filters button:hover{background:var(--rippa-blue);color:#fff;border-color:var(--rippa-blue)}
.filters button.active{background:var(--rippa-blue);color:#fff;border-color:var(--rippa-blue)}

.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:2000;align-items:center;justify-content:center;padding:20px}
.modal.active{display:flex}
.modal-content{background:#fff;border-radius:16px;max-width:600px;width:100%;position:relative;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:32px;color:var(--text-muted);cursor:pointer;padding:8px;line-height:1;transition:color .2s}
.modal-close:hover{color:var(--rippa-blue)}
.modal h2{color:var(--rippa-blue);margin-top:0;font-size:32px;margin-bottom:12px}
.modal .location-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.modal .location-card{text-decoration:none;display:block;background:var(--card-bg);border:2px solid var(--border);border-radius:12px;padding:32px 20px;text-align:center;transition:all .3s;cursor:pointer}
.modal .location-card:hover{background:var(--rippa-blue);border-color:var(--rippa-blue);transform:translateY(-4px);box-shadow:0 8px 24px rgba(24,45,130,.2)}
.modal .location-card h3{color:var(--rippa-blue);margin:0 0 8px 0;font-size:24px;transition:color .3s}
.modal .location-card p{color:var(--text-muted);margin:0;font-size:16px;transition:color .3s}
.modal .location-card:hover h3,.modal .location-card:hover p{color:#fff}

@media (max-width:768px){
  .hero h1{font-size:32px}
  .hero p{font-size:16px}
  .btn{padding:12px 20px;font-size:15px}
  .hamburger{display:flex}
  .site-header nav{position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:saturate(120%) blur(8px);flex-direction:column;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:none;box-shadow:0 4px 12px rgba(0,0,0,.06)}
  .site-header nav.active{max-height:300px;border-bottom:2px solid var(--border)}
  .site-header nav a{margin:0;padding:16px 24px;border-bottom:1px solid var(--border);display:block}
  .site-header nav a:hover{background:var(--card-bg)}
  .modal-content{padding:24px}
  .modal h2{font-size:24px}
  .modal .location-cards{grid-template-columns:1fr}
}

/* Carousel Styles */
.carousel-container {
  position: relative;
  margin: 0 -12px;
}

.carousel-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.carousel-scroll::-webkit-scrollbar {
  height: 8px;
}

.carousel-scroll::-webkit-scrollbar-track {
  background: var(--card-bg);
  border-radius: 4px;
}

.carousel-scroll::-webkit-scrollbar-thumb {
  background: var(--rippa-blue);
  border-radius: 4px;
}

.carousel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--rippa-blue-medium);
}

.carousel-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--rippa-blue);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-prev:hover,
.carousel-next:hover {
  background: var(--rippa-blue);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: -24px;
}

.carousel-next {
  right: -24px;
}

.carousel-prev::before {
  content: '←';
  font-size: 24px;
  font-weight: bold;
  color: var(--rippa-blue);
}

.carousel-next::before {
  content: '→';
  font-size: 24px;
  font-weight: bold;
  color: var(--rippa-blue);
}

.carousel-prev:hover::before,
.carousel-next:hover::before {
  color: #fff;
}

@media (max-width: 768px) {
  .carousel-prev,
  .carousel-next {
    display: none !important;
  }

  .carousel-scroll {
    gap: 16px;
  }

  .carousel-card {
    flex: 0 0 280px;
  }
}