/* =============================================================
   Sawara Entreprise — feuille de style principale
   Source : design-handoff/home.html + snippets/hero.css
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  --green-900:#0F2E20;
  --green-800:#143A2A;
  --green-700:#1C4D38;
  --green-600:#27684D;
  --green-500:#7BC042;
  --green-400:#92CE5C;
  --green-200:#D6ECC1;
  --green-100:#EEF6E8;
  --green-50:#F6FBF1;
  --ivory:#FAFAF7;
  --paper:#FFFFFF;
  --ink:#0B1F16;
  --ink-2:#3A4A41;
  --ink-3:#6B7A72;
  --line:#E7EDE5;
  --whatsapp:#25D366;
  --star:#F5B423;
  --shadow-sm:0 1px 2px rgba(15,46,32,.04), 0 2px 8px rgba(15,46,32,.04);
  --shadow-md:0 6px 16px rgba(15,46,32,.06), 0 24px 48px -16px rgba(15,46,32,.10);
  --shadow-lg:0 12px 32px rgba(15,46,32,.10), 0 40px 80px -24px rgba(15,46,32,.16);
  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-xl:44px;
}

/* ---------- 2. Base reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

.display{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;letter-spacing:-0.025em;line-height:.95;text-wrap:balance;
}
.eyebrow{
  font-family:'Manrope';font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);
}

.container{width:100%;max-width:1280px;margin:0 auto;padding:0 20px}
@media (min-width:900px){.container{padding:0 40px}}

/* ---------- 3. Rotating word ---------- */
.rot{
  display:inline-block;position:relative;overflow:hidden;
  vertical-align:baseline;color:#6FBF3A;
  transition:width .45s cubic-bezier(.4,0,.2,1);
  will-change:width;
  min-width:280px;white-space:nowrap;text-align:left;
}
@media(max-width:999px){
  .rot{min-width:auto;display:inline;white-space:normal}
}
.rot::after{
  content:"";position:absolute;left:0;right:0;bottom:.05em;height:.10em;
  background:#6FBF3A;border-radius:3px;opacity:1;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  transform-origin:left;
}
.rot-word{
  display:inline-block;white-space:nowrap;font-style:italic;
  transition:opacity .28s ease, transform .28s ease;
}
.rot-word.is-out{opacity:0;transform:translateY(-0.45em)}
.rot-word.is-in {opacity:0;transform:translateY(0.45em)}
@media (prefers-reduced-motion:reduce){
  .rot, .rot-word{transition:none}
  .rot-word.is-out, .rot-word.is-in{opacity:1;transform:none}
}

/* ---------- 4. Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(15,46,32,.06);
}
.hdr{display:flex;align-items:center;justify-content:space-between;height:84px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-family:'Bricolage Grotesque'}
.brand .mark{
  width:54px;height:54px;border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(15,46,32,.08), inset 0 0 0 1px var(--line);
  flex-shrink:0;
}
.brand .mark img{width:130%;height:130%;object-fit:contain;object-position:center 35%}
.brand .word{font-size:21px;line-height:1;letter-spacing:-.02em;color:var(--green-900)}
.brand .word small{display:block;font-family:'Manrope';font-weight:500;font-size:10.5px;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
nav.primary{display:none}
@media (min-width:1000px){
  nav.primary{display:flex;gap:2px;flex:1;justify-content:center}
  nav.primary a{padding:9px 14px;border-radius:99px;font-weight:500;font-size:14px;color:var(--ink-2);transition:.18s;position:relative}
  nav.primary a:hover{color:var(--green-800)}
  nav.primary a::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;background:var(--green-500);border-radius:2px;transition:width .2s,left .2s}
  nav.primary a:hover::after{width:16px;left:calc(50% - 8px)}
}
.hdr-cta{display:flex;align-items:center;gap:10px}
.hdr-phone{display:none;font-size:13px;color:var(--ink-3);font-weight:500}
@media (min-width:1200px){.hdr-phone{display:flex;align-items:center;gap:6px}}
.hdr-phone svg{width:14px;height:14px;color:var(--green-700)}
.wa-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--whatsapp);color:#fff;font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:99px;
  box-shadow:0 6px 16px rgba(37,211,102,.32);
  transition:transform .15s ease, box-shadow .2s;
  white-space:nowrap;
}
.wa-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,211,102,.38)}
.wa-btn svg{width:16px;height:16px}
.wa-btn .label-long{display:none}
@media (min-width:520px){.wa-btn .label-long{display:inline}.wa-btn .label-short{display:none}}

/* ---------- 5. Hero ---------- */
.hero{position:relative;padding:28px 0 24px;overflow:hidden}
.hero-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:1000px){
  .hero{padding:36px 0 40px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
}
.hero .badges{display:flex;flex-wrap:wrap;gap:6px}
.hero .badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);
  padding:7px 14px;border-radius:99px;font-size:12.5px;color:var(--ink-2);font-weight:500;
  box-shadow:var(--shadow-sm);white-space:nowrap;
}
.hero .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px var(--green-100);flex-shrink:0}
.hero .badge strong{color:var(--ink);font-weight:700}
.hero h1{
  font-family:'Bricolage Grotesque';font-weight:700;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(26px,3.9vw,50px);
  color:var(--green-900);
  margin-top:12px;
  text-wrap:balance;
}
.hero p.lede{
  margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:560px;
}
@media (min-width:1000px){.hero p.lede{font-size:18.5px;margin-top:22px}}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media (min-width:1000px){.hero .cta-row{margin-top:28px}}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--whatsapp);color:#fff;font-weight:700;font-size:15px;
  padding:16px 22px;border-radius:99px;
  box-shadow:0 10px 24px rgba(37,211,102,.30), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .15s, box-shadow .2s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(37,211,102,.38)}
