/* =========================
   RESET
========================= */




/* =========================
   FOOTER
========================= */

.footer{

  margin-top:80px;

  padding:
  80px 24px 50px;

  background:
  linear-gradient(
    180deg,
    #ffffff,
    #edf4ff
  );

  border-top:
  1px solid rgba(15,23,42,.06);

  text-align:center;
}

.footer-logo{

  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  margin-bottom:20px;
}

.footer-logo img{

  width:60px;
  height:60px;

  border-radius:20px;
}

.footer-logo h3{

  font-size:1.5rem;
  font-weight:800;
}

.footer-text{

  max-width:700px;

  margin:auto;

  color:#64748b;

  line-height:1.9;
}

.footer-links{

  display:flex;
  justify-content:center;
  gap:20px;

  flex-wrap:wrap;

  margin-top:34px;
}

.footer-links a{

  text-decoration:none;

  color:#475569;

  font-weight:600;

  transition:.3s ease;
}

.footer-links a:hover{
  color:#2563eb;
}

.sam{

  margin-top:34px;

  color:#64748b;

  font-size:.95rem;
}

.sam strong{
  color:#111827;
}

.copyright{

  margin-top:24px;

  color:#94a3b8;

  font-size:.92rem;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes floaty{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-10px);
  }

  100%{
    transform:translateY(0px);
  }

}

.hero-logo{
  animation:floaty 4s ease-in-out infinite;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

  .hero-card{
    padding:60px 28px;
  }

  .hero-title{
    letter-spacing:-1px;
  }

}

@media(max-width:700px){

  .topbar{

    padding:10px 14px;

    border-radius:20px;
  }

  .brand h2{
    font-size:1rem;
  }

  .brand img{
    width:44px;
    height:44px;
  }

  .hero{
    padding-top:150px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .main-btn,
  .secondary-btn{
    width:100%;
  }

  .smart-notify{

    flex-direction:column;
    text-align:center;
  }

}

@media(max-width:500px){

  .hero-title{
    font-size:2.4rem;
  }

  .hero-text{
    font-size:1rem;
  }

  .feature-card,
  .review-card,
  .stat-card{
    padding:26px;
  }

}
/* =========================
   PREMIUM IOS FLOAT DOCK
========================= */

.premium-float-tools{

  position:fixed;

  left:50%;
  bottom:22px;

  transform:
  translateX(-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  padding:
  14px 18px;

  border-radius:999px;

  background:
  rgba(255,255,255,.72);

  backdrop-filter:
  blur(24px);

  -webkit-backdrop-filter:
  blur(24px);

  border:
  1px solid rgba(255,255,255,.85);

  box-shadow:
  0 12px 40px rgba(15,23,42,.10),
  inset 0 1px 0 rgba(255,255,255,.9);

  z-index:9999;

  transition:
  transform .35s ease,
  opacity .35s ease;

  will-change:
  transform,
  opacity;

}


/* =========================
   SALE POPUP PREMIUM
========================= */

.sale-popup{

  position:fixed;

  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:
  rgba(15,23,42,.32);

  backdrop-filter:
  blur(8px);

  z-index:999999;

  animation:
  fadeIn .35s ease;
}

/* =========================
   POPUP CARD
========================= */

.sale-popup-inner{

  width:
  min(92vw, 470px);

  position:relative;

  overflow:hidden;

  border-radius:34px;

  padding:
  34px 28px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(245,248,255,.98)
  );

  border:
  1px solid rgba(255,255,255,.9);

  backdrop-filter:
  blur(22px);

  text-align:center;

  box-shadow:
  0 25px 80px rgba(15,23,42,.18);

  animation:
  popupScale .4s cubic-bezier(.22,1,.36,1);

}

/* LIGHT EFFECT */

.sale-popup-inner::before{

  content:"";

  position:absolute;

  width:220px;
  height:220px;

  top:-120px;
  right:-100px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(96,165,250,.30),
    transparent 70%
  );

  pointer-events:none;
}

/* =========================
   CLOSE BUTTON
========================= */

