*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --sky:#00c8f0;
  --sky2:#00b0d8;
  --sky3:#0090b8;
  --sky4:#006f90;
  --sky5:#005070;
  --pink:#ff1a8c;
  --pink2:#e0007a;
  --pink3:#b8006a;
  --nav-h:65px;
}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:var(--sky4);color:#fff;overflow-x:hidden}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--sky5)}
::-webkit-scrollbar-thumb{background:var(--pink);border-radius:3px}

/* ══ NAV ══ */
nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:var(--sky);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;z-index:1000;
  box-shadow:0 3px 20px rgba(0,0,0,0.3);
}
.brand{text-decoration:none;font-size:1.5rem;font-weight:800;letter-spacing:1px}
.brand .m{color:#fff}.brand .t{color:var(--pink)}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{
  color:#fff;text-decoration:none;
  font-size:1rem;font-weight:600;
  position:relative;padding:6px 12px;
  border-radius:6px;
  border-top:2px solid transparent;
  transition:color .25s, background .25s, font-size .25s, border-color .25s;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--pink);
  background:#fff;
  font-size:1.08rem;
  border-top:2px solid var(--pink);
}

/* Hamburger with bg */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:var(--pink);
  padding:8px 10px;border-radius:7px;
  transition:background .3s,transform .2s;
}
.hamburger:hover{background:var(--pink2);transform:scale(1.08)}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px;display:block}
@media(max-width:768px){
  .nav-links{display:flex}
  .hamburger{display:none}
}
/* ══ HERO ══ */
#home{
  position:relative;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.4s ease}
.slide.active{opacity:1}
.slide::after{display:none}
.s1{background-image:url('../img/mi.png?width=1600')}
.s2{background-image:url('../img/mm.jpeg?width=1600')}
.s3{background-image:url('../img/mtk.jpeg?width=1600')}
.hero-text{
  position:relative;z-index:2;text-align:center;
  padding:0 1rem;margin-top:-40px;
}
.hero-text h1{font-size:clamp(2rem,5.5vw,3.8rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:.5rem;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
.hero-text h1 .pink{color:var(--pink)}
.hero-text .sub{font-size:1rem;color:var(--sky);font-weight:600;letter-spacing:.5px}
.dots{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:3}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:background .3s}
.dot.active{background:var(--pink)}

/* ══ BOOKING + WELCOME same row, form overlaps banner ══ */
.hero-bottom{
  position:relative;
  z-index:10;
  padding:0 5%;
  background:var(--sky3);
  display:grid;
  grid-template-columns:420px 1fr;
  gap:2.5rem;
  align-items:start;
}
@media(max-width:900px){.hero-bottom{grid-template-columns:1fr}}

/* Only the booking box overlaps the banner */
.booking-box{
  margin-top:-70px;
}

/* Welcome Content sits in normal flow beside form */
.welcome-content{padding-top:1.8rem;padding-bottom:2rem}
.welcome-content .sec-label{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:.4rem}
.welcome-content h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;color:#fff;margin-bottom:.8rem}
.welcome-content p{font-size:.9rem;line-height:1.85;color:rgba(255,255,255,.82);margin-bottom:.7rem}

/* Booking Box styling */
.booking-box{
  background:var(--sky2);
  border:3px solid var(--pink);
  border-radius:14px;
  padding:1.6rem 1.8rem;
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
}
.booking-box h3{font-size:1rem;font-weight:700;color:var(--pink);margin-bottom:1rem;letter-spacing:.5px}
.booking-box input,.booking-box select{
  width:100%;padding:.7rem 1rem;
  background:var(--sky3);border:1.5px solid var(--sky);border-radius:8px;
  font-family:'Poppins',sans-serif;font-size:.88rem;color:#fff;
  outline:none;margin-bottom:.8rem;display:block;transition:border-color .3s;
}
.booking-box input::placeholder{color:rgba(255,255,255,.6)}
.booking-box input:focus,.booking-box select:focus{border-color:var(--pink)}
.booking-box select option{background:var(--sky3)}
.btn-pink{width:100%;padding:.78rem;background:var(--pink);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:background .3s,transform .2s}
.btn-pink:hover{background:var(--pink2);transform:translateY(-2px)}


/* ══ CHANGE 5: WHY CHOOSE after welcome, 2 cols with icons ══ */
#why{background:var(--sky3);padding:4rem 6%}
.why-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.2rem;
}
@media(max-width:600px){.why-grid{grid-template-columns:1fr}}
.why-item{
  display:flex;align-items:flex-start;gap:.9rem;
  background:var(--sky2);border-radius:10px;
  padding:1.1rem 1.2rem;
  border-left:4px solid var(--pink);
  transition:transform .3s,box-shadow .3s;
}
.why-item:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,0.25)}
.why-item .wi-icon{
  font-size:1.5rem;min-width:38px;height:38px;
  background:var(--pink);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.why-item h4{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:.15rem}
.why-item p{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.5}

/* ══ SECTIONS ══ */
section.full{padding:4.5rem 6%}
.sec-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:.4rem}
.sec-title.pink-t{color:var(--pink)}
.sec-title.sky-t{color:var(--sky)}
.divider{width:55px;height:3px;border-radius:2px;margin:0 0 2rem}
.divider.pink{background:var(--pink)}
.divider.sky{background:var(--sky)}
.divider.center{margin:0 auto 2rem}

