/* Tabiat Go — sayt uslublari.
   Palitra ilovaning Theme.swift faylidan olingan: sayt va ilova bir xil yashilda
   gapirishi kerak, aks holda ikkisi boshqa-boshqa mahsulotdek ko'rinadi. */

:root{
  --paper:#F6F8F7; --card:#fff; --ink:#14211B; --muted:#5A6B62; --faint:#8D9B93;
  --green:#1E7A4B; --green-lit:#2E9E63; --green-soft:#E4F5EC; --green-deep:#145C38;
  --amber:#E0932F; --night:#0C1310; --line:#E2E9E5;
  --r:24px; --r-sm:14px;
  --shadow:0 1px 2px rgba(20,33,27,.04), 0 12px 32px -12px rgba(20,33,27,.14);
  --shadow-lift:0 2px 4px rgba(20,33,27,.05), 0 26px 50px -18px rgba(20,33,27,.24);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Inter,system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; letter-spacing:-.02em; line-height:1.08 }
p{ margin:0 }

.wrap{ width:min(1200px, 100% - 48px); margin-inline:auto }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:16px; top:16px; background:#fff; padding:10px 16px; border-radius:10px; z-index:100 }

/* ── Kiker + sarlavha ritmi ─────────────────────────────────────────── */
.kicker{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); margin-bottom:12px;
}
.kicker.light{ color:#8FF0C2 }
.lede{ font-size:19px; color:var(--muted); max-width:60ch }
.lede.light{ color:rgba(255,255,255,.72) }
.lede.dark{ color:var(--muted) }

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav{ position:fixed; inset:0 0 auto; z-index:50; transition:background .25s, box-shadow .25s, backdrop-filter .25s }
.nav.solid{ background:rgba(246,248,247,.86); backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--line) }
.nav-in{ display:flex; align-items:center; gap:28px; height:72px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.01em; color:#fff }
.nav.solid .brand{ color:var(--ink) }
.brand-mark{
  width:22px; height:22px; border-radius:7px; flex:none;
  background:linear-gradient(145deg,var(--green-lit),var(--green-deep));
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.18);
}
.nav-links{ display:flex; gap:26px; margin-left:auto; font-size:15px; font-weight:500; color:rgba(255,255,255,.85) }
.nav.solid .nav-links{ color:var(--muted) }
.nav-links a:hover{ color:#fff }
.nav.solid .nav-links a:hover{ color:var(--green) }

.btn{
  display:inline-block; background:var(--green); color:#fff; font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:999px; transition:transform .18s, background .18s, box-shadow .18s;
  box-shadow:0 10px 24px -10px rgba(30,122,75,.7);
}
.btn:hover{ background:var(--green-lit); transform:translateY(-1px) }
.btn-sm{ padding:9px 18px; font-size:14.5px; box-shadow:none }
.btn-ghost{ background:rgba(255,255,255,.12); box-shadow:none; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.34) }
.btn-ghost:hover{ background:rgba(255,255,255,.22) }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:min(92svh, 860px); display:flex; align-items:flex-end;
       padding:140px 0 72px; overflow:hidden; background:var(--night) }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* Ikki bosqichli skrim: tepada nav uchun, pastda matn uchun. Bitta tekis qatlam
   fotoni hamma joyda xiralashtiradi va baribir matnga kontrast bermaydi. */
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,12,9,.62) 0%, rgba(6,12,9,.18) 26%,
                                     rgba(6,12,9,.34) 56%, rgba(6,12,9,.86) 100%) }
.hero-in{ position:relative; color:#fff }
.hero h1{ font-size:clamp(2.6rem, 6.4vw, 5rem); font-weight:800; letter-spacing:-.035em; margin-bottom:22px }
.hero .lede{ font-size:clamp(17px, 2vw, 20px); color:rgba(255,255,255,.82) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }
.hero-credit{ margin-top:30px; font-size:13.5px; color:rgba(255,255,255,.55) }
.hero-credit strong{ color:rgba(255,255,255,.8); font-weight:600 }

/* ── Bo'limlar ─────────────────────────────────────────────────────── */
.sec{ padding:104px 0 }
.sec-alt{ background:#fff; border-block:1px solid var(--line) }
.sec-dark{ background:var(--night); color:#fff }
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42ch); gap:32px 56px;
           align-items:end; margin-bottom:52px }
.sec-head h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); font-weight:800 }
.sec-note{ font-size:15.5px; color:var(--muted) }
.empty{ color:var(--faint) }

