*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fff;--bg2:#f8f9fb;--bg3:#f0f2f5;--bg4:#e8eaed;
  --tx:#1a1a2e;--tx2:#4a4a6a;--tx3:#8888a8;--tx4:#b0b0c0;
  --acc:#4f46e5;--acc2:#6366f1;--acc3:#818cf8;--accbg:#eef2ff;--accbg2:rgba(79,70,229,.06);
  --gn:#10b981;--gnbg:#ecfdf5;
  --bd:#e5e7eb;--bd2:#d1d5db;
  --ff:'Inter',system-ui,sans-serif;--fd:'Space Grotesk',sans-serif;
  --r:8px;--rl:14px;--rxl:20px;
  --out:cubic-bezier(.25,.46,.45,.94);--expo:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--ff);color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{width:100%;max-width:clamp(1140px,92vw,1520px);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.center{text-align:center}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none;transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease}
.nav.scrolled{background:rgba(255,255,255,.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 0 rgba(0,0,0,.04)}

.nav-row{display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-brand{font-family:var(--fd);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.nav-menu{display:flex;gap:8px}
.nav-link{font-size:.8125rem;font-weight:500;color:var(--tx2);position:relative;transition:color .2s}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1.5px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--out)}
.nav-link:hover{color:var(--tx)}.nav-link:hover::after{transform:scaleX(1);transform-origin:left}
.nav-link.active{color:var(--acc)}.nav-link.active::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:16px}
.nav-avail{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;color:var(--gn)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--gn);display:inline-block;animation:pls 2s infinite}
@keyframes pls{0%,100%{opacity:1}50%{opacity:.3}}
.nav-cta{font-size:.8125rem;font-weight:600;color:#fff;background:var(--acc);padding:8px 20px;border-radius:var(--r);transition:all .25s var(--spring);white-space:nowrap}
.nav-cta:hover{background:var(--acc2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(79,70,229,.2)}
.nav-cta-demo{background:var(--tx);color:#fff;position:relative}
.nav-cta-demo::before{content:'';position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,0));pointer-events:none}
.nav-cta-demo:hover{background:#000;box-shadow:0 6px 22px rgba(26,26,46,.32)}
.nav-link-mobile{display:none}
.burger{display:none;background:none;border:none;width:28px;height:20px;position:relative;cursor:pointer}
.burger span{position:absolute;left:0;width:100%;height:1.5px;background:var(--tx);border-radius:2px;transition:all .3s}
.burger span:first-child{top:3px}.burger span:last-child{bottom:3px}
.burger.open span:first-child{top:50%;transform:translateY(-50%) rotate(45deg)}
.burger.open span:last-child{bottom:50%;transform:translateY(50%) rotate(-45deg)}
@media(max-width:1024px){.nav-end{gap:10px}.nav-cta{padding:8px 14px;font-size:.78rem}}
@media(max-width:900px){.nav-menu{gap:22px}.nav-link{font-size:.82rem}}
@media(max-width:768px){.nav-menu,.nav-avail,.nav-cta{display:none}.burger{display:block}.nav-menu.open{display:flex;flex-direction:column;gap:16px;position:absolute;top:60px;left:0;right:0;background:var(--bg);padding:24px;border-bottom:1px solid var(--bd);box-shadow:0 16px 48px rgba(0,0,0,.06);animation:slideD .3s var(--expo)}.nav-link-mobile{display:block;color:var(--tx);font-weight:600}}
@keyframes slideD{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-family:var(--ff);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .25s var(--spring);white-space:nowrap;border:none;text-decoration:none;letter-spacing:-.01em}
.btn-primary{background:var(--acc);color:#fff}.btn-primary:hover{background:var(--acc2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,70,229,.2)}
.btn-primary:active{transform:scale(.97) translateY(0)}
.btn-light{background:var(--bg2);color:var(--tx);border:1px solid var(--bd)}.btn-light:hover{background:var(--bg3);border-color:var(--bd2)}
.btn-ghost{background:transparent;color:var(--acc);font-weight:600}.btn-ghost:hover{background:var(--accbg)}
.btn-full{width:100%;justify-content:center}
.btn-lg{padding:14px 28px;font-size:.9375rem}
.btn svg{transition:transform .2s var(--spring)}.btn:hover svg{transform:translateX(3px)}

/* HERO — heysimon centered style */
.hero-new {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 72px 0 40px;
  background: linear-gradient(180deg, #fafaff 0%, #fff 100%);
}
.hero-new .wrap {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

/* Background mesh blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.hb1 { width: 500px; height: 500px; background: rgba(79,70,229,.1); top: -10%; left: -5%; animation: hbMove1 20s ease-in-out infinite; }
.hb2 { width: 600px; height: 600px; background: rgba(129,140,248,.08); top: 10%; right: -10%; animation: hbMove2 25s ease-in-out infinite; }
.hb3 { width: 400px; height: 400px; background: rgba(99,102,241,.06); bottom: -5%; left: 30%; animation: hbMove3 22s ease-in-out infinite; }
@keyframes hbMove1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes hbMove2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} }
@keyframes hbMove3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-20px)} }

/* Title */
.hero-title {
  font-family: 'Plus Jakarta Sans', var(--ff);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tx);
  margin-bottom: 24px;
}
.hero-title .accent-box {
  display: inline-block;
  background: var(--acc);
  color: #fff;
  padding: 4px 20px;
  border-radius: 14px;
  transform: rotate(-1deg);
  position: relative;
}

/* Subtitle */
.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--tx2);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 32px;
}

/* Buttons */
.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* 3 Steps */
.hero-steps {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  margin-bottom: 36px;
}
.hero-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--tx2);
  font-weight: 500;
}
.hero-step-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-step-ico svg { width: 16px; height: 16px; stroke: var(--tx3); }
.hero-step-sep {
  width: 1px;
  height: 20px;
  background: var(--bd);
}

/* Trust metrics */
.hero-trust {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  color: var(--tx3);
  font-weight: 500;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Floating badges */
.hero-float {
  position: absolute;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(79,70,229,.08);
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03), 0 8px 32px rgba(79,70,229,.06);
  font-size: .8rem;
  font-weight: 600;
  color: var(--tx);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
}
.hero-float::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(129,140,248,.05), transparent);
  z-index: -1;
  pointer-events: none;
}
.hf-ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}
.hf1 .hf-ico { border-radius: 10px; }
.hf2 .hf-ico { border-radius: 50%; }
.hf3 .hf-ico { border-radius: 8px; transform: rotate(6deg); }
.hf4 .hf-ico { border-radius: 12px 4px 12px 4px; }
.hf-ico svg { width: 14px; height: 14px; }
.hf1 { top: 22%; left: 4%; animation: hfFloat1 4s ease-in-out infinite; border-radius: 16px 16px 4px 16px; }
.hf2 { top: 18%; right: 4%; animation: hfFloat2 4.5s ease-in-out infinite; border-radius: 16px 16px 16px 4px; }
.hf3 { bottom: 28%; left: 6%; animation: hfFloat3 3.8s ease-in-out infinite; border-radius: 4px 16px 16px 16px; }
.hf4 { bottom: 22%; right: 6%; animation: hfFloat4 5s ease-in-out infinite; border-radius: 16px 4px 16px 16px; }

/* Each float has a unique motion path */
@keyframes hfFloat1 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(8px,-14px) rotate(2deg)} }
@keyframes hfFloat2 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-10px,-12px) rotate(-1.5deg)} }
@keyframes hfFloat3 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(12px,-10px) rotate(1deg)} }
@keyframes hfFloat4 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-8px,-16px) rotate(-2deg)} }

@media (max-width: 768px) {
  .hero-float { display: none; }
  .hero-steps { flex-direction: column; gap: 16px; }
  .hero-step-sep { display: none; }
  .hero-trust { flex-direction: column; gap: 12px; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* TRUST BAR - subtle badges (no big numbers) */
.trust-bar{padding:28px 0;border-bottom:1px solid var(--bd);background:var(--bg2)}
.trust-line{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.trust-badge{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:500;color:var(--tx2)}
.trust-badge svg{color:var(--acc);flex-shrink:0}
@media(max-width:640px){.trust-line{gap:14px}.trust-badge{font-size:.75rem}}

/* SECTIONS */
.sec{padding:clamp(64px,7vw,100px) 0}
.sec-alt{background:var(--bg2)}
.sec-head{margin-bottom:clamp(32px,4vw,48px)}
.sec-head.center{text-align:center}
.sec-head.center .h2-sub{margin-left:auto;margin-right:auto}
.tag{display:inline-block;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:14px;padding:6px 14px;background:var(--accbg);border-radius:100px}
.h2{font-family:var(--fd);font-size:clamp(1.75rem,2.8vw,2.4rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--tx);margin-bottom:0}
.h2-sub{font-size:1rem;color:var(--tx2);margin-top:14px;max-width:540px;line-height:1.65}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:32px 28px;transition:all .35s var(--expo);position:relative;overflow:hidden;display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.07);border-color:var(--acc)}
.svc-card.pop{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 16px 40px rgba(79,70,229,.1);transform:scale(1.02)}
.svc-card.pop:hover{transform:scale(1.02) translateY(-4px)}
.svc-badge{position:absolute;top:16px;right:16px;background:var(--acc);color:#fff;padding:4px 12px;border-radius:100px;font-size:.6875rem;font-weight:700;letter-spacing:.03em}
.svc-icon{width:48px;height:48px;border-radius:12px;background:var(--accbg);display:flex;align-items:center;justify-content:center;color:var(--acc);margin-bottom:20px;transition:all .3s;flex-shrink:0}
.svc-card:hover .svc-icon{background:var(--acc);color:#fff;transform:scale(1.05)}
.svc-card h3{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-bottom:8px;color:var(--tx)}
.svc-card>p{font-size:.875rem;color:var(--tx2);line-height:1.6;margin-bottom:20px}
.svc-price{font-family:var(--fd);font-size:1.6rem;font-weight:800;color:var(--tx);margin-bottom:4px;letter-spacing:-.02em}
.svc-price-note{font-size:.75rem;color:var(--tx3);margin-bottom:20px}
.svc-list{list-style:none;margin-bottom:24px;flex:1}
.svc-list li{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:var(--tx2);padding:6px 0}
.svc-list svg{color:var(--gn);flex-shrink:0;margin-top:4px}
.svc-cta{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--acc);transition:gap .3s;margin-top:auto}
.svc-cta:hover{gap:10px}
@media(max-width:768px){.svc-grid{grid-template-columns:1fr}}

/* FEATURES SHOWCASE */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feat{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:24px 20px;text-align:center;transition:all .3s var(--expo)}
.feat:hover{border-color:var(--acc);background:var(--accbg2);transform:translateY(-2px)}
.feat-ico{width:40px;height:40px;border-radius:10px;background:var(--accbg);display:flex;align-items:center;justify-content:center;color:var(--acc);margin:0 auto 12px}
.feat h4{font-family:var(--fd);font-size:.8125rem;font-weight:600;margin-bottom:4px}
.feat p{font-size:.75rem;color:var(--tx3);line-height:1.5}
@media(max-width:768px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.feat-grid{grid-template-columns:1fr}}

/* MARQUEE */
.marquee{padding:18px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);overflow:hidden;background:var(--bg2)}
.mq-track{display:flex;gap:24px;white-space:nowrap;animation:mq 28s linear infinite;font-family:var(--fd);font-size:.8125rem;font-weight:500;color:var(--tx3)}
.mq-dot{width:3px;height:3px;background:var(--bd2);border-radius:50%;align-self:center;flex-shrink:0;display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}

/* WORK */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.work-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;transition:all .35s var(--expo);text-decoration:none;color:var(--tx)}
.work-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.06);border-color:var(--bd2)}
.work-card img{width:100%;height:200px;object-fit:cover;transition:transform .5s var(--expo)}
.work-card:hover img{transform:scale(1.03)}
.wc-body{padding:20px}
.wc-body h3{font-family:var(--fd);font-size:.9375rem;font-weight:600;margin-bottom:4px}
.wc-body p{font-size:.8125rem;color:var(--tx2);line-height:1.5;margin-bottom:8px}
.wc-tags{display:flex;gap:5px;flex-wrap:wrap}
.wc-tag{padding:2px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:100px;font-size:.6875rem;color:var(--tx3)}
@media(max-width:640px){.work-grid{grid-template-columns:1fr}}

/* OFFER */
.offer{background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:var(--rxl);padding:clamp(36px,5vw,56px);color:#fff;position:relative;overflow:hidden}
.offer::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 60%);pointer-events:none}
.offer>*{position:relative;z-index:1}
.offer h2{font-family:var(--fd);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;line-height:1.15;margin-bottom:12px}
.offer p{font-size:.9375rem;opacity:.9;line-height:1.65;margin-bottom:28px;max-width:500px}
.offer .btn{background:#fff;color:var(--acc);font-weight:700}
.offer .btn:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}

/* STEPS */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:28px 20px;transition:all .3s var(--expo)}
.step-card:hover{border-color:var(--acc);background:var(--accbg2)}
.step-num{font-family:var(--fd);font-size:.6875rem;font-weight:700;color:var(--acc);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accbg);margin-bottom:14px}
.step-card h3{font-family:var(--fd);font-size:.9375rem;font-weight:600;margin-bottom:6px}
.step-card p{font-size:.8125rem;color:var(--tx2);line-height:1.6}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps-grid{grid-template-columns:1fr}}

