:root{
  --green:#53B06D;
  --green-600:#2f6b3d;
  --bg:#0c0f0d;
  --text:#0e1a12;
  --card:#ffffff;
  --muted:#6b7c70;
}
*{box-sizing:border-box}
html,body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b140f;
  background-color:#0c0f0d;
  background-image:url('assets/images/Fond.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  line-height:1.55;
}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b140f;
  background:#f7faf9;
  line-height:1.55;
}

/* HALO background */
.halo-wrap{
  position:fixed; inset:0; overflow:hidden; z-index:-1;
}
.halo{
  position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  filter:blur(60px); opacity:0.5;
  background:radial-gradient(closest-side, rgba(83,176,109,0.55), rgba(83,176,109,0.15) 60%, transparent 100%);
  animation:float 14s ease-in-out infinite;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
@keyframes float{
  0%{ transform:translate(-50%,-50%) scale(1) }
  50%{ transform:translate(calc(-50% + 20px), calc(-50% - 20px)) scale(1.06) }
  100%{ transform:translate(-50%,-50%) scale(1) }
}

/* Header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background:rgba(255,255,255,0.75); border-bottom:1px solid #e6efe9;
}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.nav{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
}
.brand{font-weight:700; color:var(--green-600); letter-spacing:.2px}
nav a{margin:0 8px; color:#233127; text-decoration:none; font-weight:600; font-size:14px}
nav a:hover{color:var(--green)}

/* Hero */
.hero{
  text-align:center; padding:72px 12px 56px;
}
.hero h1{
  font-size: clamp(28px, 6vw, 44px);
  margin:0 0 12px; color:#0d2617; letter-spacing:.3px
}
.hero p{color:#2b3a31; max-width:720px; margin:0 auto 18px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background: #e7f4eb; color:var(--green-600); border:1px solid #d5eadc;
  padding:8px 12px; border-radius:999px; font-weight:600; font-size:13px
}

/* Sections */
.section{padding:56px 0}
.section h2{
  font-size: clamp(22px, 4.5vw, 30px);
  margin:0 0 18px; color:#102a1a
}
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 12;
  background:var(--card); border:1px solid #e6efe9; border-radius:16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  overflow:hidden;
}
.card img{width:100%; height:220px; object-fit:cover; display:block; background:#ecf6f0}
.card .pad{padding:14px}
.card h3{margin:0 0 8px; font-size:18px; color:#143a23}
.card p{margin:0; color:#3a4a40; font-size:14px}
.tag{display:inline-block; padding:4px 10px; border-radius:999px; background:#edf7f0; color:var(--green-600); font-weight:700; font-size:12px; border:1px solid #d7eadf}

/* Packs */
.pack{
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap
}
.pack .left{display:flex; gap:12px; align-items:center}
.pack .badge{background:#ecf9f1}
.price{font-weight:800; color:var(--green-600)}
small.muted{color:#5b6a60}

/* Payment */
.paylist{display:grid; gap:12px}
.payitem{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border:1px solid #e6efe9; border-radius:12px; background:white
}
.payitem strong{color:#123d23}
.phone{font-weight:800; color:var(--green-600)}

/* Form */
form.order{
  background:white; border:1px solid #e6efe9; border-radius:16px; padding:16px
}
label{display:block; font-weight:700; font-size:14px; margin:8px 0 6px; color:#173c24}
input, textarea{
  width:100%; padding:12px; border:1px solid #dce8e1; border-radius:12px; font-size:14px;
  outline:none; background:#fbfdfc
}
textarea{min-height:110px; resize:vertical}
button.primary{
  margin-top:12px; display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:white; border:none; border-radius:999px; padding:12px 16px; font-weight:800; cursor:pointer
}
button.primary:active{transform:translateY(1px)}

/* Footer */
footer{
  margin-top:48px; padding:24px 0; color:#2d4034; background:rgba(248,252,249,0.9);
  border-top:1px solid #e6efe9
}

/*  Responsive columns */
@media (min-width: 640px){
  .card{grid-column: span 6;}
}
@media (min-width: 980px){
  .card{grid-column: span 4;}
}
/* Back to top */
#toTop{
  position:fixed; bottom:18px; right:18px; display:none;
  background:white; border:1px solid #e6efe9; border-radius:999px; padding:10px;
  box-shadow:0 6px 20px rgba(0,0,0,0.06); cursor:pointer
}

.packimg{width:100%; height:180px; object-fit:cover; display:block; border-bottom:1px solid #e6efe9}

.prodimg{width:100%; height:220px; object-fit:cover; display:block; background:#ecf6f0}


.wa-wrap{margin-top:12px; display:flex; flex-wrap:wrap;}
.btn-wa{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-size:14px; font-weight:700;
  border-radius:999px; text-decoration:none; line-height:1.2;
  padding:12px 16px; min-width:200px;
  transition:all .15s ease-in-out;
}
.btn-wa svg{width:18px; height:18px}
.btn-wa-green{
  background:var(--green); color:#fff; border:1px solid var(--green);
  box-shadow:0 8px 28px rgba(83,176,109,0.28);
}
.btn-wa-green:active{transform:translateY(1px)}
.btn-wa-outline{
  background:#fff; color:var(--green-600);
  border:1px solid var(--green);
  box-shadow:0 8px 28px rgba(0,0,0,0.05);
}
.btn-wa-outline:active{transform:translateY(1px)}
.packimg{width:100%; height:180px; object-fit:cover; display:block; border-bottom:1px solid #e6efe9}
.prodimg{width:100%; height:220px; object-fit:cover; display:block; background:#ecf6f0}