/* ============================================================================
SOLVEK — Socle commun des pages services
----------------------------------------------------------------------------
Utilisation dans une page :
(blue | warm | violet | green)
L'accent change la personnalite de la page (couleur des boutons, icones,
degrades) SANS toucher a la structure ni a la typographie : meme famille,
personnalites distinctes.
Ne mets JAMAIS de couleur en dur dans une page : utilise les variables.
Une modif de marque = ce fichier, et lui seul.
============================================================================ */
/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
/* Neutres — clair */
--bg:#ffffff; --bg-soft:#f5f7fa; --surface:#ffffff;
--ink:#0f1729; --muted:#54617a; --faint:#7b8699;
--border:#e6e9f0; --border-strong:#d5dae4;
/* Semantiques (invariants) */
--green:#16a34a; --green-soft:#e9f8ef;
--crit:#dc2626; --high:#ea580c; --med:#d9a406; --low:#16a34a;
--star:#f59e0b;
/* Ombres, grille, rayons */
--shadow:0 10px 30px -12px rgba(20,30,60,.18);
--shadow-lg:0 24px 60px -20px rgba(20,30,60,.28);
--grid-line:rgba(90,110,150,.08);
--r-card:22px; --r-btn:14px; --r-sm:14px;
/* Accent par defaut (bleu) */
--accent:#3b82f6; --accent-strong:#2563eb; --accent-soft:#eaf1ff; --accent-2:#7c3aed;
}
:root[data-theme="dark"]{
--bg:#0f1424; --bg-soft:#141a2c; --surface:#181f34;
--ink:#eef2fb; --muted:#9fabc7; --faint:#7f8caa;
--border:rgba(125,145,195,.16); --border-strong:rgba(125,145,195,.28);
--green:#34d399; --green-soft:rgba(52,211,153,.12);
--crit:#f87171; --high:#fb923c; --med:#fbbf24; --low:#34d399;
--star:#fbbf24;
--shadow:0 12px 34px -14px rgba(0,0,0,.55);
--shadow-lg:0 28px 70px -22px rgba(0,0,0,.6);
--grid-line:rgba(150,175,230,.06);
--accent:#5c95ff; --accent-strong:#3b82f6; --accent-soft:rgba(59,130,246,.14); --accent-2:#a78bfa;
}
/* Accents par page */
:root[data-accent="blue"]{ --accent:#3b82f6; --accent-strong:#2563eb; --accent-soft:#eaf1ff; --accent-2:#7c3aed; }
:root[data-accent="warm"]{ --accent:#f59e0b; --accent-strong:#d97706; --accent-soft:#fef3c7; --accent-2:#f97316; }
:root[data-accent="violet"]{ --accent:#8b5cf6; --accent-strong:#7c3aed; --accent-soft:#f1ebff; --accent-2:#3b82f6; }
:root[data-accent="green"]{ --accent:#10b981; --accent-strong:#059669; --accent-soft:#e6f8f1; --accent-2:#14b8a6; }
:root[data-theme="dark"][data-accent="blue"]{ --accent:#5c95ff; --accent-strong:#3b82f6; --accent-soft:rgba(59,130,246,.14); --accent-2:#a78bfa; }
:root[data-theme="dark"][data-accent="warm"]{ --accent:#fbbf24; --accent-strong:#f59e0b; --accent-soft:rgba(245,158,11,.15); --accent-2:#fb923c; }
:root[data-theme="dark"][data-accent="violet"]{ --accent:#a78bfa; --accent-strong:#8b5cf6; --accent-soft:rgba(139,92,246,.16); --accent-2:#5c95ff; }
:root[data-theme="dark"][data-accent="green"]{ --accent:#34d399; --accent-strong:#10b981; --accent-soft:rgba(16,185,129,.14); --accent-2:#2dd4bf; }
:root{ --grad:linear-gradient(120deg,var(--accent),var(--accent-2)); }
/* Alias de compatibilite — anciennes pages ecrites avec --primary */
:root{ --primary:var(--accent); --primary-strong:var(--accent-strong); --primary-soft:var(--accent-soft); }
/* ---------- 2. BASE ------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);
line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.mono{font-family:'Fira Code',ui-monospace,monospace}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-strong);color:#fff;padding:12px 20px;
border-radius:0 0 12px 0;z-index:100;font-weight:600}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. HEADER / NAV --------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.site-header nav{height:70px;display:flex;align-items:center;gap:20px}
/* LE LOGO S'ECRIT SOLVEK, EN UN SEUL MOT.
`gap:8px` sur un conteneur flex separe TOUS ses enfants — y compris le texte
« Solve » et le . Le k se retrouvait donc a 8 px du e, et la
marque devenait « Solve k » sur les quatre pages. La marge ne doit espacer
que la fleche de retour. */
.logo{font-family:'Sora',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.03em;
display:inline-flex;align-items:center;gap:0;color:var(--ink)}
/* LE K EST BLEU. TOUJOURS.
Il valait `var(--accent)`, c'est-a-dire la couleur de la PAGE : le k etait
orange sur depannage, violet sur applications, vert sur formation. Une marque
qui change de couleur selon l'endroit ou on la regarde n'est plus une marque,
c'est un element de decoration. Le bleu vient du logo d'origine
(`solvek-logo-dark.svg`), il ne depend d'aucune page. */
.logo .k{color:#3b82f6}
.logo .back{color:var(--faint);font-size:1.15rem;font-weight:600;margin-right:9px}
.nav-links{display:none;gap:26px;margin-left:8px}
.nav-links a{font-size:.93rem;color:var(--muted);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.2s;flex-shrink:0}
.icon-btn:hover{color:var(--ink);border-color:var(--border-strong)}
/* ---------- 4. BOUTONS --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.98rem;
font-family:inherit;border-radius:var(--r-btn);padding:12px 22px;cursor:pointer;border:none;
transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent-strong);color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-primary:hover{background:var(--accent);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-lg{padding:15px 28px;font-size:1.05rem}
.nav-cta{padding:10px 16px;font-size:.9rem}
.cta-short{display:inline}
.cta-long{display:none}
@media(min-width:560px){.cta-short{display:none}.cta-long{display:inline}}
/* Lien telephone — CTA fort, surtout sur les pages a intention urgente */
.phone-link{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1.02rem;
color:var(--accent-strong);white-space:nowrap}
.phone-link:hover{color:var(--accent)}
.phone-link svg{flex-shrink:0}
/* Dans la barre de nav : masque tant que la place manque, sinon ca ecrase le CTA */
.phone-link.nav-only{display:none}
@media(min-width:1120px){.phone-link.nav-only{display:inline-flex}}
/* ---------- 5. SECTIONS / TITRES ---------------------------------------- */
section{position:relative}
.band{padding:88px 0}
.band.soft{background:var(--bg-soft)}
.band.tight{padding:40px 0}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--accent);margin-bottom:14px}
.h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;margin-bottom:16px}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.center{text-align:center;margin:0 auto}
.center .lead{margin-left:auto;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--accent-strong);
background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
padding:7px 14px;border-radius:100px}
/* ---------- 6. HERO ------------------------------------------------------ */
.hero{position:relative;padding:64px 0 56px;overflow:hidden}
.bg-grid{position:absolute;inset:0;z-index:0;
background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
background-size:30px 30px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(120px);z-index:0;opacity:.45}
.blob.b1{width:420px;height:420px;background:color-mix(in srgb,var(--accent) 45%,transparent);top:-120px;left:-60px}
.blob.b2{width:380px;height:380px;background:color-mix(in srgb,var(--accent-2) 34%,transparent);top:40px;right:-40px}
:root[data-theme="dark"] .blob{opacity:.3}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.7rem);font-weight:800;margin-bottom:20px}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.28rem);color:var(--muted);max-width:38ch;margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-note{margin-top:18px;font-size:.86rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 18px}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note svg{color:var(--green);flex-shrink:0}
.hero-stats{display:flex;gap:30px;margin-top:32px;flex-wrap:wrap}
.hero-stats .n{font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;color:var(--ink)}
.hero-stats .n span{color:var(--accent)}
.hero-stats .l{font-size:.85rem;color:var(--faint);margin-top:2px;max-width:16ch}
/* ---------- 7. GRILLES & CARTES ----------------------------------------- */
.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px}
@media(min-width:760px){.grid.cols-2,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:720px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:26px;
transition:transform .25s,box-shadow .25s,border-color .25s}
.card.lift:hover{transform:translateY(-6px);box-shadow:var(--shadow);
border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.card h3{font-size:1.22rem;margin-bottom:9px}
.card h4{font-size:1.08rem;margin-bottom:7px}
.card p{font-size:.95rem;color:var(--muted)}
.card .tech{margin-top:12px;font-family:'Fira Code',monospace;font-size:.73rem;color:var(--faint)}
.card .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent-strong);
background:var(--accent-soft);padding:4px 11px;border-radius:100px;margin-bottom:14px}
/* Pastilles d'icone */
.ic{border-radius:14px;display:grid;place-items:center;margin-bottom:18px;width:50px;height:50px}
.ic.sm{width:46px;height:46px;border-radius:13px;margin-bottom:16px}
.ic-accent{background:var(--accent-soft);color:var(--accent-strong)}
.ic-green{background:var(--green-soft);color:var(--green)}
.ic-warn{background:color-mix(in srgb,var(--high) 15%,transparent);color:var(--high)}
.ic-alt{background:color-mix(in srgb,var(--accent-2) 15%,transparent);color:var(--accent-2)}
/* ---------- 8. BANDEAU GARANTIES ---------------------------------------- */
.guarantees{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);
border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
@media(min-width:600px){.guarantees{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.guarantees{grid-template-columns:repeat(4,1fr)}}
.g{background:var(--surface);padding:20px 22px;display:flex;gap:13px;align-items:flex-start}
.g svg{color:var(--accent);flex-shrink:0;margin-top:3px}
.g h4{font-size:.97rem;margin-bottom:3px}
.g p{font-size:.85rem;color:var(--muted);line-height:1.45}
/* ---------- 9. TIMELINE ETAPES ------------------------------------------ */
.steps{margin-top:48px;display:grid;gap:6px}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:8px 0}
.step-rail{display:flex;flex-direction:column;align-items:center}
.step-num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
font-family:'Sora',sans-serif;font-weight:700;color:#fff;background:var(--grad);
box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.step-line{width:2px;flex:1;background:var(--border-strong);margin:6px 0}
.step:last-child .step-line{display:none}
.step-body{padding-bottom:30px}
.step-body h3{font-size:1.25rem;margin-bottom:6px}
.step-body p{color:var(--muted);max-width:56ch}
/* ---------- 10. LISTE A COCHES ------------------------------------------ */
.checklist{display:grid;gap:14px}
.checklist .dl{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
border:1px solid var(--border);border-radius:16px;padding:18px 20px}
.checklist .ck{width:26px;height:26px;border-radius:8px;background:var(--green-soft);color:var(--green);
display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.checklist h4{font-size:1rem;margin-bottom:3px}
.checklist p{font-size:.9rem;color:var(--muted)}
.ul-check{list-style:none;display:grid;gap:11px}
.ul-check li{display:flex;gap:10px;font-size:.93rem;color:var(--muted)}
.ul-check li svg{flex-shrink:0;color:var(--green);margin-top:3px}
/* ---------- 11. OFFRES / TARIFS ----------------------------------------- */
.offers{display:grid;grid-template-columns:1fr;gap:22px;margin-top:44px}
@media(min-width:840px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:30px;
display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.offer:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.offer.pop{border:2px solid var(--accent);box-shadow:0 0 0 5px var(--accent-soft),var(--shadow-lg);position:relative}
.offer.pop .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;
font-size:.72rem;font-weight:700;padding:5px 16px;border-radius:100px;white-space:nowrap}
.offer h3{font-size:1.3rem;margin-bottom:6px}
.offer .who{font-size:.9rem;color:var(--faint);margin-bottom:18px;min-height:3.6em}
.offer .price{font-family:'Sora',sans-serif;font-weight:800;font-size:1.9rem;margin-bottom:2px}
.offer .price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.offer .price-note{font-size:.8rem;color:var(--faint);margin-bottom:20px}
.offer ul{list-style:none;display:grid;gap:11px;margin-bottom:18px}
.offer li{display:flex;gap:10px;font-size:.93rem;color:var(--muted)}
.offer li svg{flex-shrink:0;color:var(--green);margin-top:3px}
.offer .honest{font-size:.85rem;color:var(--faint);margin-bottom:22px;padding-top:14px;
border-top:1px dashed var(--border-strong)}
.offer .btn{margin-top:auto;width:100%}
.offers-note{margin-top:30px;text-align:center;color:var(--muted);font-size:.97rem;
max-width:66ch;margin-left:auto;margin-right:auto}
.offers-note strong{color:var(--ink);font-weight:600}
/* ---------- 12. AVIS CLIENTS -------------------------------------------- */
.reviews{display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px}
@media(min-width:760px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.reviews.cols-3{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px}
.review-top{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.review-avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;flex-shrink:0;
display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:700;font-size:1.15rem}
.review-name{font-weight:600;font-size:.98rem}
.review-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:2px}
.stars{color:var(--star);font-size:.9rem;letter-spacing:.05em}
.google-badge{font-size:.75rem;color:var(--faint)}
.review p{color:var(--muted);font-size:.95rem;font-style:italic}
/* ---------- 13. FAQ ------------------------------------------------------ */
.faq{max-width:800px;margin:44px auto 0;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-family:'Sora',sans-serif;font-weight:600;
font-size:1.05rem;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{margin-left:auto;color:var(--accent);transition:transform .25s;flex-shrink:0}
.faq details[open] summary .chev{transform:rotate(45deg)}
.faq .ans{padding:0 22px 22px;color:var(--muted);font-size:.98rem}
.faq .ans strong{color:var(--ink)}
.faq .ans p+p{margin-top:12px}
/* ---------- 14. CTA FINAL ------------------------------------------------ */
.cta-final{background:var(--grad);border-radius:28px;padding:56px 40px;text-align:center;color:#fff;overflow:hidden}
.cta-final h2{font-size:clamp(1.9rem,4vw,2.7rem);color:#fff;margin-bottom:14px}
.cta-final>p{font-size:1.15rem;opacity:.92;max-width:52ch;margin:0 auto 30px}
.cta-final .btn-primary{background:#fff;color:var(--accent-strong);box-shadow:0 12px 30px -8px rgba(0,0,0,.35)}
.cta-final .btn-primary:hover{background:#f4f7ff}
.cta-final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-final .btn-ghost:hover{background:rgba(255,255,255,.12)}
.cta-final .alt{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;align-items:center;margin-top:24px}
.cta-final .alt a{color:#fff;font-size:.95rem;opacity:.92;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.cta-final .alt a:hover{opacity:1}
/* ---------- 15. VENTE CROISEE (bloc « je fais aussi ») ------------------- */
/* Present sur CHAQUE page service : maillage interne pour Google + rappel
du positionnement « un seul interlocuteur » pour le visiteur. */
.cross{display:grid;grid-template-columns:1fr;gap:16px;margin-top:36px}
@media(min-width:680px){.cross{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.cross{grid-template-columns:repeat(3,1fr)}}
.cross a{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
border-radius:16px;padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.cross a:hover{transform:translateY(-4px);box-shadow:var(--shadow);
border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.cross .ci{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-strong);
display:grid;place-items:center;flex-shrink:0}
.cross h4{font-size:1rem;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.cross h4 .arrow{color:var(--accent);transition:transform .2s}
.cross a:hover h4 .arrow{transform:translateX(3px)}
.cross p{font-size:.87rem;color:var(--muted);line-height:1.45}
.cross a[aria-current="page"]{opacity:.5;pointer-events:none}
/* ---------- 16. FOOTER --------------------------------------------------- */
.site-footer{padding:52px 0 40px;border-top:1px solid var(--border)}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot .logo{font-size:1.2rem}
.foot p{color:var(--faint);font-size:.88rem}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.9rem}
.foot-links a:hover{color:var(--ink)}
.foot-legal{margin-top:28px;color:var(--faint);font-size:.82rem}
/* ---------- 17. BARRE MOBILE COLLANTE ----------------------------------- */
/* Pour les pages a intention urgente (depannage). Ajouter */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;gap:10px;padding:10px 14px;
background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);
border-top:1px solid var(--border)}
.sticky-bar .btn{flex:1;padding:13px 16px}
@media(max-width:768px){
.sticky-bar{display:flex}
body.has-sticky{padding-bottom:76px}
}
/* ---------- 18. ANIMATIONS ---------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);
transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--green);
background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
padding:6px 14px;border-radius:100px}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.blob,.pulse-dot{animation:none}
html{scroll-behavior:auto}
.card.lift:hover,.offer:hover,.cross a:hover{transform:none}
}
/* ---------- 19. RESPONSIVE ---------------------------------------------- */
@media(max-width:640px){
.band{padding:64px 0}
.step-body{padding-bottom:24px}
.cta-final{padding:44px 24px}
}