/* ══ CHANGE 2: SERVICES — blue on hover, icons pink + shake ══ */
#services{background:#ffffff}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem}
.s-card{
  background:var(--pink3);border:2px solid rgba(255,255,255,.1);
  border-radius:12px;padding:2rem 1.4rem;text-align:center;
  transition:background .35s,border-color .35s,transform .3s,box-shadow .3s;
}
.s-card:hover{
  background:var(--sky2);
  border-color:var(--sky);
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(0,0,0,0.3);
}
.s-icon{
  width:62px;height:62px;border-radius:50%;
  background:var(--sky);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin:0 auto .9rem;
  transition:background .35s;
}
.s-card:hover .s-icon{
  background:var(--pink);
  animation:iconShake .4s ease;
}
@keyframes iconShake{
  0%{transform:rotate(0)}
  20%{transform:rotate(-8deg)}
  40%{transform:rotate(8deg)}
  60%{transform:rotate(-5deg)}
  80%{transform:rotate(5deg)}
  100%{transform:rotate(0)}
}
.s-card h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.s-card p{font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.82)}

/* ══ CHANGE 3: TARIFF — canvas particle effect on hover ══ */
#tariff{background:var(--sky5);text-align:center}
.tariff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}
@media (max-width: 992px){.tariff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.tariff-grid{grid-template-columns:1fr}}
.t-card{
  background:var(--sky3);border:2px solid rgba(0,200,240,.2);
  border-radius:14px;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
  position:relative;
}
.t-card:hover{transform:translateY(-6px);box-shadow:0 14px 35px rgba(255,26,140,.3)}
.t-img-wrap{position:relative;overflow:hidden;height:190px}
.t-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.t-card:hover .t-img-wrap img{transform:scale(1.08)}
.t-img-wrap canvas{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.t-card:hover .t-img-wrap canvas{opacity:1}
.t-body{padding:1.4rem;background:var(--sky3)}
.t-body h3{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.2rem}
.t-body .sub{font-size:.8rem;color:rgba(255,255,255,.65);margin-bottom:.8rem;line-height:1.5}
.tariff-detail{display:grid;gap:12px;margin-bottom:1rem}
.tariff-block{
  padding:12px 14px;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;background:rgba(255,255,255,.92);text-align:left
}
.tariff-block h4{margin:0 0 8px;font-size:.95rem;font-weight:600;color:var(--pink)}
.tariff-block p{margin:0;font-size:.88rem;line-height:1.7;color:#333}
.t-body .rate{font-size:2rem;font-weight:800;color:#fff;text-shadow:0 0 6px rgba(255,255,255,0.8),0 0 4px rgba(255,26,140,0.8);-webkit-text-stroke:1px rgba(255,26,140,0.9);margin-bottom:1rem;}
.t-body .rate span{font-size:.85rem;color:rgba(255,255,255,.85);font-weight:400}
.btn-sky-out{
  display:inline-block;padding:.55rem 1.6rem;
  border:2px solid var(--sky);border-radius:7px;color:var(--sky);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
  transition:background .3s,color .3s;
}
.btn-sky-out:hover{background:var(--sky);color:var(--sky5)}

/* ══ CHANGE 4: CONTACT — address+phone LEFT, form RIGHT ══ */
#contact{background:var(--pink3)}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:start;
}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* Left: address + phone */
.addr-block h2{font-size:1.5rem;font-weight:800;color:var(--sky);margin-bottom:1.6rem}
.addr-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem}
.addr-item .ai-icon{
  width:44px;height:44px;min-width:44px;
  background:var(--sky);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.addr-item .ai-text strong{display:block;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--sky);margin-bottom:.3rem}
.addr-item .ai-text span{font-size:.93rem;color:rgba(255,255,255,.85);line-height:1.7}

/* Right: form */
.contact-form-box{background:var(--sky);border-radius:14px;padding:2rem}
.contact-form-box h3{font-size:1.1rem;font-weight:700;color:var(--pink);margin-bottom:1.2rem}
.contact-form-box input,.contact-form-box textarea{
  width:100%;padding:.8rem 1rem;
  background:var(--sky2);border:1.5px solid rgba(255,255,255,.2);
  border-radius:8px;font-family:'Poppins',sans-serif;font-size:.9rem;color:#fff;
  outline:none;margin-bottom:.9rem;display:block;transition:border-color .3s;
}
.contact-form-box input::placeholder,.contact-form-box textarea::placeholder{color:rgba(255,255,255,.6)}
.contact-form-box input:focus,.contact-form-box textarea:focus{border-color:var(--pink)}
.contact-form-box textarea{height:120px;resize:vertical}
.btn-send{width:100%;padding:.8rem;background:var(--pink);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:background .3s,transform .2s}
.btn-send:hover{background:var(--pink2);transform:translateY(-2px)}


     
        #inner-hero { position:relative; height:40vh; display:flex; align-items:center; justify-content:center; background:url('img/mc.jpeg') center/cover no-repeat; margin-top:var(--nav-h); }
        .hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
        .hero-bottom.right-form { grid-template-columns: 1fr 420px; }
        @media(max-width:900px){ .hero-bottom.right-form { grid-template-columns: 1fr; } .booking-box { order: -1; } }

  /* ══ FOOTER & FLOATS ══ */
  footer {
    flex-shrink: 0;
    background: var(--sky5);
    border-top: 2px solid var(--pink);
    text-align: center;
    padding: 1.5rem 1rem; /* Balanced padding */
    font-size: .85rem;
    color: rgba(255,255,255,.7);
  }
  .float-wa{position:fixed; bottom:100px; left:20px; background:#25d366; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:900;}

  /* ══ MOBILE MENU SYSTEM (BOTTOM-UP) ══ */
  @media (max-width: 768px) {
      nav .nav-links { display: none; }
      nav { justify-content: center; }
      .hero-bottom { grid-template-columns: 1fr; }
      .booking-box { order: -1; margin-top: -30px; }
      .contact-grid { grid-template-columns: 1fr; }

      .mobile-menu-sheet {
          position: fixed; bottom: -100%; left: 0; right: 0;
          background: #ffffff; border-radius: 25px 25px 0 0;
          padding: 30px 20px 100px 20px; z-index: 10001;
          transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
          box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
      }
      .mobile-menu-sheet.active { bottom: 0; }
      .sheet-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
      .sheet-links li a {
          display: block; padding: 15px; color: var(--sky5); text-decoration: none;
          font-weight: 700; background: #f8f9fa; border-radius: 12px; text-align: center;
      }
      .sheet-links li a:hover { background: var(--pink); color: #fff; } 
      .sheet-links li a.active { background: var(--pink); color: #fff; }

      .menu-blur-bg {
          position: fixed; inset: 0; background: rgba(0,0,0,0.6);
          backdrop-filter: blur(4px); z-index: 10000;
          opacity: 0; visibility: hidden; transition: 0.3s;
      }
      .menu-blur-bg.active { opacity: 1; visibility: visible; }

      .mobile-footer-nav {
          position: fixed; bottom: 0; left: 0; right: 0; height: 70px;
          background: var(--sky); display: flex; justify-content: space-between;
          align-items: center; padding: 0 1.5rem; z-index: 10002; border-top: 3px solid var(--pink);
      }
      .m-nav-item.menu-trigger-btn {
          background: #fff; color: var(--pink); font-weight: 800;
          padding: 8px 20px; border-radius: 50px; cursor: pointer;
      }
  }
  
  /* ══ CHANGE 6: FLOATING BUTTONS — fade by default, hover script effect ══ */
.float-wa,.float-ph{
  position:fixed;bottom:1.6rem;z-index:999;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;text-decoration:none;
  opacity:0.45; /* fade by default */
  transition:opacity .4s,transform .3s,box-shadow .3s;
}
.float-wa{left:1.6rem;background:#25d366;box-shadow:0 4px 14px rgba(37,211,102,.5)}
.float-ph{right:1.6rem;background:var(--sky);box-shadow:0 4px 14px rgba(0,200,240,.5)}
.float-wa:hover,.float-ph:hover{
  opacity:1;
  transform:scale(1.18) rotate(-8deg);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
/* pulse ring on float buttons */
.float-wa::after,.float-ph::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;
  animation:pulseRing 2s ease-out infinite;
}
.float-wa::after{border-color:#25d366}
.float-ph::after{border-color:var(--sky)}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}

  @media (min-width: 769px) {
      .mobile-footer-nav, .mobile-menu-sheet, .menu-blur-bg { display: none; }
  }
  /* ══ FLOATING BUTTONS (SPLIT LAYOUT) ══ */
body.entry-locked {
    overflow: hidden;
}

.entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,.12), transparent 32%),
        linear-gradient(rgba(0, 80, 112, 0.38), rgba(0, 80, 112, 0.58));
    backdrop-filter: blur(5px) saturate(115%);
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease, visibility .7s ease;
}

.entry-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.entry-grid,
.entry-grid::before,
.entry-grid::after {
    position: absolute;
    inset: 0;
}

.entry-grid {
    overflow: hidden;
}

.entry-grid::before,
.entry-grid::after {
    content: "";
}

.entry-grid::before {
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .24;
    transform: perspective(900px) rotateX(72deg) scale(1.45);
    transform-origin: center top;
    animation: entryGridMove 14s linear infinite;
}

.entry-grid::after {
    background:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,.2), transparent 18%),
        radial-gradient(circle at 80% 18%, rgba(255, 26, 140, .22), transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(255, 210, 170, .25), transparent 26%);
    filter: blur(18px);
    animation: entryGlowDrift 8s ease-in-out infinite;
}

