/* =========================================================
   Jahongir Usmanov — creative producer
   Yo'nalish: "MONTAJ STOLI" — montaj xonasi tili
   O'tkir burchaklar · ingichka chiziqlar · timecode metadata
   ========================================================= */

/* ---------- TOKENLAR ---------- */
:root{
  /* Palitra: qizil #790602 · bej #F5EFE1 · to'q kulrang #1f1f1f · qora #000000 */
  --ink:#000000;
  --ink-2:#1F1F1F;
  --ink-3:#0B0B0B;

  /* Oq matn */
  --bone:#F5EFE1;
  --bone-2:rgba(245,239,225,.72);
  --bone-3:rgba(245,239,225,.45);

  /* Chiziqlar — shaffof oq, qizil panelda ham, qorada ham ishlaydi */
  --rule:rgba(255,255,255,.11);
  --rule-2:rgba(255,255,255,.22);

  /* Jonli qizil */
  --ember:#790602;
  --ember-2:#C2301E;      /* qorong'i fonda kichik qizil yozuvlar o'qilishi uchun ochroq tus */
  --ember-3:#520401;
  --red-deep:#2A0200;

  /* Panel: qizil mesh gradient ichida tutunli qora dog'lar */
  --panel:
    radial-gradient(54% 74% at 78% 16%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(46% 66% at 22% 88%, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 64%),
    radial-gradient(38% 52% at 62% 62%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 66%),
    radial-gradient(120% 140% at 8% 6%, #9B0F09 0%, #790602 26%, #520401 58%, #2A0200 88%, #0B0100 100%);
  --panel-r:22px;

  /* Tipografika */
  /* Referens: Poppins — sarlavha ExtraBold, qolgan hammasi oddiy yozuvda */
  --display:'Poppins','Helvetica Neue',Arial,sans-serif;
  --body:'Poppins','Helvetica Neue',Arial,sans-serif;

  /* Layout */
  --wrap:1320px;
  --gut:28px;
  --sec-y:clamp(72px,9vw,128px);
  --nav-h:60px;

  /* Motion */
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ember);color:var(--bone)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec-y);position:relative}

.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 18px;background:var(--ember)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* =========================================================
   FON — jim. Qizil dog'lar yo'q, faqat don va vinyetka
   ========================================================= */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--ink)}
.bg__warm{
  position:absolute;inset:0;
  /* Shisha faqat orqasida rang bo'lsa ko'rinadi — shuning uchun doimiy nurlar */
  background:
    radial-gradient(52% 44% at 82% 6%,rgba(121,6,2,0.42),transparent 70%),
    radial-gradient(40% 40% at 4% 54%,rgba(155,15,9,0.17),transparent 72%),
    radial-gradient(50% 42% at 60% 106%,rgba(121,6,2,0.32),transparent 72%),
    radial-gradient(28% 24% at 36% 28%,rgba(121,6,2,0.1),transparent 70%);
}
.bg__grain{
  position:absolute;inset:-120px;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.bg__vig{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 130% 90% at 50% 0%,transparent 44%,rgba(0,0,0,.72) 100%);
}

main{position:relative;z-index:1}
.footer{position:relative;z-index:1}

/* =========================================================
   PANEL — qizil gradient yuza, endi shisha qirrasi bilan
   ========================================================= */
.panel{
  position:relative;
  background:var(--panel);
  border-radius:var(--panel-r);
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 50px 90px -50px rgba(121,6,2,0.95),
    0 30px 60px -30px rgba(0,0,0,.9);
}
/* Qirradagi yorug'lik sinishi */
.panel::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,
    rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 22%,
    rgba(255,255,255,0) 50%,rgba(255,255,255,.08) 78%,rgba(255,255,255,.26) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;z-index:2;
}
/* Yuqoridagi yaltiroq — shisha yuzasi */
.panel::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(172deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 18%,rgba(255,255,255,0) 34%);
}
/* Panel ichida hamma narsa oq */
.panel,.panel .meta,.panel .lead{color:var(--bone)}
.panel .meta{color:rgba(245,239,225,.62)}
.panel .lead{color:rgba(245,239,225,.78)}

/* =========================================================
   LIQUID GLASS
   Manbalar: Apple HIG (WWDC25), kube.io, LogRocket, buildmvpfast.
   Shishani shisha qiladigan 4 narsa:
   1) yorqin yuqori qirra — eng muhimi (30% da panel yassilanadi)
   2) yupqa blur + yuqori to'yinganlik — orqa rang o'chmaydi
   3) ichki pastki nur — qalinlik hissi
   4) orqada rang — qora ustida shisha ko'rinmaydi
   Chrome'da JS qo'shimcha ravishda haqiqiy sinish qo'shadi.
   ========================================================= */
:root{
  --lg-base:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.045) 58%,rgba(255,255,255,.07) 100%);
}
.lg{
  position:relative;
  isolation:isolate;
  border-radius:var(--lg-r,22px);
  background:var(--lg-base);
  -webkit-backdrop-filter:blur(var(--lg-blur,14px)) saturate(185%);
          backdrop-filter:blur(var(--lg-blur,14px)) saturate(185%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,var(--lg-spec,.62)),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 -22px 34px -26px rgba(255,255,255,.16),
    0 1px 2px rgba(0,0,0,.45),
    0 22px 54px -24px rgba(0,0,0,.85);
  transition:transform .55s var(--e-out),box-shadow .45s var(--e);
}
/* Qirra: yorug'lik yuqori-chapdan tushadi, pastki-o'ngda aks etadi */
.lg::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(145deg,
    rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 18%,
    rgba(255,255,255,.04) 45%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
}
/* Kursor turgan joyda shisha yorishadi */
.lg::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.12),transparent 62%);
  opacity:0;transition:opacity .45s var(--e);
}
.lg:hover::after{opacity:1}
.lg:hover{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,calc(var(--lg-spec,.62) + .14)),
    inset 0 -1px 0 rgba(255,255,255,.16),
    inset 0 -22px 34px -26px rgba(255,255,255,.2),
    0 1px 2px rgba(0,0,0,.45),
    0 30px 64px -26px rgba(0,0,0,.95);
}

/* Soxta shisha — ichma-ich mayda elementlar (backdrop-filter yo'q: tezlik uchun) */
.lgf{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Qizil nur — plitaga burchakdan tushadi */
.lg--glow-b{
  background:
    radial-gradient(125% 100% at 50% 122%,rgba(121,6,2,0.95) 0%,rgba(121,6,2,0.39) 44%,transparent 74%),
    var(--lg-base);
}
.lg--glow-br{
  background:
    radial-gradient(90% 95% at 112% 114%,rgba(121,6,2,0.9) 0%,rgba(121,6,2,0.28) 46%,transparent 72%),
    var(--lg-base);
}
.lg--glow-tr{
  background:
    radial-gradient(90% 95% at 112% -14%,rgba(121,6,2,0.8) 0%,rgba(121,6,2,0.25) 46%,transparent 72%),
    var(--lg-base);
}
.lg--glow-full{
  background:
    radial-gradient(135% 125% at 28% 132%,rgba(121,6,2,0.95) 0%,rgba(121,6,2,0.5) 46%,transparent 80%),
    radial-gradient(90% 80% at 104% -6%,rgba(121,6,2,0.51) 0%,transparent 70%),
    var(--lg-base);
}

/* Bo'lim ortidagi yorug'lik — shisha shuni sindiradi */
.sec-light{
  position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:min(62vw,820px);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(121,6,2,0.45),rgba(121,6,2,0.14) 52%,transparent 100%);
}
.sec-light--l{left:-16vw;top:22%}
.sec-light--r{right:-16vw;top:12%}
.sec-light--c{left:50%;top:34%;width:min(90vw,1200px);aspect-ratio:2.6/1;transform:translateX(-50%)}
.section--glass{overflow-x:clip}

