:root{

  --bg:#07090d;
  --surface:#10141b;
  --surface-2:#161c24;
  --line:#202938;
  --text:#f5f7fb;
  --muted:#98a2b3;
  --blue:#7c9cff;
  --radius:20px;

}

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

body.modal-open{
  overflow:hidden;
}

.navbar{

  position:sticky;
  top:0;
  z-index:2000;

  height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 20px;

  background:rgba(7,9,13,.94);

  border-bottom:1px solid var(--line);

}

.logo{

  font-size:13px;

  letter-spacing:.28em;

  font-weight:800;

}

.nav-center{

  flex:1;

  display:flex;

  justify-content:center;

}

#commandButton,
#randomBtn{

  height:42px;

  border:none;

  padding:0 18px;

  border-radius:14px;

  background:var(--surface);

  color:white;

  cursor:pointer;

  transition:.2s ease;
}

#commandButton{

  display:flex;

  align-items:center;

  gap:10px;
}

#commandButton span{

  opacity:.5;

  font-size:12px;
}

#commandButton:hover,
#randomBtn:hover{

  background:var(--surface-2);

}

.mobile-menu-btn{

  width:42px;
  height:42px;

  display:none;

  align-items:center;
  justify-content:center;

  border:none;

  border-radius:14px;

  background:var(--surface);

  cursor:pointer;
}

.mobile-menu-btn span{

  width:18px;
  height:2px;

  background:white;

  position:relative;

  display:block;
}

.mobile-menu-btn span::before,
.mobile-menu-btn span::after{

  content:"";

  position:absolute;

  width:18px;
  height:2px;

  background:white;

  left:0;
}

.mobile-menu-btn span::before{
  top:-6px;
}

.mobile-menu-btn span::after{
  top:6px;
}

.mobile-menu{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.82);

  z-index:5000;

  opacity:0;

  pointer-events:none;

  transition:.25s ease;
}

.mobile-menu.active{

  opacity:1;

  pointer-events:auto;
}

.mobile-menu-inner{

  position:absolute;

  bottom:0;

  width:100%;

  background:#0d1117;

  border-top-left-radius:26px;
  border-top-right-radius:26px;

  padding:80px 20px 30px;

  display:flex;

  flex-direction:column;

  gap:14px;

  transform:translateY(100%);

  transition:.3s ease;
}

.mobile-menu.active
.mobile-menu-inner{

  transform:none;
}

.mobile-menu-inner button{

  width:100%;

  height:56px;

  border:none;

  border-radius:16px;

  background:var(--surface);

  color:white;

  font-size:15px;

  cursor:pointer;
}

.mobile-menu-close{

  position:absolute;

  top:20px;
  right:20px;

  width:46px !important;
  height:46px !important;

}

.hero{

  min-height:92vh;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:60px;

  padding:80px 7vw;

}

.hero-content{

  max-width:720px;
}

.hero-topline{

  font-size:11px;

  color:var(--muted);

  letter-spacing:.3em;

  margin-bottom:22px;
}

.hero h1{

  font-size:clamp(58px,8vw,110px);

  line-height:.9;

  letter-spacing:-.06em;
}

.hero-description{

  margin-top:26px;

  max-width:540px;

  color:var(--muted);

  line-height:1.9;
}

.featured-panel{

  width:360px;

  flex-shrink:0;
}

.featured-card{

  overflow:hidden;

  border-radius:28px;

  background:var(--surface);

  border:1px solid var(--line);

}

.featured-card img{

  width:100%;

  aspect-ratio:2/3;

  object-fit:cover;

  display:block;
}

.featured-info{

  padding:20px;
}

.featured-info h3{

  font-size:28px;

  margin-bottom:8px;
}

.featured-info p{

  color:var(--muted);

  font-size:13px;
}

main{

  padding:40px 7vw 120px;
}

.controls{

  display:flex;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;

  margin-bottom:40px;
}

.search-wrap{

  flex:1;

  min-width:240px;
}

.search-wrap input{

  width:100%;

  height:58px;

  border:none;

  outline:none;

  border-radius:18px;

  border:1px solid var(--line);

  background:var(--surface);

  color:white;

  padding:0 18px;
}

.filters{

  display:flex;

  gap:12px;
}

.filters select{

  height:58px;

  border:none;

  outline:none;

  border-radius:18px;

  background:var(--surface);

  border:1px solid var(--line);

  color:white;

  padding:0 18px;
}

.archive-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(190px,1fr));

  gap:18px;
}

.card{

  overflow:hidden;

  border-radius:22px;

  background:var(--surface);

  border:1px solid var(--line);

  cursor:pointer;

  transition:
  transform .25s ease,
  border-color .25s ease;
}

.card:hover{

  transform:translateY(-4px);

}

.card img{

  width:100%;

  aspect-ratio:2/3;

  object-fit:cover;

  display:block;
}

.card-content{

  padding:14px;
}

.card-title{

  font-size:15px;

  font-weight:600;
}

.card-meta{

  margin-top:6px;

  font-size:12px;

  color:var(--muted);
}