/* CTA SECTION */
.cta-sec{padding:clamp(72px,8vw,100px) 0;text-align:center;background:var(--bg2)}
.cta-p{font-size:1rem;color:var(--tx2);margin:12px auto 28px;max-width:440px;line-height:1.65}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* FOOTER */
.footer{padding:48px 0 0;border-top:1px solid var(--bd);background:var(--bg2)}
.footer-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px}
.footer-brand{font-family:var(--fd);font-weight:700;font-size:.9375rem;display:block;margin-bottom:6px}
.footer-desc{font-size:.8125rem;color:var(--tx3);line-height:1.55}
.footer-title{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);display:block;margin-bottom:12px}
.footer-col a{display:block;font-size:.8125rem;color:var(--tx2);margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--acc)}
.footer-col p{font-size:.8125rem;color:var(--tx2);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.footer-btm{padding:16px 0;border-top:1px solid var(--bd);font-size:.75rem;color:var(--tx3)}
@media(max-width:768px){.footer-row{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:480px){.footer-row{grid-template-columns:1fr}}

/* FORMS */
.panel{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:clamp(24px,3vw,36px);box-shadow:0 1px 3px rgba(0,0,0,.03)}
.panel-title{font-family:var(--fd);font-size:1.5rem;font-weight:600;margin-bottom:20px}
.f{margin-bottom:14px}
.f label{display:block;font-size:.75rem;font-weight:600;color:var(--tx3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.f input,.f textarea,.f select{width:100%;padding:10px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);font-family:var(--ff);font-size:.875rem;color:var(--tx);outline:none;transition:border-color .25s,box-shadow .25s}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,70,229,.06)}
.f input::placeholder,.f textarea::placeholder{color:var(--tx4)}
.f textarea{resize:vertical}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-msg{margin-top:10px;padding:10px 14px;border-radius:var(--r);font-size:.8125rem;display:none}
.form-msg.ok{display:block;background:var(--gnbg);color:var(--gn)}
.form-msg.err{display:block;background:#fef2f2;color:#ef4444}
@media(max-width:480px){.f-row{grid-template-columns:1fr}}

/* PAGE HEADER */
.page-hdr{padding:clamp(100px,12vw,140px) 0 clamp(48px,6vw,72px);background:linear-gradient(180deg,var(--accbg) 0%,var(--bg) 100%);position:relative;overflow:hidden}
.page-hdr::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(79,70,229,.06) 0%,transparent 70%);pointer-events:none}
.page-hdr .wrap{position:relative;z-index:1}
.page-hdr .tag{margin-bottom:16px}
.page-hdr h1.h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.08;letter-spacing:-.03em;max-width:720px}
.page-hdr .h2-sub{margin-top:16px;font-size:clamp(1rem,1.2vw,1.125rem);max-width:600px}

/* FAQ */
.faq-list{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--bd)}
.faq-item:first-child{border-top:1px solid var(--bd)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;background:none;border:none;font-family:var(--ff);font-size:.9375rem;font-weight:600;color:var(--tx);cursor:pointer;text-align:left;transition:color .2s}
.faq-q:hover{color:var(--acc)}
.faq-q svg{flex-shrink:0;transition:transform .3s var(--expo);color:var(--tx3)}
.faq-item.open .faq-q svg{transform:rotate(45deg);color:var(--acc)}
.faq-item.open .faq-q{color:var(--tx)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--expo)}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{font-size:.875rem;color:var(--tx2);line-height:1.7;padding-bottom:20px}
.faq-a p a{color:var(--acc);font-weight:600}
.faq-a p strong{color:var(--tx);font-weight:600}

/* FAQ LAYOUT with sidebar */
.faq-layout{display:grid;grid-template-columns:260px 1fr;gap:clamp(32px,4vw,72px);align-items:start;max-width:1320px;margin:0 auto}
.faq-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px}
.faq-side-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:12px;padding:0 14px}
.faq-side-link{display:block;padding:10px 14px;font-size:.875rem;color:var(--tx2);border-radius:8px;transition:all .2s;font-weight:500}
.faq-side-link:hover{background:var(--bg2);color:var(--tx)}
.faq-side-link.active{background:var(--accbg);color:var(--acc);font-weight:600}
.faq-content{min-width:0}
.faq-cat{margin-bottom:48px;scroll-margin-top:90px}
.faq-cat:last-child{margin-bottom:0}
.faq-cat-title{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:var(--tx);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--bd);display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
.faq-cat-title svg{color:var(--acc);flex-shrink:0}
.faq-cat .faq-list{max-width:none;margin:0}
@media(max-width:768px){.faq-layout{grid-template-columns:1fr;gap:24px}.faq-side{position:static;flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--bd);margin-bottom:8px}.faq-side-title{display:none}.faq-side-link{flex-shrink:0;white-space:nowrap;font-size:.8125rem;padding:8px 14px}}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:36px 32px;transition:all .35s var(--expo);display:flex;flex-direction:column;position:relative}
.price-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.07)}
.price-card.featured{border:2px solid var(--acc);box-shadow:0 0 0 1px var(--acc),0 20px 60px rgba(79,70,229,.12);transform:scale(1.03);z-index:1}
.price-card.featured:hover{transform:scale(1.03) translateY(-4px)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;padding:5px 16px;border-radius:100px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 12px rgba(79,70,229,.3)}
.price-name{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-bottom:6px;color:var(--tx)}
.price-desc{font-size:.8125rem;color:var(--tx3);margin-bottom:20px}
.price-val{font-family:var(--fd);font-size:2.4rem;font-weight:800;color:var(--tx);margin-bottom:4px;letter-spacing:-.03em;line-height:1}
.price-val .price-from{font-size:.8125rem;font-weight:500;color:var(--tx3);display:block;margin-bottom:4px}
.price-val .price-ht{font-size:.875rem;font-weight:500;color:var(--tx3);margin-left:4px}
.price-note{font-size:.75rem;color:var(--tx3);margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--bd)}
.price-list{list-style:none;margin-bottom:28px;flex:1}
.price-list li{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:var(--tx2);padding:7px 0}
.price-list li strong{color:var(--tx);font-weight:600}
.price-list svg{color:var(--gn);flex-shrink:0;margin-top:3px}
.price-card .btn{margin-top:auto}
@media(max-width:768px){.price-grid{grid-template-columns:1fr;gap:16px}.price-card.featured{transform:none}.price-card.featured:hover{transform:translateY(-4px)}}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:start}
.about-text h3{font-family:var(--fd);font-size:1.5rem;font-weight:600;margin:24px 0 8px}
.about-text p{font-size:.9375rem;color:var(--tx2);line-height:1.7}
@media(max-width:768px){.about-grid{grid-template-columns:1fr}}

/* ABOUT PAGE - new layout */
.about-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,5vw,80px);align-items:start;max-width:1320px;margin:0 auto 60px}
.about-story{}
.about-section-title{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--tx);margin-bottom:14px;letter-spacing:-.02em}
.about-section-title.center{text-align:center;font-size:1.5rem;margin-bottom:10px}
.about-story p{font-size:.9375rem;color:var(--tx2);line-height:1.75;margin-bottom:14px}
.about-story p strong{color:var(--tx);font-weight:600}

.about-sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.about-card{background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:24px;transition:all .3s var(--expo)}
.about-card:hover{border-color:var(--acc);transform:translateX(2px);box-shadow:0 6px 24px rgba(0,0,0,.04)}
.about-card-ico{width:44px;height:44px;border-radius:12px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:all .3s}
.about-card:hover .about-card-ico{background:var(--acc);color:#fff}
.about-card h3{font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--tx)}
.about-card p{font-size:.8125rem;color:var(--tx2);line-height:1.55;margin:0}

.about-stack-section{max-width:720px;margin:0 auto;padding-top:40px;border-top:1px solid var(--bd)}
.about-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center}
.about-stack span{padding:6px 14px;background:var(--bg);border:1px solid var(--bd);border-radius:100px;font-size:.8125rem;font-weight:500;color:var(--tx2);transition:all .2s var(--spring)}
.about-stack span:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}

@media(max-width:768px){.about-layout{grid-template-columns:1fr}.about-sidebar{position:static}}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.info-item{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--tx2);transition:color .2s}
.info-item:hover{color:var(--acc)}
.info-item svg{color:var(--tx3);flex-shrink:0}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* DEMO */
.demo-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,4vw,56px);align-items:start}
.demo-checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px}
.demo-checks li{display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;color:var(--tx2);line-height:1.5}
.demo-checks li strong{color:var(--tx);font-weight:600}
.demo-checks .ico-circle{width:24px;height:24px;border-radius:50%;background:var(--gnbg);color:var(--gn);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
@media(max-width:768px){.demo-grid{grid-template-columns:1fr}}

/* DEMO HERO */
.demo-hero{padding:clamp(100px,12vw,150px) 0 clamp(60px,7vw,90px);background:linear-gradient(135deg,var(--accbg) 0%,#fff 100%);position:relative;overflow:hidden}
.demo-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:700px;height:700px;background:radial-gradient(circle,rgba(79,70,229,.1) 0%,transparent 70%);pointer-events:none}
.demo-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.demo-hero-label{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:#fff;border:1px solid var(--bd);border-radius:100px;font-size:.75rem;font-weight:600;color:var(--acc);margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.demo-hero h1{font-family:var(--fd);font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;margin-bottom:20px;color:var(--tx)}
.demo-hero h1 em{font-style:normal;color:var(--acc);position:relative;display:inline-block}
.demo-hero h1 em::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:10px;background:rgba(79,70,229,.15);z-index:-1}
.demo-hero-sub{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--tx2);line-height:1.65;margin-bottom:28px;max-width:560px}
.demo-hero-facts{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.demo-fact{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--tx2);font-weight:500}
.demo-fact svg{color:var(--gn)}
.demo-hero-form{background:#fff;border:1px solid var(--bd);border-radius:var(--rl);padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.08),0 0 0 1px rgba(79,70,229,.05)}
.demo-hero-form h3{font-family:var(--fd);font-size:1.5rem;font-weight:700;margin-bottom:6px;color:var(--tx)}
.demo-hero-form .sub{font-size:.8125rem;color:var(--tx3);margin-bottom:20px}
.demo-hero-form .micro{font-size:.6875rem;color:var(--tx3);text-align:center;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:5px}
.demo-hero-form .micro svg{color:var(--gn)}
@media(max-width:900px){.demo-hero-grid{grid-template-columns:1fr}.demo-hero-form{order:-1}}

/* STEPS BIG (demo page) */
.big-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.big-step{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:36px 28px;position:relative;transition:all .3s var(--expo)}
.big-step:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.05)}
.big-step-num{position:absolute;top:24px;right:24px;font-family:var(--fd);font-size:3rem;font-weight:800;color:var(--accbg);line-height:1}
.big-step .ico{width:48px;height:48px;border-radius:12px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.big-step h3{font-family:var(--fd);font-size:1.5rem;font-weight:700;margin-bottom:8px;color:var(--tx)}
.big-step p{font-size:.875rem;color:var(--tx2);line-height:1.6}
@media(max-width:768px){.big-steps{grid-template-columns:1fr}}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:28px}
.testi-stars{display:flex;gap:2px;margin-bottom:12px;color:#fbbf24}
.testi-text{font-size:.9375rem;color:var(--tx);line-height:1.65;margin-bottom:20px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--bd)}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:.9375rem;flex-shrink:0}
.testi-info{display:flex;flex-direction:column}
.testi-name{font-size:.8125rem;font-weight:600;color:var(--tx)}
.testi-role{font-size:.75rem;color:var(--tx3)}
@media(max-width:768px){.testi-grid{grid-template-columns:1fr}}

/* TRUST SIGNALS ROW */
.trust-signals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px;padding:32px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.trust-sig{display:flex;align-items:center;gap:14px}
.trust-sig svg{color:var(--acc);flex-shrink:0}
.trust-sig strong{display:block;font-family:var(--fd);font-size:.9375rem;color:var(--tx);margin-bottom:2px;font-weight:700}
.trust-sig span{font-size:.75rem;color:var(--tx3)}
@media(max-width:900px){.trust-signals{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.trust-signals{grid-template-columns:1fr}}

/* GUARANTEE BAR */
.guarantee{background:var(--gnbg);border:1px solid rgba(16,185,129,.2);border-radius:var(--rl);padding:24px 28px;display:flex;align-items:center;gap:20px;margin-top:32px}
.guarantee-ico{width:48px;height:48px;border-radius:50%;background:var(--gn);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.guarantee strong{display:block;font-family:var(--fd);font-size:1rem;color:var(--tx);margin-bottom:2px}
.guarantee p{font-size:.8125rem;color:var(--tx2);margin:0;line-height:1.5}
@media(max-width:640px){.guarantee{flex-direction:column;text-align:center}}

/* DEVIS */
.devis-wrap{max-width:600px;margin:0 auto}
.devis-step{display:none;animation:fadeUp .4s var(--expo)}.devis-step.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step-lbl{font-size:.6875rem;font-weight:600;color:var(--tx3);margin-bottom:20px;text-transform:uppercase;letter-spacing:.06em}
.radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio-card input{display:none}
.rc{border:1.5px solid var(--bd);border-radius:var(--r);padding:18px 14px;text-align:center;cursor:pointer;transition:all .25s var(--expo);display:flex;flex-direction:column;align-items:center;gap:6px}
.rc:hover{border-color:var(--bd2);background:var(--bg2)}
.radio-card input:checked+.rc{border-color:var(--acc);background:var(--accbg)}
.rc-t{font-weight:600;font-size:.875rem}.rc-d{font-size:.75rem;color:var(--tx3)}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--bd);border-radius:var(--r);font-size:.8125rem;cursor:pointer;transition:all .2s}
.chk:hover{background:var(--bg2)}.chk input{accent-color:var(--acc)}
.devis-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:16px}
.pbar{flex:1;height:3px;background:var(--bd);border-radius:3px;overflow:hidden}
.pfill{height:100%;background:var(--acc);transition:width .4s var(--expo);border-radius:3px}
.devis-result{text-align:center;padding:40px 20px}.devis-result.hidden{display:none}
.res-price{font-size:1rem;margin:14px 0;color:var(--tx2)}.res-price strong{font-family:var(--fd);font-size:1.8rem;color:var(--acc)}
.res-note{color:var(--tx2);font-size:.875rem;margin-bottom:20px}
@media(max-width:480px){.radio-grid,.chk-grid{grid-template-columns:1fr}}