.entry-glow {
    position: absolute;
    width: min(72vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255, 182, 120, .2) 35%, rgba(255, 26, 140, .12) 58%, transparent 74%);
    filter: blur(12px);
    animation: entryGlowPulse 4.8s ease-in-out infinite;
}

.entry-card {
    position: relative;
    width: min(760px, 100%);
    padding: 52px 24px;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    transform-style: preserve-3d;
    transition: transform .32s ease, opacity .55s ease;
}

.entry-logo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(400px, 82vw);
    aspect-ratio: 1;
    margin: 0 auto 26px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0 52px rgba(255, 184, 122, .26);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
    animation: entryLogoFloat 2.8s ease-in-out infinite;
}

.entry-logo-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 56px rgba(255, 26, 140, .28);
}

.entry-logo-btn img {
    display: block;
    width: 96%;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(255,255,255,.24)) drop-shadow(0 0 30px rgba(255, 184, 122, .42));
}

.entry-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.entry-title .m { color: #fff; }
.entry-title .t { color: var(--pink); }

.entry-copy {
    max-width: 36ch;
    margin: 0 auto 16px;
    color: rgba(255,255,255,.9);
    line-height: 1.75;
    font-size: 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.entry-hint {
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .9;
}

.entry-overlay.exiting .entry-card {
    transform: translateY(-26px) scale(.92) rotateX(16deg) rotateZ(-7deg);
    opacity: 0;
}

.entry-overlay.exiting .entry-logo-btn {
    transform: scale(1.12) rotateY(28deg) rotateZ(-12deg);
    filter: saturate(1.15);
}

@keyframes entryGridMove {
    from { transform: perspective(900px) rotateX(72deg) translateY(0) scale(1.45); }
    to { transform: perspective(900px) rotateX(72deg) translateY(46px) scale(1.45); }
}

@keyframes entryGlowDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(10px, -14px, 0); }
}