.btn-primary svg{width:18px;height:18px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:var(--green-800);font-weight:600;font-size:13px;
  padding:12px 18px;border-radius:99px;border:1px solid var(--line);
  transition:.2s;
}
@media (min-width:1000px){
  .btn-ghost{font-size:15px;padding:15px 22px}
}
.btn-ghost:hover{border-color:var(--green-500);background:var(--green-50)}

.trust-row{display:grid;gap:14px;margin-top:36px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.trust-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.trust .num{font-family:'Bricolage Grotesque';font-weight:700;font-size:28px;color:var(--green-800);letter-spacing:-.02em;line-height:1}
.trust .num .star{color:var(--star);font-size:18px;vertical-align:2px;margin-left:2px}
.trust .lbl{font-size:12.5px;color:var(--ink-3);font-weight:500;line-height:1.3}

/* ---------- 6. Credibility card ---------- */
.hero-visual{position:relative;width:100%}
.cred-card{
  background:#fff;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(20,58,42,.22), 0 2px 6px rgba(20,58,42,.06);
  border:1px solid var(--line);
  position:relative;
}
.cred-head{
  background:var(--green-800);color:#fff;
  padding:22px 26px;position:relative;overflow:hidden;
}
.cred-head::before{
  content:"";position:absolute;right:-100px;bottom:-100px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(123,192,66,.28), transparent 65%);pointer-events:none;
}
.cred-head .eye{
  font-family:'Manrope';font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-400);display:flex;align-items:center;gap:10px;position:relative;z-index:1;
}
.cred-head .eye::before{content:"";width:22px;height:1px;background:var(--green-400)}
.cred-head h3{
  margin-top:10px;font-family:'Bricolage Grotesque';font-weight:700;font-size:22px;letter-spacing:-.01em;
  line-height:1.15;position:relative;z-index:1;color:#fff;
}
.cred-head h3 b{color:var(--green-400)}

.cred-body{padding:18px 22px 14px;display:flex;flex-direction:column;gap:14px}