/* ANIMATIONS */
[data-a]{opacity:0;transition:all .65s var(--out)}
[data-a].v{opacity:1}
[data-a="f"]{transform:translateY(20px)}[data-a="f"].v{transform:none}
[data-a="r"]{transform:translateY(32px)}[data-a="r"].v{transform:none}

/* CHATBOT */
.chat-w{position:fixed;bottom:24px;right:24px;z-index:200}
.chat-fab{width:52px;height:52px;border-radius:50%;background:var(--acc);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(79,70,229,.25);transition:all .3s var(--spring)}
.chat-fab:hover{transform:scale(1.06);box-shadow:0 6px 24px rgba(79,70,229,.35)}
.ico-close{display:none}.chat-w.open .ico-open{display:none}.chat-w.open .ico-close{display:block}
.chat-pan{position:absolute;bottom:64px;right:0;width:360px;max-height:500px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;box-shadow:0 16px 60px rgba(0,0,0,.1);display:none;flex-direction:column;animation:chatUp .3s var(--spring)}
.chat-w.open .chat-pan{display:flex}
@keyframes chatUp{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.chat-hd{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;background:var(--bg2)}
.chat-av{width:32px;height:32px;background:var(--acc);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:.75rem}
.chat-hd b{font-size:.875rem;display:block;line-height:1.2}
.chat-hd small{font-size:.6875rem;color:var(--gn);display:block}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:200px;max-height:300px}
.msg{animation:fadeUp .3s var(--expo)}.msg-b{align-self:flex-start}.msg-u{align-self:flex-end}
.bbl{max-width:85%;padding:10px 14px;font-size:.8125rem;line-height:1.5;border-radius:14px}
.msg-b .bbl{background:var(--bg2);color:var(--tx);border-bottom-left-radius:4px}
.msg-u .bbl{background:var(--acc);color:#fff;border-bottom-right-radius:4px}
.bbl a{color:var(--acc);font-weight:600}
.typing{display:flex;gap:4px;padding:10px 14px}
.typing span{width:5px;height:5px;background:var(--tx4);border-radius:50%;animation:bnc 1.4s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bnc{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.chat-pills{display:flex;gap:5px;padding:0 14px 10px;flex-wrap:wrap}
.chat-pills button{padding:6px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:100px;font-family:var(--ff);font-size:.75rem;font-weight:500;color:var(--tx2);cursor:pointer;transition:all .2s}
.chat-pills button:hover{border-color:var(--acc);color:var(--acc)}
.chat-bar{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--bd)}
.chat-bar input{flex:1;padding:10px 16px;border:1px solid var(--bd);border-radius:100px;font-family:var(--ff);font-size:.8125rem;outline:none;transition:border-color .2s;background:var(--bg2)}
.chat-bar input:focus{border-color:var(--acc)}
.chat-bar input::placeholder{color:var(--tx4)}
#chat-go{width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--spring)}
#chat-go:hover{background:var(--acc2);transform:scale(1.05)}
@media(max-width:480px){.chat-pan{width:calc(100vw - 48px);right:-12px}}

/* === SIM INCLUDED BOX === */
.sim-included{background:linear-gradient(135deg,#ecfdf5 0%,#f0fdf4 100%);border:1.5px solid #86efac;border-radius:14px;padding:24px 26px;margin-bottom:8px}
.sim-included-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(16,185,129,.2)}
.sim-included-ico{width:38px;height:38px;background:#10b981;color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sim-included-head strong{display:block;font-family:var(--fd);font-size:1rem;color:#065f46;font-weight:700;margin-bottom:3px}
.sim-included-head span{font-size:.8125rem;color:#047857;line-height:1.4}
.sim-included-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:0;padding:0}
.sim-included-list li{display:flex;align-items:flex-start;gap:10px;font-size:.8125rem;color:#064e3b;line-height:1.45}
.sim-included-list li svg{color:#10b981;flex-shrink:0;margin-top:3px}
@media(max-width:640px){.sim-included-list{grid-template-columns:1fr}.sim-included{padding:20px 18px}.sim-included-list li{font-size:.75rem}}

/* === DEVIS SIMULATOR === */
.sim-wrap{max-width:860px;margin:0 auto}
.sim-panel{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);padding:0;box-shadow:0 4px 24px rgba(0,0,0,.04);overflow:hidden}
.sim-head{padding:28px 36px;border-bottom:1px solid var(--bd);background:linear-gradient(135deg,var(--accbg) 0%,#fff 100%)}
.sim-progress{display:flex;gap:8px;margin-bottom:14px}
.sim-progress-step{flex:1;height:4px;background:var(--bd);border-radius:4px;transition:background .4s var(--expo)}
.sim-progress-step.active{background:var(--acc)}
.sim-progress-step.done{background:var(--gn)}
.sim-step-label{font-size:.75rem;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.sim-step-title{font-family:var(--fd);font-size:1.5rem;font-weight:700;color:var(--tx);margin-top:6px;letter-spacing:-.02em}
.sim-body{padding:36px}
.sim-step{display:none;animation:simFade .4s var(--expo)}
.sim-step.active{display:block}
@keyframes simFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.sim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sim-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sim-card{border:2px solid var(--bd);border-radius:var(--r);padding:20px;cursor:pointer;transition:all .25s var(--expo);background:var(--bg);position:relative}
.sim-card:hover{border-color:var(--acc);background:var(--accbg2)}
.sim-card.selected{border-color:var(--acc);background:var(--accbg)}
.sim-card.maint-pop{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 12px 32px rgba(79,70,229,.12);position:relative;transform:scale(1.03);z-index:1}
.sim-card.maint-pop:hover{transform:scale(1.03) translateY(-2px)}
.maint-pop-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;padding:4px 14px;border-radius:100px;font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 12px rgba(79,70,229,.3)}
@media(max-width:900px){.sim-card.maint-pop{transform:none}.sim-card.maint-pop:hover{transform:translateY(-2px)}}
.sim-card.selected::after{content:'';position:absolute;top:12px;right:12px;width:20px;height:20px;background:var(--acc);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:14px}
.sim-card-ico{width:40px;height:40px;border-radius:10px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.sim-card.selected .sim-card-ico{background:var(--acc);color:#fff}
.sim-card-title{font-family:var(--fd);font-size:.9375rem;font-weight:700;color:var(--tx);margin-bottom:4px}
.sim-card-desc{font-size:.75rem;color:var(--tx3);line-height:1.45}
.sim-card-price{font-size:.75rem;color:var(--acc);font-weight:600;margin-top:8px}
@media(max-width:640px){.sim-grid,.sim-grid-3{grid-template-columns:1fr}.sim-body,.sim-head{padding:24px}}

.sim-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sim-check{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--bd);border-radius:var(--r);cursor:pointer;transition:all .2s var(--expo);font-size:.875rem;background:var(--bg);position:relative;user-select:none}
.sim-check:hover{border-color:var(--bd2);background:var(--bg2)}
.sim-check.selected{border-color:var(--acc);background:var(--accbg);color:var(--tx)}
.sim-check input{display:none}
.sim-check-box{width:18px;height:18px;border:2px solid var(--bd);border-radius:4px;flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center}
.sim-check.selected .sim-check-box{background:var(--acc);border-color:var(--acc)}
.sim-check-box svg{opacity:0;color:#fff;transition:opacity .2s}
.sim-check.selected .sim-check-box svg{opacity:1}
.sim-check strong{color:var(--tx);font-weight:600}
.sim-check-price{margin-left:auto;font-size:.75rem;color:var(--tx3);font-weight:500}
@media(max-width:640px){.sim-check-grid{grid-template-columns:1fr}}

.sim-slider-wrap{padding:20px 0}
.sim-slider-val{font-family:var(--fd);font-size:2.2rem;font-weight:800;color:var(--acc);text-align:center;margin-bottom:8px;letter-spacing:-.02em}
.sim-slider-val small{font-size:.875rem;color:var(--tx3);font-weight:500;display:block;margin-top:4px}
.sim-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:6px;background:var(--bd);outline:none}
.sim-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--acc);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(79,70,229,.3)}
.sim-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--acc);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(79,70,229,.3)}
.sim-slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--tx3);margin-top:10px}

.sim-foot{display:flex;justify-content:space-between;align-items:center;padding:20px 36px;border-top:1px solid var(--bd);background:var(--bg2);gap:16px}
.sim-foot-left{font-size:.8125rem;color:var(--tx3)}
.sim-foot-left strong{color:var(--tx);font-size:.9375rem;display:block}
.sim-btns{display:flex;gap:10px}

/* RESULT */
.sim-result{text-align:center;padding:48px 36px}
.sim-result-ico{width:64px;height:64px;border-radius:50%;background:var(--gnbg);color:var(--gn);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.sim-result h3{font-family:var(--fd);font-size:1.4rem;font-weight:700;margin-bottom:8px}
.sim-result-price{font-family:var(--fd);font-size:3rem;font-weight:800;color:var(--acc);margin:20px 0 8px;letter-spacing:-.03em;line-height:1}
.sim-result-price small{font-size:1rem;font-weight:500;color:var(--tx3);display:block;margin-bottom:8px}
.sim-result-note{font-size:.875rem;color:var(--tx2);max-width:480px;margin:0 auto 28px;line-height:1.6}
.sim-result-breakdown{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:20px;margin:20px auto;max-width:400px;text-align:left}
.sim-result-breakdown-line{display:flex;justify-content:space-between;font-size:.8125rem;padding:6px 0;color:var(--tx2)}
.sim-result-breakdown-line strong{color:var(--tx)}
.sim-result-breakdown-line.total{border-top:1px solid var(--bd);margin-top:8px;padding-top:12px;font-weight:700;color:var(--tx);font-size:.9375rem}

/* === CHATBOT ENHANCEMENTS === */
.chat-pan{width:380px;max-height:560px}
@media(max-width:480px){.chat-pan{width:calc(100vw - 48px);right:-12px}}
.chat-body{padding:16px;min-height:220px;max-height:360px}
.bbl{max-width:88%;padding:11px 15px;font-size:.8125rem;line-height:1.55}
.bbl strong{color:inherit;font-weight:700}
.msg-b .bbl{background:var(--bg2);color:var(--tx)}
.msg-u .bbl{background:var(--acc);color:#fff}

/* Quick replies inside chat */
.chat-qr{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;margin-left:4px}
.chat-qr button{padding:7px 14px;background:#fff;border:1px solid var(--acc);border-radius:100px;font-family:var(--ff);font-size:.75rem;font-weight:500;color:var(--acc);cursor:pointer;transition:all .2s var(--spring)}
.chat-qr button:hover{background:var(--acc);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px rgba(79,70,229,.2)}

.chat-head-avatar{position:relative;width:36px;height:36px}
.chat-head-status-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;background:var(--gn);border:2px solid var(--bg2);border-radius:50%}
.chat-hd{padding:16px 20px}
.chat-hd .chat-av{width:36px;height:36px;font-size:.875rem;border-radius:10px}
.chat-hd b{font-size:.9375rem}
.chat-hd small{font-size:.75rem;display:flex;align-items:center;gap:4px}
.chat-hd small::before{content:'';width:6px;height:6px;background:var(--gn);border-radius:50%;animation:pls 2s infinite}

/* === ENHANCED FORMS === */
.form-stack{display:flex;flex-direction:column;gap:20px}
.form-group-title{font-family:var(--fd);font-size:.9375rem;font-weight:700;color:var(--tx);margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--bd)}

.f-modern{position:relative}
.f-modern input,.f-modern textarea,.f-modern select{padding:14px 16px;font-size:.9375rem;border:1.5px solid var(--bd);border-radius:10px;background:var(--bg);transition:all .25s var(--expo);width:100%;color:var(--tx);font-family:var(--ff);outline:none}
.f-modern input:focus,.f-modern textarea:focus,.f-modern select:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(79,70,229,.08);background:var(--bg)}
.f-modern label{display:block;font-size:.8125rem;font-weight:600;color:var(--tx2);margin-bottom:6px}
.f-modern label .req{color:#ef4444;margin-left:2px}
.f-modern .hint{font-size:.6875rem;color:var(--tx3);margin-top:5px;line-height:1.4}
.f-modern textarea{resize:vertical;min-height:90px}
.f-modern select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}

.contact-panel{background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:clamp(28px,4vw,40px);box-shadow:0 4px 32px rgba(0,0,0,.04)}
.contact-panel-header{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--bd)}
.contact-panel-header h3{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:var(--tx);margin-bottom:4px}
.contact-panel-header p{font-size:.8125rem;color:var(--tx3);line-height:1.5}

.contact-reassure{display:flex;gap:10px;padding:14px 16px;background:var(--accbg2);border-left:3px solid var(--acc);border-radius:8px;margin-top:20px;font-size:.75rem;color:var(--tx2);line-height:1.5}
.contact-reassure svg{color:var(--acc);flex-shrink:0;margin-top:1px}

/* INFO CARDS (contact page) */
.info-cards{display:grid;grid-template-columns:1fr;gap:12px}
.info-card{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:var(--bg);border:1px solid var(--bd);border-radius:12px;transition:all .25s var(--expo);text-decoration:none;color:var(--tx)}
.info-card:hover{border-color:var(--acc);transform:translateX(2px);box-shadow:0 4px 16px rgba(0,0,0,.04)}
.info-card-ico{width:40px;height:40px;border-radius:10px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-card-title{font-family:var(--fd);font-size:.875rem;font-weight:700;color:var(--tx);display:block;margin-bottom:2px}
.info-card-desc{font-size:.75rem;color:var(--tx3);display:block;line-height:1.4}

/* MAINTENANCE CARDS */
.maint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}
.maint-card{background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:32px 28px;transition:all .35s var(--expo);display:flex;flex-direction:column;position:relative}
.maint-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.06)}
.maint-card.featured{border:2px solid var(--acc);box-shadow:0 0 0 1px var(--acc),0 20px 60px rgba(79,70,229,.12);transform:scale(1.03);z-index:1}
.maint-card.featured:hover{transform:scale(1.03) translateY(-4px)}
.maint-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;padding:5px 16px;border-radius:100px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 12px rgba(79,70,229,.3)}
.maint-head{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--bd)}
.maint-name{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-bottom:12px;color:var(--tx)}
.maint-price{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.maint-price strong{font-family:var(--fd);font-size:2.4rem;font-weight:800;color:var(--tx);letter-spacing:-.03em;line-height:1}
.maint-price span{font-size:.8125rem;font-weight:500;color:var(--tx3)}
.maint-free{display:inline-block;padding:4px 12px;background:var(--gnbg);color:#10b981;border-radius:100px;font-size:.6875rem;font-weight:700;margin-top:4px}
.maint-list{list-style:none;margin-bottom:20px;flex:1}
.maint-list li{display:flex;align-items:flex-start;gap:10px;font-size:.8125rem;color:var(--tx2);padding:6px 0;line-height:1.5}
.maint-list li strong{color:var(--tx);font-weight:600}
.maint-list svg{color:#10b981;flex-shrink:0;margin-top:3px}
.maint-eng{text-align:center;padding:12px;background:var(--bg2);border:1px dashed var(--bd);border-radius:8px;font-size:.75rem;color:var(--tx2);font-weight:600;margin-bottom:16px}
.maint-eng small{color:var(--tx3);font-weight:500;font-size:.6875rem}
@media(max-width:900px){.maint-grid{grid-template-columns:1fr;gap:14px}.maint-card.featured{transform:none}.maint-card.featured:hover{transform:translateY(-4px)}}

.devis-note{display:flex;gap:16px;padding:22px 26px;background:linear-gradient(135deg,#fef9e7 0%,#fff7e0 100%);border:1.5px solid #f0c14b;border-radius:14px;margin-bottom:32px;align-items:flex-start}
.devis-note svg{color:#d97706;flex-shrink:0;margin-top:2px}
.devis-note strong{display:block;font-family:var(--fd);font-size:1rem;color:var(--tx);margin-bottom:6px}
.devis-note p{font-size:.875rem;color:var(--tx2);line-height:1.65;margin:0}
.devis-note p strong{display:inline;font-family:var(--ff);font-size:inherit;color:var(--tx);margin:0}
.devis-note a{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.maint-note{display:flex;gap:14px;padding:20px 24px;background:var(--accbg2);border-left:3px solid var(--acc);border-radius:12px;margin-top:32px;max-width:1000px;margin-left:auto;margin-right:auto}
.maint-note svg{color:var(--acc);flex-shrink:0;margin-top:2px}
.maint-note strong{display:block;font-family:var(--fd);font-size:.9375rem;color:var(--tx);margin-bottom:4px}
.maint-note p{font-size:.8125rem;color:var(--tx2);line-height:1.6;margin:0}

/* PRICING REFERENCE TABLE (new tarifs) */
.price-ref{max-width:900px;margin:0 auto}
.price-intro-card{background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:32px;margin-bottom:40px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.price-intro-ico{width:56px;height:56px;border-radius:14px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.price-intro-card h3{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-bottom:6px}
.price-intro-card p{font-size:.875rem;color:var(--tx2);line-height:1.6}
@media(max-width:640px){.price-intro-card{grid-template-columns:1fr}}

.price-table{background:var(--bg);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:32px}
.price-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:0;padding:20px 28px;border-bottom:1px solid var(--bd);align-items:center;transition:background .2s}
.price-row:last-child{border-bottom:none}
.price-row:hover{background:var(--bg2)}
.price-row.header{background:var(--bg2);font-weight:700;font-family:var(--fd);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);padding:16px 28px}
.price-row-label{font-weight:600;color:var(--tx);font-size:.9375rem}
.price-row-label small{display:block;font-size:.75rem;color:var(--tx3);font-weight:400;margin-top:2px}
.price-row-value{font-family:var(--fd);font-weight:700;color:var(--tx);font-size:.9375rem}
.price-row-value.from{color:var(--acc)}
.price-row-value.included{color:var(--gn);font-size:.75rem}
@media(max-width:640px){.price-row{grid-template-columns:1fr;gap:8px;padding:16px 20px}.price-row.header{display:none}}

.price-factors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.price-factor{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:24px}
.price-factor-ico{width:36px;height:36px;border-radius:10px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.price-factor h4{font-family:var(--fd);font-size:.9375rem;font-weight:700;margin-bottom:6px}
.price-factor p{font-size:.8125rem;color:var(--tx2);line-height:1.6}
@media(max-width:768px){.price-factors{grid-template-columns:1fr}}

/* === PAGE TRANSITIONS === */
body{animation:pageIn .5s var(--expo)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.leaving{animation:pageOut .35s var(--expo) forwards}
@keyframes pageOut{to{opacity:0;transform:translateY(-8px)}}

/* Top loading bar */
.pg-bar{position:fixed;top:0;left:0;height:2px;background:var(--acc);z-index:9999;transition:width .3s var(--expo),opacity .2s;box-shadow:0 0 10px rgba(79,70,229,.5);width:0}
.pg-bar.loading{width:70%}
.pg-bar.done{width:100%;opacity:0}

/* Link hover for internal nav */
a[href^="/"]{transition:color .2s}

::selection{background:rgba(79,70,229,.12)}

/* ═══════════════════════════════════════════
   MOBILE CENTERING — additive only
   Retirer ce bloc = retour à l'état initial
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* HERO — centrer tag, titre, paragraphe et CTAs */
    .hero-inner { max-width: 100%; text-align: center; margin: 0 auto; }
    .hero-tag { text-align: center; justify-content: center; }
    .hero-h1 { text-align: center; }
    .hero-p { text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }

    /* SECTION HEADERS — toujours centrés sur mobile */
    .sec-head { text-align: center; }
    .sec-head .h2 { text-align: center; }
    .sec-head .h2-sub { text-align: center; margin-left: auto; margin-right: auto; max-width: 100%; }
    .tag { margin-left: auto; margin-right: auto; }

    /* PAGE HEADERS (sous-pages : services, tarifs, à propos, faq, contact, demo, devis, projets) */
    .page-hdr h1, .page-hdr .h2 { text-align: center; margin-left: auto; margin-right: auto; }
    .page-hdr .h2-sub { text-align: center; margin-left: auto; margin-right: auto; max-width: 100%; }
    .page-hdr .tag { margin-left: auto; margin-right: auto; }

    /* ABOUT — texte du bloc principal centré */
    .about-grid { text-align: center; }
    .about-grid > div > .tag { margin-left: auto; margin-right: auto; }

    /* OFFER / CTA BAND — déjà centré mais on force au cas où */
    .offer p { margin-left: auto; margin-right: auto; text-align: center; }

    /* DEMO HERO */
    .demo-hero-txt { text-align: center; }
    .demo-hero-txt .tag { margin-left: auto; margin-right: auto; }
    .demo-hero-txt .h2-sub { text-align: center; margin-left: auto; margin-right: auto; }

    /* CONTACT */
    .contact-grid .h2, .contact-grid .h2-sub { text-align: center; }
    .contact-info { text-align: center; }
    .contact-info .tag { margin-left: auto; margin-right: auto; }

    /* DEVIS / SIMULATEUR — titres d'étapes centrés */
    .sim-step-title, .sim-step-sub { text-align: center; }

    /* SERVICES list — titres centrés si left par défaut */
    .svc-card { text-align: center; }
    .svc-icon { margin-left: auto; margin-right: auto; }
    .svc-price, .svc-price-note { text-align: center; }
    .svc-list { text-align: left; display: inline-block; margin-left: auto; margin-right: auto; }
    .svc-cta { margin-left: auto; margin-right: auto; }

    /* FEATURES / STEPS — généralement déjà centrés, on s'assure */
    .feat, .step { text-align: center; }

    /* FOOTER — reste à gauche pour hiérarchie mais on centre la base */
    .footer-btm { text-align: center; justify-content: center; }
}

@media (max-width: 480px) {
    /* Encore plus compact en très petit écran */
    .hero-h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .hero-p { font-size: .95rem; }
    .h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
}

/* ═══════════════════════════════════════════
   PREMIUM DESIGN SYSTEM — Pulsor-inspired
   ═══════════════════════════════════════════ */

/* Updated design tokens */
:root {
  --r: 12px;        /* Bigger radius */
  --rl: 18px;       /* Cards radius */
  --rxl: 24px;      /* Large radius */
  --pill: 99em;     /* Pill shape */
  --glass: rgba(255,255,255,0.7);
  --glass-border: rgba(255,255,255,0.2);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.04);
  --sh-md: 0 8px 30px rgba(0,0,0,0.06);
  --sh-lg: 0 20px 60px rgba(0,0,0,0.08);
  --sh-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  --sh-card-hover: 0 12px 40px rgba(0,0,0,0.1);
  --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons — pill shape, sophisticated shadows */
.btn {
  border-radius: var(--pill) !important;
  letter-spacing: -0.01em;
  transition: all 0.3s var(--smooth);
  box-shadow: var(--sh-sm);
}
.btn:hover { transform: translateY(-2px) scale(0.98); }
.btn:active { transform: scale(0.95); }
.btn-primary {
  box-shadow: 0 4px 14px rgba(79,70,229,0.3);
}
.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(79,70,229,0.35);
}
.btn-light {
  backdrop-filter: blur(10px);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

/* Cards — glassmorphism + refined shadows */
.svc-card, .card {
  border-radius: var(--rl) !important;
  box-shadow: var(--sh-card);
  border: 1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(8px);
  transition: all 0.4s var(--smooth);
}
.svc-card:hover, .card:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-6px);
  border-color: rgba(79,70,229,0.1);
}

/* Navigation — glass effect */
.nav {
  backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(255,255,255,0.8) !important;
}
.nav-cta {
  border-radius: var(--pill) !important;
}
.nav-cta-demo {
  border-radius: var(--pill) !important;
}

/* Section headers — refined typography */
.h2 {
  letter-spacing: -0.03em;
}
.tag {
  border-radius: var(--pill) !important;
  letter-spacing: 0.06em;
}

/* Hero — old override removed (now using .hero-new) */

/* Features — glass cards */
.feat {
  border-radius: var(--rl) !important;
  box-shadow: var(--sh-card);
  border: 1px solid rgba(0,0,0,0.03);
  transition: all 0.4s var(--smooth);
}
.feat:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}

/* Forms — refined inputs */
.form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  border-radius: var(--r) !important;
  transition: all 0.25s var(--smooth);
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 4px rgba(79,70,229,0.08) !important;
}

/* Footer — subtle top gradient */
.footer {
  border-top: 1px solid var(--bd);
}

/* Reveal animations — smoother */
.reveal {
  transition: opacity 1s var(--smooth), transform 1s var(--smooth) !important;
}

/* Trust badges — pill shape */
.trust-badge {
  border-radius: var(--pill) !important;
  backdrop-filter: blur(4px);
}

/* Page header — subtle gradient */
.page-hdr {
  background: linear-gradient(180deg, #f8f9ff 0%, var(--bg) 100%) !important;
}

/* Maintenance cards */
.maint-card {
  border-radius: var(--rl) !important;
  box-shadow: var(--sh-card);
  transition: all 0.4s var(--smooth);
}
.maint-card:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}
.maint-card.featured {
  border: 2px solid var(--acc);
  box-shadow: 0 0 0 1px var(--acc), var(--sh-md);
}

/* Price cards — premium glass */
.pc {
  border-radius: var(--rxl) !important;
  box-shadow: var(--sh-card);
  border: 1px solid rgba(0,0,0,0.05);
}
.pc:hover {
  box-shadow: var(--sh-card-hover);
}
.pc.feat {
  box-shadow: 0 0 0 1px var(--acc), 0 20px 50px rgba(79,70,229,0.12);
}

/* Smooth scroll indicator */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--bd) transparent;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════
   VISUAL ARTIFACTS & DYNAMIC ANIMATIONS — Pulsor-agency inspired
   ═══════════════════════════════════════════════════════════════ */

/* ═══ VISUAL ARTIFACTS — ambient background elements ═══ */

/* Gradient orbs — floating ambient blobs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(79,70,229,0.15), transparent 70%); top: -100px; right: -100px; }
.orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(129,140,248,0.12), transparent 70%); bottom: -80px; left: -80px; animation-delay: -10s; }
.orb-3 { width: 250px; height: 250px; background: radial-gradient(circle, rgba(99,102,241,0.1), transparent 70%); top: 40%; left: 60%; animation-delay: -5s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(15px, 15px) scale(1.02); }
}

/* Dot grid texture overlay */
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(79,70,229,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Noise grain texture */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}

/* Glow line — horizontal decorative accent */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: 0.3;
  margin: 0 auto;
  max-width: 400px;
}

/* ═══ SCROLL ANIMATIONS — blur + stagger reveals ═══ */

/* Upgraded reveal: includes blur */
[data-a="f"] {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity 0.8s var(--smooth), transform 0.8s var(--smooth), filter 0.8s var(--smooth);
}
[data-a="f"].v {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-a="r"] {
  opacity: 0;
  transform: translateX(-20px);
  filter: blur(6px);
  transition: opacity 0.7s var(--smooth), transform 0.7s var(--smooth), filter 0.7s var(--smooth);
}
[data-a="r"].v {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Stagger delay via data-d attribute */
[data-d] { transition-delay: calc(var(--d, 0) * 1ms); }

/* Text reveal — word by word */
.text-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition: all 0.6s var(--smooth);
}
.text-reveal.v .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 10s ease-in-out infinite; }
.float-fast { animation: float 4s ease-in-out infinite; }

/* Premium glow for featured cards */
.glow-border::after { display: none !important; }

.pc.feat {
  border: 2px solid var(--acc) !important;
  box-shadow:
    0 0 0 1px rgba(79,70,229,0.1),
    0 0 20px rgba(79,70,229,0.08),
    0 0 60px rgba(79,70,229,0.04),
    0 8px 30px rgba(0,0,0,0.06) !important;
  animation: featPulse 3s ease-in-out infinite;
}
@keyframes featPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(79,70,229,0.1), 0 0 20px rgba(79,70,229,0.08), 0 0 60px rgba(79,70,229,0.04), 0 8px 30px rgba(0,0,0,0.06); }
  50% { box-shadow: 0 0 0 1px rgba(79,70,229,0.15), 0 0 30px rgba(79,70,229,0.12), 0 0 80px rgba(79,70,229,0.06), 0 12px 40px rgba(0,0,0,0.08); }
}
.pc.feat:hover {
  animation: none;
  box-shadow: 0 0 0 2px var(--acc), 0 0 40px rgba(79,70,229,0.15), 0 20px 60px rgba(0,0,0,0.1) !important;
}

