/* ═══ KAMGAENERGY — Index Page Styles ═══ */

/* ── BUTTONS ─────────────────────────────────── */
.btn-p{
  background:var(--primary);color:var(--white);
  padding:14px 32px;border-radius:50px;
  font-weight:600;font-size:.95rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:10px;
  border:none;cursor:pointer;
  box-shadow:0 0 28px rgba(5,167,5,.28);
  transition:all .35s cubic-bezier(.175,.885,.32,1.275);
}
.btn-p:hover{background:var(--primary-dark);transform:translateY(-3px);box-shadow:0 10px 36px rgba(5,167,5,.5)}
.btn-p svg{transition:transform .3s}
.btn-p:hover svg{transform:translateX(4px)}

.btn-s{
  background:transparent;color:rgba(245,245,245,.85);
  padding:14px 32px;border-radius:50px;
  font-weight:500;font-size:.95rem;
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid rgba(255,255,255,.22);
  transition:all .3s ease;
}
.btn-s:hover{border-color:var(--primary);color:var(--white)}

.btn-outline{
  background:transparent;color:var(--primary);
  padding:14px 32px;border-radius:50px;
  font-weight:500;font-size:.95rem;
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid var(--primary);
  transition:all .3s ease;
}
.btn-outline:hover{background:var(--primary);color:var(--white);transform:translateY(-2px)}

/* ── HERO ─────────────────────────────────────── */
.hero{
  min-height:100vh;
  background:var(--g-dark);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:130px 24px 100px;
  position:relative;overflow:hidden;
}

/* Grillage */
.hero::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(5,167,5,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,167,5,.11) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 42%, black 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 42%, black 10%, transparent 72%);
  pointer-events:none;z-index:0;
}

/* Radial glow */
.hero::after{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 72% 56% at 50% 40%, rgba(5,167,5,.14) 0%, transparent 68%),
    radial-gradient(ellipse 38% 28% at 50% 36%, rgba(48,209,88,.08) 0%, transparent 62%);
  pointer-events:none;z-index:0;
}

.hero>*{position:relative;z-index:1}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  
  padding:8px 22px;border-radius:50px;
  margin-bottom:32px;
  animation:fadeUp .9s ease .2s both;
}
.hero-badge::before{content:'☀️';font-size:1rem}
.hero-badge span{color:var(--accent);font-size:.82rem;font-weight:500;letter-spacing:.04em}

.hero h1{
  font-size:clamp(3.2rem,8vw,6.5rem);font-weight:700;
  color:var(--white);line-height:1.04;letter-spacing:-3px;
  margin-bottom:22px;
  animation:fadeUp .9s ease .4s both;
}
.hero h1 span{background:var(--g-solar);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-sub{
  font-size:clamp(1rem,2.2vw,1.3rem);color:var(--gray);
  max-width:620px;margin:0 auto 44px;font-weight:300;line-height:1.78;
  animation:fadeUp .9s ease .6s both;
}

.hero-btns{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  animation:fadeUp .9s ease .8s both;
}

.hero-visual{
  margin-top:64px;
  animation:float 7s ease-in-out infinite, fadeUp 1s ease 1s both;
}
.hero-visual svg{width:100%;max-width:780px;height:auto}

.hero-stats{
  display:flex;gap:0;
  margin-top:72px;
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:40px;
  width:100%;max-width:700px;
  animation:fadeUp 1s ease 1.2s both;
}
.stat-item{
  flex:1;text-align:center;
  border-right:1px solid rgba(255,255,255,.09);
  padding:0 24px;
}
.stat-item:last-child{border-right:none}
.stat-num{
  font-size:2.6rem;font-weight:700;line-height:1;
  background:var(--g-solar);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-lbl{color:var(--gray);font-size:.78rem;margin-top:6px;letter-spacing:.03em}

/* ── SECTION HELPERS ─────────────────────────── */
section{padding:112px 5%}

.s-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(5,167,5,.08);
  border:1px solid rgba(5,167,5,.22);
  padding:6px 16px;border-radius:50px;
  font-size:.78rem;font-weight:500;color:var(--accent);
  margin-bottom:16px;letter-spacing:.04em;
}

.s-title{text-align:center;margin-bottom:68px}
.s-title h2{
  font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:700;
  letter-spacing:-2px;margin-bottom:14px;line-height:1.1;
  color:var(--dark);
}
.s-title h2 span{background:var(--g-solar);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.s-title p{color:var(--gray);font-size:1.05rem;max-width:560px;margin:0 auto;font-weight:300;line-height:1.72}
.s-title.on-dark h2{color:var(--white)}
.s-title.on-dark .s-tag{background:rgba(48,209,88,.1);border-color:rgba(48,209,88,.25)}

/* ── FILIGRANE CARRELÉ (about, oraimo, projects) ── */
.about,
.oraimo,
.projects,
.blog,
footer{position:relative}

.about::before,
.oraimo::before,
.projects::before,
.blog::before{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(5,167,5,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,167,5,.055) 1px, transparent 1px),
    linear-gradient(rgba(5,167,5,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,167,5,.025) 1px, transparent 1px);
  background-size:
    64px 64px,
    64px 64px,
    16px 16px,
    16px 16px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
}

.about > *,
.oraimo > *,
.projects > *,
.blog > *,
footer > *{position:relative;z-index:1}

footer::before{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(48,209,88,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,209,88,.07) 1px, transparent 1px),
    linear-gradient(rgba(48,209,88,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,209,88,.03) 1px, transparent 1px);
  background-size:
    64px 64px,
    64px 64px,
    16px 16px,
    16px 16px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
}

/* ── ABOUT ───────────────────────────────────── */
.about{background:var(--g-light)}

.about-wrap{
  display:grid;grid-template-columns:1fr 1fr;
  gap:88px;align-items:center;
  max-width:1300px;margin:0 auto;
}