.sale-close{

  position:absolute;

  top:18px;
  right:18px;

  width:42px;
  height:42px;

  border:none;

  border-radius:16px;

  background:
  rgba(241,245,249,.95);

  color:#475569;

  font-size:1rem;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.28s ease;

}

.sale-close:hover{

  background:#2563eb;
  color:#fff;

  transform:
  rotate(90deg)
  scale(1.08);

}

/* =========================
   SALE BADGE
========================= */

.sale-badge{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:
  12px 18px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    rgba(37,99,235,.12),
    rgba(6,182,212,.12)
  );

  color:#2563eb;

  font-size:.92rem;
  font-weight:800;

  margin-bottom:24px;
}

/* =========================
   TITLE
========================= */

.sale-popup-inner h2{

  font-size:2.3rem;

  line-height:1.1;

  letter-spacing:-1px;

  color:#0f172a;

  margin-bottom:18px;

  font-weight:900;
}

/* =========================
   TEXT
========================= */

.sale-popup-inner p{

  color:#64748b;

  line-height:1.9;

  font-size:1.05rem;

  margin-bottom:30px;
}

/* =========================
   SALE BUTTON
========================= */

.sale-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;

  min-height:60px;

  border-radius:22px;

  text-decoration:none;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  font-size:1.05rem;
  font-weight:800;

  box-shadow:
  0 16px 40px rgba(37,99,235,.25);

  transition:
  transform .3s ease,
  box-shadow .3s ease;

}

.sale-btn:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 22px 55px rgba(37,99,235,.34);

}

/* =========================
   ANIMATION
========================= */

@keyframes popupScale{

  from{

    opacity:0;

    transform:
    scale(.88)
    translateY(30px);

  }

  to{

    opacity:1;

    transform:
    scale(1)
    translateY(0);

  }

}

@keyframes fadeIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .sale-popup-inner{

    border-radius:30px;

    padding:
    30px 22px;
  }

  .sale-popup-inner h2{

    font-size:2rem;
  }

  .sale-popup-inner p{

    font-size:1rem;
  }

}
/* =========================
   FINAL PREMIUM IOS DOCK
========================= */

.premium-float-tools{

  position:fixed;

  left:50%;

  bottom:22px;

  transform:
  translateX(-50%) !important;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:16px;

  width:max-content;

  padding:
  14px 18px;

  border-radius:999px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(245,248,255,.92)
  );

  backdrop-filter:
  blur(26px);

  -webkit-backdrop-filter:
  blur(26px);

  border:
  1px solid rgba(255,255,255,.98);

  box-shadow:
  0 18px 45px rgba(37,99,235,.16),
  0 6px 20px rgba(15,23,42,.08),
  inset 0 1px 0 rgba(255,255,255,.98);

  z-index:999999;

  overflow:hidden;

  opacity:1 !important;

  transition:none !important;

  animation:none !important;

  will-change:auto;
}

/* =========================
   BUTTONS
========================= */

.float-tool-btn{

  width:66px;
  height:66px;

  min-width:66px;
  min-height:66px;

  border:none;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  cursor:pointer;

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #ffffff,
    #edf4ff
  );

  color:#2563eb;

  box-shadow:
  0 10px 25px rgba(37,99,235,.10),
  inset 0 1px 0 rgba(255,255,255,.95);

  transition:
  transform .18s ease,
  box-shadow .18s ease;
}

/* LIGHT EFFECT */

.float-tool-btn::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:50%;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.75),
    transparent 65%
  );

  pointer-events:none;
}

/* ICON */

.float-tool-btn svg{

  width:28px;
  height:28px;

  stroke-width:2.4;
}

/* HOVER */

.float-tool-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 14px 28px rgba(37,99,235,.14);
}

/* ACTIVE CLICK */

.float-tool-btn:active{

  transform:
  scale(.92);
}

/* =========================
   ACTIVE BLUE BUTTON
========================= */

