/* =====================================================================
   GULIN — landing page styles
   ---------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED
     1. Colours          ← change colours here only
     2. Sizes & font
     3. Basics           (whole page, icons, photo frames)
     4. Top bar          (also used by the footer's first row)
     5. Banner
     6. Shared section styles
     7. Portfolio
     8. About
     9. Contact
    10. Footer
    11. Phone bottom bar
    12. Language switch animation
    13. Smaller screens  (laptop → tablet → phone, largest first)
   ===================================================================== */


/* =====================================================================
   1. COLOURS
   ===================================================================== */
:root {

  /* ---- Main palette (from the Figma design) ---- */
  --color-ink:        #22251F;   /* main text, headings                 */
  --color-muted:      #65695F;   /* grey text, descriptions             */
  --color-line:       #DDDFD5;   /* thin lines and borders              */
  --color-bg:         #F6F6F0;   /* page background                     */
  --color-band:       #ECEDE5;   /* grey band "Bizning asosiy qoidamiz" */
  --color-red:        #ED4545;   /* brand red: buttons, accents         */
  --color-white:      #FFFFFF;
  --color-photo-bg:   #E9E8DF;   /* shown behind photos while loading   */

  /* ---- Top bar ---- */
  --nav-bg:               var(--color-bg);
  --nav-border:           var(--color-line);
  --nav-logo-text:        var(--color-ink);     /* "GULIN" */
  --nav-link:             var(--color-ink);     /* Ishlarimiz, Biz haqimizda, Aloqa */
  --nav-link-hover:       var(--color-red);
  --nav-link-underline:   var(--color-red);     /* short line under the active link */

  /* ---- Language switch (UZ / RUS) ---- */
  --lang-bg:              var(--color-white);
  --lang-border:          var(--color-line);
  --lang-text:            var(--color-ink);
  --lang-active-bg:       var(--color-red);     /* sliding pill */
  --lang-active-text:     var(--color-white);

  /* ---- Red buttons ("Qo'ng'iroq", "Bepul o'lchov") ---- */
  --button-bg:            var(--color-red);
  --button-text:          var(--color-white);

  /* ---- Banner ---- */
  --hero-bg:              var(--color-bg);
  --hero-title:           var(--color-ink);     /* "Uyingiz uchun mukammal pardalar" */
  --hero-text:            var(--color-muted);   /* "O'lchab olishdan tortib ..." */
  --hero-card-bg:         rgba(246, 246, 240, 0.95);  /* card on the photo */
  --hero-card-label:      var(--color-muted);   /* "PORTFOLIO" */
  --hero-card-title:      var(--color-ink);     /* "Ishlarimizni ko'ring" */
  --hero-card-circle:     var(--color-red);     /* round arrow button */

  /* ---- Portfolio ---- */
  --works-bg:             var(--color-bg);
  --works-kicker:         var(--color-red);     /* "Portfolio" */
  --works-title:          var(--color-ink);     /* "Bizning ishlarimiz" */
  --works-text:           var(--color-muted);   /* "Mijozlarimiz uylarida ..." */
  --works-arrow-bg:       var(--color-bg);      /* back arrow button */
  --works-arrow-border:   var(--color-line);
  --works-arrow-next-bg:  var(--color-red);     /* next arrow button */
  --works-dot:            var(--color-line);    /* inactive dots */
  --works-dot-active:     var(--color-red);     /* active long dot */
  --works-count:          var(--color-ink);     /* "01" */
  --works-count-total:    var(--color-muted);   /* "04" */

  /* ---- About ---- */
  --about-bg:             var(--color-bg);
  --about-title:          var(--color-ink);     /* "Biz haqimizda" */
  --about-brand:          var(--color-red);     /* red "GULIN" */
  --about-head:           var(--color-ink);     /* "Har bir oyna uchun alohida yondashuv" */
  --about-text:           var(--color-muted);
  --about-caption:        var(--color-muted);   /* "Har bir xona uchun ..." */
  --about-caption-line:   var(--color-red);     /* small red line next to caption */
  --steps-title:          var(--color-ink);     /* "Buyurtmadan yuvishgacha" */
  --steps-line:           var(--color-line);    /* line above each step */
  --steps-number:         var(--color-red);     /* 01 02 03 04 */
  --steps-head:           var(--color-ink);
  --steps-text:           var(--color-muted);
  --rule-bg:              var(--color-band);    /* grey band */
  --rule-label:           var(--color-muted);   /* "Bizning asosiy qoidamiz" */
  --rule-text:            var(--color-ink);     /* big quote */
  --rule-link:            var(--color-red);     /* "Ishlarimizni ko'ring" */

  /* ---- Contact ---- */
  --contact-bg:           var(--color-bg);
  --contact-title:        var(--color-ink);     /* "Aloqa" */
  --contact-head:         var(--color-ink);     /* "Biz bilan bog'laning" */
  --contact-btn-bg:       var(--color-white);   /* Telegram bot / Instagram / Telegram kanal */
  --contact-btn-border:   var(--color-line);
  --contact-btn-hover:    var(--color-red);
  --contact-btn-text:     var(--color-ink);
  --contact-main-bg:      var(--color-red);     /* big "Qo'ng'iroq qilish" */
  --contact-main-text:    var(--color-white);
  --hours-line:           var(--color-line);
  --hours-title:          var(--color-ink);     /* "Ish vaqtlari" */
  --hours-days:           var(--color-ink);     /* "Du-Sha: 9:00 - 19:00." */
  --hours-off:            var(--color-muted);   /* "Yakshanba dam olish kuni" */

  /* ---- Footer ---- */
  --footer-bg:            var(--color-bg);
  --footer-border:        var(--color-line);
  --footer-tagline:       var(--color-muted);   /* "Har bir oyna uchun alohida yondashuv." */
  --footer-link:          var(--color-ink);     /* Telegram bot / Instagram / Telegram kanal */
  --footer-copyright:     var(--color-muted);
  --footer-copyright-hover: var(--color-red);   /* developer link on hover */
  --footer-hours:         var(--color-ink);
  --footer-hours-off:     var(--color-muted);

  /* ---- Phone bottom bar (phones only) ---- */
  --mbar-bg:              var(--color-bg);
  --mbar-border:          var(--color-line);
  --mbar-call-bg:         var(--color-red);     /* Qo'ng'iroq */
  --mbar-call-text:       var(--color-white);
  --mbar-ig-bg:           var(--color-white);   /* Instagram */
  --mbar-ig-text:         var(--color-ink);


/* =====================================================================
   2. SIZES & FONT
   ===================================================================== */
  --page-width:   1440px;   /* widest the content gets on big screens */
  --side-space:   64px;     /* left/right space (32px laptop, 16px phone — see part 13) */
  --font-main:    Inter, system-ui, sans-serif;
}