.modal{

  position:fixed;

  inset:0;

  display:none;

  align-items:center;

  justify-content:center;

  z-index:6000;
}

.modal.active{

  display:flex;
}

.modal-backdrop{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.84);
}

.modal-content{

  position:relative;

  width:min(1100px,94vw);

  max-height:92vh;

  overflow-y:auto;

  background:#0d1117;

  border-radius:28px;

  border:1px solid var(--line);

  display:grid;

  grid-template-columns:
  380px 1fr;

  z-index:2;
}

.modal-image img{

  width:100%;

  height:100%;

  object-fit:cover;
}

.modal-info{

  padding:40px;
}

.modal-info h2{

  font-size:58px;

  line-height:.92;
}

.modal-description{

  margin-top:22px;

  line-height:1.9;

  color:var(--muted);
}

.meta-list{

  margin-top:30px;

  display:grid;

  gap:12px;
}

.meta-item{

  display:flex;

  justify-content:space-between;

  padding-bottom:12px;

  border-bottom:1px solid var(--line);
}

.modal-buttons{

  margin-top:34px;

  display:flex;

  gap:12px;
}

.action-btn{

  height:52px;

  border:none;

  padding:0 22px;

  border-radius:16px;

  background:var(--blue);

  color:#081018;

  font-weight:700;

  cursor:pointer;
   text-decoration:none;

  border-radius:14px;

  padding:14px 22px;

  font-size:14px;

  font-weight:700;

  letter-spacing:.04em;
}

.secondary{

  background:var(--surface);

  color:white;
}

.modal-close{

  position:absolute;

  top:16px;
  right:16px;

  width:46px;
  height:46px;

  border:none;

  border-radius:14px;

  background:rgba(0,0,0,.45);

  color:white;

  font-size:18px;

  cursor:pointer;

  z-index:20;
}

.footer{

  padding:80px 7vw;

  border-top:1px solid var(--line);
}

.footer-inner h2{

  font-size:48px;

  line-height:.95;
}

.footer-inner p{

  margin-top:18px;

  color:var(--muted);
}

@media(max-width:900px){

  .hero{

    flex-direction:column;

    align-items:flex-start;
  }

  .featured-panel{

    width:100%;
  }

  .modal-content{

    grid-template-columns:1fr;
  }

  .modal-image img{

    height:420px;
  }

}

@media(max-width:768px){

  .mobile-menu-btn{

    display:flex;
  }

  #commandButton,
  #randomBtn{

    display:none;
  }

  .navbar{

    height:62px;

    padding:0 14px;
  }

  .hero{

    padding:90px 14px 30px;

    gap:24px;

    min-height:auto;
  }

  .hero h1{

    font-size:44px;

    max-width:240px;
  }

  .hero-description{

    font-size:13px;
  }

  main{

    padding:18px 14px 100px;
  }

  .controls{

    flex-direction:column;
  }

  .filters{

    width:100%;
  }

  .filters select{

    flex:1;
  }

  .archive-grid{

    grid-template-columns:
    repeat(2,1fr);

    gap:10px;
  }

  .card{

    border-radius:16px;
  }

  .card-content{

    padding:10px;
  }

  .card-title{

    font-size:13px;
  }

  .card-meta{

    font-size:10px;
  }

  .modal{

    align-items:flex-end;
  }

  .modal-content{

    width:100%;

    height:100%;

    max-height:100%;

    border-radius:0;
  }

  .modal-info{

    padding:20px;
  }

  .modal-info h2{

    font-size:34px;
  }

  .modal-buttons{

    flex-direction:column;
  }

}
/* CUSTOM SCROLLBAR */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#0b0f14;
}

::-webkit-scrollbar-thumb{

  background:linear-gradient(
    180deg,
    #7c9cff,
    #4b6fff
  );



  border:2px solid #0b0f14;

}

::-webkit-scrollbar-thumb:hover{

  background:linear-gradient(
    180deg,
    #9bb4ff,
    #5f7fff
  );

}

/* FIREFOX */

*{
  scrollbar-width:thin;
  scrollbar-color:#7c9cff #0b0f14;
}
.notice-overlay{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.82);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:99999;
}

.notice-box{

  width:min(460px,92vw);

  background:#0d1117;

  border:1px solid #202938;

  border-radius:24px;

  padding:28px;

  animation:fadeUp .3s ease;
}

.notice-top{

  font-size:11px;

  letter-spacing:.25em;

  color:#7c9cff;

  margin-bottom:14px;
}

.notice-content h2{

  font-size:34px;

  margin-bottom:18px;
}

.notice-content p{

  color:#98a2b3;

  line-height:1.8;
}

.notice-warning{

  margin-top:18px;

  padding:16px;

  border-radius:16px;

  background:#131922;

  color:#d7e1ff;

  font-size:13px;

  line-height:1.7;
}

#noticeBtn{

  width:100%;

  height:54px;

  margin-top:24px;

  border:none;

  border-radius:14px;

  background:#7c9cff;

  color:#081018;

  font-weight:700;

  cursor:pointer;
}