/* ====== MOWGLI FLEET AUTO — Shared styles ====== */
:root{
  --bg:         #1a1d24;
  --bg-2:       #20242c;
  --bg-3:       #262a33;
  --surface:    #23272f;
  --surface-2:  #2b303a;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --ink:        #f5f2ea;
  --ink-soft:   rgba(245,242,234,.72);
  --ink-mute:   rgba(245,242,234,.5);

  --blue:       #2bb3ff;
  --blue-deep:  #1e9bf0;
  --blue-soft:  rgba(43,179,255,.18);

  --orange:     #ff6b2c;
  --orange-2:   #ff8a4d;
  --orange-soft:rgba(255,107,44,.16);

  --max:        1380px;
  --pad-x:      clamp(20px, 4vw, 56px);

  --grotesk:    'Cabinet Grotesk', system-ui, sans-serif;
  --sans:       'Satoshi', system-ui, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--sans); overflow-x:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
::selection{background:var(--orange); color:#fff}

body{font-size:16.5px; line-height:1.6; letter-spacing:-.005em; font-weight:500}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer; border:0; background:none}

.container{max-width:var(--max); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x)}
.mono{font-family:var(--mono); letter-spacing:-0.02em}
.eyebrow{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-mute)}
.eyebrow .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); transform:translateY(-1px); margin-right:8px}
.accent-bar{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.accent-bar::before{content:""; width:22px; height:1px; background:var(--orange)}

.cursor{position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%; background:var(--orange); pointer-events:none; mix-blend-mode:screen; transform:translate(-50%,-50%); transition:width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1); z-index:9000}
.cursor.big{width:64px; height:64px; background:rgba(43,179,255,.55)}
@media (hover:none){.cursor{display:none}}

.grain{position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='1'/></svg>")}

/* Scrollbar hidden */
html{scrollbar-width:none; -ms-overflow-style:none}
body{scrollbar-width:none}
::-webkit-scrollbar{width:0; height:0; display:none}

/* ====== NAV ====== */
.nav{position:fixed; top:0; left:0; right:0; z-index:80; padding:18px var(--pad-x); display:flex; align-items:center; justify-content:space-between; transition:padding .35s ease, backdrop-filter .35s, background .35s, border-color .35s; border-bottom:1px solid transparent}
.nav.scrolled{padding:12px var(--pad-x); background:rgba(26,29,36,.72); backdrop-filter:saturate(140%) blur(18px); -webkit-backdrop-filter:saturate(140%) blur(18px); border-bottom-color:var(--line)}
.brandmark{display:flex; align-items:center; gap:12px; font-family:var(--grotesk); font-weight:800; letter-spacing:-0.04em; font-size:18px; color:var(--ink)}
.brandmark .glyph{width:auto; height:42px; padding:6px 10px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 16px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08)}
.brandmark .glyph img{height:100%; width:auto; max-width:none; object-fit:contain; display:block}
.brandmark .lockup{display:flex; flex-direction:column; min-width:0}
.brandmark .lockup b{font-weight:800; line-height:1.1; color:var(--ink)}
.brandmark .lockup span{font-weight:500; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-mute); display:block; margin-top:1px; text-transform:uppercase}
@media (max-width:560px){.brandmark .lockup span{display:none} .brandmark .glyph{height:38px}}

.nav-links{display:flex; gap:28px; align-items:center; font-size:14px; font-weight:500}
.nav-links > a{position:relative; padding:6px 0; color:var(--ink-soft); transition:color .25s}
.nav-links > a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-links > a:hover,.nav-links > a.active{color:var(--ink)}
.nav-links > a:hover::after,.nav-links > a.active::after{transform:scaleX(1)}
.nav-links > a.active::after{background:var(--orange)}
@media (max-width:1080px){.nav-links{display:none}}

.nav-burger{display:none; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--line); align-items:center; justify-content:center; cursor:pointer; color:var(--ink); position:relative; z-index:101}
.nav-burger svg.close{display:none}
.nav-burger.open svg.open{display:none}
.nav-burger.open svg.close{display:block}
@media (max-width:1080px){.nav-burger{display:flex}}

