:root{
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --card2:#FFFFFF;
  --text:#0B1220;
  --muted: rgba(11,18,32,.70);
  --line: rgba(11,18,32,.10);
  --accent1:#A855F7;
  --accent2:#06B6D4;
  --accent3:#F472B6;
}
html,body{height:100%;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(168,85,247,.10), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(6,182,212,.08), transparent 60%),
    radial-gradient(1000px 700px at 60% 90%, rgba(244,114,182,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
.navbar{
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78)!important;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, rgba(168,85,247,.9), rgba(6,182,212,.8));
  box-shadow: 0 10px 30px rgba(6,182,212,.12);
}
.badge-soft{
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  color: rgba(11,18,32,.72);
}
.hero{ padding-top: 6.5rem; padding-bottom: 3.5rem; }
.hero-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(11,18,32,.10);
}
.hero-img{
  width:100%;
  height: 520px;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.01);
}
.glow-line{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.55), rgba(6,182,212,.45), transparent);
  opacity:.9;
}
.section{ padding: 4.2rem 0; }
.kicker{
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(11,18,32,.60);
  font-size:.80rem;
}
.h-title{
  font-weight: 750;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height:1.05;
}
.lead{ color: var(--muted); }
.btn-primary{
  border:0;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 18px 40px rgba(168,85,247,.16);
}
.btn-outline-light{
  border-color: rgba(11,18,32,.18);
  color: rgba(11,18,32,.88);
}
.btn-outline-light:hover{
  background: rgba(11,18,32,.04);
  color: rgba(11,18,32,.92);
}
.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding:.45rem .75rem;
  color: rgba(11,18,32,.70);
  font-size:.9rem;
}
.card-modern{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: 22px;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 14px 40px rgba(11,18,32,.06);
}
.card-modern:hover{
  transform: translateY(-4px);
  border-color: rgba(11,18,32,.16);
  box-shadow: 0 22px 60px rgba(11,18,32,.10);
}
.product-thumb{ width:100%; height: 260px; object-fit: cover; }
.icon-chip{
  width:40px; height:40px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(11,18,32,.03);
  border: 1px solid var(--line);
}
.feature{
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  border-radius: 22px;
  padding: 1.25rem;
  height:100%;
  box-shadow: 0 14px 40px rgba(11,18,32,.06);
}
.footer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
}
.form-control, .form-select{
  background: rgba(255,255,255,.90);
  border:1px solid rgba(11,18,32,.18);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  background: #fff;
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 .2rem rgba(6,182,212,.12);
  color: var(--text);
}
small, .small{color: rgba(11,18,32,.62);}
.divider{ border-top: 1px solid var(--line); }
.modal-content{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(11,18,32,.14);
  backdrop-filter: blur(18px);
  border-radius: 18px;
}
.gallery-img{
  width:100%;
  height: 420px;
  object-fit: contain;
  background: rgba(11,18,32,.02);
  border-radius: 14px;
  border:1px solid rgba(11,18,32,.10);
}
.thumb{
  width:100%;
  height: 78px;
  object-fit: cover;
  border-radius: 12px;
  border:1px solid rgba(11,18,32,.10);
  cursor:pointer;
  opacity:.88;
}
.thumb:hover{opacity:1;}