/* =========================================================
   TIPOGRAFIKA
   ========================================================= */
/* Afisha sarlavhasi — keng grotesk */
.display{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.display--xl{font-size:clamp(46px,8.4vw,132px);letter-spacing:-.03em}
.display--lg{font-size:clamp(30px,4.6vw,66px)}
.display--md{font-size:clamp(24px,3vw,40px)}
.display em{
  /* Bir shrift ichidagi kontrast: ExtraBold oq + Light xira */
  font-style:normal;font-weight:300;
  color:rgba(245,239,225,.5);
}

/* Metadata — hamma joyda mono */
.meta{
  font-family:var(--body);
  font-size:13px;
  font-weight:400;
  letter-spacing:.005em;
  text-transform:none;
  color:var(--bone-3);
}
.meta--b{color:var(--bone-2)}

.lead{
  margin:0 0 14px;
  max-width:52ch;
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.6;
  color:var(--bone-2);
}
.lead strong{color:var(--bone);font-weight:600}
.lead--dim{color:var(--bone-3)}

/* Bo'lim sarlavhasi: [ 01 ] ──────── NOMI */
.sec-head{margin-bottom:clamp(30px,4vw,52px)}
.sec-label{
  display:flex;align-items:center;gap:16px;
  margin:0 0 22px;
  font-family:var(--body);
  font-size:13px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-3);
}
.sec-label__n{
  color:var(--bone);
  padding:4px 11px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(155,15,9,0.95),rgba(121,6,2,0.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px rgba(121,6,2,0.95);
}
.sec-label__line{flex:1;height:1px;background:var(--rule);min-width:20px}
.sec-label__right{color:var(--bone-3)}

/* =========================================================
   TUGMALAR — shisha kapsulalar
   ========================================================= */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 26px;
  border-radius:999px;
  font-family:var(--body);
  font-size:14px;font-weight:500;letter-spacing:.005em;text-transform:none;
  white-space:nowrap;color:var(--bone);
  -webkit-backdrop-filter:blur(12px) saturate(190%);
          backdrop-filter:blur(12px) saturate(190%);
  transition:transform .35s var(--e-out),box-shadow .35s var(--e),background .35s var(--e);
}
.btn svg{width:13px;height:13px;transition:transform .35s var(--e-out)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--block{width:100%}

/* Qizil shisha */
.btn--ember{
  background:linear-gradient(180deg,rgba(155,15,9,0.9) 0%,rgba(121,6,2,0.86) 55%,rgba(82,4,1,0.92) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.2),
    inset 0 -14px 22px -16px rgba(245,239,225,0.5),
    0 1px 2px rgba(0,0,0,.4),
    0 14px 34px -12px rgba(121,6,2,0.95);
}
.btn--ember:hover{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.24),
    inset 0 -14px 22px -16px rgba(245,239,225,0.6),
    0 1px 2px rgba(0,0,0,.4),
    0 20px 46px -12px rgba(121,6,2,0.95);
}
/* Qizil panel ichida — oq shisha */
.panel .btn--ember{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(245,239,225,0.92));
  color:#1F1F1F;
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -12px 20px -14px rgba(121,6,2,0.45),
    0 16px 34px -14px rgba(0,0,0,.5);
}
.panel .btn--ember:hover{background:#F5EFE1}

/* Shaffof shisha */
.btn--line{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 12px 30px -14px rgba(0,0,0,.8);
}
.btn--line:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}

.btn--sm{padding:10px 18px;font-size:11px}

/* =========================================================
   NAVIGATSIYA — "orolcha"
   Tepada: fonsiz va keng — ism chapda, havolalar o'rtada, tugma o'ngda.
   Scroll boshlanishi bilan hammasi o'rtadagi ixcham shisha orolchaga
   yig'iladi: kasb yozuvi yashirinadi, ism va tugma orolcha ichida qoladi.
   Havolalar joyidan qimirlamaydi — orolcha ularning atrofida hosil bo'ladi.
   ========================================================= */
.nav{
  position:fixed;top:14px;left:0;right:0;z-index:100;
  padding-inline:var(--gut);
  pointer-events:none;
  /* DIQQAT: "both" emas! Faol opacity animatsiyasi ajdodni backdrop root qiladi
     va ichidagi shisha orqasini ko'rmay qoladi. backwards — tugagach o'chadi. */
  animation:navIn 1s var(--e-out) backwards;
}
@keyframes navIn{
  from{opacity:0;transform:translateY(-120%)}
  to  {opacity:1;transform:none}
}
.nav__inner{
  position:relative;z-index:0;               /* ::before shisha qatlami uchun */
  pointer-events:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  max-width:calc(var(--wrap) - 2 * var(--gut));   /* kontent bilan bir chiziqda */
  margin-inline:auto;
  height:64px;
  padding:0;
  border-radius:999px;
  transition:max-width .8s var(--e-out),height .8s var(--e-out),padding .8s var(--e-out);
}
/* Shisha qatlami — tepada ko'rinmaydi, orolcha bo'lganda paydo bo'ladi */
.nav__inner::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(31,31,31,0.72),rgba(12,12,12,0.66));
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 22px 50px -20px rgba(0,0,0,.9);
  opacity:0;
  transition:opacity .5s var(--e);
}
.nav.is-stuck .nav__inner{
  max-width:var(--island,700px);        /* JS havolalar eniga qarab hisoblaydi */
  height:56px;
  padding:0 8px;
}
.nav.is-stuck .nav__inner::before{opacity:1}

/* Brend: to'liq ism, tepada ostida kasbi */
.nav__brand{
  display:flex;align-items:center;min-width:0;justify-self:start;
  transition:padding .8s var(--e-out),opacity .3s var(--e);
}
.nav__brand:hover{opacity:.82}
.nav__id{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}
.nav__id b{
  font-family:var(--display);font-size:13.5px;font-weight:700;line-height:1.25;
  letter-spacing:.02em;text-transform:uppercase;
}
.nav__id small{
  display:block;max-height:16px;overflow:hidden;
  font-family:var(--body);font-size:11.5px;line-height:1.35;color:var(--bone-3);
  transition:max-height .8s var(--e-out),opacity .4s var(--e);
}
/* Orolchada: faqat ism, shisha chetidan biroz ichkarida */
.nav.is-stuck .nav__brand{padding-left:14px}
.nav.is-stuck .nav__id small{max-height:0;opacity:0}

/* Havolalar */
.nav__links{position:relative;display:flex;align-items:center;gap:2px}
.nav__links a{
  position:relative;z-index:1;
  display:flex;align-items:baseline;gap:7px;
  padding:9px 15px;border-radius:999px;
  white-space:nowrap;
  font-family:var(--body);font-size:13.5px;letter-spacing:.005em;text-transform:none;
  color:rgba(245,239,225,.66);
  transition:color .3s var(--e);
}
.nav__links a i{display:none}
.nav__links a:hover,.nav__links a.is-active{color:var(--bone)}

