/* Full optimized CSS will be inserted here. */
:root {
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --ink: #1e3a8a;
  --ink-dim: #64748b;
  --brand: #1e3a8a;
  --accent: #2563eb;
  --danger: #ef4444;
  --card: #f8fafc;
  --radius: 20px;
  --shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  --maxw: 1200px;
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 20px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:14px 20px;
  border:0;
  border-radius:calc(var(--radius) - 8px);
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg,var(--brand),#3b82f6);
  color:#ffffff;
  box-shadow:var(--shadow);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 12px 26px rgba(15,23,42,0.12);
}
.btn.secondary{
  background:#ffffff;
  color:var(--brand);
  border:1px solid rgba(148,163,184,.7);
  box-shadow:none;
}
.btn.secondary:hover{
  background:#eff6ff;
  box-shadow:var(--shadow);
}
.pill{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(37,99,235,.06);
  color:var(--brand);
  border:1px solid rgba(37,99,235,.25);
  font-weight:600;
  font-size:13px;
}
.grid{display:grid; gap:24px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 960px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}
.card{
  background:var(--card);
  border:1px solid #e2e8f0;
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
.shadow-xl{box-shadow:0 14px 30px rgba(15,23,42,0.08)}
.section{padding:80px 0; position:relative; background:var(--bg)}
.heading{
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 16px;
  color:var(--brand);
}
.sub{
  font-size: clamp(16px, 2.4vw, 20px);
  color:var(--ink-dim);
  margin:0 0 28px;
}
.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px}
.muted{color:var(--ink-dim)}
.center{text-align:center}
.hero{
  padding:120px 0 80px;
  overflow:clip;
  background:var(--bg);
  position:relative;
}
.hero h1 span{
  color:var(--accent);
}
header.site{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(148,163,184,.3);
}
header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
nav{
  display:flex;
  align-items:center;
  gap:12px;
}
nav a{
  color:var(--brand);
  opacity:.9;
  font-weight:600;
  margin:0 4px;
  text-decoration:none;
  font-size:14px;
}
nav a:hover{opacity:1; text-decoration:underline}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--brand);
  text-decoration:none;
}
.logo .mark{
  width:34px;
  height:34px;
  border-radius:10px;
  background:radial-gradient(circle at 30% 30%, #bfdbfe, #1e3a8a);
  box-shadow: inset 0 0 18px rgba(255,255,255,.4), 0 8px 18px rgba(30,64,175,.35);
}

/* Burger */
.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:transparent;
  border:0;
  cursor:pointer;
}
.burger span{
  width:26px;
  height:3px;
  background:var(--brand);
  border-radius:3px;
  transition:0.3s;
}

/* Parallax utility */
[data-parallax]{will-change: transform}

/* Orbs */
.orb{
  position:absolute;
  filter: blur(90px);
  opacity:.40;
  z-index:-1;
}
.orb.one{
  top:-160px;
  right:-140px;
  width:320px;
  height:320px;
  background:radial-gradient(circle,#bfdbfe,transparent 65%);
}
.orb.two{
  bottom:-140px;
  left:-120px;
  width:320px;
  height:320px;
  background:radial-gradient(circle,#93c5fd,transparent 65%);
}

/* Feature list */
.feature{display:flex; gap:16px; align-items:flex-start}
.feature i{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(37,99,235,.06);
  border:1px solid rgba(37,99,235,.22);
  font-size:14px;
  color:var(--brand);
  flex-shrink:0;
}

/* Pricing */
.price{
  font-size: clamp(24px, 3vw, 32px);
  font-weight:800;
  color:var(--brand);
  margin:8px 0 12px;
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}
.gallery img{
  border-radius:12px;
  border:1px solid #e2e8f0;
}
.gallery a{position:relative}
.gallery a::after{
  content:"🔍";
  position:absolute;
  bottom:8px;
  right:8px;
  font-size:16px;
  opacity:.85;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(15,23,42,.8);
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:min(1200px,90vw);
  max-height:85vh;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.6);
  background:#ffffff;
}
.lightbox button{
  position:absolute;
  top:20px;
  right:20px;
  background:#ffffff;
  color:var(--brand);
  border:1px solid #cbd5f5;
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:600;
}

/* FAQ */
details{
  background:var(--card);
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:16px;
}
details+details{margin-top:10px}
summary{cursor:pointer; font-weight:700; color:var(--brand)}
summary::-webkit-details-marker{display:none}

/* Footer */
footer{
  padding:40px 0;
  border-top:1px solid #e2e8f0;
  background:#f9fafb;
  color:var(--ink);
  margin-top:40px;
}
.foot{
  display:grid;
  gap:24px;
  grid-template-columns:2fr 1fr 1fr;
}
@media (max-width:900px){
  .foot{grid-template-columns:1fr}
}

.kpi{display:flex; gap:14px; align-items:center}
.kpi b{font-size:26px; color:var(--brand)}

input, select, textarea{
  font-family:inherit;
  font-size:14px;
}

/* Responsive nav */
@media (max-width: 820px){
  nav{
    position:fixed;
    top:60px;
    right:-100%;
    width:70%;
    height:100vh;
    background:#ffffff;
    flex-direction:column;
    align-items:flex-start;
    padding:40px 20px;
    gap:20px;
    box-shadow:-4px 0 20px rgba(0,0,0,.08);
    transition:right .3s ease;
    z-index:200;
  }
  nav.open{
    right:0;
  }
  .burger{
    display:flex;
  }
  header .wrap{
    align-items:center;
  }
  .burger.open span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  .burger.open span:nth-child(2){
    opacity:0;
  }
  .burger.open span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
}

/* CTA flottant */
#cta-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #b91c1c, #f59e0b);
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(238, 104, 14, 0.2);
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.2s, opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}
#cta-float.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#cta-float:active {
  transform: scale(0.97);
}