/* SafoAds — landing sahifalari uchun umumiy uslub.
   Bosh sahifa va xizmat sahifalari shu bitta faylni ishlatadi. */

@font-face{font-family:Manrope;src:url(/f/m600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/f/m800.woff2)format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#0a0e1a; --surface:#0d1320; --raised:#101625;
  --line:#1b2436; --line-soft:#161d2e;
  --text:#e8ecf5; --muted:#8b94a8; --dim:#5b6478;
  --accent:#3b82f6; --accent-soft:#93c5fd; --ok:#4ade80;
  --measure:36rem;
}

*{box-sizing:border-box;margin:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg); color:var(--text);
  font:600 16px/1.6 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.005em;
  padding-bottom:4rem;
}

.wrap{width:min(100% - 2rem,64rem);margin-inline:auto}

/* ---------- Sarlavhalar ---------- */

h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(2.1rem,7vw,3.6rem)}
h2{font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:-.025em}
h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3}

p{max-width:var(--measure)}
.lead{color:var(--muted);font-size:clamp(1rem,2.4vw,1.1875rem);line-height:1.55}
.text p{color:var(--muted);margin-top:1rem}
.text p b{color:var(--text)}

.nums{font-variant-numeric:tabular-nums}

/* ---------- Yuqori chiziq ---------- */

.top{display:flex;align-items:center;gap:.625rem;padding:1.125rem 0}
.top .logo{display:flex;align-items:center;gap:.625rem;color:var(--text);text-decoration:none}
.top img{width:30px;height:30px;border-radius:8px}
.top b{font-size:1.0625rem;letter-spacing:-.02em}
.top nav{display:none;margin-left:2rem;gap:1.5rem}
.top nav a{color:var(--muted);text-decoration:none;font-size:.875rem}
.top nav a:hover,.top nav a[aria-current]{color:var(--text)}
.top .btn{margin-left:auto}
@media(min-width:52rem){.top nav{display:flex}}

/* ---------- Yo'l (breadcrumb) ---------- */

.crumbs{font-size:.8125rem;color:var(--dim);padding-top:.5rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}

/* ---------- Tugmalar ---------- */

.btn{
  display:inline-block;padding:.8125rem 1.375rem;border-radius:11px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-weight:800;font-size:.9375rem;letter-spacing:-.01em;
  transition:background .14s ease;
}
.btn:hover,.btn:focus-visible{background:#2f6fe0}
.btn-sm{padding:.5rem .875rem;font-size:.8125rem;border-radius:9px}
.btn-quiet{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-quiet:hover,.btn-quiet:focus-visible{background:var(--raised);border-color:#2a3d6b}

a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Bo'limlar ---------- */

section{padding-block:clamp(3rem,8vw,5.5rem)}
section + section{border-top:1px solid var(--line-soft)}

.eyebrow{color:var(--dim);font-size:.8125rem;margin-bottom:.75rem}

/* ---------- Hero ---------- */

.hero{padding-top:clamp(2rem,6vw,3.5rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.hero p{margin-top:1.125rem}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.hero .cta small{color:var(--muted);font-size:.875rem}

/* ---------- Xizmat kartalari ---------- */

.services{margin-top:2rem;display:grid;gap:1rem}
@media(min-width:48rem){.services{grid-template-columns:repeat(3,1fr)}}

.svc-card{
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.375rem;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);color:var(--text);text-decoration:none;
  transition:border-color .14s ease,background .14s ease;
}
.svc-card:hover,.svc-card:focus-visible{border-color:#2a3d6b;background:var(--raised)}
.svc-card .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:.375rem;
}
.svc-card .ic svg{width:20px;height:20px}
.svc-card p{color:var(--muted);font-size:.9375rem;line-height:1.5}
.svc-card .price-line{margin-top:auto;padding-top:.75rem;font-size:.875rem;color:var(--muted)}
.svc-card .price-line b{color:var(--text)}
.svc-card .more{color:var(--accent-soft);font-size:.875rem}

.t0{background:rgba(59,130,246,.16);color:#93c5fd}
.t1{background:rgba(139,92,246,.16);color:#c4b5fd}
.t2{background:rgba(34,197,94,.16);color:#86efac}
.t3{background:rgba(245,158,11,.16);color:#fcd34d}

/* ---------- Ro'yxat (afzalliklar) ---------- */

.points{margin-top:2rem;display:grid;gap:1.5rem;list-style:none;padding:0}
@media(min-width:48rem){.points{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem}}
.points li{padding-left:1.75rem;position:relative}
.points li::before{
  content:"";position:absolute;left:0;top:.45rem;
  width:9px;height:9px;border-radius:3px;background:var(--accent);
}
.points p{margin-top:.375rem;color:var(--muted);font-size:.9375rem;line-height:1.5}

/* ---------- Tekshirish yo'li ---------- */

.check{
  margin-top:2rem;padding:1.5rem;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);max-width:42rem;
}
.check ol{margin-top:.75rem;padding-left:1.25rem;color:var(--muted);font-size:.9375rem;display:grid;gap:.375rem}
.check ol b{color:var(--text)}

/* ---------- Qadamlar ---------- */

.steps{margin-top:2.25rem;display:grid;gap:1.75rem;counter-reset:s}
@media(min-width:48rem){.steps{grid-template-columns:repeat(3,1fr);gap:2.25rem}}

.step{counter-increment:s;padding-top:1rem;border-top:2px solid var(--line)}
.step::before{content:counter(s);display:block;color:var(--dim);font-size:.8125rem;margin-bottom:.5rem}
.step p{margin-top:.5rem;color:var(--muted);font-size:.9375rem;line-height:1.5}

/* ---------- Narx ---------- */

.price{margin-top:2rem;width:100%;border-collapse:collapse;max-width:40rem;text-align:left}
.price th,.price td{padding:.875rem .5rem .875rem 0;border-bottom:1px solid var(--line-soft)}
.price th{color:var(--muted);font-size:.8125rem;font-weight:600}
.price td:last-child,.price th:last-child{text-align:right;padding-right:0}
.price .svc{font-weight:800}
.price .svc a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.price .svc a:hover{border-bottom-color:var(--accent)}
.price .sub{display:block;color:var(--dim);font-size:.8125rem;font-weight:600;margin-top:2px}
.price .amt{font-weight:800;white-space:nowrap}

.note{margin-top:1.25rem;color:var(--dim);font-size:.8125rem}

/* ---------- Savollar ---------- */

.faq{margin-top:1.5rem;max-width:42rem}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  padding:1.0625rem 2rem 1.0625rem 0;cursor:pointer;position:relative;
  font-weight:800;font-size:1rem;letter-spacing:-.015em;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.375rem;top:1.5rem;
  width:9px;height:9px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .16s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq p{padding-bottom:1.125rem;color:var(--muted);font-size:.9375rem;line-height:1.6}

/* ---------- Boshqa xizmatlar / bot egalari ---------- */

.owners{
  margin-top:2rem;padding:1.75rem;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);max-width:42rem;
}
.owners p{margin-top:.625rem;color:var(--muted);font-size:.9375rem}
.owners a{margin-top:1.25rem;display:inline-block}

.related{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Pastki qism ---------- */

footer{padding-top:2.5rem;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.875rem}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-bottom:1.25rem}
footer a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{border-bottom-color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}