.mobile-menu{position:fixed; inset:0; background:rgba(26,29,36,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:90; display:flex; flex-direction:column; padding:80px var(--pad-x) 40px; gap:14px; opacity:0; pointer-events:none; transition:opacity .35s}
.mobile-menu.open{opacity:1; pointer-events:auto}
.mobile-menu a{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-radius:18px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-family:var(--grotesk); font-weight:800; font-size:20px; letter-spacing:-.02em; transition:background .25s, transform .25s}
.mobile-menu a:hover,.mobile-menu a.active{background:var(--surface-2); transform:translateX(4px)}
.mobile-menu a.active{border-color:var(--orange)}
.mobile-menu a svg{color:var(--ink-mute)}

.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 18px 13px 20px; border-radius:999px; background:var(--ink); color:var(--bg); font-weight:600; font-size:14px; letter-spacing:-.005em; position:relative; overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .arrow{width:28px; height:28px; border-radius:50%; background:var(--orange); display:grid; place-items:center; color:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:rotate(-45deg)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-2)}
.btn.ghost .arrow{background:var(--ink); color:var(--bg)}
.btn.solid-orange{background:var(--orange); color:#fff}
.btn.solid-orange .arrow{background:#fff; color:var(--orange)}

.btn-wa{background:#1f6f3a !important; color:#fff !important; box-shadow:0 12px 24px -10px rgba(31,111,58,.5); padding:10px 12px 10px 14px !important; font-size:13.5px !important; gap:8px !important}
.btn-wa:hover{background:#2a8a4a !important}
.btn-wa .arrow{background:#0a0f0c !important; color:#fff !important; width:24px !important; height:24px !important}
.btn-wa .wa-glyph{display:grid; place-items:center; width:18px; height:18px; color:#fff; flex-shrink:0}
.btn-wa .wa-glyph svg{display:block; width:16px; height:16px}

/* Nav dropdowns */
.nav-drop{position:relative}
.nav-drop .trigger{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); padding:6px 0; cursor:pointer; transition:color .25s}
.nav-drop .trigger svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav-drop:hover .trigger,.nav-drop.open .trigger{color:var(--ink)}
.nav-drop:hover .trigger svg,.nav-drop.open .trigger svg{transform:rotate(180deg); color:var(--orange)}
.drop-panel{position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-8px); min-width:300px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:8px; box-shadow:0 30px 60px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04); opacity:0; pointer-events:none; transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); z-index:90}
.drop-panel::before{content:""; position:absolute; bottom:100%; left:0; right:0; height:16px}
.nav-drop:hover .drop-panel,.nav-drop.open .drop-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.drop-item{display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:12px; color:var(--ink); transition:background .2s; text-decoration:none}
.drop-item:hover{background:rgba(255,255,255,.05)}
.drop-item .dx{flex-shrink:0; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink-soft)}
.drop-item .dx.pop{background:var(--orange); color:#fff; border-color:transparent; font-family:var(--grotesk); font-size:15px}
.drop-item div b{display:block; font-family:var(--grotesk); font-weight:800; font-size:14.5px; letter-spacing:-.015em; color:var(--ink)}
.drop-item div span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-mute); margin-top:2px; text-transform:uppercase}
.drop-item.featured{background:rgba(255,107,44,.06); border:1px solid rgba(255,107,44,.2)}
.drop-item.featured:hover{background:rgba(255,107,44,.1)}
.drop-item.cta{background:linear-gradient(135deg, #1f6f3a, #195a30); margin-top:4px}
.drop-item.cta div b,.drop-item.cta div span{color:#fff}
.drop-item.cta:hover{background:linear-gradient(135deg, #258245, #1c6837)}
.drop-item.cta .dx{background:rgba(255,255,255,.18); border-color:transparent; color:#fff; font-size:14px; font-weight:700}
.drop-sep{height:1px; background:var(--line); margin:6px 8px}

/* ====== SECTION HEADER ====== */
.section{padding:120px 0; position:relative}
.section-head{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; margin-bottom:64px}
@media (max-width:880px){.section-head{grid-template-columns:1fr; gap:24px}}
.section h2{font-family:var(--grotesk); font-weight:900; font-size:clamp(44px, 5.8vw, 88px); letter-spacing:-.055em; line-height:.88; margin:18px 0 0; max-width:14ch; color:var(--ink); text-wrap:balance}
.section h2 em{font-style:italic; font-weight:500; color:var(--blue)}
.section h2 mark{background:none; color:var(--orange)}
.section-head .right{font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:46ch; justify-self:end; font-weight:500}
.section-head .right b{color:var(--ink); font-weight:700}

/* ====== PAGE HERO (short pages) ====== */
.page-hero{padding:160px 0 80px; position:relative; overflow:hidden}
.page-hero::before{content:""; position:absolute; right:-15vw; top:-30vh; width:60vw; height:60vw; max-width:900px; max-height:900px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,107,44,.18), transparent 70%); pointer-events:none; filter:blur(40px)}
.page-hero .container{position:relative; z-index:1}
.page-hero .breadcrumb{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:30px}
.page-hero .breadcrumb a:hover{color:var(--ink)}
.page-hero .breadcrumb .sep{opacity:.5}
.page-hero h1{font-family:var(--grotesk); font-weight:900; font-size:clamp(56px, 8vw, 128px); letter-spacing:-.055em; line-height:.88; margin:0 0 28px; color:var(--ink); text-wrap:balance; max-width:14ch}
.page-hero h1 em{font-style:italic; font-weight:500; color:var(--blue)}
.page-hero h1 mark{background:none; color:var(--orange)}
.page-hero p{font-size:19px; line-height:1.55; color:var(--ink-soft); max-width:55ch; margin:0 0 38px; font-weight:500}
.page-hero p b{color:var(--ink); font-weight:700}

/* ====== Reveal ====== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ====== FOOTER ====== */
.foot{background:#14171e; color:var(--ink); padding:100px 0 24px; position:relative; overflow:hidden; border-top:1px solid var(--line)}
.foot-top{display:grid; grid-template-columns: 1fr auto; gap:48px; align-items:end; padding-bottom:60px; border-bottom:1px solid var(--line)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}}
.foot h2{font-family:var(--grotesk); font-weight:900; font-size:clamp(80px, 14vw, 220px); letter-spacing:-.06em; line-height:.82; margin:0; color:var(--ink)}
.foot h2 em{font-style:italic; font-weight:500; color:var(--blue)}
.foot .meta{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); text-align:right; min-width:180px}
.foot .meta b{display:block; color:var(--ink); font-family:var(--grotesk); font-weight:800; font-size:32px; margin-bottom:8px; letter-spacing:-.02em}
.foot-cols{display:grid; grid-template-columns:repeat(4, 1fr); gap:40px; padding:50px 0; border-bottom:1px solid var(--line)}
@media (max-width:880px){.foot-cols{grid-template-columns:repeat(2, 1fr); gap:28px}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr}}
.foot-cols h4{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 16px; font-weight:500}
.foot-cols ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.foot-cols a{font-family:var(--grotesk); font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ink-soft); transition:color .2s}
.foot-cols a:hover{color:var(--orange)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.foot-bottom a:hover{color:var(--ink)}
@media (max-width:660px){.foot-bottom{flex-direction:column; gap:12px}}

/* ====== CHATBOT ====== */
.chatbot{position:fixed; right:22px; bottom:22px; z-index:200; font-family:var(--sans)}
.chatbot-fab{position:relative; width:62px; height:62px; border-radius:50%; background:linear-gradient(135deg, #1f6f3a 0%, #195a30 100%); color:#fff; display:grid; place-items:center; box-shadow:0 18px 40px -10px rgba(31,111,58,.55), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.chatbot-fab:hover{transform:translateY(-3px) scale(1.05)}
.chatbot-fab svg{transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); position:absolute}
.chatbot-fab .ic-close{opacity:0; transform:rotate(-90deg) scale(.6)}
.chatbot.open .chatbot-fab .ic-chat{opacity:0; transform:rotate(90deg) scale(.6)}
.chatbot.open .chatbot-fab .ic-close{opacity:1; transform:rotate(0) scale(1)}
.fab-pulse{position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(31,111,58,.4); animation:waRing 2.4s ease-out infinite; pointer-events:none}
.chatbot.open .fab-pulse{display:none}
@keyframes waRing{0%{transform:scale(1); opacity:.6} 100%{transform:scale(1.4); opacity:0}}
.fab-badge{position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--orange); color:#fff; font-family:var(--mono); font-weight:700; font-size:11px; display:grid; place-items:center; box-shadow:0 6px 14px -4px rgba(255,107,44,.6)}
.chatbot.open .fab-badge{display:none}
.chatbot-panel{position:absolute; bottom:78px; right:0; width:min(380px, calc(100vw - 44px)); max-height:560px; background:#fff; color:#0a1628; border-radius:24px; box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.04); display:flex; flex-direction:column; overflow:hidden; transform-origin:bottom right; transform:translateY(20px) scale(.96); opacity:0; pointer-events:none; transition:transform .42s cubic-bezier(.16,1,.3,1), opacity .35s}
.chatbot.open .chatbot-panel{transform:none; opacity:1; pointer-events:auto}
.chatbot-head{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; background:linear-gradient(135deg, #1f6f3a 0%, #195a30 100%); color:#fff}
.chatbot-head .agent{display:flex; align-items:center; gap:12px}
.chatbot-head .agent-avatar{position:relative; width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden}
.chatbot-head .agent-avatar img{width:80%; height:80%; object-fit:contain}
.chatbot-head .agent-avatar .dot{position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%; background:#2ee37a; border:2px solid #fff}
.chatbot-head b{display:block; font-family:var(--grotesk); font-weight:800; letter-spacing:-.02em; font-size:15px}
.chatbot-head span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:rgba(255,255,255,.78); margin-top:2px}
.chatbot-min{color:#fff; opacity:.85; padding:6px; transition:opacity .25s}
.chatbot-min:hover{opacity:1}
.chatbot-body{flex:1; padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; background:linear-gradient(180deg, #f9faf6 0%, #f3f0e7 100%)}
.chatbot-body::-webkit-scrollbar{width:4px}
.chatbot-body::-webkit-scrollbar-thumb{background:rgba(10,22,40,.18); border-radius:999px}
.msg{display:flex; flex-direction:column; gap:4px; max-width:84%; animation:msgIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes msgIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.msg.bot{align-self:flex-start}
.msg.user{align-self:flex-end; align-items:flex-end}
.msg .bubble{padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.45; letter-spacing:-.005em}
.msg.bot .bubble{background:#fff; border:1px solid rgba(10,22,40,.06); border-bottom-left-radius:6px}
.msg.bot .bubble b{font-weight:700; color:#1f6f3a}
.msg.user .bubble{background:#1f6f3a; color:#fff; border-bottom-right-radius:6px}
.msg .time{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(10,22,40,.4); padding:0 6px}
.msg.bot .bubble a{color:#1f6f3a; text-decoration:underline; text-underline-offset:2px; font-weight:700}
.msg .typing{display:inline-flex; gap:4px; padding:14px 16px}
.msg .typing span{width:6px; height:6px; border-radius:50%; background:rgba(10,22,40,.3); animation:typing 1.2s infinite ease-in-out}
.msg .typing span:nth-child(2){animation-delay:.15s}
.msg .typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-4px); opacity:1}}
.chatbot-quick{display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px 4px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.85)); border-top:1px solid rgba(10,22,40,.06)}
.chatbot-quick button{padding:7px 12px; border-radius:999px; background:#fff; border:1px solid rgba(10,22,40,.1); font-family:var(--sans); font-size:12px; font-weight:600; color:#0a1628; cursor:pointer; transition:background .25s, transform .25s}
.chatbot-quick button:hover{background:#e8f4ec; border-color:#1f6f3a; color:#1f6f3a}
.chatbot-foot{padding:10px 14px 14px; background:#fff; border-top:1px solid rgba(10,22,40,.06)}
.cb-cta{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:14px; background:#1f6f3a; color:#fff; font-family:var(--sans); font-weight:700; font-size:13.5px; text-decoration:none; transition:background .25s}
.cb-cta:hover{background:#258245}
.cb-cta svg{color:#fff}

/* ====== HOME TEASERS ====== */
.teasers{padding:140px 0 120px; background:var(--bg)}
.teaser-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:980px){.teaser-grid{grid-template-columns:1fr}}
.teaser{position:relative; border-radius:28px; padding:36px; min-height:380px; overflow:hidden; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .35s; text-decoration:none; color:var(--ink)}
.teaser:hover{transform:translateY(-6px); border-color:var(--ink-mute)}
.teaser .bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.teaser .bg img{width:100%; height:100%; object-fit:cover; opacity:.34; transform:scale(1.04); transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.teaser:hover .bg img{transform:scale(1.1)}
.teaser .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.85) 100%)}
.teaser > *{position:relative; z-index:1}
.teaser .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.teaser .num{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.teaser .arrow{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s}
.teaser:hover .arrow{transform:rotate(-45deg); background:var(--orange); border-color:transparent}
.teaser h3{font-family:var(--grotesk); font-weight:900; font-size:38px; letter-spacing:-.04em; line-height:.95; margin:0 0 12px; color:#fff}
.teaser h3 em{font-style:italic; font-weight:500; color:var(--blue)}
.teaser p{color:rgba(255,255,255,.78); margin:0; font-size:15px; line-height:1.55; max-width:42ch}
.teaser .feats{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.teaser .feats span{padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff}

/* ====== HOME PRIMARY CTA STRIP ====== */
.primary-cta{padding:120px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; position:relative; overflow:hidden}
.primary-cta::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80vw; max-width:900px; height:500px; background:radial-gradient(closest-side, rgba(255,107,44,.16), transparent 70%); filter:blur(40px); pointer-events:none}
.primary-cta .container{position:relative; z-index:1; max-width:840px}
.primary-cta h2{font-family:var(--grotesk); font-weight:900; font-size:clamp(40px, 5.5vw, 76px); letter-spacing:-.05em; line-height:.92; margin:18px 0 22px; color:var(--ink); text-wrap:balance; max-width:none}
.primary-cta h2 em{font-style:italic; font-weight:500; color:var(--blue)}
.primary-cta h2 mark{background:none; color:var(--orange)}
.primary-cta p{color:var(--ink-soft); font-size:18px; line-height:1.55; max-width:54ch; margin:0 auto 36px; font-weight:500}
.primary-cta .actions{display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center}
@media (max-width:560px){.primary-cta .actions{flex-direction:column; align-items:stretch}}

/* ====== SCROLL EXPAND HERO (home) ====== */
.expand{position:relative; height:280vh}
.expand-stage{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--bg)}
.expand-stage::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80%; height:80%; max-width:900px; max-height:700px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,107,44,.12), transparent 70%); filter:blur(40px); pointer-events:none; z-index:1}
.expand-stage::after{content:""; position:absolute; right:-10vw; bottom:-10vh; width:60vw; height:60vw; max-width:800px; max-height:800px; border-radius:50%; background:radial-gradient(closest-side, rgba(43,179,255,.08), transparent 70%); filter:blur(60px); pointer-events:none; z-index:1}
.expand-frame{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; border-radius:32px; overflow:hidden; box-shadow:0 60px 140px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08), 0 0 80px -10px rgba(255,107,44,.15); will-change:width, height, border-radius; background:#0e1116; border:1px solid transparent}
.expand-frame .bg-photo{position:absolute; inset:0; z-index:0; overflow:hidden}
.expand-frame .bg-photo img{width:100%; height:100%; object-fit:cover; filter:blur(20px) saturate(1.1); transform:scale(1.18); transition:filter .15s linear, transform .15s linear; will-change:filter, transform}
.expand-frame .bg-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.32) 100%)}
.expand-frame .logo-only{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; background:#fff; border-radius:24px; padding:clamp(22px, 3vw, 44px) clamp(30px, 3.8vw, 60px); display:flex; align-items:center; justify-content:center; box-shadow:0 24px 60px -20px rgba(0,0,0,.45); width:min(86%, 560px); aspect-ratio:auto}
.expand-frame .logo-only img{width:100%; max-width:100%; height:auto; object-fit:contain; display:block}

/* Intro 3s scroll-lock indicator */
.intro-lock{position:fixed; left:50%; bottom:120px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .6s ease; pointer-events:none}
.intro-lock.visible{opacity:1}
.intro-lock .ring{position:relative; width:60px; height:60px}
.intro-lock .ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.intro-lock .ring circle{fill:none; stroke-width:2.5}
.intro-lock .ring .track{stroke:rgba(255,255,255,.18)}
.intro-lock .ring .fill{stroke:var(--orange); stroke-linecap:round; stroke-dasharray:170; stroke-dashoffset:170; transition:stroke-dashoffset 3s linear}
.intro-lock.start .ring .fill{stroke-dashoffset:0}
.intro-lock .num{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--grotesk); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink)}
.expand-cue{position:absolute; left:50%; bottom:48px; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); will-change:opacity}
.expand-cue .wheel{width:22px; height:34px; border:1.5px solid var(--ink-mute); border-radius:14px; position:relative}
.expand-cue .wheel::after{content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%); width:3px; height:8px; background:var(--ink); border-radius:2px; animation:wheelDot 1.6s ease-in-out infinite}
@keyframes wheelDot{0%{transform:translate(-50%,0); opacity:1} 70%{transform:translate(-50%,14px); opacity:0} 100%{transform:translate(-50%,0); opacity:0}}

/* ====== MARQUEE ====== */
.marquee{padding:42px 0; border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; position:relative}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg, var(--bg-2), transparent)}
.marquee::after{right:0; background:linear-gradient(-90deg, var(--bg-2), transparent)}
.marquee-track{display:flex; gap:60px; white-space:nowrap; width:max-content; animation: marqueeRoll 38s linear infinite}
.marquee-track span{font-family:var(--grotesk); font-weight:800; font-size:clamp(40px, 7vw, 92px); letter-spacing:-0.04em; line-height:1; display:inline-flex; align-items:center; gap:60px; color:var(--ink)}
.marquee-track .sep{width:22px; height:22px; border-radius:6px; background:var(--orange); transform:rotate(45deg)}
.marquee-track .it{font-style:italic; font-weight:500; color:var(--blue)}
.marquee-track .ol{-webkit-text-stroke:1px var(--ink); color:transparent}
@keyframes marqueeRoll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ====== PILLARS ====== */
.pillars{display:grid; gap:14px}
.pillars.wide{grid-template-columns:repeat(2, 1fr); gap:16px}
@media (max-width:980px){.pillars.wide{grid-template-columns:1fr}}
.pillar{border:1px solid var(--line); border-radius:24px; padding:28px; background:var(--surface); display:grid; grid-template-columns:64px 1fr auto; gap:22px; align-items:center; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s}
.pillar:hover{transform:translateY(-4px); border-color:var(--ink-mute); background:var(--surface-2)}
.pillar .num{font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--ink-mute)}
.pillar h4{font-family:var(--grotesk); font-weight:800; font-size:24px; letter-spacing:-.02em; margin:0 0 4px; color:var(--ink)}
.pillar p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.5; max-width:46ch}
.pillar .icon{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.05); color:var(--ink); flex-shrink:0; justify-self:end; border:1px solid var(--line)}
.pillar.blue .icon{background:var(--blue-soft); color:var(--blue); border-color:transparent}
.pillar.orange .icon{background:var(--orange-soft); color:var(--orange); border-color:transparent}

