*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; transition:background .3s,color .3s; }
:root {
--bg: #000; --surface: #111; --card: #161616; --card-hover: #1a1a1a;
--border: rgba(255,255,255,.08); --green: #e84393; --blue: #276ef1;
--text: #fff; --text-inv: #000;
--muted: rgba(255,255,255,.5); --muted2: rgba(255,255,255,.25);
--glass-bg: rgba(249,115,22,.03); --glass-border: rgba(249,115,22,.1);
--glow: rgba(249,115,22,.08); --glow-strong: rgba(249,115,22,.15);
--hero-bg: linear-gradient(160deg,#040e07 0%,#071a0c 30%,#0a2612 60%,#071a0c 100%);
--section-bg: linear-gradient(180deg,#060e08 0%,#0a1a0f 50%,#060e08 100%);
--nav-bg: rgba(6,20,10,.92);
--modal-bg: linear-gradient(160deg,#060e08,#0a1a0f);
--card-shadow: none;
--tile-url: dark_all;
--pill: 999px; --r: 16px; --r-sm: 8px;
--max-w: 1200px; --px: 64px;
}
/* ─── LIGHT THEME ─── */
[data-theme="light"] {
--bg: #f0faf3; --surface: rgba(255,255,255,.55); --card: rgba(255,255,255,.45); --card-hover: rgba(255,255,255,.6);
--border: rgba(255,255,255,.7); --text: #1c1c1e; --text-inv: #fff;
--muted: rgba(60,60,67,.6); --muted2: rgba(60,60,67,.3);
--glass-bg: rgba(255,255,255,.35); --glass-border: rgba(255,255,255,.65);
--glow: rgba(249,115,22,.06); --glow-strong: rgba(249,115,22,.1);
--hero-bg: linear-gradient(160deg,#e6f9ee 0%,#d1fae5 35%,#e0f7ea 65%,#ecfdf5 100%);
--section-bg: linear-gradient(180deg,#edfaf2 0%,#e0f7ea 50%,#edfaf2 100%);
--nav-bg: rgba(255,255,255,.55);
--modal-bg: rgba(255,255,255,.45);
--card-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 32px rgba(0,0,0,.06);
--liquid-highlight: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 50%);
--liquid-border: 1px solid rgba(255,255,255,.65);
--liquid-blur: blur(20px) saturate(1.8);
}
/* ─── LIQUID GLASS KEYFRAMES ─── */
@keyframes liquidSheen {
0% { background-position:200% 0; }
100% { background-position:-200% 0; }
}
@keyframes liquidFloat {
0%,100% { transform:translateY(0) scale(1); }
50% { transform:translateY(-3px) scale(1.005); }
}
/* ─── LIQUID GLASS BASE ─── */
[data-theme="light"] .liquid,
[data-theme="light"] .svc-card,
[data-theme="light"] .step,
[data-theme="light"] .icard,
[data-theme="light"] .ms-faq,
[data-theme="light"] .modal,
[data-theme="light"] .chat-panel,
[data-theme="light"] .map-eta,
[data-theme="light"] .hero-badge {
background: rgba(255,255,255,.4) !important;
backdrop-filter: var(--liquid-blur) !important;
-webkit-backdrop-filter: var(--liquid-blur) !important;
border: 1px solid rgba(255,255,255,.6) !important;
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 -1px 0 rgba(255,255,255,.2) inset,
0 8px 32px rgba(0,0,0,.05),
0 2px 8px rgba(0,0,0,.03) !important;
position:relative;
}
/* Specular highlight (top-left shine) */
[data-theme="light"] .svc-card::before,
[data-theme="light"] .step::before,
[data-theme="light"] .icard::before {
content:'' !important; position:absolute !important;
top:0; left:0; right:0; height:50%;
background:var(--liquid-highlight) !important;
border-radius:inherit;
pointer-events:none; z-index:0; opacity:1 !important;
}
/* Override step::before counter - restore it */
[data-theme="light"] .step::before {
height:auto !important; top:auto !important; left:auto !important; right:auto !important;
background:rgba(249,115,22,.12) !important;
position:relative !important;
border-radius:50% !important;
}
/* Inner refraction glow */
[data-theme="light"] .svc-card::after,
[data-theme="light"] .icard::after {
content:''; position:absolute;
bottom:-20%; right:-10%; width:60%; height:60%;
background:radial-gradient(circle,rgba(249,115,22,.06) 0%,transparent 65%);
border-radius:50%; pointer-events:none; z-index:0;
}
[data-theme="light"] body { background:var(--bg); color:var(--text); }
/* Light theme overrides */
[data-theme="light"] .hero::before,
[data-theme="light"] .hero::after,
[data-theme="light"] #services::before,
[data-theme="light"] .modal::before { opacity:.5; }
[data-theme="light"] .hero h1 em { text-shadow:none; }
[data-theme="light"] .section-label { text-shadow:none; }
[data-theme="light"] .svc-card { background:var(--card); }
[data-theme="light"] .svc-card:nth-child(1) { background:linear-gradient(145deg,#fdf2f8,rgba(255,255,255,.7)); border-color:rgba(249,115,22,.15) !important; }
[data-theme="light"] .svc-card:nth-child(2) { background:linear-gradient(145deg,#fdf2f8,rgba(255,255,255,.7)); border-color:rgba(245,158,11,.15) !important; }
[data-theme="light"] .svc-card:nth-child(3) { background:linear-gradient(145deg,#eff6ff,rgba(255,255,255,.7)); border-color:rgba(59,130,246,.15) !important; }
[data-theme="light"] .svc-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.08); }
[data-theme="light"] .svc-card.selected { background:rgba(249,115,22,.08) !important; border-color:rgba(249,115,22,.35) !important; }
[data-theme="light"] .step { background:var(--card); }
[data-theme="light"] .icard { background:var(--card); }
[data-theme="light"] .zone-row { background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6); }
/* Light modal — white glassmorphism */
/* Modal is now white by default — no light overrides needed */
[data-theme="light"] .chat-panel { border-color:rgba(255,255,255,.6)!important; box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 48px rgba(0,0,0,.1)!important; }
[data-theme="light"] .chat-panel-head { background:rgba(255,255,255,.3)!important; border-color:rgba(255,255,255,.5)!important; }
[data-theme="light"] .chat-input { background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.6); color:#1c1c1e; }
[data-theme="light"] .msg.bot .msg-bubble { background:var(--surface); color:var(--text); }
[data-theme="light"] .msg.user .msg-bubble { background:var(--green); color:#fff; }
[data-theme="light"] .chat-cta-btn { background:var(--green); color:#fff; }
[data-theme="light"] .chat-btn { background:var(--green); color:#fff; }
[data-theme="light"] .map-eta { background:rgba(255,255,255,.9); border-color:var(--border); }
[data-theme="light"] .map-eta-val { color:var(--text); }
[data-theme="light"] .map-eta-label { color:var(--muted); }
/* Light nav — liquid glass */
[data-theme="light"] nav {
background:rgba(255,255,255,.5) !important;
backdrop-filter:var(--liquid-blur);-webkit-backdrop-filter:var(--liquid-blur);
border-color:rgba(255,255,255,.6) !important;
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 20px rgba(0,0,0,.04);
}
[data-theme="light"] .nav-logo { color:#1c1c1e; }
[data-theme="light"] .nav-tel {
background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6); color:#1c1c1e;
backdrop-filter:blur(8px);
}
[data-theme="light"] .nav-tel:hover { background:rgba(255,255,255,.6); }
[data-theme="light"] .nav-weather { color:rgba(60,60,67,.5); }
/* Light hero — liquid */
[data-theme="light"] .hero h1 { color:#1c1c1e; }
[data-theme="light"] .hero-map-side { opacity:1; }
[data-theme="light"] .hero-badge {
background:rgba(255,255,255,.4) !important; border-color:rgba(255,255,255,.6) !important;
backdrop-filter:blur(12px); color:var(--green);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px rgba(0,0,0,.04);
}
[data-theme="light"] .btn-secondary {
background:rgba(255,255,255,.4); border-color:rgba(255,255,255,.6); color:#1c1c1e;
backdrop-filter:blur(10px);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
[data-theme="light"] .btn-secondary:hover { background:rgba(255,255,255,.6); }
/* Light sections — liquid glass */
[data-theme="light"] .svc-icon { background:rgba(249,115,22,.08); border-color:rgba(249,115,22,.12); }
[data-theme="light"] .svc-card.selected { border-color:rgba(249,115,22,.4) !important; box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 8px 32px rgba(249,115,22,.1) !important; }
[data-theme="light"] .svc-card:hover { transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 40px rgba(0,0,0,.08) !important; }
[data-theme="light"] .svc-name { color:#1c1c1e; }
[data-theme="light"] .svc-price { color:#1c1c1e; }
[data-theme="light"] .svc-card.selected .svc-price { color:var(--green); }
[data-theme="light"] .step:hover { transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 32px rgba(0,0,0,.07) !important; }
[data-theme="light"] .step-title { color:#1c1c1e; }
[data-theme="light"] .section-heading { color:#1c1c1e; }
[data-theme="light"] .icard:hover { box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 32px rgba(0,0,0,.07) !important; }
[data-theme="light"] .icard-title { color:#1c1c1e; }
[data-theme="light"] .hor-time { color:#1c1c1e; }
[data-theme="light"] .hor-day { color:rgba(60,60,67,.6); }
[data-theme="light"] .hor-avail-text { color:rgba(60,60,67,.6); }
[data-theme="light"] .icard-cta { background:linear-gradient(160deg,rgba(67,20,7,.9),rgba(154,52,18,.85))!important; backdrop-filter:blur(20px)!important; border-color:rgba(249,115,22,.3)!important; }
[data-theme="light"] .icard-cta .icard-cta-title { color:#fff; }
/* Light map section */
[data-theme="light"] .map-wrapper { border-color:rgba(0,0,0,.08); }
/* Light FAQ */
[data-theme="light"] .ms-faq { background:var(--card)!important; border-color:rgba(0,0,0,.06)!important; }
[data-theme="light"] .ms-faq-q { color:#111!important; }
[data-theme="light"] .ms-faq-a-inner { color:rgba(0,0,0,.5)!important; }
/* Light tags */
[data-theme="light"] .ms-svc-tag {
background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.6); color:var(--green);
backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
/* Light footer */
[data-theme="light"] footer { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.35) !important; backdrop-filter:blur(12px); }
[data-theme="light"] .footer-left { color:rgba(0,0,0,.4); }
[data-theme="light"] .footer-right a { color:rgba(0,0,0,.4); }
[data-theme="light"] .footer-right a:hover { color:var(--green); }
/* Light chat btn */
[data-theme="light"] .chat-btn .notif { border-color:#fff; }
/* Light mobile header stays dark green for contrast */
/* ma-dark and topbar already white in mobile CSS */
[data-theme="light"] .ma-body { background:transparent; }
[data-theme="light"] .mobile-app { background:#edfaf2; }
/* ─── LIQUID GLASS MOBILE ─── */
/* mobile inputs and CTA already styled white in base mobile CSS */
[data-theme="light"] .ma-map-card {
background:rgba(255,255,255,.4) !important; border:1px solid rgba(255,255,255,.6) !important;
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 8px 28px rgba(0,0,0,.05) !important;
}
[data-theme="light"] .ma-map-eta {
background:rgba(255,255,255,.5) !important; border:1px solid rgba(255,255,255,.65) !important;
backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .ma-map-info { background:rgba(255,255,255,.5); }
[data-theme="light"] .ma-promo {
background:rgba(255,255,255,.4) !important; border:1px solid rgba(255,255,255,.6) !important;
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 16px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .ma-svc-item {
background:rgba(255,255,255,.4) !important; border:1px solid rgba(255,255,255,.6) !important;
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 4px 12px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .ma-svc-item.active {
border-color:rgba(249,115,22,.35) !important;
box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 4px 16px rgba(249,115,22,.1) !important;
}
[data-theme="light"] .ma-svc-icon-wrap { background:rgba(255,255,255,.5) !important; }
[data-theme="light"] .ma-svc-item.active .ma-svc-icon-wrap { background:rgba(249,115,22,.1) !important; }
/* Mobile detail cards */
[data-theme="light"] .ms-svc-detail {
background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 16px rgba(0,0,0,.04);
}
[data-theme="light"] .ms-why-card {
background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px rgba(0,0,0,.03);
}
[data-theme="light"] .ms-why-ic { background:rgba(249,115,22,.08); }
[data-theme="light"] .ms-review {
background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px rgba(0,0,0,.03);
}
[data-theme="light"] .ms-city {
background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(6px);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
[data-theme="light"] .ms-faq {
background:rgba(255,255,255,.4) !important; border:1px solid rgba(255,255,255,.6) !important;
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px rgba(0,0,0,.03);
}
[data-theme="light"] .ms-cta-banner {
background:linear-gradient(135deg,rgba(67,20,7,.85),rgba(154,52,18,.8)) !important;
backdrop-filter:blur(16px);
}
[data-theme="light"] .ma-action-bar {
background:rgba(255,255,255,.5) !important; border-color:rgba(255,255,255,.6) !important;
backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);
box-shadow:0 -1px 0 rgba(255,255,255,.8), 0 -8px 24px rgba(0,0,0,.04) !important;
}
[data-theme="light"] .ma-act-call {
background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(8px);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
/* ─── NAV ─── */
nav {
position:fixed; top:0; left:0; right:0; z-index:100;
height:72px; display:flex; align-items:center; justify-content:space-between;
padding:0 var(--px);
background:var(--nav-bg);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--glass-border);
transition:background .3s;
}
.nav-logo { font-size:22px; font-weight:900; letter-spacing:-.5px; }
.nav-logo span { font-weight:400; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a {
font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
transition:color .2s;
}
.nav-links a:hover { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-weather {
display:flex; align-items:center; gap:5px;
font-size:12px; font-weight:600; color:rgba(255,255,255,.5);
}
.nav-dot { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(249,115,22,.6);animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.nav-cta {
background:var(--green); color:#fff; border:none; border-radius:var(--pill);
padding:10px 22px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
cursor:pointer; transition:all .2s;
box-shadow:0 0 20px rgba(249,115,22,.25);
}
.nav-cta:hover { background:#d63384; box-shadow:0 0 30px rgba(249,115,22,.35); }
.nav-theme {
width:36px; height:36px; border-radius:50%;
background:var(--glass-bg); border:1px solid var(--glass-border);
color:var(--text); cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:all .2s;
}
.nav-theme:hover { background:var(--glow-strong); }
.nav-tel {
font-size:13px; font-weight:700; color:#fff; text-decoration:none;
display:inline-flex; align-items:center; gap:5px;
background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.15);
border-radius:var(--pill); padding:8px 16px;
transition:all .2s;
white-space:nowrap; flex-shrink:0;
}
.nav-tel:hover { background:rgba(249,115,22,.15); border-color:rgba(249,115,22,.25); }
/* ─── HERO ─── */
.hero {
min-height:100vh; display:flex; align-items:center;
padding:120px var(--px) 80px;
position:relative; overflow:hidden;
background:var(--hero-bg);
}
.hero::before {
content:''; position:absolute; top:-20%; right:-10%;
width:700px; height:700px; border-radius:50%;
background:radial-gradient(circle,rgba(249,115,22,.1) 0%,transparent 65%);
pointer-events:none; animation:heroGlow 8s ease-in-out infinite;
}
.hero::after {
content:''; position:absolute; bottom:-30%; left:10%;
width:500px; height:500px; border-radius:50%;
background:radial-gradient(circle,rgba(249,115,22,.06) 0%,transparent 65%);
pointer-events:none; animation:heroGlow 10s 3s ease-in-out infinite;
}
@keyframes heroGlow {
0%,100%{ transform:scale(1); opacity:.6; }
50%{ transform:scale(1.15); opacity:1; }
}
.hero-content { max-width:680px; position:relative; z-index:2; }
.hero-badge {
display:inline-flex; align-items:center; gap:6px;
background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.2);
border-radius:var(--pill); padding:7px 16px;
font-size:12px; font-weight:700; color:var(--green);
margin-bottom:28px; backdrop-filter:blur(8px);
box-shadow:0 0 20px rgba(249,115,22,.08);
}
.hero-badge .hb-dot { width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green); }
.hero h1 {
font-size:clamp(36px,5vw,68px); font-weight:900; line-height:1.05;
letter-spacing:-2.5px; margin-bottom:22px;
}
.hero h1 em { font-style:normal; color:var(--green); text-shadow:0 0 40px rgba(249,115,22,.3); }
.hero-sub {
font-size:18px; line-height:1.65; color:var(--muted);
max-width:480px; margin-bottom:36px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-primary {
background:var(--green); color:#fff !important; border:none; border-radius:var(--pill);
padding:17px 36px; font-family:'Inter',sans-serif; font-size:16px; font-weight:800;
cursor:pointer; transition:all .2s; letter-spacing:-.2px;
box-shadow:0 4px 24px rgba(249,115,22,.3);
}
.btn-primary:hover { background:#d63384; box-shadow:0 6px 32px rgba(249,115,22,.4); transform:translateY(-1px); }
.btn-primary:active { transform:scale(.97) translateY(0); }
.btn-secondary {
background:var(--glass-bg); color:var(--text);
border:1.5px solid var(--border);
border-radius:var(--pill); padding:16px 30px;
font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
cursor:pointer; text-decoration:none;
transition:all .2s; backdrop-filter:blur(4px);
}
.btn-secondary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.hero-trust { display:flex; gap:20px; margin-top:32px; }
.hero-trust-item { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); font-weight:600; }
.hero-map-side {
position:absolute; top:0; right:0; bottom:0; width:55%; z-index:1;
opacity:.9;
mask-image:linear-gradient(to right, transparent 0%, black 15%);
-webkit-mask-image:linear-gradient(to right, transparent 0%, black 15%);
border-radius:0 0 0 40px;
}
[data-theme="light"] .hero-map-side {
opacity:1;
border:none;
box-shadow:-20px 0 60px rgba(0,0,0,.05);
}
#hero-map { width:100%; height:100%; }
/* ─── SECTIONS SHARED ─── */
section { padding:100px var(--px); }
.section-inner { max-width:var(--max-w); margin:0 auto; }
.section-label {
font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:2.5px;
color:var(--green); margin-bottom:12px;
text-shadow:0 0 16px rgba(249,115,22,.3);
}
.section-heading {
font-size:clamp(28px,3.5vw,48px); font-weight:900; letter-spacing:-1.5px;
line-height:1.1; margin-bottom:20px;
}
.section-sub { font-size:16px; line-height:1.65; color:var(--muted); max-width:520px; margin-bottom:52px; }
/* ─── SERVICES CARDS ─── */
#services {
background:var(--section-bg);
position:relative;
}
#services::before {
content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:600px; height:400px; border-radius:50%;
background:radial-gradient(circle,rgba(249,115,22,.06) 0%,transparent 70%);
pointer-events:none;
}
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:1; }
.svc-card {
background:var(--glass-bg);
border:1.5px solid var(--glass-border);
box-shadow:var(--card-shadow);
border-radius:20px;
padding:32px 28px; cursor:pointer;
transition:all .3s cubic-bezier(.2,1,.3,1);
position:relative; overflow:hidden;
backdrop-filter:blur(8px);
}
.svc-card::before {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(249,115,22,.04) 0%,transparent 60%);
opacity:0; transition:opacity .3s; pointer-events:none;
}
.svc-card:hover { border-color:rgba(249,115,22,.25); transform:translateY(-4px); box-shadow:0 12px 40px rgba(249,115,22,.08); }
.svc-card:hover::before { opacity:1; }
.svc-card.selected {
border-color:rgba(249,115,22,.45);
background:rgba(249,115,22,.06);
box-shadow:0 0 40px rgba(249,115,22,.1), inset 0 1px 0 rgba(249,115,22,.15);
}
.svc-card.selected .svc-price { color:var(--green); text-shadow:0 0 20px rgba(249,115,22,.4); }
.svc-card.selected .svc-badge { display:flex; }
.svc-icon {
width:56px; height:56px; border-radius:16px;
background:rgba(249,115,22,.06); border:1px solid rgba(249,115,22,.1);
display:flex; align-items:center; justify-content:center;
margin-bottom:20px; font-size:28px;
transition:all .25s;
}
.svc-card:hover .svc-icon { background:rgba(249,115,22,.1); box-shadow:0 0 20px rgba(249,115,22,.12); }
.svc-card.selected .svc-icon { background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.25); box-shadow:0 0 24px rgba(249,115,22,.15); }
.svc-name { font-size:18px; font-weight:800; margin-bottom:6px; }
.svc-desc { font-size:13px; line-height:1.6; color:var(--muted); margin-bottom:20px; }
.svc-bottom { display:flex; align-items:flex-end; justify-content:space-between; }
.svc-price { font-size:32px; font-weight:900; letter-spacing:-1px; transition:all .2s; }
.svc-price sup { font-size:16px; font-weight:700; }
.svc-time { font-size:12px; color:var(--muted); font-weight:600; }
.svc-badge {
display:none; align-items:center; gap:4px;
position:absolute; top:16px; right:16px;
background:var(--green); color:#fff; font-size:10px; font-weight:800;
border-radius:var(--pill); padding:4px 10px; text-transform:uppercase; letter-spacing:.5px;
box-shadow:0 0 12px rgba(249,115,22,.3);
}
/* ─── HOW IT WORKS ─── */
#how { background:var(--section-bg); }
.steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step {
background:var(--glass-bg);
border:1px solid var(--glass-border);
box-shadow:var(--card-shadow);
border-radius:20px;
padding:32px 24px; text-align:center; position:relative;
counter-increment:step;
backdrop-filter:blur(4px);
transition:all .25s;
}
.step:hover { border-color:rgba(249,115,22,.2); transform:translateY(-3px); box-shadow:0 8px 32px rgba(249,115,22,.06); }
.step::before {
content:counter(step); display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:50%;
background:rgba(249,115,22,.12); border:1.5px solid rgba(249,115,22,.25);
color:var(--green); font-size:14px; font-weight:900;
margin:0 auto 16px;
box-shadow:0 0 16px rgba(249,115,22,.15);
}
.step-title { font-size:15px; font-weight:800; margin-bottom:6px; }
.step-text { font-size:13px; color:var(--muted); line-height:1.55; }
/* ─── MAP SECTION ─── */
#map-section { background:var(--section-bg); padding-bottom:0; }
.map-wrapper {
position:relative; width:100%; height:500px;
border-radius:20px 20px 0 0; overflow:hidden;
border:1px solid rgba(249,115,22,.1); border-bottom:none;
box-shadow:0 -4px 40px rgba(249,115,22,.06);
}
#leaflet-map { width:100%; height:100%; }
.leaflet-control-attribution { font-size:9px; opacity:.3; }
.leaflet-attribution-flag { display:none !important; }
/* Map weather widget */
.map-weather {
position:absolute; bottom:20px; left:20px; z-index:10;
border-radius:var(--r); width:240px;
backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1);
box-shadow:0 12px 40px rgba(0,0,0,.55); overflow:hidden;
transition:background .6s, border-color .6s, box-shadow .6s;
}
.mw-head { padding:12px 16px 0; display:flex; align-items:center; justify-content:space-between; }
.mw-city { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.5); }
.mw-live { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; background:rgba(56,189,248,.15); color:#38bdf8; border:1px solid rgba(56,189,248,.25); border-radius:50px; padding:2px 8px; }
.mw-main { padding:8px 16px 12px; display:flex; align-items:center; justify-content:space-between; }
.mw-left { display:flex; flex-direction:column; }
.mw-temp { font-size:42px; font-weight:900; letter-spacing:-2px; color:#fff; line-height:1; }
.mw-temp sup { font-size:18px; font-weight:700; vertical-align:super; }
.mw-desc { font-size:11px; font-weight:600; color:rgba(255,255,255,.65); margin-top:4px; }
.mw-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.mw-icon { font-size:38px; line-height:1; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.mw-feels { font-size:9px; font-weight:600; color:rgba(255,255,255,.4); }
.mw-stats { display:flex; justify-content:space-around; background:rgba(255,255,255,.05); border-top:1px solid rgba(255,255,255,.06); padding:10px 12px; }
.mw-stat { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.mw-stat-icon { font-size:14px; opacity:.6; }
.mw-stat-val { font-size:12px; font-weight:800; color:#fff; }
.mw-stat-lbl { font-size:8px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.35); }
.mw-forecast { display:flex; justify-content:space-around; padding:10px 10px 12px; border-top:1px solid rgba(255,255,255,.05); }
.mw-fday { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.mw-fday-name { font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); }
.mw-fday-icon { font-size:16px; }
.mw-fday-temp { font-size:11px; font-weight:800; color:#fff; }
.mw-fday-temp sup { font-size:7px; }
/* Map ETA */
.map-eta {
position:absolute; top:20px; right:20px; z-index:10;
background:rgba(0,0,0,.85); backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.1); border-radius:var(--r);
padding:12px 18px; display:flex; align-items:center; gap:12px;
box-shadow:0 4px 24px rgba(0,0,0,.5);
}
.map-eta-dot { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulse 1.4s ease infinite;flex-shrink:0; }
.map-eta-label { font-size:12px; color:var(--muted); font-weight:600; }
.map-eta-val { font-size:16px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
@keyframes mPulse { 0%,100%{box-shadow:0 3px 12px rgba(249,115,22,.4)} 50%{box-shadow:0 5px 20px rgba(249,115,22,.7)} }
/* ─── INFO GRID (zones + horaires + cta) ─── */
#info { background:var(--section-bg); }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.icard {
background:var(--glass-bg);
border:1px solid var(--glass-border);
box-shadow:var(--card-shadow);
border-radius:20px;
padding:28px 24px; overflow:hidden;
backdrop-filter:blur(4px);
transition:border-color .25s;
}
.icard:hover { border-color:rgba(249,115,22,.18); }
.icard-head { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.icard-title { font-size:16px; font-weight:900; color:#fff; }
.icard-badge { font-size:10px; font-weight:700; color:var(--green); background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.2); border-radius:50px; padding:3px 10px; }
.zone-list { display:flex; flex-direction:column; gap:6px; }
.zone-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:rgba(249,115,22,.03); border:1px solid rgba(249,115,22,.06); transition:all .2s; }
.zone-row:hover { background:rgba(249,115,22,.07); border-color:rgba(249,115,22,.15); }
.zone-num { font-size:16px; font-weight:900; color:var(--green); min-width:30px; text-shadow:0 0 12px rgba(249,115,22,.3); }
.zone-name { font-size:13px; font-weight:600; color:var(--muted); }
.hor-list { display:flex; flex-direction:column; gap:8px; }
.hor-row { display:flex; align-items:center; justify-content:space-between; }
.hor-row-left { display:flex; align-items:center; gap:8px; }
.hor-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.hor-day { font-size:13px; font-weight:600; color:rgba(255,255,255,.65); }
.hor-time { font-size:14px; font-weight:900; color:#fff; }
.hor-check { color:var(--green); font-size:12px; margin-left:4px; }
.hor-available { display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 14px; background:rgba(249,115,22,.06); border:1px solid rgba(249,115,22,.12); border-radius:var(--r-sm); }
.hor-avail-dot { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s ease infinite;flex-shrink:0; }
.hor-avail-text { font-size:12px; font-weight:600; color:rgba(255,255,255,.7); }
.hor-avail-text strong { color:var(--green); }
.icard-cta {
text-align:center; display:flex; flex-direction:column; justify-content:center;
background:rgba(249,115,22,.06) !important;
backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
border:1.5px solid rgba(249,115,22,.25) !important;
box-shadow:
0 0 40px rgba(249,115,22,.08),
0 0 80px rgba(249,115,22,.04),
inset 0 1px 0 rgba(249,115,22,.15),
inset 0 -1px 0 rgba(249,115,22,.05);
position:relative; overflow:hidden;
}
/* inner glow orbs */
.icard-cta::before {
content:''; position:absolute; top:-60%; right:-40%;
width:320px; height:320px; border-radius:50%;
background:radial-gradient(circle,rgba(249,115,22,.18) 0%,rgba(249,115,22,.06) 40%,transparent 70%);
pointer-events:none; animation:glowOrb1 6s ease-in-out infinite;
}
.icard-cta::after {
content:''; position:absolute; bottom:-50%; left:-30%;
width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle,rgba(249,115,22,.12) 0%,transparent 60%);
pointer-events:none; animation:glowOrb2 8s ease-in-out infinite;
}
@keyframes glowOrb1 {
0%,100%{ transform:translate(0,0) scale(1); opacity:.7; }
50%{ transform:translate(-15px,10px) scale(1.1); opacity:1; }
}
@keyframes glowOrb2 {
0%,100%{ transform:translate(0,0) scale(1); opacity:.5; }
50%{ transform:translate(10px,-15px) scale(1.15); opacity:.8; }
}
.icard-cta-label {
font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2.5px;
color:var(--green); margin-bottom:14px; position:relative; z-index:1;
text-shadow:0 0 20px rgba(249,115,22,.4);
}
.icard-cta-title {
font-size:24px; font-weight:900; color:#fff; line-height:1.2;
margin-bottom:10px; letter-spacing:-.5px; position:relative; z-index:1;
}
.icard-cta-title em {
font-style:normal; color:var(--green);
text-shadow:0 0 24px rgba(249,115,22,.5);
}
.icard-cta-sub {
font-size:13px; color:rgba(255,255,255,.5); margin-bottom:24px;
line-height:1.55; position:relative; z-index:1;
}
.icard-phone {
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%;
background:rgba(249,115,22,.15);
border:1.5px solid rgba(249,115,22,.35);
border-radius:var(--pill); padding:16px;
font-family:'Inter',sans-serif; font-size:18px; font-weight:900;
color:#fff; cursor:pointer; text-decoration:none; text-align:center;
transition:all .25s;
margin-bottom:10px; position:relative; z-index:1;
box-shadow:0 0 24px rgba(249,115,22,.15), inset 0 1px 0 rgba(249,115,22,.2);
backdrop-filter:blur(8px);
text-shadow:0 0 12px rgba(249,115,22,.4);
}
.icard-phone:hover {
background:rgba(249,115,22,.25);
border-color:rgba(249,115,22,.5);
box-shadow:0 0 40px rgba(249,115,22,.25), inset 0 1px 0 rgba(249,115,22,.3);
}
.icard-phone:active { transform:scale(.98); }
.icard-book {
display:block; width:100%;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--pill); padding:13px;
font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
color:rgba(255,255,255,.8); cursor:pointer; text-align:center;
transition:all .2s;
margin-bottom:16px; position:relative; z-index:1;
backdrop-filter:blur(4px);
}
.icard-book:hover {
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.18);
color:#fff;
}
.icard-chips {
display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
position:relative; z-index:1;
}
.icard-chip {
display:flex; align-items:center; gap:5px;
font-size:11px; font-weight:600; color:rgba(255,255,255,.45);
background:rgba(249,115,22,.06);
border:1px solid rgba(249,115,22,.12);
border-radius:var(--pill); padding:5px 12px;
}
.icard-chip::before {
content:''; width:5px; height:5px; border-radius:50%;
background:var(--green); flex-shrink:0;
box-shadow:0 0 6px rgba(249,115,22,.5);
}
/* ─── FOOTER ─── */
footer {
padding:48px var(--px);
border-top:1px solid var(--glass-border);
background:var(--bg);
display:flex; align-items:center; justify-content:space-between;
}
.footer-left { font-size:13px; color:var(--muted); }
.footer-left strong { color:var(--green); font-weight:800; }
.footer-right { display:flex; gap:24px; }
.footer-right a { font-size:13px; color:var(--muted); text-decoration:none; font-weight:600; transition:color .2s; }
.footer-right a:hover { color:var(--green); }
/* ─── MODAL (white insta style) ─── */
.modal-overlay {
display:none; position:fixed; inset:0;
background:rgba(0,0,0,.7);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
z-index:9999; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
background:#fff;
border:none;
border-radius:24px; padding:0; width:100%; max-width:440px;
box-shadow:0 24px 64px rgba(0,0,0,.12);
animation:modalIn .4s cubic-bezier(.16,1,.3,1) both;
position:relative; overflow:hidden;
}
@keyframes modalIn {
from { opacity:0; transform:scale(.92) translateY(24px); }
to { opacity:1; transform:scale(1) translateY(0); }
}
.modal::before,.modal::after { display:none; }
/* Header */
.modal-header {
padding:24px 24px 0; position:relative; z-index:1;
display:flex; align-items:center; gap:14px;
}
.modal-icon-wrap {
width:44px; height:44px; border-radius:50%; flex-shrink:0;
background:conic-gradient(#e84393,#fbbf24,#ef4444,#e84393);
display:flex; align-items:center; justify-content:center; padding:3px;
}
.modal-icon-inner {
width:100%; height:100%; border-radius:50%;
background:#fff; display:flex; align-items:center; justify-content:center;
}
.modal-header-text { flex:1; }
.modal-head { font-size:18px; font-weight:900; color:#111; letter-spacing:-.3px; margin-bottom:2px; }
.modal-sub { font-size:11px; color:#aaa; line-height:1.4; }
/* Steps — Instagram progress bars */
.modal-steps {
display:flex; gap:3px;
padding:14px 24px; position:relative; z-index:1;
}
.modal-step { display:none; }
.modal-step-line { display:none; }
/* Form body */
.modal-body {
padding:0 24px 20px; position:relative; z-index:1;
max-height:50vh; overflow-y:auto;
}
.modal-body::-webkit-scrollbar { display:none; }
.fg { margin-bottom:12px; }
.fg label {
display:flex; align-items:center; gap:5px;
font-size:10px; font-weight:700; color:#888;
margin-bottom:5px; text-transform:uppercase; letter-spacing:1px;
}
.fg input, .fg select {
width:100%; background:#fff;
border:1.5px solid #e5e5e5; border-radius:12px;
padding:12px 14px;
font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
color:#111; outline:none;
transition:all .2s;
-webkit-appearance:none; appearance:none;
}
.fg input:focus, .fg select:focus {
border-color:#e84393; background:#fff;
box-shadow:0 0 0 3px rgba(249,115,22,.08);
}
.fg input::placeholder { color:#ccc; }
.fg select option { background:#fff; }
/* Service picker in modal */
.modal-svc-picker { display:flex; flex-direction:column; gap:6px; }
.msp-item {
display:flex; align-items:center; gap:12px;
padding:12px 14px; border-radius:14px;
background:#fff;
border:1.5px solid #e5e5e5;
cursor:pointer; transition:all .2s;
position:relative;
}
.msp-item:hover { background:#f5f5f5; border-color:#ddd; }
.msp-item.selected {
background:#fdf2f8;
border-color:#e84393;
box-shadow:0 0 0 3px rgba(249,115,22,.08);
}
.msp-ic {
width:40px; height:40px; border-radius:12px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .2s;
}
.msp-ic.green { background:#fdf2f8; }
.msp-ic.amber { background:#fdf2f8; }
.msp-ic.blue { background:#eff6ff; }
.msp-item.selected .msp-ic.green { background:#fbcfe8; }
.msp-item.selected .msp-ic.amber { background:#fde68a; }
.msp-item.selected .msp-ic.blue { background:#bfdbfe; }
.msp-info { flex:1; }
.msp-name { font-size:14px; font-weight:700; color:#111; }
.msp-sub { font-size:11px; color:#aaa; margin-top:1px; }
.msp-price { font-size:16px; font-weight:900; color:#ccc; transition:color .2s; }
.msp-item.selected .msp-price { color:var(--green); text-shadow:0 0 12px rgba(249,115,22,.3); }
.msp-check {
width:22px; height:22px; border-radius:50%;
background:#f0f0f0; border:1.5px solid #e0e0e0;
display:flex; align-items:center; justify-content:center;
color:transparent; transition:all .2s; flex-shrink:0;
}
.msp-item.selected .msp-check {
background:#e84393; border-color:#e84393; color:#fff;
}
/* Light theme picker */
/* msp is now white by default */
/* Footer */
.modal-footer {
padding:12px 24px 20px;
border-top:1px solid #f0f0f0;
position:relative; z-index:1;
}
.modal-actions { display:flex; gap:8px; }
.btn-cancel {
flex:1; padding:11px; border-radius:var(--pill);
border:1.5px solid #e5e5e5; background:#fff;
color:#888; font-family:'Inter',sans-serif;
font-weight:700; font-size:12px; cursor:pointer;
transition:all .15s;
}
.btn-cancel:hover { background:#f5f5f5; }
.btn-cancel:active { transform:scale(.97); }
.btn-go {
flex:2; padding:11px; border-radius:var(--pill);
background:#111; border:none; color:#fff;
font-family:'Inter',sans-serif; font-size:13px; font-weight:800;
cursor:pointer; transition:all .15s;
position:relative; overflow:hidden;
}
.btn-go:hover { background:#222; }
.btn-go:active { transform:scale(.97); }
.btn-go::after { display:none; }
.modal-trust {
display:flex; align-items:center; justify-content:center; gap:12px;
margin-top:10px; font-size:10px; color:#bbb; font-weight:600;
}
.modal-trust span { display:flex; align-items:center; gap:3px; }
.modal-trust .mt-ok { color:#e84393; font-size:11px; }
/* ─── CHAT ─── */
.chat-wrap { position:fixed; bottom:28px; right:28px; z-index:1000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.chat-btn {
width:56px; height:56px;
background:var(--green); border:none; border-radius:50%;
cursor:pointer; font-size:22px; color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 24px rgba(249,115,22,.35);
position:relative; transition:all .2s;
}
.chat-btn:hover { transform:scale(1.06); box-shadow:0 6px 32px rgba(249,115,22,.4); }
.chat-btn .notif { position:absolute; top:-2px; right:-2px; width:12px; height:12px; background:#ef4444; border-radius:50%; border:2px solid #000; animation:pulse 1.5s ease infinite; }
.chat-panel {
width:360px;
background:linear-gradient(160deg,#060e08,#0a1a0f);
border:1px solid rgba(249,115,22,.15);
border-radius:20px;
box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 40px rgba(249,115,22,.05);
display:none; flex-direction:column; overflow:hidden;
animation:popIn .3s cubic-bezier(.16,1,.3,1) both;
}
.chat-panel.open { display:flex; }
.chat-panel-head { padding:16px 20px; border-bottom:1px solid rgba(249,115,22,.08); display:flex; align-items:center; gap:12px; background:rgba(249,115,22,.04); }
.chat-av { width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid var(--green); flex-shrink:0; box-shadow:0 2px 8px rgba(249,115,22,.2); }
.chat-av img { width:100%; height:100%; object-fit:cover; display:block; }
.chat-head-info { flex:1; }
.chat-head-name { font-size:13px; font-weight:700; }
.chat-head-sub { font-size:11px; color:var(--muted); margin-top:1px; }
.chat-close { width:28px; height:28px; border-radius:var(--r-sm); background:rgba(255,255,255,.06); border:none; color:var(--muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.chat-msgs { flex:1; overflow-y:auto; padding:20px 16px; display:flex; flex-direction:column; gap:12px; max-height:340px; }
.chat-msgs::-webkit-scrollbar { width:0; }
.msg { display:flex; gap:8px; animation:slideUp .3s ease both; }
.msg.bot { align-items:flex-end; }
.msg.user { align-items:flex-end; flex-direction:row-reverse; }
.msg-av { width:28px; height:28px; flex-shrink:0; border-radius:50%; overflow:hidden; border:1.5px solid var(--green); box-shadow:0 1px 4px rgba(249,115,22,.15); }
.msg-av img { width:100%; height:100%; object-fit:cover; display:block; }
.msg-bubble { max-width:220px; padding:10px 14px; border-radius:var(--r); font-size:13px; line-height:1.55; font-weight:500; }
.msg.bot .msg-bubble { background:var(--card); color:#fff; border-radius:4px 16px 16px 16px; }
.msg.user .msg-bubble { background:#fff; color:#000; border-radius:16px 4px 16px 16px; }
.msg-typing .msg-bubble { background:var(--card); padding:12px 16px; }
.typing-dots { display:flex; gap:4px; }
.typing-dots span { width:6px; height:6px; background:var(--muted); border-radius:50%; animation:bounce .8s ease infinite; }
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.30s}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.chat-footer { padding:10px 14px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.chat-input-row { display:flex; gap:8px; }
.chat-input {
flex:1; background:var(--surface); border:1px solid var(--border);
border-radius:var(--pill); padding:10px 16px;
font-family:'Inter',sans-serif; font-size:13px; color:#fff;
outline:none; transition:border-color .2s;
}
.chat-input:focus { border-color:rgba(255,255,255,.2); }
.chat-input::placeholder { color:rgba(255,255,255,.25); }
.chat-send {
width:38px; height:38px; border-radius:50%; border:none;
background:var(--green); color:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
flex-shrink:0; transition:background .15s, transform .15s;
}
.chat-send:hover { background:#d63384; }
.chat-send:active { transform:scale(.92); }
.chat-cta-btn { width:100%; padding:12px; background:#fff; color:#000; border:none; border-radius:var(--pill); font-family:'Inter',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:none; animation:slideUp .35s ease both; }
/* ─── INSTAGRAM STORY RING ─── */
@keyframes storyRingSpin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
@keyframes storyPulse {
0%,100% { box-shadow:0 0 0 0 rgba(249,115,22,.4); }
50% { box-shadow:0 0 0 6px rgba(249,115,22,0); }
}
/* ─── TECH BUBBLE (map marker with spinning ring) ─── */
.tech-bubble {
position:relative; width:56px; height:56px;
cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.tech-bubble::before {
content:''; position:absolute; width:100%; height:100%;
border-radius:50%;
background:conic-gradient(#e84393,#ec4899,#e84393,#ec4899,#e84393);
animation:techRingSpin 3s linear infinite;
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),black 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 4px),black 0);
}
@keyframes techRingSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.tech-photo {
width:46px; height:46px; border-radius:50%;
overflow:hidden; background:#fff; z-index:1;
}
.tech-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.tech-price {
position:absolute; top:-10px; right:-28px;
background:linear-gradient(135deg,#e84393,#d63384); color:#fff;
font-family:'Inter',sans-serif; font-size:10px; font-weight:900;
border-radius:50px; padding:5px 11px;
white-space:nowrap;
box-shadow:0 4px 14px rgba(232,67,147,.45), 0 0 0 2px #fff, 0 0 14px rgba(232,67,147,.35);
z-index:3;
letter-spacing:.2px;
animation:techPriceGlow 1.8s ease-in-out infinite;
}
@keyframes techPriceGlow {
0%,100% { box-shadow:0 4px 14px rgba(232,67,147,.45), 0 0 0 2px #fff, 0 0 14px rgba(232,67,147,.35); transform:translateY(0); }
50% { box-shadow:0 6px 20px rgba(232,67,147,.65), 0 0 0 2px #fff, 0 0 22px rgba(232,67,147,.55); transform:translateY(-2px); }
}
.tech-dot-online {
position:absolute; bottom:2px; right:2px;
width:12px; height:12px; border-radius:50%;
background:#4ade80; border:2px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.2); z-index:3;
}
/* ─── STORY OVERLAY ─── */
.story-overlay {
position:fixed; inset:0; z-index:99999;
background:rgba(0,0,0,.85); backdrop-filter:blur(16px);
display:flex; align-items:center; justify-content:center;
animation:fadeIn .25s ease both;
cursor:pointer;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.story-card {
width:340px; max-width:90vw; max-height:85vh;
background:#fff; border-radius:24px; overflow:hidden;
box-shadow:0 24px 64px rgba(0,0,0,.3);
animation:storySlideUp .4s cubic-bezier(.16,1,.3,1) both;
cursor:default;
}
/* Booking card (modal) — wider, compact */
.booking-card {
width:560px !important; max-width:95vw !important;
max-height:90vh; overflow-y:auto;
}
.booking-card::-webkit-scrollbar { display:none; }
.booking-card .story-header { padding:20px 24px 16px; }
.booking-card .story-avatar-ring { width:72px; height:72px; margin-bottom:10px; }
.booking-card .story-avatar-ring img { width:64px; height:64px; }
.booking-card .story-name { font-size:18px; }
.booking-card .story-stars { font-size:12px; }
.booking-card .story-badge { margin-top:6px; font-size:10px; }
.booking-card .story-progress { padding:8px 24px; }
.booking-card .story-body { padding:12px 24px; }
.booking-card .story-svc { padding:10px 14px; margin-bottom:6px; }
.booking-card .story-svc-ic { width:38px; height:38px; border-radius:10px; }
.booking-card .story-svc-name { font-size:13px; }
.booking-card .story-svc-desc { font-size:10px; }
.booking-card .story-svc-price { font-size:17px; }
/* 2 column form on desktop */
.booking-form-grid {
display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;
margin-top:14px;
}
.booking-form-grid .fg { margin-bottom:0; }
.booking-card .story-footer { padding:12px 24px 18px; }
.booking-card .story-book { padding:12px; font-size:13px; }
.booking-card .story-call { padding:12px; font-size:12px; }
@media(max-width:600px){
.booking-card { width:100%!important; border-radius:20px 20px 0 0!important; }
.booking-form-grid { grid-template-columns:1fr; gap:8px; }
.modal-overlay { align-items:flex-end!important; padding:0!important; }
}
@keyframes storySlideUp {
from { opacity:0; transform:scale(.9) translateY(30px); }
to { opacity:1; transform:scale(1) translateY(0); }
}
.story-header {
position:relative; overflow:hidden;
background:#fff; padding:32px 20px 20px; text-align:center;
}
.story-avatar {
width:88px; height:88px; border-radius:50%;
border:4px solid #fff;
object-fit:cover;
box-shadow:0 4px 20px rgba(0,0,0,.1);
margin:0 auto 14px;
position:relative;
}
.story-avatar-ring {
width:98px; height:98px; border-radius:50%;
background:conic-gradient(#e84393,#fbbf24,#ef4444,#e84393);
display:flex; align-items:center; justify-content:center;
margin:0 auto 14px;
}
.story-avatar-ring img {
width:86px; height:86px; border-radius:50%;
object-fit:cover; border:3px solid #fff;
}
.story-name { font-size:22px; font-weight:900; color:#111; }
.story-stars { font-size:13px; color:#888; margin-top:4px; }
.story-stars span { color:#fbbf24; }
.story-badge {
display:inline-flex; align-items:center; gap:4px;
background:#f5f5f5; border-radius:50px;
padding:4px 12px; margin-top:10px;
font-size:11px; font-weight:700; color:#555;
}
.story-badge-dot { width:6px; height:6px; border-radius:50%; background:#4ade80; }
.story-progress {
display:flex; gap:3px; padding:12px 16px 0;
}
.story-progress-bar {
flex:1; height:3px; border-radius:2px; background:rgba(0,0,0,.08);
overflow:hidden;
}
.story-progress-fill {
height:100%; background:#e84393; border-radius:2px;
animation:storyProgress 3s linear both;
}
@keyframes storyProgress { from{width:0} to{width:100%} }
.story-body { padding:16px 20px; }
.story-svc {
display:flex; align-items:center; gap:14px;
padding:14px 16px; border-radius:16px;
background:#fff; border:1.5px solid #f0f0f0;
margin-bottom:8px; cursor:pointer;
transition:all .2s;
}
.story-svc:hover { border-color:#e84393; background:#fdf2f8; }
.story-svc:active { transform:scale(.98); }
.story-svc-ic {
width:46px; height:46px; border-radius:14px;
display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.story-svc-ic.orange { background:#fdf2f8; }
.story-svc-ic.amber { background:#fdf2f8; }
.story-svc-ic.blue { background:#eff6ff; }
.story-svc-info { flex:1; }
.story-svc-name { font-size:14px; font-weight:800; color:#111; }
.story-svc-desc { font-size:11px; color:#999; margin-top:2px; }
.story-svc-price { font-size:20px; font-weight:900; color:#e84393; flex-shrink:0; }
.story-footer { padding:12px 20px 20px; display:flex; gap:8px; }
.story-book {
flex:2; background:#111; color:#fff; border:none; border-radius:999px;
padding:11px; font-family:'Inter',sans-serif; font-size:13px; font-weight:800;
cursor:pointer; transition:all .15s;
}
.story-book:hover { background:#222; }
.story-book:active { transform:scale(.97); }
.story-call {
flex:1; background:#fff; color:#111; border:1.5px solid #e5e5e5;
border-radius:999px;
padding:10px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
cursor:pointer; text-decoration:none; text-align:center;
transition:all .15s;
}
.story-call:hover { background:#f5f5f5; }
.story-call:active { transform:scale(.97); }
.story-close {
position:absolute; top:12px; right:12px;
width:30px; height:30px; border-radius:50%;
background:#f5f5f5; border:none; color:#888; font-size:14px;
display:flex; align-items:center; justify-content:center;
cursor:pointer; z-index:2; transition:background .15s;
}
.story-close:hover { background:#eee; color:#111; }
/* ─── LUCIDE CLICK-THROUGH ─── */
button i[data-lucide], button svg, a i[data-lucide], a svg,
.ma-tab *, .ma-svc-item *, .ma-cta *, .ma-notif *, .chat-btn * { pointer-events:none; }
/* ─── SPRING PRESS ─── */
.pressable { transition:transform .45s cubic-bezier(.34,1.56,.64,1); will-change:transform; }
.pressable.pressing { transform:scale(.97) !important; transition:transform .08s ease-out !important; }
/* ─── SCROLL ANIMATIONS ─── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
/* ─── MOBILE APP VIEW (Grab style — light theme) ─── */
.mobile-app { display:none; }
@media(max-width:768px){
.desktop-landing { display:none !important; }
nav { display:none !important; }
footer { display:none !important; }
.mobile-app {
display:flex; flex-direction:column;
height:100vh; height:100dvh; overflow:hidden;
background:#f5f5f5;
}
/* ── Fixed top bar (Uber style — white) ── */
.ma-topbar-fixed {
position:sticky; top:0; z-index:20;
background:#fff;
padding:env(safe-area-inset-top,8px) 20px 10px;
display:flex; align-items:center; justify-content:space-between;
border-bottom:1px solid rgba(0,0,0,.06);
box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.ma-scroll { flex:1; overflow-y:auto; overflow-x:hidden; }
.ma-scroll::-webkit-scrollbar { display:none; }
/* ── Hero zone (white, Uber style) ── */
.ma-dark {
background:#fff;
padding:16px 20px 22px;
border-radius:0 0 0 0;
position:relative; overflow:hidden;
}
.ma-dark::after { display:none; }
.ma-topbar-left { display:flex; align-items:center; gap:10px; }
.ma-avatar {
width:44px; height:44px; border-radius:50%;
position:relative;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
}
.ma-avatar::before {
content:''; position:absolute; width:100%; height:100%;
border-radius:50%;
background:conic-gradient(#e84393,#ec4899,#e84393,#ec4899,#e84393);
animation:avatarSpin 3s linear infinite;
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),black 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 3px),black 0);
transition:background .4s;
}
.ma-avatar.seen::before {
background:#ccc;
animation:none;
}
@keyframes avatarSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.ma-avatar-inner {
width:36px; height:36px; border-radius:50%;
background:#fff;
display:flex; align-items:center; justify-content:center;
position:relative; z-index:1;
overflow:hidden;
}
.ma-avatar-inner img { width:100%; height:100%; object-fit:cover; display:block; }
.ma-user-name { font-size:14px; font-weight:800; color:#111; }
.ma-user-sub { font-size:10px; color:rgba(0,0,0,.4); font-weight:600; }
.ma-topbar-right { display:flex; align-items:center; gap:8px; }
.ma-weather-pill {
display:flex; align-items:center; gap:4px;
background:#f5f5f5; border:none;
border-radius:20px; padding:5px 12px;
font-size:11px; font-weight:600; color:rgba(0,0,0,.5);
}
.ma-greeting {
font-size:24px; font-weight:900; color:#111;
letter-spacing:-.5px; line-height:1.15;
margin-bottom:6px; position:relative; z-index:1;
}
.ma-greeting em { font-style:normal; color:var(--green); }
/* ── Address inputs (Uber style — gray bg) ── */
.ma-inputs { position:relative; z-index:1; }
.ma-input-row {
display:flex; align-items:center; gap:12px;
background:#f5f5f5;
border:none;
border-radius:12px; padding:0 14px; margin-bottom:8px;
transition:background .2s;
}
.ma-input-row:focus-within {
background:#ebebeb;
}
.ma-input-dot { flex-shrink:0; }
.ma-dot-green { width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(249,115,22,.4); }
.ma-dot-orange { width:9px;height:9px;border-radius:2px;background:#e84393; }
.ma-input-row input {
flex:1; background:transparent; border:none; outline:none;
font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
color:#111; padding:13px 0;
}
.ma-input-row input::placeholder { color:rgba(0,0,0,.3); }
/* ── CTA (Uber style — black pill) ── */
.ma-cta-wrap { padding:14px 20px 0; position:relative; z-index:1; margin-top:-1px; }
.ma-cta {
width:100%;
background:#111;
color:#fff; border:none;
border-radius:var(--pill); padding:16px;
font-family:'Inter',sans-serif; font-size:15px; font-weight:800;
cursor:pointer; letter-spacing:-.1px;
box-shadow:0 4px 16px rgba(0,0,0,.15);
transition:transform .15s, box-shadow .15s;
font-size:15px; font-weight:800; letter-spacing:-.1px;
}
.ma-cta:active { transform:scale(.97); box-shadow:0 2px 8px rgba(0,0,0,.1); }
/* ── Scrollable body (light) ── */
.ma-body {
flex:1; overflow-y:auto; overflow-x:hidden;
padding:0 0 0;
}
.ma-body::-webkit-scrollbar { display:none; }
/* ── Map card ── */
.ma-map-card {
margin:16px 20px 0; border-radius:16px; overflow:hidden;
background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06);
border:1px solid rgba(0,0,0,.06);
}
.ma-map { height:175px; position:relative; }
#mobile-map { width:100%; height:100%; }
.ma-map-eta {
position:absolute; top:10px; right:10px; z-index:10;
background:#fff; border-radius:10px;
padding:5px 10px; display:flex; align-items:center; gap:5px;
box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.ma-map-eta-dot { width:6px;height:6px;border-radius:50%;background:var(--green); }
.ma-map-eta-val { font-size:11px; font-weight:800; color:#111; }
.ma-map-info {
padding:12px 14px; display:flex; align-items:center; gap:10px;
background:#fff;
}
.ma-map-info-icon { font-size:16px; }
.ma-map-info-text { flex:1; font-size:12px; color:#555; font-weight:500; }
.ma-map-info-text strong { color:#111; font-weight:700; }
/* ── Promo banner ── */
.ma-promo {
margin:12px 20px 0; padding:14px 16px;
background:#fff; border-radius:14px;
border:1px solid rgba(0,0,0,.06);
box-shadow:0 2px 8px rgba(0,0,0,.04);
display:flex; align-items:center; gap:12px;
}
.ma-promo-badge {
width:40px; height:40px; border-radius:12px;
background:linear-gradient(135deg,#fce7f3,#fbcfe8);
display:flex; align-items:center; justify-content:center;
font-size:18px; flex-shrink:0;
}
.ma-promo-text { flex:1; }
.ma-promo-title { font-size:13px; font-weight:800; color:#111; }
.ma-promo-sub { font-size:11px; color:#888; margin-top:2px; line-height:1.4; }
/* ── Services grid ── */
.ma-services {
padding:20px 20px 12px;
}
.ma-services-title { font-size:16px; font-weight:900; color:#111; margin-bottom:14px; }
.ma-services-row { display:flex; gap:10px; }
.ma-svc-item {
flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
background:#fff; border:1px solid rgba(0,0,0,.06);
border-radius:16px; padding:16px 6px 12px; cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.04);
transition:transform .15s, box-shadow .15s;
position:relative; overflow:hidden;
}
.ma-svc-item:active { transform:scale(.96); }
.ma-svc-item.active {
border-color:var(--green);
box-shadow:0 2px 12px rgba(249,115,22,.15);
}
.ma-svc-item.active::after {
content:''; position:absolute; bottom:0; left:0; right:0;
height:3px; background:var(--green); border-radius:3px 3px 0 0;
}
.ma-svc-icon-wrap {
width:44px; height:44px; border-radius:14px;
background:#f5f5f5;
display:flex; align-items:center; justify-content:center;
font-size:22px;
}
.ma-svc-item.active .ma-svc-icon-wrap { background:#fce7f3; }
.ma-svc-name { font-size:11px; font-weight:700; color:#333; text-align:center; }
.ma-svc-price { font-size:12px; font-weight:900; color:var(--green); }
/* ── Mobile sections shared ── */
.ms { padding:24px 20px; }
.ms-title { font-size:18px; font-weight:900; color:#111; margin-bottom:6px; }
.ms-sub { font-size:13px; color:#888; margin-bottom:16px; line-height:1.5; }
.ms-reveal { opacity:0; transform:translateY(20px); transition:all .5s ease; }
.ms-reveal.vis { opacity:1; transform:translateY(0); }
/* ── Detail service cards ── */
.ms-svc-detail {
background:#fff; border-radius:16px; padding:20px;
border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 8px rgba(0,0,0,.04);
margin-bottom:10px; display:flex; gap:14px; align-items:flex-start;
}
.ms-svc-ic {
width:48px; height:48px; border-radius:14px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-size:22px;
}
.ms-svc-ic.green { background:#fce7f3; }
.ms-svc-ic.amber { background:#fef3c7; }
.ms-svc-ic.blue { background:#dbeafe; }
.ms-svc-body { flex:1; }
.ms-svc-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.ms-svc-name { font-size:15px; font-weight:800; color:#111; }
.ms-svc-price { font-size:16px; font-weight:900; color:var(--green); }
.ms-svc-desc { font-size:12px; color:#888; line-height:1.5; }
.ms-svc-tags { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.ms-svc-tag {
font-size:10px; font-weight:700; color:var(--green);
background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.12);
border-radius:50px; padding:3px 10px;
}
/* ── Why us ── */
.ms-why-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ms-why-card {
background:#fff; border-radius:14px; padding:18px 14px;
border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 6px rgba(0,0,0,.03);
text-align:center;
}
.ms-why-ic {
width:42px; height:42px; border-radius:12px;
background:#fce7f3; margin:0 auto 10px;
display:flex; align-items:center; justify-content:center;
}
.ms-why-title { font-size:13px; font-weight:800; color:#111; margin-bottom:3px; }
.ms-why-text { font-size:11px; color:#888; line-height:1.45; }
/* ── Cities SEO ── */
.ms-cities-wrap { display:flex; flex-wrap:wrap; gap:6px; }
.ms-city {
font-size:11px; font-weight:700; color:#555;
background:#fff; border:1px solid rgba(0,0,0,.06);
border-radius:50px; padding:6px 14px;
box-shadow:0 1px 4px rgba(0,0,0,.03);
transition:all .15s;
}
.ms-city:active { background:#fce7f3; border-color:rgba(249,115,22,.2); color:var(--green); }
/* ── Reviews ── */
.ms-review {
background:#fff; border-radius:14px; padding:16px;
border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 6px rgba(0,0,0,.03);
margin-bottom:10px;
}
.ms-review-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ms-review-av {
width:36px; height:36px; border-radius:50%;
background:linear-gradient(135deg,#fce7f3,#fbcfe8);
display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:900; color:#9d174d; flex-shrink:0;
}
.ms-review-name { font-size:13px; font-weight:800; color:#111; }
.ms-review-stars { font-size:11px; color:#fbbf24; }
.ms-review-text { font-size:12px; color:#555; line-height:1.55; }
/* ── FAQ ── */
.ms-faq {
background:#fff; border-radius:14px;
border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 6px rgba(0,0,0,.03);
margin-bottom:8px; overflow:hidden;
}
.ms-faq-q {
padding:14px 16px; font-size:13px; font-weight:700; color:#111;
display:flex; align-items:center; justify-content:space-between;
cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.ms-faq-arrow { transition:transform .25s; font-size:14px; color:#888; }
.ms-faq.open .ms-faq-arrow { transform:rotate(180deg); }
.ms-faq-a {
max-height:0; overflow:hidden; transition:max-height .3s ease;
padding:0 16px;
}
.ms-faq.open .ms-faq-a { max-height:200px; }
.ms-faq-a-inner { padding:0 0 14px; font-size:12px; color:#888; line-height:1.6; }
/* ── Mobile CTA banner ── */
.ms-cta-banner {
margin:0 20px 16px; padding:24px 20px;
background:linear-gradient(135deg,#500724,#9d174d);
border-radius:18px; text-align:center;
position:relative; overflow:hidden;
}
.ms-cta-banner::before {
content:''; position:absolute; top:-50%; right:-30%;
width:200px; height:200px; border-radius:50%;
background:radial-gradient(circle,rgba(249,115,22,.2),transparent 65%);
pointer-events:none;
}
.ms-cta-title { font-size:18px; font-weight:900; color:#fff; margin-bottom:6px; position:relative; }
.ms-cta-sub { font-size:12px; color:rgba(255,255,255,.5); margin-bottom:16px; position:relative; }
.ms-cta-btn {
background:#fff; color:#111; border:none; border-radius:50px;
padding:14px 32px; font-family:'Inter',sans-serif;
font-size:14px; font-weight:800; cursor:pointer;
box-shadow:0 4px 16px rgba(0,0,0,.15);
position:relative;
}
/* ── Bottom nav Instagram style (fixed, always visible) ── */
.ma-action-bar {
position:fixed; left:0; right:0; bottom:0; z-index:1500;
display:flex; align-items:flex-end; justify-content:space-around;
gap:0; padding:8px 8px max(8px, env(safe-area-inset-bottom));
background:rgba(255,255,255,.94);
backdrop-filter:blur(18px) saturate(1.8);
-webkit-backdrop-filter:blur(18px) saturate(1.8);
border-top:1px solid rgba(0,0,0,.05);
box-shadow:0 -4px 24px rgba(0,0,0,.06);
}
body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
.mobile-app { height:auto !important; min-height:calc(100vh - 72px); overflow:visible !important; }
.ma-scroll { overflow:visible !important; flex:none !important; padding-bottom:16px; }
.nav-tab {
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
padding:8px 4px; text-decoration:none; background:transparent;
border:none; cursor:pointer; position:relative; color:#111;
font-family:'Inter',sans-serif;
-webkit-tap-highlight-color:transparent;
transition:transform .15s;
}
.nav-tab:active { transform:scale(.88); }
.nav-tab i { width:24px; height:24px; stroke-width:2.2; pointer-events:none; }
.nav-tab .nav-lbl { font-size:10px; font-weight:600; color:rgba(0,0,0,.7); }
.nav-tab .nav-dot {
position:absolute; top:4px; right:calc(50% - 20px);
width:9px; height:9px; border-radius:50%;
background:#ef4444; border:2px solid #fff;
box-shadow:0 0 0 0 rgba(239,68,68,.4);
animation:navDot 1.5s ease infinite;
}
@keyframes navDot {
0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}
50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}
}
.nav-tab-center {
position:relative; padding:0 4px; transform:translateY(-18px);
}
.nav-tab-center .nav-center-btn {
width:56px; height:56px; border-radius:50%; border:none;
background:linear-gradient(135deg,#e84393,#d63384); color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 24px rgba(232,67,147,.45), 0 0 0 4px #fff, 0 0 20px rgba(232,67,147,.4);
cursor:pointer;
animation:centerPulse 2.2s ease-in-out infinite;
}
@keyframes centerPulse {
0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(232,67,147,.45), 0 0 0 4px #fff, 0 0 20px rgba(232,67,147,.4);}
50%{transform:scale(1.04);box-shadow:0 12px 32px rgba(232,67,147,.6), 0 0 0 4px #fff, 0 0 28px rgba(232,67,147,.55);}
}
.nav-tab-center .nav-center-btn i { width:26px; height:26px; color:#fff; stroke-width:2.4; }
.nav-tab-center .nav-lbl {
position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
font-size:10px; font-weight:700; color:#e84393; white-space:nowrap;
}
/* keep old selectors alive as fallback — unused now but avoids runtime errors */
.ma-act-book, .ma-act-call {
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
background:#fff; color:#111; border:1.5px solid rgba(0,0,0,.08);
border-radius:14px; padding:15px 10px;
font-family:'Inter',sans-serif; font-size:13px; font-weight:800;
cursor:pointer; text-decoration:none;
transition:all .15s;
white-space:nowrap; letter-spacing:-.2px;
}
.ma-act-call:active { transform:scale(.97); background:#f5f5f5; }
.ma-svc-icon-wrap, .ma-svc-name, .ma-svc-price { pointer-events:none; }
/* ── Chat on mobile ── */
.chat-wrap { bottom:80px; right:16px; }
.chat-wrap .chat-btn { display:none; }
.chat-panel { width:calc(100vw - 32px); }
.chat-btn {
width:48px; height:48px; font-size:18px;
background:var(--green)!important; color:#fff;
box-shadow:0 4px 16px rgba(249,115,22,.35);
}
.chat-btn .notif { border-color:#f5f5f5; }
/* Modal adjustments for mobile */
.modal-overlay { z-index:9999; padding:0; align-items:flex-end; }
.modal {
margin:0; border-radius:24px 24px 0 0;
max-width:100%; width:100%;
max-height:92vh;
animation:modalSlideUp .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalSlideUp {
from { opacity:0; transform:translateY(100%); }
to { opacity:1; transform:translateY(0); }
}
.modal-header { padding:24px 24px 0; }
.modal-steps { padding:16px 24px; }
.modal-body { padding:0 24px 20px; max-height:40vh; }
.modal-footer { padding:16px 24px 24px; }
.modal-head { font-size:18px; }
.fg input, .fg select { padding:13px 16px; font-size:13px; }
.modal-trust { gap:10px; }
}
/* ─── TABLET ─── */
@media(min-width:769px) and (max-width:900px){
:root { --px:32px; }
.nav-links { display:none; }
.hero-map-side { width:45%; }
.services-grid { grid-template-columns:1fr 1fr; }
.steps-row { grid-template-columns:repeat(2,1fr); }
.info-grid { grid-template-columns:1fr; }
}
@media(min-width:901px) and (max-width:1100px){
:root { --px:40px; }
}
/* ─── BOOKING PAGE (page 2) ─── */
.booking-page {
position:fixed; inset:0; z-index:150;
background:#000;
display:none;
animation:bkIn .4s cubic-bezier(.16,1,.3,1) both;
}
.booking-page.open { display:block; }
@keyframes bkIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.bk-nav {
position:absolute; top:0; left:0; right:0; z-index:10;
height:64px; display:flex; align-items:center; padding:0 28px; gap:16px;
background:rgba(0,0,0,.8); backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
}
.bk-back {
width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,.08); border:none; color:#fff;
font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .15s;
}
.bk-back:hover { background:rgba(255,255,255,.15); }
.bk-nav-title { font-size:16px; font-weight:800; }
.bk-nav-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.bk-nav-weather { font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:5px; }
.bk-nav-dot { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green); }
.bk-layout {
display:flex; height:100vh; padding-top:64px;
}
/* ─ Left booking panel ─ */
.bk-panel {
width:420px; flex-shrink:0;
background:#000; border-right:1px solid var(--border);
display:flex; flex-direction:column; height:100%; overflow:hidden;
}
.bk-panel-body {
flex:1; overflow-y:auto; padding:28px;
}
.bk-panel-body::-webkit-scrollbar { width:0; }
.bk-section-title {
font-size:16px; font-weight:900; margin-bottom:16px; letter-spacing:-.3px;
}
/* Route block in booking */
.bk-route {
background:var(--surface); border:1px solid var(--border);
border-radius:var(--r); padding:4px 0; margin-bottom:24px;
}
.bk-route-row {
display:flex; align-items:center; gap:14px;
padding:14px 18px; cursor:pointer; transition:background .15s;
position:relative;
}
.bk-route-row:hover { background:rgba(255,255,255,.03); }
.bk-route-row + .bk-route-row::before {
content:''; position:absolute; top:0; left:18px; right:18px;
height:1px; background:var(--border);
}
.bk-rdot-origin { width:10px;height:10px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0; }
.bk-rdot-dest { width:10px;height:10px;border-radius:2px;background:#fff;flex-shrink:0; }
.bk-route-info { flex:1; min-width:0; }
.bk-route-label { font-size:11px; color:var(--muted); font-weight:500; margin-bottom:3px; }
.bk-route-value { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-route-edit { font-size:11px; color:var(--green); font-weight:700; cursor:pointer; flex-shrink:0; }
/* Service selector in booking */
.bk-services { display:flex; flex-direction:column; gap:6px; margin-bottom:24px; }
.bk-svc {
display:flex; align-items:center; gap:14px; padding:16px 18px;
border-radius:var(--r); background:var(--surface);
border:1.5px solid transparent; cursor:pointer;
transition:all .2s cubic-bezier(.2,1,.3,1);
}
.bk-svc:hover { border-color:rgba(255,255,255,.1); }
.bk-svc.selected {
border-color:rgba(249,115,22,.5);
background:linear-gradient(135deg,rgba(249,115,22,.10),rgba(249,115,22,.03));
}
.bk-svc-radio {
width:20px;height:20px;border-radius:50%;border:2px solid var(--border);
flex-shrink:0; display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.bk-svc.selected .bk-svc-radio {
border-color:var(--green); background:var(--green); box-shadow:0 0 8px rgba(249,115,22,.4);
}
.bk-svc.selected .bk-svc-radio::after { content:'';width:8px;height:8px;border-radius:50%;background:#fff; }
.bk-svc-icon { font-size:22px; width:44px; height:44px; border-radius:12px; background:var(--card); display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.bk-svc.selected .bk-svc-icon { background:rgba(249,115,22,.15); }
.bk-svc-info { flex:1; }
.bk-svc-name { font-size:14px; font-weight:700; }
.bk-svc-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.bk-svc-price { font-size:18px; font-weight:900; flex-shrink:0; }
.bk-svc.selected .bk-svc-price { color:var(--green); }
/* Tech card in booking */
.bk-tech {
display:flex; align-items:center; gap:14px;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--r); padding:16px 18px; margin-bottom:24px;
}
.bk-tech-av { width:48px;height:48px;border-radius:50%;font-size:22px;background:var(--card);display:flex;align-items:center;justify-content:center;border:2px solid var(--border);flex-shrink:0; }
.bk-tech-info { flex:1; }
.bk-tech-name { font-size:14px; font-weight:800; }
.bk-tech-meta { font-size:12px; color:var(--muted); margin-top:3px; }
.bk-tech-stars { color:#fbbf24; }
.bk-tech-eta {
background:#fff; color:#000; font-size:12px; font-weight:900;
border-radius:var(--pill); padding:6px 14px; flex-shrink:0;
}
/* Form fields in booking */
.bk-form { margin-bottom:24px; }
.bk-fg { margin-bottom:14px; }
.bk-fg label {
display:block; font-size:11px; font-weight:700; color:var(--muted);
margin-bottom:6px; text-transform:uppercase; letter-spacing:.8px;
}
.bk-fg input, .bk-fg select {
width:100%; background:var(--surface); border:1px solid var(--border);
border-radius:var(--r-sm); padding:14px 16px; font-family:'Inter',sans-serif;
font-size:14px; color:#fff; outline:none; transition:border-color .2s;
-webkit-appearance:none; appearance:none;
}
.bk-fg input:focus, .bk-fg select:focus { border-color:rgba(255,255,255,.3); }
.bk-fg input::placeholder { color:var(--muted2); }
.bk-fg select option { background:#111; }
/* Panel footer CTA */
.bk-footer {
padding:20px 28px 28px;
border-top:1px solid var(--border); flex-shrink:0;
}
.bk-cta {
width:100%; background:#fff; color:#000; border:none;
border-radius:var(--pill); padding:18px 24px;
font-family:'Inter',sans-serif; font-size:16px; font-weight:800;
cursor:pointer; display:flex; align-items:center; justify-content:space-between;
transition:background .2s, transform .15s; letter-spacing:-.2px;
}
.bk-cta:hover { background:#e5e5e5; }
.bk-cta:active { transform:scale(.98); }
.bk-cta-price {
background:#000; color:#fff; border-radius:var(--pill);
padding:4px 14px; font-size:14px; font-weight:900;
}
.bk-trust {
display:flex; align-items:center; justify-content:center; gap:16px;
margin-top:12px; font-size:11px; color:var(--muted);
}
.bk-trust span { display:flex; align-items:center; gap:4px; font-weight:600; }
.bk-trust .ok { color:var(--green); }
/* ─ Right map area ─ */
#bk-map { flex:1; position:relative; overflow:hidden; }
#bk-leaflet { position:absolute; inset:0; }
.ma-cadeaux-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;}
.ma-cadeau{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.ma-cadeau img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.ma-cadeau span{padding:8px 6px;font-size:11px;font-weight:700;color:#111;text-align:center;line-height:1.2;}
[data-theme="light"] .ma-cadeau{background:rgba(255,255,255,.55);}
.mfoot{margin:24px 16px 0;padding:22px 20px;background:linear-gradient(160deg,#fdf2f8,#ffffff);border:1px solid rgba(232,67,147,.15);border-radius:20px;box-shadow:0 2px 12px rgba(232,67,147,.06);}
.mfoot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.mfoot-logo{width:36px;height:36px;border-radius:50%;background:conic-gradient(#e84393,#fbbf24,#ef4444,#e84393);padding:2px;flex-shrink:0;}
.mfoot-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;}
.mfoot-name{font-size:14px;font-weight:900;color:#111;letter-spacing:-.3px;}
.mfoot-tag{font-size:11px;color:#888;margin-top:1px;}
.mfoot-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.mfoot-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border:1px solid rgba(232,67,147,.1);border-radius:12px;font-size:12px;font-weight:700;color:#111;text-decoration:none;transition:all .15s;}
.mfoot-chip:active{transform:scale(.97);background:#fdf2f8;}
.mfoot-chip-ic{width:24px;height:24px;border-radius:6px;background:rgba(232,67,147,.1);display:flex;align-items:center;justify-content:center;color:#e84393;flex-shrink:0;}
.mfoot-tel{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:#111;color:#fff !important;border-radius:14px;font-size:15px;font-weight:900;text-decoration:none;letter-spacing:-.2px;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .15s;}
.mfoot-tel:active{transform:scale(.97);}
.mfoot-tel i{color:#4ade80;}
.mfoot-meta{text-align:center;margin-top:12px;font-size:10px;color:rgba(0,0,0,.35);font-weight:600;line-height:1.55;}
.mfoot-meta strong{color:rgba(0,0,0,.55);}
.cadeaux-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1200px;margin:0 auto;}
.cadeau-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:all .3s cubic-bezier(.2,1,.3,1);position:relative;aspect-ratio:1;display:flex;flex-direction:column;}
.cadeau-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 20px 40px rgba(232,67,147,.15);}
.cadeau-card img{width:100%;height:75%;object-fit:cover;display:block;}
.cadeau-name{padding:10px 12px;font-size:12px;font-weight:800;color:var(--text);text-align:center;background:var(--card);flex:1;display:flex;align-items:center;justify-content:center;line-height:1.2;}
@media(max-width:900px){.cadeaux-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:500px){.cadeaux-grid{grid-template-columns:repeat(2,1fr);gap:10px;}.cadeau-name{font-size:11px;padding:8px 6px;}}
.city-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:100%;margin:0 auto;padding:0 var(--px);}
.city-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--pill);font-size:14px;font-weight:600;color:var(--muted);background:rgba(232,67,147,.04);border:1px solid rgba(232,67,147,.1);backdrop-filter:blur(4px);transition:all .4s ease;flex-shrink:0;}
.city-chip:hover{background:rgba(232,67,147,.12);border-color:rgba(232,67,147,.3);color:var(--green);transform:scale(1.04);box-shadow:0 4px 16px rgba(232,67,147,.1);}
.city-chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.5;}
.faq-3d-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto;}
.faq-3d{background:rgba(232,67,147,.03);border:1px solid rgba(232,67,147,.1);border-radius:20px;padding:0;overflow:hidden;backdrop-filter:blur(8px);transition:all .4s cubic-bezier(.2,1,.3,1);position:relative;cursor:pointer;perspective:800px;transform-style:preserve-3d;}
.faq-3d::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(232,67,147,.4),transparent);opacity:0;transition:opacity .3s;}
.faq-3d:hover{transform:translateY(-6px) rotateX(2deg);border-color:rgba(232,67,147,.3);box-shadow:0 20px 60px rgba(232,67,147,.12),0 0 40px rgba(232,67,147,.05);}
.faq-3d:hover::before{opacity:1;}
.faq-3d-q{padding:22px 24px 22px;font-size:15px;font-weight:800;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;}
.faq-3d-num{width:32px;height:32px;border-radius:10px;background:rgba(232,67,147,.1);border:1px solid rgba(232,67,147,.2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--green);flex-shrink:0;box-shadow:0 0 12px rgba(232,67,147,.1);}
.faq-3d-arrow{font-size:18px;color:var(--green);transition:transform .3s;flex-shrink:0;}
.faq-3d.open .faq-3d-arrow{transform:rotate(180deg);}
.faq-3d-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0 24px;}
.faq-3d.open .faq-3d-a{max-height:200px;padding:0 24px 20px;}
.faq-3d-a-inner{font-size:14px;color:var(--muted);line-height:1.7;}
@media(max-width:700px){.faq-3d-grid{grid-template-columns:1fr;}}
/* CTA 3D */
.cta-3d{max-width:800px;margin:0 auto;padding:60px 48px;border-radius:28px;text-align:center;position:relative;overflow:hidden;
background:linear-gradient(145deg,rgba(232,67,147,.06),rgba(232,67,147,.02),rgba(139,92,246,.04));
border:1.5px solid rgba(232,67,147,.15);backdrop-filter:blur(20px);
box-shadow:0 0 60px rgba(232,67,147,.06),0 0 120px rgba(232,67,147,.03),inset 0 1px 0 rgba(232,67,147,.1);
transform:perspective(600px) rotateX(1deg);transition:transform .4s,box-shadow .4s;}
.cta-3d:hover{transform:perspective(600px) rotateX(0deg) translateY(-4px);box-shadow:0 24px 80px rgba(232,67,147,.12),0 0 80px rgba(232,67,147,.06),inset 0 1px 0 rgba(232,67,147,.15);}
.cta-3d::before{content:'';position:absolute;top:-50%;right:-30%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(232,67,147,.12),transparent 65%);pointer-events:none;animation:glowOrb1 6s ease-in-out infinite;}
.cta-3d::after{content:'';position:absolute;bottom:-40%;left:-20%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.08),transparent 65%);pointer-events:none;animation:glowOrb2 8s ease-in-out infinite;}
#ville-seo{padding:80px 32px;background:var(--section-bg);border-top:1px solid var(--border);}
#ville-seo .vs-wrap{max-width:960px;margin:0 auto;}
#ville-seo .vs-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;color:var(--green);margin-bottom:14px;text-shadow:0 0 16px rgba(232,67,147,.25);}
#ville-seo h2{font-size:clamp(28px,3.5vw,42px);font-weight:900;letter-spacing:-1px;line-height:1.15;color:var(--text);margin-bottom:18px;}
#ville-seo h2 em{font-style:normal;color:var(--green);}
#ville-seo .vs-lead{font-size:17px;line-height:1.65;color:var(--muted);max-width:720px;margin-bottom:44px;}
#ville-seo .vs-lead strong{color:var(--text);font-weight:700;}
#ville-seo .vs-keycard{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:48px;}
#ville-seo .vs-kc{background:rgba(232,67,147,.05);border:1px solid rgba(232,67,147,.15);border-radius:16px;padding:20px 18px;backdrop-filter:blur(6px);transition:border-color .25s, transform .25s;}
#ville-seo .vs-kc:hover{border-color:rgba(232,67,147,.35);transform:translateY(-2px);}
#ville-seo .vs-kc-num{font-size:24px;font-weight:900;color:var(--green);letter-spacing:-1px;line-height:1;margin-bottom:6px;text-shadow:0 0 14px rgba(232,67,147,.25);}
#ville-seo .vs-kc-t{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;}
#ville-seo .vs-kc-s{font-size:11px;color:var(--muted);line-height:1.4;}
#ville-seo .vs-row{display:grid;grid-template-columns:auto 1fr;gap:18px;margin:28px 0;align-items:start;}
#ville-seo .vs-ic{width:48px;height:48px;border-radius:14px;background:rgba(232,67,147,.1);border:1px solid rgba(232,67,147,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 20px rgba(232,67,147,.1);}
#ville-seo .vs-ic i{color:var(--green);}
#ville-seo .vs-row h3{font-size:19px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.2px;}
#ville-seo .vs-row p{font-size:15px;line-height:1.7;color:var(--muted);}
#ville-seo .vs-row p strong{color:var(--text);font-weight:600;}
#ville-seo .vs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;}
#ville-seo .vs-step{background:rgba(232,67,147,.03);border:1px solid rgba(232,67,147,.1);border-radius:14px;padding:18px 16px;position:relative;}
#ville-seo .vs-step-num{position:absolute;top:-10px;left:14px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(232,67,147,.4);}
#ville-seo .vs-step-t{font-size:13px;font-weight:800;color:var(--text);margin:8px 0 4px;}
#ville-seo .vs-step-d{font-size:12px;color:var(--muted);line-height:1.5;}
#ville-seo .vs-quote{background:linear-gradient(135deg,rgba(232,67,147,.08),rgba(232,67,147,.02));border:1.5px solid rgba(232,67,147,.25);border-radius:18px;padding:24px 26px;margin:36px 0;position:relative;overflow:hidden;}
#ville-seo .vs-quote::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(232,67,147,.15),transparent 65%);pointer-events:none;}
#ville-seo .vs-quote-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--green);margin-bottom:8px;position:relative;}
#ville-seo .vs-quote-t{font-size:17px;font-weight:700;color:var(--text);line-height:1.5;position:relative;}
#ville-seo .vs-quote-t em{font-style:normal;color:var(--green);}
#ville-seo .vs-hamon{display:flex;gap:16px;align-items:flex-start;background:rgba(232,67,147,.04);border-left:3px solid var(--green);border-radius:0 12px 12px 0;padding:18px 22px;margin:28px 0;}
#ville-seo .vs-zones-wrap{margin-top:52px;padding-top:40px;border-top:1px solid var(--border);}
#ville-seo .vs-zones-t{font-size:19px;font-weight:800;color:var(--text);margin-bottom:6px;}
#ville-seo .vs-zones-s{font-size:14px;color:var(--muted);margin-bottom:18px;}
#ville-seo .vs-chips{display:flex;flex-wrap:wrap;gap:8px;}
#ville-seo .vs-chips a{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);background:rgba(232,67,147,.04);border:1px solid rgba(232,67,147,.12);text-decoration:none;transition:all .2s;}
#ville-seo .vs-chips a::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.55;}
#ville-seo .vs-chips a:hover{background:rgba(232,67,147,.12);border-color:rgba(232,67,147,.3);color:var(--green);transform:translateY(-1px);}
#ville-seo .vs-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:48px;padding:28px 24px;background:linear-gradient(135deg,rgba(232,67,147,.08),rgba(232,67,147,.02));border:1.5px solid rgba(232,67,147,.2);border-radius:20px;}
#ville-seo .vs-cta-text{font-size:15px;font-weight:700;color:var(--text);}
#ville-seo .vs-cta-tel{font-size:22px;font-weight:900;color:var(--green);letter-spacing:-.5px;text-shadow:0 0 16px rgba(232,67,147,.3);text-decoration:none;}
@media(max-width:768px){
#ville-seo{padding:60px 20px;}
#ville-seo .vs-keycard{grid-template-columns:repeat(2,1fr);}
#ville-seo .vs-steps{grid-template-columns:repeat(2,1fr);}
#ville-seo .vs-row{grid-template-columns:1fr;gap:10px;}
#ville-seo .vs-cta{flex-direction:column;text-align:center;}
}
Questions fréquentes à Paris
Prix remplacement pare-brise à Paris
0€ à avancer avec assurance bris de glace. Cadeau jusqu'à 300€ offerts couvre la franchise.
Prise en charge assurance pare-brise Paris
Prise en charge de A à Z : déclaration, accord, facturation directe. 0€ à avancer, toutes assurances.
Intervention à domicile à Paris
Oui, à domicile ou sur votre lieu de travail. Déplacement gratuit, département 75.
Délai intervention rapide Paris
Sous 2 heures à Paris. Urgences : moins d 1 heure. 0€ à avancer.
Libre choix réparateur Paris
Oui, Loi Hamon garantit le libre choix. Votre assureur ne peut pas l'imposer.