/* Shimmer effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* Magnetic hover effect for buttons */
.btn:hover {
  transform: translateY(-3px) !important;
}
.btn:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: 0.1s !important;
}

/* Scale up on scroll entry */
[data-a="scale"] {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(6px);
  transition: all 1s var(--smooth);
}
[data-a="scale"].v {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Subtle background pattern for sections */
.sec-alt {
  position: relative;
}
.sec-alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(79,70,229,0.03) 0%, transparent 50%),
                    radial-gradient(circle at 80% 50%, rgba(99,102,241,0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* Hero specific artifacts — old, now using .hero-new */

/* CTA section glow */
.cta-sec, [style*="background:var(--tx)"] {
  position: relative;
  overflow: hidden;
}

/* Cursor glow — removed (not used in new hero) */

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orb, .float, .float-slow, .float-fast, .shimmer, .pc.feat, .hero-blob, .hero-float { animation: none !important; }
  [data-a] { filter: none !important; transition-duration: 0.01ms !important; }
  .grain { display: none; }
}

/* ═══ SECTION-SPECIFIC DECORATIONS ═══ */

/* Trust bar glow */
.trust-bar {
  position: relative;
}
.trust-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,70,229,0.2), transparent);
}

/* Offer section (dark CTA) subtle glow */
.offer::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