/* Shisha linza — faol (yoki kursor ostidagi) havola ortiga yumshoq sirpanib boradi */
.nav__lens{
  position:absolute;left:0;top:0;z-index:0;
  width:0;height:0;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 6px 18px -8px rgba(0,0,0,.7);
  opacity:0;
  transition:transform .55s var(--e-out),width .55s var(--e-out),opacity .3s var(--e);
}
.nav__lens.is-on{opacity:1}
.nav__lens.no-anim{transition:opacity .3s var(--e)}

/* Tugma: "Bog'lanish ↗" — ikkala holatda ham yozuvi bilan */
.nav__cta{
  justify-self:end;
  height:40px;padding:0 16px 0 20px;gap:8px;
  font-size:12.5px;
  transition:padding .8s var(--e-out),gap .8s var(--e-out),transform .35s var(--e-out),box-shadow .35s var(--e);
}
.nav__cta svg{width:14px;height:14px;flex-shrink:0}
.nav__cta-t{
  display:block;max-width:90px;overflow:hidden;white-space:nowrap;
  transition:max-width .8s var(--e-out),opacity .4s var(--e);
}

.nav__burger{
  display:none;position:relative;
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.1);
}
.nav__burger span{
  position:absolute;left:50%;top:50%;
  width:15px;height:1px;margin:-.5px 0 0 -7.5px;
  background:var(--bone);
  transition:transform .35s var(--e-out);
}
.nav__burger span:nth-child(1){transform:translateY(-3.5px)}
.nav__burger span:nth-child(2){transform:translateY(3.5px)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

.mobile{
  display:none;pointer-events:auto;
  max-width:1200px;margin:10px auto 0;
  padding:8px 18px 18px;border-radius:28px;
  background:linear-gradient(180deg,rgba(31,31,31,0.8),rgba(12,12,12,0.76));
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 26px 60px -20px rgba(0,0,0,.9);
  flex-direction:column;
  animation:menuIn .45s var(--e-out) backwards;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.mobile a{
  display:flex;align-items:baseline;gap:12px;
  padding:15px 2px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--body);font-size:14px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-2);
}
.mobile a i{font-style:normal;font-size:10px;color:var(--ember)}
.mobile__cta{
  margin-top:16px;border-bottom:0!important;
  justify-content:center;
  color:var(--bone)!important;
  padding:16px!important;border-radius:999px;
  background:linear-gradient(180deg,rgba(155,15,9,0.95),rgba(121,6,2,0.95));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),0 14px 30px -12px rgba(121,6,2,0.95);
}

/* =========================================================
   SAHNA — kesilgan figura scroll bilan yuradi
   ========================================================= */
.stage{
  position:fixed;inset:0;z-index:0;
  display:grid;place-items:center;
  pointer-events:none;
  overflow:hidden;
}
.stage__travel{
  position:relative;
  transform:translate3d(26vw,0,0);
  will-change:transform,opacity;
}
/* Atomlar qatlami — sayohat paytida rasm o'rnida chiziladi */
.stage__atoms{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;
}
.stage__in{
  display:block;position:relative;
  animation:figIn 1.6s var(--e-out) .25s both;
}

/* Yorug'lik supurgisi — figuraning siluetiga maskalangan.
   Studiya nuri yonib, ustidan o'tib ketgandek. */
.stage__sweep{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,
    rgba(255,255,255,.30) 49%,
    rgba(245,239,225,0.16) 55%,
    transparent 64%);
  -webkit-mask-image:url("../img/jahongir-v6.webp");
          mask-image:url("../img/jahongir-v6.webp");
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:sweep 1.9s var(--e-out) .95s 1 both;
}
@keyframes sweep{
  0%  {opacity:0;transform:translateX(-118%)}
  16% {opacity:1}
  84% {opacity:1}
  100%{opacity:0;transform:translateX(118%)}
}
.stage__fig{
  display:block;
  height:min(80vh,760px);width:auto;
  /* Rasm fotografning o'z rangida — filtr yo'q */
}
.stage__glow{
  /* Studiya foni — faqat odam orqasida: o'rtasi yorqinroq qizil (#790602),
     chetlari qoraga singib ketadi. Figura bilan birga yuradi */
  position:absolute;left:50%;top:50%;
  width:156%;height:132%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(closest-side at 50% 40%, rgba(160,16,9,.55) 0%, rgba(160,16,9,0) 60%),
    radial-gradient(closest-side, #860904 0%, #790602 34%, rgba(100,5,2,.78) 58%, rgba(60,3,1,.34) 80%, rgba(0,0,0,0) 100%);
  filter:blur(18px);
  animation:
    glowIn 2.2s var(--e-out) .1s both,
    glowBreathe 8s ease-in-out 2.6s infinite;
}
@keyframes figIn{
  from{opacity:0;transform:translateY(58px) scale(1.11)}
  to  {opacity:1;transform:none}
}
/* Bloom: kichikdan kattaga, biroz oshib o'tib, joyiga qaytadi */
@keyframes glowIn{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.26)}
  58% {opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
/* Sekin nafas — sahifa "tirik" ko'rinadi */
@keyframes glowBreathe{
  0%,100%{opacity:1;   transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:.9;  transform:translate(-50%,-50%) scale(1.03)}
}

/* Chiziq chizilishi — hamma joyda ishlatiladi */
@keyframes drawX{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 58px);
  padding-bottom:112px;           /* pastdagi shisha lenta uchun joy */
}
.hero__grid{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
  width:100%;
}
.hero__slot{min-height:min(66vh,660px)}

.hero__tag{
  display:inline-flex;align-items:center;gap:14px;
  margin:0 0 26px;padding:8px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.08);
}
.rec{display:inline-flex;align-items:center;gap:7px;color:var(--ember);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.rec::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--ember);
  animation:rec 2.4s steps(1) infinite;
}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.25}}

.hero__title{margin:0 0 6px}
.hero__title .line{display:block;padding-bottom:.04em}
.hero__title .line > span{display:block}

/* Har qator o'z "darchasi" ichidan ko'tarilib chiqadi */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.05em}
.hero__title .line > span{display:block;animation:lineUp 1.05s var(--e-out) both}
.hero__title .line:nth-child(1) > span{animation-delay:.42s}
.hero__title .line:nth-child(2) > span{animation-delay:.56s}
@keyframes lineUp{from{transform:translateY(108%)}to{transform:translateY(0)}}

.hero__role{
  display:flex;align-items:center;gap:18px;
  margin:0 0 30px;
}
.hero__role b{
  font-family:var(--body);font-weight:400;
  font-size:clamp(19px,1.8vw,26px);letter-spacing:-.005em;line-height:1.1;
  color:rgba(245,239,225,.86);
}
.hero__role i{
  flex:1;height:1px;background:var(--rule);min-width:24px;
  transform:scaleX(0);transform-origin:left;
  animation:drawX 1.1s var(--e-out) 1s both;
}

.hero__lead{margin:0 0 34px;max-width:46ch;color:var(--bone-2);font-size:clamp(15px,1.3vw,17px);line-height:1.62}
.hero__lead strong{color:var(--bone);font-weight:600}

.hero__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:0}