.top-tool-btn{

  background:
  linear-gradient(
    135deg,
    #2563eb 0%,
    #3b82f6 40%,
    #06b6d4 100%
  );

  color:#fff;

  box-shadow:
  0 16px 32px rgba(37,99,235,.28),
  0 8px 18px rgba(6,182,212,.16);

}

/* =========================
   NO POSITION CHANGE
========================= */

.premium-float-tools.hide-dock{

  transform:
  translateX(-50%) !important;

  opacity:1 !important;

  bottom:22px !important;

  pointer-events:auto !important;
}

/* =========================
   REMOVE SCROLL EFFECTS
========================= */

.premium-float-tools,
.float-tool-btn{

  filter:none !important;
}

/* =========================
   FOOTER SAFE SPACE
========================= */

body{
  padding-bottom:140px;
}

/* =========================
   SAFE AREA IOS
========================= */

@supports(padding:max(0px)){

  .premium-float-tools{

    bottom:
    max(22px, env(safe-area-inset-bottom));
  }

}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .premium-float-tools{

    bottom:20px;

    gap:14px;

    padding:
    13px 16px;
  }

  .float-tool-btn{

    width:62px;
    height:62px;

    min-width:62px;
    min-height:62px;
  }

  .float-tool-btn svg{

    width:26px;
    height:26px;
  }

}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:380px){

  .premium-float-tools{

    gap:12px;

    padding:
    11px 14px;
  }

  .float-tool-btn{

    width:58px;
    height:58px;

    min-width:58px;
    min-height:58px;
  }

}

/* =========================
   PERFORMANCE
========================= */

.premium-float-tools{

  contain:
  layout
  paint
  style;
}
/* =========================
   PREMIUM TOP BUTTON
========================= */

.top-btn{

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-width:40px;
  height:40px;

  padding:
  0 px;

  border-radius:30px;

  text-decoration:none;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #2563eb 0%,
    #3b82f6 45%,
    #06b6d4 100%
  );

  color:#fff;

  font-size:1.1rem;
  font-weight:850;

  letter-spacing:-.3px;

  box-shadow:
  0 18px 38px rgba(37,99,235,.24),
  0 8px 18px rgba(6,182,212,.14);

  transition:
  transform .22s ease,
  box-shadow .22s ease;

  flex-shrink:0;
}

/* LIGHT EFFECT */

.top-btn::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.24),
    transparent
  );

  transform:
  translateX(-180%);

  animation:
  premiumShine 4s linear infinite;
}

/* HOVER */

.top-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 22px 44px rgba(37,99,235,.30),
  0 10px 22px rgba(6,182,212,.18);
}

/* CLICK */

.top-btn:active{

  transform:
  scale(.96);
}

/* SHINE */

@keyframes premiumShine{

  100%{

    transform:
    translateX(180%);
  }

}

/* =========================
   MOBILE TOP BUTTON
========================= */

@media(max-width:600px){

  .top-btn{

    min-width:50px;

    height:40px;
margin-left:2px;
    border-radius:28px;

    font-size:1rem;

    padding:
    0 7px;
  }

}

/* =========================
   SMALL PREMIUM FLOAT BAR
========================= */

.premium-float-tools{

  position:fixed;

  left:50%;
  bottom:18px;

  transform:
  translateX(-50%) !important;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  padding:
  10px 14px;

  border-radius:999px;

  background:
  rgba(255,255,255,.88);

  backdrop-filter:
  blur(24px);

  -webkit-backdrop-filter:
  blur(24px);

  border:
  1px solid rgba(255,255,255,.95);

  box-shadow:
  0 14px 36px rgba(37,99,235,.12),
  inset 0 1px 0 rgba(255,255,255,.95);

  z-index:999999;

  width:max-content;

  overflow:hidden;

  transition:none !important;
}

/* =========================
   SMALL BUTTONS
========================= */

.float-tool-btn{

  width:56px;
  height:56px;

  min-width:56px;
  min-height:56px;

  border:none;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #ffffff,
    #edf4ff
  );

  color:#2563eb;

  box-shadow:
  0 8px 18px rgba(37,99,235,.08);

  transition:
  transform .18s ease,
  box-shadow .18s ease;
}