.about-text h3{
  font-size:clamp(1.9rem,3vw,2.65rem);font-weight:700;
  margin-bottom:22px;letter-spacing:-1px;line-height:1.14;
}
.about-text h3 span{background:var(--g-solar);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-text p{color:var(--gray);margin-bottom:18px;line-height:1.82;font-weight:300}

.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.feat{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  background:var(--white);border-radius:var(--r-s);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--sh-s);
  transition:all .3s ease;
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:rgba(5,167,5,.18)}
.feat-icon{
  width:46px;height:46px;flex-shrink:0;
  background:var(--g-solar);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.feat-text h4{font-size:.92rem;font-weight:600;margin-bottom:2px}
.feat-text span{font-size:.78rem;color:var(--gray)}

/* About card */
.about-card{
  background:var(--g-dark);
  border-radius:28px;padding:52px;
  color:var(--white);
  border:1px solid rgba(255,255,255,.07);
  position:relative;overflow:hidden;
}
.about-card::before{
  content:'';position:absolute;
  top:-90px;right:-90px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(5,167,5,.22),transparent 68%);
}
.about-card::after{
  content:'';position:absolute;
  bottom:-60px;left:-60px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,214,10,.06),transparent 70%);
}
.about-card h4{font-size:1.2rem;font-weight:600;margin-bottom:32px;position:relative;z-index:1}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:1}
.kpi{
  text-align:center;padding:26px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  transition:background .3s;
}
.kpi:hover{background:rgba(255,255,255,.09)}
.kpi-num{
  font-size:2.2rem;font-weight:700;line-height:1;
  background:var(--g-solar);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.kpi-lbl{font-size:.8rem;color:var(--gray);margin-top:6px}

/* ── PRODUCTS ────────────────────────────────── */
.products{background:var(--g-dark);position:relative;overflow:hidden}
/* Filigrane carrelé */
.products::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(48,209,88,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,209,88,.07) 1px, transparent 1px),
    linear-gradient(rgba(48,209,88,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,209,88,.03) 1px, transparent 1px);
  background-size:
    64px 64px,
    64px 64px,
    16px 16px,
    16px 16px;
  mask-image:none;
  -webkit-mask-image:none;
}
.products .s-title,.products .prod-grid{position:relative;z-index:1}

.prod-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;max-width:1300px;margin:0 auto;
}

.prod-card{
  background:#111412;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);overflow:hidden;
  position:relative;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}
/* bottom glow line on hover */
.prod-card::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--g-solar);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
}
.prod-card:hover{
  transform:translateY(-12px);
  border-color:rgba(5,167,5,.28);
  box-shadow:0 28px 64px rgba(0,0,0,.55),0 0 0 1px rgba(5,167,5,.1);
}
.prod-card:hover::after{transform:scaleX(1)}

.prod-img{
  height:228px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0a1a0a,#0d220d);
  position:relative;overflow:hidden;
}
.prod-img::before{
  content:'';
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(5,167,5,.14),transparent 68%);
}
.prod-img svg{width:150px;height:150px;position:relative;z-index:1}

.prod-body{padding:28px 28px 30px}
.prod-tag{
  display:inline-block;
  background:var(--g-solar);color:var(--dark);
  padding:3px 13px;border-radius:50px;
  font-size:.7rem;font-weight:700;
  margin-bottom:12px;letter-spacing:.05em;
}
.prod-body h3{font-size:1.28rem;font-weight:600;color:var(--white);margin-bottom:10px;letter-spacing:-.3px}
.prod-body p{color:var(--gray);font-size:.89rem;margin-bottom:22px;line-height:1.72;font-weight:300}
.prod-link{
  color:var(--accent);font-weight:500;font-size:.87rem;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .3s;
}
.prod-link:hover{gap:12px}
.prod-link svg{width:14px;height:14px;transition:transform .3s}
.prod-link:hover svg{transform:translateX(4px)}

