:root{
    --blue-1:#0F3D73;
    --blue-2:#1B5FA8;
    --blue-3:#2E7BC4;
    --blue-light:#EAF3FB;
    --pink:#EC5A9C;
    --pink-dark:#D13F81;
    --white:#FFFFFF;
    --ink:#152A40;
    --ink-soft:#5A6B7D;
    --line:rgba(21,42,64,0.1);
    --green:#25D366;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white); color:var(--ink);
    font-family:'Inter', sans-serif; line-height:1.55;
  }
  h1,h2,h3{ font-family:'Poppins', sans-serif; font-weight:700; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }

  header{
    position:sticky; top:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 6vw;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo-icon{ width:42px; height:42px; }
  .logo-text{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem; color:var(--blue-1); line-height:1.15; }
  .logo-text small{ display:block; font-size:0.68rem; font-weight:500; color:var(--ink-soft); }

  nav{ display:flex; align-items:center; gap:1.4rem; }
  nav a.nav-link{ text-decoration:none; color:var(--ink-soft); font-size:0.92rem; font-weight:500; }
  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:0.88rem;
    padding:0.75rem 1.4rem; border-radius:100px; text-decoration:none;
    display:inline-flex; align-items:center; gap:0.5rem; border:none; cursor:pointer;
    transition:transform 0.18s, box-shadow 0.18s;
  }
  .btn-whatsapp{ background:var(--green); color:var(--white); box-shadow:0 4px 14px rgba(37,211,102,0.35); }
  .btn-whatsapp:hover{ transform:translateY(-2px); }
  .btn-call{ background:var(--blue-2); color:var(--white); }
  .btn-call:hover{ transform:translateY(-2px); background:var(--blue-1); }
  .btn-pink{ background:var(--pink); color:var(--white); box-shadow:0 4px 14px rgba(236,90,156,0.35); }
  .btn-pink:hover{ transform:translateY(-2px); background:var(--pink-dark); }
  .btn-outline{ background:transparent; color:var(--blue-2); border:1.5px solid var(--blue-2); }

  .service-strip{
    background:linear-gradient(90deg, var(--blue-1), var(--blue-3));
    color:var(--white); text-align:center; font-size:0.85rem; font-weight:600;
    padding:0.55rem; letter-spacing:0.02em;
  }

  .hero{
    position:relative;
    background:linear-gradient(135deg, var(--blue-1), var(--blue-3) 70%);
    padding:5vw 6vw 6vw; overflow:hidden;
  }
  .hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:4vw; align-items:center; max-width:1300px; margin:0 auto; }
  .badge-24-7{
    display:inline-flex; align-items:center; gap:0.5rem;
    background:rgba(255,255,255,0.15); backdrop-filter:blur(6px);
    color:var(--white); font-size:0.82rem; font-weight:600;
    padding:0.5rem 1rem; border-radius:100px; margin-bottom:1.4rem;
    border:1px solid rgba(255,255,255,0.3);
  }
  .hero h1{ color:var(--white); font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.12; margin-bottom:1.2rem; }
  .hero h1 span{ color:#FFD1E8; }
  .hero p.lead{ color:rgba(255,255,255,0.88); font-size:1.05rem; max-width:460px; margin-bottom:2rem; }
  .hero-cta{ display:flex; gap:0.9rem; flex-wrap:wrap; }

  .hero-photo{
    position:relative;
    border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(15,61,115,0.4);
    border:4px solid rgba(255,255,255,0.25);
    aspect-ratio:4/3;
  }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; }
  .hero-photo img.slide{
    position:absolute; top:0; left:0;
    opacity:0; transition:opacity 1.1s ease-in-out;
  }
  .hero-photo img.slide.active{ opacity:1; }
  .hero-photo-dots{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:2;
  }
  .hero-photo-dots .dot{
    width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.45);
    transition:background 0.3s, transform 0.3s; cursor:pointer;
  }
  .hero-photo-dots .dot.active{ background:#fff; transform:scale(1.25); }

  .contact-strip{
    max-width:1000px; margin:-40px auto 0; position:relative; z-index:5;
    background:var(--white); border-radius:18px; box-shadow:0 16px 50px rgba(15,61,115,0.18);
    padding:1.6rem 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem;
  }
  .contact-strip .info{ display:flex; align-items:center; gap:0.9rem; }
  .avatar-dot{
    width:52px; height:52px; border-radius:50%; background:var(--blue-light);
    display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--blue-2); font-weight:700;
  }
  .contact-strip h4{ font-size:1.05rem; margin-bottom:0.15rem; }
  .contact-strip p{ font-size:0.85rem; color:var(--ink-soft); }
  .contact-btns{ display:flex; gap:0.7rem; }

  .how{ padding:7vw 6vw 6vw; max-width:1200px; margin:0 auto; }
  .section-head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; }
  .section-eyebrow{ font-size:0.82rem; font-weight:700; color:var(--pink-dark); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.7rem; }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); color:var(--blue-1); }

  .steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  .step-card{
    background:var(--blue-light); border-radius:16px; padding:1.8rem 1.5rem; text-align:center;
    transition:transform 0.2s;
  }
  .step-card:hover{ transform:translateY(-4px); }
  .step-icon{
    width:56px; height:56px; border-radius:50%; background:var(--white); margin:0 auto 1rem;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
    box-shadow:0 6px 16px rgba(15,61,115,0.12);
  }
  .step-card h3{ font-size:1rem; color:var(--blue-1); margin-bottom:0.5rem; }
  .step-card p{ font-size:0.86rem; color:var(--ink-soft); }

  .trust-band{
    background:var(--blue-1); padding:3rem 6vw; display:flex; justify-content:center; gap:3.5rem; flex-wrap:wrap;
  }
  .trust-item{ text-align:center; color:var(--white); }
  .trust-item .num{ font-family:'Poppins',sans-serif; font-size:2rem; font-weight:800; color:#FFD1E8; }
  .trust-item .lbl{ font-size:0.82rem; color:rgba(255,255,255,0.8); margin-top:0.2rem; }

  .booking{ padding:6vw; background:var(--blue-light); }
  .wizard{ max-width:680px; margin:0 auto; background:var(--white); border-radius:20px; box-shadow:0 24px 60px rgba(15,61,115,0.15); overflow:hidden; }
  .wizard-head{ padding:2rem 2.2rem 0; }
  .wizard-head h2{ font-size:1.5rem; color:var(--blue-1); margin-bottom:0.4rem; }
  .wizard-head p{ color:var(--ink-soft); font-size:0.9rem; margin-bottom:1.6rem; }
  .progress-track{ display:flex; gap:6px; padding:0 2.2rem; margin-bottom:1.8rem; }
  .progress-seg{ flex:1; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
  .progress-seg .fill{ height:100%; width:0%; background:var(--pink); transition:width 0.4s ease; }
  .wizard-body{ padding:0 2.2rem 2.2rem; min-height:280px; }
  .step-panel{ display:none; }
  .step-panel.active{ display:block; animation:fadeIn 0.35s ease; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
  .step-label{ font-size:0.78rem; font-weight:700; color:var(--pink-dark); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1.2rem; }
  .field{ margin-bottom:1.1rem; }
  .field label{ display:block; font-size:0.86rem; font-weight:600; margin-bottom:0.4rem; }
  .field input, .field select, .field textarea{
    width:100%; padding:0.8rem 1rem; border:1.5px solid var(--line); border-radius:10px;
    font-family:'Inter',sans-serif; font-size:0.94rem; background:#FAFBFD;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue-2); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .hint{ font-size:0.76rem; color:var(--ink-soft); margin-top:0.3rem; }
  .btn-location{
    margin-top:0.6rem; background:var(--blue-light); color:var(--blue-2); border:1.5px solid var(--blue-3);
    font-family:'Inter',sans-serif; font-weight:600; font-size:0.84rem; padding:0.6rem 1rem;
    border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem;
    transition:background 0.18s;
  }
  .btn-location:hover{ background:#DCEAFB; }
  .btn-location:disabled{ opacity:0.6; cursor:default; }
  .err{ font-size:0.76rem; color:#C0392B; margin-top:0.3rem; display:none; }

  .upload-zone{ border:2px dashed var(--blue-3); border-radius:14px; padding:2rem 1.2rem; text-align:center; cursor:pointer; background:var(--blue-light); }
  .upload-zone:hover, .upload-zone.drag{ background:#DCEAFB; }
  .upload-zone .icon{ font-size:1.7rem; margin-bottom:0.6rem; }
  .upload-zone p{ font-size:0.88rem; color:var(--ink-soft); }
  .upload-preview{ margin-top:1rem; display:none; align-items:center; gap:0.8rem; background:var(--blue-light); padding:0.7rem 1rem; border-radius:10px; }
  .upload-preview img{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
  .upload-preview .fname{ font-size:0.84rem; font-weight:600; }
  .upload-preview .fsize{ font-size:0.74rem; color:var(--ink-soft); }
  .upload-preview .remove{ margin-left:auto; background:none; border:none; color:#C0392B; cursor:pointer; font-size:0.84rem; font-weight:600; }

  .test-chips{ display:flex; flex-wrap:wrap; gap:0.6rem; }
  .chip{ padding:0.55rem 1rem; border:1.5px solid var(--line); border-radius:100px; font-size:0.84rem; cursor:pointer; background:#FAFBFD; }
  .chip.selected{ background:var(--blue-2); border-color:var(--blue-2); color:var(--white); }

  .review-box{ background:var(--blue-light); border-radius:12px; padding:1.2rem 1.4rem; margin-bottom:1rem; }
  .review-row{ display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid var(--line); font-size:0.88rem; }
  .review-row:last-child{ border-bottom:none; }
  .review-row .rlabel{ color:var(--ink-soft); }
  .review-row .rvalue{ font-weight:600; text-align:right; }

  .wizard-nav{ display:flex; justify-content:space-between; padding:1.4rem 2.2rem 2rem; border-top:1px solid var(--line); }
  .btn-nav{ font-weight:600; font-size:0.88rem; padding:0.75rem 1.5rem; border-radius:100px; cursor:pointer; border:none; }
  .btn-back{ background:transparent; color:var(--ink-soft); }
  .btn-back:disabled{ opacity:0; pointer-events:none; }
  .btn-forward{ background:var(--pink); color:var(--white); }
  .btn-forward:hover{ background:var(--pink-dark); }

  .confirm-screen{ text-align:center; padding:2rem 0 1rem; }
  .confirm-icon{ width:64px; height:64px; border-radius:50%; background:#E7F9EE; color:var(--green); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 1.2rem; }
  .confirm-screen h3{ font-size:1.35rem; color:var(--blue-1); margin-bottom:0.6rem; }
  .confirm-screen p{ color:var(--ink-soft); font-size:0.9rem; max-width:400px; margin:0 auto 1.5rem; }
  .attach-hint{ background:var(--blue-light); color:var(--blue-1)!important; border-radius:10px; padding:0.7rem 1rem; font-size:0.82rem!important; max-width:440px!important; text-align:left; }

  .zones{ padding:6vw; max-width:1000px; margin:0 auto; text-align:center; }
  .zone-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.7rem; margin-top:1.8rem; }
  .zone-pill{ padding:0.55rem 1.1rem; background:var(--blue-light); border-radius:100px; font-size:0.88rem; color:var(--blue-1); font-weight:500; }

  .final-cta{
    background:linear-gradient(135deg, var(--pink), var(--pink-dark));
    padding:4.5rem 6vw; text-align:center;
  }
  .final-cta h2{ color:var(--white); font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:0.8rem; }
  .final-cta p{ color:rgba(255,255,255,0.9); margin-bottom:1.8rem; }
  .final-btns{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

  footer{ padding:2.5rem 6vw; background:var(--ink); color:rgba(255,255,255,0.65); text-align:center; font-size:0.84rem; }
  footer .accent{ color:#FFD1E8; }

  .float-whatsapp{
    position:fixed; bottom:24px; right:24px; z-index:200;
    width:58px; height:58px; border-radius:50%; background:var(--green);
    display:flex; align-items:center; justify-content:center; color:white; font-size:1.7rem;
    box-shadow:0 8px 24px rgba(37,211,102,0.5); text-decoration:none;
    animation:floatPulse 2.5s infinite;
  }
  @keyframes floatPulse{ 0%,100%{ box-shadow:0 8px 24px rgba(37,211,102,0.5);} 50%{ box-shadow:0 8px 30px rgba(37,211,102,0.8);} }

  @media (max-width:820px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-photo{ order:-1; }
    .steps-grid{ grid-template-columns:1fr 1fr; }
    .trust-band{ gap:2rem; }
    .field-row{ grid-template-columns:1fr; }
    nav .nav-link{ display:none; }
    .contact-strip{ flex-direction:column; align-items:flex-start; }
  }