:root{
  --smart-blue:#119eea;
  --smart-cyan:#28d8d0;
  --smart-white:#fff;
  --smart-ink:#061421;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#061421;
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.smart-hero{
  position:relative;
  width:100%;
  min-height:clamp(620px,88vh,900px);
  overflow:hidden;
  color:var(--smart-white);
  isolation:isolate;
  background:#061421;
}

.smart-slides,
.smart-slide{
  position:absolute;
  inset:0;
}

.smart-slide{
  opacity:0;
  visibility:hidden;
  transform:scale(1.025);
  background-image:var(--slide-image);
  background-size:cover;
  background-position:center;
  transition:
    opacity .75s ease,
    transform 5s ease;
}

.smart-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.smart-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(2,13,25,.96) 0%,
      rgba(2,18,34,.82) 34%,
      rgba(2,18,34,.35) 62%,
      rgba(2,18,34,.12) 100%),
    linear-gradient(0deg,
      rgba(2,13,25,.78) 0%,
      transparent 42%);
}

.smart-content{
  position:relative;
  z-index:3;
  width:min(720px,calc(100% - 48px));
  padding-top:clamp(130px,18vh,190px);
  margin-left:max(24px,calc((100% - 1180px)/2));
}

.smart-kicker{
  margin:0 0 20px;
  color:#9deee9;
  font-size:12px;
  line-height:1.4;
  letter-spacing:.18em;
  font-weight:800;
}

.smart-content h1,
.smart-content h2{
  margin:0;
  max-width:780px;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(44px,6vw,78px);
  line-height:.98;
  letter-spacing:-.045em;
}

.smart-content h2{
  font-size:clamp(42px,5.5vw,70px);
}

.smart-content h1 span,
.smart-content h2 span{
  color:#2ad8d2;
}

.smart-copy{
  max-width:660px;
  margin:25px 0 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.7;
}

.smart-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.smart-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:0 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:.2s ease;
}

.smart-btn-primary{
  color:#031521;
  background:linear-gradient(135deg,#35e2d6,#1aaaf0);
  box-shadow:0 12px 35px rgba(26,170,240,.24);
}

.smart-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(26,170,240,.34);
}

.smart-btn-ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}

.smart-btn-ghost:hover{
  background:rgba(255,255,255,.13);
}

.smart-tag-cloud{
  position:absolute;
  z-index:2;
  right:7%;
  top:31%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.smart-tag-cloud span{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(4,20,34,.34);
  backdrop-filter:blur(8px);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.smart-arrow{
  position:absolute;
  z-index:8;
  top:50%;
  width:52px;
  height:52px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(2,13,25,.48);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.2s ease;
}

.smart-arrow:hover{
  background:rgba(17,158,234,.8);
  border-color:transparent;
}

.smart-prev{left:22px}
.smart-next{right:22px}

.smart-bottom{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:min(1180px,calc(100% - 48px));
  display:flex;
  align-items:center;
  gap:18px;
}

.smart-counter{
  min-width:58px;
  display:flex;
  align-items:baseline;
  gap:5px;
  font-family:"Manrope",sans-serif;
}

.smart-counter strong{font-size:24px}
.smart-counter span{font-size:12px;color:rgba(255,255,255,.55)}

.smart-progress{
  width:160px;
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.22);
}

.smart-progress span{
  display:block;
  width:33.33%;
  height:100%;
  background:#28d8d0;
  transition:width .45s ease;
}

.smart-dots{
  margin-left:auto;
  display:flex;
  gap:9px;
}

.smart-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  cursor:pointer;
  transition:.2s ease;
}

.smart-dot.is-active{
  width:30px;
  border-radius:999px;
  background:#28d8d0;
}

@media(max-width:800px){
  .smart-hero{min-height:720px}

  .smart-overlay{
    background:
      linear-gradient(90deg,rgba(2,13,25,.94),rgba(2,18,34,.65)),
      linear-gradient(0deg,rgba(2,13,25,.9),transparent 65%);
  }

  .smart-content{
    width:calc(100% - 44px);
    margin-left:22px;
    padding-top:125px;
  }

  .smart-tag-cloud{display:none}

  .smart-arrow{
    top:auto;
    bottom:85px;
    transform:none;
    width:44px;
    height:44px;
  }

  .smart-prev{left:22px}
  .smart-next{right:22px}

  .smart-bottom{
    bottom:24px;
    width:calc(100% - 44px);
  }

  .smart-progress{display:none}

  .smart-dots{margin-left:auto}
}

@media(prefers-reduced-motion:reduce){
  .smart-slide,
  .smart-btn,
  .smart-arrow,
  .smart-progress span{
    transition:none;
  }
}