/* Animated gradient text */
.gradient-text{background:linear-gradient(135deg,#4f46e5,#818cf8,#6366f1,#4f46e5);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s ease-in-out infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ═══ NAV — Pulsor-style blur with gradient fade underneath ═══ */
.nav {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
}
.nav::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  pointer-events: none;
  z-index: 99;
}
.nav.scrolled {
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
  border-color: transparent !important;
}

/* ═══ Remove ALL dark CTA sections — use consistent light design ═══ */
.cta-sec {
  background: var(--bg2) !important;
  color: var(--tx) !important;
}
.cta-sec .h2 {
  color: var(--tx) !important;
}
.cta-sec .cta-p {
  color: var(--tx2) !important;
}

/* ═══ Remove cursor-glow globally ═══ */
.cursor-glow { display: none !important; }

/* ═══ Price cards redesign — cleaner, more minimal ═══ */
.pc {
  border-radius: 20px !important;
  border: 1px solid var(--bd) !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  transition: all 0.35s var(--smooth) !important;
}
.pc:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.07) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(79,70,229,0.15) !important;
}
.pc.feat {
  border: 1.5px solid var(--acc) !important;
  box-shadow: 0 0 0 1px rgba(79,70,229,0.05), 0 8px 30px rgba(79,70,229,0.08) !important;
  animation: none !important;
}
.pc.feat:hover {
  box-shadow: 0 0 0 1px rgba(79,70,229,0.1), 0 16px 50px rgba(79,70,229,0.12) !important;
  transform: translateY(-4px) !important;
}
.pc-head {
  background: transparent !important;
  border-bottom: 1px solid var(--bd) !important;
}
.pc.feat .pc-head {
  background: linear-gradient(135deg, rgba(79,70,229,0.03), rgba(99,102,241,0.02)) !important;
}


/* ═══ BLOB W — full page background, rounded balloon style ═══ */
/* Removed text W — using SVG in HTML instead */

/* ═══ TEXT HOVER EFFECTS — Pulsor-style character interactions ═══ */
.hero-title {
  cursor: default;
}
.hero-title:hover .accent-box {
  transform: rotate(-1deg) scale(1.03);
  box-shadow: 0 8px 30px rgba(79,70,229,.25);
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
}
.accent-box {
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
}

/* Nav links — underline slide on hover (Pulsor style) */
.nav-link {
  position: relative;
}
/* nav-link underline — using original scaleX version */

/* Section titles — subtle lift on hover */
.h2 {
  transition: transform .3s cubic-bezier(.25,.46,.45,.94);
  cursor: default;
}
.h2:hover {
  transform: translateY(-2px);
}

/* Service cards text hover */
.svc-card h3 {
  transition: color .3s;
}
.svc-card:hover h3 {
  color: var(--acc);
}

/* Footer links — color transition */
.footer a {
  transition: color .25s, transform .25s;
}
.footer a:hover {
  color: var(--acc) !important;
}










/* ═══ PULSOR EXACT BUTTON HOVER ═══ */
.pls-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.pls-btn:active {
  transform: scale(0.95) !important;
  transition-duration: .1s !important;
}
/* Text stagger — text-shadow clone technique */
.pls-txt {
  overflow: hidden;
  position: relative;
  display: inline-flex;
}
.pls-txt .ch {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.5em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.45s cubic-bezier(0.66, 0.01, 0.17, 0.97);
  will-change: transform;
}
.pls-btn:hover .pls-txt .ch {
  transform: translateY(-1.5em) rotate(0.001deg);
}
/* Icon — diagonal swap */
.pls-ico-wrap {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.pls-ico-wrap svg {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.45s cubic-bezier(0.66, 0.01, 0.17, 0.97);
  will-change: transform;
}
.pls-ico-wrap .ico-1 {
  transform: translate(0%, 0%);
}
.pls-ico-wrap .ico-2 {
  transform: translate(-110%, 110%);
}
.pls-btn:hover .pls-ico-wrap .ico-1 {
  transform: translate(110%, -110%);
}
.pls-btn:hover .pls-ico-wrap .ico-2 {
  transform: translate(0%, 0%);
}

/* ═══ NAV — transparent at top, glass on scroll ═══ */
.nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  transition: all .4s cubic-bezier(.25,.46,.45,.94) !important;
}
.nav.scrolled {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}


/* ═══ NAV — heysimon style: bigger, starts in-page, becomes fixed ═══ */
.nav {
  position: fixed !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  height: 72px !important;
  transition: all .5s cubic-bezier(.25,.46,.45,.94) !important;
}
.nav.scrolled {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
}
.nav-brand {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
.nav-link {
  font-size: .92rem !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
}
.nav-cta {
  font-size: .88rem !important;
  padding: 10px 22px !important;
}
.nav-cta-demo {
  padding: 10px 22px !important;
}

/* ═══ HERO TITLE — bigger like heysimon ═══ */
.hero-title {
  font-size: clamp(3rem, 6.5vw, 5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}
.accent-box {
  padding: 6px 24px !important;
  border-radius: 16px !important;
}

/* ═══ BUTTON HOVER FIX — no lag, instant reverse ═══ */
.pls-txt .ch {
  text-shadow: 0px 1.5em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.4s cubic-bezier(0.66, 0.01, 0.17, 0.97) !important;
  will-change: transform;
}
.pls-btn:hover .pls-txt .ch {
  transform: translateY(-1.5em) rotate(0.001deg);
}
/* On mouse leave — chars go back with SAME stagger but reversed */
/* The text-shadow handles the clone, so no glitch possible */

/* Icon swap — same timing */
.pls-ico-wrap svg {
  transition: transform 0.4s cubic-bezier(0.66, 0.01, 0.17, 0.97) !important;
}

/* Button scale on active */
.pls-btn:active {
  transform: scale(0.96) !important;
  transition-duration: .1s !important;
}

/* ═══ HERO SUBTITLE — bigger ═══ */
.hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important;
}
.hero-step {
  font-size: .95rem !important;
}


/* ═══════════════════════════════════════════════════════
   FINAL OVERRIDES — these win over everything above
   ═══════════════════════════════════════════════════════ */

/* NAV — starts blended in hero, glass on scroll */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .4s, backdrop-filter .4s, border-color .4s, box-shadow .4s !important;
}
.nav::after { display: none !important; }
.nav.scrolled {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom-color: rgba(0,0,0,.05) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
}
.nav-row {
  padding: 16px 0 !important;
}

/* BUTTON HOVER — Pulsor exact, guaranteed to work */
.pls-btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.pls-txt {
  overflow: hidden !important;
  display: inline-flex !important;
}
.pls-txt .ch {
  display: inline-block !important;
  position: relative !important;
  text-shadow: 0px 1.5em currentColor !important;
  transform: translateY(0em) rotate(0.001deg) !important;
  transition: transform 0.45s cubic-bezier(0.66, 0.01, 0.17, 0.97) !important;
  will-change: transform !important;
}
.pls-btn:hover .pls-txt .ch {
  transform: translateY(-1.5em) rotate(0.001deg) !important;
}
.pls-ico-wrap {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.pls-ico-wrap svg {
  position: absolute !important;
  inset: 0 !important;
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.45s cubic-bezier(0.66, 0.01, 0.17, 0.97) !important;
  will-change: transform !important;
}
.pls-ico-wrap .ico-1 { transform: translate(0,0) !important; }
.pls-ico-wrap .ico-2 { transform: translate(-110%,110%) !important; }
.pls-btn:hover .pls-ico-wrap .ico-1 { transform: translate(110%,-110%) !important; }
.pls-btn:hover .pls-ico-wrap .ico-2 { transform: translate(0,0) !important; }
.pls-btn:active { transform: scale(0.96) !important; transition-duration: .1s !important; }


/* Fix text hover clip — extra padding for descenders (g, y, p) */
.pls-txt {
  padding-bottom: 4px !important;
  margin-bottom: -4px !important;
}

/* ═══ W ENTRANCE ANIMATION — appears first, fast motion ═══ */

}
  60% { opacity: .04; transform: scale(1.02) rotate(0deg); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(5px); }
}
.hero-w-anim {
  animation: wReveal .7s cubic-bezier(.16,1,.3,1) .5s both !important;
}

/* ═══ FLOATING BADGES — staggered entrance ═══ */
@keyframes floatIn {
  0% { opacity: 0; transform: translateX(var(--float-from-x, 0)) translateY(var(--float-from-y, 30px)) scale(.85); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.hero-float {
  opacity: 0;
  animation: floatIn .6s cubic-bezier(.16,1,.3,1) forwards;
}
.hf1 { animation-delay: 1.2s !important; --float-from-x: -80px; --float-from-y: 0; }
.hf2 { animation-delay: 1.4s !important; --float-from-x: 80px; --float-from-y: 0; }
.hf3 { animation-delay: 1.6s !important; --float-from-x: -80px; --float-from-y: 0; }
.hf4 { animation-delay: 1.8s !important; --float-from-x: 80px; --float-from-y: 0; }

/* Hero content entrance — removed (using data-a reveals instead) */
/* removed hero-subtitle entrance */
/* /* disabled */ /* .hero-subtitle { animation: floatIn .7s .55s forwards !important; opacity: 0; }
/* removed hero-ctas entrance */
/* .hero-ctas { animation: floatIn .7s .65s forwards !important; opacity: 0; }
/* removed hero-steps entrance */
/* .hero-steps { animation: floatIn .7s .75s forwards !important; opacity: 0; }
/* removed hero-trust entrance */
/* .hero-trust { animation: floatIn .7s .85s forwards !important; opacity: 0; }


/* ═══ W STROKE DRAW — motion design entrance ═══ */
.w-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: wDraw 1.8s cubic-bezier(.4,0,.2,1) .3s forwards;
}
.w-draw-2 {
  animation-delay: .5s;
  animation-duration: 2s;
}

  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* After draw completes, fade in the fill */
.w-draw {
  animation: wDraw 1.8s cubic-bezier(.4,0,.2,1) .3s forwards, wFill .8s ease 2s forwards;
}
.w-draw-2 {
  animation: wDraw 2s cubic-bezier(.4,0,.2,1) .5s forwards, wFill .8s ease 2.2s forwards;
}

}

