:root{--brand-red:#c8132f;--brand-red-dark:#9f0f26;--brand-white:#fff;--text:#2b2b2b;}
*{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{ color: var(--brand-red); } a:hover{ color: var(--brand-red-dark); }
.navbar .navbar-brand{letter-spacing:.5px}.logo-soup{filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.nav-pill{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.35rem 0.95rem;
  border:1px solid var(--brand-red);
  border-radius:999px;
  font-weight:500;
  color:#fff;
  background-color:transparent;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.nav-pill:hover,
.nav-pill:focus{
  text-decoration:none;
}
.nav-pill:focus-visible{
  outline:0;
  box-shadow:0 0 0 .25rem rgba(255,255,255,.35);
}
.nav-pill-icon{
  line-height:1;
}
.nav-pill-menu:hover,
.nav-pill-menu:focus,
.nav-pill-menu:active,
.nav-pill-menu.nav-pill-active{
  background-color:#fff4e5;
  border-color:var(--brand-red-dark);
  color:var(--brand-red-dark);
}
.nav-pill-contact:hover,
.nav-pill-contact:focus,
.nav-pill-contact:active,
.nav-pill-contact.nav-pill-active{
  background-color:#e4f3ff;
  border-color:var(--brand-red-dark);
  color:var(--brand-red-dark);
}

.hero{background:linear-gradient(135deg,var(--brand-red) 0%,#ff566e 100%);color:#fff;border-radius:1.25rem;padding:3rem 2rem;position:relative;overflow:hidden}
.hero .blob{position:absolute;width:220px;height:220px;background:rgba(255,255,255,0.15);filter:blur(20px);border-radius:50%}
.hero .blob:nth-child(1){top:-40px;left:-40px}.hero .blob:nth-child(2){bottom:-60px;right:-30px}
.soup-img{display:block;border-radius:1rem;box-shadow:0 15px 50px rgba(0,0,0,.25)}
.hero-image{position:relative}.steam{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:1rem}
.steam-bubble{position:absolute;bottom:10px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.2));filter:blur(1px);opacity:0;animation-name:rise;animation-iteration-count:infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.8}100%{transform:translateY(-140px) scale(1.4);opacity:0}}
.card-hover{transition:transform .2s ease,box-shadow .2s ease}.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
@media (hover:hover) and (pointer:fine){
  .tilt{ will-change: transform }
}
.btn-brand{background:var(--brand-red);color:#fff;border:none}.btn-brand:hover{background:var(--brand-red-dark);color:#fff}
.btn-glow{position:relative}.btn-glow::after{content:'';position:absolute;inset:-2px;border-radius:12px;background:radial-gradient(80px 40px at 10% 10%,rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .2s ease}.btn-glow:hover::after{opacity:.6}
.table-status td{vertical-align:middle}.form-control:focus,.btn:focus{box-shadow:0 0 0 .2rem rgba(200,19,47,.25);border-color:var(--brand-red)}
footer{background:#fff;border-top:1px solid #f1f1f1}
.parallax-bg{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.9))}
@media (max-width:768px){.hero{padding:2rem 1.25rem}}

@media (max-width:576px){
  .hero{
    text-align:center;
    padding:1.5rem 1rem;
  }
  .hero h1{
    font-size:2rem;
  }
  .hero .lead{
    font-size:1rem;
  }
  .hero .btn{
    width:100%;
  }
  .hero-image{
    margin-top:1.5rem;
  }
  .hero .blob,
  .steam{
    display:none;
  }
  .checkout-actions,
  .order-success-actions{
    flex-direction:column;
    align-items:stretch;
    gap:0.75rem;
  }
  .checkout-actions .btn,
  .order-success-actions .btn{
    width:100%;
    margin:0!important;
  }
}
.toast.position-fixed.top-0.start-0 {
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  bottom: auto !important;
}

/* Ensure elements marked for former scroll animations stay visible */
[data-aos]{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
[data-aos="zoom-in"]{transform:none;}
.aos-animate{opacity:1;transform:none}

/* Reduce motion for users who prefer it (and helps low-end devices) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Progressive rendering for offscreen content */
.cv-auto{ content-visibility: auto; contain-intrinsic-size: 600px; }

.text-dark-green {
    color: #08c608 !important;
}