:root{
  --teal:#53B5BB;
  --teal-50:#e9f6f7;
  --ink:#1b1b1b;
}

*{box-sizing:border-box}
body{
  font-family:"Poppins", sans-serif;
  color:#2b2b2b; background:#fff;
}

.b {
  font-weight: 600 !important;
}

.teal-text{
  color: var(--teal);
}

.section{
    padding:64px 0;
     position:relative
}

.soft{
    background:linear-gradient(180deg,#fff,var(--teal-50))
}

.small{
    font-size:0.9rem
}

.site-nav{
  position:sticky; top:0; z-index:30;
  background:#fff; border-bottom:1px solid rgba(0,0,0,.06);
}

.nav-logo{
    height:34px;
    width:auto;
    display:block;
}

.brand-text{
    color:var(--teal);
    font-weight:600;
    font-size:1.2rem;
    letter-spacing:.3px
}

.site-nav .nav-link{
    color:#4d4d4d
}

.site-nav .nav-link:hover{
    color:var(--teal)
}

.intro-title{
    color:#2c3e50 !important;
}

.intro_title{
    color: var(--teal) !important;
}

.btn-teal, .btn-teal:hover{
  background:var(--teal);color:#fff;border:none;border-radius:14px;
  box-shadow:0 8px 18px rgba(83,181,187,.25)
}

.btn-ghost{
  background:transparent;
  border:2px solid var(--teal);
  color:var(--teal);
  border-radius:14px
}

.btn-ghost:hover{
    background:var(--teal);
    color:#fff}

.intro-block{
  padding:64px 0 120px;
  background:
    radial-gradient(900px 220px at 70% 35%, rgba(255,255,255,.92), rgba(255,255,255,.65) 60%, transparent 70%),
    linear-gradient(135deg, rgba(83,181,187,.26) 0%, #ffffff 48%, #f7fdff 100%);
  position:relative; overflow:hidden;
}

.title{
    font-weight:800;
    color:var(--ink);
    line-height:1.1;
    letter-spacing:.2px
}

.float-logo{
  display:block;
  width:min(320px,38vw);
  max-width:380px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.10));
  animation:floatY 6.5s ease-in-out infinite;
}

@keyframes floatY{
  0%{
     transform:translateY(0) 
    }

  50%{ 
    transform:translateY(-14px)
    }
  100%{
    transform:translateY(0) 
    }
}

.custom-shape-divider-top-1762253060 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1762253060 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-top-1762253060 .shape-fill {
    fill: #EAF6F7;
}

.phone-frame{
  width:min(350px,100%);
  margin-inline:auto;
}

.phone-bezel{
  position:relative;
  aspect-ratio:9/19.5;              
  border-radius:32px;
  padding:14px;
  background:linear-gradient(145deg,#eaeef1,#ffffff);
  box-shadow:
    0 12px 30px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(0,0,0,.06);
  overflow:visible;
}

.phone-bezel::after{                 
  content:"";
  position:absolute; inset:auto 22% -10px 22%;
  height:18px; border-radius:999px;
  background:radial-gradient(closest-side, rgba(83,181,187,.18), transparent 70%);
  filter:blur(6px);
}

#screensCarousel{ 
    height:100%; 
    border-radius:22px; 
    overflow:hidden; 
    background:#0b0b0b; 
}

.sc-shot{
  width:100%; 
  height:100%;
  object-fit:cover;                   
  background:#fff;                    
}

.ctrl{
  width:42px; 
  height:42px;
  border-radius:50%;
  top:50%; 
  transform:translateY(-50%);
  background:rgba(255,255,255,.85);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}

.ctrl .carousel-control-prev-icon,
.ctrl .carousel-control-next-icon{
  filter:invert(0) grayscale(1);
}

.carousel-control-prev.ctrl{ 
    left:10px 
}

.carousel-control-next.ctrl{ 
    right:10px 
}

.indicators-outside{
  position:absolute;
  left:50%; 
  transform:translateX(-50%);
  bottom:-24px; 
  display:flex; 
  gap:6px;
}

.indicators-outside button{
  width:8px; 
  height:8px; 
  border-radius:999px;
  background:rgba(83,181,187,.28);
  border:none;
}

.indicators-outside .active{
  width:20px; background:#53B5BB;
}

/* little notch */
.notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:72px; height:10px; border-radius:8px;
  background:rgba(0,0,0,.15);
  filter:blur(.2px);
}