/* Remove old wReveal animation */
.hero-w-anim { animation: none !important; }


/* ═══════════════════════════════════════════════════════
   MOBILE — complete responsive overhaul (heysimon style)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* NAV — burger menu, glass bg when open */
  .nav-row { padding: 12px 0 !important; }
  .nav-brand { font-size: 1.3rem !important; }
  .nav-menu.open {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 20px 24px !important;
    gap: 8px !important;
    border-radius: 0 0 20px 20px !important;
  }
  .nav-menu.open .nav-link {
    font-size: 1rem !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  .nav-menu.open .nav-link:hover,
  .nav-menu.open .nav-link.active {
    background: var(--accbg) !important;
  }
  .nav-menu.open .nav-link-mobile {
    display: block !important;
    background: var(--acc) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 99em !important;
    padding: 14px !important;
    margin-top: 8px !important;
  }

  /* HERO — centered, compact, no floats */
  .hero-new {
    min-height: calc(100svh - 60px) !important;
    padding: 80px 0 32px !important;
  }
  .hero-new .wrap {
    max-width: 100% !important;
    padding: 0 20px !important;
  }
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    margin-bottom: 16px !important;
  }
  .accent-box {
    padding: 4px 16px !important;
    border-radius: 12px !important;
  }
  .hero-subtitle {
    font-size: .95rem !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }
  
  /* BUTTONS — stacked vertically, full width */
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: .95rem !important;
  }
  
  /* FLOATERS — hidden on mobile (like heysimon) */
  .hero-float { display: none !important; }
  
  
  .hero-new > div:first-child {
    top: -10% !important;
    left: -30% !important;
    width: 160% !important;
    height: 120% !important;
  }
  
  /* STEPS — vertical stack */
  .hero-steps {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .hero-step {
    font-size: .88rem !important;
  }
  .hero-step-sep { display: none !important; }
  .hero-step-ico {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* TRUST — horizontal, compact */
  .hero-trust {
    flex-direction: row !important;
    gap: 20px !important;
    font-size: .78rem !important;
  }
  
  /* BLOBS — smaller */
  .hero-blob { opacity: .4 !important; }
  .hb1 { width: 300px !important; height: 300px !important; }
  .hb2 { width: 250px !important; height: 250px !important; }
  .hb3 { width: 200px !important; height: 200px !important; }

  /* SECTIONS — tighter spacing */
  .sec { padding: clamp(40px, 6vw, 56px) 0 !important; }
  .sec-head { margin-bottom: 24px !important; }
  .h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .h2-sub { font-size: .9rem !important; }

  /* SERVICE CARDS — single column */
  .svc-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .svc-card { padding: 24px 20px !important; }

  /* CTA SECTIONS */
  .cta-sec { padding: 48px 0 !important; }
  .cta-btns { flex-direction: column !important; gap: 10px !important; }
  .cta-btns .btn { width: 100% !important; justify-content: center !important; }

  /* FOOTER — single column */
  .footer-row { grid-template-columns: 1fr !important; gap: 24px !important; }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
  }
  .hero-subtitle {
    font-size: .88rem !important;
  }
  .hero-trust {
    flex-direction: column !important;
    gap: 8px !important;
  }
}


/* ═══ MOBILE CRITICAL FIXES ═══ */

/* Prevent ANY horizontal scroll */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px) {
  /* NAV — logo visible, padded, centered vertically */
  .nav .wrap, .nav .nav-row, .nav-row {
    padding: 14px 20px !important;
  }
  .nav-brand {
    font-size: 1.25rem !important;
  }
  .burger {
    width: 32px !important;
    height: 24px !important;
  }

  /* HERO — fill screen properly */
  .hero-new {
    min-height: 100svh !important;
    min-height: 100vh !important;
    padding: 90px 20px 40px !important;
    overflow: hidden !important;
  }
  .hero-new .wrap {
    padding: 0 !important;
  }

  /* TITLE — bigger like heysimon mobile */
  .hero-title {
    font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 18px !important;
  }
  .accent-box {
    font-size: inherit !important;
    padding: 2px 14px !important;
    border-radius: 10px !important;
    transform: rotate(-1deg) !important;
  }
  .hero-subtitle {
    font-size: .92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
    padding: 0 8px !important;
  }

  /* BUTTONS — full width, stacked */
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .hero-ctas .btn, .hero-ctas .pls-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px !important;
    font-size: .95rem !important;
    border-radius: 14px !important;
  }

  /* STEPS — compact, centered */
  .hero-steps {
    gap: 10px !important;
    margin-bottom: 20px !important;
    margin-top: 8px !important;
  }
  .hero-step {
    font-size: .85rem !important;
    gap: 8px !important;
  }
  .hero-step-ico {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
  }

  /* TRUST — single line */
  .hero-trust {
    flex-direction: row !important;
    gap: 16px !important;
    font-size: .75rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  
  .hero-new > div:first-child {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
  }

  /* BLOBS — smaller, no overflow */
  .hero-blob {
    opacity: .3 !important;
  }
  .hb1 { width: 250px !important; height: 250px !important; right: -60px !important; }
  .hb2 { width: 200px !important; height: 200px !important; }
  .hb3 { width: 180px !important; height: 180px !important; }

  /* ALL SECTIONS — proper padding */
  .wrap {
    padding: 0 20px !important;
  }
  .sec {
    padding: 48px 0 !important;
  }
  .sec-head {
    margin-bottom: 24px !important;
  }
  .h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  /* CARDS */
  .svc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .svc-card {
    padding: 20px 18px !important;
  }

  /* CTA BOTTOM */
  .cta-sec {
    padding: 40px 0 !important;
  }
  .cta-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cta-btns .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* CHATBOT FAB — smaller, not overlapping */
  .chat-fab {
    width: 48px !important;
    height: 48px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  /* FOOTER */
  .footer-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer { padding: 40px 0 20px !important; }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: 2rem !important;
  }
  .hero-trust {
    flex-direction: column !important;
    gap: 6px !important;
  }
}