.play{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;
  padding:8px 22px 8px 8px;border-radius:999px;
  font-family:var(--body);font-size:13px;letter-spacing:.005em;text-transform:none;
  color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(12px) saturate(190%);
          backdrop-filter:blur(12px) saturate(190%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 12px 30px -14px rgba(0,0,0,.8);
  transition:transform .35s var(--e-out),background .3s var(--e);
}
.play:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
.play__icon{
  display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;color:var(--bone);
  background:linear-gradient(180deg,#9B0F09,#5C0401);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px rgba(121,6,2,0.95);
}
.play__icon svg{width:10px;height:11px;margin-left:2px}
.play__label i{font-style:normal;color:var(--bone-3)}

/* Hero pastidagi ma'lumot qatori */
.hero__strip{
  position:absolute;left:0;right:0;bottom:24px;
}
.hero__bar{
  --lg-r:24px;
  display:flex;align-items:stretch;padding:4px 8px;
  animation:stripIn .9s var(--e-out) 1.15s backwards;
}
.hero__strip dl{animation:stripIn .85s var(--e-out) backwards}
.hero__strip dl:nth-child(1){animation-delay:1.30s}
.hero__strip dl:nth-child(2){animation-delay:1.40s}
.hero__strip dl:nth-child(3){animation-delay:1.50s}
.hero__strip dl:nth-child(4){animation-delay:1.60s}
@keyframes stripIn{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}
.hero__bar dl{
  position:relative;
  flex:1;margin:0;padding:16px 22px;
  display:flex;flex-direction:column;gap:5px;
}
/* Kataklar orasidagi ingichka bo'luvchi */
.hero__bar dl + dl::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);
}
.hero__strip dt{
  font-family:var(--body);font-size:12px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-3);
}
.hero__strip dd{
  margin:0;
  font-family:var(--display);
  font-size:15px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;
}

/* =========================================================
   2. MEN HAQIMDA
   ========================================================= */
.about__grid{
  display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(28px,4.5vw,72px);align-items:start;
}
/* Desktopda sayohat qiluvchi figura shu ustunga keladi —
   ramkali rasm yashiriladi, aks holda ikkita Jahongir ko'rinadi.
   visibility: layoutni saqlaydi, ustun kengligi o'zgarmaydi. */
@media (min-width:1101px){
  .about__media{visibility:hidden}
}
.about__media{margin:0;position:relative}
.about__media .frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--rule);border-radius:18px}
.about__media img{width:100%;height:100%;object-fit:cover}   /* rasm asl rangida */
.about__cap{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:10px;
}

/* Uch yo'nalish: HYT.uz, Raxmat Visuals, Prodyuserlik */
.dirs{display:grid;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.dir{
  --lg-r:16px;
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;row-gap:4px;
  padding:16px 20px;
}
.dir b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.dir__k{font-size:12.5px;color:var(--ember-2)}
.dir p{grid-column:1 / -1;margin:0;font-size:13.5px;line-height:1.55;color:var(--bone-2)}
.about__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:38px}
.fact{--lg-r:18px;padding:22px 24px}
.fact b{
  display:block;margin-bottom:8px;
  font-family:var(--display);
  font-size:clamp(26px,2.6vw,34px);font-weight:700;line-height:1;letter-spacing:-.02em;
}
.fact span{font-family:var(--body);font-size:12.5px;letter-spacing:.005em;text-transform:none;color:var(--bone-2);line-height:1.5}

/* Teglar — Faoliyatlar kartalarida */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-family:var(--body);font-size:12.5px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-2);
}

/* =========================================================
   4. STUDIYALAR — ikki shisha karta
   ========================================================= */
.studios{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.studio{--lg-r:26px;display:flex;flex-direction:column;padding:clamp(26px,3vw,42px)}
.studio:hover{transform:translateY(-4px)}
.studio__top{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-bottom:26px}
.studio__top .meta{white-space:nowrap}
.studio__logo{
  font-family:var(--display);
  font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
}
.studio__motto{font-size:13px;line-height:1.4;color:var(--bone-2)}
.studio__motto i{font-style:normal;color:var(--ember-2)}
.studio__title{margin:0 0 26px;font-size:clamp(16px,1.5vw,19px);font-weight:600;line-height:1.35;color:var(--bone)}
.tags{margin-top:auto}
.studio__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.studio__links a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-size:13px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-2);transition:color .25s var(--e);
}
.studio__links a svg{width:11px;height:11px;transition:transform .3s var(--e-out)}
.studio__links a:hover{color:var(--ember-2)}
.studio__links a:hover svg{transform:translate(2px,-2px)}
/* Kartaning istalgan joyi — o'z sayti: asosiy havola butun kartani qoplaydi,
   qo'shimcha havola (Instagram) uning ustida alohida bosiladi */
.studio__main::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--lg-r)}
.studio__links a:not(.studio__main){position:relative;z-index:2}
/* Bosiladigan ekani ko'rinsin: sayt manzili — tugma, o'ngda dumaloq strelka.
   Kursor kartaga kelsa ikkalasi qizil bo'ladi */
.studio__main{
  padding:9px 15px 9px 17px;border-radius:999px;
  font-weight:500;color:var(--bone);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background .3s var(--e),color .25s var(--e);
}
.studio__go{
  display:grid;place-items:center;flex-shrink:0;margin-left:auto;
  width:48px;height:48px;border-radius:50%;color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px -12px rgba(0,0,0,.8);
  transition:transform .55s var(--e-out),background .3s var(--e);
}
.studio__go svg{width:16px;height:16px}
.studio:hover .studio__main{color:var(--bone);background:var(--ember)}
.studio:hover .studio__main svg{transform:translate(2px,-2px)}
.studio:hover .studio__go{background:var(--ember);transform:rotate(45deg)}
/* Sensorli ekranda kursor yo'q — strelka doim qizil */
@media (hover:none){
  .studio__go{background:var(--ember)}
}
/* Telefonda strelka kartaning yuqori-o'ng burchagida, shior nom ostida */
@media (max-width:640px){
  .studio__top{flex-direction:column;align-items:flex-start;gap:6px;padding-right:54px}
  .studio__go{position:absolute;top:22px;right:22px;width:42px;height:42px;margin:0}
}
.studio__main:focus-visible{outline:none}
.studio:has(.studio__main:focus-visible){outline:2px solid var(--ember-2);outline-offset:3px}

/* =========================================================
   4b. ISHLAR — vertikal videolar devori + ovozli pleyer
   Sahifada faqat muqovalar (WebP, lazy) — video oldindan yuklanmaydi.
   Kursor ustida 4 soniyalik ovozsiz lavha (~100 KB), bosilganda pleyer:
   kompyuterda 1080p, sekin internetda 720p; qotsa — o'zi 720p ga o'tadi.
   ========================================================= */