.cred-google{
  background:linear-gradient(135deg, var(--green-100) 0%, var(--green-50) 100%);
  border-radius:var(--r-md);
  padding:18px 18px;display:flex;align-items:center;gap:18px;
  position:relative;overflow:hidden;
  border:1px solid var(--green-200);
}
.cred-google::before{
  content:"";position:absolute;right:-50px;top:-50px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle, rgba(123,192,66,.20), transparent 70%);pointer-events:none;
}
.cred-google .rating{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex-shrink:0;
  padding-right:18px;border-right:1px solid var(--green-200);
}
.cred-google .rating .num{font-family:'Bricolage Grotesque';font-weight:700;font-size:40px;color:var(--green-900);letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:3px}
.cred-google .rating .num small{font-size:18px;color:var(--green-700);font-weight:600;letter-spacing:0}
.cred-google .rating .stars{color:var(--star);font-size:15px;letter-spacing:0;line-height:1}
.cred-google .info{position:relative;z-index:1;flex:1;min-width:0}
.cred-google .info .lbl{font-family:'Manrope';font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green-700);display:flex;align-items:center;gap:6px}
.cred-google .info .lbl .check{width:14px;height:14px;border-radius:50%;background:var(--green-500);color:#fff;display:inline-grid;place-items:center;font-size:9px;flex-shrink:0}
.cred-google .info h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;color:var(--green-900);letter-spacing:-.015em;line-height:1.15;margin-top:6px}
.cred-google .info .who{font-size:12px;color:var(--ink-3);font-weight:500;margin-top:4px;line-height:1.4}

@media (max-width:1100px) and (min-width:1000px){
  .cred-google{padding:14px}
  .cred-google .rating{padding-right:14px}
  .cred-google .rating .num{font-size:34px}
}

.cred-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 4px;border-bottom:1px solid var(--line);
}
.cred-item:last-child{border-bottom:0}
.cred-item .ic{
  width:38px;height:38px;border-radius:12px;background:var(--green-100);
  display:grid;place-items:center;color:var(--green-700);flex-shrink:0;
}
.cred-item .ic svg{width:18px;height:18px}
.cred-item .txt{flex:1;min-width:0}
.cred-item .ttl{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;color:var(--green-900);letter-spacing:-.005em;line-height:1.2}
.cred-item .sub{font-size:12.5px;color:var(--ink-3);font-weight:500;line-height:1.4;margin-top:2px}
.cred-item .meta{flex-shrink:0;display:flex;align-items:center;gap:4px}
.cred-item .stars-row{color:var(--star);letter-spacing:-1px;font-size:14px;line-height:1}
.cred-item .big-num{font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;color:var(--green-700);letter-spacing:-.02em}

.cred-foot{
  background:var(--green-50);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);
}
.cred-foot .label{font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cred-foot a{font-size:13px;color:var(--green-700);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.cred-foot a:hover{color:var(--green-900)}

.float-card{display:none}

/* ---------- 7. References strip ---------- */
.refs{padding:18px 0 8px}
.refs-wrap{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-sm);
}
@media (min-width:900px){
  .refs-wrap{flex-direction:row;align-items:center;padding:20px 28px;gap:28px}
}
.refs-wrap .lbl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.refs-list{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;flex:1}
.refs-list .item{font-family:'Bricolage Grotesque';font-weight:700;color:var(--ink);font-size:18px;letter-spacing:-.01em;opacity:.78}
.refs-list .item.it-eiffage{font-family:'Manrope';font-weight:800;letter-spacing:.04em}
.refs-list .item.it-embassy::before{content:"\25C6";color:var(--green-500);margin-right:8px;font-size:14px;vertical-align:1px}
.refs-note{font-size:13px;color:var(--ink-3);font-weight:500;white-space:nowrap;transition:color .2s}
.refs-note:hover{color:var(--green-700)}

/* ---------- 8. Visual block (dark green stats) ---------- */
.vblock{padding:48px 0 24px}
.vblock-inner{
  position:relative;background:var(--green-800);color:#fff;border-radius:var(--r-xl);
  padding:48px 28px;overflow:hidden;
}
@media (min-width:900px){.vblock-inner{padding:72px 64px}}
.vblock-inner::after{
  content:"";position:absolute;right:-120px;bottom:-180px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle, var(--green-600), transparent 65%);
  opacity:.7;pointer-events:none;
}
.vblock-inner::before{
  content:"";position:absolute;left:-80px;top:-80px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle, rgba(123,192,66,.28), transparent 70%);
  pointer-events:none;
}
.vblock-head{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:36px}
.vblock-head .eyebrow{color:var(--green-400)}
.vblock-head h2{
  font-family:'Bricolage Grotesque';font-weight:700;letter-spacing:-.025em;
  font-size:clamp(32px,5vw,52px);line-height:1;
}
.vblock-stats{
  position:relative;z-index:1;display:grid;gap:18px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){.vblock-stats{grid-template-columns:repeat(4,1fr);gap:28px}}
