*{box-sizing:border-box}
:root{
  --red:#e3262b;--red-dark:#c91d22;--navy:#142a63;--blue:#245dc3;
  --blue2:#4a80d7;--pale:#f4f8fd;--line:#dbe5f2;--text:#12265a;--muted:#60708e;
  --shadow:0 10px 28px rgba(24,56,105,.08)
}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{width:min(1760px,calc(100% - 36px));margin:0 auto}
.topbar{background:#f2f7fc;border-bottom:1px solid #e7eef8}
.topbar-grid{min-height:48px;display:grid;grid-template-columns:1fr 1.35fr 1fr 1.25fr 1.3fr;gap:18px;align-items:center;font-size:14.5px;color:#1f3971}
.topitem{display:flex;align-items:center;gap:9px;white-space:nowrap}
.topitem .ico{color:var(--red);font-size:17px}
.license{justify-self:end;font-weight:700}.license .ico{color:var(--navy)}
.navwrap{background:#fff}
.navrow{height:94px;display:flex;align-items:center;gap:42px}
.brand img{width:132px;height:auto;display:block}
.mainnav{margin-left:auto;display:flex;align-items:center;gap:44px;font-size:15px;font-weight:700;color:#172c60}
.mainnav a{position:relative;padding:36px 0 31px}
.mainnav a:hover,.mainnav a.active{color:#164fb0}
.mainnav a.active:after{content:"";position:absolute;left:0;right:0;bottom:20px;height:2px;background:var(--red);border-radius:3px}
.menu-toggle{display:none;border:0;background:#fff;font-size:28px;color:var(--navy);cursor:pointer}

.hero{min-height:405px;border-radius:16px;background:linear-gradient(115deg,#f8fbff 0%,#f2f7fd 53%,#e8f1fd 100%);overflow:hidden;display:grid;grid-template-columns:1.04fr .96fr;position:relative;border:1px solid #edf2f9}
.hero:before{content:"";position:absolute;left:-5%;right:-5%;bottom:33px;height:1px;background:linear-gradient(90deg,transparent,#7fa7e8 28%,#d92b33 70%,transparent);transform:rotate(-3deg);opacity:.75}
.hero-copy{padding:54px 36px 46px 66px;position:relative;z-index:2}
.hero h1{font-size:48px;line-height:1.08;margin:0 0 16px;font-weight:800;letter-spacing:-1.3px;color:#182d66}
.hero h1 span{color:var(--red)}
.hero-copy p{max-width:720px;color:#53627d;font-size:16.5px;line-height:1.55;margin:0 0 23px}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.btn{min-height:50px;padding:0 25px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14.5px;border:2px solid transparent;transition:.18s ease}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 7px 18px rgba(227,38,43,.18)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:#244fa7;border-color:#4d75cb}
.btn-secondary:hover{background:#f4f7ff}
.hero-visual{position:relative;min-height:405px;overflow:hidden}
.mountains{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-logo{position:absolute;z-index:2;width:min(42%,330px);left:17%;top:34px;filter:drop-shadow(0 5px 10px rgba(25,45,80,.08))}

.how{padding:38px 0 32px}
.section-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;margin-bottom:25px}
.section-head span{height:1px;background:#cad9ef}
.section-head h2{font-size:27px;margin:0;color:#13285e}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.step{display:grid;grid-template-columns:86px 30px 1fr;align-items:start;gap:10px;min-height:132px}
.step-icon{width:80px;height:80px;border-radius:50%;background:#edf4ff;color:#2462c9;display:grid;place-items:center;font-size:34px;border:1px solid #e2ebfb}
.step-num{width:28px;height:28px;border-radius:50%;background:#eef5ff;color:#2462c9;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:1px}
.step h3{font-size:16px;margin:1px 0 9px;color:#182e67}
.step p{font-size:13.8px;line-height:1.5;color:#5c6b86;margin:0}

.contacts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.contact{min-height:98px;display:flex;align-items:center;gap:14px;padding:21px 28px;position:relative}
.contact:not(:last-child):after{content:"";position:absolute;right:0;top:20px;bottom:20px;width:1px;background:#cddbf0}
.contact-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;flex:0 0 auto}
.phone,.pin{background:#205aba}.whatsapp{background:#11b846}.email{background:#e3262b}
.contact small{display:block;color:#697792;font-size:12px;margin-bottom:4px}
.contact strong{display:block;font-size:16px;line-height:1.28;color:#172d65}

.values{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff;overflow:hidden}
.values article{display:flex;gap:15px;align-items:flex-start;padding:22px 26px;position:relative}
.values article:not(:last-child):after{content:"";position:absolute;right:0;top:16px;bottom:16px;width:1px;background:#d5e0f1}
.value-icon{width:52px;height:52px;border-radius:50%;background:#edf4ff;color:#1553ba;display:grid;place-items:center;font-size:27px;font-weight:800;flex:0 0 auto}
.values h3{font-size:14.5px;margin:0 0 5px;color:#152b62}
.values p{font-size:13.2px;line-height:1.42;color:#52627d;margin:0}

.notice{margin-top:14px;min-height:62px;border-radius:9px;background:#f2f6fc;border:1px solid #e3ebf6;display:flex;align-items:center;gap:12px;padding:13px 22px}
.notice-icon{width:28px;height:28px;border-radius:50%;background:#1e5abb;color:#fff;display:grid;place-items:center;font-weight:800}
.notice p{margin:0;font-size:13.5px;color:#5e6f8d}.notice strong{font-size:14.5px;color:#19336d}

.footer{margin-top:14px;background:#f8fafc;border-top:1px solid #e8eef5;color:#60708e}
.footer-grid{min-height:78px;display:grid;grid-template-columns:1.2fr 1fr 1.35fr auto;align-items:center;gap:30px;font-size:12px;line-height:1.45}
.footer-links{display:flex;gap:28px;justify-content:center}.footer-links a:hover{color:var(--blue)}
.to-top{width:50px;height:50px;border-radius:50%;border:1px solid #bccce2;display:grid;place-items:center;font-size:22px;color:#274d95}

@media(max-width:1100px){
  .topbar-grid{grid-template-columns:repeat(3,1fr)}.license{justify-self:start}
  .navrow{height:auto;min-height:78px}.mainnav{gap:22px;font-size:13px}
  .hero{grid-template-columns:1fr .8fr}.hero h1{font-size:36px}.hero-copy{padding-left:34px}
  .steps{grid-template-columns:repeat(2,1fr)}.contacts,.values{grid-template-columns:repeat(2,1fr)}
  .contact:nth-child(2):after,.values article:nth-child(2):after{display:none}
}
@media(max-width:760px){
  .container{width:min(100% - 28px,1420px)}
  .topbar-grid{grid-template-columns:1fr 1fr;gap:8px 16px;padding:8px 0}.topitem{font-size:11px;white-space:normal}
  .navrow{position:relative;gap:15px}.brand img{width:105px}.menu-toggle{display:block;margin-left:auto}
  .mainnav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border:1px solid #e7eef7;border-radius:12px;box-shadow:var(--shadow);z-index:20;padding:10px 18px;flex-direction:column;align-items:stretch;gap:0}
  .mainnav.open{display:flex}.mainnav a{padding:13px 0}.mainnav a.active:after{bottom:7px;right:auto;width:36px}
  .hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:30px 22px 24px}.hero h1{font-size:34px}.hero-copy p{font-size:14.5px}
  .hero-visual{min-height:230px}.hero-logo{width:230px;left:8%;top:10px}
  .steps{grid-template-columns:1fr}.step{grid-template-columns:66px 28px 1fr}.step-icon{width:62px;height:62px}
  .contacts,.values{grid-template-columns:1fr}.contact:not(:last-child):after,.values article:not(:last-child):after{right:18px;left:18px;top:auto;bottom:0;width:auto;height:1px}
  .footer-grid{grid-template-columns:1fr;padding:22px 0;gap:12px;text-align:center}.footer-links{flex-direction:column;gap:5px}.to-top{justify-self:center}
}

/* V1.1 visual refinement only */
.brand img{background:transparent!important}
.hero-logo{background:transparent!important}
.hero-visual{background:linear-gradient(110deg,rgba(255,255,255,.10),rgba(228,239,254,.32))}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:780px}
.hero:after{
  content:"";position:absolute;right:0;top:0;width:55%;height:100%;
  background:radial-gradient(circle at 72% 35%,rgba(255,255,255,.55),transparent 54%);
  pointer-events:none
}
.contacts,.values,.notice{box-shadow:0 10px 30px rgba(24,56,105,.06)}
.contact,.values article{transition:background .18s ease}
.contact:hover,.values article:hover{background:#f8fbff}
@media(min-width:1400px){
  .navrow{height:104px}
  .brand img{width:146px}
  .mainnav{gap:52px;font-size:15.5px}
}
@media(max-width:1100px){
  .container{width:min(100% - 30px,1760px)}
}
@media(max-width:760px){
  .hero{min-height:auto}
  .hero-visual{min-height:250px}
  .hero-logo{width:210px;left:9%;top:18px}
}

/* V1.3: realistic mountain photo in hero only */
.hero-visual{background:linear-gradient(90deg,#edf5ff 0%,#e7f0fb 16%,#dbe9fa 100%)}
.mountains{object-fit:cover;object-position:center 42%;filter:saturate(.82) contrast(.98) brightness(1.06)}
.hero-visual:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(244,249,255,.78) 0%,rgba(244,249,255,.30) 24%,rgba(244,249,255,.02) 62%,rgba(21,56,108,.08) 100%);pointer-events:none}
.hero-logo{z-index:3}


/* V1.4 — only realistic mountain cleanup/blend */
.hero-visual{
  isolation:isolate;
}
.hero-visual .mountains{
  object-fit:cover;
  object-position:center 44%;
  filter:saturate(.82) contrast(.97) brightness(1.08);
}
/* Softly dissolve the left edge of the photo into the pale hero background. */
.hero-visual:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(247,250,255,1) 0%,
      rgba(247,250,255,.93) 6%,
      rgba(247,250,255,.72) 15%,
      rgba(247,250,255,.34) 27%,
      rgba(247,250,255,.08) 39%,
      rgba(247,250,255,0) 52%
    );
}
.hero-visual:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(235,244,255,.12) 0%,
      rgba(238,246,255,.02) 58%,
      rgba(22,55,102,.05) 100%
    );
}
.hero-logo{
  z-index:4;
}


/* V1.5 — approved mountain composition only */
.hero-visual .mountains{
  object-fit:cover;
  object-position:center center;
  filter:none;
}

/* The background asset already contains the left atmospheric fade.
   Keep only a very light final blend at the seam. */
.hero-visual:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(247,250,255,.78) 0%,
    rgba(247,250,255,.38) 13%,
    rgba(247,250,255,.10) 27%,
    rgba(247,250,255,0) 40%
  );
}
.hero-visual:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(245,250,255,.08) 0%,
    rgba(245,250,255,0) 64%,
    rgba(20,57,110,.025) 100%
  );
}
.hero-logo{
  z-index:4;
}


/* V1.6 — exact approved hero on desktop.
   Nothing below the hero is changed. */
.hero-desktop-hotspots{display:none}

@media (min-width: 901px){
  .hero{
    min-height:0 !important;
    aspect-ratio:1543 / 381;
    display:block !important;
    position:relative;
    overflow:hidden;
    background:
      url("assets/hero-approved.png") center center / 100% 100% no-repeat !important;
    border:0 !important;
    border-radius:16px;
  }

  /* The approved image already contains all hero text, logo, mountains and visible buttons. */
  .hero > .hero-copy,
  .hero > .hero-visual{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .hero:before,
  .hero:after{
    display:none !important;
  }

  /* Keep the two visible buttons in the image actually clickable. */
  .hero-desktop-hotspots{
    display:block;
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
  }

  .hero-hotspot{
    position:absolute;
    display:block;
    pointer-events:auto;
    cursor:pointer;
    background:transparent;
    border-radius:8px;
  }

  /* Coordinates are proportional to the approved 1543×381 hero image. */
  .hero-hotspot-cabinet{
    left:4.05%;
    top:76.1%;
    width:17.1%;
    height:12.2%;
  }

  .hero-hotspot-consult{
    left:21.85%;
    top:76.1%;
    width:16.2%;
    height:12.2%;
  }

  .hero-hotspot:focus-visible{
    outline:3px solid rgba(36,93,195,.55);
    outline-offset:2px;
  }
}

/* On tablet/mobile retain the live responsive HTML version. */
@media (max-width:900px){
  .hero-desktop-hotspots{display:none!important}
}


/* =========================================================
   V1.7 SHARP HERO
   Desktop only: retain the approved hero image as the visual
   background, but restore the left headline, paragraph and
   buttons as live HTML/CSS so they render sharply.
   Everything outside .hero is untouched.
   ========================================================= */

@media (min-width: 901px){

  .hero{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    aspect-ratio:1543 / 381;
    overflow:hidden !important;
    border:0 !important;
    border-radius:16px !important;
    background:
      url("assets/hero-approved.png") center center / 100% 100% no-repeat !important;
  }

  /* Hide the separate visual layer: the approved background already
     contains the exact mountains + large logo composition. */
  .hero > .hero-visual{
    display:none !important;
  }

  /* Old invisible V1.6 hotspots are no longer needed because the real
     HTML buttons below are clickable. */
  .hero > .hero-desktop-hotspots{
    display:none !important;
  }

  /* Cover ONLY the baked-in left text/buttons from the approved image.
     This keeps the right mountains/logo untouched and preserves the
     visual transition toward the centre. */
  .hero:before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:55% !important;
    height:auto !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(
        90deg,
        rgba(247,250,255,1) 0%,
        rgba(247,250,255,1) 76%,
        rgba(247,250,255,.97) 84%,
        rgba(247,250,255,.82) 91%,
        rgba(247,250,255,.42) 97%,
        rgba(247,250,255,0) 100%
      ) !important;
  }

  /* Keep the original fine decorative lower line subtle. */
  .hero:after{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    z-index:3 !important;
    left:-2% !important;
    width:58% !important;
    right:auto !important;
    bottom:5.6% !important;
    top:auto !important;
    height:1px !important;
    transform:rotate(-2.2deg) !important;
    transform-origin:left center !important;
    opacity:.62 !important;
    pointer-events:none !important;
    background:linear-gradient(
      90deg,
      rgba(65,115,199,0),
      rgba(83,133,212,.52) 45%,
      rgba(220,43,49,.52) 100%
    ) !important;
  }

  /* Live sharp content aligned to the approved image. */
  .hero > .hero-copy{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    display:flex !important;
    position:absolute !important;
    z-index:10 !important;
    left:3.65% !important;
    top:12.2% !important;
    width:43.5% !important;
    height:auto !important;
    padding:0 !important;
    justify-content:flex-start !important;
  }

  .hero h1{
    margin:0 0 2.7% 0 !important;
    max-width:none !important;
    color:#182d66 !important;
    font-size:clamp(28px,2.72vw,46px) !important;
    line-height:1.075 !important;
    font-weight:800 !important;
    letter-spacing:-1.05px !important;
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
  }

  .hero h1 span{
    color:#e3262b !important;
  }

  .hero-copy p{
    max-width:94% !important;
    margin:0 0 3.5% 0 !important;
    color:#53627d !important;
    font-size:clamp(12px,.92vw,15.5px) !important;
    line-height:1.48 !important;
    font-weight:400 !important;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }

  .hero-actions{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:1.25vw !important;
    align-items:center !important;
  }

  .hero .btn{
    min-height:clamp(39px,3vw,48px) !important;
    padding:0 clamp(17px,1.45vw,24px) !important;
    border-radius:7px !important;
    font-size:clamp(11.5px,.83vw,14px) !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    line-height:1 !important;
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
  }

  .hero .btn-primary{
    background:#e3262b !important;
    color:#fff !important;
    border-color:#e3262b !important;
    box-shadow:0 7px 18px rgba(227,38,43,.20) !important;
  }

  .hero .btn-secondary{
    background:#fff !important;
    color:#244fa7 !important;
    border:2px solid #3263c2 !important;
    box-shadow:none !important;
  }
}

/* Mobile/tablet remains exactly the live responsive version already present. */


/* =========================================================
   V1.8 — TOP INFO BAR ONLY
   - Times New Roman, 12 pt, bold
   - 5 items distributed evenly
   - first item aligned with the left edge of the main logo
   Nothing else is changed.
   ========================================================= */
@media (min-width:1101px){
  .topbar-grid{
    grid-template-columns:repeat(5,1fr) !important;
    gap:0 !important;
    min-height:48px !important;
    font-family:"Times New Roman", Times, serif !important;
    font-size:12pt !important;
    font-weight:700 !important;
    line-height:1.15 !important;
  }

  .topbar-grid .topitem{
    font-family:"Times New Roman", Times, serif !important;
    font-size:12pt !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    justify-self:center !important;
  }

  /* Align the first text block vertically with the logo below:
     same left boundary as the brand/logo area. */
  .topbar-grid .topitem:first-child{
    justify-self:start !important;
  }

  .topbar-grid .topitem:last-child{
    justify-self:end !important;
  }

  .topbar-grid .license{
    justify-self:start !important;
    font-weight:700 !important;
  }

  .topbar-grid .topitem .ico{
    font-size:15px !important;
  }
}