/* =====================================================================
   3. BASICS (whole page)
   ===================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;          /* menu links glide to the section */
}

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

/* Centred content column used by every section */
.wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--side-space);
}

/* Leaves room for the sticky top bar when jumping to a section */
section {
  scroll-margin-top: 104px;
}

/* ---- Icons (files in assets/icons — all are red) ---- */
.ic {
  width: 20px;
  height: 20px;
  flex: none;
}
.ic16 { width: 16px; height: 16px; }
.ic24 { width: 24px; height: 24px; }

.ic.white {                         /* red icon → white (on red buttons) */
  filter: brightness(0) invert(1);
}
.ic.dark {                          /* red icon → dark (back arrow) */
  filter: brightness(0);
  opacity: 0.88;
}

/* ---- Photo frames ---- */
.ph {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-photo-bg);
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* fills the frame, crops the edges */
}


/* =====================================================================
   4. TOP BAR  (also used by the footer's first row)
   ===================================================================== */
header {
  position: sticky;                 /* stays on top while scrolling */
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

header .bar {
  height: 104px;
}

.bar {
  display: flex;
  align-items: center;
  gap: 36px;
}

/* GULIN (logo + text) */
.brand {
  width: 285px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nav-logo-text);
  font-size: 30px;
  font-weight: 400;
}

/* Logo picture (assets/images/logo) */
.brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

/* Menu: Ishlarimiz / Biz haqimizda / Aloqa
   (main.js gives all three the same width so they don't move between languages) */
.links {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 36px;
}

.links a {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;          /* word centred in its slot */
  color: var(--nav-link);
  font-size: 14px;
  font-weight: 500;
}