.stat{padding:24px 0;border-top:1px solid rgba(255,255,255,.18)}
.stat .num{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(40px,6vw,64px);line-height:.95;letter-spacing:-.03em;color:#fff;display:flex;align-items:baseline;gap:4px}
.stat .num span{font-size:.5em;color:var(--green-400)}
.stat .lbl{margin-top:8px;font-size:14px;color:rgba(255,255,255,.7);font-weight:500;line-height:1.4}

/* ---------- 9. Pourquoi ---------- */
.why{padding:64px 0 40px}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:36px}
@media (min-width:900px){.section-head{margin-bottom:48px}}
.section-head h2{font-family:'Bricolage Grotesque';font-weight:700;letter-spacing:-.025em;font-size:clamp(34px,5vw,56px);line-height:1;color:var(--green-900)}
.section-head p{color:var(--ink-2);font-size:17px;line-height:1.55;max-width:600px}

.why-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.why-grid{grid-template-columns:repeat(3,1fr)}}

.why-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  display:flex;flex-direction:column;gap:14px;transition:.25s;position:relative;overflow:hidden;
}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
.why-card .icn{
  width:52px;height:52px;border-radius:18px;background:var(--green-100);
  display:grid;place-items:center;color:var(--green-700);
}
.why-card .icn svg{width:24px;height:24px}
.why-card h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;color:var(--green-900);letter-spacing:-.015em;line-height:1.15}
.why-card p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.why-card.featured{background:var(--green-800);color:#fff;border-color:transparent}
.why-card.featured h3{color:#fff}
.why-card.featured p{color:rgba(255,255,255,.78)}
.why-card.featured .icn{background:var(--green-500);color:var(--green-900)}
.why-card.featured::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, rgba(123,192,66,.25), transparent 70%);
}

/* ---------- 10. Services ---------- */
.services{padding:48px 0 80px}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.svc-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto)}}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;gap:16px;
  transition:.25s;position:relative;overflow:hidden;min-height:200px;
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-200)}
.svc .num{
  position:absolute;top:18px;right:22px;
  font-family:'Bricolage Grotesque';font-weight:600;font-size:13px;color:var(--ink-3);letter-spacing:.06em;
}
.svc .icn{
  width:48px;height:48px;border-radius:16px;background:var(--green-100);
  display:grid;place-items:center;color:var(--green-700);
}
.svc .icn svg{width:22px;height:22px}
.svc h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;color:var(--green-900);letter-spacing:-.015em;line-height:1.15;margin-top:auto}
.svc p{color:var(--ink-2);font-size:14px;line-height:1.5}
.svc .arrow{margin-top:6px;display:inline-flex;align-items:center;gap:6px;color:var(--green-700);font-weight:600;font-size:13px}
.svc .arrow svg{width:14px;height:14px;transition:transform .2s}
.svc:hover .arrow svg{transform:translateX(4px)}

.svc.flagship{
  background:linear-gradient(135deg,var(--green-800) 0%,var(--green-700) 100%);
  color:#fff;border-color:transparent;
  grid-column:span 1;
}
@media (min-width:1000px){.svc.flagship{grid-column:span 2;grid-row:span 2;flex-direction:row;align-items:flex-end;padding:36px;gap:32px}}
.svc.flagship h3{color:#fff;font-size:clamp(26px,3.4vw,40px);max-width:380px}
.svc.flagship p{color:rgba(255,255,255,.78);font-size:15px;max-width:380px}
.svc.flagship .num{color:rgba(255,255,255,.5)}
.svc.flagship .icn{background:var(--green-500);color:var(--green-900)}
.svc.flagship .arrow{color:var(--green-400)}
.svc.flagship .left{display:flex;flex-direction:column;gap:18px;flex:1;z-index:1;position:relative}
.svc.flagship .right{
  position:relative;flex:1;align-self:stretch;min-height:200px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px),
    radial-gradient(ellipse at center, rgba(123,192,66,.4), transparent 60%);
  border-radius:var(--r-md);overflow:hidden;
  display:grid;place-items:center;
}
@media (max-width:999px){.svc.flagship .right{display:none}}
.svc.flagship .right .tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.25);padding:6px 12px;border-radius:99px;letter-spacing:.06em;
}
.svc.flagship .pill{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  background:rgba(123,192,66,.18);color:var(--green-400);
  padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

/* ---------- 11. Products ---------- */
.products{padding:24px 0 64px}
.products-bg{
  background:var(--green-100);
  border-radius:var(--r-xl);
  padding:56px 24px;
  position:relative;overflow:hidden;
}
@media (min-width:900px){.products-bg{padding:72px 56px}}
.products-bg::before{
  content:"";position:absolute;right:-180px;top:-180px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle, rgba(123,192,66,.35), transparent 65%);pointer-events:none;
}
.products-head{margin-bottom:32px;position:relative;z-index:1}
.products-head h2{color:var(--green-900)}