.works{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}   /* ixcham: 6 ustun */
.js .works:not(.is-open) .work--more{display:none}
.works.is-open .work--more{animation:workIn .8s var(--e-out) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes workIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.work{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:9/16;border-radius:16px;
  background:#1F1F1F;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.95);
  transform:translateZ(0);               /* Safari: yumaloq burchak ichida video */
  transition:transform .6s var(--e-out),box-shadow .45s var(--e);
}
.work:hover{transform:translateY(-5px);box-shadow:0 34px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
/* Shisha qirra — yuqori yaltiroq chiziq, har kartada bir xil */
.work::after{
  content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.08);
}
.work__poster,.work__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work__poster{transition:transform 1.4s var(--e-out)}
.work:hover .work__poster{transform:scale(1.045)}
.work__preview{opacity:0;transition:opacity .5s var(--e)}
.work.is-previewing .work__preview{opacity:1}
.work__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.34) 70%,rgba(0,0,0,.82) 100%);
}
.work__play{
  position:absolute;left:50%;top:50%;z-index:2;
  width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;
  display:grid;place-items:center;color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(10px) saturate(160%);
          backdrop-filter:blur(10px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 14px 30px -10px rgba(0,0,0,.7);
  opacity:0;transform:scale(.82);
  transition:opacity .35s var(--e),transform .55s var(--e-out);
}
.work__play svg{width:15px;height:15px;margin-left:3px}
.work:hover .work__play,.work:focus-visible .work__play{opacity:1;transform:none}
.work__meta{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:2px}
.work__title{
  font-family:var(--display);font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.01em;text-transform:uppercase;
}
.work__tag{font-family:var(--body);font-size:11px;line-height:1.3;color:rgba(245,239,225,.7)}

.works__more-wrap{display:none;justify-content:center;margin-top:30px}
.js .works__more-wrap{display:flex}
.works.is-open + .works__more-wrap{display:none}
.works__more svg{transition:transform .35s var(--e-out)}
.works__more:hover svg{transform:translateY(2px)}

/* Sensorli ekran: kursor yo'q — play doim ko'rinadi */
@media (hover:none){
  .work__play{opacity:1;transform:none;width:46px;height:46px;margin:-23px 0 0 -23px}
}
@media (max-width:1100px){
  .works{grid-template-columns:repeat(4,1fr);gap:12px}
}
@media (max-width:640px){
  /* Telefon: 3 ustun — Instagram tarmog'idek ixcham */
  .works{grid-template-columns:repeat(3,1fr);gap:7px}
  .work{border-radius:12px}
  .work__meta{left:8px;right:8px;bottom:8px;gap:1px}
  .work__title{font-size:10.5px;line-height:1.15}
  .work__tag{font-size:9.5px}
  .work__play{width:34px;height:34px;margin:-17px 0 0 -17px}
  .work__play svg{width:11px;height:11px;margin-left:2px}
}

/* Brand Films — bir qatorda 6 ta film, kinematografik ko'rinish:
   raqam, davomiylik "pill"i, yengil vinyetka; kursor kelganda shu film oldinga chiqadi, qolganlari xiralashadi */
.works--films{grid-template-columns:repeat(4,1fr);gap:16px;width:min(100%,920px);margin-inline:auto}   /* ixcham: 4+4, vertikal 9:16 kartalar ~218x388 */
.js .works--films[data-reveal]{opacity:1;transform:none}     /* konteyner emas — kartalar navbat bilan chiqadi */
.js .works--films .work{opacity:0}
.works--films.is-in .work{opacity:1;animation:filmIn .9s var(--e-out) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes filmIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
.works--films .work,.sheet__works .work{
  border-radius:18px;
  transition:transform .6s var(--e-out),box-shadow .5s var(--e),opacity .45s var(--e),filter .45s var(--e);
}
/* Yorug' va qorong'i muqovalar bir xil og'irlikda: tepada va chetlarda yengil soya */
.works--films .work__shade,.sheet__works .work__shade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%),
    linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.42) 72%,rgba(0,0,0,.9) 100%),
    radial-gradient(130% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.35) 100%);
}
.work__num{
  position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(245,239,225,.72);
}
.work__dur{
  position:absolute;right:10px;top:10px;z-index:2;
  padding:4px 9px;border-radius:999px;
  font-size:11px;font-variant-numeric:tabular-nums;color:var(--bone);
  background:rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.works--films .work__meta,.sheet__works .work__meta{left:14px;right:14px;bottom:15px}
.works--films .work__title,.sheet__works .work__title{font-size:13px;letter-spacing:.04em}
.works--films .work:hover,.sheet__works .work:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.95),0 26px 60px -26px rgba(121,6,2,.8),0 0 0 1px rgba(255,255,255,.12);
}
@media (hover:hover){
  .works--films:hover .work:not(:hover){opacity:.42;filter:saturate(.55)}
}
@media (max-width:640px){
  .works--films{grid-template-columns:repeat(2,1fr);gap:8px;width:auto}
  .works--films .work,.sheet__works .work{border-radius:12px}
  .work__num{display:none}
  .work__dur{top:6px;right:6px;padding:2px 6px;font-size:9.5px}
  .works--films .work__meta,.sheet__works .work__meta{left:8px;right:8px;bottom:8px}
  .works--films .work__title,.sheet__works .work__title{font-size:10.5px}
}

/* Ishlar ichidagi kichik sarlavhalar: HYT production / Raxmat Visuals */
.works-sub{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 0 18px}
.works-sub b{
  font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:700;
  letter-spacing:-.01em;text-transform:uppercase;
}
.works-sub span{font-size:14px;color:var(--bone-2)}
.works-sub--gap{margin-top:clamp(56px,6vw,88px)}
.works-sub--big b{font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em}
.works-sub--big{margin-bottom:24px}