/* ── ORAIMO ──────────────────────────────────── */
.oraimo{ background:#f7f7f9 }

.oraimo-tabs{
  display:flex; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-bottom:0;
}
.otab{
  padding:11px 26px;
  border:1.5px solid #e0e0e0; background:#fff;
  border-radius:50px; font-size:.88rem; font-weight:500;
  cursor:pointer; font-family:inherit; color:var(--dark);
  transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
  display:inline-flex; align-items:center; gap:7px;
}
.otab:hover:not(.otab-active){ background:#efefef; border-color:#ccc }
.otab.otab-active{
  background:var(--dark); color:#fff; border-color:var(--dark);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.otab-icon{ font-size:.95rem; transition:filter .18s, transform .18s }
.otab.otab-active .otab-icon{ filter:grayscale(1) brightness(0) invert(1); transform:scale(1.12) }

/* ── PANNEAU ─────────────────────────────────── */
.oraimo-panel{
  max-width:1360px; margin:44px auto 0;
  border-radius:24px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  background:#fff; padding:44px 48px;
}
@keyframes oraimoIn{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:translateY(0) }
}
.oraimo-panel.oraimo-enter{ animation:oraimoIn .32s cubic-bezier(.22,1,.36,1) both }

/* Header de catégorie */
.oraimo-cat-header{ margin-bottom:36px }
.oraimo-cat-header h3{
  font-size:clamp(1.5rem,2vw,2rem); font-weight:700;
  letter-spacing:-.5px; margin-bottom:8px; color:var(--dark);
}
.oraimo-cat-header p{ color:var(--gray); font-size:.96rem; font-weight:300 }

/* ── GRILLE PRODUITS ─────────────────────────── */
.oraimo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

/* ── CARD ─────────────────────────────────────── */
.oraimo-skel{
  min-height:340px;
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:skelShimmer 1.4s infinite;
  pointer-events:none;
}
@keyframes skelShimmer{to{background-position:-200% 0}}
.oraimo-empty{
  grid-column:1/-1; text-align:center;
  color:#999; font-size:.95rem; padding:2.5rem 1rem;
}
.oraimo-card{
  border-radius:20px; overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .32s cubic-bezier(.22,1,.36,1),
             box-shadow .32s cubic-bezier(.22,1,.36,1),
             border-color .32s ease;
}
.oraimo-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 52px rgba(0,0,0,.13), 0 0 0 1.5px rgba(5,167,5,.18);
  border-color:rgba(5,167,5,.22);
}

/* Badge dispo */
.oraimo-badge-dispo{
  position:absolute; top:12px; left:12px; z-index:3;
  font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:50px;
}
.badge-stock{ background:#e8f9ee; color:#0a7a2e; border:1px solid rgba(10,122,46,.18) }
.badge-promo{ background:#fff4d6; color:#8a6000; border:1px solid rgba(138,96,0,.18) }
.badge-new{   background:#eef3ff; color:#2b4ace; border:1px solid rgba(43,74,206,.18) }
.badge-out{   background:#fff0f0; color:#c0392b; border:1px solid rgba(192,57,43,.18) }

/* Zone image */
.oraimo-card-thumb{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,#f4f6f4 0%,#edf0ed 100%);
}
.oraimo-card-img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  padding:22px; display:block;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.oraimo-card:hover .oraimo-card-img{ transform:scale(1.07) }

/* Overlay rapide au hover */
.oraimo-card-overlay{
  position:absolute; inset:0;
  background:rgba(5,40,5,.52);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .28s ease;
  
}
.oraimo-card:hover .oraimo-card-overlay{ opacity:1 }
.oraimo-overlay-btn{
  background:#fff; color:var(--dark);
  border:none; border-radius:50px;
  padding:10px 22px; font-size:.8rem; font-weight:700;
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transform:translateY(8px);
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .2s;
}
.oraimo-card:hover .oraimo-overlay-btn{ transform:translateY(0) }
.oraimo-overlay-btn:hover{ background:var(--primary); color:#fff }

/* Corps de la carte */
.oraimo-card-body{
  padding:16px 18px 20px;
  display:flex; flex-direction:column; flex:1;
  gap:0;
}

/* Ligne : tag + rating */
.oraimo-card-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.oraimo-card-tag{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(5,167,5,.08); color:var(--accent);
  border:1px solid rgba(5,167,5,.16);
  font-size:.62rem; font-weight:700; letter-spacing:.06em;
  padding:3px 10px; border-radius:50px;
}
.oraimo-rating{
  display:flex; align-items:center; gap:3px;
  font-size:.68rem; color:#f59e0b; font-weight:600;
}
.oraimo-rating span{ color:var(--gray); font-weight:400 }

/* Nom */
.oraimo-card-body h4{
  font-size:.93rem; font-weight:700; color:var(--dark);
  margin-bottom:6px; line-height:1.28; letter-spacing:-.2px;
}

/* Description */
.oraimo-card-body p{
  font-size:.77rem; color:var(--gray); line-height:1.58;
  font-weight:300; flex:1; margin-bottom:14px;
}

/* Séparateur */
.oraimo-card-sep{
  height:1px; background:rgba(0,0,0,.06); margin:0 0 14px;
}

/* Bloc prix */
.oraimo-card-pricing{
  display:flex; align-items:baseline; gap:8px; margin-bottom:14px;
}
.oraimo-card-price{
  font-size:1.08rem; font-weight:800; color:var(--primary); line-height:1;
}
.oraimo-card-price-old{
  font-size:.78rem; color:#bbb; font-weight:400; text-decoration:line-through;
}
.oraimo-card-discount{
  font-size:.65rem; font-weight:700; background:#fff4d6; color:#8a6000;
  padding:2px 7px; border-radius:50px;
}

/* Actions : 2 boutons côte à côte */
.oraimo-card-actions{
  display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:auto;
}
.oraimo-btn-info{
  display:inline-flex; align-items:center; justify-content:center;
  background:#f2f4f2; color:var(--dark);
  border:1.5px solid #e8eae8; border-radius:50px;
  padding:9px 12px; font-size:.75rem; font-weight:600;
  font-family:inherit; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
  text-decoration:none; gap:5px; white-space:nowrap;
}
.oraimo-btn-info:hover{
  background:#e8f9ee; border-color:rgba(5,167,5,.3); color:var(--primary);
}
.oraimo-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#25d366; color:#fff;
  border:none; border-radius:50px;
  padding:9px 14px; font-size:.76rem; font-weight:700;
  font-family:inherit; cursor:pointer;
  text-decoration:none;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(37,211,102,.3);
  white-space:nowrap;
}
.oraimo-wa:hover{ background:#1ebe5d; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.44) }
.oraimo-wa svg{ flex-shrink:0 }

/* ── PAGINATION ───────────────────────────────── */
.oraimo-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:44px; flex-wrap:wrap;
}
.opag-btn{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid #e0e0e0; background:#fff;
  font-size:.88rem; font-weight:500; cursor:pointer;
  font-family:inherit; color:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.opag-btn:hover:not(.opag-active){ background:#f0f0f0; border-color:#bbb }
.opag-btn.opag-active{
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 4px 14px rgba(5,167,5,.32);
}
.opag-arrow{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid #e0e0e0; background:#fff;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--dark);
}
.opag-arrow:hover:not(:disabled){ background:#f0f0f0; border-color:#bbb }
.opag-arrow:disabled{ opacity:.32; cursor:default }
.opag-info{ font-size:.82rem; color:var(--gray); margin:0 6px }

/* 3 colonnes : tablette paysage */
@media(max-width:1200px){
  .oraimo-grid{ grid-template-columns:repeat(3,1fr) }
}
/* 2 colonnes : tablette portrait */
@media(max-width:900px){
  .oraimo-grid{ grid-template-columns:repeat(2,1fr); gap:16px }
  .oraimo-panel{ padding:32px 24px; border-radius:20px }
  .oraimo-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .otab{
    width:100%; justify-content:center;
    padding:10px 12px; font-size:.82rem;
    text-align:center;
  }
}
/* Mobile : carousel horizontal (1 carte visible, swipe) */
@media(max-width:620px){
  .oraimo-panel{ padding:22px 0; border-radius:16px; margin-top:24px; overflow:hidden }
  .oraimo-cat-header{ margin-bottom:20px; padding:0 16px }
  .oraimo-cat-header h3{ font-size:1.1rem }
  .oraimo-cat-header p{ font-size:.8rem }
  .oraimo-card-img{ padding:12px }
  .oraimo-card-body{ padding:10px 10px 12px }
  .oraimo-card-body h4{ font-size:.8rem; margin-bottom:4px }
  .oraimo-card-body p{ font-size:.7rem; margin-bottom:10px }
  .oraimo-card-tag{ font-size:.58rem; padding:2px 8px }
  .oraimo-rating{ font-size:.62rem }
  .oraimo-card-price{ font-size:.95rem }
  .oraimo-card-sep{ margin:0 0 10px }
  /* boutons empilés */
  .oraimo-card-actions{ grid-template-columns:1fr; gap:6px }
  .oraimo-btn-info{ padding:8px 10px; font-size:.7rem }
  .oraimo-wa{ padding:8px 10px; font-size:.7rem }

  /* ── Carousel horizontal ── */
  .oraimo-grid.oraimo-carousel{
    display:flex;
    grid-template-columns:none;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 16px 4px;
    scroll-padding:0 16px;
  }
  .oraimo-grid.oraimo-carousel::-webkit-scrollbar{ display:none }
  .oraimo-grid.oraimo-carousel > .oraimo-card{
    flex:0 0 calc(100% - 32px);
    min-width:calc(100% - 32px);
    margin-right:16px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .oraimo-grid.oraimo-carousel > .oraimo-card:last-child{ margin-right:0 }
  .oraimo-grid.oraimo-carousel > .oraimo-card:hover{
    transform:none; box-shadow:0 2px 12px rgba(0,0,0,.06);
    border-color:rgba(0,0,0,.07);
  }
  /* Fallback pour grid classique sur mobile */
  .oraimo-grid:not(.oraimo-carousel){ grid-template-columns:1fr; gap:12px; padding:0 16px }

  /* ── Dots de pagination ── */
  .oraimo-pagination{ margin-top:18px; gap:8px; padding:0 16px }
  .oraimo-pagination.opag-dots-mode{ margin-top:18px; gap:7px }
  .opag-dot{
    width:8px; height:8px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.18);
    cursor:pointer;
    padding:0;
    font-family:inherit;
    transition:width .28s cubic-bezier(.22,1,.36,1), background .28s ease;
  }
  .opag-dot.opag-active{
    background:var(--primary);
    width:24px;
    border-radius:50px;
    box-shadow:0 2px 8px rgba(5,167,5,.32);
  }
  .opag-btn,.opag-arrow{ width:32px; height:32px; font-size:.78rem }
}
/* Mobile étroit : 1 colonne (déjà appliqué, boutons côte à côte) */
@media(max-width:420px){
  .oraimo-card-actions{ grid-template-columns:1fr 2fr }
  .oraimo-btn-info,.oraimo-wa{ font-size:.72rem; padding:9px 12px }
}

/* ── PROJECTS ────────────────────────────────── */
.projects{background:var(--light)}

.slider{overflow:hidden;width:100%}
.track{
  display:flex;gap:24px;
  animation:scrollTrack 36s linear infinite;
  width:max-content;
}
.track:hover{animation-play-state:paused}

.proj-card{
  flex:0 0 380px;
  background:var(--white);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-s);border:1px solid rgba(0,0,0,.05);
  transition:all .35s ease;
}
.proj-card:hover{box-shadow:var(--sh-m);transform:translateY(-6px)}

.proj-img{
  height:228px;background:var(--g-dark);
  position:relative;overflow:hidden;
}
.proj-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .5s ease;
}
.proj-card:hover .proj-bg{transform:scale(1.07)}
.proj-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35),transparent 58%);
}
.proj-glow{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:150px;height:150px;
  background:radial-gradient(circle,rgba(5,167,5,.28),transparent 70%);
  z-index:1;
}

.proj-body{padding:26px 28px}
.proj-loc{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--primary);font-size:.77rem;font-weight:500;
  margin-bottom:8px;
}
.proj-body h3{font-size:1.12rem;font-weight:600;margin-bottom:8px;line-height:1.32}
.proj-body p{color:var(--gray);font-size:.87rem;line-height:1.65;font-weight:300}

/* ── CTA ─────────────────────────────────────── */
.cta{
  background:var(--g-dark);
  text-align:center;
  position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;
  top:-220px;left:50%;transform:translateX(-50%);
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(5,167,5,.13),transparent 65%);
}
.cta::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(5,167,5,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,167,5,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 10%, transparent 72%);
}
.cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.cta h2{
  font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;
  color:var(--white);letter-spacing:-2px;margin-bottom:20px;line-height:1.1;
}
.cta h2 span{background:var(--g-solar);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta p{color:var(--gray);font-size:1.1rem;margin-bottom:40px;font-weight:300;line-height:1.72}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── BLOG ────────────────────────────────────── */
.blog{background:var(--g-light)}

.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px;max-width:1300px;margin:0 auto;
}
.blog-card{
  background:var(--white);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-s);border:1px solid rgba(0,0,0,.05);
  display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--sh-m)}