.geo-card{
  margin-top:18px;background:#fff;border-radius:var(--r-md);padding:20px 22px;
  display:flex;gap:14px;align-items:flex-start;max-width:780px;
  box-shadow:var(--shadow-sm);position:relative;z-index:1;
}
.geo-card .ic{flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--green-100);display:grid;place-items:center;color:var(--green-700)}
.geo-card .ic svg{width:18px;height:18px}
.geo-card p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.geo-card p strong{color:var(--green-900);font-weight:700}

.products-grid{position:relative;z-index:1;display:grid;gap:14px;grid-template-columns:1fr;margin-top:36px}
@media (min-width:640px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.products-grid{grid-template-columns:repeat(3,1fr)}}

.product{
  background:#fff;border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:14px;transition:.25s;border:1px solid transparent;
}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.product .visual{
  position:relative;height:140px;border-radius:var(--r-md);overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(123,192,66,.10) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, var(--green-50), #fff);
  display:grid;place-items:center;
}
.product .visual .icn{
  width:64px;height:64px;border-radius:20px;background:#fff;
  display:grid;place-items:center;color:var(--green-700);box-shadow:var(--shadow-md);z-index:1;
}
.product .visual .icn svg{width:28px;height:28px}
.product .visual .ph{
  position:absolute;bottom:10px;right:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3);
  background:rgba(255,255,255,.85);padding:4px 8px;border-radius:99px;letter-spacing:.04em;
}
.product .tag{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:var(--green-100);color:var(--green-800);
  padding:5px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.product h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;color:var(--green-900);letter-spacing:-.015em;line-height:1.2}
.product p{font-size:13.5px;line-height:1.5;color:var(--ink-2);flex:1}
.product .ask{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--green-700);font-weight:600;font-size:13px;
  border-top:1px dashed var(--line);padding-top:12px;margin-top:auto;
}
.product .ask svg{width:14px;height:14px;transition:transform .2s}
.product:hover .ask svg{transform:translateX(4px)}

/* ---------- 12. WhatsApp photo block ---------- */
.wa-photo{
  position:relative;z-index:1;margin-top:28px;
  background:var(--green-900);color:#fff;border-radius:var(--r-lg);
  padding:28px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;overflow:hidden;
}
@media (min-width:760px){.wa-photo{flex-direction:row;align-items:center;padding:32px 36px;gap:28px}}
.wa-photo::before{
  content:"";position:absolute;left:-80px;bottom:-80px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(123,192,66,.3), transparent 70%);pointer-events:none;
}
.wa-photo .ic{
  width:64px;height:64px;border-radius:20px;background:var(--green-500);color:var(--green-900);
  display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1;
}
.wa-photo .ic svg{width:28px;height:28px}
.wa-photo .txt{flex:1;position:relative;z-index:1}
.wa-photo .txt h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.15;letter-spacing:-.015em;color:#fff}
.wa-photo .txt p{margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.72);max-width:520px;line-height:1.5}
.wa-photo .btn-primary{flex-shrink:0;position:relative;z-index:1}

