/* ===================== REMPLISSAGE AUTOMATIQUE ===================== */
.fill-page .fillp-sec{min-height:calc(var(--vh,100vh) - 92px);padding-top:110px}
.fillp-sec{position:relative;padding:120px 80px;background:linear-gradient(180deg,var(--white) 0%,var(--bg) 45%,var(--bg2) 100%);overflow:hidden}
.fillp-sec::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--p4),transparent)}
.fillp-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto}

/* breadcrumb (réutilise .template-breadcrumb existant) */
.fillp-inner .template-breadcrumb{margin-bottom:40px}

/* HERO */
.fillp-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}
.fillp-hero-copy{text-align:left}
.fillp-pill{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p);background:rgba(255,255,255,.9);border:1px solid var(--border2);border-radius:999px;padding:9px 20px;box-shadow:0 4px 16px rgba(99,102,241,.1);margin-bottom:26px}
.fillp-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px rgba(99,102,241,.18)}
.fillp-title{font-size:clamp(40px,5vw,62px);font-weight:800;letter-spacing:-2.5px;line-height:1.02;color:var(--ink);margin:0 0 22px}
.fillp-title span{color:var(--p)}
.fillp-sub{font-size:18px;color:var(--ink3);line-height:1.65;max-width:520px;margin:0 0 32px}
.fillp-cta{display:inline-flex;align-items:center;gap:11px;font-size:16px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--p) 0%,#7c5cff 100%);border-radius:14px;padding:18px 34px;box-shadow:0 16px 38px rgba(99,102,241,.4);transition:transform .2s,box-shadow .2s}
.fillp-cta-arrow{font-size:18px;transition:transform .2s}
.fillp-cta:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(99,102,241,.5)}
.fillp-cta:hover .fillp-cta-arrow{transform:translateX(4px)}
.fillp-reassure{font-size:13px;color:var(--ink4);font-weight:500;margin:18px 0 0;letter-spacing:.01em}

/* DÉMO — carte de remplissage */
.fillp-demo{position:relative;justify-self:center;width:100%;max-width:480px}
.fillp-demo-card{position:relative;z-index:1;background:var(--white);border:1px solid var(--border2);border-radius:22px;padding:26px;box-shadow:0 30px 70px rgba(99,102,241,.18)}

