:root{
  --blue:#1857C4;
  --blue-deep:#0F3B96;
  --blue-soft:#4C86E8;
  --blue-tint:#E4EDFE;
  --blue-tint-2:#D3E1FC;
  --yellow:#FFC940;
  --yellow-dark:#F2A93B;
  --cream:#F1F5FF;
  --ink:#1A2340;
  --muted:#5B6485;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins','Trebuchet MS',sans-serif; background:var(--cream); color:var(--ink); overflow-x:hidden;}
h1,h2,h3{font-family:'Poppins',sans-serif; font-weight:800; line-height:1.15;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 30px;}
.blob-badge{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--ink);
  border-radius:999px; padding:7px 16px; font-size:13px; font-weight:700; color:var(--blue-deep);
  box-shadow:3px 3px 0 var(--ink);
}
.blob-badge .emoji{font-size:15px;}
.blob-badge.on-blue{background:var(--blue-deep); color:#fff; border-color:#fff;}

/* HEADER */
header{padding:22px 0; position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:3px solid var(--ink);}
nav{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; color:var(--blue-deep);}
.logo-icon{
  width:40px; height:40px; background:var(--blue); border-radius:50%; border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.navlinks{display:flex; gap:30px; font-weight:600; font-size:14.5px;}
.navlinks a{position:relative; padding-bottom:2px;}
.navlinks a:hover{color:var(--blue);}
.navlinks a.active{color:var(--blue-deep); border-bottom:2.5px solid var(--blue);}
.nav-cta{
  background:var(--blue); color:#fff; font-weight:700; padding:12px 24px; border-radius:999px;
  border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-size:14.5px;
  transition:.15s;
}
.nav-cta:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}

/* HERO */
.hero{padding:70px 0 40px; position:relative; overflow:hidden; background:linear-gradient(180deg,var(--blue-tint) 0%, var(--cream) 65%);}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center;}
.hero h1{font-size:clamp(38px,5vw,60px); margin:22px 0 20px; color:var(--blue-deep);}
.hero h1 .hl{background:var(--yellow); padding:2px 10px; border-radius:10px; display:inline-block; transform:rotate(-1.5deg);}
.hero p.lead{font-size:17.5px; color:var(--muted); max-width:460px; margin-bottom:32px; line-height:1.6;}
.hero-btns{display:flex; gap:16px; margin-bottom:38px; flex-wrap:wrap;}
.btn-big{
  background:var(--blue); color:#fff; font-weight:700; padding:16px 30px; border-radius:999px;
  border:2.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-size:15.5px; display:inline-flex; align-items:center; gap:8px;
  transition:.15s;
}
.btn-big:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.btn-outline{
  background:#fff; color:var(--blue-deep); font-weight:700; padding:14px 28px; border-radius:999px;
  border:2.5px solid var(--ink); font-size:15.5px;
}
.btn-outline:hover{background:var(--blue-tint-2);}
.hero-avatars{display:flex; align-items:center; gap:14px;}
.avatar-stack{display:flex;}
.avatar-stack span{
  width:38px; height:38px; border-radius:50%; border:2.5px solid var(--cream); margin-left:-12px;
  background:var(--blue); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px;
}
.avatar-stack span:first-child{margin-left:0;}
.hero-avatars p{font-size:13.5px; color:var(--muted); font-weight:600;}
.hero-avatars b{color:var(--ink);}

.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; height:420px;}
.blob{
  position:absolute; width:380px; height:380px; background:linear-gradient(140deg,var(--blue-soft),var(--blue)); border-radius:44% 56% 62% 38% / 48% 40% 60% 52%;
  z-index:0; opacity:0.9;
}
.hero-visual svg{position:relative; z-index:1; width:90%;}
.float-chip{
  position:absolute; background:#fff; border:2.5px solid var(--ink); border-radius:16px; padding:10px 16px;
  font-weight:700; font-size:13px; box-shadow:4px 4px 0 var(--ink); z-index:2; color:var(--blue-deep);
}
.chip-1{top:10px; left:-10px;}
.chip-2{bottom:30px; right:-10px;}