/* ====== SERVICES horizontal scroll ====== */
.services{background:#14171e; color:var(--ink); padding:140px 0 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.h-pin{position:relative}
.h-pin-stage{position:relative; height:100vh; display:flex; align-items:center; overflow:hidden}
.h-track{display:flex; gap:24px; padding:0 var(--pad-x); will-change:transform}
.service-card{flex:0 0 min(82vw, 680px); min-height:64vh; border-radius:36px; padding:42px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg, #232932 0%, #1a1f27 100%); border:1px solid rgba(255,255,255,.07); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.service-card:hover{transform:translateY(-6px)}
.service-card:hover .bg-photo img{transform:scale(1.1)}
@media (max-width:880px){.service-card{flex:0 0 86vw; padding:30px}}
.service-card .top{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.service-card .top .num{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute)}
.service-card .top .icon{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--ink); border:1px solid rgba(255,255,255,.08)}
.service-card h3{font-family:var(--grotesk); font-weight:900; font-size:clamp(44px, 5.6vw, 76px); letter-spacing:-.04em; line-height:.95; margin:32px 0 14px; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.45)}
.service-card h3 span{display:block; margin-top:4px}
.service-card .desc{color:#e6e3d8; max-width:48ch; font-size:16.5px; line-height:1.55; font-weight:500}
.service-card ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px}
.service-card ul li{display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:14.5px; color:#fff; font-weight:500}
.service-card ul li .dot{width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0}
.service-card .footer{margin-top:30px; display:flex; align-items:center; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(255,255,255,.08)}
.service-card .footer .price{font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink-soft)}
.service-card .footer .price b{font-family:var(--grotesk); font-size:24px; color:var(--ink); letter-spacing:-.02em; margin-right:8px}
.service-card.accent-blue{background:linear-gradient(180deg, #1a4a72 0%, #122e4b 100%)}
.service-card.accent-orange{background:linear-gradient(180deg, #a23913 0%, #6b2410 100%)}
.service-card .bg-photo{position:absolute; inset:0; z-index:0; overflow:hidden}
.service-card .bg-photo img{width:100%; height:100%; object-fit:cover; opacity:.38; transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.8,.2,1); will-change:transform}
.service-card .bg-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.85) 100%)}
.service-card > *{position:relative; z-index:1}
.h-pin-indicator{position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:48px; display:flex; align-items:center; gap:14px; color:var(--ink-mute); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.h-pin-indicator .bar{flex:1; height:1px; background:rgba(255,255,255,.14); position:relative; overflow:hidden}
.h-pin-indicator .bar span{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--orange); display:block}