/* Avatar Gisel — guide qui supervise l'aperçu (corps en arrière de la carte) */
.fillp-demo-guide{position:absolute;z-index:0;top:-72px;right:-30px;width:104px;height:104px;display:flex;align-items:flex-end;justify-content:center}
.fillp-demo-guide-glow{position:absolute;inset:0;margin:auto;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.32),rgba(129,140,248,.14) 55%,transparent 72%);filter:blur(3px);animation:fillpGuideGlow 4.5s ease-in-out infinite}
@keyframes fillpGuideGlow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}}
.fillp-demo-guide-img{position:relative;z-index:1;width:96px;height:auto;filter:drop-shadow(0 14px 22px rgba(79,70,229,.32));animation:fillpFloat 5s ease-in-out infinite}
.fillp-demo-guide-bubble{position:absolute;z-index:6;top:14px;right:90px;white-space:nowrap;font-size:11.5px;font-weight:700;color:var(--ink);background:var(--white);border:1px solid var(--border2);border-radius:999px;padding:7px 13px;box-shadow:0 8px 22px rgba(99,102,241,.18);animation:fillpFloat 5s ease-in-out infinite .25s}
.fillp-demo-guide-bubble::after{content:'';position:absolute;top:50%;right:-5px;transform:translateY(-50%) rotate(45deg);width:9px;height:9px;background:var(--white);border-right:1px solid var(--border2);border-top:1px solid var(--border2)}
.fillp-demo-file{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-bottom:22px}
.fillp-demo-file-ic{display:flex;color:var(--ink4)}.fillp-demo-file-ic svg{width:20px;height:20px}
.fillp-demo-file-name{flex:1;font-size:14px;font-weight:600;color:var(--ink2)}
.fillp-demo-file-check{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--p5);color:var(--p)}
.fillp-demo-file-check svg{width:12px;height:12px}
.fillp-demo-profile{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.fillp-demo-avatar{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--p),#7c5cff);color:#fff;font-size:15px;font-weight:800;letter-spacing:.5px}
.fillp-demo-id{display:flex;flex-direction:column;gap:3px}
.fillp-demo-name{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.fillp-demo-role{font-size:12.5px;color:var(--ink3)}
.fillp-demo-statusrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.fillp-demo-status{font-size:12px;font-weight:600;color:var(--p);letter-spacing:.02em;transition:color .3s}
.fillp-demo-status.done{color:#22c55e}
.fillp-demo-pct{font-size:13px;font-weight:800;color:var(--p);letter-spacing:-.3px;transition:color .3s}
.fillp-demo-pct.done{color:#22c55e}
.fillp-demo-bar{height:8px;border-radius:5px;background:var(--p5);overflow:hidden;margin-bottom:22px}
.fillp-demo-bar-fill{display:block;height:100%;width:8%;border-radius:5px;background:linear-gradient(90deg,var(--p),#7c5cff);transition:width .5s cubic-bezier(.4,0,.2,1)}
.fillp-demo-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fillp-demo-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fillp-demo-rows li{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink4);transition:color .35s}
/* section en cours de remplissage : surbrillance légère */
.fillp-demo-rows li.active{color:var(--p);font-weight:600}
/* section terminée : texte normal */
.fillp-demo-rows li.done{color:var(--ink3)}
.fillp-demo-row-ck{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--bg2);color:transparent;transform:scale(.8);transition:transform .25s,background .25s,color .25s}
.fillp-demo-row-ck svg{width:12px;height:12px}
/* tick affiché quand la section est terminée — et il RESTE */
.fillp-demo-rows li.done .fillp-demo-row-ck{background:#e9fbef;color:#22c55e;transform:scale(1)}
.fillp-demo-rows li.just-done .fillp-demo-row-ck{animation:fillpCkPop .4s ease}
@keyframes fillpCkPop{0%{transform:scale(.4)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
/* badge flottant "Champ par champ" */
.fillp-demo-badge{position:absolute;z-index:2;right:-26px;bottom:-44px;display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--border2);border-radius:16px;padding:13px 18px;box-shadow:0 18px 40px rgba(99,102,241,.2);animation:fillpFloat 4.5s ease-in-out infinite}
@keyframes fillpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fillp-demo-badge-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--p),#7c5cff);color:#fff}
.fillp-demo-badge-ic svg{width:20px;height:20px}
.fillp-demo-badge-txt{display:flex;flex-direction:column;gap:1px}
.fillp-demo-badge-txt strong{font-size:14px;font-weight:800;color:var(--ink)}
.fillp-demo-badge-txt em{font-style:normal;font-size:12px;color:var(--ink3)}

/* ── LE PROBLÈME : avant / après ── */
.fillp-problem{margin-top:110px}
.fillp-problem-head{text-align:center;margin-bottom:48px}
.fillp-pill-warn{color:#e8590c;background:#fff4ec;border-color:#ffd9be}
.fillp-pill-warn::before{background:#fb923c;box-shadow:0 0 0 4px rgba(251,146,60,.18)}
.fillp-problem-title{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-1.4px;line-height:1.12;color:var(--ink);margin:0 auto 16px;max-width:780px}
.fillp-problem-title span{color:var(--p)}
.fillp-problem-sub{font-size:16px;color:var(--ink3);line-height:1.65;max-width:620px;margin:0 auto}

.fillp-ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:28px;max-width:920px;margin:0 auto}
.fillp-ba-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:22px;padding:26px;box-shadow:0 10px 40px rgba(99,102,241,.07)}
.fillp-ba-before{position:relative;border-color:#ffd9be;background:linear-gradient(180deg,#fffaf6 0%,#ffffff 60%)}

/* étapes process : badges flottants HORS de la carte (côtés gauche/droite) */
.fillp-pain{position:absolute;inset:0;pointer-events:none;z-index:4}
.fillp-pain-badge{position:absolute;top:var(--y);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;font-weight:700;color:#dc2626;background:#fff;border:1px solid #fecaca;border-radius:999px;padding:6px 12px;box-shadow:0 8px 22px rgba(220,38,38,.16);opacity:0;animation:fillpPain 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.fillp-pain-badge svg{width:14px;height:14px;flex-shrink:0}
/* à gauche : collé au bord gauche de la carte, débordant vers l'extérieur */
.fillp-pain-l{left:12px}
/* à droite : collé au bord droit, débordant vers l'extérieur */
.fillp-pain-r{right:12px}
/* centré horizontalement dans la carte Avant */
.fillp-pain-c{left:50%;transform:translate(-50%,16px);justify-content:center;width:max-content}

/* badges positifs GISEL (carte Après) */
.fillp-gain{position:absolute;inset:0;pointer-events:none;z-index:4}
.fillp-gain-badge{position:absolute;top:var(--y);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;font-weight:700;color:var(--p);background:#fff;border:1px solid var(--p4);border-radius:999px;padding:6px 12px;box-shadow:0 8px 22px rgba(99,102,241,.16);opacity:0;animation:fillpPain 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.fillp-gain-badge svg{width:14px;height:14px;flex-shrink:0}
.fillp-gain-l{left:12px}
.fillp-gain-r{right:12px}
.fillp-gain-c{left:50%;transform:translate(-50%,16px);justify-content:center;width:max-content}
/* centré au milieu de la carte (vertical + horizontal) */
.fillp-gain-mid{top:50%;left:50%;transform:translate(-50%,-50%);justify-content:center;width:max-content}
.fillp-gain-strong{color:#fff;background:linear-gradient(135deg,#16a34a,#22c55e);border-color:transparent;font-size:12px;box-shadow:0 10px 26px rgba(22,163,74,.42)}
.fillp-gain-strong.fillp-gain-c{left:62%}
/* badge final accentué */
.fillp-pain-strong{color:#fff;background:#dc2626;border-color:#dc2626;font-size:12px;box-shadow:0 10px 26px rgba(220,38,38,.35)}
@keyframes fillpPain{
  0%{opacity:0}
  8%{opacity:1}
  82%{opacity:1}
  92%{opacity:0}
  100%{opacity:0}
}
@keyframes fillpPain{
  0%{opacity:0;transform:scale(.6) translateY(6px)}
  6%{opacity:1;transform:scale(1.08) translateY(0)}
  10%{transform:scale(1) translateY(0)}
  16%{transform:scale(1) translateY(-3px)}
  22%{transform:scale(1) translateY(0)}
  60%{opacity:1;transform:scale(1) translateY(0)}
  70%{opacity:0;transform:scale(.85) translateY(-6px)}
  100%{opacity:0;transform:scale(.85) translateY(-6px)}
}
.fillp-ba-after{position:relative;border:1.5px solid var(--p);background:linear-gradient(180deg,#fbfaff 0%,#ffffff 60%);box-shadow:0 20px 56px rgba(99,102,241,.2)}
.fillp-ba-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.fillp-ba-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 13px}
.fillp-ba-tag-warn{color:#e8590c;background:#fff4ec}
.fillp-ba-tag-ok{color:var(--p);background:var(--p5)}
.fillp-ba-time{font-size:26px;font-weight:800;letter-spacing:-1px;color:#e8590c;line-height:1}
.fillp-ba-time-ok{color:var(--p)}

/* visuel RH débordé (carte Avant) — compact, en ligne */
.fillp-ba-overload{display:flex;flex-direction:row;align-items:center;gap:12px;margin-bottom:16px;padding:11px 14px;background:#fff6f0;border:1px dashed #ffd0b5;border-radius:12px}
.fillp-ba-overload-img{width:78px;height:auto;flex-shrink:0;animation:fillpOverload 3.5s ease-in-out infinite;transform-origin:bottom center}
@keyframes fillpOverload{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.fillp-ba-overload-txt{margin:0;font-size:12px;font-weight:600;color:#c2410c;line-height:1.35;text-align:left}

.fillp-ba-form{display:flex;flex-direction:column;gap:14px;flex:1}
.fillp-ba-field label{display:block;font-size:11px;font-weight:600;color:var(--ink4);margin-bottom:6px;letter-spacing:.02em}
.fillp-ba-input{position:relative;display:flex;align-items:center;min-height:38px;padding:9px 13px;font-size:13.5px;color:var(--ink2);background:var(--bg);border:1px solid var(--border);border-radius:10px}
/* avant : curseur qui clignote */
.fillp-ba-caret{display:inline-block;width:1.5px;height:15px;background:#fb923c;margin-left:1px;animation:fillpCaret 1s step-end infinite}
@keyframes fillpCaret{50%{opacity:0}}
.fillp-ba-empty{min-height:38px}
/* après : champ rempli + coche */
.fillp-ba-filled{justify-content:space-between;gap:8px;color:var(--ink);font-weight:500;border-color:var(--p4);background:#fbfaff}
.fillp-ba-ck{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#e9fbef;color:#22c55e}
.fillp-ba-ck svg{width:11px;height:11px}
.fillp-ba-after .fillp-ba-field{opacity:0;animation:fillpBaPop .4s ease forwards}
.fillp-ba-after .fillp-ba-field:nth-child(1){animation-delay:.1s}
.fillp-ba-after .fillp-ba-field:nth-child(2){animation-delay:.2s}
.fillp-ba-after .fillp-ba-field:nth-child(3){animation-delay:.3s}
.fillp-ba-after .fillp-ba-field:nth-child(4){animation-delay:.4s}
@keyframes fillpBaPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.fillp-ba-foot{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.4}
.fillp-ba-foot-ic{flex-shrink:0;display:flex}
.fillp-ba-foot-ic svg{width:18px;height:18px}
.fillp-ba-foot-warn{color:#c2410c;border-top-color:#ffe4cf}
.fillp-ba-foot-ok{color:var(--p);border-top-color:var(--p4)}

.fillp-ba-arrow{display:flex;align-items:center;justify-content:center;color:var(--p)}
.fillp-ba-arrow svg{width:30px;height:30px}

/* COMMENT ÇA MARCHE : 3 étapes — premium violet */
.fillp-how{margin-top:110px}
.fillp-how-head{text-align:center;margin-bottom:54px}
.fillp-how-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:26px;max-width:920px;margin:0 auto}
/* ligne pointillée reliant les étapes (derrière les cartes) */
.fillp-how-grid::before{content:'';position:absolute;top:62px;left:16%;right:16%;height:0;border-top:2px dashed var(--p4);z-index:0}

.fillp-how-card{position:relative;z-index:1;background:var(--white);border:1px solid var(--border);border-radius:24px;padding:34px 28px 30px;box-shadow:0 10px 40px rgba(99,102,241,.07);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
/* halo dégradé en haut de carte qui se révèle au hover */
.fillp-how-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--p),#7c5cff);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.fillp-how-card:hover{transform:translateY(-6px);border-color:var(--p4);box-shadow:0 24px 60px rgba(99,102,241,.20)}
.fillp-how-card:hover::after{transform:scaleX(1)}

/* numéro d'étape : gros texte violet dégradé, sans pastille */
.fillp-how-num{display:block;font-size:44px;font-weight:800;letter-spacing:-1.5px;line-height:1;color:transparent;background:linear-gradient(135deg,var(--p),#7c5cff);-webkit-background-clip:text;background-clip:text;margin-bottom:18px}

.fillp-how-card-t{font-size:17px;font-weight:800;color:var(--ink);line-height:1.3;margin:0 0 10px}
.fillp-how-card-p{font-size:14px;color:var(--ink3);line-height:1.6;margin:0}

.fillp-how-cta-wrap{text-align:center;margin-top:50px}
.fillp-how-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--p) 0%,#7c5cff 100%);border-radius:999px;padding:18px 40px;box-shadow:0 16px 40px rgba(99,102,241,.42);transition:transform .2s,box-shadow .2s}
.fillp-how-cta::after{content:'→';font-size:17px;transition:transform .2s}
.fillp-how-cta:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(99,102,241,.52)}
.fillp-how-cta:hover::after{transform:translateX(4px)}
.fillp-how-reassure{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);margin:26px 0 0}

/* CE QUE VOUS GAGNEZ : 4 bénéfices — premium violet */
.fillp-gainb{margin-top:110px}
.fillp-gainb-head{text-align:center;margin-bottom:54px}
.fillp-gainb-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;gap:22px;max-width:1040px;margin:0 auto}
.fillp-gainb-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:22px;padding:30px 24px;box-shadow:0 10px 40px rgba(99,102,241,.07);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.fillp-gainb-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--p),#7c5cff);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.fillp-gainb-card:hover{transform:translateY(-6px);border-color:var(--p4);box-shadow:0 24px 60px rgba(99,102,241,.20)}
.fillp-gainb-card:hover::after{transform:scaleX(1)}
.fillp-gainb-ic{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--p),#7c5cff);box-shadow:0 12px 26px rgba(99,102,241,.35);margin-bottom:18px;transition:transform .25s ease}
.fillp-gainb-ic svg{width:24px;height:24px}
.fillp-gainb-card:hover .fillp-gainb-ic{transform:scale(1.08) rotate(-3deg)}
.fillp-gainb-card-t{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3;margin:0 0 10px}
.fillp-gainb-card-p{font-size:13.5px;color:var(--ink3);line-height:1.6;margin:0}

/* POURQUOI C'EST DIFFÉRENT : 2 cartes horizontales — premium violet */
.fillp-diff{margin-top:110px}
.fillp-diff-head{text-align:center;margin-bottom:54px}
.fillp-diff-grid{display:grid;grid-template-columns:repeat(2,1fr);align-items:stretch;gap:26px;max-width:920px;margin:0 auto}
.fillp-diff-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:24px;padding:36px 32px;box-shadow:0 10px 40px rgba(99,102,241,.07);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.fillp-diff-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--p),#7c5cff);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.fillp-diff-card:hover{transform:translateY(-6px);border-color:var(--p4);box-shadow:0 24px 60px rgba(99,102,241,.20)}
.fillp-diff-card:hover::after{transform:scaleX(1)}
.fillp-diff-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--p),#7c5cff);box-shadow:0 12px 28px rgba(99,102,241,.35);margin-bottom:22px;transition:transform .25s ease}
.fillp-diff-ic svg{width:26px;height:26px}
.fillp-diff-card:hover .fillp-diff-ic{transform:scale(1.08) rotate(-3deg)}
.fillp-diff-card-t{font-size:18px;font-weight:800;color:var(--ink);line-height:1.3;margin:0 0 12px}
.fillp-diff-card-p{font-size:14px;color:var(--ink3);line-height:1.65;margin:0}

/* FAQ remplissage : réutilise .contact-faq */
.fillp-faq{margin-top:110px}

/* CTA final remplissage : bloc clair centré */
.fillp-final{text-align:center;margin-top:80px}
.fillp-final-title{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-1.4px;line-height:1.12;color:var(--ink);margin:0 auto 16px;max-width:680px}
.fillp-final-title span{color:var(--p)}
.fillp-final-sub{font-size:16px;color:var(--ink3);line-height:1.6;max-width:520px;margin:0 auto 30px}
.fillp-final-cta{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--p) 0%,#7c5cff 100%);border-radius:999px;padding:18px 40px;box-shadow:0 16px 40px rgba(99,102,241,.42);transition:transform .2s,box-shadow .2s}
.fillp-final-cta:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(99,102,241,.52)}
.fillp-final-reassure{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);margin:38px 0 0}
.fillp-final-link{display:inline-block;margin-top:22px;font-size:14px;font-weight:600;color:var(--p);text-decoration:none;letter-spacing:.01em;transition:transform .2s,opacity .2s}
.fillp-final-link:hover{transform:translateX(3px);opacity:.85}

@media(max-width:760px){
  .fillp-ba{grid-template-columns:1fr;gap:18px;padding:0}
  .fillp-ba-arrow{transform:rotate(90deg)}
  .fillp-pain,.fillp-gain{display:none}
  .fillp-how-grid{grid-template-columns:1fr}
  .fillp-how-grid::before{display:none}
  .fillp-how-cta{width:100%}
  .fillp-gainb-grid{grid-template-columns:1fr}
  .fillp-diff-grid{grid-template-columns:1fr}
}

@media(max-width:980px){
  .fillp-sec{padding:90px 40px}
  .fillp-hero{grid-template-columns:1fr;gap:48px}
  .fillp-hero-copy{text-align:center}
  .fillp-sub{margin-left:auto;margin-right:auto}
  .fillp-demo{order:2}
  .fillp-gainb-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .fillp-sec{padding:64px 20px}
  .fillp-cta{width:100%;justify-content:center}
  .fillp-demo-badge{right:0;bottom:-14px}
}

@media(max-width:560px){
  .fillp-demo-guide{ display:none; }
  .fillp-title{ font-size:clamp(26px,7vw,38px); letter-spacing:-1.5px; }
  .fillp-sub{ font-size:14px; }
  .fillp-reassure{ font-size:11px; }
}