/* ---------- 13. CTA banner ---------- */
.cta-banner{padding:0 0 64px}
.cta-inner{
  background:var(--green-500);border-radius:var(--r-xl);padding:36px 28px;
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;position:relative;overflow:hidden;
}
@media (min-width:900px){.cta-inner{padding:56px 64px;flex-direction:row;align-items:center;justify-content:space-between}}
.cta-inner h2{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1;letter-spacing:-.025em;color:var(--green-900);max-width:620px}
.cta-inner p{color:var(--green-900);opacity:.78;font-size:15.5px;margin-top:8px;max-width:540px}
.cta-inner::after{
  content:"";position:absolute;right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);pointer-events:none;
}
.cta-inner .btn-dark{
  background:var(--green-900);color:#fff;font-weight:700;font-size:15px;
  padding:16px 22px;border-radius:99px;display:inline-flex;align-items:center;gap:10px;
  transition:.2s;flex-shrink:0;
}
.cta-inner .btn-dark:hover{background:#000;transform:translateY(-1px)}
.cta-inner .btn-dark svg{width:18px;height:18px}

/* ---------- 14. Footer ---------- */
footer.site{background:var(--green-900);color:rgba(255,255,255,.7);padding:48px 0 24px;border-radius:var(--r-xl) var(--r-xl) 0 0}
.ft-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:760px){.ft-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr}}
.ft-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
.ft-brand .brand .word{color:#fff}
.ft-col h4{font-family:'Bricolage Grotesque';color:#fff;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px}
.ft-col a:hover{color:var(--green-400)}
.ft-bottom{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.5)}

/* ---------- 15. Selection ---------- */
::selection{background:var(--green-500);color:#fff}

/* ---------- 16. Trust logos ---------- */
.trust-logos-section{padding:60px 0;background:#ffffff;overflow:hidden}
.trust-logos-section .section-label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-600);margin-bottom:4px}
.trust-logos-section h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.025em;font-size:clamp(26px,3.8vw,44px);line-height:1.07;color:var(--green-900);margin:10px 0 14px;max-width:560px}
.trust-logos-section p{color:var(--ink-2);font-size:16px;line-height:1.65;margin-top:10px;max-width:680px;margin-bottom:30px}
.trust-marquee{width:100%;overflow:hidden;border:1px solid #e4eade;background:#f7fbf4;border-radius:24px;padding:18px 0}
.trust-track{display:flex;align-items:center;gap:18px;width:max-content;animation:trustMarquee 34s linear infinite}
.trust-marquee:hover .trust-track{animation-play-state:paused}
.trust-logo{width:190px;height:90px;border-radius:18px;background:#ffffff;border:1px solid #dcebd4;box-shadow:0 4px 14px rgba(18,59,34,.06);display:flex;align-items:center;justify-content:center;padding:18px;flex:0 0 auto}
.trust-logo img{max-width:100%;max-height:54px;object-fit:contain;filter:grayscale(1);opacity:.76;transition:filter .2s ease,opacity .2s ease,transform .2s ease}
.trust-logo:hover img{filter:grayscale(0);opacity:1;transform:scale(1.03)}
@keyframes trustMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){
  .trust-logos-section{padding:44px 0}
  .trust-track{animation-duration:26s}
  .trust-logo{width:150px;height:74px;padding:14px}
  .trust-logo img{max-height:44px}
}



/* ===== MENU MOBILE HAMBURGER ===== */
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--green-900);border-radius:2px;transition:transform .25s,opacity .25s}
@media(min-width:1000px){.nav-toggle{display:none}}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--green-900);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2rem}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:'Bricolage Grotesque',sans-serif;font-size:1.6rem;font-weight:700;color:#fff;padding:14px 32px;text-decoration:none;width:100%;text-align:center;border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s,background .2s;letter-spacing:-.01em}
.mobile-nav a:first-of-type{border-top:1px solid rgba(255,255,255,.08)}
.mobile-nav a:hover{color:var(--green-400)}
.mobile-nav a:last-child{margin-top:1rem;background:var(--green-500);border-radius:99px;border:none;color:#fff;font-size:1rem;padding:14px 32px}
.mobile-nav a:last-child:hover{background:var(--green-400)}
.mobile-nav-close{position:absolute;top:1.25rem;right:1.25rem;background:rgba(255,255,255,.1);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:1.2rem;line-height:1;transition:background .2s}
.mobile-nav-close:hover{background:rgba(255,255,255,.2)}
.mobile-nav-logo{margin-bottom:2rem;font-family:'Bricolage Grotesque',sans-serif;font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}