*{
box-sizing:border-box;
-webkit-tap-highlight-color: transparent;
}
:root{
  --ink:#07111f;
  --blue:#2469f5;
  --border:#bfc2c6;
  --soft:#f5f8ff;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
button,a{font:inherit}
button{cursor:pointer}
.topbar{
  height:67px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.brand img{display:block;width:auto;height:40px;max-width:190px;object-fit:contain;object-position:left center}.brand{
  color:#080808;
  text-decoration:none;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.4px;
}
.welcome{
  display:flex;
  align-items:center;
  gap:16px;
}
.welcome>div{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.welcome strong{font-size:14px}
.wave{font-size:13px}
.welcome small{margin-top:6px;color:#788395;font-size:9px}
.icon-btn{
  border:0;background:transparent;width:28px;height:34px;position:relative;
  color:#253451;font-size:19px;
}
.dot{
  position:absolute;right:1px;top:2px;width:6px;height:6px;border-radius:50%;
  background:#2868ed;border:1px solid #fff;
}
main{width:100%}
.hero-wrap{
  margin:0 8px;
  border-radius:11px;
  overflow:hidden;
  background:#f4f7fd;
}
.hero-wrap img{display:block;width:100%;height:auto}
.service-section,.reviews-section{margin:57px 0 0}
.section-head{
  padding:0 37px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.section-head h2{
  margin:0 0 27px;
  font-size:28px;
  font-weight:500;
  letter-spacing:-.8px;
}
.slider-controls{display:none;gap:9px}
.circle-btn{
  width:43px;height:43px;border-radius:50%;
  border:1px solid #111;background:#fff;color:#111;
  display:grid;place-items:center;
}
.circle-btn.prev{opacity:.25}
.card-viewport,.reviews-viewport{overflow:hidden;width:100%}
.card-track{
  display:flex;
  gap:21px;
  padding:0 37px 0;
  transition:transform .35s ease;
}
.service-card{
  flex:0 0 272px;
  height:333px;
  border:1px solid #b9bbc0;
  border-radius:29px;
  padding:21px 22px 17px;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.service-icon{
  width:71px;height:68px;border-radius:16px;
  display:grid;place-items:center;font-size:31px;
  margin-bottom:13px;
}
.service-icon.purple{background:#eeeaff;color:#5c3fe8}
.service-icon.green{background:#e6f7f1;color:#09b77d}
.service-icon.blue{background:#e7f0ff;color:#2e6ff4}
.service-card h3{
  font-size:17px;line-height:1.65;margin:0 0 9px;font-weight:700;
}
.service-card ul{
  list-style:none;padding:0;margin:0;display:grid;gap:9px;
}
.service-card li{
  font-size:11px;display:flex;align-items:center;gap:9px;
  white-space:nowrap;
}
.service-card li:before{
  content:"\f058";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:14px;color:#050505;
}
.price-row{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
}
.price-row strong{font-size:19px;letter-spacing:-.3px}
.go-btn{
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:#050505;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:15px;
  position:relative;
  z-index:5;
  pointer-events:auto;
}
.graphic-card{height:333px}
.reviews-section{margin-top:103px;margin-bottom:50px}
.reviews-section .section-head h2{margin-bottom:30px}
.reviews-track{
  display:flex;gap:17px;padding:0 34px;
  transition:transform .35s ease;
}
.review-card{
  flex:0 0 296px;height:158px;border:1px solid #b9bbc0;
  border-radius:18px;padding:12px 23px 15px;
}
.stars{color:#ffb900;font-size:18px;letter-spacing:2px}
.review-card p{font-size:14px;line-height:1.65;margin:10px 0 14px}
.review-card h3{font-size:18px;margin:0;font-weight:700}
@media (min-width:700px){
  .hero-wrap{margin:0 20px}
  .topbar{padding:0 28px}
  .service-section,.reviews-section{margin-top:65px}
  .section-head{padding:0 44px}
  .card-track{padding:0 44px}
  .service-card{flex-basis:280px}
  .reviews-track{padding:0 44px}
}
@media (min-width:1100px){
  .topbar{height:67px;padding:0 31px}
  .hero-wrap{margin:0 8px}
  .section-head{padding:0 37px}
  .card-track{padding:0 37px}
  .service-card{flex-basis:272px}
  .slider-controls{display:flex}
  .section-head .slider-controls{margin-top:-26px}
  .reviews-track{padding:0 34px}
}
@media (max-width:699px){
  .topbar{height:62px;padding:0 15px}
  .brand img{display:block;width:auto;height:40px;max-width:190px;object-fit:contain;object-position:left center}.brand{font-size:17px;max-width:180px;height:36px}
  .welcome{gap:10px}
  .welcome strong{font-size:12px}
  .welcome small{font-size:8px}
  .hero-wrap{margin:0 7px;border-radius:10px}
  .service-section{margin-top:43px}
  .reviews-section{margin-top:76px}
  .section-head{padding:0 18px}
  .section-head h2{font-size:24px;margin-bottom:19px}
  .slider-controls{display:flex;margin-top:-17px}
  .circle-btn{width:37px;height:37px;font-size:13px}
  .card-track{gap:14px;padding:0 18px}
  .service-card{flex-basis:calc(100vw - 58px);height:330px;border-radius:26px;padding:19px}
  .service-icon{width:67px;height:64px}
  .service-card h3{font-size:17px}
  .service-card li{font-size:11px}
  .price-row strong{font-size:19px}
  .reviews-track{gap:14px;padding:0 18px}
  .review-card{flex-basis:calc(100vw - 45px);height:158px}
  .reviews-section .slider-controls{margin-top:-16px}
}