/* ====== PACKS sticky stack ====== */
.packs{padding:140px 0 80px; background:var(--bg-2); border-top:1px solid var(--line)}
.pack-stack{position:relative}
.pack{position:sticky; top:60px; margin:0 auto 40px; max-width:1200px; min-height:560px; border-radius:36px; padding:52px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; background:var(--surface); border:1px solid var(--line); box-shadow:0 30px 100px -50px rgba(0,0,0,.7); align-items:center}
@media (max-width:980px){.pack{grid-template-columns:1fr; padding:38px; gap:28px; top:80px}}
.pack .meta{display:flex; flex-direction:column; gap:8px}
.pack .meta .num{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute)}
.pack h3{font-family:var(--grotesk); font-weight:900; font-size:clamp(48px, 6.5vw, 100px); letter-spacing:-.05em; line-height:.86; margin:14px 0 4px; color:var(--ink)}
.pack h3 em{font-style:italic; font-weight:500; color:var(--blue)}
.pack .verb{font-family:var(--grotesk); font-style:italic; font-weight:500; color:var(--orange); font-size:24px; letter-spacing:-.02em; margin-bottom:18px}
.pack .promise{color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:44ch}
.pack .right{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:24px; padding:36px; color:var(--ink); position:relative; overflow:hidden; min-height:380px; display:flex; flex-direction:column; justify-content:space-between}
.pack .right::before{content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(255,107,44,.28), transparent 70%)}
.pack .price-row{display:flex; align-items:flex-end; gap:10px}
.pack .price-row .amount{font-family:var(--grotesk); font-weight:900; font-size:78px; letter-spacing:-.05em; line-height:1; color:var(--ink)}
.pack .price-row .per{font-family:var(--mono); font-size:13px; color:var(--ink-mute); letter-spacing:.04em; padding-bottom:14px}
.pack .range{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:6px}
.pack ul{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px}
.pack ul li{display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-soft)}
.pack ul li svg{flex-shrink:0; color:var(--orange)}
.pack .badge{position:absolute; top:30px; right:30px; padding:6px 12px; border-radius:999px; background:var(--orange-soft); color:var(--orange); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.pack-cta{display:inline-flex; align-items:center; gap:12px; margin-top:24px; padding:14px 16px 14px 18px; border-radius:14px; background:#1f6f3a; color:#fff; font-family:var(--sans); font-weight:700; font-size:14.5px; letter-spacing:-.005em; border:1px solid rgba(255,255,255,.1); box-shadow:0 14px 30px -14px rgba(31,111,58,.55); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s; width:100%; justify-content:center}
.pack-cta:hover{background:#2a8a4a; transform:translateY(-2px)}
.pack-cta svg:first-child{flex-shrink:0; color:#fff}
.pack-cta .arrow{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; color:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1); flex-shrink:0}
.pack-cta:hover .arrow{transform:rotate(-45deg)}
.pack-cta.light{background:#fff; color:#0a1628}
.pack-cta.light:hover{background:#f6f3eb}
.pack-cta.light .arrow{background:rgba(10,22,40,.12); color:#0a1628}
.pack-cta.light svg:first-child{color:#1f6f3a}
.pack:nth-child(2){background:var(--surface-2)}
.pack:nth-child(3){background:linear-gradient(160deg, #2a1b10 0%, #3a2616 100%); border-color:rgba(255,107,44,.25)}
.pack:nth-child(3) .right{background:var(--orange); border-color:transparent; color:#fff}
.pack:nth-child(3) .right .amount{color:#fff}
.pack:nth-child(3) .right ul li{color:rgba(255,255,255,.95)}
.pack:nth-child(3) .right ul li svg{color:#fff}
.pack:nth-child(3) .right .per,.pack:nth-child(3) .right .range{color:rgba(255,255,255,.78)}
.pack:nth-child(3) .right::before{background:radial-gradient(circle, rgba(255,255,255,.25), transparent 70%)}
.pack:nth-child(3) .badge{background:rgba(255,255,255,.18); color:#fff}
.pack:nth-child(4){background:linear-gradient(160deg, #142e48 0%, #1c3e60 100%); border-color:rgba(43,179,255,.22)}
.pack:nth-child(4) h3 em{color:var(--blue)}
.pack:nth-child(4) .right{background:var(--ink); color:var(--bg)}
.pack:nth-child(4) .right .amount,.pack:nth-child(4) .right ul li{color:var(--bg)}
.pack:nth-child(4) .right ul li svg{color:var(--orange)}
.pack:nth-child(4) .right .per,.pack:nth-child(4) .right .range{color:rgba(8,9,11,.55)}
.pack:nth-child(4) .right::before{background:radial-gradient(circle, rgba(30,155,240,.32), transparent 70%)}

/* ====== STATS ====== */
.stats{padding:120px 0; background:var(--bg); border-top:1px solid var(--line)}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (max-width:880px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-cell{padding:46px 28px; border-right:1px solid var(--line); position:relative}
.stat-cell:last-child{border-right:0}
@media (max-width:880px){.stat-cell:nth-child(2n){border-right:0} .stat-cell{border-bottom:1px solid var(--line)}}
.stat-cell .num{font-family:var(--grotesk); font-weight:900; font-size:clamp(54px, 7vw, 96px); letter-spacing:-.045em; line-height:.92; color:var(--ink)}
.stat-cell .num.blue{color:var(--blue)}
.stat-cell .num.orange{color:var(--orange)}
.stat-cell .label{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:14px}
.stat-cell .sub{font-size:13.5px; color:var(--ink-soft); margin-top:8px; max-width:24ch}

/* ====== AVIS ====== */
.reviews{background:var(--bg-2); border-top:1px solid var(--line)}
.reviews-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:980px){.reviews-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:660px){.reviews-grid{grid-template-columns:1fr}}
.review-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:18px; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s; position:relative; overflow:hidden}
.review-card:hover{transform:translateY(-4px); border-color:var(--orange); background:var(--surface-2)}
.review-card .stars{display:flex; gap:3px; color:var(--orange)}
.review-card blockquote{margin:0; font-family:var(--grotesk); font-weight:500; font-size:18px; line-height:1.45; color:var(--ink); letter-spacing:-.01em}
.review-card blockquote b{font-weight:800; color:var(--orange)}
.review-card .who{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line)}
.review-card .who .avatar{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--grotesk); font-weight:800; font-size:14px; letter-spacing:-.02em; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.review-card .who b{font-family:var(--grotesk); font-weight:800; letter-spacing:-.02em; font-size:15.5px; color:var(--ink)}

/* ====== TARIFS ====== */
.nettoyage{padding:120px 0; background:var(--bg-2); border-top:1px solid var(--line)}
.price-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start}
@media (max-width:980px){.price-grid{grid-template-columns:1fr}}
.price-rows{border-top:1px solid var(--line)}
.price-row-item{display:grid; grid-template-columns:48px 1fr auto; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); align-items:center; transition:padding .35s ease}
.price-row-item:hover{padding-left:14px}
.price-row-item .ix{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute)}
.price-row-item h4{margin:0 0 4px; font-family:var(--grotesk); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
.price-row-item p{margin:0; color:var(--ink-soft); font-size:14px}
.price-row-item .tag{font-family:var(--grotesk); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink); text-align:right; white-space:nowrap}
.price-row-item .tag span{display:block; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--ink-mute); text-transform:uppercase; margin-top:4px}

.month-pack-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:38px; position:relative; overflow:hidden}
.month-pack-card h3{font-family:var(--grotesk); font-weight:900; font-size:32px; letter-spacing:-.03em; margin:0 0 8px; color:var(--ink)}
.month-pack-card > p{color:var(--ink-soft); margin:0 0 26px; max-width:34ch}
.month-pack-list{display:grid; gap:14px}
.month-pack{display:grid; grid-template-columns:1fr auto; gap:14px; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); align-items:center; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s}
.month-pack:hover{transform:translateX(6px); background:rgba(255,255,255,.07)}
.month-pack .nm{display:flex; align-items:center; gap:12px}
.month-pack .dot{width:10px; height:10px; border-radius:50%; background:var(--blue)}
.month-pack.premium .dot{background:var(--orange)}
.month-pack.intensif .dot{background:var(--ink)}
.month-pack b{font-family:var(--grotesk); font-weight:800; letter-spacing:-.01em; font-size:18px; color:var(--ink)}
.month-pack span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); text-transform:uppercase; margin-top:2px}
.month-pack .px{font-family:var(--grotesk); font-weight:900; font-size:24px; letter-spacing:-.02em; text-align:right; color:var(--ink)}
.month-pack .px em{font-style:normal; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; color:var(--ink-mute); display:block; margin-top:2px; text-transform:uppercase}
.month-pack-extras{margin-top:24px; padding-top:20px; border-top:1px dashed var(--line-2); display:grid; grid-template-columns:repeat(2, 1fr); gap:10px}
@media (max-width:560px){.month-pack-extras{grid-template-columns:1fr}}
.month-pack-extras .ex{padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); display:flex; align-items:center; gap:10px}
.month-pack-extras .ex b{font-family:var(--grotesk); font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--orange); flex-shrink:0}
.month-pack-extras .ex span{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-soft); text-transform:none}

/* ====== ENGAGEMENT ====== */
.engage{padding:140px 0; background:var(--bg); overflow:hidden; position:relative; border-top:1px solid var(--line)}
.engage::before{content:""; position:absolute; right:-20vw; top:-20vh; width:80vw; height:80vw; border-radius:50%; background:radial-gradient(closest-side, rgba(43,179,255,.18), transparent 70%); pointer-events:none}
.engage .container{position:relative; z-index:1}
.engage-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px}
@media (max-width:880px){.engage-grid{grid-template-columns:1fr}}
.engage-card{border:1px solid var(--line); border-radius:26px; padding:34px; background:var(--surface); position:relative; overflow:hidden}
.engage-card .ix{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute)}
.engage-card h3{font-family:var(--grotesk); font-weight:900; font-size:30px; letter-spacing:-.03em; margin:14px 0 12px; color:var(--ink)}
.engage-card p{color:var(--ink-soft); font-size:15px; margin:0 0 22px; line-height:1.55}
.engage-card .ic{display:inline-grid; place-items:center; width:54px; height:54px; border-radius:18px; background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--line); margin-bottom:20px}
.engage-card.accent{background:linear-gradient(160deg, #ff6b2c 0%, #d34a14 100%); border-color:transparent}
.engage-card.accent h3,.engage-card.accent p,.engage-card.accent .ix{color:#fff}
.engage-card.accent p,.engage-card.accent .ix{color:rgba(255,255,255,.85)}
.engage-card.accent .ic{background:rgba(255,255,255,.16); color:#fff; border-color:transparent}

/* ====== FAQ ====== */
.faq{background:var(--bg-2); border-top:1px solid var(--line)}
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:1000px; margin:0 auto}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:border-color .35s, background .35s}
.faq-item[open]{border-color:var(--orange); background:var(--surface-2)}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 28px; cursor:pointer; list-style:none; transition:padding .25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:rgba(255,255,255,.02)}
.faq-item summary .q{font-family:var(--grotesk); font-weight:800; font-size:18.5px; letter-spacing:-.02em; color:var(--ink); line-height:1.3; text-wrap:balance}
.faq-item summary .ic{flex-shrink:0; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s, color .35s}
.faq-item[open] summary .ic{transform:rotate(180deg); background:var(--orange); border-color:transparent; color:#fff}
.faq-item .a{padding:0 28px 26px; color:var(--ink-soft); font-size:16px; line-height:1.65; max-width:78ch; animation:faqIn .4s cubic-bezier(.2,.8,.2,1)}
.faq-item .a b{color:var(--ink); font-weight:700}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (max-width:660px){.faq-item summary{padding:20px}.faq-item summary .q{font-size:16.5px}.faq-item .a{padding:0 20px 22px; font-size:15px}}

/* ====== DEVIS ====== */
.devis{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); border-top:1px solid var(--line)}
.devis-wrap{max-width:1080px; margin:0 auto}
.devis-steps{display:flex; gap:0; justify-content:space-between; margin-bottom:30px; padding:0; border-bottom:1px solid var(--line); position:relative}
.devis-steps .step{flex:1; padding:18px 14px; display:flex; align-items:center; gap:12px; color:var(--ink-mute); font-family:var(--sans); font-weight:600; transition:color .35s, border-color .35s; border-bottom:2px solid transparent; margin-bottom:-1px}
.devis-steps .step b{font-family:var(--mono); font-size:13px; font-weight:600; color:inherit; letter-spacing:.05em}
.devis-steps .step span{font-size:14.5px; letter-spacing:-.01em}
.devis-steps .step.active{color:var(--orange); border-color:var(--orange)}
.devis-steps .step.done{color:var(--ink)}
@media (max-width:660px){.devis-steps .step span{display:none}.devis-steps .step{justify-content:center; padding:14px 8px}}
.devis-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:40px; min-height:480px; box-shadow:0 30px 80px -50px rgba(0,0,0,.6)}
@media (max-width:660px){.devis-card{padding:24px; border-radius:20px}}
.devis-panel h3{font-family:var(--grotesk); font-weight:900; font-size:clamp(28px, 3.4vw, 40px); letter-spacing:-.04em; line-height:1; margin:0 0 10px; color:var(--ink); text-wrap:balance}
.devis-panel .hint{color:var(--ink-soft); margin:0 0 28px; font-size:15px}
.pack-radios{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:28px}
@media (max-width:660px){.pack-radios{grid-template-columns:1fr}}
.pack-radio{cursor:pointer; position:relative}
.pack-radio input{position:absolute; opacity:0; pointer-events:none}
.pr-card{padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.02); border:1.5px solid var(--line); transition:border-color .25s, background .25s, transform .25s cubic-bezier(.2,.8,.2,1); position:relative; min-height:130px; display:flex; flex-direction:column; gap:8px}
.pack-radio:hover .pr-card{border-color:var(--ink-mute); transform:translateY(-2px)}
.pack-radio input:checked + .pr-card{border-color:var(--orange); background:rgba(255,107,44,.08); box-shadow:0 0 0 3px rgba(255,107,44,.12)}
.pr-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.pr-top b{font-family:var(--grotesk); font-weight:900; font-size:24px; letter-spacing:-.025em; color:var(--ink)}
.pr-top span{font-family:var(--grotesk); font-weight:800; font-size:18px; color:var(--ink)}
.pr-top span em{font-style:normal; font-family:var(--mono); font-weight:500; font-size:11px; color:var(--ink-mute); letter-spacing:.06em; margin-left:2px}
.pr-sub{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)}
.pr-feats{font-size:13.5px; color:var(--ink-soft); line-height:1.4}
.badge-pop{position:absolute; top:-8px; right:16px; padding:4px 10px; border-radius:999px; background:var(--orange); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:22px}
.field label{font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink); letter-spacing:-.005em}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field input[type="number"],.field textarea{padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.03); border:1.5px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:15px; font-weight:500; transition:border-color .25s, background .25s; min-height:48px; width:100%}
.field textarea{min-height:90px; resize:vertical; font-family:var(--sans)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--orange); background:rgba(255,107,44,.06)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field .helper{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-mute)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0}
@media (max-width:660px){.field-row{grid-template-columns:1fr}}
.num-input{display:inline-flex; align-items:center; gap:0; border-radius:14px; background:rgba(255,255,255,.03); border:1.5px solid var(--line); overflow:hidden; max-width:200px}
.num-input button{width:48px; height:48px; background:none; color:var(--ink); font-size:22px; font-weight:600; transition:background .2s}
.num-input button:hover{background:rgba(255,255,255,.06)}
.num-input input{flex:1; text-align:center; border:none; background:none; padding:0; min-height:46px; font-family:var(--grotesk); font-weight:800; font-size:20px; color:var(--ink); -moz-appearance:textfield}
.num-input input::-webkit-outer-spin-button,.num-input input::-webkit-inner-spin-button{-webkit-appearance:none}
.opts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (max-width:660px){.opts{grid-template-columns:1fr}}
.opt-chip{cursor:pointer; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.03); border:1.5px solid var(--line); display:flex; align-items:center; gap:12px; transition:border-color .25s, background .25s}
.opt-chip input{appearance:none; -webkit-appearance:none; width:20px; height:20px; border:1.5px solid var(--ink-mute); border-radius:6px; display:grid; place-items:center; flex-shrink:0; transition:background .2s, border-color .2s; position:relative}
.opt-chip input:checked{background:var(--orange); border-color:var(--orange)}
.opt-chip input:checked::after{content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px, -1px)}
.opt-chip span{font-size:14px; font-weight:500; color:var(--ink-soft)}
.opt-chip:has(input:checked){border-color:var(--orange); background:rgba(255,107,44,.06)}
.opt-chip:has(input:checked) span{color:var(--ink)}
.estim{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px; border-radius:16px; background:linear-gradient(135deg, rgba(255,107,44,.1), rgba(43,179,255,.06)); border:1px solid rgba(255,107,44,.25); margin:8px 0 30px; flex-wrap:wrap}
.estim .lbl{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px}
.estim .amount{font-family:var(--grotesk); font-weight:900; font-size:38px; letter-spacing:-.04em; line-height:1; color:var(--orange)}
.estim .amount em{font-style:normal; font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-mute); margin-left:6px; letter-spacing:.04em}
.estim .dvNote{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); text-align:right}
.summary-card{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:18px; padding:8px 24px; margin-bottom:30px}
.summary-card .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.summary-card .row:last-child{border-bottom:0}
.summary-card .row span{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.summary-card .row b{font-family:var(--grotesk); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink); text-align:right}
.summary-card .row.tot{border-top:2px solid var(--orange); border-bottom:0; margin-top:6px; padding:18px 0}
.summary-card .row.tot span{color:var(--orange)}
.summary-card .row.tot b{font-size:30px; color:var(--orange)}
.summary-card .row.sm b{font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.02em; color:var(--ink-soft); text-transform:none}
.devis-nav{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; flex-wrap:wrap}
.btn-back{padding:12px 18px; background:none; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-soft); font-family:var(--sans); font-weight:600; font-size:14px; cursor:pointer; transition:border-color .25s, color .25s}
.btn-back:hover{border-color:var(--ink); color:var(--ink)}
.btn-next{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; background:var(--ink); color:var(--bg); border-radius:999px; font-family:var(--sans); font-weight:700; font-size:14.5px; cursor:pointer; transition:transform .2s, background .25s}
.btn-next:hover{transform:translateY(-2px)}
.btn-send{display:inline-flex; align-items:center; gap:12px; padding:16px 26px; border-radius:999px; background:linear-gradient(135deg, #1f6f3a, #195a30); color:#fff; font-family:var(--sans); font-weight:700; font-size:15px; box-shadow:0 18px 36px -12px rgba(31,111,58,.55); transition:transform .25s, background .25s; text-decoration:none}
.btn-send:hover{transform:translateY(-2px); background:linear-gradient(135deg, #258245, #1c6837)}

/* ====== CONTACT ====== */
.contact{padding:120px 0; background:var(--bg-2); position:relative; overflow:hidden; border-top:1px solid var(--line)}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:grid; gap:14px}
.contact-row{display:flex; align-items:center; gap:18px; padding:22px 26px; background:var(--surface); border:1px solid var(--line); border-radius:20px; transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s; color:var(--ink)}
.contact-row:hover{transform:translateY(-2px); background:var(--surface-2)}
.contact-row .ic{width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.05); display:grid; place-items:center; flex-shrink:0; border:1px solid var(--line)}
.contact-row b{font-family:var(--grotesk); font-weight:800; font-size:20px; letter-spacing:-.02em; display:block}
.contact-row span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px}
.contact-row > div{flex:1; min-width:0}
.contact-row.whatsapp{background:linear-gradient(135deg, #1f6f3a 0%, #195a30 100%); border-color:rgba(255,255,255,.08)}
.contact-row.whatsapp b{color:#fff}
.contact-row.whatsapp span{color:rgba(255,255,255,.7)}
.contact-row.whatsapp:hover{background:linear-gradient(135deg, #258245 0%, #1c6837 100%)}
.contact-row .ic.wa{background:rgba(255,255,255,.15); color:#fff; border-color:transparent}
.contact-row .cta-pill{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:#fff; color:#1f6f3a; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:-.005em; text-transform:none; margin:0; flex-shrink:0; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.contact-row.whatsapp:hover .cta-pill{transform:translateX(3px)}
.contact-cta{background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:32px; padding:42px; position:relative; overflow:hidden}
.contact-cta::before{content:""; position:absolute; left:-30%; bottom:-40%; width:90%; height:90%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,107,44,.36), transparent 70%)}
.contact-cta > *{position:relative; z-index:1}
.contact-cta h3{font-family:var(--grotesk); font-weight:900; font-size:42px; letter-spacing:-.04em; line-height:.95; margin:0 0 16px; color:var(--ink)}
.contact-cta p{color:var(--ink-soft); margin:0 0 28px; max-width:34ch}

/* ====== OUTRO ====== */
.outro{padding:160px 0 140px; background:linear-gradient(180deg, var(--bg-2) 0%, #14171e 100%); border-top:1px solid var(--line); text-align:center; position:relative; overflow:hidden}
.outro::before{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:80vw; max-width:1000px; height:600px; background:radial-gradient(closest-side, rgba(255,107,44,.16), transparent 70%); pointer-events:none; filter:blur(40px)}
.outro::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:60vw; max-width:800px; height:400px; background:radial-gradient(closest-side, rgba(43,179,255,.1), transparent 70%); pointer-events:none; filter:blur(50px)}
.outro > .container{position:relative; z-index:1; max-width:920px}
.outro .accent-bar{justify-content:center; margin-bottom:30px}
.outro .accent-bar::before{display:none}
.outro-title{font-family:var(--grotesk); font-weight:900; font-size:clamp(48px, 6.5vw, 96px); letter-spacing:-.055em; line-height:.92; color:var(--ink); margin:0 0 36px; text-wrap:balance}
.outro-title em{font-style:italic; font-weight:500; color:var(--blue)}
.outro-title mark{background:none; color:var(--orange)}
.outro-words{color:var(--ink-soft); font-size:18.5px; line-height:1.6; max-width:62ch; margin:0 auto 48px; font-weight:500}
.outro-sign{display:flex; align-items:center; gap:18px; justify-content:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 38px}
.outro-sign .line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line-2), transparent); max-width:120px}
.outro-cta{display:inline-flex; align-items:center; gap:14px; padding:18px 22px 18px 26px; border-radius:999px; background:linear-gradient(135deg, #1f6f3a 0%, #195a30 100%); color:#fff; font-family:var(--sans); font-weight:700; font-size:16px; box-shadow:0 24px 48px -16px rgba(31,111,58,.55), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s}
.outro-cta:hover{transform:translateY(-3px); background:linear-gradient(135deg, #258245 0%, #1c6837 100%)}
.outro-cta .arrow{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; color:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.outro-cta:hover .arrow{transform:rotate(-45deg)}

@media (max-width:560px){
  .section{padding:80px 0}
  .pack{padding:30px}
  .page-hero{padding:130px 0 60px}
}

/* ====== HERO CONTENT (titre + CTAs sous le cadre) ====== */
.hero-content{padding:140px 0 100px; background:var(--bg); position:relative}
.hero-content-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:end}
@media (max-width:980px){.hero-content-grid{grid-template-columns:1fr; gap:40px}}
.hero-h1{font-family:var(--grotesk); font-weight:900; font-size:clamp(48px, 6.2vw, 96px); letter-spacing:-.055em; line-height:.88; margin:24px 0 28px; color:var(--ink); text-wrap:balance; max-width:18ch}
.hero-h1 em{font-style:italic; font-weight:500; color:var(--blue)}
.hero-h1 mark{background:none; color:var(--orange)}
.hero-lede{font-size:19px; line-height:1.55; color:var(--ink-soft); max-width:55ch; margin:0 0 36px; font-weight:500}
.hero-lede b{color:var(--ink); font-weight:700}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-actions .btn-wa{padding:13px 16px 13px 18px !important; font-size:14px !important}
.hero-quick{display:grid; gap:16px; align-self:stretch; padding:30px; border-radius:24px; background:var(--surface); border:1px solid var(--line)}
.hero-quick .hq-item{display:flex; flex-direction:column; gap:4px; padding:14px 0; border-bottom:1px solid var(--line)}
.hero-quick .hq-item:last-child{border-bottom:0}
.hero-quick .hq-item b{font-family:var(--grotesk); font-weight:900; font-size:36px; letter-spacing:-.04em; line-height:1; color:var(--orange)}
.hero-quick .hq-item span{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:6px}

/* ====== POURQUOI NOUS CHOISIR ====== */
.why-us{background:var(--bg-2); border-top:1px solid var(--line)}
.why-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:980px){.why-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-card{padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:24px; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s; position:relative; overflow:hidden}
.why-card:hover{transform:translateY(-4px); border-color:var(--orange); background:var(--surface-2)}
.why-card::before{content:""; position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,107,44,.12), transparent 70%); opacity:0; transition:opacity .4s}
.why-card:hover::before{opacity:1}
.why-ic{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:rgba(255,107,44,.12); color:var(--orange); margin-bottom:18px}
.why-card h3{font-family:var(--grotesk); font-weight:800; font-size:22px; letter-spacing:-.025em; margin:0 0 8px; color:var(--ink); line-height:1.2}
.why-card p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55}

/* ====== CHIFFRES CLÉS STRIP ====== */
.stats-strip{padding:60px 0; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stats-strip-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:0}
@media (max-width:760px){.stats-strip-grid{grid-template-columns:repeat(2, 1fr)}}
.ss-cell{padding:20px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.ss-cell:last-child{border-right:0}
@media (max-width:760px){.ss-cell:nth-child(2n){border-right:0} .ss-cell:nth-child(1),.ss-cell:nth-child(2){border-bottom:1px solid var(--line); padding-bottom:24px} .ss-cell:nth-child(3),.ss-cell:nth-child(4){padding-top:24px}}
.ss-num{font-family:var(--grotesk); font-weight:900; font-size:clamp(40px, 4.5vw, 64px); letter-spacing:-.045em; line-height:1; color:var(--orange)}
.ss-cell:nth-child(2) .ss-num{color:var(--blue)}
.ss-cell:nth-child(4) .ss-num{color:var(--ink)}
.ss-lbl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute)}

/* ====== TÉMOIGNAGES ====== */
.testimonials{background:var(--bg-2); border-top:1px solid var(--line)}

/* ====== ILS NOUS FONT CONFIANCE ====== */
.partners{padding:80px 0; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.partners-head{text-align:center; margin-bottom:36px}
.partners-head .accent-bar{justify-content:center; margin-bottom:14px}
.partners-head .accent-bar::before{display:none}
.partners-head p{margin:0; color:var(--ink-soft); font-size:15px}
.partners-strip{display:flex; flex-wrap:wrap; gap:14px 20px; justify-content:center; align-items:center}
.p-logo{padding:14px 24px; border-radius:14px; background:var(--surface); border:1px solid var(--line); font-family:var(--grotesk); font-weight:600; font-size:18px; letter-spacing:-.02em; color:var(--ink-soft); transition:color .25s, border-color .25s, background .25s}
.p-logo b{font-weight:900; color:var(--ink); margin-right:1px}
.p-logo:hover{color:var(--ink); border-color:var(--ink-mute); background:var(--surface-2)}
@media (max-width:560px){.p-logo{padding:12px 18px; font-size:15px}}

/* ====== FLOTTE PAGE ====== */
.flotte-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:980px){.flotte-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.flotte-grid{grid-template-columns:1fr}}
.vehicle-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:24px; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s; position:relative; overflow:hidden}
.vehicle-card:hover{transform:translateY(-4px); border-color:var(--orange)}
.vehicle-card .veh-img{aspect-ratio:16/10; border-radius:16px; background:linear-gradient(135deg, var(--bg-3), var(--surface-2)); display:grid; place-items:center; margin-bottom:20px; overflow:hidden; position:relative}
.vehicle-card .veh-img::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 70%, rgba(255,107,44,.12), transparent 60%)}
.vehicle-card .veh-img svg{width:60%; height:auto; color:var(--ink-mute); opacity:.6; position:relative; z-index:1}
.vehicle-card .tag{position:absolute; top:14px; left:14px; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; z-index:2}
.vehicle-card h3{font-family:var(--grotesk); font-weight:900; font-size:24px; letter-spacing:-.025em; margin:0 0 4px; color:var(--ink); line-height:1.1}
.vehicle-card .veh-sub{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:18px}
.vehicle-card .veh-specs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.vehicle-card .spec{padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid var(--line); display:flex; align-items:center; gap:10px}
.vehicle-card .spec svg{flex-shrink:0; color:var(--orange)}
.vehicle-card .spec span{font-size:12px; color:var(--ink-soft); font-weight:500}

/* ====== CONTACT QUICK FORM ====== */
.quick-form{padding:0; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:36px}
.quick-form h3{font-family:var(--grotesk); font-weight:900; font-size:30px; letter-spacing:-.03em; margin:0 0 8px; color:var(--ink); line-height:1.1}
.quick-form > p{margin:0 0 22px; color:var(--ink-soft); font-size:15px}
.quick-form .qf-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
@media (max-width:560px){.quick-form .qf-row{grid-template-columns:1fr}}
.quick-form label{display:flex; flex-direction:column; gap:6px}
.quick-form label span{font-family:var(--sans); font-weight:700; font-size:13px; color:var(--ink); letter-spacing:-.005em}
.quick-form input,.quick-form select{padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.03); border:1.5px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:14.5px; font-weight:500; transition:border-color .25s, background .25s; min-height:46px}
.quick-form input:focus,.quick-form select:focus{outline:none; border-color:var(--orange); background:rgba(255,107,44,.06)}
.quick-form input::placeholder{color:var(--ink-mute)}
.quick-form .qf-submit{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px; border-radius:14px; background:linear-gradient(135deg, #1f6f3a, #195a30); color:#fff; font-family:var(--sans); font-weight:700; font-size:15px; box-shadow:0 14px 30px -12px rgba(31,111,58,.55); transition:transform .25s, background .25s; text-decoration:none; margin-top:8px; cursor:pointer; border:0}
.quick-form .qf-submit:hover{transform:translateY(-2px); background:linear-gradient(135deg, #258245, #1c6837)}
.quick-form .qf-note{margin:12px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-mute); text-align:center}

/* Footer social icons */
.foot-social{display:flex; gap:10px; flex-wrap:wrap}
.foot-social a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-soft); transition:color .25s, background .25s, border-color .25s, transform .25s}
.foot-social a:hover{color:var(--orange); background:rgba(255,107,44,.1); border-color:var(--orange); transform:translateY(-2px)}

/* ====== URGENCY BANNER ====== */
.urgency-banner{position:fixed; top:0; left:0; right:0; z-index:90; background:linear-gradient(135deg, #ff6b2c 0%, #d34a14 100%); color:#fff; padding:10px 0; box-shadow:0 4px 18px -8px rgba(255,107,44,.55); transform:translateY(0); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.urgency-banner.hidden{transform:translateY(-100%)}
.urgency-banner .container{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; position:relative}
.urgency-banner .pulse{width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.3); animation:urgPulse 2s ease-in-out infinite; flex-shrink:0}
@keyframes urgPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.3)} 50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.urgency-banner p{margin:0; font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:-.005em}
.urgency-banner p b{font-weight:800}
.urgency-call{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; background:rgba(0,0,0,.18); color:#fff; font-family:var(--sans); font-weight:700; font-size:13px; transition:background .25s, transform .25s; flex-shrink:0}
.urgency-call:hover{background:rgba(0,0,0,.32); transform:translateY(-1px)}
.urgency-close{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#fff; opacity:.6; transition:opacity .25s; padding:6px; flex-shrink:0; background:none; border:0; cursor:pointer; display:grid; place-items:center}
.urgency-close:hover{opacity:1}
@media (max-width:660px){.urgency-banner p{font-size:12px} .urgency-banner .container{padding-right:42px} .urgency-call{font-size:12px}}
body.has-urgency .nav{top:46px}
body.has-urgency{padding-top:46px}
@media (max-width:660px){body.has-urgency .nav{top:64px} body.has-urgency{padding-top:64px}}

/* ====== HOW IT WORKS — Timeline ====== */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; counter-reset:step; position:relative}
@media (max-width:1080px){.steps{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:760px){.steps{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:28px; position:relative; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s; overflow:hidden}
.step-card:hover{transform:translateY(-4px); border-color:var(--orange); background:var(--surface-2)}
.step-num{position:absolute; top:18px; right:22px; font-family:var(--grotesk); font-weight:900; font-size:52px; letter-spacing:-.05em; color:rgba(255,107,44,.18); line-height:1}
.step-ic{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px; background:rgba(255,107,44,.12); color:var(--orange); margin-bottom:20px; position:relative; z-index:1}
.step-card h3{font-family:var(--grotesk); font-weight:800; font-size:20px; letter-spacing:-.025em; margin:0 0 8px; color:var(--ink); line-height:1.2; position:relative; z-index:1}
.step-card p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.5; position:relative; z-index:1}

/* ====== ZONES + MAP ====== */
.zones{background:var(--bg-2); border-top:1px solid var(--line)}
.zones-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start}
@media (max-width:880px){.zones-grid{grid-template-columns:1fr}}
.map-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:30px; aspect-ratio:4/3; position:relative; overflow:hidden}
.map-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,107,44,.06), transparent 70%); pointer-events:none}
.gp-map{width:100%; height:100%; display:block}
.gp-map .city circle{transition:r .25s, transform .25s}
.gp-map .city:hover circle:first-child{r:7}
.zones-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:560px){.zones-list{grid-template-columns:1fr}}
.zone-item{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s}
.zone-item:hover{transform:translateX(3px); border-color:var(--ink-mute)}
.zone-item .z-dot{flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--blue)}
.zone-item .z-dot.active{background:var(--orange); box-shadow:0 0 0 4px rgba(255,107,44,.16)}
.zone-item .z-dot.all{background:var(--ink); box-shadow:0 0 0 4px rgba(245,242,234,.16)}
.zone-item.all{background:linear-gradient(135deg, rgba(255,107,44,.06), rgba(43,179,255,.04)); border-color:rgba(255,107,44,.2); grid-column:1/-1}
.zone-item b{display:block; font-family:var(--grotesk); font-weight:800; font-size:15.5px; letter-spacing:-.015em; color:var(--ink); line-height:1.1}
.zone-item span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-mute); margin-top:3px; text-transform:uppercase}