/* LIGHT */

.float-tool-btn::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:50%;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.72),
    transparent 65%
  );

  pointer-events:none;
}

/* ICON */

.float-tool-btn svg{

  width:24px;
  height:24px;

  stroke-width:2.3;
}

/* ACTIVE BLUE */

.top-tool-btn{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  box-shadow:
  0 12px 24px rgba(37,99,235,.24);
}

/* HOVER */

.float-tool-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 12px 24px rgba(37,99,235,.14);
}

/* CLICK */

.float-tool-btn:active{

  transform:
  scale(.92);
}

/* =========================
   FOOTER SPACE
========================= */

body{
  padding-bottom:110px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .premium-float-tools{

    bottom:16px;

    gap:10px;

    padding:
    9px 12px;
  }

  .float-tool-btn{

    width:52px;
    height:52px;

    min-width:52px;
    min-height:52px;
  }

  .float-tool-btn svg{

    width:22px;
    height:22px;
  }

}

/* =========================
   SAFE AREA
========================= */

@supports(padding:max(0px)){

  .premium-float-tools{

    bottom:
    max(16px, env(safe-area-inset-bottom));
  }

}
/* =========================
   TRUST SECTION
========================= */

.trust-section{

  width:92%;
  max-width:1180px;

  margin:
  0 auto 90px;
}

.trust-card{

  position:relative;

  overflow:hidden;

  padding:
  60px 30px;

  border-radius:38px;

  text-align:center;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #172554,
    #1e3a8a
  );

  box-shadow:
  0 25px 70px rgba(15,23,42,.18);

  color:#fff;
}

/* LIGHT */

.trust-card::before{

  content:"";

  position:absolute;

  width:260px;
  height:260px;

  top:-140px;
  right:-100px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(59,130,246,.28),
    transparent 70%
  );
}

.trust-icon{

  width:95px;
  height:95px;

  margin:auto auto 24px;

  border-radius:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:2.5rem;

  background:
  rgba(255,255,255,.10);

  backdrop-filter:blur(14px);
}

.trust-card h2{

  font-size:
  clamp(2rem,5vw,3.4rem);

  font-weight:900;

  margin-bottom:18px;

  letter-spacing:-1px;
}

.trust-card p{

  max-width:720px;

  margin:auto;

  color:
  rgba(255,255,255,.82);

  line-height:1.9;

  font-size:1.08rem;
}

/* =========================
   TRUST STATS
========================= */

.trust-stats{

  margin-top:40px;

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(180px,1fr)
  );

  gap:20px;
}

.trust-box{

  padding:
  28px 20px;

  border-radius:28px;

  background:
  rgba(255,255,255,.08);

  backdrop-filter:blur(18px);

  border:
  1px solid rgba(255,255,255,.08);
}

.trust-box h3{

  font-size:2.2rem;

  margin-bottom:10px;

  font-weight:900;
}

.trust-box span{

  color:
  rgba(255,255,255,.76);

  font-weight:600;
}

/* =========================
   WHY SECTION
========================= */

.why-section{

  width:92%;
  max-width:1180px;

  margin:
  0 auto 100px;

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(260px,1fr)
  );

  gap:26px;
}

/* =========================
   WHY CARD
========================= */

.why-card{

  padding:
  34px 28px;

  border-radius:34px;

  background:
  rgba(255,255,255,.82);

  backdrop-filter:blur(18px);

  border:
  1px solid rgba(255,255,255,.92);

  box-shadow:
  0 14px 40px rgba(15,23,42,.06);

  transition:
  transform .28s ease,
  box-shadow .28s ease;
}

.why-card:hover{

  transform:
  translateY(-8px);

  box-shadow:
  0 22px 50px rgba(37,99,235,.10);
}

.why-icon{

  width:78px;
  height:78px;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:2rem;

  margin-bottom:22px;

  background:
  linear-gradient(
    135deg,
    #dbeafe,
    #eff6ff
  );
}

.why-card h3{

  font-size:1.5rem;

  margin-bottom:14px;

  color:#0f172a;

  font-weight:850;
}