.blog-img{
  height:210px;background:var(--g-dark);
  position:relative;overflow:hidden;
}
.blog-img img{
  width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .55s ease;
}
.blog-card:hover .blog-img img{transform:scale(1.07)}
.blog-img::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(1,9,2,.72) 100%);
  pointer-events:none;
}
.blog-img-badge{
  position:absolute;bottom:12px;left:14px;z-index:2;
  background:rgba(5,167,5,.82);
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:4px 10px;border-radius:20px;text-transform:uppercase;
}

.blog-body{padding:24px 26px;flex-grow:1;display:flex;flex-direction:column}
.blog-meta{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.blog-cat{
  background:rgba(5,167,5,.08);border:1px solid rgba(5,167,5,.2);
  color:var(--accent);font-size:.7rem;font-weight:600;
  padding:3px 10px;border-radius:50px;letter-spacing:.04em;
}
.blog-date{font-size:.77rem;color:var(--gray)}
.blog-body h3{font-size:1.18rem;font-weight:600;margin-bottom:10px;line-height:1.35;color:var(--dark)}
.blog-body p{color:var(--gray);font-size:.88rem;line-height:1.72;margin-bottom:20px;flex-grow:1;font-weight:300}
.blog-link{
  color:var(--primary);font-weight:500;font-size:.87rem;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .3s;
}
.blog-link:hover{gap:12px}

/* ── CONTACT ─────────────────────────────────── */
.contact{background:var(--white)}

.contact-wrap{
  display:grid;grid-template-columns:1fr 1.55fr;
  gap:72px;max-width:1200px;margin:0 auto;
}

.contact-info h3{font-size:1.9rem;font-weight:700;margin-bottom:14px;letter-spacing:-.8px;line-height:1.2}
.contact-info>p{color:var(--gray);margin-bottom:38px;font-weight:300;line-height:1.78}

.cinfo-list{list-style:none}
.cinfo-list li{
  display:flex;align-items:center;gap:18px;
  padding:18px 0;border-bottom:1px solid #f0f0f0;
}
.cinfo-list li:first-child{border-top:1px solid #f0f0f0}
.cinfo-icon{
  width:48px;height:48px;flex-shrink:0;
  background:var(--light);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;border:1px solid rgba(0,0,0,.06);
}
.cinfo-text h4{font-size:.7rem;color:var(--gray);margin-bottom:3px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.cinfo-text span{font-size:.95rem;font-weight:500}

/* Form */
.contact-form{
  background:var(--light);padding:44px;
  border-radius:28px;border:1px solid rgba(0,0,0,.06);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:500;font-size:.82rem;margin-bottom:8px;letter-spacing:.02em}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:14px 18px;
  border:1.5px solid #e5e5e7;border-radius:12px;
  font-size:.95rem;font-family:inherit;font-weight:300;
  background:var(--white);color:var(--dark);
  transition:border-color .3s,box-shadow .3s;outline:none;
  appearance:none;-webkit-appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(5,167,5,.1)}
.form-group textarea{min-height:140px;resize:vertical}
.submit-btn{
  width:100%;padding:16px;
  background:var(--g-dark);color:var(--white);
  border:none;border-radius:14px;
  font-size:1rem;font-weight:600;
  font-family:inherit;letter-spacing:.02em;
  cursor:pointer;
  transition:all .3s ease;
}
.submit-btn:hover{background:var(--primary);transform:translateY(-2px);box-shadow:0 10px 30px rgba(5,167,5,.38)}

/* ── REVEAL ──────────────────────────────────── */
.reveal{
  opacity:1;transform:translateY(0);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.hidden{opacity:0;transform:translateY(36px)}
.reveal.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}
.d2{transition-delay:.2s}
.d3{transition-delay:.3s}

/* ── KEYFRAMES ───────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes scrollTrack{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── CARTE CAMEROUN ──────────────────────────────────── */
.cam-map-section{
  background: linear-gradient(180deg,#010802 0%,#010a01 60%,#011001 100%);
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.cam-map-section::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(5,167,5,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,167,5,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 10%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 10%,transparent 80%);
}
.cam-map-section > *{ position:relative; z-index:1; }

.cam-map-section .s-title{
  padding: 48px 3% 32px;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.cam-map-section .s-title h2{
  color: var(--white);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: -2px;
  margin-bottom: 14px;
  line-height: 1.1;
  font-weight: 700;
}
.cam-map-section .s-title p{
  color: var(--gray);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.72;
}
.cam-map-section .s-title .s-tag{
  background: rgba(48,209,88,.1);
  border-color: rgba(48,209,88,.25);
  margin-bottom: 14px;
}

.cam-map-wrap{
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  align-items: stretch;
  gap: 20px;
  padding: 0 2% 20px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cam-map-container{
  position: relative;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.cam-map-container::before{
  content:'';
  position:absolute;
  inset:-40px;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,167,5,0.15) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.cam-svg{
  width: auto;
  height: 76%;
  max-height: 76%;
  max-width: 76%;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 28px rgba(5,167,5,0.18));
  transition: filter 0.4s;
}
.cam-svg.region-active{
  filter: drop-shadow(0 0 44px rgba(48,209,88,0.28));
}

.cam-region{
  transition: fill 0.2s ease, filter 0.22s ease, stroke 0.22s ease, transform 0.3s ease;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.cam-region:hover{
  filter: brightness(1.7) saturate(1.4);
  stroke: #4eff80 !important;
  stroke-width: 1.8px !important;
}
.cam-region.active-region{
  filter: brightness(2) saturate(1.6) drop-shadow(0 0 8px rgba(48,209,88,0.7));
  stroke: #30d158 !important;
  stroke-width: 2.2px !important;
}
.cam-region.dimmed{
  filter: brightness(0.45) saturate(0.3);
}

.cam-label{
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  fill: rgba(180,240,180,0.72);
  text-anchor: middle;
  pointer-events: none;
  letter-spacing: 0.07em;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.6);
  stroke-width: 2.5px;
  transition: opacity 0.3s;
}
.cam-label.dim{ opacity: 0.2; }

.cam-dot{
  filter: url(#dotGlow);
  cursor: pointer;
  transition: transform 0.2s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.cam-dot:hover{ transform: scale(1.7); }

@keyframes camPulse{
  0%  { r: 13; opacity: 0.22; }
  65% { r: 24; opacity: 0; }
  100%{ r: 13; opacity: 0; }
}
.cam-pulse-ring{ animation: camPulse 2.6s ease-out infinite; pointer-events: none; }

.cam-tooltip{
  position: fixed;
  background: rgba(3,14,3,0.95);
  color: #e8ffe8;
  padding: 9px 20px 9px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  border: 1px solid rgba(48,209,88,0.4);
  
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(48,209,88,0.12);
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 9999;
  transform: translate(-50%, -140%);
}
.cam-tooltip::before{
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #30d158;
  flex-shrink: 0;
  box-shadow: 0 0 6px #30d158;
}
.cam-tooltip.visible{ opacity: 1; }

.cam-left-col, .cam-right-col{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding-top: 0;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}
.cam-left-col::-webkit-scrollbar,
.cam-right-col::-webkit-scrollbar{ display: none; }

.cam-card{
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 15px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  
  flex-shrink: 0;
}
.cam-card:hover{
  border-color: rgba(48,209,88,0.22);
  background: rgba(48,209,88,0.04);
}

.cam-card.info-card{
  border-color: rgba(48,209,88,0.2);
  background: rgba(5,167,5,0.06);
}
.cam-card.info-card.has-region{
  border-color: rgba(48,209,88,0.45);
  background: rgba(5,167,5,0.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(5,167,5,0.15);
}
.cam-card-label{
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(48,209,88,0.65);
  margin-bottom: 7px;
}
.cam-card-title{
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  min-height: 24px;
  transition: color 0.3s;
}
.cam-card-sub{
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

.cam-stat-card{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cam-stat-card .cam-card-label{ margin-bottom: 3px; }
.cam-big-num{
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  background: var(--g-solar);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cam-big-unit{
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

.cam-bar-wrap{
  margin-top: 8px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.cam-bar-fill{
  height: 100%;
  border-radius: 99px;
  background: var(--g-solar);
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
  width: 0%;
}

.cam-legend-list{ display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.cam-leg-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px 6px;
  border-radius: 8px;
}
.cam-leg-item:hover{ color: #fff; background: rgba(255,255,255,0.04); }
.cam-leg-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px var(--c, #fff);
}
.cam-leg-count{
  margin-left: auto;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
}

.cam-region-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 99px;
  background: rgba(48,209,88,0.12);
  border: 1px solid rgba(48,209,88,0.3);
  font-size: 0.65rem;
  color: #30d158;
  font-weight: 600;
  margin-bottom: 7px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}
.cam-region-chip.visible{ opacity: 1; transform: none; }
.cam-region-chip::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #30d158;
  animation: chipBlink 1.4s infinite;
}
@keyframes chipBlink{
  0%,100%{ opacity:1; } 50%{ opacity:0.3; }
}

.cam-proj-list{ display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cam-proj-item{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cam-proj-item:last-child{ border-bottom: none; }
.cam-proj-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cam-heat-row{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.45);
}
.cam-heat-bar{
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.cam-heat-fill{
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #30d158, #09db64);
  transition: width 1s ease;
}
.cam-heat-val{
  font-weight: 700;
  color: #30d158;
  min-width: 20px;
  text-align: right;
}

.cam-reset-btn{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(48,209,88,0.3);
  background: rgba(48,209,88,0.08);
  color: #30d158;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
}
.cam-reset-btn:hover{
  background: rgba(48,209,88,0.15);
  border-color: rgba(48,209,88,0.5);
}
.cam-reset-btn.visible{ display: flex; }

@keyframes countUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.cam-big-num.animate{ animation: countUp 0.5s ease both; }

/* ── MODALES ─────────────────────────────────── */

.qv-backdrop{
  position:fixed; inset:0; z-index:9000;
  background:rgba(10,14,10,.72);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}
.qv-backdrop.qv-open{ opacity:1; visibility:visible }
.qv-modal{
  background:#fff; border-radius:28px;
  max-width:820px; width:100%; max-height:92vh;
  overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 40px 100px rgba(0,0,0,.38);
  transform:translateY(28px) scale(.97);
  transition:transform .36s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.qv-backdrop.qv-open .qv-modal{ transform:translateY(0) scale(1) }
.qv-close{
  position:absolute; top:16px; right:16px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.07); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--dark); font-size:1.2rem; line-height:1;
  transition:background .2s, transform .2s;
}
.qv-close:hover{ background:rgba(0,0,0,.14); transform:rotate(90deg) }
.qv-img-col{
  background:linear-gradient(145deg,#f2f5f2,#e8ece8);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:36px 28px; gap:16px;
  position:relative; overflow:hidden; min-height:420px;
}
.qv-img-col::before{
  content:''; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(5,167,5,.13),transparent 68%);
}
.qv-img-col::after{
  content:''; position:absolute; bottom:-40px; left:-40px;
  width:160px; height:160px;
  background:radial-gradient(circle,rgba(5,167,5,.08),transparent 68%);
}
.qv-main-img{
  width:100%; max-width:260px; aspect-ratio:1/1; object-fit:contain;
  position:relative; z-index:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));
}
.qv-main-img:hover{ transform:scale(1.06) }
.qv-thumbs{ display:flex; gap:8px; z-index:1 }
.qv-thumb{
  width:52px; height:52px; border-radius:10px;
  object-fit:contain; padding:6px; background:#fff;
  border:2px solid transparent; cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.qv-thumb.active,.qv-thumb:hover{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(5,167,5,.1) }
.qv-info-col{
  padding:36px 32px 28px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.qv-info-col::-webkit-scrollbar{ width:3px }
.qv-info-col::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:3px }
.qv-breadcrumb{
  font-size:.68rem; color:var(--gray); margin-bottom:10px;
  display:flex; align-items:center; gap:5px;
}
.qv-breadcrumb strong{ color:var(--accent) }
.qv-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.62rem; font-weight:700;
  padding:3px 10px; border-radius:50px; margin-bottom:10px;
}
.qv-name{
  font-size:1.52rem; font-weight:800; color:var(--dark);
  line-height:1.18; letter-spacing:-.5px; margin-bottom:8px;
}
.qv-rating-row{
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.qv-stars{ color:#f59e0b; font-size:1rem; letter-spacing:1px }
.qv-rating-score{ font-weight:700; font-size:.92rem }
.qv-rating-count{ font-size:.8rem; color:var(--gray) }
.qv-pricing{
  display:flex; align-items:baseline; gap:10px; margin-bottom:18px;
}
.qv-price{ font-size:1.72rem; font-weight:800; color:var(--primary); line-height:1 }
.qv-price-old{ font-size:.95rem; color:#bbb; text-decoration:line-through }
.qv-discount{
  font-size:.72rem; font-weight:700; background:#fff4d6; color:#8a6000;
  padding:3px 9px; border-radius:50px;
}
.qv-desc{ font-size:.88rem; color:#555; line-height:1.72; margin-bottom:18px; font-weight:300 }
.qv-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px;
}
.qv-spec{
  background:#f7f9f7; border-radius:10px; padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.qv-spec-lbl{ font-size:.63rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.06em }
.qv-spec-val{ font-size:.82rem; font-weight:600; color:var(--dark) }
.qv-sep{ height:1px; background:rgba(0,0,0,.07); margin:4px 0 16px }
.qv-warranty{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; color:var(--gray);
  background:#f7faf7; border:1px solid rgba(5,167,5,.16);
  border-radius:10px; padding:10px 14px; margin-bottom:18px;
}
.qv-warranty-icon{ font-size:1.2rem; flex-shrink:0 }
.qv-delivery{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; color:var(--gray);
  background:#fffaf0; border:1px solid rgba(245,158,11,.2);
  border-radius:10px; padding:10px 14px; margin-bottom:20px;
}
.qv-delivery-icon{ font-size:1.2rem; flex-shrink:0 }
.qv-actions{ display:flex; align-items:center; gap:10px; margin-top:auto }
.qv-btn-share{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0;
  background:#f2f4f2; color:var(--dark);
  border:1.5px solid #e0e2e0; border-radius:50%;
  font-family:inherit; cursor:pointer; transition:all .2s;
}
.qv-btn-share:hover{ background:#e8f9ee; border-color:rgba(5,167,5,.3); color:var(--primary) }
.qv-btn-wa{ flex:1 }
.qv-btn-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#25d366; color:#fff; border:none; border-radius:50px;
  padding:12px 20px; font-size:.88rem; font-weight:700;
  font-family:inherit; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 20px rgba(37,211,102,.34);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.qv-btn-wa:hover{ background:#1ebe5d; transform:translateY(-2px); box-shadow:0 10px 28px rgba(37,211,102,.48) }

@media(max-width:680px){
  .qv-modal{ grid-template-columns:1fr; max-height:96vh }
  .qv-img-col{ min-height:220px; padding:24px }
  .qv-main-img{ max-width:180px }
  .qv-info-col{ padding:24px 20px 20px }
  .qv-name{ font-size:1.22rem }
  .qv-price{ font-size:1.4rem }
}

.dv-backdrop{
  position:fixed; inset:0; z-index:9100;
  background:rgba(8,12,8,.78);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}
.dv-backdrop.dv-open{ opacity:1; visibility:visible }

.dv-modal{
  background:#fff;
  border-radius:28px;
  max-width:760px; width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.42);
  transform:translateY(30px) scale(.97);
  transition:transform .36s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.dv-modal::-webkit-scrollbar{ width:4px }
.dv-modal::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:4px }
.dv-backdrop.dv-open .dv-modal{ transform:translateY(0) scale(1) }

.dv-close{
  position:absolute; top:14px; right:14px; z-index:20;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem;
  transition:background .2s, transform .2s;
  
}
.dv-close:hover{ background:rgba(0,0,0,.6); transform:rotate(90deg) }

.dv-hero{
  background: linear-gradient(135deg, #0a1a0a 0%, #0d2b10 40%, #051a05 100%);
  border-radius:28px 28px 0 0;
  padding:0;
  position:relative; overflow:hidden;
  width:100%; box-sizing:border-box;
  display:flex; flex-direction:column;
}
.dv-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(5,167,5,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,167,5,.08) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 90% 80% at 60% 50%, black 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 60% 50%, black 10%, transparent 72%);
}
.dv-hero::after{
  content:''; position:absolute;
  top:-100px; right:-80px; z-index:0;
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(5,167,5,.18) 0%, transparent 68%);
}
.dv-hero-inner{
  position:relative; z-index:1;
  display:flex; align-items:stretch;
  min-height:300px;
}
.dv-hero-img-col{
  width:260px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px 24px 36px;
  position:relative;
}
.dv-hero-img-col::after{
  content:''; position:absolute; right:0; top:20%; bottom:20%;
  width:1px; background:rgba(255,255,255,.08);
}
.dv-hero-img{
  width:190px; height:190px; object-fit:contain;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)) drop-shadow(0 0 60px rgba(5,167,5,.18));
  transition:transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease;
  position:relative; z-index:1;
}
.dv-hero-img:hover{ transform:scale(1.08) translateY(-6px) rotate(-1deg); filter:drop-shadow(0 28px 52px rgba(0,0,0,.6)) drop-shadow(0 0 80px rgba(5,167,5,.28)) }
.dv-hero-img-badge{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  background:rgba(5,167,5,.92); color:#fff;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; border-radius:50px;
  white-space:nowrap; z-index:2;
  box-shadow:0 4px 14px rgba(5,167,5,.4);
}
.dv-hero-info{
  flex:1; padding:28px 32px 24px 28px;
  display:flex; flex-direction:column; gap:0;
  position:relative; z-index:1;
}
.dv-hero-toprow{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.dv-hero-breadcrumb{
  font-size:.65rem; color:rgba(255,255,255,.38);
  display:flex; align-items:center; gap:5px;
}
.dv-hero-breadcrumb strong{ color:rgba(5,220,100,.7); font-weight:500 }
.dv-hero-socials{
  display:flex; align-items:center; gap:6px;
}
.dv-social-btn{
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, border-color .2s, transform .2s;
  color:rgba(255,255,255,.6); text-decoration:none;
}
.dv-social-btn:hover{ background:rgba(5,167,5,.22); border-color:rgba(5,167,5,.4); color:#fff; transform:translateY(-2px) }
.dv-social-btn svg{ width:13px; height:13px; fill:currentColor }
.dv-hero-tag{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(5,167,5,.15); color:rgba(5,220,100,.9);
  border:1px solid rgba(5,167,5,.3);
  font-size:.62rem; font-weight:700; padding:3px 10px;
  border-radius:50px; margin-bottom:8px; letter-spacing:.06em;
  width:fit-content;
}
.dv-hero-name{
  font-size:1.62rem; font-weight:800; color:#fff !important;
  line-height:1.15; letter-spacing:-.5px; margin-bottom:10px;
}
.dv-hero-rating{
  display:flex; align-items:center; gap:7px; margin-bottom:14px;
}
.dv-hero-stars{ color:#f59e0b; font-size:.95rem; letter-spacing:1px }
.dv-hero-score{ font-weight:700; font-size:.88rem; color:#fff }
.dv-hero-reviews{ font-size:.78rem; color:rgba(255,255,255,.4) }
.dv-hero-price-row{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.dv-hero-price{
  font-size:1.62rem; font-weight:800;
  background:linear-gradient(135deg,#09db64,#30d158);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1;
}
.dv-hero-price-old{
  font-size:.88rem; color:rgba(255,255,255,.3); text-decoration:line-through;
}
.dv-hero-discount{
  font-size:.65rem; font-weight:700; background:rgba(255,214,10,.15);
  color:#ffd60a; padding:3px 8px; border-radius:50px;
  border:1px solid rgba(255,214,10,.25);
}
.dv-hero-pills{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:18px;
}
.dv-hero-pill{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:50px; padding:4px 10px;
  font-size:.68rem; color:rgba(255,255,255,.55);
}
.dv-hero-pill .dot{
  width:6px; height:6px; border-radius:50%; background:#30d158;
  box-shadow:0 0 6px rgba(48,209,88,.7); flex-shrink:0;
}
.dv-hero-pill .dot.orange{ background:#ffd60a; box-shadow:0 0 6px rgba(255,214,10,.7) }
.dv-hero-actions{
  display:flex; align-items:center; gap:8px;
}
.dv-hero-btn-wa{
  display:inline-flex; align-items:center; gap:7px;
  background:#25d366; color:#fff; border:none; border-radius:50px;
  padding:10px 20px; font-size:.82rem; font-weight:700;
  font-family:inherit; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 20px rgba(37,211,102,.36);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.dv-hero-btn-wa:hover{ background:#1ebe5d; transform:translateY(-2px); box-shadow:0 10px 28px rgba(37,211,102,.5) }
.dv-hero-btn-share{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.6);
  transition:all .2s;
}
.dv-hero-btn-share:hover{ background:rgba(5,167,5,.2); border-color:rgba(5,167,5,.4); color:#fff }
.dv-hero-statsbar{
  position:relative; z-index:1;
  display:flex; align-items:stretch;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.2);
}
.dv-hero-stat{
  flex:1; text-align:center;
  padding:10px 8px;
  border-right:1px solid rgba(255,255,255,.06);
}
.dv-hero-stat:last-child{ border-right:none }
.dv-hero-stat-val{
  font-size:.88rem; font-weight:700; color:#fff; line-height:1;
  background:linear-gradient(135deg,#09db64,#30d158);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.dv-hero-stat-lbl{
  font-size:.58rem; color:rgba(255,255,255,.35); margin-top:2px;
  text-transform:uppercase; letter-spacing:.05em;
}

@media(max-width:640px){
  .dv-hero-inner{ flex-direction:column }
  .dv-hero-img-col{ width:100%; padding:28px 24px 16px; }
  .dv-hero-img-col::after{ display:none }
  .dv-hero-img{ width:150px; height:150px }
  .dv-hero-info{ padding:16px 20px 20px }
  .dv-hero-name{ font-size:1.3rem }
  .dv-hero-price{ font-size:1.3rem }
}

.dv-body{ padding:20px 40px 40px; }

.dv-section-title{
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray);
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.dv-section-title::after{
  content:''; flex:1; height:1px; background:rgba(0,0,0,.08);
}

.dv-desc-long{
  font-size:.92rem; color:#444; line-height:1.72;
  font-weight:300; margin-bottom:18px;
}
.dv-desc-long strong{ color:var(--dark); font-weight:600 }

.dv-specs-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-bottom:18px;
}
.dv-spec-item{
  background:#f7f9f7; border-radius:14px;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.05);
  transition:border-color .2s, box-shadow .2s;
}
.dv-spec-item:hover{ border-color:rgba(5,167,5,.2); box-shadow:0 4px 16px rgba(5,167,5,.06) }
.dv-spec-lbl{
  font-size:.63rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gray); margin-bottom:4px;
}
.dv-spec-val{
  font-size:.9rem; font-weight:600; color:var(--dark); line-height:1.3;
}
.dv-spec-icon{ font-size:1.1rem; margin-bottom:4px }

.dv-highlights{
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; margin-bottom:18px;
}
.dv-highlight{
  display:flex; align-items:flex-start; gap:10px;
  background:#f7faf7;
  border:1px solid rgba(5,167,5,.1);
  border-radius:12px; padding:12px 14px;
}
.dv-highlight-dot{
  width:22px; height:22px; flex-shrink:0;
  background:var(--g-solar); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; margin-top:1px;
}
.dv-highlight-text{
  font-size:.82rem; color:#444; line-height:1.5; font-weight:300;
}
.dv-highlight-text strong{ color:var(--dark); font-weight:600 }

.dv-youtube-wrap{
  border-radius:16px; overflow:hidden;
  margin-bottom:28px; position:relative;
  background:#000;
  box-shadow:0 8px 32px rgba(0,0,0,.16);
}
.dv-youtube-wrap iframe{
  width:100%; aspect-ratio:16/9;
  border:none; display:block;
}
.dv-yt-label{
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.dv-yt-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:#ff0000; color:#fff;
  font-size:.7rem; font-weight:700; padding:3px 10px;
  border-radius:50px;
}
.dv-yt-desc{ font-size:.8rem; color:var(--gray) }

.dv-info-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:28px;
}
.dv-info-box{
  display:flex; align-items:center; gap:12px;
  background:#f7f9f7; border-radius:14px;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.06);
}
.dv-info-icon{ font-size:1.5rem; flex-shrink:0 }
.dv-info-label{ font-size:.68rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.05em }
.dv-info-val{ font-size:.88rem; font-weight:600; color:var(--dark); margin-top:1px }

.dv-actions{
  display:flex; gap:10px; align-items:center;
}
.dv-btn-back{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  background:#f2f4f2; border:1.5px solid #e0e2e0;
  cursor:pointer; font-family:inherit; color:var(--dark);
  transition:all .2s; font-size:1rem;
}
.dv-btn-back:hover{ background:#e8f9ee; border-color:rgba(5,167,5,.3); color:var(--primary) }
.dv-btn-wa{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#25d366; color:#fff; border:none; border-radius:50px;
  padding:14px 24px; font-size:.92rem; font-weight:700;
  font-family:inherit; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 20px rgba(37,211,102,.34);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.dv-btn-wa:hover{ background:#1ebe5d; transform:translateY(-2px); box-shadow:0 10px 28px rgba(37,211,102,.48) }

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:1024px){
  .about-wrap,.contact-wrap{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:768px){
  nav{padding:0 20px}
  .nav-links{
    display:none;position:fixed;top:58px;left:0;right:0;
    background:rgba(0,0,0,.97);
    flex-direction:column;padding:28px 24px;gap:20px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-links.open{display:flex}
  .nav-cta{display:none}
  .menu-toggle{display:flex}
  .features{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .hero-stats{flex-wrap:wrap}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.09);padding:14px 0}
  .stat-item:last-child{border-bottom:none}
  .footer-bottom{flex-direction:column;text-align:center}
  section{padding:80px 5%}
}
@media(max-width:480px){
  section{padding:64px 20px}
  .hero{padding:110px 20px 80px}
  .hero-btns{flex-direction:column;width:100%}
  .btn-p,.btn-s{justify-content:center}
  .contact-form{padding:28px 20px}
  .about-card{padding:32px 24px}
}

@media(max-width:1100px){
  .cam-map-wrap{ grid-template-columns: 175px 1fr 175px; gap:14px; }
}
@media(max-width:780px){
  .cam-map-section{ height: auto; min-height: 100dvh; }
  .cam-map-wrap{ grid-template-columns: 1fr; overflow: visible; }
  .cam-left-col, .cam-right-col{ flex-direction:row; flex-wrap:wrap; overflow:visible; }
  .cam-left-col .cam-card, .cam-right-col .cam-card{ flex:1 1 160px; }
  .cam-map-container{ grid-column: 1; height: 55vw; min-height: 300px; max-height: 500px; }
}
@media(max-width:480px){
  .cam-map-section .s-title h2{ font-size: 1.2rem; }
  .cam-left-col .cam-card, .cam-right-col .cam-card{ flex:1 1 130px; }
}
@media(max-width:640px){
  .dv-specs-grid{ grid-template-columns:1fr 1fr }
  .dv-highlights{ grid-template-columns:1fr }
  .dv-info-row{ grid-template-columns:1fr }
  .dv-hero-rating{ justify-content:center }
}