/* ====== SECTEURS ====== */
.sectors{background:var(--bg); border-top:1px solid var(--line)}
.sectors-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px}
@media (max-width:1080px){.sectors-grid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:660px){.sectors-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:420px){.sectors-grid{grid-template-columns:1fr}}
.sector-card{padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:18px; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s}
.sector-card:hover{transform:translateY(-4px); border-color:var(--blue); background:var(--surface-2)}
.s-ic{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(43,179,255,.12); color:var(--blue); margin-bottom:16px}
.sector-card h3{font-family:var(--grotesk); font-weight:800; font-size:18px; letter-spacing:-.02em; margin:0 0 6px; color:var(--ink); line-height:1.2}
.sector-card p{margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.5}

/* ====== PRÉSENTATION ENTREPRISE ====== */
.presentation{background:var(--bg); border-top:1px solid var(--line)}
.presentation-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center}
@media (max-width:980px){.presentation-grid{grid-template-columns:1fr; gap:40px}}
.pres-text h2{font-family:var(--grotesk); font-weight:900; font-size:clamp(36px, 5vw, 64px); letter-spacing:-.05em; line-height:.95; margin:20px 0 28px; color:var(--ink); text-wrap:balance; max-width:18ch}
.pres-text h2 em{font-style:italic; font-weight:500; color:var(--blue)}
.pres-text h2 mark{background:none; color:var(--orange)}
.pres-text p{color:var(--ink-soft); font-size:16.5px; line-height:1.65; margin:0 0 18px; max-width:60ch}
.pres-text p b{color:var(--ink); font-weight:700}
.pres-pillars{display:grid; gap:12px; margin-top:32px}
.pp-item{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--line); transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s}
.pp-item:hover{transform:translateX(4px); border-color:var(--ink-mute)}
.pp-ic{flex-shrink:0; width:38px; height:38px; border-radius:12px; background:rgba(255,107,44,.12); color:var(--orange); display:grid; place-items:center}
.pp-item b{display:block; font-family:var(--grotesk); font-weight:800; font-size:15.5px; letter-spacing:-.015em; color:var(--ink); line-height:1.1}
.pp-item span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-mute); margin-top:3px; text-transform:uppercase}