/* HYT.uz keyslari — kartada faqat logo (liquid glass); ma'lumot oynada (#sheet) */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{
  --lg-r:24px;display:grid;place-items:center;aspect-ratio:16/10;
  padding:24px;color:inherit;cursor:pointer;
  transition:transform .6s var(--e-out),box-shadow .45s var(--e);
}
.case:hover{transform:translateY(-5px)}
.case:focus-visible{outline:2px solid var(--ember-2);outline-offset:3px}
/* Har logoning ko'rinadigan eni (--lw) nisbatidan: keng yozuv va kvadrat emblema bir xil og'irlikda */
.case__logo{display:block;width:var(--lw,40%);height:auto;max-height:62%;object-fit:contain;opacity:.94;transition:opacity .3s var(--e),transform .6s var(--e-out)}
.case:hover .case__logo{opacity:1;transform:scale(1.04)}
.case__word{
  font-family:var(--display);font-size:clamp(15px,1.5vw,20px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;
  transition:transform .6s var(--e-out);
}
.case:hover .case__word{transform:scale(1.04)}
.case__go{
  position:absolute;right:16px;bottom:16px;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .55s var(--e-out),background .3s var(--e);
}
.case__go svg{width:12px;height:12px}
.case:hover .case__go{background:var(--ember);transform:rotate(45deg)}
@media (hover:none){
  .case__go{background:var(--ember)}
}
@media (max-width:1100px){
  .cases{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (max-width:640px){
  .cases{gap:8px}
  .case{--lg-r:18px;padding:14px 14px 28px}
  .case__logo{width:calc(var(--lw,40%) * 1.2);max-height:56%}
  .case__word{font-size:12px;letter-spacing:.14em}
  .case__go{width:28px;height:28px;right:10px;bottom:10px}
  .case__go svg{width:10px;height:10px}
}

/* Keys oynasidagi raqam va teglar */
.sheet__num i,.sheet__res i{font-style:normal;font-weight:500;color:var(--ember-2);margin:0 .1em}
.sheet__num small{
  margin-left:.25em;font-family:var(--body);font-size:.36em;font-weight:500;letter-spacing:0;color:var(--bone-2);
}
.sheet__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.sheet__tags li{
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-size:11.5px;color:var(--bone-2);
}

/* ---------- KEYS / LOYIHA OYNASI ---------- */
.sheet{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:24px var(--gut)}
.sheet__back{
  position:absolute;inset:0;
  background:rgba(0,0,0,.74);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
          backdrop-filter:blur(16px) saturate(130%);
  animation:fadeIn .35s var(--e) backwards;
}
.sheet__box{
  position:relative;width:min(1040px,100%);max-height:calc(100svh - 48px);
  overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:clamp(24px,3.2vw,44px);border-radius:26px;
  background:
    radial-gradient(60% 46% at 100% 0%,rgba(121,6,2,.34),transparent 70%),
    linear-gradient(180deg,#151515,#0B0B0B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.95);
  animation:playerIn .5s var(--e-out) backwards;
}
.sheet__x{position:sticky;top:0;float:right;z-index:3;width:44px;height:44px;margin:-8px -8px 8px 16px}
.sheet__x svg{width:14px;height:14px}
.sheet__head{display:flex;align-items:center;gap:20px;margin:0 0 26px;padding-right:56px}
.sheet__logo{display:block;height:30px;width:auto;max-width:180px;object-fit:contain}
.sheet__logo--sq{height:58px}
/* Logosiz brend — nom plitkada; eni eng uzun so'zga moslashadi (chiqib ketmaydi) */
.sheet__word{
  display:grid;place-items:center;flex-shrink:0;width:min-content;min-width:58px;height:58px;padding:0 14px;border-radius:16px;
  font-family:var(--display);font-size:9px;font-weight:700;line-height:1.25;letter-spacing:.14em;text-align:center;text-transform:uppercase;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.sheet__sub{margin:8px 0 0;font-size:14px;color:var(--bone-2)}
.sheet__kicker{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-2)}
.sheet__title{
  margin:0;font-family:var(--display);font-size:clamp(28px,3.4vw,46px);font-weight:800;
  line-height:1;letter-spacing:-.02em;text-transform:uppercase;
}
.sheet__result{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 22px;padding:24px 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.sheet__num{font-family:var(--display);font-size:clamp(40px,5.4vw,74px);font-weight:800;line-height:1;letter-spacing:-.03em}
.sheet__num--text{font-size:clamp(28px,3.2vw,42px);line-height:1.1}
.sheet__result p{margin:0;max-width:44ch;font-size:15px;line-height:1.5;color:var(--bone-2)}
.sheet__tags{margin:18px 0 0}
.sheet__tags li{font-size:12.5px;padding:7px 13px}
/* Vazifa / Nima qildik / Natija */
.sheet__story{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 0}
.sheet__story section{
  padding:20px 20px 22px;border-radius:18px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06);
}
.sheet__story h4{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.sheet__story h4 i{font-style:normal;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:0;color:var(--ember-2)}
.sheet__story p{margin:0;font-size:14.5px;line-height:1.6;color:var(--bone-2)}
/* Natija — asosiy blok: to'liq kenglikda, kattaroq va yorqinroq */
.sheet__story .sheet__res{
  grid-column:1 / -1;
  padding:26px 28px 30px;
  background:
    radial-gradient(90% 150% at 100% 0%,rgba(121,6,2,.46),transparent 70%),
    rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(194,48,30,.3),0 24px 50px -30px rgba(121,6,2,.6);
}
.sheet__story .sheet__res h4{font-size:15px;margin-bottom:20px}
.sheet__story .sheet__res h4 i{font-size:12px}
.sheet__res ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 32px}
.sheet__res li{
  position:relative;padding-left:22px;
  font-family:var(--display);font-size:clamp(17px,1.75vw,22px);font-weight:600;line-height:1.35;letter-spacing:-.005em;
  color:var(--bone);
}
.sheet__res li::before{content:'';position:absolute;left:0;top:.48em;width:9px;height:9px;border-radius:50%;background:var(--ember-2);box-shadow:0 0 12px rgba(194,48,30,.7)}
.sheet__h{
  display:flex;align-items:baseline;gap:10px;margin:32px 0 14px;
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sheet__h span{font-family:var(--body);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--bone-3)}
.sheet__works{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}   /* Brand Films kabi: qatorda 6 tadan */
@media (max-width:1100px){
  .sheet__works{grid-template-columns:repeat(4,1fr)}
}
@keyframes sheetUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .sheet{padding:0;align-items:end}
  .sheet__box{
    border-radius:22px 22px 0 0;max-height:92svh;padding:18px 16px calc(26px + env(safe-area-inset-bottom));
    animation:sheetUp .45s var(--e-out) backwards;
  }
  .sheet__x{width:40px;height:40px;margin:-4px -4px 6px 12px}
  .sheet__head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px;padding-right:48px}
  .sheet__logo{height:24px;max-width:120px}
  .sheet__logo--sq{height:42px}
  .sheet__result{padding:18px 0}
  .sheet__story{grid-template-columns:1fr;gap:8px;margin-top:20px}
  .sheet__story section{padding:16px 16px 18px}
  .sheet__story .sheet__res{padding:18px 16px 20px}
  .sheet__res ul{grid-template-columns:1fr;gap:12px}
  .sheet__res li{font-size:16.5px}
  .sheet__works{grid-template-columns:repeat(3,1fr);gap:7px}
}

/* ---------- PLEYER ---------- */
.player{position:fixed;inset:0;z-index:300;display:grid;place-items:center}
.player__back{
  position:absolute;inset:0;
  background:rgba(12,12,12,0.82);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  animation:fadeIn .35s var(--e) backwards;
}
.player__stage{
  position:relative;
  display:grid;grid-template-columns:52px auto 52px;
  grid-template-areas:"prev frame next" ". bar .";
  column-gap:26px;row-gap:16px;align-items:center;justify-items:center;
  animation:playerIn .55s var(--e-out) backwards;
}
@keyframes playerIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.player__frame{
  grid-area:frame;position:relative;margin:0;
  width:min(calc(min(78svh,860px) * .5625),90vw);aspect-ratio:9/16;
  border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px -40px rgba(0,0,0,.95);
}
.player__video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* Yuklanayotganda — ingichka aylanuvchi halqa */
.player__spin{
  position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;
  opacity:0;transition:opacity .25s var(--e);pointer-events:none;
  animation:spin .9s linear infinite;
}
/* Gorizontal (16:9) video — keng ramka. Yon tugmalar sig'ishi uchun eni ekrandan 230px kam */
.player__frame.is-wide{
  width:min(calc(100vw - 230px),1180px,calc(70svh * 16 / 9));
  aspect-ratio:16/9;
}
.player__frame.is-loading .player__spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.player__note{
  position:absolute;left:14px;right:14px;bottom:70px;margin:0;padding:10px 14px;border-radius:12px;
  font-size:13px;line-height:1.45;text-align:center;color:var(--bone);
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.player__nav,.player__x,.sheet__x{
  display:grid;place-items:center;flex-shrink:0;
  width:52px;height:52px;border-radius:50%;color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(12px) saturate(170%);
          backdrop-filter:blur(12px) saturate(170%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 14px 30px -12px rgba(0,0,0,.8);
  transition:transform .35s var(--e-out),background .3s var(--e);
}
.player__nav:hover,.player__x:hover,.sheet__x:hover{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08))}
.player__nav:active,.player__x:active,.sheet__x:active{transform:scale(.94)}
.player__nav svg{width:18px;height:18px}
.player__nav--prev{grid-area:prev}
.player__nav--next{grid-area:next}
.player__x{position:fixed;top:18px;right:18px;z-index:2}
.player__x svg{width:15px;height:15px}
.player__bar{
  grid-area:bar;display:flex;align-items:baseline;justify-content:center;gap:12px;
  min-width:0;max-width:100%;white-space:nowrap;
}
.player__count{font-size:12px;color:var(--bone-3);font-variant-numeric:tabular-nums}
.player__title{
  font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;
}
.player__tag{font-size:13px;color:var(--bone-2)}
@media (max-width:640px){
  .player__stage{
    grid-template-columns:44px 1fr 44px;
    grid-template-areas:"frame frame frame" "prev bar next";
    column-gap:10px;row-gap:14px;width:94vw;
  }
  .player__frame{width:min(calc(76svh * .5625),94vw);border-radius:18px}
  .player__frame.is-wide{width:94vw}
  .player__nav{width:44px;height:44px}
  .player__bar{flex-direction:column;align-items:center;gap:2px}
  .player__tag{display:none}
  .player__x{top:12px;right:12px;width:44px;height:44px}
}

/* =========================================================
   5b. MIJOZLAR — shisha plitalar; ba'zilariga burchakdan qizil nur
   ========================================================= */
.logos{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;
}
/* Ikkinchi plita ortidagi xira qizil shakl — shisha orqali xiralashib ko'rinadi */
.logos__shape{
  position:absolute;z-index:0;pointer-events:none;
  left:26%;top:-24%;width:23%;height:50%;
  background:
    radial-gradient(40% 34% at 54% 60%,rgba(121,6,2,0.95),transparent 72%),
    radial-gradient(32% 28% at 32% 42%,rgba(82,4,1,0.95),transparent 70%),
    radial-gradient(28% 26% at 72% 32%,rgba(52,3,1,0.85),transparent 70%),
    radial-gradient(22% 20% at 48% 22%,rgba(121,6,2,0.95),transparent 70%);
}
.logo{
  --lg-r:18px;--lg-spec:.4;
  z-index:1;
  display:grid;place-items:center;
  aspect-ratio:16/10;
  padding:18px;
  text-align:center;
}
.logo__w{color:var(--bone);line-height:1;transition:transform .55s var(--e-out)}
.logo:hover .logo__w{transform:scale(1.05)}

/* Hamkor logolari — raxmatvs.com'dan, sof oq siluet.
   --lw har logoning nisbatidan hisoblangan: keng yozuv-logo va kvadrat
   emblema bir xil optik og'irlikda ko'rinsin. */
.logo__img{
  display:block;width:var(--lw,44%);height:auto;
  opacity:.9;
  transition:transform .55s var(--e-out),opacity .35s var(--e);
}
.logo:hover .logo__img{transform:scale(1.05);opacity:1}

/* Shaxsiy brend — logo emas, avatar + ism */
.logo--person{grid-auto-flow:row;align-content:center;gap:12px}
.logo__av{
  width:26%;aspect-ratio:1;border-radius:50%;
  filter:grayscale(1) contrast(1.08) brightness(1.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 10px 24px -10px rgba(0,0,0,.7);
  transition:transform .55s var(--e-out);
}
.logo--person:hover .logo__av{transform:scale(1.05)}
.logo__nm{
  font-family:var(--body);font-weight:500;
  font-size:clamp(14px,1.2vw,17px);line-height:1;color:var(--bone);
}

/* Har mijozga o'z yozuv uslubi — logo devori ritmi.
   Haqiqiy logolar kelganda <img> bilan almashtiriladi. */
.w2{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.9vw,26px);letter-spacing:-.03em}
.w2 i{font-style:normal;font-weight:400;opacity:.72}
.w3{font-family:var(--body);font-weight:500;font-size:clamp(11px,1.1vw,14px);letter-spacing:.28em;text-transform:uppercase}
.w5{font-family:var(--display);font-weight:400;font-size:clamp(12px,1.25vw,16px);letter-spacing:.24em;text-transform:uppercase}
.w6{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em}


/* =========================================================
   7. BOG'LANISH
   ========================================================= */
.section--contact{position:relative;overflow:hidden}
.bleed{
  position:absolute;left:-.04em;bottom:-.1em;z-index:0;
  font-family:var(--display);
  font-size:clamp(100px,17vw,250px);font-weight:800;
  line-height:.8;letter-spacing:-.04em;text-transform:uppercase;
  white-space:nowrap;
  color:rgba(245,239,225,0.04);
  pointer-events:none;user-select:none;
}
.contact{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr minmax(0,500px);
  gap:clamp(32px,4.5vw,76px);align-items:start;
}
.contact__list{margin-top:34px;display:flex;flex-direction:column;gap:8px;max-width:440px}
.contact__list a{
  --lg-r:16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;
}
.contact__list a:hover{transform:translateX(4px)}
.contact__k{font-family:var(--body);font-size:12.5px;letter-spacing:.005em;text-transform:none;color:var(--bone-3)}
.contact__v{font-size:15px;font-weight:500}

/* Forma */
.form{padding:clamp(26px,3vw,38px)}
.panel .chip-btn{
  border:0;color:rgba(245,239,225,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14);
}
.panel .chip-btn:hover{color:var(--bone);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.1))}
.panel .chip-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,#F5EFE1,#E7DCC6);color:#1F1F1F;
  box-shadow:inset 0 1px 0 #fff,0 8px 20px -8px rgba(0,0,0,.45);
}
.panel .field{margin-bottom:12px}
.panel .field label{color:rgba(245,239,225,.66);margin-bottom:8px}
.panel .field input,.panel .field textarea{
  padding:14px 16px;border:0;border-radius:14px;color:var(--bone);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.13);
  transition:box-shadow .3s var(--e),background .3s var(--e);
}
.panel .field input::placeholder,.panel .field textarea::placeholder{color:rgba(245,239,225,.5)}
.panel .field input:focus,.panel .field textarea:focus{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 4px rgba(255,255,255,.12);
}
.panel .field.is-invalid input,.panel .field.is-invalid textarea{
  box-shadow:inset 0 0 0 1.5px #fff,0 0 0 4px rgba(255,255,255,.22);
}
.panel .err{color:var(--bone)}
.panel .form__status.is-ok{color:var(--bone)}
.panel .form__status.is-bad{color:var(--bone)}
.form__q{margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:30px}
.chip-btn{
  padding:8px 14px;border:1px solid var(--rule);border-radius:999px;
  font-family:var(--body);font-size:12.5px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-3);
  transition:border-color .25s var(--e),color .25s var(--e),background .25s var(--e);
}
.chip-btn:hover{border-color:var(--rule-2);color:var(--bone-2)}
.chip-btn[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#F5EFE1}

.field{margin-bottom:4px}
.field label{
  display:block;margin-bottom:6px;
  font-family:var(--body);font-size:12px;letter-spacing:.005em;text-transform:none;color:var(--bone-3);
}
.field input,.field textarea{
  width:100%;padding:12px 2px;
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;color:var(--bone);
  font-family:var(--body);font-size:15px;line-height:1.5;
  transition:border-color .3s var(--e);resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,239,225,.45)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ember)}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--ember)}
