:root{
  --ink:#18212f;
  --muted:#596579;
  --bg:#f7fafc;
  --bg-2:#ffffff;
  --brand:#22c6aa;
  --brand-2:#3478f6;
  --accent:#ffcc66;
  --ring: 0 0 0 1px rgba(0,0,0,.05) inset;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);
  --radius: 18px;
  --radius-xl: 28px;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Kufi Arabic", sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, #e8f3ff, transparent 60%),
    var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

.container{ max-width: 1140px; }

/* Ambient blobs */
.blob{
  position: fixed; z-index: -1;
  filter: blur(60px); opacity:.5; pointer-events: none;
}
.blob--mint{ width: 520px; height: 520px; background: radial-gradient(circle, #b2ffe5, transparent 60%); top: -120px; right: -100px; }
.blob--blue{ width: 480px; height: 480px; background: radial-gradient(circle, #b2d0ff, transparent 60%); bottom: -140px; left: -100px; }

/* ---------- HERO ---------- */
.hero-lite{ 
  position: relative;
  padding: 72px 0 42px;
  background: linear-gradient(-45deg, #fffde3, #e1ce85, #649b75, #308472);
}
.grid-hero{
  display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 56px); align-items:center;
}
.hero-lite__copy .display-3{ font-size: clamp(36px, 5.2vw, 64px); letter-spacing:.2px;color: #FFF; }
.hero-lite__copy .lead{ color: #FFF; font-size: clamp(18px, 2vw, 22px); margin-top: 8px; }

.cta{
  display:inline-flex; align-items:center; gap:.75rem;
  padding: 12px 22px; border-radius: 999px; margin-top: 14px;
  font-weight:700; font-size: 18px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.cta--ghost{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;;
}
.cta--ghost:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Ripple effect */
.ripple{ position: relative; overflow:hidden; }
.ripple-effect{
  position:absolute; border-radius:50%; transform: scale(0);
  background: radial-gradient(circle, rgba(52,120,246,.25), transparent 70%);
  animation: ripple .6s linear;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Product stand */
.product-stand{
  position: relative; display:inline-block; width: 100%;
  transform: translateZ(0);
}
.product-stand img{
  width: 100%; max-width: 520px; display:block; margin-inline:auto;
  filter: drop-shadow(0 28px 48px rgba(0,0,0,.18));
}
.stand-shadow{
  position:absolute; inset: auto 10% -14px 10%;
  height: 28px; border-radius: 999px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), transparent 70%);
  filter: blur(6px);
}

.floatY{ animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }

.hero-lite__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 22px; }
.chip{
  padding: 8px 14px; border-radius: 999px; background:#fff; box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06); color: var(--ink); font-size: 14px;
}
.chip .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--brand-2); margin-left: 8px; }

/* ---------- SECTION SHELL ---------- */
.section{ padding: 64px 0; position:relative; }
.section__head{ text-align:center; margin-bottom: 24px; }
.section__title{
  display:inline-block; font-weight:800;
  border-image: linear-gradient(90deg, var(--brand-2), var(--brand)) 1;
  border-width: 0 0 4px 0; border-style: solid; padding-bottom: 6px;
}
.section__desc{ max-width: 70ch; margin: 12px auto 0; color: var(--muted); line-height: 1.9; }

/* ---------- FEATURES (single image + list) ---------- */
.feature-composition{
  display:grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center;
}
.device-card{
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--ring);
  overflow: hidden;
}
.device-card__topbar{
  display:flex; align-items:center; gap:8px; padding: 12px 14px;
}
.device-card__topbar span{
  width:12px; height:12px; border-radius:50%;
  background: #e0e6f2; display:inline-block;
}
.device-card__body{ padding: 10px 10px 16px; }
.device-card__body img{ width:100%; border-radius: 14px; display:block; }

.feature-list{ display:grid; gap: 14px; }
.frow{
  display:grid; grid-template-columns: 56px 1fr; gap: 14px; align-items:flex-start;
  padding: 14px; border-radius: 16px; background:#fff; border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.frow:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.frow__icon{
  width:56px; height:56px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(34,198,170,.2), rgba(52,120,246,.2));
  color: var(--brand-2); font-size: 22px;
}
.frow__content h3{ margin:0 0 6px 0; font-weight:800; }
.frow__content p{ margin:0; color: var(--muted); }

/* ---------- INSTALLATION (clean cards) ---------- */
.stepper-lite{
  display:grid; gap: 18px; grid-template-columns: repeat(3, 1fr);
}
.stepper-lite__num{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  display:grid; place-items:center; color: #fff; font-weight:800; box-shadow: var(--shadow);
  margin: 0 auto 10px;
}
.stepper-lite__card{
  background:#fff; border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
}
.stepper-lite__card p{ margin: 0 0 8px 0; }
.stepper-lite__card img{ width:100%; border-radius: 12px; display:block; }
.install-glow{
  position:absolute; inset:auto 0 -120px 0; height: 200px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(52,120,246,.18), transparent 70%);
  filter: blur(50px);
}