@keyframes entryGlowPulse {
    0%, 100% { transform: scale(.94); opacity: .75; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes entryLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 640px) {
    .entry-card {
        padding: 28px 18px;
    }

    .entry-logo-btn {
        width: min(320px, 88vw);
    }

    .entry-copy {
        font-size: .94rem;
    }
}

.float-btn {
    position: fixed;
    bottom: 30px; /* Desktop height */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    z-index: 10005;
}

/* Position Phone on Left */
.ph-btn { 
    left: 20px; 
    background: var(--sky);
    color: #fff;
    animation: pulse-phone 2s infinite; 
}

.ph-btn span {
    display: none;
}

.ph-btn::before {
    content: "";
    width: 24px;
    height: 24px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 4.5a.75.75 0 0 1 .75-.75h2.175c.414 0 .771.287.86.69l.547 2.46a.75.75 0 0 1-.271.76l-1.08.864a11.035 11.035 0 0 0 5.516 5.516l.864-1.08a.75.75 0 0 1 .76-.271l2.46.547a.75.75 0 0 1 .69.86V17a.75.75 0 0 1-.75.75h-1.5C7.28 17.75 2.25 12.72 2.25 6.75V4.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 4.5a.75.75 0 0 1 .75-.75h2.175c.414 0 .771.287.86.69l.547 2.46a.75.75 0 0 1-.271.76l-1.08.864a11.035 11.035 0 0 0 5.516 5.516l.864-1.08a.75.75 0 0 1 .76-.271l2.46.547a.75.75 0 0 1 .69.86V17a.75.75 0 0 1-.75.75h-1.5C7.28 17.75 2.25 12.72 2.25 6.75V4.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ph-btn .phone-glyph {
    color: #fff;
    font-size: 1.65rem;
    line-height: 1;
}

.ph-btn:hover {
    background: var(--sky2);
    box-shadow: 0 0 0 10px rgba(255, 26, 140, 0), 0 0 24px rgba(255, 26, 140, 0.55);
}

/* Position WhatsApp on Right */
.wa-btn { 
    right: 20px; 
    background: #25d366; 
}

.float-btn:hover { transform: scale(1.1); }

@keyframes pulse-phone {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 240, 0.55); }
  70% { box-shadow: 0 0 0 15px rgba(0, 200, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 240, 0); }
}

/* ══ MOBILE OVERRIDE ══ */
@media (max-width: 768px) {
    .float-btn {
        bottom: 90px; /* Clear the 75px mobile footer */
    }
    .ph-btn { left: 15px; }
    .wa-btn { right: 15px; }
    
    footer {
        padding-bottom: 130px; /* Ensure footer text is visible behind buttons */
    }
}