.err{
  margin:5px 0 0;font-family:var(--body);font-size:12px;letter-spacing:.005em;text-transform:none;color:var(--ember);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--e),opacity .3s var(--e);
}
.field.is-invalid .err{max-height:36px;opacity:1}

.form .btn{margin-top:26px}
.form__note{margin:14px 0 0;text-align:center}
.form__status{
  margin:10px 0 0;font-family:var(--body);font-size:13px;letter-spacing:.005em;text-align:center;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--e),opacity .3s var(--e);
}
.form__status.is-on{max-height:70px;opacity:1}
.form__status.is-ok{color:#8FBF6A}
.form__status.is-bad{color:var(--ember)}
.btn.is-loading .btn__label{opacity:.6}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding-block:clamp(24px,3vw,40px) 28px}
.footer__glass{--lg-r:32px;--lg-blur:18px;padding:clamp(28px,3.6vw,50px) clamp(22px,3.2vw,46px) 22px}
.footer__grid{
  display:grid;grid-template-columns:1.1fr .7fr 1.2fr;
  gap:clamp(24px,3.5vw,52px);
  padding-bottom:clamp(30px,4vw,50px);
}
.footer__brand b{
  display:block;margin-bottom:14px;
  font-family:var(--display);
  font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;
}
.footer__brand p{margin:0;max-width:32ch;font-size:13.5px;line-height:1.6;color:var(--bone-3)}
.footer__nav{display:flex;flex-direction:column;gap:8px}
.footer__nav a{
  font-family:var(--body);font-size:13px;letter-spacing:.005em;text-transform:none;
  color:var(--bone-3);transition:color .25s var(--e);
}
.footer__nav a:hover{color:var(--bone)}
.footer__contact{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.footer__big{
  display:inline-flex;align-items:baseline;gap:12px;
  font-family:var(--display);
  font-size:clamp(20px,2.5vw,32px);font-weight:600;letter-spacing:-.02em;text-transform:uppercase;
  transition:color .25s var(--e),transform .35s var(--e-out);
}
.footer__big i{font-style:normal;font-size:.55em;color:var(--ember);transition:transform .35s var(--e-out)}
.footer__big:hover{transform:translateX(6px);color:var(--ember)}
.footer__big--accent{color:var(--ember)}
.footer__big--accent:hover{color:var(--ember-2)}

.footer__bottom{
  display:grid;grid-template-columns:1.1fr .7fr 1.2fr;gap:clamp(24px,3.5vw,52px);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
}
.footer__bottom a{color:var(--bone-2);transition:color .25s var(--e)}
.footer__bottom a:hover{color:var(--ember)}
.footer__copy{align-self:end;text-align:right}

/* =========================================================
   MODAL
   ========================================================= */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--gut)}