.pres-visual{position:relative; border-radius:28px; overflow:hidden; aspect-ratio:3/2; background:linear-gradient(180deg, #2a2f3a 0%, #14171e 100%); border:1px solid var(--line); box-shadow:0 30px 80px -40px rgba(0,0,0,.55)}
@media (max-width:980px){.pres-visual{aspect-ratio:16/10; max-width:600px; margin:0 auto}}
.pres-visual img{width:100%; height:100%; object-fit:cover; object-position:center 38%; transform:scale(1.02); transition:transform 6s ease}
.pres-visual:hover img{transform:scale(1.06)}
.pres-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%); pointer-events:none}
.pres-tag{position:absolute; left:22px; bottom:22px; right:22px; display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:16px; background:rgba(26,29,36,.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.08); z-index:1; color:#fff}
.pres-tag-dot{width:10px; height:10px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,107,44,.25); animation:urgPulse 2.4s ease-in-out infinite; flex-shrink:0}
.pres-tag b{font-family:var(--grotesk); font-weight:800; font-size:15.5px; letter-spacing:-.015em; display:block}
.pres-tag span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:rgba(255,255,255,.7); text-transform:uppercase; display:block; margin-top:2px}

/* ====== SERVICES INTRO (brève) ====== */
.services-intro{background:var(--bg-2); border-top:1px solid var(--line)}
.si-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px}
@media (max-width:1080px){.si-grid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:660px){.si-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:420px){.si-grid{grid-template-columns:1fr}}
.si-card{padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:18px; position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s}
.si-card:hover{transform:translateY(-4px); border-color:var(--orange); background:var(--surface-2)}
.si-num{position:absolute; top:14px; right:18px; font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.16em; color:var(--ink-mute)}
.si-ic{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,107,44,.12); color:var(--orange); margin-bottom:16px}
.si-card h3{font-family:var(--grotesk); font-weight:800; font-size:18px; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); line-height:1.2}
.si-card p{margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.55}