/* MARQUEE */
.strip{background:var(--blue-deep); padding:16px 0; overflow:hidden; white-space:nowrap;}
.strip-track{display:inline-block; animation:go 20s linear infinite;}
.strip-track span{color:var(--yellow); font-weight:800; font-size:16px; margin:0 24px;}
@keyframes go{from{transform:translateX(0);} to{transform:translateX(-50%);}}

section{padding:90px 0;}
.head-center{text-align:center; max-width:600px; margin:0 auto 56px;}
.head-center h2{font-size:clamp(30px,4vw,44px); color:var(--blue-deep); margin-top:14px;}
.head-center p{color:var(--muted); font-size:16px; margin-top:14px; line-height:1.6;}

/* SECTION BANDS */
.band-tint{background:var(--blue-tint);}

/* FEATURES */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feature-card{
  background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:30px 26px;
  box-shadow:6px 6px 0 var(--ink); transition:.15s;
}
.feature-card:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink);}
.feature-icon{
  width:54px; height:54px; border-radius:16px; background:var(--blue); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.feature-card h3{font-size:19px; margin-bottom:10px; color:var(--blue-deep);}
.feature-card p{font-size:14.5px; color:var(--muted); line-height:1.6;}

/* HOW IT WORKS */
.how{background:linear-gradient(160deg,var(--blue),var(--blue-deep)); color:#fff; border-radius:0;}
.how .head-center h2{color:#fff;}
.how .head-center p{color:#C9D9FA;}
.how-steps{display:flex; gap:24px; justify-content:space-between; position:relative;}
.how-step{flex:1; text-align:center; position:relative;}
.how-circle{
  width:76px; height:76px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px;
}
.how-step h4{font-size:17px; margin-bottom:8px;}
.how-step p{font-size:13.5px; color:#C9D9FA; line-height:1.55; max-width:200px; margin:0 auto;}
.how-dash{
  position:absolute; top:38px; left:calc(50% + 55px); width:calc(100% - 55px); height:0;
  border-top:3px dashed rgba(255,255,255,0.3);
}
.how-step:last-child .how-dash{display:none;}

/* TRACK / APP */
.track-inner{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.track-phone{
  background:#fff; border:2.5px solid var(--ink); border-radius:28px; padding:20px;
  box-shadow:8px 8px 0 var(--ink); max-width:320px; margin:0 auto;
}
.track-phone .bar{height:14px; background:var(--blue-tint); border-radius:8px; margin-bottom:12px;}
.track-phone .bar.w60{width:60%;}
.track-phone .bar.w80{width:80%;}
.track-map{background:var(--blue); border-radius:18px; height:180px; margin:14px 0; position:relative; overflow:hidden;}
.track-map svg{position:absolute; inset:0; width:100%; height:100%;}
.track-list div{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--blue-tint); font-size:13px; font-weight:600;}
.track-list div:first-child{border-top:none;}
.track-dot{width:10px; height:10px; border-radius:50%; background:var(--blue); border:2px solid var(--ink);}
.feature-list{list-style:none;}
.feature-list li{display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed var(--blue-tint-2);}
.feature-list li:first-child{padding-top:0;}
.check{
  width:26px; height:26px; border-radius:50%; background:var(--blue); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:800; color:#fff;
}
.feature-list b{display:block; margin-bottom:3px; color:var(--blue-deep);}
.feature-list span{font-size:14px; color:var(--muted);}

/* TESTIMONIALS */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{
  background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:28px 24px;
  position:relative;
}
.testi-card .stars{color:var(--yellow-dark); font-size:15px; margin-bottom:14px; letter-spacing:2px;}
.testi-card p{font-size:14.5px; color:var(--ink); line-height:1.6; margin-bottom:20px;}
.testi-person{display:flex; align-items:center; gap:10px;}
.testi-avatar{width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.testi-person b{font-size:13.5px; display:block;}
.testi-person span{font-size:12px; color:var(--muted);}

/* CTA */
.cta-section{
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)); border-radius:32px; border:3px solid var(--ink); padding:60px 50px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px;
  box-shadow:8px 8px 0 var(--ink); margin:0 30px;
}
.cta-section h2{font-size:clamp(26px,3.6vw,36px); color:#fff; max-width:440px;}
.cta-section p{color:#DCE8FF; margin-top:10px; font-size:15px;}
.cta-section .btn-big{background:var(--yellow); color:var(--ink);}

/* CONTACT CARDS */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;}
.contact-card{
  background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:28px 26px;
  box-shadow:6px 6px 0 var(--ink);
}
.contact-card .feature-icon{margin-bottom:14px;}
.contact-card h3{font-size:17px; margin-bottom:8px; color:var(--blue-deep);}
.contact-card p{font-size:14.5px; color:var(--muted); line-height:1.6;}
.contact-card a{color:var(--blue-deep); font-weight:700;}

/* STATS */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:10px;}
.stat-card{
  background:var(--blue-deep); color:#fff; border-radius:22px; padding:30px 20px; text-align:center;
  border:2.5px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
}
.stat-card .num{font-size:34px; font-weight:800; color:var(--yellow);}
.stat-card .lbl{font-size:13px; color:#C9D9FA; margin-top:6px;}

/* ABOUT VALUES */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.value-card{background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:28px 24px; box-shadow:6px 6px 0 var(--ink);}
.value-card .feature-icon{background:var(--blue-deep);}
.value-card h3{font-size:18px; margin-bottom:8px; color:var(--blue-deep);}
.value-card p{font-size:14px; color:var(--muted); line-height:1.6;}

/* FOOTER */
footer{background:var(--ink); color:#B9BFDB; padding:60px 0 24px; margin-top:80px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px;}
.footer-logo{display:flex; align-items:center; gap:10px; color:var(--blue-soft); font-weight:800; font-size:20px; margin-bottom:14px;}
.footer-grid p{font-size:13.5px; line-height:1.7; max-width:260px;}
.footer-grid h5{color:#fff; font-size:13px; margin-bottom:16px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:10px; font-size:13.5px;}
.footer-grid a:hover{color:var(--blue-soft);}
.footer-bottom{border-top:1px solid #333A5C; padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px;}

@media(max-width:900px){
  .navlinks{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:300px;}
  .feature-grid{grid-template-columns:1fr;}
  .how-steps{flex-direction:column; gap:36px;}
  .how-dash{display:none;}
  .track-inner{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .cta-section{flex-direction:column; align-items:flex-start; margin:0 16px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .value-grid{grid-template-columns:1fr;}
}

/* ============ ƏLAVƏ SƏHİFƏLƏR ÜÇÜN STİLLƏR ============ */
.navlinks{gap:22px;}
.navlinks a{font-size:13.8px;}

/* TARİFLƏR */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.price-card{
  background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:34px 28px;
  box-shadow:6px 6px 0 var(--ink); position:relative; display:flex; flex-direction:column;
}
.price-card.featured{background:var(--blue-deep); color:#fff;}
.price-card.featured .price-desc{color:#C9D9FA;}
.price-card.featured h3{color:#fff;}
.price-badge{position:absolute; top:-14px; right:24px; background:var(--yellow); color:var(--ink); font-weight:800; font-size:12px; padding:6px 14px; border-radius:999px; border:2px solid var(--ink);}
.price-card h3{font-size:20px; color:var(--blue-deep); margin-bottom:6px;}
.price-desc{color:var(--muted); font-size:13.5px; margin-bottom:18px; min-height:36px;}
.price-amount{font-size:34px; font-weight:800; margin-bottom:4px;}
.price-unit{font-size:13px; color:var(--muted); margin-bottom:20px;}
.price-card.featured .price-unit{color:#C9D9FA;}
.price-features{list-style:none; flex:1; margin-bottom:24px;}
.price-features li{padding:8px 0; font-size:14px; display:flex; gap:10px; align-items:flex-start;}
.price-features li:before{content:"✓"; color:var(--yellow-dark); font-weight:800;}
.price-card.featured .price-features li:before{color:var(--yellow);}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{background:#fff; border:2.5px solid var(--ink); border-radius:16px; margin-bottom:14px; padding:20px 24px;}
.faq-item h4{color:var(--blue-deep); font-size:15.5px; margin-bottom:8px;}
.faq-item p{color:var(--muted); font-size:14px; line-height:1.6;}

/* BLOQ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{background:#fff; border:2.5px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); transition:.15s; display:flex; flex-direction:column;}
.blog-card:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink);}
.blog-thumb{height:170px; background:linear-gradient(135deg,var(--blue-soft),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:40px;}
.blog-thumb img{width:100%; height:100%; object-fit:cover;}
.blog-body{padding:22px; flex:1; display:flex; flex-direction:column;}
.blog-date{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:8px;}
.blog-body h3{font-size:17px; color:var(--blue-deep); margin-bottom:10px; line-height:1.35;}
.blog-body p{font-size:13.5px; color:var(--muted); line-height:1.6; flex:1; margin-bottom:14px;}
.blog-link{font-weight:700; color:var(--blue); font-size:13.5px;}
.blog-single h1{font-size:clamp(26px,3.6vw,38px); color:var(--blue-deep); margin:18px 0;}
.blog-single .blog-date{margin-bottom:18px;}
.blog-content{max-width:760px; margin:0 auto; background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:36px; box-shadow:6px 6px 0 var(--ink); font-size:15.5px; line-height:1.85; color:var(--ink);}

/* MƏHSULLAR */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-card{background:#fff; border:2.5px solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:5px 5px 0 var(--ink); transition:.15s;}
.product-card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.product-thumb{height:140px; background:var(--blue-tint); display:flex; align-items:center; justify-content:center; font-size:38px;}
.product-thumb img{width:100%; height:100%; object-fit:cover;}
.product-body{padding:18px;}
.product-cat{font-size:11px; color:var(--blue); font-weight:700; text-transform:uppercase; margin-bottom:6px;}
.product-body h3{font-size:15px; color:var(--blue-deep); margin-bottom:6px;}
.product-body p{font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; min-height:38px;}
.product-price{font-weight:800; color:var(--ink); font-size:16px;}

/* FORMS */
.form-box{background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:34px; box-shadow:6px 6px 0 var(--ink); max-width:560px; margin:0 auto;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-weight:700; font-size:13.5px; margin-bottom:7px; color:var(--blue-deep);}
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:12px 14px; border:2px solid var(--ink); border-radius:12px; font-family:inherit; font-size:14px; background:var(--cream);
}
.form-row textarea{resize:vertical; min-height:100px;}
.btn-submit{
  background:var(--blue); color:#fff; font-weight:700; padding:14px 30px; border-radius:999px; border:2.5px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); font-size:15px; cursor:pointer; transition:.15s;
}
.btn-submit:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.alert-success{background:#DDF6E3; border:2px solid #1E9E4C; color:#1E9E4C; padding:14px 18px; border-radius:14px; font-weight:600; font-size:14px; margin-bottom:20px;}
.alert-error{background:#FDE0E0; border:2px solid #C0392B; color:#C0392B; padding:14px 18px; border-radius:14px; font-weight:600; font-size:14px; margin-bottom:20px;}

/* TRACK RESULT */
.track-result{background:#fff; border:2.5px solid var(--ink); border-radius:22px; padding:30px; box-shadow:6px 6px 0 var(--ink); max-width:560px; margin:30px auto 0;}
.track-result .status-pill{display:inline-block; background:var(--yellow); border:2px solid var(--ink); padding:6px 16px; border-radius:999px; font-weight:800; font-size:13px; margin-bottom:16px;}

@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr 1fr;}
}