.modal__back{position:absolute;inset:0;background:rgba(12,12,12,0.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:fadeIn .3s var(--e) both}
.modal__box{
  position:relative;z-index:2;width:min(1040px,100%);
  padding:12px;border-radius:26px;
  background:linear-gradient(180deg,rgba(31,31,31,0.72),rgba(12,12,12,0.72));
  -webkit-backdrop-filter:blur(24px) saturate(180%);
          backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.9);
  animation:modalIn .45s var(--e-out) backwards;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:22px;right:22px;z-index:4;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background .25s var(--e)}
.modal__x svg{width:14px;height:14px}
.modal__x:hover{background:linear-gradient(180deg,#9B0F09,#5C0401);color:var(--bone)}
.modal__video{aspect-ratio:16/9;background:#000;display:grid;place-items:center;overflow:hidden;border-radius:16px}
.modal__video iframe,.modal__video video{width:100%;height:100%;border:0;display:block}
.modal__empty{padding:28px;text-align:center;color:var(--bone-3);font-family:var(--body);font-size:14px;line-height:1.8}

/* =========================================================
   REVEAL
   ========================================================= */
.js [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);
  transition-delay:calc(var(--d,0) * 70ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-load]{animation:loadIn .85s var(--e-out) backwards;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes loadIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  :root{--gut:22px}
  /* Mobil: tepada fonsiz — ism va menyu tugmasi.
     Scroll yoki menyu ochilganda to'liq enli shisha kapsula bo'ladi */
  .nav__inner{
    display:flex;align-items:center;justify-content:space-between;
    max-width:none;height:var(--nav-h);
  }
  .nav.is-stuck .nav__inner,.nav.is-open .nav__inner{
    max-width:none;height:var(--nav-h);padding:0 7px 0 8px;
  }
  .nav.is-open .nav__inner::before{opacity:1}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav.is-open .mobile{display:flex}

  /* Strip position:static bo'lgani uchun .hero ning flex-elementiga aylanadi —
     ustunga o'tkazmasak yonma-yon turib, gorizontal scroll beradi */
  .hero{
    min-height:auto;
    flex-direction:column;align-items:stretch;
    padding-top:calc(var(--nav-h) + 56px);padding-bottom:0;
  }
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__slot{display:none}
  /* Telefon/planshet: rasm yo'q — ism katta, ekran eniga moslashadi */
  .stage{display:none}
  .hero__title{font-size:clamp(40px,16vw,112px);margin-bottom:10px}
  .hero__tag{margin-bottom:22px}
  .hero{padding-bottom:0}
  .hero__strip{position:static;margin-top:36px}

  .about__grid{grid-template-columns:1fr;gap:34px}
  .about__media{max-width:420px}

  .footer__grid,.footer__bottom{grid-template-columns:1fr 1fr}
  .footer__contact{grid-column:1 / -1}
  .footer__copy{grid-column:1 / -1;text-align:left}
}

@media (max-width:820px){
  .studios{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr);gap:12px}
  /* 2 ustunda "Orzu Mobile" o'ng-yuqorida — shakl uning ortiga ko'chadi */
  .logos__shape{left:57%;top:-8%;width:36%;height:20%}
  .contact{grid-template-columns:1fr;gap:34px}
  .contact__list{max-width:none}
}

@media (max-width:640px){
  :root{--gut:18px;--nav-h:54px}
  .hero{padding-top:calc(var(--nav-h) + 44px)}
  .hero__actions{gap:8px}
  .hero__actions .btn,.play{flex:1 1 100%;justify-content:center}
  .hero__bar{flex-direction:column;padding:4px 18px}
  .hero__bar dl{flex-direction:row;justify-content:space-between;align-items:baseline;padding:14px 2px}
  .hero__bar dl + dl::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}

  .logo{aspect-ratio:3/2;padding:12px}
  /* Mayda plitada logolar o'qilishi uchun 1.25x */
  .logo__img{width:min(calc(var(--lw,44%) * 1.25),80%)}
  .logo__av{width:32%}
  .about__facts{gap:10px}
  .fact{padding:18px}

  .footer__grid,.footer__bottom{grid-template-columns:1fr;gap:26px}
  .bleed{font-size:clamp(76px,24vw,140px)}
}

/* =========================================================
   REDUCED MOTION / PRINT
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],[data-load]{opacity:1;transform:none;animation:none}
  .hero__title .line > span{transform:none}

  .stage__in,.stage__glow,.hero__strip dl{opacity:1}
  .stage__sweep{display:none}
  .hero__role i{transform:none}
  /* Sayohat o'chgani uchun "Men haqimda" o'z rasmini ko'rsatadi */
  .about__media{visibility:visible!important}
}

/* Shaffoflikni kamaytirish so'ralsa — shisha o'rniga to'q yuza */
@media (prefers-reduced-transparency:reduce){
  .lg,.btn,.play,.nav__inner::before,.mobile,.modal__box{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  .lg,.nav__inner::before,.mobile,.modal__box{background:#1F1F1F!important}
}

@media print{
  .bg,.nav,.modal,.stage{display:none}
  body{background:#fff;color:#000}
}