/* ═══ MOBILE — Steps aligned + W fix ═══ */
@media (max-width: 768px) {
  /* STEPS — horizontal row like heysimon, same style buttons */
  .hero-steps {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .hero-step {
    background: var(--bg2) !important;
    border: 1px solid var(--bd) !important;
    border-radius: 99em !important;
    padding: 8px 14px !important;
    font-size: .78rem !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
  .hero-step-ico {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    background: transparent !important;
  }

  /* W — fully contained, no overflow */
  .hero-new > div:first-child {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .hero-new > div:first-child svg {
    width: 160% !important;
    height: 160% !important;
    margin-left: -30% !important;
    margin-top: -15% !important;
  }
}

/* ═══ MOBILE — heysimon style buttons ═══ */
@media (max-width: 768px) {
  .hero-ctas .btn.btn-primary {
    background: var(--tx) !important;
    color: #fff !important;
    border-radius: 99em !important;
    padding: 18px 28px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
    border: none !important;
  }
  .hero-ctas .btn.btn-light {
    background: #fff !important;
    color: var(--tx) !important;
    border: 1.5px solid var(--bd) !important;
    border-radius: 99em !important;
    padding: 18px 28px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
}

/* ═══ MOBILE — top-aligned like heysimon, not center-screen ═══ */
@media (max-width: 768px) {
  .hero-new {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 100px !important;
  }
}

/* ═══ DESKTOP — wider hero content + fix letter display ═══ */

/* Hero wrap — wider, takes more space */
.hero-new .wrap {
  max-width: 1100px !important;
}

/* Title — bigger, wider */
.hero-title {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Subtitle — wider */
.hero-subtitle {
  max-width: 700px !important;
}

/* Steps — spread out */
.hero-steps {
  gap: 48px !important;
}

/* Trust — spread out */
.hero-trust {
  gap: 40px !important;
}

/* Hero — less bottom whitespace */
.hero-new {
  padding-bottom: 60px !important;
}

/* Fix stagger text display — chars must be inline, not vertical */
.pls-txt {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.pls-txt .ch {
  display: inline-block !important;
  white-space: pre !important;
}

/* Buttons — wider spacing */
.hero-ctas {
  gap: 16px !important;
}

@media (min-width: 769px) {
  .hero-ctas .btn {
    padding: 16px 32px !important;
    font-size: .95rem !important;
  }
}

/* ═══ GLOBAL DA — match homepage premium feel ═══ */

/* Page headers — bigger, bolder, gradient bg like homepage */
.page-hdr {
  background: linear-gradient(180deg, #fafaff 0%, #fff 100%) !important;
  padding: clamp(120px, 14vw, 160px) 0 clamp(48px, 6vw, 72px) !important;
}
.page-hdr .h2 {
  font-family: 'Plus Jakarta Sans', var(--fd), sans-serif !important;
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.08 !important;
}
.page-hdr .h2-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  max-width: 640px !important;
}

/* Section titles — bigger */
.sec-head .h2 {
  font-family: 'Plus Jakarta Sans', var(--fd), sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

/* ALL buttons sitewide — pill shape, Pulsor hover */
.btn {
  border-radius: 99em !important;
  font-weight: 600 !important;
  transition: all .35s cubic-bezier(.25,.46,.45,.94) !important;
}
.btn:hover {
  transform: translateY(-2px) !important;
}
.btn:active {
  transform: scale(.96) !important;
  transition-duration: .1s !important;
}
.btn-primary {
  background: var(--tx) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
  background: #000 !important;
}
.btn-light {
  background: #fff !important;
  border: 1.5px solid var(--bd) !important;
  color: var(--tx) !important;
}
.btn-light:hover {
  border-color: var(--tx) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}

/* Service cards — glassmorphism + pill CTA */
.svc-card {
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.03) !important;
}
.svc-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.08) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(79,70,229,.12) !important;
}
.svc-card h3 {
  font-family: 'Plus Jakarta Sans', var(--fd), sans-serif !important;
  font-weight: 700 !important;
}
.svc-cta {
  font-weight: 600 !important;
  transition: all .3s cubic-bezier(.25,.46,.45,.94) !important;
}
.svc-cta:hover {
  transform: translateX(4px) !important;
  color: var(--acc) !important;
}

/* Feature cards */
.feat {
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.04) !important;
}

/* Tags — pill shape */
.tag {
  border-radius: 99em !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

/* CTA sections — consistent */
.cta-sec .h2 {
  font-family: 'Plus Jakarta Sans', var(--fd), sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
}

/* FAQ items — rounder */
.faq-q {
  font-weight: 600 !important;
  transition: color .25s !important;
}
.faq-q:hover {
  color: var(--acc) !important;
}

/* Footer — cleaner */
.footer {
  border-top: 1px solid var(--bd) !important;
}
.footer-brand {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}

/* Price cards — match premium */
.pc-name, .maint-name {
  font-family: 'Plus Jakarta Sans', var(--fd), sans-serif !important;
}

/* Offer/CTA band */
.offer {
  border-radius: 24px !important;
}

/* Steps */
.step-card {
  border-radius: 18px !important;
}

/* Work cards */
.work-card {
  border-radius: 18px !important;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL RESPONSIVE — adapté à tous les écrans
   ═══════════════════════════════════════════════════════ */

/* Force no horizontal scroll on ANY page */
*, *::before, *::after { max-width: 100vw; }
html { overflow-x: hidden !important; }

@media (max-width: 768px) {

  /* ─── PAGE HEADERS ─── */
  .page-hdr {
    padding: 100px 20px 40px !important;
  }
  .page-hdr .h2 {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    line-height: 1.1 !important;
  }
  .page-hdr .h2-sub {
    font-size: .9rem !important;
    max-width: 100% !important;
  }
  .page-hdr .tag {
    font-size: .68rem !important;
  }

  /* ─── SECTIONS ─── */
  .sec { padding: 44px 0 !important; }
  .sec-head { margin-bottom: 22px !important; }
  .sec-head .h2 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  .sec-head .h2-sub {
    font-size: .88rem !important;
    max-width: 100% !important;
  }

  /* ─── WRAP ─── */
  .wrap { padding: 0 18px !important; }

  /* ─── GRIDS → single column ─── */
  .svc-grid,
  .feat-grid,
  .work-grid,
  .price-grid,
  .prc,
  .maint-grid,
  .values-grid,
  .about-grid,
  .contact-grid,
  .steps-grid,
  .trust-signals {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ─── CARDS ─── */
  .svc-card, .feat, .card, .val-card, .maint-card, .pc, .work-card, .step-card {
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  .svc-card h3, .feat h4 {
    font-size: .95rem !important;
  }
  .svc-card p, .feat p {
    font-size: .85rem !important;
  }

  /* ─── PRICE CARDS ─── */
  .pc { border-radius: 18px !important; }
  .pc-head { padding: 22px 20px 18px !important; }
  .pc-body { padding: 20px !important; }
  .pc-foot { padding: 0 20px 22px !important; }
  .pc-name { font-size: 1.1rem !important; }
  .pc-price strong { font-size: 2.2rem !important; }
  .pc.feat { transform: none !important; }
  .pc.feat:hover { transform: translateY(-4px) !important; }

  /* ─── BUTTONS ─── */
  .btn {
    padding: 14px 24px !important;
    font-size: .88rem !important;
  }
  .btn-lg {
    padding: 16px 28px !important;
    font-size: .92rem !important;
  }

  /* ─── CTA SECTIONS ─── */
  .cta-sec { padding: 40px 0 !important; }
  .cta-sec .h2 { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
  .cta-p { font-size: .88rem !important; max-width: 100% !important; }
  .cta-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cta-btns .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ─── FAQ ─── */
  .faq-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
  .faq-side { position: static !important; flex-direction: row !important; overflow-x: auto !important; gap: 6px !important; }
  .faq-q { font-size: .9rem !important; padding: 16px 0 !important; }

  /* ─── MARQUEE ─── */
  .marquee { overflow: hidden !important; }

  /* ─── OFFER BAND ─── */
  .offer { padding: 28px 22px !important; border-radius: 18px !important; }
  .offer h2 { font-size: 1.3rem !important; }
  .offer p { font-size: .88rem !important; }

  /* ─── FOOTER ─── */
  .footer { padding: 36px 0 16px !important; }
  .footer-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-btm { text-align: center !important; font-size: .72rem !important; }
  .footer-brand { font-size: 1.2rem !important; }

  /* ─── DEMO FORM ─── */
  .demo-hero-grid { grid-template-columns: 1fr !important; }
  .df-card { border-radius: 18px !important; padding: 24px 18px !important; }
  .df-row { grid-template-columns: 1fr !important; }

  /* ─── AI DEVIS CHAT ─── */
  .ai-box { border-radius: 16px !important; min-height: auto !important; }
  .ai-body { padding: 16px !important; max-height: none !important; }
  .ai-b { font-size: .84rem !important; }
  .ai-wrap { max-width: 100% !important; }

  /* ─── CHATBOT FAB ─── */
  .chat-w { z-index: 90 !important; }
  .chat-fab {
    width: 48px !important;
    height: 48px !important;
  }
  .chat-pan {
    width: calc(100vw - 32px) !important;
    right: -8px !important;
    bottom: 56px !important;
    max-height: 65vh !important;
    border-radius: 16px !important;
  }
  /* Prevent zoom on chat input focus */
  .chat-bar input, .ai-in input, input, textarea, select {
    font-size: 16px !important;
  }

  /* ─── ABOUT PAGE ─── */
  .story-grid { grid-template-columns: 1fr !important; }
  .fact-strip { flex-direction: column !important; gap: 10px !important; }
  .fact-card { min-width: auto !important; max-width: 100% !important; }
  .tech-marquee { overflow: hidden !important; }
  .values-grid { grid-template-columns: 1fr !important; }

  /* ─── CONTACT ─── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* ─── TABLES (comparison) ─── */
  .price-table, table { 
    display: block !important; 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch !important;
  }

  /* ─── GRAIN — lighter on mobile ─── */
  .grain { opacity: .015 !important; }
}

@media (max-width: 480px) {
  .page-hdr .h2 { font-size: 1.6rem !important; }
  .sec-head .h2 { font-size: 1.4rem !important; }
  .hero-title { font-size: 2rem !important; }
  .wrap { padding: 0 16px !important; }
  .btn { padding: 13px 20px !important; font-size: .85rem !important; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 1.75rem !important; }
  .pc-price strong { font-size: 1.8rem !important; }
}

/* ═══ MOBILE v2 — bigger text, less void ═══ */
@media (max-width: 768px) {
  /* HERO — fill the screen, bigger text */
  .hero-new {
    min-height: calc(100svh - 56px) !important;
    padding: 68px 0 24px !important;
    display: flex !important;
    align-items: center !important;
  }
  .hero-new .wrap {
    max-width: 100% !important;
    padding: 0 22px !important;
  }
  .hero-title {
    font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 18px !important;
  }
  .accent-box {
    padding: 2px 14px !important;
    border-radius: 10px !important;
    font-size: inherit !important;
  }
  .hero-subtitle {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
    max-width: 100% !important;
    color: var(--tx2) !important;
  }

  /* BUTTONS — full width, punchy */
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 28px !important;
  }
  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }

  /* STEPS — horizontal row, compact */
  .hero-steps {
    flex-direction: row !important;
    gap: 0 !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    background: var(--bg2) !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border: 1px solid var(--bd) !important;
  }
  .hero-step {
    flex: 1 !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
  }
  .hero-step-ico {
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1px solid var(--bd) !important;
  }
  .hero-step-sep { display: none !important; }

  /* TRUST — single row, tight */
  .hero-trust {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 16px !important;
    font-size: .8rem !important;
  }

  /* BLOBS — less visible */
  .hero-blob { opacity: .3 !important; }
  .hb1 { width: 250px !important; height: 250px !important; }
  .hb2 { width: 200px !important; height: 200px !important; }
  .hb3 { display: none !important; }

  /* W SVG — contained */
  

  /* SECTIONS — less top/bottom padding = less void */
  .sec { padding: 36px 0 !important; }
  .sec-head { margin-bottom: 18px !important; }
  .h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .h2-sub { font-size: .92rem !important; line-height: 1.5 !important; }
  .tag { font-size: .65rem !important; padding: 5px 12px !important; margin-bottom: 10px !important; }

  /* TRUST BAR — tighter */
  .trust-bar { padding: 18px 0 !important; }

  /* SERVICE CARDS — tighter */
  .svc-card { padding: 20px 18px !important; }
  .svc-card h3 { font-size: 1rem !important; }
  .svc-card p { font-size: .88rem !important; line-height: 1.5 !important; }

  /* CTA — tighter */
  .cta-sec { padding: 32px 0 !important; }
  .cta-sec .h2 { font-size: clamp(1.4rem, 6.5vw, 2rem) !important; }
  .cta-p { font-size: .92rem !important; }

  /* FOOTER */
  .footer { padding: 28px 0 12px !important; }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2.2rem, 10vw, 3rem) !important;
  }
  .hero-subtitle {
    font-size: .95rem !important;
  }
  .hero-steps {
    padding: 12px 12px !important;
  }
  .hero-step {
    font-size: .72rem !important;
  }
  .hero-trust {
    flex-direction: column !important;
    gap: 6px !important;
    font-size: .75rem !important;
  }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: 2rem !important;
  }
}

/* ═══ MOBILE v3 — hide W, kill void ═══ */
@media (max-width: 768px) {
  /* HIDE the W SVG background on mobile */
  .hero-new > div:first-child {
    display: none !important;
  }
  
  /* Remove excess space at bottom of hero */
  .hero-new {
    min-height: auto !important;
    padding: 100px 0 36px !important;
  }
  
  /* Trust — less bottom margin */
  .hero-trust {
    margin-bottom: 0 !important;
  }
  
  /* Steps card — tighter */
  .hero-steps {
    margin-bottom: 16px !important;
  }
}

/* ═══ MOBILE v4 — W visible + tarifs table mobile ═══ */
@media (max-width: 768px) {
  /* W SVG — show it but smaller and more subtle */
  .hero-new > div:first-child {
    display: flex !important;
    top: 5% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 120% !important;
    height: 80% !important;
    opacity: .5 !important;
  }
  .hero-new > div:first-child svg {
    width: 100% !important;
    height: 100% !important;
  }
  .w-draw {
    stroke: rgba(79,70,229,.03) !important;
    stroke-width: 50 !important;
  }
  .w-draw.w-draw-2 {
    stroke: rgba(79,70,229,.015) !important;
    stroke-width: 70 !important;
  }

  /* COMPARISON TABLE — mobile-friendly cards instead of horizontal scroll */
  .cmp-table {
    min-width: unset !important;
    width: 100% !important;
    display: block !important;
  }
  .cmp-table thead {
    display: none !important;
  }
  .cmp-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .cmp-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 14px !important;
    background: #fff !important;
    border: 1px solid var(--bd) !important;
    border-radius: 10px !important;
  }
  .cmp-table tbody tr:nth-child(even) {
    background: var(--bg2) !important;
  }
  .cmp-table td {
    padding: 0 !important;
    border: none !important;
    font-size: .78rem !important;
  }
  .cmp-table td:first-child {
    grid-column: 1 / -1 !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: var(--tx) !important;
  }
  /* Label columns under each check */
  .cmp-table td:nth-child(2)::before {
    content: 'P' !important;
    display: block !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    color: var(--tx3) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 2px !important;
  }
  .cmp-table td:nth-child(3)::before {
    content: 'C' !important;
    display: block !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    color: var(--acc) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 2px !important;
  }
  .cmp-table td:nth-child(4)::before {
    content: 'E' !important;
    display: block !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    color: var(--tx3) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 2px !important;
  }
  .cmp-table td:nth-child(2),
  .cmp-table td:nth-child(3),
  .cmp-table td:nth-child(4) {
    text-align: center !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: var(--bg2) !important;
  }
  .cmp-table td:nth-child(3) {
    background: var(--accbg) !important;
  }
  .cmp-yes { font-size: .95rem !important; }
  .cmp-no { font-size: .85rem !important; }
  .cmp-text { font-size: .7rem !important; }

  /* Maintenance grid */
  .maint-grid-v2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .maint-v2 { padding: 22px 18px !important; }
  .maint-v2.featured { transform: none !important; }
}

/* ═══ LOGO MARQUEE — real color SVGs ═══ */
.logo-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  padding: 24px 0;
}
.logo-mq-track {
  display: flex;
  gap: 20px;
  animation: logoScroll 40s linear infinite;
  width: max-content;
}
.logo-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-pill svg {
  flex-shrink: 0;
}
@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .logo-pill {
    padding: 8px 14px !important;
    font-size: .78rem !important;
    gap: 8px !important;
  }
  .logo-pill svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ═══ PULSOR on btn-full — arrow stays right ═══ */
.btn-full.pls-btn {
  justify-content: center !important;
}
.btn-full .pls-txt {
  flex: 0 0 auto !important;
}
.btn-full .pls-ico-wrap {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.btn-full.pls-btn {
  position: relative !important;
  padding-right: 44px !important;
}

/* ═══ FIX: Trust signals alignment ═══ */
.trust-signals {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  text-align: left !important;
}
.trust-sig {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.trust-sig div {
  display: flex !important;
  flex-direction: column !important;
}
@media (max-width: 900px) {
  .trust-signals { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .trust-signals { grid-template-columns: 1fr !important; }
}

/* ═══ SUCCESS SCREENS ═══ */
.success-screen {
  text-align: center;
  padding: 60px 20px;
  animation: fadeInUp .4s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.success-card {
  max-width: 500px;
  margin: 0 auto;
}
.success-ico {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gnbg, #ecfdf5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.success-title {
  font-family: var(--fd, 'Space Grotesk', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tx, #1a1a2e);
  margin-bottom: 12px;
}
.success-desc {
  font-size: .92rem;
  color: var(--tx2, #4a4a6a);
  line-height: 1.6;
  margin-bottom: 28px;
}
.success-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.df-success {
  text-align: center;
  padding: 40px 20px;
}
.df-success-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gnbg, #ecfdf5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

/* ═══ NEW BRAND GRADIENT ═══ */
.brand-get {
  background: linear-gradient(135deg, #2d2b55, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══ NAV LOGO SVG ═══ */

@media (max-width: 768px) {
  
}

/* ═══ UNIFIED PAGE HERO (based on about-hero design) ═══ */
.page-hero{position:relative;padding:160px 0 100px;overflow:hidden}
.page-hero .orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.page-hero .orb-1{width:650px;height:650px;background:rgba(79,70,229,.12);top:-160px;right:-120px;animation:heroOrb1 12s ease-in-out infinite}
.page-hero .orb-2{width:450px;height:450px;background:rgba(99,102,241,.10);bottom:-100px;left:-80px;animation:heroOrb2 15s ease-in-out infinite}
@keyframes heroOrb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,30px) scale(1.05)}}
@keyframes heroOrb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-15px,-20px) scale(1.08)}}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-family:var(--fd);font-size:clamp(2.8rem,5.5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:20px;color:var(--tx)}
.page-hero h1 .gradient-text{background:linear-gradient(135deg,#4f46e5,#7c3aed,#a78bfa,#4f46e5);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s ease infinite}
.page-hero .hero-sub{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--tx2);max-width:800px;line-height:1.7;font-weight:400;margin-top:0}
.page-hero .tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);background:var(--accbg);padding:7px 16px;border-radius:99em;margin-bottom:20px}
@media(max-width:768px){.page-hero{padding:120px 0 70px}}

/* ═══ CENTER PAGE HERO CONTENT ═══ */
.page-hero .wrap{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.page-hero h1{margin-left:auto;margin-right:auto}
.page-hero .hero-sub{margin-left:auto;margin-right:auto}
.page-hero .tag{margin-left:auto;margin-right:auto}

/* ═══ FIX HERO WIDTH ═══ */
.page-hero .wrap{text-align:center!important;max-width:none!important;width:100%!important;padding-left:clamp(20px,4vw,48px)!important;padding-right:clamp(20px,4vw,48px)!important}
.page-hero h1{max-width:1100px!important;margin-left:auto!important;margin-right:auto!important;font-size:clamp(2.8rem,6.5vw,4.8rem)!important}
.page-hero .hero-sub{max-width:720px!important;margin-left:auto!important;margin-right:auto!important}

/* ═══ FIX SECTION HEADERS CENTERING ═══ */
.sec-head.center{text-align:center!important}
.sec-head.center .h2,
.sec-head.center h2,
.sec-head.center .tag,
.sec-head.center .h2-sub,
.sec-head.center p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.sec-head.center .tag{display:inline-block!important}

/* ═══ CENTER ABOUT-HERO (about page) ═══ */
.about-hero .wrap{text-align:center!important;max-width:none!important;width:100%!important}
.about-hero h1{max-width:1100px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.about-hero .hero-sub{max-width:720px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.about-hero .tag{display:inline-block!important;margin-left:auto!important;margin-right:auto!important}

/* ═══ CENTER ALL SEC-HEAD SECTIONS ON HOMEPAGE (not .center class) ═══ */
.sec-head{text-align:center!important}
.sec-head .h2,.sec-head h2,.sec-head .tag,.sec-head .h2-sub,.sec-head p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.sec-head .tag{display:inline-block!important}
.sec-head .h2-sub{max-width:720px!important}

/* ═══ NAV BAR FIX — logo visibility + clean scrolled state ═══ */
.nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1000 !important;
}
.nav.scrolled {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(229,231,235,.6) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.02) !important;
}
.nav-row {
  position: relative !important;
  z-index: 2 !important;
}
.nav-brand,


/* Prevent the nav::after barrier */
.nav::after,
.nav::before {
  display: none !important;
  content: none !important;
}





  100% { opacity: 0.18; filter: blur(0); transform: scale(1); }
}

}

}