.links a:hover {
  color: var(--nav-link-hover);
}

/* Active menu item (the section on screen) */
.links a.on {
  font-weight: 600;
}

.links a.on::after {                /* short red line, centred under the word */
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  width: 24px;
  height: 2px;
  background: var(--nav-link-underline);
  transform: translateX(-50%);
}

/* Right side: language switch + call button */
.tools {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* UZ / RUS box (the sliding red pill is in part 12) */
.lang {
  position: relative;
  height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lang-bg);
  border: 1px solid var(--lang-border);
  border-radius: 8px;
}

/* UZ, RUS */
.lang button {
  position: relative;
  z-index: 1;                       /* text sits above the red pill */
  width: 44px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--lang-text);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.35s;
}

/* Selected language */
.lang button.on {
  color: var(--lang-active-text);
  font-weight: 600;
}

/* Qo'ng'iroq — fixed width so it doesn't change size between languages */
.call {
  width: 145px;
  height: 44px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* text left, icon pinned right */
  gap: 18px;
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}


/* =====================================================================
   5. BANNER
   ===================================================================== */
.hero {
  background: var(--hero-bg);
}

.hero .wrap {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Left column (texts + button) */
.hero-l {
  flex: 1 1 0;
  min-height: 680px;
  padding: 36px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Uyingiz uchun mukammal pardalar */
.hero h1 {
  color: var(--hero-title);
  font-size: clamp(42px, 5.4vw, 78px);   /* 78px on big screens, smaller on small */
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

/* O'lchab olishdan tortib ... Barchasi bir joyda! */
.hero p {
  max-width: 460px;
  color: var(--hero-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

/* Bepul o'lchov — fixed width (fits the longer Russian text) */
.cta {
  align-self: flex-start;
  width: 242px;
  height: 56px;
  margin-top: 8px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* arrow pinned right */
  gap: 32px;
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
}

/* Right column (banner photo) */
.hero-r {
  position: relative;
  width: min(624px, 46%);
  aspect-ratio: 624 / 680;
  flex: none;
}

/* Card on the photo: PORTFOLIO / Ishlarimizni ko'ring */
.pcard {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 304px;
  max-width: calc(100% - 48px);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--hero-card-bg);
  border-radius: 8px;
}

.pcard small {                      /* PORTFOLIO */
  display: block;
  margin-bottom: 7px;
  color: var(--hero-card-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.pcard b {                          /* Ishlarimizni ko'ring */
  color: var(--hero-card-title);
  font-size: 22px;
  font-weight: 500;
}

.dot-btn {                          /* round red arrow button */
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--hero-card-circle);
  border-radius: 100px;
}


/* =====================================================================
   6. SHARED SECTION STYLES (Portfolio, About, Contact)
   ===================================================================== */

/* Thin line between sections */
.sec {
  border-top: 1px solid var(--color-line);
}

/* Big section titles: Bizning ishlarimiz / Biz haqimizda / Aloqa */
.h56 {
  font-size: clamp(36px, 3.9vw, 56px);
  font-weight: 500;
  line-height: 1.1;
}

/* Description text */
.lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}


/* =====================================================================
   7. PORTFOLIO
   ===================================================================== */
.works {
  background: var(--works-bg);
}

.works .wrap {
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Top row: titles left, arrows right */
.works-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.works-top .t {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kicker {                           /* Portfolio (small red word) */
  color: var(--works-kicker);
  font-size: 14px;
  font-weight: 500;
}

.works .h56 {                       /* Bizning ishlarimiz */
  color: var(--works-title);
}

/* Arrow buttons */
.arrows {
  display: flex;
  gap: 12px;
}

.arrows button {                    /* back arrow (light) */
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--works-arrow-bg);
  border: 1px solid var(--works-arrow-border);
  border-radius: 8px;
  cursor: pointer;
}

.arrows button.nx {                 /* next arrow (red) */
  background: var(--works-arrow-next-bg);
  border-color: var(--works-arrow-next-bg);
}

/* Slider window + moving row of photos */
.viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.row {
  display: flex;
  gap: 24px;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);   /* slide speed */
}

.row .card {                        /* one photo (3 visible on computer) */
  flex: 0 0 calc((100% - 48px) / 3);
  aspect-ratio: 421 / 464;
}

/* Bottom row: description left, counter right */
.works-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.works .lead {                      /* Mijozlarimiz uylarida ... */
  color: var(--works-text);
}

/* 01  ━ ● ● ●  04 */
.count {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.count .cur {                       /* 01 */
  color: var(--works-count);
  font-weight: 500;
}

.count .tot {                       /* 04 */
  color: var(--works-count-total);
  font-weight: 400;
}

.dots {
  display: flex;
  gap: 8px;
}

.dots i {                           /* small round dot */
  width: 8px;
  height: 8px;
  background: var(--works-dot);
  border-radius: 100px;
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}

.dots i.on {                        /* long red dot = current photo */
  width: 32px;
  background: var(--works-dot-active);
}


/* =====================================================================
   8. ABOUT (Biz haqimizda)
   ===================================================================== */
.about {
  background: var(--about-bg);
}

.about .wrap {
  padding-top: 56px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.about .h56 {                       /* Biz haqimizda */
  color: var(--about-title);
}

/* Row: text left, photo right */
.about-row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.about-l {
  flex: 1 1 0;
  max-width: 688px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-l .brand-red {               /* GULIN (red) */
  color: var(--about-brand);
  font-size: clamp(34px, 3.3vw, 48px);
  font-weight: 500;
}

.about-l h3 {                       /* Har bir oyna uchun alohida yondashuv */
  color: var(--about-head);
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.08;
}

.about-l p {                        /* Biz pardalarni o'z jamoamiz bilan ... */
  color: var(--about-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

/* Photo column */
.about-r {
  width: min(560px, 42%);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-r .ph {
  aspect-ratio: 560 / 536;
}

/* Har bir xona uchun o'ziga xos pardalar.  ━━ */
.capline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--about-caption);
  font-size: 13px;
  font-weight: 400;
}

.capline i {                        /* small red line */
  width: 40px;
  height: 2px;
  background: var(--about-caption-line);
}

/* ---- Buyurtmadan yuvishgacha (4 steps) ---- */
.steps-wrap {
  padding-bottom: 80px;
}

.steps-wrap h3 {
  margin-bottom: 32px;
  color: var(--steps-title);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.2;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--steps-line);
}

.step .n {                          /* 01 / 02 / 03 / 04 */
  color: var(--steps-number);
  font-size: 14px;
  font-weight: 500;
}

.step h4 {                          /* step title */
  color: var(--steps-head);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.step p {                           /* step description */
  color: var(--steps-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* ---- Grey band: Bizning asosiy qoidamiz ---- */
.band {
  background: var(--rule-bg);
}

.band .wrap {
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.band .lbl {                        /* Bizning asosiy qoidamiz */
  color: var(--rule-label);
  font-size: 14px;
  font-weight: 500;
}

.band blockquote {                  /* Sifatli pardalar, eksklyuziv yondashuv ... */
  max-width: 1136px;
  color: var(--rule-text);
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 500;
  line-height: 1.2;
}

.band a {                           /* Ishlarimizni ko'ring → */
  align-self: flex-start;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rule-link);
  font-size: 15px;
  font-weight: 500;
}


/* =====================================================================
   9. CONTACT (Aloqa)
   ===================================================================== */
.contact {
  background: var(--contact-bg);
}

.contact .wrap {
  padding-top: 56px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.contact .h56 {                     /* Aloqa */
  color: var(--contact-title);
}

/* Row: buttons left, photo right */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.contact-l {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-l h3 {                     /* Biz bilan bog'laning */
  margin-bottom: 28px;
  color: var(--contact-head);
  font-size: clamp(34px, 3.3vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}

/* List of contact buttons */
.btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {                              /* Telegram bot / Instagram / Telegram kanal */
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--contact-btn-bg);
  border: 1px solid var(--contact-btn-border);
  border-radius: 8px;
  color: var(--contact-btn-text);
  font-size: 18px;
  font-weight: 500;
  transition: border-color 0.2s;
}

.btn:hover {
  border-color: var(--contact-btn-hover);
}

.btn span {                         /* icon + text group */
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn.main {                         /* big red Qo'ng'iroq qilish */
  height: 72px;
  background: var(--contact-main-bg);
  border-color: var(--contact-main-bg);
  color: var(--contact-main-text);
  font-weight: 600;
}

/* ---- Ish vaqtlari ---- */
.hours {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--hours-line);
}

.hours h4 {                         /* Ish vaqtlari */
  color: var(--hours-title);
  font-size: 24px;
  font-weight: 500;
}

.hours p {                          /* Du-Sha: 9:00 - 19:00. */
  color: var(--hours-days);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.hours p + p {                      /* Yakshanba dam olish kuni */
  margin-top: -8px;
  color: var(--hours-off);
}

/* Photo column */
.contact-r {
  width: min(560px, 42%);
  flex: none;
}

.contact-r .ph {
  aspect-ratio: 560 / 600;
}


/* =====================================================================
   10. FOOTER
   ===================================================================== */
footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

footer .wrap {
  padding-top: 40px;
  padding-bottom: 32px;
}

/* Top part: 3 columns — logo+slogan | menu+links | call button */
.fgrid {
  padding-bottom: 32px;
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

.fbrand {                           /* logo + slogan, one under the other */
  width: 285px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fmid {                             /* menu above the social links */
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

footer .tag {                       /* Hammasi sizning qulayligingiz uchun */
  color: var(--footer-tagline);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

footer .soc {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

footer .soc a {                     /* Telegram bot ↗ / Instagram ↗ / Telegram kanal ↗ */
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--footer-link);
  font-size: 14px;
  font-weight: 500;
}

/* Row 3: copyright + hours */
.f3 {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--footer-border);
  font-size: 13px;
  font-weight: 400;
}

.f3 .c {                            /* © GULIN. Barcha huquqlar himoyalangan. */
  color: var(--footer-copyright);
}

.f3 a.dev:hover {                   /* developer link */
  color: var(--footer-copyright-hover);
}

.f3 .h {
  display: flex;
  gap: 28px;
}

.f3 .h span {                       /* Du-Sha: 9:00 - 19:00. */
  color: var(--footer-hours);
}

.f3 .h span + span {                /* Yakshanba dam olish kuni */
  color: var(--footer-hours-off);
}


/* =====================================================================
   11. PHONE BOTTOM BAR  (hidden here, shown on phones in part 13)
   ===================================================================== */
.mbar {
  display: none;
}


/* =====================================================================
   12. LANGUAGE SWITCH ANIMATION
   ===================================================================== */

/* Red pill that slides under UZ / RUS */
.lang::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 14px;
  width: 44px;
  height: 32px;
  background: var(--lang-active-bg);
  border-radius: 6px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang.is-ru::before {
  transform: translateX(54px);      /* button width 44 + gap 10 */
}

/* Texts fade out and in while the language changes */
[data-i18n] {
  transition: opacity 0.25s ease;
}

body.lang-switching [data-i18n] {
  opacity: 0;
}


/* =====================================================================
   13. SMALLER SCREENS  (largest first — each one adds to the one above)
   ===================================================================== */

/* ---- Laptops & tablets in landscape (up to 1180px) ---- */
@media (max-width: 1180px) {
  :root {
    --side-space: 32px;
  }
  .brand {
    width: auto;
  }
  .hero .wrap,
  .about-row,
  .contact-row {
    gap: 40px;
  }
  .hero-l {
    min-height: 0;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);   /* steps in 2 columns */
  }
  .fbrand {
    width: auto;
  }
}

/* ---- Tablets upright & phones (up to 860px) ---- */
@media (max-width: 860px) {
  :root {
    --side-space: 16px;
  }
  section {
    scroll-margin-top: 68px;
  }
  body {
    padding-bottom: 76px;           /* room for the bottom bar */
  }

  /* Top bar: only logo + language switch */
  header .bar {
    height: 68px;
    justify-content: space-between;
  }
  header .links,
  header .call {
    display: none;
  }
  .brand {
    gap: 10px;
    font-size: 24px;
  }
  .brand img {
    width: 36px;
    height: 36px;
  }
  .lang {
    height: 40px;
    padding: 0 4px;
    gap: 4px;
  }
  .lang button {
    width: 42px;
    height: 30px;
  }
  .lang::before {
    top: 4px;
    left: 4px;
    width: 42px;
    height: 30px;
  }
  .lang.is-ru::before {
    transform: translateX(46px);    /* button width 42 + gap 4 */
  }

  /* Banner: text on top, photo below */
  .hero .wrap {
    flex-direction: column;
    align-items: stretch;
    padding-top: 28px;
    padding-bottom: 40px;
    gap: 28px;
  }
  .hero-l {
    flex: none;
    padding: 0;
    gap: 20px;
  }
  .hero p,
  .lead,
  .about-l p {
    font-size: 17px;
  }
  .hero-r {
    width: 100%;
    aspect-ratio: 1 / 1.05;
  }
  .pcard {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 16px;
  }
  .pcard b {
    font-size: 19px;
  }

  /* Portfolio: one photo at a time */
  .works .wrap {
    padding-top: 56px;
    padding-bottom: 56px;
    gap: 28px;
  }
  .arrows button {
    width: 48px;
    height: 48px;
  }
  .row {
    gap: 16px;
  }
  .row .card {
    flex-basis: 100%;
  }
  .works-bot {
    flex-direction: column;
    align-items: flex-start;
  }

  /* About + Contact: stacked */
  .about .wrap,
  .contact .wrap {
    padding-top: 48px;
    padding-bottom: 56px;
    gap: 32px;
  }
  .about-row,
  .contact-row {
    flex-direction: column;
    align-items: stretch;
  }
  .about-l {
    max-width: none;
  }
  .about-r,
  .contact-r {
    width: 100%;
  }
  .steps-wrap {
    padding-bottom: 56px;
  }
  .steps {
    grid-template-columns: 1fr;     /* steps one under another */
    gap: 24px;
  }
  .step h4 {
    font-size: 21px;
  }
  .band .wrap {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .btn {
    font-size: 17px;
  }

  /* Footer: logo + slogan, then menu and links centred */
  .fgrid {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .fbrand {
    gap: 12px;
  }
  .fmid {
    align-items: center;
    gap: 16px;
  }
  footer .links {
    flex: none;
    justify-content: center;
    gap: 24px;
  }
  footer .soc {
    justify-content: center;
    gap: 20px 28px;
  }
  footer .tools {
    display: none;
  }
  .f3 {
    flex-direction: column;
    align-items: flex-start;
  }
  .f3 .h {
    flex-direction: column;
    gap: 4px;
  }

  /* Bottom bar: Qo'ng'iroq + Instagram */
  .mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: var(--mbar-bg);
    border-top: 1px solid var(--mbar-border);
  }
  .mbar a {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
  }
  .mbar a.r {                       /* Qo'ng'iroq */
    background: var(--mbar-call-bg);
    color: var(--mbar-call-text);
  }
  .mbar a.w {                       /* Instagram */
    background: var(--mbar-ig-bg);
    color: var(--mbar-ig-text);
    border: 1px solid var(--mbar-border);
  }
}

/* ---- Tablets upright only (600–860px): use the extra width ---- */
@media (min-width: 600px) and (max-width: 860px) {
  .hero-r {
    aspect-ratio: 16 / 11;          /* wide banner photo instead of a tall one */
  }
  .row .card {
    flex-basis: calc((100% - 16px) / 2);   /* 2 portfolio photos side by side */
  }
  .works-bot {
    flex-direction: row;
    align-items: center;
  }
  .about-r .ph {
    aspect-ratio: 16 / 11;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);   /* steps in 2 columns */
    gap: 32px 24px;
  }
  .contact-r .ph {
    aspect-ratio: 16 / 10;
  }
}

/* ---- Phones (up to 599px) ---- */
@media (max-width: 599px) {
  .hero h1 {
    font-size: clamp(36px, 10.5vw, 46px);
  }
  .h56 {
    font-size: clamp(32px, 9vw, 40px);
  }
  .about-l h3 {
    font-size: clamp(30px, 8.6vw, 38px);
  }
  .about-r .ph {
    aspect-ratio: 4 / 3.4;
  }
  .contact-r .ph {
    aspect-ratio: 4 / 3;            /* smaller photo under the contact buttons */
  }
}

/* ---- Very small phones (up to 374px) ---- */
@media (max-width: 374px) {
  .brand {
    gap: 10px;
    font-size: 21px;
  }
  .brand img {
    width: 32px;
    height: 32px;
  }
  footer .links {
    gap: 12px;
  }
}