/* ====== MAP-CARD PHOTO variant ====== */
.map-card.photo{padding:0; overflow:hidden; aspect-ratio:4/3; position:relative}
.map-card.photo img{width:100%; height:100%; object-fit:cover; display:block}
.map-card.photo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 100%); pointer-events:none; z-index:1}
.map-overlay{position:absolute; left:18px; top:18px; z-index:2}
.map-badge{display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 12px; border-radius:999px; background:rgba(26,29,36,.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:500}
.map-pulse{width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,107,44,.25); animation:urgPulse 2s ease-in-out infinite}

/* ====== VEHICLE CARD — Photo variant ====== */
.vehicle-card .veh-img.photo{padding:0; background:#0e1116; position:relative; overflow:hidden}
.vehicle-card .veh-img.photo::before{display:none}
.vehicle-card .veh-img.photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); will-change:transform}
.vehicle-card:hover .veh-img.photo img{transform:scale(1.06)}
.vehicle-card .veh-img.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%); pointer-events:none; z-index:1}
.vehicle-card .veh-img.photo .tag{z-index:2}

/* ====== PACKS BRIEF (home) ====== */
.packs-brief{background:var(--bg-2); border-top:1px solid var(--line)}
.packs-brief-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
@media (max-width:1080px){.packs-brief-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.packs-brief-grid{grid-template-columns:1fr}}
.pb-card{position:relative; padding:28px 24px 24px; border-radius:22px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:18px; text-decoration:none; color:var(--ink); transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s; overflow:hidden; min-height:280px}
.pb-card:hover{transform:translateY(-6px); border-color:var(--orange); background:var(--surface-2)}
.pb-card::before{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,107,44,.18), transparent 70%); opacity:0; transition:opacity .4s}
.pb-card:hover::before{opacity:1}
.pb-num{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); position:relative; z-index:1}
.pb-body{flex:1; position:relative; z-index:1}
.pb-card h3{font-family:var(--grotesk); font-weight:900; font-size:38px; letter-spacing:-.04em; line-height:1; margin:0 0 12px; color:var(--ink)}
.pb-target{margin:0 0 10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)}
.pb-target b{color:var(--ink); font-weight:700}
.pb-verb{margin:0; font-family:var(--grotesk); font-style:italic; font-weight:500; font-size:18px; letter-spacing:-.02em; color:var(--orange)}
.pb-price{display:flex; align-items:flex-end; gap:4px; padding-top:16px; border-top:1px solid var(--line); position:relative; z-index:1}
.pb-price .amt{font-family:var(--grotesk); font-weight:900; font-size:32px; letter-spacing:-.035em; line-height:1; color:var(--ink)}
.pb-price .per{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-mute); padding-bottom:4px}
.pb-arrow{position:absolute; right:22px; top:22px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s; z-index:2}
.pb-card:hover .pb-arrow{transform:rotate(-45deg); background:var(--orange); border-color:transparent; color:#fff}

.pb-card.featured{background:linear-gradient(160deg, #2a1b10 0%, #3a2616 100%); border-color:rgba(255,107,44,.3); box-shadow:0 30px 60px -30px rgba(255,107,44,.35)}
.pb-card.featured:hover{transform:translateY(-8px); border-color:var(--orange)}
.pb-badge{position:absolute; top:-1px; left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:0 0 12px 12px; background:var(--orange); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; z-index:3}
.pb-card.featured .pb-price .amt{color:var(--orange)}
.pb-card.featured h3{color:#fff}
.pb-card.featured .pb-verb{color:var(--orange-2)}

/* ====== SERVICES PAGE — Method ====== */
.method{background:var(--bg); border-top:1px solid var(--line)}
.method-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
@media (max-width:1080px){.method-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.method-grid{grid-template-columns:1fr}}
.method-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s; min-height:200px}
.method-card:hover{transform:translateY(-4px); border-color:var(--orange); background:var(--surface-2)}
.m-ix{font-family:var(--grotesk); font-weight:900; font-size:54px; letter-spacing:-.05em; color:rgba(255,107,44,.16); line-height:1; display:block; margin-bottom:16px}
.method-card h3{font-family:var(--grotesk); font-weight:800; font-size:20px; letter-spacing:-.025em; margin:0 0 8px; color:var(--ink); line-height:1.2}
.method-card p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55}

/* ====== SERVICES PAGE — Tools (matériel) ====== */
.tools{background:var(--bg-2); border-top:1px solid var(--line)}
.tools-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center}
@media (max-width:880px){.tools-grid{grid-template-columns:1fr; gap:32px}}
.tools-text h2.tools-h2{font-family:var(--grotesk); font-weight:900; font-size:clamp(34px, 4.6vw, 56px); letter-spacing:-.045em; line-height:1; margin:20px 0 22px; color:var(--ink); text-wrap:balance; max-width:14ch}
.tools-text h2.tools-h2 em{font-style:italic; font-weight:500; color:var(--blue)}
.tools-text p{color:var(--ink-soft); font-size:16.5px; line-height:1.6; margin:0 0 24px; max-width:54ch}
.tools-text p b{color:var(--ink); font-weight:700}
.tools-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.tools-list li{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--line); font-size:14.5px; color:var(--ink); font-weight:500}
.tools-list li svg{flex-shrink:0; color:var(--orange)}
.tools-visual{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/5; background:var(--surface); border:1px solid var(--line); box-shadow:0 30px 80px -40px rgba(0,0,0,.55)}
@media (max-width:880px){.tools-visual{aspect-ratio:16/10; max-width:560px; margin:0 auto}}
.tools-visual img{width:100%; height:100%; object-fit:cover; transition:transform 6s ease}
.tools-visual:hover img{transform:scale(1.05)}
.tools-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%); pointer-events:none}