/* ── Manzil kartalari ──────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:30px }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .28s, box-shadow .28s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift) }
.card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--green-soft) }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.card:hover .card-img img{ transform:scale(1.05) }
.chip{
  position:absolute; left:14px; top:14px; font-size:12.5px; font-weight:600; color:#0E1A14;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  padding:6px 13px; border-radius:999px;
}
.card-body{ padding:22px 24px 24px }
.card-body h3{ font-size:22px; font-weight:700 }
.card-region{ font-size:14px; color:var(--green); font-weight:600; margin-top:5px }
.card-desc{ font-size:15px; color:var(--muted); margin-top:11px; min-height:3em }
.facts{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
        display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.facts li{ display:flex; flex-direction:column; gap:2px }
.facts span{ font-size:15px; font-weight:700 }
.facts em{ font-size:11.5px; font-style:normal; color:var(--faint) }
.card-cost{ margin-top:18px; font-size:13.5px; color:var(--faint) }
.card-cost strong{ display:block; font-size:19px; color:var(--ink); margin-top:2px }
.card-cost span{ font-size:13px; color:var(--faint); font-weight:400 }
.card-credit{ margin-top:14px; font-size:12px; line-height:1.4; color:var(--faint) }

/* ── Viloyatlar ────────────────────────────────────────────────────── */
.regions{ display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr)); gap:14px }
.region{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
         padding:18px 20px; display:flex; align-items:baseline; gap:12px }
.region.has{ background:var(--green-soft); border-color:transparent }
.region-n{ font-size:26px; font-weight:800; color:var(--faint); line-height:1 }
.region.has .region-n{ color:var(--green) }
.region-name{ font-size:14.5px; font-weight:600; color:var(--muted) }
.region.has .region-name{ color:var(--green-deep) }

/* ── Ilova ─────────────────────────────────────────────────────────── */
.app-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:64px; align-items:center }
.app-copy h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); font-weight:800; margin-bottom:18px }
.features{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px }
.features li{ position:relative; padding-left:26px; font-size:16px; color:var(--muted) }
.features li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border-radius:50%; background:var(--green) }
.features strong{ color:var(--ink); font-weight:650 }
.soon{ margin-top:30px; font-size:14.5px; color:var(--faint);
  background:var(--green-soft); color:var(--green-deep); padding:14px 18px; border-radius:var(--r-sm) }
.app-shots{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.app-shots img{ border-radius:22px; box-shadow:var(--shadow-lift); border:1px solid var(--line) }
.app-shots img:last-child{ transform:translateY(28px) }

/* ── Hamkorlik ─────────────────────────────────────────────────────── */
.partner{ display:grid; gap:52px }
.partner h2{ font-size:clamp(1.8rem, 3.2vw, 2.7rem); font-weight:800; margin:12px 0 18px; max-width:22ch }
.partner-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px }
.pcard{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
        border-radius:var(--r); padding:26px }
.pcard h3{ font-size:18px; font-weight:700; margin-bottom:10px }
.pcard p{ font-size:15px; color:rgba(255,255,255,.66) }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot{ background:#fff; border-top:1px solid var(--line); padding:56px 0 }
.foot .brand{ color:var(--ink) }
.foot-in{ display:grid; grid-template-columns:minmax(0,1.4fr) auto auto; gap:36px; align-items:start }
.foot-note{ margin-top:12px; font-size:14.5px; color:var(--muted); max-width:42ch }
.foot-links{ display:grid; gap:10px; font-size:15px; color:var(--muted) }
.foot-links a:hover{ color:var(--green) }
.foot-copy{ font-size:14px; color:var(--faint) }

/* ── Moslashuvchanlik ──────────────────────────────────────────────── */
@media (max-width: 960px){
  .sec{ padding:76px 0 }
  .sec-head{ grid-template-columns:1fr; gap:18px; align-items:start }
  .app-grid{ grid-template-columns:1fr; gap:44px }
  .app-shots img:last-child{ transform:none }
  .foot-in{ grid-template-columns:1fr; gap:26px }
}
@media (max-width: 720px){
  body{ font-size:16px }
  .wrap{ width:min(1200px, 100% - 36px) }
  .nav-links{ display:none }
  .hero{ padding:120px 0 56px; min-height:min(88svh, 720px) }
  .facts{ grid-template-columns:repeat(2,1fr); gap:14px }
  .app-shots{ gap:14px }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important }
}

/* Footerdagi to'liq logotip. Nav'ga qo'yilmagan: logotip oq fon bilan chizilgan
   va ichida beshta belgi + shior bor — 22px da bu o'qilmaydigan dog'ga aylanadi.
   Nav uchun oddiy yashil belgi qoladi, logotip esa oq footerda to'liq ko'rinadi. */
.foot-logo{ width:min(300px, 76%); height:auto }