.why-card p{

  color:#64748b;
font-size:20px;
font-weight:1000px;
  line-height:1.8;
}
/* =========================
   PREMIUM SMART NOTIFY
========================= */

.smart-notify{

  position:fixed;

  top:50%;
  left:50%;

  transform:
  translate(-50%,-50%)
  scale(.94);

  width:min(88vw, 400px);

  min-height:260px;

  padding:28px 22px 22px;

  border-radius:28px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(248,250,255,.97)
  );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:
  1px solid rgba(255,255,255,.9);

  box-shadow:
  0 24px 60px rgba(15,23,42,.14),
  0 6px 24px rgba(37,99,235,.08);

  z-index:999999;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  /* FULL HIDE FIX */

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  display:none;

  transition:
  opacity .32s ease,
  transform .32s cubic-bezier(.22,1,.36,1);

  overflow:hidden;

}


/* SHOW */

.smart-notify.show{

  display:flex;

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
  translate(-50%,-50%)
  scale(1);

}


/* LIGHT EFFECT */

.smart-notify::before{

  content:"";

  position:absolute;

  width:180px;
  height:180px;

  top:-80px;
  right:-70px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(96,165,250,.16),
    transparent 70%
  );

  pointer-events:none;

}


/* CLOSE BUTTON */

.smart-close{

  position:absolute;

  top:14px;
  right:14px;

  width:36px;
  height:36px;

  border:none;

  border-radius:14px;

  background:
  rgba(241,245,249,.96);

  color:#475569;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:.95rem;

  cursor:pointer;

  transition:
  background .25s ease,
  transform .25s ease;

}

.smart-close:hover{

  background:#2563eb;

  color:#fff;

  transform:rotate(90deg);

}


/* ICON */

.smart-icon{

  width:84px;
  height:84px;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:22px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
  );

  color:#fff;

  box-shadow:
  0 14px 34px rgba(37,99,235,.22);

}

.smart-icon svg{

  width:38px;
  height:38px;

  stroke-width:2.2;
}


/* TEXT */

.smart-content{
  width:100%;
}

.smart-content h3{

  font-size:1.55rem;

  font-weight:800;

  letter-spacing:-.6px;

  color:#0f172a;

  margin-bottom:10px;

  line-height:1.3;

}

.smart-content p{

  color:#64748b;

  font-size:.98rem;

  line-height:1.75;

  max-width:300px;

  margin:auto;

}


/* ACTIONS */

.smart-actions{

  width:100%;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  margin-top:26px;

}


/* BUTTONS */

.smart-actions button{

  flex:1;

  height:50px;

  border:none;

  border-radius:16px;

  font-size:.95rem;

  font-weight:700;

  cursor:pointer;

  transition:
  transform .22s ease,
  box-shadow .22s ease;

}


/* LATER */

#laterNotifyBtn{

  background:
  rgba(241,245,249,.96);

  color:#0f172a;

}

#laterNotifyBtn:hover{

  transform:
  translateY(-2px);

}


/* ENABLE */

#enableNotifyBtn{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
  );

  color:#fff;

  box-shadow:
  0 10px 26px rgba(37,99,235,.24);

}

#enableNotifyBtn:hover{

  transform:
  translateY(-2px);

}


/* BACKDROP */

.smart-notify-backdrop{

  position:fixed;

  inset:0;

  background:
  rgba(15,23,42,.28);

  backdrop-filter:blur(4px);

  z-index:999998;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  display:none;

  transition:
  opacity .28s ease;

}


/* SHOW BACKDROP */

.smart-notify-backdrop.show{

  display:block;

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}


/* MOBILE */

@media(max-width:600px){

  .smart-notify{

    width:90vw;

    min-height:240px;

    padding:
    24px 18px 20px;

    border-radius:24px;

  }

  .smart-content h3{

    font-size:1.4rem;

  }

  .smart-content p{

    font-size:.94rem;

  }

  .smart-actions button{

    height:48px;

    border-radius:15px;

  }

}