.mode-card{
  border: none;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.mode-card .card-body{ padding: 1.1rem 1.1rem 1.0rem; }

.mode-icon{
  width: 36px; 
  height: 36px; 
  border-radius: 10px;
  display:flex; 
  align-items:center; 
  justify-content:center;
  font-size: 18px;
}
.mode-icon.offline{
   background: #eef9fa; 
}

.mode-icon.online {
   background: rgba(83,181,187,.12); 
}

.feat-chip{
  display:flex; 
  align-items:center; 
  gap:10px;
  background:#fff; 
  border:1px solid rgba(83,181,187,.18);
  border-radius: 14px; 
  padding:10px 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 10px;
}

.feat-chip.wide{ width:100%; }

.chip-ico{
  width:28px; 
  height:28px; 
  border-radius:8px;
  display:grid; 
  place-items:center; 
  font-size:15px;
  background: var(--teal-50);
  box-shadow: inset 0 0 0 2px rgba(83,181,187,.3);
}

.chip-text b{
  display:block; 
  line-height:1.1; 
  color:#1f1f1f;
  font-weight: 600;
}
.chip-text small{
  display:block; 
  color:#707070; 
  line-height:1.2;
}

@media (min-width: 992px){
  .pe-lg-3{ 
    padding-right:.75rem !important; 
  }

  #screens .section-title{
     margin-top:6px 
  }
}

.legal-modal .modal-content{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.legal-modal .modal-title{
  color: var(--teal);
}

.legal-modal .modal-body p{
  margin-bottom: .9rem;
  color: #2b2b2b;
}

.legal-modal .legal-list{
  padding-left: 1.1rem;
  margin-bottom: 0;
}
.legal-modal .legal-list > li{
  margin-bottom: .6rem;
}

.legal-modal .btn-ghost{
  border: 2px solid var(--teal);
  color: var(--teal);
  border-radius: 14px;
  background: transparent;
}
.legal-modal .btn-ghost:hover{
  background: var(--teal);
  color: #fff;
}

.intro-block::after{
    content:""; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:-1px; 
    height:120px;
    background:inherit;          
    pointer-events:none; 
    z-index:0;
    -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'>\
    <path d='M0,64 C240,112 480,16 720,48 C960,80 1200,96 1440,72 L1440,120 L0,120 Z'/>\
    </svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'>\
    <path d='M0,64 C240,112 480,16 720,48 C960,80 1200,96 1440,72 L1440,120 L0,120 Z'/>\
    </svg>") center/100% 100% no-repeat;
}

.soft-with-wave{
     padding-bottom:104px;
}

.soft-with-wave::after{
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:-1px; 
  height:120px;
  background:inherit; 
  pointer-events:none;
  z-index:0;
  -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'>\
    <path d='M0,64 C240,112 480,16 720,48 C960,80 1200,96 1440,72 L1440,120 L0,120 Z'/>\
    </svg>") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'>\
    <path d='M0,64 C240,112 480,16 720,48 C960,80 1200,96 1440,72 L1440,120 L0,120 Z'/>\
    </svg>") center/100% 100% no-repeat;
}

.feature{
    border:none;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.06)
}

.feature .feature-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#eef9fa;
  display:flex
  ;align-items:center;
  justify-content:center;
  margin-bottom:.6rem;
}

.download-card{
    border:none;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)
}

.download-card .card-body{
    padding:1.5rem
}

.site-foot{
  background:linear-gradient(180deg,#fff,#f2fbfc);
  padding:28px 0;
  border-top:1px solid rgba(0,0,0,.05);
}

.link-teal{
    color:var(--teal);
    text-decoration:none
}

.link-teal:hover{
    text-decoration:underline
}

@media (max-width:991.98px){ 
    .title{font-size:1.9rem}
}

@media (max-width:768px){ 
    .intro-block::after, .soft-with-wave::after{
         height:96px 
    } 
}