/* ====== SERVICES PAGE — Guarantees ====== */
.guarantees{background:var(--bg); border-top:1px solid var(--line)}
.guar-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
@media (max-width:1080px){.guar-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.guar-grid{grid-template-columns:1fr}}
.guar-card{padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:22px; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s}
.guar-card:hover{transform:translateY(-4px); border-color:var(--blue); background:var(--surface-2)}
.g-ic{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:rgba(43,179,255,.12); color:var(--blue); margin-bottom:18px}
.guar-card h3{font-family:var(--grotesk); font-weight:800; font-size:20px; letter-spacing:-.025em; margin:0 0 8px; color:var(--ink); line-height:1.2}
.guar-card p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55}

/* ====== MOBILE POLISH (≤768px) ====== */
@media (max-width:768px){
  /* Hero scroll-expand */
  .expand{height:200vh}
  .expand-frame{box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}

  /* Hero content */
  .hero-content{padding:80px 0 60px}
  .hero-h1{font-size:42px !important}
  .hero-lede{font-size:16px}
  .hero-actions{flex-direction:column; align-items:stretch; gap:10px; width:100%}
  .hero-actions .btn,.hero-actions .btn-wa{width:100%; justify-content:center}
  .hero-quick{padding:20px}
  .hero-quick .hq-item b{font-size:28px}

  /* Page hero */
  .page-hero{padding:120px 0 50px}
  .page-hero h1{font-size:44px}
  .page-hero p{font-size:16px}

  /* Section header */
  .section h2{font-size:36px !important; line-height:.95; max-width:none}
  .section-head{margin-bottom:36px}
  .section-head .right{font-size:15.5px}

  /* Presentation */
  .pres-text h2{font-size:30px}
  .pres-text p{font-size:15.5px}
  .pres-tag{left:14px; bottom:14px; right:14px; padding:10px 14px}
  .pres-tag b{font-size:14px}
  .pres-tag span{font-size:9.5px}

  /* Packs brief — single column on mobile */
  .pb-card{min-height:0; padding:24px}
  .pb-card h3{font-size:32px}
  .pb-arrow{width:32px; height:32px; right:16px; top:16px}

  /* Method / sectors / guarantees / why */
  .method-card,.guar-card,.why-card,.sector-card,.engage-card{padding:24px}
  .method-card h3,.guar-card h3,.why-card h3{font-size:18px}
  .m-ix{font-size:46px; margin-bottom:12px}

  /* Steps */
  .step-card{padding:24px}
  .step-num{font-size:42px; top:14px; right:16px}

  /* Vehicle card */
  .vehicle-card{padding:18px}
  .vehicle-card h3{font-size:22px}

  /* Tools */
  .tools-text h2.tools-h2{font-size:28px}
  .tools-text p{font-size:15.5px}
  .tools-list li{font-size:14px; padding:12px 14px}

  /* Zones */
  .map-card{padding:14px}
  .zones-list{gap:8px}
  .zone-item{padding:12px 14px}

  /* Stats / nettoyage tarifs */
  .price-row-item{grid-template-columns:36px 1fr; gap:14px}
  .price-row-item .tag{grid-column:1/-1; text-align:left; padding-top:4px}
  .price-row-item h4{font-size:18px}

  /* Pack sticky */
  .pack{padding:28px !important; gap:24px}
  .pack h3{font-size:56px}
  .pack .price-row .amount{font-size:54px}
  .pack .right{padding:24px}

  /* FAQ */
  .faq-item summary{padding:18px 16px; gap:12px}
  .faq-item summary .q{font-size:15.5px}
  .faq-item summary .ic{width:34px; height:34px}

  /* Stats grid 2col */
  .stat-cell{padding:30px 18px}
  .stat-cell .num{font-size:48px}

  /* Outro */
  .outro{padding:100px 0 80px}
  .outro-title{font-size:38px}
  .outro-words{font-size:16.5px}
  .outro-cta{padding:14px 18px 14px 22px; font-size:14.5px}

  /* Primary CTA */
  .primary-cta{padding:80px 0}
  .primary-cta h2{font-size:36px}
  .primary-cta p{font-size:16px}
  .primary-cta .actions{flex-direction:column; align-items:stretch; width:100%}
  .primary-cta .actions .btn{width:100%; justify-content:center}

  /* Contact */
  .contact{padding:60px 0}
  .contact-row{padding:18px 20px; gap:14px}
  .contact-row b{font-size:17px}
  .contact-cta,.quick-form{padding:24px}
  .contact-cta h3{font-size:30px}

  /* Footer */
  .foot{padding:60px 0 24px}
  .foot h2{font-size:64px !important}

  /* Urgency */
  .urgency-banner .container{padding-right:38px; gap:8px}
  .urgency-banner p{font-size:11.5px}
  .urgency-call{padding:5px 10px; font-size:11.5px}

  /* Chatbot panel mobile */
  .chatbot-panel{width:calc(100vw - 28px); right:0; bottom:74px}
  .chatbot{right:14px; bottom:14px}
  .chatbot-fab{width:56px; height:56px}
}

@media (max-width:420px){
  .section h2{font-size:32px !important}
  .hero-h1{font-size:36px !important}
  .pack h3{font-size:44px}
  .pack .price-row .amount{font-size:46px}
  .outro-title{font-size:30px}
}