:root{
    --bg-0:#050b16;
    --bg-1:#0a1628;
    --bg-2:#0e1e36;
    --line:#1c2f4a;
    --blue-1:#0f6fd6;
    --blue-2:#2f8ef0;
    --blue-glow:#5ec3ff;
    --white:#f4f8fc;
    --grey:#9db1c9;
    --radius:16px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
  body{
    background:var(--bg-0);
    color:var(--white);
    font-family:var(--font-body);
    line-height:1.5;
    overflow-x:hidden;
    max-width:100%;
  }
  a{color:inherit;text-decoration:none;}

  /* ---------- background circuitry ---------- */
  .bg-grid{
    position:fixed; inset:0; z-index:-2;
    background-image:
      linear-gradient(rgba(47,142,240,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(47,142,240,0.05) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%);
  }
  .bg-glow{
    position:fixed; z-index:-1; border-radius:50%;
    filter:blur(120px); opacity:.35; pointer-events:none;
  }
  .bg-glow.one{width:600px;height:600px; top:-200px; right:-150px; background:var(--blue-1);}
  .bg-glow.two{width:500px;height:500px; bottom:0; left:-150px; background:#0a3d7a; opacity:.25;}

  section{padding:88px 8vw;}
  @media(max-width:700px){ section{padding:56px 6vw;} }
  @media(max-width:480px){ section{padding:44px 5.5vw;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-display); font-weight:600; letter-spacing:.14em;
    font-size:.78rem; text-transform:uppercase; color:var(--blue-glow);
    margin-bottom:18px;
  }
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--blue-glow);display:inline-block;}

  h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;}

  /* ---------- header ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 5vw; position:sticky; top:0; z-index:50;
    background:rgba(5,11,22,0.75); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    gap:12px;
  }
  .logo{display:flex; align-items:center; gap:22px; min-width:0;}
  .logo-left{display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0;}
  .logo-icon-img{height:38px; width:auto; display:block;}
  .logo-text{
    font-family:var(--font-display); font-weight:700; font-size:1.18rem;
    letter-spacing:.01em; line-height:1;
  }
  .logo-text span{color:var(--blue-glow);}
  .logo-divider{width:1px; align-self:stretch; background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent);}
  .logo-right{display:flex; flex-direction:column; gap:6px; min-width:210px;}
  .logo-line{
    display:flex; align-items:center; gap:9px;
    font-family:var(--font-display); font-size:.66rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--grey); white-space:nowrap;
  }
  .logo-line b{color:var(--blue-glow); font-weight:700;}
  .logo-line:last-of-type{color:var(--white);}
  .logo-line:last-of-type b{color:var(--blue-glow);}
  .logo-line .dash{height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--blue-glow),transparent); opacity:.6;}
  .logo-rule{height:1px; width:100%; background:linear-gradient(90deg,var(--blue-glow),var(--line) 70%,transparent); opacity:.55;}
  nav{display:flex; gap:34px; font-size:.92rem; font-weight:500; color:var(--grey);}
  nav a:hover{color:var(--white);}
  .btn-call{
    display:flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px;
    background:linear-gradient(135deg,var(--blue-2),var(--blue-1));
    font-weight:600; font-size:.88rem; color:#fff;
    box-shadow:0 8px 24px -8px rgba(47,142,240,.7);
    flex-shrink:0; white-space:nowrap;
  }
  @media(max-width:820px){ nav{display:none;} }
  @media(max-width:640px){ .logo-divider,.logo-right{display:none;} }
  @media(max-width:420px){
    .logo-text{font-size:1rem;}
    .logo-icon-img{height:32px;}
    .btn-call{padding:11px; border-radius:50%;}
    .btn-call span{display:none;}
  }

  /* ---------- hero ---------- */
  .hero{
    padding-top:70px; padding-bottom:60px;
    display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
  }
  .hero h1{font-size:3.2rem; line-height:1.08; margin-bottom:20px;}
  .hero h1 .accent{
    display:block;
    background:linear-gradient(100deg,var(--blue-glow),var(--blue-1));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero p{color:var(--grey); font-size:1.08rem; max-width:480px; margin-bottom:32px;}
  .hero p b{color:var(--white);}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .btn-primary{
    display:inline-flex; align-items:center; justify-content:center;
    padding:15px 28px; border-radius:12px; font-weight:600; font-size:.95rem;
    background:linear-gradient(135deg,var(--blue-2),var(--blue-1)); color:#fff;
    box-shadow:0 14px 32px -12px rgba(47,142,240,.8);
    text-align:center;
  }
  .btn-ghost{
    display:inline-flex; align-items:center; justify-content:center;
    padding:15px 28px; border-radius:12px; font-weight:600; font-size:.95rem;
    border:1px solid var(--line); color:var(--white);
    text-align:center;
  }

  .hero-visual{
    position:relative; aspect-ratio:1/1; border-radius:24px;
    background:radial-gradient(circle at 30% 20%, #143a63, var(--bg-1) 70%);
    border:1px solid var(--line); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .pulse-ring{
    position:absolute; border:1px solid var(--blue-glow); border-radius:50%; opacity:0;
    animation:pulse 3.2s ease-out infinite;
  }
  .pulse-ring:nth-child(2){animation-delay:1.05s;}
  .pulse-ring:nth-child(3){animation-delay:2.1s;}
  @keyframes pulse{
    0%{width:40px;height:40px;opacity:.9;}
    100%{width:340px;height:340px;opacity:0;}
  }
  .hero-pin{position:relative; z-index:2; text-align:center;}
  .hero-pin svg{width:64px;height:64px;filter:drop-shadow(0 0 22px rgba(94,195,255,.8));}
  .hero-pin p{color:var(--white); font-weight:600; margin-top:10px; font-size:.95rem;}

  @media(max-width:900px){
    .hero{grid-template-columns:1fr; padding-top:32px; gap:40px;}
    .hero h1{font-size:2.3rem;}
  }
  @media(max-width:480px){
    .hero h1{font-size:1.85rem;}
    .hero p{font-size:.98rem;}
    .hero-ctas{flex-direction:column; align-items:stretch;}
    .btn-primary,.btn-ghost{text-align:center; padding:15px 20px;}
    .hero-visual{aspect-ratio:4/3;}
  }

  /* ---------- services ---------- */
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{font-size:2.3rem;}
  @media(max-width:600px){
    .section-head{margin-bottom:34px;}
    .section-head h2{font-size:1.65rem;}
    h1,h2{word-break:break-word;}
  }
  .services-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  }
  .service{
    background:var(--bg-1); padding:34px 26px; display:flex; flex-direction:column; gap:16px;
    transition:background .25s ease;
  }
  .service:hover{background:var(--bg-2);}
  .service-icon{
    width:48px; height:48px; border-radius:12px;
    background:linear-gradient(145deg,var(--blue-2),var(--blue-1));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 22px -8px rgba(47,142,240,.7);
  }
  .service-icon svg{width:24px;height:24px;stroke:#fff;}
  .service h3{font-size:1.02rem; font-family:var(--font-body); font-weight:700;}
  .service p{font-size:.86rem; color:var(--grey);}
  @media(max-width:1080px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .services-grid{grid-template-columns:1fr;} }

  /* ---------- tarifs ---------- */
  .pricing-box{
    text-align:center; max-width:640px; margin:0 auto;
    border:1px solid var(--line); border-radius:24px; padding:64px 48px;
    background:linear-gradient(180deg,#12244a,var(--bg-1));
  }
  @media(max-width:600px){
    .pricing-box{padding:44px 24px; border-radius:18px;}
    .pricing-box h2{font-size:1.5rem;}
    .pricing-box p{font-size:.92rem;}
    .btn-primary{width:100%;}
  }
  .pricing-icon{
    width:60px; height:60px; margin:0 auto 22px; border-radius:16px;
    background:linear-gradient(145deg,var(--blue-2),var(--blue-1));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -10px rgba(47,142,240,.8);
  }
  .pricing-icon svg{width:28px;height:28px;stroke:#fff;}
  .pricing-box h2{font-size:1.9rem; margin-bottom:14px;}
  .pricing-box p{color:var(--grey); font-size:1rem; margin-bottom:30px;}
  .pricing-box p b{color:var(--blue-glow);}

  /* ---------- avis google ---------- */
  .google-score{display:flex; align-items:center; gap:12px;}
  .google-score .stars{color:#FBBC05; font-size:1rem; letter-spacing:2px;}
  .google-score span{color:var(--grey); font-size:.86rem;}
  .reviews-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  .review-card{
    background:var(--bg-1); border:1px solid var(--line); border-radius:18px;
    padding:28px 26px; display:flex; flex-direction:column; gap:14px;
  }
  .review-card .stars{color:#FBBC05; font-size:.95rem; letter-spacing:2px;}
  .review-card p{font-size:.92rem; color:var(--white); line-height:1.6;}
  .review-card .reviewer{font-size:.82rem; color:var(--grey); font-weight:600;}
  @media(max-width:900px){ .reviews-grid{grid-template-columns:1fr;} }
  @media(max-width:480px){
    .review-card{padding:22px 20px;}
  }


  /* ---------- zone ---------- */
  .zone{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    background:var(--bg-1); border:1px solid var(--line); border-radius:24px; padding:60px;
  }
  .zone-list{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .zone-list li{
    border:1px solid var(--line); padding:9px 16px; border-radius:999px;
    font-size:.86rem; color:var(--grey); display:flex; align-items:center; gap:8px;
  }
  .zone-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-glow);}
  .fee-box{
    margin-top:30px; padding:20px 22px; border-radius:14px;
    background:linear-gradient(135deg,#0f2c50,#0a1a30); border:1px solid var(--line);
    display:flex; gap:16px; align-items:flex-start;
  }
  .fee-box svg{width:26px;height:26px;flex-shrink:0;margin-top:2px;}
  .fee-box h4{font-family:var(--font-body); font-size:.94rem; margin-bottom:4px;}
  .fee-box p{font-size:.84rem; color:var(--grey);}

  .radar{
    position:relative; aspect-ratio:1/1; border-radius:50%;
    background:radial-gradient(circle, #10233f, var(--bg-0) 75%);
    border:1px solid var(--line);
  }
  .radar-ring{position:absolute; border:1px solid var(--line); border-radius:50%;}
  .radar-ring.r1{inset:14%;} .radar-ring.r2{inset:30%;} .radar-ring.r3{inset:46%;}
  .radar-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:16px; height:16px; border-radius:50%; background:var(--blue-glow);
    box-shadow:0 0 0 8px rgba(94,195,255,.15), 0 0 26px rgba(94,195,255,.9);
  }
  .radar-sweep{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 0deg, rgba(94,195,255,.32), transparent 32%);
    animation:spin 6s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .radar-town{
    position:absolute; font-size:.72rem; color:var(--white); font-weight:600;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .radar-town::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-glow);box-shadow:0 0 8px var(--blue-glow);}
  @media(max-width:900px){ .zone{grid-template-columns:1fr; padding:34px;} .radar{max-width:320px;margin:0 auto;} }
  @media(max-width:640px){
    .radar-town{display:none;}
  }
  @media(max-width:480px){
    .zone{padding:22px; border-radius:18px;}
    .zone h2{font-size:1.5rem;}
    .radar{max-width:220px;}
    .fee-box{padding:16px; flex-direction:column;}
  }

  /* ---------- trust bar ---------- */
  .trust-bar{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:0;
  }
  .trust-item{
    background:var(--bg-0); padding:30px 20px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .trust-item svg{width:26px;height:26px;color:var(--blue-glow);}
  .trust-item span{font-size:.82rem; color:var(--grey); font-weight:500;}
  @media(max-width:700px){ .trust-bar{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:480px){
    .trust-item{padding:22px 14px;}
    .trust-item span{font-size:.76rem;}
  }

  /* ---------- contact ---------- */
  .contact{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  }
  .contact h2{font-size:2.3rem; margin-bottom:8px;}
  .contact .lead{color:var(--blue-glow); font-family:var(--font-display); font-size:1.3rem; margin-bottom:26px;}
  .contact-rows{display:flex; flex-direction:column; gap:18px;}
  .contact-row{display:flex; align-items:center; gap:16px; font-size:1rem; min-width:0;}
  .contact-row a{word-break:break-word; overflow-wrap:anywhere;}
  .contact-row .ic{
    width:42px;height:42px;border-radius:11px; flex-shrink:0;
    background:var(--bg-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-row .ic svg{width:19px;height:19px;}
  .contact-visual{
    aspect-ratio:4/3; border-radius:22px; border:1px solid var(--line);
    background:radial-gradient(circle at 70% 30%, #143a63, var(--bg-1) 70%);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-visual svg{width:100px;height:100px;}
  @media(max-width:900px){ .contact{grid-template-columns:1fr;} .contact-visual{order:-1;height:220px;} }
  @media(max-width:480px){
    .contact h2{font-size:1.6rem;}
    .contact-visual{height:170px;}
  }

  footer{
    padding:26px 6vw; text-align:center; background:linear-gradient(90deg,var(--blue-1),#0b57a8);
  }
  footer p{font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.02em;}
  @media(max-width:480px){
    footer p{font-size:.8rem; letter-spacing:.01em;}
  }