/* ---------- VIDEO (browser mockup) ---------- */
.browser-mockup{
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  border-radius: 26px;
  box-shadow: var(--shadow-lg), var(--ring);
  overflow: hidden;
  max-width: 980px; margin-inline:auto;
}
.browser-mockup__topbar{
  display:flex; align-items:center; gap:8px; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.05);
}
.browser-mockup__topbar span{
  width:12px; height:12px; border-radius:50%; background:#e0e6f2; display:inline-block;
}
.browser-mockup__topbar .address{
  height: 12px; border-radius: 999px; flex: 1;
  background: linear-gradient(90deg, #eef2f9, #e6ecf7);
  margin-inline-start: 10px;
}
.browser-mockup__frame{ border-top: 1px solid rgba(0,0,0,.04); }
.browser-mockup__frame iframe{ border:0; border-radius: 0; }
.mockup-glow{
  position:absolute; inset:auto -120px -140px -120px; height: 220px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(34,198,170,.22), transparent 70%);
  filter: blur(50px);
}

/* ---------- FOOTER ---------- */
.footer-lite{
  background: linear-gradient(180deg, #ffffff, #f1f5fd);
  padding: 30px 0; color: var(--muted);
  border-top: 1px solid rgba(0,0,0,.05);
}
.footer-lite__inner{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 16px;
}
.foot-title{ color: var(--ink); font-weight:700; margin: 0 0 6px 0; }
.socials{ display:flex; gap: 10px; }
.socials a{
  width: 44px; height: 44px; display:grid; place-items:center;
  border-radius: 12px; background:#fff; border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.socials a:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-fixed {
      position: fixed;
      bottom: 50px;
      right: 30px;
      z-index: 9;
  }
  
  .btn-whatsapp {
      background-color: #30bf39;
      color: #fff;
      border-radius: 100%;
      transition: background-color .5s;
      width: 60px!important;
      height: 60px!important;
    line-height: 78px;
      position: relative!important;
      display: block;
      transform: none!important;
      z-index: 9;
      text-align: center;
    box-shadow:
              0 1px 2px rgba(0,0,0,0.07),
              0 2px 4px rgba(0,0,0,0.07),
              0 4px 8px rgba(0,0,0,0.07),
              0 8px 16px rgba(0,0,0,0.07),
              0 16px 32px rgba(0,0,0,0.07),
              0 32px 64px rgba(0,0,0,0.07);
  }
  
  .btn-whatsapp:hover {
    background-color: #53ca5b;
  }
  
  .whatsapp-fixed a.video-vemo-icon.btn-whatsapp i {
      font-size: 32px;
      color: #fff;
      animation: sm-shake-animation linear 1.5s infinite;
      animation-delay: 3s;
  }
  
  .rs-video .animate-border .video-vemo-icon:before {
      content: "";
      border: 2px solid #fff;
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 50%;
    opacity: 0;
      transform: translateX(-50%) translateY(-50%);
      display: block;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      animation: zoomBig 3.25s linear infinite;
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
  }
  
  .rs-video .animate-border .video-vemo-icon:after {
      content: "";
      border: 2px solid #fff;
      position: absolute;
    opacity: 0;
      z-index: 0;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      display: block;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      animation: zoomBig 3.25s linear infinite;
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
  }
  
  .btn-whatsapp:after, .btn-whatsapp:before {
      border: 2px solid #30bf39 !important;
      width: 130px!important;
      height: 130px!important;
  }
  
  .sm-red-dot {
      position: absolute;
      right: 4px;
      top: 4px;
    width: 12px; height: 12px;
    margin: 0 auto;
      background: red;
    transform: scale(0);
      border-radius: 50%;
    animation-name: notificationPoint;
  animation-duration: 300ms;
    animation-fill-mode: forwards;
      animation-delay: 3s;
  }
  
  .quick-message {
      position: absolute;
      bottom: 7px;
      right: 88px;
      width: max-content;
      border-radius: 0;
    background: #393b39;
  }
  
  .line-up {
    opacity: 0;
      animation-name: anim-lineUp;
      animation-duration: 0.75s;
    animation-fill-mode: forwards;
      animation-delay: 5s;
  }
  
  .quick-message p {
    line-height: 35px;
      font-size: 15px;
      padding: 4px 16px;
      height: 40px;
    position: relative;
    color: #fff;
      margin: 0;
  }
  
  .quick-message .seta-direita:before {
      display: inline-block;
      content: "";
      vertical-align: middle;
      margin-right: 10px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid #393b39;
      position: absolute;
      bottom: 0;
      right: -30px;
  }
  
  #hover-message {
    display: none;
  }
  
  .whatsapp-fixed:hover #hover-message {
    display: block;
  }
  
  @keyframes zoomBig{
    0%{transform:translate(-50%,-50%) scale(.5);opacity:1;border-width:3px}
    40%{opacity:.5;border-width:2px}
    65%{border-width:1px}100%{transform:translate(-50%,-50%) scale(1);opacity:0;border-width:1px}}
  
  @keyframes sm-shake-animation {
    0% {
      transform:rotate(0) scale(1) skew(0.017rad)
    }
    25% {
      transform:rotate(0) scale(1) skew(0.017rad)
    }
    35% {
      transform:rotate(-0.3rad) scale(1) skew(0.017rad)
    }
    45% {
      transform:rotate(0.3rad) scale(1) skew(0.017rad)
    }
    55% {
      transform:rotate(-0.3rad) scale(1) skew(0.017rad)
    }
    65% {
      transform:rotate(0.3rad) scale(1) skew(0.017rad)
    }
    75% {
      transform:rotate(0) scale(1) skew(0.017rad)
    }
    100% {
      transform:rotate(0) scale(1) skew(0.017rad)
    }
  }
  
  @keyframes notificationPoint {
    from {transform: scale(0)}
    to {transform: scale(1)}
  }
  
  @keyframes anim-lineUp {
    from {
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  
  @media (min-width: 992px)
  {
    .nk-footer__copyright-txt {
      padding-right: 90px;
    }
  }
  
  .nk-blog-details__descr.blockquote {
    padding: 15px 45px;
    margin: 30px 0 0;
  }

/* ---------- MEDIA ---------- */
@media (max-width: 991.98px){
  .grid-hero{ grid-template-columns: 1fr; }
  .feature-composition{ grid-template-columns: 1fr; }
  .stepper-lite{ grid-template-columns: 1fr; }
}
@media (max-width: 575.98px){
  .btn-whatsapp{ width: 56px; height: 56px; }
}

@media (min-width: 992px)
{
  .frow {
    margin: 30px 0px;
  }
}

.socials a {
  text-decoration: none;
}

.ltr {
	direction: ltr;
    display: inline-block;
}

.install-lite {
	padding: 0;
    margin-top: 65px;
}