/* Mobile: smaller W, less aggressive */
@media (max-width: 768px) {
  
  
  }
}



.hero-new .wrap { position: relative; z-index: 2; }

.hero-float { z-index: 3; }





  100% { opacity: 0.35; filter: blur(0); transform: scale(1); }
}

}

}

/* ═══ NAV LOGO — keep visible on scroll ═══ */

/* Make sure nav-row stays above the backdrop-filter layer */
.nav .nav-row,
.nav.scrolled .nav-row {
  position: relative !important;
  z-index: 5 !important;
}
/* The backdrop-filter is creating a stacking context — ensure content is above it */
.nav.scrolled > * {
  position: relative;
  z-index: 2;
}





}

}
@media (max-width: 768px) {
  
  
  }
}

/* ═══ FOOTER LOGO SVG ═══ */
.footer-brand .footer-logo {
  height: 28px;
  width: auto;
  display: block;
}






}

}
@media (max-width: 768px) {
  
}

/* ═══ NAV LOGO — FIX OPACITY ON SCROLL ═══ */
.nav,
.nav.scrolled {
  background: transparent !important;
}
.nav.scrolled {
  background: rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
}
/* Force nav content above any overlay */
.nav .nav-row {
  position: relative !important;
  z-index: 100 !important;
  isolation: isolate;
}
.nav-brand,
.nav-brand * {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  position: relative !important;
  z-index: 101 !important;
}


/* Kill any pseudo-element overlay */
.nav::before,
.nav::after,
.nav.scrolled::before,
.nav.scrolled::after,
.nav-row::before,
.nav-row::after {
  display: none !important;
  content: none !important;
}

/* ═══ FOOTER LOGO — smaller ═══ */
.footer-brand .footer-logo {
  height: 22px !important;
  width: auto !important;
}

/* ═══════════════════════════════════════════════
   NAV LOGO — ONE clean definition for all pages
   ═══════════════════════════════════════════════ */
.nav-logo {
  height: 26px !important;
  width: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.nav-logo text {
  fill: url(#navG) !important;
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .nav-logo { height: 20px !important; }
}

/* ═══════════════════════════════════════════════
   HOMEPAGE TRUST SIGNALS — proper alignment
   ═══════════════════════════════════════════════ */
.trust-signals {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(16px, 3vw, 32px) !important;
  max-width: 1200px !important;
  margin: 48px auto 0 !important;
  padding: 32px clamp(16px, 4vw, 48px) !important;
  border-top: 1px solid var(--bd) !important;
  border-bottom: 1px solid var(--bd) !important;
}
.trust-sig {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
}
.trust-sig svg {
  color: var(--acc) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.trust-sig div {
  flex: 1 !important;
  min-width: 0 !important;
}
.trust-sig strong {
  display: block !important;
  font-family: var(--fd) !important;
  font-size: clamp(.88rem, 1.8vw, 1rem) !important;
  color: var(--tx) !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}
.trust-sig span {
  display: block !important;
  font-size: clamp(.72rem, 1.5vw, .82rem) !important;
  color: var(--tx2) !important;
  line-height: 1.4 !important;
}
@media (max-width: 900px) {
  .trust-signals { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .trust-signals {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 20px !important;
  }
}

/* ═══════════════════════════════════════════════
   TARIFS — trust bar full width aligned
   ═══════════════════════════════════════════════ */
.trust-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(16px, 3vw, 32px) !important;
  max-width: 1200px !important;
  margin: 32px auto !important;
  padding: 24px clamp(20px, 4vw, 48px) !important;
  background: var(--card) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 8px 32px rgba(0,0,0,.04) !important;
}
.trust-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: clamp(.78rem, 1.6vw, .88rem) !important;
  color: var(--tx) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.trust-badge svg {
  flex-shrink: 0 !important;
  color: #16a34a !important;
}
@media (max-width: 768px) {
  .trust-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 20px 24px !important;
  }
}

/* ═══════════════════════════════════════════════
   TARIFS — price cards alignment
   ═══════════════════════════════════════════════ */
.prc, .price-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}
.pc, .price-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--card) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 12px 40px rgba(0,0,0,.04) !important;
  transition: transform .3s, box-shadow .3s, border-color .3s !important;
}
.pc:hover, .price-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--acc) !important;
  box-shadow: 0 16px 48px rgba(79,70,229,.1) !important;
}
.pc.feat, .price-card.featured {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 2px var(--acc), 0 20px 60px rgba(79,70,229,.12) !important;
  position: relative !important;
}
.pc.feat { transform: scale(1.02); }
.pc.feat:hover { transform: scale(1.02) translateY(-4px); }
.pc-head {
  padding: 32px 28px 20px !important;
  border-bottom: 1px solid var(--bd) !important;
}
.pc-body {
  padding: 24px 28px !important;
  flex: 1 !important;
}
.pc-foot {
  padding: 0 28px 28px !important;
  margin-top: auto !important;
}
.pc-name {
  font-family: var(--fd) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--tx) !important;
  margin-bottom: 4px !important;
}
.pc-desc {
  font-size: .85rem !important;
  color: var(--tx2) !important;
  margin-bottom: 18px !important;
}
.pc-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.pc-price strong {
  font-family: var(--fd) !important;
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: var(--tx) !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}
.pc-price span {
  font-size: .9rem !important;
  color: var(--tx2) !important;
  font-weight: 500 !important;
}
.pc-price-note {
  font-size: .72rem !important;
  color: var(--tx3) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}
.pc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pc-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 7px 0 !important;
  font-size: .82rem !important;
  color: var(--tx) !important;
  line-height: 1.5 !important;
}
.pc-check {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--accbg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}
.pc-check svg {
  width: 10px !important;
  height: 10px !important;
  stroke: var(--acc) !important;
  stroke-width: 3 !important;
  fill: none !important;
}
.pc-badge {
  display: inline-block !important;
  background: var(--acc) !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 99em !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 14px !important;
}
.pc-maint {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: var(--accbg) !important;
  border-radius: 10px !important;
  margin-top: 16px !important;
  font-size: .75rem !important;
  color: var(--tx2) !important;
  line-height: 1.5 !important;
}
.pc-maint a {
  color: var(--acc) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.pc-maint-ico {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
@media (max-width: 968px) {
  .prc, .price-grid { grid-template-columns: 1fr !important; max-width: 500px !important; }
  .pc.feat { transform: none !important; }
  .pc.feat:hover { transform: translateY(-4px) !important; }
}

/* ═══════════════════════════════════════════════
   TARIFS — "Pourquoi ces prix" centered
   ═══════════════════════════════════════════════ */
.prix-why-box {
  max-width: 720px !important;
  margin: 48px auto !important;
  padding: 28px 32px !important;
  background: linear-gradient(135deg, var(--accbg) 0%, rgba(79,70,229,.04) 100%) !important;
  border: 1px solid rgba(79,70,229,.1) !important;
  border-left: 3px solid var(--acc) !important;
  border-radius: 16px !important;
  text-align: center !important;
}
.prix-why-box strong {
  display: block !important;
  font-family: var(--fd) !important;
  font-size: 1.1rem !important;
  color: var(--tx) !important;
  margin-bottom: 10px !important;
}
.prix-why-box > * {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════
   FAQ PAGE — clean redesign
   ═══════════════════════════════════════════════ */
.faq-layout {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: flex-start !important;
}
.faq-side {
  position: sticky !important;
  top: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 24px 0 !important;
}
.faq-side-title {
  font-size: .7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--tx3) !important;
  margin-bottom: 16px !important;
  padding: 0 16px !important;
}
.faq-side-link {
  display: block !important;
  padding: 12px 16px !important;
  font-size: .85rem !important;
  color: var(--tx2) !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  transition: all .2s !important;
  font-weight: 500 !important;
  border-left: 2px solid transparent !important;
}
.faq-side-link:hover {
  background: var(--accbg) !important;
  color: var(--acc) !important;
}
.faq-side-link.active {
  background: var(--accbg) !important;
  color: var(--acc) !important;
  font-weight: 600 !important;
  border-left-color: var(--acc) !important;
}
.faq-cat {
  margin-bottom: 48px !important;
  scroll-margin-top: 100px !important;
}
.faq-cat-title {
  font-family: var(--fd) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--tx) !important;
  margin-bottom: 20px !important;
  letter-spacing: -.02em !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--bd) !important;
}
.faq-item {
  background: var(--card) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all .25s !important;
}
.faq-item:hover {
  border-color: rgba(79,70,229,.3) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
}
.faq-item.open {
  border-color: var(--acc) !important;
  box-shadow: 0 4px 20px rgba(79,70,229,.08) !important;
}
.faq-q {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--ff) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  text-align: left !important;
  line-height: 1.4 !important;
  transition: color .2s !important;
}
.faq-q:hover { color: var(--acc) !important; }
.faq-q svg {
  flex-shrink: 0 !important;
  color: var(--tx3) !important;
  transition: transform .3s, color .2s !important;
}
.faq-item.open .faq-q svg {
  transform: rotate(45deg) !important;
  color: var(--acc) !important;
}
.faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .4s cubic-bezier(.4,0,.2,1) !important;
}
.faq-item.open .faq-a {
  max-height: 500px !important;
}
.faq-a p {
  padding: 0 24px 22px !important;
  font-size: .88rem !important;
  color: var(--tx2) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .faq-side {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 4px 0 !important;
    gap: 6px !important;
  }
  .faq-side-title { display: none !important; }
  .faq-side-link {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: .8rem !important;
    border: 1px solid var(--bd) !important;
    border-left-width: 1px !important;
  }
  .faq-side-link.active {
    background: var(--acc) !important;
    color: #fff !important;
    border-color: var(--acc) !important;
  }
  .faq-q { padding: 18px 18px !important; font-size: .88rem !important; }
  .faq-a p { padding: 0 18px 20px !important; font-size: .82rem !important; }
}

/* ═══════════════════════════════════════════════
   ABOUT — tech stack bigger text, faster marquee
   ═══════════════════════════════════════════════ */
.tech-pill {
  padding: 12px 22px !important;
  font-size: .95rem !important;
}
.tech-pill img {
  width: 22px !important;
  height: 22px !important;
}
.tech-label {
  font-size: .78rem !important;
}
.tech-track {
  animation-duration: 22s !important;
}
.tech-track-reverse {
  animation-duration: 28s !important;
}
@media (max-width: 768px) {
  .tech-track {
    animation-duration: 14s !important;
  }
  .tech-track-reverse {
    animation-duration: 18s !important;
  }
  .tech-pill {
    padding: 10px 16px !important;
    font-size: .82rem !important;
  }
  .tech-pill img {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ═══════════════════════════════════════════════
   HOMEPAGE — all marquees faster too
   ═══════════════════════════════════════════════ */
.logo-mq-track {
  animation-duration: 24s !important;
}
@media (max-width: 768px) {
  .logo-mq-track {
    animation-duration: 16s !important;
  }
}

/* ═══════════════════════════════════════════════
   LEGAL PAGES — proper text alignment
   ═══════════════════════════════════════════════ */
.legal-content,
.mentions,
.confidentialite {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
}
.legal-content h2,
.mentions h2,
.confidentialite h2 {
  font-family: var(--fd) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--tx) !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  letter-spacing: -.02em !important;
}
.legal-content h3,
.mentions h3,
.confidentialite h3 {
  font-family: var(--fd) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}
.legal-content p,
.mentions p,
.confidentialite p {
  font-size: .92rem !important;
  color: var(--tx2) !important;
  line-height: 1.8 !important;
  margin-bottom: 14px !important;
}
.legal-content ul,
.mentions ul,
.confidentialite ul {
  padding-left: 24px !important;
  margin-bottom: 14px !important;
}
.legal-content li,
.mentions li,
.confidentialite li {
  font-size: .92rem !important;
  color: var(--tx2) !important;
  line-height: 1.7 !important;
  margin-bottom: 6px !important;
}


/* ═══════════════════════════════════════════════
   CHAT WIDGET — W logo avatar (header only)
   ═══════════════════════════════════════════════ */
.chat-av {
  width: 40px !important;
  height: 40px !important;
  background: #0a0a0f !important;
  border-radius: 11px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  flex-shrink: 0 !important;
}
.chat-av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast !important;
}

/* ═══════════════════════════════════════════════
   NAV LOGO — force visibility (fix for corrupted CSS)
   ═══════════════════════════════════════════════ */
.nav-brand {
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1000 !important;
  text-decoration: none !important;
}
.nav-brand svg,
.nav-logo {
  height: 28px !important;
  width: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}
.nav-brand svg text {
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .nav-brand svg,
  .nav-logo { height: 22px !important; }
}